Vanipedia - User contributions [en]

Main Page

2026-11-14T04:06:22Z

Kashya:

__NOTITLE__
__NOTOC__
<div id="vani-home" class="vp-static-home">

<div class="vp-home-hero">
<div class="vp-home-portrait">[[File:Srila-Prabhupada-Hero-07.jpg|frameless|220px|link=|alt=Śrīla Prabhupāda]]</div>
<div class="vp-home-hero-copy">
<div class="vani-hero-petal-title">Vanipedia</div>
<h1>Śrīla Prabhupāda</h1>
<p class="vp-home-role">[https://dev.vanipedia.org/wiki/Srila_Prabhupada:_The_Founder-Acarya_of_ISKCON_-_A_GBC_Foundational_Document Founder-Ācārya and Preeminent Śikṣā-Guru]</p>
<p class="vp-home-organization">of the International Society for Krishna Consciousness</p>
<p class="vp-home-who">[[Who_Is_Śrīla_Prabhupāda|Who Is Śrīla Prabhupāda]]</p>
</div>
</div>

<html>
<style>
.vp-countdown-card {
background: linear-gradient(135deg, #1e353a 0%, #345B63 100%);
border: 1px solid rgba(212, 175, 55, 0.45);
border-radius: 10px;
padding: 12px 20px;
margin: 12px auto;
max-width: 780px;
text-align: center;
color: #f7f3e8;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
font-family: sans-serif;
}
.vp-cd-line1 {
font-size: 1.05rem;
font-weight: 700;
color: #ffd97d;
letter-spacing: 0.3px;
margin-bottom: 10px;
line-height: 1.35;
}
.vp-cd-line1 .vp-cd-sub {
font-size: 0.9rem;
font-weight: 400;
color: #d0dfe2;
margin-left: 6px;
}
.vp-countdown-grid {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.vp-cd-box {
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 217, 125, 0.3);
border-radius: 8px;
min-width: 90px;
padding: 10px 14px;
display: flex;
flex-direction: column;
align-items: center;
}
.vp-cd-box span {
font-size: 1.85rem;
font-weight: 800;
color: #ffffff;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.vp-cd-box small {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffd97d;
margin-top: 4px;
}
</style>

<div id="vp-50th-countdown" class="vp-countdown-card">
<div class="vp-cd-line1">Countdown to Śrīla Prabhupāda's 50th Vapu Disappearance Anniversary<span class="vp-cd-sub"><br>• November 2, 2027 • 50 Years of Serving in Separation •</span>
</div>
<div class="vp-countdown-grid">
<div class="vp-cd-box"><span id="vp-cd-days">--</span><small>Days</small></div>
<div class="vp-cd-box"><span id="vp-cd-hours">--</span><small>Hours</small></div>
<div class="vp-cd-box"><span id="vp-cd-mins">--</span><small>Minutes</small></div>
<div class="vp-cd-box"><span id="vp-cd-secs">--</span><small>Seconds</small></div>
</div>
</div>

<script>
(function() {
var targetTime = new Date('2027-11-02T00:00:00+05:30').getTime();
function tick() {
var diff = Math.max(0, targetTime - Date.now());
var d = document.getElementById('vp-cd-days');
var h = document.getElementById('vp-cd-hours');
var m = document.getElementById('vp-cd-mins');
var s = document.getElementById('vp-cd-secs');
if (d) d.textContent = Math.floor(diff / 86400000);
if (h) h.textContent = String(Math.floor((diff / 3600000) % 24)).padStart(2, '0');
if (m) m.textContent = String(Math.floor((diff / 60000) % 60)).padStart(2, '0');
if (s) s.textContent = String(Math.floor((diff / 1000) % 60)).padStart(2, '0');
}
tick();
setInterval(tick, 1000);
})();
</script>
</html>

<div class="vp-portal-grid vp-primary-grid">
<div class="vp-portal-card" data-vp-rollout="articles">
<div class="vp-portal-image">[[File:Srila-Prabhupada-Hero-01.jpg|frameless|360px|link=Category:Vanipedia_Gemini_-_Articles|alt=Śrīla Prabhupāda speaking to his students]]</div>
<div class="vp-portal-copy"><h2>[[:Category:Vanipedia_Gemini_-_Articles|Vanipedia Articles]]</h2><p>Explore articles by subject or browse the complete A–Z list.</p><span class="vp-rollout-toggle" role="button" tabindex="0" aria-expanded="false">Browse articles <span aria-hidden="true">⌄</span></span></div>
<div class="vp-rollout-panel vp-articles-panel"><span class="vp-rollout-heading">Explore Vanipedia Articles</span><span class="vp-article-all">[[:Category:Vanipedia_Gemini_-_Articles|Browse all articles A–Z]]</span><span class="vp-rollout-heading vp-article-categories-heading">Browse by category</span><span class="vp-rollout-options vp-article-options"><span>[[:Category:Vanipedia_Articles_-_Chanting_the_Holy_Names_of_God|Chanting the Holy Names of God]]</span><span>[[:Category:Vanipedia_Articles_-_Devotees_of_God|Devotees of God]]</span><span>[[:Category:Vanipedia_Articles_-_Exploring_the_Bhagavad-gītā_As_It_Is|Exploring the Bhagavad-gītā As It Is]]</span><span>[[:Category:Vanipedia_Articles_-_Kṛṣṇa_Consciousness|Kṛṣṇa Consciousness]]</span><span>[[:Category:Vanipedia_Articles_-_Kṛṣṇa_Consciousness_Movement|Kṛṣṇa Consciousness Movement]]</span><span>[[:Category:Vanipedia_Articles_-_Kṛṣṇa_The_Supreme_Personality_of_Godhead|Kṛṣṇa The Supreme Personality of Godhead]]</span><span>[[:Category:Vanipedia_Articles_-_Rādhārāṇī_-_The_Hlādinī-śakti_&_Her_Expansions|Rādhārāṇī - The Hlādinī-śakti & Her Expansions]]</span><span>[[:Category:Vanipedia_Articles_-_The_Essence_of_the_Śrīmad-Bhāgavatam|The Essence of the Śrīmad-Bhāgavatam]]</span><span>[[:Category:Vanipedia_Articles_-_The_Science_of_Devotional_Service_to_God|The Science of Devotional Service to God]]</span><span>[[:Category:Vanipedia_Articles_-_The_Science_of_Knowing_God|The Science of Knowing God]]</span><span>[[:Category:Vanipedia_Articles_-_The_Science_of_the_Soul_(Jīva-tattva)|The Science of the Soul (Jīva-tattva)]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_What_Is_Materialism|Understanding What Is Materialism]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_What_Is_Spiritualism|Understanding What Is Spiritualism]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_What_Is_Transcendence|Understanding What Is Transcendence]]</span><span>[[:Category:Vanipedia_Articles_-_Who_Is_Lord_Caitanya_Mahāprabhu|Who Is Lord Caitanya Mahāprabhu]]</span><span>[[:Category:Vanipedia_Articles_-_Who_Is_Śrīla_Prabhupāda|Who Is Śrīla Prabhupāda]]</span><span>[[:Category:Vanipedia_Articles_-_Ācārya,_Guru_and_Spiritual_Master|Ācārya, Guru and Spiritual Master]]</span><span>[[:Category:Vanipedia_Articles_-_Śrīla_Prabhupāda_Trains_His_Disciples|Śrīla Prabhupāda Trains His Disciples]]</span><span>[[:Category:Vanipedia_Articles_-_Speakers_of_the_Śrīmad-Bhāgavatam|Speakers of the Śrīmad-Bhāgavatam]]</span><span>[[:Category:Vanipedia_Articles_-_Achieving_Perfection_through_Bhakti|Achieving Perfection through Bhakti]]</span><span>[[:Category:Vanipedia_Articles_-_Civilization_vs._Animal_Life|Civilization vs. Animal Life]]</span><span>[[:Category:Vanipedia_Articles_-_Education,_Child-rearing,_and_Gurukula|Education, Child-rearing, and Gurukula]]</span><span>[[:Category:Vanipedia_Articles_-_Establishing_God_in_Modern_Society|Establishing God in Modern Society]]</span><span>[[:Category:Vanipedia_Articles_-_Humility,_Tolerance,_and_Vaiṣṇava_Etiquette|Humility, Tolerance, and Vaiṣṇava Etiquette]]</span><span>[[:Category:Vanipedia_Articles_-_Lessons_from_Śrīla_Bhaktisiddhānta_Sarasvatī|Lessons from Śrīla Bhaktisiddhānta Sarasvatī]]</span><span>[[:Category:Vanipedia_Articles_-_Preaching:_The_Best_Welfare_Activity|Preaching: The Best Welfare Activity]]</span><span>[[:Category:Vanipedia_Articles_-_Refuting_Atheism_and_Material_Science|Refuting Atheism and Material Science]]</span><span>[[:Category:Vanipedia_Articles_-_Refuting_Māyāvāda_and_Impersonalism|Refuting Māyāvāda and Impersonalism]]</span><span>[[:Category:Vanipedia_Articles_-_The_Distinction_Between_Body,_Mind,_and_Soul|The Distinction Between Body, Mind, and Soul]]</span><span>[[:Category:Vanipedia_Articles_-_The_Goal:_Eternal_Service_in_the_Spiritual_Sky|The Goal: Eternal Service in the Spiritual Sky]]</span><span>[[:Category:Vanipedia_Articles_-_The_Guru_and_Disciplic_Succession|The Guru and Disciplic Succession]]</span><span>[[:Category:Vanipedia_Articles_-_The_Mechanics_of_Karma_and_Reincarnation|The Mechanics of Karma and Reincarnation]]</span><span>[[:Category:Vanipedia_Articles_-_The_Mechanics_of_Material_Nature_(Prakṛti)|The Mechanics of Material Nature (Prakṛti)]]</span><span>[[:Category:Vanipedia_Articles_-_The_Miseries_of_Material_Life|The Miseries of Material Life]]</span><span>[[:Category:Vanipedia_Articles_-_The_Mission_of_the_Spiritual_Master|The Mission of the Spiritual Master]]</span><span>[[:Category:Vanipedia_Articles_-_The_Principles_of_Saranāgati_(Full_Surrender)|The Principles of Saranāgati (Full Surrender)]]</span><span>[[:Category:Vanipedia_Articles_-_The_Stages_of_Spiritual_Evolution_(Bhakti-latā)|The Stages of Spiritual Evolution (Bhakti-latā)]]</span><span>[[:Category:Vanipedia_Articles_-_The_Three_Modes_of_Material_Nature_(Guṇas)|The Three Modes of Material Nature (Guṇas)]]</span><span>[[:Category:Vanipedia_Articles_-_The_Vision_for_the_International_Society_(ISKCON)|The Vision for the International Society (ISKCON)]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_the_Spiritual_World_(Vaikuṇṭha)|Understanding the Spiritual World (Vaikuṇṭha)]]</span><span>[[:Category:Vanipedia_Articles_-_Acintya-bhedābheda-tattva:_The_Inconceivable_Unity|Acintya-bhedābheda-tattva: The Inconceivable Unity]]</span><span>[[:Category:Vanipedia_Articles_-_Demigods:_Their_Position_and_Service|Demigods: Their Position and Service]]</span><span>[[:Category:Vanipedia_Articles_-_Distinguishing_Dharma_from_Mental_Concoction|Distinguishing Dharma from Mental Concoction]]</span><span>[[:Category:Vanipedia_Articles_-_False_Ego_and_Material_Identification|False Ego and Material Identification]]</span><span>[[:Category:Vanipedia_Articles_-_Kṛṣṇa's_Supreme_Position_and_Opulences|Kṛṣṇa's Supreme Position and Opulences]]</span><span>[[:Category:Vanipedia_Articles_-_Leadership,_Government,_and_the_Ideal_Ruler|Leadership, Government, and the Ideal Ruler]]</span><span>[[:Category:Vanipedia_Articles_-_Lessons_from_Arjuna’s_Dilemma|Lessons from Arjuna’s Dilemma]]</span><span>[[:Category:Vanipedia_Articles_-_Lessons_from_Dhruva_Mahārāja|Lessons from Dhruva Mahārāja]]</span><span>[[:Category:Vanipedia_Articles_-_Lessons_from_Lord_Brahmā|Lessons from Lord Brahmā]]</span><span>[[:Category:Vanipedia_Articles_-_Marriage_and_Family_Life|Marriage and Family Life]]</span><span>[[:Category:Vanipedia_Articles_-_Modern_Education_and_Spiritual_Knowledge|Modern Education and Spiritual Knowledge]]</span><span>[[:Category:Vanipedia_Articles_-_Simple_Living_and_High_Thinking|Simple Living and High Thinking]]</span><span>[[:Category:Vanipedia_Articles_-_The_Art_of_Distributing_Kṛṣṇa_Consciousness|The Art of Distributing Kṛṣṇa Consciousness]]</span><span>[[:Category:Vanipedia_Articles_-_The_Energies_of_the_Lord:_Internal_and_External|The Energies of the Lord: Internal and External]]</span><span>[[:Category:Vanipedia_Articles_-_The_Importance_of_Association_(Sādhu-saṅga)|The Importance of Association (Sādhu-saṅga)]]</span><span>[[:Category:Vanipedia_Articles_-_The_Pañca-tattva:_One_Truth_in_Five_Forms|The Pañca-tattva: One Truth in Five Forms]]</span><span>[[:Category:Vanipedia_Articles_-_The_Process_of_Śravaṇaṁ_(Hearing)|The Process of Śravaṇaṁ (Hearing)]]</span><span>[[:Category:Vanipedia_Articles_-_The_Renounced_Order_of_Sannyāsa|The Renounced Order of Sannyāsa]]</span><span>[[:Category:Vanipedia_Articles_-_The_Role_and_Protection_of_Women|The Role and Protection of Women]]</span><span>[[:Category:Vanipedia_Articles_-_The_Rules_and_Regulations_of_Sadhana|The Rules and Regulations of Sadhana]]</span><span>[[:Category:Vanipedia_Articles_-_The_Science_of_Prasādam_Distribution|The Science of Prasādam Distribution]]</span><span>[[:Category:Vanipedia_Articles_-_The_Soul's_Relationship_with_the_Supersoul|The Soul's Relationship with the Supersoul]]</span><span>[[:Category:Vanipedia_Articles_-_The_Spirit_of_Preaching_and_Books|The Spirit of Preaching and Books]]</span><span>[[:Category:Vanipedia_Articles_-_The_Standard_of_Deity_Worship_and_Arcanā|The Standard of Deity Worship and Arcanā]]</span><span>[[:Category:Vanipedia_Articles_-_The_Teachings_of_Śrī_Caitanya-caritāmṛta|The Teachings of Śrī Caitanya-caritāmṛta]]</span><span>[[:Category:Vanipedia_Articles_-_Viṣṇu-smaraṇaṁ:_Constant_Remembrance|Viṣṇu-smaraṇaṁ: Constant Remembrance]]</span><span>[[:Category:Vanipedia_Articles_-_Yukta-vairāgya:_Scientific_Dovetailing_of_Energy|Yukta-vairāgya: Scientific Dovetailing of Energy]]</span><span>[[:Category:Vanipedia_Articles_-_Humanity,_Society_and_Civilization|Humanity, Society and Civilization]]</span><span>[[:Category:Vanipedia_Articles_-_Knowing_Nārada_Muni|Knowing Nārada Muni]]</span><span>[[:Category:Vanipedia_Articles_-_Science_of_Self_and_God_Realization|Science of Self and God Realization]]</span><span>[[:Category:Vanipedia_Articles_-_Scriptures,_Śāstra_and_Books|Scriptures, Śāstra and Books]]</span><span>[[:Category:Vanipedia_Articles_-_The_Mind,_Intelligence,_and_Senses|The Mind, Intelligence, and Senses]]</span><span>[[:Category:Vanipedia_Articles_-_The_Science_of_Loving_God|The Science of Loving God]]</span><span>[[:Category:Vanipedia_Articles_-_The_Science_of_Thinking,_Feeling_and_Willing|The Science of Thinking, Feeling and Willing]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Accepting_and_Rejecting|Understanding Accepting and Rejecting]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Conditioned_Souls|Understanding Conditioned Souls]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Death|Understanding Death]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Demons|Understanding Demons]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Divinity|Understanding Divinity]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Economic_Development|Understanding Economic Development]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Freedom|Understanding Freedom]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Happiness_and_Distress|Understanding Happiness and Distress]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Intelligence|Understanding Intelligence]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Liberation_and_Bondage|Understanding Liberation and Bondage]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Mission_and_Preaching|Understanding Mission and Preaching]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Sense_Gratification|Understanding Sense Gratification]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Spiritual_Happiness|Understanding Spiritual Happiness]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Vedic_Culture_and_Wisdom|Understanding Vedic Culture and Wisdom]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_What_Is_Knowledge|Understanding What Is Knowledge]]</span><span>[[:Category:Vanipedia_Articles_-_Understanding_Yoga|Understanding Yoga]]</span><span>[[:Category:Vanipedia_Articles_-_June_2026_and_After|June 2026 and After]]</span></span></div></div>
<div class="vp-portal-card" data-vp-rollout="questions">
<div class="vp-portal-image">[[File:Srila-Prabhupada-Hero-02.jpg|frameless|360px|link=Compilation:Questions_to_Prabhupada|alt=Śrīla Prabhupāda answering questions]]</div>
<div class="vp-portal-copy"><h2>[[Compilation:_Questions_to_Prabhupada|Questions to Śrīla Prabhupāda]]</h2><p>Explore his answers to questions about spiritual life and practice.</p><span class="vp-rollout-toggle" role="button" tabindex="0" aria-expanded="false">Browse questions <span aria-hidden="true">⌄</span></span></div>
<div class="vp-rollout-panel"><span class="vp-rollout-heading">Questions and Answers</span><span class="vp-rollout-options"><span>[[Compilation:_Questions_to_Prabhupada|Browse questions to Śrīla Prabhupāda]]</span></span></div>
</div>
<div class="vp-portal-card" data-vp-rollout="media">
<div class="vp-portal-image">[[File:Srila-prabhupada-with-the-original-srimad-bhagavatam.jpg|frameless|360px|link=Category:Srila_Prabhupada_in_the_Media|alt=Śrīla Prabhupāda with the original Śrīmad-Bhāgavatam]]</div>
<div class="vp-portal-copy"><h2>[[:Category:Srila_Prabhupada_in_the_Media|Śrīla Prabhupāda in Media]]</h2><p>Discover contemporary reports, interviews, and other media.</p><span class="vp-rollout-toggle" role="button" tabindex="0" aria-expanded="false">Browse media <span aria-hidden="true">⌄</span></span></div>
<div class="vp-rollout-panel"><span class="vp-rollout-heading">Browse media by year</span><span class="vp-rollout-options vp-year-options"><span>[[Srila_Prabhupada_in_the_Media_-_1965|1965]]</span><span>[[Srila_Prabhupada_in_the_Media_-_1966|1966]]</span><span>[[Srila_Prabhupada_in_the_Media_-_1967|1967]]</span><span>[[Srila_Prabhupada_in_the_Media_-_1968|1968]]</span><span>[[Srila_Prabhupada_in_the_Media_-_1969|1969]]</span><span>[[Srila_Prabhupada_in_the_Media_-_1970|1970]]</span><span>[[Srila_Prabhupada_in_the_Media_-_1971|1971]]</span><span>[[Srila_Prabhupada_in_the_Media_-_1972|1972]]</span><span>[[Srila_Prabhupada_in_the_Media_-_1973|1973]]</span><span>[[Srila_Prabhupada_in_the_Media_-_1974|1974]]</span><span>[[Srila_Prabhupada_in_the_Media_-_1975|1975]]</span><span>[[Srila_Prabhupada_in_the_Media_-_1976|1976]]</span><span>[[Srila_Prabhupada_in_the_Media_-_1977|1977]]</span></span><span class="vp-media-all">[[:Category:Srila_Prabhupada_in_the_Media|Browse all media]]</span></div>
</div>
<div class="vp-portal-card" data-vp-rollout="memories">
<div class="vp-portal-image">[[File:Srila-Prabhupada-Hero-03.jpg|frameless|360px|link=Remembering_Śrīla_Prabhupāda|alt=Śrīla Prabhupāda with his disciples]]</div>
<div class="vp-portal-copy"><h2>[[Remembering_Śrīla_Prabhupāda|Disciples Remember Śrīla Prabhupāda]]</h2><p>Hear personal recollections from disciples and associates.</p><span class="vp-rollout-toggle" role="button" tabindex="0" aria-expanded="false">Browse memories <span aria-hidden="true">⌄</span></span></div>
<div class="vp-rollout-panel"><span class="vp-rollout-heading">Remembrances</span><span class="vp-rollout-options"><span>[[Remembering_Śrīla_Prabhupāda|Browse all remembrances]]</span></span></div>
</div>
</div>

<div class="vp-portal-grid vp-secondary-grid">
<div class="vp-portal-card" data-vp-rollout="timeline" data-vp-rollout-side="left">
<div class="vp-portal-image">[[File:Srila-Prabhupada-Hero-04.jpg|frameless|360px|link=Timeline_of_Srila_Prabhupada's_Life|alt=Śrīla Prabhupāda during his travels]]</div>
<div class="vp-portal-copy"><h2>[[Timeline_of_Srila_Prabhupada's_Life|Timeline of Life]]</h2><p>Follow key events in Śrīla Prabhupāda’s life by year.</p><span class="vp-rollout-toggle" role="button" tabindex="0" aria-expanded="false">Choose a year <span aria-hidden="true">⌄</span></span></div>
<div class="vp-rollout-panel"><span class="vp-rollout-heading">Browse the Timeline by Year</span><span class="vp-rollout-options vp-year-options"><span>[[Timeline_of_Srila_Prabhupada's_Life|1896–1964]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1965|1965]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1966|1966]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1967|1967]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1968|1968]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1969|1969]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1970|1970]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1971|1971]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1972|1972]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1973|1973]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1974|1974]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1975|1975]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1976|1976]]</span><span>[[Timeline_of_Srila_Prabhupada's_Life_-_1977|1977]]</span></span></div>
</div>
<div class="vp-portal-card" data-vp-rollout="languages" data-vp-rollout-side="right">
<div class="vp-portal-image">[[File:Srila-Prabhupada-Hero-05.jpg|frameless|360px|link=Category:Participating_Languages_-_Main_Pages|alt=Śrīla Prabhupāda sharing his teachings with people around the world]]</div>
<div class="vp-portal-copy"><h2>[[:Category:Participating_Languages_-_Main_Pages|Participating Languages]]</h2><p>Read Vanipedia in its participating languages.</p><span class="vp-rollout-toggle" role="button" tabindex="0" aria-expanded="false">Choose a language <span aria-hidden="true">⌄</span></span></div>
<div class="vp-rollout-panel"><span class="vp-rollout-heading">Vanipedia Languages</span><span class="vp-rollout-options vp-language-options"><span>[[ES/Spanish_Main_Page|<span class="vh-flag vh-flag-es"></span>Spanish]]</span><span>[[FR/French_Main_Page|<span class="vh-flag vh-flag-fr"></span>French]]</span><span>[[DE/German_Main_Page|<span class="vh-flag vh-flag-de"></span>German]]</span><span>[[IT/Italian_Main_Page|<span class="vh-flag vh-flag-it"></span>Italian]]</span><span>[[RU/Russian_Main_Page|<span class="vh-flag vh-flag-ru"></span>Russian]]</span><span>[[HI/Hindi_Main_Page|<span class="vh-flag vh-flag-in"></span>Hindi]]</span><span>[[PTBR/Portuguese_Main_Page|<span class="vh-flag vh-flag-br"></span>Portuguese]]</span><span>[[PL/Polish_Main_Page|<span class="vh-flag vh-flag-pl"></span>Polish]]</span><span>[[BN/Bengali_Main_Page|<span class="vh-flag vh-flag-bd"></span>Bengali]]</span><span>[[ZH/Chinese_Main_Page|<span class="vh-flag vh-flag-cn"></span>Chinese]]</span><span>[[JA/Japanese_Main_Page|<span class="vh-flag vh-flag-jp"></span>Japanese]]</span><span>[[NL/Dutch_Main_Page|<span class="vh-flag vh-flag-nl"></span>Dutch]]</span><span>[[HR/Vanipedia_-_Main_Page|<span class="vh-flag vh-flag-hr"></span>Croatian]]</span><span>[[CS/Czech_Main_Page|<span class="vh-flag vh-flag-cz"></span>Czech]]</span><span>[[HU/Hungarian_Main_Page|<span class="vh-flag vh-flag-hu"></span>Hungarian]]</span></span></div>
</div>
</div>
</div>

MediaWiki:Common.js

2026-11-14T00:26:07Z

Kashya:

/* V176: remove legacy decorative cursor if it was left by cached site code. */
(function restoreNativeMainPageCursor() {
function clean() {
if (!document.body || !document.body.classList.contains("page-Main_Page")) return;
var cursor = document.getElementById("vh-cursor-pointer");
if (cursor) cursor.remove();
var injected = document.getElementById("vh-kill-windows-cursor");
if (injected) injected.remove();
document.body.classList.remove("vh-cursor-link", "vh-cursor-click");
}
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", clean);
else clean();
})();

/* Any JavaScript here will be loaded for all users on every page load. */
if (mw.config.get('wgPageName' ) === 'Krishna_says_in_Bhagavad-gita') {
/* switch tooltip texts from content-div to label-div */
const v_labels = Array.from(document.getElementsByClassName("tabs-label"));
const v_content = Array.from(document.getElementsByClassName("tabs-content"));
for (var i = 0; i < v_labels.length; i++) {
v_labels[i].title = v_content[i].title;
v_content[i].title = "";
}
/* adjust wikitables */
var arr = Array.from(document.getElementsByClassName("wikitable"));
for (var t = 0; t < arr.length; t++) {
/* insert THEAD in wikitable */
var thead = document.createElement("thead");
thead.style.display = "block";
var wtbl = arr[t];
wtbl.insertBefore(thead, wtbl.firstChild);
/* move first row of TBODY to THEAD */
thead.appendChild(wtbl.rows[0]);
/* make TBODY scrollable */
var tbody = wtbl.tBodies[0];
tbody.style.display = "block";
tbody.style.overflowY = "auto";
tbody.style.maxHeight = "500px";
for (var r = 0; r < wtbl.rows.length; r++) {
var row = wtbl.rows[r];
/* adjust column widths and hide from-until columns */
row.cells[0].classList = "cw_0";
row.cells[1].classList = "cw_150";
row.cells[2].classList = "cw_500";
/* mark the text */
if (r == 0) continue;
var v_text = row.cells[2].textContent;
var v_html = ""; var v_from = 0;
var marks = JSON.parse(row.cells[0].textContent.replaceAll("O", "[").replaceAll("C", "]"));
for (var m = 0; m < marks.length; m++) {
v_html +=
v_text.substr(v_from,marks[m][0]-v_from) + "<mark>" +
v_text.substr(marks[m][0],marks[m][1]-marks[m][0]+1) + "</mark>";
v_from = marks[m][1]+1;
}
v_html += v_text.substr(v_from);
row.cells[2].innerHTML = v_html;
}
}
}
// install Google Search
// document.write('<script type="text/javascript" src="'
// + 'http://vanipedia.org/w/index.php?title=MediaWiki:GoogleSearch.js'
// + '&action=raw&ctype=text/javascript"></' + 'script>');
// install JQuery
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:JQuery.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install WikEd toolbar and Vanify
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:Vaniquotes.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install Replace
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:TextboxReplace.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install Unify
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:Unify.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install Vanify
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:Vanify.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install Vani_suggest for diacritics auto-suggest pulldown on the search bar
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:Vani_suggest.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install previous/next links for video categories in all languages
//document.write('<script type="text/javascript" src="/navcat/navcat.js"></' + 'script>');
// Buttons
//addOnloadHook(function() {
//if (document.editform) {
//addPortletLink("p-cactions", "javascript:Unify()", "unify", "ca-unify", "Convert Balarama fonts to Unicode", "");
// addPortletLink("p-cactions", "javascript:Vanify()", "vanify", "ca-vanify", "Corrects vani markup", "");
// addPortletLink('p-cactions', 'javascript:format()', 'format', 'ca-format', 'Format article', '');
//addPortletLink('p-cactions', 'javascript:wpTextboxReplace()', 'Replace', 'ca-replace', 'Replaces text in the edit window', 'R');
//}
//});
// end Buttons
// --- YouTube Random Shorts (Kasya) ---
$(document).ready(function() {
var $widget = $('.vani-shorts-viewport');
if ($widget.length) {
var $viewport = $widget;
var $titleFrame = $widget.find('.vani-shorts-title');
new mw.Api().get({
action: 'query',
prop: 'revisions',
titles: 'VanimediaMayapur YouTube SHORTS List',
rvprop: 'content',
format: 'json'
}).done(function(data) {
try {
var pages = data.query.pages;
var pageId = Object.keys(pages)[0];
if (pageId == "-1" || !pages[pageId].revisions) {
$viewport.text("Database list page not found.");
return;
}
// FIXED: Corrected MediaWiki revision array syntax lookup
var rawWikiText = pages[pageId].revisions[0]['*'];
var lines = rawWikiText.split('\n');
var validShorts = [];
for (var i = 0; i < lines.length; i++) {
var line = $.trim(lines[i]);
if (line.indexOf('File:') === 0 && line.toLowerCase().indexOf('link=') !== -1) {
validShorts.push(line);
}
}
if (validShorts.length === 0) {
$viewport.text("No gallery entries recognized.");
return;
}
var randomLine = validShorts[Math.floor(Math.random() * validShorts.length)];
var parts = randomLine.split('|');
// Reset defaults before parsing line elements
var rawUrl = "";
for (var j = 0; j < parts.length; j++) {
var part = $.trim(parts[j]);
if (part.toLowerCase().indexOf('link=') === 0) {
rawUrl = part.substring(5).trim();
}
}
// Clean all template formatting brackets, space characters, and hidden control markers
var urlCleaned = rawUrl.replace(/[\u200e\u200f\s\}\}\]]/g, '');
// Direct YouTube Alphanumeric Pattern Matcher
var idRegex = /(?:shorts\/|v=|embed\/|\/)([a-zA-Z0-9_-]{11})/;
var matchResults = urlCleaned.match(idRegex);
var videoId = "";
if (matchResults && matchResults[1]) {
// FIXED: Grabbed index 1 to pull the standalone 11-digit ID without any slashes
videoId = matchResults[1].trim();
}
if (videoId && videoId.length === 11) {
// FIXED: Isolated to inject ONLY the video player iframe at the correct 280px width
var embedUrl = "https://www.youtube.com/embed/" + videoId;
$viewport.html('<iframe width="280" height="225" src="' + embedUrl + '" frameborder="0" allowfullscreen style="border-radius: 8px; border: none;"></iframe>');
} else {
$viewport.html("<div style='color:#c0392b; padding:10px; font-size:11px;'>Invalid video ID sequence extracted.</div>");
}
} catch (err) {
console.error("Shorts engine exception:", err);
$viewport.text("Error handling text structure values.");
}
}).fail(function() {
$viewport.text("API connection failed.");
});
}
});
// Kasya
/* Open Timeline links in a new tab ONLY on the Chapters page */
mw.hook('wikipage.content').add(function($content) {
// Check if we are exactly on the timeline page
if (mw.config.get('wgPageName') === "Chapters_in_Srila_Prabhupada's_Life") {
// If yes, apply the new tab rule to the table
$content.find('#mp-tfp a').attr('target', '_blank').attr('rel', 'noopener noreferrer');
}
});
// Wait for MediaWiki core modules and the DOM to load
mw.loader.using(['mediawiki.api', 'mediawiki.util']).then(function () {
$(document).ready(function () {
// 1. FIND THE "102 Languages" SIDEBAR SECTION
var $sidebarMenu = $('#p-102_Languages ul').first();
// Fallback in case your specific MediaWiki version formats the ID differently
if ($sidebarMenu.length === 0) {
$('.vector-menu-heading, .portal h3').each(function() {
// Looks for the heading text directly
if ($(this).text().trim() === '102 Languages') {
$sidebarMenu = $(this).closest('.vector-menu, .portal').find('ul').first();
}
});
}
// Exit if the 102 Languages menu isn't found on the page
if (!$sidebarMenu || $sidebarMenu.length === 0) return;
// 2. CREATE THE SEARCH BAR AS A MENU ITEM
var $searchLi = $('<li id="n-language-search" style="margin-top: 10px; margin-bottom: 5px; list-style: none;"></li>');
var $searchBox = $('<input type="text" id="sidebarLanguageSearch" placeholder="Search 102 Languages..." style="width: 100%; box-sizing: border-box; padding: 5px; font-size: 0.85em; border: 1px solid #a2a9b1; border-radius: 2px;" autocomplete="off" />');
// Container for the results (hidden by default)
var $resultsContainer = $('<ul id="sidebarLanguageResults" style="list-style: none; padding: 0; margin: 4px 0 0 0; max-height: 200px; overflow-y: auto; border: 1px solid #eaecf0; background: #ffffff; display: none;"></ul>');
// Build the menu item and append it to the sidebar
$searchLi.append($searchBox).append($resultsContainer);
$sidebarMenu.prepend($searchLi);
var api = new mw.Api();
var languageList = [];
// 3. FETCH LANGUAGES FROM THE CATEGORY VIA API IN THE BACKGROUND
api.get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:Languages_with_Total_Pages',
cmlimit: 'max',
format: 'json'
}).done(function (data) {
if (data.query && data.query.categorymembers) {
languageList = data.query.categorymembers.map(function (member) {
return {
title: member.title,
url: mw.util.getUrl(member.title)
};
});
}
});
// 4. ADD SEARCH FUNCTIONALITY TO THE SIDEBAR BOX
$('#sidebarLanguageSearch').on('keyup', function (e) {
e.stopPropagation();
var searchTerm = $(this).val().toLowerCase();
$resultsContainer.empty();
// Hide the results box if the search is empty
if (searchTerm.length === 0) {
$resultsContainer.hide();
return;
}
// Filter the fetched languages
var filteredLanguages = languageList.filter(function (lang) {
return lang.title.toLowerCase().indexOf(searchTerm) > -1;
});
// Show results container
$resultsContainer.show();
// Append results using Vector's standard dark text color
if (filteredLanguages.length > 0) {
filteredLanguages.forEach(function (lang) {
$resultsContainer.append('<li style="padding: 4px 6px; border-bottom: 1px solid #f8f9fa;"><a href="' + lang.url + '" style="text-decoration: none; color: #0645ad; display: block; font-size: 0.9em;">' + lang.title + '</a></li>');
});
} else {
$resultsContainer.append('<li style="padding: 4px 6px; color: #72777d; font-size: 0.9em;">No languages found</li>');
}
});
// Prevent typing from accidentally triggering global keyboard shortcuts
$('#sidebarLanguageSearch').on('keydown', function(e) {
e.stopPropagation();
});
// Optional: Hide results when clicking outside the sidebar search
$(document).on('click', function(e) {
if (!$(e.target).closest('#n-language-search').length) {
$resultsContainer.hide();
}
});
// Re-show results if they click back into the search box
$('#sidebarLanguageSearch').on('click', function() {
if ($(this).val().length > 0) {
$resultsContainer.show();
}
});
});
});
// 5. SIDEBAR ACCORDION - STRICT LEFT-COLUMN ISOLATION & TRUE ACCORDION
(function() {
// 1. Tag ONLY menus physically located in the left sidebar
function tagSidebarMenus() {
var allMenus = document.querySelectorAll('.vector-menu');
for (var i = 0; i < allMenus.length; i++) {
var menu = allMenus[i];
// STRICT INCLUSION: Only tag menus inside the modern or legacy left sidebar containers
if (menu.closest('#vector-main-menu, #mw-panel, #mw-navigation')) {
menu.classList.add('vanipedia-sidebar-menu');
// Collapse them by default if they have a heading
if (menu.querySelector('.vector-menu-heading') && !menu.classList.contains('vanipedia-collapsed')) {
menu.classList.add('vanipedia-collapsed');
}
}
}
}
// Run tagging immediately, and again on load as a failsafe
tagSidebarMenus();
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', tagSidebarMenus);
}
// 2. Inject CSS targeted STRICTLY at our newly tagged custom class
var style = document.createElement('style');
style.textContent =
/* Widen only our tagged sidebar menus */
'.vanipedia-sidebar-menu { width: 185px !important; } ' +
/* Core functional hiding rule */
'.vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-content { display: none !important; } ' +
/* Bold, Dark Header */
'.vanipedia-sidebar-menu .vector-menu-heading { ' +
' cursor: pointer !important; ' +
' background-color: #2c4c50 !important; ' +
' border: 1px solid #1b3033 !important; ' +
' border-radius: 4px !important; ' +
' margin-bottom: 4px !important; ' +
' padding: 10px 12px !important; ' +
' font-weight: 600 !important; ' +
' color: #ffffff !important; ' +
' display: flex !important; ' +
' justify-content: space-between !important; ' +
' align-items: center !important; ' +
' gap: 10px !important; ' +
' transition: all 0.2s ease; ' +
'} ' +
/* Fix header corners when expanded */
'.vanipedia-sidebar-menu:not(.vanipedia-collapsed) .vector-menu-heading { ' +
' border-radius: 4px 4px 0 0 !important; ' +
' margin-bottom: 0 !important; ' +
'} ' +
/* Hover effect */
'.vanipedia-sidebar-menu .vector-menu-heading:hover { background-color: #385e63 !important; } ' +
/* The dropdown caret */
'.vanipedia-sidebar-menu .vector-menu-heading::after { ' +
' content: "▼"; ' +
' font-size: 0.75em; ' +
' color: #ffffff !important; ' +
' transition: transform 0.2s ease; ' +
'} ' +
/* Rotate the arrow when collapsed */
'.vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-heading::after { ' +
' transform: rotate(-90deg); ' +
'} ' +
/* The Expanded Content Area */
'.vanipedia-sidebar-menu .vector-menu-content { ' +
' background-color: #eaeff0 !important; ' +
' border: 1px solid #2c4c50 !important; ' +
' border-top: none !important; ' +
' border-radius: 0 0 4px 4px !important; ' +
' padding: 0 0 4px 0 !important; ' +
' margin-bottom: 6px !important; ' +
' box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important; ' +
'} ' +
/* Reset the list styles */
'.vanipedia-sidebar-menu .vector-menu-content ul { ' +
' list-style: none !important; ' +
' margin: 0 !important; ' +
' padding: 0 !important; ' +
'} ' +
/* Menu links */
'.vanipedia-sidebar-menu .vector-menu-content li a { ' +
' display: block !important; ' +
' padding: 8px 12px 8px 16px !important; ' +
' color: #1b3033 !important; ' +
' text-decoration: none !important; ' +
' border-left: 3px solid transparent !important; ' +
' border-bottom: 1px solid rgba(44, 76, 80, 0.1) !important; ' +
' transition: all 0.15s ease !important; ' +
'} ' +
/* Remove separator from last item */
'.vanipedia-sidebar-menu .vector-menu-content li:last-child a { ' +
' border-bottom: none !important; ' +
'} ' +
/* Hover effect for individual menu items */
'.vanipedia-sidebar-menu .vector-menu-content li a:hover { ' +
' background-color: #dbe4e6 !important; ' +
' border-left: 3px solid #2c4c50 !important; ' +
' color: #000000 !important; ' +
'} ';
document.head.appendChild(style);
// 3. Helper function to collapse all of our securely tagged menus
function collapseAllSidebarMenus() {
var menus = document.querySelectorAll('.vanipedia-sidebar-menu');
for (var i = 0; i < menus.length; i++) {
menus[i].classList.add('vanipedia-collapsed');
}
}
// 4. Intercept clicks for True Accordion Behavior
document.addEventListener('click', function(e) {
var heading = e.target.closest('.vector-menu-heading');
if (!heading) return;
// ONLY react if this click belongs to one of our tagged sidebar menus
var navContainer = heading.closest('.vanipedia-sidebar-menu');
if (navContainer) {
var isAlreadyOpen = !navContainer.classList.contains('vanipedia-collapsed');
// Forcefully collapse ALL left sidebar menus first
collapseAllSidebarMenus();
// Open the clicked one if it wasn't already open
if (!isAlreadyOpen) {
navContainer.classList.remove('vanipedia-collapsed');
}
e.stopPropagation();
e.preventDefault();
}
}, true);
})();
mw.loader.using('mediawiki.user').then(function() {
// Fetch the user's assigned groups
var userGroups = mw.config.get('wgUserGroups') || [];
// Define the roles that SHOULD see the administrative tabs
var isAuthorized = userGroups.includes('sysop') ||
userGroups.includes('interface-admin') ||
userGroups.includes('Editor');
// If the user is not in one of those groups, restrict the UI
if (!isAuthorized) {
document.body.classList.add('restricted-ui');
}
});
// Function to open accordion from TOC and jump there //
mw.hook('wikipage.content').add(function() {
function handleAccordionTOC(hash) {
if (!hash || hash === '#') return false;
try {
var targetId = hash.substring(1);
var targetElement = document.getElementById(targetId) || document.getElementById(decodeURIComponent(targetId));
if (!targetElement) return false;
var $target = $(targetElement);
// Match either h2 or h3
var $heading = $target.is('h2, h3') ? $target : $target.closest('h2, h3');
if (!$heading.length) return false;
var $accordion = $heading.next('.book-accordion');
// If the heading itself is not followed directly by an accordion,
// check if the heading is located INSIDE a parent accordion (e.g., nested h3)
var $parentAccordions = $heading.parents('.book-accordion');
// If there's no direct accordion next to it and it's not inside any accordion,
// let the browser handle standard jump.
if (!$accordion.length && !$parentAccordions.length) return false;
// 1. Open all ancestor accordions (if target heading is nested inside one)
$parentAccordions.each(function() {
var $parentCollapsible = $(this).children('.mw-collapsible');
if ($parentCollapsible.length && $parentCollapsible.hasClass('mw-collapsed')) {
var pId = $parentCollapsible.attr('id');
if (pId) {
var pToggleClass = pId.replace('mw-customcollapsible-', 'mw-customtoggle-');
$('.' + pToggleClass).first().click();
}
}
});
// 2. Open the accordion immediately following this heading (if present)
if ($accordion.length) {
var $collapsible = $accordion.children('.mw-collapsible, .mw-collapsible-content').first();
if (!$collapsible.length) {
$collapsible = $accordion.find('.mw-collapsible');
}
if ($collapsible.length && $collapsible.hasClass('mw-collapsed')) {
var collapsibleId = $collapsible.attr('id');
if (collapsibleId) {
var toggleClass = collapsibleId.replace('mw-customcollapsible-', 'mw-customtoggle-');
$('.' + toggleClass).first().click();
}
}
}
// Target element to scroll to (the accordion, or the heading itself if accordion is missing)
var $scrollTarget = $accordion.length ? $accordion : $heading;
// 3. Scroll to the visible section
setTimeout(function() {
$('html, body').animate({
scrollTop: $scrollTarget.offset().top - 75
}, 300);
}, 100);
// Return true to indicate we successfully handled the TOC accordion click
return true;
} catch (e) {
console.error("TOC Accordion script error:", e);
return false;
}
}
$(document).off('click.tocAccordion').on('click.tocAccordion', 'a[href^="#"]', function(e) {
if ($(this).closest('#toc, .toc, .vector-toc').length > 0) {
var href = $(this).attr('href');
// Run our function to see if this is an accordion/heading link
var isAccordion = handleAccordionTOC(href);
// ONLY stop the default browser jump if we handled it
if (isAccordion) {
e.preventDefault();
// Update the URL manually so the user can still share the link
if (history.pushState) {
history.pushState(null, null, href);
} else {
window.location.hash = href;
}
}
}
});
if (window.location.hash) {
setTimeout(function() {
handleAccordionTOC(window.location.hash);
}, 500);
}
});
/* Sticky burger menu - Pure Floating Dropdown (Forces Unpinned & Full Title) */
(function () {
let isMenuOpen = false;
// 1. Force the sidebar out of pinned mode and return menu into the dropdown container
function forceUnpinSidebar() {
document.documentElement.classList.remove('vector-feature-main-menu-pinned-enabled', 'vector-feature-main-menu-pinned-clientpref-1');
document.documentElement.classList.add('vector-feature-main-menu-pinned-disabled', 'vector-feature-main-menu-pinned-clientpref-0');
if (document.body) {
document.body.classList.remove('vector-feature-main-menu-pinned-enabled', 'vector-feature-main-menu-pinned-clientpref-1');
document.body.classList.add('vector-feature-main-menu-pinned-disabled', 'vector-feature-main-menu-pinned-clientpref-0');
}
// Clear stored pin preference
document.cookie = "vector-feature-main-menu-pinned=0; path=/; max-age=31536000";
try { localStorage.setItem('vector-feature-main-menu-pinned', '0'); } catch(e) {}
// If #vector-main-menu was moved into the pinned container, move it back into dropdown
const mainMenu = document.getElementById('vector-main-menu');
const unpinnedContainer = document.getElementById('vector-main-menu-unpinned-container') ||
document.querySelector('#vector-main-menu-dropdown .vector-dropdown-content');
const pinnedContainer = document.getElementById('vector-main-menu-pinned-container');
if (mainMenu && unpinnedContainer && pinnedContainer && pinnedContainer.contains(mainMenu)) {
unpinnedContainer.appendChild(mainMenu);
}
}
function getDropdownElement() {
return document.querySelector('#vector-main-menu-dropdown .vector-dropdown-content') ||
document.getElementById('vector-main-menu-dropdown-content') ||
document.getElementById('vector-main-menu-unpinned-container') ||
document.getElementById('vector-main-menu');
}
function openMenu(menuBtn) {
forceUnpinSidebar();
const checkbox = document.getElementById('vector-main-menu-dropdown-checkbox');
const dropdown = getDropdownElement();
if (!dropdown) return;
if (checkbox) {
checkbox.checked = true;
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
}
const rect = menuBtn.getBoundingClientRect();
dropdown.style.setProperty('position', 'fixed', 'important');
dropdown.style.setProperty('top', rect.bottom + 'px', 'important');
dropdown.style.setProperty('left', rect.left + 'px', 'important');
dropdown.style.setProperty('z-index', '99999', 'important');
dropdown.style.setProperty('max-height', (window.innerHeight - rect.bottom - 16) + 'px', 'important');
dropdown.style.setProperty('overflow-y', 'auto', 'important');
dropdown.style.setProperty('display', 'block', 'important');
dropdown.style.setProperty('visibility', 'visible', 'important');
dropdown.style.setProperty('opacity', '1', 'important');
dropdown.style.setProperty('background-color', 'var(--background-color-base, #ffffff)', 'important');
dropdown.style.setProperty('box-shadow', '0 4px 16px rgba(0, 0, 0, 0.2)', 'important');
dropdown.style.setProperty('border-radius', '4px', 'important');
isMenuOpen = true;
}
function closeMenu() {
const checkbox = document.getElementById('vector-main-menu-dropdown-checkbox');
const dropdown = getDropdownElement();
if (!dropdown) return;
if (checkbox) {
checkbox.checked = false;
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
}
dropdown.style.removeProperty('position');
dropdown.style.removeProperty('top');
dropdown.style.removeProperty('left');
dropdown.style.removeProperty('z-index');
dropdown.style.removeProperty('max-height');
dropdown.style.removeProperty('overflow-y');
dropdown.style.removeProperty('background-color');
dropdown.style.removeProperty('box-shadow');
dropdown.style.removeProperty('border-radius');
dropdown.style.setProperty('display', 'none', 'important');
dropdown.style.setProperty('visibility', 'hidden', 'important');
dropdown.style.setProperty('opacity', '0', 'important');
isMenuOpen = false;
}
function initStickyBurger() {
forceUnpinSidebar();
const stickyHeader = document.getElementById('vector-sticky-header');
if (!stickyHeader) return false;
if (document.getElementById('vanipedia-sticky-main-menu')) return true;
// 1. Create burger button
const menuBtn = document.createElement('div');
menuBtn.id = 'vanipedia-sticky-main-menu';
menuBtn.title = 'Main menu';
menuBtn.style.cursor = 'pointer';
menuBtn.className = 'vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--icon-only';
// 2. Add hamburger icon
const iconSpan = document.createElement('span');
iconSpan.className = 'vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu';
menuBtn.appendChild(iconSpan);
// 3. Toggle click handler (1st click opens, 2nd click rolls back)
menuBtn.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
if (isMenuOpen) {
closeMenu();
} else {
openMenu(menuBtn);
}
});
// 4. Inject into start container
let startContainer = stickyHeader.querySelector('.vector-sticky-header-start');
if (!startContainer) {
startContainer = document.createElement('div');
startContainer.className = 'vector-sticky-header-start';
stickyHeader.insertBefore(startContainer, stickyHeader.firstChild);
}
startContainer.insertBefore(menuBtn, startContainer.firstChild);
return true;
}
// 5. Close when clicking anywhere outside
document.addEventListener('click', function (e) {
if (!isMenuOpen) return;
const menuBtn = document.getElementById('vanipedia-sticky-main-menu');
const dropdown = getDropdownElement();
if (dropdown && menuBtn && !menuBtn.contains(e.target) && !dropdown.contains(e.target)) {
closeMenu();
}
});
// 6. Bootstrap initializer
if (!initStickyBurger()) {
const checkTimer = setInterval(function () {
if (initStickyBurger()) {
clearInterval(checkTimer);
}
}, 100);
setTimeout(function () { clearInterval(checkTimer); }, 4000);
}
mw.hook('wikipage.content').add(initStickyBurger);
$(initStickyBurger);
})();
/* Floating "Back to Top" Button Controller */
(function () {
function initBackToTop() {
if (document.getElementById('vanipedia-back-to-top')) return;
// 1. Create button element with an up-arrow SVG icon
const btn = document.createElement('button');
btn.id = 'vanipedia-back-to-top';
btn.title = 'Back to top';
btn.setAttribute('aria-label', 'Back to top');
btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>';
// 2. Smooth scroll to top on click
btn.addEventListener('click', function (e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// 3. Show button only after scrolling down 300px
function toggleVisibility() {
if (window.scrollY > 300) {
btn.classList.add('visible');
} else {
btn.classList.remove('visible');
}
}
window.addEventListener('scroll', toggleVisibility, { passive: true });
toggleVisibility();
document.body.appendChild(btn);
}
$(initBackToTop);
mw.hook('wikipage.content').add(initBackToTop);
})();
/* V176: Removed the homepage animation/random-content initializer. Main-page
features now remain exactly as curated in Main-Page.wikitext. */

// SAFE LEFT-ANCHORED SEARCH (STEP 18)
// ==========================================================================
$(document).ready(function() {
var $search = $('#p-search');
var $start = $('.vector-header-start');
if ($search.length && $start.length && !$start.find('#p-search').length) {
$start.append($search);
}
});
/* ======================================================================
STEP 59: REMOVE TOP BAR HOVER HELP TEXTS (BROWSER TOOLTIPS)
====================================================================== */
function removeTopBarHelpTexts() {
var selectors = [
'#mw-head [title]',
'.vector-header [title]',
'#vanipedia-header-title',
'.vh-header-title',
'.vanipedia-header-title',
'#p-logo [title]',
'#p-logo a',
'header [title]',
'#p-personal [title]',
'#p-search [title]',
'.vector-user-menu [title]',
'#pt-login [title]',
'#pt-anonuserpage [title]',
'#pt-anontalk [title]',
'.vector-menu [title]'
];
$(selectors.join(', ')).removeAttr('title');
// Aggressively remove title from all top bar elements
$('#mw-head, .vector-header, header, .vector-header-container').find('*').removeAttr('title');
}
function initSanctuaryTitle() {
$('.vh-sanctuary-title a').each(function () {
var $link = $(this);
$link.removeClass('vh-title-morph');
$link.find('.vh-title-hover, .vh-title-default').remove();
$link.text('Who Is Śrīla Prabhupāda');
});
}
$(document).ready(function () {
removeTopBarHelpTexts();
initSanctuaryTitle();
setTimeout(removeTopBarHelpTexts, 400);
setTimeout(removeTopBarHelpTexts, 1500);
});
// ==========================================================================
/* V175: decorative cursor code removed; the native system cursor is retained. */

/* ==========================================================================
STEP 92: PERMANENT BOTTOM NAVIGATION BAR (MAIN PAGE & REGULAR WIKI PAGES)
- Fixed at bottom of screen, permanently visible while scrolling.
- Core Principles (/wiki/Vanipedia_Vision)
- Volunteer (/wiki/Vaniseva)
- Community (/wiki/Vanipedia_Community)
- Contact (/contact.php, opens in new window)
- Donate (/wiki/Special:IframePage)
========================================================================== */
(function initPermanentBottomBar() {
function isEntryPage() {
return (
document.body.classList.contains('ext-vp3d-fullscreen') ||
!!document.querySelector('.vp-entry3d-container') ||
!!document.querySelector('.vp-entry3d-wrapper') ||
window.location.pathname === '/' ||
(window.location.pathname === '/index.php' && !window.location.search) ||
(window.mw && mw.config && (mw.config.get('wgPageName') === 'Entry_Page' || mw.config.get('wgTitle') === 'Entry Page'))
);
}
/* V190: mobile footer navigation starts at Home/Main Page, with reachable horizontal overflow. */
function updateBottomBarLayout(bar) {
if (!bar) return;
var mobile = window.innerWidth <= 999 || document.body.classList.contains('skin-minerva');
var inner = bar.querySelector('.vh-bottom-bar-inner');
var links = bar.querySelector('.vh-bottom-nav-links');
var left = bar.querySelector('.vh-bottom-bar-left-space');
var right = bar.querySelector('.vh-bottom-bar-right-space');
if (!inner || !links) return;
inner.style.setProperty('padding', mobile ? '0 10px' : '0 24px', 'important');
inner.style.setProperty('min-width', '0', 'important');
if (mobile) inner.style.setProperty('justify-content', 'flex-start', 'important');
else inner.style.removeProperty('justify-content');
links.style.setProperty('justify-content', mobile ? 'flex-start' : 'center', 'important');
links.style.setProperty('flex', mobile ? '1 1 auto' : '0 0 auto', 'important');
links.style.setProperty('width', mobile ? '100%' : 'auto', 'important');
links.style.setProperty('min-width', '0', 'important');
links.style.setProperty('gap', mobile ? '8px' : '12px', 'important');
links.style.setProperty('flex-wrap', 'nowrap', 'important');
if (mobile) links.style.setProperty('overflow-x', 'auto', 'important');
else links.style.removeProperty('overflow-x');
links.querySelectorAll('.vh-bottom-link, .vh-bottom-sep').forEach(function (item) {
item.style.setProperty('flex-shrink', '0', 'important');
});
if (left) left.style.setProperty('display', mobile ? 'none' : 'block', 'important');
if (right) right.style.setProperty('display', mobile ? 'none' : 'flex', 'important');
if (mobile && bar.dataset.vpFooterMode !== 'mobile') {
links.scrollLeft = 0;
inner.scrollLeft = 0;
}
bar.dataset.vpFooterMode = mobile ? 'mobile' : 'desktop';
}
function setupBottomBar() {
// Never inject on the 3D entry page; remove if already present
if (isEntryPage()) {
var existing = document.getElementById('vh-bottom-bar');
if (existing) existing.remove();
return;
}
var currentBar = document.getElementById('vh-bottom-bar');
if (currentBar) { updateBottomBarLayout(currentBar); return; }
var bar = document.createElement('nav');
bar.id = 'vh-bottom-bar';
bar.className = 'vh-bottom-bar';
bar.setAttribute('aria-label', 'Vanipedia Global Navigation');
bar.innerHTML =
'<div class="vh-bottom-bar-inner" style="display:flex !important; align-items:center !important; width:100% !important; max-width:100% !important; height:100% !important; padding:0 24px !important; box-sizing:border-box !important;">' +
'<div class="vh-bottom-bar-left-space" style="flex:1 1 0 !important; min-width:0 !important;"></div>' +
'<div class="vh-bottom-nav-links" style="flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; white-space:nowrap !important;">' +
'<a href="/" class="vh-bottom-link vh-bottom-entry">Home</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Main_Page" class="vh-bottom-link vh-bottom-home">Main Page</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Vanipedia_Vision" class="vh-bottom-link">Core Principles</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Vaniseva" class="vh-bottom-link">Volunteer</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Vanipedia_Community" class="vh-bottom-link">Community</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/contact.php" target="_blank" rel="noopener noreferrer" class="vh-bottom-link">Contact</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Special:IframePage" class="vh-bottom-link vh-bottom-donate">Donate</a>' +
'</div>' +
'<div class="vh-bottom-bar-right-space" style="flex:1 1 0 !important; min-width:0 !important; display:flex !important; align-items:center !important; justify-content:center !important;">' +
'<div class="vh-bottom-social-links" style="position:static !important; transform:none !important; display:inline-flex !important; align-items:center !important; gap:24px !important;">' +
'<a href="https://www.youtube.com/@VanimediaPrabhupada" target="_blank" rel="noopener noreferrer" class="vh-bottom-social-item" title="YouTube" style="display:inline-flex !important;align-items:center !important;">' +
'<img src="/wiki/Special:FilePath/YouTube_Logo_B.png" alt="YouTube" style="height:20px !important;width:auto !important;vertical-align:middle !important;display:block !important;">' +
'</a>' +
'<a href="https://www.facebook.com/vanipedia.org" target="_blank" rel="noopener noreferrer" class="vh-bottom-social-item" title="Facebook Page" style="display:inline-flex !important;align-items:center !important;">' +
'<img src="/wiki/Special:FilePath/Facebook_Group_Logo.png" alt="Facebook" style="height:20px !important;width:auto !important;vertical-align:middle !important;display:block !important;">' +
'</a>' +
'<a href="https://www.facebook.com/groups/VanipediaGroup" target="_blank" rel="noopener noreferrer" class="vh-bottom-social-item" title="Facebook Group" style="display:inline-flex !important;align-items:center !important;">' +
'<img src="/wiki/Special:FilePath/Facebook_Logo_2023.png" alt="Facebook Group" style="height:20px !important;width:auto !important;vertical-align:middle !important;display:block !important;">' +
'</a>' +
'<a href="https://www.instagram.com/vanipediaprabhupada/" target="_blank" rel="noopener noreferrer" class="vh-bottom-social-item" title="Instagram" style="display:inline-flex !important;align-items:center !important;">' +
'<img src="/wiki/Special:FilePath/Insta Logo.png" alt="Instagram" style="height:20px !important;width:auto !important;vertical-align:middle !important;display:block !important;">' +
'</a>' +
'</div>' +
'</div>' +
'</div>';
var stageSlot = document.getElementById('vani-stage-footer-slot');
if (stageSlot) {
stageSlot.appendChild(bar);
} else {
document.body.appendChild(bar);
}
updateBottomBarLayout(bar);
}
window.addEventListener('resize', function () {
updateBottomBarLayout(document.getElementById('vh-bottom-bar'));
}, { passive: true });
// Remove bar if 3D entry page activates asynchronously
if (window.MutationObserver && document.body) {
var observer = new MutationObserver(function() {
if (isEntryPage()) {
var existing = document.getElementById('vh-bottom-bar');
if (existing) existing.remove();
}
});
observer.observe(document.body, { attributes: true, attributeFilter: ['class'], childList: true });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupBottomBar);
} else {
setupBottomBar();
}
})();
// Chrome suppression for Entry Page
(function suppressEntryPageChrome() {
function checkEntryChrome() {
var isEntry = (
document.body.classList.contains('ext-vp3d-fullscreen') ||
!!document.querySelector('.vp-entry3d-container') ||
!!document.querySelector('.vp-entry3d-wrapper') ||
window.location.pathname === '/' ||
(window.location.pathname === '/index.php' && !window.location.search)
);
if (isEntry) {
var headers = document.querySelectorAll('.header-container, .header-chrome, .minerva-header, .vector-header-container, #mw-head, .mw-header');
for (var i = 0; i < headers.length; i++) {
headers[i].style.setProperty('display', 'none', 'important');
}
var b = document.getElementById('vh-bottom-bar');
if (b) b.remove();
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', checkEntryChrome);
} else {
checkEntryChrome();
}
})();
/* ==========================================================================
STEP 97: MOBILE BURGER MENU TOGGLE ENHANCER
Ensures the hamburger menu reliably opens and closes the Vector navigation
drawer on mobile viewports and touch devices.
========================================================================== */
(function() {
function initMobileMenuToggle() {
var dropdown = document.getElementById('vector-main-menu-dropdown');
if (!dropdown || dropdown.dataset.vaniMobileInit) return;
dropdown.dataset.vaniMobileInit = 'true';
var label = dropdown.querySelector('.vector-dropdown-label');
var checkbox = document.getElementById('vector-main-menu-dropdown-checkbox');
var content = dropdown.querySelector('.vector-dropdown-content');
if (label && checkbox) {
label.addEventListener('click', function(e) {
setTimeout(function() {
if (content) {
if (checkbox.checked) {
content.classList.add('is-open');
} else {
content.classList.remove('is-open');
}
}
}, 50);
});
}
}
$(document).ready(initMobileMenuToggle);
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(initMobileMenuToggle);
}
})();
/* ==========================================================================
VANIPEDIA MOBILE JAVASCRIPT (MediaWiki:Mobile.js)
1. User Menu Dropdown: Intercepts #ca-mytalks on mobile to show the regular
user dropdown menu (Talk, Preferences, Contributions, Log out) matching desktop.
2. Self-contained styles injected into <head>.
3. Screen Orientation lock to landscape on Main Page.
========================================================================== */
(function() {
// 1. Inject self-contained dropdown styles immediately into <head>
var styleId = 'vani-mobile-dropdown-styles';
if (!document.getElementById(styleId)) {
var style = document.createElement('style');
style.id = styleId;
style.textContent = [
'#vanipedia-mobile-user-menu {',
' display: none !important;',
' position: fixed !important;',
' top: 52px !important;',
' right: 8px !important;',
' width: 175px !important;',
' background-color: #1f3e45 !important;',
' border: 1.5px solid #b1873d !important;',
' border-radius: 6px !important;',
' box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;',
' padding: 6px 0 !important;',
' z-index: 999999 !important;',
' box-sizing: border-box !important;',
' flex-direction: column !important;',
'}',
'#vanipedia-mobile-user-menu.is-open {',
' display: flex !important;',
'}',
'#vanipedia-mobile-user-menu a.vani-user-menu-item {',
' color: #f5d77f !important;',
' font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;',
' font-size: 15px !important;',
' font-weight: 500 !important;',
' padding: 10px 18px !important;',
' text-decoration: none !important;',
' display: block !important;',
' line-height: 1.2 !important;',
'}',
'#vanipedia-mobile-user-menu a.vani-user-menu-item:hover,',
'#vanipedia-mobile-user-menu a.vani-user-menu-item:active {',
' background-color: #345B63 !important;',
' color: #ffffff !important;',
'}',
'#vanipedia-mobile-user-menu .vani-user-menu-divider {',
' height: 1px !important;',
' background-color: rgba(177, 135, 61, 0.35) !important;',
' margin: 5px 0 !important;',
'}',
'#vanipedia-mobile-user-menu a.vani-user-menu-logout {',
' color: #fca5a5 !important;',
'}',
'#vanipedia-mobile-user-menu a.vani-user-menu-logout:hover {',
' background-color: rgba(239, 68, 68, 0.2) !important;',
' color: #ffffff !important;',
'}'
].join('\n');
document.head.appendChild(style);
}
// 2. Setup user dropdown click interceptor
function initUserMenuDropdown() {
var $userBtn = $('#ca-mytalks');
if (!$userBtn.length || $userBtn.data('vaniMenuInit')) return;
$userBtn.data('vaniMenuInit', true);
// Prevent opening talk page directly
$userBtn.attr('href', 'javascript:void(0)');
// Build the dropdown container attached to body
var $dropdown = $('#vanipedia-mobile-user-menu');
if (!$dropdown.length) {
$dropdown = $('<div>', {
id: 'vanipedia-mobile-user-menu',
class: 'vanipedia-mobile-user-dropdown'
});
var user = (window.mw && mw.config && mw.config.get('wgUserName')) || 'Kashya';
var talkUrl = '/wiki/User_talk:' + encodeURIComponent(user);
var prefUrl = '/wiki/Special:Preferences';
var contUrl = '/wiki/Special:Contributions/' + encodeURIComponent(user);
var page = (window.mw && mw.config && mw.config.get('wgPageName')) || 'Main_Page';
var logoutUrl = '/w/index.php?title=Special:UserLogout&returnto=' + encodeURIComponent(page) + '&useformat=mobile';
$dropdown.html(
'<a href="' + talkUrl + '" class="vani-user-menu-item">Talk</a>' +
'<a href="' + prefUrl + '" class="vani-user-menu-item">Preferences</a>' +
'<a href="' + contUrl + '" class="vani-user-menu-item">Contributions</a>' +
'<div class="vani-user-menu-divider"></div>' +
'<a href="' + logoutUrl + '" class="vani-user-menu-item vani-user-menu-logout">Log out</a>'
);
$('body').append($dropdown);
}
// Toggle on click
$userBtn.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$dropdown.toggleClass('is-open');
});
// Close on clicking outside
$(document).on('click touchstart', function(e) {
if (!$(e.target).closest('#ca-mytalks, #vanipedia-mobile-user-menu').length) {
$dropdown.removeClass('is-open');
}
});
}
// =========================================================================
// 3. Container-Level Auto-Landscape & 2D Fitting (STEP 115)
// Matches the exact architecture of VanipediaEntry3D:
// - Keeps <body> stable without full-page transforms.
// - Wraps #vani-home inside #vani-mobile-stage > #vani-rotated-box.
// - Rotates #vani-rotated-box 90deg in portrait mode.
// - Scales the 1200px desktop layout so all sections (Triad, Timeline,
// 4 Taxonomy Cards, Bottom Bar) fit the phone screen without cropping.
// =========================================================================
/* =========================================================================
3. STEP 117: UNIFIED 3-SLOT ROTATED LANDSCAPE STAGE (TOP BAR + MAIN PAGE + BOTTOM BAR)
- Puts Top Bar, #vani-home, and Bottom Bar together in landscape.
- Rotates 90deg as a single unified screen when held in portrait.
- Stays completely horizontal with zero rotation when held in native landscape.
- Leaves regular wiki pages and desktop view completely untouched.
========================================================================= */
function initMobileMainPageStage() {
if (window._vaniMainPageStageInit) return;
var pageName = (window.mw && mw.config && mw.config.get('wgPageName')) || '';
var isMainPage = pageName === 'Main_Page' || document.body.classList.contains('page-Main_Page');
if (!isMainPage) return;
var $vh = $('#vani-home');
if (!$vh.length) return;
window._vaniMainPageStageInit = true;
var $stage = null;
var $rotatedBox = null;
var $headerSlot = null;
var $contentSlot = null;
var $footerSlot = null;
var $topHeader = null;
var $bottomBar = null;
var $headerParent = null;
var $footerParent = null;
var $vhParent = null;
function ensureStage() {
if (!$('#vani-mobile-stage').length) {
$topHeader = $('.vector-header-container, #mw-head, .mw-header, .header-container, header.header-chrome').filter(':visible').first();
if (!$topHeader.length) {
$topHeader = $('.vector-header-container, #mw-head, .mw-header, .header-container, header.header-chrome').first();
}
$bottomBar = $('#vh-bottom-bar');
if ($topHeader.length) $headerParent = $topHeader.parent();
if ($bottomBar.length) $footerParent = $bottomBar.parent();
$vhParent = $vh.parent();
var stageHtml = [
'<div id="vani-mobile-stage">',
' <div id="vani-rotated-box">',
' <div id="vani-stage-header-slot"></div>',
' <div id="vani-stage-content-slot"></div>',
' <div id="vani-stage-footer-slot"></div>',
' </div>',
'</div>'
].join('');
$('body').append(stageHtml);
document.body.classList.add('has-vani-stage');
$stage = $('#vani-mobile-stage');
$rotatedBox = $('#vani-rotated-box');
$headerSlot = $('#vani-stage-header-slot');
$contentSlot = $('#vani-stage-content-slot');
$footerSlot = $('#vani-stage-footer-slot');
if ($topHeader.length) {
$headerSlot.append($topHeader);
var $menu = $('#vanipedia-mobile-user-menu');
if ($menu.length) $headerSlot.append($menu);
}
$contentSlot.append($vh);
if ($bottomBar.length) {
$footerSlot.append($bottomBar);
}
} else {
$stage = $('#vani-mobile-stage');
$rotatedBox = $('#vani-rotated-box');
$headerSlot = $('#vani-stage-header-slot');
$contentSlot = $('#vani-stage-content-slot');
$footerSlot = $('#vani-stage-footer-slot');
if (!$footerSlot.find('#vh-bottom-bar').length) {
var $b = $('#vh-bottom-bar');
if ($b.length) $footerSlot.append($b);
}
if (!$headerSlot.find('.vector-header-container, #mw-head, .header-container').length) {
var $h = $('.vector-header-container, #mw-head, .mw-header, .header-container').first();
if ($h.length) $headerSlot.append($h);
}
}
if ($headerSlot && !$headerSlot.find('.vanipedia-stage-title-link').length) {
var $st = $('<a class="vanipedia-stage-title-link" href="/wiki/Main_Page">Vanipedia</a>');
var $targetNav = $headerSlot.find('.vector-header-start, .minerva-header, .header-container');
if ($targetNav.length) {
$targetNav.first().children().first().after($st);
} else {
$headerSlot.prepend($st);
}
}
}
function updateLayout() {
var screenW = window.innerWidth;
var screenH = window.innerHeight;
var isMobile = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (screenW < 900) || (screenH < 900 && screenH > screenW);
if (!isMobile && screenW >= 1000 && screenW > screenH) {
if ($('#vani-mobile-stage').length) {
if ($topHeader && $topHeader.length && $headerParent) {
$headerParent.prepend($topHeader);
}
if ($vhParent) {
$vhParent.append($vh);
}
if ($bottomBar && $bottomBar.length && $footerParent) {
$footerParent.append($bottomBar);
}
var $m = $('#vanipedia-mobile-user-menu');
if ($m.length) $('body').append($m);
$('#vani-mobile-stage').remove();
document.body.classList.remove('has-vani-stage');
$vh.css({ 'transform': '', 'transform-origin': '', 'width': '' });
}
return;
}
ensureStage();
var isMobilePortrait = (screenH > screenW) && (screenW < 850);
var landscapeW = isMobilePortrait ? screenH : screenW;
var landscapeH = isMobilePortrait ? screenW : screenH;
$rotatedBox.css({
'width': landscapeW + 'px',
'height': landscapeH + 'px'
});
if (isMobilePortrait) {
$rotatedBox.removeClass('is-native-landscape').addClass('is-auto-landscape');
} else {
$rotatedBox.removeClass('is-auto-landscape').addClass('is-native-landscape');
}
var headerH = 50;
var footerH = 36;
var availableContentH = Math.max(120, landscapeH - headerH - footerH);
$contentSlot.css({
'height': availableContentH + 'px'
});
var baseW = 1200;
var baseH = 475;
var scaleW = landscapeW / baseW;
var scaleH = availableContentH / baseH;
var scale = Math.min(scaleW, scaleH);
if (scale > 0.85) scale = 0.85;
if (scale < 0.45) scale = 0.45;
var scaledWidth = baseW * scale;
var offsetX = Math.max(0, (landscapeW - scaledWidth) / 2);
$vh.css({
'transform': 'translate(' + offsetX.toFixed(1) + 'px, 0) scale(' + scale.toFixed(4) + ')',
'transform-origin': 'top left',
'width': baseW + 'px'
});
}
var touchStartY = 0;
var touchStartScroll = 0;
window.addEventListener('touchstart', function(e) {
if ($rotatedBox && $rotatedBox.hasClass('is-auto-landscape') && e.touches && e.touches.length === 1) {
touchStartY = e.touches[0].clientX;
if ($contentSlot && $contentSlot[0]) {
touchStartScroll = $contentSlot[0].scrollTop || 0;
}
}
}, { passive: true });
window.addEventListener('touchmove', function(e) {
if ($rotatedBox && $rotatedBox.hasClass('is-auto-landscape') && e.touches && e.touches.length === 1) {
var delta = touchStartY - e.touches[0].clientX;
if ($contentSlot && $contentSlot[0]) {
$contentSlot[0].scrollTop = touchStartScroll + delta;
}
}
}, { passive: true });
window.addEventListener('wheel', function(e) {
if ($rotatedBox && $rotatedBox.hasClass('is-auto-landscape') && $contentSlot && $contentSlot[0]) {
$contentSlot[0].scrollTop += e.deltaY;
}
}, { passive: true });
window.addEventListener('resize', updateLayout);
window.addEventListener('orientationchange', function() {
setTimeout(updateLayout, 150);
});
updateLayout();
}
$(document).ready(function() {
initUserMenuDropdown(); // V174: natural portrait/landscape flow; no forced rotation.
});
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(function() {
initUserMenuDropdown(); // V174: natural portrait/landscape flow; no forced rotation.
});
}
})();
/* ==========================================================================
STEP 119: EXACT DESKTOP SIDEBAR INJECTION INTO MOBILE BURGER DRAWER
1. Empties all irrelevant Minerva items (Nearby, Random, Settings, About).
2. Clones or fetches the exact desktop Vector 2022 sidebar (#vector-main-menu).
3. Tags each section with .vanipedia-sidebar-menu for the true desktop accordion.
4. Connects the 102 Languages live search box.
========================================================================== */
(function initExactMobileSidebar() {
function cleanAndInject($drawer, sidebarHtml) {
if ($drawer.data('vaniSidebarCleaned')) return;
$drawer.data('vaniSidebarCleaned', true);
// 1. Remove all default Minerva items (Nearby, Random, Personal, Hlist)
$drawer.find('#p-navigation, #p-personal, ul.hlist, .menu__item--nearby, .menu__item--random').remove();
// 2. Parse and filter desktop sidebar HTML
var $parsed = $('<div>').append($.parseHTML(sidebarHtml));
var $menus = $parsed.find('.vector-menu');
if (!$menus.length) {
$menus = $parsed.find('.portal, [id^="p-"]');
}
var $container = $('<div>', { id: 'vani-mobile-synced-sidebar' });
$menus.each(function(idx) {
var $menu = $(this).clone();
var menuId = $menu.attr('id') || '';
// Ignore personal or search menus if caught
if (menuId === 'p-personal' || menuId === 'p-search' || menuId === 'p-logo') return;
// Apply standard desktop class
$menu.addClass('vanipedia-sidebar-menu');
// Collapse by default, except the first section (Navigation)
if (idx === 0) {
$menu.removeClass('vanipedia-collapsed');
} else {
$menu.addClass('vanipedia-collapsed');
}
$container.append($menu);
});
// 3. Mount cleanly inside mobile drawer
$drawer.empty().append($container);
// 4. Initialize 102 Languages live search box in the cloned menu
initLanguageSearchInDrawer($container);
}
function initLanguageSearchInDrawer($container) {
var $sidebarMenu = $container.find('#p-102_Languages ul, [id*="102_Languages"] ul').first();
if ($sidebarMenu.length === 0) {
$container.find('.vector-menu-heading, .portal h3').each(function() {
if ($(this).text().trim().indexOf('102 Languages') !== -1) {
$sidebarMenu = $(this).closest('.vector-menu, .portal').find('ul').first();
}
});
}
if (!$sidebarMenu || $sidebarMenu.length === 0 || $sidebarMenu.find('#sidebarLanguageSearch').length) return;
var $searchLi = $('<li id="n-language-search" style="margin: 8px 10px; list-style: none;"></li>');
var $searchBox = $('<input type="text" id="sidebarLanguageSearch" placeholder="Search 102 Languages..." autocomplete="off" />');
var $resultsContainer = $('<ul id="sidebarLanguageResults" style="list-style: none; padding: 0; margin: 4px 0 0 0; max-height: 200px; overflow-y: auto; border: 1px solid #2c4c50; background: #ffffff; display: none;"></ul>');
$searchLi.append($searchBox).append($resultsContainer);
$sidebarMenu.prepend($searchLi);
var api = new mw.Api();
var languageList = [];
api.get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:Languages_with_Total_Pages',
cmlimit: 'max',
format: 'json'
}).done(function(data) {
if (data.query && data.query.categorymembers) {
languageList = data.query.categorymembers.map(function(member) {
return {
title: member.title,
url: mw.util.getUrl(member.title)
};
});
}
});
$searchBox.on('keyup', function(e) {
e.stopPropagation();
var term = $(this).val().toLowerCase().trim();
$resultsContainer.empty();
if (term.length === 0) {
$resultsContainer.hide();
return;
}
var matches = languageList.filter(function(item) {
return item.title.toLowerCase().indexOf(term) !== -1;
});
if (matches.length > 0) {
matches.slice(0, 15).forEach(function(item) {
var $li = $('<li>', { style: 'padding: 6px 12px; border-bottom: 1px solid #eaeff0;' });
var $a = $('<a>', {
href: item.url,
text: item.title,
style: 'color: #1b3033; text-decoration: none; display: block;'
});
$li.append($a);
$resultsContainer.append($li);
});
$resultsContainer.show();
} else {
$resultsContainer.html('<li style="padding: 6px 12px; color: #888; font-style: italic;">No languages found</li>').show();
}
});
$(document).on('click touchstart', function(e) {
if (!$(e.target).closest('#n-language-search').length) {
$resultsContainer.hide();
}
});
}
function setupMobileDrawer() {
var $drawer = $('#mw-mf-page-left');
if (!$drawer.length) return;
// Check if desktop sidebar is already in DOM
var $desktopSidebar = $('#vector-main-menu, .vector-sidebar-container #mw-panel');
if ($desktopSidebar.length && $desktopSidebar.find('.vector-menu').length) {
cleanAndInject($drawer, $desktopSidebar.html());
return;
}
// Check sessionStorage cache
var cached = null;
try { cached = sessionStorage.getItem('vani_desktop_sidebar_html'); } catch(e) {}
if (cached) {
cleanAndInject($drawer, cached);
return;
}
// Fetch desktop Vector 2022 page to get exact sidebar markup
var fetchUrl = (window.mw && mw.util && mw.util.getUrl('Main_Page', { useskin: 'vector-2022' })) ||
'/wiki/Main_Page?useskin=vector-2022';
$.ajax({
url: fetchUrl,
type: 'GET',
dataType: 'html',
success: function(response) {
try {
var $parsed = $('<div>').append($.parseHTML(response));
var $sidebar = $parsed.find('#vector-main-menu');
if (!$sidebar.length) {
$sidebar = $parsed.find('#mw-panel, .vector-sidebar-container');
}
if ($sidebar.length) {
var html = $sidebar.html();
try { sessionStorage.setItem('vani_desktop_sidebar_html', html); } catch(e) {}
cleanAndInject($drawer, html);
}
} catch(e) {
console.warn('[VANIPEDIA] Error extracting desktop sidebar:', e);
}
}
});
}
$(document).ready(setupMobileDrawer);
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(setupMobileDrawer);
}
})();
/* ==========================================================================
PARTICIPATING LANGUAGES: INLINE SVG FLAG INJECTOR (STEP 153)
MediaWiki CSS sanitizer strips data:image from stylesheets.
Injecting pure vector SVGs directly into DOM spans ensures 100% compliance.
========================================================================== */
function initLanguageFlags() {
var flags = {
'es': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 500" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="750" height="500" fill="#c60b1e"/><rect y="125" width="750" height="250" fill="#ffc400"/></svg>',
'fr': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="300" height="600" fill="#002654"/><rect x="300" width="300" height="600" fill="#fff"/><rect x="600" width="300" height="600" fill="#ce1126"/></svg>',
'de': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="5" height="1" fill="#000"/><rect y="1" width="5" height="1" fill="#d00"/><rect y="2" width="5" height="1" fill="#ffce00"/></svg>',
'it': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="1" height="2" fill="#008c45"/><rect x="1" width="1" height="2" fill="#f4f5f0"/><rect x="2" width="1" height="2" fill="#cd212a"/></svg>',
'ru': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="9" height="2" fill="#fff"/><rect y="2" width="9" height="2" fill="#0039a6"/><rect y="4" width="9" height="2" fill="#d52b1e"/></svg>',
'in': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="900" height="200" fill="#ff9933"/><rect y="200" width="900" height="200" fill="#fff"/><rect y="400" width="900" height="200" fill="#128807"/><circle cx="450" cy="300" r="80" fill="none" stroke="#000080" stroke-width="16"/><circle cx="450" cy="300" r="20" fill="#000080"/></svg>',
'br': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 700" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="1000" height="700" fill="#009b3a"/><polygon points="500,85 915,350 500,615 85,350" fill="#fedf00"/><circle cx="500" cy="350" r="175" fill="#002776"/></svg>',
'pl': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 5" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="8" height="2.5" fill="#fff"/><rect y="2.5" width="8" height="2.5" fill="#dc143c"/></svg>',
'bd': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="10" height="6" fill="#006a4e"/><circle cx="4.5" cy="3" r="2" fill="#f42a41"/></svg>',
'cn': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="900" height="600" fill="#de2910"/><polygon points="150,50 180,140 100,85 200,85 120,140" fill="#ffde00"/></svg>',
'jp': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="900" height="600" fill="#fff"/><circle cx="450" cy="300" r="180" fill="#bc002d"/></svg>',
'nl': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="9" height="2" fill="#ae1c28"/><rect y="2" width="9" height="2" fill="#fff"/><rect y="4" width="9" height="2" fill="#21468b"/></svg>',
'hr': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="6" height="1" fill="#f00"/><rect y="1" width="6" height="1" fill="#fff"/><rect y="2" width="6" height="1" fill="#00f"/></svg>',
'cz': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="900" height="300" fill="#fff"/><rect y="300" width="900" height="300" fill="#d7141a"/><polygon points="0,0 450,300 0,600" fill="#11457e"/></svg>',
'hu': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="6" height="1" fill="#ce2939"/><rect y="1" width="6" height="1" fill="#fff"/><rect y="2" width="6" height="1" fill="#477050"/></svg>'
};
for (var code in flags) {
var elements = document.getElementsByClassName('vh-flag-' + code);
for (var i = 0; i < elements.length; i++) {
if (!elements[i].childNodes.length) {
elements[i].innerHTML = flags[code];
}
}
}
}
$(document).ready(initLanguageFlags);
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(initLanguageFlags);
}

/* V179: one viewport-contained rollout at a time, with fixed-footer clearance. */
(function initViewportPortalRollouts() {

/* V187: prepared link pools, matching the other petals' rollout sampling.
Select 20 unique entries once per browser page load from each 120-link pool.
Sources: Vaniquotes Questions asked to Srila Prabhupada; public Vanipedia
Living Devotees Remembering Srila Prabhupada (snapshot: 2026-10-27).
Question links open Vaniquotes; remembrance links use the current wiki.
No runtime API requests or persistent browser cache are needed.
*/
var hookPools = {"questions":["And after you left the college, were you employed?","And that mental process, if you are working, is it a wrong mental process?","And this is your first visit to this (Paris) center?","Aren't there coverings of the 8 elements?","As the spirit soul is leaving the body, do you become older?","Babar was also a minister of his (Akbar)?","But how can that (real process is devotion) be scientifically presented? How can we accept that scientifically?","But how can we understand all this science and technology just by understanding Krsna, just by one book?","But is it (that worship made by trees and other lower animals) voluntary or involuntary?","But the innocent souls, they're not surrendered to Krsna?","Can one assume that matter is a kind of energy?","Could you explain further, purification of the senses? You said that you had to purify your senses before you can see God","Could you give them by name, the five kinds of liberation? In English?","Did Krsna describe to Arjuna the disciplic succession?","Do you have a name that you call... are they called students?","Do you have children? You just left them?","Do you spend a certain amount of time in each center? Do you yourself travel from one center to another?","Do you want to keep the checks or give them to him (Kirtanananda)?","Does any physical change take place in your body when you become Krsna conscious?","Does our line of succession go directly to Gaurakisora dasa Babaji or to Bhaktivinoda Thakura?","Excuse me, does that mean that people from other religions may..., it is not possible for them to achieve the highest perfection?","God has not created us imperfect?","How are the boys and girls to learn these things in manners of decorum and manners from the sannyasis, for example. How are they to offer respects to their godbrothers?","How are they feeling about it (temple), the Vrndavana Gosais?","How can a spirit become so ignorant?","How do you call devotion to the Lord?","How do you know (that is a bogus)? Have you met him (Guru Maharaji)?","How do you know if you have satisfied God?","How do you know that you know? May I ask this (we have to find out, we have to find out who can give the perfect knowledge)?","How do you want India to take this movement?","How is it that when our coat, size of the coat, changes because the body grows bigger the size of the coat is bigger?","How is our movement doing in India?","How old is this man (Prakasananda Sarasvati)?","I am thinking about this, Swamiji, that your Guru Maharaja is preaching through you, and you are preaching through them?","I mean, what is the idea in \"Even if it goes slowly, it must begin\"(so let them begin the foundation… Let it go on slowly, but it must begin)?","If a person experiences difficulty attaining a level of consciousness of God, how to counteract that?","If Krsna knows that we will suffer here in this material world if we come here, why does He let us go?","If we are given charge of the society, we should dismantle all this industry, all these cities...?","In what way we will live in that spiritual form?","Initiation (of Srila Prabhupada) was held at that Gaudiya Matha in Allahabad?","Introduced starting with ISKCON community (varnasrama-dharma should be introduced all over the world)?","Is everything done in our movement for preaching? Everything that is done in our movement is done for preaching?","Is he (Syamasundara's father is very rich man)?","Is it possible through Krsna consciousness to, in the supreme state, to be able to remember all that you were?","Is it true that there are more young people now in the world that are giving more serious thought to what life is really all about?","Is that differentiated (total material elements, mahat-tattva)?","Is that part of your income, to run a...(publishing house)?","Is that perfection possible in one life (our healthy life is to enjoy eternal life... So our human life should be utilized for attaining that perfectional stage)?","Is there any possible way of a balanced combination between spiritualism and materialism?","Is your spiritual master still alive?","Isn't it inevitable that it's going to occur, that the devolution occurs inevitably without anyone's being able to change it?","It becomes a belief rather than a logic now, then, for when we think about the God. You were saying everybody has father, so why God, in exception, He hasn't got a father?","It is possible to attain that affection of love for God... without taking part in this Krsna consciousness movement?","It's not dedicated to Krsna? The work is not dedicated to Krsna. How, specifically, how can you do this?","Krsna says to perform your sva-dharma, so how does one know what is his sva-dharma?","Last night you said that what is the meaning of the word \"nothing.\" That maya means \"nothing\"?","Maybe we will show Lord Caitanya's marriage? Is that nice to show?","No doubt, but what about the daily worship? Should we have Jagannatha deities if it's not possible for worshiping them? Should we have them just for the festival?","No, most of them, they have lived, a very short times. But still is it a fact that the soul is transplanted from one body to another body?","One thing that puzzles me is if what is practical for one person is not practical for another person, then what is the criterion of truth? Is truth relative?","Prabhupada, are all living entities, always under the protection at all times of the Supreme Lord, the Personality of Godhead, at all times?","Prabhupada, what does Balabhadra mean?","Sambodhana is to remove the evil, remove the bad part isn't it?","Say someone prepares something, like some prasadam for Krsna, but he does not make it so good?","She's (Mrs.Marchand) asking that since in these Western countries the families are so broken up and the women sometimes cannot find a qualified husband, what should she do?","So is that a fact, that he (Jesus Christ) went to India?","So then to love Krsna is unnatural?","So they're representatives (Guru Nanak, Muhammad, and other people)?","So why not eat, drink, and be merry because tomorrow you die?","Sometimes the question is put before us: \"You ask us not to eat meat, but you are eating vegetables. Do you think that is not violence?\"","Spiritual master is the mercy of God?","Srila Prabhupada, is the subtle bodies in the subtle world, are they made up of subtle atoms?","Srila Prabhupada, there was a fish on Laksmi's hand yesterday. The Deity in the temple, where Laksmi had her hand up like this, there was a fish here across her hand. What is this?","Swami, what do you think accounts for the..., your popularity, popularity of the..., the Krsna consciousness movement sweeping America?","Swamiji, so the government, the present government in the world...?","Swamiji? Are there people living on the moon now or were they in other yugas living there?","That desire is simple (he does not desire. He desires, and the matter helps. In the material world)?","That doesn't mean (in the spiritual world, it is full of variegatedness) that it is complex, Srila Prabhupada, yes?","That later-on Ramayana has caused some havoc... That later-on interpretation?","The body is matter, but still it is conscious as long as I am alive. So that means the life is consciousness?","The karmi and the jnani are both within the material world. Is the jnani considered more elevated than the karmi?","The literal meaning of sutra is a condensed statement, Prabhupada?","The school in Vrndavana, is this, I assume this is to be out there in the yard that they were clearing. When do you anticipate that will be built?","The shaved head, he's asking?","There are two, two functions in the tongue, one is (indistinct) and one is (indistinct)? So which one (indistinct). Preaching is a form of tapasya?","These days there are so many men who claim to have found the Absolute, who claim to be spiritual masters in their own way. How does one tell who is a bona fide spiritual master?","They have so many people in boxes in the hospitals they are keeping alive. So the big battle is raging whether or not they should pull out the plug?","They say, \"Then my chanting is useless? So I should stop?\" That's what they say","This would be the prescription for all people?","Today there's a little swelling in your... It seems to come and go… It seems to come and go. Is it bothering you?… Is it disturbing?... Really?","Upendra is here now. Should we give him the kismis to make?","We have a display over here in the window of your books, Srila Prabhupada... Would you like to see?","We have a spiritual body to serve Krsna?","Well, then, how is the individual soul eternal if it has a beginning?","Were some of the animals destined to survive through the destruction of other animals?","Were they liberated souls? The thief?","Were you just waiting to finish your books?","What about the poor, hungry, and the suffering bodies?","What does it (Gandharvapur) mean?","What happens to his consciousness which he has achieved as a man during that time which he is in the animal kingdom?","What happens to them (the devotees)?","What is an example of the throwing potency of maya?","What is good and what is bad, what is sinful activity?","What is the position of a soul that's in a sacred tree like a fig tree?","What is the purpose? What is the sense, if there is any, or does the very question (Why anything exists?) make sense?","What was that story of Caesar (scissors)?","What will the business of the trustees (for construction of Bombay) be?","Who are we, why are we here and where are we going?","Why is it seen that they (impersonalists) are making spiritual advancement?","Why is that better than loving your fellow man in the traditional bhakti-marga?","Why was it (Hindu-Muslim unity) the programs failed?","Why would someone who is not Krsna conscious have one hundred children? For example, why would someone like Dhrtarastra, who is not particularly Krsna conscious...?","Would, say, the cutting down of a plant, vegetable.... You are killing the growth there. Is that a living matter?","You conclude that when you become enlightened, you will see the God in form of human nature?","You don't think the patients have any mind of their own?","You have inquired about how we leave our body and enter into the Spiritual Sky?","You think we can't help people?","You were very well known in Vrndavana before you came? Because you were writing or…?… Or because of your ambition to come to the West?","You're feeling a little stronger today, Srila Prabhupada?","Your Divine Grace, since religion is one, do you think man will enter into a golden age in which he will accept one God?"],"memories":["Abhirama das Remembers Srila Prabhupada","Adideva das Remembers Srila Prabhupada","Aditi devi dasi Remembers Srila Prabhupada","Amarendra das Remembers Srila Prabhupada","Anada devi dasi Remembers Srila Prabhupada","Anandamaya das Remembers Srila Prabhupada","Anuttama das Remembers Srila Prabhupada","Arjuna das Remembers Srila Prabhupada","Armarendra das Remembers Srila Prabhupada","Atreya Rsi das Remembers Srila Prabhupada","Bala Gopal devi dasi Remembers Srila Prabhupada","Balai devi dasi Remembers Srila Prabhupada","Batu Gopal das Remembers Srila Prabhupada","Bhakta das Remembers Srila Prabhupada","Bhakti Gauravani Goswami Remembers Srila Prabhupada","Bhavatarini devi dasi Remembers Srila Prabhupada","Bhima das Remembers Srila Prabhupada","Bhurijana das Remembers Srila Prabhupada","Brahmatirtha das Remembers Srila Prabhupada","Brajendranandana das Remembers Srila Prabhupada","Candramauli Swami Remembers Srila Prabhupada","Chaitanyachandra das Remembers Srila Prabhupada","Chitralekha devi dasi Remembers Srila Prabhupada","Dadhi-harta das Remembers Srila Prabhupada","Dayanidhi das Remembers Srila Prabhupada","Dhananjaya das Remembers Srila Prabhupada","Dharmatma das Remembers Srila Prabhupada","Dhristadyumna das Remembers Srila Prabhupada","Dhruva Maharaja das Remembers Srila Prabhupada","Dina Bandhu das Remembers Srila Prabhupada","Dinatarine devi dasi Remembers Srila Prabhupada","Dravinaksha das Remembers Srila Prabhupada","Drumila das Remembers Srila Prabhupada","Gadi das Remembers Srila Prabhupada","Gaura das Remembers Srila Prabhupada","Gokulananda das Remembers Srila Prabhupada","Gokularanajana das Remembers Srila Prabhupada","Gopinath Acharya das Remembers Srila Prabhupada","Guru Gauranga das Remembers Srila Prabhupada","Guruprasad das Remembers Srila Prabhupada","Haravapuh das Remembers Srila Prabhupada","Harikesa das Remembers Srila Prabhupada","Jagadisa das Remembers Srila Prabhupada","Jagat Guru Swami Remembers Srila Prabhupada","Jagat Purusa das Remembers Srila Prabhupada","Jahnava devi dasi Remembers Srila Prabhupada","Janaki devi dasi 01 Remembers Srila Prabhupada","Janaki devi dasi Remembers Srila Prabhupada 02","Janananda Swami Remembers Srila Prabhupada","Jaya Jagadish das Remembers Srila Prabhupada","Jivananda das Remembers Srila Prabhupada","Jyestha devi dasi Remembers Srila Prabhupada","Kamalini devi dasi Remembers Srila Prabhupada","Kanti devi dasi Remembers Srila Prabhupada","Karanodakasayi Visnu das Remembers Srila Prabhupada","Kaushalya devi dasi Remembers Srila Prabhupada","Kedara das Remembers Srila Prabhupada","Kesava Bharati Goswami Remembers Srila Prabhupada","Ksudi das Remembers Srila Prabhupada","Kulashekhara das Remembers Srila Prabhupada","Madan Mohan Mohini devi dasi Remembers Srila Prabhupada","Madhava Gosh das Remembers Srila Prabhupada","Maha devi dasi Remembers Srila Prabhupada","Mahakratu das Remembers Srila Prabhupada","Mahamaya devi dasi Remembers Srila Prabhupada","Mahatma das Remembers Srila Prabhupada","Mandapa das Remembers Srila Prabhupada","Mishra Bhagavan das Remembers Srila Prabhupada","Mohan Gopal das Remembers Srila Prabhupada","Mondakini devi dasi Remembers Srila Prabhupada","Nanda devi dasi Remembers Srila Prabhupada","Narahari 02 das Remembers Srila Prabhupada","Nayanabhiram das Remembers Srila Prabhupada","Niranjan das Remembers Srila Prabhupada","Nischintya das Remembers Srila Prabhupada","Pancadravida Swami Remembers Srila Prabhupada","Pavamana das Remembers Srila Prabhupada","Prabhavishnu Swami Remembers Srila Prabhupada","Prafulla devi dasi Remembers Srila Prabhupada","Pragosh das Remembers Srila Prabhupada","Prakashatma das Remembers Srila Prabhupada","Pratapana das Remembers Srila Prabhupada","Radha Krsna das Remembers Srila Prabhupada","Radha Kunda devi dasi Remembers Srila Prabhupada","Radhanatha Swami Remembers Srila Prabhupada","Rajashekar das Remembers Srila Prabhupada","Rambhoru devi dasi Remembers Srila Prabhupada","Ramprasad das Remembers Srila Prabhupada","Ranganath das Remembers Srila Prabhupada","Rangavati devi dasi Remembers Srila Prabhupada","Rucira devi dasi Remembers Srila Prabhupada","Sacinandana Swami Remembers Srila Prabhupada","Sahadevi devi dasi Remembers Srila Prabhupada","Sandamini devi dasi Remembers Srila Prabhupada","Sankarshan das Remembers Srila Prabhupada","Sarupananda das Remembers Srila Prabhupada","Satarupa devi dasi Remembers Srila Prabhupada","Satsvarupa das Goswami Remembers Srila Prabhupada","Satyanarayana das Remembers Srila Prabhupada","Sivananda das Remembers Srila Prabhupada","Sivarama Swami Remembers Srila Prabhupada","Sriniketana das Remembers Srila Prabhupada","Srutadev das Remembers Srila Prabhupada","Suddha Jiva das Remembers Srila Prabhupada","Sukhada devi dasi Remembers Srila Prabhupada","Surabhi das Remembers Srila Prabhupada","Suresvara das Remembers Srila Prabhupada","Susan Witty Remembers Srila Prabhupada","Tamohara das Remembers Srila Prabhupada","Tattvavit das Remembers Srila Prabhupada","Tota Gopinatha das Remembers Srila Prabhupada","Vaishesika das Remembers Srila Prabhupada","Vedamata devi dasi Remembers Srila Prabhupada","Vedavyas das Remembers Srila Prabhupada","Visakha devi dasi Remembers Srila Prabhupada","Vishvadevi devi dasi Remembers Srila Prabhupada","Vrindavan das Remembers Srila Prabhupada","Vrndavenesvari devi dasi Remembers Srila Prabhupada","Yadubara das Remembers Srila Prabhupada","Yogindra Vandana das Remembers Srila Prabhupada"]};
var hookSelections = Object.create(null);

function shuffleHooks(items) {
var copy = items.slice();
for (var i = copy.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var value = copy[i]; copy[i] = copy[j]; copy[j] = value;
}
return copy;
}
function getHookSelection(key) {
if (!Object.prototype.hasOwnProperty.call(hookSelections, key)) {
hookSelections[key] = shuffleHooks(hookPools[key] || []).slice(0, 20);
}
return hookSelections[key];
}
function populateHookLists(root) {
['questions', 'memories'].forEach(function (key) {
var card = root.querySelector('.vp-portal-card[data-vp-rollout="' + key + '"]');
var panel = card && card.querySelector('.vp-rollout-panel');
if (!panel || panel.dataset.vpHooksReady === '1') return;
var fragment = document.createDocumentFragment();
var heading = document.createElement('span');
heading.className = 'vp-rollout-heading';
heading.textContent = key === 'questions' ? 'Questions and Answers' : 'Disciples Remember';
fragment.appendChild(heading);
var list = document.createElement('span');
list.className = 'vp-rollout-options';
function addLink(title, label) {
var row = document.createElement('span');
var link = document.createElement('a');
var host = key === 'questions' ? 'https://vaniquotes.org' : '';
link.href = host + '/wiki/' + encodeURIComponent(title.replace(/ /g, '_'));
link.textContent = label;
link.title = title;
if (key === 'questions') {
link.target = '_blank';
link.rel = 'noopener noreferrer';
}
row.appendChild(link);
list.appendChild(row);
}
if (key === 'questions') {
addLink('Category:Questions asked to Srila Prabhupada', 'Browse all questions');
} else {
addLink('Category:Living Devotees Remembering Srila Prabhupada', 'Browse all remembrances');
}
getHookSelection(key).forEach(function (title) {
var label = key === 'memories' ? title.replace(/ Remembers Srila Prabhupada$/, '') : title;
addLink(title, label);
});
fragment.appendChild(list);
// Keep the original panel node and its existing hover/mobile behavior.
panel.innerHTML = '';
panel.appendChild(fragment);
panel.dataset.vpHooksReady = '1';
});
}

/* V189: put the full index first in every other card's rollout too. */
function putBrowseAllFirst(root) {
var indexes = [
{ key:'articles', existing:'.vp-article-all', title:'Category:Vanipedia Gemini - Articles', label:'Browse all articles A–Z' },
{ key:'media', existing:'.vp-media-all', title:'Category:Srila Prabhupada in the Media', label:'Browse all media' },
{ key:'timeline', title:"Timeline of Srila Prabhupada's Life", label:'Browse the full timeline' },
{ key:'languages', title:'Category:Participating Languages - Main Pages', label:'Browse all languages' }
];
indexes.forEach(function (index) {
var card = root.querySelector('.vp-portal-card[data-vp-rollout="' + index.key + '"]');
var panel = card && card.querySelector('.vp-rollout-panel');
if (!panel || panel.querySelector('.vp-browse-all')) return;
var row = index.existing && panel.querySelector(index.existing);
if (!row) {
row = document.createElement('span');
var link = document.createElement('a');
link.href = '/wiki/' + encodeURIComponent(index.title.replace(/ /g, '_'));
link.textContent = index.label;
row.appendChild(link);
}
row.classList.add('vp-browse-all');
row.style.display = 'block';
row.style.margin = '0 0 8px';
var heading = panel.querySelector('.vp-rollout-heading');
panel.insertBefore(row, heading ? heading.nextSibling : panel.firstChild);
});
}
function init() {
var root = document.querySelector("body.page-Main_Page #vani-home.vp-static-home");
if (!root) return;
populateHookLists(root);
putBrowseAllFirst(root);
if (root.dataset.vpRolloutsReady === "1") return;
root.dataset.vpRolloutsReady = "1";
var cards = Array.prototype.slice.call(root.querySelectorAll(".vp-portal-card[data-vp-rollout]"));
var mobile = function () {
return window.matchMedia && window.matchMedia("(max-width:700px), (hover:none), (pointer:coarse)").matches;
};
function setExpanded(card, expanded) {
var toggle = card.querySelector(".vp-rollout-toggle");
if (toggle) toggle.setAttribute("aria-expanded", expanded ? "true" : "false");
}
function close(card) {
card.classList.remove("is-open", "is-hover-open");
var panel = card.querySelector(".vp-rollout-panel");
if (panel) {
panel.classList.remove("is-viewport-panel");
panel.style.removeProperty("--vp-panel-top");
panel.style.removeProperty("--vp-panel-left");
panel.style.removeProperty("--vp-panel-width");
if (panel.dataset.vpHooksReady === '1') {
panel.style.removeProperty('max-height');
panel.style.removeProperty('overflow-y');
}
}
setExpanded(card, false);
}
function closeOthers(keep) {
cards.forEach(function (card) { if (card !== keep) close(card); });
}
// V188: keep long random lists attached to the browse control and scroll inside them.
function positionRandomHookPanel(card, panel) {
var key = card.getAttribute('data-vp-rollout');
if (key !== 'questions' && key !== 'memories') return false;
var toggle = card.querySelector('.vp-rollout-toggle');
if (!toggle) return false;
var control = toggle.getBoundingClientRect();
var cardBox = card.getBoundingClientRect();
var header = document.querySelector('header.vector-header, header.mw-header');
var footer = document.getElementById('vh-bottom-bar');
var topLimit = 12;
var bottomLimit = window.innerHeight - 76;
if (header) {
var headerBox = header.getBoundingClientRect();
if (headerBox.top < window.innerHeight && headerBox.bottom > 0) {
topLimit = Math.max(topLimit, headerBox.bottom + 8);
}
}
if (footer) {
var footerBox = footer.getBoundingClientRect();
if (footerBox.top > topLimit && footerBox.top < window.innerHeight) {
bottomLimit = footerBox.top - 8;
}
}
var below = Math.max(0, bottomLimit - control.bottom);
var above = Math.max(0, control.top - topLimit);
var openBelow = below >= 120 || below >= above;
var room = openBelow ? below : above;
var height = Math.min(420, room);
var width = Math.min(panel.getBoundingClientRect().width || 290, window.innerWidth - 24);
var left = Math.max(12, Math.min(cardBox.left, window.innerWidth - width - 12));
panel.style.setProperty('max-height', height + 'px', 'important');
panel.style.setProperty('overflow-y', 'auto', 'important');
var actualHeight = Math.min(panel.getBoundingClientRect().height, height);
var top = openBelow ? control.bottom : control.top - actualHeight;
top = Math.max(topLimit, Math.min(top, bottomLimit - actualHeight));
panel.style.setProperty('--vp-panel-width', width + 'px');
panel.style.setProperty('--vp-panel-left', left + 'px');
panel.style.setProperty('--vp-panel-top', top + 'px');
return true;
}
function place(card) {
var panel = card.querySelector(".vp-rollout-panel");
if (!panel || mobile() || (!card.classList.contains("is-open") && !card.classList.contains("is-hover-open"))) return;
panel.classList.add("is-viewport-panel");
if (positionRandomHookPanel(card, panel)) return;
var anchor = card.getBoundingClientRect();
var width = Math.min(panel.getBoundingClientRect().width || 290, window.innerWidth - 24);
var height = panel.getBoundingClientRect().height || 280;
var topLimit = 12;
var bottomLimit = window.innerHeight - 76;
var side = card.getAttribute("data-vp-rollout-side");
var left;
var top;
if (side === "left" || side === "right") {
var preferredLeft = side === "left" ? anchor.left - width : anchor.right;
left = Math.max(12, Math.min(preferredLeft, window.innerWidth - width - 12));
top = Math.max(topLimit, Math.min(anchor.top, bottomLimit - height));
} else {
left = Math.max(12, Math.min(anchor.left, window.innerWidth - width - 12));
var below = bottomLimit - anchor.bottom;
var above = anchor.top - topLimit;
if (height <= below) top = anchor.bottom;
else if (height <= above) top = anchor.top - height;
else top = Math.max(topLimit, Math.min(anchor.bottom, bottomLimit - height));
}
panel.style.setProperty("--vp-panel-width", width + "px");
panel.style.setProperty("--vp-panel-left", left + "px");
panel.style.setProperty("--vp-panel-top", top + "px");
}
function open(card, mode) {
closeOthers(card);
card.classList.toggle("is-hover-open", mode === "hover");
card.classList.toggle("is-open", mode === "pinned");
setExpanded(card, true);
window.requestAnimationFrame(function () { place(card); });
}
cards.forEach(function (card) {
if (card.dataset.vpRolloutReady === "1") return;
card.dataset.vpRolloutReady = "1";
var toggle = card.querySelector(".vp-rollout-toggle");
if (!toggle) return;
card.addEventListener("pointerdown", function (event) {
card.dataset.pointerTriggeredFocus = event.pointerType || "pointer";
window.setTimeout(function () { delete card.dataset.pointerTriggeredFocus; }, 0);
});
card.addEventListener("pointerenter", function (event) {
if (event.pointerType === "mouse" && !mobile() && !card.classList.contains("is-open")) open(card, "hover");
});
card.addEventListener("pointerleave", function (event) {
if (card.contains(event.relatedTarget)) return;
if (card.classList.contains("is-open") || card.contains(document.activeElement)) return;
close(card);
});
card.addEventListener("focusin", function () {
if (!card.classList.contains("is-open")) open(card, "hover");
});
card.addEventListener("focusout", function () {
window.setTimeout(function () {
if (!card.contains(document.activeElement) && !card.matches(":hover")) close(card);
}, 0);
});
toggle.addEventListener("click", function (event) {
event.preventDefault();
var wasPinned = card.classList.contains("is-open");
if (wasPinned) close(card);
else open(card, "pinned");
});
toggle.addEventListener("keydown", function (event) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
if (card.classList.contains("is-open")) close(card);
else open(card, "pinned");
} else if (event.key === "Escape") {
close(card);
toggle.blur();
}
});
});
document.addEventListener("pointerdown", function (event) {
if (root.contains(event.target)) return;
cards.forEach(close);
});
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") cards.forEach(close);
});
function repositionOpen() {
cards.forEach(function (card) {
if (card.classList.contains("is-open") || card.classList.contains("is-hover-open")) place(card);
});
}
window.addEventListener("resize", repositionOpen, { passive: true });
window.addEventListener("scroll", repositionOpen, { passive: true, capture: true });
}
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);
else init();
if (window.mw && mw.hook) mw.hook("wikipage.content").add(init);
})();

/* V182: restore original desktop Vanipedia top-bar branding and sister-petal links. */
/* ==========================================================
/* ==========================================================
/* ==========================================================
/* ==========================================================
/* ==========================================================
VANIPEDIA TOP BAR CONTROLLER (Step 172: Guaranteed Vanipedia Title & Icons on Mobile)
========================================================== */
(function() {
var titleText = "VANIPEDIA - ŚRĪLA PRABHUPĀDA'S VANI-TEMPLE";
var targetUrl = "https://vanipedia.org";
function removeGlobalSiteNotice() {
$('#siteNotice, #localNotice, .vector-sitenotice-container, #mainbanner, .sitenotice, .mw-sitenotice, .anonnotice, .dismissable-notice, #centralNotice').remove();
}
function createHomeLink() {
var homeSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>';
return $('<a>', {
id: 'vanipedia-topbar-home-link',
href: '/',
title: 'Vanipedia Home / Entry Portal',
'aria-label': 'Home',
class: 'vanipedia-topbar-home'
}).html('<span class="vanipedia-home-icon">' + homeSvg + '</span><span class="vanipedia-home-text">Home</span>');
}
function createCenterBlock() {
var blockStyle = 'position:absolute !important; left:50% !important; top:54% !important; transform:translate(-50%, -50%) !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; white-space:nowrap !important; z-index:10 !important; pointer-events:auto !important;';
var titleStyle = 'position:static !important; transform:none !important; display:block !important; font-family:"Cinzel", Georgia, serif !important; font-size:18px !important; font-weight:700 !important; letter-spacing:2px !important; color:#f5d77f !important; text-decoration:none !important; text-shadow:0 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(245,215,127,0.3) !important; line-height:1.25 !important; margin:0 0 4px 0 !important; padding:0 !important; user-select:text !important;';
var vanisevaWrapStyle = 'position:static !important; transform:none !important; display:block !important; margin:0 0 4px 0 !important; line-height:1.2 !important;';
var vanisevaLinkStyle = 'color:#f5d77f !important; font-family:"Noto Serif", Georgia, serif !important; font-size:12.5px !important; font-style:normal !important; font-weight:500 !important; letter-spacing:0.35px !important; text-decoration:none !important; border:0 !important; background:none !important; outline:none !important; padding:0 !important; border-radius:0 !important; cursor:pointer !important; display:inline-block !important; transition:all 0.18s ease !important;box-shadow:none !important;';
var sisterWrapStyle = 'position:static !important; transform:none !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:14px !important; margin:0 !important; line-height:1.2 !important;';
var sisterLinkStyle = 'color:#f5d77f !important; font-family:"Noto Serif", Georgia, serif !important; font-size:13px !important; font-weight:600 !important; letter-spacing:0.4px !important; text-decoration:none !important; border:none !important; border-bottom:none !important; outline:none !important; padding:2px 8px !important; border-radius:3px !important; display:inline-flex !important; align-items:center !important; cursor:pointer !important; transition:all 0.18s ease !important;';
var sepStyle = 'color:rgba(245,215,127,0.4) !important; font-size:11px !important; line-height:1 !important; user-select:none !important;';
var $block = $('<div>', {
id: 'vanipedia-topbar-center-block',
class: 'vanipedia-topbar-center-block',
style: blockStyle
});
var $title = $('<div>', {
id: 'vanipedia-topbar-title',
class: 'vanipedia-topbar-main-title',
style: titleStyle,
text: titleText
});
var $vaniseva = $('<div>', {
class: 'vanipedia-topbar-vaniseva-title',
style: vanisevaWrapStyle
}).html('<a href="https://vaniseva.org" target="_blank" rel="noopener noreferrer" title="Vaniseva" style="' + vanisevaLinkStyle + '">Collaborate with us to invoke and fully manifest Śrīla Prabhupāda's Vani-presence</a>');
var $sisterLinks = $('<div>', {
class: 'vanipedia-topbar-sister-links',
style: sisterWrapStyle
}).html(
'<a href="https://vanisource.org" target="_blank" rel="noopener noreferrer" class="vanipedia-topbar-sister-link" title="Vanisource" style="' + sisterLinkStyle + '">vanisource.org</a>' +
'<span class="vanipedia-topbar-sister-sep" aria-hidden="true" style="' + sepStyle + '">•</span>' +
'<a href="https://vaniquotes.org" target="_blank" rel="noopener noreferrer" class="vanipedia-topbar-sister-link" title="Vaniquotes" style="' + sisterLinkStyle + '">vaniquotes.org</a>' +
'<span class="vanipedia-topbar-sister-sep" aria-hidden="true" style="' + sepStyle + '">•</span>' +
'<a href="https://vanimedia.org" target="_blank" rel="noopener noreferrer" class="vanipedia-topbar-sister-link" title="Vanimedia" style="' + sisterLinkStyle + '">vanimedia.org</a>'
);
$block.append($title, $vaniseva, $sisterLinks);
return $block;
}
function updateTopBar() {
removeGlobalSiteNotice();
$('#vanipedia-topbar-center-block, #vanipedia-topbar-center-block-mobile, #vanipedia-topbar-title, #vanipedia-topbar-title-mobile, #vanipedia-topbar-title-link, #vanipedia-topbar-center-title, #vanipedia-topbar-home-link, #vanipedia-topbar-sister-links, #vanipedia-topbar-sister-links-mobile, .vanipedia-topbar-sister-links, .vanipedia-topbar-center-block').remove();
$('.vector-header-container').css({
'background': 'transparent',
'background-color': 'transparent',
'border': 'none',
'box-shadow': 'none',
'padding': '0',
'margin': '0',
'min-height': '0',
'height': 'auto',
'width': '100%',
'max-width': '100%'
});
var isMobile = (window.innerWidth <= 999) || $('body').hasClass('skin-minerva') || $('body').hasClass('skin-vector-mobile') || $('.minerva-header').length > 0;
var $header = $('header.mw-header, header.vector-header').not('.minerva-header').first();
if (!$header.length && !$('body').hasClass('skin-minerva') && !$('.minerva-header').length) {
$header = $('#mw-head, header').not('.minerva-header').filter(':visible').first();
}
if ($header.length) {
$header.css({
'min-height': isMobile ? '52px' : '86px',
'height': isMobile ? '52px' : 'auto',
'max-height': isMobile ? '52px' : 'none',
'padding': isMobile ? '0 10px' : '10px 24px',
'background-color': '#345B63',
'border-bottom': '2px solid #b1873d',
'box-shadow': '0 4px 18px rgba(0,0,0,0.35)',
'position': 'relative',
'display': 'flex',
'flex-wrap': 'nowrap',
'align-items': 'center',
'justify-content': 'space-between',
'box-sizing': 'border-box',
'width': '100%',
'max-width': '100%'
});
if (!isMobile) {
$header.append(createCenterBlock());
}
var $search = $header.find('.vector-header-start #p-search, #p-search');
if ($search.length) {
$search.after(createHomeLink());
} else if ($header.find('.vector-header-start').length) {
$header.find('.vector-header-start').append(createHomeLink());
}
}
var $minervaHeader = $('.minerva-header');
if ($minervaHeader.length) {
// 1. Ensure "Vanipedia" Title Link exists with text in the branding box
var $branding = $minervaHeader.find('.branding-box');
if ($branding.length) {
var $brandLink = $branding.find('a');
if ($brandLink.length) {
if (!$brandLink.text().trim()) {
$brandLink.html('<span>Vanipedia</span>');
}
} else {
$branding.html('<a href="/wiki/Main_Page"><span>Vanipedia</span></a>');
}
} else {
var brandHtml = '<div class="branding-box"><a href="/wiki/Main_Page"><span>Vanipedia</span></a></div>';
var $burger = $minervaHeader.find('#mw-mf-main-menu-button, .navigation-drawer.toggle-list').first();
if ($burger.length) {
$burger.after(brandHtml);
} else {
$minervaHeader.prepend(brandHtml);
}
}
// 2. Ensure Home Link is inserted cleanly
var $minervaForm = $minervaHeader.find('.minerva-search-form, #searchform').first();
if ($minervaForm.length && !$minervaHeader.find('#vanipedia-topbar-home-link').length) {
$minervaForm.before(createHomeLink());
} else if (!$minervaHeader.find('#vanipedia-topbar-home-link').length) {
var $minervaUser = $minervaHeader.find('.minerva-user-navigation, #ca-mytalks').first();
if ($minervaUser.length) {
$minervaUser.before(createHomeLink());
} else {
$minervaHeader.append(createHomeLink());
}
}
$minervaHeader.css({
'flex-wrap': 'nowrap',
'height': '52px',
'min-height': '52px',
'max-height': '52px',
'padding': '0 10px',
'display': 'flex',
'align-items': 'center',
'justify-content': 'space-between',
'box-sizing': 'border-box'
});
}
var $stageHeader = $('#vani-stage-header-slot');
if ($stageHeader.length && !$stageHeader.find('.vanipedia-topbar-center-block').length) {
var $stageSearch = $stageHeader.find('#p-search, .search-box, .minerva-search-form').first();
if ($stageSearch.length && !$stageHeader.find('#vanipedia-topbar-home-link').length) {
$stageSearch.after(createHomeLink());
}
if (!isMobile) {
$stageHeader.append(createCenterBlock());
}
}
var $stickyTitle = $('#vector-sticky-header .vector-sticky-header-title, #vector-sticky-header .vector-sticky-header-context-bar .mw-headline');
if ($stickyTitle.length) {
$stickyTitle.html('<a href="' + targetUrl + '" style="color: inherit; text-decoration: none;">' + titleText + '</a>');
}
}
$(function() {
removeGlobalSiteNotice();
});
var topbarResizeTimer;
var lastVanipediaTopWidth = window.innerWidth;
$(window).on('resize orientationchange', function() {
if (Math.abs(window.innerWidth - lastVanipediaTopWidth) < 10) return;
lastVanipediaTopWidth = window.innerWidth;
clearTimeout(topbarResizeTimer);
topbarResizeTimer = setTimeout(updateTopBar, 150);
});
$(document).ready(updateTopBar);
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(updateTopBar);
}
})();
// ==========================================================================
/* 2026-11-11 (Vamshi Krishna): keep the header and footer from overlapping at in-between widths.
- Header: if the centre block (site title, Vaniseva line, petal links) would run over the search box,
Home link or user links, it moves into the free space between them, shrinking a little if needed,
then shows only the petal name, and is hidden only if even that doesn't fit (2026-11-12).
- Footer: on wide screens the social icons are hidden when they would cover Donate, and the links
are centred. On narrow screens the right edge of the links fades while more are off-screen.
The skin sets these styles inline with !important (and re-applies the footer layout on every resize), so
this runs after it, and Common.css cannot override them. */
(function () {
function leaves(el) {
var out = [];
el.querySelectorAll('*').forEach(function (e) {
if (!e.children.length) {
var r = e.getBoundingClientRect();
if (r.width && r.height) out.push(r);
}
});
return out;
}
function clash(a, b) {
for (var x = 0; x < a.length; x++) {
for (var y = 0; y < b.length; y++) {
var r = a[x], s = b[y];
if (Math.min(r.right, s.right) - Math.max(r.left, s.left) > 0 &&
Math.min(r.bottom, s.bottom) - Math.max(r.top, s.top) > 2) return true;
}
}
return false;
}
function fixMidWidths() {
var w = window.innerWidth;
var header = document.querySelector('header.vector-header, header.mw-header');
document.querySelectorAll('.vanipedia-topbar-center-block').forEach(function (b) {
var title = b.querySelector('.vanipedia-topbar-main-title');
if (title && !title.dataset.fullTitle) title.dataset.fullTitle = title.textContent;
if (title) title.textContent = title.dataset.fullTitle;
// Start from the skin's own position each time (Vanisource keeps the same block between resizes).
if (!b.dataset.fitInit) {
b.dataset.fitInit = '1';
b.dataset.fitTransform = b.style.getPropertyValue('transform');
}
if (b.dataset.fitTransform) b.style.setProperty('transform', b.dataset.fitTransform, 'important');
else b.style.removeProperty('transform');
b.style.setProperty('display', 'flex', 'important');
if (w < 1000 || !header) return;
var theirs = [];
header.querySelectorAll('#p-search, #vanipedia-topbar-home-link, .vector-header-end').forEach(function (e) {
if (!b.contains(e)) theirs = theirs.concat(leaves(e));
});
if (clash(leaves(b), theirs)) b.style.setProperty('display', 'none', 'important');
});

var bar = document.getElementById('vh-bottom-bar');
if (!bar) return;
var left = bar.querySelector('.vh-bottom-bar-left-space');
var right = bar.querySelector('.vh-bottom-bar-right-space');
var inner = bar.querySelector('.vh-bottom-bar-inner');
var nav = bar.querySelector('.vh-bottom-nav-links');
var social = bar.querySelector('.vh-bottom-social-links');
if (!left || !right || !inner || !nav || !social) return;
// The icons measure 0 px until their images load, so check again once they have.
bar.querySelectorAll('img').forEach(function (img) {
if (!img.complete && !img.dataset.fixBound) {
img.dataset.fixBound = '1';
img.addEventListener('load', schedule);
}
});
if (w >= 1000) {
// The footer is kept between resizes here, so clear a fade left over from a narrow window.
nav.style.removeProperty('-webkit-mask-image');
nav.style.removeProperty('mask-image');
var nr = nav.getBoundingClientRect(), sr = social.getBoundingClientRect();
if (sr.width && (nr.right + 8 > sr.left || sr.right > w)) {
left.style.setProperty('display', 'none', 'important');
right.style.setProperty('display', 'none', 'important');
inner.style.setProperty('justify-content', 'center', 'important');
}
return;
}
var updateFade = function () {
var more = nav.scrollLeft + nav.clientWidth < nav.scrollWidth - 2;
var mask = more ? 'linear-gradient(to right, #000 calc(100% - 40px), transparent)' : 'none';
nav.style.setProperty('-webkit-mask-image', mask, 'important');
nav.style.setProperty('mask-image', mask, 'important');
};
updateFade();
if (!nav.dataset.fadeBound) {
nav.dataset.fadeBound = '1';
nav.addEventListener('scroll', updateFade, { passive: true });
}
}
var pending;
// Run after the skin's own header and footer setup (which re-runs on resize and 150 ms after it).
function schedule() { clearTimeout(pending); pending = setTimeout(fixMidWidths, 300); }
$(schedule);
$(window).on('resize orientationchange', schedule);
// This script often starts after the page has loaded, so also re-check when the fonts are ready.
if (document.fonts && document.fonts.ready) document.fonts.ready.then(schedule);
})();

/* VaniSearch Popup Launcher + Desktop Burger Restore */
(function() {
var lockPopupSubmitUntil = 0;

function ensureBurgerMenu() {
var nodes = document.querySelectorAll('.vector-feature-main-menu-pinned-enabled, .vector-feature-main-menu-pinned-clientpref-1');
for (var i = 0; i < nodes.length; i++) {
nodes[i].classList.remove('vector-feature-main-menu-pinned-enabled', 'vector-feature-main-menu-pinned-clientpref-1');
nodes[i].classList.add('vector-feature-main-menu-pinned-disabled', 'vector-feature-main-menu-pinned-clientpref-0');
}

var dropdown = document.getElementById('vector-main-menu-dropdown');
var header = document.querySelector('header.vector-header, header.mw-header');
var start = header ? header.querySelector('.vector-header-start') : document.querySelector('.vector-header-start');

if (dropdown && start && dropdown.parentNode !== start) {
start.insertBefore(dropdown, start.firstChild);
}

var menu = document.getElementById('vector-main-menu');
var unpinned = document.getElementById('vector-main-menu-unpinned-container') ||
(dropdown ? dropdown.querySelector('.vector-dropdown-content') : null);
if (menu && unpinned) {
menu.classList.remove('vanipedia-sidebar-menu', 'vanipedia-collapsed');
if (!unpinned.contains(menu)) {
unpinned.appendChild(menu);
}
}
}

window.open_modal = function() {
var ori = document.getElementById('ori_search') || document.getElementById('searchInput');
var modal = document.getElementById('mspu_div_wrapper');
var inpSearch = document.getElementById('mspu_txt_input');
var submitBtn = document.getElementById('mspu_but_submit');

if (!modal || !inpSearch) return false;

lockPopupSubmitUntil = Date.now() + 500;

if (submitBtn) {
submitBtn.disabled = true;
setTimeout(function() { submitBtn.disabled = false; }, 500);
}

if (typeof window.sync_but_search === 'function') {
try { window.sync_but_search(); } catch (e) {}
}

if (ori) {
inpSearch.value = ori.value;
ori.blur();
}

modal.style.display = 'block';

setTimeout(function() {
inpSearch.focus();
}, 250);

return false;
};

function protectModalForm() {
var modal = document.getElementById('mspu_div_wrapper');
if (!modal || modal.dataset.vaniHardLocked) return;
modal.dataset.vaniHardLocked = 'true';

var strayBtns = modal.querySelectorAll('.vani-search-trigger-btn');
for (var i = 0; i < strayBtns.length; i++) {
if (strayBtns[i].parentNode) strayBtns[i].parentNode.removeChild(strayBtns[i]);
}

var mForm = modal.querySelector('form');
if (mForm) {
mForm.addEventListener('submit', function(e) {
if (Date.now() < lockPopupSubmitUntil) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}, true);
}

var inpSearch = document.getElementById('mspu_txt_input');
if (inpSearch) {
['keydown', 'keypress', 'keyup'].forEach(function(evt) {
inpSearch.addEventListener(evt, function(e) {
if (Date.now() < lockPopupSubmitUntil && (e.key === 'Enter' || e.keyCode === 13)) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}, true);
});
}
}

function buildCleanSearchBox(oldElement, isMobile) {
var wrap = document.createElement('div');
wrap.className = isMobile ? 'vani-mobile-search-wrap' : 'vani-desktop-search-wrap';
wrap.style.cssText = 'flex: 1 1 auto; width: 100%; max-width: 280px; display: flex !important; align-items: center !important; position: relative !important; margin: 0; z-index: 999999 !important;';

var inp = document.createElement('input');
inp.type = 'text';
inp.id = 'ori_search';
inp.className = 'vani-clean-search-input';
inp.placeholder = 'Search Vanipedia';
inp.autocomplete = 'off';
inp.style.cssText = 'width:100% !important; height:32px !important; background:#1f3e45 !important; background-image:none !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:1.5px solid #f5d77f !important; border-radius:16px !important; padding:2px 32px 2px 12px !important; font-size:15px !important; outline:none !important; box-sizing:border-box !important;';

var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'vani-inline-go';
btn.innerHTML = '🔍';
btn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:20 !important;';

['click', 'focus', 'focusin', 'touchstart', 'input', 'keypress'].forEach(function(evtType) {
inp.addEventListener(evtType, function(e) {
e.stopPropagation();
}, true);
});

inp.addEventListener('keydown', function(e) {
e.stopPropagation();
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopImmediatePropagation();
window.open_modal();
}
}, true);

btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
window.open_modal();
}, true);

wrap.appendChild(inp);
wrap.appendChild(btn);
if (oldElement.parentNode) {
oldElement.parentNode.replaceChild(wrap, oldElement);
}
}

function setupAllSearchBars() {
ensureBurgerMenu();
protectModalForm();

var minervaHeader = document.querySelector('.minerva-header');
if (minervaHeader) {
document.documentElement.classList.remove('overlay-enabled');
document.body.classList.remove('search-enabled', 'overlay-enabled');
var b = minervaHeader.querySelector('.branding-box');
if (b) b.style.setProperty('display', 'none', 'important');

var mForm = minervaHeader.querySelector('form.minerva-search-form, form#searchform');
if (mForm && !minervaHeader.querySelector('.vani-mobile-search-wrap')) {
buildCleanSearchBox(mForm, true);
}
}

if (!document.querySelector('.vani-desktop-search-wrap') && !minervaHeader) {
var pSearch = document.querySelector('#p-search');
if (pSearch && !pSearch.dataset.vaniDetached) {
var cleanPSearch = pSearch.cloneNode(true);
cleanPSearch.dataset.vaniDetached = 'true';
cleanPSearch.classList.add('vector-search-box-show-thumbnail');
var toggle = cleanPSearch.querySelector('.search-toggle');
if (toggle && toggle.parentNode) toggle.parentNode.removeChild(toggle);
if (pSearch.parentNode) pSearch.parentNode.replaceChild(cleanPSearch, pSearch);
}

var dTarget = document.querySelector('form#searchform, #p-search form, .vector-search-box form');
if (!dTarget) {
var rawInput = document.querySelector('#ori_search, #searchInput, input[type="search"]');
if (rawInput && !rawInput.closest('#mspu_div_wrapper') && !rawInput.classList.contains('vani-clean-search-input')) {
dTarget = rawInput.closest('form') || rawInput.parentElement;
}
}
if (dTarget && !dTarget.closest('#mspu_div_wrapper')) {
buildCleanSearchBox(dTarget, false);
}
}
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupAllSearchBars);
} else {
setupAllSearchBars();
}
setTimeout(setupAllSearchBars, 200);
setTimeout(setupAllSearchBars, 700);
})();

MediaWiki:Common.css

2026-11-13T15:26:22Z

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 {
display: none !important;
}
#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 {
display: none;
}
/* -------------------- 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,
.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);
}
}
/* ==========================================================================
GLOBAL SITENOTICE / MEDIAWIKI HEADER SUPPRESSION (ALL PAGES)
========================================================================== */
#siteNotice,
#localNotice,
.mw-sitenotice,
.sitenotice,
.vector-sitenotice-container,
#mainbanner,
.anonnotice,
.dismissable-notice,
#centralNotice {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
outline: none !important;
visibility: hidden !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 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:not(#vector-user-links-dropdown *):not(.vector-user-menu *) {
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. Position Page Title in the MIDDLE of the top bar */
.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: center !important;
text-align: center !important;
flex: 1 1 auto !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: none !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: center !important;
text-align: center !important;
font-size: 1.35rem !important;
font-weight: 700 !important;
color: #000000 !important;
margin: 0 auto !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: 54px !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: 54px !important;
right: 18px !important;
width: 40px !important;
height: 40px !important;
}
}
/* ==========================================================================
UNIVERSAL VĀṆĪ-TEMPLE MAIN PAGE: FULL-WIDTH ARCHITECTURAL BLUEPRINT
========================================================================== */
/* 1. Petal Color & Material Variables */
:root {
--petal-color: #1b2e4b; /* Vanipedia Midnight Blue */
--petal-color-dark: #101c2e;
--vani-gold: #d4af37;
--vani-wood-wall: #241913; /* Rich dark walnut edge-to-edge */
--vani-shelf-depth: #140d09; /* Deep shadow inside open shelves */
--vani-border-wood: #3d2b20;
}
/* 2. Show & Theme the Vector 2022 Top Bar (from image_3992d7.png) */
body.page-Main_Page .vector-header-container, body.page-Main_Page #mw-head { display: flex !important; background: transparent !important; background-color: transparent !important; border: none !important; border-bottom: none !important; box-shadow: none !important; height: auto !important; min-height: 86px !important; }
.vector-header-container .mw-logo-wordmark,
.vector-header-container .vector-menu-heading,
.vector-header-container a,
.vector-sticky-header a {
color: #ffffff !important;
}
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"] {
background-color: #ffffff !important;
border: 1px solid var(--vani-gold) !important;
border-radius: 3px !important;
color: #1a1a1a !important;
}
.vector-header-container .cdx-search-input__end-button,
.vector-header-container input[type="submit"] {
background-color: var(--petal-color-dark) !important;
color: var(--vani-gold) !important;
border: 1px solid var(--vani-gold) !important;
font-weight: bold !important;
}
/* 3. Full-Width Edge-to-Edge Wood Canvas (Zero Columns, Zero Plants) */
body.page-Main_Page #content,
body.page-Main_Page .mw-body,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
padding: 0 !important;
margin: 0 !important;
max-width: 100vw !important;
background-color: var(--vani-wood-wall) !important;
}
.vani-wood-sanctuary {
width: 100vw !important;
max-width: 100vw !important;
min-height: calc(100vh - 110px);
box-sizing: border-box;
margin: 0 !important;
padding: 24px 40px 80px 40px !important;
background:
linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.55) 100%),
radial-gradient(ellipse at 50% 25%, #3a281e 0%, var(--vani-wood-wall) 80%);
color: #e6dfd5;
font-family: 'Noto Serif', Georgia, serif;
position: relative;
}
/* 4. Upper Canopy with Concealed Linear Cove Lighting (No Spotlights) */
.vani-canopy-box {
width: 100%;
background: linear-gradient(180deg, #18100c 0%, #2b1d15 70%, #1c130e 100%);
border-top: 2px solid var(--vani-gold);
border-bottom: 3px solid #140d09;
border-radius: 6px;
padding: 22px 30px 18px;
text-align: center;
position: relative;
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
/* Seamless warm golden wash fading down the wood grain */
.vani-canopy-box::after {
content: "";
position: absolute;
left: 3%;
right: 3%;
bottom: -24px;
height: 24px;
background: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.45) 0%, rgba(212, 175, 55, 0.12) 50%, transparent 80%);
pointer-events: none;
filter: blur(8px);
}
.vani-canopy-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(28px, 2.5vw, 42px);
font-weight: 700;
color: var(--vani-gold);
letter-spacing: 0.05em;
margin: 0 0 6px 0;
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.vani-canopy-subtitle {
font-size: 15px;
color: #c9bfb1;
margin: 0;
letter-spacing: 0.04em;
}
/* 5. Open Recessed Wall Shelves (Without Glass) */
.vani-shelves-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 34px 0 28px;
width: 100%;
}
.vani-open-shelf {
background: linear-gradient(180deg, #110b08 0%, var(--vani-shelf-depth) 100%);
border: 2px solid var(--vani-border-wood);
border-bottom: 4px solid #0d0806;
border-radius: 4px;
padding: 18px 20px;
min-height: 180px;
position: relative;
box-shadow:
inset 0 6px 14px rgba(0, 0, 0, 0.75),
0 4px 12px rgba(0,0,0,0.35);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Subtle indirect light strip inside the top of each shelf */
.vani-open-shelf::before {
content: "";
position: absolute;
top: 0;
left: 8%;
right: 8%;
height: 6px;
background: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.3) 0%, transparent 80%);
filter: blur(2px);
pointer-events: none;
}
.vani-shelf-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 20px;
font-weight: 700;
color: var(--vani-gold);
border-bottom: 1px solid rgba(212, 175, 55, 0.25);
padding-bottom: 6px;
margin-bottom: 14px;
}
/* Content styling inside dark shelves */
.vani-open-shelf a {
color: #dcd4c7 !important;
text-decoration: none !important;
}
.vani-open-shelf a:hover {
color: var(--vani-gold) !important;
}
/* 6. Central Showcase Display Window (Holds Virtual Timeline) */
.vani-center-showcase {
width: 100%;
max-width: 1100px;
margin: 0 auto 35px;
background: #0d0806;
border: 3px solid #3d2b20;
border-radius: 6px;
padding: 18px;
box-shadow:
inset 0 0 20px rgba(0,0,0,0.8),
0 8px 25px rgba(0,0,0,0.5);
}
/* 7. Docked Base Plinth Footer (Always Visible) */
.vani-plinth-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: linear-gradient(180deg, #18110c 0%, #0f0a07 100%);
border-top: 1px solid var(--vani-gold);
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
font-size: 13px;
box-shadow: 0 -4px 15px rgba(0,0,0,0.45);
}
.vani-footer-links {
display: flex;
align-items: center;
gap: 14px;
}
.vani-petal-badge {
color: #d1c7b8 !important;
text-decoration: none !important;
padding: 4px 12px;
border-radius: 12px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
transition: all 0.2s ease;
}
.vani-petal-badge:hover,
.vani-petal-badge.is-active {
background: var(--petal-color);
border-color: var(--vani-gold);
color: #ffffff !important;
}
.vani-footer-milestone {
color: var(--vani-gold);
font-weight: 600;
letter-spacing: 0.03em;
}
@media screen and (max-width: 900px) {
.vani-shelves-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. HIDE ALL WIKI TOOLS & UNWANTED CHROME ON MAIN PAGE
(Main Page, Discussion, Read, Edit, History, Tools, Notices)
---------------------------------------------------------- */
body.page-Main_Page #left-navigation,
body.page-Main_Page #right-navigation,
body.page-Main_Page #p-namespaces,
body.page-Main_Page #p-views,
body.page-Main_Page #p-cactions,
body.page-Main_Page .vector-page-toolbar,
body.page-Main_Page .vector-page-toolbar-container,
body.page-Main_Page .vector-page-tools,
body.page-Main_Page #vector-page-tools-dropdown,
body.page-Main_Page #vector-page-tools-pinned-container,
body.page-Main_Page .vector-page-titlebar,
body.page-Main_Page .mw-page-title-main,
body.page-Main_Page .firstHeading,
body.page-Main_Page #firstHeading,
body.page-Main_Page .mw-indicators,
body.page-Main_Page .mw-editsection,
body.page-Main_Page .catlinks,
body.page-Main_Page .printfooter,
body.page-Main_Page #siteSub,
body.page-Main_Page #contentSub,
body.page-Main_Page #jump-to-nav,
body.page-Main_Page .vector-sitenotice-container,
body.page-Main_Page #siteNotice,
body.page-Main_Page #localNotice,
body.page-Main_Page #mainbanner,
body.page-Main_Page #mw-page-base,
body.page-Main_Page #mw-head-base,
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 #p-lang-btn {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
visibility: hidden !important;
overflow: hidden !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 1.4s 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;
}
}
/* ==========================================================================
ARCHITECTURAL WOOD SANCTUM & SHADOWBOX NICHES (A1 CONCEPT)
========================================================================== */
:root {
--wood-darkest: #110804;
--wood-dark: #1c0e07;
--wood-mid: #2b170e;
--wood-warm: #3d2214;
--wood-light: #54311c;
--gold-bright: #f5d77f;
--gold-mid: #d4af37;
--gold-deep: #997a15;
--text-cream: #f4ebd9;
--text-muted: #bda892;
--spotlight-glow: radial-gradient(circle at 50% 0%, rgba(255, 230, 160, 0.28) 0%, rgba(255, 210, 120, 0.08) 45%, transparent 75%);
}
/* Master Architectural Container */
.sanctum-cabinet {
width: 100%;
max-width: 1280px;
margin: 0 auto;
background: linear-gradient(180deg, #2b170e 0%, #1c0e07 40%, #140904 100%);
border: 3px solid #3d2314;
border-radius: 12px;
box-shadow: 0 25px 60px rgba(0,0,0,0.9), inset 0 2px 4px rgba(255,220,150,0.2), inset 0 -2px 6px rgba(0,0,0,0.9);
position: relative;
overflow: hidden;
font-family: 'Cinzel', 'Georgia', serif;
color: var(--text-cream);
}
.sanctum-cabinet::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 4px);
pointer-events: none;
opacity: 0.7;
}
/* ZONE 1: TOP ARCHITECTURAL CORNICE / NAV BAR */
.cornice-header {
background: linear-gradient(180deg, #3f2314 0%, #28140a 60%, #1b0c05 100%);
border-bottom: 2px solid #5a341b;
box-shadow: 0 8px 16px rgba(0,0,0,0.7), inset 0 2px 3px rgba(255,230,170,0.25);
padding: 14px 28px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 10;
}
.cornice-left {
display: flex;
align-items: center;
gap: 16px;
}
.cornice-left .nav-burger {
cursor: pointer;
font-size: 20px;
color: var(--gold-mid);
background: rgba(0,0,0,0.4);
padding: 6px 12px;
border-radius: 4px;
border: 1px solid #4a2814;
}
.vh-brand-group {
display: flex;
flex-direction: column;
}
.main-brand-title {
font-size: 20px;
font-weight: 700;
letter-spacing: 2.5px;
color: var(--gold-bright);
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 12px rgba(212,175,55,0.3);
}
.brand-subline {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--text-muted);
text-transform: uppercase;
margin-top: 2px;
}
.cornice-search {
flex: 1;
max-width: 480px;
margin: 0 24px;
}
.search-input-wrap {
position: relative;
width: 100%;
}
.search-bevel {
width: 100%;
padding: 10px 18px 10px 42px;
background: #0f0704;
border: 1px solid #472613;
border-radius: 20px;
color: var(--text-cream);
font-family: inherit;
font-size: 13px;
box-shadow: inset 0 3px 6px rgba(0,0,0,0.9), 0 1px 2px rgba(255,255,255,0.08);
outline: none;
}
.search-bevel::placeholder {
color: #7d6b58;
font-style: italic;
}
.search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--gold-mid);
font-size: 14px;
}
.cornice-links {
display: flex;
align-items: center;
gap: 18px;
font-size: 12px;
letter-spacing: 1.5px;
}
.cornice-links a {
color: var(--text-cream) !important;
text-decoration: none;
}
.cornice-links a:hover {
color: var(--gold-bright) !important;
}
.cornice-links .btn-gold a {
background: linear-gradient(180deg, #b8860b 0%, #7d5904 100%);
padding: 6px 14px;
border-radius: 4px;
color: #fff !important;
font-weight: 600;
box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
/* SPOTLIGHT HOOD & OVERHEAD LAMPS (A1 STYLE) */
.spotlight-frieze {
position: relative;
padding: 24px 20px 10px 20px;
text-align: center;
background: linear-gradient(180deg, #24130b 0%, #180c06 100%);
border-bottom: 2px solid #3a1e0f;
}
.lamp-row {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
padding: 0 80px;
pointer-events: none;
}
.lamp {
width: 60px;
height: 8px;
background: radial-gradient(ellipse at center, #ffd700 0%, #b8860b 60%, #442500 100%);
border-radius: 0 0 10px 10px;
box-shadow: 0 0 14px 4px rgba(255, 215, 0, 0.45);
position: relative;
}
.lamp::after {
content: "";
position: absolute;
top: 8px;
left: -70px;
width: 200px;
height: 280px;
background: var(--spotlight-glow);
pointer-events: none;
}
.frieze-title {
font-size: 24px;
letter-spacing: 2px;
color: var(--gold-bright);
text-shadow: 0 2px 6px rgba(0,0,0,0.95);
margin-bottom: 4px;
}
.frieze-subtitle {
font-size: 12px;
letter-spacing: 2.5px;
color: var(--text-muted);
font-style: italic;
}
.shadowbox-body {
padding: 24px 24px;
}
/* ZONE 2: HERO STAGE */
.hero-sanctuary-stage {
display: grid;
grid-template-columns: 1fr 1.25fr 1fr;
gap: 20px;
background: linear-gradient(180deg, #180c06 0%, #100703 100%);
border: 3px solid #361e10;
border-radius: 8px;
padding: 20px;
box-shadow: inset 0 10px 25px rgba(0,0,0,0.9);
margin-bottom: 24px;
align-items: stretch;
}
.spotlight-card {
background: rgba(0, 0, 0, 0.45);
border: 1px solid #3b2011;
border-radius: 6px;
padding: 18px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
display: flex;
flex-direction: column;
}
.spotlight-tag {
font-size: 10px;
letter-spacing: 2px;
color: var(--gold-mid);
text-transform: uppercase;
margin-bottom: 6px;
}
.spotlight-headline a {
font-size: 16px;
color: var(--text-cream) !important;
font-weight: 600;
text-decoration: none;
}
.spotlight-body {
font-size: 12px;
color: #bcaaa4;
line-height: 1.5;
margin: 10px 0;
flex: 1;
}
.spotlight-footer a {
font-size: 11px;
color: var(--gold-bright) !important;
text-decoration: none;
}
.center-frame {
background: #090402;
border: 3px solid #4a2814;
border-radius: 6px;
padding: 18px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.95), inset 0 0 30px rgba(0,0,0,0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.sanctuary-center-badge {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--gold-mid);
text-transform: uppercase;
margin-bottom: 10px;
}
.vh-hero-title-link a {
text-decoration: none;
}
.vh-who-corner {
display: block;
font-size: 11px;
letter-spacing: 3px;
color: var(--gold-mid);
text-transform: uppercase;
}
.vh-main-title {
display: block;
font-size: 26px;
font-weight: 700;
letter-spacing: 2px;
color: var(--gold-bright);
}
.vh-gold-rule {
width: 80px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
margin: 10px auto;
}
.vh-description {
font-size: 12px;
color: var(--text-cream);
font-style: italic;
}
.multilingual-tape {
background: #140904;
border: 1px solid #361b0d;
padding: 6px 14px;
border-radius: 4px;
margin-top: 12px;
font-size: 11px;
color: var(--gold-bright);
letter-spacing: 1px;
}
/* ZONE 3: 3D RECESSED SHADOWBOX SHELF NICHES */
.niches-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 22px;
}
.wood-niche {
background: linear-gradient(180deg, #0e0603 0%, #170b05 100%);
border: 3px solid #381f11;
border-top: 4px solid #1a0c06;
border-radius: 6px;
padding: 22px 18px;
box-shadow: inset 0 8px 18px rgba(0,0,0,0.95), 0 4px 10px rgba(0,0,0,0.7), inset 0 0 20px rgba(0,0,0,0.8);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.2s, border-color 0.2s;
}
.wood-niche:hover {
transform: translateY(-2px);
border-color: #633b20;
}
.niche-lamp {
position: absolute;
top: 0;
width: 36px;
height: 5px;
background: #e2ba4d;
border-radius: 0 0 6px 6px;
box-shadow: 0 0 10px rgba(255,215,0,0.6);
}
.niche-icon-wrap {
font-size: 32px;
margin: 10px 0 10px 0;
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.8));
}
.niche-title {
font-size: 15px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--gold-bright);
text-transform: uppercase;
margin-bottom: 8px;
}
.niche-desc {
font-size: 12px;
line-height: 1.5;
color: var(--text-cream);
margin-bottom: 10px;
}
.niche-links {
font-size: 11px;
line-height: 1.6;
margin-bottom: 10px;
}
.niche-links a {
color: var(--text-cream) !important;
text-decoration: underline;
}
.niche-links a:hover {
color: var(--gold-bright) !important;
}
.niche-meta {
margin-top: auto;
font-size: 11px;
color: var(--gold-mid);
border-top: 1px solid #2d180c;
padding-top: 8px;
width: 100%;
letter-spacing: 1px;
}
/* SUPPLEMENTARY TAXONOMY SHELF */
.taxonomies-carved-shelf {
background: #110704;
border: 1px solid #361b0c;
border-radius: 6px;
padding: 12px 18px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
}
.shelf-label {
font-size: 11px;
letter-spacing: 1.5px;
color: var(--gold-mid);
}
.shelf-chips a {
display: inline-block;
background: #1d0f07;
border: 1px solid #422312;
border-radius: 4px;
padding: 4px 10px;
margin: 0 4px;
color: var(--text-cream) !important;
font-size: 11px;
text-decoration: none;
}
.shelf-chips a:hover {
border-color: var(--gold-mid);
color: var(--gold-bright) !important;
}
/* CARVED TIMELINE RIBBON */
.timeline-carved-ribbon {
background: linear-gradient(180deg, #1c0e07 0%, #120803 100%);
border: 2px solid #381f11;
border-radius: 6px;
padding: 16px 20px;
box-shadow: inset 0 4px 10px rgba(0,0,0,0.9);
}
.timeline-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.timeline-title {
font-size: 13px;
letter-spacing: 2px;
color: var(--gold-mid);
}
.timeline-span-badge {
font-size: 11px;
color: var(--gold-bright);
}
.timeline-years-bar {
display: flex;
justify-content: space-between;
background: #080301;
border: 1px solid #30170a;
border-radius: 20px;
padding: 8px 16px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
overflow-x: auto;
}
.vh-year {
font-size: 11px;
color: #9c8570;
cursor: pointer;
padding: 2px 6px;
transition: color 0.2s;
}
.vh-year:hover, .vh-year.active {
color: var(--gold-bright);
font-weight: 700;
}
/* ZONE 4: BASE PLINTH FOOTER */
.plinth-footer {
background: linear-gradient(180deg, #1d0f07 0%, #120803 100%);
border-top: 3px solid #3d2111;
padding: 20px 28px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: inset 0 3px 6px rgba(255,255,255,0.05);
}
.plinth-stat {
font-size: 13px;
color: var(--gold-bright);
letter-spacing: 1px;
}
.plinth-actions {
display: flex;
gap: 12px;
}
.plinth-btn a {
display: inline-block;
padding: 8px 16px;
background: #190b05;
border: 1px solid #4a2712;
border-radius: 4px;
color: var(--text-cream) !important;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.6);
}
.plinth-btn a:hover {
border-color: var(--gold-mid);
color: var(--gold-bright) !important;
}
@media (max-width: 900px) {
.niches-grid { grid-template-columns: 1fr; }
.hero-sanctuary-stage { grid-template-columns: 1fr; }
.taxonomies-carved-shelf { flex-direction: column; gap: 10px; }
.plinth-footer { flex-direction: column; gap: 14px; text-align: center; }
}
/* ==========================================================================
PERSISTENT TOP BAR: #345B63 SINGLE-ROW (BURGER, SEARCH, TITLE, USER)
========================================================================== */
/* 1. Full-Width Outer Banner Container (Strict #345B63) */
body.page-Main_Page .vector-header-container,
body.page-Main_Page #mw-head,
.vector-header-container {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 86px !important;
max-height: 96px !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 1000 !important;
box-sizing: border-box !important;
}
/* 2. Inner Flex Row: STRICT Single Horizontal Line */
.mw-header {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 86px !important;
max-height: 96px !important;
padding: 0 20px !important;
margin: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
position: relative !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* 3. CENTERED TITLE: Dead-Center On The Same Line */
#vanipedia-topbar-title,
.vanipedia-topbar-main-title {
position: static !important;
transform: none !important;
display: block !important;
font-family: 'Cinzel', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 700 !important;
letter-spacing: 1.8px !important;
color: #f5d77f !important;
text-decoration: none !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
white-space: nowrap !important;
line-height: 1.25 !important;
margin: 0 0 3px 0 !important;
padding: 0 !important;
pointer-events: none !important;
user-select: text !important;
}
#vanipedia-topbar-title {
pointer-events: none !important;
cursor: default !important;
user-select: text !important;
}
#vanipedia-topbar-title:hover {
color: #f5d77f !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
cursor: default !important;
}
/* 4. LEFT SECTION: Burger [ ≡ ] + Search In ONE Row */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
flex: 0 0 auto !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Force Burger Menu Dropdown to ALWAYS display on desktop */
.vector-header-start #vector-main-menu-dropdown {
display: flex !important;
align-items: center !important;
visibility: visible !important;
margin: 0 !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label,
.vector-header-start #vector-main-menu-dropdown .vector-main-menu-dropdown-toggle,
.vector-header-start #vector-main-menu-dropdown .cdx-button--fake-button {
color: #f5d77f !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 6px !important;
line-height: 1 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label:hover {
background-color: rgba(245, 215, 127, 0.15) !important;
border-radius: 4px !important;
}
/* HIGH-VISIBILITY GOLD FOR BURGER & ALL VECTOR ICONS */
.vector-header-container .vector-icon,
.vector-header-start .vector-icon,
.vector-header-end .vector-icon,
.mw-header .vector-icon {
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
filter: brightness(0) saturate(100%) invert(86%) sepia(26%) saturate(884%) hue-rotate(352deg) brightness(102%) contrast(96%) !important;
opacity: 1 !important;
visibility: visible !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
/* Hide duplicate site wordmark & tagline next to burger */
.vector-header-start .mw-logo-wordmark,
.vector-header-start .mw-logo-tagline,
.vector-header-start .mw-logo {
display: none !important;
}
/* Search Box Container on Left */
.vector-header-container #p-search,
.mw-header #p-search {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container #searchform,
.mw-header #searchform {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container .cdx-search-input,
.vector-header-container .vector-search-box-input,
.vector-header-container .cdx-text-input {
max-width: 260px !important;
height: 32px !important;
margin: 0 !important;
}
/* Refined Inset Search Input (Option 1: Harmonious Deep Sea Teal) */
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
background-color: #1f3e45 !important;
border: 1px solid rgba(245, 215, 127, 0.45) !important;
color: #ffffff !important;
border-radius: 18px !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
padding: 4px 12px 4px 30px !important;
font-size: 13px !important;
height: 30px !important;
line-height: 30px !important;
width: 180px !important;
transition: width 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important;
box-sizing: border-box !important;
}
.vector-header-container .cdx-text-input__input:focus,
.vector-header-container input[type="search"]:focus,
#searchInput:focus {
width: 240px !important;
background-color: #173036 !important;
border-color: #f5d77f !important;
box-shadow: 0 0 8px rgba(245, 215, 127, 0.4), inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
outline: none !important;
}
.vector-header-container .cdx-text-input__input::placeholder,
.vector-header-container input[type="search"]::placeholder,
#searchInput::placeholder {
color: #a5c4c9 !important;
font-style: italic !important;
}
.vector-header-container .cdx-text-input__icon,
.vector-header-container .vector-search-box-inner .vector-icon {
color: #f5d77f !important;
fill: #f5d77f !important;
}
/* Hide separate search submit buttons */
.vector-header-container .cdx-search-input__end-button,
.vector-header-container #searchButton,
.vector-header-container #mw-searchButton,
.vector-header-container .searchButton,
.vector-header-container input[type="submit"] {
display: none !important;
}
/* 5. RIGHT SECTION: User Part Fixed (No weird boxes, clean gold, unified dropdown) */
.vector-header-end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: nowrap !important;
gap: 8px !important;
flex: 0 0 auto !important;
height: 100% !important;
margin: 0 0 0 auto !important;
}
/* 5.1 Remove all clunky button box backgrounds and borders from top bar items */
.vector-header-end .cdx-button,
.vector-header-end .cdx-button--fake-button,
.vector-header-end .cdx-button--weight-quiet,
.vector-header-end .vector-dropdown-label,
.vector-header-end .vector-menu-heading,
.vector-header-end #p-personal,
.vector-header-end .vector-user-links,
.vector-header-end .vector-user-menu,
.vector-header-end .vector-menu,
.vector-header-end .vector-menu-content,
.vector-header-end #pt-userpage-2,
.vector-header-end #vector-user-links-dropdown {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* 5.2 Style username & header icons in clean warm gold (no boxes) */
.vector-header-end #pt-userpage-2,
.vector-header-end #pt-userpage-2 span,
.vector-header-end .vector-dropdown-label,
.vector-header-end .vector-user-menu-overflow .vector-dropdown-label {
color: #f5d77f !important;
fill: #f5d77f !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
white-space: nowrap !important;
padding: 4px 8px !important;
border-radius: 4px !important;
display: inline-flex !important;
align-items: center !important;
transition: background-color 0.2s ease, color 0.2s ease !important;
}
.vector-header-end #pt-userpage-2:hover,
.vector-header-end .vector-dropdown-label:hover {
background-color: rgba(245, 215, 127, 0.15) !important;
color: #ffffff !important;
}
/* 5.3 Desktop User Dropdown Menu (Strictly Matching image_a7f3ff.png) */
.vector-header-end .vector-dropdown-content {
background: #1f3e45 !important;
background-color: #1f3e45 !important;
border: 1.5px solid #b1873d !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
padding: 6px 0 !important;
min-width: 175px !important;
width: 180px !important;
overflow: visible !important;
}
.vector-header-end .vector-dropdown-content div,
.vector-header-end .vector-dropdown-content ul,
.vector-header-end .vector-dropdown-content .vector-menu-content {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.vector-header-end .vector-dropdown-content li {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
}
/* Ensure Talk (pt-mytalk) is visible in desktop dropdown */
.vector-header-end .vector-dropdown-content #pt-mytalk {
display: block !important;
visibility: visible !important;
}
/* Hide icons inside desktop user dropdown so it matches image_a7f3ff.png clean text */
.vector-header-end .vector-dropdown-content .vector-icon {
display: none !important;
}
/* Clean, compact, single-row links */
.vector-header-end .vector-dropdown-content a {
display: flex !important;
align-items: center !important;
color: #ffffff !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
line-height: 1.2 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
text-decoration: none !important;
box-sizing: border-box !important;
width: 100% !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
.vector-header-end .vector-dropdown-content a span {
display: inline !important;
padding: 0 !important;
margin: 0 !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
background: transparent !important;
}
.vector-header-end .vector-dropdown-content a:hover,
.vector-header-end .vector-dropdown-content a:focus,
.vector-header-end .vector-dropdown-content a:active {
background-color: #345B63 !important;
color: #f5d77f !important;
text-decoration: none !important;
}
/* Divider above Logout */
.vector-header-end .vector-dropdown-content #pt-logout,
.vector-header-end .vector-dropdown-content #p-user-menu-logout,
.vector-header-end .vector-dropdown-content .vector-user-menu-logout {
border-top: 1px solid rgba(177, 135, 61, 0.35) !important;
margin-top: 6px !important;
padding-top: 4px !important;
}
.vector-header-end .vector-dropdown-content #pt-logout a,
.vector-header-end .vector-dropdown-content #p-user-menu-logout a {
color: #ffffff !important;
}
.vector-header-end .vector-dropdown-content #pt-logout a:hover,
.vector-header-end .vector-dropdown-content #p-user-menu-logout a:hover {
background-color: #345B63 !important;
color: #fca5a5 !important;
}
/* 6. DISABLE ALL HOVER PREVIEWS / POPUPS IN TOP BAR */
.vector-header-container [title]:hover::after,
.vector-header-container [title]:hover::before,
.vector-header-container a[title]:hover::after,
.vector-header-container a[title]:hover::before,
.mw-header [title]:hover::after,
.mw-header [title]:hover::before,
.mw-header a[title]:hover::after,
.mw-header a[title]:hover::before {
display: none !important;
content: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 7. Sticky Header Support (Color: #345B63) */
.vector-sticky-header {
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
height: 48px !important;
}
.vector-sticky-header a,
.vector-sticky-header .vector-icon {
color: #f5d77f !important;
fill: #f5d77f !important;
}
/* 8. Main Page Adjustments: Clean Flush Under Top Bar */
body.page-Main_Page #vani-home .vh-top {
display: none !important;
}
body.page-Main_Page #vani-home .vh-photo-stage {
top: 0 !important;
}
/* ==========================================================================
ELIMINATE UNWANTED LIGHT-GREEN STRIP / TOOLBAR UNDER TOP BAR
========================================================================== */
body.page-Main_Page .vector-page-toolbar-container,
body.page-Main_Page .vector-page-toolbar,
body.page-Main_Page #siteNotice,
body.page-Main_Page #localNotice,
body.page-Main_Page #mw-page-base,
body.page-Main_Page #mw-head-base,
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 #p-lang-btn {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
visibility: hidden !important;
overflow: hidden !important;
}
/* Ensure no gap or background bleed between top bar and content on Main Page */
body.page-Main_Page .vector-header-container {
margin-bottom: 0 !important;
}
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 {
margin-top: 0 !important;
padding-top: 0 !important;
background: #f6f2e9 !important;
background-color: #f6f2e9 !important;
}
/* ==========================================================================
WHO IS SRILA PRABHUPADA & FOUNDER-ACARYA HERO ALIGNMENT
========================================================================== */
.vh-hero-title-wrap {
text-align: center !important;
margin: 16px auto 8px auto !important;
position: relative !important;
z-index: 2 !important;
}
.vh-hero-title-link {
text-decoration: none !important;
display: inline-block !important;
}
.vh-who-corner {
display: block !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: #b1873d !important; /* Temple Gold */
margin-bottom: 4px !important;
}
.vh-main-title {
display: block !important;
font-family: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif !important;
font-size: 46px !important;
font-weight: 700 !important;
line-height: 1.1 !important;
color: #1e353b !important; /* Deep Sacred Slate-Teal */
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}
.vh-founder-subline {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
margin: 6px auto 14px auto !important;
padding: 4px 18px !important;
background: rgba(177, 135, 61, 0.08) !important;
border: 1px solid rgba(177, 135, 61, 0.25) !important;
border-radius: 20px !important;
color: #345B63 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
font-style: italic !important;
letter-spacing: 0.5px !important;
}
.vh-founder-subline::before,
.vh-founder-subline::after {
content: "♦" !important;
font-size: 10px !important;
color: #b1873d !important;
}
/* ==========================================================================
PANORAMIC TIMELINE RIBBON (1896 – 1977) BETWEEN HERO & GATEWAYS
========================================================================== */
.vh-timeline-panoramic {
width: 100% !important;
max-width: 1400px !important;
margin: 18px auto 24px auto !important;
padding: 12px 16px !important;
background: #faf7f0 !important;
border-top: 1px solid rgba(177, 135, 61, 0.35) !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.35) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
border-radius: 4px !important;
box-sizing: border-box !important;
}
.vh-timeline-panoramic .vh-timeline-years {
top: 0 !important;
margin: 0 auto 12px auto !important;
gap: 14px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
.vh-timeline-panoramic .vh-year {
font-size: 16px !important;
font-weight: 600 !important;
padding: 5px 12px !important;
border-radius: 14px !important;
color: #345B63 !important;
background: rgba(255, 255, 255, 0.7) !important;
border: 1px solid rgba(177, 135, 61, 0.2) !important;
transition: all 0.2s ease !important;
}
.vh-timeline-panoramic .vh-year:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
transform: translateY(-2px) !important;
box-shadow: 0 3px 8px rgba(52, 91, 99, 0.25) !important;
}
.vh-timeline-panoramic .vh-year.is-active {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #b1873d !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
/* FORCE WARM PARCHMENT ON ALL MAIN PAGE CONTAINERS (KILL MINT GREEN BLEED) */
body.page-Main_Page,
html.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;
background-color: #f6f2e9 !important;
background-image: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
}
/* ==========================================================================
VANIPEDIA STRICT ZERO-SCROLL VIEWPORT-FIT SYSTEM (STEP 11)
========================================================================== */
/* 1. Strict Zero-Scroll Viewport Locking */
html.page-Main_Page,
body.page-Main_Page {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page .mw-page-container {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
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 {
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* 2. Master Canvas Vertical Rhythm (Auto-distributed inside single screen) */
body.page-Main_Page #vani-home {
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 8px !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 8px 18px 10px 18px !important;
box-sizing: border-box !important;
overflow: hidden !important;
background-color: transparent !important;
}
/* Base Card Styling */
.vh-card,
.vh-gateway,
.vh-quote-frame,
.vh-bottom-card {
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.35) !important;
border-radius: 6px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
box-sizing: border-box !important;
}
/* Card Header Ribbon */
.vh-card-header {
background: rgba(177, 135, 61, 0.1) !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.28) !important;
padding: 6px 12px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #b1873d !important;
}
.vh-card-header .vh-badge-icon {
font-size: 13px !important;
margin-right: 5px !important;
}
.vh-card-header .vh-badge-sub {
font-size: 9.5px !important;
letter-spacing: 1px !important;
color: #345B63 !important;
opacity: 0.85 !important;
}
.vh-card-body {
padding: 10px 14px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
box-sizing: border-box !important;
font-size: 13px !important;
line-height: 1.45 !important;
}
/* SECTION 1: HERO TRIAD (Compact) */
.vh-triad-grid {
display: grid !important;
grid-template-columns: 280px 1fr 280px !important;
gap: 14px !important;
align-items: stretch !important;
flex: 0 0 auto !important;
max-height: 235px !important;
}
/* Memories of Srila Prabhupada Card (Left) */
.vh-card-memories .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #1e353b !important;
text-decoration: none !important;
display: block !important;
margin-bottom: 6px !important;
}
.vh-card-memories .vh-card-snippet {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
color: #4a5568 !important;
flex: 1 1 auto !important;
}
.vh-card-actions {
margin-top: 8px !important;
}
.vh-btn-pill {
display: inline-flex !important;
align-items: center !important;
padding: 4px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #345B63 !important;
background: rgba(52, 91, 99, 0.08) !important;
border: 1px solid rgba(52, 91, 99, 0.28) !important;
border-radius: 14px !important;
transition: all 0.2s ease !important;
}
.vh-btn-pill:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
}
/* Center Sanctuary Frame */
.vh-card-sanctuary {
background: radial-gradient(circle at center, #ffffff 0%, #faf6ee 100%) !important;
padding: 10px 16px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.vh-card-sanctuary .vh-hero-title-wrap {
margin: 0 !important;
}
.vh-card-sanctuary .vh-who-corner {
display: block !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
color: #b1873d !important;
margin-bottom: 0px !important;
}
.vh-card-sanctuary .vh-main-title {
font-family: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif !important;
font-size: 34px !important;
font-weight: 700 !important;
line-height: 1 !important;
color: #1e353b !important;
}
/* Button below Srila Prabhupada: only "Founder-Ācārya of ISKCON", clickable wiki link */
.vh-card-sanctuary .vh-founder-subline {
display: inline-block !important;
margin: 3px auto 6px auto !important;
}
.vh-card-sanctuary .vh-founder-subline a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 3px 14px !important;
background: rgba(177, 135, 61, 0.12) !important;
border: 1px solid rgba(177, 135, 61, 0.4) !important;
border-radius: 16px !important;
color: #345B63 !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.vh-card-sanctuary .vh-founder-subline a:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
box-shadow: 0 2px 6px rgba(52, 91, 99, 0.3) !important;
}
/* Compact Sacred Portrait Oval */
.vh-portrait-wrapper {
margin: 2px auto 4px auto !important;
display: flex !important;
justify-content: center !important;
}
.vh-portrait-wrapper .vh-photo-stage {
width: 110px !important;
height: 110px !important;
border-radius: 50% !important;
border: 2.5px solid #b1873d !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
overflow: hidden !important;
position: relative !important;
background-color: #f4ebd9 !important;
}
.vh-card-sanctuary .vh-description {
font-family: 'Noto Serif', Georgia, serif !important;
font-style: italic !important;
font-size: 12px !important;
color: #576574 !important;
margin: 2px auto 0 auto !important;
max-width: 440px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* SECTION 2: CLEAN INTERACTIVE TIMELINE (No outer border/box rectangle) */
.vh-timeline-section {
position: relative !important;
top: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.vh-timeline-years {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 auto 6px auto !important;
padding: 0 !important;
position: static !important;
top: 0 !important;
}
.vh-timeline-years .vh-year {
padding: 3px 10px !important;
border-radius: 12px !important;
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.28) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: #345B63 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
line-height: 1.2 !important;
}
.vh-timeline-years .vh-year:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
transform: translateY(-1px) !important;
}
.vh-timeline-years .vh-year.is-active {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #b1873d !important;
font-weight: 700 !important;
}
/* Lifeline track window */
.vh-lifeline-window {
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.22) !important;
border-radius: 6px !important;
height: 80px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 auto !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.vh-timeline-track {
display: flex !important;
align-items: flex-start !important;
height: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
.vh-timeline-track::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 36px !important;
height: 1px !important;
background: rgba(177, 135, 61, 0.35) !important;
}
.vh-timeline-item {
flex: 0 0 200px !important;
padding: 6px 14px 0 !important;
box-sizing: border-box !important;
position: relative !important;
}
.vh-timeline-date {
font-size: 11px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 1.2 !important;
}
.vh-timeline-dot {
position: absolute !important;
top: 32px !important;
left: 14px !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #b1873d !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1px #b1873d !important;
}
.vh-timeline-text {
margin-top: 14px !important;
font-size: 11px !important;
line-height: 1.3 !important;
color: #1e293b !important;
max-width: 170px !important;
white-space: normal !important;
}
/* SECTION 3: 6 GATEWAYS GRID (Compact 6-Columns) */
.vh-gateways-frame {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 10px !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.vh-gateway {
padding: 8px 6px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.vh-gateway:hover {
transform: translateY(-2px) !important;
border-color: #b1873d !important;
box-shadow: 0 4px 12px rgba(177, 135, 61, 0.15) !important;
}
.vh-gw-icon-circle {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
background: rgba(177, 135, 61, 0.1) !important;
border: 1px solid rgba(177, 135, 61, 0.22) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 4px !important;
}
.vh-gateway .vh-icon {
font-size: 15px !important;
color: #b1873d !important;
}
.vh-gateway-title {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 13.5px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: #1e353b !important;
margin: 0 0 4px 0 !important;
width: 100% !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.2) !important;
padding-bottom: 2px !important;
}
.vh-gateway-links {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
width: 100% !important;
font-size: 11.5px !important;
}
.vh-gateway-links a {
color: #2c3e50 !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.vh-gateway-links a:hover {
color: #b1873d !important;
text-decoration: underline !important;
}
/* SECTION 4: QUOTE SCROLL (Slim Banner) */
.vh-quote-frame {
background: #faf6ee !important;
border: 1px solid rgba(177, 135, 61, 0.3) !important;
border-radius: 6px !important;
padding: 8px 24px !important;
margin: 0 auto !important;
text-align: center !important;
width: 100% !important;
max-width: 1000px !important;
flex: 0 0 auto !important;
}
.vh-quote-frame .vh-quote-inner {
font-family: 'Noto Serif', Georgia, serif !important;
font-style: italic !important;
font-size: 13.5px !important;
line-height: 1.4 !important;
color: #1e353b !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
}
.vh-quote-frame .vh-quote-text {
max-width: 750px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.vh-quote-frame .vh-quote-source {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-style: normal !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: #b1873d !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.vh-quote-mark {
color: rgba(177, 135, 61, 0.45) !important;
font-size: 24px !important;
line-height: 1 !important;
font-family: Georgia, serif !important;
}
/* SECTION 5: BOTTOM MODULES (Treasures & Network) */
.vh-bottom-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.vh-bottom-card {
padding: 0 !important;
overflow: hidden !important;
}
.vh-feature-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
padding: 8px 10px !important;
}
.vh-feature {
background: #faf7f0 !important;
border: 1px solid rgba(177, 135, 61, 0.2) !important;
border-radius: 4px !important;
padding: 6px 8px !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
font-size: 11px !important;
}
.vh-network-stats-grid {
display: flex !important;
justify-content: space-around !important;
gap: 6px !important;
padding: 8px 10px 4px 10px !important;
text-align: center !important;
}
.vh-network-stat {
flex: 1 1 0 !important;
background: #faf7f0 !important;
border: 1px solid rgba(177, 135, 61, 0.2) !important;
border-radius: 4px !important;
padding: 6px 2px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-decoration: none !important;
}
.vh-stat-num {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #1e353b !important;
}
.vh-stat-lbl {
font-size: 8.5px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #b1873d !important;
}
.vh-network-mission {
text-align: center !important;
padding: 4px 10px 6px 10px !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
font-style: italic !important;
color: #576574 !important;
}
/* ==========================================================================
THEMATIC TAXONOMY INDEX (4 SECTIONS) & PRABHUPADA IN MEDIA (STEP 12)
========================================================================== */
/* Section Heading */
.vh-section-header {
margin: 18px 0 10px 0 !important;
text-align: left !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.25) !important;
padding-bottom: 6px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.vh-section-badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background: #345B63 !important;
padding: 3px 8px !important;
border-radius: 4px !important;
}
.vh-section-heading {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16px !important;
letter-spacing: 1.2px !important;
color: #1e353b !important;
margin: 0 !important;
}
/* 4-Column Taxonomy Grid */
.vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
width: 100% !important;
margin-bottom: 16px !important;
}
.vh-card-tax {
display: flex !important;
flex-direction: column !important;
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.3) !important;
border-radius: 6px !important;
}
.vh-tax-spotlight-item {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
flex: 1 1 auto !important;
}
.vh-tax-item-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #1e353b !important;
text-decoration: none !important;
}
.vh-tax-item-name a:hover {
color: #b1873d !important;
text-decoration: underline !important;
}
.vh-tax-item-desc {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #4a5568 !important;
flex: 1 1 auto !important;
}
.vh-tax-item-link {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
color: #345B63 !important;
text-decoration: none !important;
margin-top: 6px !important;
display: inline-block !important;
}
.vh-tax-item-link:hover {
color: #b1873d !important;
text-decoration: underline !important;
}
/* Prabhupada in the Media Section */
.vh-card-media-section {
background: #faf7f0 !important;
margin-bottom: 16px !important;
}
.vh-media-body {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
padding: 12px 18px !important;
}
.vh-media-desc {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #334155 !important;
flex: 1 1 auto !important;
}
.vh-media-actions {
flex-shrink: 0 !important;
}
/* Allow smooth scrolling when full sections are present */
body.page-Main_Page {
overflow-y: auto !important;
}
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
body.page-Main_Page #vani-home {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
@media (max-width: 1024px) {
.vh-taxonomy-grid { grid-template-columns: repeat(2, 1fr) !important; }
.vh-media-body { flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 640px) {
.vh-taxonomy-grid { grid-template-columns: 1fr !important; }
}
/* Explicitly hide quote and bottom sections if any old cache or DOM remains */
.vh-quote-frame,
#vh-random-quote-wrap,
.vh-bottom-grid,
.vh-bottom-card,
.vh-card-treasures,
.vh-card-network {
display: none !important;
}
/* ==========================================================================
STEP 14: TOP BAR SEARCH ANCHORED LEFT + SACRED 3D ARCHITECTURAL STYLING
========================================================================== */
/* 1. TOP BAR LEFT ANCHOR FOR SEARCH */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
flex: 0 0 auto !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-start #vector-main-menu-dropdown {
order: 1 !important;
}
.vector-header-start #p-search,
.vector-header-container #p-search,
.mw-header #p-search {
order: 2 !important;
display: flex !important;
align-items: center !important;
margin: 0 0 0 4px !important;
padding: 0 !important;
}
/* 2. 3D CARDS (HERO TRIAD, GATEWAYS, TAXONOMY, MEDIA) */
.vh-card,
.vh-gateway,
.vh-card-tax,
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #faf8f4 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.32) !important;
border-top: 1px solid rgba(255, 255, 255, 0.95) !important;
border-bottom: 2.5px solid rgba(177, 135, 61, 0.45) !important;
border-radius: 8px !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 5px 15px rgba(30, 53, 59, 0.07),
0 10px 24px -5px rgba(30, 53, 59, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1) !important;
position: relative !important;
}
.vh-card:hover,
.vh-gateway:hover,
.vh-card-tax:hover,
.vh-card-media-section:hover {
transform: translateY(-3px) !important;
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.06),
0 10px 25px rgba(30, 53, 59, 0.12),
0 16px 32px -6px rgba(177, 135, 61, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
/* Card Header Plaques (Embossed Top Bar) */
.vh-card-header {
background: linear-gradient(180deg, #fbf9f4 0%, #f2ebdd 100%) !important;
border-bottom: 1.5px solid rgba(177, 135, 61, 0.3) !important;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(0, 0, 0, 0.03) !important;
border-top-left-radius: 7px !important;
border-top-right-radius: 7px !important;
}
/* Sanctuary Center Card (Elevated Sovereign Altar) */
.vh-card-sanctuary {
background: radial-gradient(circle at 50% 35%, #ffffff 0%, #faf6ec 65%, #f3ece0 100%) !important;
border: 1.5px solid rgba(177, 135, 61, 0.45) !important;
border-top: 1.5px solid rgba(255, 255, 255, 1) !important;
border-bottom: 3.5px solid rgba(177, 135, 61, 0.6) !important;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.06),
0 8px 24px rgba(30, 53, 59, 0.11),
0 16px 36px -6px rgba(177, 135, 61, 0.14),
inset 0 1px 0 #ffffff,
inset 0 0 20px rgba(177, 135, 61, 0.04) !important;
}
/* Sacred Portrait Medallion Frame */
.vh-portrait-wrapper .vh-photo-stage {
border: 3.5px solid #b1873d !important;
box-shadow:
0 6px 18px rgba(30, 53, 59, 0.22),
0 12px 28px rgba(0, 0, 0, 0.15),
inset 0 2px 4px rgba(255, 255, 255, 0.8),
inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.vh-portrait-wrapper .vh-photo-stage:hover {
transform: scale(1.03) !important;
box-shadow:
0 8px 24px rgba(30, 53, 59, 0.28),
0 16px 36px rgba(177, 135, 61, 0.3),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -3px 6px rgba(0, 0, 0, 0.45) !important;
}
/* 3D Gateways Icon Medallions */
.vh-gw-icon-circle {
background: linear-gradient(145deg, #ffffff 0%, #f6efe0 50%, #eadecb 100%) !important;
border: 1.5px solid #b1873d !important;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.10),
inset 0 1px 1px #ffffff,
inset 0 -1.5px 2px rgba(177, 135, 61, 0.45) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.vh-gateway:hover .vh-gw-icon-circle {
transform: scale(1.08) translateY(-1px) !important;
background: linear-gradient(145deg, #fdfbf7 0%, #f2e3c6 100%) !important;
box-shadow:
0 5px 10px rgba(177, 135, 61, 0.25),
inset 0 1px 1px #ffffff,
inset 0 -1.5px 2px rgba(177, 135, 61, 0.6) !important;
}
/* 3D Tactile Timeline Year Keys */
.vh-timeline-years .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #f4eee2 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.35) !important;
border-top: 1px solid rgba(255, 255, 255, 0.95) !important;
border-bottom: 2.5px solid rgba(177, 135, 61, 0.55) !important;
border-radius: 14px !important;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.07),
inset 0 1px 0 #ffffff !important;
transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.vh-timeline-years .vh-year:hover {
transform: translateY(-2px) !important;
border-bottom: 3.5px solid rgba(177, 135, 61, 0.75) !important;
box-shadow:
0 4px 10px rgba(177, 135, 61, 0.22),
inset 0 1px 0 #ffffff !important;
color: #1e353b !important;
}
.vh-timeline-years .vh-year.is-active {
background: linear-gradient(180deg, #345B63 0%, #1f373c 100%) !important;
color: #ffffff !important;
border: 1px solid #122124 !important;
border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
border-bottom: 2.5px solid #0d1719 !important;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.4),
0 2px 5px rgba(0, 0, 0, 0.15) !important;
}
/* Raised 3D Pill Action Buttons */
.vh-btn-pill,
.vh-founder-subline a,
.vh-tax-item-link {
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
transition: all 0.2s ease !important;
}
.vh-btn-pill {
background: linear-gradient(180deg, #3d6a74 0%, #28474e 100%) !important;
color: #ffffff !important;
border: 1px solid #1a2f34 !important;
border-bottom: 2px solid #0f1c1f !important;
border-radius: 16px !important;
padding: 4px 14px !important;
display: inline-block !important;
}
.vh-btn-pill:hover {
background: linear-gradient(180deg, #b1873d 0%, #916c2a 100%) !important;
border-color: #72531a !important;
border-bottom: 2.5px solid #553e13 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(177, 135, 61, 0.3) !important;
color: #ffffff !important;
}
.vh-founder-subline a {
background: linear-gradient(180deg, #ffffff 0%, #f6efe2 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.4) !important;
border-bottom: 2.5px solid rgba(177, 135, 61, 0.65) !important;
}
.vh-founder-subline a:hover {
background: linear-gradient(180deg, #345B63 0%, #213c42 100%) !important;
color: #ffffff !important;
border-color: #162a2e !important;
border-bottom: 2.5px solid #0b1517 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(30, 53, 59, 0.25) !important;
}
/* 3D Lifeline Track (Carved Groove with Illuminated Bar) */
.vh-lifeline {
background: linear-gradient(180deg, #e4ded0 0%, #ede7db 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.25) !important;
border-bottom: 1px solid #ffffff !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.10) !important;
border-radius: 12px !important;
}
/* ==========================================================================
STEP 15: "SOLID" ARCHITECTURAL PRESENCE & EMBOSSED 3D DEPTH
========================================================================== */
/* 1. SOLID CARD ARCHITECTURE (SUBSTANTIAL GROUNDED PRESENCE) */
.vh-card,
.vh-gateway,
.vh-card-tax,
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #fbf9f4 60%, #f5efe2 100%) !important;
border: 1.5px solid #c09b4d !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #8e6b22 !important;
border-radius: 8px !important;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 8px 20px rgba(24, 38, 35, 0.12),
0 16px 32px -4px rgba(24, 38, 35, 0.14),
inset 0 1px 0 #ffffff,
inset 0 -1px 0 rgba(192, 155, 77, 0.2) !important;
transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1), border-color 0.22s ease !important;
position: relative !important;
}
.vh-card:hover,
.vh-gateway:hover,
.vh-card-tax:hover,
.vh-card-media-section:hover {
transform: translateY(-4px) !important;
border-color: #d4ab55 !important;
border-bottom: 4.5px solid #7a5818 !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.10),
0 14px 28px rgba(24, 38, 35, 0.18),
0 24px 42px -6px rgba(177, 135, 61, 0.25),
inset 0 1px 0 #ffffff !important;
}
/* 2. SOLID EMBOSSED CARD HEADER (STONE/METAL LINTEL) */
.vh-card-header {
background: linear-gradient(180deg, #faf6ee 0%, #ebe0ca 100%) !important;
border-bottom: 2px solid #b89348 !important;
box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.05) !important;
border-top-left-radius: 6.5px !important;
border-top-right-radius: 6.5px !important;
padding: 8px 14px !important;
}
.vh-badge-text {
font-weight: 800 !important;
letter-spacing: 1.6px !important;
color: #725215 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.vh-badge-sub {
font-weight: 700 !important;
color: #55442a !important;
background: rgba(177, 135, 61, 0.16) !important;
border: 1px solid rgba(177, 135, 61, 0.35) !important;
border-radius: 4px !important;
padding: 2px 7px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
/* 3. SANCTUARY CENTER CARD (SOVEREIGN REVERENTIAL ALTAR) */
.vh-card-sanctuary {
background: radial-gradient(circle at 50% 32%, #ffffff 0%, #fbf6ec 55%, #f0e6d2 100%) !important;
border: 2px solid #b1873d !important;
border-top: 2px solid #ffffff !important;
border-bottom: 4.5px solid #785414 !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.09),
0 12px 28px rgba(24, 38, 35, 0.16),
0 22px 44px -8px rgba(177, 135, 61, 0.22),
inset 0 1px 0 #ffffff,
inset 0 0 24px rgba(177, 135, 61, 0.08) !important;
}
.vh-card-sanctuary .vh-main-title {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}
/* 4. SOLID CAST GOLD PORTRAIT MEDALLION */
.vh-portrait-wrapper .vh-photo-stage {
border: 4px solid #b1873d !important;
box-shadow:
0 8px 24px rgba(20, 35, 32, 0.32),
0 16px 36px rgba(0, 0, 0, 0.22),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -4px 8px rgba(0, 0, 0, 0.5) !important;
}
.vh-portrait-wrapper .vh-photo-stage:hover {
transform: scale(1.04) !important;
border-color: #c99c45 !important;
box-shadow:
0 12px 32px rgba(20, 35, 32, 0.40),
0 20px 45px rgba(177, 135, 61, 0.35),
inset 0 2px 4px rgba(255, 255, 255, 1),
inset 0 -4px 8px rgba(0, 0, 0, 0.55) !important;
}
/* 5. SOLID GATEWAYS WITH SCULPTED BRONZE/GOLD MEDALLIONS */
.vh-gateway {
padding: 14px 10px 12px 10px !important;
}
.vh-gw-icon-circle {
width: 38px !important;
height: 38px !important;
background: linear-gradient(135deg, #ffffff 0%, #eedfc7 50%, #d6ba8f 100%) !important;
border: 2px solid #b1873d !important;
border-top-color: #ffffff !important;
border-bottom-color: #825f18 !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.14),
inset 0 1px 1.5px #ffffff,
inset 0 -2px 3px rgba(130, 95, 30, 0.5) !important;
}
.vh-gateway:hover .vh-gw-icon-circle {
transform: scale(1.1) translateY(-2px) !important;
background: linear-gradient(135deg, #ffffff 0%, #f7ebd5 50%, #e5cb9e 100%) !important;
border-color: #c49d48 !important;
box-shadow:
0 6px 14px rgba(177, 135, 61, 0.35),
inset 0 1px 2px #ffffff,
inset 0 -2px 4px rgba(130, 95, 30, 0.6) !important;
}
.vh-gateway-title {
font-size: 14px !important;
font-weight: 700 !important;
color: #14282c !important;
letter-spacing: 1.4px !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
margin-top: 6px !important;
}
/* 6. SOLID TACTILE TIMELINE YEAR BUTTONS */
.vh-timeline-years .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #efe7d6 100%) !important;
border: 1.5px solid #b89348 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #785414 !important;
border-radius: 14px !important;
font-weight: 700 !important;
color: #213c42 !important;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.10),
inset 0 1px 0 #ffffff !important;
padding: 4px 12px !important;
}
.vh-timeline-years .vh-year:hover {
transform: translateY(-2.5px) !important;
border-color: #cda24e !important;
border-bottom: 4.5px solid #63430c !important;
box-shadow:
0 6px 14px rgba(177, 135, 61, 0.28),
inset 0 1px 0 #ffffff !important;
color: #0b1a1c !important;
}
.vh-timeline-years .vh-year.is-active {
background: linear-gradient(180deg, #2b4f57 0%, #172c30 100%) !important;
color: #ffffff !important;
border: 1.5px solid #0d191c !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.4) !important;
border-bottom: 3.5px solid #060c0d !important;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.5),
0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
/* 7. SOLID CARVED LIFELINE TRACK */
.vh-lifeline {
background: linear-gradient(180deg, #ded6c4 0%, #e8e1d3 100%) !important;
border: 1.5px solid #a8843c !important;
border-top-color: #8c6a26 !important;
border-bottom-color: #ffffff !important;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16) !important;
border-radius: 12px !important;
}
/* 8. SOLID 3D ACTION PILL BUTTONS */
.vh-btn-pill {
background: linear-gradient(180deg, #376069 0%, #20393f 100%) !important;
color: #ffffff !important;
border: 1.5px solid #142529 !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
border-bottom: 3px solid #0a1315 !important;
border-radius: 16px !important;
padding: 5px 16px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
box-shadow:
0 3px 7px rgba(0, 0, 0, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
}
.vh-btn-pill:hover {
background: linear-gradient(180deg, #b88e40 0%, #8c661d 100%) !important;
border-color: #61440d !important;
border-top-color: rgba(255, 255, 255, 0.5) !important;
border-bottom: 3.5px solid #432e08 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 14px rgba(177, 135, 61, 0.38) !important;
color: #ffffff !important;
}
.vh-founder-subline a {
background: linear-gradient(180deg, #ffffff 0%, #f4ebd9 100%) !important;
border: 1.5px solid #b89348 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3px solid #785414 !important;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff !important;
}
.vh-founder-subline a:hover {
background: linear-gradient(180deg, #345B63 0%, #1b3237 100%) !important;
color: #ffffff !important;
border-color: #0e1e21 !important;
border-top-color: rgba(255, 255, 255, 0.4) !important;
border-bottom: 3.5px solid #050b0c !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 14px rgba(30, 53, 59, 0.3) !important;
}
/* 9. SOLID DEDICATED MEDIA ARCHIVES SECTION */
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #faf6ee 100%) !important;
border: 1.5px solid #b89348 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #785414 !important;
margin-top: 8px !important;
margin-bottom: 24px !important;
}
.vh-media-desc {
font-size: 13.5px !important;
font-weight: 500 !important;
color: #273b40 !important;
}
/* 10. Hide THEMATIC TAXONOMY INDEX announcement banner from old cache */
.vh-section-header,
.vh-section-badge,
.vh-section-heading {
display: none !important;
}
/* Explicitly hide the 6 gateways frame if any cache remains */
.vh-gateways-frame,
.vh-gateway,
.vh-gw-icon-circle {
display: none !important;
}
/* ==========================================================================
SAFE NO-SCROLL DASHBOARD & ZERO-OVERLAP ARCHITECTURE (STEP 18)
========================================================================== */
/* 1. PREVENT SCROLLING ON MAIN PAGE CLEANLY WITHOUT BREAKING VECTOR INTERNALS */
body.page-Main_Page {
overflow-y: hidden !important;
overflow-x: hidden !important;
}
/* 2. THE MASTER DASHBOARD CONTAINER (FITS SCREEN EXACTLY) */
body.page-Main_Page #vani-home {
height: calc(100vh - 56px) !important;
max-height: calc(100vh - 56px) !important;
box-sizing: border-box !important;
padding: 6px 16px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 6px !important;
overflow: hidden !important;
position: relative !important;
}
/* Neutralize old legacy absolute / conflicting rules */
.vh-intro,
.vh-now,
.vh-main,
.vh-gateways,
.vh-who-link {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
display: block !important;
}
/* 3. SECTION 1: HERO TRIAD */
.vh-triad-grid {
flex: 1 1 37% !important;
max-height: 38vh !important;
min-height: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1.15fr 1fr !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.vh-triad-grid .vh-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.vh-card-header {
flex: 0 0 auto !important;
padding: 5px 10px !important;
}
.vh-card-body {
flex: 1 1 auto !important;
padding: 6px 10px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Center Card: Sanctuary Altar */
.vh-card-sanctuary {
padding: 6px 12px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
}
.vh-card-sanctuary .vh-hero-title-wrap {
margin: 0 !important;
line-height: 1 !important;
}
.vh-card-sanctuary .vh-who-corner {
position: static !important;
display: block !important;
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #b1873d !important;
margin: 0 auto 2px auto !important;
}
.vh-card-sanctuary .vh-main-title {
font-size: 24px !important;
line-height: 1.1 !important;
font-weight: 700 !important;
color: #123f38 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
}
.vh-card-sanctuary .vh-founder-subline {
margin: 2px auto !important;
}
.vh-card-sanctuary .vh-founder-subline a {
padding: 2px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
}
.vh-portrait-wrapper {
margin: 2px auto !important;
}
.vh-portrait-wrapper .vh-photo-stage {
width: 85px !important;
height: 85px !important;
}
.vh-card-sanctuary .vh-gold-rule {
width: 28px !important;
height: 2px !important;
margin: 2px auto !important;
background: #b1873d !important;
}
.vh-card-sanctuary .vh-description {
position: static !important;
width: auto !important;
max-width: 90% !important;
min-height: 0 !important;
font-size: 13px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* 4. SECTION 2: INTERACTIVE LIFE TIMELINE */
.vh-timeline-section {
flex: 0 0 auto !important;
height: 62px !important;
max-height: 62px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
position: relative !important;
}
.vh-timeline-years {
position: static !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
margin: 0 0 3px 0 !important;
padding: 0 !important;
width: 100% !important;
white-space: nowrap !important;
}
.vh-timeline-years .vh-year {
padding: 2px 8px !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
.vh-lifeline-window {
position: relative !important;
height: 30px !important;
max-height: 30px !important;
overflow: hidden !important;
}
.vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
/* 5. SECTION 3: THEMATIC TAXONOMY (4 CARDS) */
.vh-taxonomy-section {
flex: 1 1 37% !important;
max-height: 39vh !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 10px !important;
height: 100% !important;
width: 100% !important;
margin: 0 !important;
}
.vh-card-tax {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.vh-card-tax .vh-card-header {
padding: 4px 8px !important;
}
.vh-card-tax .vh-card-body {
padding: 5px 8px !important;
}
.vh-tax-spotlight-item {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.vh-tax-item-name a {
font-size: 13.5px !important;
font-weight: 700 !important;
}
.vh-tax-item-desc {
font-size: 11px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vh-tax-item-link {
font-size: 10px !important;
margin-top: auto !important;
}
/* 6. SECTION 4: PRABHUPĀDA IN THE MEDIA (COMPACT HORIZONTAL BAR 42px) */
.vh-card-media-section {
flex: 0 0 auto !important;
height: 42px !important;
max-height: 42px !important;
margin: 0 !important;
padding: 0 14px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
box-sizing: border-box !important;
}
.vh-card-media-section .vh-card-header {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.vh-card-media-section .vh-media-body {
padding: 0 !important;
flex: 1 1 auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
}
.vh-card-media-section .vh-media-desc {
font-size: 11.5px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: #273b40 !important;
flex: 1 1 auto !important;
}
.vh-card-media-section .vh-media-actions {
flex-shrink: 0 !important;
}
.vh-card-media-section .vh-btn-pill {
padding: 3px 12px !important;
font-size: 10px !important;
}
/* ==========================================================================
STEP 19: FULL-WIDTH VIEW + TOP-BAR TEAL (#345B63) BORDERS & SHADOWS
+ REFINED COMPACT SIZING & EXPANDED AIRY SPACING
========================================================================== */
/* 1. FULL WIDTH VIEW (EXPAND TO 100% SCREEN WIDTH) */
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
box-sizing: border-box !important;
padding: 10px 24px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
overflow: hidden !important;
position: relative !important;
}
/* 2. TEAL (#345B63) BORDERS & MULTI-STOP TEAL SHADOWS ACROSS ALL CARDS */
.vh-card,
.vh-gateway,
.vh-card-tax,
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 65%, #f2f7f7 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16),
inset 0 1px 0 #ffffff !important;
transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1), border-color 0.22s ease !important;
position: relative !important;
}
.vh-card:hover,
.vh-gateway:hover,
.vh-card-tax:hover,
.vh-card-media-section:hover {
transform: translateY(-3px) !important;
border-color: #43727c !important;
border-bottom: 4.5px solid #1a2f34 !important;
box-shadow:
0 4px 8px rgba(52, 91, 99, 0.12),
0 12px 26px rgba(52, 91, 99, 0.22),
0 22px 38px -6px rgba(52, 91, 99, 0.26),
inset 0 1px 0 #ffffff !important;
}
/* Card Header Lintels (Teal Borders & Toned Accents) */
.vh-card-header {
background: linear-gradient(180deg, #ffffff 0%, #eaf1f2 100%) !important;
border-bottom: 2px solid #345B63 !important;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(52, 91, 99, 0.06) !important;
border-top-left-radius: 6.5px !important;
border-top-right-radius: 6.5px !important;
padding: 5px 12px !important;
}
.vh-badge-text {
font-weight: 800 !important;
letter-spacing: 1.5px !important;
color: #345B63 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.vh-badge-sub {
font-weight: 700 !important;
color: #233e44 !important;
background: rgba(52, 91, 99, 0.12) !important;
border: 1px solid rgba(52, 91, 99, 0.35) !important;
border-radius: 4px !important;
padding: 2px 7px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
/* 3. SANCTUARY ALAR CARD (REFINED 3D TEAL EMBOSSING) */
.vh-card-sanctuary {
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
border: 2px solid #345B63 !important;
border-top: 2px solid #ffffff !important;
border-bottom: 4.5px solid #1a2f34 !important;
box-shadow:
0 4px 8px rgba(52, 91, 99, 0.10),
0 12px 26px rgba(52, 91, 99, 0.18),
0 22px 40px -6px rgba(52, 91, 99, 0.22),
inset 0 1px 0 #ffffff,
inset 0 0 24px rgba(52, 91, 99, 0.05) !important;
padding: 6px 14px !important;
}
/* Sacred Portrait Medallion Bezel in #345B63 */
.vh-portrait-wrapper .vh-photo-stage {
width: 80px !important;
height: 80px !important;
border: 3.5px solid #345B63 !important;
box-shadow:
0 6px 18px rgba(52, 91, 99, 0.35),
0 12px 26px rgba(26, 47, 52, 0.25),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -3px 6px rgba(26, 47, 52, 0.5) !important;
}
.vh-portrait-wrapper .vh-photo-stage:hover {
transform: scale(1.04) !important;
border-color: #4a7d87 !important;
box-shadow:
0 8px 22px rgba(52, 91, 99, 0.45),
0 16px 32px rgba(26, 47, 52, 0.35),
inset 0 2px 4px rgba(255, 255, 255, 1),
inset 0 -3px 6px rgba(26, 47, 52, 0.55) !important;
}
/* Sanctuary Title & Subtitle */
.vh-card-sanctuary .vh-main-title {
font-size: 22px !important;
color: #123f38 !important;
}
.vh-card-sanctuary .vh-who-corner {
color: #345B63 !important;
}
.vh-card-sanctuary .vh-gold-rule {
background: #345B63 !important;
width: 26px !important;
height: 2px !important;
margin: 2px auto !important;
}
.vh-card-sanctuary .vh-description {
font-size: 12.5px !important;
color: #345B63 !important;
line-height: 1.25 !important;
}
/* 4. BIG RECTANGLE ELEMENTS ARE SMALLER WITH BIGGER SPACE BETWEEN THEM */
/* Section 1: Hero Triad Grid (Reduced Height, Expanded 20px Gutter) */
.vh-triad-grid {
flex: 0 0 220px !important;
height: 220px !important;
max-height: 220px !important;
gap: 20px !important;
margin: 0 !important;
}
.vh-triad-grid .vh-card {
height: 220px !important;
max-height: 220px !important;
}
/* Section 2: Timeline (Sleek Key Row & Track, Teal Borders) */
.vh-timeline-section {
flex: 0 0 58px !important;
height: 58px !important;
max-height: 58px !important;
margin: 0 !important;
}
.vh-timeline-years {
gap: 8px !important;
margin: 0 0 3px 0 !important;
}
.vh-timeline-years .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3px solid #233e44 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 2px 9px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.12), inset 0 1px 0 #ffffff !important;
}
.vh-timeline-years .vh-year:hover {
transform: translateY(-2px) !important;
border-color: #4a7d87 !important;
border-bottom: 3.5px solid #1a2f34 !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.25), inset 0 1px 0 #ffffff !important;
color: #123f38 !important;
}
.vh-timeline-years .vh-year.is-active {
background: linear-gradient(180deg, #345B63 0%, #1e353b 100%) !important;
color: #ffffff !important;
border: 1.5px solid #142529 !important;
border-bottom: 3px solid #0b1517 !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(52, 91, 99, 0.2) !important;
}
.vh-lifeline {
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-bottom-color: #ffffff !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.18) !important;
}
.vh-timeline-dot {
background: #345B63 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1px #345B63 !important;
}
/* Section 3: Thematic Taxonomy Grid (Reduced Height, Expanded 18px Gutter) */
.vh-taxonomy-section {
flex: 0 0 170px !important;
height: 170px !important;
max-height: 170px !important;
margin: 0 !important;
}
.vh-taxonomy-grid {
gap: 18px !important;
height: 100% !important;
}
.vh-card-tax {
height: 170px !important;
max-height: 170px !important;
}
.vh-tax-item-name a {
font-size: 13.5px !important;
color: #1e353b !important;
}
.vh-tax-item-name a:hover {
color: #345B63 !important;
}
.vh-tax-item-desc {
font-size: 11px !important;
line-height: 1.35 !important;
color: #3e565c !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vh-tax-item-link {
color: #345B63 !important;
}
/* Section 4: Media Bar (Compact 40px Single-Line Strip) */
.vh-card-media-section {
flex: 0 0 40px !important;
height: 40px !important;
max-height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
}
.vh-media-desc {
font-size: 12px !important;
color: #345B63 !important;
font-weight: 500 !important;
}
/* 5. 3D PILL BUTTONS WITH TEAL THEME */
.vh-btn-pill {
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border: 1.5px solid #1a2f34 !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.4) !important;
border-bottom: 2.5px solid #0f1c1f !important;
border-radius: 14px !important;
padding: 3px 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.vh-btn-pill:hover {
background: linear-gradient(180deg, #4c828d 0%, #2e545b 100%) !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.35) !important;
color: #ffffff !important;
}
.vh-founder-subline a {
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.12), inset 0 1px 0 #ffffff !important;
}
.vh-founder-subline a:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.30) !important;
}
/* ==========================================================================
STEP 20: NARROWER RECTANGLES + COMPLETE FAULT CORRECTIONS
========================================================================== */
/* 1. NARROWER PROPORTIONED CONTAINER (NO LONGER ENDLESSLY WIDE) */
body.page-Main_Page #vani-home {
max-width: 1260px !important;
width: 95% !important;
margin: 0 auto !important;
padding: 8px 16px !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* 2. SANCTUARY CENTER CARD FIXES (PROPER HIERARCHY, NO WEIRD DOUBLE BOXES) */
.vh-card-sanctuary {
padding: 8px 14px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
}
.vh-sanctuary-title {
margin: 0 !important;
line-height: 1.1 !important;
text-align: center !important;
}
.vh-sanctuary-title a {
text-decoration: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.vh-who-sub {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
text-transform: uppercase !important;
margin-bottom: 1px !important;
}
.vh-who-main {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 22px !important;
font-weight: 700 !important;
color: #123f38 !important;
letter-spacing: 0.5px !important;
}
/* Hide legacy floating who-corner and founder subline balloon boxes */
.vh-hero-title-wrap,
.vh-founder-subline::before,
.vh-founder-subline::after {
content: none !important;
display: none !important;
}
.vh-founder-subline {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Dedicated button below portrait */
.vh-founder-btn-wrap {
margin: 2px auto !important;
}
.vh-btn-founder {
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 2px 14px !important;
border-radius: 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.12), inset 0 1px 0 #ffffff !important;
display: inline-block !important;
}
.vh-btn-founder:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.30) !important;
}
/* Portrait */
.vh-portrait-wrapper {
margin: 2px auto !important;
}
.vh-portrait-wrapper .vh-photo-stage {
width: 78px !important;
height: 78px !important;
border: 3px solid #345B63 !important;
box-shadow: 0 6px 16px rgba(52, 91, 99, 0.32), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(26, 47, 52, 0.5) !important;
}
.vh-gold-rule {
width: 26px !important;
height: 2px !important;
margin: 2px auto !important;
background: #345B63 !important;
}
.vh-description {
font-size: 12px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 !important;
padding: 0 !important;
max-width: 90% !important;
}
/* 3. TIMELINE LAYOUT CORRECTIONS (CLEAN & LEGIBLE TRACK) */
.vh-timeline-section {
flex: 0 0 64px !important;
height: 64px !important;
max-height: 64px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
margin: 0 !important;
padding: 0 !important;
}
.vh-timeline-years {
gap: 8px !important;
margin: 0 !important;
}
.vh-lifeline-window {
height: 34px !important;
max-height: 34px !important;
position: relative !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
}
.vh-lifeline {
height: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
.vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.vh-timeline-event {
display: inline-flex !important;
align-items: center !important;
padding: 0 10px !important;
font-size: 11px !important;
color: #1e353b !important;
white-space: nowrap !important;
}
/* 4. CLEAN MEDIA SECTION (SINGLE HORIZONTAL FLEX ROW 44px) */
.vh-card-media-section {
flex: 0 0 44px !important;
height: 44px !important;
max-height: 44px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 18px !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.vh-media-left {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.vh-media-left .vh-badge-text a {
font-size: 12px !important;
font-weight: 800 !important;
color: #345B63 !important;
letter-spacing: 1px !important;
text-decoration: none !important;
}
.vh-media-center {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 14px !important;
}
.vh-media-right {
flex-shrink: 0 !important;
}
.vh-media-right .vh-btn-pill {
padding: 3px 14px !important;
font-size: 11px !important;
}
/* 5. NARROWER HERO & TAXONOMY GRIDS WITH AMPLE SPACING */
.vh-triad-grid {
flex: 0 0 215px !important;
height: 215px !important;
max-height: 215px !important;
gap: 18px !important;
}
.vh-triad-grid .vh-card {
height: 215px !important;
max-height: 215px !important;
}
.vh-taxonomy-section {
flex: 0 0 165px !important;
height: 165px !important;
max-height: 165px !important;
}
.vh-taxonomy-grid {
gap: 16px !important;
height: 100% !important;
}
.vh-card-tax {
height: 165px !important;
max-height: 165px !important;
}
/* ==========================================================================
STEP 21: NARROW RECTANGLES (1140px) + COMPLETE FAULT CORRECTIONS
========================================================================== */
/* 1. FORCE NARROWER DASHBOARD WIDTH (OVERRIDE ALL PREVIOUS MIN-WIDTHS) */
body.page-Main_Page #vani-home {
width: 90% !important;
max-width: 1140px !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 8px 16px !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
overflow: hidden !important;
}
/* 2. NARROW HERO TRIAD (3 CARDS ~360px EACH) */
.vh-triad-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
flex: 0 0 215px !important;
height: 215px !important;
max-height: 215px !important;
width: 100% !important;
margin: 0 !important;
}
.vh-triad-grid .vh-card {
height: 215px !important;
max-height: 215px !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 65%, #f2f7f7 100%) !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16),
inset 0 1px 0 #ffffff !important;
overflow: hidden !important;
}
/* 3. SANCTUARY CENTER CARD (COMPLETELY REBUILT ARCHITECTURE) */
.vh-sanctuary-card {
padding: 8px 14px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
}
.vh-sanctuary-header-text {
margin: 0 !important;
line-height: 1 !important;
text-align: center !important;
}
.vh-sanctuary-who {
display: block !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
}
.vh-sanctuary-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 21px !important;
font-weight: 700 !important;
color: #123f38 !important;
text-decoration: none !important;
letter-spacing: 0.5px !important;
}
.vh-sanctuary-portrait-box {
margin: 2px auto !important;
}
.vh-sanctuary-portrait-box .vh-photo-stage {
width: 76px !important;
height: 76px !important;
border-radius: 50% !important;
border: 3px solid #345B63 !important;
box-shadow:
0 4px 12px rgba(52, 91, 99, 0.35),
inset 0 2px 4px #ffffff,
inset 0 -2px 4px rgba(26, 47, 52, 0.5) !important;
overflow: hidden !important;
position: relative !important;
}
.vh-sanctuary-btn-box {
margin: 2px auto !important;
}
.vh-sanctuary-founder-pill {
display: inline-block !important;
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 2px 14px !important;
border-radius: 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.15), inset 0 1px 0 #ffffff !important;
text-decoration: none !important;
}
.vh-sanctuary-founder-pill:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1px) !important;
}
.vh-sanctuary-rule {
width: 28px !important;
height: 2px !important;
background: #345B63 !important;
margin: 2px auto !important;
}
.vh-sanctuary-subtitle {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 !important;
text-align: center !important;
}
/* 4. NARROW THEMATIC TAXONOMY (4 CARDS ~270px EACH) */
.vh-taxonomy-section {
flex: 0 0 165px !important;
height: 165px !important;
max-height: 165px !important;
width: 100% !important;
margin: 0 !important;
}
.vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
height: 100% !important;
width: 100% !important;
}
.vh-card-tax {
height: 165px !important;
max-height: 165px !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 65%, #f2f7f7 100%) !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16),
inset 0 1px 0 #ffffff !important;
}
/* 5. CLEAN MEDIA BAR (HORIZONTAL SINGLE LINE) */
.vh-media-bar {
flex: 0 0 44px !important;
height: 44px !important;
max-height: 44px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 18px !important;
background: linear-gradient(180deg, #ffffff 0%, #f2f7f7 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3px solid #233e44 !important;
border-radius: 8px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.10) !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.vh-media-bar-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.vh-media-bar-name a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
color: #345B63 !important;
letter-spacing: 1px !important;
text-decoration: none !important;
}
.vh-media-bar-desc {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 16px !important;
}
.vh-media-bar-btn {
flex-shrink: 0 !important;
}
/* ==========================================================================
STEP 22: FULL-WIDTH VIEW + NARROWER CARDS + VISIBLE TOP BORDER + ZERO CUTOUTS
========================================================================== */
/* 1. FULL WIDTH PAGE VIEW (NO ARTIFICIAL MAX-WIDTH ON CONTAINER) */
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
margin: 0 !important;
padding: 10px 30px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
overflow: hidden !important;
}
/* 2. VISIBLE TOP BORDER ON ALL RECTANGLE ELEMENTS (NO MORE MISSING TOP BORDER!) */
.vh-card,
.vh-card-tax,
.vh-sanctuary-card,
.vh-card-memories,
.vh-card-article,
.vh-media-bar {
border: 2px solid #345B63 !important;
border-top: 2px solid #345B63 !important; /* CRITICAL: EXPLICIT VISIBLE TOP BORDER */
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16) !important;
}
.vh-card-header {
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
border-bottom: 2px solid #345B63 !important;
padding: 6px 12px !important;
}
/* 3. NARROWER RECTANGLES WITH GENEROUS GAPS (PAGE IS FULL WIDTH, CARDS ARE NARROWER) */
.vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 28px !important;
flex: 0 0 230px !important;
height: 230px !important;
max-height: 230px !important;
width: 100% !important;
margin: 0 auto !important;
}
.vh-triad-grid .vh-card {
flex: 1 1 0 !important;
max-width: 400px !important; /* NARROWER RECTANGLES */
height: 230px !important;
max-height: 230px !important;
}
/* 4. SANCTUARY CENTER CARD: ZERO WEIRD BOXES, PERFECT VERTICAL FIT */
.vh-sanctuary-card {
padding: 8px 14px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
}
.vh-sanctuary-header-text,
.vh-sanctuary-header-text *,
.vh-sanctuary-name,
.vh-sanctuary-name * {
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.vh-sanctuary-header-text {
margin: 0 !important;
line-height: 1 !important;
}
.vh-sanctuary-who {
display: block !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
}
.vh-sanctuary-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 21px !important;
font-weight: 700 !important;
color: #123f38 !important;
text-decoration: none !important;
display: block !important;
}
.vh-sanctuary-portrait-box {
margin: 2px auto !important;
}
.vh-sanctuary-portrait-box .vh-photo-stage {
width: 74px !important;
height: 74px !important;
border-radius: 50% !important;
border: 3px solid #345B63 !important;
box-shadow:
0 4px 12px rgba(52, 91, 99, 0.35),
inset 0 2px 4px #ffffff,
inset 0 -2px 4px rgba(26, 47, 52, 0.5) !important;
overflow: hidden !important;
position: relative !important;
}
.vh-sanctuary-btn-box {
margin: 2px auto !important;
}
.vh-sanctuary-founder-pill {
display: inline-block !important;
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 3px 16px !important;
border-radius: 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.15), inset 0 1px 0 #ffffff !important;
text-decoration: none !important;
}
.vh-sanctuary-founder-pill:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1px) !important;
}
.vh-sanctuary-rule {
width: 26px !important;
height: 2px !important;
background: #345B63 !important;
margin: 2px auto !important;
}
.vh-sanctuary-subtitle {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 5. PREVENT CUT OUTS IN MEMORIES & SPOTLIGHT */
.vh-card-memories .vh-card-snippet {
font-size: 11.5px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vh-card-article .vh-discover-secondary {
font-size: 11.5px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 6. TIMELINE: ZERO OVERLAPPING */
.vh-timeline-section {
flex: 0 0 68px !important;
height: 68px !important;
max-height: 68px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 1300px !important;
margin: 0 auto !important;
}
.vh-timeline-years {
position: static !important;
top: 0 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
.vh-lifeline-window {
height: 36px !important;
max-height: 36px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
.vh-lifeline {
height: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
.vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.vh-timeline-event {
display: inline-flex !important;
align-items: center !important;
padding: 0 12px !important;
font-size: 11px !important;
color: #1e353b !important;
white-space: nowrap !important;
}
/* 7. NARROWER TAXONOMY CARDS (4 CARDS ~280px EACH) */
.vh-taxonomy-section {
flex: 0 0 175px !important;
height: 175px !important;
max-height: 175px !important;
width: 100% !important;
margin: 0 auto !important;
}
.vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 22px !important;
height: 100% !important;
width: 100% !important;
}
.vh-card-tax {
flex: 1 1 0 !important;
max-width: 290px !important; /* NARROWER TAXONOMY CARDS */
height: 175px !important;
max-height: 175px !important;
}
.vh-card-tax .vh-card-body {
padding: 6px 12px !important;
height: calc(100% - 34px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.vh-tax-spotlight-item {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.vh-tax-item-desc {
font-size: 11px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 8. MEDIA BAR (PERFECT SINGLE ROW, ZERO OVERLAPPING) */
.vh-media-bar {
flex: 0 0 44px !important;
height: 44px !important;
max-height: 44px !important;
width: 100% !important;
max-width: 1300px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 20px !important;
background: linear-gradient(180deg, #ffffff 0%, #f2f7f7 100%) !important;
box-sizing: border-box !important;
}
.vh-media-bar-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.vh-media-bar-name a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
color: #345B63 !important;
letter-spacing: 1px !important;
text-decoration: none !important;
}
.vh-media-bar-desc {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 20px !important;
}
.vh-media-bar-btn {
flex-shrink: 0 !important;
}
/* ==========================================================================
STEP 23: DEFINITIVE FIXES FOR TOP BORDERS, WIDTHS, TIMELINE, FULL-WIDTH PAGE
========================================================================== */
/* 1. FULL WIDTH PAGE: UNLOCK MEDIAWIKI WRAPPERS & CONTAINERS TO 100% */
body.page-Main_Page, html.page-Main_Page {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
body.page-Main_Page #content,
body.page-Main_Page #content.mw-body,
body.page-Main_Page .mw-body,
body.page-Main_Page #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output,
body.page-Main_Page #contentWrapper,
body.page-Main_Page #container,
body.page-Main_Page .vector-body {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-left: none !important;
border-right: none !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
margin: 0 !important;
padding: 6px 16px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 10px !important;
overflow: hidden !important;
}
/* 2. TOP BORDERS: 100% VISIBLE SOLID #345B63 BORDER ON EVERY CARD & HEADER */
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page .vh-media-bar {
border: 2px solid #345B63 !important;
border-top: 2.5px solid #345B63 !important; /* ULTRA-VISIBLE TOP BORDER */
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-header {
border-top: 2.5px solid #345B63 !important; /* HEADER REINFORCED TOP BORDER */
border-bottom: 2px solid #345B63 !important;
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
padding: 5px 10px !important;
}
/* 3. YEAR BUTTONS: SOLID VISIBLE TOP BORDER */
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 2px solid #345B63 !important; /* EXPLICIT SOLID VISIBLE TOP BORDER */
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 3px 10px !important;
line-height: 1.2 !important;
box-shadow: 0 2px 4px rgba(52, 91, 99, 0.12) !important;
transition: all 0.18s ease !important;
}
body.page-Main_Page .vh-timeline-years .vh-year:hover,
body.page-Main_Page .vh-year:hover {
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border-color: #1a2f34 !important;
border-top: 2px solid #1a2f34 !important;
transform: translateY(-1.5px) !important;
}
body.page-Main_Page .vh-timeline-years .vh-year.is-active,
body.page-Main_Page .vh-year.is-active {
background: linear-gradient(180deg, #2b4f57 0%, #15272a 100%) !important;
color: #ffffff !important;
border: 1.5px solid #0b1517 !important;
border-top: 2px solid #0b1517 !important;
border-bottom: 2.5px solid #000000 !important;
}
/* 4. NARROW ALL RECTANGLES BY 30% */
/* HERO TRIAD: Cards narrowed to 280px (was 400px) */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 36px !important;
flex: 0 0 235px !important;
height: 235px !important;
max-height: 235px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-triad-grid .vh-card {
flex: 0 0 280px !important;
width: 280px !important;
max-width: 280px !important;
min-width: 280px !important;
height: 235px !important;
max-height: 235px !important;
}
/* TAXONOMY: 4 Cards narrowed to 210px (was 290px) */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 170px !important;
height: 170px !important;
max-height: 170px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 24px !important;
height: 100% !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-tax {
flex: 0 0 210px !important;
width: 210px !important;
max-width: 210px !important;
min-width: 210px !important;
height: 170px !important;
max-height: 170px !important;
}
/* MEDIA BAR: Narrowed to 930px to match Triad/Taxonomy cluster */
body.page-Main_Page .vh-media-bar {
flex: 0 0 42px !important;
height: 42px !important;
max-height: 42px !important;
width: 100% !important;
max-width: 930px !important;
margin: 0 auto !important;
}
/* 5. FLOWING TIMELINE: FIX VERTICAL TRUNCATION (AMP UP HEIGHT TO 70px) */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 106px !important;
height: 106px !important;
max-height: 106px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 1050px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-timeline-years {
position: static !important;
top: 0 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
height: 26px !important;
flex: 0 0 26px !important;
}
body.page-Main_Page .vh-lifeline-window {
height: 72px !important;
max-height: 72px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 2px solid #345B63 !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
position: relative !important;
}
body.page-Main_Page .vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
body.page-Main_Page .vh-timeline-event {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 64px !important;
padding: 0 14px !important;
white-space: normal !important;
width: 240px !important;
flex: 0 0 240px !important;
box-sizing: border-box !important;
border-right: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
body.page-Main_Page .vh-timeline-event .vh-event-date {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
line-height: 1.2 !important;
}
body.page-Main_Page .vh-timeline-event .vh-event-title,
body.page-Main_Page .vh-timeline-event .vh-event-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11px !important;
line-height: 1.35 !important;
color: #1e353b !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 6. SANCTUARY PORTRAIT & BUTTONS - POLISHED HIERARCHY */
body.page-Main_Page .vh-sanctuary-card {
padding: 8px 12px !important;
}
body.page-Main_Page .vh-sanctuary-who {
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
margin-bottom: 1px !important;
}
body.page-Main_Page .vh-sanctuary-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
color: #123f38 !important;
line-height: 1.1 !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 72px !important;
height: 72px !important;
border: 2.5px solid #345B63 !important;
border-radius: 50% !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.3) !important;
overflow: hidden !important;
margin: 2px auto !important;
}
body.page-Main_Page .vh-sanctuary-founder-pill {
font-size: 10.5px !important;
font-weight: 700 !important;
padding: 2.5px 12px !important;
border: 1.5px solid #345B63 !important;
border-top: 2px solid #345B63 !important; /* SOLID VISIBLE TOP BORDER */
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
color: #345B63 !important;
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
text-decoration: none !important;
display: inline-block !important;
}
body.page-Main_Page .vh-sanctuary-founder-pill:hover {
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border-color: #1a2f34 !important;
}
body.page-Main_Page .vh-sanctuary-rule {
width: 24px !important;
height: 2px !important;
background: #345B63 !important;
margin: 2px auto !important;
}
body.page-Main_Page .vh-sanctuary-subtitle {
font-size: 11px !important;
color: #345B63 !important;
line-height: 1.2 !important;
}
/* ==========================================================================
STEP 24: FIX THICK BORDERS, FULL-WIDTH EDGES, AND BOTTOM OVERLAPPING
========================================================================== */
/* 1. FORCE 100% TRUE FULL-WIDTH (STRIP VECTOR 2022 LEFT/RIGHT INDENTATIONS) */
body.page-Main_Page, html.page-Main_Page {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
body.page-Main_Page #content,
body.page-Main_Page #content.mw-body,
body.page-Main_Page .mw-body,
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output,
body.page-Main_Page .vector-body,
body.page-Main_Page #contentWrapper,
body.page-Main_Page #container {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
border: none !important;
border-left: none !important;
border-right: none !important;
box-sizing: border-box !important;
left: 0 !important;
}
body.page-Main_Page #mw-panel,
body.page-Main_Page .mw-sidebar-container,
body.page-Main_Page .vector-sidebar-container,
body.page-Main_Page .vector-column-start {
display: none !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
margin: 0 !important;
padding: 8px 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* PREVENTS PUSHING MEDIA SECTION OFF-SCREEN */
gap: 12px !important;
overflow: hidden !important;
}
/* 2. FIX UNUSUAL THICK TOP BORDER: UNIFORM 1.5px ON ALL CARDS & NO HEADER BORDER-TOP */
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-tax {
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #345B63 !important; /* CRISP UNIFORM 1.5px (NOT THICK!) */
border-bottom: 3px solid #233e44 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-header {
border-top: none !important; /* REMOVE DUPLICATE TOP BORDER ON HEADER */
border-left: none !important;
border-right: none !important;
border-bottom: 1.5px solid #345B63 !important;
border-top-left-radius: 6.5px !important;
border-top-right-radius: 6.5px !important;
padding: 5px 12px !important;
}
/* 3. HERO TRIAD (30% NARROWER RECTANGLES, PERFECTLY CENTERED) */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 32px !important;
flex: 0 0 225px !important;
height: 225px !important;
max-height: 225px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-triad-grid .vh-card {
flex: 0 0 280px !important;
width: 280px !important;
max-width: 280px !important;
min-width: 280px !important;
height: 225px !important;
max-height: 225px !important;
}
/* 4. FULL-WIDTH FLOWING TIMELINE (STRETCHES EDGE-TO-EDGE) */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 96px !important;
height: 96px !important;
max-height: 96px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important; /* FULL WIDTH EDGE-TO-EDGE */
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-timeline-years {
position: static !important;
display: flex !important;
justify-content: center !important;
gap: 7px !important;
margin: 0 auto !important;
padding: 0 !important;
height: 25px !important;
flex: 0 0 25px !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 2px 9px !important;
line-height: 1.2 !important;
box-shadow: 0 2px 4px rgba(52, 91, 99, 0.12) !important;
}
body.page-Main_Page .vh-lifeline-window {
height: 64px !important;
max-height: 64px !important;
width: 100% !important;
max-width: 100% !important; /* FULL WIDTH TRACK */
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
width: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 1.5px solid #345B63 !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important; /* CONTINUOUS SEAMLESS EDGE-TO-EDGE */
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
body.page-Main_Page .vh-timeline-event {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 60px !important;
padding: 0 14px !important;
white-space: normal !important;
width: 240px !important;
flex: 0 0 240px !important;
box-sizing: border-box !important;
border-right: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
/* 5. TAXONOMY 4 CARDS (30% NARROWER RECTANGLES, PERFECT FIT) */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 165px !important;
height: 165px !important;
max-height: 165px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 22px !important;
height: 100% !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-tax {
flex: 0 0 210px !important;
width: 210px !important;
max-width: 210px !important;
min-width: 210px !important;
height: 165px !important;
max-height: 165px !important;
}
/* 6. FIX BOTTOM OVERLAPPING: SINGLE-CONTAINER MEDIA BAR */
body.page-Main_Page .vh-media-bar,
body.page-Main_Page .vh-card-media-section {
flex: 0 0 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
width: 920px !important;
max-width: 920px !important;
margin: 0 auto !important;
padding: 0 18px !important;
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 2.5px solid #233e44 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
overflow: hidden !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.10) !important;
}
/* STRIP ALL NESTED SUB-BOXES / INTERNAL BORDERS IN MEDIA SECTION */
body.page-Main_Page .vh-media-bar > div,
body.page-Main_Page .vh-media-bar-title,
body.page-Main_Page .vh-media-bar-desc,
body.page-Main_Page .vh-media-bar-btn,
body.page-Main_Page .vh-card-media-section > div,
body.page-Main_Page .vh-card-media-section .vh-card-header,
body.page-Main_Page .vh-card-media-section .vh-media-body,
body.page-Main_Page .vh-card-media-section .vh-media-desc,
body.page-Main_Page .vh-card-media-section .vh-media-actions {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
height: auto !important;
max-height: none !important;
}
body.page-Main_Page .vh-media-bar-title,
body.page-Main_Page .vh-card-media-section .vh-card-header {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
body.page-Main_Page .vh-media-bar-desc,
body.page-Main_Page .vh-card-media-section .vh-media-desc {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11.5px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 16px !important;
}
body.page-Main_Page .vh-media-bar-btn,
body.page-Main_Page .vh-card-media-section .vh-media-actions {
flex-shrink: 0 !important;
}
body.page-Main_Page .vh-media-bar-btn .vh-btn-pill,
body.page-Main_Page .vh-card-media-section .vh-btn-pill {
padding: 2.5px 12px !important;
font-size: 10.5px !important;
}
/* ==========================================================================
STEP 51: DEFINITIVE CLEAN ARCHITECTURE & VISIBLE AT-REST ANIMATION
========================================================================== */
/* 1. CANVAS & WRAPPER RESET (FULL WIDTH, NO SIDEBAR) */
body.page-Main_Page, html.page-Main_Page {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
background-color: #f6f2e9 !important;
background-image: none !important;
}
body.page-Main_Page #content,
body.page-Main_Page #content.mw-body,
body.page-Main_Page .mw-body,
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output,
body.page-Main_Page .vector-body,
body.page-Main_Page #contentWrapper,
body.page-Main_Page #container {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
left: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #mw-panel,
body.page-Main_Page .mw-sidebar-container,
body.page-Main_Page .vector-sidebar-container,
body.page-Main_Page .vector-column-start {
display: none !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 2. MAIN CONTAINER: FULL VIEWPORT HEIGHT SPREAD TOP TO BOTTOM */
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
margin: 0 !important;
padding: 18px 40px 14px 40px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important; /* SPREAD CONTENT FROM TOP TO BOTTOM */
gap: 0 !important;
overflow: hidden !important;
}
/* 3. CARDS: 100% TRANSPARENT OPEN SPACE (NO BOXES, NO BORDERS) */
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page .vh-media-bar,
body.page-Main_Page .vh-card-media-section {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
transition: none !important;
box-sizing: border-box !important;
}
/* Hide all old badges, buttons, headers, and clutter */
body.page-Main_Page .vh-card-header,
body.page-Main_Page .vh-card-actions,
body.page-Main_Page .vh-sanctuary-btn-box,
body.page-Main_Page .vh-sanctuary-rule,
body.page-Main_Page .vh-sanctuary-who,
body.page-Main_Page .vh-badge-sub,
body.page-Main_Page .vh-badge-icon,
body.page-Main_Page .vh-tax-item-link,
body.page-Main_Page .vh-random-article-more,
body.page-Main_Page .vh-media-bar-btn {
display: none !important;
}
body.page-Main_Page .vh-card-body {
background: transparent !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
height: 100% !important;
text-align: center !important;
}
/* 4. SECTION 1: HERO TRIAD (SPREAD ACROSS 1450px) */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
flex: 0 0 295px !important; /* EXPANDED HEIGHT FOR 180px PORTRAIT */
height: 295px !important;
max-height: 295px !important;
}
body.page-Main_Page .vh-triad-grid .vh-card {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
}
body.page-Main_Page .vh-triad-grid .vh-sanctuary-card {
flex: 0 0 360px !important;
width: 360px !important;
max-width: 360px !important;
}
/* Sanctuary Portrait Medallion */
body.page-Main_Page .vh-sanctuary-portrait-box {
margin: 4px auto 6px auto !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box {
width: 180px !important;
height: 180px !important;
margin: 6px auto 10px auto !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 180px !important; /* +120% BIGGER (82px -> 180px) */
height: 180px !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
border-radius: 50% !important;
box-shadow:
0 8px 24px rgba(18, 63, 56, 0.32),
0 2px 6px rgba(0, 0, 0, 0.18),
inset 0 2px 5px rgba(255, 255, 255, 0.7),
inset 0 -3px 6px rgba(0, 0, 0, 0.3) !important;
overflow: hidden !important;
margin: 0 auto !important;
position: relative !important;
}
/* 5. SECTION 2: TIMELINE (EDGE TO EDGE FULL WIDTH) */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 106px !important;
height: 106px !important;
max-height: 106px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-timeline-years {
position: static !important;
display: flex !important;
justify-content: center !important;
gap: 10px !important;
margin: 0 auto !important;
padding: 0 !important;
height: 27px !important;
flex: 0 0 27px !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 2px 9px !important;
line-height: 1.2 !important;
box-shadow: 0 2px 4px rgba(52, 91, 99, 0.12) !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
}
body.page-Main_Page .vh-timeline-years .vh-year:hover,
body.page-Main_Page .vh-year:hover {
transform: translateY(-1.5px) !important;
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border-color: #1a2f34 !important;
}
body.page-Main_Page .vh-timeline-years .vh-year.is-active,
body.page-Main_Page .vh-year.is-active {
background: linear-gradient(180deg, #2b4f57 0%, #15272a 100%) !important;
color: #ffffff !important;
border: 1.5px solid #0b1517 !important;
border-bottom: 2px solid #000000 !important;
}
body.page-Main_Page .vh-lifeline-window {
height: 68px !important;
max-height: 68px !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
width: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 1.5px solid #345B63 !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
body.page-Main_Page .vh-timeline-event {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 64px !important;
padding: 0 18px !important;
white-space: normal !important;
width: 250px !important;
flex: 0 0 250px !important;
box-sizing: border-box !important;
border-right: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
/* 6. SECTION 3: THEMATIC TAXONOMY (SPREAD ACROSS 1450px) */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 155px !important;
height: 155px !important;
max-height: 155px !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
height: 100% !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-tax {
flex: 0 0 260px !important;
width: 260px !important;
max-width: 260px !important;
}
/* 7. SECTION 4: MEDIA BAR (SPREAD ACROSS 1450px) */
body.page-Main_Page .vh-media-bar {
flex: 0 0 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
padding: 0 24px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
border-top: 1px dashed rgba(52, 91, 99, 0.3) !important;
border-bottom: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
/* 8. DESCRIPTIVE TEXT IN CARDS */
body.page-Main_Page .vh-card-text,
body.page-Main_Page .vh-card-snippet,
body.page-Main_Page .vh-tax-item-desc,
body.page-Main_Page .vh-random-article-extract {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #2c3e42 !important;
margin: 0 !important;
text-shadow: none !important;
}
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important; /* 50% LARGER (12.5px -> 19px) */
font-weight: 600 !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
font-style: italic !important;
max-width: 380px !important;
margin: 0 auto !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
body.page-Main_Page .vh-card-tax .vh-card-text {
font-size: 12.5px !important;
line-height: 1.5 !important;
}
body.page-Main_Page .vh-media-text {
font-size: 12px !important;
font-style: italic !important;
}
/* ==========================================================================
9. CAITANYA 3D TITLES + VISIBLE AT-REST BREATHING LINE + ON-HOVER FULL GLIDE
========================================================================== */
/* Title Containers */
body.page-Main_Page .vh-card-title,
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-random-article-title,
body.page-Main_Page .vh-media-title {
display: block !important;
text-align: center !important;
margin-bottom: 8px !important;
transform: none !important;
}
/* ALL TITLE LINKS (KEEPING THE EXACT GORGEOUS 3D STYLE FROM USER'S SCREENSHOT) */
body.page-Main_Page .vh-card-title a,
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-sanctuary-title a,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title a,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page
-Main_Page .vh-media-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 7px !important; /* PERFECT SPACE FOR UNDERLINE */
letter-spacing: 0.025em !important;
line-height: 1.25 !important;
cursor: pointer !important;
transform: none !important;
/* 1. LIGHT COLOR FACE (The exact warm temple gold from screenshot) */
color: #dfad3e !important;
-webkit-text-fill-color: #dfad3e !important;
/* 2. DARK SIDES & DEEP CAST SHADOW (The exact 3D from screenshot) */
text-shadow: none !important;
transition: transform 0.22s ease, color 0.22s ease, text-shadow 0.22s ease !important;
}
/* Specific Font Sizes */
body.page-Main_Page .vh-sanctuary-title a {
font-size: 28px !important;
letter-spacing: 0.03em !important;
}
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title a {
font-size: 20px !important;
}
body.page-Main_Page .vh-card-tax .vh-card-title a {
font-size: 18.5px !important;
}
body.page-Main_Page .vh-media-title a {
font-size: 14.5px !important;
}
/* ==========================================================================
3. THE GOLDEN FILAMENT LINE BENEATH TITLES (RESTORES THE USER'S FAVORITE FEATURE!)
- At Rest: Gently breathes in and out (25% to 65% width) so animation is clearly visible!
- On Hover: Pauses breathing and smoothly glides to full 90% width!
========================================================================== */
body.page-Main_Page .vh-card-title a::after,
body.page-Main_Page .vh-card-memories .vh-card-title a::after,
body.page-Main_Page .vh-sanctuary-title a::after,
body.page-Main_Page .vh-card-article .vh-card-title a::after,
body.page-Main_Page .vh-random-article-title a::after,
body.page-Main_Page .vh-card-tax .vh-card-title a::after,
body.page-Main_Page .vh-media-title a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(223, 173, 62, 0.4) 15%,
#dfad3e 50%,
rgba(223, 173, 62, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(223, 173, 62, 0.75) !important;
border-radius: 2px !important;
pointer-events: none !important;
/* AT REST: VISIBLE BREATHING ANIMATION (2.8s CYCLE) */
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease !important;
}
/* At-Rest Line Breathing Keyframes */
@keyframes vhLineBreath {
0%, 100% {
width: 25%;
left: 37.5%;
opacity: 0.35;
}
50% {
width: 65%;
left: 17.5%;
opacity: 0.95; /* Clearly visible expanding light bar! */
}
}
/* ==========================================================================
4. ON MOUSE HOVER: FULL GOLDEN LINE GLIDE + DIRECT SUNLIGHT 3D ILLUMINATION
========================================================================== */
body.page-Main_Page .vh-card-title a:hover,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page .vh-sanctuary-title a:hover,
body.page-Main_Page .vh-card-article .vh-card-title a:hover,
body.page-Main_Page .vh-random-article-title a:hover,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover,
body.page-Main_Page .vh-media-title a:hover {
transform: translateY(-2.5px) !important; /* RETAINS 3D STEP MOVEMENT */
color: #dfad3e !important; /* DOES NOT CHANGE COLOR (STAYS RICH GOLD) */
-webkit-text-fill-color: #dfad3e !important; /* 100% CONSTANT COLOR */
text-decoration: none !important;
/* Extended 3D shadow deepening as the letters step forward */
text-shadow: none !important;
}
/* ON HOVER: LINE GLIDES OUT TO FULL 90% WIDTH & STAYS SOLID GOLD */
body.page-Main_Page .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover::after,
body.page-Main_Page .vh-sanctuary-title a:hover::after,
body.page-Main_Page .vh-card-article .vh-card-title a:hover::after,
body.page-Main_Page .vh-random-article-title a:hover::after,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover::after,
body.page-Main_Page .vh-media-title a:hover::after {
animation: none !important; /* Stops at-rest breathing */
opacity: 1 !important;
width: 90% !important; /* FULL EXTENSION GLIDE! */
left: 5% !important;
/* EXACT SAME GOLD COLOR AS AT REST — ZERO COLOR CHANGE */
background: linear-gradient(
90deg,
transparent 0%,
rgba(223, 173, 62, 0.4) 15%,
#dfad3e 50%,
rgba(223, 173, 62, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(223, 173, 62, 0.75) !important;
}
/* ==========================================================================
STEP 56: TIMELINE EXPANSION (NO TEXT CROPPING, NO BG, NO LINE) & CAPTION REGULAR
========================================================================== */
/* 1. SANCTUARY CAPTION: REGULAR (NOT ITALIC) */
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-style: normal !important; /* REGULAR, NOT ITALIC */
font-weight: 600 !important;
font-size: 19px !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
text-align: center !important;
}
/* 2. TIMELINE SECTION: EXPANDED HEIGHT TO PREVENT ALL TEXT CROPPING */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 134px !important;
height: 134px !important;
min-height: 134px !important;
max-height: 134px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
/* 3. LIFELINE WINDOW & TRACK: TRANSPARENT, NO TOP LINE, HEIGHT 96px */
body.page-Main_Page .vh-lifeline-window {
height: 96px !important; /* EXPANDED HEIGHT (WAS 68px) */
min-height: 96px !important;
max-height: 96px !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
width: 100% !important;
background: transparent !important; /* REMOVE BACKGROUND */
border: none !important; /* REMOVE ALL BORDERS */
border-top: none !important; /* REMOVE LINE ABOVE */
border-bottom: none !important;
box-shadow: none !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 96px !important;
min-height: 96px !important;
max-height: 96px !important;
}
/* The horizontal golden guide line across the timeline items */
body.page-Main_Page .vh-timeline-track::before {
top: 36px !important;
background: rgba(177, 135, 61, 0.4) !important;
}
/* 4. TIMELINE ITEM: EXACT 240px MATCH WITH JAVASCRIPT ITEM_WIDTH */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item,
body.page-Main_Page .vh-timeline-event {
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
flex: 0 0 240px !important;
height: 96px !important;
min-height: 96px !important;
max-height: 96px !important;
box-sizing: border-box !important;
padding: 8px 16px !important;
background: transparent !important;
border: none !important;
}
body.page-Main_Page .vh-timeline-date {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important; /* Clear Gold Date */
margin-bottom: 2px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
body.page-Main_Page .vh-timeline-dot {
width: 9px !important;
height: 9px !important;
background: #345B63 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #345B63 !important;
margin: 4px 0 !important;
}
body.page-Main_Page .vh-timeline-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.38 !important;
color: #2c3e42 !important;
overflow: visible !important; /* NEVER CROPPED */
white-space: normal !important;
display: block !important;
}
/* ==========================================================================
STEP 57: TIMELINE FULL BLEED (EDGE-TO-EDGE), 50% TALLER (150px),
DOT/TEXT SEPARATION (ZERO OVERLAP), NO THIN LINE ABOVE,
AND CAPTION REGULAR (NOT ITALIC)
========================================================================== */
/* 1. SANCTUARY CAPTION: REGULAR (NOT ITALIC) */
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-style: normal !important; /* REGULAR (NOT ITALIC) */
font-weight: 600 !important;
font-size: 19px !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
text-align: center !important;
}
/* 2. REMOVE ALL THIN LINES ABOVE TIMELINE (NO TOP BORDERS ANYWHERE) */
body.page-Main_Page .vh-triad-grid,
body.page-Main_Page .vh-timeline-section,
body.page-Main_Page #vh-timeline-years,
body.page-Main_Page .vh-timeline-years,
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
border: none !important;
border-top: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
}
/* 3. STRETCH TIMELINE EDGE-TO-EDGE TO VERY LEFT AND RIGHT (FULL BLEED) */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
position: relative !important;
flex: 0 0 190px !important; /* EXPANDED TOTAL HEIGHT (150px track + 40px buttons) */
height: 190px !important;
min-height: 190px !important;
max-height: 190px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
background: transparent !important;
box-sizing: border-box !important;
}
/* Year buttons container centered */
body.page-Main_Page .vh-timeline-years,
body.page-Main_Page #vh-timeline-years {
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
display: flex !important;
justify-content: center !important;
gap: 10px !important;
height: 28px !important;
flex: 0 0 28px !important;
}
/* 4. TIMELINE TRACK WINDOW: 50% TALLER (150px) & FULL BLEED (VERY LEFT TO VERY RIGHT) */
body.page-Main_Page .vh-lifeline-window {
width: 100vw !important;
max-width: 100vw !important;
height: 150px !important; /* 50% TALLER (WAS 96px -> NOW 150px) */
min-height: 150px !important;
max-height: 150px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
background: transparent !important;
}
body.page-Main_Page .vh-lifeline {
width: 100% !important;
height: 100% !important;
background: transparent !important;
position: relative !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 150px !important;
min-height: 150px !important;
max-height: 150px !important;
display: flex !important;
align-items: flex-start !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
/* The horizontal golden guide line passing through the dots */
body.page-Main_Page .vh-timeline-track::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 28px !important; /* GUIDE LINE POSITION */
height: 1.5px !important;
background: rgba(177, 135, 61, 0.45) !important;
z-index: 1 !important;
}
/* 5. TIMELINE ITEM & DOT / TEXT SEPARATION (ZERO OVERLAP!) */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
flex: 0 0 250px !important;
height: 150px !important; /* FULL 150px HEIGHT */
min-height: 150px !important;
max-height: 150px !important;
box-sizing: border-box !important;
padding: 6px 18px !important;
background: transparent !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* Date at the very top */
body.page-Main_Page .vh-timeline-date {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 18px !important;
margin: 0 0 2px 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
z-index: 2 !important;
}
/* Dot on the horizontal line (top: 24px) */
body.page-Main_Page .vh-timeline-dot {
position: absolute !important;
top: 24px !important; /* CENTERED ON THE 28px LINE */
left: 18px !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #233e44 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #b1873d !important;
z-index: 3 !important;
}
/* Event text starts strictly BELOW the dot and line (CLEAR SEPARATION) */
body.page-Main_Page .vh-timeline-text {
margin-top: 18px !important; /* PUSHES TEXT SAFELY BELOW THE DOT! */
padding-top: 0 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #2c3e42 !important;
white-space: normal !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important; /* NEVER CROPPED */
max-height: 100px !important; /* COMFORTABLY HOLDS 6-7 LINES */
}
/* Edge fades on the timeline window (seamless left & right fade) */
body.page-Main_Page .vh-lifeline-window::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 50px !important;
background: linear-gradient(to right, #f6f2e9 0%, rgba(246, 242, 233, 0) 100%) !important;
z-index: 10 !important;
pointer-events: none !important;
}
body.page-Main_Page .vh-lifeline-window::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
width: 50px !important;
background: linear-gradient(to left, #f6f2e9 0%, rgba(246, 242, 233, 0) 100%) !important;
z-index: 10 !important;
pointer-events: none !important;
}
/* ==========================================================================
STEP 58: ABSOLUTE CROPPING ELIMINATION & PERFECT TIMELINE DOT ALIGNMENT
========================================================================== */
/* --------------------------------------------------------------------------
1. HERO TRIAD & PRABHUPĀDA CARD: UNCONSTRAINED HEIGHT (ZERO CROPPING)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home {
height: auto !important;
min-height: calc(100vh - 54px) !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
body.page-Main_Page .vh-triad-grid {
flex: 0 0 auto !important;
height: auto !important;
min-height: 330px !important; /* AMPLE ROOM FOR 180px CIRCLE + CAPTION */
max-height: none !important;
overflow: visible !important;
}
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-triad-grid .vh-sanctuary-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-body {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
body.page-Main_Page .vh-triad-grid .vh-sanctuary-card {
flex: 0 0 380px !important;
width: 380px !important;
max-width: 380px !important;
}
/* Portrait Medallion: 180px */
body.page-Main_Page .vh-sanctuary-portrait-box {
width: 180px !important;
height: 180px !important;
margin: 6px auto 12px auto !important;
overflow: visible !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 180px !important; /* FULL 180px CIRCLE */
height: 180px !important;
border-radius: 50% !important;
overflow: hidden !important; /* CLIPS ONLY THE PHOTO, NOT THE CARD */
position: relative !important;
margin: 0 auto !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
box-shadow:
0 8px 24px rgba(18, 63, 56, 0.32),
0 2px 6px rgba(0, 0, 0, 0.18) !important;
}
/* Caption: Regular (Not Italic) at 19px */
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-style: normal !important; /* STRICTLY REGULAR (NOT ITALIC) */
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
max-width: 380px !important;
margin: 0 auto !important;
text-align: center !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
/* --------------------------------------------------------------------------
2. TIMELINE: 50% TALLER (155px), FULL BLEED, NO THIN TOP LINES
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid,
body.page-Main_Page .vh-timeline-section,
body.page-Main_Page #vh-timeline-years,
body.page-Main_Page .vh-timeline-years,
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
border: none !important;
border-top: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Full Bleed Timeline Section */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 195px !important;
height: 195px !important;
min-height: 195px !important;
max-height: 195px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
background: transparent !important;
}
/* Track Window: 50% Taller (155px) */
body.page-Main_Page .vh-lifeline-window {
width: 100vw !important;
max-width: 100vw !important;
height: 155px !important; /* 50% TALLER (HOLDS 6-7 FULL LINES) */
min-height: 155px !important;
max-height: 155px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
background: transparent !important;
}
body.page-Main_Page .vh-lifeline {
width: 100% !important;
height: 100% !important;
background: transparent !important;
position: relative !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 155px !important;
min-height: 155px !important;
max-height: 155px !important;
display: flex !important;
align-items: flex-start !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
/* Horizontal Guide Line: Fixed at top: 30px */
body.page-Main_Page .vh-timeline-track::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 30px !important; /* GUIDE LINE LEVEL */
height: 1.5px !important;
background: rgba(177, 135, 61, 0.45) !important;
z-index: 1 !important;
}
/* --------------------------------------------------------------------------
3. TIMELINE ITEM: PERFECT VERTICAL & HORIZONTAL DOT ALIGNMENT
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
flex: 0 0 250px !important;
height: 155px !important; /* FULL 155px HEIGHT */
min-height: 155px !important;
max-height: 155px !important;
box-sizing: border-box !important;
padding: 6px 16px !important;
background: transparent !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* Date Text: Centered horizontally above the dot */
body.page-Main_Page .vh-timeline-date {
width: 100% !important;
text-align: center !important; /* CENTERED HORIZONTALLY */
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 18px !important;
margin: 0 0 4px 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
z-index: 2 !important;
}
/* Dot: EXACTLY CENTERED VERTICALLY ON THE 30px LINE & HORIZONTALLY WITH DATE */
body.page-Main_Page .vh-timeline-dot {
position: absolute !important;
top: 25px !important; /* 25px + 5px radius = 30px center (EXACT ON LINE!) */
left: 50% !important; /* CENTERED HORIZONTALLY */
transform: translateX(-50%) !important; /* PERFECT HORIZONTAL ALIGNMENT WITH DATE */
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #233e44 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #b1873d !important;
z-index: 3 !important;
margin: 0 !important;
}
/* Event Text: Safely below the line and dot (ZERO OVERLAPPING) */
body.page-Main_Page .vh-timeline-text {
margin-top: 22px !important; /* PUSHES TEXT SAFELY BELOW THE DOT */
padding-top: 0 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #2c3e42 !important;
white-space: normal !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important; /* NEVER CROPPED */
max-height: 105px !important; /* COMFORTABLY HOLDS 6-7 FULL LINES */
text-align: center !important;
}
/* ==========================================================================
STEP 59: TOP BAR HELP TEXT REMOVAL, TIMELINE 3-TIER AXIS CENTERING,
AND SEAMLESS TITLE MORPH (Śrīla Prabhupāda <-> Who Is Śrīla Prabhupāda)
========================================================================== */
/* 1. TOP BAR: SUPPRESS ALL HOVER HELP TEXTS & TOOLTIPS */
#mw-head [title]::before,
#mw-head [title]::after,
.vector-header [title]::before,
.vector-header [title]::after,
.mw-tooltip,
.tipsy,
.tipsy-inner,
.tooltip {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 2. PERMANENT SANCTUARY HERO TITLE: "Who Is Śrīla Prabhupāda" (NO TEXT CHANGE ON HOVER) */
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title {
margin: 0 !important;
text-align: center !important;
line-height: 1.1 !important;
}
body.page-Main_Page .vh-sanctuary-title a,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a {
position: relative !important;
display: inline-block !important;
min-width: 0 !important;
text-align: center !important;
white-space: nowrap !important;
}
/* Neutralize and remove all text-swapping / morph behavior */
body.page-Main_Page .vh-sanctuary-title .vh-title-hover,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title .vh-title-hover {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Main_Page .vh-sanctuary-title .vh-title-default,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title .vh-title-default {
display: inline !important;
position: static !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
body.page-Main_Page .vh-sanctuary-title a:hover .vh-title-default,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a:hover .vh-title-default {
opacity: 1 !important;
transform: none !important;
}
/* 3. TIMELINE: PERFECT 3-TIER CENTER ALIGNMENT (DATE, DOT, AND TEXT) */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
flex: 0 0 250px !important;
height: 155px !important;
box-sizing: border-box !important;
padding: 6px 14px !important;
background: transparent !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* PERFECT HORIZONTAL AXIS CENTERING */
text-align: center !important;
}
/* Date at the top: centered */
body.page-Main_Page .vh-timeline-date {
width: 100% !important;
text-align: center !important; /* CENTERED */
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 18px !important;
margin: 0 auto 4px auto !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
z-index: 2 !important;
}
/* Horizontal Guide Line */
body.page-Main_Page .vh-timeline-track::before {
top: 30px !important;
height: 1.5px !important;
background: rgba(177, 135, 61, 0.45) !important;
}
/* Dot: Center vertically on the 30px line, and horizontally with the date */
body.page-Main_Page .vh-timeline-dot {
position: absolute !important;
top: 25px !important; /* 25px + 5px radius = 30px (EXACT ON LINE) */
left: 50% !important; /* EXACT HORIZONTAL CENTER */
transform: translateX(-50%) !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #233e44 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #b1873d !important;
z-index: 3 !important;
margin: 0 !important;
}
/* Text below: Properly centered under the dot with ample clearance */
body.page-Main_Page .vh-timeline-text {
width: 100% !important;
max-width: 220px !important;
margin: 24px auto 0 auto !important; /* CLEARLY BELOW DOT & LINE */
padding-top: 0 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #2c3e42 !important;
text-align: center !important; /* PROPERLY CENTERED TEXT */
white-space: normal !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important;
max-height: 105px !important;
}
/* Suppress any tooltip on top bar header title */
#vanipedia-header-title,
.vh-header-title,
.vanipedia-header-title,
#p-logo,
.vector-header {
-webkit-user-select: none !important;
user-select: none !important;
}
/* Transition for Remembering Prabhupada random spotlight */
#vh-random-memories,
.vh-card-memories .vh-card-body {
transition: opacity .7s ease, transform .7s ease;
}
#vh-random-memories.is-changing,
.vh-card-memories .vh-card-body.is-changing {
opacity: 0 !important;
transform: translateY(5px);
}
/* Transition ONLY the text below the titles when randomizing (STEP 70) */
.vh-card-tax .vh-card-text {
transition: opacity .6s ease, transform .6s ease !important;
}
.vh-card-tax .vh-card-text.is-changing,
#vh-tax-random-personality.is-changing,
#vh-tax-random-name.is-changing,
#vh-tax-random-place.is-changing,
#vh-tax-random-question.is-changing {
opacity: 0 !important;
transform: translateY(4px) !important;
}
/* Rotator Titles remain opaque during text rotation while allowing hover rise */
.vh-card-tax .vh-card-title,
.vh-card-tax .vh-card-body > .vh-card-title {
opacity: 1 !important;
animation: none !important;
}
.vh-card-tax .vh-card-title a {
opacity: 1 !important;
animation: none !important;
display: inline-block !important;
}
/* ==========================================================================
STEP 69: FIX BACKGROUND COLOR SCROLL BLEED & STICKY TOP BAR
========================================================================== */
/* 1. PERSISTENT STICKY TOP BAR WHEN SCROLLING DOWN */
.vector-header-container,
#mw-head,
.mw-header {
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
background-color: #345B63 !important;
}
/* 2. PREVENT BACKGROUND COLOR CUTOFF ON SCROLL (SOLID SAGE/TEAL ON ALL PAGES) */
html {
min-height: 100% !important;
background-color: #D4ECDD !important;
}
body {
min-height: 100% !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,
html:not(.skin-theme-clientpref-night) .mw-content-container {
min-height: 100vh !important;
background-color: #D4ECDD !important;
}
/* Restrict cream background strictly to Main Page */
html.page-Main_Page,
body.page-Main_Page {
background-color: #f6f2e9 !important;
}
/* 3. ŚRĪLA PRABHUPĀDA IN THE MEDIA: ARCHIVAL THUMBNAIL STYLING */
body.page-Main_Page .vh-media-bar {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 18px !important;
height: auto !important;
min-height: 48px !important;
max-height: none !important;
padding: 6px 24px !important;
}
body.page-Main_Page .vh-media-title {
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-media-text {
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-media-archival-thumb,
.vh-media-archival-thumb {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
transition: opacity .7s ease, transform .7s ease;
}
body.page-Main_Page .vh-media-archival-thumb.is-changing,
.vh-media-archival-thumb.is-changing {
opacity: 0 !important;
transform: scale(0.95);
}
body.page-Main_Page .vh-media-archival-thumb a {
display: block !important;
border-radius: 4px !important;
overflow: hidden !important;
border: 1.5px solid rgba(177, 135, 61, 0.45) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
line-height: 0 !important;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
body.page-Main_Page .vh-media-archival-thumb a:hover {
transform: translateY(-2px) scale(1.05) !important;
border-color: #dfad3e !important;
box-shadow: 0 4px 12px rgba(177, 135, 61, 0.35) !important;
}
body.page-Main_Page .vh-media-archival-thumb img {
display: block !important;
height: 38px !important;
width: auto !important;
max-width: 75px !important;
object-fit: cover !important;
border-radius: 3px !important;
}
/* ==========================================================================
STEP 71: 5-CARD EQUAL FOOTING ROW (TAXONOMY + MEDIA WITH LARGE THUMBNAILS)
========================================================================== */
/* 1. 5-Column Grid on Equal Footing */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 1450px !important;
height: auto !important;
min-height: 220px !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 16px !important;
width: 100% !important;
height: auto !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 210px !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-tax .vh-card-body {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
text-align: center !important;
}
/* 2. Soft-Switch ONLY Content Below Titles (Titles Stay 100% Static) */
.vh-card-tax .vh-card-text,
.vh-card-tax .vh-media-card-content {
transition: opacity .6s ease, transform .6s ease !important;
}
.vh-card-tax .vh-card-text.is-changing,
.vh-card-tax .vh-media-card-content.is-changing,
#vh-tax-random-personality.is-changing,
#vh-tax-random-name.is-changing,
#vh-tax-random-place.is-changing,
#vh-tax-random-question.is-changing,
#vh-tax-random-media.is-changing {
opacity: 0 !important;
transform: translateY(4px) !important;
}
/* Titles are strictly fixed during text rotation while allowing hover rise */
.vh-card-tax .vh-card-title {
opacity: 1 !important;
animation: none !important;
}
.vh-card-tax .vh-card-title a {
opacity: 1 !important;
animation: none !important;
display: inline-block !important;
}
/* 3. Card 5: Large Archival Media Thumbnail & Captions */
.vh-card-media-item .vh-media-card-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
height: 100% !important;
}
.vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 105px !important;
border-radius: 6px !important;
overflow: hidden !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(177, 135, 61, 0.3) !important;
background: #f0ebe1 !important;
position: relative !important;
line-height: 0 !important;
}
.vh-card-media-item .vh-media-large-thumb a {
display: block !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
.vh-card-media-item .vh-media-large-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
transition: transform .35s ease !important;
}
.vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.05) !important;
}
/* Fallback Vintage Press Badge */
.vh-card-media-item .vh-media-fallback-thumb {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #f7f3ec 0%, #ebdcc7 100%) !important;
}
.vh-card-media-item .vh-media-vintage-badge {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
text-decoration: none !important;
}
.vh-card-media-item .vh-media-vintage-badge .vh-media-icon {
font-size: 24px !important;
}
.vh-card-media-item .vh-media-vintage-badge .vh-media-tag {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #8c6a26 !important;
}
/* Captions Below Large Thumbnail */
.vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: center !important;
width: 100% !important;
}
.vh-card-media-item .vh-media-outlet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #8c6a26 !important;
}
.vh-card-media-item .vh-media-headline {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
}
.vh-card-media-item .vh-media-headline a {
color: #2c3e42 !important;
text-decoration: none !important;
transition: color .2s ease !important;
}
.vh-card-media-item .vh-media-headline a:hover {
color: #345B63 !important;
text-decoration: underline !important;
}
/* 4. Hide legacy bottom media bar since it is now unified in the 5-card row */
.vh-media-bar,
body.page-Main_Page .vh-media-bar {
display: none !important;
}
/* Responsive Grid Breakpoints */
@media (max-width: 1280px) {
body.page-Main_Page .vh-taxonomy-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
body.page-Main_Page .vh-taxonomy-grid {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
STEP 72: UNIFIED "STEP FORTH" TOP BAR ICONS & LEFT COLUMN STACK
========================================================================== */
/* --------------------------------------------------------------------------
1. UNIFIED "STEP FORTH" ANIMATION ACROSS ALL TOP BAR ICONS & BUTTONS
-------------------------------------------------------------------------- */
.vector-header-container .vector-icon,
.vector-header-start .vector-icon,
.vector-header-end .vector-icon,
.vector-header-start .cdx-button,
.vector-header-end .cdx-button,
.vector-header-start .vector-dropdown-label,
.vector-header-end .vector-dropdown-label,
.vector-header-container .cdx-text-input__icon,
.mw-header .vector-icon,
.vector-sticky-header .vector-icon {
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
filter 0.25s ease,
color 0.25s ease,
background-color 0.25s ease !important;
will-change: transform, filter !important;
}
/* STEP FORTH HOVER: Icon floats up 2.5px, scales up, glows with 3D drop shadow */
.vector-header-start #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-start .cdx-button:hover .vector-icon,
.vector-header-end .cdx-button:hover .vector-icon,
.vector-header-start .vector-dropdown-label:hover .vector-icon,
.vector-header-end .vector-dropdown-label:hover .vector-icon,
.vector-header-end #pt-userpage-2:hover .vector-icon,
.vector-header-container .cdx-search-input:hover .cdx-text-input__icon,
.vector-header-container .cdx-text-input__input:focus ~ .cdx-text-input__icon,
.vector-header-container .vector-icon:hover {
transform: translateY(-2.5px) scale(1.14) !important;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 10px rgba(245, 215, 127, 0.8)) !important;
color: #ffffff !important;
fill: #ffffff !important;
}
/* STEP FORTH BUTTON CONTAINER HOVER */
.vector-header-start .vector-dropdown-label:hover,
.vector-header-end .vector-dropdown-label:hover,
.vector-header-start .cdx-button:hover,
.vector-header-end .cdx-button:hover,
.vector-header-end #pt-userpage-2:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(245, 215, 127, 0.45) !important;
background-color: rgba(245, 215, 127, 0.18) !important;
}
/* ACTIVE / CLICK STATE: Tactile press depression */
.vector-header-start .vector-dropdown-label:active .vector-icon,
.vector-header-end .vector-dropdown-label:active .vector-icon,
.vector-header-start .cdx-button:active .vector-icon,
.vector-header-end .cdx-button:active .vector-icon {
transform: translateY(0.5px) scale(0.98) !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}
/* --------------------------------------------------------------------------
2. TOP-LEFT COLUMN: MEMORIES (TOP) + SRILA PRABHUPADA IN MEDIA (BOTTOM)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: stretch !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
gap: 24px !important;
height: auto !important;
min-height: 330px !important;
}
/* Left Stacked Column */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 310px !important;
height: 100% !important;
justify-content: space-between !important;
}
body.page-Main_Page .vh-triad-column-left .vh-card {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
}
/* Center Sanctuary Hero */
body.page-Main_Page .vh-sanctuary-card {
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 310px !important;
height: auto !important;
}
/* Right Thematic Article Spotlight */
body.page-Main_Page .vh-card-article {
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 310px !important;
height: auto !important;
}
/* Media Card in Hero Left: Large Thumbnail & Captions Below */
body.page-Main_Page .vh-card-media-item .vh-media-card-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 95px !important;
border-radius: 5px !important;
overflow: hidden !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(177, 135, 61, 0.35) !important;
background: #f0ebe1 !important;
line-height: 0 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb a {
display: block !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
transition: transform .35s ease !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.05) !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: center !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #8c6a26 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
}
/* --------------------------------------------------------------------------
3. BOTTOM 4-COLUMN TAXONOMY GRID (EQUAL FOOTING)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-taxonomy-section {
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 180px !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 18px !important;
width: 100% !important;
height: auto !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 175px !important;
}
/* Clean up any legacy media bar */
.vh-media-bar,
body.page-Main_Page .vh-media-bar {
display: none !important;
}
/* ==========================================================================
STEP 73: FIT EVERYTHING TO SCREEN + 100% LARGER TITLES & TEXTS
+ MAXIMIZED ŚRĪLA PRABHUPĀDA CARD SIZE
========================================================================== */
/* --------------------------------------------------------------------------
1. FIT EVERYTHING TO SCREEN (ZERO SCROLLBAR ON DESKTOP)
-------------------------------------------------------------------------- */
body.page-Main_Page,
html.page-Main_Page {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
}
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 {
margin: 0 !important;
padding: 0 !important;
border: none !important;
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
background-color: #faf7f0 !important;
}
/* Master Homepage Container: Perfectly fits single viewport height */
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 48px) !important;
max-height: calc(100vh - 48px) !important;
min-height: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 8px 32px 10px 32px !important;
margin: 0 !important;
overflow: hidden !important;
position: relative !important;
}
/* --------------------------------------------------------------------------
2. MAXIMIZED ŚRĪLA PRABHUPĀDA CARD & HERO ROW PROPORTIONS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: stretch !important;
width: 100% !important;
max-width: 1560px !important;
margin: 0 auto !important;
gap: 22px !important;
flex: 1 1 auto !important;
height: auto !important;
min-height: 310px !important;
max-height: 44vh !important;
}
/* Left Stacked Column: Memories (Top) + Media (Bottom) */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
min-width: 300px !important;
height: 100% !important;
justify-content: space-between !important;
}
body.page-Main_Page .vh-triad-column-left .vh-card {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important;
padding: 8px 14px !important;
}
body.page-Main_Page .vh-card-media-item {
flex: 1 1 auto !important;
padding: 8px 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
/* CENTER: MAXIMIZED ŚRĪLA PRABHUPĀDA CARD */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 440px !important;
height: 100% !important;
padding: 10px 24px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
}
/* Grand Portrait Circle - Maximized Size */
body.page-Main_Page .vh-sanctuary-portrait-box {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 4px 0 !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: min(240px, 24vh) !important;
height: min(240px, 24vh) !important;
min-width: 190px !important;
min-height: 190px !important;
border-radius: 50% !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 8px 28px rgba(18, 63, 56, 0.35),
0 2px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
overflow: hidden !important;
margin: 0 auto !important;
position: relative !important;
}
/* Right Column: Thematic Article Spotlight */
body.page-Main_Page .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
min-width: 300px !important;
height: 100% !important;
padding: 10px 16px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
/* --------------------------------------------------------------------------
3. INCREASE ALL CARD TITLES BY 100% (MAJESTIC 3D SACRED GOLD)
-------------------------------------------------------------------------- */
/* Center Title: "Śrīla Prabhupāda" (+100% -> 46px) */
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 46px !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: 0.5px !important;
margin-bottom: 4px !important;
}
/* Memories & Article Titles (+100% -> 28px) */
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 28px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
/* Media Card Title (+100% -> 26px) */
body.page-Main_Page .vh-card-media-item .vh-card-title,
body.page-Main_Page .vh-card-media-item .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 26px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
/* Bottom 4 Taxonomy Card Titles: Personalities, Names, Places, Questions (+100% -> 30px) */
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 30px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
/* --------------------------------------------------------------------------
4. INCREASE ALL TEXTS IN THOSE CARDS BY 100%
-------------------------------------------------------------------------- */
/* Śrīla Prabhupāda Sanctuary Subtitle (+100% -> 22px) */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-style: normal !important;
font-weight: 600 !important;
font-size: 22px !important;
line-height: 1.3 !important;
color: #2b4b52 !important;
text-align: center !important;
margin: 4px 0 0 0 !important;
}
/* Bottom 4 Taxonomy Descriptions (+100% -> 18px) */
body.page-Main_Page .vh-card-tax .vh-card-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.4 !important;
color: #2c3e42 !important;
text-align: center !important;
}
body.page-Main_Page .vh-card-tax .vh-card-text strong,
body.page-Main_Page .vh-card-tax .vh-card-text a strong {
font-size: 19px !important;
color: #123f38 !important;
font-weight: 700 !important;
}
/* Memories Text (+100% -> 18px) */
body.page-Main_Page .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-snippet {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.38 !important;
color: #2c3e42 !important;
}
/* Media Card Outlet Tag & Headline (+100%) */
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-size: 14.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
}
/* Media Thumbnail Dimensions */
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 100px !important;
border-radius: 6px !important;
overflow: hidden !important;
}
/* Right Article Spotlight Text (+100% -> 18px) */
body.page-Main_Page .vh-card-article .vh-card-text,
body.page-Main_Page .vh-card-article .vh-random-article-extract {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.4 !important;
color: #2c3e42 !important;
}
/* --------------------------------------------------------------------------
5. COMPACT TIMELINE TO FIT THE 100vh SCREEN PERFECTLY
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 130px !important;
height: 130px !important;
min-height: 130px !important;
max-height: 130px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
margin-top: 4px !important;
margin-bottom: 4px !important;
background: transparent !important;
}
body.page-Main_Page .vh-timeline-years {
flex: 0 0 32px !important;
height: 32px !important;
min-height: 32px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
padding: 4px 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
}
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
flex: 0 0 92px !important;
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
}
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
padding: 2px 14px !important;
}
body.page-Main_Page .vh-timeline-date {
font-size: 11px !important;
font-weight: 800 !important;
}
body.page-Main_Page .vh-timeline-text {
font-size: 13px !important;
line-height: 1.3 !important;
margin-top: 14px !important;
}
/* --------------------------------------------------------------------------
6. BOTTOM 4 TAXONOMY CARDS PROPORTIONS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-taxonomy-section {
width: 100% !important;
max-width: 1560px !important;
margin: 0 auto !important;
flex: 0 0 auto !important;
height: auto !important;
min-height: 145px !important;
max-height: 22vh !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
width: 100% !important;
height: 100% !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 140px !important;
padding: 8px 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* ==========================================================================
STEP 77: TARGETED ADJUSTMENTS STARTING FROM STEP 73
1. Centered, ROUND picture (no oval distortion, no text overlap)
2. Subtitle second line in one line, not truncated (same text size: 20-22px)
3. Put media card UP to fit in under "...remembers..." (no push-down)
4. Put bottom 4 cards up & decrease text size (14.5px) to fit in cleanly
5. Put timeline and years above it MORE DOWN (margin-top: 38px)
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: CENTERED ROUND PICTURE (NOT OVAL, NO TEXT OVERLAP)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 4px auto !important;
text-align: center !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 180px !important;
height: 180px !important;
min-width: 180px !important;
min-height: 180px !important;
max-width: 180px !important;
max-height: 180px !important;
border-radius: 50% !important; /* PERFECT 100% ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
box-shadow:
0 8px 24px rgba(18, 63, 56, 0.35),
0 2px 6px rgba(0, 0, 0, 0.22),
inset 0 2px 5px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage .vh-photo {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
background-size: cover !important;
background-position: center top !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
ITEM 2: SECOND LINE IN ONE LINE, NOT TRUNCATED (SAME TEXT SIZE)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin: 6px auto 0 auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
position: static !important; /* NEVER OVERLAPS WITH PHOTO */
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important; /* SAME PROMINENT TEXT SIZE */
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.25 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important; /* SAME PROMINENT TEXT SIZE */
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.25 !important;
}
/* --------------------------------------------------------------------------
ITEM 3: PUT MEDIA CARD UP TO FIT IN UNDER "...REMEMBERS..."
-------------------------------------------------------------------------- */
/* Left Column: Natural flow (no space-between that forces media down) */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* PUT IT UP UNDER REMEMBERS */
gap: 8px !important;
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: 275px !important;
max-height: 275px !important;
}
/* Memories Card (Top Left) */
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 110px !important;
max-height: 110px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories .vh-card-title a {
font-size: 22px !important;
margin-bottom: 3px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-memories .vh-card-text {
font-size: 14.5px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Media Card (Bottom Left): Sits directly under Memories with compact thumb */
body.page-Main_Page .vh-card-media-item {
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 155px !important;
max-height: 155px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 3px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-title a {
font-size: 21px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 68px !important; /* COMPACT THUMBNAIL FITS UP UNDER REMEMBERS */
border-radius: 5px !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-size: 11px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-size: 13.5px !important;
line-height: 1.25 !important;
color: #2c3e42 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Center Sanctuary Card */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 660px !important;
min-width: 440px !important;
height: 275px !important;
max-height: 275px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-bottom: 2px !important;
}
/* Right Column: Article Spotlight */
body.page-Main_Page .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: 275px !important;
max-height: 275px !important;
padding: 8px 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-article .vh-card-title a {
font-size: 22px !important;
line-height: 1.15 !important;
margin-bottom: 4px !important;
}
body.page-Main_Page .vh-card-article .vh-card-text {
font-size: 14px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
display: -webkit-box !important;
-webkit-line-clamp: 7 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Hero Row Container Height Capped at 275px */
body.page-Main_Page .vh-triad-grid {
height: 275px !important;
max-height: 275px !important;
}
/* --------------------------------------------------------------------------
ITEM 5: PUT THE TIMELINE AND THE YEARS ABOVE IT MORE DOWN
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 auto !important;
height: 120px !important;
min-height: 120px !important;
max-height: 120px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
margin-top: 38px !important; /* PUSHES TIMELINE & YEARS DOWN */
margin-bottom: 22px !important; /* GENEROUS BREATHING ROOM BELOW */
background: transparent !important;
}
body.page-Main_Page .vh-timeline-years {
flex: 0 0 28px !important;
height: 28px !important;
min-height: 28px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
padding: 3px 9px !important;
font-size: 12px !important;
font-weight: 700 !important;
}
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
flex: 0 0 82px !important;
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
}
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
padding: 2px 14px !important;
}
body.page-Main_Page .vh-timeline-date {
font-size: 10.5px !important;
font-weight: 800 !important;
}
body.page-Main_Page .vh-timeline-text {
font-size: 12px !important;
line-height: 1.25 !important;
margin-top: 10px !important;
}
/* --------------------------------------------------------------------------
ITEM 4: PUT BOTTOM CARDS UP & DECREASE TEXT SIZE IN THESE FOUR CARDS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-taxonomy-section {
width: 100% !important;
max-width: 1560px !important;
margin: 0 auto !important;
flex: 0 0 auto !important;
height: 110px !important;
min-height: 110px !important;
max-height: 110px !important;
margin-bottom: 10px !important; /* ELEVATED ABOVE SCREEN BOTTOM */
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
width: 100% !important;
height: 100% !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
height: 110px !important;
min-height: 110px !important;
max-height: 110px !important;
padding: 6px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
/* Title: 24px Grand Golden 3D Typography */
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a {
font-size: 24px !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
/* Decreased text size so it fits in without truncation */
body.page-Main_Page .vh-card-tax .vh-card-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14.5px !important; /* DECREASED FROM 18px TO FIT IN */
line-height: 1.35 !important;
color: #2c3e42 !important;
text-align: center !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-tax .vh-card-text strong,
body.page-Main_Page .vh-card-tax .vh-card-text a strong {
font-size: 15.5px !important;
color: #123f38 !important;
font-weight: 700 !important;
}
/* ==========================================================================
STEP 78: 50% LARGER ROUND IMAGE, ZERO SUBTITLE GAP, SMALL MEDIA GAP
1. 50% larger round image (270px x 270px) with clean visual gaps above/below
2. Zero gap between "Founder-Ācārya" and "International Society..."
3. Small gap (4px) between "Remembers..." and "In the Media"
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: 50% LARGER ROUND IMAGE (270px x 270px) WITH VISUAL GAPS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 460px !important;
height: auto !important;
min-height: 375px !important;
max-height: 390px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-bottom: 6px !important; /* VISUAL GAP ABOVE ROUND IMAGE */
}
/* Portrait stage increased by 50% (180px -> 270px) */
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 4px auto !important;
text-align: center !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 270px !important; /* +50% LARGER (180px -> 270px) */
height: 270px !important;
min-width: 270px !important;
min-height: 270px !important;
max-width: 270px !important;
max-height: 270px !important;
border-radius: 50% !important; /* 100% ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 10px 30px rgba(18, 63, 56, 0.38),
0 3px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage .vh-photo {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
background-size: cover !important;
background-position: center top !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
ITEM 2: NO GAP BETWEEN "FOUNDER-ĀCĀRYA" AND "INTERNATIONAL SOCIETY..."
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin: 8px auto 0 auto !important; /* VISUAL GAP BELOW ROUND IMAGE */
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINES */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 3: PUT MEDIA CARD UNDER "...REMEMBERS..." WITH JUST SMALL GAP (4px)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid {
height: auto !important;
min-height: 375px !important;
max-height: 390px !important;
}
/* Left Stacked Column: 4px crisp small gap */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 4px !important; /* JUST SMALL GAP! */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: 100% !important;
}
body.page-Main_Page .vh-card-memories {
margin: 0 !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 110px !important;
max-height: 110px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item {
margin: 0 !important;
margin-top: 0 !important; /* ZERO EXTRA MARGIN (CONTROLLED BY 4px GAP) */
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 155px !important;
max-height: 155px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
box-sizing: border-box !important;
}
/* Right Article Card height aligned */
body.page-Main_Page .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 275px !important;
max-height: 385px !important;
padding: 8px 14px !important;
}
/* Timeline section spacing adjusted for new hero height */
body.page-Main_Page .vh-timeline-section {
margin-top: 20px !important;
margin-bottom: 16px !important;
}
/* Bottom 4 cards padding & positioning */
body.page-Main_Page .vh-taxonomy-section {
margin-bottom: 8px !important;
}
/* ==========================================================================
STEP 79: MOVE "FOUNDER..." +10px DOWN & REMOVE HUGE GAP UNDER REMEMBERS
1. Subtitle ("Founder-Ācārya / International Society...") moved +10px down
2. "Śrīla Prabhupāda in the Media" pulled directly under "Remembers..."
with just a small 6px gap (huge empty gap completely eliminated)
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: MOVE THOSE TWO LINES "FOUNDER..." +10px DOWN
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 18px !important; /* MOVED +10px DOWN (FROM 8px TO 18px) */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINE 1 AND LINE 2 */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 2: REMOVE HUGE EMPTY GAP UNDER REMEMBERS (PUT MEDIA DIRECTLY UNDER)
-------------------------------------------------------------------------- */
/* Left Column Container: Natural tight vertical flow */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* TIGHT TOP PACKING (NO SPACE-BETWEEN) */
align-items: stretch !important;
gap: 6px !important; /* CRISP SMALL GAP! */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important; /* UNCONSTRAINED TO PREVENT PUSH-DOWN */
min-height: 0 !important;
}
/* Top Card: Memories (Tight fit to content, zero empty space below) */
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important; /* NEVER EXPAND VERTICALLY */
height: auto !important; /* EXACT HEIGHT OF CONTENT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-bottom: 0 !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories .vh-card-body,
body.page-Main_Page #vh-random-memories {
height: auto !important; /* NEVER STRETCH TO 100% */
min-height: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-memories .vh-card-title a {
font-size: 21px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-memories .vh-card-text {
font-size: 14px !important;
line-height: 1.35 !important;
margin-bottom: 0 !important;
}
/* Bottom Card: Media Item (Sits immediately below Memories with only 6px gap) */
body.page-Main_Page .vh-card-media-item {
flex: 0 0 auto !important; /* NEVER EXPAND VERTICALLY */
height: auto !important; /* EXACT HEIGHT OF CONTENT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important; /* ZERO EXTRA MARGIN (GAP CONTROLS IT) */
margin-bottom: 0 !important;
padding: 6px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-body {
height: auto !important;
min-height: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-title a {
font-size: 20px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 68px !important;
border-radius: 5px !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-size: 11px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-size: 13.5px !important;
line-height: 1.25 !important;
color: #2c3e42 !important;
}
/* ==========================================================================
STEP 80: ABSOLUTE ELIMINATION OF LEFT GAP & CENTER VERTICAL SHIFTS
1. Left Column: Completely eliminate the huge gap between "...remembers..."
and "In the Media" (align-items: flex-start, unconstrained auto height,
flex: 0 0 auto on both cards, strict 4px gap).
2. Center Card:
- Shift the round image 30px down from the title (margin-top: 36px)
- Text lines under the image increased +30px from image (margin-top: 48px)
- Zero gap between "Founder-Ācārya" and "International Society..."
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: ABSOLUTE ELIMINATION OF THE HUGE EMPTY GAP ON THE LEFT
-------------------------------------------------------------------------- */
/* Unstretch hero row so left column hugs its content instead of stretching 390px */
body.page-Main_Page .vh-triad-grid {
align-items: flex-start !important; /* STOPS FORCING LEFT COLUMN TO STRETCH */
height: auto !important;
min-height: 450px !important;
}
/* Left Stacked Column: Strictly pack items with only 4px gap */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* PACK TIGHTLY AT TOP */
align-items: stretch !important;
gap: 4px !important; /* CRISP 4px GAP ONLY */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important; /* NEVER 100% HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Memories Card (Top Left) */
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important; /* NEVER EXPAND */
height: auto !important; /* EXACT CONTENT HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories .vh-card-body,
body.page-Main_Page #vh-random-memories {
flex: 0 0 auto !important;
height: auto !important; /* NEVER 100% HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Media Card (Bottom Left): Sits immediately 4px under Memories */
body.page-Main_Page .vh-card-media-item {
flex: 0 0 auto !important; /* NEVER EXPAND */
height: auto !important; /* EXACT CONTENT HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important; /* ZERO EXTRA MARGIN (4px GAP CONTROLS IT) */
margin-bottom: 0 !important;
padding: 6px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-body {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 2: CENTER CARD - SHIFT IMAGE 30px DOWN & TEXT LINES +30px DOWN
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 460px !important;
height: auto !important;
min-height: 440px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 1. Shift the round image 30px down from the title */
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-top: 36px !important; /* SHIFTED 30px DOWN FROM TITLE */
margin-bottom: 0 !important;
text-align: center !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 270px !important;
height: 270px !important;
min-width: 270px !important;
min-height: 270px !important;
max-width: 270px !important;
max-height: 270px !important;
border-radius: 50% !important; /* PERFECT ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 10px 30px rgba(18, 63, 56, 0.38),
0 3px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* 2. Text lines under the image increased +30px from the image */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 48px !important; /* INCREASED +30px DOWN FROM THE IMAGE (18px -> 48px) */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINE 1 AND LINE 2 */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* ==========================================================================
STEP 81: SPECIFICITY OVERHAUL - ELIMINATING THE 340px SQUARE ON MEMORIES CARD
The user's DevTools confirmed: .vh-card.vh-card-memories was computing to
EXACTLY 339.99px x 339.99px (a square) because an older high-specificity rule
"body.page-Main_Page .vh-triad-grid .vh-card { flex: 0 0 340px !important; }"
was matching it. In a column flex container (.vh-triad-column-left),
flex-basis: 340px forces the HEIGHT to 340px!
We now use #vani-home scoped selectors to permanently override and reset
flex, height, and margins on all cards inside the left column.
========================================================================== */
/* 1. HERO TRIAD GRID & LEFT COLUMN: UNSTRETCH & WRAP CONTENT */
body.page-Main_Page #vani-home .vh-triad-grid,
body.page-Main_Page .vh-triad-grid {
align-items: flex-start !important;
height: auto !important;
min-height: 450px !important;
}
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page #vani-home .vh-triad-column-left,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 4px !important; /* CRISP 4px GAP BETWEEN THE TWO CARDS */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 2. OVERRIDE THE 340px FLEX-BASIS ON ALL CARDS IN THE LEFT COLUMN */
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card,
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card-memories,
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card-media-item,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-memories,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-media-item,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card-memories,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card-media-item {
flex: 0 0 auto !important; /* KILLS 340px HEIGHT! */
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important; /* HUGS EXACT CONTENT HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
}
/* 3. CARD BODIES IN LEFT COLUMN */
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card-body,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-body,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card-body,
body.page-Main_Page .vh-triad-column-left .vh-card-body,
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left #vh-random-memories,
body.page-Main_Page #vani-home .vh-triad-column-left #vh-random-memories,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left #vh-random-memories,
body.page-Main_Page .vh-triad-column-left #vh-random-memories {
flex: 0 0 auto !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
height: auto !important; /* KILLS 100% HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4. MEDIA ITEM CARD SPECIFIC STYLING IN LEFT COLUMN */
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-media-item,
body.page-Main_Page .vh-triad-column-left .vh-card-media-item {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
}
/* --------------------------------------------------------------------------
CENTER CARD: SHIFT ROUND IMAGE 30px DOWN & TEXT LINES +30px FROM IMAGE
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page #vani-home .vh-sanctuary-card,
body.page-Main_Page .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 460px !important;
height: auto !important;
min-height: 440px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Shift the round image 30px down from the title */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-top: 36px !important; /* SHIFTED 30px DOWN FROM TITLE */
margin-bottom: 0 !important;
text-align: center !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 270px !important;
height: 270px !important;
min-width: 270px !important;
min-height: 270px !important;
max-width: 270px !important;
max-height: 270px !important;
border-radius: 50% !important; /* PERFECT ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 10px 30px rgba(18, 63, 56, 0.38),
0 3px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* Text lines under the image increased +30px from the image */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page #vani-home .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 48px !important; /* INCREASED +30px DOWN FROM THE IMAGE (18px -> 48px) */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINE 1 AND LINE 2 */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text br,
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-sub-1,
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-sub-2,
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* --------------------------------------------------------------------------
RIGHT COLUMN: ARTICLE CARD (CLEAN UNCONSTRAINED AUTO HEIGHT)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-card-article,
body.page-Main_Page .vh-triad-grid > .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 275px !important;
max-height: 440px !important;
padding: 8px 14px !important;
}
/* ==========================================================================
STEP 82:
1. Unclamp Memories text so disciple name at the end of "recounted by..."
displays fully as it used to be (remove -webkit-line-clamp: 3).
2. Make +50px bigger gap between Memories card and "SP in Media" card
(gap: 50px).
3. Make the media thumbnail view a complete standard size (175px tall),
filling the plenty space below, with object-fit: contain so thumbnails
fit completely inside without any cropping and without changing their
aspect ratio.
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: DISPLAY FULL NAME AT END OF "RECOUNTED BY..." (UNCLAMP TEXT)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-text {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
max-height: none !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* --------------------------------------------------------------------------
ITEM 2: +50px BIGGER GAP TO "SP IN THE MEDIA"
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page #vani-home .vh-triad-column-left,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 50px !important; /* +50px BIGGER GAP */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-card-media-item,
body.page-Main_Page .vh-card-media-item {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 3: COMPLETE STANDARD SIZE THUMBNAIL VIEW (NO CROPPING, FIT ASPECT RATIO)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 175px !important; /* COMPLETE STANDARD VIEW SIZE FILLING THE SPACE */
min-height: 175px !important;
max-height: 175px !important;
border-radius: 6px !important;
overflow: hidden !important;
background: #f4efe6 !important; /* WARM VINTAGE PARCHMENT TONE */
border: 1px solid rgba(177, 135, 61, 0.3) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 6px 0 8px 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb a,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
text-decoration: none !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important; /* FITS COMPLETE THUMBNAIL WITHOUT CROPPING */
object-position: center center !important;
transition: transform .3s ease !important;
display: block !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb:hover img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.03) !important;
}
/* Captions under the thumbnail */
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-caption,
body.page-Main_Page .vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: center !important;
width: 100% !important;
margin-top: 2px !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-outlet,
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.2 !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-headline,
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-headline a,
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.3 !important;
color: #2c3e42 !important;
}
/* ==========================================================================
STEP 86:
1. NEUTRALIZE STRAY PARAGRAPHS: Prevent MediaWiki parser from generating
top/side offsets.
2. FOUNDER-ĀCARYA CLICKABLE TITLE:
- Macron ONLY above capital 'A' (Founder-Ācarya).
- Styled in exact 3D sacred gold as other card titles.
- Breathing filament underline at rest, 90% glide & lift on hover.
3. DECREASE GAP ABOVE 4 BOTTOM CARDS JUST TO 30px:
- Shifts .vh-taxonomy-section UP by 50px via translateY(-50px)
reducing the ~80px gap directly to 30px, keeping layout fully stable.
4. UNIFY HOVER ANIMATIONS FOR ALL TOP BAR ICONS & BUTTONS:
- Unified smooth lift (translateY(-2px)) on all topbar buttons/links.
- Unified warm gold glowing pill (rgba(245, 215, 127, 0.18)).
- Unified icon scale (1.08x) with soft glow, eliminating double-jumping.
========================================================================== */
/* 1. Neutralize stray paragraph tags */
body.page-Main_Page .mw-parser-output > p {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
body.page-Main_Page .mw-parser-output > p:empty {
display: none !important;
}
/* 2. Decrease gap above 4 bottom cards just to 30px */
body.page-Main_Page #vani-home .vh-taxonomy-section,
body.page-Main_Page .vh-taxonomy-section {
transform: translateY(-50px) !important; /* DECREASES GAP ABOVE 4 BOTTOM CARDS TO 30px */
}
/* 3. Founder-Ācarya Clickable 3D Title Link */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-sanctuary-card .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 40px !important; /* MAINTAINS +30px GAP FROM 270px ROUND IMAGE */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
position: static !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-founder-title,
body.page-Main_Page .vh-founder-title,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1,
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
text-align: center !important;
margin: 0 !important;
margin-bottom: 2px !important;
padding: 0 !important;
line-height: 1.15 !important;
}
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page .vh-founder-title a,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 24px !important; /* IDENTICAL CARD TITLE SIZE */
font-weight: 700 !important;
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 7px !important; /* SPACE FOR BREATHING UNDERLINE */
letter-spacing: 0.025em !important;
line-height: 1.2 !important;
cursor: pointer !important;
transform: none !important;
/* Temple Gold Face */
color: #dfad3e !important;
-webkit-text-fill-color: #dfad3e !important;
/* 3D Chiseled Shadow */
text-shadow: none !important;
transition: transform 0.22s ease, color 0.22s ease, text-shadow 0.22s ease !important;
}
/* Golden Breathing Filament Underline at Rest */
body.page-Main_Page #vani-home .vh-founder-title a::after,
body.page-Main_Page .vh-founder-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a::after,
body.page-Main_Page .vh-sanctuary-sub-1 a::after,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(223, 173, 62, 0.4) 15%,
#dfad3e 50%,
rgba(223, 173, 62, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(223, 173, 62, 0.75) !important;
border-radius: 2px !important;
pointer-events: none !important;
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease !important;
}
/* On Hover: 3D Lift & Full Glide Underline */
body.page-Main_Page #vani-home .vh-founder-title a:hover,
body.page-Main_Page .vh-founder-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover,
body.page-Main_Page .vh-sanctuary-sub-1 a:hover,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a:hover {
transform: translateY(-2.5px) !important;
color: #dfad3e !important;
-webkit-text-fill-color: #dfad3e !important;
text-decoration: none !important;
text-shadow: none !important;
}
body.page-Main_Page #vani-home .vh-founder-title a:hover::after,
body.page-Main_Page .vh-founder-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover::after,
body.page-Main_Page .vh-sanctuary-sub-1 a:hover::after,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a:hover::after {
animation: none !important;
opacity: 1 !important;
width: 90% !important;
left: 5% !important;
}
/* Subtitle Line 2: International Society for Kṛṣṇa Consciousness */
body.page-Main_Page #vani-home .vh-sanctuary-sub-2,
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4. UNIFIED HOVER ANIMATION FOR ALL TOP BAR ICONS & BUTTONS */
/* Base transitions on all interactive elements in top bar */
.vector-header-container .cdx-button,
.vector-header-container .vector-dropdown-label,
.vector-header-container #pt-userpage-2,
.vector-header-container .vector-user-links a,
.vector-header-container .vector-icon,
.vector-header-container svg {
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
filter 0.22s ease !important;
}
/* Unified button container hover */
.vector-header-container .vector-header-start .cdx-button:hover,
.vector-header-container .vector-header-end .cdx-button:hover,
.vector-header-container .vector-dropdown-label:hover,
.vector-header-container #vector-main-menu-dropdown .vector-dropdown-label:hover,
.vector-header-container #pt-userpage-2:hover,
.vector-header-container .vector-user-links a:hover {
transform: translateY(-2px) !important;
background-color: rgba(245, 215, 127, 0.18) !important;
border-radius: 4px !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(245, 215, 127, 0.4) !important;
color: #ffffff !important;
}
/* Unified icon scale & soft glow (no double translation) */
.vector-header-container .vector-header-start .cdx-button:hover .vector-icon,
.vector-header-container .vector-header-end .cdx-button:hover .vector-icon,
.vector-header-container .vector-dropdown-label:hover .vector-icon,
.vector-header-container #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-container #pt-userpage-2:hover .vector-icon,
.vector-header-container .vector-user-links a:hover .vector-icon,
.vector-header-container .cdx-button:hover svg,
.vector-header-container .vector-dropdown-label:hover svg,
.vector-header-container .vector-icon:hover {
transform: scale(1.08) !important;
color: #ffffff !important;
fill: #ffffff !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 8px rgba(245, 215, 127, 0.65)) !important;
}
/* ==========================================================================
STEP 87: COMPLETELY ELIMINATE / AVOID TOP BAR ICON ANIMATIONS
- Neutralize all transforms, scales, translations, and jumping animations on
all top bar icons, buttons, dropdowns, and links.
- Clean, quiet, stationary hover state with subtle background pill only.
========================================================================== */
/* 1. Reset all transforms, filters, and animations on top bar container elements */
.vector-header-container,
.vector-header-start,
.vector-header-end,
.vector-header-container *,
.vector-header-container .vector-icon,
.vector-header-container svg,
.vector-header-container .cdx-button,
.vector-header-container .vector-dropdown-label,
.vector-header-container #pt-userpage-2,
.vector-header-container .vector-user-links a,
.mw-header .vector-icon,
.vector-sticky-header .vector-icon {
transform: none !important;
animation: none !important;
filter: none !important;
will-change: auto !important;
}
/* 2. On hover: Keep icons strictly stationary — zero movement, zero scale, zero drop-shadow */
.vector-header-container .vector-icon:hover,
.vector-header-container svg:hover,
.vector-header-container .cdx-button:hover .vector-icon,
.vector-header-container .cdx-button:hover svg,
.vector-header-container .vector-dropdown-label:hover .vector-icon,
.vector-header-container .vector-dropdown-label:hover svg,
.vector-header-container #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-container #vector-main-menu-dropdown:hover svg,
.vector-header-container #pt-userpage-2:hover .vector-icon,
.vector-header-container #pt-userpage-2:hover svg,
.vector-header-container .vector-user-links a:hover .vector-icon,
.vector-header-container .vector-user-links a:hover svg,
.vector-header-container .cdx-search-input:hover .cdx-text-input__icon,
.vector-header-container .cdx-text-input__input:focus ~ .cdx-text-input__icon,
.vector-header-start .cdx-button:hover .vector-icon,
.vector-header-end .cdx-button:hover .vector-icon,
.vector-header-start .vector-dropdown-label:hover .vector-icon,
.vector-header-end .vector-dropdown-label:hover .vector-icon,
.vector-header-start #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-end #pt-userpage-2:hover .vector-icon {
transform: none !important;
filter: none !important;
animation: none !important;
color: #ffffff !important;
fill: #ffffff !important;
}
/* 3. On button/dropdown hover: subtle stationary background highlight only (no vertical lift, no jumping) */
.vector-header-container .cdx-button:hover,
.vector-header-container .vector-dropdown-label:hover,
.vector-header-container #vector-main-menu-dropdown .vector-dropdown-label:hover,
.vector-header-container #pt-userpage-2:hover,
.vector-header-container .vector-user-links a:hover,
.vector-header-start .cdx-button:hover,
.vector-header-end .cdx-button:hover,
.vector-header-start .vector-dropdown-label:hover,
.vector-header-end .vector-dropdown-label:hover,
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label:hover,
.vector-header-end #pt-userpage-2:hover {
transform: none !important;
box-shadow: none !important;
background-color: rgba(245, 215, 127, 0.15) !important;
border-radius: 4px !important;
color: #ffffff !important;
}
/* 4. On active / click: no displacement */
.vector-header-container .cdx-button:active,
.vector-header-container .vector-dropdown-label:active,
.vector-header-container .vector-icon:active,
.vector-header-start .vector-dropdown-label:active .vector-icon,
.vector-header-end .vector-dropdown-label:active .vector-icon,
.vector-header-start .cdx-button:active .vector-icon,
.vector-header-end .cdx-button:active .vector-icon {
transform: none !important;
filter: none !important;
}
/* ==========================================================================
STEP 91:
1. STRICTLY SCOPED TO MAIN PAGE (ZERO LEAKAGE TO REGULAR MEDIAWIKI PAGES):
- Every cursor rule is prefixed with html body.page-Main_Page.
- Regular MediaWiki pages retain 100% normal default Windows mouse behavior.
2. ABSOLUTE DISABLE OF WINDOWS CURSOR ACROSS MAIN PAGE & ALL HOVER STATES:
- Uses high-specificity rules targeting *:hover, a:hover, etc.
ensuring the native Windows cursor/pointing hand is completely suppressed.
3. CUSTOM GOLDEN CURSOR (ARROW AT REST, HAND ONLY ABOVE LINKS):
- Sleek golden arrow pointer by default.
- Smoothly switches to golden pointing hand ONLY above links (body.vh-cursor-link).
- No outer halo ring, zero lag, zero clutter.
4. FOUNDER-ĀCĀRYA MACRON CENTERING PRESERVED:
- 'Noto Serif', 'Cormorant Garamond' font stack.
========================================================================== */
/* 1. DISABLE WINDOWS CURSOR ON MAIN PAGE ONLY (ACROSS ALL ELEMENTS & HOVER STATES) */
html body.page-Main_Page,
html body.page-Main_Page *,
html body.page-Main_Page *:hover,
html body.page-Main_Page a,
html body.page-Main_Page a:hover,
html body.page-Main_Page a:focus,
html body.page-Main_Page a:active,
html body.page-Main_Page a:visited,
html body.page-Main_Page a *,
html body.page-Main_Page a *:hover,
html body.page-Main_Page [href],
html body.page-Main_Page [href]:hover,
html body.page-Main_Page [href] *,
html body.page-Main_Page [href] *:hover,
html body.page-Main_Page button,
html body.page-Main_Page button:hover,
html body.page-Main_Page input,
html body.page-Main_Page input:hover,
html body.page-Main_Page textarea,
html body.page-Main_Page select,
html body.page-Main_Page [role="button"],
html body.page-Main_Page [role="button"]:hover,
html body.page-Main_Page .cdx-button,
html body.page-Main_Page .cdx-button:hover,
html body.page-Main_Page .vh-card,
html body.page-Main_Page .vh-card:hover,
html body.page-Main_Page .vh-card *,
html body.page-Main_Page .vh-card *:hover,
html body.page-Main_Page .vh-year,
html body.page-Main_Page .vh-year:hover,
html body.page-Main_Page .vector-menu a,
html body.page-Main_Page .vector-menu a:hover,
html body.page-Main_Page .vector-dropdown-label,
html body.page-Main_Page .vector-dropdown-label:hover {
cursor: auto !important;
}
/* 2. CUSTOM GOLDEN CURSOR (MAIN PAGE ONLY) */
body.page-Main_Page #vh-cursor-pointer {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 24px !important;
height: 24px !important;
pointer-events: none !important;
z-index: 99999999 !important;
transform: translate3d(-100px, -100px, 0);
will-change: transform !important;
transition: opacity 0.15s ease !important;
}
body.page-Main_Page #vh-cursor-pointer svg {
width: 100% !important;
height: 100% !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65))
drop-shadow(0 0 6px rgba(223, 173, 62, 0.75)) !important;
transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.25, 1),
filter 0.18s ease !important;
}
/* State 1: Default Golden Arrow */
body.page-Main_Page #vh-cursor-pointer .vh-cursor-arrow {
display: block !important;
}
body.page-Main_Page #vh-cursor-pointer .vh-cursor-hand {
display: none !important;
}
/* State 2: ONLY Above Links -> Golden Pointing Hand */
body.page-Main_Page.vh-cursor-link #vh-cursor-pointer .vh-cursor-arrow {
display: none !important;
}
body.page-Main_Page.vh-cursor-link #vh-cursor-pointer .vh-cursor-hand {
display: block !important;
}
body.page-Main_Page.vh-cursor-link #vh-cursor-pointer svg {
transform: scale(1.12) !important;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75))
drop-shadow(0 0 10px rgba(245, 215, 127, 0.95)) !important;
}
/* Click Compression */
body.page-Main_Page.vh-cursor-click #vh-cursor-pointer svg {
transform: scale(0.88) !important;
}
/* Touchscreens / mobile protection: restore native behavior */
@media (hover: none) or (pointer: coarse) {
html body.page-Main_Page,
html body.page-Main_Page *,
html body.page-Main_Page a,
html body.page-Main_Page button {
cursor: auto !important;
}
body.page-Main_Page #vh-cursor-pointer {
display: none !important;
}
}
/* 3. FOUNDER-ĀCĀRYA PERFECT MACRON CENTERING FIX */
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page .vh-founder-title a,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-sanctuary-sub-1 a {
font-family: 'Noto Serif', 'Cormorant Garamond', Georgia, serif !important;
font-size: 24px !important;
font-weight: 700 !important;
letter-spacing: 0.025em !important;
}
/* ==========================================================================
STEP 92: PERMANENT BOTTOM NAVIGATION BAR STYLING
- Appears on Main Page AND all regular MediaWiki pages.
- Fixed at bottom of screen, permanently visible while scrolling.
- Deep temple teal background (#19383e), delicate gold top hairline border,
warm ivory/gold links, and highlighted Donate button.
========================================================================== */
.vh-bottom-bar {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 38px !important;
background: #19383e !important;
border-top: 1.5px solid rgba(223, 173, 62, 0.45) !important;
box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.35) !important;
z-index: 99990 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
user-select: none !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.vh-bottom-bar-inner {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
max-width: 1200px !important;
width: 100% !important;
padding: 0 16px !important;
overflow-x: auto !important;
white-space: nowrap !important;
scrollbar-width: none !important; /* Firefox */
}
.vh-bottom-bar-inner::-webkit-scrollbar {
display: none !important; /* Chrome/Safari */
}
.vh-bottom-link {
color: #f5d77f !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
letter-spacing: 0.35px !important;
padding: 3px 10px !important;
border-radius: 4px !important;
transition: color 0.18s ease, background-color 0.18s ease, transform 0.15s ease !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
}
.vh-bottom-link:hover {
color: #ffffff !important;
background-color: rgba(245, 215, 127, 0.18) !important;
text-decoration: none !important;
}
.vh-bottom-donate {
background: linear-gradient(135deg, rgba(223, 173, 62, 0.3) 0%, rgba(223, 173, 62, 0.12) 100%) !important;
border: 1px solid rgba(223, 173, 62, 0.65) !important;
color: #fce8a6 !important;
padding: 2.5px 14px !important;
border-radius: 12px !important;
font-weight: 700 !important;
}
.vh-bottom-donate:hover {
background: linear-gradient(135deg, #dfad3e 0%, #b88a38 100%) !important;
color: #150b00 !important;
border-color: #dfad3e !important;
box-shadow: 0 0 10px rgba(223, 173, 62, 0.5) !important;
}
.vh-bottom-sep {
color: rgba(245, 215, 127, 0.35) !important;
font-size: 12px !important;
line-height: 1 !important;
pointer-events: none !important;
}
/* Ensure long wiki pages leave space above the permanent bottom bar */
body {
padding-bottom: 46px !important;
}
/* On Main Page with custom cursor, ensure bottom links trigger the hand cursor */
body.page-Main_Page .vh-bottom-link {
cursor: auto !important;
}
/* ==========================================================================
STEP 93:
1. ELIMINATE RIGHT-SIDE GREEN STRIP ON MAIN PAGE:
- Vector 2022 skin uses a multi-column CSS grid on .mw-page-container-inner
with .vector-column-end having background-color: #D4ECDD !important;.
- Collapse grid to 100% full width and hide right/left columns on Main Page.
- Ensure mw-page-container and mw-content-container match the warm cream background.
2. PREVENT STICKY HEADER FROM APPEARING AT THE BOTTOM OF REGULAR PAGES:
- MediaWiki places .vector-sticky-header-container after the page content.
- Enforce position: fixed !important; top: 0 !important; on sticky header container,
and completely hide it (display: none !important;) when not actively sticky-visible.
3. VANI-TEMPLE RETURN LINK IN PERMANENT BOTTOM BAR:
- Provides an immediate 1-click return to the Main Page from any regular wiki page.
========================================================================== */
/* 1. ELIMINATE RIGHT-SIDE GREEN STRIP ON MAIN PAGE */
body.page-Main_Page .vector-column-end,
body.page-Main_Page .vector-column-start,
body.page-Main_Page .vector-toc-pinned-container,
body.page-Main_Page .vector-appearance-pinned-container,
body.page-Main_Page .vector-sitenotice-container {
display: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
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 {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
background: #f6f2e9 !important;
background-color: #f6f2e9 !important;
grid-template-columns: 1fr !important;
border: none !important;
box-shadow: none !important;
}
/* 2. PREVENT STICKY HEADER FROM APPEARING AT THE BOTTOM OF REGULAR WIKI PAGES */
.vector-sticky-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
}
/* Strictly hide the sticky header container whenever it is NOT in active sticky view */
.vector-sticky-header-container:not(.vector-sticky-header-visible),
.vector-header-container.vector-sticky-header-container:not(.vector-sticky-header-visible) {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* 3. VANI-TEMPLE RETURN LINK STYLING */
.vh-bottom-link.vh-bottom-home {
color: #dfad3e !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
}
.vh-bottom-link.vh-bottom-home:hover {
color: #ffffff !important;
background-color: rgba(223, 173, 62, 0.25) !important;
}
/* ==========================================================================
STEP 95: SMOOTH TRANSITION FOR IN THE MEDIA CARD CONTENT
========================================================================== */
body.page-Main_Page .vh-card-media-item .vh-media-card-content {
transition: opacity .5s ease, transform .5s ease !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-card-content.is-changing {
opacity: 0 !important;
transform: translateY(4px) !important;
}
/* ==========================================================================
STEP 96:
1. INCREASE ROUND HERO IMAGE BY 20% (270px -> 324px) WHILE KEEPING TOP/BOTTOM GAPS
2. INCREASE QUOTED TEXT IN RIGHT ARTICLE SPOTLIGHT BY +3 LINES (7 -> 10 LINES)
========================================================================== */
/* 1. Round hero image increased by 20% to 324px */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 324px !important;
height: 324px !important;
min-width: 324px !important;
min-height: 324px !important;
max-width: 324px !important;
max-height: 324px !important;
border-radius: 50% !important;
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow: 0 12px 36px rgba(18, 63, 56, 0.40), 0 3px 10px rgba(0, 0, 0, 0.24), inset 0 2px 6px rgba(255, 255, 255, 0.75), inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* Ensure top gap from title remains clean (36px) */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-portrait-box {
margin-top: 36px !important;
margin-bottom: 0 !important;
}
/* Ensure bottom gap from round image remains clean (40px) */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-sanctuary-card .vh-card-text.vh-sanctuary-text {
margin-top: 40px !important;
margin-bottom: 0 !important;
}
/* Ensure sanctuary card container height gracefully accommodates 324px image */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page #vani-home .vh-sanctuary-card,
body.page-Main_Page .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page .vh-sanctuary-card {
min-height: 500px !important;
height: auto !important;
}
/* 2. Increase right article quoted text by +3 lines (-webkit-line-clamp: 10) */
body.page-Main_Page #vani-home .vh-card-article .vh-card-text,
body.page-Main_Page .vh-card-article .vh-card-text {
display: -webkit-box !important;
-webkit-line-clamp: 10 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
/* Allow right card to expand gracefully up to 500px to match sanctuary height */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-card-article,
body.page-Main_Page .vh-triad-grid > .vh-card-article {
max-height: 500px !important;
min-height: 275px !important;
height: auto !important;
}
/* Explicit fast and visible 1.4s crossfade for round hero photo */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-photo-stage .vh-photo,
body.page-Main_Page .vh-sanctuary-card .vh-photo-stage .vh-photo {
transition: opacity 1.4s ease-in-out !important;
}
/* ==========================================================================
STEP 97: MOBILE OPTIMIZATION (STAGE 1 - REGULAR WIKI PAGES)
1. Universal #345B63 Dark Teal top bar across all pages and viewports.
2. Desktop title banner strictly scoped to screens >= 1000px.
3. Mobile header layout (burger menu, search, icons).
4. Mobile content readability, fluid images, and responsive table scrolling.
5. Mobile bottom bar and floating Back to Top button positioning.
========================================================================== */
/* 1. UNIVERSAL #345B63 TOP BAR ACROSS ALL PAGES AND VIEWPORTS */
.vector-header-container,
.vector-header,
.mw-header,
#mw-head {
background-color: #345B63 !important;
background: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
/* 2. DESKTOP TITLE BANNER SCOPED STRICTLY TO SCREENS >= 1000px */
@media screen and (max-width: 999px) {
#vanipedia-topbar-title,
#vanipedia-topbar-title-link,
#vanipedia-topbar-center-title {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
}
/* 3. MOBILE REGULAR WIKI PAGES OPTIMIZATIONS (<= 768px) */
@media screen and (max-width: 768px) {
/* 3.1 Top Bar Header Row */
.mw-header {
padding: 0 10px !important;
gap: 8px !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
}
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* 3.2 Hamburger Site Menu Button */
.vector-header-start #vector-main-menu-dropdown {
display: flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
margin: 0 !important;
padding: 0 4px !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-icon {
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
width: 22px !important;
height: 22px !important;
}
/* 3.3 Search Bar: Fluidly fits available space between burger and user tools */
.vector-header-container #p-search,
.mw-header #p-search,
.vector-header-start #p-search {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
max-width: calc(100vw - 110px) !important;
min-width: 100px !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container #searchform,
.mw-header #searchform {
width: 100% !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container .cdx-search-input,
.vector-header-container .vector-search-box-input,
.vector-header-container .cdx-text-input {
width: 100% !important;
max-width: 100% !important;
height: 32px !important;
margin: 0 !important;
}
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
width: 100% !important;
min-width: 80px !important;
height: 32px !important;
font-size: 13.5px !important;
padding-left: 30px !important;
box-sizing: border-box !important;
border-radius: 16px !important;
background-color: #1f3e45 !important;
border: 1px solid rgba(245, 215, 127, 0.45) !important;
color: #ffffff !important;
}
.vector-header-container .cdx-text-input__input:focus,
.vector-header-container input[type="search"]:focus,
#searchInput:focus {
width: 100% !important;
background-color: #173036 !important;
border-color: #f5d77f !important;
}
/* 3.4 Mobile Vector Sidebar Navigation Drawer */
#vector-main-menu-dropdown .vector-dropdown-content,
#vector-main-menu-dropdown-content,
#vector-main-menu-unpinned-container,
#vector-main-menu-dropdown .vector-dropdown-content.is-open {
position: fixed !important;
top: 52px !important;
left: 0 !important;
width: 290px !important;
max-width: 85vw !important;
height: calc(100vh - 52px - 38px) !important;
max-height: calc(100vh - 90px) !important;
overflow-y: auto !important;
background-color: #1f3e45 !important;
border-right: 2px solid #b1873d !important;
box-shadow: 4px 0 18px rgba(0, 0, 0, 0.45) !important;
z-index: 100001 !important;
padding: 10px 0 !important;
}
#vector-main-menu-dropdown .vector-dropdown-content a,
#vector-main-menu-dropdown-content a,
#vector-main-menu-unpinned-container a {
color: #f5d77f !important;
font-size: 14.5px !important;
padding: 9px 18px !important;
display: block !important;
text-decoration: none !important;
border-left: 3px solid transparent !important;
}
#vector-main-menu-dropdown .vector-dropdown-content a:hover,
#vector-main-menu-dropdown-content a:hover,
#vector-main-menu-unpinned-container a:hover {
background-color: #345B63 !important;
color: #ffffff !important;
border-left-color: #f5d77f !important;
}
#vector-main-menu-dropdown .vector-menu-heading,
#vector-main-menu-dropdown-content .vector-menu-heading,
#vector-main-menu-unpinned-container .vector-menu-heading {
color: #fce8a6 !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
border-bottom: 1px solid rgba(245, 215, 127, 0.3) !important;
padding: 10px 18px 6px 18px !important;
margin-top: 8px !important;
}
/* 4. CONTENT VIEW ON MOBILE */
#content, .mw-body, .mw-content-container {
padding: 12px 14px !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
font-size: 15.5px !important;
line-height: 1.62 !important;
}
#firstHeading, .mw-first-heading {
font-size: 1.65em !important;
line-height: 1.25 !important;
margin-bottom: 0.4em !important;
word-wrap: break-word !important;
}
h2, .mw-parser-output h2 {
font-size: 1.3em !important;
line-height: 1.3 !important;
margin-top: 1.1em !important;
margin-bottom: 0.35em !important;
}
h3, .mw-parser-output h3 {
font-size: 1.15em !important;
line-height: 1.3 !important;
}
/* Tables horizontal scroll wrapping */
.vanitable, .wikitable, .daytable {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
margin: 12px 0 !important;
}
.timelinesummary {
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Fluid images & media embeds */
div.tright, div.tleft, div.floatright, div.floatleft {
float: none !important;
margin: 12px auto !important;
max-width: 100% !important;
text-align: center !important;
}
div.thumbinner {
max-width: 100% !important;
width: auto !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
.mw-parser-output img {
max-width: 100% !important;
height: auto !important;
}
/* 5. BOTTOM BAR & BACK TO TOP BUTTON ON MOBILE */
.vh-bottom-bar {
height: 38px !important;
}
.vh-bottom-bar-inner {
gap: 10px !important;
padding: 0 10px !important;
}
.vh-bottom-link {
font-size: 12px !important;
padding: 2px 6px !important;
}
#vanipedia-back-to-top {
bottom: 50px !important;
right: 14px !important;
width: 42px !important;
height: 42px !important;
z-index: 100000 !important;
}
#footer, .mw-footer {
padding-bottom: 54px !important;
}
}
/* ==========================================================================
STEP 105: ROBUST NON-OVERLAPPING MINERVA MOBILE HEADER & USER DROPDOWN
1. Fix Magnifying Glass & User Icon Overlap:
- Header uses strictly rigid flex items:
Burger (32px left) + 20px gap + Title (auto) + [margin-left: auto spacer] + Search (32px right) + 8px gap + User (32px far right).
- Zero possibility of overlap.
2. User Menu Dropdown:
- Placed outside header flow (fixed positioning) with full dark teal & gold styling.
3. Plain burger icon, golden-yellow (#ffd700) SVGs for all icons.
========================================================================== */
/* 1. TOP BAR CONTAINER */
body.skin-minerva .header-container,
body.skin-minerva .header-chrome {
background-color: #345B63 !important;
background: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
box-sizing: border-box !important;
}
/* 2. STRICT RIGID SINGLE-ROW FLEX LAYOUT */
body.skin-minerva .minerva-header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
height: 100% !important;
width: 100% !important;
padding: 0 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
}
/* 2.1 BURGER (FAR LEFT: 32px) */
.minerva-header .navigation-drawer.toggle-list {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.minerva-header #mw-mf-main-menu-button,
.minerva-header .toggle-list__toggle {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.minerva-header .minerva-icon--menu,
.minerva-header #mw-mf-main-menu-button .minerva-icon--menu {
background-color: #f5d77f !important;
opacity: 1 !important;
width: 24px !important;
height: 24px !important;
display: inline-block !important;
}
/* 2.2 SITE TITLE (SPACED 20px FROM BURGER) */
.minerva-header .branding-box {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
margin: 0 0 0 20px !important;
padding: 0 !important;
}
.minerva-header .branding-box a,
.minerva-header .branding-box span {
color: #f5d77f !important;
font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-decoration: none !important;
white-space: nowrap !important;
}
/* 2.3 SEARCH FORM (PUSHED TO THE FAR RIGHT: 32px) */
.minerva-header .minerva-search-form {
margin-left: auto !important; /* Absorbs ALL horizontal space between title and search */
margin-right: 8px !important;
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
/* Hide the large search box input on mobile screens */
.minerva-header .minerva-search-form .search-box {
display: none !important;
}
.minerva-header #searchIcon {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.minerva-header .minerva-icon--search,
.minerva-header #searchIcon .minerva-icon--search {
background-color: #f5d77f !important;
opacity: 1 !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
.minerva-header #searchIcon span:last-child {
display: none !important;
}
/* 2.4 USER ICON (FAR RIGHT: 32px) */
.minerva-header .minerva-user-navigation {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
.minerva-header .minerva-notifications,
.minerva-header .minerva-user-navigation ul,
.minerva-header .minerva-user-navigation li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
}
.minerva-header #ca-mytalks {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.minerva-header .minerva-icon--bellOutline,
.minerva-header #ca-mytalks .minerva-icon--bellOutline {
background-color: #f5d77f !important;
opacity: 1 !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
.minerva-header #ca-mytalks span:last-child {
display: none !important;
}
/* 3. MOBILE USER DROPDOWN MENU (POPUP AT TOP-RIGHT) */
#vanipedia-mobile-user-menu {
display: none !important;
position: fixed !important;
top: 52px !important;
right: 8px !important;
width: 175px !important;
background-color: #1f3e45 !important;
border: 1.5px solid #b1873d !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
padding: 6px 0 !important;
z-index: 999999 !important;
box-sizing: border-box !important;
flex-direction: column !important;
}
#vanipedia-mobile-user-menu.is-open {
display: flex !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-item {
color: #f5d77f !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
text-decoration: none !important;
display: block !important;
line-height: 1.2 !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-item:hover,
#vanipedia-mobile-user-menu a.vani-user-menu-item:active {
background-color: #345B63 !important;
color: #ffffff !important;
}
#vanipedia-mobile-user-menu .vani-user-menu-divider {
height: 1px !important;
background-color: rgba(177, 135, 61, 0.35) !important;
margin: 5px 0 !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-logout {
color: #fca5a5 !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-logout:hover {
background-color: rgba(239, 68, 68, 0.2) !important;
color: #ffffff !important;
}
/* 4. MINERVA NAVIGATION DRAWER (THE LEFT MENU) */
#mw-mf-page-left.navigation-drawer,
#mw-mf-page-left.menu {
background-color: #1f3e45 !important;
border-right: 2px solid #b1873d !important;
box-shadow: 4px 0 18px rgba(0, 0, 0, 0.45) !important;
}
#mw-mf-page-left a.toggle-list-item__anchor {
color: #f5d77f !important;
font-size: 14.5px !important;
}
#mw-mf-page-left a.toggle-list-item__anchor:hover {
background-color: #345B63 !important;
color: #ffffff !important;
}
#mw-mf-page-left .minerva-icon {
background-color: #ffd700 !important;
}
/* ==========================================================================
STEP 107: BULLETPROOF DESKTOP USER DROPDOWN (MATCHING image_a7f3ff.png)
1. Card background: Dark teal (#1f3e45) with gold border (#b1873d).
2. Zero white background bleed: all inner elements transparent.
3. Links: High-contrast warm gold (#f5d77f) text, white on hover (#345B63).
4. Pure clean text without clunky icons: .vector-icon hidden.
5. Divider above Log out with soft rose highlight.
========================================================================== */
/* 1. DESKTOP USER DROPDOWN CARD */
html #vector-user-links-dropdown .vector-dropdown-content,
html .vector-user-menu .vector-dropdown-content,
html body.page-Main_Page #vector-user-links-dropdown .vector-dropdown-content,
html body #p-personal.vector-menu,
html body #p-personal .vector-menu-content,
#vector-user-links-dropdown-content {
background: #1f3e45 !important;
background-color: #1f3e45 !important;
border: 1.5px solid #b1873d !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
padding: 6px 0 !important;
min-width: 175px !important;
width: 180px !important;
box-sizing: border-box !important;
}
/* 2. INNER CONTAINERS: 100% TRANSPARENT */
html #vector-user-links-dropdown .vector-dropdown-content div,
html #vector-user-links-dropdown .vector-dropdown-content ul,
html #vector-user-links-dropdown .vector-dropdown-content li,
html #vector-user-links-dropdown .vector-dropdown-content .vector-menu-content,
html #vector-user-links-dropdown .vector-dropdown-content .vector-menu-content-list,
html .vector-user-menu .vector-dropdown-content div,
html .vector-user-menu .vector-dropdown-content ul,
html .vector-user-menu .vector-dropdown-content li {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* 3. ENSURE TALK (pt-mytalk) IS VISIBLE */
html #vector-user-links-dropdown #pt-mytalk,
html .vector-user-menu #pt-mytalk {
display: block !important;
visibility: visible !important;
}
/* 4. RESTORE USER FIGURE ICON ON HEADER BUTTON (BRIGHT GOLD & VISIBLE) */
#vector-user-links-dropdown-label .vector-icon,
#vector-user-links-dropdown .vector-dropdown-label .vector-icon,
.vector-user-menu .vector-dropdown-label .vector-icon,
.vector-header-end #vector-user-links-dropdown .vector-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
color: #f5d77f !important;
fill: #f5d77f !important;
background-color: #f5d77f !important;
margin-right: 4px !important;
vertical-align: middle !important;
}
/* Inside dropdown items: keep icons compact & inline so they never cause vertical bloating */
#vector-user-links-dropdown .vector-dropdown-content .vector-icon,
.vector-user-menu .vector-dropdown-content .vector-icon {
display: inline-block !important;
width: 16px !important;
height: 16px !important;
margin: 0 8px 0 0 !important;
padding: 0 !important;
color: #f5d77f !important;
fill: #f5d77f !important;
background-color: #f5d77f !important;
vertical-align: middle !important;
}
/* 5. LINKS: HIGH-CONTRAST WARM GOLD TEXT (#f5d77f) */
html #vector-user-links-dropdown .vector-dropdown-content a,
html .vector-user-menu .vector-dropdown-content a,
html #p-personal .vector-menu-content a {
display: flex !important;
align-items: center !important;
color: #f5d77f !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
line-height: 1.2 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
text-decoration: none !important;
box-sizing: border-box !important;
width: 100% !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
html #vector-user-links-dropdown .vector-dropdown-content a span,
html .vector-user-menu .vector-dropdown-content a span,
html #p-personal .vector-menu-content a span {
color: #f5d77f !important;
font-size: 15px !important;
font-weight: 500 !important;
display: inline !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* 6. HOVER STATE: LIGHTER TEAL (#345B63) WITH BRIGHT WHITE TEXT */
html #vector-user-links-dropdown .vector-dropdown-content a:hover,
html #vector-user-links-dropdown .vector-dropdown-content a:focus,
html #vector-user-links-dropdown .vector-dropdown-content a:active,
html .vector-user-menu .vector-dropdown-content a:hover,
html .vector-user-menu .vector-dropdown-content a:focus,
html .vector-user-menu .vector-dropdown-content a:active {
background-color: #345B63 !important;
color: #ffffff !important;
text-decoration: none !important;
}
html #vector-user-links-dropdown .vector-dropdown-content a:hover span,
html .vector-user-menu .vector-dropdown-content a:hover span {
color: #ffffff !important;
}
/* 7. DIVIDER ABOVE LOGOUT */
html #vector-user-links-dropdown #pt-logout,
html .vector-user-menu #pt-logout {
border-top: 1px solid rgba(177, 135, 61, 0.35) !important;
margin-top: 6px !important;
padding-top: 4px !important;
}
html #vector-user-links-dropdown #pt-logout a,
html .vector-user-menu #pt-logout a {
color: #fca5a5 !important;
}
html #vector-user-links-dropdown #pt-logout a:hover,
html .vector-user-menu #pt-logout a:hover {
background-color: rgba(239, 68, 68, 0.25) !important;
color: #ffffff !important;
}
/* ==========================================================================
STEP 110: MOBILE STICKY TOP BAR & BOTTOM BAR FIRST LINK ("MAIN PAGE")
1. Top bar remains sticky/visible when scrolling down on mobile viewports.
2. Fix bottom bar flex centering bug: justify-content: flex-start on mobile
ensures the first link ("Main Page") is always visible and not clipped.
3. Fully reverted experimental Main Page viewport scaling & hint banners.
========================================================================== */
/* 1. STICKY TOP BAR ON MOBILE (REMAINS VISIBLE ON SCROLL) */
body.skin-minerva .header-container,
body.skin-minerva .header-chrome,
body.skin-minerva header {
position: sticky !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
}
/* 2. BOTTOM BAR: ENSURE "MAIN PAGE" IS VISIBLE AS FIRST LINK ON MOBILE */
@media screen and (max-width: 768px) {
.vh-bottom-bar-inner {
justify-content: flex-start !important;
padding: 0 14px !important;
gap: 10px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.vh-bottom-link.vh-bottom-home {
display: inline-flex !important;
flex-shrink: 0 !important;
}
}
/* ==========================================================================
ENTRY PAGE SUPPRESSION (dev.vanipedia.org / VanipediaEntry3D)
Neither top bar nor bottom bar must appear on the 3D entry page.
========================================================================== */
body.ext-vp3d-fullscreen #vh-bottom-bar,
body.ext-vp3d-fullscreen .header-container,
body.ext-vp3d-fullscreen .header-chrome,
body.ext-vp3d-fullscreen .minerva-header,
body.ext-vp3d-fullscreen .vector-header-container,
body.ext-vp3d-fullscreen #mw-head,
body.ext-vp3d-fullscreen .mw-header,
body.ext-vp3d-fullscreen #mw-navigation,
body:has(.vp-entry3d-container) #vh-bottom-bar,
body:has(.vp-entry3d-container) .header-container,
body:has(.vp-entry3d-container) .header-chrome,
body:has(.vp-entry3d-container) .minerva-header,
body:has(.vp-entry3d-container) .vector-header-container,
body:has(.vp-entry3d-wrapper) #vh-bottom-bar,
body:has(.vp-entry3d-wrapper) .header-container,
body:has(.vp-entry3d-wrapper) .header-chrome,
body:has(.vp-entry3d-wrapper) .minerva-header,
body:has(.vp-entry3d-wrapper) .vector-header-container {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================================
STEP 116: UNIFIED 3-SLOT ROTATED LANDSCAPE STAGE FOR MAIN PAGE ON MOBILE
Includes Top Bar, Main Page, and Bottom Bar in one unified landscape orientation.
========================================================================== */
#vani-mobile-stage {
position: fixed !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
overflow: hidden !important;
z-index: 999999 !important;
background-color: #f6f2e9 !important;
margin: 0 !important;
padding: 0 !important;
}
#vani-rotated-box {
position: absolute !important;
top: 0 !important;
left: 0 !important;
transform-origin: top left !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
background-color: #f6f2e9 !important;
margin: 0 !important;
padding: 0 !important;
}
#vani-rotated-box.is-auto-landscape {
transform: rotate(90deg) translate(0, -100%) !important;
}
#vani-rotated-box.is-native-landscape {
transform: none !important;
}
/* 1. TOP HEADER SLOT (Landscape orientation) */
#vani-stage-header-slot {
flex: 0 0 50px !important;
width: 100% !important;
height: 50px !important;
max-height: 50px !important;
min-height: 50px !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
z-index: 1000 !important;
overflow: visible !important;
position: relative !important;
box-sizing: border-box !important;
}
#vani-stage-header-slot .header-container,
#vani-stage-header-slot .header-chrome,
#vani-stage-header-slot .minerva-header,
#vani-stage-header-slot .vector-header-container,
#vani-stage-header-slot #mw-head {
position: static !important;
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 12px !important;
box-shadow: none !important;
border: none !important;
background-color: #345B63 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
/* 2. CONTENT SLOT (Landscape orientation, containing #vani-home) */
#vani-stage-content-slot {
flex: 1 1 auto !important;
width: 100% !important;
height: calc(100% - 50px - 36px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
position: relative !important;
background-color: #f6f2e9 !important;
}
/* Enforce rigid 1200px desktop grid on #vani-home inside mobile stage */
#vani-stage-content-slot #vani-home {
width: 1200px !important;
min-width: 1200px !important;
max-width: 1200px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 8px 16px 20px 16px !important;
margin: 0 !important;
background-color: #f6f2e9 !important;
}
/* Hero Triad in Mobile Landscape: Rigid 3-Column Horizontal Flow */
#vani-stage-content-slot .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
gap: 16px !important;
flex-wrap: nowrap !important;
height: auto !important;
min-height: 250px !important;
}
#vani-stage-content-slot .vh-triad-column-left {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
#vani-stage-content-slot .vh-card-memories,
#vani-stage-content-slot .vh-card-media-item {
flex: 0 0 auto !important;
height: auto !important;
}
#vani-stage-content-slot .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
text-align: center !important;
}
#vani-stage-content-slot .vh-photo-stage {
width: 200px !important;
height: 200px !important;
margin: 0 auto !important;
}
#vani-stage-content-slot .vh-card-text.vh-sanctuary-text {
margin-top: 10px !important;
}
#vani-stage-content-slot .vh-card-article {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
height: auto !important;
}
/* Interactive Timeline in Mobile Landscape */
#vani-stage-content-slot .vh-timeline-section {
width: 100% !important;
max-width: 100% !important;
margin: 6px 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
flex: 0 0 auto !important;
height: auto !important;
}
/* Thematic Taxonomy in Mobile Landscape: Rigid 4-Column Grid */
#vani-stage-content-slot .vh-taxonomy-section {
width: 100% !important;
transform: none !important;
margin: 6px 0 !important;
}
#vani-stage-content-slot .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
width: 100% !important;
}
#vani-stage-content-slot .vh-card-tax {
height: auto !important;
min-height: 105px !important;
}
/* 3. FOOTER SLOT (Landscape orientation, containing #vh-bottom-bar) */
#vani-stage-footer-slot {
flex: 0 0 36px !important;
width: 100% !important;
height: 36px !important;
max-height: 36px !important;
min-height: 36px !important;
background-color: #19383e !important;
border-top: 1.5px solid #b1873d !important;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
z-index: 99990 !important;
overflow: hidden !important;
position: relative !important;
box-sizing: border-box !important;
}
#vani-stage-footer-slot #vh-bottom-bar,
#vani-stage-footer-slot .vh-bottom-bar {
position: static !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
background-color: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#vani-stage-footer-slot .vh-bottom-bar-inner {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
gap: 14px !important;
padding: 0 16px !important;
}
/* Dropdown Menu inside Stage Header */
#vani-stage-header-slot #vanipedia-mobile-user-menu {
position: absolute !important;
top: 48px !important;
right: 8px !important;
z-index: 1000000 !important;
}
/* Minerva Left Navigation Drawer z-index when open */
#mw-mf-page-left.navigation-drawer {
z-index: 1000005 !important;
}
/* Robust Header Child Layout in Landscape Stage */
#vani-stage-header-slot .vector-header,
#vani-stage-header-slot .mw-header {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 12px !important;
box-sizing: border-box !important;
}
#vani-stage-header-slot .vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
flex: 1 1 auto !important;
}
#vani-stage-header-slot .vector-header-end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
flex: 0 0 auto !important;
}
/* Hide any duplicate/stray bars outside the stage when active */
body.has-vani-stage > .vector-header-container,
body.has-vani-stage > .vector-sticky-header-container,
body.has-vani-stage > #mw-head,
body.has-vani-stage > #vh-bottom-bar {
display: none !important;
}
/* ==========================================================================
STEP 119: EXACT DESKTOP SIDEBAR FORMATTING FOR MOBILE BURGER MENU
1. Cleans out Minerva default clutter (Nearby, Random, Settings, About, etc.)
2. Styles the mobile drawer (#mw-mf-page-left) to match the desktop
accordion layout (.vanipedia-sidebar-menu).
========================================================================== */
#mw-mf-page-left {
background-color: #f6f2e9 !important;
border-right: 2px solid #b1873d !important;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.45) !important;
padding: 12px 10px !important;
box-sizing: border-box !important;
width: 290px !important;
max-width: 85vw !important;
}
/* Hide all Minerva default lists completely */
#mw-mf-page-left > ul#p-navigation,
#mw-mf-page-left > ul#p-personal,
#mw-mf-page-left > ul.hlist,
#mw-mf-page-left .menu__item--nearby,
#mw-mf-page-left .menu__item--random {
display: none !important;
}
/* Mobile drawer container for desktop sidebar */
#mw-mf-page-left #vani-mobile-synced-sidebar {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* In mobile drawer, make .vanipedia-sidebar-menu take full drawer width */
#mw-mf-page-left .vanipedia-sidebar-menu {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 6px !important;
}
/* Ensure mobile drawer accordion header matches desktop */
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading {
cursor: pointer !important;
background-color: #2c4c50 !important;
border: 1px solid #1b3033 !important;
border-radius: 4px !important;
margin-bottom: 4px !important;
padding: 10px 14px !important;
font-weight: 600 !important;
font-size: 14px !important;
color: #ffffff !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu:not(.vanipedia-collapsed) .vector-menu-heading {
border-radius: 4px 4px 0 0 !important;
margin-bottom: 0 !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading:hover {
background-color: #385e63 !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading::after {
content: "▼" !important;
font-size: 0.75em !important;
color: #ffffff !important;
transition: transform 0.2s ease !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-heading::after {
transform: rotate(-90deg) !important;
}
/* Content Area inside Mobile Accordion */
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content {
background-color: #eaeff0 !important;
border: 1px solid #2c4c50 !important;
border-top: none !important;
border-radius: 0 0 4px 4px !important;
padding: 0 0 4px 0 !important;
margin-bottom: 6px !important;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
box-sizing: border-box !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-content {
display: none !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li a {
display: block !important;
padding: 9px 14px 9px 18px !important;
color: #1b3033 !important;
font-size: 14px !important;
text-decoration: none !important;
border-left: 3px solid transparent !important;
border-bottom: 1px solid rgba(44, 76, 80, 0.1) !important;
transition: all 0.15s ease !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li:last-child a {
border-bottom: none !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li a:hover {
background-color: #dbe4e6 !important;
border-left: 3px solid #2c4c50 !important;
color: #000000 !important;
}
/* 102 Languages Search box inside Mobile Drawer */
#mw-mf-page-left #sidebarLanguageSearch {
width: 100% !important;
box-sizing: border-box !important;
padding: 7px 10px !important;
font-size: 14px !important;
border: 1px solid #a2a9b1 !important;
border-radius: 3px !important;
background-color: #ffffff !important;
color: #1a1a1a !important;
margin-bottom: 4px !important;
}
/* ==========================================================================
STEP 122: STRICT POSITIONING OF "HOME" LINK/ICON (RIGHT OF SEARCH)
1. Desktop: Positioned strictly on the RIGHT of search bar via order: 10 vs order: 5.
2. Clean golden styling (#f5d77f), no underline, subtle hover highlight.
3. Mobile (both Minerva & Vector landscape): Golden Home icon (width 22px)
strictly visible next to the search icon.
========================================================================== */
/* Strict Flex Ordering: Left to Right across .vector-header-start */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.vector-header-start .vector-main-menu-landmark,
.vector-header-start #vector-main-menu-dropdown {
order: 1 !important;
}
.vector-header-start .mw-logo {
order: 2 !important;
display: none !important;
}
/* Search Bar strictly ORDER 5 */
.vector-header-start #p-search,
.vector-header-container #p-search,
.mw-header #p-search,
div#p-search {
order: 5 !important;
margin-right: 0 !important;
}
/* Home Link strictly ORDER 10 (GUARANTEES IT SITS ON THE RIGHT OF SEARCH) */
.vector-header-start #vanipedia-topbar-home-link,
.vector-header-container #vanipedia-topbar-home-link,
#vanipedia-topbar-home-link,
a.vanipedia-topbar-home {
order: 10 !important;
margin-left: 10px !important;
margin-right: 14px !important;
color: #f5d77f !important;
text-decoration: none !important;
text-decoration-line: none !important;
border: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14.5px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 5px 10px !important;
border-radius: 4px !important;
background: transparent !important;
background-color: transparent !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
flex-shrink: 0 !important;
line-height: 1 !important;
visibility: visible !important;
opacity: 1 !important;
}
a.vanipedia-topbar-home:hover,
a.vanipedia-topbar-home:active,
.vector-header-container a.vanipedia-topbar-home:hover,
.vector-header-container #vanipedia-topbar-home-link:hover,
.minerva-header a.vanipedia-topbar-home:hover,
#vani-stage-header-slot a.vanipedia-topbar-home:hover {
color: #ffffff !important;
background-color: rgba(245, 215, 127, 0.2) !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
transform: translateY(-1px) !important;
}
/* Home Icon Styling */
.vanipedia-topbar-home .vanipedia-home-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
.vanipedia-topbar-home .vanipedia-home-icon svg {
width: 18px !important;
height: 18px !important;
stroke: #f5d77f !important;
fill: none !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
transition: stroke 0.2s ease, transform 0.2s ease !important;
display: inline-block !important;
vertical-align: middle !important;
}
.vanipedia-topbar-home:hover .vanipedia-home-icon svg {
stroke: #ffffff !important;
transform: scale(1.1) !important;
}
/* Home Text Styling on Desktop */
.vanipedia-topbar-home .vanipedia-home-text {
display: inline-block !important;
line-height: 1 !important;
text-decoration: none !important;
}
/* MOBILE RESPONSIVE (Both Vector & Minerva) */
@media screen and (max-width: 900px) {
.vector-header-start #p-search,
.vector-header-container #p-search,
.mw-header #p-search {
flex: 1 1 auto !important;
max-width: calc(100vw - 160px) !important;
}
.vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
.vector-header-start #vanipedia-topbar-home-link,
.vector-header-container #vanipedia-topbar-home-link,
#vanipedia-topbar-home-link,
a.vanipedia-topbar-home {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
margin: 0 4px !important;
border-radius: 50% !important;
order: 10 !important;
}
.vanipedia-topbar-home .vanipedia-home-icon svg {
width: 20px !important;
height: 20px !important;
}
}
/* MINERVA MOBILE SKIN HEADER (Regular Articles on Mobile) */
.minerva-header .vanipedia-topbar-home,
.minerva-header #vanipedia-topbar-home-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 6px !important;
padding: 0 !important;
z-index: 1000 !important;
border-radius: 50% !important;
}
.minerva-header .vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
.minerva-header .vanipedia-topbar-home .vanipedia-home-icon svg {
width: 20px !important;
height: 20px !important;
}
/* In Rotated Landscape Stage on Main Page */
#vani-stage-header-slot .vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
#vani-stage-header-slot .vanipedia-topbar-home {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
padding: 0 !important;
margin: 0 8px !important;
width: 34px !important;
height: 34px !important;
box-sizing: border-box !important;
order: 10 !important;
}
#vani-stage-header-slot .vanipedia-topbar-home .vanipedia-home-icon svg {
width: 20px !important;
height: 20px !important;
}
#vani-stage-header-slot .vector-header-start #p-search {
order: 5 !important;
}
/* Bottom Bar Home Link: Strict no underline */
.vh-bottom-link.vh-bottom-entry,
a.vh-bottom-link {
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
}
.vh-bottom-link.vh-bottom-entry:hover,
a.vh-bottom-link:hover {
text-decoration: none !important;
text-decoration-line: none !important;
}
/* ==========================================================================
STEP 129: RESTORE COMPLETE ORIGINAL STRUCTURE (ZERO OVERLAPS, 4 TAXONOMY IN 1 ROW)
+ TOP BANNER TITLE AS PLAIN TEXT
+ WHO IS ŚRĪLA PRABHUPĀDA PERMANENT TITLE
+ OPTION A: RICH BURNISHED ANTIQUE GOLD (#966817)
+ RISE HOVER EFFECT ON ALL 9 CARD TITLES
========================================================================== */
/* 1. TOP BANNER TITLE AS PURE PLAIN TEXT */
#vanipedia-topbar-title,
span#vanipedia-topbar-title,
a#vanipedia-topbar-title {
pointer-events: none !important;
cursor: default !important;
user-select: text !important;
text-decoration: none !important;
}
#vanipedia-topbar-title:hover,
span#vanipedia-topbar-title:hover,
a#vanipedia-topbar-title:hover {
color: #f5d77f !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
cursor: default !important;
transform: translate(-50%, -50%) !important;
}
/* 2. SANCTUARY CARD TITLE SIZING & NO TEXT CHANGE */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a {
font-size: 38px !important;
line-height: 1.15 !important;
letter-spacing: 0.015em !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
white-space: nowrap !important;
}
body.page-Main_Page .vh-sanctuary-title a .vh-title-hover {
display: none !important;
}
body.page-Main_Page .vh-sanctuary-title a .vh-title-default {
opacity: 1 !important;
transform: none !important;
}
/* 3. OPTION A: RICH BURNISHED ANTIQUE GOLD ON ALL CARD TITLES */
body.page-Main_Page .vh-card-title,
body.page-Main_Page .vh-card-title a,
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a,
body.page-Main_Page .vh-card-article .vh-card-title,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title,
body.page-Main_Page .vh-random-article-title a,
body.page-Main_Page .vh-card-memories .vh-card-title,
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-media-item .vh-card-title,
body.page-Main_Page .vh-card-media-item .vh-card-title a,
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page-Main_Page .vh-media-title,
body.page-Main_Page .vh-media-title a,
body.page-Main_Page .vh-founder-title,
body.page-Main_Page .vh-founder-title a,
body.page-Main_Page #vani-home .vh-founder-title,
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a,
#vani-stage-content-slot .vh-card-title a,
#vani-stage-content-slot .vh-sanctuary-title a {
color: #966817 !important;
-webkit-text-fill-color: #966817 !important;
-webkit-text-stroke: 0 !important;
paint-order: normal !important;
text-shadow: none !important;
-webkit-filter: none !important;
filter: none !important;
display: inline-block !important;
position: relative !important;
cursor: pointer !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
color 0.2s ease,
-webkit-text-fill-color 0.2s ease !important;
}
/* 4. RISE HOVER EFFECT ON ALL 9 CARD TITLES (-3px LIFT + GOLD ILLUMINATION) */
body.page-Main_Page #vani-home .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-article .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a:hover,
body.page-Main_Page #vani-home .vh-founder-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-media-item .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-body > .vh-card-title a:hover,
body.page-Main_Page .vh-card-title a:hover,
body.page-Main_Page .vh-card-article .vh-card-title a:hover,
body.page-Main_Page .vh-sanctuary-title a:hover,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a:hover,
body.page-Main_Page .vh-founder-title a:hover,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page .vh-card-media-item .vh-card-title a:hover,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover,
#vani-stage-content-slot .vh-card-title a:hover,
#vani-stage-content-slot .vh-sanctuary-title a:hover,
#vani-stage-content-slot .vh-founder-title a:hover {
transform: translateY(-3px) !important;
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: none !important;
}
/* 5. GOLDEN FILAMENT UNDERLINE AT REST & GLIDE ON HOVER */
body.page-Main_Page .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-title a::after,
body.page-Main_Page .vh-card-article .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-article .vh-card-title a::after,
body.page-Main_Page .vh-sanctuary-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a::after,
body.page-Main_Page .vh-founder-title a::after,
body.page-Main_Page #vani-home .vh-founder-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a::after,
body.page-Main_Page .vh-card-memories .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a::after,
body.page-Main_Page .vh-card-media-item .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-media-item .vh-card-title a::after,
body.page-Main_Page .vh-media-title a::after,
body.page-Main_Page .vh-card-tax .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a::after,
body.page-Main_Page .vh-card-tax .vh-card-body > .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-body > .vh-card-title a::after,
#vani-stage-content-slot .vh-card-title a::after,
#vani-stage-content-slot .vh-sanctuary-title a::after,
#vani-stage-content-slot .vh-founder-title a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 6px rgba(181, 130, 36, 0.65) !important;
border-radius: 2px !important;
pointer-events: none !important;
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.2s ease !important;
}
body.page-Main_Page #vani-home .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-article .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a:hover::after,
body.page-Main_Page #vani-home .vh-founder-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover::after,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-media-item .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-body > .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-article .vh-card-title a:hover::after,
body.page-Main_Page .vh-sanctuary-title a:hover::after,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a:hover::after,
body.page-Main_Page .vh-founder-title a:hover::after,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-media-item .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover::after,
#vani-stage-content-slot .vh-card-title a:hover::after,
#vani-stage-content-slot .vh-sanctuary-title a:hover::after,
#vani-stage-content-slot .vh-founder-title a:hover::after {
animation: none !important;
opacity: 1 !important;
width: 90% !important;
left: 5% !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(181, 130, 36, 0.75) !important;
}
/* 6. STRICT STRUCTURAL RESTORATION: CLEAN ELEVATION & COLUMN BALANCING */
/* Introductory Articles flat title styling & hover */
body.page-Main_Page #vani-home .vh-intro-articles-title,
body.page-Main_Page #vani-home .vh-intro-articles-title a,
body.page-Main_Page .vh-intro-articles-title,
body.page-Main_Page .vh-intro-articles-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 24px !important;
font-weight: 700 !important;
color: #966817 !important;
-webkit-text-fill-color: #966817 !important;
text-shadow: none !important;
letter-spacing: 0.025em !important;
line-height: 1.2 !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 5px !important;
margin: 0 0 4px 0 !important;
cursor: pointer !important;
text-align: center !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
color 0.2s ease,
-webkit-text-fill-color 0.2s ease !important;
}
body.page-Main_Page #vani-home .vh-intro-articles-title a:hover,
body.page-Main_Page .vh-intro-articles-title a:hover {
transform: translateY(-3px) !important;
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: none !important;
}
body.page-Main_Page #vani-home .vh-intro-articles-title a::after,
body.page-Main_Page .vh-intro-articles-title a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 6px rgba(181, 130, 36, 0.65) !important;
border-radius: 2px !important;
pointer-events: none !important;
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.2s ease !important;
}
body.page-Main_Page #vani-home .vh-intro-articles-title a:hover::after,
body.page-Main_Page .vh-intro-articles-title a:hover::after {
animation: none !important;
opacity: 1 !important;
width: 90% !important;
left: 5% !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(181, 130, 36, 0.75) !important;
}
/* Specific article item headline within the spotlight card */
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-article-item-title,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-article-item-title a,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-card-title,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-card-title a,
body.page-Main_Page .vh-card-article #vh-random-article .vh-article-item-title,
body.page-Main_Page .vh-card-article #vh-random-article .vh-article-item-title a,
body.page-Main_Page .vh-card-article #vh-random-article .vh-card-title,
body.page-Main_Page .vh-card-article #vh-random-article .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
display: block !important;
margin-top: 2px !important;
margin-bottom: 4px !important;
text-align: center !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-article-item-title a:hover,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-card-title a:hover,
body.page-Main_Page .vh-card-article #vh-random-article .vh-article-item-title a:hover,
body.page-Main_Page .vh-card-article #vh-random-article .vh-card-title a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
/* Devotee Subtitle in Memories card */
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a,
body.page-Main_Page .vh-memory-devotee-subtitle,
body.page-Main_Page .vh-memory-devotee-subtitle a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 17.5px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
display: block !important;
margin-top: 2px !important;
margin-bottom: 5px !important;
text-align: center !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page .vh-memory-devotee-subtitle a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
@media screen and (min-width: 901px) {
/* Enforce 3 columns on desktop for Section 3 (Personalities, Names, Places) */
body.page-Main_Page #vani-home .vh-taxonomy-grid,
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 90px !important;
max-height: 130px !important;
}
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a,
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page-Main_Page #vani-home .vh-card-questions .vh-card-title,
body.page-Main_Page #vani-home .vh-card-questions .vh-card-title a,
body.page-Main_Page .vh-card-questions .vh-card-title,
body.page-Main_Page .vh-card-questions .vh-card-title a {
font-size: 21px !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
body.page-Main_Page #vani-home .vh-card-tax,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page #vani-home .vh-card-questions,
body.page-Main_Page .vh-card-questions {
padding: 2px 10px 4px 10px !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-tax .vh-card-text,
body.page-Main_Page .vh-card-tax .vh-card-text,
body.page-Main_Page #vani-home .vh-card-questions .vh-card-text,
body.page-Main_Page .vh-card-questions .vh-card-text {
font-size: 13px !important;
line-height: 1.35 !important;
margin-top: 2px !important;
}
/* Lift 3 bottom taxonomy cards up so they sit comfortably above the footer */
body.page-Main_Page #vani-home .vh-taxonomy-section,
body.page-Main_Page .vh-taxonomy-section {
transform: translateY(-72px) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
height: auto !important;
min-height: 95px !important;
max-height: 120px !important;
position: relative !important;
z-index: 2 !important;
}
/* Founder-Ācārya and Preeminent Śikṣā-Guru single line fitting */
body.page-Main_Page #vani-home .vh-founder-title,
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page .vh-founder-title,
body.page-Main_Page .vh-founder-title a {
font-size: 21px !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-sub-2,
body.page-Main_Page .vh-sanctuary-sub-2 {
font-size: 17.5px !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
/* SHIFT MARKED SECTION (Hero Triad + Timeline) DOWN EXACTLY 30px */
body.page-Main_Page #vani-home .vh-triad-grid,
body.page-Main_Page .vh-triad-grid {
transform: translateY(30px) !important;
height: auto !important;
min-height: 380px !important;
max-height: 420px !important;
align-items: flex-start !important;
margin-bottom: 8px !important;
}
body.page-Main_Page #vani-home .vh-timeline-section,
body.page-Main_Page .vh-timeline-section {
transform: translateY(30px) !important;
position: relative !important;
margin-top: 16px !important;
margin-bottom: 10px !important;
height: 125px !important;
min-height: 125px !important;
max-height: 125px !important;
flex: 0 0 125px !important;
}
/* Left & Right Stacked Columns: Symmetrical 340px widths */
body.page-Main_Page #vani-home .vh-triad-column-left,
body.page-Main_Page .vh-triad-column-left,
body.page-Main_Page #vani-home .vh-triad-column-right,
body.page-Main_Page .vh-triad-column-right,
body.page-Main_Page #vani-home .vh-triad-column-stacked,
body.page-Main_Page .vh-triad-column-stacked {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 14px !important;
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 0 !important;
max-height: 420px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Card padding and bounding inside both columns */
body.page-Main_Page #vani-home .vh-triad-column-stacked .vh-card,
body.page-Main_Page .vh-triad-column-stacked .vh-card,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card,
body.page-Main_Page .vh-triad-column-left .vh-card,
body.page-Main_Page #vani-home .vh-triad-column-right .vh-card,
body.page-Main_Page .vh-triad-column-right .vh-card,
body.page-Main_Page #vani-home .vh-card-article,
body.page-Main_Page #vani-home .vh-card-questions,
body.page-Main_Page #vani-home .vh-card-memories,
body.page-Main_Page #vani-home .vh-card-media-item {
flex: 0 0 auto !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 4px 10px !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
height: 135px !important;
min-height: 135px !important;
max-height: 135px !important;
}
}
/* ==========================================================================
STEP 139: DISCIPLES REMEMBER ŚRĪLA PRABHUPĀDA TWO-LINE TITLE & DEVOTEE NAME
========================================================================== */
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title,
body.page-Main_Page .vh-card-memories .vh-card-title {
margin: 0 0 2px 0 !important;
text-align: center !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-memories .vh-card-title a {
display: inline-block !important;
line-height: 1.05 !important;
text-align: center !important;
padding-bottom: 5px !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-title-line,
body.page-Main_Page .vh-card-memories .vh-title-line {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle {
margin-top: 2px !important;
margin-bottom: 2px !important;
text-align: center !important;
display: block !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
text-decoration: none !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-text {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
margin-top: 2px !important;
margin-bottom: 0 !important;
text-align: center !important;
}
/* ==========================================================================
STEP 141: STATIC TITLE ON MEMORIES ROTATION + 3-LINE WIDER LANGUAGES CARD
========================================================================== */
/* 1. DISCIPLES REMEMBER ŚRĪLA PRABHUPĀDA TITLE: 100% STATIC (NEVER ANIMATES ON ROTATION) */
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-memories .vh-card-title,
body.page-Main_Page .vh-card-memories .vh-card-title a {
opacity: 1 !important;
transform: none !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
color 0.2s ease,
-webkit-text-fill-color 0.2s ease !important;
margin: 0 0 2px 0 !important;
text-align: center !important;
padding: 0 0 5px 0 !important;
display: inline-block !important;
line-height: 1.05 !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover {
transform: translateY(-3px) !important;
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: none !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-title-line,
body.page-Main_Page .vh-card-memories .vh-title-line {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
/* Transition ONLY the disciple name subtitle during randomizer */
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle {
margin-top: 2px !important;
margin-bottom: 2px !important;
text-align: center !important;
display: block !important;
transition: opacity 0.45s ease, transform 0.45s ease !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle.is-changing,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle.is-changing {
opacity: 0 !important;
transform: translateY(3px) !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
text-decoration: none !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-text {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
margin-top: 2px !important;
margin-bottom: 0 !important;
text-align: center !important;
}
/* 2. SP IN MEDIA: FRAME FITS EXACTLY AROUND THUMBNAIL WITH ZERO SIDE GAPS */
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-card-content,
body.page-Main_Page .vh-card-media-item .vh-media-card-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: 135px !important;
margin: 0 auto 6px auto !important;
padding: 0 !important;
border-radius: 6px !important;
overflow: hidden !important;
background: transparent !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(177, 135, 61, 0.45) !important;
line-height: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb a,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb a {
display: inline-block !important;
width: auto !important;
height: auto !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb img {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: 130px !important;
max-height: 130px !important;
object-fit: contain !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
transition: transform 0.35s ease !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb:hover img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.03) !important;
}
/* 3. SECTION 3: 4 COLUMNS WITH WIDER COLUMN FOR PARTICIPATING LANGUAGES */
@media screen and (min-width: 901px) {
body.page-Main_Page #vani-home .vh-taxonomy-grid,
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr 1.35fr !important;
gap: 16px !important;
width: 100% !important;
max-width: 1220px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 90px !important;
max-height: 130px !important;
}
body.page-Main_Page #vani-home .vh-card-tax,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page #vani-home .vh-card-languages,
body.page-Main_Page .vh-card-languages {
padding: 3px 8px 5px 8px !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a,
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page-Main_Page #vani-home .vh-card-languages .vh-card-title,
body.page-Main_Page #vani-home .vh-card-languages .vh-card-title a,
body.page-Main_Page .vh-card-languages .vh-card-title,
body.page-Main_Page .vh-card-languages .vh-card-title a {
font-size: 20px !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
}
/* 4. LANGUAGES CARD: EXACTLY 3 ROWS (5 COUNTRIES PER ROW) */
body.page-Main_Page #vani-home .vh-card-languages .vh-languages-list,
body.page-Main_Page .vh-card-languages .vh-languages-list {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 3px !important;
padding: 2px 0 0 0 !important;
margin: 0 !important;
width: 100% !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-row,
body.page-Main_Page .vh-card-languages .vh-lang-row {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
white-space: nowrap !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-item,
body.page-Main_Page .vh-card-languages .vh-lang-item {
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11px !important;
line-height: 1.25 !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-item a,
body.page-Main_Page .vh-card-languages .vh-lang-item a {
color: #2c3e42 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
transition: color 0.15s ease !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-item a:hover,
body.page-Main_Page .vh-card-languages .vh-lang-item a:hover {
color: #966817 !important;
text-decoration: underline !important;
}
/* Flag thumbnail element */
.vh-flag {
display: inline-block !important;
width: 15px !important;
height: 10px !important;
margin-right: 4px !important;
vertical-align: -1px !important;
border-radius: 1.5px !important;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.45) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
flex-shrink: 0 !important;
}
/* Crisp SVG Flag Definitions */
/* ==========================================================================
STEP 147: SOCIAL ICONS IN THE MID OF THE SPACE ON THE RIGHT
========================================================================== */
.vh-bottom-bar-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
padding: 0 24px !important;
position: relative !important;
box-sizing: border-box !important;
}
.vh-bottom-bar-left-space {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.vh-bottom-nav-links {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
white-space: nowrap !important;
}
.vh-bottom-bar-right-space {
flex: 1 1 0 !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.vh-bottom-social-links {
position: static !important;
transform: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 24px !important;
}
.vh-bottom-social-item {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 24px !important;
line-height: 0 !important;
transition: transform 0.2s ease, opacity 0.2s ease !important;
text-decoration: none !important;
}
.vh-bottom-social-item:hover {
transform: scale(1.15) !important;
opacity: 0.9 !important;
}
.vh-bottom-social-item img {
display: block !important;
height: 20px !important;
width: auto !important;
max-height: 20px !important;
object-fit: contain !important;
border: none !important;
}
/* ==========================================================================
STEP 153: DISTINGUISHED VANISEVA PILL + ELEVATED BACK-TO-TOP + FLAG STYLING
========================================================================== */
/* 1. ELEVATED BACK-TO-TOP ARROW (Floats 16px clearly above the 38px bottom bar) */
#vanipedia-back-to-top {
position: fixed !important;
bottom: 54px !important;
right: 24px !important;
width: 44px !important;
height: 44px !important;
z-index: 100000 !important;
}
@media screen and (max-width: 768px) {
#vanipedia-back-to-top {
bottom: 54px !important;
right: 16px !important;
width: 40px !important;
height: 40px !important;
z-index: 100000 !important;
}
}
/* 2. REMOVE EXTRA BOX/BAR AROUND HEADER (Outer container completely borderless & transparent) */
body.page-Main_Page .vector-header-container,
.vector-header-container,
.vector-header-container.vector-sticky-header-container {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
/* 3. THE VERY EXISTING TOP BAR: Single, clean, elegant header bar */
header.mw-header,
header.vector-header,
body.page-Main_Page #mw-head,
body.page-Main_Page .vector-header-container header.mw-header {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 86px !important;
max-height: 96px !important;
padding: 10px 24px !important;
background: #345B63 !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
position: relative !important;
box-sizing: border-box !important;
}
/* 4. TOP BAR CENTER BLOCK */
.vanipedia-topbar-center-block {
position: absolute !important;
left: 50% !important;
top: 54% !important;
transform: translate(-50%, -50%) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: nowrap !important;
z-index: 10 !important;
pointer-events: auto !important;
line-height: 1 !important;
}
#vanipedia-topbar-center-block * {
position: static !important;
transform: none !important;
}
.vanipedia-topbar-main-title,
#vanipedia-topbar-title {
position: static !important;
transform: none !important;
display: block !important;
font-family: 'Cinzel', Georgia, serif !important;
font-size: 17.5px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
color: #f5d77f !important;
text-decoration: none !important;
text-decoration-line: none !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
line-height: 1.25 !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
pointer-events: none !important;
user-select: text !important;
}
/* 5. DISTINGUISHED MIDDLE LINE: VANISEVA LUMINOUS INVITATION PILL */
.vanipedia-topbar-vaniseva-title {
position: static !important;
transform: none !important;
display: block !important;
margin: 0 0 4px 0 !important;
line-height: 1.2 !important;
}
.vanipedia-topbar-vaniseva-title a {
color:#f5d77f !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12.5px !important;
font-style: normal !important;
font-weight: 500 !important;
letter-spacing: 0.35px !important;
text-decoration: none !important;
text-decoration-line: none !important;
border:0 !important;
border-bottom:0 !important;
background:none !important;
outline: none !important;
padding:0 !important;
border-radius:0 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
display: inline-block !important;
}
.vanipedia-topbar-vaniseva-title a:hover,
.vanipedia-topbar-vaniseva-title a:focus,
.vanipedia-topbar-vaniseva-title a:active {
color:#f5d77f !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-color:transparent !important;
background-color:transparent !important;
box-shadow:none !important;
}
/* 6. SISTER PROJECTS (Line 3) */
.vanipedia-topbar-sister-links {
position: static !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.vanipedia-topbar-sister-link {
color: #f5d77f !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.4px !important;
text-decoration: none !important;
text-decoration-line: none !important;
border: none !important;
border-bottom: none !important;
outline: none !important;
padding: 1px 6px !important;
border-radius: 3px !important;
transition: all 0.18s ease !important;
display: inline-flex !important;
align-items: center !important;
cursor: pointer !important;
}
.vanipedia-topbar-sister-link:hover,
.vanipedia-topbar-sister-link:focus,
.vanipedia-topbar-sister-link:active {
color: #ffffff !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
background-color: rgba(245, 215, 127, 0.18) !important;
}
.vanipedia-topbar-sister-sep {
color: rgba(245, 215, 127, 0.4) !important;
font-size: 10px !important;
line-height: 1 !important;
user-select: none !important;
}
/* 7. PARTICIPATING LANGUAGES FLAGS STYLING */
.vh-flag {
display: inline-block !important;
width: 15px !important;
height: 10px !important;
margin-right: 5px !important;
vertical-align: -1px !important;
border-radius: 1.5px !important;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.45) !important;
flex-shrink: 0 !important;
overflow: hidden !important;
}
.vh-flag svg {
width: 100% !important;
height: 100% !important;
display: block !important;
}
/* 8. MINERVA MOBILE SKIN (Phone Header) */
body.skin-minerva .minerva-header {
flex-wrap: nowrap !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 10px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
}
/* 8.1 Burger Navigation Drawer Button */
.minerva-header .navigation-drawer.toggle-list,
.minerva-header #mw-mf-main-menu-button,
.minerva-header .toggle-list__toggle {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
}
.minerva-header .minerva-icon--menu,
.minerva-header #mw-mf-main-menu-button .minerva-icon--menu {
background-color: #f5d77f !important;
display: inline-block !important;
width: 24px !important;
height: 24px !important;
}
/* 8.2 Branding Box Title (Pure CSS Content Injection - 100% JS-Independent) */
body.skin-minerva .minerva-header .branding-box,
.minerva-header .branding-box {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
flex: 1 1 auto !important;
margin: 0 0 0 14px !important;
padding: 0 !important;
min-width: 0 !important;
overflow: visible !important;
}
body.skin-minerva .minerva-header .branding-box a,
.minerva-header .branding-box a {
display: inline-flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
text-decoration: none !important;
color: #f5d77f !important;
}
body.skin-minerva .minerva-header .branding-box a::before,
.minerva-header .branding-box a::before {
content: "Vanipedia" !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
color: #f5d77f !important;
font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.skin-minerva .minerva-header .branding-box a > span,
.minerva-header .branding-box a > span,
body.skin-minerva .minerva-header .branding-box a > img,
.minerva-header .branding-box a > img {
display: none !important;
}
/* 8.3 Home Link in Minerva */
.minerva-header a.vanipedia-topbar-home {
flex: 0 0 28px !important;
width: 28px !important;
height: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 4px !important;
padding: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #f5d77f !important;
}
/* 8.4 Search Button in Minerva */
.minerva-header .minerva-search-form {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
.minerva-header #searchIcon {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
}
.minerva-header .minerva-icon--search,
.minerva-header #searchIcon .minerva-icon--search {
background-color: #f5d77f !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
}
/* 8.5 User Navigation in Minerva */
.minerva-header .minerva-user-navigation {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
.minerva-header #ca-mytalks {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
}
.minerva-header .minerva-icon--bellOutline,
.minerva-header #ca-mytalks .minerva-icon--bellOutline {
background-color: #f5d77f !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
}
/* STRICTLY HIDE center block and extra lines on mobile */
body.skin-minerva .vanipedia-topbar-center-block,
body.skin-minerva #vanipedia-topbar-center-block,
body.skin-minerva #vanipedia-topbar-center-block-mobile,
body.skin-minerva .vanipedia-topbar-main-title,
body.skin-minerva .vanipedia-topbar-vaniseva-title,
body.skin-minerva .vanipedia-topbar-sister-links,
body.skin-minerva .vanipedia-topbar-sister-link,
body.skin-minerva .vanipedia-topbar-sister-sep {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Bottom bar mobile styling (from STEP 165) */
body.skin-minerva .vh-bottom-social-links,
body.skin-minerva .vh-bottom-bar-right-space {
display: none !important;
width: 0 !important;
}
body.skin-minerva .vh-bottom-bar-left-space {
display: none !important;
}
body.skin-minerva .vh-bottom-bar-inner {
justify-content: center !important;
padding: 0 10px !important;
}
body.skin-minerva .vh-bottom-nav-links {
width: 100% !important;
justify-content: center !important;
gap: 8px !important;
font-size: 11px !important;
}
/* 9. RESPONSIVE BREAKPOINTS (Desktop >= 1000px Intact; Mobile < 1000px Full Controls) */
@media screen and (max-width: 1200px) and (min-width: 1000px) {
.vanipedia-topbar-main-title {
font-size: 16px !important;
letter-spacing: 1.5px !important;
}
.vanipedia-topbar-vaniseva-title a {
font-size: 11.5px !important;
padding:0 !important;
}
.vanipedia-topbar-sister-link {
font-size: 11.5px !important;
}
}
@media screen and (max-width: 999px) {
/* Single Row Header on Mobile Viewports */
header.mw-header,
header.vector-header,
.vector-header-container .mw-header {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 10px !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
}
/* Top Row Left Section: Burger + Search + Home in single row */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
flex: 1 1 auto !important;
min-width: 0 !important;
gap: 6px !important;
}
/* 1. FORCE BURGER MENU TO DISPLAY VISIBLE ON MOBILE */
.vector-header-start #vector-main-menu-dropdown,
#vector-main-menu-dropdown {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
cursor: pointer !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 4px !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label,
.vector-header-start #vector-main-menu-dropdown .vector-main-menu-dropdown-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
padding: 4px !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
width: 22px !important;
height: 22px !important;
}
/* 2. SEARCH INPUT WITH GUARANTEED VISIBLE MAGNIFYING GLASS */
.vector-header-container #p-search,
.mw-header #p-search,
.vector-header-start #p-search {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
min-width: 60px !important;
max-width: calc(100vw - 140px) !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container .cdx-search-input,
.vector-header-container .vector-search-box-input,
.vector-header-container .cdx-text-input,
.vector-header-start .cdx-text-input {
width: 100% !important;
max-width: 100% !important;
height: 32px !important;
margin: 0 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
}
.vector-header-container .cdx-text-input__icon,
.vector-header-container .cdx-text-input__start-icon,
.vector-header-start .cdx-text-input__icon,
.vector-header-start .cdx-text-input__start-icon,
#p-search .cdx-text-input__icon,
#p-search .cdx-text-input__start-icon {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
left: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
z-index: 5 !important;
pointer-events: none !important;
}
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
width: 100% !important;
min-width: 60px !important;
height: 32px !important;
font-size: 13px !important;
padding-left: 32px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
border-radius: 16px !important;
background-color: #1f3e45 !important;
border: 1px solid rgba(245, 215, 127, 0.45) !important;
color: #ffffff !important;
}
/* Compact Home Icon */
.vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
.vector-header-start #vanipedia-topbar-home-link,
#vanipedia-topbar-home-link,
a.vanipedia-topbar-home {
margin: 0 2px !important;
padding: 3px 5px !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
/* 3. USER ICON GUARANTEED ON FAR RIGHT */
.vector-header-end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-end .vector-user-links,
.vector-header-end .vector-user-links-wide,
.vector-header-end .vector-user-links-main {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.vector-header-end #p-vector-user-menu-userpage {
display: none !important;
}
.vector-header-end #p-vector-user-menu-overflow,
.vector-header-end #vector-user-links-dropdown,
.vector-header-end .vector-user-menu-overflow {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-end #vector-user-links-dropdown .vector-dropdown-label,
.vector-header-end .vector-user-menu-overflow .vector-dropdown-label {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
}
.vector-header-end #vector-user-links-dropdown .vector-icon,
.vector-header-end .vector-user-menu-overflow .vector-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
}
.vector-header-end .vector-dropdown-label-text {
display: none !important;
}
/* STRICTLY HIDE center block and extra lines on mobile viewports (< 1000px) */
.vanipedia-topbar-center-block,
#vanipedia-topbar-center-block,
#vanipedia-topbar-center-block-mobile,
.vanipedia-topbar-main-title,
#vanipedia-topbar-title,
#vanipedia-topbar-title-mobile,
#vanipedia-topbar-title-link,
#vanipedia-topbar-center-title,
.vanipedia-topbar-vaniseva-title,
.vanipedia-topbar-sister-links,
.vanipedia-topbar-sister-link,
.vanipedia-topbar-sister-sep {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Bottom bar social links hidden on mobile (from STEP 165) */
.vh-bottom-social-links,
.vh-bottom-bar-right-space {
display: none !important;
width: 0 !important;
flex: 0 0 0 !important;
visibility: hidden !important;
}
.vh-bottom-bar-left-space {
display: none !important;
width: 0 !important;
flex: 0 0 0 !important;
}
.vh-bottom-bar-inner {
justify-content: center !important;
padding: 0 10px !important;
}
.vh-bottom-nav-links {
width: 100% !important;
justify-content: center !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
gap: 8px !important;
font-size: 11px !important;
}
}
/* ==========================================================================
STEP 173: RESTORE WORKING STEP 117 COMPACT STAGE PROPORTIONS (ZERO-CROP)
Overrides all desktop-specific shifts (min-height: 380px, translateY: 30px,
translateY: -72px, 324px photo) inside the mobile rotated landscape stage.
========================================================================== */
#vani-mobile-stage #vani-rotated-box #vani-stage-content-slot #vani-home,
body.page-Main_Page #vani-stage-content-slot #vani-home {
width: 1200px !important;
min-width: 1200px !important;
max-width: 1200px !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 8px !important;
padding: 4px 16px 12px 16px !important;
margin: 0 !important;
background-color: #f6f2e9 !important;
overflow: visible !important;
}
#vani-stage-content-slot #vani-home .vh-triad-grid,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
gap: 16px !important;
flex-wrap: nowrap !important;
height: auto !important;
min-height: 250px !important;
max-height: 270px !important;
transform: none !important;
margin: 0 0 6px 0 !important;
}
#vani-stage-content-slot #vani-home .vh-photo-stage,
#vani-stage-content-slot #vani-home .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-photo-stage,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-sanctuary-portrait-box .vh-photo-stage {
width: 200px !important;
height: 200px !important;
min-width: 200px !important;
min-height: 200px !important;
max-width: 200px !important;
max-height: 200px !important;
margin: 0 auto !important;
border-radius: 50% !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
box-shadow: 0 8px 24px rgba(18, 63, 56, 0.35), 0 2px 6px rgba(0, 0, 0, 0.22) !important;
overflow: hidden !important;
position: relative !important;
}
#vani-stage-content-slot #vani-home .vh-sanctuary-card,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
text-align: center !important;
margin: 0 !important;
height: auto !important;
min-height: auto !important;
max-height: 270px !important;
}
#vani-stage-content-slot #vani-home .vh-card-text.vh-sanctuary-text,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-text.vh-sanctuary-text {
margin-top: 8px !important;
margin-bottom: 0 !important;
}
#vani-stage-content-slot #vani-home .vh-triad-column-left,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-triad-column-left,
#vani-stage-content-slot #vani-home .vh-card-article,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-article {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
height: auto !important;
min-height: auto !important;
max-height: 270px !important;
}
#vani-stage-content-slot #vani-home .vh-card-memories,
#vani-stage-content-slot #vani-home .vh-card-media-item {
flex: 0 0 auto !important;
height: auto !important;
}
#vani-stage-content-slot #vani-home .vh-card-media-item .vh-media-large-thumb {
height: 110px !important;
min-height: 110px !important;
}
#vani-stage-content-slot #vani-home .vh-timeline-section,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-timeline-section {
transform: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 4px 0 !important;
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
flex: 0 0 80px !important;
position: relative !important;
left: auto !important;
right: auto !important;
}
#vani-stage-content-slot #vani-home .vh-timeline-track,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-timeline-track {
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
}
#vani-stage-content-slot #vani-home .vh-timeline-item,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-timeline-item {
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
}
#vani-stage-content-slot #vani-home .vh-taxonomy-section,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-taxonomy-section {
transform: none !important;
width: 100% !important;
margin: 4px 0 !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
flex: 0 0 auto !important;
}
#vani-stage-content-slot #vani-home .vh-taxonomy-grid,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
width: 100% !important;
height: auto !important;
}
#vani-stage-content-slot #vani-home .vh-card-tax,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-tax,
#vani-stage-content-slot #vani-home .vh-card-languages,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-languages {
height: auto !important;
min-height: 95px !important;
max-height: 110px !important;
padding: 6px 10px !important;
}
#vani-stage-header-slot .vanipedia-stage-title-link,
#vani-stage-header-slot .vanipedia-topbar-title-link,
#vani-stage-header-slot .vanipedia-topbar-main-title,
#vani-stage-header-slot .branding-box a {
display: inline-flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
color: #f5d77f !important;
text-decoration: none !important;
letter-spacing: 0.8px !important;
line-height: 1 !important;
margin: 0 10px !important;
cursor: pointer !important;
}

/* V174 — Vanipedia main page: static, naturally scrolling, and responsive. */
body.page-Main_Page {
background:#faf7ef !important;
overflow-x:hidden !important;
}
body.page-Main_Page #vani-home.vp-static-home {
--vp-paper:#faf7ef;
--vp-card:#fffdf8;
--vp-ink:#263a39;
--vp-brand:#345b63;
--vp-accent:#b1873d;
--vp-line:#ded7c6;
box-sizing:border-box !important;
display:block !important;
position:relative !important;
width:100% !important;
min-width:0 !important;
max-width:1240px !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 auto !important;
padding:clamp(18px,3vw,38px) !important;
overflow:visible !important;
color:var(--vp-ink) !important;
background:var(--vp-paper) !important;
font:400 17px/1.6 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home,
body.page-Main_Page #vani-home.vp-static-home * {
box-sizing:border-box !important;
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
body.page-Main_Page #vani-home.vp-static-home a {
color:var(--vp-brand) !important;
text-decoration:underline !important;
text-decoration-color:#aab3a8 !important;
text-underline-offset:3px !important;
background:none !important;
box-shadow:none !important;
}
body.page-Main_Page #vani-home.vp-static-home a:hover {
color:var(--vp-accent) !important;
text-decoration-thickness:2px !important;
}
body.page-Main_Page #vani-home.vp-static-home a:focus-visible {
outline:3px solid var(--vp-brand) !important;
outline-offset:3px !important;
}
body.page-Main_Page #vani-home.vp-static-home h1,
body.page-Main_Page #vani-home.vp-static-home h2,
body.page-Main_Page #vani-home.vp-static-home h3,
body.page-Main_Page #vani-home.vp-static-home p {
margin-top:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home h1 {
margin:0 0 10px !important;
color:var(--vp-brand) !important;
font:600 clamp(29px,4vw,40px)/1.2 Georgia,"Noto Serif",serif !important;
text-align:center !important;
}
body.page-Main_Page #vani-home.vp-static-home h2 {
margin:0 0 14px !important;
padding:0 0 9px !important;
border:0 !important;
border-bottom:1px solid var(--vp-line) !important;
color:var(--vp-brand) !important;
font:600 22px/1.3 Georgia,"Noto Serif",serif !important;
text-align:left !important;
}
body.page-Main_Page #vani-home.vp-static-home h3 {
margin:0 0 7px !important;
color:var(--vp-ink) !important;
font:600 18px/1.4 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home p { margin-bottom:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
display:grid !important;
grid-template-columns:220px minmax(0,1fr) !important;
align-items:center !important;
gap:clamp(24px,5vw,64px) !important;
max-width:1000px !important;
margin:0 auto 32px !important;
padding:8px 0 28px !important;
border-bottom:1px solid var(--vp-line) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait {
width:220px !important;
height:220px !important;
max-width:100% !important;
margin:0 auto !important;
overflow:hidden !important;
border:3px solid var(--vp-brand) !important;
border-radius:50% !important;
background:#f0eee3 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait p,
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait a {
display:block !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait img {
display:block !important;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:cover !important;
object-position:center 35% !important;
border:0 !important;
box-shadow:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy {
min-width:0 !important;
text-align:center !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role {
margin:0 auto 4px !important;
color:var(--vp-accent) !important;
font-size:clamp(19px,2.2vw,25px) !important;
font-weight:600 !important;
line-height:1.35 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization {
color:var(--vp-ink) !important;
font-size:17px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-who { margin-top:12px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-feature-grid {
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:22px !important;
margin:0 0 30px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-card {
min-width:0 !important;
padding:20px !important;
border:1px solid var(--vp-line) !important;
border-radius:6px !important;
background:var(--vp-card) !important;
color:var(--vp-ink) !important;
box-shadow:0 2px 9px rgba(38,58,57,.045) !important;
transform:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-card:hover {
transform:none !important;
box-shadow:0 2px 9px rgba(38,58,57,.045) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-card h3 { margin-bottom:8px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-card blockquote {
margin:4px 0 0 !important;
padding:4px 0 4px 16px !important;
border-left:3px solid var(--vp-accent) !important;
color:var(--vp-ink) !important;
font:400 17px/1.6 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-feature {
display:grid !important;
grid-template-columns:minmax(120px,190px) minmax(0,1fr) !important;
align-items:center !important;
gap:16px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-image,
body.page-Main_Page #vani-home.vp-static-home .vp-media-image p,
body.page-Main_Page #vani-home.vp-static-home .vp-media-image a {
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-image img {
display:block !important;
width:100% !important;
height:auto !important;
max-width:100% !important;
border-radius:3px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-outlet {
margin-bottom:5px !important;
color:#706b62 !important;
font-size:14px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-headline { font-size:17px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-section {
margin:0 0 30px !important;
padding:20px 0 22px !important;
border-block:1px solid var(--vp-line) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-intro { margin:-5px 0 12px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-years {
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(76px,1fr)) !important;
gap:6px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-years a {
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:42px !important;
padding:6px 8px !important;
border:1px solid var(--vp-line) !important;
border-radius:4px !important;
background:var(--vp-card) !important;
color:var(--vp-brand) !important;
text-align:center !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-years a:hover {
border-color:var(--vp-brand) !important;
background:#f1f3ee !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-section { margin:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid {
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:18px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-card { padding:18px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-languages-card { grid-column:span 1 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-languages-list {
display:flex !important;
flex-wrap:wrap !important;
gap:8px 12px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-lang-item {
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
min-height:32px !important;
white-space:nowrap !important;
}
body.page-Main_Page #vani-home.vp-static-home .vh-flag {
display:inline-block !important;
flex:0 0 22px !important;
width:22px !important;
height:15px !important;
vertical-align:middle !important;
}
/* Restore ordinary page flow and neutralize any legacy rotated-stage wrapper. */
#vani-mobile-stage, #vani-rotated-box {
position:static !important;
inset:auto !important;
width:auto !important;
height:auto !important;
min-width:0 !important;
min-height:0 !important;
max-width:none !important;
max-height:none !important;
overflow:visible !important;
transform:none !important;
rotate:none !important;
}
#vani-stage-header-slot, #vani-stage-content-slot, #vani-stage-footer-slot { display:contents !important; }
@media (max-width:950px) {
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:700px) {
body.page-Main_Page #vani-home.vp-static-home { padding:20px 16px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
grid-template-columns:minmax(0,1fr) !important;
gap:16px !important;
margin-bottom:24px !important;
padding-bottom:22px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait { width:160px !important; height:160px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-feature-grid { grid-template-columns:minmax(0,1fr) !important; gap:16px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid { grid-template-columns:minmax(0,1fr) !important; gap:14px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-card { padding:17px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-feature { grid-template-columns:minmax(100px,34%) minmax(0,1fr) !important; gap:12px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-section { margin-bottom:24px !important; }
}
@media (max-width:380px) {
body.page-Main_Page #vani-home.vp-static-home .vp-media-feature { grid-template-columns:minmax(0,1fr) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-image { max-width:260px !important; }
}
@media (prefers-reduced-motion:reduce) {
body.page-Main_Page #vani-home.vp-static-home *,
body.page-Main_Page #vani-home.vp-static-home *::before,
body.page-Main_Page #vani-home.vp-static-home *::after {
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
}

/* V175: natural document scrolling, Vanisource-style hero, Vanipedia colors. */
html,
body.page-Main_Page {
height:auto !important;
min-height:100% !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
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-content-text,
body.page-Main_Page .mw-parser-output {
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
body.page-Main_Page #vani-home.vp-static-home {
--vp-brand:#345B63;
--vp-accent:#f5d77f;
--vp-ink:#263a3d;
--vp-line:#d8d1c3;
--vp-card:#fffdf8;
position:relative !important;
display:block !important;
width:min(100%, 1200px) !important;
min-width:0 !important;
max-width:1200px !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 auto !important;
padding:26px clamp(16px,3vw,34px) 100px !important;
overflow:visible !important;
background:#faf7ef !important;
}
/* The site-wide footer remains fixed; this page has room to scroll past it. */
body.page-Main_Page #vani-home.vp-static-home::after {
content:"";
display:block;
height:0;
clear:both;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
display:grid !important;
grid-template-columns:minmax(170px,210px) minmax(0,1fr) !important;
align-items:center !important;
gap:clamp(24px,4vw,44px) !important;
width:100% !important;
max-width:880px !important;
min-height:0 !important;
margin:0 auto 30px !important;
padding:22px 26px !important;
border:1px solid #345B63 !important;
border-left:5px solid #f5d77f !important;
border-radius:8px !important;
background:#345B63 !important;
color:#fff8e4 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait {
box-sizing:border-box !important;
width:min(100%,210px) !important;
height:auto !important;
aspect-ratio:445 / 542 !important;
margin:0 auto !important;
overflow:hidden !important;
border:2px solid #f5d77f !important;
border-radius:6px !important;
background:#faf7ef !important;
box-shadow:0 5px 18px rgba(18,35,37,.3) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait p,
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait a {
display:block !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait img {
display:block !important;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:cover !important;
object-position:center !important;
border:0 !important;
border-radius:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy,
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy h1 {
min-width:0 !important;
text-align:center !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy h1 {
margin:0 0 9px !important;
color:#f5d77f !important;
font:600 clamp(32px,3vw,42px)/1.15 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role {
margin:0 0 7px !important;
color:#fff8e4 !important;
font:600 clamp(19px,1.7vw,22px)/1.3 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role a,
body.page-Main_Page #vani-home.vp-static-home .vp-home-who a {
color:#f5d77f !important;
text-decoration:underline !important;
text-underline-offset:4px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role a:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-home-who a:hover { color:#fff !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization {
margin:0 !important;
color:#fff8e4 !important;
font:500 clamp(17px,1.5vw,20px)/1.4 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-who { margin-top:10px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-card,
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-section,
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-section,
body.page-Main_Page #vani-home.vp-static-home .vp-feature-grid,
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid {
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-quote {
margin:4px 0 0 !important;
padding:4px 0 4px 16px !important;
border-left:3px solid #f5d77f !important;
color:var(--vp-ink) !important;
font:400 17px/1.6 Georgia,"Noto Serif",serif !important;
}
/* Remove the old decorative cursor and restore the operating system pointer. */
html body.page-Main_Page,
html body.page-Main_Page * {
cursor:auto !important;
}
html body.page-Main_Page a[href],
html body.page-Main_Page button,
html body.page-Main_Page [role="button"],
html body.page-Main_Page .cdx-button {
cursor:pointer !important;
}
html body.page-Main_Page #vh-cursor-pointer,
html body.page-Main_Page #vh-kill-windows-cursor {
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
@media (max-width:700px) {
body.page-Main_Page #vani-home.vp-static-home { padding:18px 14px 96px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
grid-template-columns:minmax(0,1fr) !important;
gap:14px !important;
max-width:460px !important;
margin-bottom:24px !important;
padding:17px 17px 19px !important;
border-left-width:4px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait { width:min(100%,170px) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-role { font-size:17px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization { font-size:17px !important; }
}

/* V176: native mouse cursor; main page language links are the remaining taxonomy feature. */
body.page-Main_Page #vani-home.vp-static-home .vp-language-section {
margin:0 !important;
padding:0 0 32px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-languages-card {
width:100% !important;
max-width:none !important;
grid-column:auto !important;
}

/* V179: native Windows pointer and viewport-contained portal rollouts. */
html body.page-Main_Page #vani-home.vp-static-home,
html body.page-Main_Page #vani-home.vp-static-home * {
cursor:default !important;
}
html body.page-Main_Page #vani-home.vp-static-home a[href],
html body.page-Main_Page #vani-home.vp-static-home a[href] *,
html body.page-Main_Page #vani-home.vp-static-home button,
html body.page-Main_Page #vani-home.vp-static-home [role="button"],
html body.page-Main_Page #vani-home.vp-static-home [role="button"] * {
cursor:pointer !important;
}
html body.page-Main_Page #vh-cursor-pointer,
html body.page-Main_Page #vh-kill-windows-cursor {
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-grid {
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
align-items:start !important;
gap:24px 18px !important;
width:100% !important;
margin:0 auto 28px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-secondary-grid {
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
max-width:640px !important;
margin-left:auto !important;
margin-right:auto !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card {
position:relative !important;
z-index:1 !important;
min-width:0 !important;
overflow:visible !important;
border:1px solid #d8d1c3 !important;
border-radius:7px !important;
background:#fffdf8 !important;
box-shadow:0 2px 9px rgba(38,58,57,.07) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-hover-open,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-open {
z-index:100 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image p,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image a {
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image {
height:168px !important;
overflow:hidden !important;
border-radius:6px 6px 0 0 !important;
background:#e9e4d8 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image img {
display:block !important;
width:100% !important;
height:168px !important;
max-width:none !important;
object-fit:cover !important;
object-position:center 36% !important;
border:0 !important;
border-radius:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy {
min-height:145px !important;
padding:14px 15px 13px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy h2 {
min-height:50px !important;
margin:0 0 7px !important;
padding:0 0 7px !important;
border-bottom:1px solid #ded7c6 !important;
color:#345B63 !important;
font:700 18px/1.28 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy h2 a {
color:#345B63 !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy p {
min-height:44px !important;
margin:0 0 8px !important;
color:#354444 !important;
font:400 14px/1.45 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-toggle {
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
min-height:30px !important;
padding:4px 9px !important;
border:1px solid #d8d1c3 !important;
border-radius:4px !important;
background:#f6f2e9 !important;
color:#345B63 !important;
font:600 13px/1.3 Arial,Helvetica,sans-serif !important;
cursor:pointer !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-toggle:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-toggle:focus-visible {
border-color:#b1873d !important;
outline:2px solid #b1873d !important;
outline-offset:2px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-panel {
display:none !important;
position:fixed !important;
top:var(--vp-panel-top, 20px) !important;
left:var(--vp-panel-left, 12px) !important;
right:auto !important;
bottom:auto !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
width:var(--vp-panel-width, 290px) !important;
max-width:calc(100vw - 24px) !important;
max-height:min(380px,calc(100vh - 100px)) !important;
overflow:auto !important;
overscroll-behavior:contain !important;
padding:11px 12px 12px !important;
border:1px solid #d8d1c3 !important;
border-top:3px solid #b1873d !important;
border-radius:7px !important;
background:#fffdf8 !important;
box-shadow:0 10px 22px rgba(38,58,57,.22) !important;
text-align:left !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-hover-open > .vp-rollout-panel,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-open > .vp-rollout-panel {
display:block !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-heading {
display:block !important;
margin:0 0 7px !important;
color:#345B63 !important;
font:700 14px/1.35 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options {
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
gap:2px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options > span { display:block !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options a {
display:block !important;
min-height:34px !important;
padding:7px 8px !important;
border-radius:4px !important;
color:#345B63 !important;
font:500 14px/1.4 Georgia,"Noto Serif",serif !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options a:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options a:focus-visible {
background:#f2eee4 !important;
color:#805b16 !important;
text-decoration:underline !important;
outline:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-year-options { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-year-options a { text-align:center !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-language-options { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-language-options a { display:flex !important; align-items:center !important; gap:8px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-all { display:block !important; margin-top:7px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-all a {
display:block !important;
padding:7px 8px !important;
border-top:1px solid #ded7c6 !important;
color:#345B63 !important;
font:600 13px/1.35 Arial,Helvetica,sans-serif !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-all a:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-media-all a:focus-visible { text-decoration:underline !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-article-all { display:block !important; margin:0 0 10px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-article-all a {
display:block !important;
padding:8px 10px !important;
border-radius:4px !important;
background:#f2eee4 !important;
color:#345B63 !important;
font:700 14px/1.35 Arial,Helvetica,sans-serif !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-categories-heading {
padding-top:8px !important;
border-top:1px solid #ded7c6 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-articles-panel {
width:min(720px,calc(100vw - 24px)) !important;
--vp-panel-width:720px;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-options {
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:1px 5px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-options a {
min-height:0 !important;
padding:5px 6px !important;
font-size:12px !important;
line-height:1.25 !important;
}
@media (max-width:950px) {
body.page-Main_Page #vani-home.vp-static-home .vp-primary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-secondary-grid { max-width:100% !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-article-options { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-articles-panel { width:min(620px,calc(100vw - 24px)) !important; --vp-panel-width:620px; }
}
@media (max-width:700px) {
body.page-Main_Page #vani-home.vp-static-home .vp-primary-grid,
body.page-Main_Page #vani-home.vp-static-home .vp-secondary-grid {
grid-template-columns:minmax(0,1fr) !important;
gap:16px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image img { height:210px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy { min-height:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy h2,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy p { min-height:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-panel {
position:static !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
width:auto !important;
max-width:none !important;
max-height:none !important;
margin:0 !important;
border-top:1px solid #d8d1c3 !important;
border-left:3px solid #b1873d !important;
border-radius:0 0 7px 7px !important;
box-shadow:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-options { grid-template-columns:minmax(0,1fr) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-articles-panel { width:auto !important; --vp-panel-width:auto; }
}

/* V181: restore the native Windows pointing hand on sidebar menu targets.
Earlier Main Page cursor rules forced .vector-menu links to cursor:auto. */
html body.page-Main_Page #mw-panel .vector-menu a[href],
html body.page-Main_Page #mw-panel .vector-menu a[href] *,
html body.page-Main_Page #mw-mf-page-left .vector-menu a[href],
html body.page-Main_Page #mw-mf-page-left .vector-menu a[href] *,
html body.page-Main_Page #vector-main-menu .vector-menu a[href],
html body.page-Main_Page #vector-main-menu .vector-menu a[href] *,
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-content li a[href],
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-content li a[href] *,
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-heading,
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-heading * {
cursor:pointer !important;
}

/* V183: restore the pointing-hand cursor on every actionable top and bottom bar item.
Older Main Page rules set .vector-dropdown-label and .vh-bottom-link to cursor:auto. */
html body .vector-header-container a[href],
html body .vector-header-container a[href] *,
html body header.vector-header a[href],
html body header.vector-header a[href] *,
html body header.mw-header a[href],
html body header.mw-header a[href] *,
html body #mw-head a[href],
html body #mw-head a[href] *,
html body .minerva-header a[href],
html body .minerva-header a[href] *,
html body #vh-bottom-bar a[href],
html body #vh-bottom-bar a[href] *,
html body .vh-bottom-bar a[href],
html body .vh-bottom-bar a[href] *,
html body .vector-header-container button,
html body .vector-header-container button *,
html body .vector-header-container [role="button"],
html body .vector-header-container [role="button"] *,
html body header.vector-header .vector-dropdown-label,
html body header.vector-header .vector-dropdown-label *,
html body .vector-header-container .vector-dropdown-label,
html body .vector-header-container .vector-dropdown-label *,
html body .minerva-header button,
html body .minerva-header button *,
html body .minerva-header [role="button"],
html body .minerva-header [role="button"] *,
html body #vh-bottom-bar button,
html body #vh-bottom-bar button *,
html body #vh-bottom-bar [role="button"],
html body #vh-bottom-bar [role="button"] *,
html body #vh-bottom-bar .vh-bottom-link[href] {
cursor: pointer !important;
}
html body .vector-header-container .vector-dropdown-label:hover,
html body header.vector-header .vector-dropdown-label:hover,
html body .vector-header-container .vector-dropdown-label:focus,
html body header.vector-header .vector-dropdown-label:focus {
cursor: pointer !important;
}

/* V184: the legacy Main Page cursor reset also targets Vector menu links and
dropdown labels. Override those exact top-bar targets after the legacy rules. */
html body.page-Main_Page .vector-header-container a[href],
html body.page-Main_Page .vector-header-container a[href] *,
html body.page-Main_Page .vector-header-container a[href]:hover,
html body.page-Main_Page .vector-header-container .vector-menu a[href],
html body.page-Main_Page .vector-header-container .vector-menu a[href] *,
html body.page-Main_Page .vector-header-container .vector-menu a[href]:hover,
html body.page-Main_Page .vector-header-container .vector-menu a[href]:hover *,
html body.page-Main_Page #mw-head a[href],
html body.page-Main_Page #mw-head a[href] *,
html body.page-Main_Page #mw-head a[href]:hover,
html body.page-Main_Page #mw-head .vector-menu a[href],
html body.page-Main_Page #mw-head .vector-menu a[href] *,
html body.page-Main_Page #mw-head .vector-menu a[href]:hover,
html body.page-Main_Page #vector-sticky-header a[href],
html body.page-Main_Page #vector-sticky-header a[href] *,
html body.page-Main_Page #vector-sticky-header a[href]:hover,
html body.page-Main_Page #vector-sticky-header .vector-menu a[href],
html body.page-Main_Page #vector-sticky-header .vector-menu a[href] *,
html body.page-Main_Page #vector-sticky-header .vector-menu a[href]:hover,
html body.page-Main_Page #mw-head .vector-dropdown-label,
html body.page-Main_Page #mw-head .vector-dropdown-label *,
html body.page-Main_Page #mw-head .vector-dropdown-label:hover,
html body.page-Main_Page #mw-head .vector-dropdown-label:focus,
html body.page-Main_Page #mw-head .vector-main-menu-dropdown-toggle,
html body.page-Main_Page #mw-head .vector-main-menu-dropdown-toggle *,
html body.page-Main_Page .vector-header-container .vector-dropdown-label,
html body.page-Main_Page .vector-header-container .vector-dropdown-label *,
html body.page-Main_Page .vector-header-container .vector-dropdown-label:hover,
html body.page-Main_Page .vector-header-container .vector-dropdown-label:focus,
html body.page-Main_Page .vector-header-container .vector-main-menu-dropdown-toggle,
html body.page-Main_Page .vector-header-container .vector-main-menu-dropdown-toggle *,
html body.page-Main_Page .vector-header-container button,
html body.page-Main_Page .vector-header-container button *,
html body.page-Main_Page .vector-header-container [role="button"],
html body.page-Main_Page .vector-header-container [role="button"] *,
html body.page-Main_Page #mw-head button,
html body.page-Main_Page #mw-head button *,
html body.page-Main_Page #mw-head [role="button"],
html body.page-Main_Page #mw-head [role="button"] * {
cursor: pointer !important;
}
ct: 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;
}
}
/* ==========================================================================
ARCHITECTURAL WOOD SANCTUM & SHADOWBOX NICHES (A1 CONCEPT)
========================================================================== */
:root {
--wood-darkest: #110804;
--wood-dark: #1c0e07;
--wood-mid: #2b170e;
--wood-warm: #3d2214;
--wood-light: #54311c;
--gold-bright: #f5d77f;
--gold-mid: #d4af37;
--gold-deep: #997a15;
--text-cream: #f4ebd9;
--text-muted: #bda892;
--spotlight-glow: radial-gradient(circle at 50% 0%, rgba(255, 230, 160, 0.28) 0%, rgba(255, 210, 120, 0.08) 45%, transparent 75%);
}
/* Master Architectural Container */
.sanctum-cabinet {
width: 100%;
max-width: 1280px;
margin: 0 auto;
background: linear-gradient(180deg, #2b170e 0%, #1c0e07 40%, #140904 100%);
border: 3px solid #3d2314;
border-radius: 12px;
box-shadow: 0 25px 60px rgba(0,0,0,0.9), inset 0 2px 4px rgba(255,220,150,0.2), inset 0 -2px 6px rgba(0,0,0,0.9);
position: relative;
overflow: hidden;
font-family: 'Cinzel', 'Georgia', serif;
color: var(--text-cream);
}
.sanctum-cabinet::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 4px);
pointer-events: none;
opacity: 0.7;
}
/* ZONE 1: TOP ARCHITECTURAL CORNICE / NAV BAR */
.cornice-header {
background: linear-gradient(180deg, #3f2314 0%, #28140a 60%, #1b0c05 100%);
border-bottom: 2px solid #5a341b;
box-shadow: 0 8px 16px rgba(0,0,0,0.7), inset 0 2px 3px rgba(255,230,170,0.25);
padding: 14px 28px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 10;
}
.cornice-left {
display: flex;
align-items: center;
gap: 16px;
}
.cornice-left .nav-burger {
cursor: pointer;
font-size: 20px;
color: var(--gold-mid);
background: rgba(0,0,0,0.4);
padding: 6px 12px;
border-radius: 4px;
border: 1px solid #4a2814;
}
.vh-brand-group {
display: flex;
flex-direction: column;
}
.main-brand-title {
font-size: 20px;
font-weight: 700;
letter-spacing: 2.5px;
color: var(--gold-bright);
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 12px rgba(212,175,55,0.3);
}
.brand-subline {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--text-muted);
text-transform: uppercase;
margin-top: 2px;
}
.cornice-search {
flex: 1;
max-width: 480px;
margin: 0 24px;
}
.search-input-wrap {
position: relative;
width: 100%;
}
.search-bevel {
width: 100%;
padding: 10px 18px 10px 42px;
background: #0f0704;
border: 1px solid #472613;
border-radius: 20px;
color: var(--text-cream);
font-family: inherit;
font-size: 13px;
box-shadow: inset 0 3px 6px rgba(0,0,0,0.9), 0 1px 2px rgba(255,255,255,0.08);
outline: none;
}
.search-bevel::placeholder {
color: #7d6b58;
font-style: italic;
}
.search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--gold-mid);
font-size: 14px;
}
.cornice-links {
display: flex;
align-items: center;
gap: 18px;
font-size: 12px;
letter-spacing: 1.5px;
}
.cornice-links a {
color: var(--text-cream) !important;
text-decoration: none;
}
.cornice-links a:hover {
color: var(--gold-bright) !important;
}
.cornice-links .btn-gold a {
background: linear-gradient(180deg, #b8860b 0%, #7d5904 100%);
padding: 6px 14px;
border-radius: 4px;
color: #fff !important;
font-weight: 600;
box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
/* SPOTLIGHT HOOD & OVERHEAD LAMPS (A1 STYLE) */
.spotlight-frieze {
position: relative;
padding: 24px 20px 10px 20px;
text-align: center;
background: linear-gradient(180deg, #24130b 0%, #180c06 100%);
border-bottom: 2px solid #3a1e0f;
}
.lamp-row {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
padding: 0 80px;
pointer-events: none;
}
.lamp {
width: 60px;
height: 8px;
background: radial-gradient(ellipse at center, #ffd700 0%, #b8860b 60%, #442500 100%);
border-radius: 0 0 10px 10px;
box-shadow: 0 0 14px 4px rgba(255, 215, 0, 0.45);
position: relative;
}
.lamp::after {
content: "";
position: absolute;
top: 8px;
left: -70px;
width: 200px;
height: 280px;
background: var(--spotlight-glow);
pointer-events: none;
}
.frieze-title {
font-size: 24px;
letter-spacing: 2px;
color: var(--gold-bright);
text-shadow: 0 2px 6px rgba(0,0,0,0.95);
margin-bottom: 4px;
}
.frieze-subtitle {
font-size: 12px;
letter-spacing: 2.5px;
color: var(--text-muted);
font-style: italic;
}
.shadowbox-body {
padding: 24px 24px;
}
/* ZONE 2: HERO STAGE */
.hero-sanctuary-stage {
display: grid;
grid-template-columns: 1fr 1.25fr 1fr;
gap: 20px;
background: linear-gradient(180deg, #180c06 0%, #100703 100%);
border: 3px solid #361e10;
border-radius: 8px;
padding: 20px;
box-shadow: inset 0 10px 25px rgba(0,0,0,0.9);
margin-bottom: 24px;
align-items: stretch;
}
.spotlight-card {
background: rgba(0, 0, 0, 0.45);
border: 1px solid #3b2011;
border-radius: 6px;
padding: 18px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
display: flex;
flex-direction: column;
}
.spotlight-tag {
font-size: 10px;
letter-spacing: 2px;
color: var(--gold-mid);
text-transform: uppercase;
margin-bottom: 6px;
}
.spotlight-headline a {
font-size: 16px;
color: var(--text-cream) !important;
font-weight: 600;
text-decoration: none;
}
.spotlight-body {
font-size: 12px;
color: #bcaaa4;
line-height: 1.5;
margin: 10px 0;
flex: 1;
}
.spotlight-footer a {
font-size: 11px;
color: var(--gold-bright) !important;
text-decoration: none;
}
.center-frame {
background: #090402;
border: 3px solid #4a2814;
border-radius: 6px;
padding: 18px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.95), inset 0 0 30px rgba(0,0,0,0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.sanctuary-center-badge {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--gold-mid);
text-transform: uppercase;
margin-bottom: 10px;
}
.vh-hero-title-link a {
text-decoration: none;
}
.vh-who-corner {
display: block;
font-size: 11px;
letter-spacing: 3px;
color: var(--gold-mid);
text-transform: uppercase;
}
.vh-main-title {
display: block;
font-size: 26px;
font-weight: 700;
letter-spacing: 2px;
color: var(--gold-bright);
}
.vh-gold-rule {
width: 80px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
margin: 10px auto;
}
.vh-description {
font-size: 12px;
color: var(--text-cream);
font-style: italic;
}
.multilingual-tape {
background: #140904;
border: 1px solid #361b0d;
padding: 6px 14px;
border-radius: 4px;
margin-top: 12px;
font-size: 11px;
color: var(--gold-bright);
letter-spacing: 1px;
}
/* ZONE 3: 3D RECESSED SHADOWBOX SHELF NICHES */
.niches-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 22px;
}
.wood-niche {
background: linear-gradient(180deg, #0e0603 0%, #170b05 100%);
border: 3px solid #381f11;
border-top: 4px solid #1a0c06;
border-radius: 6px;
padding: 22px 18px;
box-shadow: inset 0 8px 18px rgba(0,0,0,0.95), 0 4px 10px rgba(0,0,0,0.7), inset 0 0 20px rgba(0,0,0,0.8);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.2s, border-color 0.2s;
}
.wood-niche:hover {
transform: translateY(-2px);
border-color: #633b20;
}
.niche-lamp {
position: absolute;
top: 0;
width: 36px;
height: 5px;
background: #e2ba4d;
border-radius: 0 0 6px 6px;
box-shadow: 0 0 10px rgba(255,215,0,0.6);
}
.niche-icon-wrap {
font-size: 32px;
margin: 10px 0 10px 0;
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.8));
}
.niche-title {
font-size: 15px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--gold-bright);
text-transform: uppercase;
margin-bottom: 8px;
}
.niche-desc {
font-size: 12px;
line-height: 1.5;
color: var(--text-cream);
margin-bottom: 10px;
}
.niche-links {
font-size: 11px;
line-height: 1.6;
margin-bottom: 10px;
}
.niche-links a {
color: var(--text-cream) !important;
text-decoration: underline;
}
.niche-links a:hover {
color: var(--gold-bright) !important;
}
.niche-meta {
margin-top: auto;
font-size: 11px;
color: var(--gold-mid);
border-top: 1px solid #2d180c;
padding-top: 8px;
width: 100%;
letter-spacing: 1px;
}
/* SUPPLEMENTARY TAXONOMY SHELF */
.taxonomies-carved-shelf {
background: #110704;
border: 1px solid #361b0c;
border-radius: 6px;
padding: 12px 18px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
}
.shelf-label {
font-size: 11px;
letter-spacing: 1.5px;
color: var(--gold-mid);
}
.shelf-chips a {
display: inline-block;
background: #1d0f07;
border: 1px solid #422312;
border-radius: 4px;
padding: 4px 10px;
margin: 0 4px;
color: var(--text-cream) !important;
font-size: 11px;
text-decoration: none;
}
.shelf-chips a:hover {
border-color: var(--gold-mid);
color: var(--gold-bright) !important;
}
/* CARVED TIMELINE RIBBON */
.timeline-carved-ribbon {
background: linear-gradient(180deg, #1c0e07 0%, #120803 100%);
border: 2px solid #381f11;
border-radius: 6px;
padding: 16px 20px;
box-shadow: inset 0 4px 10px rgba(0,0,0,0.9);
}
.timeline-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.timeline-title {
font-size: 13px;
letter-spacing: 2px;
color: var(--gold-mid);
}
.timeline-span-badge {
font-size: 11px;
color: var(--gold-bright);
}
.timeline-years-bar {
display: flex;
justify-content: space-between;
background: #080301;
border: 1px solid #30170a;
border-radius: 20px;
padding: 8px 16px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
overflow-x: auto;
}
.vh-year {
font-size: 11px;
color: #9c8570;
cursor: pointer;
padding: 2px 6px;
transition: color 0.2s;
}
.vh-year:hover, .vh-year.active {
color: var(--gold-bright);
font-weight: 700;
}
/* ZONE 4: BASE PLINTH FOOTER */
.plinth-footer {
background: linear-gradient(180deg, #1d0f07 0%, #120803 100%);
border-top: 3px solid #3d2111;
padding: 20px 28px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: inset 0 3px 6px rgba(255,255,255,0.05);
}
.plinth-stat {
font-size: 13px;
color: var(--gold-bright);
letter-spacing: 1px;
}
.plinth-actions {
display: flex;
gap: 12px;
}
.plinth-btn a {
display: inline-block;
padding: 8px 16px;
background: #190b05;
border: 1px solid #4a2712;
border-radius: 4px;
color: var(--text-cream) !important;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.6);
}
.plinth-btn a:hover {
border-color: var(--gold-mid);
color: var(--gold-bright) !important;
}
@media (max-width: 900px) {
.niches-grid { grid-template-columns: 1fr; }
.hero-sanctuary-stage { grid-template-columns: 1fr; }
.taxonomies-carved-shelf { flex-direction: column; gap: 10px; }
.plinth-footer { flex-direction: column; gap: 14px; text-align: center; }
}
/* ==========================================================================
PERSISTENT TOP BAR: #345B63 SINGLE-ROW (BURGER, SEARCH, TITLE, USER)
========================================================================== */
/* 1. Full-Width Outer Banner Container (Strict #345B63) */
body.page-Main_Page .vector-header-container,
body.page-Main_Page #mw-head,
.vector-header-container {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 86px !important;
max-height: 96px !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 1000 !important;
box-sizing: border-box !important;
}
/* 2. Inner Flex Row: STRICT Single Horizontal Line */
.mw-header {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 86px !important;
max-height: 96px !important;
padding: 0 20px !important;
margin: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
position: relative !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* 3. CENTERED TITLE: Dead-Center On The Same Line */
#vanipedia-topbar-title,
.vanipedia-topbar-main-title {
position: static !important;
transform: none !important;
display: block !important;
font-family: 'Cinzel', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 700 !important;
letter-spacing: 1.8px !important;
color: #f5d77f !important;
text-decoration: none !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
white-space: nowrap !important;
line-height: 1.25 !important;
margin: 0 0 3px 0 !important;
padding: 0 !important;
pointer-events: none !important;
user-select: text !important;
}
#vanipedia-topbar-title {
pointer-events: none !important;
cursor: default !important;
user-select: text !important;
}
#vanipedia-topbar-title:hover {
color: #f5d77f !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
cursor: default !important;
}
/* 4. LEFT SECTION: Burger [ ≡ ] + Search In ONE Row */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
flex: 0 0 auto !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Force Burger Menu Dropdown to ALWAYS display on desktop */
.vector-header-start #vector-main-menu-dropdown {
display: flex !important;
align-items: center !important;
visibility: visible !important;
margin: 0 !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label,
.vector-header-start #vector-main-menu-dropdown .vector-main-menu-dropdown-toggle,
.vector-header-start #vector-main-menu-dropdown .cdx-button--fake-button {
color: #f5d77f !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 6px !important;
line-height: 1 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label:hover {
background-color: rgba(245, 215, 127, 0.15) !important;
border-radius: 4px !important;
}
/* HIGH-VISIBILITY GOLD FOR BURGER & ALL VECTOR ICONS */
.vector-header-container .vector-icon,
.vector-header-start .vector-icon,
.vector-header-end .vector-icon,
.mw-header .vector-icon {
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
filter: brightness(0) saturate(100%) invert(86%) sepia(26%) saturate(884%) hue-rotate(352deg) brightness(102%) contrast(96%) !important;
opacity: 1 !important;
visibility: visible !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
/* Hide duplicate site wordmark & tagline next to burger */
.vector-header-start .mw-logo-wordmark,
.vector-header-start .mw-logo-tagline,
.vector-header-start .mw-logo {
display: none !important;
}
/* Search Box Container on Left */
.vector-header-container #p-search,
.mw-header #p-search {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container #searchform,
.mw-header #searchform {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container .cdx-search-input,
.vector-header-container .vector-search-box-input,
.vector-header-container .cdx-text-input {
max-width: 260px !important;
height: 32px !important;
margin: 0 !important;
}
/* Refined Inset Search Input (Option 1: Harmonious Deep Sea Teal) */
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
background-color: #1f3e45 !important;
border: 1px solid rgba(245, 215, 127, 0.45) !important;
color: #ffffff !important;
border-radius: 18px !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
padding: 4px 12px 4px 30px !important;
font-size: 13px !important;
height: 30px !important;
line-height: 30px !important;
width: 180px !important;
transition: width 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important;
box-sizing: border-box !important;
}
.vector-header-container .cdx-text-input__input:focus,
.vector-header-container input[type="search"]:focus,
#searchInput:focus {
width: 240px !important;
background-color: #173036 !important;
border-color: #f5d77f !important;
box-shadow: 0 0 8px rgba(245, 215, 127, 0.4), inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
outline: none !important;
}
.vector-header-container .cdx-text-input__input::placeholder,
.vector-header-container input[type="search"]::placeholder,
#searchInput::placeholder {
color: #a5c4c9 !important;
font-style: italic !important;
}
.vector-header-container .cdx-text-input__icon,
.vector-header-container .vector-search-box-inner .vector-icon {
color: #f5d77f !important;
fill: #f5d77f !important;
}
/* Hide separate search submit buttons */
.vector-header-container .cdx-search-input__end-button,
.vector-header-container #searchButton,
.vector-header-container #mw-searchButton,
.vector-header-container .searchButton,
.vector-header-container input[type="submit"] {
display: none !important;
}
/* 5. RIGHT SECTION: User Part Fixed (No weird boxes, clean gold, unified dropdown) */
.vector-header-end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: nowrap !important;
gap: 8px !important;
flex: 0 0 auto !important;
height: 100% !important;
margin: 0 0 0 auto !important;
}
/* 5.1 Remove all clunky button box backgrounds and borders from top bar items */
.vector-header-end .cdx-button,
.vector-header-end .cdx-button--fake-button,
.vector-header-end .cdx-button--weight-quiet,
.vector-header-end .vector-dropdown-label,
.vector-header-end .vector-menu-heading,
.vector-header-end #p-personal,
.vector-header-end .vector-user-links,
.vector-header-end .vector-user-menu,
.vector-header-end .vector-menu,
.vector-header-end .vector-menu-content,
.vector-header-end #pt-userpage-2,
.vector-header-end #vector-user-links-dropdown {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* 5.2 Style username & header icons in clean warm gold (no boxes) */
.vector-header-end #pt-userpage-2,
.vector-header-end #pt-userpage-2 span,
.vector-header-end .vector-dropdown-label,
.vector-header-end .vector-user-menu-overflow .vector-dropdown-label {
color: #f5d77f !important;
fill: #f5d77f !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
white-space: nowrap !important;
padding: 4px 8px !important;
border-radius: 4px !important;
display: inline-flex !important;
align-items: center !important;
transition: background-color 0.2s ease, color 0.2s ease !important;
}
.vector-header-end #pt-userpage-2:hover,
.vector-header-end .vector-dropdown-label:hover {
background-color: rgba(245, 215, 127, 0.15) !important;
color: #ffffff !important;
}
/* 5.3 Desktop User Dropdown Menu (Strictly Matching image_a7f3ff.png) */
.vector-header-end .vector-dropdown-content {
background: #1f3e45 !important;
background-color: #1f3e45 !important;
border: 1.5px solid #b1873d !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
padding: 6px 0 !important;
min-width: 175px !important;
width: 180px !important;
overflow: visible !important;
}
.vector-header-end .vector-dropdown-content div,
.vector-header-end .vector-dropdown-content ul,
.vector-header-end .vector-dropdown-content .vector-menu-content {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.vector-header-end .vector-dropdown-content li {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
}
/* Ensure Talk (pt-mytalk) is visible in desktop dropdown */
.vector-header-end .vector-dropdown-content #pt-mytalk {
display: block !important;
visibility: visible !important;
}
/* Hide icons inside desktop user dropdown so it matches image_a7f3ff.png clean text */
.vector-header-end .vector-dropdown-content .vector-icon {
display: none !important;
}
/* Clean, compact, single-row links */
.vector-header-end .vector-dropdown-content a {
display: flex !important;
align-items: center !important;
color: #ffffff !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
line-height: 1.2 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
text-decoration: none !important;
box-sizing: border-box !important;
width: 100% !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
.vector-header-end .vector-dropdown-content a span {
display: inline !important;
padding: 0 !important;
margin: 0 !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
background: transparent !important;
}
.vector-header-end .vector-dropdown-content a:hover,
.vector-header-end .vector-dropdown-content a:focus,
.vector-header-end .vector-dropdown-content a:active {
background-color: #345B63 !important;
color: #f5d77f !important;
text-decoration: none !important;
}
/* Divider above Logout */
.vector-header-end .vector-dropdown-content #pt-logout,
.vector-header-end .vector-dropdown-content #p-user-menu-logout,
.vector-header-end .vector-dropdown-content .vector-user-menu-logout {
border-top: 1px solid rgba(177, 135, 61, 0.35) !important;
margin-top: 6px !important;
padding-top: 4px !important;
}
.vector-header-end .vector-dropdown-content #pt-logout a,
.vector-header-end .vector-dropdown-content #p-user-menu-logout a {
color: #ffffff !important;
}
.vector-header-end .vector-dropdown-content #pt-logout a:hover,
.vector-header-end .vector-dropdown-content #p-user-menu-logout a:hover {
background-color: #345B63 !important;
color: #fca5a5 !important;
}
/* 6. DISABLE ALL HOVER PREVIEWS / POPUPS IN TOP BAR */
.vector-header-container [title]:hover::after,
.vector-header-container [title]:hover::before,
.vector-header-container a[title]:hover::after,
.vector-header-container a[title]:hover::before,
.mw-header [title]:hover::after,
.mw-header [title]:hover::before,
.mw-header a[title]:hover::after,
.mw-header a[title]:hover::before {
display: none !important;
content: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 7. Sticky Header Support (Color: #345B63) */
.vector-sticky-header {
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
height: 48px !important;
}
.vector-sticky-header a,
.vector-sticky-header .vector-icon {
color: #f5d77f !important;
fill: #f5d77f !important;
}
/* 8. Main Page Adjustments: Clean Flush Under Top Bar */
body.page-Main_Page #vani-home .vh-top {
display: none !important;
}
body.page-Main_Page #vani-home .vh-photo-stage {
top: 0 !important;
}
/* ==========================================================================
ELIMINATE UNWANTED LIGHT-GREEN STRIP / TOOLBAR UNDER TOP BAR
========================================================================== */
body.page-Main_Page .vector-page-toolbar-container,
body.page-Main_Page .vector-page-toolbar,
body.page-Main_Page #siteNotice,
body.page-Main_Page #localNotice,
body.page-Main_Page #mw-page-base,
body.page-Main_Page #mw-head-base,
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 #p-lang-btn {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
visibility: hidden !important;
overflow: hidden !important;
}
/* Ensure no gap or background bleed between top bar and content on Main Page */
body.page-Main_Page .vector-header-container {
margin-bottom: 0 !important;
}
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 {
margin-top: 0 !important;
padding-top: 0 !important;
background: #f6f2e9 !important;
background-color: #f6f2e9 !important;
}
/* ==========================================================================
WHO IS SRILA PRABHUPADA & FOUNDER-ACARYA HERO ALIGNMENT
========================================================================== */
.vh-hero-title-wrap {
text-align: center !important;
margin: 16px auto 8px auto !important;
position: relative !important;
z-index: 2 !important;
}
.vh-hero-title-link {
text-decoration: none !important;
display: inline-block !important;
}
.vh-who-corner {
display: block !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: #b1873d !important; /* Temple Gold */
margin-bottom: 4px !important;
}
.vh-main-title {
display: block !important;
font-family: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif !important;
font-size: 46px !important;
font-weight: 700 !important;
line-height: 1.1 !important;
color: #1e353b !important; /* Deep Sacred Slate-Teal */
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}
.vh-founder-subline {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
margin: 6px auto 14px auto !important;
padding: 4px 18px !important;
background: rgba(177, 135, 61, 0.08) !important;
border: 1px solid rgba(177, 135, 61, 0.25) !important;
border-radius: 20px !important;
color: #345B63 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
font-style: italic !important;
letter-spacing: 0.5px !important;
}
.vh-founder-subline::before,
.vh-founder-subline::after {
content: "♦" !important;
font-size: 10px !important;
color: #b1873d !important;
}
/* ==========================================================================
PANORAMIC TIMELINE RIBBON (1896 – 1977) BETWEEN HERO & GATEWAYS
========================================================================== */
.vh-timeline-panoramic {
width: 100% !important;
max-width: 1400px !important;
margin: 18px auto 24px auto !important;
padding: 12px 16px !important;
background: #faf7f0 !important;
border-top: 1px solid rgba(177, 135, 61, 0.35) !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.35) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
border-radius: 4px !important;
box-sizing: border-box !important;
}
.vh-timeline-panoramic .vh-timeline-years {
top: 0 !important;
margin: 0 auto 12px auto !important;
gap: 14px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
.vh-timeline-panoramic .vh-year {
font-size: 16px !important;
font-weight: 600 !important;
padding: 5px 12px !important;
border-radius: 14px !important;
color: #345B63 !important;
background: rgba(255, 255, 255, 0.7) !important;
border: 1px solid rgba(177, 135, 61, 0.2) !important;
transition: all 0.2s ease !important;
}
.vh-timeline-panoramic .vh-year:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
transform: translateY(-2px) !important;
box-shadow: 0 3px 8px rgba(52, 91, 99, 0.25) !important;
}
.vh-timeline-panoramic .vh-year.is-active {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #b1873d !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
/* FORCE WARM PARCHMENT ON ALL MAIN PAGE CONTAINERS (KILL MINT GREEN BLEED) */
body.page-Main_Page,
html.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;
background-color: #f6f2e9 !important;
background-image: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
}
/* ==========================================================================
VANIPEDIA STRICT ZERO-SCROLL VIEWPORT-FIT SYSTEM (STEP 11)
========================================================================== */
/* 1. Strict Zero-Scroll Viewport Locking */
html.page-Main_Page,
body.page-Main_Page {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page .mw-page-container {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
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 {
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* 2. Master Canvas Vertical Rhythm (Auto-distributed inside single screen) */
body.page-Main_Page #vani-home {
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 8px !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 8px 18px 10px 18px !important;
box-sizing: border-box !important;
overflow: hidden !important;
background-color: transparent !important;
}
/* Base Card Styling */
.vh-card,
.vh-gateway,
.vh-quote-frame,
.vh-bottom-card {
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.35) !important;
border-radius: 6px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
box-sizing: border-box !important;
}
/* Card Header Ribbon */
.vh-card-header {
background: rgba(177, 135, 61, 0.1) !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.28) !important;
padding: 6px 12px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #b1873d !important;
}
.vh-card-header .vh-badge-icon {
font-size: 13px !important;
margin-right: 5px !important;
}
.vh-card-header .vh-badge-sub {
font-size: 9.5px !important;
letter-spacing: 1px !important;
color: #345B63 !important;
opacity: 0.85 !important;
}
.vh-card-body {
padding: 10px 14px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
box-sizing: border-box !important;
font-size: 13px !important;
line-height: 1.45 !important;
}
/* SECTION 1: HERO TRIAD (Compact) */
.vh-triad-grid {
display: grid !important;
grid-template-columns: 280px 1fr 280px !important;
gap: 14px !important;
align-items: stretch !important;
flex: 0 0 auto !important;
max-height: 235px !important;
}
/* Memories of Srila Prabhupada Card (Left) */
.vh-card-memories .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #1e353b !important;
text-decoration: none !important;
display: block !important;
margin-bottom: 6px !important;
}
.vh-card-memories .vh-card-snippet {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
color: #4a5568 !important;
flex: 1 1 auto !important;
}
.vh-card-actions {
margin-top: 8px !important;
}
.vh-btn-pill {
display: inline-flex !important;
align-items: center !important;
padding: 4px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #345B63 !important;
background: rgba(52, 91, 99, 0.08) !important;
border: 1px solid rgba(52, 91, 99, 0.28) !important;
border-radius: 14px !important;
transition: all 0.2s ease !important;
}
.vh-btn-pill:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
}
/* Center Sanctuary Frame */
.vh-card-sanctuary {
background: radial-gradient(circle at center, #ffffff 0%, #faf6ee 100%) !important;
padding: 10px 16px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.vh-card-sanctuary .vh-hero-title-wrap {
margin: 0 !important;
}
.vh-card-sanctuary .vh-who-corner {
display: block !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
color: #b1873d !important;
margin-bottom: 0px !important;
}
.vh-card-sanctuary .vh-main-title {
font-family: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif !important;
font-size: 34px !important;
font-weight: 700 !important;
line-height: 1 !important;
color: #1e353b !important;
}
/* Button below Srila Prabhupada: only "Founder-Ācārya of ISKCON", clickable wiki link */
.vh-card-sanctuary .vh-founder-subline {
display: inline-block !important;
margin: 3px auto 6px auto !important;
}
.vh-card-sanctuary .vh-founder-subline a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 3px 14px !important;
background: rgba(177, 135, 61, 0.12) !important;
border: 1px solid rgba(177, 135, 61, 0.4) !important;
border-radius: 16px !important;
color: #345B63 !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.vh-card-sanctuary .vh-founder-subline a:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
box-shadow: 0 2px 6px rgba(52, 91, 99, 0.3) !important;
}
/* Compact Sacred Portrait Oval */
.vh-portrait-wrapper {
margin: 2px auto 4px auto !important;
display: flex !important;
justify-content: center !important;
}
.vh-portrait-wrapper .vh-photo-stage {
width: 110px !important;
height: 110px !important;
border-radius: 50% !important;
border: 2.5px solid #b1873d !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
overflow: hidden !important;
position: relative !important;
background-color: #f4ebd9 !important;
}
.vh-card-sanctuary .vh-description {
font-family: 'Noto Serif', Georgia, serif !important;
font-style: italic !important;
font-size: 12px !important;
color: #576574 !important;
margin: 2px auto 0 auto !important;
max-width: 440px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* SECTION 2: CLEAN INTERACTIVE TIMELINE (No outer border/box rectangle) */
.vh-timeline-section {
position: relative !important;
top: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.vh-timeline-years {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 auto 6px auto !important;
padding: 0 !important;
position: static !important;
top: 0 !important;
}
.vh-timeline-years .vh-year {
padding: 3px 10px !important;
border-radius: 12px !important;
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.28) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: #345B63 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
line-height: 1.2 !important;
}
.vh-timeline-years .vh-year:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
transform: translateY(-1px) !important;
}
.vh-timeline-years .vh-year.is-active {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #b1873d !important;
font-weight: 700 !important;
}
/* Lifeline track window */
.vh-lifeline-window {
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.22) !important;
border-radius: 6px !important;
height: 80px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 auto !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.vh-timeline-track {
display: flex !important;
align-items: flex-start !important;
height: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
.vh-timeline-track::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 36px !important;
height: 1px !important;
background: rgba(177, 135, 61, 0.35) !important;
}
.vh-timeline-item {
flex: 0 0 200px !important;
padding: 6px 14px 0 !important;
box-sizing: border-box !important;
position: relative !important;
}
.vh-timeline-date {
font-size: 11px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 1.2 !important;
}
.vh-timeline-dot {
position: absolute !important;
top: 32px !important;
left: 14px !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #b1873d !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1px #b1873d !important;
}
.vh-timeline-text {
margin-top: 14px !important;
font-size: 11px !important;
line-height: 1.3 !important;
color: #1e293b !important;
max-width: 170px !important;
white-space: normal !important;
}
/* SECTION 3: 6 GATEWAYS GRID (Compact 6-Columns) */
.vh-gateways-frame {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 10px !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.vh-gateway {
padding: 8px 6px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.vh-gateway:hover {
transform: translateY(-2px) !important;
border-color: #b1873d !important;
box-shadow: 0 4px 12px rgba(177, 135, 61, 0.15) !important;
}
.vh-gw-icon-circle {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
background: rgba(177, 135, 61, 0.1) !important;
border: 1px solid rgba(177, 135, 61, 0.22) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 4px !important;
}
.vh-gateway .vh-icon {
font-size: 15px !important;
color: #b1873d !important;
}
.vh-gateway-title {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 13.5px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: #1e353b !important;
margin: 0 0 4px 0 !important;
width: 100% !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.2) !important;
padding-bottom: 2px !important;
}
.vh-gateway-links {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
width: 100% !important;
font-size: 11.5px !important;
}
.vh-gateway-links a {
color: #2c3e50 !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.vh-gateway-links a:hover {
color: #b1873d !important;
text-decoration: underline !important;
}
/* SECTION 4: QUOTE SCROLL (Slim Banner) */
.vh-quote-frame {
background: #faf6ee !important;
border: 1px solid rgba(177, 135, 61, 0.3) !important;
border-radius: 6px !important;
padding: 8px 24px !important;
margin: 0 auto !important;
text-align: center !important;
width: 100% !important;
max-width: 1000px !important;
flex: 0 0 auto !important;
}
.vh-quote-frame .vh-quote-inner {
font-family: 'Noto Serif', Georgia, serif !important;
font-style: italic !important;
font-size: 13.5px !important;
line-height: 1.4 !important;
color: #1e353b !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
}
.vh-quote-frame .vh-quote-text {
max-width: 750px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.vh-quote-frame .vh-quote-source {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-style: normal !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: #b1873d !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.vh-quote-mark {
color: rgba(177, 135, 61, 0.45) !important;
font-size: 24px !important;
line-height: 1 !important;
font-family: Georgia, serif !important;
}
/* SECTION 5: BOTTOM MODULES (Treasures & Network) */
.vh-bottom-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.vh-bottom-card {
padding: 0 !important;
overflow: hidden !important;
}
.vh-feature-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
padding: 8px 10px !important;
}
.vh-feature {
background: #faf7f0 !important;
border: 1px solid rgba(177, 135, 61, 0.2) !important;
border-radius: 4px !important;
padding: 6px 8px !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
font-size: 11px !important;
}
.vh-network-stats-grid {
display: flex !important;
justify-content: space-around !important;
gap: 6px !important;
padding: 8px 10px 4px 10px !important;
text-align: center !important;
}
.vh-network-stat {
flex: 1 1 0 !important;
background: #faf7f0 !important;
border: 1px solid rgba(177, 135, 61, 0.2) !important;
border-radius: 4px !important;
padding: 6px 2px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-decoration: none !important;
}
.vh-stat-num {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #1e353b !important;
}
.vh-stat-lbl {
font-size: 8.5px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #b1873d !important;
}
.vh-network-mission {
text-align: center !important;
padding: 4px 10px 6px 10px !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
font-style: italic !important;
color: #576574 !important;
}
/* ==========================================================================
THEMATIC TAXONOMY INDEX (4 SECTIONS) & PRABHUPADA IN MEDIA (STEP 12)
========================================================================== */
/* Section Heading */
.vh-section-header {
margin: 18px 0 10px 0 !important;
text-align: left !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.25) !important;
padding-bottom: 6px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.vh-section-badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background: #345B63 !important;
padding: 3px 8px !important;
border-radius: 4px !important;
}
.vh-section-heading {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16px !important;
letter-spacing: 1.2px !important;
color: #1e353b !important;
margin: 0 !important;
}
/* 4-Column Taxonomy Grid */
.vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
width: 100% !important;
margin-bottom: 16px !important;
}
.vh-card-tax {
display: flex !important;
flex-direction: column !important;
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.3) !important;
border-radius: 6px !important;
}
.vh-tax-spotlight-item {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
flex: 1 1 auto !important;
}
.vh-tax-item-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #1e353b !important;
text-decoration: none !important;
}
.vh-tax-item-name a:hover {
color: #b1873d !important;
text-decoration: underline !important;
}
.vh-tax-item-desc {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #4a5568 !important;
flex: 1 1 auto !important;
}
.vh-tax-item-link {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
color: #345B63 !important;
text-decoration: none !important;
margin-top: 6px !important;
display: inline-block !important;
}
.vh-tax-item-link:hover {
color: #b1873d !important;
text-decoration: underline !important;
}
/* Prabhupada in the Media Section */
.vh-card-media-section {
background: #faf7f0 !important;
margin-bottom: 16px !important;
}
.vh-media-body {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
padding: 12px 18px !important;
}
.vh-media-desc {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #334155 !important;
flex: 1 1 auto !important;
}
.vh-media-actions {
flex-shrink: 0 !important;
}
/* Allow smooth scrolling when full sections are present */
body.page-Main_Page {
overflow-y: auto !important;
}
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
body.page-Main_Page #vani-home {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
@media (max-width: 1024px) {
.vh-taxonomy-grid { grid-template-columns: repeat(2, 1fr) !important; }
.vh-media-body { flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 640px) {
.vh-taxonomy-grid { grid-template-columns: 1fr !important; }
}
/* Explicitly hide quote and bottom sections if any old cache or DOM remains */
.vh-quote-frame,
#vh-random-quote-wrap,
.vh-bottom-grid,
.vh-bottom-card,
.vh-card-treasures,
.vh-card-network {
display: none !important;
}
/* ==========================================================================
STEP 14: TOP BAR SEARCH ANCHORED LEFT + SACRED 3D ARCHITECTURAL STYLING
========================================================================== */
/* 1. TOP BAR LEFT ANCHOR FOR SEARCH */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
flex: 0 0 auto !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-start #vector-main-menu-dropdown {
order: 1 !important;
}
.vector-header-start #p-search,
.vector-header-container #p-search,
.mw-header #p-search {
order: 2 !important;
display: flex !important;
align-items: center !important;
margin: 0 0 0 4px !important;
padding: 0 !important;
}
/* 2. 3D CARDS (HERO TRIAD, GATEWAYS, TAXONOMY, MEDIA) */
.vh-card,
.vh-gateway,
.vh-card-tax,
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #faf8f4 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.32) !important;
border-top: 1px solid rgba(255, 255, 255, 0.95) !important;
border-bottom: 2.5px solid rgba(177, 135, 61, 0.45) !important;
border-radius: 8px !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 5px 15px rgba(30, 53, 59, 0.07),
0 10px 24px -5px rgba(30, 53, 59, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1) !important;
position: relative !important;
}
.vh-card:hover,
.vh-gateway:hover,
.vh-card-tax:hover,
.vh-card-media-section:hover {
transform: translateY(-3px) !important;
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.06),
0 10px 25px rgba(30, 53, 59, 0.12),
0 16px 32px -6px rgba(177, 135, 61, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
/* Card Header Plaques (Embossed Top Bar) */
.vh-card-header {
background: linear-gradient(180deg, #fbf9f4 0%, #f2ebdd 100%) !important;
border-bottom: 1.5px solid rgba(177, 135, 61, 0.3) !important;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(0, 0, 0, 0.03) !important;
border-top-left-radius: 7px !important;
border-top-right-radius: 7px !important;
}
/* Sanctuary Center Card (Elevated Sovereign Altar) */
.vh-card-sanctuary {
background: radial-gradient(circle at 50% 35%, #ffffff 0%, #faf6ec 65%, #f3ece0 100%) !important;
border: 1.5px solid rgba(177, 135, 61, 0.45) !important;
border-top: 1.5px solid rgba(255, 255, 255, 1) !important;
border-bottom: 3.5px solid rgba(177, 135, 61, 0.6) !important;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.06),
0 8px 24px rgba(30, 53, 59, 0.11),
0 16px 36px -6px rgba(177, 135, 61, 0.14),
inset 0 1px 0 #ffffff,
inset 0 0 20px rgba(177, 135, 61, 0.04) !important;
}
/* Sacred Portrait Medallion Frame */
.vh-portrait-wrapper .vh-photo-stage {
border: 3.5px solid #b1873d !important;
box-shadow:
0 6px 18px rgba(30, 53, 59, 0.22),
0 12px 28px rgba(0, 0, 0, 0.15),
inset 0 2px 4px rgba(255, 255, 255, 0.8),
inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.vh-portrait-wrapper .vh-photo-stage:hover {
transform: scale(1.03) !important;
box-shadow:
0 8px 24px rgba(30, 53, 59, 0.28),
0 16px 36px rgba(177, 135, 61, 0.3),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -3px 6px rgba(0, 0, 0, 0.45) !important;
}
/* 3D Gateways Icon Medallions */
.vh-gw-icon-circle {
background: linear-gradient(145deg, #ffffff 0%, #f6efe0 50%, #eadecb 100%) !important;
border: 1.5px solid #b1873d !important;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.10),
inset 0 1px 1px #ffffff,
inset 0 -1.5px 2px rgba(177, 135, 61, 0.45) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.vh-gateway:hover .vh-gw-icon-circle {
transform: scale(1.08) translateY(-1px) !important;
background: linear-gradient(145deg, #fdfbf7 0%, #f2e3c6 100%) !important;
box-shadow:
0 5px 10px rgba(177, 135, 61, 0.25),
inset 0 1px 1px #ffffff,
inset 0 -1.5px 2px rgba(177, 135, 61, 0.6) !important;
}
/* 3D Tactile Timeline Year Keys */
.vh-timeline-years .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #f4eee2 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.35) !important;
border-top: 1px solid rgba(255, 255, 255, 0.95) !important;
border-bottom: 2.5px solid rgba(177, 135, 61, 0.55) !important;
border-radius: 14px !important;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.07),
inset 0 1px 0 #ffffff !important;
transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.vh-timeline-years .vh-year:hover {
transform: translateY(-2px) !important;
border-bottom: 3.5px solid rgba(177, 135, 61, 0.75) !important;
box-shadow:
0 4px 10px rgba(177, 135, 61, 0.22),
inset 0 1px 0 #ffffff !important;
color: #1e353b !important;
}
.vh-timeline-years .vh-year.is-active {
background: linear-gradient(180deg, #345B63 0%, #1f373c 100%) !important;
color: #ffffff !important;
border: 1px solid #122124 !important;
border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
border-bottom: 2.5px solid #0d1719 !important;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.4),
0 2px 5px rgba(0, 0, 0, 0.15) !important;
}
/* Raised 3D Pill Action Buttons */
.vh-btn-pill,
.vh-founder-subline a,
.vh-tax-item-link {
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
transition: all 0.2s ease !important;
}
.vh-btn-pill {
background: linear-gradient(180deg, #3d6a74 0%, #28474e 100%) !important;
color: #ffffff !important;
border: 1px solid #1a2f34 !important;
border-bottom: 2px solid #0f1c1f !important;
border-radius: 16px !important;
padding: 4px 14px !important;
display: inline-block !important;
}
.vh-btn-pill:hover {
background: linear-gradient(180deg, #b1873d 0%, #916c2a 100%) !important;
border-color: #72531a !important;
border-bottom: 2.5px solid #553e13 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(177, 135, 61, 0.3) !important;
color: #ffffff !important;
}
.vh-founder-subline a {
background: linear-gradient(180deg, #ffffff 0%, #f6efe2 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.4) !important;
border-bottom: 2.5px solid rgba(177, 135, 61, 0.65) !important;
}
.vh-founder-subline a:hover {
background: linear-gradient(180deg, #345B63 0%, #213c42 100%) !important;
color: #ffffff !important;
border-color: #162a2e !important;
border-bottom: 2.5px solid #0b1517 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(30, 53, 59, 0.25) !important;
}
/* 3D Lifeline Track (Carved Groove with Illuminated Bar) */
.vh-lifeline {
background: linear-gradient(180deg, #e4ded0 0%, #ede7db 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.25) !important;
border-bottom: 1px solid #ffffff !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.10) !important;
border-radius: 12px !important;
}
/* ==========================================================================
STEP 15: "SOLID" ARCHITECTURAL PRESENCE & EMBOSSED 3D DEPTH
========================================================================== */
/* 1. SOLID CARD ARCHITECTURE (SUBSTANTIAL GROUNDED PRESENCE) */
.vh-card,
.vh-gateway,
.vh-card-tax,
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #fbf9f4 60%, #f5efe2 100%) !important;
border: 1.5px solid #c09b4d !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #8e6b22 !important;
border-radius: 8px !important;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 8px 20px rgba(24, 38, 35, 0.12),
0 16px 32px -4px rgba(24, 38, 35, 0.14),
inset 0 1px 0 #ffffff,
inset 0 -1px 0 rgba(192, 155, 77, 0.2) !important;
transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1), border-color 0.22s ease !important;
position: relative !important;
}
.vh-card:hover,
.vh-gateway:hover,
.vh-card-tax:hover,
.vh-card-media-section:hover {
transform: translateY(-4px) !important;
border-color: #d4ab55 !important;
border-bottom: 4.5px solid #7a5818 !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.10),
0 14px 28px rgba(24, 38, 35, 0.18),
0 24px 42px -6px rgba(177, 135, 61, 0.25),
inset 0 1px 0 #ffffff !important;
}
/* 2. SOLID EMBOSSED CARD HEADER (STONE/METAL LINTEL) */
.vh-card-header {
background: linear-gradient(180deg, #faf6ee 0%, #ebe0ca 100%) !important;
border-bottom: 2px solid #b89348 !important;
box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.05) !important;
border-top-left-radius: 6.5px !important;
border-top-right-radius: 6.5px !important;
padding: 8px 14px !important;
}
.vh-badge-text {
font-weight: 800 !important;
letter-spacing: 1.6px !important;
color: #725215 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.vh-badge-sub {
font-weight: 700 !important;
color: #55442a !important;
background: rgba(177, 135, 61, 0.16) !important;
border: 1px solid rgba(177, 135, 61, 0.35) !important;
border-radius: 4px !important;
padding: 2px 7px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
/* 3. SANCTUARY CENTER CARD (SOVEREIGN REVERENTIAL ALTAR) */
.vh-card-sanctuary {
background: radial-gradient(circle at 50% 32%, #ffffff 0%, #fbf6ec 55%, #f0e6d2 100%) !important;
border: 2px solid #b1873d !important;
border-top: 2px solid #ffffff !important;
border-bottom: 4.5px solid #785414 !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.09),
0 12px 28px rgba(24, 38, 35, 0.16),
0 22px 44px -8px rgba(177, 135, 61, 0.22),
inset 0 1px 0 #ffffff,
inset 0 0 24px rgba(177, 135, 61, 0.08) !important;
}
.vh-card-sanctuary .vh-main-title {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}
/* 4. SOLID CAST GOLD PORTRAIT MEDALLION */
.vh-portrait-wrapper .vh-photo-stage {
border: 4px solid #b1873d !important;
box-shadow:
0 8px 24px rgba(20, 35, 32, 0.32),
0 16px 36px rgba(0, 0, 0, 0.22),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -4px 8px rgba(0, 0, 0, 0.5) !important;
}
.vh-portrait-wrapper .vh-photo-stage:hover {
transform: scale(1.04) !important;
border-color: #c99c45 !important;
box-shadow:
0 12px 32px rgba(20, 35, 32, 0.40),
0 20px 45px rgba(177, 135, 61, 0.35),
inset 0 2px 4px rgba(255, 255, 255, 1),
inset 0 -4px 8px rgba(0, 0, 0, 0.55) !important;
}
/* 5. SOLID GATEWAYS WITH SCULPTED BRONZE/GOLD MEDALLIONS */
.vh-gateway {
padding: 14px 10px 12px 10px !important;
}
.vh-gw-icon-circle {
width: 38px !important;
height: 38px !important;
background: linear-gradient(135deg, #ffffff 0%, #eedfc7 50%, #d6ba8f 100%) !important;
border: 2px solid #b1873d !important;
border-top-color: #ffffff !important;
border-bottom-color: #825f18 !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.14),
inset 0 1px 1.5px #ffffff,
inset 0 -2px 3px rgba(130, 95, 30, 0.5) !important;
}
.vh-gateway:hover .vh-gw-icon-circle {
transform: scale(1.1) translateY(-2px) !important;
background: linear-gradient(135deg, #ffffff 0%, #f7ebd5 50%, #e5cb9e 100%) !important;
border-color: #c49d48 !important;
box-shadow:
0 6px 14px rgba(177, 135, 61, 0.35),
inset 0 1px 2px #ffffff,
inset 0 -2px 4px rgba(130, 95, 30, 0.6) !important;
}
.vh-gateway-title {
font-size: 14px !important;
font-weight: 700 !important;
color: #14282c !important;
letter-spacing: 1.4px !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
margin-top: 6px !important;
}
/* 6. SOLID TACTILE TIMELINE YEAR BUTTONS */
.vh-timeline-years .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #efe7d6 100%) !important;
border: 1.5px solid #b89348 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #785414 !important;
border-radius: 14px !important;
font-weight: 700 !important;
color: #213c42 !important;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.10),
inset 0 1px 0 #ffffff !important;
padding: 4px 12px !important;
}
.vh-timeline-years .vh-year:hover {
transform: translateY(-2.5px) !important;
border-color: #cda24e !important;
border-bottom: 4.5px solid #63430c !important;
box-shadow:
0 6px 14px rgba(177, 135, 61, 0.28),
inset 0 1px 0 #ffffff !important;
color: #0b1a1c !important;
}
.vh-timeline-years .vh-year.is-active {
background: linear-gradient(180deg, #2b4f57 0%, #172c30 100%) !important;
color: #ffffff !important;
border: 1.5px solid #0d191c !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.4) !important;
border-bottom: 3.5px solid #060c0d !important;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.5),
0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
/* 7. SOLID CARVED LIFELINE TRACK */
.vh-lifeline {
background: linear-gradient(180deg, #ded6c4 0%, #e8e1d3 100%) !important;
border: 1.5px solid #a8843c !important;
border-top-color: #8c6a26 !important;
border-bottom-color: #ffffff !important;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16) !important;
border-radius: 12px !important;
}
/* 8. SOLID 3D ACTION PILL BUTTONS */
.vh-btn-pill {
background: linear-gradient(180deg, #376069 0%, #20393f 100%) !important;
color: #ffffff !important;
border: 1.5px solid #142529 !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
border-bottom: 3px solid #0a1315 !important;
border-radius: 16px !important;
padding: 5px 16px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
box-shadow:
0 3px 7px rgba(0, 0, 0, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
}
.vh-btn-pill:hover {
background: linear-gradient(180deg, #b88e40 0%, #8c661d 100%) !important;
border-color: #61440d !important;
border-top-color: rgba(255, 255, 255, 0.5) !important;
border-bottom: 3.5px solid #432e08 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 14px rgba(177, 135, 61, 0.38) !important;
color: #ffffff !important;
}
.vh-founder-subline a {
background: linear-gradient(180deg, #ffffff 0%, #f4ebd9 100%) !important;
border: 1.5px solid #b89348 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3px solid #785414 !important;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff !important;
}
.vh-founder-subline a:hover {
background: linear-gradient(180deg, #345B63 0%, #1b3237 100%) !important;
color: #ffffff !important;
border-color: #0e1e21 !important;
border-top-color: rgba(255, 255, 255, 0.4) !important;
border-bottom: 3.5px solid #050b0c !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 14px rgba(30, 53, 59, 0.3) !important;
}
/* 9. SOLID DEDICATED MEDIA ARCHIVES SECTION */
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #faf6ee 100%) !important;
border: 1.5px solid #b89348 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #785414 !important;
margin-top: 8px !important;
margin-bottom: 24px !important;
}
.vh-media-desc {
font-size: 13.5px !important;
font-weight: 500 !important;
color: #273b40 !important;
}
/* 10. Hide THEMATIC TAXONOMY INDEX announcement banner from old cache */
.vh-section-header,
.vh-section-badge,
.vh-section-heading {
display: none !important;
}
/* Explicitly hide the 6 gateways frame if any cache remains */
.vh-gateways-frame,
.vh-gateway,
.vh-gw-icon-circle {
display: none !important;
}
/* ==========================================================================
SAFE NO-SCROLL DASHBOARD & ZERO-OVERLAP ARCHITECTURE (STEP 18)
========================================================================== */
/* 1. PREVENT SCROLLING ON MAIN PAGE CLEANLY WITHOUT BREAKING VECTOR INTERNALS */
body.page-Main_Page {
overflow-y: hidden !important;
overflow-x: hidden !important;
}
/* 2. THE MASTER DASHBOARD CONTAINER (FITS SCREEN EXACTLY) */
body.page-Main_Page #vani-home {
height: calc(100vh - 56px) !important;
max-height: calc(100vh - 56px) !important;
box-sizing: border-box !important;
padding: 6px 16px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 6px !important;
overflow: hidden !important;
position: relative !important;
}
/* Neutralize old legacy absolute / conflicting rules */
.vh-intro,
.vh-now,
.vh-main,
.vh-gateways,
.vh-who-link {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
display: block !important;
}
/* 3. SECTION 1: HERO TRIAD */
.vh-triad-grid {
flex: 1 1 37% !important;
max-height: 38vh !important;
min-height: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1.15fr 1fr !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.vh-triad-grid .vh-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.vh-card-header {
flex: 0 0 auto !important;
padding: 5px 10px !important;
}
.vh-card-body {
flex: 1 1 auto !important;
padding: 6px 10px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Center Card: Sanctuary Altar */
.vh-card-sanctuary {
padding: 6px 12px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
}
.vh-card-sanctuary .vh-hero-title-wrap {
margin: 0 !important;
line-height: 1 !important;
}
.vh-card-sanctuary .vh-who-corner {
position: static !important;
display: block !important;
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #b1873d !important;
margin: 0 auto 2px auto !important;
}
.vh-card-sanctuary .vh-main-title {
font-size: 24px !important;
line-height: 1.1 !important;
font-weight: 700 !important;
color: #123f38 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
}
.vh-card-sanctuary .vh-founder-subline {
margin: 2px auto !important;
}
.vh-card-sanctuary .vh-founder-subline a {
padding: 2px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
}
.vh-portrait-wrapper {
margin: 2px auto !important;
}
.vh-portrait-wrapper .vh-photo-stage {
width: 85px !important;
height: 85px !important;
}
.vh-card-sanctuary .vh-gold-rule {
width: 28px !important;
height: 2px !important;
margin: 2px auto !important;
background: #b1873d !important;
}
.vh-card-sanctuary .vh-description {
position: static !important;
width: auto !important;
max-width: 90% !important;
min-height: 0 !important;
font-size: 13px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* 4. SECTION 2: INTERACTIVE LIFE TIMELINE */
.vh-timeline-section {
flex: 0 0 auto !important;
height: 62px !important;
max-height: 62px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
position: relative !important;
}
.vh-timeline-years {
position: static !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
margin: 0 0 3px 0 !important;
padding: 0 !important;
width: 100% !important;
white-space: nowrap !important;
}
.vh-timeline-years .vh-year {
padding: 2px 8px !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
.vh-lifeline-window {
position: relative !important;
height: 30px !important;
max-height: 30px !important;
overflow: hidden !important;
}
.vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
/* 5. SECTION 3: THEMATIC TAXONOMY (4 CARDS) */
.vh-taxonomy-section {
flex: 1 1 37% !important;
max-height: 39vh !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 10px !important;
height: 100% !important;
width: 100% !important;
margin: 0 !important;
}
.vh-card-tax {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.vh-card-tax .vh-card-header {
padding: 4px 8px !important;
}
.vh-card-tax .vh-card-body {
padding: 5px 8px !important;
}
.vh-tax-spotlight-item {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.vh-tax-item-name a {
font-size: 13.5px !important;
font-weight: 700 !important;
}
.vh-tax-item-desc {
font-size: 11px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vh-tax-item-link {
font-size: 10px !important;
margin-top: auto !important;
}
/* 6. SECTION 4: PRABHUPĀDA IN THE MEDIA (COMPACT HORIZONTAL BAR 42px) */
.vh-card-media-section {
flex: 0 0 auto !important;
height: 42px !important;
max-height: 42px !important;
margin: 0 !important;
padding: 0 14px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
box-sizing: border-box !important;
}
.vh-card-media-section .vh-card-header {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.vh-card-media-section .vh-media-body {
padding: 0 !important;
flex: 1 1 auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
}
.vh-card-media-section .vh-media-desc {
font-size: 11.5px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: #273b40 !important;
flex: 1 1 auto !important;
}
.vh-card-media-section .vh-media-actions {
flex-shrink: 0 !important;
}
.vh-card-media-section .vh-btn-pill {
padding: 3px 12px !important;
font-size: 10px !important;
}
/* ==========================================================================
STEP 19: FULL-WIDTH VIEW + TOP-BAR TEAL (#345B63) BORDERS & SHADOWS
+ REFINED COMPACT SIZING & EXPANDED AIRY SPACING
========================================================================== */
/* 1. FULL WIDTH VIEW (EXPAND TO 100% SCREEN WIDTH) */
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
box-sizing: border-box !important;
padding: 10px 24px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
overflow: hidden !important;
position: relative !important;
}
/* 2. TEAL (#345B63) BORDERS & MULTI-STOP TEAL SHADOWS ACROSS ALL CARDS */
.vh-card,
.vh-gateway,
.vh-card-tax,
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 65%, #f2f7f7 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16),
inset 0 1px 0 #ffffff !important;
transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1), border-color 0.22s ease !important;
position: relative !important;
}
.vh-card:hover,
.vh-gateway:hover,
.vh-card-tax:hover,
.vh-card-media-section:hover {
transform: translateY(-3px) !important;
border-color: #43727c !important;
border-bottom: 4.5px solid #1a2f34 !important;
box-shadow:
0 4px 8px rgba(52, 91, 99, 0.12),
0 12px 26px rgba(52, 91, 99, 0.22),
0 22px 38px -6px rgba(52, 91, 99, 0.26),
inset 0 1px 0 #ffffff !important;
}
/* Card Header Lintels (Teal Borders & Toned Accents) */
.vh-card-header {
background: linear-gradient(180deg, #ffffff 0%, #eaf1f2 100%) !important;
border-bottom: 2px solid #345B63 !important;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(52, 91, 99, 0.06) !important;
border-top-left-radius: 6.5px !important;
border-top-right-radius: 6.5px !important;
padding: 5px 12px !important;
}
.vh-badge-text {
font-weight: 800 !important;
letter-spacing: 1.5px !important;
color: #345B63 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.vh-badge-sub {
font-weight: 700 !important;
color: #233e44 !important;
background: rgba(52, 91, 99, 0.12) !important;
border: 1px solid rgba(52, 91, 99, 0.35) !important;
border-radius: 4px !important;
padding: 2px 7px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
/* 3. SANCTUARY ALAR CARD (REFINED 3D TEAL EMBOSSING) */
.vh-card-sanctuary {
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
border: 2px solid #345B63 !important;
border-top: 2px solid #ffffff !important;
border-bottom: 4.5px solid #1a2f34 !important;
box-shadow:
0 4px 8px rgba(52, 91, 99, 0.10),
0 12px 26px rgba(52, 91, 99, 0.18),
0 22px 40px -6px rgba(52, 91, 99, 0.22),
inset 0 1px 0 #ffffff,
inset 0 0 24px rgba(52, 91, 99, 0.05) !important;
padding: 6px 14px !important;
}
/* Sacred Portrait Medallion Bezel in #345B63 */
.vh-portrait-wrapper .vh-photo-stage {
width: 80px !important;
height: 80px !important;
border: 3.5px solid #345B63 !important;
box-shadow:
0 6px 18px rgba(52, 91, 99, 0.35),
0 12px 26px rgba(26, 47, 52, 0.25),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -3px 6px rgba(26, 47, 52, 0.5) !important;
}
.vh-portrait-wrapper .vh-photo-stage:hover {
transform: scale(1.04) !important;
border-color: #4a7d87 !important;
box-shadow:
0 8px 22px rgba(52, 91, 99, 0.45),
0 16px 32px rgba(26, 47, 52, 0.35),
inset 0 2px 4px rgba(255, 255, 255, 1),
inset 0 -3px 6px rgba(26, 47, 52, 0.55) !important;
}
/* Sanctuary Title & Subtitle */
.vh-card-sanctuary .vh-main-title {
font-size: 22px !important;
color: #123f38 !important;
}
.vh-card-sanctuary .vh-who-corner {
color: #345B63 !important;
}
.vh-card-sanctuary .vh-gold-rule {
background: #345B63 !important;
width: 26px !important;
height: 2px !important;
margin: 2px auto !important;
}
.vh-card-sanctuary .vh-description {
font-size: 12.5px !important;
color: #345B63 !important;
line-height: 1.25 !important;
}
/* 4. BIG RECTANGLE ELEMENTS ARE SMALLER WITH BIGGER SPACE BETWEEN THEM */
/* Section 1: Hero Triad Grid (Reduced Height, Expanded 20px Gutter) */
.vh-triad-grid {
flex: 0 0 220px !important;
height: 220px !important;
max-height: 220px !important;
gap: 20px !important;
margin: 0 !important;
}
.vh-triad-grid .vh-card {
height: 220px !important;
max-height: 220px !important;
}
/* Section 2: Timeline (Sleek Key Row & Track, Teal Borders) */
.vh-timeline-section {
flex: 0 0 58px !important;
height: 58px !important;
max-height: 58px !important;
margin: 0 !important;
}
.vh-timeline-years {
gap: 8px !important;
margin: 0 0 3px 0 !important;
}
.vh-timeline-years .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3px solid #233e44 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 2px 9px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.12), inset 0 1px 0 #ffffff !important;
}
.vh-timeline-years .vh-year:hover {
transform: translateY(-2px) !important;
border-color: #4a7d87 !important;
border-bottom: 3.5px solid #1a2f34 !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.25), inset 0 1px 0 #ffffff !important;
color: #123f38 !important;
}
.vh-timeline-years .vh-year.is-active {
background: linear-gradient(180deg, #345B63 0%, #1e353b 100%) !important;
color: #ffffff !important;
border: 1.5px solid #142529 !important;
border-bottom: 3px solid #0b1517 !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(52, 91, 99, 0.2) !important;
}
.vh-lifeline {
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-bottom-color: #ffffff !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.18) !important;
}
.vh-timeline-dot {
background: #345B63 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1px #345B63 !important;
}
/* Section 3: Thematic Taxonomy Grid (Reduced Height, Expanded 18px Gutter) */
.vh-taxonomy-section {
flex: 0 0 170px !important;
height: 170px !important;
max-height: 170px !important;
margin: 0 !important;
}
.vh-taxonomy-grid {
gap: 18px !important;
height: 100% !important;
}
.vh-card-tax {
height: 170px !important;
max-height: 170px !important;
}
.vh-tax-item-name a {
font-size: 13.5px !important;
color: #1e353b !important;
}
.vh-tax-item-name a:hover {
color: #345B63 !important;
}
.vh-tax-item-desc {
font-size: 11px !important;
line-height: 1.35 !important;
color: #3e565c !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vh-tax-item-link {
color: #345B63 !important;
}
/* Section 4: Media Bar (Compact 40px Single-Line Strip) */
.vh-card-media-section {
flex: 0 0 40px !important;
height: 40px !important;
max-height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
}
.vh-media-desc {
font-size: 12px !important;
color: #345B63 !important;
font-weight: 500 !important;
}
/* 5. 3D PILL BUTTONS WITH TEAL THEME */
.vh-btn-pill {
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border: 1.5px solid #1a2f34 !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.4) !important;
border-bottom: 2.5px solid #0f1c1f !important;
border-radius: 14px !important;
padding: 3px 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.vh-btn-pill:hover {
background: linear-gradient(180deg, #4c828d 0%, #2e545b 100%) !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.35) !important;
color: #ffffff !important;
}
.vh-founder-subline a {
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.12), inset 0 1px 0 #ffffff !important;
}
.vh-founder-subline a:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.30) !important;
}
/* ==========================================================================
STEP 20: NARROWER RECTANGLES + COMPLETE FAULT CORRECTIONS
========================================================================== */
/* 1. NARROWER PROPORTIONED CONTAINER (NO LONGER ENDLESSLY WIDE) */
body.page-Main_Page #vani-home {
max-width: 1260px !important;
width: 95% !important;
margin: 0 auto !important;
padding: 8px 16px !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* 2. SANCTUARY CENTER CARD FIXES (PROPER HIERARCHY, NO WEIRD DOUBLE BOXES) */
.vh-card-sanctuary {
padding: 8px 14px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
}
.vh-sanctuary-title {
margin: 0 !important;
line-height: 1.1 !important;
text-align: center !important;
}
.vh-sanctuary-title a {
text-decoration: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.vh-who-sub {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
text-transform: uppercase !important;
margin-bottom: 1px !important;
}
.vh-who-main {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 22px !important;
font-weight: 700 !important;
color: #123f38 !important;
letter-spacing: 0.5px !important;
}
/* Hide legacy floating who-corner and founder subline balloon boxes */
.vh-hero-title-wrap,
.vh-founder-subline::before,
.vh-founder-subline::after {
content: none !important;
display: none !important;
}
.vh-founder-subline {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Dedicated button below portrait */
.vh-founder-btn-wrap {
margin: 2px auto !important;
}
.vh-btn-founder {
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 2px 14px !important;
border-radius: 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.12), inset 0 1px 0 #ffffff !important;
display: inline-block !important;
}
.vh-btn-founder:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.30) !important;
}
/* Portrait */
.vh-portrait-wrapper {
margin: 2px auto !important;
}
.vh-portrait-wrapper .vh-photo-stage {
width: 78px !important;
height: 78px !important;
border: 3px solid #345B63 !important;
box-shadow: 0 6px 16px rgba(52, 91, 99, 0.32), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(26, 47, 52, 0.5) !important;
}
.vh-gold-rule {
width: 26px !important;
height: 2px !important;
margin: 2px auto !important;
background: #345B63 !important;
}
.vh-description {
font-size: 12px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 !important;
padding: 0 !important;
max-width: 90% !important;
}
/* 3. TIMELINE LAYOUT CORRECTIONS (CLEAN & LEGIBLE TRACK) */
.vh-timeline-section {
flex: 0 0 64px !important;
height: 64px !important;
max-height: 64px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
margin: 0 !important;
padding: 0 !important;
}
.vh-timeline-years {
gap: 8px !important;
margin: 0 !important;
}
.vh-lifeline-window {
height: 34px !important;
max-height: 34px !important;
position: relative !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
}
.vh-lifeline {
height: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
.vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.vh-timeline-event {
display: inline-flex !important;
align-items: center !important;
padding: 0 10px !important;
font-size: 11px !important;
color: #1e353b !important;
white-space: nowrap !important;
}
/* 4. CLEAN MEDIA SECTION (SINGLE HORIZONTAL FLEX ROW 44px) */
.vh-card-media-section {
flex: 0 0 44px !important;
height: 44px !important;
max-height: 44px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 18px !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.vh-media-left {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.vh-media-left .vh-badge-text a {
font-size: 12px !important;
font-weight: 800 !important;
color: #345B63 !important;
letter-spacing: 1px !important;
text-decoration: none !important;
}
.vh-media-center {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 14px !important;
}
.vh-media-right {
flex-shrink: 0 !important;
}
.vh-media-right .vh-btn-pill {
padding: 3px 14px !important;
font-size: 11px !important;
}
/* 5. NARROWER HERO & TAXONOMY GRIDS WITH AMPLE SPACING */
.vh-triad-grid {
flex: 0 0 215px !important;
height: 215px !important;
max-height: 215px !important;
gap: 18px !important;
}
.vh-triad-grid .vh-card {
height: 215px !important;
max-height: 215px !important;
}
.vh-taxonomy-section {
flex: 0 0 165px !important;
height: 165px !important;
max-height: 165px !important;
}
.vh-taxonomy-grid {
gap: 16px !important;
height: 100% !important;
}
.vh-card-tax {
height: 165px !important;
max-height: 165px !important;
}
/* ==========================================================================
STEP 21: NARROW RECTANGLES (1140px) + COMPLETE FAULT CORRECTIONS
========================================================================== */
/* 1. FORCE NARROWER DASHBOARD WIDTH (OVERRIDE ALL PREVIOUS MIN-WIDTHS) */
body.page-Main_Page #vani-home {
width: 90% !important;
max-width: 1140px !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 8px 16px !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
overflow: hidden !important;
}
/* 2. NARROW HERO TRIAD (3 CARDS ~360px EACH) */
.vh-triad-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
flex: 0 0 215px !important;
height: 215px !important;
max-height: 215px !important;
width: 100% !important;
margin: 0 !important;
}
.vh-triad-grid .vh-card {
height: 215px !important;
max-height: 215px !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 65%, #f2f7f7 100%) !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16),
inset 0 1px 0 #ffffff !important;
overflow: hidden !important;
}
/* 3. SANCTUARY CENTER CARD (COMPLETELY REBUILT ARCHITECTURE) */
.vh-sanctuary-card {
padding: 8px 14px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
}
.vh-sanctuary-header-text {
margin: 0 !important;
line-height: 1 !important;
text-align: center !important;
}
.vh-sanctuary-who {
display: block !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
}
.vh-sanctuary-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 21px !important;
font-weight: 700 !important;
color: #123f38 !important;
text-decoration: none !important;
letter-spacing: 0.5px !important;
}
.vh-sanctuary-portrait-box {
margin: 2px auto !important;
}
.vh-sanctuary-portrait-box .vh-photo-stage {
width: 76px !important;
height: 76px !important;
border-radius: 50% !important;
border: 3px solid #345B63 !important;
box-shadow:
0 4px 12px rgba(52, 91, 99, 0.35),
inset 0 2px 4px #ffffff,
inset 0 -2px 4px rgba(26, 47, 52, 0.5) !important;
overflow: hidden !important;
position: relative !important;
}
.vh-sanctuary-btn-box {
margin: 2px auto !important;
}
.vh-sanctuary-founder-pill {
display: inline-block !important;
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 2px 14px !important;
border-radius: 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.15), inset 0 1px 0 #ffffff !important;
text-decoration: none !important;
}
.vh-sanctuary-founder-pill:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1px) !important;
}
.vh-sanctuary-rule {
width: 28px !important;
height: 2px !important;
background: #345B63 !important;
margin: 2px auto !important;
}
.vh-sanctuary-subtitle {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 !important;
text-align: center !important;
}
/* 4. NARROW THEMATIC TAXONOMY (4 CARDS ~270px EACH) */
.vh-taxonomy-section {
flex: 0 0 165px !important;
height: 165px !important;
max-height: 165px !important;
width: 100% !important;
margin: 0 !important;
}
.vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
height: 100% !important;
width: 100% !important;
}
.vh-card-tax {
height: 165px !important;
max-height: 165px !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 65%, #f2f7f7 100%) !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16),
inset 0 1px 0 #ffffff !important;
}
/* 5. CLEAN MEDIA BAR (HORIZONTAL SINGLE LINE) */
.vh-media-bar {
flex: 0 0 44px !important;
height: 44px !important;
max-height: 44px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 18px !important;
background: linear-gradient(180deg, #ffffff 0%, #f2f7f7 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3px solid #233e44 !important;
border-radius: 8px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.10) !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.vh-media-bar-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.vh-media-bar-name a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
color: #345B63 !important;
letter-spacing: 1px !important;
text-decoration: none !important;
}
.vh-media-bar-desc {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 16px !important;
}
.vh-media-bar-btn {
flex-shrink: 0 !important;
}
/* ==========================================================================
STEP 22: FULL-WIDTH VIEW + NARROWER CARDS + VISIBLE TOP BORDER + ZERO CUTOUTS
========================================================================== */
/* 1. FULL WIDTH PAGE VIEW (NO ARTIFICIAL MAX-WIDTH ON CONTAINER) */
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
margin: 0 !important;
padding: 10px 30px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
overflow: hidden !important;
}
/* 2. VISIBLE TOP BORDER ON ALL RECTANGLE ELEMENTS (NO MORE MISSING TOP BORDER!) */
.vh-card,
.vh-card-tax,
.vh-sanctuary-card,
.vh-card-memories,
.vh-card-article,
.vh-media-bar {
border: 2px solid #345B63 !important;
border-top: 2px solid #345B63 !important; /* CRITICAL: EXPLICIT VISIBLE TOP BORDER */
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16) !important;
}
.vh-card-header {
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
border-bottom: 2px solid #345B63 !important;
padding: 6px 12px !important;
}
/* 3. NARROWER RECTANGLES WITH GENEROUS GAPS (PAGE IS FULL WIDTH, CARDS ARE NARROWER) */
.vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 28px !important;
flex: 0 0 230px !important;
height: 230px !important;
max-height: 230px !important;
width: 100% !important;
margin: 0 auto !important;
}
.vh-triad-grid .vh-card {
flex: 1 1 0 !important;
max-width: 400px !important; /* NARROWER RECTANGLES */
height: 230px !important;
max-height: 230px !important;
}
/* 4. SANCTUARY CENTER CARD: ZERO WEIRD BOXES, PERFECT VERTICAL FIT */
.vh-sanctuary-card {
padding: 8px 14px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
}
.vh-sanctuary-header-text,
.vh-sanctuary-header-text *,
.vh-sanctuary-name,
.vh-sanctuary-name * {
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.vh-sanctuary-header-text {
margin: 0 !important;
line-height: 1 !important;
}
.vh-sanctuary-who {
display: block !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
}
.vh-sanctuary-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 21px !important;
font-weight: 700 !important;
color: #123f38 !important;
text-decoration: none !important;
display: block !important;
}
.vh-sanctuary-portrait-box {
margin: 2px auto !important;
}
.vh-sanctuary-portrait-box .vh-photo-stage {
width: 74px !important;
height: 74px !important;
border-radius: 50% !important;
border: 3px solid #345B63 !important;
box-shadow:
0 4px 12px rgba(52, 91, 99, 0.35),
inset 0 2px 4px #ffffff,
inset 0 -2px 4px rgba(26, 47, 52, 0.5) !important;
overflow: hidden !important;
position: relative !important;
}
.vh-sanctuary-btn-box {
margin: 2px auto !important;
}
.vh-sanctuary-founder-pill {
display: inline-block !important;
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 3px 16px !important;
border-radius: 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.15), inset 0 1px 0 #ffffff !important;
text-decoration: none !important;
}
.vh-sanctuary-founder-pill:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1px) !important;
}
.vh-sanctuary-rule {
width: 26px !important;
height: 2px !important;
background: #345B63 !important;
margin: 2px auto !important;
}
.vh-sanctuary-subtitle {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 5. PREVENT CUT OUTS IN MEMORIES & SPOTLIGHT */
.vh-card-memories .vh-card-snippet {
font-size: 11.5px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vh-card-article .vh-discover-secondary {
font-size: 11.5px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 6. TIMELINE: ZERO OVERLAPPING */
.vh-timeline-section {
flex: 0 0 68px !important;
height: 68px !important;
max-height: 68px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 1300px !important;
margin: 0 auto !important;
}
.vh-timeline-years {
position: static !important;
top: 0 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
.vh-lifeline-window {
height: 36px !important;
max-height: 36px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
.vh-lifeline {
height: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
.vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.vh-timeline-event {
display: inline-flex !important;
align-items: center !important;
padding: 0 12px !important;
font-size: 11px !important;
color: #1e353b !important;
white-space: nowrap !important;
}
/* 7. NARROWER TAXONOMY CARDS (4 CARDS ~280px EACH) */
.vh-taxonomy-section {
flex: 0 0 175px !important;
height: 175px !important;
max-height: 175px !important;
width: 100% !important;
margin: 0 auto !important;
}
.vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 22px !important;
height: 100% !important;
width: 100% !important;
}
.vh-card-tax {
flex: 1 1 0 !important;
max-width: 290px !important; /* NARROWER TAXONOMY CARDS */
height: 175px !important;
max-height: 175px !important;
}
.vh-card-tax .vh-card-body {
padding: 6px 12px !important;
height: calc(100% - 34px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.vh-tax-spotlight-item {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.vh-tax-item-desc {
font-size: 11px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 8. MEDIA BAR (PERFECT SINGLE ROW, ZERO OVERLAPPING) */
.vh-media-bar {
flex: 0 0 44px !important;
height: 44px !important;
max-height: 44px !important;
width: 100% !important;
max-width: 1300px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 20px !important;
background: linear-gradient(180deg, #ffffff 0%, #f2f7f7 100%) !important;
box-sizing: border-box !important;
}
.vh-media-bar-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.vh-media-bar-name a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
color: #345B63 !important;
letter-spacing: 1px !important;
text-decoration: none !important;
}
.vh-media-bar-desc {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 20px !important;
}
.vh-media-bar-btn {
flex-shrink: 0 !important;
}
/* ==========================================================================
STEP 23: DEFINITIVE FIXES FOR TOP BORDERS, WIDTHS, TIMELINE, FULL-WIDTH PAGE
========================================================================== */
/* 1. FULL WIDTH PAGE: UNLOCK MEDIAWIKI WRAPPERS & CONTAINERS TO 100% */
body.page-Main_Page, html.page-Main_Page {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
body.page-Main_Page #content,
body.page-Main_Page #content.mw-body,
body.page-Main_Page .mw-body,
body.page-Main_Page #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output,
body.page-Main_Page #contentWrapper,
body.page-Main_Page #container,
body.page-Main_Page .vector-body {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-left: none !important;
border-right: none !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
margin: 0 !important;
padding: 6px 16px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 10px !important;
overflow: hidden !important;
}
/* 2. TOP BORDERS: 100% VISIBLE SOLID #345B63 BORDER ON EVERY CARD & HEADER */
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page .vh-media-bar {
border: 2px solid #345B63 !important;
border-top: 2.5px solid #345B63 !important; /* ULTRA-VISIBLE TOP BORDER */
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-header {
border-top: 2.5px solid #345B63 !important; /* HEADER REINFORCED TOP BORDER */
border-bottom: 2px solid #345B63 !important;
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
padding: 5px 10px !important;
}
/* 3. YEAR BUTTONS: SOLID VISIBLE TOP BORDER */
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 2px solid #345B63 !important; /* EXPLICIT SOLID VISIBLE TOP BORDER */
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 3px 10px !important;
line-height: 1.2 !important;
box-shadow: 0 2px 4px rgba(52, 91, 99, 0.12) !important;
transition: all 0.18s ease !important;
}
body.page-Main_Page .vh-timeline-years .vh-year:hover,
body.page-Main_Page .vh-year:hover {
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border-color: #1a2f34 !important;
border-top: 2px solid #1a2f34 !important;
transform: translateY(-1.5px) !important;
}
body.page-Main_Page .vh-timeline-years .vh-year.is-active,
body.page-Main_Page .vh-year.is-active {
background: linear-gradient(180deg, #2b4f57 0%, #15272a 100%) !important;
color: #ffffff !important;
border: 1.5px solid #0b1517 !important;
border-top: 2px solid #0b1517 !important;
border-bottom: 2.5px solid #000000 !important;
}
/* 4. NARROW ALL RECTANGLES BY 30% */
/* HERO TRIAD: Cards narrowed to 280px (was 400px) */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 36px !important;
flex: 0 0 235px !important;
height: 235px !important;
max-height: 235px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-triad-grid .vh-card {
flex: 0 0 280px !important;
width: 280px !important;
max-width: 280px !important;
min-width: 280px !important;
height: 235px !important;
max-height: 235px !important;
}
/* TAXONOMY: 4 Cards narrowed to 210px (was 290px) */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 170px !important;
height: 170px !important;
max-height: 170px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 24px !important;
height: 100% !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-tax {
flex: 0 0 210px !important;
width: 210px !important;
max-width: 210px !important;
min-width: 210px !important;
height: 170px !important;
max-height: 170px !important;
}
/* MEDIA BAR: Narrowed to 930px to match Triad/Taxonomy cluster */
body.page-Main_Page .vh-media-bar {
flex: 0 0 42px !important;
height: 42px !important;
max-height: 42px !important;
width: 100% !important;
max-width: 930px !important;
margin: 0 auto !important;
}
/* 5. FLOWING TIMELINE: FIX VERTICAL TRUNCATION (AMP UP HEIGHT TO 70px) */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 106px !important;
height: 106px !important;
max-height: 106px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 1050px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-timeline-years {
position: static !important;
top: 0 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
height: 26px !important;
flex: 0 0 26px !important;
}
body.page-Main_Page .vh-lifeline-window {
height: 72px !important;
max-height: 72px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 2px solid #345B63 !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
position: relative !important;
}
body.page-Main_Page .vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
body.page-Main_Page .vh-timeline-event {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 64px !important;
padding: 0 14px !important;
white-space: normal !important;
width: 240px !important;
flex: 0 0 240px !important;
box-sizing: border-box !important;
border-right: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
body.page-Main_Page .vh-timeline-event .vh-event-date {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
line-height: 1.2 !important;
}
body.page-Main_Page .vh-timeline-event .vh-event-title,
body.page-Main_Page .vh-timeline-event .vh-event-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11px !important;
line-height: 1.35 !important;
color: #1e353b !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 6. SANCTUARY PORTRAIT & BUTTONS - POLISHED HIERARCHY */
body.page-Main_Page .vh-sanctuary-card {
padding: 8px 12px !important;
}
body.page-Main_Page .vh-sanctuary-who {
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
margin-bottom: 1px !important;
}
body.page-Main_Page .vh-sanctuary-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
color: #123f38 !important;
line-height: 1.1 !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 72px !important;
height: 72px !important;
border: 2.5px solid #345B63 !important;
border-radius: 50% !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.3) !important;
overflow: hidden !important;
margin: 2px auto !important;
}
body.page-Main_Page .vh-sanctuary-founder-pill {
font-size: 10.5px !important;
font-weight: 700 !important;
padding: 2.5px 12px !important;
border: 1.5px solid #345B63 !important;
border-top: 2px solid #345B63 !important; /* SOLID VISIBLE TOP BORDER */
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
color: #345B63 !important;
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
text-decoration: none !important;
display: inline-block !important;
}
body.page-Main_Page .vh-sanctuary-founder-pill:hover {
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border-color: #1a2f34 !important;
}
body.page-Main_Page .vh-sanctuary-rule {
width: 24px !important;
height: 2px !important;
background: #345B63 !important;
margin: 2px auto !important;
}
body.page-Main_Page .vh-sanctuary-subtitle {
font-size: 11px !important;
color: #345B63 !important;
line-height: 1.2 !important;
}
/* ==========================================================================
STEP 24: FIX THICK BORDERS, FULL-WIDTH EDGES, AND BOTTOM OVERLAPPING
========================================================================== */
/* 1. FORCE 100% TRUE FULL-WIDTH (STRIP VECTOR 2022 LEFT/RIGHT INDENTATIONS) */
body.page-Main_Page, html.page-Main_Page {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
body.page-Main_Page #content,
body.page-Main_Page #content.mw-body,
body.page-Main_Page .mw-body,
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output,
body.page-Main_Page .vector-body,
body.page-Main_Page #contentWrapper,
body.page-Main_Page #container {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
border: none !important;
border-left: none !important;
border-right: none !important;
box-sizing: border-box !important;
left: 0 !important;
}
body.page-Main_Page #mw-panel,
body.page-Main_Page .mw-sidebar-container,
body.page-Main_Page .vector-sidebar-container,
body.page-Main_Page .vector-column-start {
display: none !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
margin: 0 !important;
padding: 8px 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* PREVENTS PUSHING MEDIA SECTION OFF-SCREEN */
gap: 12px !important;
overflow: hidden !important;
}
/* 2. FIX UNUSUAL THICK TOP BORDER: UNIFORM 1.5px ON ALL CARDS & NO HEADER BORDER-TOP */
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-tax {
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #345B63 !important; /* CRISP UNIFORM 1.5px (NOT THICK!) */
border-bottom: 3px solid #233e44 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-header {
border-top: none !important; /* REMOVE DUPLICATE TOP BORDER ON HEADER */
border-left: none !important;
border-right: none !important;
border-bottom: 1.5px solid #345B63 !important;
border-top-left-radius: 6.5px !important;
border-top-right-radius: 6.5px !important;
padding: 5px 12px !important;
}
/* 3. HERO TRIAD (30% NARROWER RECTANGLES, PERFECTLY CENTERED) */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 32px !important;
flex: 0 0 225px !important;
height: 225px !important;
max-height: 225px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-triad-grid .vh-card {
flex: 0 0 280px !important;
width: 280px !important;
max-width: 280px !important;
min-width: 280px !important;
height: 225px !important;
max-height: 225px !important;
}
/* 4. FULL-WIDTH FLOWING TIMELINE (STRETCHES EDGE-TO-EDGE) */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 96px !important;
height: 96px !important;
max-height: 96px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important; /* FULL WIDTH EDGE-TO-EDGE */
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-timeline-years {
position: static !important;
display: flex !important;
justify-content: center !important;
gap: 7px !important;
margin: 0 auto !important;
padding: 0 !important;
height: 25px !important;
flex: 0 0 25px !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 2px 9px !important;
line-height: 1.2 !important;
box-shadow: 0 2px 4px rgba(52, 91, 99, 0.12) !important;
}
body.page-Main_Page .vh-lifeline-window {
height: 64px !important;
max-height: 64px !important;
width: 100% !important;
max-width: 100% !important; /* FULL WIDTH TRACK */
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
width: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 1.5px solid #345B63 !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important; /* CONTINUOUS SEAMLESS EDGE-TO-EDGE */
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
body.page-Main_Page .vh-timeline-event {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 60px !important;
padding: 0 14px !important;
white-space: normal !important;
width: 240px !important;
flex: 0 0 240px !important;
box-sizing: border-box !important;
border-right: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
/* 5. TAXONOMY 4 CARDS (30% NARROWER RECTANGLES, PERFECT FIT) */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 165px !important;
height: 165px !important;
max-height: 165px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 22px !important;
height: 100% !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-tax {
flex: 0 0 210px !important;
width: 210px !important;
max-width: 210px !important;
min-width: 210px !important;
height: 165px !important;
max-height: 165px !important;
}
/* 6. FIX BOTTOM OVERLAPPING: SINGLE-CONTAINER MEDIA BAR */
body.page-Main_Page .vh-media-bar,
body.page-Main_Page .vh-card-media-section {
flex: 0 0 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
width: 920px !important;
max-width: 920px !important;
margin: 0 auto !important;
padding: 0 18px !important;
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 2.5px solid #233e44 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
overflow: hidden !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.10) !important;
}
/* STRIP ALL NESTED SUB-BOXES / INTERNAL BORDERS IN MEDIA SECTION */
body.page-Main_Page .vh-media-bar > div,
body.page-Main_Page .vh-media-bar-title,
body.page-Main_Page .vh-media-bar-desc,
body.page-Main_Page .vh-media-bar-btn,
body.page-Main_Page .vh-card-media-section > div,
body.page-Main_Page .vh-card-media-section .vh-card-header,
body.page-Main_Page .vh-card-media-section .vh-media-body,
body.page-Main_Page .vh-card-media-section .vh-media-desc,
body.page-Main_Page .vh-card-media-section .vh-media-actions {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
height: auto !important;
max-height: none !important;
}
body.page-Main_Page .vh-media-bar-title,
body.page-Main_Page .vh-card-media-section .vh-card-header {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
body.page-Main_Page .vh-media-bar-desc,
body.page-Main_Page .vh-card-media-section .vh-media-desc {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11.5px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 16px !important;
}
body.page-Main_Page .vh-media-bar-btn,
body.page-Main_Page .vh-card-media-section .vh-media-actions {
flex-shrink: 0 !important;
}
body.page-Main_Page .vh-media-bar-btn .vh-btn-pill,
body.page-Main_Page .vh-card-media-section .vh-btn-pill {
padding: 2.5px 12px !important;
font-size: 10.5px !important;
}
/* ==========================================================================
STEP 51: DEFINITIVE CLEAN ARCHITECTURE & VISIBLE AT-REST ANIMATION
========================================================================== */
/* 1. CANVAS & WRAPPER RESET (FULL WIDTH, NO SIDEBAR) */
body.page-Main_Page, html.page-Main_Page {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
background-color: #f6f2e9 !important;
background-image: none !important;
}
body.page-Main_Page #content,
body.page-Main_Page #content.mw-body,
body.page-Main_Page .mw-body,
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output,
body.page-Main_Page .vector-body,
body.page-Main_Page #contentWrapper,
body.page-Main_Page #container {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
left: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #mw-panel,
body.page-Main_Page .mw-sidebar-container,
body.page-Main_Page .vector-sidebar-container,
body.page-Main_Page .vector-column-start {
display: none !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 2. MAIN CONTAINER: FULL VIEWPORT HEIGHT SPREAD TOP TO BOTTOM */
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
margin: 0 !important;
padding: 18px 40px 14px 40px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important; /* SPREAD CONTENT FROM TOP TO BOTTOM */
gap: 0 !important;
overflow: hidden !important;
}
/* 3. CARDS: 100% TRANSPARENT OPEN SPACE (NO BOXES, NO BORDERS) */
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page .vh-media-bar,
body.page-Main_Page .vh-card-media-section {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
transition: none !important;
box-sizing: border-box !important;
}
/* Hide all old badges, buttons, headers, and clutter */
body.page-Main_Page .vh-card-header,
body.page-Main_Page .vh-card-actions,
body.page-Main_Page .vh-sanctuary-btn-box,
body.page-Main_Page .vh-sanctuary-rule,
body.page-Main_Page .vh-sanctuary-who,
body.page-Main_Page .vh-badge-sub,
body.page-Main_Page .vh-badge-icon,
body.page-Main_Page .vh-tax-item-link,
body.page-Main_Page .vh-random-article-more,
body.page-Main_Page .vh-media-bar-btn {
display: none !important;
}
body.page-Main_Page .vh-card-body {
background: transparent !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
height: 100% !important;
text-align: center !important;
}
/* 4. SECTION 1: HERO TRIAD (SPREAD ACROSS 1450px) */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
flex: 0 0 295px !important; /* EXPANDED HEIGHT FOR 180px PORTRAIT */
height: 295px !important;
max-height: 295px !important;
}
body.page-Main_Page .vh-triad-grid .vh-card {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
}
body.page-Main_Page .vh-triad-grid .vh-sanctuary-card {
flex: 0 0 360px !important;
width: 360px !important;
max-width: 360px !important;
}
/* Sanctuary Portrait Medallion */
body.page-Main_Page .vh-sanctuary-portrait-box {
margin: 4px auto 6px auto !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box {
width: 180px !important;
height: 180px !important;
margin: 6px auto 10px auto !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 180px !important; /* +120% BIGGER (82px -> 180px) */
height: 180px !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
border-radius: 50% !important;
box-shadow:
0 8px 24px rgba(18, 63, 56, 0.32),
0 2px 6px rgba(0, 0, 0, 0.18),
inset 0 2px 5px rgba(255, 255, 255, 0.7),
inset 0 -3px 6px rgba(0, 0, 0, 0.3) !important;
overflow: hidden !important;
margin: 0 auto !important;
position: relative !important;
}
/* 5. SECTION 2: TIMELINE (EDGE TO EDGE FULL WIDTH) */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 106px !important;
height: 106px !important;
max-height: 106px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-timeline-years {
position: static !important;
display: flex !important;
justify-content: center !important;
gap: 10px !important;
margin: 0 auto !important;
padding: 0 !important;
height: 27px !important;
flex: 0 0 27px !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 2px 9px !important;
line-height: 1.2 !important;
box-shadow: 0 2px 4px rgba(52, 91, 99, 0.12) !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
}
body.page-Main_Page .vh-timeline-years .vh-year:hover,
body.page-Main_Page .vh-year:hover {
transform: translateY(-1.5px) !important;
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border-color: #1a2f34 !important;
}
body.page-Main_Page .vh-timeline-years .vh-year.is-active,
body.page-Main_Page .vh-year.is-active {
background: linear-gradient(180deg, #2b4f57 0%, #15272a 100%) !important;
color: #ffffff !important;
border: 1.5px solid #0b1517 !important;
border-bottom: 2px solid #000000 !important;
}
body.page-Main_Page .vh-lifeline-window {
height: 68px !important;
max-height: 68px !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
width: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 1.5px solid #345B63 !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
body.page-Main_Page .vh-timeline-event {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 64px !important;
padding: 0 18px !important;
white-space: normal !important;
width: 250px !important;
flex: 0 0 250px !important;
box-sizing: border-box !important;
border-right: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
/* 6. SECTION 3: THEMATIC TAXONOMY (SPREAD ACROSS 1450px) */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 155px !important;
height: 155px !important;
max-height: 155px !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
height: 100% !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-tax {
flex: 0 0 260px !important;
width: 260px !important;
max-width: 260px !important;
}
/* 7. SECTION 4: MEDIA BAR (SPREAD ACROSS 1450px) */
body.page-Main_Page .vh-media-bar {
flex: 0 0 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
padding: 0 24px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
border-top: 1px dashed rgba(52, 91, 99, 0.3) !important;
border-bottom: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
/* 8. DESCRIPTIVE TEXT IN CARDS */
body.page-Main_Page .vh-card-text,
body.page-Main_Page .vh-card-snippet,
body.page-Main_Page .vh-tax-item-desc,
body.page-Main_Page .vh-random-article-extract {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #2c3e42 !important;
margin: 0 !important;
text-shadow: none !important;
}
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important; /* 50% LARGER (12.5px -> 19px) */
font-weight: 600 !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
font-style: italic !important;
max-width: 380px !important;
margin: 0 auto !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
body.page-Main_Page .vh-card-tax .vh-card-text {
font-size: 12.5px !important;
line-height: 1.5 !important;
}
body.page-Main_Page .vh-media-text {
font-size: 12px !important;
font-style: italic !important;
}
/* ==========================================================================
9. CAITANYA 3D TITLES + VISIBLE AT-REST BREATHING LINE + ON-HOVER FULL GLIDE
========================================================================== */
/* Title Containers */
body.page-Main_Page .vh-card-title,
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-random-article-title,
body.page-Main_Page .vh-media-title {
display: block !important;
text-align: center !important;
margin-bottom: 8px !important;
transform: none !important;
}
/* ALL TITLE LINKS (KEEPING THE EXACT GORGEOUS 3D STYLE FROM USER'S SCREENSHOT) */
body.page-Main_Page .vh-card-title a,
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-sanctuary-title a,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title a,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page
-Main_Page .vh-media-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 7px !important; /* PERFECT SPACE FOR UNDERLINE */
letter-spacing: 0.025em !important;
line-height: 1.25 !important;
cursor: pointer !important;
transform: none !important;
/* 1. LIGHT COLOR FACE (The exact warm temple gold from screenshot) */
color: #dfad3e !important;
-webkit-text-fill-color: #dfad3e !important;
/* 2. DARK SIDES & DEEP CAST SHADOW (The exact 3D from screenshot) */
text-shadow: none !important;
transition: transform 0.22s ease, color 0.22s ease, text-shadow 0.22s ease !important;
}
/* Specific Font Sizes */
body.page-Main_Page .vh-sanctuary-title a {
font-size: 28px !important;
letter-spacing: 0.03em !important;
}
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title a {
font-size: 20px !important;
}
body.page-Main_Page .vh-card-tax .vh-card-title a {
font-size: 18.5px !important;
}
body.page-Main_Page .vh-media-title a {
font-size: 14.5px !important;
}
/* ==========================================================================
3. THE GOLDEN FILAMENT LINE BENEATH TITLES (RESTORES THE USER'S FAVORITE FEATURE!)
- At Rest: Gently breathes in and out (25% to 65% width) so animation is clearly visible!
- On Hover: Pauses breathing and smoothly glides to full 90% width!
========================================================================== */
body.page-Main_Page .vh-card-title a::after,
body.page-Main_Page .vh-card-memories .vh-card-title a::after,
body.page-Main_Page .vh-sanctuary-title a::after,
body.page-Main_Page .vh-card-article .vh-card-title a::after,
body.page-Main_Page .vh-random-article-title a::after,
body.page-Main_Page .vh-card-tax .vh-card-title a::after,
body.page-Main_Page .vh-media-title a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(223, 173, 62, 0.4) 15%,
#dfad3e 50%,
rgba(223, 173, 62, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(223, 173, 62, 0.75) !important;
border-radius: 2px !important;
pointer-events: none !important;
/* AT REST: VISIBLE BREATHING ANIMATION (2.8s CYCLE) */
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease !important;
}
/* At-Rest Line Breathing Keyframes */
@keyframes vhLineBreath {
0%, 100% {
width: 25%;
left: 37.5%;
opacity: 0.35;
}
50% {
width: 65%;
left: 17.5%;
opacity: 0.95; /* Clearly visible expanding light bar! */
}
}
/* ==========================================================================
4. ON MOUSE HOVER: FULL GOLDEN LINE GLIDE + DIRECT SUNLIGHT 3D ILLUMINATION
========================================================================== */
body.page-Main_Page .vh-card-title a:hover,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page .vh-sanctuary-title a:hover,
body.page-Main_Page .vh-card-article .vh-card-title a:hover,
body.page-Main_Page .vh-random-article-title a:hover,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover,
body.page-Main_Page .vh-media-title a:hover {
transform: translateY(-2.5px) !important; /* RETAINS 3D STEP MOVEMENT */
color: #dfad3e !important; /* DOES NOT CHANGE COLOR (STAYS RICH GOLD) */
-webkit-text-fill-color: #dfad3e !important; /* 100% CONSTANT COLOR */
text-decoration: none !important;
/* Extended 3D shadow deepening as the letters step forward */
text-shadow: none !important;
}
/* ON HOVER: LINE GLIDES OUT TO FULL 90% WIDTH & STAYS SOLID GOLD */
body.page-Main_Page .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover::after,
body.page-Main_Page .vh-sanctuary-title a:hover::after,
body.page-Main_Page .vh-card-article .vh-card-title a:hover::after,
body.page-Main_Page .vh-random-article-title a:hover::after,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover::after,
body.page-Main_Page .vh-media-title a:hover::after {
animation: none !important; /* Stops at-rest breathing */
opacity: 1 !important;
width: 90% !important; /* FULL EXTENSION GLIDE! */
left: 5% !important;
/* EXACT SAME GOLD COLOR AS AT REST — ZERO COLOR CHANGE */
background: linear-gradient(
90deg,
transparent 0%,
rgba(223, 173, 62, 0.4) 15%,
#dfad3e 50%,
rgba(223, 173, 62, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(223, 173, 62, 0.75) !important;
}
/* ==========================================================================
STEP 56: TIMELINE EXPANSION (NO TEXT CROPPING, NO BG, NO LINE) & CAPTION REGULAR
========================================================================== */
/* 1. SANCTUARY CAPTION: REGULAR (NOT ITALIC) */
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-style: normal !important; /* REGULAR, NOT ITALIC */
font-weight: 600 !important;
font-size: 19px !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
text-align: center !important;
}
/* 2. TIMELINE SECTION: EXPANDED HEIGHT TO PREVENT ALL TEXT CROPPING */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 134px !important;
height: 134px !important;
min-height: 134px !important;
max-height: 134px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
/* 3. LIFELINE WINDOW & TRACK: TRANSPARENT, NO TOP LINE, HEIGHT 96px */
body.page-Main_Page .vh-lifeline-window {
height: 96px !important; /* EXPANDED HEIGHT (WAS 68px) */
min-height: 96px !important;
max-height: 96px !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
width: 100% !important;
background: transparent !important; /* REMOVE BACKGROUND */
border: none !important; /* REMOVE ALL BORDERS */
border-top: none !important; /* REMOVE LINE ABOVE */
border-bottom: none !important;
box-shadow: none !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 96px !important;
min-height: 96px !important;
max-height: 96px !important;
}
/* The horizontal golden guide line across the timeline items */
body.page-Main_Page .vh-timeline-track::before {
top: 36px !important;
background: rgba(177, 135, 61, 0.4) !important;
}
/* 4. TIMELINE ITEM: EXACT 240px MATCH WITH JAVASCRIPT ITEM_WIDTH */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item,
body.page-Main_Page .vh-timeline-event {
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
flex: 0 0 240px !important;
height: 96px !important;
min-height: 96px !important;
max-height: 96px !important;
box-sizing: border-box !important;
padding: 8px 16px !important;
background: transparent !important;
border: none !important;
}
body.page-Main_Page .vh-timeline-date {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important; /* Clear Gold Date */
margin-bottom: 2px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
body.page-Main_Page .vh-timeline-dot {
width: 9px !important;
height: 9px !important;
background: #345B63 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #345B63 !important;
margin: 4px 0 !important;
}
body.page-Main_Page .vh-timeline-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.38 !important;
color: #2c3e42 !important;
overflow: visible !important; /* NEVER CROPPED */
white-space: normal !important;
display: block !important;
}
/* ==========================================================================
STEP 57: TIMELINE FULL BLEED (EDGE-TO-EDGE), 50% TALLER (150px),
DOT/TEXT SEPARATION (ZERO OVERLAP), NO THIN LINE ABOVE,
AND CAPTION REGULAR (NOT ITALIC)
========================================================================== */
/* 1. SANCTUARY CAPTION: REGULAR (NOT ITALIC) */
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-style: normal !important; /* REGULAR (NOT ITALIC) */
font-weight: 600 !important;
font-size: 19px !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
text-align: center !important;
}
/* 2. REMOVE ALL THIN LINES ABOVE TIMELINE (NO TOP BORDERS ANYWHERE) */
body.page-Main_Page .vh-triad-grid,
body.page-Main_Page .vh-timeline-section,
body.page-Main_Page #vh-timeline-years,
body.page-Main_Page .vh-timeline-years,
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
border: none !important;
border-top: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
}
/* 3. STRETCH TIMELINE EDGE-TO-EDGE TO VERY LEFT AND RIGHT (FULL BLEED) */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
position: relative !important;
flex: 0 0 190px !important; /* EXPANDED TOTAL HEIGHT (150px track + 40px buttons) */
height: 190px !important;
min-height: 190px !important;
max-height: 190px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
background: transparent !important;
box-sizing: border-box !important;
}
/* Year buttons container centered */
body.page-Main_Page .vh-timeline-years,
body.page-Main_Page #vh-timeline-years {
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
display: flex !important;
justify-content: center !important;
gap: 10px !important;
height: 28px !important;
flex: 0 0 28px !important;
}
/* 4. TIMELINE TRACK WINDOW: 50% TALLER (150px) & FULL BLEED (VERY LEFT TO VERY RIGHT) */
body.page-Main_Page .vh-lifeline-window {
width: 100vw !important;
max-width: 100vw !important;
height: 150px !important; /* 50% TALLER (WAS 96px -> NOW 150px) */
min-height: 150px !important;
max-height: 150px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
background: transparent !important;
}
body.page-Main_Page .vh-lifeline {
width: 100% !important;
height: 100% !important;
background: transparent !important;
position: relative !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 150px !important;
min-height: 150px !important;
max-height: 150px !important;
display: flex !important;
align-items: flex-start !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
/* The horizontal golden guide line passing through the dots */
body.page-Main_Page .vh-timeline-track::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 28px !important; /* GUIDE LINE POSITION */
height: 1.5px !important;
background: rgba(177, 135, 61, 0.45) !important;
z-index: 1 !important;
}
/* 5. TIMELINE ITEM & DOT / TEXT SEPARATION (ZERO OVERLAP!) */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
flex: 0 0 250px !important;
height: 150px !important; /* FULL 150px HEIGHT */
min-height: 150px !important;
max-height: 150px !important;
box-sizing: border-box !important;
padding: 6px 18px !important;
background: transparent !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* Date at the very top */
body.page-Main_Page .vh-timeline-date {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 18px !important;
margin: 0 0 2px 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
z-index: 2 !important;
}
/* Dot on the horizontal line (top: 24px) */
body.page-Main_Page .vh-timeline-dot {
position: absolute !important;
top: 24px !important; /* CENTERED ON THE 28px LINE */
left: 18px !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #233e44 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #b1873d !important;
z-index: 3 !important;
}
/* Event text starts strictly BELOW the dot and line (CLEAR SEPARATION) */
body.page-Main_Page .vh-timeline-text {
margin-top: 18px !important; /* PUSHES TEXT SAFELY BELOW THE DOT! */
padding-top: 0 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #2c3e42 !important;
white-space: normal !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important; /* NEVER CROPPED */
max-height: 100px !important; /* COMFORTABLY HOLDS 6-7 LINES */
}
/* Edge fades on the timeline window (seamless left & right fade) */
body.page-Main_Page .vh-lifeline-window::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 50px !important;
background: linear-gradient(to right, #f6f2e9 0%, rgba(246, 242, 233, 0) 100%) !important;
z-index: 10 !important;
pointer-events: none !important;
}
body.page-Main_Page .vh-lifeline-window::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
width: 50px !important;
background: linear-gradient(to left, #f6f2e9 0%, rgba(246, 242, 233, 0) 100%) !important;
z-index: 10 !important;
pointer-events: none !important;
}
/* ==========================================================================
STEP 58: ABSOLUTE CROPPING ELIMINATION & PERFECT TIMELINE DOT ALIGNMENT
========================================================================== */
/* --------------------------------------------------------------------------
1. HERO TRIAD & PRABHUPĀDA CARD: UNCONSTRAINED HEIGHT (ZERO CROPPING)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home {
height: auto !important;
min-height: calc(100vh - 54px) !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
body.page-Main_Page .vh-triad-grid {
flex: 0 0 auto !important;
height: auto !important;
min-height: 330px !important; /* AMPLE ROOM FOR 180px CIRCLE + CAPTION */
max-height: none !important;
overflow: visible !important;
}
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-triad-grid .vh-sanctuary-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-body {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
body.page-Main_Page .vh-triad-grid .vh-sanctuary-card {
flex: 0 0 380px !important;
width: 380px !important;
max-width: 380px !important;
}
/* Portrait Medallion: 180px */
body.page-Main_Page .vh-sanctuary-portrait-box {
width: 180px !important;
height: 180px !important;
margin: 6px auto 12px auto !important;
overflow: visible !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 180px !important; /* FULL 180px CIRCLE */
height: 180px !important;
border-radius: 50% !important;
overflow: hidden !important; /* CLIPS ONLY THE PHOTO, NOT THE CARD */
position: relative !important;
margin: 0 auto !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
box-shadow:
0 8px 24px rgba(18, 63, 56, 0.32),
0 2px 6px rgba(0, 0, 0, 0.18) !important;
}
/* Caption: Regular (Not Italic) at 19px */
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-style: normal !important; /* STRICTLY REGULAR (NOT ITALIC) */
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
max-width: 380px !important;
margin: 0 auto !important;
text-align: center !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
/* --------------------------------------------------------------------------
2. TIMELINE: 50% TALLER (155px), FULL BLEED, NO THIN TOP LINES
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid,
body.page-Main_Page .vh-timeline-section,
body.page-Main_Page #vh-timeline-years,
body.page-Main_Page .vh-timeline-years,
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
border: none !important;
border-top: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Full Bleed Timeline Section */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 195px !important;
height: 195px !important;
min-height: 195px !important;
max-height: 195px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
background: transparent !important;
}
/* Track Window: 50% Taller (155px) */
body.page-Main_Page .vh-lifeline-window {
width: 100vw !important;
max-width: 100vw !important;
height: 155px !important; /* 50% TALLER (HOLDS 6-7 FULL LINES) */
min-height: 155px !important;
max-height: 155px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
background: transparent !important;
}
body.page-Main_Page .vh-lifeline {
width: 100% !important;
height: 100% !important;
background: transparent !important;
position: relative !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 155px !important;
min-height: 155px !important;
max-height: 155px !important;
display: flex !important;
align-items: flex-start !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
/* Horizontal Guide Line: Fixed at top: 30px */
body.page-Main_Page .vh-timeline-track::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 30px !important; /* GUIDE LINE LEVEL */
height: 1.5px !important;
background: rgba(177, 135, 61, 0.45) !important;
z-index: 1 !important;
}
/* --------------------------------------------------------------------------
3. TIMELINE ITEM: PERFECT VERTICAL & HORIZONTAL DOT ALIGNMENT
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
flex: 0 0 250px !important;
height: 155px !important; /* FULL 155px HEIGHT */
min-height: 155px !important;
max-height: 155px !important;
box-sizing: border-box !important;
padding: 6px 16px !important;
background: transparent !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* Date Text: Centered horizontally above the dot */
body.page-Main_Page .vh-timeline-date {
width: 100% !important;
text-align: center !important; /* CENTERED HORIZONTALLY */
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 18px !important;
margin: 0 0 4px 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
z-index: 2 !important;
}
/* Dot: EXACTLY CENTERED VERTICALLY ON THE 30px LINE & HORIZONTALLY WITH DATE */
body.page-Main_Page .vh-timeline-dot {
position: absolute !important;
top: 25px !important; /* 25px + 5px radius = 30px center (EXACT ON LINE!) */
left: 50% !important; /* CENTERED HORIZONTALLY */
transform: translateX(-50%) !important; /* PERFECT HORIZONTAL ALIGNMENT WITH DATE */
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #233e44 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #b1873d !important;
z-index: 3 !important;
margin: 0 !important;
}
/* Event Text: Safely below the line and dot (ZERO OVERLAPPING) */
body.page-Main_Page .vh-timeline-text {
margin-top: 22px !important; /* PUSHES TEXT SAFELY BELOW THE DOT */
padding-top: 0 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #2c3e42 !important;
white-space: normal !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important; /* NEVER CROPPED */
max-height: 105px !important; /* COMFORTABLY HOLDS 6-7 FULL LINES */
text-align: center !important;
}
/* ==========================================================================
STEP 59: TOP BAR HELP TEXT REMOVAL, TIMELINE 3-TIER AXIS CENTERING,
AND SEAMLESS TITLE MORPH (Śrīla Prabhupāda <-> Who Is Śrīla Prabhupāda)
========================================================================== */
/* 1. TOP BAR: SUPPRESS ALL HOVER HELP TEXTS & TOOLTIPS */
#mw-head [title]::before,
#mw-head [title]::after,
.vector-header [title]::before,
.vector-header [title]::after,
.mw-tooltip,
.tipsy,
.tipsy-inner,
.tooltip {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 2. PERMANENT SANCTUARY HERO TITLE: "Who Is Śrīla Prabhupāda" (NO TEXT CHANGE ON HOVER) */
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title {
margin: 0 !important;
text-align: center !important;
line-height: 1.1 !important;
}
body.page-Main_Page .vh-sanctuary-title a,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a {
position: relative !important;
display: inline-block !important;
min-width: 0 !important;
text-align: center !important;
white-space: nowrap !important;
}
/* Neutralize and remove all text-swapping / morph behavior */
body.page-Main_Page .vh-sanctuary-title .vh-title-hover,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title .vh-title-hover {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Main_Page .vh-sanctuary-title .vh-title-default,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title .vh-title-default {
display: inline !important;
position: static !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
body.page-Main_Page .vh-sanctuary-title a:hover .vh-title-default,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a:hover .vh-title-default {
opacity: 1 !important;
transform: none !important;
}
/* 3. TIMELINE: PERFECT 3-TIER CENTER ALIGNMENT (DATE, DOT, AND TEXT) */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
flex: 0 0 250px !important;
height: 155px !important;
box-sizing: border-box !important;
padding: 6px 14px !important;
background: transparent !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* PERFECT HORIZONTAL AXIS CENTERING */
text-align: center !important;
}
/* Date at the top: centered */
body.page-Main_Page .vh-timeline-date {
width: 100% !important;
text-align: center !important; /* CENTERED */
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 18px !important;
margin: 0 auto 4px auto !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
z-index: 2 !important;
}
/* Horizontal Guide Line */
body.page-Main_Page .vh-timeline-track::before {
top: 30px !important;
height: 1.5px !important;
background: rgba(177, 135, 61, 0.45) !important;
}
/* Dot: Center vertically on the 30px line, and horizontally with the date */
body.page-Main_Page .vh-timeline-dot {
position: absolute !important;
top: 25px !important; /* 25px + 5px radius = 30px (EXACT ON LINE) */
left: 50% !important; /* EXACT HORIZONTAL CENTER */
transform: translateX(-50%) !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #233e44 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #b1873d !important;
z-index: 3 !important;
margin: 0 !important;
}
/* Text below: Properly centered under the dot with ample clearance */
body.page-Main_Page .vh-timeline-text {
width: 100% !important;
max-width: 220px !important;
margin: 24px auto 0 auto !important; /* CLEARLY BELOW DOT & LINE */
padding-top: 0 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #2c3e42 !important;
text-align: center !important; /* PROPERLY CENTERED TEXT */
white-space: normal !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important;
max-height: 105px !important;
}
/* Suppress any tooltip on top bar header title */
#vanipedia-header-title,
.vh-header-title,
.vanipedia-header-title,
#p-logo,
.vector-header {
-webkit-user-select: none !important;
user-select: none !important;
}
/* Transition for Remembering Prabhupada random spotlight */
#vh-random-memories,
.vh-card-memories .vh-card-body {
transition: opacity .7s ease, transform .7s ease;
}
#vh-random-memories.is-changing,
.vh-card-memories .vh-card-body.is-changing {
opacity: 0 !important;
transform: translateY(5px);
}
/* Transition ONLY the text below the titles when randomizing (STEP 70) */
.vh-card-tax .vh-card-text {
transition: opacity .6s ease, transform .6s ease !important;
}
.vh-card-tax .vh-card-text.is-changing,
#vh-tax-random-personality.is-changing,
#vh-tax-random-name.is-changing,
#vh-tax-random-place.is-changing,
#vh-tax-random-question.is-changing {
opacity: 0 !important;
transform: translateY(4px) !important;
}
/* Rotator Titles remain opaque during text rotation while allowing hover rise */
.vh-card-tax .vh-card-title,
.vh-card-tax .vh-card-body > .vh-card-title {
opacity: 1 !important;
animation: none !important;
}
.vh-card-tax .vh-card-title a {
opacity: 1 !important;
animation: none !important;
display: inline-block !important;
}
/* ==========================================================================
STEP 69: FIX BACKGROUND COLOR SCROLL BLEED & STICKY TOP BAR
========================================================================== */
/* 1. PERSISTENT STICKY TOP BAR WHEN SCROLLING DOWN */
.vector-header-container,
#mw-head,
.mw-header {
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
background-color: #345B63 !important;
}
/* 2. PREVENT BACKGROUND COLOR CUTOFF ON SCROLL (SOLID SAGE/TEAL ON ALL PAGES) */
html {
min-height: 100% !important;
background-color: #D4ECDD !important;
}
body {
min-height: 100% !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,
html:not(.skin-theme-clientpref-night) .mw-content-container {
min-height: 100vh !important;
background-color: #D4ECDD !important;
}
/* Restrict cream background strictly to Main Page */
html.page-Main_Page,
body.page-Main_Page {
background-color: #f6f2e9 !important;
}
/* 3. ŚRĪLA PRABHUPĀDA IN THE MEDIA: ARCHIVAL THUMBNAIL STYLING */
body.page-Main_Page .vh-media-bar {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 18px !important;
height: auto !important;
min-height: 48px !important;
max-height: none !important;
padding: 6px 24px !important;
}
body.page-Main_Page .vh-media-title {
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-media-text {
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-media-archival-thumb,
.vh-media-archival-thumb {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
transition: opacity .7s ease, transform .7s ease;
}
body.page-Main_Page .vh-media-archival-thumb.is-changing,
.vh-media-archival-thumb.is-changing {
opacity: 0 !important;
transform: scale(0.95);
}
body.page-Main_Page .vh-media-archival-thumb a {
display: block !important;
border-radius: 4px !important;
overflow: hidden !important;
border: 1.5px solid rgba(177, 135, 61, 0.45) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
line-height: 0 !important;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
body.page-Main_Page .vh-media-archival-thumb a:hover {
transform: translateY(-2px) scale(1.05) !important;
border-color: #dfad3e !important;
box-shadow: 0 4px 12px rgba(177, 135, 61, 0.35) !important;
}
body.page-Main_Page .vh-media-archival-thumb img {
display: block !important;
height: 38px !important;
width: auto !important;
max-width: 75px !important;
object-fit: cover !important;
border-radius: 3px !important;
}
/* ==========================================================================
STEP 71: 5-CARD EQUAL FOOTING ROW (TAXONOMY + MEDIA WITH LARGE THUMBNAILS)
========================================================================== */
/* 1. 5-Column Grid on Equal Footing */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 1450px !important;
height: auto !important;
min-height: 220px !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 16px !important;
width: 100% !important;
height: auto !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 210px !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-tax .vh-card-body {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
text-align: center !important;
}
/* 2. Soft-Switch ONLY Content Below Titles (Titles Stay 100% Static) */
.vh-card-tax .vh-card-text,
.vh-card-tax .vh-media-card-content {
transition: opacity .6s ease, transform .6s ease !important;
}
.vh-card-tax .vh-card-text.is-changing,
.vh-card-tax .vh-media-card-content.is-changing,
#vh-tax-random-personality.is-changing,
#vh-tax-random-name.is-changing,
#vh-tax-random-place.is-changing,
#vh-tax-random-question.is-changing,
#vh-tax-random-media.is-changing {
opacity: 0 !important;
transform: translateY(4px) !important;
}
/* Titles are strictly fixed during text rotation while allowing hover rise */
.vh-card-tax .vh-card-title {
opacity: 1 !important;
animation: none !important;
}
.vh-card-tax .vh-card-title a {
opacity: 1 !important;
animation: none !important;
display: inline-block !important;
}
/* 3. Card 5: Large Archival Media Thumbnail & Captions */
.vh-card-media-item .vh-media-card-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
height: 100% !important;
}
.vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 105px !important;
border-radius: 6px !important;
overflow: hidden !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(177, 135, 61, 0.3) !important;
background: #f0ebe1 !important;
position: relative !important;
line-height: 0 !important;
}
.vh-card-media-item .vh-media-large-thumb a {
display: block !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
.vh-card-media-item .vh-media-large-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
transition: transform .35s ease !important;
}
.vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.05) !important;
}
/* Fallback Vintage Press Badge */
.vh-card-media-item .vh-media-fallback-thumb {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #f7f3ec 0%, #ebdcc7 100%) !important;
}
.vh-card-media-item .vh-media-vintage-badge {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
text-decoration: none !important;
}
.vh-card-media-item .vh-media-vintage-badge .vh-media-icon {
font-size: 24px !important;
}
.vh-card-media-item .vh-media-vintage-badge .vh-media-tag {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #8c6a26 !important;
}
/* Captions Below Large Thumbnail */
.vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: center !important;
width: 100% !important;
}
.vh-card-media-item .vh-media-outlet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #8c6a26 !important;
}
.vh-card-media-item .vh-media-headline {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
}
.vh-card-media-item .vh-media-headline a {
color: #2c3e42 !important;
text-decoration: none !important;
transition: color .2s ease !important;
}
.vh-card-media-item .vh-media-headline a:hover {
color: #345B63 !important;
text-decoration: underline !important;
}
/* 4. Hide legacy bottom media bar since it is now unified in the 5-card row */
.vh-media-bar,
body.page-Main_Page .vh-media-bar {
display: none !important;
}
/* Responsive Grid Breakpoints */
@media (max-width: 1280px) {
body.page-Main_Page .vh-taxonomy-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
body.page-Main_Page .vh-taxonomy-grid {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
STEP 72: UNIFIED "STEP FORTH" TOP BAR ICONS & LEFT COLUMN STACK
========================================================================== */
/* --------------------------------------------------------------------------
1. UNIFIED "STEP FORTH" ANIMATION ACROSS ALL TOP BAR ICONS & BUTTONS
-------------------------------------------------------------------------- */
.vector-header-container .vector-icon,
.vector-header-start .vector-icon,
.vector-header-end .vector-icon,
.vector-header-start .cdx-button,
.vector-header-end .cdx-button,
.vector-header-start .vector-dropdown-label,
.vector-header-end .vector-dropdown-label,
.vector-header-container .cdx-text-input__icon,
.mw-header .vector-icon,
.vector-sticky-header .vector-icon {
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
filter 0.25s ease,
color 0.25s ease,
background-color 0.25s ease !important;
will-change: transform, filter !important;
}
/* STEP FORTH HOVER: Icon floats up 2.5px, scales up, glows with 3D drop shadow */
.vector-header-start #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-start .cdx-button:hover .vector-icon,
.vector-header-end .cdx-button:hover .vector-icon,
.vector-header-start .vector-dropdown-label:hover .vector-icon,
.vector-header-end .vector-dropdown-label:hover .vector-icon,
.vector-header-end #pt-userpage-2:hover .vector-icon,
.vector-header-container .cdx-search-input:hover .cdx-text-input__icon,
.vector-header-container .cdx-text-input__input:focus ~ .cdx-text-input__icon,
.vector-header-container .vector-icon:hover {
transform: translateY(-2.5px) scale(1.14) !important;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 10px rgba(245, 215, 127, 0.8)) !important;
color: #ffffff !important;
fill: #ffffff !important;
}
/* STEP FORTH BUTTON CONTAINER HOVER */
.vector-header-start .vector-dropdown-label:hover,
.vector-header-end .vector-dropdown-label:hover,
.vector-header-start .cdx-button:hover,
.vector-header-end .cdx-button:hover,
.vector-header-end #pt-userpage-2:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(245, 215, 127, 0.45) !important;
background-color: rgba(245, 215, 127, 0.18) !important;
}
/* ACTIVE / CLICK STATE: Tactile press depression */
.vector-header-start .vector-dropdown-label:active .vector-icon,
.vector-header-end .vector-dropdown-label:active .vector-icon,
.vector-header-start .cdx-button:active .vector-icon,
.vector-header-end .cdx-button:active .vector-icon {
transform: translateY(0.5px) scale(0.98) !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}
/* --------------------------------------------------------------------------
2. TOP-LEFT COLUMN: MEMORIES (TOP) + SRILA PRABHUPADA IN MEDIA (BOTTOM)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: stretch !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
gap: 24px !important;
height: auto !important;
min-height: 330px !important;
}
/* Left Stacked Column */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 310px !important;
height: 100% !important;
justify-content: space-between !important;
}
body.page-Main_Page .vh-triad-column-left .vh-card {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
}
/* Center Sanctuary Hero */
body.page-Main_Page .vh-sanctuary-card {
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 310px !important;
height: auto !important;
}
/* Right Thematic Article Spotlight */
body.page-Main_Page .vh-card-article {
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 310px !important;
height: auto !important;
}
/* Media Card in Hero Left: Large Thumbnail & Captions Below */
body.page-Main_Page .vh-card-media-item .vh-media-card-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 95px !important;
border-radius: 5px !important;
overflow: hidden !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(177, 135, 61, 0.35) !important;
background: #f0ebe1 !important;
line-height: 0 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb a {
display: block !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
transition: transform .35s ease !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.05) !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: center !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #8c6a26 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
}
/* --------------------------------------------------------------------------
3. BOTTOM 4-COLUMN TAXONOMY GRID (EQUAL FOOTING)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-taxonomy-section {
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 180px !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 18px !important;
width: 100% !important;
height: auto !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 175px !important;
}
/* Clean up any legacy media bar */
.vh-media-bar,
body.page-Main_Page .vh-media-bar {
display: none !important;
}
/* ==========================================================================
STEP 73: FIT EVERYTHING TO SCREEN + 100% LARGER TITLES & TEXTS
+ MAXIMIZED ŚRĪLA PRABHUPĀDA CARD SIZE
========================================================================== */
/* --------------------------------------------------------------------------
1. FIT EVERYTHING TO SCREEN (ZERO SCROLLBAR ON DESKTOP)
-------------------------------------------------------------------------- */
body.page-Main_Page,
html.page-Main_Page {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
}
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 {
margin: 0 !important;
padding: 0 !important;
border: none !important;
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
background-color: #faf7f0 !important;
}
/* Master Homepage Container: Perfectly fits single viewport height */
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 48px) !important;
max-height: calc(100vh - 48px) !important;
min-height: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 8px 32px 10px 32px !important;
margin: 0 !important;
overflow: hidden !important;
position: relative !important;
}
/* --------------------------------------------------------------------------
2. MAXIMIZED ŚRĪLA PRABHUPĀDA CARD & HERO ROW PROPORTIONS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: stretch !important;
width: 100% !important;
max-width: 1560px !important;
margin: 0 auto !important;
gap: 22px !important;
flex: 1 1 auto !important;
height: auto !important;
min-height: 310px !important;
max-height: 44vh !important;
}
/* Left Stacked Column: Memories (Top) + Media (Bottom) */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
min-width: 300px !important;
height: 100% !important;
justify-content: space-between !important;
}
body.page-Main_Page .vh-triad-column-left .vh-card {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important;
padding: 8px 14px !important;
}
body.page-Main_Page .vh-card-media-item {
flex: 1 1 auto !important;
padding: 8px 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
/* CENTER: MAXIMIZED ŚRĪLA PRABHUPĀDA CARD */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 440px !important;
height: 100% !important;
padding: 10px 24px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
}
/* Grand Portrait Circle - Maximized Size */
body.page-Main_Page .vh-sanctuary-portrait-box {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 4px 0 !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: min(240px, 24vh) !important;
height: min(240px, 24vh) !important;
min-width: 190px !important;
min-height: 190px !important;
border-radius: 50% !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 8px 28px rgba(18, 63, 56, 0.35),
0 2px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
overflow: hidden !important;
margin: 0 auto !important;
position: relative !important;
}
/* Right Column: Thematic Article Spotlight */
body.page-Main_Page .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
min-width: 300px !important;
height: 100% !important;
padding: 10px 16px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
/* --------------------------------------------------------------------------
3. INCREASE ALL CARD TITLES BY 100% (MAJESTIC 3D SACRED GOLD)
-------------------------------------------------------------------------- */
/* Center Title: "Śrīla Prabhupāda" (+100% -> 46px) */
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 46px !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: 0.5px !important;
margin-bottom: 4px !important;
}
/* Memories & Article Titles (+100% -> 28px) */
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 28px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
/* Media Card Title (+100% -> 26px) */
body.page-Main_Page .vh-card-media-item .vh-card-title,
body.page-Main_Page .vh-card-media-item .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 26px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
/* Bottom 4 Taxonomy Card Titles: Personalities, Names, Places, Questions (+100% -> 30px) */
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 30px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
/* --------------------------------------------------------------------------
4. INCREASE ALL TEXTS IN THOSE CARDS BY 100%
-------------------------------------------------------------------------- */
/* Śrīla Prabhupāda Sanctuary Subtitle (+100% -> 22px) */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-style: normal !important;
font-weight: 600 !important;
font-size: 22px !important;
line-height: 1.3 !important;
color: #2b4b52 !important;
text-align: center !important;
margin: 4px 0 0 0 !important;
}
/* Bottom 4 Taxonomy Descriptions (+100% -> 18px) */
body.page-Main_Page .vh-card-tax .vh-card-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.4 !important;
color: #2c3e42 !important;
text-align: center !important;
}
body.page-Main_Page .vh-card-tax .vh-card-text strong,
body.page-Main_Page .vh-card-tax .vh-card-text a strong {
font-size: 19px !important;
color: #123f38 !important;
font-weight: 700 !important;
}
/* Memories Text (+100% -> 18px) */
body.page-Main_Page .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-snippet {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.38 !important;
color: #2c3e42 !important;
}
/* Media Card Outlet Tag & Headline (+100%) */
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-size: 14.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
}
/* Media Thumbnail Dimensions */
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 100px !important;
border-radius: 6px !important;
overflow: hidden !important;
}
/* Right Article Spotlight Text (+100% -> 18px) */
body.page-Main_Page .vh-card-article .vh-card-text,
body.page-Main_Page .vh-card-article .vh-random-article-extract {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.4 !important;
color: #2c3e42 !important;
}
/* --------------------------------------------------------------------------
5. COMPACT TIMELINE TO FIT THE 100vh SCREEN PERFECTLY
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 130px !important;
height: 130px !important;
min-height: 130px !important;
max-height: 130px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
margin-top: 4px !important;
margin-bottom: 4px !important;
background: transparent !important;
}
body.page-Main_Page .vh-timeline-years {
flex: 0 0 32px !important;
height: 32px !important;
min-height: 32px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
padding: 4px 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
}
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
flex: 0 0 92px !important;
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
}
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
padding: 2px 14px !important;
}
body.page-Main_Page .vh-timeline-date {
font-size: 11px !important;
font-weight: 800 !important;
}
body.page-Main_Page .vh-timeline-text {
font-size: 13px !important;
line-height: 1.3 !important;
margin-top: 14px !important;
}
/* --------------------------------------------------------------------------
6. BOTTOM 4 TAXONOMY CARDS PROPORTIONS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-taxonomy-section {
width: 100% !important;
max-width: 1560px !important;
margin: 0 auto !important;
flex: 0 0 auto !important;
height: auto !important;
min-height: 145px !important;
max-height: 22vh !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
width: 100% !important;
height: 100% !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 140px !important;
padding: 8px 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* ==========================================================================
STEP 77: TARGETED ADJUSTMENTS STARTING FROM STEP 73
1. Centered, ROUND picture (no oval distortion, no text overlap)
2. Subtitle second line in one line, not truncated (same text size: 20-22px)
3. Put media card UP to fit in under "...remembers..." (no push-down)
4. Put bottom 4 cards up & decrease text size (14.5px) to fit in cleanly
5. Put timeline and years above it MORE DOWN (margin-top: 38px)
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: CENTERED ROUND PICTURE (NOT OVAL, NO TEXT OVERLAP)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 4px auto !important;
text-align: center !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 180px !important;
height: 180px !important;
min-width: 180px !important;
min-height: 180px !important;
max-width: 180px !important;
max-height: 180px !important;
border-radius: 50% !important; /* PERFECT 100% ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
box-shadow:
0 8px 24px rgba(18, 63, 56, 0.35),
0 2px 6px rgba(0, 0, 0, 0.22),
inset 0 2px 5px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage .vh-photo {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
background-size: cover !important;
background-position: center top !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
ITEM 2: SECOND LINE IN ONE LINE, NOT TRUNCATED (SAME TEXT SIZE)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin: 6px auto 0 auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
position: static !important; /* NEVER OVERLAPS WITH PHOTO */
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important; /* SAME PROMINENT TEXT SIZE */
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.25 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important; /* SAME PROMINENT TEXT SIZE */
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.25 !important;
}
/* --------------------------------------------------------------------------
ITEM 3: PUT MEDIA CARD UP TO FIT IN UNDER "...REMEMBERS..."
-------------------------------------------------------------------------- */
/* Left Column: Natural flow (no space-between that forces media down) */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* PUT IT UP UNDER REMEMBERS */
gap: 8px !important;
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: 275px !important;
max-height: 275px !important;
}
/* Memories Card (Top Left) */
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 110px !important;
max-height: 110px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories .vh-card-title a {
font-size: 22px !important;
margin-bottom: 3px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-memories .vh-card-text {
font-size: 14.5px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Media Card (Bottom Left): Sits directly under Memories with compact thumb */
body.page-Main_Page .vh-card-media-item {
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 155px !important;
max-height: 155px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 3px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-title a {
font-size: 21px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 68px !important; /* COMPACT THUMBNAIL FITS UP UNDER REMEMBERS */
border-radius: 5px !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-size: 11px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-size: 13.5px !important;
line-height: 1.25 !important;
color: #2c3e42 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Center Sanctuary Card */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 660px !important;
min-width: 440px !important;
height: 275px !important;
max-height: 275px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-bottom: 2px !important;
}
/* Right Column: Article Spotlight */
body.page-Main_Page .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: 275px !important;
max-height: 275px !important;
padding: 8px 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-article .vh-card-title a {
font-size: 22px !important;
line-height: 1.15 !important;
margin-bottom: 4px !important;
}
body.page-Main_Page .vh-card-article .vh-card-text {
font-size: 14px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
display: -webkit-box !important;
-webkit-line-clamp: 7 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Hero Row Container Height Capped at 275px */
body.page-Main_Page .vh-triad-grid {
height: 275px !important;
max-height: 275px !important;
}
/* --------------------------------------------------------------------------
ITEM 5: PUT THE TIMELINE AND THE YEARS ABOVE IT MORE DOWN
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 auto !important;
height: 120px !important;
min-height: 120px !important;
max-height: 120px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
margin-top: 38px !important; /* PUSHES TIMELINE & YEARS DOWN */
margin-bottom: 22px !important; /* GENEROUS BREATHING ROOM BELOW */
background: transparent !important;
}
body.page-Main_Page .vh-timeline-years {
flex: 0 0 28px !important;
height: 28px !important;
min-height: 28px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
padding: 3px 9px !important;
font-size: 12px !important;
font-weight: 700 !important;
}
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
flex: 0 0 82px !important;
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
}
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
padding: 2px 14px !important;
}
body.page-Main_Page .vh-timeline-date {
font-size: 10.5px !important;
font-weight: 800 !important;
}
body.page-Main_Page .vh-timeline-text {
font-size: 12px !important;
line-height: 1.25 !important;
margin-top: 10px !important;
}
/* --------------------------------------------------------------------------
ITEM 4: PUT BOTTOM CARDS UP & DECREASE TEXT SIZE IN THESE FOUR CARDS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-taxonomy-section {
width: 100% !important;
max-width: 1560px !important;
margin: 0 auto !important;
flex: 0 0 auto !important;
height: 110px !important;
min-height: 110px !important;
max-height: 110px !important;
margin-bottom: 10px !important; /* ELEVATED ABOVE SCREEN BOTTOM */
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
width: 100% !important;
height: 100% !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
height: 110px !important;
min-height: 110px !important;
max-height: 110px !important;
padding: 6px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
/* Title: 24px Grand Golden 3D Typography */
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a {
font-size: 24px !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
/* Decreased text size so it fits in without truncation */
body.page-Main_Page .vh-card-tax .vh-card-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14.5px !important; /* DECREASED FROM 18px TO FIT IN */
line-height: 1.35 !important;
color: #2c3e42 !important;
text-align: center !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-tax .vh-card-text strong,
body.page-Main_Page .vh-card-tax .vh-card-text a strong {
font-size: 15.5px !important;
color: #123f38 !important;
font-weight: 700 !important;
}
/* ==========================================================================
STEP 78: 50% LARGER ROUND IMAGE, ZERO SUBTITLE GAP, SMALL MEDIA GAP
1. 50% larger round image (270px x 270px) with clean visual gaps above/below
2. Zero gap between "Founder-Ācārya" and "International Society..."
3. Small gap (4px) between "Remembers..." and "In the Media"
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: 50% LARGER ROUND IMAGE (270px x 270px) WITH VISUAL GAPS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 460px !important;
height: auto !important;
min-height: 375px !important;
max-height: 390px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-bottom: 6px !important; /* VISUAL GAP ABOVE ROUND IMAGE */
}
/* Portrait stage increased by 50% (180px -> 270px) */
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 4px auto !important;
text-align: center !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 270px !important; /* +50% LARGER (180px -> 270px) */
height: 270px !important;
min-width: 270px !important;
min-height: 270px !important;
max-width: 270px !important;
max-height: 270px !important;
border-radius: 50% !important; /* 100% ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 10px 30px rgba(18, 63, 56, 0.38),
0 3px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage .vh-photo {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
background-size: cover !important;
background-position: center top !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
ITEM 2: NO GAP BETWEEN "FOUNDER-ĀCĀRYA" AND "INTERNATIONAL SOCIETY..."
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin: 8px auto 0 auto !important; /* VISUAL GAP BELOW ROUND IMAGE */
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINES */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 3: PUT MEDIA CARD UNDER "...REMEMBERS..." WITH JUST SMALL GAP (4px)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid {
height: auto !important;
min-height: 375px !important;
max-height: 390px !important;
}
/* Left Stacked Column: 4px crisp small gap */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 4px !important; /* JUST SMALL GAP! */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: 100% !important;
}
body.page-Main_Page .vh-card-memories {
margin: 0 !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 110px !important;
max-height: 110px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item {
margin: 0 !important;
margin-top: 0 !important; /* ZERO EXTRA MARGIN (CONTROLLED BY 4px GAP) */
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 155px !important;
max-height: 155px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
box-sizing: border-box !important;
}
/* Right Article Card height aligned */
body.page-Main_Page .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 275px !important;
max-height: 385px !important;
padding: 8px 14px !important;
}
/* Timeline section spacing adjusted for new hero height */
body.page-Main_Page .vh-timeline-section {
margin-top: 20px !important;
margin-bottom: 16px !important;
}
/* Bottom 4 cards padding & positioning */
body.page-Main_Page .vh-taxonomy-section {
margin-bottom: 8px !important;
}
/* ==========================================================================
STEP 79: MOVE "FOUNDER..." +10px DOWN & REMOVE HUGE GAP UNDER REMEMBERS
1. Subtitle ("Founder-Ācārya / International Society...") moved +10px down
2. "Śrīla Prabhupāda in the Media" pulled directly under "Remembers..."
with just a small 6px gap (huge empty gap completely eliminated)
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: MOVE THOSE TWO LINES "FOUNDER..." +10px DOWN
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 18px !important; /* MOVED +10px DOWN (FROM 8px TO 18px) */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINE 1 AND LINE 2 */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 2: REMOVE HUGE EMPTY GAP UNDER REMEMBERS (PUT MEDIA DIRECTLY UNDER)
-------------------------------------------------------------------------- */
/* Left Column Container: Natural tight vertical flow */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* TIGHT TOP PACKING (NO SPACE-BETWEEN) */
align-items: stretch !important;
gap: 6px !important; /* CRISP SMALL GAP! */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important; /* UNCONSTRAINED TO PREVENT PUSH-DOWN */
min-height: 0 !important;
}
/* Top Card: Memories (Tight fit to content, zero empty space below) */
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important; /* NEVER EXPAND VERTICALLY */
height: auto !important; /* EXACT HEIGHT OF CONTENT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-bottom: 0 !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories .vh-card-body,
body.page-Main_Page #vh-random-memories {
height: auto !important; /* NEVER STRETCH TO 100% */
min-height: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-memories .vh-card-title a {
font-size: 21px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-memories .vh-card-text {
font-size: 14px !important;
line-height: 1.35 !important;
margin-bottom: 0 !important;
}
/* Bottom Card: Media Item (Sits immediately below Memories with only 6px gap) */
body.page-Main_Page .vh-card-media-item {
flex: 0 0 auto !important; /* NEVER EXPAND VERTICALLY */
height: auto !important; /* EXACT HEIGHT OF CONTENT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important; /* ZERO EXTRA MARGIN (GAP CONTROLS IT) */
margin-bottom: 0 !important;
padding: 6px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-body {
height: auto !important;
min-height: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-title a {
font-size: 20px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 68px !important;
border-radius: 5px !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-size: 11px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-size: 13.5px !important;
line-height: 1.25 !important;
color: #2c3e42 !important;
}
/* ==========================================================================
STEP 80: ABSOLUTE ELIMINATION OF LEFT GAP & CENTER VERTICAL SHIFTS
1. Left Column: Completely eliminate the huge gap between "...remembers..."
and "In the Media" (align-items: flex-start, unconstrained auto height,
flex: 0 0 auto on both cards, strict 4px gap).
2. Center Card:
- Shift the round image 30px down from the title (margin-top: 36px)
- Text lines under the image increased +30px from image (margin-top: 48px)
- Zero gap between "Founder-Ācārya" and "International Society..."
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: ABSOLUTE ELIMINATION OF THE HUGE EMPTY GAP ON THE LEFT
-------------------------------------------------------------------------- */
/* Unstretch hero row so left column hugs its content instead of stretching 390px */
body.page-Main_Page .vh-triad-grid {
align-items: flex-start !important; /* STOPS FORCING LEFT COLUMN TO STRETCH */
height: auto !important;
min-height: 450px !important;
}
/* Left Stacked Column: Strictly pack items with only 4px gap */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* PACK TIGHTLY AT TOP */
align-items: stretch !important;
gap: 4px !important; /* CRISP 4px GAP ONLY */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important; /* NEVER 100% HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Memories Card (Top Left) */
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important; /* NEVER EXPAND */
height: auto !important; /* EXACT CONTENT HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories .vh-card-body,
body.page-Main_Page #vh-random-memories {
flex: 0 0 auto !important;
height: auto !important; /* NEVER 100% HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Media Card (Bottom Left): Sits immediately 4px under Memories */
body.page-Main_Page .vh-card-media-item {
flex: 0 0 auto !important; /* NEVER EXPAND */
height: auto !important; /* EXACT CONTENT HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important; /* ZERO EXTRA MARGIN (4px GAP CONTROLS IT) */
margin-bottom: 0 !important;
padding: 6px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-body {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 2: CENTER CARD - SHIFT IMAGE 30px DOWN & TEXT LINES +30px DOWN
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 460px !important;
height: auto !important;
min-height: 440px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 1. Shift the round image 30px down from the title */
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-top: 36px !important; /* SHIFTED 30px DOWN FROM TITLE */
margin-bottom: 0 !important;
text-align: center !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 270px !important;
height: 270px !important;
min-width: 270px !important;
min-height: 270px !important;
max-width: 270px !important;
max-height: 270px !important;
border-radius: 50% !important; /* PERFECT ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 10px 30px rgba(18, 63, 56, 0.38),
0 3px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* 2. Text lines under the image increased +30px from the image */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 48px !important; /* INCREASED +30px DOWN FROM THE IMAGE (18px -> 48px) */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINE 1 AND LINE 2 */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* ==========================================================================
STEP 81: SPECIFICITY OVERHAUL - ELIMINATING THE 340px SQUARE ON MEMORIES CARD
The user's DevTools confirmed: .vh-card.vh-card-memories was computing to
EXACTLY 339.99px x 339.99px (a square) because an older high-specificity rule
"body.page-Main_Page .vh-triad-grid .vh-card { flex: 0 0 340px !important; }"
was matching it. In a column flex container (.vh-triad-column-left),
flex-basis: 340px forces the HEIGHT to 340px!
We now use #vani-home scoped selectors to permanently override and reset
flex, height, and margins on all cards inside the left column.
========================================================================== */
/* 1. HERO TRIAD GRID & LEFT COLUMN: UNSTRETCH & WRAP CONTENT */
body.page-Main_Page #vani-home .vh-triad-grid,
body.page-Main_Page .vh-triad-grid {
align-items: flex-start !important;
height: auto !important;
min-height: 450px !important;
}
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page #vani-home .vh-triad-column-left,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 4px !important; /* CRISP 4px GAP BETWEEN THE TWO CARDS */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 2. OVERRIDE THE 340px FLEX-BASIS ON ALL CARDS IN THE LEFT COLUMN */
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card,
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card-memories,
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card-media-item,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-memories,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-media-item,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card-memories,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card-media-item {
flex: 0 0 auto !important; /* KILLS 340px HEIGHT! */
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important; /* HUGS EXACT CONTENT HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
}
/* 3. CARD BODIES IN LEFT COLUMN */
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card-body,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-body,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card-body,
body.page-Main_Page .vh-triad-column-left .vh-card-body,
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left #vh-random-memories,
body.page-Main_Page #vani-home .vh-triad-column-left #vh-random-memories,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left #vh-random-memories,
body.page-Main_Page .vh-triad-column-left #vh-random-memories {
flex: 0 0 auto !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
height: auto !important; /* KILLS 100% HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4. MEDIA ITEM CARD SPECIFIC STYLING IN LEFT COLUMN */
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-media-item,
body.page-Main_Page .vh-triad-column-left .vh-card-media-item {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
}
/* --------------------------------------------------------------------------
CENTER CARD: SHIFT ROUND IMAGE 30px DOWN & TEXT LINES +30px FROM IMAGE
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page #vani-home .vh-sanctuary-card,
body.page-Main_Page .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 460px !important;
height: auto !important;
min-height: 440px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Shift the round image 30px down from the title */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-top: 36px !important; /* SHIFTED 30px DOWN FROM TITLE */
margin-bottom: 0 !important;
text-align: center !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 270px !important;
height: 270px !important;
min-width: 270px !important;
min-height: 270px !important;
max-width: 270px !important;
max-height: 270px !important;
border-radius: 50% !important; /* PERFECT ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 10px 30px rgba(18, 63, 56, 0.38),
0 3px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* Text lines under the image increased +30px from the image */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page #vani-home .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 48px !important; /* INCREASED +30px DOWN FROM THE IMAGE (18px -> 48px) */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINE 1 AND LINE 2 */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text br,
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-sub-1,
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-sub-2,
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* --------------------------------------------------------------------------
RIGHT COLUMN: ARTICLE CARD (CLEAN UNCONSTRAINED AUTO HEIGHT)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-card-article,
body.page-Main_Page .vh-triad-grid > .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 275px !important;
max-height: 440px !important;
padding: 8px 14px !important;
}
/* ==========================================================================
STEP 82:
1. Unclamp Memories text so disciple name at the end of "recounted by..."
displays fully as it used to be (remove -webkit-line-clamp: 3).
2. Make +50px bigger gap between Memories card and "SP in Media" card
(gap: 50px).
3. Make the media thumbnail view a complete standard size (175px tall),
filling the plenty space below, with object-fit: contain so thumbnails
fit completely inside without any cropping and without changing their
aspect ratio.
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: DISPLAY FULL NAME AT END OF "RECOUNTED BY..." (UNCLAMP TEXT)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-text {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
max-height: none !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* --------------------------------------------------------------------------
ITEM 2: +50px BIGGER GAP TO "SP IN THE MEDIA"
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page #vani-home .vh-triad-column-left,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 50px !important; /* +50px BIGGER GAP */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-card-media-item,
body.page-Main_Page .vh-card-media-item {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 3: COMPLETE STANDARD SIZE THUMBNAIL VIEW (NO CROPPING, FIT ASPECT RATIO)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 175px !important; /* COMPLETE STANDARD VIEW SIZE FILLING THE SPACE */
min-height: 175px !important;
max-height: 175px !important;
border-radius: 6px !important;
overflow: hidden !important;
background: #f4efe6 !important; /* WARM VINTAGE PARCHMENT TONE */
border: 1px solid rgba(177, 135, 61, 0.3) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 6px 0 8px 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb a,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
text-decoration: none !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important; /* FITS COMPLETE THUMBNAIL WITHOUT CROPPING */
object-position: center center !important;
transition: transform .3s ease !important;
display: block !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb:hover img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.03) !important;
}
/* Captions under the thumbnail */
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-caption,
body.page-Main_Page .vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: center !important;
width: 100% !important;
margin-top: 2px !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-outlet,
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.2 !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-headline,
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-headline a,
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.3 !important;
color: #2c3e42 !important;
}
/* ==========================================================================
STEP 86:
1. NEUTRALIZE STRAY PARAGRAPHS: Prevent MediaWiki parser from generating
top/side offsets.
2. FOUNDER-ĀCARYA CLICKABLE TITLE:
- Macron ONLY above capital 'A' (Founder-Ācarya).
- Styled in exact 3D sacred gold as other card titles.
- Breathing filament underline at rest, 90% glide & lift on hover.
3. DECREASE GAP ABOVE 4 BOTTOM CARDS JUST TO 30px:
- Shifts .vh-taxonomy-section UP by 50px via translateY(-50px)
reducing the ~80px gap directly to 30px, keeping layout fully stable.
4. UNIFY HOVER ANIMATIONS FOR ALL TOP BAR ICONS & BUTTONS:
- Unified smooth lift (translateY(-2px)) on all topbar buttons/links.
- Unified warm gold glowing pill (rgba(245, 215, 127, 0.18)).
- Unified icon scale (1.08x) with soft glow, eliminating double-jumping.
========================================================================== */
/* 1. Neutralize stray paragraph tags */
body.page-Main_Page .mw-parser-output > p {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
body.page-Main_Page .mw-parser-output > p:empty {
display: none !important;
}
/* 2. Decrease gap above 4 bottom cards just to 30px */
body.page-Main_Page #vani-home .vh-taxonomy-section,
body.page-Main_Page .vh-taxonomy-section {
transform: translateY(-50px) !important; /* DECREASES GAP ABOVE 4 BOTTOM CARDS TO 30px */
}
/* 3. Founder-Ācarya Clickable 3D Title Link */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-sanctuary-card .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 40px !important; /* MAINTAINS +30px GAP FROM 270px ROUND IMAGE */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
position: static !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-founder-title,
body.page-Main_Page .vh-founder-title,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1,
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
text-align: center !important;
margin: 0 !important;
margin-bottom: 2px !important;
padding: 0 !important;
line-height: 1.15 !important;
}
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page .vh-founder-title a,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 24px !important; /* IDENTICAL CARD TITLE SIZE */
font-weight: 700 !important;
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 7px !important; /* SPACE FOR BREATHING UNDERLINE */
letter-spacing: 0.025em !important;
line-height: 1.2 !important;
cursor: pointer !important;
transform: none !important;
/* Temple Gold Face */
color: #dfad3e !important;
-webkit-text-fill-color: #dfad3e !important;
/* 3D Chiseled Shadow */
text-shadow: none !important;
transition: transform 0.22s ease, color 0.22s ease, text-shadow 0.22s ease !important;
}
/* Golden Breathing Filament Underline at Rest */
body.page-Main_Page #vani-home .vh-founder-title a::after,
body.page-Main_Page .vh-founder-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a::after,
body.page-Main_Page .vh-sanctuary-sub-1 a::after,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(223, 173, 62, 0.4) 15%,
#dfad3e 50%,
rgba(223, 173, 62, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(223, 173, 62, 0.75) !important;
border-radius: 2px !important;
pointer-events: none !important;
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease !important;
}
/* On Hover: 3D Lift & Full Glide Underline */
body.page-Main_Page #vani-home .vh-founder-title a:hover,
body.page-Main_Page .vh-founder-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover,
body.page-Main_Page .vh-sanctuary-sub-1 a:hover,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a:hover {
transform: translateY(-2.5px) !important;
color: #dfad3e !important;
-webkit-text-fill-color: #dfad3e !important;
text-decoration: none !important;
text-shadow: none !important;
}
body.page-Main_Page #vani-home .vh-founder-title a:hover::after,
body.page-Main_Page .vh-founder-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover::after,
body.page-Main_Page .vh-sanctuary-sub-1 a:hover::after,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a:hover::after {
animation: none !important;
opacity: 1 !important;
width: 90% !important;
left: 5% !important;
}
/* Subtitle Line 2: International Society for Kṛṣṇa Consciousness */
body.page-Main_Page #vani-home .vh-sanctuary-sub-2,
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4. UNIFIED HOVER ANIMATION FOR ALL TOP BAR ICONS & BUTTONS */
/* Base transitions on all interactive elements in top bar */
.vector-header-container .cdx-button,
.vector-header-container .vector-dropdown-label,
.vector-header-container #pt-userpage-2,
.vector-header-container .vector-user-links a,
.vector-header-container .vector-icon,
.vector-header-container svg {
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
filter 0.22s ease !important;
}
/* Unified button container hover */
.vector-header-container .vector-header-start .cdx-button:hover,
.vector-header-container .vector-header-end .cdx-button:hover,
.vector-header-container .vector-dropdown-label:hover,
.vector-header-container #vector-main-menu-dropdown .vector-dropdown-label:hover,
.vector-header-container #pt-userpage-2:hover,
.vector-header-container .vector-user-links a:hover {
transform: translateY(-2px) !important;
background-color: rgba(245, 215, 127, 0.18) !important;
border-radius: 4px !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(245, 215, 127, 0.4) !important;
color: #ffffff !important;
}
/* Unified icon scale & soft glow (no double translation) */
.vector-header-container .vector-header-start .cdx-button:hover .vector-icon,
.vector-header-container .vector-header-end .cdx-button:hover .vector-icon,
.vector-header-container .vector-dropdown-label:hover .vector-icon,
.vector-header-container #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-container #pt-userpage-2:hover .vector-icon,
.vector-header-container .vector-user-links a:hover .vector-icon,
.vector-header-container .cdx-button:hover svg,
.vector-header-container .vector-dropdown-label:hover svg,
.vector-header-container .vector-icon:hover {
transform: scale(1.08) !important;
color: #ffffff !important;
fill: #ffffff !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 8px rgba(245, 215, 127, 0.65)) !important;
}
/* ==========================================================================
STEP 87: COMPLETELY ELIMINATE / AVOID TOP BAR ICON ANIMATIONS
- Neutralize all transforms, scales, translations, and jumping animations on
all top bar icons, buttons, dropdowns, and links.
- Clean, quiet, stationary hover state with subtle background pill only.
========================================================================== */
/* 1. Reset all transforms, filters, and animations on top bar container elements */
.vector-header-container,
.vector-header-start,
.vector-header-end,
.vector-header-container *,
.vector-header-container .vector-icon,
.vector-header-container svg,
.vector-header-container .cdx-button,
.vector-header-container .vector-dropdown-label,
.vector-header-container #pt-userpage-2,
.vector-header-container .vector-user-links a,
.mw-header .vector-icon,
.vector-sticky-header .vector-icon {
transform: none !important;
animation: none !important;
filter: none !important;
will-change: auto !important;
}
/* 2. On hover: Keep icons strictly stationary — zero movement, zero scale, zero drop-shadow */
.vector-header-container .vector-icon:hover,
.vector-header-container svg:hover,
.vector-header-container .cdx-button:hover .vector-icon,
.vector-header-container .cdx-button:hover svg,
.vector-header-container .vector-dropdown-label:hover .vector-icon,
.vector-header-container .vector-dropdown-label:hover svg,
.vector-header-container #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-container #vector-main-menu-dropdown:hover svg,
.vector-header-container #pt-userpage-2:hover .vector-icon,
.vector-header-container #pt-userpage-2:hover svg,
.vector-header-container .vector-user-links a:hover .vector-icon,
.vector-header-container .vector-user-links a:hover svg,
.vector-header-container .cdx-search-input:hover .cdx-text-input__icon,
.vector-header-container .cdx-text-input__input:focus ~ .cdx-text-input__icon,
.vector-header-start .cdx-button:hover .vector-icon,
.vector-header-end .cdx-button:hover .vector-icon,
.vector-header-start .vector-dropdown-label:hover .vector-icon,
.vector-header-end .vector-dropdown-label:hover .vector-icon,
.vector-header-start #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-end #pt-userpage-2:hover .vector-icon {
transform: none !important;
filter: none !important;
animation: none !important;
color: #ffffff !important;
fill: #ffffff !important;
}
/* 3. On button/dropdown hover: subtle stationary background highlight only (no vertical lift, no jumping) */
.vector-header-container .cdx-button:hover,
.vector-header-container .vector-dropdown-label:hover,
.vector-header-container #vector-main-menu-dropdown .vector-dropdown-label:hover,
.vector-header-container #pt-userpage-2:hover,
.vector-header-container .vector-user-links a:hover,
.vector-header-start .cdx-button:hover,
.vector-header-end .cdx-button:hover,
.vector-header-start .vector-dropdown-label:hover,
.vector-header-end .vector-dropdown-label:hover,
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label:hover,
.vector-header-end #pt-userpage-2:hover {
transform: none !important;
box-shadow: none !important;
background-color: rgba(245, 215, 127, 0.15) !important;
border-radius: 4px !important;
color: #ffffff !important;
}
/* 4. On active / click: no displacement */
.vector-header-container .cdx-button:active,
.vector-header-container .vector-dropdown-label:active,
.vector-header-container .vector-icon:active,
.vector-header-start .vector-dropdown-label:active .vector-icon,
.vector-header-end .vector-dropdown-label:active .vector-icon,
.vector-header-start .cdx-button:active .vector-icon,
.vector-header-end .cdx-button:active .vector-icon {
transform: none !important;
filter: none !important;
}
/* ==========================================================================
STEP 91:
1. STRICTLY SCOPED TO MAIN PAGE (ZERO LEAKAGE TO REGULAR MEDIAWIKI PAGES):
- Every cursor rule is prefixed with html body.page-Main_Page.
- Regular MediaWiki pages retain 100% normal default Windows mouse behavior.
2. ABSOLUTE DISABLE OF WINDOWS CURSOR ACROSS MAIN PAGE & ALL HOVER STATES:
- Uses high-specificity rules targeting *:hover, a:hover, etc.
ensuring the native Windows cursor/pointing hand is completely suppressed.
3. CUSTOM GOLDEN CURSOR (ARROW AT REST, HAND ONLY ABOVE LINKS):
- Sleek golden arrow pointer by default.
- Smoothly switches to golden pointing hand ONLY above links (body.vh-cursor-link).
- No outer halo ring, zero lag, zero clutter.
4. FOUNDER-ĀCĀRYA MACRON CENTERING PRESERVED:
- 'Noto Serif', 'Cormorant Garamond' font stack.
========================================================================== */
/* 1. DISABLE WINDOWS CURSOR ON MAIN PAGE ONLY (ACROSS ALL ELEMENTS & HOVER STATES) */
html body.page-Main_Page,
html body.page-Main_Page *,
html body.page-Main_Page *:hover,
html body.page-Main_Page a,
html body.page-Main_Page a:hover,
html body.page-Main_Page a:focus,
html body.page-Main_Page a:active,
html body.page-Main_Page a:visited,
html body.page-Main_Page a *,
html body.page-Main_Page a *:hover,
html body.page-Main_Page [href],
html body.page-Main_Page [href]:hover,
html body.page-Main_Page [href] *,
html body.page-Main_Page [href] *:hover,
html body.page-Main_Page button,
html body.page-Main_Page button:hover,
html body.page-Main_Page input,
html body.page-Main_Page input:hover,
html body.page-Main_Page textarea,
html body.page-Main_Page select,
html body.page-Main_Page [role="button"],
html body.page-Main_Page [role="button"]:hover,
html body.page-Main_Page .cdx-button,
html body.page-Main_Page .cdx-button:hover,
html body.page-Main_Page .vh-card,
html body.page-Main_Page .vh-card:hover,
html body.page-Main_Page .vh-card *,
html body.page-Main_Page .vh-card *:hover,
html body.page-Main_Page .vh-year,
html body.page-Main_Page .vh-year:hover,
html body.page-Main_Page .vector-menu a,
html body.page-Main_Page .vector-menu a:hover,
html body.page-Main_Page .vector-dropdown-label,
html body.page-Main_Page .vector-dropdown-label:hover {
cursor: auto !important;
}
/* 2. CUSTOM GOLDEN CURSOR (MAIN PAGE ONLY) */
body.page-Main_Page #vh-cursor-pointer {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 24px !important;
height: 24px !important;
pointer-events: none !important;
z-index: 99999999 !important;
transform: translate3d(-100px, -100px, 0);
will-change: transform !important;
transition: opacity 0.15s ease !important;
}
body.page-Main_Page #vh-cursor-pointer svg {
width: 100% !important;
height: 100% !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65))
drop-shadow(0 0 6px rgba(223, 173, 62, 0.75)) !important;
transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.25, 1),
filter 0.18s ease !important;
}
/* State 1: Default Golden Arrow */
body.page-Main_Page #vh-cursor-pointer .vh-cursor-arrow {
display: block !important;
}
body.page-Main_Page #vh-cursor-pointer .vh-cursor-hand {
display: none !important;
}
/* State 2: ONLY Above Links -> Golden Pointing Hand */
body.page-Main_Page.vh-cursor-link #vh-cursor-pointer .vh-cursor-arrow {
display: none !important;
}
body.page-Main_Page.vh-cursor-link #vh-cursor-pointer .vh-cursor-hand {
display: block !important;
}
body.page-Main_Page.vh-cursor-link #vh-cursor-pointer svg {
transform: scale(1.12) !important;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75))
drop-shadow(0 0 10px rgba(245, 215, 127, 0.95)) !important;
}
/* Click Compression */
body.page-Main_Page.vh-cursor-click #vh-cursor-pointer svg {
transform: scale(0.88) !important;
}
/* Touchscreens / mobile protection: restore native behavior */
@media (hover: none) or (pointer: coarse) {
html body.page-Main_Page,
html body.page-Main_Page *,
html body.page-Main_Page a,
html body.page-Main_Page button {
cursor: auto !important;
}
body.page-Main_Page #vh-cursor-pointer {
display: none !important;
}
}
/* 3. FOUNDER-ĀCĀRYA PERFECT MACRON CENTERING FIX */
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page .vh-founder-title a,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-sanctuary-sub-1 a {
font-family: 'Noto Serif', 'Cormorant Garamond', Georgia, serif !important;
font-size: 24px !important;
font-weight: 700 !important;
letter-spacing: 0.025em !important;
}
/* ==========================================================================
STEP 92: PERMANENT BOTTOM NAVIGATION BAR STYLING
- Appears on Main Page AND all regular MediaWiki pages.
- Fixed at bottom of screen, permanently visible while scrolling.
- Deep temple teal background (#19383e), delicate gold top hairline border,
warm ivory/gold links, and highlighted Donate button.
========================================================================== */
.vh-bottom-bar {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 38px !important;
background: #19383e !important;
border-top: 1.5px solid rgba(223, 173, 62, 0.45) !important;
box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.35) !important;
z-index: 99990 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
user-select: none !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.vh-bottom-bar-inner {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
max-width: 1200px !important;
width: 100% !important;
padding: 0 16px !important;
overflow-x: auto !important;
white-space: nowrap !important;
scrollbar-width: none !important; /* Firefox */
}
.vh-bottom-bar-inner::-webkit-scrollbar {
display: none !important; /* Chrome/Safari */
}
.vh-bottom-link {
color: #f5d77f !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
letter-spacing: 0.35px !important;
padding: 3px 10px !important;
border-radius: 4px !important;
transition: color 0.18s ease, background-color 0.18s ease, transform 0.15s ease !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
}
.vh-bottom-link:hover {
color: #ffffff !important;
background-color: rgba(245, 215, 127, 0.18) !important;
text-decoration: none !important;
}
.vh-bottom-donate {
background: linear-gradient(135deg, rgba(223, 173, 62, 0.3) 0%, rgba(223, 173, 62, 0.12) 100%) !important;
border: 1px solid rgba(223, 173, 62, 0.65) !important;
color: #fce8a6 !important;
padding: 2.5px 14px !important;
border-radius: 12px !important;
font-weight: 700 !important;
}
.vh-bottom-donate:hover {
background: linear-gradient(135deg, #dfad3e 0%, #b88a38 100%) !important;
color: #150b00 !important;
border-color: #dfad3e !important;
box-shadow: 0 0 10px rgba(223, 173, 62, 0.5) !important;
}
.vh-bottom-sep {
color: rgba(245, 215, 127, 0.35) !important;
font-size: 12px !important;
line-height: 1 !important;
pointer-events: none !important;
}
/* Ensure long wiki pages leave space above the permanent bottom bar */
body {
padding-bottom: 46px !important;
}
/* On Main Page with custom cursor, ensure bottom links trigger the hand cursor */
body.page-Main_Page .vh-bottom-link {
cursor: auto !important;
}
/* ==========================================================================
STEP 93:
1. ELIMINATE RIGHT-SIDE GREEN STRIP ON MAIN PAGE:
- Vector 2022 skin uses a multi-column CSS grid on .mw-page-container-inner
with .vector-column-end having background-color: #D4ECDD !important;.
- Collapse grid to 100% full width and hide right/left columns on Main Page.
- Ensure mw-page-container and mw-content-container match the warm cream background.
2. PREVENT STICKY HEADER FROM APPEARING AT THE BOTTOM OF REGULAR PAGES:
- MediaWiki places .vector-sticky-header-container after the page content.
- Enforce position: fixed !important; top: 0 !important; on sticky header container,
and completely hide it (display: none !important;) when not actively sticky-visible.
3. VANI-TEMPLE RETURN LINK IN PERMANENT BOTTOM BAR:
- Provides an immediate 1-click return to the Main Page from any regular wiki page.
========================================================================== */
/* 1. ELIMINATE RIGHT-SIDE GREEN STRIP ON MAIN PAGE */
body.page-Main_Page .vector-column-end,
body.page-Main_Page .vector-column-start,
body.page-Main_Page .vector-toc-pinned-container,
body.page-Main_Page .vector-appearance-pinned-container,
body.page-Main_Page .vector-sitenotice-container {
display: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
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 {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
background: #f6f2e9 !important;
background-color: #f6f2e9 !important;
grid-template-columns: 1fr !important;
border: none !important;
box-shadow: none !important;
}
/* 2. PREVENT STICKY HEADER FROM APPEARING AT THE BOTTOM OF REGULAR WIKI PAGES */
.vector-sticky-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
}
/* Strictly hide the sticky header container whenever it is NOT in active sticky view */
.vector-sticky-header-container:not(.vector-sticky-header-visible),
.vector-header-container.vector-sticky-header-container:not(.vector-sticky-header-visible) {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* 3. VANI-TEMPLE RETURN LINK STYLING */
.vh-bottom-link.vh-bottom-home {
color: #dfad3e !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
}
.vh-bottom-link.vh-bottom-home:hover {
color: #ffffff !important;
background-color: rgba(223, 173, 62, 0.25) !important;
}
/* ==========================================================================
STEP 95: SMOOTH TRANSITION FOR IN THE MEDIA CARD CONTENT
========================================================================== */
body.page-Main_Page .vh-card-media-item .vh-media-card-content {
transition: opacity .5s ease, transform .5s ease !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-card-content.is-changing {
opacity: 0 !important;
transform: translateY(4px) !important;
}
/* ==========================================================================
STEP 96:
1. INCREASE ROUND HERO IMAGE BY 20% (270px -> 324px) WHILE KEEPING TOP/BOTTOM GAPS
2. INCREASE QUOTED TEXT IN RIGHT ARTICLE SPOTLIGHT BY +3 LINES (7 -> 10 LINES)
========================================================================== */
/* 1. Round hero image increased by 20% to 324px */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 324px !important;
height: 324px !important;
min-width: 324px !important;
min-height: 324px !important;
max-width: 324px !important;
max-height: 324px !important;
border-radius: 50% !important;
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow: 0 12px 36px rgba(18, 63, 56, 0.40), 0 3px 10px rgba(0, 0, 0, 0.24), inset 0 2px 6px rgba(255, 255, 255, 0.75), inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* Ensure top gap from title remains clean (36px) */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-portrait-box {
margin-top: 36px !important;
margin-bottom: 0 !important;
}
/* Ensure bottom gap from round image remains clean (40px) */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-sanctuary-card .vh-card-text.vh-sanctuary-text {
margin-top: 40px !important;
margin-bottom: 0 !important;
}
/* Ensure sanctuary card container height gracefully accommodates 324px image */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page #vani-home .vh-sanctuary-card,
body.page-Main_Page .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page .vh-sanctuary-card {
min-height: 500px !important;
height: auto !important;
}
/* 2. Increase right article quoted text by +3 lines (-webkit-line-clamp: 10) */
body.page-Main_Page #vani-home .vh-card-article .vh-card-text,
body.page-Main_Page .vh-card-article .vh-card-text {
display: -webkit-box !important;
-webkit-line-clamp: 10 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
/* Allow right card to expand gracefully up to 500px to match sanctuary height */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-card-article,
body.page-Main_Page .vh-triad-grid > .vh-card-article {
max-height: 500px !important;
min-height: 275px !important;
height: auto !important;
}
/* Explicit fast and visible 1.4s crossfade for round hero photo */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-photo-stage .vh-photo,
body.page-Main_Page .vh-sanctuary-card .vh-photo-stage .vh-photo {
transition: opacity 1.4s ease-in-out !important;
}
/* ==========================================================================
STEP 97: MOBILE OPTIMIZATION (STAGE 1 - REGULAR WIKI PAGES)
1. Universal #345B63 Dark Teal top bar across all pages and viewports.
2. Desktop title banner strictly scoped to screens >= 1000px.
3. Mobile header layout (burger menu, search, icons).
4. Mobile content readability, fluid images, and responsive table scrolling.
5. Mobile bottom bar and floating Back to Top button positioning.
========================================================================== */
/* 1. UNIVERSAL #345B63 TOP BAR ACROSS ALL PAGES AND VIEWPORTS */
.vector-header-container,
.vector-header,
.mw-header,
#mw-head {
background-color: #345B63 !important;
background: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
/* 2. DESKTOP TITLE BANNER SCOPED STRICTLY TO SCREENS >= 1000px */
@media screen and (max-width: 999px) {
#vanipedia-topbar-title,
#vanipedia-topbar-title-link,
#vanipedia-topbar-center-title {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
}
/* 3. MOBILE REGULAR WIKI PAGES OPTIMIZATIONS (<= 768px) */
@media screen and (max-width: 768px) {
/* 3.1 Top Bar Header Row */
.mw-header {
padding: 0 10px !important;
gap: 8px !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
}
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* 3.2 Hamburger Site Menu Button */
.vector-header-start #vector-main-menu-dropdown {
display: flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
margin: 0 !important;
padding: 0 4px !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-icon {
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
width: 22px !important;
height: 22px !important;
}
/* 3.3 Search Bar: Fluidly fits available space between burger and user tools */
.vector-header-container #p-search,
.mw-header #p-search,
.vector-header-start #p-search {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
max-width: calc(100vw - 110px) !important;
min-width: 100px !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container #searchform,
.mw-header #searchform {
width: 100% !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container .cdx-search-input,
.vector-header-container .vector-search-box-input,
.vector-header-container .cdx-text-input {
width: 100% !important;
max-width: 100% !important;
height: 32px !important;
margin: 0 !important;
}
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
width: 100% !important;
min-width: 80px !important;
height: 32px !important;
font-size: 13.5px !important;
padding-left: 30px !important;
box-sizing: border-box !important;
border-radius: 16px !important;
background-color: #1f3e45 !important;
border: 1px solid rgba(245, 215, 127, 0.45) !important;
color: #ffffff !important;
}
.vector-header-container .cdx-text-input__input:focus,
.vector-header-container input[type="search"]:focus,
#searchInput:focus {
width: 100% !important;
background-color: #173036 !important;
border-color: #f5d77f !important;
}
/* 3.4 Mobile Vector Sidebar Navigation Drawer */
#vector-main-menu-dropdown .vector-dropdown-content,
#vector-main-menu-dropdown-content,
#vector-main-menu-unpinned-container,
#vector-main-menu-dropdown .vector-dropdown-content.is-open {
position: fixed !important;
top: 52px !important;
left: 0 !important;
width: 290px !important;
max-width: 85vw !important;
height: calc(100vh - 52px - 38px) !important;
max-height: calc(100vh - 90px) !important;
overflow-y: auto !important;
background-color: #1f3e45 !important;
border-right: 2px solid #b1873d !important;
box-shadow: 4px 0 18px rgba(0, 0, 0, 0.45) !important;
z-index: 100001 !important;
padding: 10px 0 !important;
}
#vector-main-menu-dropdown .vector-dropdown-content a,
#vector-main-menu-dropdown-content a,
#vector-main-menu-unpinned-container a {
color: #f5d77f !important;
font-size: 14.5px !important;
padding: 9px 18px !important;
display: block !important;
text-decoration: none !important;
border-left: 3px solid transparent !important;
}
#vector-main-menu-dropdown .vector-dropdown-content a:hover,
#vector-main-menu-dropdown-content a:hover,
#vector-main-menu-unpinned-container a:hover {
background-color: #345B63 !important;
color: #ffffff !important;
border-left-color: #f5d77f !important;
}
#vector-main-menu-dropdown .vector-menu-heading,
#vector-main-menu-dropdown-content .vector-menu-heading,
#vector-main-menu-unpinned-container .vector-menu-heading {
color: #fce8a6 !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
border-bottom: 1px solid rgba(245, 215, 127, 0.3) !important;
padding: 10px 18px 6px 18px !important;
margin-top: 8px !important;
}
/* 4. CONTENT VIEW ON MOBILE */
#content, .mw-body, .mw-content-container {
padding: 12px 14px !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
font-size: 15.5px !important;
line-height: 1.62 !important;
}
#firstHeading, .mw-first-heading {
font-size: 1.65em !important;
line-height: 1.25 !important;
margin-bottom: 0.4em !important;
word-wrap: break-word !important;
}
h2, .mw-parser-output h2 {
font-size: 1.3em !important;
line-height: 1.3 !important;
margin-top: 1.1em !important;
margin-bottom: 0.35em !important;
}
h3, .mw-parser-output h3 {
font-size: 1.15em !important;
line-height: 1.3 !important;
}
/* Tables horizontal scroll wrapping */
.vanitable, .wikitable, .daytable {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
margin: 12px 0 !important;
}
.timelinesummary {
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Fluid images & media embeds */
div.tright, div.tleft, div.floatright, div.floatleft {
float: none !important;
margin: 12px auto !important;
max-width: 100% !important;
text-align: center !important;
}
div.thumbinner {
max-width: 100% !important;
width: auto !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
.mw-parser-output img {
max-width: 100% !important;
height: auto !important;
}
/* 5. BOTTOM BAR & BACK TO TOP BUTTON ON MOBILE */
.vh-bottom-bar {
height: 38px !important;
}
.vh-bottom-bar-inner {
gap: 10px !important;
padding: 0 10px !important;
}
.vh-bottom-link {
font-size: 12px !important;
padding: 2px 6px !important;
}
#vanipedia-back-to-top {
bottom: 50px !important;
right: 14px !important;
width: 42px !important;
height: 42px !important;
z-index: 100000 !important;
}
#footer, .mw-footer {
padding-bottom: 54px !important;
}
}
/* ==========================================================================
STEP 105: ROBUST NON-OVERLAPPING MINERVA MOBILE HEADER & USER DROPDOWN
1. Fix Magnifying Glass & User Icon Overlap:
- Header uses strictly rigid flex items:
Burger (32px left) + 20px gap + Title (auto) + [margin-left: auto spacer] + Search (32px right) + 8px gap + User (32px far right).
- Zero possibility of overlap.
2. User Menu Dropdown:
- Placed outside header flow (fixed positioning) with full dark teal & gold styling.
3. Plain burger icon, golden-yellow (#ffd700) SVGs for all icons.
========================================================================== */
/* 1. TOP BAR CONTAINER */
body.skin-minerva .header-container,
body.skin-minerva .header-chrome {
background-color: #345B63 !important;
background: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
box-sizing: border-box !important;
}
/* 2. STRICT RIGID SINGLE-ROW FLEX LAYOUT */
body.skin-minerva .minerva-header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
height: 100% !important;
width: 100% !important;
padding: 0 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
}
/* 2.1 BURGER (FAR LEFT: 32px) */
.minerva-header .navigation-drawer.toggle-list {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.minerva-header #mw-mf-main-menu-button,
.minerva-header .toggle-list__toggle {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.minerva-header .minerva-icon--menu,
.minerva-header #mw-mf-main-menu-button .minerva-icon--menu {
background-color: #f5d77f !important;
opacity: 1 !important;
width: 24px !important;
height: 24px !important;
display: inline-block !important;
}
/* 2.2 SITE TITLE (SPACED 20px FROM BURGER) */
.minerva-header .branding-box {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
margin: 0 0 0 20px !important;
padding: 0 !important;
}
.minerva-header .branding-box a,
.minerva-header .branding-box span {
color: #f5d77f !important;
font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-decoration: none !important;
white-space: nowrap !important;
}
/* 2.3 SEARCH FORM (PUSHED TO THE FAR RIGHT: 32px) */
.minerva-header .minerva-search-form {
margin-left: auto !important; /* Absorbs ALL horizontal space between title and search */
margin-right: 8px !important;
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
/* Hide the large search box input on mobile screens */
.minerva-header .minerva-search-form .search-box {
display: none !important;
}
.minerva-header #searchIcon {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.minerva-header .minerva-icon--search,
.minerva-header #searchIcon .minerva-icon--search {
background-color: #f5d77f !important;
opacity: 1 !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
.minerva-header #searchIcon span:last-child {
display: none !important;
}
/* 2.4 USER ICON (FAR RIGHT: 32px) */
.minerva-header .minerva-user-navigation {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
.minerva-header .minerva-notifications,
.minerva-header .minerva-user-navigation ul,
.minerva-header .minerva-user-navigation li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
}
.minerva-header #ca-mytalks {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.minerva-header .minerva-icon--bellOutline,
.minerva-header #ca-mytalks .minerva-icon--bellOutline {
background-color: #f5d77f !important;
opacity: 1 !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
.minerva-header #ca-mytalks span:last-child {
display: none !important;
}
/* 3. MOBILE USER DROPDOWN MENU (POPUP AT TOP-RIGHT) */
#vanipedia-mobile-user-menu {
display: none !important;
position: fixed !important;
top: 52px !important;
right: 8px !important;
width: 175px !important;
background-color: #1f3e45 !important;
border: 1.5px solid #b1873d !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
padding: 6px 0 !important;
z-index: 999999 !important;
box-sizing: border-box !important;
flex-direction: column !important;
}
#vanipedia-mobile-user-menu.is-open {
display: flex !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-item {
color: #f5d77f !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
text-decoration: none !important;
display: block !important;
line-height: 1.2 !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-item:hover,
#vanipedia-mobile-user-menu a.vani-user-menu-item:active {
background-color: #345B63 !important;
color: #ffffff !important;
}
#vanipedia-mobile-user-menu .vani-user-menu-divider {
height: 1px !important;
background-color: rgba(177, 135, 61, 0.35) !important;
margin: 5px 0 !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-logout {
color: #fca5a5 !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-logout:hover {
background-color: rgba(239, 68, 68, 0.2) !important;
color: #ffffff !important;
}
/* 4. MINERVA NAVIGATION DRAWER (THE LEFT MENU) */
#mw-mf-page-left.navigation-drawer,
#mw-mf-page-left.menu {
background-color: #1f3e45 !important;
border-right: 2px solid #b1873d !important;
box-shadow: 4px 0 18px rgba(0, 0, 0, 0.45) !important;
}
#mw-mf-page-left a.toggle-list-item__anchor {
color: #f5d77f !important;
font-size: 14.5px !important;
}
#mw-mf-page-left a.toggle-list-item__anchor:hover {
background-color: #345B63 !important;
color: #ffffff !important;
}
#mw-mf-page-left .minerva-icon {
background-color: #ffd700 !important;
}
/* ==========================================================================
STEP 107: BULLETPROOF DESKTOP USER DROPDOWN (MATCHING image_a7f3ff.png)
1. Card background: Dark teal (#1f3e45) with gold border (#b1873d).
2. Zero white background bleed: all inner elements transparent.
3. Links: High-contrast warm gold (#f5d77f) text, white on hover (#345B63).
4. Pure clean text without clunky icons: .vector-icon hidden.
5. Divider above Log out with soft rose highlight.
========================================================================== */
/* 1. DESKTOP USER DROPDOWN CARD */
html #vector-user-links-dropdown .vector-dropdown-content,
html .vector-user-menu .vector-dropdown-content,
html body.page-Main_Page #vector-user-links-dropdown .vector-dropdown-content,
html body #p-personal.vector-menu,
html body #p-personal .vector-menu-content,
#vector-user-links-dropdown-content {
background: #1f3e45 !important;
background-color: #1f3e45 !important;
border: 1.5px solid #b1873d !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
padding: 6px 0 !important;
min-width: 175px !important;
width: 180px !important;
box-sizing: border-box !important;
}
/* 2. INNER CONTAINERS: 100% TRANSPARENT */
html #vector-user-links-dropdown .vector-dropdown-content div,
html #vector-user-links-dropdown .vector-dropdown-content ul,
html #vector-user-links-dropdown .vector-dropdown-content li,
html #vector-user-links-dropdown .vector-dropdown-content .vector-menu-content,
html #vector-user-links-dropdown .vector-dropdown-content .vector-menu-content-list,
html .vector-user-menu .vector-dropdown-content div,
html .vector-user-menu .vector-dropdown-content ul,
html .vector-user-menu .vector-dropdown-content li {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* 3. ENSURE TALK (pt-mytalk) IS VISIBLE */
html #vector-user-links-dropdown #pt-mytalk,
html .vector-user-menu #pt-mytalk {
display: block !important;
visibility: visible !important;
}
/* 4. RESTORE USER FIGURE ICON ON HEADER BUTTON (BRIGHT GOLD & VISIBLE) */
#vector-user-links-dropdown-label .vector-icon,
#vector-user-links-dropdown .vector-dropdown-label .vector-icon,
.vector-user-menu .vector-dropdown-label .vector-icon,
.vector-header-end #vector-user-links-dropdown .vector-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
color: #f5d77f !important;
fill: #f5d77f !important;
background-color: #f5d77f !important;
margin-right: 4px !important;
vertical-align: middle !important;
}
/* Inside dropdown items: keep icons compact & inline so they never cause vertical bloating */
#vector-user-links-dropdown .vector-dropdown-content .vector-icon,
.vector-user-menu .vector-dropdown-content .vector-icon {
display: inline-block !important;
width: 16px !important;
height: 16px !important;
margin: 0 8px 0 0 !important;
padding: 0 !important;
color: #f5d77f !important;
fill: #f5d77f !important;
background-color: #f5d77f !important;
vertical-align: middle !important;
}
/* 5. LINKS: HIGH-CONTRAST WARM GOLD TEXT (#f5d77f) */
html #vector-user-links-dropdown .vector-dropdown-content a,
html .vector-user-menu .vector-dropdown-content a,
html #p-personal .vector-menu-content a {
display: flex !important;
align-items: center !important;
color: #f5d77f !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
line-height: 1.2 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
text-decoration: none !important;
box-sizing: border-box !important;
width: 100% !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
html #vector-user-links-dropdown .vector-dropdown-content a span,
html .vector-user-menu .vector-dropdown-content a span,
html #p-personal .vector-menu-content a span {
color: #f5d77f !important;
font-size: 15px !important;
font-weight: 500 !important;
display: inline !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* 6. HOVER STATE: LIGHTER TEAL (#345B63) WITH BRIGHT WHITE TEXT */
html #vector-user-links-dropdown .vector-dropdown-content a:hover,
html #vector-user-links-dropdown .vector-dropdown-content a:focus,
html #vector-user-links-dropdown .vector-dropdown-content a:active,
html .vector-user-menu .vector-dropdown-content a:hover,
html .vector-user-menu .vector-dropdown-content a:focus,
html .vector-user-menu .vector-dropdown-content a:active {
background-color: #345B63 !important;
color: #ffffff !important;
text-decoration: none !important;
}
html #vector-user-links-dropdown .vector-dropdown-content a:hover span,
html .vector-user-menu .vector-dropdown-content a:hover span {
color: #ffffff !important;
}
/* 7. DIVIDER ABOVE LOGOUT */
html #vector-user-links-dropdown #pt-logout,
html .vector-user-menu #pt-logout {
border-top: 1px solid rgba(177, 135, 61, 0.35) !important;
margin-top: 6px !important;
padding-top: 4px !important;
}
html #vector-user-links-dropdown #pt-logout a,
html .vector-user-menu #pt-logout a {
color: #fca5a5 !important;
}
html #vector-user-links-dropdown #pt-logout a:hover,
html .vector-user-menu #pt-logout a:hover {
background-color: rgba(239, 68, 68, 0.25) !important;
color: #ffffff !important;
}
/* ==========================================================================
STEP 110: MOBILE STICKY TOP BAR & BOTTOM BAR FIRST LINK ("MAIN PAGE")
1. Top bar remains sticky/visible when scrolling down on mobile viewports.
2. Fix bottom bar flex centering bug: justify-content: flex-start on mobile
ensures the first link ("Main Page") is always visible and not clipped.
3. Fully reverted experimental Main Page viewport scaling & hint banners.
========================================================================== */
/* 1. STICKY TOP BAR ON MOBILE (REMAINS VISIBLE ON SCROLL) */
body.skin-minerva .header-container,
body.skin-minerva .header-chrome,
body.skin-minerva header {
position: sticky !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
}
/* 2. BOTTOM BAR: ENSURE "MAIN PAGE" IS VISIBLE AS FIRST LINK ON MOBILE */
@media screen and (max-width: 768px) {
.vh-bottom-bar-inner {
justify-content: flex-start !important;
padding: 0 14px !important;
gap: 10px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.vh-bottom-link.vh-bottom-home {
display: inline-flex !important;
flex-shrink: 0 !important;
}
}
/* ==========================================================================
ENTRY PAGE SUPPRESSION (dev.vanipedia.org / VanipediaEntry3D)
Neither top bar nor bottom bar must appear on the 3D entry page.
========================================================================== */
body.ext-vp3d-fullscreen #vh-bottom-bar,
body.ext-vp3d-fullscreen .header-container,
body.ext-vp3d-fullscreen .header-chrome,
body.ext-vp3d-fullscreen .minerva-header,
body.ext-vp3d-fullscreen .vector-header-container,
body.ext-vp3d-fullscreen #mw-head,
body.ext-vp3d-fullscreen .mw-header,
body.ext-vp3d-fullscreen #mw-navigation,
body:has(.vp-entry3d-container) #vh-bottom-bar,
body:has(.vp-entry3d-container) .header-container,
body:has(.vp-entry3d-container) .header-chrome,
body:has(.vp-entry3d-container) .minerva-header,
body:has(.vp-entry3d-container) .vector-header-container,
body:has(.vp-entry3d-wrapper) #vh-bottom-bar,
body:has(.vp-entry3d-wrapper) .header-container,
body:has(.vp-entry3d-wrapper) .header-chrome,
body:has(.vp-entry3d-wrapper) .minerva-header,
body:has(.vp-entry3d-wrapper) .vector-header-container {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================================
STEP 116: UNIFIED 3-SLOT ROTATED LANDSCAPE STAGE FOR MAIN PAGE ON MOBILE
Includes Top Bar, Main Page, and Bottom Bar in one unified landscape orientation.
========================================================================== */
#vani-mobile-stage {
position: fixed !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
overflow: hidden !important;
z-index: 999999 !important;
background-color: #f6f2e9 !important;
margin: 0 !important;
padding: 0 !important;
}
#vani-rotated-box {
position: absolute !important;
top: 0 !important;
left: 0 !important;
transform-origin: top left !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
background-color: #f6f2e9 !important;
margin: 0 !important;
padding: 0 !important;
}
#vani-rotated-box.is-auto-landscape {
transform: rotate(90deg) translate(0, -100%) !important;
}
#vani-rotated-box.is-native-landscape {
transform: none !important;
}
/* 1. TOP HEADER SLOT (Landscape orientation) */
#vani-stage-header-slot {
flex: 0 0 50px !important;
width: 100% !important;
height: 50px !important;
max-height: 50px !important;
min-height: 50px !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
z-index: 1000 !important;
overflow: visible !important;
position: relative !important;
box-sizing: border-box !important;
}
#vani-stage-header-slot .header-container,
#vani-stage-header-slot .header-chrome,
#vani-stage-header-slot .minerva-header,
#vani-stage-header-slot .vector-header-container,
#vani-stage-header-slot #mw-head {
position: static !important;
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 12px !important;
box-shadow: none !important;
border: none !important;
background-color: #345B63 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
/* 2. CONTENT SLOT (Landscape orientation, containing #vani-home) */
#vani-stage-content-slot {
flex: 1 1 auto !important;
width: 100% !important;
height: calc(100% - 50px - 36px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
position: relative !important;
background-color: #f6f2e9 !important;
}
/* Enforce rigid 1200px desktop grid on #vani-home inside mobile stage */
#vani-stage-content-slot #vani-home {
width: 1200px !important;
min-width: 1200px !important;
max-width: 1200px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 8px 16px 20px 16px !important;
margin: 0 !important;
background-color: #f6f2e9 !important;
}
/* Hero Triad in Mobile Landscape: Rigid 3-Column Horizontal Flow */
#vani-stage-content-slot .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
gap: 16px !important;
flex-wrap: nowrap !important;
height: auto !important;
min-height: 250px !important;
}
#vani-stage-content-slot .vh-triad-column-left {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
#vani-stage-content-slot .vh-card-memories,
#vani-stage-content-slot .vh-card-media-item {
flex: 0 0 auto !important;
height: auto !important;
}
#vani-stage-content-slot .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
text-align: center !important;
}
#vani-stage-content-slot .vh-photo-stage {
width: 200px !important;
height: 200px !important;
margin: 0 auto !important;
}
#vani-stage-content-slot .vh-card-text.vh-sanctuary-text {
margin-top: 10px !important;
}
#vani-stage-content-slot .vh-card-article {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
height: auto !important;
}
/* Interactive Timeline in Mobile Landscape */
#vani-stage-content-slot .vh-timeline-section {
width: 100% !important;
max-width: 100% !important;
margin: 6px 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
flex: 0 0 auto !important;
height: auto !important;
}
/* Thematic Taxonomy in Mobile Landscape: Rigid 4-Column Grid */
#vani-stage-content-slot .vh-taxonomy-section {
width: 100% !important;
transform: none !important;
margin: 6px 0 !important;
}
#vani-stage-content-slot .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
width: 100% !important;
}
#vani-stage-content-slot .vh-card-tax {
height: auto !important;
min-height: 105px !important;
}
/* 3. FOOTER SLOT (Landscape orientation, containing #vh-bottom-bar) */
#vani-stage-footer-slot {
flex: 0 0 36px !important;
width: 100% !important;
height: 36px !important;
max-height: 36px !important;
min-height: 36px !important;
background-color: #19383e !important;
border-top: 1.5px solid #b1873d !important;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
z-index: 99990 !important;
overflow: hidden !important;
position: relative !important;
box-sizing: border-box !important;
}
#vani-stage-footer-slot #vh-bottom-bar,
#vani-stage-footer-slot .vh-bottom-bar {
position: static !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
background-color: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#vani-stage-footer-slot .vh-bottom-bar-inner {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
gap: 14px !important;
padding: 0 16px !important;
}
/* Dropdown Menu inside Stage Header */
#vani-stage-header-slot #vanipedia-mobile-user-menu {
position: absolute !important;
top: 48px !important;
right: 8px !important;
z-index: 1000000 !important;
}
/* Minerva Left Navigation Drawer z-index when open */
#mw-mf-page-left.navigation-drawer {
z-index: 1000005 !important;
}
/* Robust Header Child Layout in Landscape Stage */
#vani-stage-header-slot .vector-header,
#vani-stage-header-slot .mw-header {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 12px !important;
box-sizing: border-box !important;
}
#vani-stage-header-slot .vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
flex: 1 1 auto !important;
}
#vani-stage-header-slot .vector-header-end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
flex: 0 0 auto !important;
}
/* Hide any duplicate/stray bars outside the stage when active */
body.has-vani-stage > .vector-header-container,
body.has-vani-stage > .vector-sticky-header-container,
body.has-vani-stage > #mw-head,
body.has-vani-stage > #vh-bottom-bar {
display: none !important;
}
/* ==========================================================================
STEP 119: EXACT DESKTOP SIDEBAR FORMATTING FOR MOBILE BURGER MENU
1. Cleans out Minerva default clutter (Nearby, Random, Settings, About, etc.)
2. Styles the mobile drawer (#mw-mf-page-left) to match the desktop
accordion layout (.vanipedia-sidebar-menu).
========================================================================== */
#mw-mf-page-left {
background-color: #f6f2e9 !important;
border-right: 2px solid #b1873d !important;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.45) !important;
padding: 12px 10px !important;
box-sizing: border-box !important;
width: 290px !important;
max-width: 85vw !important;
}
/* Hide all Minerva default lists completely */
#mw-mf-page-left > ul#p-navigation,
#mw-mf-page-left > ul#p-personal,
#mw-mf-page-left > ul.hlist,
#mw-mf-page-left .menu__item--nearby,
#mw-mf-page-left .menu__item--random {
display: none !important;
}
/* Mobile drawer container for desktop sidebar */
#mw-mf-page-left #vani-mobile-synced-sidebar {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* In mobile drawer, make .vanipedia-sidebar-menu take full drawer width */
#mw-mf-page-left .vanipedia-sidebar-menu {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 6px !important;
}
/* Ensure mobile drawer accordion header matches desktop */
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading {
cursor: pointer !important;
background-color: #2c4c50 !important;
border: 1px solid #1b3033 !important;
border-radius: 4px !important;
margin-bottom: 4px !important;
padding: 10px 14px !important;
font-weight: 600 !important;
font-size: 14px !important;
color: #ffffff !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu:not(.vanipedia-collapsed) .vector-menu-heading {
border-radius: 4px 4px 0 0 !important;
margin-bottom: 0 !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading:hover {
background-color: #385e63 !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading::after {
content: "▼" !important;
font-size: 0.75em !important;
color: #ffffff !important;
transition: transform 0.2s ease !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-heading::after {
transform: rotate(-90deg) !important;
}
/* Content Area inside Mobile Accordion */
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content {
background-color: #eaeff0 !important;
border: 1px solid #2c4c50 !important;
border-top: none !important;
border-radius: 0 0 4px 4px !important;
padding: 0 0 4px 0 !important;
margin-bottom: 6px !important;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
box-sizing: border-box !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-content {
display: none !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li a {
display: block !important;
padding: 9px 14px 9px 18px !important;
color: #1b3033 !important;
font-size: 14px !important;
text-decoration: none !important;
border-left: 3px solid transparent !important;
border-bottom: 1px solid rgba(44, 76, 80, 0.1) !important;
transition: all 0.15s ease !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li:last-child a {
border-bottom: none !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li a:hover {
background-color: #dbe4e6 !important;
border-left: 3px solid #2c4c50 !important;
color: #000000 !important;
}
/* 102 Languages Search box inside Mobile Drawer */
#mw-mf-page-left #sidebarLanguageSearch {
width: 100% !important;
box-sizing: border-box !important;
padding: 7px 10px !important;
font-size: 14px !important;
border: 1px solid #a2a9b1 !important;
border-radius: 3px !important;
background-color: #ffffff !important;
color: #1a1a1a !important;
margin-bottom: 4px !important;
}
/* ==========================================================================
STEP 122: STRICT POSITIONING OF "HOME" LINK/ICON (RIGHT OF SEARCH)
1. Desktop: Positioned strictly on the RIGHT of search bar via order: 10 vs order: 5.
2. Clean golden styling (#f5d77f), no underline, subtle hover highlight.
3. Mobile (both Minerva & Vector landscape): Golden Home icon (width 22px)
strictly visible next to the search icon.
========================================================================== */
/* Strict Flex Ordering: Left to Right across .vector-header-start */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.vector-header-start .vector-main-menu-landmark,
.vector-header-start #vector-main-menu-dropdown {
order: 1 !important;
}
.vector-header-start .mw-logo {
order: 2 !important;
display: none !important;
}
/* Search Bar strictly ORDER 5 */
.vector-header-start #p-search,
.vector-header-container #p-search,
.mw-header #p-search,
div#p-search {
order: 5 !important;
margin-right: 0 !important;
}
/* Home Link strictly ORDER 10 (GUARANTEES IT SITS ON THE RIGHT OF SEARCH) */
.vector-header-start #vanipedia-topbar-home-link,
.vector-header-container #vanipedia-topbar-home-link,
#vanipedia-topbar-home-link,
a.vanipedia-topbar-home {
order: 10 !important;
margin-left: 10px !important;
margin-right: 14px !important;
color: #f5d77f !important;
text-decoration: none !important;
text-decoration-line: none !important;
border: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14.5px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 5px 10px !important;
border-radius: 4px !important;
background: transparent !important;
background-color: transparent !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
flex-shrink: 0 !important;
line-height: 1 !important;
visibility: visible !important;
opacity: 1 !important;
}
a.vanipedia-topbar-home:hover,
a.vanipedia-topbar-home:active,
.vector-header-container a.vanipedia-topbar-home:hover,
.vector-header-container #vanipedia-topbar-home-link:hover,
.minerva-header a.vanipedia-topbar-home:hover,
#vani-stage-header-slot a.vanipedia-topbar-home:hover {
color: #ffffff !important;
background-color: rgba(245, 215, 127, 0.2) !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
transform: translateY(-1px) !important;
}
/* Home Icon Styling */
.vanipedia-topbar-home .vanipedia-home-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
.vanipedia-topbar-home .vanipedia-home-icon svg {
width: 18px !important;
height: 18px !important;
stroke: #f5d77f !important;
fill: none !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
transition: stroke 0.2s ease, transform 0.2s ease !important;
display: inline-block !important;
vertical-align: middle !important;
}
.vanipedia-topbar-home:hover .vanipedia-home-icon svg {
stroke: #ffffff !important;
transform: scale(1.1) !important;
}
/* Home Text Styling on Desktop */
.vanipedia-topbar-home .vanipedia-home-text {
display: inline-block !important;
line-height: 1 !important;
text-decoration: none !important;
}
/* MOBILE RESPONSIVE (Both Vector & Minerva) */
@media screen and (max-width: 900px) {
.vector-header-start #p-search,
.vector-header-container #p-search,
.mw-header #p-search {
flex: 1 1 auto !important;
max-width: calc(100vw - 160px) !important;
}
.vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
.vector-header-start #vanipedia-topbar-home-link,
.vector-header-container #vanipedia-topbar-home-link,
#vanipedia-topbar-home-link,
a.vanipedia-topbar-home {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
margin: 0 4px !important;
border-radius: 50% !important;
order: 10 !important;
}
.vanipedia-topbar-home .vanipedia-home-icon svg {
width: 20px !important;
height: 20px !important;
}
}
/* MINERVA MOBILE SKIN HEADER (Regular Articles on Mobile) */
.minerva-header .vanipedia-topbar-home,
.minerva-header #vanipedia-topbar-home-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 6px !important;
padding: 0 !important;
z-index: 1000 !important;
border-radius: 50% !important;
}
.minerva-header .vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
.minerva-header .vanipedia-topbar-home .vanipedia-home-icon svg {
width: 20px !important;
height: 20px !important;
}
/* In Rotated Landscape Stage on Main Page */
#vani-stage-header-slot .vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
#vani-stage-header-slot .vanipedia-topbar-home {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
padding: 0 !important;
margin: 0 8px !important;
width: 34px !important;
height: 34px !important;
box-sizing: border-box !important;
order: 10 !important;
}
#vani-stage-header-slot .vanipedia-topbar-home .vanipedia-home-icon svg {
width: 20px !important;
height: 20px !important;
}
#vani-stage-header-slot .vector-header-start #p-search {
order: 5 !important;
}
/* Bottom Bar Home Link: Strict no underline */
.vh-bottom-link.vh-bottom-entry,
a.vh-bottom-link {
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
}
.vh-bottom-link.vh-bottom-entry:hover,
a.vh-bottom-link:hover {
text-decoration: none !important;
text-decoration-line: none !important;
}
/* ==========================================================================
STEP 129: RESTORE COMPLETE ORIGINAL STRUCTURE (ZERO OVERLAPS, 4 TAXONOMY IN 1 ROW)
+ TOP BANNER TITLE AS PLAIN TEXT
+ WHO IS ŚRĪLA PRABHUPĀDA PERMANENT TITLE
+ OPTION A: RICH BURNISHED ANTIQUE GOLD (#966817)
+ RISE HOVER EFFECT ON ALL 9 CARD TITLES
========================================================================== */
/* 1. TOP BANNER TITLE AS PURE PLAIN TEXT */
#vanipedia-topbar-title,
span#vanipedia-topbar-title,
a#vanipedia-topbar-title {
pointer-events: none !important;
cursor: default !important;
user-select: text !important;
text-decoration: none !important;
}
#vanipedia-topbar-title:hover,
span#vanipedia-topbar-title:hover,
a#vanipedia-topbar-title:hover {
color: #f5d77f !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
cursor: default !important;
transform: translate(-50%, -50%) !important;
}
/* 2. SANCTUARY CARD TITLE SIZING & NO TEXT CHANGE */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a {
font-size: 38px !important;
line-height: 1.15 !important;
letter-spacing: 0.015em !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
white-space: nowrap !important;
}
body.page-Main_Page .vh-sanctuary-title a .vh-title-hover {
display: none !important;
}
body.page-Main_Page .vh-sanctuary-title a .vh-title-default {
opacity: 1 !important;
transform: none !important;
}
/* 3. OPTION A: RICH BURNISHED ANTIQUE GOLD ON ALL CARD TITLES */
body.page-Main_Page .vh-card-title,
body.page-Main_Page .vh-card-title a,
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a,
body.page-Main_Page .vh-card-article .vh-card-title,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title,
body.page-Main_Page .vh-random-article-title a,
body.page-Main_Page .vh-card-memories .vh-card-title,
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-media-item .vh-card-title,
body.page-Main_Page .vh-card-media-item .vh-card-title a,
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page-Main_Page .vh-media-title,
body.page-Main_Page .vh-media-title a,
body.page-Main_Page .vh-founder-title,
body.page-Main_Page .vh-founder-title a,
body.page-Main_Page #vani-home .vh-founder-title,
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a,
#vani-stage-content-slot .vh-card-title a,
#vani-stage-content-slot .vh-sanctuary-title a {
color: #966817 !important;
-webkit-text-fill-color: #966817 !important;
-webkit-text-stroke: 0 !important;
paint-order: normal !important;
text-shadow: none !important;
-webkit-filter: none !important;
filter: none !important;
display: inline-block !important;
position: relative !important;
cursor: pointer !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
color 0.2s ease,
-webkit-text-fill-color 0.2s ease !important;
}
/* 4. RISE HOVER EFFECT ON ALL 9 CARD TITLES (-3px LIFT + GOLD ILLUMINATION) */
body.page-Main_Page #vani-home .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-article .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a:hover,
body.page-Main_Page #vani-home .vh-founder-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-media-item .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-body > .vh-card-title a:hover,
body.page-Main_Page .vh-card-title a:hover,
body.page-Main_Page .vh-card-article .vh-card-title a:hover,
body.page-Main_Page .vh-sanctuary-title a:hover,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a:hover,
body.page-Main_Page .vh-founder-title a:hover,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page .vh-card-media-item .vh-card-title a:hover,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover,
#vani-stage-content-slot .vh-card-title a:hover,
#vani-stage-content-slot .vh-sanctuary-title a:hover,
#vani-stage-content-slot .vh-founder-title a:hover {
transform: translateY(-3px) !important;
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: none !important;
}
/* 5. GOLDEN FILAMENT UNDERLINE AT REST & GLIDE ON HOVER */
body.page-Main_Page .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-title a::after,
body.page-Main_Page .vh-card-article .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-article .vh-card-title a::after,
body.page-Main_Page .vh-sanctuary-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a::after,
body.page-Main_Page .vh-founder-title a::after,
body.page-Main_Page #vani-home .vh-founder-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a::after,
body.page-Main_Page .vh-card-memories .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a::after,
body.page-Main_Page .vh-card-media-item .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-media-item .vh-card-title a::after,
body.page-Main_Page .vh-media-title a::after,
body.page-Main_Page .vh-card-tax .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a::after,
body.page-Main_Page .vh-card-tax .vh-card-body > .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-body > .vh-card-title a::after,
#vani-stage-content-slot .vh-card-title a::after,
#vani-stage-content-slot .vh-sanctuary-title a::after,
#vani-stage-content-slot .vh-founder-title a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 6px rgba(181, 130, 36, 0.65) !important;
border-radius: 2px !important;
pointer-events: none !important;
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.2s ease !important;
}
body.page-Main_Page #vani-home .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-article .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a:hover::after,
body.page-Main_Page #vani-home .vh-founder-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover::after,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-media-item .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-body > .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-article .vh-card-title a:hover::after,
body.page-Main_Page .vh-sanctuary-title a:hover::after,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a:hover::after,
body.page-Main_Page .vh-founder-title a:hover::after,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-media-item .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover::after,
#vani-stage-content-slot .vh-card-title a:hover::after,
#vani-stage-content-slot .vh-sanctuary-title a:hover::after,
#vani-stage-content-slot .vh-founder-title a:hover::after {
animation: none !important;
opacity: 1 !important;
width: 90% !important;
left: 5% !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(181, 130, 36, 0.75) !important;
}
/* 6. STRICT STRUCTURAL RESTORATION: CLEAN ELEVATION & COLUMN BALANCING */
/* Introductory Articles flat title styling & hover */
body.page-Main_Page #vani-home .vh-intro-articles-title,
body.page-Main_Page #vani-home .vh-intro-articles-title a,
body.page-Main_Page .vh-intro-articles-title,
body.page-Main_Page .vh-intro-articles-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 24px !important;
font-weight: 700 !important;
color: #966817 !important;
-webkit-text-fill-color: #966817 !important;
text-shadow: none !important;
letter-spacing: 0.025em !important;
line-height: 1.2 !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 5px !important;
margin: 0 0 4px 0 !important;
cursor: pointer !important;
text-align: center !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
color 0.2s ease,
-webkit-text-fill-color 0.2s ease !important;
}
body.page-Main_Page #vani-home .vh-intro-articles-title a:hover,
body.page-Main_Page .vh-intro-articles-title a:hover {
transform: translateY(-3px) !important;
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: none !important;
}
body.page-Main_Page #vani-home .vh-intro-articles-title a::after,
body.page-Main_Page .vh-intro-articles-title a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 6px rgba(181, 130, 36, 0.65) !important;
border-radius: 2px !important;
pointer-events: none !important;
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.2s ease !important;
}
body.page-Main_Page #vani-home .vh-intro-articles-title a:hover::after,
body.page-Main_Page .vh-intro-articles-title a:hover::after {
animation: none !important;
opacity: 1 !important;
width: 90% !important;
left: 5% !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(181, 130, 36, 0.75) !important;
}
/* Specific article item headline within the spotlight card */
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-article-item-title,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-article-item-title a,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-card-title,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-card-title a,
body.page-Main_Page .vh-card-article #vh-random-article .vh-article-item-title,
body.page-Main_Page .vh-card-article #vh-random-article .vh-article-item-title a,
body.page-Main_Page .vh-card-article #vh-random-article .vh-card-title,
body.page-Main_Page .vh-card-article #vh-random-article .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
display: block !important;
margin-top: 2px !important;
margin-bottom: 4px !important;
text-align: center !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-article-item-title a:hover,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-card-title a:hover,
body.page-Main_Page .vh-card-article #vh-random-article .vh-article-item-title a:hover,
body.page-Main_Page .vh-card-article #vh-random-article .vh-card-title a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
/* Devotee Subtitle in Memories card */
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a,
body.page-Main_Page .vh-memory-devotee-subtitle,
body.page-Main_Page .vh-memory-devotee-subtitle a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 17.5px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
display: block !important;
margin-top: 2px !important;
margin-bottom: 5px !important;
text-align: center !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page .vh-memory-devotee-subtitle a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
@media screen and (min-width: 901px) {
/* Enforce 3 columns on desktop for Section 3 (Personalities, Names, Places) */
body.page-Main_Page #vani-home .vh-taxonomy-grid,
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 90px !important;
max-height: 130px !important;
}
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a,
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page-Main_Page #vani-home .vh-card-questions .vh-card-title,
body.page-Main_Page #vani-home .vh-card-questions .vh-card-title a,
body.page-Main_Page .vh-card-questions .vh-card-title,
body.page-Main_Page .vh-card-questions .vh-card-title a {
font-size: 21px !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
body.page-Main_Page #vani-home .vh-card-tax,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page #vani-home .vh-card-questions,
body.page-Main_Page .vh-card-questions {
padding: 2px 10px 4px 10px !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-tax .vh-card-text,
body.page-Main_Page .vh-card-tax .vh-card-text,
body.page-Main_Page #vani-home .vh-card-questions .vh-card-text,
body.page-Main_Page .vh-card-questions .vh-card-text {
font-size: 13px !important;
line-height: 1.35 !important;
margin-top: 2px !important;
}
/* Lift 3 bottom taxonomy cards up so they sit comfortably above the footer */
body.page-Main_Page #vani-home .vh-taxonomy-section,
body.page-Main_Page .vh-taxonomy-section {
transform: translateY(-72px) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
height: auto !important;
min-height: 95px !important;
max-height: 120px !important;
position: relative !important;
z-index: 2 !important;
}
/* Founder-Ācārya and Preeminent Śikṣā-Guru single line fitting */
body.page-Main_Page #vani-home .vh-founder-title,
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page .vh-founder-title,
body.page-Main_Page .vh-founder-title a {
font-size: 21px !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-sub-2,
body.page-Main_Page .vh-sanctuary-sub-2 {
font-size: 17.5px !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
/* SHIFT MARKED SECTION (Hero Triad + Timeline) DOWN EXACTLY 30px */
body.page-Main_Page #vani-home .vh-triad-grid,
body.page-Main_Page .vh-triad-grid {
transform: translateY(30px) !important;
height: auto !important;
min-height: 380px !important;
max-height: 420px !important;
align-items: flex-start !important;
margin-bottom: 8px !important;
}
body.page-Main_Page #vani-home .vh-timeline-section,
body.page-Main_Page .vh-timeline-section {
transform: translateY(30px) !important;
position: relative !important;
margin-top: 16px !important;
margin-bottom: 10px !important;
height: 125px !important;
min-height: 125px !important;
max-height: 125px !important;
flex: 0 0 125px !important;
}
/* Left & Right Stacked Columns: Symmetrical 340px widths */
body.page-Main_Page #vani-home .vh-triad-column-left,
body.page-Main_Page .vh-triad-column-left,
body.page-Main_Page #vani-home .vh-triad-column-right,
body.page-Main_Page .vh-triad-column-right,
body.page-Main_Page #vani-home .vh-triad-column-stacked,
body.page-Main_Page .vh-triad-column-stacked {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 14px !important;
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 0 !important;
max-height: 420px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Card padding and bounding inside both columns */
body.page-Main_Page #vani-home .vh-triad-column-stacked .vh-card,
body.page-Main_Page .vh-triad-column-stacked .vh-card,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card,
body.page-Main_Page .vh-triad-column-left .vh-card,
body.page-Main_Page #vani-home .vh-triad-column-right .vh-card,
body.page-Main_Page .vh-triad-column-right .vh-card,
body.page-Main_Page #vani-home .vh-card-article,
body.page-Main_Page #vani-home .vh-card-questions,
body.page-Main_Page #vani-home .vh-card-memories,
body.page-Main_Page #vani-home .vh-card-media-item {
flex: 0 0 auto !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 4px 10px !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
height: 135px !important;
min-height: 135px !important;
max-height: 135px !important;
}
}
/* ==========================================================================
STEP 139: DISCIPLES REMEMBER ŚRĪLA PRABHUPĀDA TWO-LINE TITLE & DEVOTEE NAME
========================================================================== */
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title,
body.page-Main_Page .vh-card-memories .vh-card-title {
margin: 0 0 2px 0 !important;
text-align: center !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-memories .vh-card-title a {
display: inline-block !important;
line-height: 1.05 !important;
text-align: center !important;
padding-bottom: 5px !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-title-line,
body.page-Main_Page .vh-card-memories .vh-title-line {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle {
margin-top: 2px !important;
margin-bottom: 2px !important;
text-align: center !important;
display: block !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
text-decoration: none !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-text {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
margin-top: 2px !important;
margin-bottom: 0 !important;
text-align: center !important;
}
/* ==========================================================================
STEP 141: STATIC TITLE ON MEMORIES ROTATION + 3-LINE WIDER LANGUAGES CARD
========================================================================== */
/* 1. DISCIPLES REMEMBER ŚRĪLA PRABHUPĀDA TITLE: 100% STATIC (NEVER ANIMATES ON ROTATION) */
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-memories .vh-card-title,
body.page-Main_Page .vh-card-memories .vh-card-title a {
opacity: 1 !important;
transform: none !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
color 0.2s ease,
-webkit-text-fill-color 0.2s ease !important;
margin: 0 0 2px 0 !important;
text-align: center !important;
padding: 0 0 5px 0 !important;
display: inline-block !important;
line-height: 1.05 !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover {
transform: translateY(-3px) !important;
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: none !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-title-line,
body.page-Main_Page .vh-card-memories .vh-title-line {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
/* Transition ONLY the disciple name subtitle during randomizer */
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle {
margin-top: 2px !important;
margin-bottom: 2px !important;
text-align: center !important;
display: block !important;
transition: opacity 0.45s ease, transform 0.45s ease !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle.is-changing,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle.is-changing {
opacity: 0 !important;
transform: translateY(3px) !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
text-decoration: none !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-text {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
margin-top: 2px !important;
margin-bottom: 0 !important;
text-align: center !important;
}
/* 2. SP IN MEDIA: FRAME FITS EXACTLY AROUND THUMBNAIL WITH ZERO SIDE GAPS */
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-card-content,
body.page-Main_Page .vh-card-media-item .vh-media-card-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: 135px !important;
margin: 0 auto 6px auto !important;
padding: 0 !important;
border-radius: 6px !important;
overflow: hidden !important;
background: transparent !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(177, 135, 61, 0.45) !important;
line-height: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb a,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb a {
display: inline-block !important;
width: auto !important;
height: auto !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb img {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: 130px !important;
max-height: 130px !important;
object-fit: contain !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
transition: transform 0.35s ease !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb:hover img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.03) !important;
}
/* 3. SECTION 3: 4 COLUMNS WITH WIDER COLUMN FOR PARTICIPATING LANGUAGES */
@media screen and (min-width: 901px) {
body.page-Main_Page #vani-home .vh-taxonomy-grid,
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr 1.35fr !important;
gap: 16px !important;
width: 100% !important;
max-width: 1220px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 90px !important;
max-height: 130px !important;
}
body.page-Main_Page #vani-home .vh-card-tax,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page #vani-home .vh-card-languages,
body.page-Main_Page .vh-card-languages {
padding: 3px 8px 5px 8px !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a,
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page-Main_Page #vani-home .vh-card-languages .vh-card-title,
body.page-Main_Page #vani-home .vh-card-languages .vh-card-title a,
body.page-Main_Page .vh-card-languages .vh-card-title,
body.page-Main_Page .vh-card-languages .vh-card-title a {
font-size: 20px !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
}
/* 4. LANGUAGES CARD: EXACTLY 3 ROWS (5 COUNTRIES PER ROW) */
body.page-Main_Page #vani-home .vh-card-languages .vh-languages-list,
body.page-Main_Page .vh-card-languages .vh-languages-list {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 3px !important;
padding: 2px 0 0 0 !important;
margin: 0 !important;
width: 100% !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-row,
body.page-Main_Page .vh-card-languages .vh-lang-row {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
white-space: nowrap !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-item,
body.page-Main_Page .vh-card-languages .vh-lang-item {
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11px !important;
line-height: 1.25 !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-item a,
body.page-Main_Page .vh-card-languages .vh-lang-item a {
color: #2c3e42 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
transition: color 0.15s ease !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-item a:hover,
body.page-Main_Page .vh-card-languages .vh-lang-item a:hover {
color: #966817 !important;
text-decoration: underline !important;
}
/* Flag thumbnail element */
.vh-flag {
display: inline-block !important;
width: 15px !important;
height: 10px !important;
margin-right: 4px !important;
vertical-align: -1px !important;
border-radius: 1.5px !important;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.45) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
flex-shrink: 0 !important;
}
/* Crisp SVG Flag Definitions */
/* ==========================================================================
STEP 147: SOCIAL ICONS IN THE MID OF THE SPACE ON THE RIGHT
========================================================================== */
.vh-bottom-bar-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
padding: 0 24px !important;
position: relative !important;
box-sizing: border-box !important;
}
.vh-bottom-bar-left-space {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.vh-bottom-nav-links {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
white-space: nowrap !important;
}
.vh-bottom-bar-right-space {
flex: 1 1 0 !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.vh-bottom-social-links {
position: static !important;
transform: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 24px !important;
}
.vh-bottom-social-item {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 24px !important;
line-height: 0 !important;
transition: transform 0.2s ease, opacity 0.2s ease !important;
text-decoration: none !important;
}
.vh-bottom-social-item:hover {
transform: scale(1.15) !important;
opacity: 0.9 !important;
}
.vh-bottom-social-item img {
display: block !important;
height: 20px !important;
width: auto !important;
max-height: 20px !important;
object-fit: contain !important;
border: none !important;
}
/* ==========================================================================
STEP 153: DISTINGUISHED VANISEVA PILL + ELEVATED BACK-TO-TOP + FLAG STYLING
========================================================================== */
/* 1. ELEVATED BACK-TO-TOP ARROW (Floats 16px clearly above the 38px bottom bar) */
#vanipedia-back-to-top {
position: fixed !important;
bottom: 54px !important;
right: 24px !important;
width: 44px !important;
height: 44px !important;
z-index: 100000 !important;
}
@media screen and (max-width: 768px) {
#vanipedia-back-to-top {
bottom: 54px !important;
right: 16px !important;
width: 40px !important;
height: 40px !important;
z-index: 100000 !important;
}
}
/* 2. REMOVE EXTRA BOX/BAR AROUND HEADER (Outer container completely borderless & transparent) */
body.page-Main_Page .vector-header-container,
.vector-header-container,
.vector-header-container.vector-sticky-header-container {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
/* 3. THE VERY EXISTING TOP BAR: Single, clean, elegant header bar */
header.mw-header,
header.vector-header,
body.page-Main_Page #mw-head,
body.page-Main_Page .vector-header-container header.mw-header {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 86px !important;
max-height: 96px !important;
padding: 10px 24px !important;
background: #345B63 !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
position: relative !important;
box-sizing: border-box !important;
}
/* 4. TOP BAR CENTER BLOCK */
.vanipedia-topbar-center-block {
position: absolute !important;
left: 50% !important;
top: 54% !important;
transform: translate(-50%, -50%) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: nowrap !important;
z-index: 10 !important;
pointer-events: auto !important;
line-height: 1 !important;
}
#vanipedia-topbar-center-block * {
position: static !important;
transform: none !important;
}
.vanipedia-topbar-main-title,
#vanipedia-topbar-title {
position: static !important;
transform: none !important;
display: block !important;
font-family: 'Cinzel', Georgia, serif !important;
font-size: 17.5px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
color: #f5d77f !important;
text-decoration: none !important;
text-decoration-line: none !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
line-height: 1.25 !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
pointer-events: none !important;
user-select: text !important;
}
/* 5. DISTINGUISHED MIDDLE LINE: VANISEVA LUMINOUS INVITATION PILL */
.vanipedia-topbar-vaniseva-title {
position: static !important;
transform: none !important;
display: block !important;
margin: 0 0 4px 0 !important;
line-height: 1.2 !important;
}
.vanipedia-topbar-vaniseva-title a {
color:#f5d77f !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12.5px !important;
font-style: normal !important;
font-weight: 500 !important;
letter-spacing: 0.35px !important;
text-decoration: none !important;
text-decoration-line: none !important;
border:0 !important;
border-bottom:0 !important;
background:none !important;
outline: none !important;
padding:0 !important;
border-radius:0 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
display: inline-block !important;
}
.vanipedia-topbar-vaniseva-title a:hover,
.vanipedia-topbar-vaniseva-title a:focus,
.vanipedia-topbar-vaniseva-title a:active {
color:#f5d77f !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-color:transparent !important;
background-color:transparent !important;
box-shadow:none !important;
}
/* 6. SISTER PROJECTS (Line 3) */
.vanipedia-topbar-sister-links {
position: static !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.vanipedia-topbar-sister-link {
color: #f5d77f !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.4px !important;
text-decoration: none !important;
text-decoration-line: none !important;
border: none !important;
border-bottom: none !important;
outline: none !important;
padding: 1px 6px !important;
border-radius: 3px !important;
transition: all 0.18s ease !important;
display: inline-flex !important;
align-items: center !important;
cursor: pointer !important;
}
.vanipedia-topbar-sister-link:hover,
.vanipedia-topbar-sister-link:focus,
.vanipedia-topbar-sister-link:active {
color: #ffffff !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
background-color: rgba(245, 215, 127, 0.18) !important;
}
.vanipedia-topbar-sister-sep {
color: rgba(245, 215, 127, 0.4) !important;
font-size: 10px !important;
line-height: 1 !important;
user-select: none !important;
}
/* 7. PARTICIPATING LANGUAGES FLAGS STYLING */
.vh-flag {
display: inline-block !important;
width: 15px !important;
height: 10px !important;
margin-right: 5px !important;
vertical-align: -1px !important;
border-radius: 1.5px !important;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.45) !important;
flex-shrink: 0 !important;
overflow: hidden !important;
}
.vh-flag svg {
width: 100% !important;
height: 100% !important;
display: block !important;
}
/* 8. MINERVA MOBILE SKIN (Phone Header) */
body.skin-minerva .minerva-header {
flex-wrap: nowrap !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 10px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
}
/* 8.1 Burger Navigation Drawer Button */
.minerva-header .navigation-drawer.toggle-list,
.minerva-header #mw-mf-main-menu-button,
.minerva-header .toggle-list__toggle {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
}
.minerva-header .minerva-icon--menu,
.minerva-header #mw-mf-main-menu-button .minerva-icon--menu {
background-color: #f5d77f !important;
display: inline-block !important;
width: 24px !important;
height: 24px !important;
}
/* 8.2 Branding Box Title (Pure CSS Content Injection - 100% JS-Independent) */
body.skin-minerva .minerva-header .branding-box,
.minerva-header .branding-box {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
flex: 1 1 auto !important;
margin: 0 0 0 14px !important;
padding: 0 !important;
min-width: 0 !important;
overflow: visible !important;
}
body.skin-minerva .minerva-header .branding-box a,
.minerva-header .branding-box a {
display: inline-flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
text-decoration: none !important;
color: #f5d77f !important;
}
body.skin-minerva .minerva-header .branding-box a::before,
.minerva-header .branding-box a::before {
content: "Vanipedia" !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
color: #f5d77f !important;
font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.skin-minerva .minerva-header .branding-box a > span,
.minerva-header .branding-box a > span,
body.skin-minerva .minerva-header .branding-box a > img,
.minerva-header .branding-box a > img {
display: none !important;
}
/* 8.3 Home Link in Minerva */
.minerva-header a.vanipedia-topbar-home {
flex: 0 0 28px !important;
width: 28px !important;
height: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 4px !important;
padding: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #f5d77f !important;
}
/* 8.4 Search Button in Minerva */
.minerva-header .minerva-search-form {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
.minerva-header #searchIcon {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
}
.minerva-header .minerva-icon--search,
.minerva-header #searchIcon .minerva-icon--search {
background-color: #f5d77f !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
}
/* 8.5 User Navigation in Minerva */
.minerva-header .minerva-user-navigation {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
.minerva-header #ca-mytalks {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
}
.minerva-header .minerva-icon--bellOutline,
.minerva-header #ca-mytalks .minerva-icon--bellOutline {
background-color: #f5d77f !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
}
/* STRICTLY HIDE center block and extra lines on mobile */
body.skin-minerva .vanipedia-topbar-center-block,
body.skin-minerva #vanipedia-topbar-center-block,
body.skin-minerva #vanipedia-topbar-center-block-mobile,
body.skin-minerva .vanipedia-topbar-main-title,
body.skin-minerva .vanipedia-topbar-vaniseva-title,
body.skin-minerva .vanipedia-topbar-sister-links,
body.skin-minerva .vanipedia-topbar-sister-link,
body.skin-minerva .vanipedia-topbar-sister-sep {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Bottom bar mobile styling (from STEP 165) */
body.skin-minerva .vh-bottom-social-links,
body.skin-minerva .vh-bottom-bar-right-space {
display: none !important;
width: 0 !important;
}
body.skin-minerva .vh-bottom-bar-left-space {
display: none !important;
}
body.skin-minerva .vh-bottom-bar-inner {
justify-content: center !important;
padding: 0 10px !important;
}
body.skin-minerva .vh-bottom-nav-links {
width: 100% !important;
justify-content: center !important;
gap: 8px !important;
font-size: 11px !important;
}
/* 9. RESPONSIVE BREAKPOINTS (Desktop >= 1000px Intact; Mobile < 1000px Full Controls) */
@media screen and (max-width: 1200px) and (min-width: 1000px) {
.vanipedia-topbar-main-title {
font-size: 16px !important;
letter-spacing: 1.5px !important;
}
.vanipedia-topbar-vaniseva-title a {
font-size: 11.5px !important;
padding:0 !important;
}
.vanipedia-topbar-sister-link {
font-size: 11.5px !important;
}
}
@media screen and (max-width: 999px) {
/* Single Row Header on Mobile Viewports */
header.mw-header,
header.vector-header,
.vector-header-container .mw-header {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 10px !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
}
/* Top Row Left Section: Burger + Search + Home in single row */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
flex: 1 1 auto !important;
min-width: 0 !important;
gap: 6px !important;
}
/* 1. FORCE BURGER MENU TO DISPLAY VISIBLE ON MOBILE */
.vector-header-start #vector-main-menu-dropdown,
#vector-main-menu-dropdown {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
cursor: pointer !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 4px !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label,
.vector-header-start #vector-main-menu-dropdown .vector-main-menu-dropdown-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
padding: 4px !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
width: 22px !important;
height: 22px !important;
}
/* 2. SEARCH INPUT WITH GUARANTEED VISIBLE MAGNIFYING GLASS */
.vector-header-container #p-search,
.mw-header #p-search,
.vector-header-start #p-search {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
min-width: 60px !important;
max-width: calc(100vw - 140px) !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container .cdx-search-input,
.vector-header-container .vector-search-box-input,
.vector-header-container .cdx-text-input,
.vector-header-start .cdx-text-input {
width: 100% !important;
max-width: 100% !important;
height: 32px !important;
margin: 0 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
}
.vector-header-container .cdx-text-input__icon,
.vector-header-container .cdx-text-input__start-icon,
.vector-header-start .cdx-text-input__icon,
.vector-header-start .cdx-text-input__start-icon,
#p-search .cdx-text-input__icon,
#p-search .cdx-text-input__start-icon {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
left: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
z-index: 5 !important;
pointer-events: none !important;
}
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
width: 100% !important;
min-width: 60px !important;
height: 32px !important;
font-size: 13px !important;
padding-left: 32px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
border-radius: 16px !important;
background-color: #1f3e45 !important;
border: 1px solid rgba(245, 215, 127, 0.45) !important;
color: #ffffff !important;
}
/* Compact Home Icon */
.vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
.vector-header-start #vanipedia-topbar-home-link,
#vanipedia-topbar-home-link,
a.vanipedia-topbar-home {
margin: 0 2px !important;
padding: 3px 5px !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
/* 3. USER ICON GUARANTEED ON FAR RIGHT */
.vector-header-end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-end .vector-user-links,
.vector-header-end .vector-user-links-wide,
.vector-header-end .vector-user-links-main {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.vector-header-end #p-vector-user-menu-userpage {
display: none !important;
}
.vector-header-end #p-vector-user-menu-overflow,
.vector-header-end #vector-user-links-dropdown,
.vector-header-end .vector-user-menu-overflow {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-end #vector-user-links-dropdown .vector-dropdown-label,
.vector-header-end .vector-user-menu-overflow .vector-dropdown-label {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
}
.vector-header-end #vector-user-links-dropdown .vector-icon,
.vector-header-end .vector-user-menu-overflow .vector-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
}
.vector-header-end .vector-dropdown-label-text {
display: none !important;
}
/* STRICTLY HIDE center block and extra lines on mobile viewports (< 1000px) */
.vanipedia-topbar-center-block,
#vanipedia-topbar-center-block,
#vanipedia-topbar-center-block-mobile,
.vanipedia-topbar-main-title,
#vanipedia-topbar-title,
#vanipedia-topbar-title-mobile,
#vanipedia-topbar-title-link,
#vanipedia-topbar-center-title,
.vanipedia-topbar-vaniseva-title,
.vanipedia-topbar-sister-links,
.vanipedia-topbar-sister-link,
.vanipedia-topbar-sister-sep {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Bottom bar social links hidden on mobile (from STEP 165) */
.vh-bottom-social-links,
.vh-bottom-bar-right-space {
display: none !important;
width: 0 !important;
flex: 0 0 0 !important;
visibility: hidden !important;
}
.vh-bottom-bar-left-space {
display: none !important;
width: 0 !important;
flex: 0 0 0 !important;
}
.vh-bottom-bar-inner {
justify-content: center !important;
padding: 0 10px !important;
}
.vh-bottom-nav-links {
width: 100% !important;
justify-content: center !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
gap: 8px !important;
font-size: 11px !important;
}
}
/* ==========================================================================
STEP 173: RESTORE WORKING STEP 117 COMPACT STAGE PROPORTIONS (ZERO-CROP)
Overrides all desktop-specific shifts (min-height: 380px, translateY: 30px,
translateY: -72px, 324px photo) inside the mobile rotated landscape stage.
========================================================================== */
#vani-mobile-stage #vani-rotated-box #vani-stage-content-slot #vani-home,
body.page-Main_Page #vani-stage-content-slot #vani-home {
width: 1200px !important;
min-width: 1200px !important;
max-width: 1200px !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 8px !important;
padding: 4px 16px 12px 16px !important;
margin: 0 !important;
background-color: #f6f2e9 !important;
overflow: visible !important;
}
#vani-stage-content-slot #vani-home .vh-triad-grid,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
gap: 16px !important;
flex-wrap: nowrap !important;
height: auto !important;
min-height: 250px !important;
max-height: 270px !important;
transform: none !important;
margin: 0 0 6px 0 !important;
}
#vani-stage-content-slot #vani-home .vh-photo-stage,
#vani-stage-content-slot #vani-home .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-photo-stage,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-sanctuary-portrait-box .vh-photo-stage {
width: 200px !important;
height: 200px !important;
min-width: 200px !important;
min-height: 200px !important;
max-width: 200px !important;
max-height: 200px !important;
margin: 0 auto !important;
border-radius: 50% !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
box-shadow: 0 8px 24px rgba(18, 63, 56, 0.35), 0 2px 6px rgba(0, 0, 0, 0.22) !important;
overflow: hidden !important;
position: relative !important;
}
#vani-stage-content-slot #vani-home .vh-sanctuary-card,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
text-align: center !important;
margin: 0 !important;
height: auto !important;
min-height: auto !important;
max-height: 270px !important;
}
#vani-stage-content-slot #vani-home .vh-card-text.vh-sanctuary-text,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-text.vh-sanctuary-text {
margin-top: 8px !important;
margin-bottom: 0 !important;
}
#vani-stage-content-slot #vani-home .vh-triad-column-left,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-triad-column-left,
#vani-stage-content-slot #vani-home .vh-card-article,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-article {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
height: auto !important;
min-height: auto !important;
max-height: 270px !important;
}
#vani-stage-content-slot #vani-home .vh-card-memories,
#vani-stage-content-slot #vani-home .vh-card-media-item {
flex: 0 0 auto !important;
height: auto !important;
}
#vani-stage-content-slot #vani-home .vh-card-media-item .vh-media-large-thumb {
height: 110px !important;
min-height: 110px !important;
}
#vani-stage-content-slot #vani-home .vh-timeline-section,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-timeline-section {
transform: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 4px 0 !important;
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
flex: 0 0 80px !important;
position: relative !important;
left: auto !important;
right: auto !important;
}
#vani-stage-content-slot #vani-home .vh-timeline-track,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-timeline-track {
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
}
#vani-stage-content-slot #vani-home .vh-timeline-item,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-timeline-item {
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
}
#vani-stage-content-slot #vani-home .vh-taxonomy-section,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-taxonomy-section {
transform: none !important;
width: 100% !important;
margin: 4px 0 !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
flex: 0 0 auto !important;
}
#vani-stage-content-slot #vani-home .vh-taxonomy-grid,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
width: 100% !important;
height: auto !important;
}
#vani-stage-content-slot #vani-home .vh-card-tax,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-tax,
#vani-stage-content-slot #vani-home .vh-card-languages,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-languages {
height: auto !important;
min-height: 95px !important;
max-height: 110px !important;
padding: 6px 10px !important;
}
#vani-stage-header-slot .vanipedia-stage-title-link,
#vani-stage-header-slot .vanipedia-topbar-title-link,
#vani-stage-header-slot .vanipedia-topbar-main-title,
#vani-stage-header-slot .branding-box a {
display: inline-flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
color: #f5d77f !important;
text-decoration: none !important;
letter-spacing: 0.8px !important;
line-height: 1 !important;
margin: 0 10px !important;
cursor: pointer !important;
}

/* V174 — Vanipedia main page: static, naturally scrolling, and responsive. */
body.page-Main_Page {
background:#faf7ef !important;
overflow-x:hidden !important;
}
body.page-Main_Page #vani-home.vp-static-home {
--vp-paper:#faf7ef;
--vp-card:#fffdf8;
--vp-ink:#263a39;
--vp-brand:#345b63;
--vp-accent:#b1873d;
--vp-line:#ded7c6;
box-sizing:border-box !important;
display:block !important;
position:relative !important;
width:100% !important;
min-width:0 !important;
max-width:1240px !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 auto !important;
padding:clamp(18px,3vw,38px) !important;
overflow:visible !important;
color:var(--vp-ink) !important;
background:var(--vp-paper) !important;
font:400 17px/1.6 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home,
body.page-Main_Page #vani-home.vp-static-home * {
box-sizing:border-box !important;
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
body.page-Main_Page #vani-home.vp-static-home a {
color:var(--vp-brand) !important;
text-decoration:underline !important;
text-decoration-color:#aab3a8 !important;
text-underline-offset:3px !important;
background:none !important;
box-shadow:none !important;
}
body.page-Main_Page #vani-home.vp-static-home a:hover {
color:var(--vp-accent) !important;
text-decoration-thickness:2px !important;
}
body.page-Main_Page #vani-home.vp-static-home a:focus-visible {
outline:3px solid var(--vp-brand) !important;
outline-offset:3px !important;
}
body.page-Main_Page #vani-home.vp-static-home h1,
body.page-Main_Page #vani-home.vp-static-home h2,
body.page-Main_Page #vani-home.vp-static-home h3,
body.page-Main_Page #vani-home.vp-static-home p {
margin-top:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home h1 {
margin:0 0 10px !important;
color:var(--vp-brand) !important;
font:600 clamp(29px,4vw,40px)/1.2 Georgia,"Noto Serif",serif !important;
text-align:center !important;
}
body.page-Main_Page #vani-home.vp-static-home h2 {
margin:0 0 14px !important;
padding:0 0 9px !important;
border:0 !important;
border-bottom:1px solid var(--vp-line) !important;
color:var(--vp-brand) !important;
font:600 22px/1.3 Georgia,"Noto Serif",serif !important;
text-align:left !important;
}
body.page-Main_Page #vani-home.vp-static-home h3 {
margin:0 0 7px !important;
color:var(--vp-ink) !important;
font:600 18px/1.4 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home p { margin-bottom:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
display:grid !important;
grid-template-columns:220px minmax(0,1fr) !important;
align-items:center !important;
gap:clamp(24px,5vw,64px) !important;
max-width:1000px !important;
margin:0 auto 32px !important;
padding:8px 0 28px !important;
border-bottom:1px solid var(--vp-line) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait {
width:220px !important;
height:220px !important;
max-width:100% !important;
margin:0 auto !important;
overflow:hidden !important;
border:3px solid var(--vp-brand) !important;
border-radius:50% !important;
background:#f0eee3 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait p,
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait a {
display:block !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait img {
display:block !important;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:cover !important;
object-position:center 35% !important;
border:0 !important;
box-shadow:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy {
min-width:0 !important;
text-align:center !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role {
margin:0 auto 4px !important;
color:var(--vp-accent) !important;
font-size:clamp(19px,2.2vw,25px) !important;
font-weight:600 !important;
line-height:1.35 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization {
color:var(--vp-ink) !important;
font-size:17px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-who { margin-top:12px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-feature-grid {
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:22px !important;
margin:0 0 30px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-card {
min-width:0 !important;
padding:20px !important;
border:1px solid var(--vp-line) !important;
border-radius:6px !important;
background:var(--vp-card) !important;
color:var(--vp-ink) !important;
box-shadow:0 2px 9px rgba(38,58,57,.045) !important;
transform:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-card:hover {
transform:none !important;
box-shadow:0 2px 9px rgba(38,58,57,.045) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-card h3 { margin-bottom:8px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-card blockquote {
margin:4px 0 0 !important;
padding:4px 0 4px 16px !important;
border-left:3px solid var(--vp-accent) !important;
color:var(--vp-ink) !important;
font:400 17px/1.6 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-feature {
display:grid !important;
grid-template-columns:minmax(120px,190px) minmax(0,1fr) !important;
align-items:center !important;
gap:16px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-image,
body.page-Main_Page #vani-home.vp-static-home .vp-media-image p,
body.page-Main_Page #vani-home.vp-static-home .vp-media-image a {
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-image img {
display:block !important;
width:100% !important;
height:auto !important;
max-width:100% !important;
border-radius:3px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-outlet {
margin-bottom:5px !important;
color:#706b62 !important;
font-size:14px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-headline { font-size:17px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-section {
margin:0 0 30px !important;
padding:20px 0 22px !important;
border-block:1px solid var(--vp-line) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-intro { margin:-5px 0 12px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-years {
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(76px,1fr)) !important;
gap:6px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-years a {
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:42px !important;
padding:6px 8px !important;
border:1px solid var(--vp-line) !important;
border-radius:4px !important;
background:var(--vp-card) !important;
color:var(--vp-brand) !important;
text-align:center !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-years a:hover {
border-color:var(--vp-brand) !important;
background:#f1f3ee !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-section { margin:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid {
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:18px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-card { padding:18px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-languages-card { grid-column:span 1 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-languages-list {
display:flex !important;
flex-wrap:wrap !important;
gap:8px 12px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-lang-item {
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
min-height:32px !important;
white-space:nowrap !important;
}
body.page-Main_Page #vani-home.vp-static-home .vh-flag {
display:inline-block !important;
flex:0 0 22px !important;
width:22px !important;
height:15px !important;
vertical-align:middle !important;
}
/* Restore ordinary page flow and neutralize any legacy rotated-stage wrapper. */
#vani-mobile-stage, #vani-rotated-box {
position:static !important;
inset:auto !important;
width:auto !important;
height:auto !important;
min-width:0 !important;
min-height:0 !important;
max-width:none !important;
max-height:none !important;
overflow:visible !important;
transform:none !important;
rotate:none !important;
}
#vani-stage-header-slot, #vani-stage-content-slot, #vani-stage-footer-slot { display:contents !important; }
@media (max-width:950px) {
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:700px) {
body.page-Main_Page #vani-home.vp-static-home { padding:20px 16px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
grid-template-columns:minmax(0,1fr) !important;
gap:16px !important;
margin-bottom:24px !important;
padding-bottom:22px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait { width:160px !important; height:160px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-feature-grid { grid-template-columns:minmax(0,1fr) !important; gap:16px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid { grid-template-columns:minmax(0,1fr) !important; gap:14px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-card { padding:17px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-feature { grid-template-columns:minmax(100px,34%) minmax(0,1fr) !important; gap:12px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-section { margin-bottom:24px !important; }
}
@media (max-width:380px) {
body.page-Main_Page #vani-home.vp-static-home .vp-media-feature { grid-template-columns:minmax(0,1fr) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-image { max-width:260px !important; }
}
@media (prefers-reduced-motion:reduce) {
body.page-Main_Page #vani-home.vp-static-home *,
body.page-Main_Page #vani-home.vp-static-home *::before,
body.page-Main_Page #vani-home.vp-static-home *::after {
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
}

/* V175: natural document scrolling, Vanisource-style hero, Vanipedia colors. */
html,
body.page-Main_Page {
height:auto !important;
min-height:100% !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
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-content-text,
body.page-Main_Page .mw-parser-output {
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
body.page-Main_Page #vani-home.vp-static-home {
--vp-brand:#345B63;
--vp-accent:#f5d77f;
--vp-ink:#263a3d;
--vp-line:#d8d1c3;
--vp-card:#fffdf8;
position:relative !important;
display:block !important;
width:min(100%, 1200px) !important;
min-width:0 !important;
max-width:1200px !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 auto !important;
padding:26px clamp(16px,3vw,34px) 100px !important;
overflow:visible !important;
background:#faf7ef !important;
}
/* The site-wide footer remains fixed; this page has room to scroll past it. */
body.page-Main_Page #vani-home.vp-static-home::after {
content:"";
display:block;
height:0;
clear:both;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
display:grid !important;
grid-template-columns:minmax(170px,210px) minmax(0,1fr) !important;
align-items:center !important;
gap:clamp(24px,4vw,44px) !important;
width:100% !important;
max-width:880px !important;
min-height:0 !important;
margin:0 auto 30px !important;
padding:22px 26px !important;
border:1px solid #345B63 !important;
border-left:5px solid #f5d77f !important;
border-radius:8px !important;
background:#345B63 !important;
color:#fff8e4 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait {
box-sizing:border-box !important;
width:min(100%,210px) !important;
height:auto !important;
aspect-ratio:445 / 542 !important;
margin:0 auto !important;
overflow:hidden !important;
border:2px solid #f5d77f !important;
border-radius:6px !important;
background:#faf7ef !important;
box-shadow:0 5px 18px rgba(18,35,37,.3) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait p,
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait a {
display:block !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait img {
display:block !important;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:cover !important;
object-position:center !important;
border:0 !important;
border-radius:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy,
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy h1 {
min-width:0 !important;
text-align:center !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy h1 {
margin:0 0 9px !important;
color:#f5d77f !important;
font:600 clamp(32px,3vw,42px)/1.15 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role {
margin:0 0 7px !important;
color:#fff8e4 !important;
font:600 clamp(19px,1.7vw,22px)/1.3 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role a,
body.page-Main_Page #vani-home.vp-static-home .vp-home-who a {
color:#f5d77f !important;
text-decoration:underline !important;
text-underline-offset:4px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role a:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-home-who a:hover { color:#fff !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization {
margin:0 !important;
color:#fff8e4 !important;
font:500 clamp(17px,1.5vw,20px)/1.4 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-who { margin-top:10px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-card,
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-section,
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-section,
body.page-Main_Page #vani-home.vp-static-home .vp-feature-grid,
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid {
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-quote {
margin:4px 0 0 !important;
padding:4px 0 4px 16px !important;
border-left:3px solid #f5d77f !important;
color:var(--vp-ink) !important;
font:400 17px/1.6 Georgia,"Noto Serif",serif !important;
}
/* Remove the old decorative cursor and restore the operating system pointer. */
html body.page-Main_Page,
html body.page-Main_Page * {
cursor:auto !important;
}
html body.page-Main_Page a[href],
html body.page-Main_Page button,
html body.page-Main_Page [role="button"],
html body.page-Main_Page .cdx-button {
cursor:pointer !important;
}
html body.page-Main_Page #vh-cursor-pointer,
html body.page-Main_Page #vh-kill-windows-cursor {
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
@media (max-width:700px) {
body.page-Main_Page #vani-home.vp-static-home { padding:18px 14px 96px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
grid-template-columns:minmax(0,1fr) !important;
gap:14px !important;
max-width:460px !important;
margin-bottom:24px !important;
padding:17px 17px 19px !important;
border-left-width:4px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait { width:min(100%,170px) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-role { font-size:17px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization { font-size:17px !important; }
}

/* V176: native mouse cursor; main page language links are the remaining taxonomy feature. */
body.page-Main_Page #vani-home.vp-static-home .vp-language-section {
margin:0 !important;
padding:0 0 32px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-languages-card {
width:100% !important;
max-width:none !important;
grid-column:auto !important;
}

/* V179: native Windows pointer and viewport-contained portal rollouts. */
html body.page-Main_Page #vani-home.vp-static-home,
html body.page-Main_Page #vani-home.vp-static-home * {
cursor:default !important;
}
html body.page-Main_Page #vani-home.vp-static-home a[href],
html body.page-Main_Page #vani-home.vp-static-home a[href] *,
html body.page-Main_Page #vani-home.vp-static-home button,
html body.page-Main_Page #vani-home.vp-static-home [role="button"],
html body.page-Main_Page #vani-home.vp-static-home [role="button"] * {
cursor:pointer !important;
}
html body.page-Main_Page #vh-cursor-pointer,
html body.page-Main_Page #vh-kill-windows-cursor {
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-grid {
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
align-items:start !important;
gap:24px 18px !important;
width:100% !important;
margin:0 auto 28px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-secondary-grid {
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
max-width:640px !important;
margin-left:auto !important;
margin-right:auto !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card {
position:relative !important;
z-index:1 !important;
min-width:0 !important;
overflow:visible !important;
border:1px solid #d8d1c3 !important;
border-radius:7px !important;
background:#fffdf8 !important;
box-shadow:0 2px 9px rgba(38,58,57,.07) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-hover-open,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-open {
z-index:100 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image p,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image a {
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image {
height:168px !important;
overflow:hidden !important;
border-radius:6px 6px 0 0 !important;
background:#e9e4d8 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image img {
display:block !important;
width:100% !important;
height:168px !important;
max-width:none !important;
object-fit:cover !important;
object-position:center 36% !important;
border:0 !important;
border-radius:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy {
min-height:145px !important;
padding:14px 15px 13px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy h2 {
min-height:50px !important;
margin:0 0 7px !important;
padding:0 0 7px !important;
border-bottom:1px solid #ded7c6 !important;
color:#345B63 !important;
font:700 18px/1.28 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy h2 a {
color:#345B63 !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy p {
min-height:44px !important;
margin:0 0 8px !important;
color:#354444 !important;
font:400 14px/1.45 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-toggle {
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
min-height:30px !important;
padding:4px 9px !important;
border:1px solid #d8d1c3 !important;
border-radius:4px !important;
background:#f6f2e9 !important;
color:#345B63 !important;
font:600 13px/1.3 Arial,Helvetica,sans-serif !important;
cursor:pointer !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-toggle:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-toggle:focus-visible {
border-color:#b1873d !important;
outline:2px solid #b1873d !important;
outline-offset:2px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-panel {
display:none !important;
position:fixed !important;
top:var(--vp-panel-top, 20px) !important;
left:var(--vp-panel-left, 12px) !important;
right:auto !important;
bottom:auto !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
width:var(--vp-panel-width, 290px) !important;
max-width:calc(100vw - 24px) !important;
max-height:min(380px,calc(100vh - 100px)) !important;
overflow:auto !important;
overscroll-behavior:contain !important;
padding:11px 12px 12px !important;
border:1px solid #d8d1c3 !important;
border-top:3px solid #b1873d !important;
border-radius:7px !important;
background:#fffdf8 !important;
box-shadow:0 10px 22px rgba(38,58,57,.22) !important;
text-align:left !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-hover-open > .vp-rollout-panel,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-open > .vp-rollout-panel {
display:block !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-heading {
display:block !important;
margin:0 0 7px !important;
color:#345B63 !important;
font:700 14px/1.35 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options {
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
gap:2px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options > span { display:block !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options a {
display:block !important;
min-height:34px !important;
padding:7px 8px !important;
border-radius:4px !important;
color:#345B63 !important;
font:500 14px/1.4 Georgia,"Noto Serif",serif !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options a:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options a:focus-visible {
background:#f2eee4 !important;
color:#805b16 !important;
text-decoration:underline !important;
outline:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-year-options { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-year-options a { text-align:center !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-language-options { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-language-options a { display:flex !important; align-items:center !important; gap:8px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-all { display:block !important; margin-top:7px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-all a {
display:block !important;
padding:7px 8px !important;
border-top:1px solid #ded7c6 !important;
color:#345B63 !important;
font:600 13px/1.35 Arial,Helvetica,sans-serif !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-all a:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-media-all a:focus-visible { text-decoration:underline !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-article-all { display:block !important; margin:0 0 10px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-article-all a {
display:block !important;
padding:8px 10px !important;
border-radius:4px !important;
background:#f2eee4 !important;
color:#345B63 !important;
font:700 14px/1.35 Arial,Helvetica,sans-serif !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-categories-heading {
padding-top:8px !important;
border-top:1px solid #ded7c6 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-articles-panel {
width:min(720px,calc(100vw - 24px)) !important;
--vp-panel-width:720px;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-options {
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:1px 5px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-options a {
min-height:0 !important;
padding:5px 6px !important;
font-size:12px !important;
line-height:1.25 !important;
}
@media (max-width:950px) {
body.page-Main_Page #vani-home.vp-static-home .vp-primary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-secondary-grid { max-width:100% !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-article-options { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-articles-panel { width:min(620px,calc(100vw - 24px)) !important; --vp-panel-width:620px; }
}
@media (max-width:700px) {
body.page-Main_Page #vani-home.vp-static-home .vp-primary-grid,
body.page-Main_Page #vani-home.vp-static-home .vp-secondary-grid {
grid-template-columns:minmax(0,1fr) !important;
gap:16px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image img { height:210px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy { min-height:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy h2,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy p { min-height:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-panel {
position:static !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
width:auto !important;
max-width:none !important;
max-height:none !important;
margin:0 !important;
border-top:1px solid #d8d1c3 !important;
border-left:3px solid #b1873d !important;
border-radius:0 0 7px 7px !important;
box-shadow:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-options { grid-template-columns:minmax(0,1fr) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-articles-panel { width:auto !important; --vp-panel-width:auto; }
}

/* V181: restore the native Windows pointing hand on sidebar menu targets.
Earlier Main Page cursor rules forced .vector-menu links to cursor:auto. */
html body.page-Main_Page #mw-panel .vector-menu a[href],
html body.page-Main_Page #mw-panel .vector-menu a[href] *,
html body.page-Main_Page #mw-mf-page-left .vector-menu a[href],
html body.page-Main_Page #mw-mf-page-left .vector-menu a[href] *,
html body.page-Main_Page #vector-main-menu .vector-menu a[href],
html body.page-Main_Page #vector-main-menu .vector-menu a[href] *,
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-content li a[href],
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-content li a[href] *,
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-heading,
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-heading * {
cursor:pointer !important;
}

/* V183: restore the pointing-hand cursor on every actionable top and bottom bar item.
Older Main Page rules set .vector-dropdown-label and .vh-bottom-link to cursor:auto. */
html body .vector-header-container a[href],
html body .vector-header-container a[href] *,
html body header.vector-header a[href],
html body header.vector-header a[href] *,
html body header.mw-header a[href],
html body header.mw-header a[href] *,
html body #mw-head a[href],
html body #mw-head a[href] *,
html body .minerva-header a[href],
html body .minerva-header a[href] *,
html body #vh-bottom-bar a[href],
html body #vh-bottom-bar a[href] *,
html body .vh-bottom-bar a[href],
html body .vh-bottom-bar a[href] *,
html body .vector-header-container button,
html body .vector-header-container button *,
html body .vector-header-container [role="button"],
html body .vector-header-container [role="button"] *,
html body header.vector-header .vector-dropdown-label,
html body header.vector-header .vector-dropdown-label *,
html body .vector-header-container .vector-dropdown-label,
html body .vector-header-container .vector-dropdown-label *,
html body .minerva-header button,
html body .minerva-header button *,
html body .minerva-header [role="button"],
html body .minerva-header [role="button"] *,
html body #vh-bottom-bar button,
html body #vh-bottom-bar button *,
html body #vh-bottom-bar [role="button"],
html body #vh-bottom-bar [role="button"] *,
html body #vh-bottom-bar .vh-bottom-link[href] {
cursor: pointer !important;
}
html body .vector-header-container .vector-dropdown-label:hover,
html body header.vector-header .vector-dropdown-label:hover,
html body .vector-header-container .vector-dropdown-label:focus,
html body header.vector-header .vector-dropdown-label:focus {
cursor: pointer !important;
}

/* V185: plain, clickable gold collaboration invitation. */
html body .vanipedia-topbar-vaniseva-title a {
color:#f5d77f !important;
border:0 !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
padding:0 !important;
cursor:pointer !important;
}
html body .vanipedia-topbar-vaniseva-title a:hover {
color:#f5d77f !important;
background:none !important;
text-decoration:underline !important;
}
html body .vanipedia-topbar-vaniseva-title a:focus-visible {
outline:1px dotted #f5d77f !important;
outline-offset:3px !important;
}

/* Shared petal label inside the hero */
.vani-hero-petal-title {
margin: 0 0 8px !important;
padding: 0 !important;
color: #f5d77f !important;
font-family: Georgia, "Noto Serif", serif !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: 2px !important;
text-align: center !important;
text-transform: uppercase !important;
position: relative;
top: -16px;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy h1 {
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}

body.page-Main_Page #vani-home.vp-static-home .vp-home-role {
margin: 0 0 4px !important;
padding: 0 !important;
line-height: 1.15 !important;
}

/* Match the organization text to the gold founder title */
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization {
color: #f5d77f !important;
}

/* Separate the introductory link from the main hero text */
body.page-Main_Page #vani-home.vp-static-home .vp-home-who {
margin-top: 36px !important;
margin-bottom: 0 !important;
}

/* Remove spacing from MediaWiki's hero heading wrapper */
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy .mw-heading1 {
margin: 0 !important;
padding: 0 !important;
}

/* 2026-11-11 (Vamshi Krishna): phones (700 px and below), where the photo sits above the title.
Do not lift the VANIPEDIA title onto the photo, and give the two-line Founder-Acarya role room. */
@media (max-width:700px) {
html body.page-Main_Page #vani-home.vp-static-home .vani-hero-petal-title {
top:0 !important;
}
html body.page-Main_Page #vani-home.vp-static-home .vp-home-role {
line-height:1.45 !important;
}
}
/* Remove white background and borders from search bar */
.vector-header-container form#searchform,
.vector-header-container .cdx-search-input,
.vector-header-container .cdx-text-input,
.vector-header-container .cdx-text-input__input,
.vector-header-container .cdx-search-input__wrapper,
.vector-header-container .cdx-search-input__input-wrapper {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}

/* ==========================================================================
CLEAN CONSOLIDATED MOBILE HEADER, SEARCH BAR & USER MENU — VANIPEDIA
========================================================================== */

#mspu_div_wrapper {
z-index: 2147483647 !important;
}

.cdx-menu,
.cdx-typeahead-search__menu,
.suggestions,
.mw-searchSuggest {
display: none !important;
pointer-events: none !important;
}

/* 1. High-contrast user dropdown menu (Dark teal background with gold text & border) */
.vector-menu-dropdown .vector-dropdown-content,
.vector-user-menu .vector-dropdown-content,
#vector-user-links-dropdown .vector-dropdown-content,
.vector-menu-portal .vector-dropdown-content {
background-color: #1f3e45 !important;
border: 1.5px solid #f5d77f !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
padding: 6px 0 !important;
}

.vector-menu-dropdown .vector-dropdown-content a,
.vector-user-menu .vector-dropdown-content a,
#vector-user-links-dropdown .vector-dropdown-content a,
.vector-menu-portal .vector-dropdown-content a {
color: #f5d77f !important;
font-weight: 500 !important;
padding: 8px 16px !important;
}

.vector-menu-dropdown .vector-dropdown-content a:hover,
.vector-user-menu .vector-dropdown-content a:hover,
#vector-user-links-dropdown .vector-dropdown-content a:hover,
.vector-menu-portal .vector-dropdown-content a:hover {
background-color: #345B63 !important;
color: #ffffff !important;
}

/* 2. Mobile Top Bar Layout (<= 999px): Burger flush left, Search bar full width, 3 Icons compact on right */
@media (max-width: 999px) {
html body header.vector-header,
html body header.mw-header,
html body .vector-header-container header.mw-header {
padding: 0 2px !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
}

#pt-userpage-2,
.vector-user-links-main #pt-userpage-2,
#vanipedia-topbar-home-link .vanipedia-home-text,
#p-search .search-toggle,
.vector-header-start .mw-logo {
display: none !important;
}

html body header.vector-header .vector-header-start,
html body .vector-header-start {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
}

html body .vector-header-start #vector-main-menu-dropdown {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
order: 1 !important;
}

html body .vector-header-start #vector-main-menu-dropdown .vector-dropdown-label {
padding: 4px 2px !important;
}

html body header.vector-header .vector-header-start #p-search,
html body .vector-header-start #p-search,
html body #p-search {
order: 2 !important;
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 2px 0 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
}

html body #p-search > *,
html body #p-search .vector-typeahead-search-container,
html body #p-search .cdx-typeahead-search,
html body #p-search .vani-desktop-search-wrap,
html body #p-search .vani-mobile-search-wrap {
flex: 1 1 100% !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
}

html body #p-search #ori_search,
html body #p-search .vani-clean-search-input {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 32px !important;
font-size: 14px !important;
padding: 2px 28px 2px 10px !important;
margin: 0 !important;
box-sizing: border-box !important;
}

html body #vanipedia-topbar-home-link {
order: 3 !important;
flex: 0 0 auto !important;
width: 24px !important;
height: 32px !important;
margin: 0 1px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}

html body .vector-header-end,
html body .vector-user-links {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
display: flex !important;
align-items: center !important;
}

html body .vector-header-end .vector-dropdown-label,
html body .vector-header-end .cdx-button,
html body .vector-header-end a {
padding: 4px 3px !important;
margin: 0 !important;
}
}

MediaWiki:Common.js

2026-11-13T15:25:14Z

Kashya:

/* V176: remove legacy decorative cursor if it was left by cached site code. */
(function restoreNativeMainPageCursor() {
function clean() {
if (!document.body || !document.body.classList.contains("page-Main_Page")) return;
var cursor = document.getElementById("vh-cursor-pointer");
if (cursor) cursor.remove();
var injected = document.getElementById("vh-kill-windows-cursor");
if (injected) injected.remove();
document.body.classList.remove("vh-cursor-link", "vh-cursor-click");
}
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", clean);
else clean();
})();

/* Any JavaScript here will be loaded for all users on every page load. */
if (mw.config.get('wgPageName' ) === 'Krishna_says_in_Bhagavad-gita') {
/* switch tooltip texts from content-div to label-div */
const v_labels = Array.from(document.getElementsByClassName("tabs-label"));
const v_content = Array.from(document.getElementsByClassName("tabs-content"));
for (var i = 0; i < v_labels.length; i++) {
v_labels[i].title = v_content[i].title;
v_content[i].title = "";
}
/* adjust wikitables */
var arr = Array.from(document.getElementsByClassName("wikitable"));
for (var t = 0; t < arr.length; t++) {
/* insert THEAD in wikitable */
var thead = document.createElement("thead");
thead.style.display = "block";
var wtbl = arr[t];
wtbl.insertBefore(thead, wtbl.firstChild);
/* move first row of TBODY to THEAD */
thead.appendChild(wtbl.rows[0]);
/* make TBODY scrollable */
var tbody = wtbl.tBodies[0];
tbody.style.display = "block";
tbody.style.overflowY = "auto";
tbody.style.maxHeight = "500px";
for (var r = 0; r < wtbl.rows.length; r++) {
var row = wtbl.rows[r];
/* adjust column widths and hide from-until columns */
row.cells[0].classList = "cw_0";
row.cells[1].classList = "cw_150";
row.cells[2].classList = "cw_500";
/* mark the text */
if (r == 0) continue;
var v_text = row.cells[2].textContent;
var v_html = ""; var v_from = 0;
var marks = JSON.parse(row.cells[0].textContent.replaceAll("O", "[").replaceAll("C", "]"));
for (var m = 0; m < marks.length; m++) {
v_html +=
v_text.substr(v_from,marks[m][0]-v_from) + "<mark>" +
v_text.substr(marks[m][0],marks[m][1]-marks[m][0]+1) + "</mark>";
v_from = marks[m][1]+1;
}
v_html += v_text.substr(v_from);
row.cells[2].innerHTML = v_html;
}
}
}
// install Google Search
// document.write('<script type="text/javascript" src="'
// + 'http://vanipedia.org/w/index.php?title=MediaWiki:GoogleSearch.js'
// + '&action=raw&ctype=text/javascript"></' + 'script>');
// install JQuery
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:JQuery.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install WikEd toolbar and Vanify
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:Vaniquotes.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install Replace
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:TextboxReplace.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install Unify
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:Unify.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install Vanify
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:Vanify.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install Vani_suggest for diacritics auto-suggest pulldown on the search bar
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:Vani_suggest.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install previous/next links for video categories in all languages
//document.write('<script type="text/javascript" src="/navcat/navcat.js"></' + 'script>');
// Buttons
//addOnloadHook(function() {
//if (document.editform) {
//addPortletLink("p-cactions", "javascript:Unify()", "unify", "ca-unify", "Convert Balarama fonts to Unicode", "");
// addPortletLink("p-cactions", "javascript:Vanify()", "vanify", "ca-vanify", "Corrects vani markup", "");
// addPortletLink('p-cactions', 'javascript:format()', 'format', 'ca-format', 'Format article', '');
//addPortletLink('p-cactions', 'javascript:wpTextboxReplace()', 'Replace', 'ca-replace', 'Replaces text in the edit window', 'R');
//}
//});
// end Buttons
// --- YouTube Random Shorts (Kasya) ---
$(document).ready(function() {
var $widget = $('.vani-shorts-viewport');
if ($widget.length) {
var $viewport = $widget;
var $titleFrame = $widget.find('.vani-shorts-title');
new mw.Api().get({
action: 'query',
prop: 'revisions',
titles: 'VanimediaMayapur YouTube SHORTS List',
rvprop: 'content',
format: 'json'
}).done(function(data) {
try {
var pages = data.query.pages;
var pageId = Object.keys(pages)[0];
if (pageId == "-1" || !pages[pageId].revisions) {
$viewport.text("Database list page not found.");
return;
}
// FIXED: Corrected MediaWiki revision array syntax lookup
var rawWikiText = pages[pageId].revisions[0]['*'];
var lines = rawWikiText.split('\n');
var validShorts = [];
for (var i = 0; i < lines.length; i++) {
var line = $.trim(lines[i]);
if (line.indexOf('File:') === 0 && line.toLowerCase().indexOf('link=') !== -1) {
validShorts.push(line);
}
}
if (validShorts.length === 0) {
$viewport.text("No gallery entries recognized.");
return;
}
var randomLine = validShorts[Math.floor(Math.random() * validShorts.length)];
var parts = randomLine.split('|');
// Reset defaults before parsing line elements
var rawUrl = "";
for (var j = 0; j < parts.length; j++) {
var part = $.trim(parts[j]);
if (part.toLowerCase().indexOf('link=') === 0) {
rawUrl = part.substring(5).trim();
}
}
// Clean all template formatting brackets, space characters, and hidden control markers
var urlCleaned = rawUrl.replace(/[\u200e\u200f\s\}\}\]]/g, '');
// Direct YouTube Alphanumeric Pattern Matcher
var idRegex = /(?:shorts\/|v=|embed\/|\/)([a-zA-Z0-9_-]{11})/;
var matchResults = urlCleaned.match(idRegex);
var videoId = "";
if (matchResults && matchResults[1]) {
// FIXED: Grabbed index 1 to pull the standalone 11-digit ID without any slashes
videoId = matchResults[1].trim();
}
if (videoId && videoId.length === 11) {
// FIXED: Isolated to inject ONLY the video player iframe at the correct 280px width
var embedUrl = "https://www.youtube.com/embed/" + videoId;
$viewport.html('<iframe width="280" height="225" src="' + embedUrl + '" frameborder="0" allowfullscreen style="border-radius: 8px; border: none;"></iframe>');
} else {
$viewport.html("<div style='color:#c0392b; padding:10px; font-size:11px;'>Invalid video ID sequence extracted.</div>");
}
} catch (err) {
console.error("Shorts engine exception:", err);
$viewport.text("Error handling text structure values.");
}
}).fail(function() {
$viewport.text("API connection failed.");
});
}
});
// Kasya
/* Open Timeline links in a new tab ONLY on the Chapters page */
mw.hook('wikipage.content').add(function($content) {
// Check if we are exactly on the timeline page
if (mw.config.get('wgPageName') === "Chapters_in_Srila_Prabhupada's_Life") {
// If yes, apply the new tab rule to the table
$content.find('#mp-tfp a').attr('target', '_blank').attr('rel', 'noopener noreferrer');
}
});
// Wait for MediaWiki core modules and the DOM to load
mw.loader.using(['mediawiki.api', 'mediawiki.util']).then(function () {
$(document).ready(function () {
// 1. FIND THE "102 Languages" SIDEBAR SECTION
var $sidebarMenu = $('#p-102_Languages ul').first();
// Fallback in case your specific MediaWiki version formats the ID differently
if ($sidebarMenu.length === 0) {
$('.vector-menu-heading, .portal h3').each(function() {
// Looks for the heading text directly
if ($(this).text().trim() === '102 Languages') {
$sidebarMenu = $(this).closest('.vector-menu, .portal').find('ul').first();
}
});
}
// Exit if the 102 Languages menu isn't found on the page
if (!$sidebarMenu || $sidebarMenu.length === 0) return;
// 2. CREATE THE SEARCH BAR AS A MENU ITEM
var $searchLi = $('<li id="n-language-search" style="margin-top: 10px; margin-bottom: 5px; list-style: none;"></li>');
var $searchBox = $('<input type="text" id="sidebarLanguageSearch" placeholder="Search 102 Languages..." style="width: 100%; box-sizing: border-box; padding: 5px; font-size: 0.85em; border: 1px solid #a2a9b1; border-radius: 2px;" autocomplete="off" />');
// Container for the results (hidden by default)
var $resultsContainer = $('<ul id="sidebarLanguageResults" style="list-style: none; padding: 0; margin: 4px 0 0 0; max-height: 200px; overflow-y: auto; border: 1px solid #eaecf0; background: #ffffff; display: none;"></ul>');
// Build the menu item and append it to the sidebar
$searchLi.append($searchBox).append($resultsContainer);
$sidebarMenu.prepend($searchLi);
var api = new mw.Api();
var languageList = [];
// 3. FETCH LANGUAGES FROM THE CATEGORY VIA API IN THE BACKGROUND
api.get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:Languages_with_Total_Pages',
cmlimit: 'max',
format: 'json'
}).done(function (data) {
if (data.query && data.query.categorymembers) {
languageList = data.query.categorymembers.map(function (member) {
return {
title: member.title,
url: mw.util.getUrl(member.title)
};
});
}
});
// 4. ADD SEARCH FUNCTIONALITY TO THE SIDEBAR BOX
$('#sidebarLanguageSearch').on('keyup', function (e) {
e.stopPropagation();
var searchTerm = $(this).val().toLowerCase();
$resultsContainer.empty();
// Hide the results box if the search is empty
if (searchTerm.length === 0) {
$resultsContainer.hide();
return;
}
// Filter the fetched languages
var filteredLanguages = languageList.filter(function (lang) {
return lang.title.toLowerCase().indexOf(searchTerm) > -1;
});
// Show results container
$resultsContainer.show();
// Append results using Vector's standard dark text color
if (filteredLanguages.length > 0) {
filteredLanguages.forEach(function (lang) {
$resultsContainer.append('<li style="padding: 4px 6px; border-bottom: 1px solid #f8f9fa;"><a href="' + lang.url + '" style="text-decoration: none; color: #0645ad; display: block; font-size: 0.9em;">' + lang.title + '</a></li>');
});
} else {
$resultsContainer.append('<li style="padding: 4px 6px; color: #72777d; font-size: 0.9em;">No languages found</li>');
}
});
// Prevent typing from accidentally triggering global keyboard shortcuts
$('#sidebarLanguageSearch').on('keydown', function(e) {
e.stopPropagation();
});
// Optional: Hide results when clicking outside the sidebar search
$(document).on('click', function(e) {
if (!$(e.target).closest('#n-language-search').length) {
$resultsContainer.hide();
}
});
// Re-show results if they click back into the search box
$('#sidebarLanguageSearch').on('click', function() {
if ($(this).val().length > 0) {
$resultsContainer.show();
}
});
});
});
// 5. SIDEBAR ACCORDION - STRICT LEFT-COLUMN ISOLATION & TRUE ACCORDION
(function() {
// 1. Tag ONLY menus physically located in the left sidebar
function tagSidebarMenus() {
var allMenus = document.querySelectorAll('.vector-menu');
for (var i = 0; i < allMenus.length; i++) {
var menu = allMenus[i];
// STRICT INCLUSION: Only tag menus inside the modern or legacy left sidebar containers
if (menu.closest('#vector-main-menu, #mw-panel, #mw-navigation')) {
menu.classList.add('vanipedia-sidebar-menu');
// Collapse them by default if they have a heading
if (menu.querySelector('.vector-menu-heading') && !menu.classList.contains('vanipedia-collapsed')) {
menu.classList.add('vanipedia-collapsed');
}
}
}
}
// Run tagging immediately, and again on load as a failsafe
tagSidebarMenus();
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', tagSidebarMenus);
}
// 2. Inject CSS targeted STRICTLY at our newly tagged custom class
var style = document.createElement('style');
style.textContent =
/* Widen only our tagged sidebar menus */
'.vanipedia-sidebar-menu { width: 185px !important; } ' +
/* Core functional hiding rule */
'.vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-content { display: none !important; } ' +
/* Bold, Dark Header */
'.vanipedia-sidebar-menu .vector-menu-heading { ' +
' cursor: pointer !important; ' +
' background-color: #2c4c50 !important; ' +
' border: 1px solid #1b3033 !important; ' +
' border-radius: 4px !important; ' +
' margin-bottom: 4px !important; ' +
' padding: 10px 12px !important; ' +
' font-weight: 600 !important; ' +
' color: #ffffff !important; ' +
' display: flex !important; ' +
' justify-content: space-between !important; ' +
' align-items: center !important; ' +
' gap: 10px !important; ' +
' transition: all 0.2s ease; ' +
'} ' +
/* Fix header corners when expanded */
'.vanipedia-sidebar-menu:not(.vanipedia-collapsed) .vector-menu-heading { ' +
' border-radius: 4px 4px 0 0 !important; ' +
' margin-bottom: 0 !important; ' +
'} ' +
/* Hover effect */
'.vanipedia-sidebar-menu .vector-menu-heading:hover { background-color: #385e63 !important; } ' +
/* The dropdown caret */
'.vanipedia-sidebar-menu .vector-menu-heading::after { ' +
' content: "▼"; ' +
' font-size: 0.75em; ' +
' color: #ffffff !important; ' +
' transition: transform 0.2s ease; ' +
'} ' +
/* Rotate the arrow when collapsed */
'.vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-heading::after { ' +
' transform: rotate(-90deg); ' +
'} ' +
/* The Expanded Content Area */
'.vanipedia-sidebar-menu .vector-menu-content { ' +
' background-color: #eaeff0 !important; ' +
' border: 1px solid #2c4c50 !important; ' +
' border-top: none !important; ' +
' border-radius: 0 0 4px 4px !important; ' +
' padding: 0 0 4px 0 !important; ' +
' margin-bottom: 6px !important; ' +
' box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important; ' +
'} ' +
/* Reset the list styles */
'.vanipedia-sidebar-menu .vector-menu-content ul { ' +
' list-style: none !important; ' +
' margin: 0 !important; ' +
' padding: 0 !important; ' +
'} ' +
/* Menu links */
'.vanipedia-sidebar-menu .vector-menu-content li a { ' +
' display: block !important; ' +
' padding: 8px 12px 8px 16px !important; ' +
' color: #1b3033 !important; ' +
' text-decoration: none !important; ' +
' border-left: 3px solid transparent !important; ' +
' border-bottom: 1px solid rgba(44, 76, 80, 0.1) !important; ' +
' transition: all 0.15s ease !important; ' +
'} ' +
/* Remove separator from last item */
'.vanipedia-sidebar-menu .vector-menu-content li:last-child a { ' +
' border-bottom: none !important; ' +
'} ' +
/* Hover effect for individual menu items */
'.vanipedia-sidebar-menu .vector-menu-content li a:hover { ' +
' background-color: #dbe4e6 !important; ' +
' border-left: 3px solid #2c4c50 !important; ' +
' color: #000000 !important; ' +
'} ';
document.head.appendChild(style);
// 3. Helper function to collapse all of our securely tagged menus
function collapseAllSidebarMenus() {
var menus = document.querySelectorAll('.vanipedia-sidebar-menu');
for (var i = 0; i < menus.length; i++) {
menus[i].classList.add('vanipedia-collapsed');
}
}
// 4. Intercept clicks for True Accordion Behavior
document.addEventListener('click', function(e) {
var heading = e.target.closest('.vector-menu-heading');
if (!heading) return;
// ONLY react if this click belongs to one of our tagged sidebar menus
var navContainer = heading.closest('.vanipedia-sidebar-menu');
if (navContainer) {
var isAlreadyOpen = !navContainer.classList.contains('vanipedia-collapsed');
// Forcefully collapse ALL left sidebar menus first
collapseAllSidebarMenus();
// Open the clicked one if it wasn't already open
if (!isAlreadyOpen) {
navContainer.classList.remove('vanipedia-collapsed');
}
e.stopPropagation();
e.preventDefault();
}
}, true);
})();
mw.loader.using('mediawiki.user').then(function() {
// Fetch the user's assigned groups
var userGroups = mw.config.get('wgUserGroups') || [];
// Define the roles that SHOULD see the administrative tabs
var isAuthorized = userGroups.includes('sysop') ||
userGroups.includes('interface-admin') ||
userGroups.includes('Editor');
// If the user is not in one of those groups, restrict the UI
if (!isAuthorized) {
document.body.classList.add('restricted-ui');
}
});
// Function to open accordion from TOC and jump there //
mw.hook('wikipage.content').add(function() {
function handleAccordionTOC(hash) {
if (!hash || hash === '#') return false;
try {
var targetId = hash.substring(1);
var targetElement = document.getElementById(targetId) || document.getElementById(decodeURIComponent(targetId));
if (!targetElement) return false;
var $target = $(targetElement);
// Match either h2 or h3
var $heading = $target.is('h2, h3') ? $target : $target.closest('h2, h3');
if (!$heading.length) return false;
var $accordion = $heading.next('.book-accordion');
// If the heading itself is not followed directly by an accordion,
// check if the heading is located INSIDE a parent accordion (e.g., nested h3)
var $parentAccordions = $heading.parents('.book-accordion');
// If there's no direct accordion next to it and it's not inside any accordion,
// let the browser handle standard jump.
if (!$accordion.length && !$parentAccordions.length) return false;
// 1. Open all ancestor accordions (if target heading is nested inside one)
$parentAccordions.each(function() {
var $parentCollapsible = $(this).children('.mw-collapsible');
if ($parentCollapsible.length && $parentCollapsible.hasClass('mw-collapsed')) {
var pId = $parentCollapsible.attr('id');
if (pId) {
var pToggleClass = pId.replace('mw-customcollapsible-', 'mw-customtoggle-');
$('.' + pToggleClass).first().click();
}
}
});
// 2. Open the accordion immediately following this heading (if present)
if ($accordion.length) {
var $collapsible = $accordion.children('.mw-collapsible, .mw-collapsible-content').first();
if (!$collapsible.length) {
$collapsible = $accordion.find('.mw-collapsible');
}
if ($collapsible.length && $collapsible.hasClass('mw-collapsed')) {
var collapsibleId = $collapsible.attr('id');
if (collapsibleId) {
var toggleClass = collapsibleId.replace('mw-customcollapsible-', 'mw-customtoggle-');
$('.' + toggleClass).first().click();
}
}
}
// Target element to scroll to (the accordion, or the heading itself if accordion is missing)
var $scrollTarget = $accordion.length ? $accordion : $heading;
// 3. Scroll to the visible section
setTimeout(function() {
$('html, body').animate({
scrollTop: $scrollTarget.offset().top - 75
}, 300);
}, 100);
// Return true to indicate we successfully handled the TOC accordion click
return true;
} catch (e) {
console.error("TOC Accordion script error:", e);
return false;
}
}
$(document).off('click.tocAccordion').on('click.tocAccordion', 'a[href^="#"]', function(e) {
if ($(this).closest('#toc, .toc, .vector-toc').length > 0) {
var href = $(this).attr('href');
// Run our function to see if this is an accordion/heading link
var isAccordion = handleAccordionTOC(href);
// ONLY stop the default browser jump if we handled it
if (isAccordion) {
e.preventDefault();
// Update the URL manually so the user can still share the link
if (history.pushState) {
history.pushState(null, null, href);
} else {
window.location.hash = href;
}
}
}
});
if (window.location.hash) {
setTimeout(function() {
handleAccordionTOC(window.location.hash);
}, 500);
}
});
/* Sticky burger menu - Pure Floating Dropdown (Forces Unpinned & Full Title) */
(function () {
let isMenuOpen = false;
// 1. Force the sidebar out of pinned mode and return menu into the dropdown container
function forceUnpinSidebar() {
document.documentElement.classList.remove('vector-feature-main-menu-pinned-enabled', 'vector-feature-main-menu-pinned-clientpref-1');
document.documentElement.classList.add('vector-feature-main-menu-pinned-disabled', 'vector-feature-main-menu-pinned-clientpref-0');
if (document.body) {
document.body.classList.remove('vector-feature-main-menu-pinned-enabled', 'vector-feature-main-menu-pinned-clientpref-1');
document.body.classList.add('vector-feature-main-menu-pinned-disabled', 'vector-feature-main-menu-pinned-clientpref-0');
}
// Clear stored pin preference
document.cookie = "vector-feature-main-menu-pinned=0; path=/; max-age=31536000";
try { localStorage.setItem('vector-feature-main-menu-pinned', '0'); } catch(e) {}
// If #vector-main-menu was moved into the pinned container, move it back into dropdown
const mainMenu = document.getElementById('vector-main-menu');
const unpinnedContainer = document.getElementById('vector-main-menu-unpinned-container') ||
document.querySelector('#vector-main-menu-dropdown .vector-dropdown-content');
const pinnedContainer = document.getElementById('vector-main-menu-pinned-container');
if (mainMenu && unpinnedContainer && pinnedContainer && pinnedContainer.contains(mainMenu)) {
unpinnedContainer.appendChild(mainMenu);
}
}
function getDropdownElement() {
return document.querySelector('#vector-main-menu-dropdown .vector-dropdown-content') ||
document.getElementById('vector-main-menu-dropdown-content') ||
document.getElementById('vector-main-menu-unpinned-container') ||
document.getElementById('vector-main-menu');
}
function openMenu(menuBtn) {
forceUnpinSidebar();
const checkbox = document.getElementById('vector-main-menu-dropdown-checkbox');
const dropdown = getDropdownElement();
if (!dropdown) return;
if (checkbox) {
checkbox.checked = true;
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
}
const rect = menuBtn.getBoundingClientRect();
dropdown.style.setProperty('position', 'fixed', 'important');
dropdown.style.setProperty('top', rect.bottom + 'px', 'important');
dropdown.style.setProperty('left', rect.left + 'px', 'important');
dropdown.style.setProperty('z-index', '99999', 'important');
dropdown.style.setProperty('max-height', (window.innerHeight - rect.bottom - 16) + 'px', 'important');
dropdown.style.setProperty('overflow-y', 'auto', 'important');
dropdown.style.setProperty('display', 'block', 'important');
dropdown.style.setProperty('visibility', 'visible', 'important');
dropdown.style.setProperty('opacity', '1', 'important');
dropdown.style.setProperty('background-color', 'var(--background-color-base, #ffffff)', 'important');
dropdown.style.setProperty('box-shadow', '0 4px 16px rgba(0, 0, 0, 0.2)', 'important');
dropdown.style.setProperty('border-radius', '4px', 'important');
isMenuOpen = true;
}
function closeMenu() {
const checkbox = document.getElementById('vector-main-menu-dropdown-checkbox');
const dropdown = getDropdownElement();
if (!dropdown) return;
if (checkbox) {
checkbox.checked = false;
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
}
dropdown.style.removeProperty('position');
dropdown.style.removeProperty('top');
dropdown.style.removeProperty('left');
dropdown.style.removeProperty('z-index');
dropdown.style.removeProperty('max-height');
dropdown.style.removeProperty('overflow-y');
dropdown.style.removeProperty('background-color');
dropdown.style.removeProperty('box-shadow');
dropdown.style.removeProperty('border-radius');
dropdown.style.setProperty('display', 'none', 'important');
dropdown.style.setProperty('visibility', 'hidden', 'important');
dropdown.style.setProperty('opacity', '0', 'important');
isMenuOpen = false;
}
function initStickyBurger() {
forceUnpinSidebar();
const stickyHeader = document.getElementById('vector-sticky-header');
if (!stickyHeader) return false;
if (document.getElementById('vanipedia-sticky-main-menu')) return true;
// 1. Create burger button
const menuBtn = document.createElement('div');
menuBtn.id = 'vanipedia-sticky-main-menu';
menuBtn.title = 'Main menu';
menuBtn.style.cursor = 'pointer';
menuBtn.className = 'vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--icon-only';
// 2. Add hamburger icon
const iconSpan = document.createElement('span');
iconSpan.className = 'vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu';
menuBtn.appendChild(iconSpan);
// 3. Toggle click handler (1st click opens, 2nd click rolls back)
menuBtn.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
if (isMenuOpen) {
closeMenu();
} else {
openMenu(menuBtn);
}
});
// 4. Inject into start container
let startContainer = stickyHeader.querySelector('.vector-sticky-header-start');
if (!startContainer) {
startContainer = document.createElement('div');
startContainer.className = 'vector-sticky-header-start';
stickyHeader.insertBefore(startContainer, stickyHeader.firstChild);
}
startContainer.insertBefore(menuBtn, startContainer.firstChild);
return true;
}
// 5. Close when clicking anywhere outside
document.addEventListener('click', function (e) {
if (!isMenuOpen) return;
const menuBtn = document.getElementById('vanipedia-sticky-main-menu');
const dropdown = getDropdownElement();
if (dropdown && menuBtn && !menuBtn.contains(e.target) && !dropdown.contains(e.target)) {
closeMenu();
}
});
// 6. Bootstrap initializer
if (!initStickyBurger()) {
const checkTimer = setInterval(function () {
if (initStickyBurger()) {
clearInterval(checkTimer);
}
}, 100);
setTimeout(function () { clearInterval(checkTimer); }, 4000);
}
mw.hook('wikipage.content').add(initStickyBurger);
$(initStickyBurger);
})();
/* Floating "Back to Top" Button Controller */
(function () {
function initBackToTop() {
if (document.getElementById('vanipedia-back-to-top')) return;
// 1. Create button element with an up-arrow SVG icon
const btn = document.createElement('button');
btn.id = 'vanipedia-back-to-top';
btn.title = 'Back to top';
btn.setAttribute('aria-label', 'Back to top');
btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>';
// 2. Smooth scroll to top on click
btn.addEventListener('click', function (e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// 3. Show button only after scrolling down 300px
function toggleVisibility() {
if (window.scrollY > 300) {
btn.classList.add('visible');
} else {
btn.classList.remove('visible');
}
}
window.addEventListener('scroll', toggleVisibility, { passive: true });
toggleVisibility();
document.body.appendChild(btn);
}
$(initBackToTop);
mw.hook('wikipage.content').add(initBackToTop);
})();
/* V176: Removed the homepage animation/random-content initializer. Main-page
features now remain exactly as curated in Main-Page.wikitext. */

// SAFE LEFT-ANCHORED SEARCH (STEP 18)
// ==========================================================================
$(document).ready(function() {
var $search = $('#p-search');
var $start = $('.vector-header-start');
if ($search.length && $start.length && !$start.find('#p-search').length) {
$start.append($search);
}
});
/* ======================================================================
STEP 59: REMOVE TOP BAR HOVER HELP TEXTS (BROWSER TOOLTIPS)
====================================================================== */
function removeTopBarHelpTexts() {
var selectors = [
'#mw-head [title]',
'.vector-header [title]',
'#vanipedia-header-title',
'.vh-header-title',
'.vanipedia-header-title',
'#p-logo [title]',
'#p-logo a',
'header [title]',
'#p-personal [title]',
'#p-search [title]',
'.vector-user-menu [title]',
'#pt-login [title]',
'#pt-anonuserpage [title]',
'#pt-anontalk [title]',
'.vector-menu [title]'
];
$(selectors.join(', ')).removeAttr('title');
// Aggressively remove title from all top bar elements
$('#mw-head, .vector-header, header, .vector-header-container').find('*').removeAttr('title');
}
function initSanctuaryTitle() {
$('.vh-sanctuary-title a').each(function () {
var $link = $(this);
$link.removeClass('vh-title-morph');
$link.find('.vh-title-hover, .vh-title-default').remove();
$link.text('Who Is Śrīla Prabhupāda');
});
}
$(document).ready(function () {
removeTopBarHelpTexts();
initSanctuaryTitle();
setTimeout(removeTopBarHelpTexts, 400);
setTimeout(removeTopBarHelpTexts, 1500);
});
// ==========================================================================
/* V175: decorative cursor code removed; the native system cursor is retained. */

/* ==========================================================================
STEP 92: PERMANENT BOTTOM NAVIGATION BAR (MAIN PAGE & REGULAR WIKI PAGES)
- Fixed at bottom of screen, permanently visible while scrolling.
- Core Principles (/wiki/Vanipedia_Vision)
- Volunteer (/wiki/Vaniseva)
- Community (/wiki/Vanipedia_Community)
- Contact (/contact.php, opens in new window)
- Donate (/wiki/Special:IframePage)
========================================================================== */
(function initPermanentBottomBar() {
function isEntryPage() {
return (
document.body.classList.contains('ext-vp3d-fullscreen') ||
!!document.querySelector('.vp-entry3d-container') ||
!!document.querySelector('.vp-entry3d-wrapper') ||
window.location.pathname === '/' ||
(window.location.pathname === '/index.php' && !window.location.search) ||
(window.mw && mw.config && (mw.config.get('wgPageName') === 'Entry_Page' || mw.config.get('wgTitle') === 'Entry Page'))
);
}
/* V190: mobile footer navigation starts at Home/Main Page, with reachable horizontal overflow. */
function updateBottomBarLayout(bar) {
if (!bar) return;
var mobile = window.innerWidth <= 999 || document.body.classList.contains('skin-minerva');
var inner = bar.querySelector('.vh-bottom-bar-inner');
var links = bar.querySelector('.vh-bottom-nav-links');
var left = bar.querySelector('.vh-bottom-bar-left-space');
var right = bar.querySelector('.vh-bottom-bar-right-space');
if (!inner || !links) return;
inner.style.setProperty('padding', mobile ? '0 10px' : '0 24px', 'important');
inner.style.setProperty('min-width', '0', 'important');
if (mobile) inner.style.setProperty('justify-content', 'flex-start', 'important');
else inner.style.removeProperty('justify-content');
links.style.setProperty('justify-content', mobile ? 'flex-start' : 'center', 'important');
links.style.setProperty('flex', mobile ? '1 1 auto' : '0 0 auto', 'important');
links.style.setProperty('width', mobile ? '100%' : 'auto', 'important');
links.style.setProperty('min-width', '0', 'important');
links.style.setProperty('gap', mobile ? '8px' : '12px', 'important');
links.style.setProperty('flex-wrap', 'nowrap', 'important');
if (mobile) links.style.setProperty('overflow-x', 'auto', 'important');
else links.style.removeProperty('overflow-x');
links.querySelectorAll('.vh-bottom-link, .vh-bottom-sep').forEach(function (item) {
item.style.setProperty('flex-shrink', '0', 'important');
});
if (left) left.style.setProperty('display', mobile ? 'none' : 'block', 'important');
if (right) right.style.setProperty('display', mobile ? 'none' : 'flex', 'important');
if (mobile && bar.dataset.vpFooterMode !== 'mobile') {
links.scrollLeft = 0;
inner.scrollLeft = 0;
}
bar.dataset.vpFooterMode = mobile ? 'mobile' : 'desktop';
}
function setupBottomBar() {
// Never inject on the 3D entry page; remove if already present
if (isEntryPage()) {
var existing = document.getElementById('vh-bottom-bar');
if (existing) existing.remove();
return;
}
var currentBar = document.getElementById('vh-bottom-bar');
if (currentBar) { updateBottomBarLayout(currentBar); return; }
var bar = document.createElement('nav');
bar.id = 'vh-bottom-bar';
bar.className = 'vh-bottom-bar';
bar.setAttribute('aria-label', 'Vanipedia Global Navigation');
bar.innerHTML =
'<div class="vh-bottom-bar-inner" style="display:flex !important; align-items:center !important; width:100% !important; max-width:100% !important; height:100% !important; padding:0 24px !important; box-sizing:border-box !important;">' +
'<div class="vh-bottom-bar-left-space" style="flex:1 1 0 !important; min-width:0 !important;"></div>' +
'<div class="vh-bottom-nav-links" style="flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; white-space:nowrap !important;">' +
'<a href="/" class="vh-bottom-link vh-bottom-entry">Home</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Main_Page" class="vh-bottom-link vh-bottom-home">Main Page</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Vanipedia_Vision" class="vh-bottom-link">Core Principles</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Vaniseva" class="vh-bottom-link">Volunteer</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Vanipedia_Community" class="vh-bottom-link">Community</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/contact.php" target="_blank" rel="noopener noreferrer" class="vh-bottom-link">Contact</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Special:IframePage" class="vh-bottom-link vh-bottom-donate">Donate</a>' +
'</div>' +
'<div class="vh-bottom-bar-right-space" style="flex:1 1 0 !important; min-width:0 !important; display:flex !important; align-items:center !important; justify-content:center !important;">' +
'<div class="vh-bottom-social-links" style="position:static !important; transform:none !important; display:inline-flex !important; align-items:center !important; gap:24px !important;">' +
'<a href="https://www.youtube.com/@VanimediaPrabhupada" target="_blank" rel="noopener noreferrer" class="vh-bottom-social-item" title="YouTube" style="display:inline-flex !important;align-items:center !important;">' +
'<img src="/wiki/Special:FilePath/YouTube_Logo_B.png" alt="YouTube" style="height:20px !important;width:auto !important;vertical-align:middle !important;display:block !important;">' +
'</a>' +
'<a href="https://www.facebook.com/vanipedia.org" target="_blank" rel="noopener noreferrer" class="vh-bottom-social-item" title="Facebook Page" style="display:inline-flex !important;align-items:center !important;">' +
'<img src="/wiki/Special:FilePath/Facebook_Group_Logo.png" alt="Facebook" style="height:20px !important;width:auto !important;vertical-align:middle !important;display:block !important;">' +
'</a>' +
'<a href="https://www.facebook.com/groups/VanipediaGroup" target="_blank" rel="noopener noreferrer" class="vh-bottom-social-item" title="Facebook Group" style="display:inline-flex !important;align-items:center !important;">' +
'<img src="/wiki/Special:FilePath/Facebook_Logo_2023.png" alt="Facebook Group" style="height:20px !important;width:auto !important;vertical-align:middle !important;display:block !important;">' +
'</a>' +
'<a href="https://www.instagram.com/vanipediaprabhupada/" target="_blank" rel="noopener noreferrer" class="vh-bottom-social-item" title="Instagram" style="display:inline-flex !important;align-items:center !important;">' +
'<img src="/wiki/Special:FilePath/Insta Logo.png" alt="Instagram" style="height:20px !important;width:auto !important;vertical-align:middle !important;display:block !important;">' +
'</a>' +
'</div>' +
'</div>' +
'</div>';
var stageSlot = document.getElementById('vani-stage-footer-slot');
if (stageSlot) {
stageSlot.appendChild(bar);
} else {
document.body.appendChild(bar);
}
updateBottomBarLayout(bar);
}
window.addEventListener('resize', function () {
updateBottomBarLayout(document.getElementById('vh-bottom-bar'));
}, { passive: true });
// Remove bar if 3D entry page activates asynchronously
if (window.MutationObserver && document.body) {
var observer = new MutationObserver(function() {
if (isEntryPage()) {
var existing = document.getElementById('vh-bottom-bar');
if (existing) existing.remove();
}
});
observer.observe(document.body, { attributes: true, attributeFilter: ['class'], childList: true });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupBottomBar);
} else {
setupBottomBar();
}
})();
// Chrome suppression for Entry Page
(function suppressEntryPageChrome() {
function checkEntryChrome() {
var isEntry = (
document.body.classList.contains('ext-vp3d-fullscreen') ||
!!document.querySelector('.vp-entry3d-container') ||
!!document.querySelector('.vp-entry3d-wrapper') ||
window.location.pathname === '/' ||
(window.location.pathname === '/index.php' && !window.location.search)
);
if (isEntry) {
var headers = document.querySelectorAll('.header-container, .header-chrome, .minerva-header, .vector-header-container, #mw-head, .mw-header');
for (var i = 0; i < headers.length; i++) {
headers[i].style.setProperty('display', 'none', 'important');
}
var b = document.getElementById('vh-bottom-bar');
if (b) b.remove();
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', checkEntryChrome);
} else {
checkEntryChrome();
}
})();
/* ==========================================================================
STEP 97: MOBILE BURGER MENU TOGGLE ENHANCER
Ensures the hamburger menu reliably opens and closes the Vector navigation
drawer on mobile viewports and touch devices.
========================================================================== */
(function() {
function initMobileMenuToggle() {
var dropdown = document.getElementById('vector-main-menu-dropdown');
if (!dropdown || dropdown.dataset.vaniMobileInit) return;
dropdown.dataset.vaniMobileInit = 'true';
var label = dropdown.querySelector('.vector-dropdown-label');
var checkbox = document.getElementById('vector-main-menu-dropdown-checkbox');
var content = dropdown.querySelector('.vector-dropdown-content');
if (label && checkbox) {
label.addEventListener('click', function(e) {
setTimeout(function() {
if (content) {
if (checkbox.checked) {
content.classList.add('is-open');
} else {
content.classList.remove('is-open');
}
}
}, 50);
});
}
}
$(document).ready(initMobileMenuToggle);
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(initMobileMenuToggle);
}
})();
/* ==========================================================================
VANIPEDIA MOBILE JAVASCRIPT (MediaWiki:Mobile.js)
1. User Menu Dropdown: Intercepts #ca-mytalks on mobile to show the regular
user dropdown menu (Talk, Preferences, Contributions, Log out) matching desktop.
2. Self-contained styles injected into <head>.
3. Screen Orientation lock to landscape on Main Page.
========================================================================== */
(function() {
// 1. Inject self-contained dropdown styles immediately into <head>
var styleId = 'vani-mobile-dropdown-styles';
if (!document.getElementById(styleId)) {
var style = document.createElement('style');
style.id = styleId;
style.textContent = [
'#vanipedia-mobile-user-menu {',
' display: none !important;',
' position: fixed !important;',
' top: 52px !important;',
' right: 8px !important;',
' width: 175px !important;',
' background-color: #1f3e45 !important;',
' border: 1.5px solid #b1873d !important;',
' border-radius: 6px !important;',
' box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;',
' padding: 6px 0 !important;',
' z-index: 999999 !important;',
' box-sizing: border-box !important;',
' flex-direction: column !important;',
'}',
'#vanipedia-mobile-user-menu.is-open {',
' display: flex !important;',
'}',
'#vanipedia-mobile-user-menu a.vani-user-menu-item {',
' color: #f5d77f !important;',
' font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;',
' font-size: 15px !important;',
' font-weight: 500 !important;',
' padding: 10px 18px !important;',
' text-decoration: none !important;',
' display: block !important;',
' line-height: 1.2 !important;',
'}',
'#vanipedia-mobile-user-menu a.vani-user-menu-item:hover,',
'#vanipedia-mobile-user-menu a.vani-user-menu-item:active {',
' background-color: #345B63 !important;',
' color: #ffffff !important;',
'}',
'#vanipedia-mobile-user-menu .vani-user-menu-divider {',
' height: 1px !important;',
' background-color: rgba(177, 135, 61, 0.35) !important;',
' margin: 5px 0 !important;',
'}',
'#vanipedia-mobile-user-menu a.vani-user-menu-logout {',
' color: #fca5a5 !important;',
'}',
'#vanipedia-mobile-user-menu a.vani-user-menu-logout:hover {',
' background-color: rgba(239, 68, 68, 0.2) !important;',
' color: #ffffff !important;',
'}'
].join('\n');
document.head.appendChild(style);
}
// 2. Setup user dropdown click interceptor
function initUserMenuDropdown() {
var $userBtn = $('#ca-mytalks');
if (!$userBtn.length || $userBtn.data('vaniMenuInit')) return;
$userBtn.data('vaniMenuInit', true);
// Prevent opening talk page directly
$userBtn.attr('href', 'javascript:void(0)');
// Build the dropdown container attached to body
var $dropdown = $('#vanipedia-mobile-user-menu');
if (!$dropdown.length) {
$dropdown = $('<div>', {
id: 'vanipedia-mobile-user-menu',
class: 'vanipedia-mobile-user-dropdown'
});
var user = (window.mw && mw.config && mw.config.get('wgUserName')) || 'Kashya';
var talkUrl = '/wiki/User_talk:' + encodeURIComponent(user);
var prefUrl = '/wiki/Special:Preferences';
var contUrl = '/wiki/Special:Contributions/' + encodeURIComponent(user);
var page = (window.mw && mw.config && mw.config.get('wgPageName')) || 'Main_Page';
var logoutUrl = '/w/index.php?title=Special:UserLogout&returnto=' + encodeURIComponent(page) + '&useformat=mobile';
$dropdown.html(
'<a href="' + talkUrl + '" class="vani-user-menu-item">Talk</a>' +
'<a href="' + prefUrl + '" class="vani-user-menu-item">Preferences</a>' +
'<a href="' + contUrl + '" class="vani-user-menu-item">Contributions</a>' +
'<div class="vani-user-menu-divider"></div>' +
'<a href="' + logoutUrl + '" class="vani-user-menu-item vani-user-menu-logout">Log out</a>'
);
$('body').append($dropdown);
}
// Toggle on click
$userBtn.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$dropdown.toggleClass('is-open');
});
// Close on clicking outside
$(document).on('click touchstart', function(e) {
if (!$(e.target).closest('#ca-mytalks, #vanipedia-mobile-user-menu').length) {
$dropdown.removeClass('is-open');
}
});
}
// =========================================================================
// 3. Container-Level Auto-Landscape & 2D Fitting (STEP 115)
// Matches the exact architecture of VanipediaEntry3D:
// - Keeps <body> stable without full-page transforms.
// - Wraps #vani-home inside #vani-mobile-stage > #vani-rotated-box.
// - Rotates #vani-rotated-box 90deg in portrait mode.
// - Scales the 1200px desktop layout so all sections (Triad, Timeline,
// 4 Taxonomy Cards, Bottom Bar) fit the phone screen without cropping.
// =========================================================================
/* =========================================================================
3. STEP 117: UNIFIED 3-SLOT ROTATED LANDSCAPE STAGE (TOP BAR + MAIN PAGE + BOTTOM BAR)
- Puts Top Bar, #vani-home, and Bottom Bar together in landscape.
- Rotates 90deg as a single unified screen when held in portrait.
- Stays completely horizontal with zero rotation when held in native landscape.
- Leaves regular wiki pages and desktop view completely untouched.
========================================================================= */
function initMobileMainPageStage() {
if (window._vaniMainPageStageInit) return;
var pageName = (window.mw && mw.config && mw.config.get('wgPageName')) || '';
var isMainPage = pageName === 'Main_Page' || document.body.classList.contains('page-Main_Page');
if (!isMainPage) return;
var $vh = $('#vani-home');
if (!$vh.length) return;
window._vaniMainPageStageInit = true;
var $stage = null;
var $rotatedBox = null;
var $headerSlot = null;
var $contentSlot = null;
var $footerSlot = null;
var $topHeader = null;
var $bottomBar = null;
var $headerParent = null;
var $footerParent = null;
var $vhParent = null;
function ensureStage() {
if (!$('#vani-mobile-stage').length) {
$topHeader = $('.vector-header-container, #mw-head, .mw-header, .header-container, header.header-chrome').filter(':visible').first();
if (!$topHeader.length) {
$topHeader = $('.vector-header-container, #mw-head, .mw-header, .header-container, header.header-chrome').first();
}
$bottomBar = $('#vh-bottom-bar');
if ($topHeader.length) $headerParent = $topHeader.parent();
if ($bottomBar.length) $footerParent = $bottomBar.parent();
$vhParent = $vh.parent();
var stageHtml = [
'<div id="vani-mobile-stage">',
' <div id="vani-rotated-box">',
' <div id="vani-stage-header-slot"></div>',
' <div id="vani-stage-content-slot"></div>',
' <div id="vani-stage-footer-slot"></div>',
' </div>',
'</div>'
].join('');
$('body').append(stageHtml);
document.body.classList.add('has-vani-stage');
$stage = $('#vani-mobile-stage');
$rotatedBox = $('#vani-rotated-box');
$headerSlot = $('#vani-stage-header-slot');
$contentSlot = $('#vani-stage-content-slot');
$footerSlot = $('#vani-stage-footer-slot');
if ($topHeader.length) {
$headerSlot.append($topHeader);
var $menu = $('#vanipedia-mobile-user-menu');
if ($menu.length) $headerSlot.append($menu);
}
$contentSlot.append($vh);
if ($bottomBar.length) {
$footerSlot.append($bottomBar);
}
} else {
$stage = $('#vani-mobile-stage');
$rotatedBox = $('#vani-rotated-box');
$headerSlot = $('#vani-stage-header-slot');
$contentSlot = $('#vani-stage-content-slot');
$footerSlot = $('#vani-stage-footer-slot');
if (!$footerSlot.find('#vh-bottom-bar').length) {
var $b = $('#vh-bottom-bar');
if ($b.length) $footerSlot.append($b);
}
if (!$headerSlot.find('.vector-header-container, #mw-head, .header-container').length) {
var $h = $('.vector-header-container, #mw-head, .mw-header, .header-container').first();
if ($h.length) $headerSlot.append($h);
}
}
if ($headerSlot && !$headerSlot.find('.vanipedia-stage-title-link').length) {
var $st = $('<a class="vanipedia-stage-title-link" href="/wiki/Main_Page">Vanipedia</a>');
var $targetNav = $headerSlot.find('.vector-header-start, .minerva-header, .header-container');
if ($targetNav.length) {
$targetNav.first().children().first().after($st);
} else {
$headerSlot.prepend($st);
}
}
}
function updateLayout() {
var screenW = window.innerWidth;
var screenH = window.innerHeight;
var isMobile = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (screenW < 900) || (screenH < 900 && screenH > screenW);
if (!isMobile && screenW >= 1000 && screenW > screenH) {
if ($('#vani-mobile-stage').length) {
if ($topHeader && $topHeader.length && $headerParent) {
$headerParent.prepend($topHeader);
}
if ($vhParent) {
$vhParent.append($vh);
}
if ($bottomBar && $bottomBar.length && $footerParent) {
$footerParent.append($bottomBar);
}
var $m = $('#vanipedia-mobile-user-menu');
if ($m.length) $('body').append($m);
$('#vani-mobile-stage').remove();
document.body.classList.remove('has-vani-stage');
$vh.css({ 'transform': '', 'transform-origin': '', 'width': '' });
}
return;
}
ensureStage();
var isMobilePortrait = (screenH > screenW) && (screenW < 850);
var landscapeW = isMobilePortrait ? screenH : screenW;
var landscapeH = isMobilePortrait ? screenW : screenH;
$rotatedBox.css({
'width': landscapeW + 'px',
'height': landscapeH + 'px'
});
if (isMobilePortrait) {
$rotatedBox.removeClass('is-native-landscape').addClass('is-auto-landscape');
} else {
$rotatedBox.removeClass('is-auto-landscape').addClass('is-native-landscape');
}
var headerH = 50;
var footerH = 36;
var availableContentH = Math.max(120, landscapeH - headerH - footerH);
$contentSlot.css({
'height': availableContentH + 'px'
});
var baseW = 1200;
var baseH = 475;
var scaleW = landscapeW / baseW;
var scaleH = availableContentH / baseH;
var scale = Math.min(scaleW, scaleH);
if (scale > 0.85) scale = 0.85;
if (scale < 0.45) scale = 0.45;
var scaledWidth = baseW * scale;
var offsetX = Math.max(0, (landscapeW - scaledWidth) / 2);
$vh.css({
'transform': 'translate(' + offsetX.toFixed(1) + 'px, 0) scale(' + scale.toFixed(4) + ')',
'transform-origin': 'top left',
'width': baseW + 'px'
});
}
var touchStartY = 0;
var touchStartScroll = 0;
window.addEventListener('touchstart', function(e) {
if ($rotatedBox && $rotatedBox.hasClass('is-auto-landscape') && e.touches && e.touches.length === 1) {
touchStartY = e.touches[0].clientX;
if ($contentSlot && $contentSlot[0]) {
touchStartScroll = $contentSlot[0].scrollTop || 0;
}
}
}, { passive: true });
window.addEventListener('touchmove', function(e) {
if ($rotatedBox && $rotatedBox.hasClass('is-auto-landscape') && e.touches && e.touches.length === 1) {
var delta = touchStartY - e.touches[0].clientX;
if ($contentSlot && $contentSlot[0]) {
$contentSlot[0].scrollTop = touchStartScroll + delta;
}
}
}, { passive: true });
window.addEventListener('wheel', function(e) {
if ($rotatedBox && $rotatedBox.hasClass('is-auto-landscape') && $contentSlot && $contentSlot[0]) {
$contentSlot[0].scrollTop += e.deltaY;
}
}, { passive: true });
window.addEventListener('resize', updateLayout);
window.addEventListener('orientationchange', function() {
setTimeout(updateLayout, 150);
});
updateLayout();
}
$(document).ready(function() {
initUserMenuDropdown(); // V174: natural portrait/landscape flow; no forced rotation.
});
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(function() {
initUserMenuDropdown(); // V174: natural portrait/landscape flow; no forced rotation.
});
}
})();
/* ==========================================================================
STEP 119: EXACT DESKTOP SIDEBAR INJECTION INTO MOBILE BURGER DRAWER
1. Empties all irrelevant Minerva items (Nearby, Random, Settings, About).
2. Clones or fetches the exact desktop Vector 2022 sidebar (#vector-main-menu).
3. Tags each section with .vanipedia-sidebar-menu for the true desktop accordion.
4. Connects the 102 Languages live search box.
========================================================================== */
(function initExactMobileSidebar() {
function cleanAndInject($drawer, sidebarHtml) {
if ($drawer.data('vaniSidebarCleaned')) return;
$drawer.data('vaniSidebarCleaned', true);
// 1. Remove all default Minerva items (Nearby, Random, Personal, Hlist)
$drawer.find('#p-navigation, #p-personal, ul.hlist, .menu__item--nearby, .menu__item--random').remove();
// 2. Parse and filter desktop sidebar HTML
var $parsed = $('<div>').append($.parseHTML(sidebarHtml));
var $menus = $parsed.find('.vector-menu');
if (!$menus.length) {
$menus = $parsed.find('.portal, [id^="p-"]');
}
var $container = $('<div>', { id: 'vani-mobile-synced-sidebar' });
$menus.each(function(idx) {
var $menu = $(this).clone();
var menuId = $menu.attr('id') || '';
// Ignore personal or search menus if caught
if (menuId === 'p-personal' || menuId === 'p-search' || menuId === 'p-logo') return;
// Apply standard desktop class
$menu.addClass('vanipedia-sidebar-menu');
// Collapse by default, except the first section (Navigation)
if (idx === 0) {
$menu.removeClass('vanipedia-collapsed');
} else {
$menu.addClass('vanipedia-collapsed');
}
$container.append($menu);
});
// 3. Mount cleanly inside mobile drawer
$drawer.empty().append($container);
// 4. Initialize 102 Languages live search box in the cloned menu
initLanguageSearchInDrawer($container);
}
function initLanguageSearchInDrawer($container) {
var $sidebarMenu = $container.find('#p-102_Languages ul, [id*="102_Languages"] ul').first();
if ($sidebarMenu.length === 0) {
$container.find('.vector-menu-heading, .portal h3').each(function() {
if ($(this).text().trim().indexOf('102 Languages') !== -1) {
$sidebarMenu = $(this).closest('.vector-menu, .portal').find('ul').first();
}
});
}
if (!$sidebarMenu || $sidebarMenu.length === 0 || $sidebarMenu.find('#sidebarLanguageSearch').length) return;
var $searchLi = $('<li id="n-language-search" style="margin: 8px 10px; list-style: none;"></li>');
var $searchBox = $('<input type="text" id="sidebarLanguageSearch" placeholder="Search 102 Languages..." autocomplete="off" />');
var $resultsContainer = $('<ul id="sidebarLanguageResults" style="list-style: none; padding: 0; margin: 4px 0 0 0; max-height: 200px; overflow-y: auto; border: 1px solid #2c4c50; background: #ffffff; display: none;"></ul>');
$searchLi.append($searchBox).append($resultsContainer);
$sidebarMenu.prepend($searchLi);
var api = new mw.Api();
var languageList = [];
api.get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:Languages_with_Total_Pages',
cmlimit: 'max',
format: 'json'
}).done(function(data) {
if (data.query && data.query.categorymembers) {
languageList = data.query.categorymembers.map(function(member) {
return {
title: member.title,
url: mw.util.getUrl(member.title)
};
});
}
});
$searchBox.on('keyup', function(e) {
e.stopPropagation();
var term = $(this).val().toLowerCase().trim();
$resultsContainer.empty();
if (term.length === 0) {
$resultsContainer.hide();
return;
}
var matches = languageList.filter(function(item) {
return item.title.toLowerCase().indexOf(term) !== -1;
});
if (matches.length > 0) {
matches.slice(0, 15).forEach(function(item) {
var $li = $('<li>', { style: 'padding: 6px 12px; border-bottom: 1px solid #eaeff0;' });
var $a = $('<a>', {
href: item.url,
text: item.title,
style: 'color: #1b3033; text-decoration: none; display: block;'
});
$li.append($a);
$resultsContainer.append($li);
});
$resultsContainer.show();
} else {
$resultsContainer.html('<li style="padding: 6px 12px; color: #888; font-style: italic;">No languages found</li>').show();
}
});
$(document).on('click touchstart', function(e) {
if (!$(e.target).closest('#n-language-search').length) {
$resultsContainer.hide();
}
});
}
function setupMobileDrawer() {
var $drawer = $('#mw-mf-page-left');
if (!$drawer.length) return;
// Check if desktop sidebar is already in DOM
var $desktopSidebar = $('#vector-main-menu, .vector-sidebar-container #mw-panel');
if ($desktopSidebar.length && $desktopSidebar.find('.vector-menu').length) {
cleanAndInject($drawer, $desktopSidebar.html());
return;
}
// Check sessionStorage cache
var cached = null;
try { cached = sessionStorage.getItem('vani_desktop_sidebar_html'); } catch(e) {}
if (cached) {
cleanAndInject($drawer, cached);
return;
}
// Fetch desktop Vector 2022 page to get exact sidebar markup
var fetchUrl = (window.mw && mw.util && mw.util.getUrl('Main_Page', { useskin: 'vector-2022' })) ||
'/wiki/Main_Page?useskin=vector-2022';
$.ajax({
url: fetchUrl,
type: 'GET',
dataType: 'html',
success: function(response) {
try {
var $parsed = $('<div>').append($.parseHTML(response));
var $sidebar = $parsed.find('#vector-main-menu');
if (!$sidebar.length) {
$sidebar = $parsed.find('#mw-panel, .vector-sidebar-container');
}
if ($sidebar.length) {
var html = $sidebar.html();
try { sessionStorage.setItem('vani_desktop_sidebar_html', html); } catch(e) {}
cleanAndInject($drawer, html);
}
} catch(e) {
console.warn('[VANIPEDIA] Error extracting desktop sidebar:', e);
}
}
});
}
$(document).ready(setupMobileDrawer);
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(setupMobileDrawer);
}
})();
/* ==========================================================================
PARTICIPATING LANGUAGES: INLINE SVG FLAG INJECTOR (STEP 153)
MediaWiki CSS sanitizer strips data:image from stylesheets.
Injecting pure vector SVGs directly into DOM spans ensures 100% compliance.
========================================================================== */
function initLanguageFlags() {
var flags = {
'es': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 500" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="750" height="500" fill="#c60b1e"/><rect y="125" width="750" height="250" fill="#ffc400"/></svg>',
'fr': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="300" height="600" fill="#002654"/><rect x="300" width="300" height="600" fill="#fff"/><rect x="600" width="300" height="600" fill="#ce1126"/></svg>',
'de': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="5" height="1" fill="#000"/><rect y="1" width="5" height="1" fill="#d00"/><rect y="2" width="5" height="1" fill="#ffce00"/></svg>',
'it': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="1" height="2" fill="#008c45"/><rect x="1" width="1" height="2" fill="#f4f5f0"/><rect x="2" width="1" height="2" fill="#cd212a"/></svg>',
'ru': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="9" height="2" fill="#fff"/><rect y="2" width="9" height="2" fill="#0039a6"/><rect y="4" width="9" height="2" fill="#d52b1e"/></svg>',
'in': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="900" height="200" fill="#ff9933"/><rect y="200" width="900" height="200" fill="#fff"/><rect y="400" width="900" height="200" fill="#128807"/><circle cx="450" cy="300" r="80" fill="none" stroke="#000080" stroke-width="16"/><circle cx="450" cy="300" r="20" fill="#000080"/></svg>',
'br': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 700" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="1000" height="700" fill="#009b3a"/><polygon points="500,85 915,350 500,615 85,350" fill="#fedf00"/><circle cx="500" cy="350" r="175" fill="#002776"/></svg>',
'pl': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 5" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="8" height="2.5" fill="#fff"/><rect y="2.5" width="8" height="2.5" fill="#dc143c"/></svg>',
'bd': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="10" height="6" fill="#006a4e"/><circle cx="4.5" cy="3" r="2" fill="#f42a41"/></svg>',
'cn': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="900" height="600" fill="#de2910"/><polygon points="150,50 180,140 100,85 200,85 120,140" fill="#ffde00"/></svg>',
'jp': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="900" height="600" fill="#fff"/><circle cx="450" cy="300" r="180" fill="#bc002d"/></svg>',
'nl': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="9" height="2" fill="#ae1c28"/><rect y="2" width="9" height="2" fill="#fff"/><rect y="4" width="9" height="2" fill="#21468b"/></svg>',
'hr': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="6" height="1" fill="#f00"/><rect y="1" width="6" height="1" fill="#fff"/><rect y="2" width="6" height="1" fill="#00f"/></svg>',
'cz': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="900" height="300" fill="#fff"/><rect y="300" width="900" height="300" fill="#d7141a"/><polygon points="0,0 450,300 0,600" fill="#11457e"/></svg>',
'hu': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="6" height="1" fill="#ce2939"/><rect y="1" width="6" height="1" fill="#fff"/><rect y="2" width="6" height="1" fill="#477050"/></svg>'
};
for (var code in flags) {
var elements = document.getElementsByClassName('vh-flag-' + code);
for (var i = 0; i < elements.length; i++) {
if (!elements[i].childNodes.length) {
elements[i].innerHTML = flags[code];
}
}
}
}
$(document).ready(initLanguageFlags);
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(initLanguageFlags);
}

/* V179: one viewport-contained rollout at a time, with fixed-footer clearance. */
(function initViewportPortalRollouts() {

/* V187: prepared link pools, matching the other petals' rollout sampling.
Select 20 unique entries once per browser page load from each 120-link pool.
Sources: Vaniquotes Questions asked to Srila Prabhupada; public Vanipedia
Living Devotees Remembering Srila Prabhupada (snapshot: 2026-10-27).
Question links open Vaniquotes; remembrance links use the current wiki.
No runtime API requests or persistent browser cache are needed.
*/
var hookPools = {"questions":["And after you left the college, were you employed?","And that mental process, if you are working, is it a wrong mental process?","And this is your first visit to this (Paris) center?","Aren't there coverings of the 8 elements?","As the spirit soul is leaving the body, do you become older?","Babar was also a minister of his (Akbar)?","But how can that (real process is devotion) be scientifically presented? How can we accept that scientifically?","But how can we understand all this science and technology just by understanding Krsna, just by one book?","But is it (that worship made by trees and other lower animals) voluntary or involuntary?","But the innocent souls, they're not surrendered to Krsna?","Can one assume that matter is a kind of energy?","Could you explain further, purification of the senses? You said that you had to purify your senses before you can see God","Could you give them by name, the five kinds of liberation? In English?","Did Krsna describe to Arjuna the disciplic succession?","Do you have a name that you call... are they called students?","Do you have children? You just left them?","Do you spend a certain amount of time in each center? Do you yourself travel from one center to another?","Do you want to keep the checks or give them to him (Kirtanananda)?","Does any physical change take place in your body when you become Krsna conscious?","Does our line of succession go directly to Gaurakisora dasa Babaji or to Bhaktivinoda Thakura?","Excuse me, does that mean that people from other religions may..., it is not possible for them to achieve the highest perfection?","God has not created us imperfect?","How are the boys and girls to learn these things in manners of decorum and manners from the sannyasis, for example. How are they to offer respects to their godbrothers?","How are they feeling about it (temple), the Vrndavana Gosais?","How can a spirit become so ignorant?","How do you call devotion to the Lord?","How do you know (that is a bogus)? Have you met him (Guru Maharaji)?","How do you know if you have satisfied God?","How do you know that you know? May I ask this (we have to find out, we have to find out who can give the perfect knowledge)?","How do you want India to take this movement?","How is it that when our coat, size of the coat, changes because the body grows bigger the size of the coat is bigger?","How is our movement doing in India?","How old is this man (Prakasananda Sarasvati)?","I am thinking about this, Swamiji, that your Guru Maharaja is preaching through you, and you are preaching through them?","I mean, what is the idea in \"Even if it goes slowly, it must begin\"(so let them begin the foundation… Let it go on slowly, but it must begin)?","If a person experiences difficulty attaining a level of consciousness of God, how to counteract that?","If Krsna knows that we will suffer here in this material world if we come here, why does He let us go?","If we are given charge of the society, we should dismantle all this industry, all these cities...?","In what way we will live in that spiritual form?","Initiation (of Srila Prabhupada) was held at that Gaudiya Matha in Allahabad?","Introduced starting with ISKCON community (varnasrama-dharma should be introduced all over the world)?","Is everything done in our movement for preaching? Everything that is done in our movement is done for preaching?","Is he (Syamasundara's father is very rich man)?","Is it possible through Krsna consciousness to, in the supreme state, to be able to remember all that you were?","Is it true that there are more young people now in the world that are giving more serious thought to what life is really all about?","Is that differentiated (total material elements, mahat-tattva)?","Is that part of your income, to run a...(publishing house)?","Is that perfection possible in one life (our healthy life is to enjoy eternal life... So our human life should be utilized for attaining that perfectional stage)?","Is there any possible way of a balanced combination between spiritualism and materialism?","Is your spiritual master still alive?","Isn't it inevitable that it's going to occur, that the devolution occurs inevitably without anyone's being able to change it?","It becomes a belief rather than a logic now, then, for when we think about the God. You were saying everybody has father, so why God, in exception, He hasn't got a father?","It is possible to attain that affection of love for God... without taking part in this Krsna consciousness movement?","It's not dedicated to Krsna? The work is not dedicated to Krsna. How, specifically, how can you do this?","Krsna says to perform your sva-dharma, so how does one know what is his sva-dharma?","Last night you said that what is the meaning of the word \"nothing.\" That maya means \"nothing\"?","Maybe we will show Lord Caitanya's marriage? Is that nice to show?","No doubt, but what about the daily worship? Should we have Jagannatha deities if it's not possible for worshiping them? Should we have them just for the festival?","No, most of them, they have lived, a very short times. But still is it a fact that the soul is transplanted from one body to another body?","One thing that puzzles me is if what is practical for one person is not practical for another person, then what is the criterion of truth? Is truth relative?","Prabhupada, are all living entities, always under the protection at all times of the Supreme Lord, the Personality of Godhead, at all times?","Prabhupada, what does Balabhadra mean?","Sambodhana is to remove the evil, remove the bad part isn't it?","Say someone prepares something, like some prasadam for Krsna, but he does not make it so good?","She's (Mrs.Marchand) asking that since in these Western countries the families are so broken up and the women sometimes cannot find a qualified husband, what should she do?","So is that a fact, that he (Jesus Christ) went to India?","So then to love Krsna is unnatural?","So they're representatives (Guru Nanak, Muhammad, and other people)?","So why not eat, drink, and be merry because tomorrow you die?","Sometimes the question is put before us: \"You ask us not to eat meat, but you are eating vegetables. Do you think that is not violence?\"","Spiritual master is the mercy of God?","Srila Prabhupada, is the subtle bodies in the subtle world, are they made up of subtle atoms?","Srila Prabhupada, there was a fish on Laksmi's hand yesterday. The Deity in the temple, where Laksmi had her hand up like this, there was a fish here across her hand. What is this?","Swami, what do you think accounts for the..., your popularity, popularity of the..., the Krsna consciousness movement sweeping America?","Swamiji, so the government, the present government in the world...?","Swamiji? Are there people living on the moon now or were they in other yugas living there?","That desire is simple (he does not desire. He desires, and the matter helps. In the material world)?","That doesn't mean (in the spiritual world, it is full of variegatedness) that it is complex, Srila Prabhupada, yes?","That later-on Ramayana has caused some havoc... That later-on interpretation?","The body is matter, but still it is conscious as long as I am alive. So that means the life is consciousness?","The karmi and the jnani are both within the material world. Is the jnani considered more elevated than the karmi?","The literal meaning of sutra is a condensed statement, Prabhupada?","The school in Vrndavana, is this, I assume this is to be out there in the yard that they were clearing. When do you anticipate that will be built?","The shaved head, he's asking?","There are two, two functions in the tongue, one is (indistinct) and one is (indistinct)? So which one (indistinct). Preaching is a form of tapasya?","These days there are so many men who claim to have found the Absolute, who claim to be spiritual masters in their own way. How does one tell who is a bona fide spiritual master?","They have so many people in boxes in the hospitals they are keeping alive. So the big battle is raging whether or not they should pull out the plug?","They say, \"Then my chanting is useless? So I should stop?\" That's what they say","This would be the prescription for all people?","Today there's a little swelling in your... It seems to come and go… It seems to come and go. Is it bothering you?… Is it disturbing?... Really?","Upendra is here now. Should we give him the kismis to make?","We have a display over here in the window of your books, Srila Prabhupada... Would you like to see?","We have a spiritual body to serve Krsna?","Well, then, how is the individual soul eternal if it has a beginning?","Were some of the animals destined to survive through the destruction of other animals?","Were they liberated souls? The thief?","Were you just waiting to finish your books?","What about the poor, hungry, and the suffering bodies?","What does it (Gandharvapur) mean?","What happens to his consciousness which he has achieved as a man during that time which he is in the animal kingdom?","What happens to them (the devotees)?","What is an example of the throwing potency of maya?","What is good and what is bad, what is sinful activity?","What is the position of a soul that's in a sacred tree like a fig tree?","What is the purpose? What is the sense, if there is any, or does the very question (Why anything exists?) make sense?","What was that story of Caesar (scissors)?","What will the business of the trustees (for construction of Bombay) be?","Who are we, why are we here and where are we going?","Why is it seen that they (impersonalists) are making spiritual advancement?","Why is that better than loving your fellow man in the traditional bhakti-marga?","Why was it (Hindu-Muslim unity) the programs failed?","Why would someone who is not Krsna conscious have one hundred children? For example, why would someone like Dhrtarastra, who is not particularly Krsna conscious...?","Would, say, the cutting down of a plant, vegetable.... You are killing the growth there. Is that a living matter?","You conclude that when you become enlightened, you will see the God in form of human nature?","You don't think the patients have any mind of their own?","You have inquired about how we leave our body and enter into the Spiritual Sky?","You think we can't help people?","You were very well known in Vrndavana before you came? Because you were writing or…?… Or because of your ambition to come to the West?","You're feeling a little stronger today, Srila Prabhupada?","Your Divine Grace, since religion is one, do you think man will enter into a golden age in which he will accept one God?"],"memories":["Abhirama das Remembers Srila Prabhupada","Adideva das Remembers Srila Prabhupada","Aditi devi dasi Remembers Srila Prabhupada","Amarendra das Remembers Srila Prabhupada","Anada devi dasi Remembers Srila Prabhupada","Anandamaya das Remembers Srila Prabhupada","Anuttama das Remembers Srila Prabhupada","Arjuna das Remembers Srila Prabhupada","Armarendra das Remembers Srila Prabhupada","Atreya Rsi das Remembers Srila Prabhupada","Bala Gopal devi dasi Remembers Srila Prabhupada","Balai devi dasi Remembers Srila Prabhupada","Batu Gopal das Remembers Srila Prabhupada","Bhakta das Remembers Srila Prabhupada","Bhakti Gauravani Goswami Remembers Srila Prabhupada","Bhavatarini devi dasi Remembers Srila Prabhupada","Bhima das Remembers Srila Prabhupada","Bhurijana das Remembers Srila Prabhupada","Brahmatirtha das Remembers Srila Prabhupada","Brajendranandana das Remembers Srila Prabhupada","Candramauli Swami Remembers Srila Prabhupada","Chaitanyachandra das Remembers Srila Prabhupada","Chitralekha devi dasi Remembers Srila Prabhupada","Dadhi-harta das Remembers Srila Prabhupada","Dayanidhi das Remembers Srila Prabhupada","Dhananjaya das Remembers Srila Prabhupada","Dharmatma das Remembers Srila Prabhupada","Dhristadyumna das Remembers Srila Prabhupada","Dhruva Maharaja das Remembers Srila Prabhupada","Dina Bandhu das Remembers Srila Prabhupada","Dinatarine devi dasi Remembers Srila Prabhupada","Dravinaksha das Remembers Srila Prabhupada","Drumila das Remembers Srila Prabhupada","Gadi das Remembers Srila Prabhupada","Gaura das Remembers Srila Prabhupada","Gokulananda das Remembers Srila Prabhupada","Gokularanajana das Remembers Srila Prabhupada","Gopinath Acharya das Remembers Srila Prabhupada","Guru Gauranga das Remembers Srila Prabhupada","Guruprasad das Remembers Srila Prabhupada","Haravapuh das Remembers Srila Prabhupada","Harikesa das Remembers Srila Prabhupada","Jagadisa das Remembers Srila Prabhupada","Jagat Guru Swami Remembers Srila Prabhupada","Jagat Purusa das Remembers Srila Prabhupada","Jahnava devi dasi Remembers Srila Prabhupada","Janaki devi dasi 01 Remembers Srila Prabhupada","Janaki devi dasi Remembers Srila Prabhupada 02","Janananda Swami Remembers Srila Prabhupada","Jaya Jagadish das Remembers Srila Prabhupada","Jivananda das Remembers Srila Prabhupada","Jyestha devi dasi Remembers Srila Prabhupada","Kamalini devi dasi Remembers Srila Prabhupada","Kanti devi dasi Remembers Srila Prabhupada","Karanodakasayi Visnu das Remembers Srila Prabhupada","Kaushalya devi dasi Remembers Srila Prabhupada","Kedara das Remembers Srila Prabhupada","Kesava Bharati Goswami Remembers Srila Prabhupada","Ksudi das Remembers Srila Prabhupada","Kulashekhara das Remembers Srila Prabhupada","Madan Mohan Mohini devi dasi Remembers Srila Prabhupada","Madhava Gosh das Remembers Srila Prabhupada","Maha devi dasi Remembers Srila Prabhupada","Mahakratu das Remembers Srila Prabhupada","Mahamaya devi dasi Remembers Srila Prabhupada","Mahatma das Remembers Srila Prabhupada","Mandapa das Remembers Srila Prabhupada","Mishra Bhagavan das Remembers Srila Prabhupada","Mohan Gopal das Remembers Srila Prabhupada","Mondakini devi dasi Remembers Srila Prabhupada","Nanda devi dasi Remembers Srila Prabhupada","Narahari 02 das Remembers Srila Prabhupada","Nayanabhiram das Remembers Srila Prabhupada","Niranjan das Remembers Srila Prabhupada","Nischintya das Remembers Srila Prabhupada","Pancadravida Swami Remembers Srila Prabhupada","Pavamana das Remembers Srila Prabhupada","Prabhavishnu Swami Remembers Srila Prabhupada","Prafulla devi dasi Remembers Srila Prabhupada","Pragosh das Remembers Srila Prabhupada","Prakashatma das Remembers Srila Prabhupada","Pratapana das Remembers Srila Prabhupada","Radha Krsna das Remembers Srila Prabhupada","Radha Kunda devi dasi Remembers Srila Prabhupada","Radhanatha Swami Remembers Srila Prabhupada","Rajashekar das Remembers Srila Prabhupada","Rambhoru devi dasi Remembers Srila Prabhupada","Ramprasad das Remembers Srila Prabhupada","Ranganath das Remembers Srila Prabhupada","Rangavati devi dasi Remembers Srila Prabhupada","Rucira devi dasi Remembers Srila Prabhupada","Sacinandana Swami Remembers Srila Prabhupada","Sahadevi devi dasi Remembers Srila Prabhupada","Sandamini devi dasi Remembers Srila Prabhupada","Sankarshan das Remembers Srila Prabhupada","Sarupananda das Remembers Srila Prabhupada","Satarupa devi dasi Remembers Srila Prabhupada","Satsvarupa das Goswami Remembers Srila Prabhupada","Satyanarayana das Remembers Srila Prabhupada","Sivananda das Remembers Srila Prabhupada","Sivarama Swami Remembers Srila Prabhupada","Sriniketana das Remembers Srila Prabhupada","Srutadev das Remembers Srila Prabhupada","Suddha Jiva das Remembers Srila Prabhupada","Sukhada devi dasi Remembers Srila Prabhupada","Surabhi das Remembers Srila Prabhupada","Suresvara das Remembers Srila Prabhupada","Susan Witty Remembers Srila Prabhupada","Tamohara das Remembers Srila Prabhupada","Tattvavit das Remembers Srila Prabhupada","Tota Gopinatha das Remembers Srila Prabhupada","Vaishesika das Remembers Srila Prabhupada","Vedamata devi dasi Remembers Srila Prabhupada","Vedavyas das Remembers Srila Prabhupada","Visakha devi dasi Remembers Srila Prabhupada","Vishvadevi devi dasi Remembers Srila Prabhupada","Vrindavan das Remembers Srila Prabhupada","Vrndavenesvari devi dasi Remembers Srila Prabhupada","Yadubara das Remembers Srila Prabhupada","Yogindra Vandana das Remembers Srila Prabhupada"]};
var hookSelections = Object.create(null);

function shuffleHooks(items) {
var copy = items.slice();
for (var i = copy.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var value = copy[i]; copy[i] = copy[j]; copy[j] = value;
}
return copy;
}
function getHookSelection(key) {
if (!Object.prototype.hasOwnProperty.call(hookSelections, key)) {
hookSelections[key] = shuffleHooks(hookPools[key] || []).slice(0, 20);
}
return hookSelections[key];
}
function populateHookLists(root) {
['questions', 'memories'].forEach(function (key) {
var card = root.querySelector('.vp-portal-card[data-vp-rollout="' + key + '"]');
var panel = card && card.querySelector('.vp-rollout-panel');
if (!panel || panel.dataset.vpHooksReady === '1') return;
var fragment = document.createDocumentFragment();
var heading = document.createElement('span');
heading.className = 'vp-rollout-heading';
heading.textContent = key === 'questions' ? 'Questions and Answers' : 'Disciples Remember';
fragment.appendChild(heading);
var list = document.createElement('span');
list.className = 'vp-rollout-options';
function addLink(title, label) {
var row = document.createElement('span');
var link = document.createElement('a');
var host = key === 'questions' ? 'https://vaniquotes.org' : '';
link.href = host + '/wiki/' + encodeURIComponent(title.replace(/ /g, '_'));
link.textContent = label;
link.title = title;
if (key === 'questions') {
link.target = '_blank';
link.rel = 'noopener noreferrer';
}
row.appendChild(link);
list.appendChild(row);
}
if (key === 'questions') {
addLink('Category:Questions asked to Srila Prabhupada', 'Browse all questions');
} else {
addLink('Category:Living Devotees Remembering Srila Prabhupada', 'Browse all remembrances');
}
getHookSelection(key).forEach(function (title) {
var label = key === 'memories' ? title.replace(/ Remembers Srila Prabhupada$/, '') : title;
addLink(title, label);
});
fragment.appendChild(list);
// Keep the original panel node and its existing hover/mobile behavior.
panel.innerHTML = '';
panel.appendChild(fragment);
panel.dataset.vpHooksReady = '1';
});
}

/* V189: put the full index first in every other card's rollout too. */
function putBrowseAllFirst(root) {
var indexes = [
{ key:'articles', existing:'.vp-article-all', title:'Category:Vanipedia Gemini - Articles', label:'Browse all articles A–Z' },
{ key:'media', existing:'.vp-media-all', title:'Category:Srila Prabhupada in the Media', label:'Browse all media' },
{ key:'timeline', title:"Timeline of Srila Prabhupada's Life", label:'Browse the full timeline' },
{ key:'languages', title:'Category:Participating Languages - Main Pages', label:'Browse all languages' }
];
indexes.forEach(function (index) {
var card = root.querySelector('.vp-portal-card[data-vp-rollout="' + index.key + '"]');
var panel = card && card.querySelector('.vp-rollout-panel');
if (!panel || panel.querySelector('.vp-browse-all')) return;
var row = index.existing && panel.querySelector(index.existing);
if (!row) {
row = document.createElement('span');
var link = document.createElement('a');
link.href = '/wiki/' + encodeURIComponent(index.title.replace(/ /g, '_'));
link.textContent = index.label;
row.appendChild(link);
}
row.classList.add('vp-browse-all');
row.style.display = 'block';
row.style.margin = '0 0 8px';
var heading = panel.querySelector('.vp-rollout-heading');
panel.insertBefore(row, heading ? heading.nextSibling : panel.firstChild);
});
}
function init() {
var root = document.querySelector("body.page-Main_Page #vani-home.vp-static-home");
if (!root) return;
populateHookLists(root);
putBrowseAllFirst(root);
if (root.dataset.vpRolloutsReady === "1") return;
root.dataset.vpRolloutsReady = "1";
var cards = Array.prototype.slice.call(root.querySelectorAll(".vp-portal-card[data-vp-rollout]"));
var mobile = function () {
return window.matchMedia && window.matchMedia("(max-width:700px), (hover:none), (pointer:coarse)").matches;
};
function setExpanded(card, expanded) {
var toggle = card.querySelector(".vp-rollout-toggle");
if (toggle) toggle.setAttribute("aria-expanded", expanded ? "true" : "false");
}
function close(card) {
card.classList.remove("is-open", "is-hover-open");
var panel = card.querySelector(".vp-rollout-panel");
if (panel) {
panel.classList.remove("is-viewport-panel");
panel.style.removeProperty("--vp-panel-top");
panel.style.removeProperty("--vp-panel-left");
panel.style.removeProperty("--vp-panel-width");
if (panel.dataset.vpHooksReady === '1') {
panel.style.removeProperty('max-height');
panel.style.removeProperty('overflow-y');
}
}
setExpanded(card, false);
}
function closeOthers(keep) {
cards.forEach(function (card) { if (card !== keep) close(card); });
}
// V188: keep long random lists attached to the browse control and scroll inside them.
function positionRandomHookPanel(card, panel) {
var key = card.getAttribute('data-vp-rollout');
if (key !== 'questions' && key !== 'memories') return false;
var toggle = card.querySelector('.vp-rollout-toggle');
if (!toggle) return false;
var control = toggle.getBoundingClientRect();
var cardBox = card.getBoundingClientRect();
var header = document.querySelector('header.vector-header, header.mw-header');
var footer = document.getElementById('vh-bottom-bar');
var topLimit = 12;
var bottomLimit = window.innerHeight - 76;
if (header) {
var headerBox = header.getBoundingClientRect();
if (headerBox.top < window.innerHeight && headerBox.bottom > 0) {
topLimit = Math.max(topLimit, headerBox.bottom + 8);
}
}
if (footer) {
var footerBox = footer.getBoundingClientRect();
if (footerBox.top > topLimit && footerBox.top < window.innerHeight) {
bottomLimit = footerBox.top - 8;
}
}
var below = Math.max(0, bottomLimit - control.bottom);
var above = Math.max(0, control.top - topLimit);
var openBelow = below >= 120 || below >= above;
var room = openBelow ? below : above;
var height = Math.min(420, room);
var width = Math.min(panel.getBoundingClientRect().width || 290, window.innerWidth - 24);
var left = Math.max(12, Math.min(cardBox.left, window.innerWidth - width - 12));
panel.style.setProperty('max-height', height + 'px', 'important');
panel.style.setProperty('overflow-y', 'auto', 'important');
var actualHeight = Math.min(panel.getBoundingClientRect().height, height);
var top = openBelow ? control.bottom : control.top - actualHeight;
top = Math.max(topLimit, Math.min(top, bottomLimit - actualHeight));
panel.style.setProperty('--vp-panel-width', width + 'px');
panel.style.setProperty('--vp-panel-left', left + 'px');
panel.style.setProperty('--vp-panel-top', top + 'px');
return true;
}
function place(card) {
var panel = card.querySelector(".vp-rollout-panel");
if (!panel || mobile() || (!card.classList.contains("is-open") && !card.classList.contains("is-hover-open"))) return;
panel.classList.add("is-viewport-panel");
if (positionRandomHookPanel(card, panel)) return;
var anchor = card.getBoundingClientRect();
var width = Math.min(panel.getBoundingClientRect().width || 290, window.innerWidth - 24);
var height = panel.getBoundingClientRect().height || 280;
var topLimit = 12;
var bottomLimit = window.innerHeight - 76;
var side = card.getAttribute("data-vp-rollout-side");
var left;
var top;
if (side === "left" || side === "right") {
var preferredLeft = side === "left" ? anchor.left - width : anchor.right;
left = Math.max(12, Math.min(preferredLeft, window.innerWidth - width - 12));
top = Math.max(topLimit, Math.min(anchor.top, bottomLimit - height));
} else {
left = Math.max(12, Math.min(anchor.left, window.innerWidth - width - 12));
var below = bottomLimit - anchor.bottom;
var above = anchor.top - topLimit;
if (height <= below) top = anchor.bottom;
else if (height <= above) top = anchor.top - height;
else top = Math.max(topLimit, Math.min(anchor.bottom, bottomLimit - height));
}
panel.style.setProperty("--vp-panel-width", width + "px");
panel.style.setProperty("--vp-panel-left", left + "px");
panel.style.setProperty("--vp-panel-top", top + "px");
}
function open(card, mode) {
closeOthers(card);
card.classList.toggle("is-hover-open", mode === "hover");
card.classList.toggle("is-open", mode === "pinned");
setExpanded(card, true);
window.requestAnimationFrame(function () { place(card); });
}
cards.forEach(function (card) {
if (card.dataset.vpRolloutReady === "1") return;
card.dataset.vpRolloutReady = "1";
var toggle = card.querySelector(".vp-rollout-toggle");
if (!toggle) return;
card.addEventListener("pointerdown", function (event) {
card.dataset.pointerTriggeredFocus = event.pointerType || "pointer";
window.setTimeout(function () { delete card.dataset.pointerTriggeredFocus; }, 0);
});
card.addEventListener("pointerenter", function (event) {
if (event.pointerType === "mouse" && !mobile() && !card.classList.contains("is-open")) open(card, "hover");
});
card.addEventListener("pointerleave", function (event) {
if (card.contains(event.relatedTarget)) return;
if (card.classList.contains("is-open") || card.contains(document.activeElement)) return;
close(card);
});
card.addEventListener("focusin", function () {
if (!card.classList.contains("is-open")) open(card, "hover");
});
card.addEventListener("focusout", function () {
window.setTimeout(function () {
if (!card.contains(document.activeElement) && !card.matches(":hover")) close(card);
}, 0);
});
toggle.addEventListener("click", function (event) {
event.preventDefault();
var wasPinned = card.classList.contains("is-open");
if (wasPinned) close(card);
else open(card, "pinned");
});
toggle.addEventListener("keydown", function (event) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
if (card.classList.contains("is-open")) close(card);
else open(card, "pinned");
} else if (event.key === "Escape") {
close(card);
toggle.blur();
}
});
});
document.addEventListener("pointerdown", function (event) {
if (root.contains(event.target)) return;
cards.forEach(close);
});
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") cards.forEach(close);
});
function repositionOpen() {
cards.forEach(function (card) {
if (card.classList.contains("is-open") || card.classList.contains("is-hover-open")) place(card);
});
}
window.addEventListener("resize", repositionOpen, { passive: true });
window.addEventListener("scroll", repositionOpen, { passive: true, capture: true });
}
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);
else init();
if (window.mw && mw.hook) mw.hook("wikipage.content").add(init);
})();

/* V182: restore original desktop Vanipedia top-bar branding and sister-petal links. */
/* ==========================================================
/* ==========================================================
/* ==========================================================
/* ==========================================================
/* ==========================================================
VANIPEDIA TOP BAR CONTROLLER (Step 172: Guaranteed Vanipedia Title & Icons on Mobile)
========================================================== */
(function() {
var titleText = "VANIPEDIA - ŚRĪLA PRABHUPĀDA'S VANI-TEMPLE";
var targetUrl = "https://vanipedia.org";
function removeGlobalSiteNotice() {
$('#siteNotice, #localNotice, .vector-sitenotice-container, #mainbanner, .sitenotice, .mw-sitenotice, .anonnotice, .dismissable-notice, #centralNotice').remove();
}
function createHomeLink() {
var homeSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>';
return $('<a>', {
id: 'vanipedia-topbar-home-link',
href: '/',
title: 'Vanipedia Home / Entry Portal',
'aria-label': 'Home',
class: 'vanipedia-topbar-home'
}).html('<span class="vanipedia-home-icon">' + homeSvg + '</span><span class="vanipedia-home-text">Home</span>');
}
function createCenterBlock() {
var blockStyle = 'position:absolute !important; left:50% !important; top:54% !important; transform:translate(-50%, -50%) !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; white-space:nowrap !important; z-index:10 !important; pointer-events:auto !important;';
var titleStyle = 'position:static !important; transform:none !important; display:block !important; font-family:"Cinzel", Georgia, serif !important; font-size:18px !important; font-weight:700 !important; letter-spacing:2px !important; color:#f5d77f !important; text-decoration:none !important; text-shadow:0 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(245,215,127,0.3) !important; line-height:1.25 !important; margin:0 0 4px 0 !important; padding:0 !important; user-select:text !important;';
var vanisevaWrapStyle = 'position:static !important; transform:none !important; display:block !important; margin:0 0 4px 0 !important; line-height:1.2 !important;';
var vanisevaLinkStyle = 'color:#f5d77f !important; font-family:"Noto Serif", Georgia, serif !important; font-size:12.5px !important; font-style:normal !important; font-weight:500 !important; letter-spacing:0.35px !important; text-decoration:none !important; border:0 !important; background:none !important; outline:none !important; padding:0 !important; border-radius:0 !important; cursor:pointer !important; display:inline-block !important; transition:all 0.18s ease !important;box-shadow:none !important;';
var sisterWrapStyle = 'position:static !important; transform:none !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:14px !important; margin:0 !important; line-height:1.2 !important;';
var sisterLinkStyle = 'color:#f5d77f !important; font-family:"Noto Serif", Georgia, serif !important; font-size:13px !important; font-weight:600 !important; letter-spacing:0.4px !important; text-decoration:none !important; border:none !important; border-bottom:none !important; outline:none !important; padding:2px 8px !important; border-radius:3px !important; display:inline-flex !important; align-items:center !important; cursor:pointer !important; transition:all 0.18s ease !important;';
var sepStyle = 'color:rgba(245,215,127,0.4) !important; font-size:11px !important; line-height:1 !important; user-select:none !important;';
var $block = $('<div>', {
id: 'vanipedia-topbar-center-block',
class: 'vanipedia-topbar-center-block',
style: blockStyle
});
var $title = $('<div>', {
id: 'vanipedia-topbar-title',
class: 'vanipedia-topbar-main-title',
style: titleStyle,
text: titleText
});
var $vaniseva = $('<div>', {
class: 'vanipedia-topbar-vaniseva-title',
style: vanisevaWrapStyle
}).html('<a href="https://vaniseva.org" target="_blank" rel="noopener noreferrer" title="Vaniseva" style="' + vanisevaLinkStyle + '">Collaborate with us to invoke and fully manifest Śrīla Prabhupāda's Vani-presence</a>');
var $sisterLinks = $('<div>', {
class: 'vanipedia-topbar-sister-links',
style: sisterWrapStyle
}).html(
'<a href="https://vanisource.org" target="_blank" rel="noopener noreferrer" class="vanipedia-topbar-sister-link" title="Vanisource" style="' + sisterLinkStyle + '">vanisource.org</a>' +
'<span class="vanipedia-topbar-sister-sep" aria-hidden="true" style="' + sepStyle + '">•</span>' +
'<a href="https://vaniquotes.org" target="_blank" rel="noopener noreferrer" class="vanipedia-topbar-sister-link" title="Vaniquotes" style="' + sisterLinkStyle + '">vaniquotes.org</a>' +
'<span class="vanipedia-topbar-sister-sep" aria-hidden="true" style="' + sepStyle + '">•</span>' +
'<a href="https://vanimedia.org" target="_blank" rel="noopener noreferrer" class="vanipedia-topbar-sister-link" title="Vanimedia" style="' + sisterLinkStyle + '">vanimedia.org</a>'
);
$block.append($title, $vaniseva, $sisterLinks);
return $block;
}
function updateTopBar() {
removeGlobalSiteNotice();
$('#vanipedia-topbar-center-block, #vanipedia-topbar-center-block-mobile, #vanipedia-topbar-title, #vanipedia-topbar-title-mobile, #vanipedia-topbar-title-link, #vanipedia-topbar-center-title, #vanipedia-topbar-home-link, #vanipedia-topbar-sister-links, #vanipedia-topbar-sister-links-mobile, .vanipedia-topbar-sister-links, .vanipedia-topbar-center-block').remove();
$('.vector-header-container').css({
'background': 'transparent',
'background-color': 'transparent',
'border': 'none',
'box-shadow': 'none',
'padding': '0',
'margin': '0',
'min-height': '0',
'height': 'auto',
'width': '100%',
'max-width': '100%'
});
var isMobile = (window.innerWidth <= 999) || $('body').hasClass('skin-minerva') || $('body').hasClass('skin-vector-mobile') || $('.minerva-header').length > 0;
var $header = $('header.mw-header, header.vector-header').not('.minerva-header').first();
if (!$header.length && !$('body').hasClass('skin-minerva') && !$('.minerva-header').length) {
$header = $('#mw-head, header').not('.minerva-header').filter(':visible').first();
}
if ($header.length) {
$header.css({
'min-height': isMobile ? '52px' : '86px',
'height': isMobile ? '52px' : 'auto',
'max-height': isMobile ? '52px' : 'none',
'padding': isMobile ? '0 10px' : '10px 24px',
'background-color': '#345B63',
'border-bottom': '2px solid #b1873d',
'box-shadow': '0 4px 18px rgba(0,0,0,0.35)',
'position': 'relative',
'display': 'flex',
'flex-wrap': 'nowrap',
'align-items': 'center',
'justify-content': 'space-between',
'box-sizing': 'border-box',
'width': '100%',
'max-width': '100%'
});
if (!isMobile) {
$header.append(createCenterBlock());
}
var $search = $header.find('.vector-header-start #p-search, #p-search');
if ($search.length) {
$search.after(createHomeLink());
} else if ($header.find('.vector-header-start').length) {
$header.find('.vector-header-start').append(createHomeLink());
}
}
var $minervaHeader = $('.minerva-header');
if ($minervaHeader.length) {
// 1. Ensure "Vanipedia" Title Link exists with text in the branding box
var $branding = $minervaHeader.find('.branding-box');
if ($branding.length) {
var $brandLink = $branding.find('a');
if ($brandLink.length) {
if (!$brandLink.text().trim()) {
$brandLink.html('<span>Vanipedia</span>');
}
} else {
$branding.html('<a href="/wiki/Main_Page"><span>Vanipedia</span></a>');
}
} else {
var brandHtml = '<div class="branding-box"><a href="/wiki/Main_Page"><span>Vanipedia</span></a></div>';
var $burger = $minervaHeader.find('#mw-mf-main-menu-button, .navigation-drawer.toggle-list').first();
if ($burger.length) {
$burger.after(brandHtml);
} else {
$minervaHeader.prepend(brandHtml);
}
}
// 2. Ensure Home Link is inserted cleanly
var $minervaForm = $minervaHeader.find('.minerva-search-form, #searchform').first();
if ($minervaForm.length && !$minervaHeader.find('#vanipedia-topbar-home-link').length) {
$minervaForm.before(createHomeLink());
} else if (!$minervaHeader.find('#vanipedia-topbar-home-link').length) {
var $minervaUser = $minervaHeader.find('.minerva-user-navigation, #ca-mytalks').first();
if ($minervaUser.length) {
$minervaUser.before(createHomeLink());
} else {
$minervaHeader.append(createHomeLink());
}
}
$minervaHeader.css({
'flex-wrap': 'nowrap',
'height': '52px',
'min-height': '52px',
'max-height': '52px',
'padding': '0 10px',
'display': 'flex',
'align-items': 'center',
'justify-content': 'space-between',
'box-sizing': 'border-box'
});
}
var $stageHeader = $('#vani-stage-header-slot');
if ($stageHeader.length && !$stageHeader.find('.vanipedia-topbar-center-block').length) {
var $stageSearch = $stageHeader.find('#p-search, .search-box, .minerva-search-form').first();
if ($stageSearch.length && !$stageHeader.find('#vanipedia-topbar-home-link').length) {
$stageSearch.after(createHomeLink());
}
if (!isMobile) {
$stageHeader.append(createCenterBlock());
}
}
var $stickyTitle = $('#vector-sticky-header .vector-sticky-header-title, #vector-sticky-header .vector-sticky-header-context-bar .mw-headline');
if ($stickyTitle.length) {
$stickyTitle.html('<a href="' + targetUrl + '" style="color: inherit; text-decoration: none;">' + titleText + '</a>');
}
}
$(function() {
removeGlobalSiteNotice();
});
var topbarResizeTimer;
var lastVanipediaTopWidth = window.innerWidth;
$(window).on('resize orientationchange', function() {
if (Math.abs(window.innerWidth - lastVanipediaTopWidth) < 10) return;
lastVanipediaTopWidth = window.innerWidth;
clearTimeout(topbarResizeTimer);
topbarResizeTimer = setTimeout(updateTopBar, 150);
});
$(document).ready(updateTopBar);
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(updateTopBar);
}
})();
// ==========================================================================
/* 2026-11-11 (Vamshi Krishna): keep the header and footer from overlapping at in-between widths.
- Header: the centre block (site title, Vaniseva line, petal links) is hidden only when it would
actually run over the search box, Home link or the user links.
- Footer: on wide screens the social icons are hidden when they would cover Donate, and the links
are centred. On narrow screens the right edge of the links fades while more are off-screen.
The skin sets these styles inline with !important (and re-applies the footer layout on every resize), so
this runs after it, and Common.css cannot override them. */
(function () {
function leaves(el) {
var out = [];
el.querySelectorAll('*').forEach(function (e) {
if (!e.children.length) {
var r = e.getBoundingClientRect();
if (r.width && r.height) out.push(r);
}
});
return out;
}
function clash(a, b) {
for (var x = 0; x < a.length; x++) {
for (var y = 0; y < b.length; y++) {
var r = a[x], s = b[y];
if (Math.min(r.right, s.right) - Math.max(r.left, s.left) > 0 &&
Math.min(r.bottom, s.bottom) - Math.max(r.top, s.top) > 2) return true;
}
}
return false;
}
function fixMidWidths() {
var w = window.innerWidth;
var header = document.querySelector('header.vector-header, header.mw-header');
document.querySelectorAll('.vanipedia-topbar-center-block').forEach(function (b) {
b.style.setProperty('display', 'flex', 'important');
if (w < 1000 || !header) return;
var theirs = [];
header.querySelectorAll('#p-search, #vanipedia-topbar-home-link, .vector-header-end').forEach(function (e) {
if (!b.contains(e)) theirs = theirs.concat(leaves(e));
});
if (clash(leaves(b), theirs)) b.style.setProperty('display', 'none', 'important');
});

var bar = document.getElementById('vh-bottom-bar');
if (!bar) return;
var left = bar.querySelector('.vh-bottom-bar-left-space');
var right = bar.querySelector('.vh-bottom-bar-right-space');
var inner = bar.querySelector('.vh-bottom-bar-inner');
var nav = bar.querySelector('.vh-bottom-nav-links');
var social = bar.querySelector('.vh-bottom-social-links');
if (!left || !right || !inner || !nav || !social) return;
// The icons measure 0 px until their images load, so check again once they have.
bar.querySelectorAll('img').forEach(function (img) {
if (!img.complete && !img.dataset.fixBound) {
img.dataset.fixBound = '1';
img.addEventListener('load', schedule);
}
});
if (w >= 1000) {
// The footer is kept between resizes here, so clear a fade left over from a narrow window.
nav.style.removeProperty('-webkit-mask-image');
nav.style.removeProperty('mask-image');
var nr = nav.getBoundingClientRect(), sr = social.getBoundingClientRect();
if (sr.width && (nr.right + 8 > sr.left || sr.right > w)) {
left.style.setProperty('display', 'none', 'important');
right.style.setProperty('display', 'none', 'important');
inner.style.setProperty('justify-content', 'center', 'important');
}
return;
}
var updateFade = function () {
var more = nav.scrollLeft + nav.clientWidth < nav.scrollWidth - 2;
var mask = more ? 'linear-gradient(to right, #000 calc(100% - 40px), transparent)' : 'none';
nav.style.setProperty('-webkit-mask-image', mask, 'important');
nav.style.setProperty('mask-image', mask, 'important');
};
updateFade();
if (!nav.dataset.fadeBound) {
nav.dataset.fadeBound = '1';
nav.addEventListener('scroll', updateFade, { passive: true });
}
}
var pending;
// Run after the skin's own header and footer setup (which re-runs on resize and 150 ms after it).
function schedule() { clearTimeout(pending); pending = setTimeout(fixMidWidths, 300); }
$(schedule);
$(window).on('resize orientationchange', schedule);
// This script often starts after the page has loaded, so also re-check when the fonts are ready.
if (document.fonts && document.fonts.ready) document.fonts.ready.then(schedule);
})();

/* VaniSearch Popup Launcher + Desktop Burger Restore */
(function() {
var lockPopupSubmitUntil = 0;

function ensureBurgerMenu() {
var nodes = document.querySelectorAll('.vector-feature-main-menu-pinned-enabled, .vector-feature-main-menu-pinned-clientpref-1');
for (var i = 0; i < nodes.length; i++) {
nodes[i].classList.remove('vector-feature-main-menu-pinned-enabled', 'vector-feature-main-menu-pinned-clientpref-1');
nodes[i].classList.add('vector-feature-main-menu-pinned-disabled', 'vector-feature-main-menu-pinned-clientpref-0');
}

var dropdown = document.getElementById('vector-main-menu-dropdown');
var header = document.querySelector('header.vector-header, header.mw-header');
var start = header ? header.querySelector('.vector-header-start') : document.querySelector('.vector-header-start');

if (dropdown && start && dropdown.parentNode !== start) {
start.insertBefore(dropdown, start.firstChild);
}

var menu = document.getElementById('vector-main-menu');
var unpinned = document.getElementById('vector-main-menu-unpinned-container') ||
(dropdown ? dropdown.querySelector('.vector-dropdown-content') : null);
if (menu && unpinned) {
menu.classList.remove('vanipedia-sidebar-menu', 'vanipedia-collapsed');
if (!unpinned.contains(menu)) {
unpinned.appendChild(menu);
}
}
}

window.open_modal = function() {
var ori = document.getElementById('ori_search') || document.getElementById('searchInput');
var modal = document.getElementById('mspu_div_wrapper');
var inpSearch = document.getElementById('mspu_txt_input');
var submitBtn = document.getElementById('mspu_but_submit');

if (!modal || !inpSearch) return false;

lockPopupSubmitUntil = Date.now() + 500;

if (submitBtn) {
submitBtn.disabled = true;
setTimeout(function() { submitBtn.disabled = false; }, 500);
}

if (typeof window.sync_but_search === 'function') {
try { window.sync_but_search(); } catch (e) {}
}

if (ori) {
inpSearch.value = ori.value;
ori.blur();
}

modal.style.display = 'block';

setTimeout(function() {
inpSearch.focus();
}, 250);

return false;
};

function protectModalForm() {
var modal = document.getElementById('mspu_div_wrapper');
if (!modal || modal.dataset.vaniHardLocked) return;
modal.dataset.vaniHardLocked = 'true';

var strayBtns = modal.querySelectorAll('.vani-search-trigger-btn');
for (var i = 0; i < strayBtns.length; i++) {
if (strayBtns[i].parentNode) strayBtns[i].parentNode.removeChild(strayBtns[i]);
}

var mForm = modal.querySelector('form');
if (mForm) {
mForm.addEventListener('submit', function(e) {
if (Date.now() < lockPopupSubmitUntil) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}, true);
}

var inpSearch = document.getElementById('mspu_txt_input');
if (inpSearch) {
['keydown', 'keypress', 'keyup'].forEach(function(evt) {
inpSearch.addEventListener(evt, function(e) {
if (Date.now() < lockPopupSubmitUntil && (e.key === 'Enter' || e.keyCode === 13)) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}, true);
});
}
}

function buildCleanSearchBox(oldElement, isMobile) {
var wrap = document.createElement('div');
wrap.className = isMobile ? 'vani-mobile-search-wrap' : 'vani-desktop-search-wrap';
wrap.style.cssText = 'flex: 1 1 auto; width: 100%; max-width: 280px; display: flex !important; align-items: center !important; position: relative !important; margin: 0; z-index: 999999 !important;';

var inp = document.createElement('input');
inp.type = 'text';
inp.id = 'ori_search';
inp.className = 'vani-clean-search-input';
inp.placeholder = 'Search Vanipedia';
inp.autocomplete = 'off';
inp.style.cssText = 'width:100% !important; height:32px !important; background:#1f3e45 !important; background-image:none !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:1.5px solid #f5d77f !important; border-radius:16px !important; padding:2px 32px 2px 12px !important; font-size:15px !important; outline:none !important; box-sizing:border-box !important;';

var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'vani-inline-go';
btn.innerHTML = '🔍';
btn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:20 !important;';

['click', 'focus', 'focusin', 'touchstart', 'input', 'keypress'].forEach(function(evtType) {
inp.addEventListener(evtType, function(e) {
e.stopPropagation();
}, true);
});

inp.addEventListener('keydown', function(e) {
e.stopPropagation();
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopImmediatePropagation();
window.open_modal();
}
}, true);

btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
window.open_modal();
}, true);

wrap.appendChild(inp);
wrap.appendChild(btn);
if (oldElement.parentNode) {
oldElement.parentNode.replaceChild(wrap, oldElement);
}
}

function setupAllSearchBars() {
ensureBurgerMenu();
protectModalForm();

var minervaHeader = document.querySelector('.minerva-header');
if (minervaHeader) {
document.documentElement.classList.remove('overlay-enabled');
document.body.classList.remove('search-enabled', 'overlay-enabled');
var b = minervaHeader.querySelector('.branding-box');
if (b) b.style.setProperty('display', 'none', 'important');

var mForm = minervaHeader.querySelector('form.minerva-search-form, form#searchform');
if (mForm && !minervaHeader.querySelector('.vani-mobile-search-wrap')) {
buildCleanSearchBox(mForm, true);
}
}

if (!document.querySelector('.vani-desktop-search-wrap') && !minervaHeader) {
var pSearch = document.querySelector('#p-search');
if (pSearch && !pSearch.dataset.vaniDetached) {
var cleanPSearch = pSearch.cloneNode(true);
cleanPSearch.dataset.vaniDetached = 'true';
cleanPSearch.classList.add('vector-search-box-show-thumbnail');
var toggle = cleanPSearch.querySelector('.search-toggle');
if (toggle && toggle.parentNode) toggle.parentNode.removeChild(toggle);
if (pSearch.parentNode) pSearch.parentNode.replaceChild(cleanPSearch, pSearch);
}

var dTarget = document.querySelector('form#searchform, #p-search form, .vector-search-box form');
if (!dTarget) {
var rawInput = document.querySelector('#ori_search, #searchInput, input[type="search"]');
if (rawInput && !rawInput.closest('#mspu_div_wrapper') && !rawInput.classList.contains('vani-clean-search-input')) {
dTarget = rawInput.closest('form') || rawInput.parentElement;
}
}
if (dTarget && !dTarget.closest('#mspu_div_wrapper')) {
buildCleanSearchBox(dTarget, false);
}
}
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupAllSearchBars);
} else {
setupAllSearchBars();
}
setTimeout(setupAllSearchBars, 200);
setTimeout(setupAllSearchBars, 700);
})();

MediaWiki:Common.js

2026-11-13T03:42:03Z

Kashya:

/* V176: remove legacy decorative cursor if it was left by cached site code. */
(function restoreNativeMainPageCursor() {
function clean() {
if (!document.body || !document.body.classList.contains("page-Main_Page")) return;
var cursor = document.getElementById("vh-cursor-pointer");
if (cursor) cursor.remove();
var injected = document.getElementById("vh-kill-windows-cursor");
if (injected) injected.remove();
document.body.classList.remove("vh-cursor-link", "vh-cursor-click");
}
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", clean);
else clean();
})();

/* Any JavaScript here will be loaded for all users on every page load. */
if (mw.config.get('wgPageName' ) === 'Krishna_says_in_Bhagavad-gita') {
/* switch tooltip texts from content-div to label-div */
const v_labels = Array.from(document.getElementsByClassName("tabs-label"));
const v_content = Array.from(document.getElementsByClassName("tabs-content"));
for (var i = 0; i < v_labels.length; i++) {
v_labels[i].title = v_content[i].title;
v_content[i].title = "";
}
/* adjust wikitables */
var arr = Array.from(document.getElementsByClassName("wikitable"));
for (var t = 0; t < arr.length; t++) {
/* insert THEAD in wikitable */
var thead = document.createElement("thead");
thead.style.display = "block";
var wtbl = arr[t];
wtbl.insertBefore(thead, wtbl.firstChild);
/* move first row of TBODY to THEAD */
thead.appendChild(wtbl.rows[0]);
/* make TBODY scrollable */
var tbody = wtbl.tBodies[0];
tbody.style.display = "block";
tbody.style.overflowY = "auto";
tbody.style.maxHeight = "500px";
for (var r = 0; r < wtbl.rows.length; r++) {
var row = wtbl.rows[r];
/* adjust column widths and hide from-until columns */
row.cells[0].classList = "cw_0";
row.cells[1].classList = "cw_150";
row.cells[2].classList = "cw_500";
/* mark the text */
if (r == 0) continue;
var v_text = row.cells[2].textContent;
var v_html = ""; var v_from = 0;
var marks = JSON.parse(row.cells[0].textContent.replaceAll("O", "[").replaceAll("C", "]"));
for (var m = 0; m < marks.length; m++) {
v_html +=
v_text.substr(v_from,marks[m][0]-v_from) + "<mark>" +
v_text.substr(marks[m][0],marks[m][1]-marks[m][0]+1) + "</mark>";
v_from = marks[m][1]+1;
}
v_html += v_text.substr(v_from);
row.cells[2].innerHTML = v_html;
}
}
}
// install Google Search
// document.write('<script type="text/javascript" src="'
// + 'http://vanipedia.org/w/index.php?title=MediaWiki:GoogleSearch.js'
// + '&action=raw&ctype=text/javascript"></' + 'script>');
// install JQuery
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:JQuery.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install WikEd toolbar and Vanify
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:Vaniquotes.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install Replace
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:TextboxReplace.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install Unify
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:Unify.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install Vanify
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:Vanify.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install Vani_suggest for diacritics auto-suggest pulldown on the search bar
//document.write('<script type="text/javascript" src="'
//+ 'http://vanipedia.org/w/index.php?title=MediaWiki:Vani_suggest.js'
//+ '&action=raw&ctype=text/javascript"></' + 'script>');
// install previous/next links for video categories in all languages
//document.write('<script type="text/javascript" src="/navcat/navcat.js"></' + 'script>');
// Buttons
//addOnloadHook(function() {
//if (document.editform) {
//addPortletLink("p-cactions", "javascript:Unify()", "unify", "ca-unify", "Convert Balarama fonts to Unicode", "");
// addPortletLink("p-cactions", "javascript:Vanify()", "vanify", "ca-vanify", "Corrects vani markup", "");
// addPortletLink('p-cactions', 'javascript:format()', 'format', 'ca-format', 'Format article', '');
//addPortletLink('p-cactions', 'javascript:wpTextboxReplace()', 'Replace', 'ca-replace', 'Replaces text in the edit window', 'R');
//}
//});
// end Buttons
// --- YouTube Random Shorts (Kasya) ---
$(document).ready(function() {
var $widget = $('.vani-shorts-viewport');
if ($widget.length) {
var $viewport = $widget;
var $titleFrame = $widget.find('.vani-shorts-title');
new mw.Api().get({
action: 'query',
prop: 'revisions',
titles: 'VanimediaMayapur YouTube SHORTS List',
rvprop: 'content',
format: 'json'
}).done(function(data) {
try {
var pages = data.query.pages;
var pageId = Object.keys(pages)[0];
if (pageId == "-1" || !pages[pageId].revisions) {
$viewport.text("Database list page not found.");
return;
}
// FIXED: Corrected MediaWiki revision array syntax lookup
var rawWikiText = pages[pageId].revisions[0]['*'];
var lines = rawWikiText.split('\n');
var validShorts = [];
for (var i = 0; i < lines.length; i++) {
var line = $.trim(lines[i]);
if (line.indexOf('File:') === 0 && line.toLowerCase().indexOf('link=') !== -1) {
validShorts.push(line);
}
}
if (validShorts.length === 0) {
$viewport.text("No gallery entries recognized.");
return;
}
var randomLine = validShorts[Math.floor(Math.random() * validShorts.length)];
var parts = randomLine.split('|');
// Reset defaults before parsing line elements
var rawUrl = "";
for (var j = 0; j < parts.length; j++) {
var part = $.trim(parts[j]);
if (part.toLowerCase().indexOf('link=') === 0) {
rawUrl = part.substring(5).trim();
}
}
// Clean all template formatting brackets, space characters, and hidden control markers
var urlCleaned = rawUrl.replace(/[\u200e\u200f\s\}\}\]]/g, '');
// Direct YouTube Alphanumeric Pattern Matcher
var idRegex = /(?:shorts\/|v=|embed\/|\/)([a-zA-Z0-9_-]{11})/;
var matchResults = urlCleaned.match(idRegex);
var videoId = "";
if (matchResults && matchResults[1]) {
// FIXED: Grabbed index 1 to pull the standalone 11-digit ID without any slashes
videoId = matchResults[1].trim();
}
if (videoId && videoId.length === 11) {
// FIXED: Isolated to inject ONLY the video player iframe at the correct 280px width
var embedUrl = "https://www.youtube.com/embed/" + videoId;
$viewport.html('<iframe width="280" height="225" src="' + embedUrl + '" frameborder="0" allowfullscreen style="border-radius: 8px; border: none;"></iframe>');
} else {
$viewport.html("<div style='color:#c0392b; padding:10px; font-size:11px;'>Invalid video ID sequence extracted.</div>");
}
} catch (err) {
console.error("Shorts engine exception:", err);
$viewport.text("Error handling text structure values.");
}
}).fail(function() {
$viewport.text("API connection failed.");
});
}
});
// Kasya
/* Open Timeline links in a new tab ONLY on the Chapters page */
mw.hook('wikipage.content').add(function($content) {
// Check if we are exactly on the timeline page
if (mw.config.get('wgPageName') === "Chapters_in_Srila_Prabhupada's_Life") {
// If yes, apply the new tab rule to the table
$content.find('#mp-tfp a').attr('target', '_blank').attr('rel', 'noopener noreferrer');
}
});
// Wait for MediaWiki core modules and the DOM to load
mw.loader.using(['mediawiki.api', 'mediawiki.util']).then(function () {
$(document).ready(function () {
// 1. FIND THE "102 Languages" SIDEBAR SECTION
var $sidebarMenu = $('#p-102_Languages ul').first();
// Fallback in case your specific MediaWiki version formats the ID differently
if ($sidebarMenu.length === 0) {
$('.vector-menu-heading, .portal h3').each(function() {
// Looks for the heading text directly
if ($(this).text().trim() === '102 Languages') {
$sidebarMenu = $(this).closest('.vector-menu, .portal').find('ul').first();
}
});
}
// Exit if the 102 Languages menu isn't found on the page
if (!$sidebarMenu || $sidebarMenu.length === 0) return;
// 2. CREATE THE SEARCH BAR AS A MENU ITEM
var $searchLi = $('<li id="n-language-search" style="margin-top: 10px; margin-bottom: 5px; list-style: none;"></li>');
var $searchBox = $('<input type="text" id="sidebarLanguageSearch" placeholder="Search 102 Languages..." style="width: 100%; box-sizing: border-box; padding: 5px; font-size: 0.85em; border: 1px solid #a2a9b1; border-radius: 2px;" autocomplete="off" />');
// Container for the results (hidden by default)
var $resultsContainer = $('<ul id="sidebarLanguageResults" style="list-style: none; padding: 0; margin: 4px 0 0 0; max-height: 200px; overflow-y: auto; border: 1px solid #eaecf0; background: #ffffff; display: none;"></ul>');
// Build the menu item and append it to the sidebar
$searchLi.append($searchBox).append($resultsContainer);
$sidebarMenu.prepend($searchLi);
var api = new mw.Api();
var languageList = [];
// 3. FETCH LANGUAGES FROM THE CATEGORY VIA API IN THE BACKGROUND
api.get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:Languages_with_Total_Pages',
cmlimit: 'max',
format: 'json'
}).done(function (data) {
if (data.query && data.query.categorymembers) {
languageList = data.query.categorymembers.map(function (member) {
return {
title: member.title,
url: mw.util.getUrl(member.title)
};
});
}
});
// 4. ADD SEARCH FUNCTIONALITY TO THE SIDEBAR BOX
$('#sidebarLanguageSearch').on('keyup', function (e) {
e.stopPropagation();
var searchTerm = $(this).val().toLowerCase();
$resultsContainer.empty();
// Hide the results box if the search is empty
if (searchTerm.length === 0) {
$resultsContainer.hide();
return;
}
// Filter the fetched languages
var filteredLanguages = languageList.filter(function (lang) {
return lang.title.toLowerCase().indexOf(searchTerm) > -1;
});
// Show results container
$resultsContainer.show();
// Append results using Vector's standard dark text color
if (filteredLanguages.length > 0) {
filteredLanguages.forEach(function (lang) {
$resultsContainer.append('<li style="padding: 4px 6px; border-bottom: 1px solid #f8f9fa;"><a href="' + lang.url + '" style="text-decoration: none; color: #0645ad; display: block; font-size: 0.9em;">' + lang.title + '</a></li>');
});
} else {
$resultsContainer.append('<li style="padding: 4px 6px; color: #72777d; font-size: 0.9em;">No languages found</li>');
}
});
// Prevent typing from accidentally triggering global keyboard shortcuts
$('#sidebarLanguageSearch').on('keydown', function(e) {
e.stopPropagation();
});
// Optional: Hide results when clicking outside the sidebar search
$(document).on('click', function(e) {
if (!$(e.target).closest('#n-language-search').length) {
$resultsContainer.hide();
}
});
// Re-show results if they click back into the search box
$('#sidebarLanguageSearch').on('click', function() {
if ($(this).val().length > 0) {
$resultsContainer.show();
}
});
});
});
// 5. SIDEBAR ACCORDION - STRICT LEFT-COLUMN ISOLATION & TRUE ACCORDION
(function() {
// 1. Tag ONLY menus physically located in the left sidebar
function tagSidebarMenus() {
var allMenus = document.querySelectorAll('.vector-menu');
for (var i = 0; i < allMenus.length; i++) {
var menu = allMenus[i];
// STRICT INCLUSION: Only tag menus inside the modern or legacy left sidebar containers
if (menu.closest('#vector-main-menu, #mw-panel, #mw-navigation')) {
menu.classList.add('vanipedia-sidebar-menu');
// Collapse them by default if they have a heading
if (menu.querySelector('.vector-menu-heading') && !menu.classList.contains('vanipedia-collapsed')) {
menu.classList.add('vanipedia-collapsed');
}
}
}
}
// Run tagging immediately, and again on load as a failsafe
tagSidebarMenus();
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', tagSidebarMenus);
}
// 2. Inject CSS targeted STRICTLY at our newly tagged custom class
var style = document.createElement('style');
style.textContent =
/* Widen only our tagged sidebar menus */
'.vanipedia-sidebar-menu { width: 185px !important; } ' +
/* Core functional hiding rule */
'.vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-content { display: none !important; } ' +
/* Bold, Dark Header */
'.vanipedia-sidebar-menu .vector-menu-heading { ' +
' cursor: pointer !important; ' +
' background-color: #2c4c50 !important; ' +
' border: 1px solid #1b3033 !important; ' +
' border-radius: 4px !important; ' +
' margin-bottom: 4px !important; ' +
' padding: 10px 12px !important; ' +
' font-weight: 600 !important; ' +
' color: #ffffff !important; ' +
' display: flex !important; ' +
' justify-content: space-between !important; ' +
' align-items: center !important; ' +
' gap: 10px !important; ' +
' transition: all 0.2s ease; ' +
'} ' +
/* Fix header corners when expanded */
'.vanipedia-sidebar-menu:not(.vanipedia-collapsed) .vector-menu-heading { ' +
' border-radius: 4px 4px 0 0 !important; ' +
' margin-bottom: 0 !important; ' +
'} ' +
/* Hover effect */
'.vanipedia-sidebar-menu .vector-menu-heading:hover { background-color: #385e63 !important; } ' +
/* The dropdown caret */
'.vanipedia-sidebar-menu .vector-menu-heading::after { ' +
' content: "▼"; ' +
' font-size: 0.75em; ' +
' color: #ffffff !important; ' +
' transition: transform 0.2s ease; ' +
'} ' +
/* Rotate the arrow when collapsed */
'.vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-heading::after { ' +
' transform: rotate(-90deg); ' +
'} ' +
/* The Expanded Content Area */
'.vanipedia-sidebar-menu .vector-menu-content { ' +
' background-color: #eaeff0 !important; ' +
' border: 1px solid #2c4c50 !important; ' +
' border-top: none !important; ' +
' border-radius: 0 0 4px 4px !important; ' +
' padding: 0 0 4px 0 !important; ' +
' margin-bottom: 6px !important; ' +
' box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important; ' +
'} ' +
/* Reset the list styles */
'.vanipedia-sidebar-menu .vector-menu-content ul { ' +
' list-style: none !important; ' +
' margin: 0 !important; ' +
' padding: 0 !important; ' +
'} ' +
/* Menu links */
'.vanipedia-sidebar-menu .vector-menu-content li a { ' +
' display: block !important; ' +
' padding: 8px 12px 8px 16px !important; ' +
' color: #1b3033 !important; ' +
' text-decoration: none !important; ' +
' border-left: 3px solid transparent !important; ' +
' border-bottom: 1px solid rgba(44, 76, 80, 0.1) !important; ' +
' transition: all 0.15s ease !important; ' +
'} ' +
/* Remove separator from last item */
'.vanipedia-sidebar-menu .vector-menu-content li:last-child a { ' +
' border-bottom: none !important; ' +
'} ' +
/* Hover effect for individual menu items */
'.vanipedia-sidebar-menu .vector-menu-content li a:hover { ' +
' background-color: #dbe4e6 !important; ' +
' border-left: 3px solid #2c4c50 !important; ' +
' color: #000000 !important; ' +
'} ';
document.head.appendChild(style);
// 3. Helper function to collapse all of our securely tagged menus
function collapseAllSidebarMenus() {
var menus = document.querySelectorAll('.vanipedia-sidebar-menu');
for (var i = 0; i < menus.length; i++) {
menus[i].classList.add('vanipedia-collapsed');
}
}
// 4. Intercept clicks for True Accordion Behavior
document.addEventListener('click', function(e) {
var heading = e.target.closest('.vector-menu-heading');
if (!heading) return;
// ONLY react if this click belongs to one of our tagged sidebar menus
var navContainer = heading.closest('.vanipedia-sidebar-menu');
if (navContainer) {
var isAlreadyOpen = !navContainer.classList.contains('vanipedia-collapsed');
// Forcefully collapse ALL left sidebar menus first
collapseAllSidebarMenus();
// Open the clicked one if it wasn't already open
if (!isAlreadyOpen) {
navContainer.classList.remove('vanipedia-collapsed');
}
e.stopPropagation();
e.preventDefault();
}
}, true);
})();
mw.loader.using('mediawiki.user').then(function() {
// Fetch the user's assigned groups
var userGroups = mw.config.get('wgUserGroups') || [];
// Define the roles that SHOULD see the administrative tabs
var isAuthorized = userGroups.includes('sysop') ||
userGroups.includes('interface-admin') ||
userGroups.includes('Editor');
// If the user is not in one of those groups, restrict the UI
if (!isAuthorized) {
document.body.classList.add('restricted-ui');
}
});
// Function to open accordion from TOC and jump there //
mw.hook('wikipage.content').add(function() {
function handleAccordionTOC(hash) {
if (!hash || hash === '#') return false;
try {
var targetId = hash.substring(1);
var targetElement = document.getElementById(targetId) || document.getElementById(decodeURIComponent(targetId));
if (!targetElement) return false;
var $target = $(targetElement);
// Match either h2 or h3
var $heading = $target.is('h2, h3') ? $target : $target.closest('h2, h3');
if (!$heading.length) return false;
var $accordion = $heading.next('.book-accordion');
// If the heading itself is not followed directly by an accordion,
// check if the heading is located INSIDE a parent accordion (e.g., nested h3)
var $parentAccordions = $heading.parents('.book-accordion');
// If there's no direct accordion next to it and it's not inside any accordion,
// let the browser handle standard jump.
if (!$accordion.length && !$parentAccordions.length) return false;
// 1. Open all ancestor accordions (if target heading is nested inside one)
$parentAccordions.each(function() {
var $parentCollapsible = $(this).children('.mw-collapsible');
if ($parentCollapsible.length && $parentCollapsible.hasClass('mw-collapsed')) {
var pId = $parentCollapsible.attr('id');
if (pId) {
var pToggleClass = pId.replace('mw-customcollapsible-', 'mw-customtoggle-');
$('.' + pToggleClass).first().click();
}
}
});
// 2. Open the accordion immediately following this heading (if present)
if ($accordion.length) {
var $collapsible = $accordion.children('.mw-collapsible, .mw-collapsible-content').first();
if (!$collapsible.length) {
$collapsible = $accordion.find('.mw-collapsible');
}
if ($collapsible.length && $collapsible.hasClass('mw-collapsed')) {
var collapsibleId = $collapsible.attr('id');
if (collapsibleId) {
var toggleClass = collapsibleId.replace('mw-customcollapsible-', 'mw-customtoggle-');
$('.' + toggleClass).first().click();
}
}
}
// Target element to scroll to (the accordion, or the heading itself if accordion is missing)
var $scrollTarget = $accordion.length ? $accordion : $heading;
// 3. Scroll to the visible section
setTimeout(function() {
$('html, body').animate({
scrollTop: $scrollTarget.offset().top - 75
}, 300);
}, 100);
// Return true to indicate we successfully handled the TOC accordion click
return true;
} catch (e) {
console.error("TOC Accordion script error:", e);
return false;
}
}
$(document).off('click.tocAccordion').on('click.tocAccordion', 'a[href^="#"]', function(e) {
if ($(this).closest('#toc, .toc, .vector-toc').length > 0) {
var href = $(this).attr('href');
// Run our function to see if this is an accordion/heading link
var isAccordion = handleAccordionTOC(href);
// ONLY stop the default browser jump if we handled it
if (isAccordion) {
e.preventDefault();
// Update the URL manually so the user can still share the link
if (history.pushState) {
history.pushState(null, null, href);
} else {
window.location.hash = href;
}
}
}
});
if (window.location.hash) {
setTimeout(function() {
handleAccordionTOC(window.location.hash);
}, 500);
}
});
/* Sticky burger menu - Pure Floating Dropdown (Forces Unpinned & Full Title) */
(function () {
let isMenuOpen = false;
// 1. Force the sidebar out of pinned mode and return menu into the dropdown container
function forceUnpinSidebar() {
document.documentElement.classList.remove('vector-feature-main-menu-pinned-enabled', 'vector-feature-main-menu-pinned-clientpref-1');
document.documentElement.classList.add('vector-feature-main-menu-pinned-disabled', 'vector-feature-main-menu-pinned-clientpref-0');
if (document.body) {
document.body.classList.remove('vector-feature-main-menu-pinned-enabled', 'vector-feature-main-menu-pinned-clientpref-1');
document.body.classList.add('vector-feature-main-menu-pinned-disabled', 'vector-feature-main-menu-pinned-clientpref-0');
}
// Clear stored pin preference
document.cookie = "vector-feature-main-menu-pinned=0; path=/; max-age=31536000";
try { localStorage.setItem('vector-feature-main-menu-pinned', '0'); } catch(e) {}
// If #vector-main-menu was moved into the pinned container, move it back into dropdown
const mainMenu = document.getElementById('vector-main-menu');
const unpinnedContainer = document.getElementById('vector-main-menu-unpinned-container') ||
document.querySelector('#vector-main-menu-dropdown .vector-dropdown-content');
const pinnedContainer = document.getElementById('vector-main-menu-pinned-container');
if (mainMenu && unpinnedContainer && pinnedContainer && pinnedContainer.contains(mainMenu)) {
unpinnedContainer.appendChild(mainMenu);
}
}
function getDropdownElement() {
return document.querySelector('#vector-main-menu-dropdown .vector-dropdown-content') ||
document.getElementById('vector-main-menu-dropdown-content') ||
document.getElementById('vector-main-menu-unpinned-container') ||
document.getElementById('vector-main-menu');
}
function openMenu(menuBtn) {
forceUnpinSidebar();
const checkbox = document.getElementById('vector-main-menu-dropdown-checkbox');
const dropdown = getDropdownElement();
if (!dropdown) return;
if (checkbox) {
checkbox.checked = true;
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
}
const rect = menuBtn.getBoundingClientRect();
dropdown.style.setProperty('position', 'fixed', 'important');
dropdown.style.setProperty('top', rect.bottom + 'px', 'important');
dropdown.style.setProperty('left', rect.left + 'px', 'important');
dropdown.style.setProperty('z-index', '99999', 'important');
dropdown.style.setProperty('max-height', (window.innerHeight - rect.bottom - 16) + 'px', 'important');
dropdown.style.setProperty('overflow-y', 'auto', 'important');
dropdown.style.setProperty('display', 'block', 'important');
dropdown.style.setProperty('visibility', 'visible', 'important');
dropdown.style.setProperty('opacity', '1', 'important');
dropdown.style.setProperty('background-color', 'var(--background-color-base, #ffffff)', 'important');
dropdown.style.setProperty('box-shadow', '0 4px 16px rgba(0, 0, 0, 0.2)', 'important');
dropdown.style.setProperty('border-radius', '4px', 'important');
isMenuOpen = true;
}
function closeMenu() {
const checkbox = document.getElementById('vector-main-menu-dropdown-checkbox');
const dropdown = getDropdownElement();
if (!dropdown) return;
if (checkbox) {
checkbox.checked = false;
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
}
dropdown.style.removeProperty('position');
dropdown.style.removeProperty('top');
dropdown.style.removeProperty('left');
dropdown.style.removeProperty('z-index');
dropdown.style.removeProperty('max-height');
dropdown.style.removeProperty('overflow-y');
dropdown.style.removeProperty('background-color');
dropdown.style.removeProperty('box-shadow');
dropdown.style.removeProperty('border-radius');
dropdown.style.setProperty('display', 'none', 'important');
dropdown.style.setProperty('visibility', 'hidden', 'important');
dropdown.style.setProperty('opacity', '0', 'important');
isMenuOpen = false;
}
function initStickyBurger() {
forceUnpinSidebar();
const stickyHeader = document.getElementById('vector-sticky-header');
if (!stickyHeader) return false;
if (document.getElementById('vanipedia-sticky-main-menu')) return true;
// 1. Create burger button
const menuBtn = document.createElement('div');
menuBtn.id = 'vanipedia-sticky-main-menu';
menuBtn.title = 'Main menu';
menuBtn.style.cursor = 'pointer';
menuBtn.className = 'vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--icon-only';
// 2. Add hamburger icon
const iconSpan = document.createElement('span');
iconSpan.className = 'vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu';
menuBtn.appendChild(iconSpan);
// 3. Toggle click handler (1st click opens, 2nd click rolls back)
menuBtn.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
if (isMenuOpen) {
closeMenu();
} else {
openMenu(menuBtn);
}
});
// 4. Inject into start container
let startContainer = stickyHeader.querySelector('.vector-sticky-header-start');
if (!startContainer) {
startContainer = document.createElement('div');
startContainer.className = 'vector-sticky-header-start';
stickyHeader.insertBefore(startContainer, stickyHeader.firstChild);
}
startContainer.insertBefore(menuBtn, startContainer.firstChild);
return true;
}
// 5. Close when clicking anywhere outside
document.addEventListener('click', function (e) {
if (!isMenuOpen) return;
const menuBtn = document.getElementById('vanipedia-sticky-main-menu');
const dropdown = getDropdownElement();
if (dropdown && menuBtn && !menuBtn.contains(e.target) && !dropdown.contains(e.target)) {
closeMenu();
}
});
// 6. Bootstrap initializer
if (!initStickyBurger()) {
const checkTimer = setInterval(function () {
if (initStickyBurger()) {
clearInterval(checkTimer);
}
}, 100);
setTimeout(function () { clearInterval(checkTimer); }, 4000);
}
mw.hook('wikipage.content').add(initStickyBurger);
$(initStickyBurger);
})();
/* Floating "Back to Top" Button Controller */
(function () {
function initBackToTop() {
if (document.getElementById('vanipedia-back-to-top')) return;
// 1. Create button element with an up-arrow SVG icon
const btn = document.createElement('button');
btn.id = 'vanipedia-back-to-top';
btn.title = 'Back to top';
btn.setAttribute('aria-label', 'Back to top');
btn.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
`;
// 2. Smooth scroll to top on click
btn.addEventListener('click', function (e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// 3. Show button only after scrolling down 300px
function toggleVisibility() {
if (window.scrollY > 300) {
btn.classList.add('visible');
} else {
btn.classList.remove('visible');
}
}
window.addEventListener('scroll', toggleVisibility, { passive: true });
toggleVisibility();
document.body.appendChild(btn);
}
$(initBackToTop);
mw.hook('wikipage.content').add(initBackToTop);
})();
/* V176: Removed the homepage animation/random-content initializer. Main-page
features now remain exactly as curated in Main-Page.wikitext. */

// SAFE LEFT-ANCHORED SEARCH (STEP 18)
// ==========================================================================
$(document).ready(function() {
var $search = $('#p-search');
var $start = $('.vector-header-start');
if ($search.length && $start.length && !$start.find('#p-search').length) {
$start.append($search);
}
});
/* ======================================================================
STEP 59: REMOVE TOP BAR HOVER HELP TEXTS (BROWSER TOOLTIPS)
====================================================================== */
function removeTopBarHelpTexts() {
var selectors = [
'#mw-head [title]',
'.vector-header [title]',
'#vanipedia-header-title',
'.vh-header-title',
'.vanipedia-header-title',
'#p-logo [title]',
'#p-logo a',
'header [title]',
'#p-personal [title]',
'#p-search [title]',
'.vector-user-menu [title]',
'#pt-login [title]',
'#pt-anonuserpage [title]',
'#pt-anontalk [title]',
'.vector-menu [title]'
];
$(selectors.join(', ')).removeAttr('title');
// Aggressively remove title from all top bar elements
$('#mw-head, .vector-header, header, .vector-header-container').find('*').removeAttr('title');
}
function initSanctuaryTitle() {
$('.vh-sanctuary-title a').each(function () {
var $link = $(this);
$link.removeClass('vh-title-morph');
$link.find('.vh-title-hover, .vh-title-default').remove();
$link.text('Who Is Śrīla Prabhupāda');
});
}
$(document).ready(function () {
removeTopBarHelpTexts();
initSanctuaryTitle();
setTimeout(removeTopBarHelpTexts, 400);
setTimeout(removeTopBarHelpTexts, 1500);
});
// ==========================================================================
/* V175: decorative cursor code removed; the native system cursor is retained. */

/* ==========================================================================
STEP 92: PERMANENT BOTTOM NAVIGATION BAR (MAIN PAGE & REGULAR WIKI PAGES)
- Fixed at bottom of screen, permanently visible while scrolling.
- Core Principles (/wiki/Vanipedia_Vision)
- Volunteer (/wiki/Vaniseva)
- Community (/wiki/Vanipedia_Community)
- Contact (/contact.php, opens in new window)
- Donate (/wiki/Special:IframePage)
========================================================================== */
(function initPermanentBottomBar() {
function isEntryPage() {
return (
document.body.classList.contains('ext-vp3d-fullscreen') ||
!!document.querySelector('.vp-entry3d-container') ||
!!document.querySelector('.vp-entry3d-wrapper') ||
window.location.pathname === '/' ||
(window.location.pathname === '/index.php' && !window.location.search) ||
(window.mw && mw.config && (mw.config.get('wgPageName') === 'Entry_Page' || mw.config.get('wgTitle') === 'Entry Page'))
);
}
/* V190: mobile footer navigation starts at Home/Main Page, with reachable horizontal overflow. */
function updateBottomBarLayout(bar) {
if (!bar) return;
var mobile = window.innerWidth <= 999 || document.body.classList.contains('skin-minerva');
var inner = bar.querySelector('.vh-bottom-bar-inner');
var links = bar.querySelector('.vh-bottom-nav-links');
var left = bar.querySelector('.vh-bottom-bar-left-space');
var right = bar.querySelector('.vh-bottom-bar-right-space');
if (!inner || !links) return;
inner.style.setProperty('padding', mobile ? '0 10px' : '0 24px', 'important');
inner.style.setProperty('min-width', '0', 'important');
if (mobile) inner.style.setProperty('justify-content', 'flex-start', 'important');
else inner.style.removeProperty('justify-content');
links.style.setProperty('justify-content', mobile ? 'flex-start' : 'center', 'important');
links.style.setProperty('flex', mobile ? '1 1 auto' : '0 0 auto', 'important');
links.style.setProperty('width', mobile ? '100%' : 'auto', 'important');
links.style.setProperty('min-width', '0', 'important');
links.style.setProperty('gap', mobile ? '8px' : '12px', 'important');
links.style.setProperty('flex-wrap', 'nowrap', 'important');
if (mobile) links.style.setProperty('overflow-x', 'auto', 'important');
else links.style.removeProperty('overflow-x');
links.querySelectorAll('.vh-bottom-link, .vh-bottom-sep').forEach(function (item) {
item.style.setProperty('flex-shrink', '0', 'important');
});
if (left) left.style.setProperty('display', mobile ? 'none' : 'block', 'important');
if (right) right.style.setProperty('display', mobile ? 'none' : 'flex', 'important');
if (mobile && bar.dataset.vpFooterMode !== 'mobile') {
links.scrollLeft = 0;
inner.scrollLeft = 0;
}
bar.dataset.vpFooterMode = mobile ? 'mobile' : 'desktop';
}
function setupBottomBar() {
// Never inject on the 3D entry page; remove if already present
if (isEntryPage()) {
var existing = document.getElementById('vh-bottom-bar');
if (existing) existing.remove();
return;
}
var currentBar = document.getElementById('vh-bottom-bar');
if (currentBar) { updateBottomBarLayout(currentBar); return; }
var bar = document.createElement('nav');
bar.id = 'vh-bottom-bar';
bar.className = 'vh-bottom-bar';
bar.setAttribute('aria-label', 'Vanipedia Global Navigation');
bar.innerHTML =
'<div class="vh-bottom-bar-inner" style="display:flex !important; align-items:center !important; width:100% !important; max-width:100% !important; height:100% !important; padding:0 24px !important; box-sizing:border-box !important;">' +
'<div class="vh-bottom-bar-left-space" style="flex:1 1 0 !important; min-width:0 !important;"></div>' +
'<div class="vh-bottom-nav-links" style="flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; white-space:nowrap !important;">' +
'<a href="/" class="vh-bottom-link vh-bottom-entry">Home</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Main_Page" class="vh-bottom-link vh-bottom-home">Main Page</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Vanipedia_Vision" class="vh-bottom-link">Core Principles</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Vaniseva" class="vh-bottom-link">Volunteer</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Vanipedia_Community" class="vh-bottom-link">Community</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/contact.php" target="_blank" rel="noopener noreferrer" class="vh-bottom-link">Contact</a>' +
'<span class="vh-bottom-sep" aria-hidden="true">•</span>' +
'<a href="/wiki/Special:IframePage" class="vh-bottom-link vh-bottom-donate">Donate</a>' +
'</div>' +
'<div class="vh-bottom-bar-right-space" style="flex:1 1 0 !important; min-width:0 !important; display:flex !important; align-items:center !important; justify-content:center !important;">' +
'<div class="vh-bottom-social-links" style="position:static !important; transform:none !important; display:inline-flex !important; align-items:center !important; gap:24px !important;">' +
'<a href="https://www.youtube.com/@VanimediaPrabhupada" target="_blank" rel="noopener noreferrer" class="vh-bottom-social-item" title="YouTube" style="display:inline-flex !important;align-items:center !important;">' +
'<img src="/wiki/Special:FilePath/YouTube_Logo_B.png" alt="YouTube" style="height:20px !important;width:auto !important;vertical-align:middle !important;display:block !important;">' +
'</a>' +
'<a href="https://www.facebook.com/vanipedia.org" target="_blank" rel="noopener noreferrer" class="vh-bottom-social-item" title="Facebook Page" style="display:inline-flex !important;align-items:center !important;">' +
'<img src="/wiki/Special:FilePath/Facebook_Group_Logo.png" alt="Facebook" style="height:20px !important;width:auto !important;vertical-align:middle !important;display:block !important;">' +
'</a>' +
'<a href="https://www.facebook.com/groups/VanipediaGroup" target="_blank" rel="noopener noreferrer" class="vh-bottom-social-item" title="Facebook Group" style="display:inline-flex !important;align-items:center !important;">' +
'<img src="/wiki/Special:FilePath/Facebook_Logo_2023.png" alt="Facebook Group" style="height:20px !important;width:auto !important;vertical-align:middle !important;display:block !important;">' +
'</a>' +
'<a href="https://www.instagram.com/vanipediaprabhupada/" target="_blank" rel="noopener noreferrer" class="vh-bottom-social-item" title="Instagram" style="display:inline-flex !important;align-items:center !important;">' +
'<img src="/wiki/Special:FilePath/Insta Logo.png" alt="Instagram" style="height:20px !important;width:auto !important;vertical-align:middle !important;display:block !important;">' +
'</a>' +
'</div>' +
'</div>' +
'</div>';
var stageSlot = document.getElementById('vani-stage-footer-slot');
if (stageSlot) {
stageSlot.appendChild(bar);
} else {
document.body.appendChild(bar);
}
updateBottomBarLayout(bar);
}
window.addEventListener('resize', function () {
updateBottomBarLayout(document.getElementById('vh-bottom-bar'));
}, { passive: true });
// Remove bar if 3D entry page activates asynchronously
if (window.MutationObserver && document.body) {
var observer = new MutationObserver(function() {
if (isEntryPage()) {
var existing = document.getElementById('vh-bottom-bar');
if (existing) existing.remove();
}
});
observer.observe(document.body, { attributes: true, attributeFilter: ['class'], childList: true });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupBottomBar);
} else {
setupBottomBar();
}
})();
// Chrome suppression for Entry Page
(function suppressEntryPageChrome() {
function checkEntryChrome() {
var isEntry = (
document.body.classList.contains('ext-vp3d-fullscreen') ||
!!document.querySelector('.vp-entry3d-container') ||
!!document.querySelector('.vp-entry3d-wrapper') ||
window.location.pathname === '/' ||
(window.location.pathname === '/index.php' && !window.location.search)
);
if (isEntry) {
var headers = document.querySelectorAll('.header-container, .header-chrome, .minerva-header, .vector-header-container, #mw-head, .mw-header');
for (var i = 0; i < headers.length; i++) {
headers[i].style.setProperty('display', 'none', 'important');
}
var b = document.getElementById('vh-bottom-bar');
if (b) b.remove();
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', checkEntryChrome);
} else {
checkEntryChrome();
}
})();
/* ==========================================================================
STEP 97: MOBILE BURGER MENU TOGGLE ENHANCER
Ensures the hamburger menu reliably opens and closes the Vector navigation
drawer on mobile viewports and touch devices.
========================================================================== */
(function() {
function initMobileMenuToggle() {
var dropdown = document.getElementById('vector-main-menu-dropdown');
if (!dropdown || dropdown.dataset.vaniMobileInit) return;
dropdown.dataset.vaniMobileInit = 'true';
var label = dropdown.querySelector('.vector-dropdown-label');
var checkbox = document.getElementById('vector-main-menu-dropdown-checkbox');
var content = dropdown.querySelector('.vector-dropdown-content');
if (label && checkbox) {
label.addEventListener('click', function(e) {
setTimeout(function() {
if (content) {
if (checkbox.checked) {
content.classList.add('is-open');
} else {
content.classList.remove('is-open');
}
}
}, 50);
});
}
}
$(document).ready(initMobileMenuToggle);
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(initMobileMenuToggle);
}
})();
/* ==========================================================================
VANIPEDIA MOBILE JAVASCRIPT (MediaWiki:Mobile.js)
1. User Menu Dropdown: Intercepts #ca-mytalks on mobile to show the regular
user dropdown menu (Talk, Preferences, Contributions, Log out) matching desktop.
2. Self-contained styles injected into <head>.
3. Screen Orientation lock to landscape on Main Page.
========================================================================== */
(function() {
// 1. Inject self-contained dropdown styles immediately into <head>
var styleId = 'vani-mobile-dropdown-styles';
if (!document.getElementById(styleId)) {
var style = document.createElement('style');
style.id = styleId;
style.textContent = [
'#vanipedia-mobile-user-menu {',
' display: none !important;',
' position: fixed !important;',
' top: 52px !important;',
' right: 8px !important;',
' width: 175px !important;',
' background-color: #1f3e45 !important;',
' border: 1.5px solid #b1873d !important;',
' border-radius: 6px !important;',
' box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;',
' padding: 6px 0 !important;',
' z-index: 999999 !important;',
' box-sizing: border-box !important;',
' flex-direction: column !important;',
'}',
'#vanipedia-mobile-user-menu.is-open {',
' display: flex !important;',
'}',
'#vanipedia-mobile-user-menu a.vani-user-menu-item {',
' color: #f5d77f !important;',
' font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;',
' font-size: 15px !important;',
' font-weight: 500 !important;',
' padding: 10px 18px !important;',
' text-decoration: none !important;',
' display: block !important;',
' line-height: 1.2 !important;',
'}',
'#vanipedia-mobile-user-menu a.vani-user-menu-item:hover,',
'#vanipedia-mobile-user-menu a.vani-user-menu-item:active {',
' background-color: #345B63 !important;',
' color: #ffffff !important;',
'}',
'#vanipedia-mobile-user-menu .vani-user-menu-divider {',
' height: 1px !important;',
' background-color: rgba(177, 135, 61, 0.35) !important;',
' margin: 5px 0 !important;',
'}',
'#vanipedia-mobile-user-menu a.vani-user-menu-logout {',
' color: #fca5a5 !important;',
'}',
'#vanipedia-mobile-user-menu a.vani-user-menu-logout:hover {',
' background-color: rgba(239, 68, 68, 0.2) !important;',
' color: #ffffff !important;',
'}'
].join('\n');
document.head.appendChild(style);
}
// 2. Setup user dropdown click interceptor
function initUserMenuDropdown() {
var $userBtn = $('#ca-mytalks');
if (!$userBtn.length || $userBtn.data('vaniMenuInit')) return;
$userBtn.data('vaniMenuInit', true);
// Prevent opening talk page directly
$userBtn.attr('href', 'javascript:void(0)');
// Build the dropdown container attached to body
var $dropdown = $('#vanipedia-mobile-user-menu');
if (!$dropdown.length) {
$dropdown = $('<div>', {
id: 'vanipedia-mobile-user-menu',
class: 'vanipedia-mobile-user-dropdown'
});
var user = (window.mw && mw.config && mw.config.get('wgUserName')) || 'Kashya';
var talkUrl = '/wiki/User_talk:' + encodeURIComponent(user);
var prefUrl = '/wiki/Special:Preferences';
var contUrl = '/wiki/Special:Contributions/' + encodeURIComponent(user);
var page = (window.mw && mw.config && mw.config.get('wgPageName')) || 'Main_Page';
var logoutUrl = '/w/index.php?title=Special:UserLogout&returnto=' + encodeURIComponent(page) + '&useformat=mobile';
$dropdown.html(
'<a href="' + talkUrl + '" class="vani-user-menu-item">Talk</a>' +
'<a href="' + prefUrl + '" class="vani-user-menu-item">Preferences</a>' +
'<a href="' + contUrl + '" class="vani-user-menu-item">Contributions</a>' +
'<div class="vani-user-menu-divider"></div>' +
'<a href="' + logoutUrl + '" class="vani-user-menu-item vani-user-menu-logout">Log out</a>'
);
$('body').append($dropdown);
}
// Toggle on click
$userBtn.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$dropdown.toggleClass('is-open');
});
// Close on clicking outside
$(document).on('click touchstart', function(e) {
if (!$(e.target).closest('#ca-mytalks, #vanipedia-mobile-user-menu').length) {
$dropdown.removeClass('is-open');
}
});
}
// =========================================================================
// 3. Container-Level Auto-Landscape & 2D Fitting (STEP 115)
// Matches the exact architecture of VanipediaEntry3D:
// - Keeps <body> stable without full-page transforms.
// - Wraps #vani-home inside #vani-mobile-stage > #vani-rotated-box.
// - Rotates #vani-rotated-box 90deg in portrait mode.
// - Scales the 1200px desktop layout so all sections (Triad, Timeline,
// 4 Taxonomy Cards, Bottom Bar) fit the phone screen without cropping.
// =========================================================================
/* =========================================================================
3. STEP 117: UNIFIED 3-SLOT ROTATED LANDSCAPE STAGE (TOP BAR + MAIN PAGE + BOTTOM BAR)
- Puts Top Bar, #vani-home, and Bottom Bar together in landscape.
- Rotates 90deg as a single unified screen when held in portrait.
- Stays completely horizontal with zero rotation when held in native landscape.
- Leaves regular wiki pages and desktop view completely untouched.
========================================================================= */
function initMobileMainPageStage() {
if (window._vaniMainPageStageInit) return;
var pageName = (window.mw && mw.config && mw.config.get('wgPageName')) || '';
var isMainPage = pageName === 'Main_Page' || document.body.classList.contains('page-Main_Page');
if (!isMainPage) return;
var $vh = $('#vani-home');
if (!$vh.length) return;
window._vaniMainPageStageInit = true;
var $stage = null;
var $rotatedBox = null;
var $headerSlot = null;
var $contentSlot = null;
var $footerSlot = null;
var $topHeader = null;
var $bottomBar = null;
var $headerParent = null;
var $footerParent = null;
var $vhParent = null;
function ensureStage() {
if (!$('#vani-mobile-stage').length) {
$topHeader = $('.vector-header-container, #mw-head, .mw-header, .header-container, header.header-chrome').filter(':visible').first();
if (!$topHeader.length) {
$topHeader = $('.vector-header-container, #mw-head, .mw-header, .header-container, header.header-chrome').first();
}
$bottomBar = $('#vh-bottom-bar');
if ($topHeader.length) $headerParent = $topHeader.parent();
if ($bottomBar.length) $footerParent = $bottomBar.parent();
$vhParent = $vh.parent();
var stageHtml = [
'<div id="vani-mobile-stage">',
' <div id="vani-rotated-box">',
' <div id="vani-stage-header-slot"></div>',
' <div id="vani-stage-content-slot"></div>',
' <div id="vani-stage-footer-slot"></div>',
' </div>',
'</div>'
].join('');
$('body').append(stageHtml);
document.body.classList.add('has-vani-stage');
$stage = $('#vani-mobile-stage');
$rotatedBox = $('#vani-rotated-box');
$headerSlot = $('#vani-stage-header-slot');
$contentSlot = $('#vani-stage-content-slot');
$footerSlot = $('#vani-stage-footer-slot');
if ($topHeader.length) {
$headerSlot.append($topHeader);
var $menu = $('#vanipedia-mobile-user-menu');
if ($menu.length) $headerSlot.append($menu);
}
$contentSlot.append($vh);
if ($bottomBar.length) {
$footerSlot.append($bottomBar);
}
} else {
$stage = $('#vani-mobile-stage');
$rotatedBox = $('#vani-rotated-box');
$headerSlot = $('#vani-stage-header-slot');
$contentSlot = $('#vani-stage-content-slot');
$footerSlot = $('#vani-stage-footer-slot');
if (!$footerSlot.find('#vh-bottom-bar').length) {
var $b = $('#vh-bottom-bar');
if ($b.length) $footerSlot.append($b);
}
if (!$headerSlot.find('.vector-header-container, #mw-head, .header-container').length) {
var $h = $('.vector-header-container, #mw-head, .mw-header, .header-container').first();
if ($h.length) $headerSlot.append($h);
}
}
if ($headerSlot && !$headerSlot.find('.vanipedia-stage-title-link').length) {
var $st = $('<a class="vanipedia-stage-title-link" href="/wiki/Main_Page">Vanipedia</a>');
var $targetNav = $headerSlot.find('.vector-header-start, .minerva-header, .header-container');
if ($targetNav.length) {
$targetNav.first().children().first().after($st);
} else {
$headerSlot.prepend($st);
}
}
}
function updateLayout() {
var screenW = window.innerWidth;
var screenH = window.innerHeight;
var isMobile = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (screenW < 900) || (screenH < 900 && screenH > screenW);
if (!isMobile && screenW >= 1000 && screenW > screenH) {
if ($('#vani-mobile-stage').length) {
if ($topHeader && $topHeader.length && $headerParent) {
$headerParent.prepend($topHeader);
}
if ($vhParent) {
$vhParent.append($vh);
}
if ($bottomBar && $bottomBar.length && $footerParent) {
$footerParent.append($bottomBar);
}
var $m = $('#vanipedia-mobile-user-menu');
if ($m.length) $('body').append($m);
$('#vani-mobile-stage').remove();
document.body.classList.remove('has-vani-stage');
$vh.css({ 'transform': '', 'transform-origin': '', 'width': '' });
}
return;
}
ensureStage();
var isMobilePortrait = (screenH > screenW) && (screenW < 850);
var landscapeW = isMobilePortrait ? screenH : screenW;
var landscapeH = isMobilePortrait ? screenW : screenH;
$rotatedBox.css({
'width': landscapeW + 'px',
'height': landscapeH + 'px'
});
if (isMobilePortrait) {
$rotatedBox.removeClass('is-native-landscape').addClass('is-auto-landscape');
} else {
$rotatedBox.removeClass('is-auto-landscape').addClass('is-native-landscape');
}
var headerH = 50;
var footerH = 36;
var availableContentH = Math.max(120, landscapeH - headerH - footerH);
$contentSlot.css({
'height': availableContentH + 'px'
});
var baseW = 1200;
var baseH = 475;
var scaleW = landscapeW / baseW;
var scaleH = availableContentH / baseH;
var scale = Math.min(scaleW, scaleH);
if (scale > 0.85) scale = 0.85;
if (scale < 0.45) scale = 0.45;
var scaledWidth = baseW * scale;
var offsetX = Math.max(0, (landscapeW - scaledWidth) / 2);
$vh.css({
'transform': 'translate(' + offsetX.toFixed(1) + 'px, 0) scale(' + scale.toFixed(4) + ')',
'transform-origin': 'top left',
'width': baseW + 'px'
});
}
var touchStartY = 0;
var touchStartScroll = 0;
window.addEventListener('touchstart', function(e) {
if ($rotatedBox && $rotatedBox.hasClass('is-auto-landscape') && e.touches && e.touches.length === 1) {
touchStartY = e.touches[0].clientX;
if ($contentSlot && $contentSlot[0]) {
touchStartScroll = $contentSlot[0].scrollTop || 0;
}
}
}, { passive: true });
window.addEventListener('touchmove', function(e) {
if ($rotatedBox && $rotatedBox.hasClass('is-auto-landscape') && e.touches && e.touches.length === 1) {
var delta = touchStartY - e.touches[0].clientX;
if ($contentSlot && $contentSlot[0]) {
$contentSlot[0].scrollTop = touchStartScroll + delta;
}
}
}, { passive: true });
window.addEventListener('wheel', function(e) {
if ($rotatedBox && $rotatedBox.hasClass('is-auto-landscape') && $contentSlot && $contentSlot[0]) {
$contentSlot[0].scrollTop += e.deltaY;
}
}, { passive: true });
window.addEventListener('resize', updateLayout);
window.addEventListener('orientationchange', function() {
setTimeout(updateLayout, 150);
});
updateLayout();
}
$(document).ready(function() {
initUserMenuDropdown(); // V174: natural portrait/landscape flow; no forced rotation.
});
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(function() {
initUserMenuDropdown(); // V174: natural portrait/landscape flow; no forced rotation.
});
}
})();
/* ==========================================================================
STEP 119: EXACT DESKTOP SIDEBAR INJECTION INTO MOBILE BURGER DRAWER
1. Empties all irrelevant Minerva items (Nearby, Random, Settings, About).
2. Clones or fetches the exact desktop Vector 2022 sidebar (#vector-main-menu).
3. Tags each section with .vanipedia-sidebar-menu for the true desktop accordion.
4. Connects the 102 Languages live search box.
========================================================================== */
(function initExactMobileSidebar() {
function cleanAndInject($drawer, sidebarHtml) {
if ($drawer.data('vaniSidebarCleaned')) return;
$drawer.data('vaniSidebarCleaned', true);
// 1. Remove all default Minerva items (Nearby, Random, Personal, Hlist)
$drawer.find('#p-navigation, #p-personal, ul.hlist, .menu__item--nearby, .menu__item--random').remove();
// 2. Parse and filter desktop sidebar HTML
var $parsed = $('<div>').append($.parseHTML(sidebarHtml));
var $menus = $parsed.find('.vector-menu');
if (!$menus.length) {
$menus = $parsed.find('.portal, [id^="p-"]');
}
var $container = $('<div>', { id: 'vani-mobile-synced-sidebar' });
$menus.each(function(idx) {
var $menu = $(this).clone();
var menuId = $menu.attr('id') || '';
// Ignore personal or search menus if caught
if (menuId === 'p-personal' || menuId === 'p-search' || menuId === 'p-logo') return;
// Apply standard desktop class
$menu.addClass('vanipedia-sidebar-menu');
// Collapse by default, except the first section (Navigation)
if (idx === 0) {
$menu.removeClass('vanipedia-collapsed');
} else {
$menu.addClass('vanipedia-collapsed');
}
$container.append($menu);
});
// 3. Mount cleanly inside mobile drawer
$drawer.empty().append($container);
// 4. Initialize 102 Languages live search box in the cloned menu
initLanguageSearchInDrawer($container);
}
function initLanguageSearchInDrawer($container) {
var $sidebarMenu = $container.find('#p-102_Languages ul, [id*="102_Languages"] ul').first();
if ($sidebarMenu.length === 0) {
$container.find('.vector-menu-heading, .portal h3').each(function() {
if ($(this).text().trim().indexOf('102 Languages') !== -1) {
$sidebarMenu = $(this).closest('.vector-menu, .portal').find('ul').first();
}
});
}
if (!$sidebarMenu || $sidebarMenu.length === 0 || $sidebarMenu.find('#sidebarLanguageSearch').length) return;
var $searchLi = $('<li id="n-language-search" style="margin: 8px 10px; list-style: none;"></li>');
var $searchBox = $('<input type="text" id="sidebarLanguageSearch" placeholder="Search 102 Languages..." autocomplete="off" />');
var $resultsContainer = $('<ul id="sidebarLanguageResults" style="list-style: none; padding: 0; margin: 4px 0 0 0; max-height: 200px; overflow-y: auto; border: 1px solid #2c4c50; background: #ffffff; display: none;"></ul>');
$searchLi.append($searchBox).append($resultsContainer);
$sidebarMenu.prepend($searchLi);
var api = new mw.Api();
var languageList = [];
api.get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:Languages_with_Total_Pages',
cmlimit: 'max',
format: 'json'
}).done(function(data) {
if (data.query && data.query.categorymembers) {
languageList = data.query.categorymembers.map(function(member) {
return {
title: member.title,
url: mw.util.getUrl(member.title)
};
});
}
});
$searchBox.on('keyup', function(e) {
e.stopPropagation();
var term = $(this).val().toLowerCase().trim();
$resultsContainer.empty();
if (term.length === 0) {
$resultsContainer.hide();
return;
}
var matches = languageList.filter(function(item) {
return item.title.toLowerCase().indexOf(term) !== -1;
});
if (matches.length > 0) {
matches.slice(0, 15).forEach(function(item) {
var $li = $('<li>', { style: 'padding: 6px 12px; border-bottom: 1px solid #eaeff0;' });
var $a = $('<a>', {
href: item.url,
text: item.title,
style: 'color: #1b3033; text-decoration: none; display: block;'
});
$li.append($a);
$resultsContainer.append($li);
});
$resultsContainer.show();
} else {
$resultsContainer.html('<li style="padding: 6px 12px; color: #888; font-style: italic;">No languages found</li>').show();
}
});
$(document).on('click touchstart', function(e) {
if (!$(e.target).closest('#n-language-search').length) {
$resultsContainer.hide();
}
});
}
function setupMobileDrawer() {
var $drawer = $('#mw-mf-page-left');
if (!$drawer.length) return;
// Check if desktop sidebar is already in DOM
var $desktopSidebar = $('#vector-main-menu, .vector-sidebar-container #mw-panel');
if ($desktopSidebar.length && $desktopSidebar.find('.vector-menu').length) {
cleanAndInject($drawer, $desktopSidebar.html());
return;
}
// Check sessionStorage cache
var cached = null;
try { cached = sessionStorage.getItem('vani_desktop_sidebar_html'); } catch(e) {}
if (cached) {
cleanAndInject($drawer, cached);
return;
}
// Fetch desktop Vector 2022 page to get exact sidebar markup
var fetchUrl = (window.mw && mw.util && mw.util.getUrl('Main_Page', { useskin: 'vector-2022' })) ||
'/wiki/Main_Page?useskin=vector-2022';
$.ajax({
url: fetchUrl,
type: 'GET',
dataType: 'html',
success: function(response) {
try {
var $parsed = $('<div>').append($.parseHTML(response));
var $sidebar = $parsed.find('#vector-main-menu');
if (!$sidebar.length) {
$sidebar = $parsed.find('#mw-panel, .vector-sidebar-container');
}
if ($sidebar.length) {
var html = $sidebar.html();
try { sessionStorage.setItem('vani_desktop_sidebar_html', html); } catch(e) {}
cleanAndInject($drawer, html);
}
} catch(e) {
console.warn('[VANIPEDIA] Error extracting desktop sidebar:', e);
}
}
});
}
$(document).ready(setupMobileDrawer);
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(setupMobileDrawer);
}
})();
/* ==========================================================================
PARTICIPATING LANGUAGES: INLINE SVG FLAG INJECTOR (STEP 153)
MediaWiki CSS sanitizer strips data:image from stylesheets.
Injecting pure vector SVGs directly into DOM spans ensures 100% compliance.
========================================================================== */
function initLanguageFlags() {
var flags = {
'es': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 500" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="750" height="500" fill="#c60b1e"/><rect y="125" width="750" height="250" fill="#ffc400"/></svg>',
'fr': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="300" height="600" fill="#002654"/><rect x="300" width="300" height="600" fill="#fff"/><rect x="600" width="300" height="600" fill="#ce1126"/></svg>',
'de': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="5" height="1" fill="#000"/><rect y="1" width="5" height="1" fill="#d00"/><rect y="2" width="5" height="1" fill="#ffce00"/></svg>',
'it': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="1" height="2" fill="#008c45"/><rect x="1" width="1" height="2" fill="#f4f5f0"/><rect x="2" width="1" height="2" fill="#cd212a"/></svg>',
'ru': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="9" height="2" fill="#fff"/><rect y="2" width="9" height="2" fill="#0039a6"/><rect y="4" width="9" height="2" fill="#d52b1e"/></svg>',
'in': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="900" height="200" fill="#ff9933"/><rect y="200" width="900" height="200" fill="#fff"/><rect y="400" width="900" height="200" fill="#128807"/><circle cx="450" cy="300" r="80" fill="none" stroke="#000080" stroke-width="16"/><circle cx="450" cy="300" r="20" fill="#000080"/></svg>',
'br': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 700" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="1000" height="700" fill="#009b3a"/><polygon points="500,85 915,350 500,615 85,350" fill="#fedf00"/><circle cx="500" cy="350" r="175" fill="#002776"/></svg>',
'pl': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 5" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="8" height="2.5" fill="#fff"/><rect y="2.5" width="8" height="2.5" fill="#dc143c"/></svg>',
'bd': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="10" height="6" fill="#006a4e"/><circle cx="4.5" cy="3" r="2" fill="#f42a41"/></svg>',
'cn': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="900" height="600" fill="#de2910"/><polygon points="150,50 180,140 100,85 200,85 120,140" fill="#ffde00"/></svg>',
'jp': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="900" height="600" fill="#fff"/><circle cx="450" cy="300" r="180" fill="#bc002d"/></svg>',
'nl': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="9" height="2" fill="#ae1c28"/><rect y="2" width="9" height="2" fill="#fff"/><rect y="4" width="9" height="2" fill="#21468b"/></svg>',
'hr': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="6" height="1" fill="#f00"/><rect y="1" width="6" height="1" fill="#fff"/><rect y="2" width="6" height="1" fill="#00f"/></svg>',
'cz': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="900" height="300" fill="#fff"/><rect y="300" width="900" height="300" fill="#d7141a"/><polygon points="0,0 450,300 0,600" fill="#11457e"/></svg>',
'hu': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" style="width:100%;height:100%;display:block;border-radius:1.5px;"><rect width="6" height="1" fill="#ce2939"/><rect y="1" width="6" height="1" fill="#fff"/><rect y="2" width="6" height="1" fill="#477050"/></svg>'
};
for (var code in flags) {
var elements = document.getElementsByClassName('vh-flag-' + code);
for (var i = 0; i < elements.length; i++) {
if (!elements[i].childNodes.length) {
elements[i].innerHTML = flags[code];
}
}
}
}
$(document).ready(initLanguageFlags);
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(initLanguageFlags);
}

/* V179: one viewport-contained rollout at a time, with fixed-footer clearance. */
(function initViewportPortalRollouts() {

/* V187: prepared link pools, matching the other petals' rollout sampling.
Select 20 unique entries once per browser page load from each 120-link pool.
Sources: Vaniquotes Questions asked to Srila Prabhupada; public Vanipedia
Living Devotees Remembering Srila Prabhupada (snapshot: 2026-10-27).
Question links open Vaniquotes; remembrance links use the current wiki.
No runtime API requests or persistent browser cache are needed.
*/
var hookPools = {"questions":["And after you left the college, were you employed?","And that mental process, if you are working, is it a wrong mental process?","And this is your first visit to this (Paris) center?","Aren't there coverings of the 8 elements?","As the spirit soul is leaving the body, do you become older?","Babar was also a minister of his (Akbar)?","But how can that (real process is devotion) be scientifically presented? How can we accept that scientifically?","But how can we understand all this science and technology just by understanding Krsna, just by one book?","But is it (that worship made by trees and other lower animals) voluntary or involuntary?","But the innocent souls, they're not surrendered to Krsna?","Can one assume that matter is a kind of energy?","Could you explain further, purification of the senses? You said that you had to purify your senses before you can see God","Could you give them by name, the five kinds of liberation? In English?","Did Krsna describe to Arjuna the disciplic succession?","Do you have a name that you call... are they called students?","Do you have children? You just left them?","Do you spend a certain amount of time in each center? Do you yourself travel from one center to another?","Do you want to keep the checks or give them to him (Kirtanananda)?","Does any physical change take place in your body when you become Krsna conscious?","Does our line of succession go directly to Gaurakisora dasa Babaji or to Bhaktivinoda Thakura?","Excuse me, does that mean that people from other religions may..., it is not possible for them to achieve the highest perfection?","God has not created us imperfect?","How are the boys and girls to learn these things in manners of decorum and manners from the sannyasis, for example. How are they to offer respects to their godbrothers?","How are they feeling about it (temple), the Vrndavana Gosais?","How can a spirit become so ignorant?","How do you call devotion to the Lord?","How do you know (that is a bogus)? Have you met him (Guru Maharaji)?","How do you know if you have satisfied God?","How do you know that you know? May I ask this (we have to find out, we have to find out who can give the perfect knowledge)?","How do you want India to take this movement?","How is it that when our coat, size of the coat, changes because the body grows bigger the size of the coat is bigger?","How is our movement doing in India?","How old is this man (Prakasananda Sarasvati)?","I am thinking about this, Swamiji, that your Guru Maharaja is preaching through you, and you are preaching through them?","I mean, what is the idea in \"Even if it goes slowly, it must begin\"(so let them begin the foundation… Let it go on slowly, but it must begin)?","If a person experiences difficulty attaining a level of consciousness of God, how to counteract that?","If Krsna knows that we will suffer here in this material world if we come here, why does He let us go?","If we are given charge of the society, we should dismantle all this industry, all these cities...?","In what way we will live in that spiritual form?","Initiation (of Srila Prabhupada) was held at that Gaudiya Matha in Allahabad?","Introduced starting with ISKCON community (varnasrama-dharma should be introduced all over the world)?","Is everything done in our movement for preaching? Everything that is done in our movement is done for preaching?","Is he (Syamasundara's father is very rich man)?","Is it possible through Krsna consciousness to, in the supreme state, to be able to remember all that you were?","Is it true that there are more young people now in the world that are giving more serious thought to what life is really all about?","Is that differentiated (total material elements, mahat-tattva)?","Is that part of your income, to run a...(publishing house)?","Is that perfection possible in one life (our healthy life is to enjoy eternal life... So our human life should be utilized for attaining that perfectional stage)?","Is there any possible way of a balanced combination between spiritualism and materialism?","Is your spiritual master still alive?","Isn't it inevitable that it's going to occur, that the devolution occurs inevitably without anyone's being able to change it?","It becomes a belief rather than a logic now, then, for when we think about the God. You were saying everybody has father, so why God, in exception, He hasn't got a father?","It is possible to attain that affection of love for God... without taking part in this Krsna consciousness movement?","It's not dedicated to Krsna? The work is not dedicated to Krsna. How, specifically, how can you do this?","Krsna says to perform your sva-dharma, so how does one know what is his sva-dharma?","Last night you said that what is the meaning of the word \"nothing.\" That maya means \"nothing\"?","Maybe we will show Lord Caitanya's marriage? Is that nice to show?","No doubt, but what about the daily worship? Should we have Jagannatha deities if it's not possible for worshiping them? Should we have them just for the festival?","No, most of them, they have lived, a very short times. But still is it a fact that the soul is transplanted from one body to another body?","One thing that puzzles me is if what is practical for one person is not practical for another person, then what is the criterion of truth? Is truth relative?","Prabhupada, are all living entities, always under the protection at all times of the Supreme Lord, the Personality of Godhead, at all times?","Prabhupada, what does Balabhadra mean?","Sambodhana is to remove the evil, remove the bad part isn't it?","Say someone prepares something, like some prasadam for Krsna, but he does not make it so good?","She's (Mrs.Marchand) asking that since in these Western countries the families are so broken up and the women sometimes cannot find a qualified husband, what should she do?","So is that a fact, that he (Jesus Christ) went to India?","So then to love Krsna is unnatural?","So they're representatives (Guru Nanak, Muhammad, and other people)?","So why not eat, drink, and be merry because tomorrow you die?","Sometimes the question is put before us: \"You ask us not to eat meat, but you are eating vegetables. Do you think that is not violence?\"","Spiritual master is the mercy of God?","Srila Prabhupada, is the subtle bodies in the subtle world, are they made up of subtle atoms?","Srila Prabhupada, there was a fish on Laksmi's hand yesterday. The Deity in the temple, where Laksmi had her hand up like this, there was a fish here across her hand. What is this?","Swami, what do you think accounts for the..., your popularity, popularity of the..., the Krsna consciousness movement sweeping America?","Swamiji, so the government, the present government in the world...?","Swamiji? Are there people living on the moon now or were they in other yugas living there?","That desire is simple (he does not desire. He desires, and the matter helps. In the material world)?","That doesn't mean (in the spiritual world, it is full of variegatedness) that it is complex, Srila Prabhupada, yes?","That later-on Ramayana has caused some havoc... That later-on interpretation?","The body is matter, but still it is conscious as long as I am alive. So that means the life is consciousness?","The karmi and the jnani are both within the material world. Is the jnani considered more elevated than the karmi?","The literal meaning of sutra is a condensed statement, Prabhupada?","The school in Vrndavana, is this, I assume this is to be out there in the yard that they were clearing. When do you anticipate that will be built?","The shaved head, he's asking?","There are two, two functions in the tongue, one is (indistinct) and one is (indistinct)? So which one (indistinct). Preaching is a form of tapasya?","These days there are so many men who claim to have found the Absolute, who claim to be spiritual masters in their own way. How does one tell who is a bona fide spiritual master?","They have so many people in boxes in the hospitals they are keeping alive. So the big battle is raging whether or not they should pull out the plug?","They say, \"Then my chanting is useless? So I should stop?\" That's what they say","This would be the prescription for all people?","Today there's a little swelling in your... It seems to come and go… It seems to come and go. Is it bothering you?… Is it disturbing?... Really?","Upendra is here now. Should we give him the kismis to make?","We have a display over here in the window of your books, Srila Prabhupada... Would you like to see?","We have a spiritual body to serve Krsna?","Well, then, how is the individual soul eternal if it has a beginning?","Were some of the animals destined to survive through the destruction of other animals?","Were they liberated souls? The thief?","Were you just waiting to finish your books?","What about the poor, hungry, and the suffering bodies?","What does it (Gandharvapur) mean?","What happens to his consciousness which he has achieved as a man during that time which he is in the animal kingdom?","What happens to them (the devotees)?","What is an example of the throwing potency of maya?","What is good and what is bad, what is sinful activity?","What is the position of a soul that's in a sacred tree like a fig tree?","What is the purpose? What is the sense, if there is any, or does the very question (Why anything exists?) make sense?","What was that story of Caesar (scissors)?","What will the business of the trustees (for construction of Bombay) be?","Who are we, why are we here and where are we going?","Why is it seen that they (impersonalists) are making spiritual advancement?","Why is that better than loving your fellow man in the traditional bhakti-marga?","Why was it (Hindu-Muslim unity) the programs failed?","Why would someone who is not Krsna conscious have one hundred children? For example, why would someone like Dhrtarastra, who is not particularly Krsna conscious...?","Would, say, the cutting down of a plant, vegetable.... You are killing the growth there. Is that a living matter?","You conclude that when you become enlightened, you will see the God in form of human nature?","You don't think the patients have any mind of their own?","You have inquired about how we leave our body and enter into the Spiritual Sky?","You think we can't help people?","You were very well known in Vrndavana before you came? Because you were writing or…?… Or because of your ambition to come to the West?","You're feeling a little stronger today, Srila Prabhupada?","Your Divine Grace, since religion is one, do you think man will enter into a golden age in which he will accept one God?"],"memories":["Abhirama das Remembers Srila Prabhupada","Adideva das Remembers Srila Prabhupada","Aditi devi dasi Remembers Srila Prabhupada","Amarendra das Remembers Srila Prabhupada","Anada devi dasi Remembers Srila Prabhupada","Anandamaya das Remembers Srila Prabhupada","Anuttama das Remembers Srila Prabhupada","Arjuna das Remembers Srila Prabhupada","Armarendra das Remembers Srila Prabhupada","Atreya Rsi das Remembers Srila Prabhupada","Bala Gopal devi dasi Remembers Srila Prabhupada","Balai devi dasi Remembers Srila Prabhupada","Batu Gopal das Remembers Srila Prabhupada","Bhakta das Remembers Srila Prabhupada","Bhakti Gauravani Goswami Remembers Srila Prabhupada","Bhavatarini devi dasi Remembers Srila Prabhupada","Bhima das Remembers Srila Prabhupada","Bhurijana das Remembers Srila Prabhupada","Brahmatirtha das Remembers Srila Prabhupada","Brajendranandana das Remembers Srila Prabhupada","Candramauli Swami Remembers Srila Prabhupada","Chaitanyachandra das Remembers Srila Prabhupada","Chitralekha devi dasi Remembers Srila Prabhupada","Dadhi-harta das Remembers Srila Prabhupada","Dayanidhi das Remembers Srila Prabhupada","Dhananjaya das Remembers Srila Prabhupada","Dharmatma das Remembers Srila Prabhupada","Dhristadyumna das Remembers Srila Prabhupada","Dhruva Maharaja das Remembers Srila Prabhupada","Dina Bandhu das Remembers Srila Prabhupada","Dinatarine devi dasi Remembers Srila Prabhupada","Dravinaksha das Remembers Srila Prabhupada","Drumila das Remembers Srila Prabhupada","Gadi das Remembers Srila Prabhupada","Gaura das Remembers Srila Prabhupada","Gokulananda das Remembers Srila Prabhupada","Gokularanajana das Remembers Srila Prabhupada","Gopinath Acharya das Remembers Srila Prabhupada","Guru Gauranga das Remembers Srila Prabhupada","Guruprasad das Remembers Srila Prabhupada","Haravapuh das Remembers Srila Prabhupada","Harikesa das Remembers Srila Prabhupada","Jagadisa das Remembers Srila Prabhupada","Jagat Guru Swami Remembers Srila Prabhupada","Jagat Purusa das Remembers Srila Prabhupada","Jahnava devi dasi Remembers Srila Prabhupada","Janaki devi dasi 01 Remembers Srila Prabhupada","Janaki devi dasi Remembers Srila Prabhupada 02","Janananda Swami Remembers Srila Prabhupada","Jaya Jagadish das Remembers Srila Prabhupada","Jivananda das Remembers Srila Prabhupada","Jyestha devi dasi Remembers Srila Prabhupada","Kamalini devi dasi Remembers Srila Prabhupada","Kanti devi dasi Remembers Srila Prabhupada","Karanodakasayi Visnu das Remembers Srila Prabhupada","Kaushalya devi dasi Remembers Srila Prabhupada","Kedara das Remembers Srila Prabhupada","Kesava Bharati Goswami Remembers Srila Prabhupada","Ksudi das Remembers Srila Prabhupada","Kulashekhara das Remembers Srila Prabhupada","Madan Mohan Mohini devi dasi Remembers Srila Prabhupada","Madhava Gosh das Remembers Srila Prabhupada","Maha devi dasi Remembers Srila Prabhupada","Mahakratu das Remembers Srila Prabhupada","Mahamaya devi dasi Remembers Srila Prabhupada","Mahatma das Remembers Srila Prabhupada","Mandapa das Remembers Srila Prabhupada","Mishra Bhagavan das Remembers Srila Prabhupada","Mohan Gopal das Remembers Srila Prabhupada","Mondakini devi dasi Remembers Srila Prabhupada","Nanda devi dasi Remembers Srila Prabhupada","Narahari 02 das Remembers Srila Prabhupada","Nayanabhiram das Remembers Srila Prabhupada","Niranjan das Remembers Srila Prabhupada","Nischintya das Remembers Srila Prabhupada","Pancadravida Swami Remembers Srila Prabhupada","Pavamana das Remembers Srila Prabhupada","Prabhavishnu Swami Remembers Srila Prabhupada","Prafulla devi dasi Remembers Srila Prabhupada","Pragosh das Remembers Srila Prabhupada","Prakashatma das Remembers Srila Prabhupada","Pratapana das Remembers Srila Prabhupada","Radha Krsna das Remembers Srila Prabhupada","Radha Kunda devi dasi Remembers Srila Prabhupada","Radhanatha Swami Remembers Srila Prabhupada","Rajashekar das Remembers Srila Prabhupada","Rambhoru devi dasi Remembers Srila Prabhupada","Ramprasad das Remembers Srila Prabhupada","Ranganath das Remembers Srila Prabhupada","Rangavati devi dasi Remembers Srila Prabhupada","Rucira devi dasi Remembers Srila Prabhupada","Sacinandana Swami Remembers Srila Prabhupada","Sahadevi devi dasi Remembers Srila Prabhupada","Sandamini devi dasi Remembers Srila Prabhupada","Sankarshan das Remembers Srila Prabhupada","Sarupananda das Remembers Srila Prabhupada","Satarupa devi dasi Remembers Srila Prabhupada","Satsvarupa das Goswami Remembers Srila Prabhupada","Satyanarayana das Remembers Srila Prabhupada","Sivananda das Remembers Srila Prabhupada","Sivarama Swami Remembers Srila Prabhupada","Sriniketana das Remembers Srila Prabhupada","Srutadev das Remembers Srila Prabhupada","Suddha Jiva das Remembers Srila Prabhupada","Sukhada devi dasi Remembers Srila Prabhupada","Surabhi das Remembers Srila Prabhupada","Suresvara das Remembers Srila Prabhupada","Susan Witty Remembers Srila Prabhupada","Tamohara das Remembers Srila Prabhupada","Tattvavit das Remembers Srila Prabhupada","Tota Gopinatha das Remembers Srila Prabhupada","Vaishesika das Remembers Srila Prabhupada","Vedamata devi dasi Remembers Srila Prabhupada","Vedavyas das Remembers Srila Prabhupada","Visakha devi dasi Remembers Srila Prabhupada","Vishvadevi devi dasi Remembers Srila Prabhupada","Vrindavan das Remembers Srila Prabhupada","Vrndavenesvari devi dasi Remembers Srila Prabhupada","Yadubara das Remembers Srila Prabhupada","Yogindra Vandana das Remembers Srila Prabhupada"]};
var hookSelections = Object.create(null);

function shuffleHooks(items) {
var copy = items.slice();
for (var i = copy.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var value = copy[i]; copy[i] = copy[j]; copy[j] = value;
}
return copy;
}
function getHookSelection(key) {
if (!Object.prototype.hasOwnProperty.call(hookSelections, key)) {
hookSelections[key] = shuffleHooks(hookPools[key] || []).slice(0, 20);
}
return hookSelections[key];
}
function populateHookLists(root) {
['questions', 'memories'].forEach(function (key) {
var card = root.querySelector('.vp-portal-card[data-vp-rollout="' + key + '"]');
var panel = card && card.querySelector('.vp-rollout-panel');
if (!panel || panel.dataset.vpHooksReady === '1') return;
var fragment = document.createDocumentFragment();
var heading = document.createElement('span');
heading.className = 'vp-rollout-heading';
heading.textContent = key === 'questions' ? 'Questions and Answers' : 'Disciples Remember';
fragment.appendChild(heading);
var list = document.createElement('span');
list.className = 'vp-rollout-options';
function addLink(title, label) {
var row = document.createElement('span');
var link = document.createElement('a');
var host = key === 'questions' ? 'https://vaniquotes.org' : '';
link.href = host + '/wiki/' + encodeURIComponent(title.replace(/ /g, '_'));
link.textContent = label;
link.title = title;
if (key === 'questions') {
link.target = '_blank';
link.rel = 'noopener noreferrer';
}
row.appendChild(link);
list.appendChild(row);
}
if (key === 'questions') {
addLink('Category:Questions asked to Srila Prabhupada', 'Browse all questions');
} else {
addLink('Category:Living Devotees Remembering Srila Prabhupada', 'Browse all remembrances');
}
getHookSelection(key).forEach(function (title) {
var label = key === 'memories' ? title.replace(/ Remembers Srila Prabhupada$/, '') : title;
addLink(title, label);
});
fragment.appendChild(list);
// Keep the original panel node and its existing hover/mobile behavior.
panel.replaceChildren(fragment);
panel.dataset.vpHooksReady = '1';
});
}

/* V189: put the full index first in every other card's rollout too. */
function putBrowseAllFirst(root) {
var indexes = [
{ key:'articles', existing:'.vp-article-all', title:'Category:Vanipedia Gemini - Articles', label:'Browse all articles A–Z' },
{ key:'media', existing:'.vp-media-all', title:'Category:Srila Prabhupada in the Media', label:'Browse all media' },
{ key:'timeline', title:"Timeline of Srila Prabhupada's Life", label:'Browse the full timeline' },
{ key:'languages', title:'Category:Participating Languages - Main Pages', label:'Browse all languages' }
];
indexes.forEach(function (index) {
var card = root.querySelector('.vp-portal-card[data-vp-rollout="' + index.key + '"]');
var panel = card && card.querySelector('.vp-rollout-panel');
if (!panel || panel.querySelector('.vp-browse-all')) return;
var row = index.existing && panel.querySelector(index.existing);
if (!row) {
row = document.createElement('span');
var link = document.createElement('a');
link.href = '/wiki/' + encodeURIComponent(index.title.replace(/ /g, '_'));
link.textContent = index.label;
row.appendChild(link);
}
row.classList.add('vp-browse-all');
row.style.display = 'block';
row.style.margin = '0 0 8px';
var heading = panel.querySelector('.vp-rollout-heading');
panel.insertBefore(row, heading ? heading.nextSibling : panel.firstChild);
});
}
function init() {
var root = document.querySelector("body.page-Main_Page #vani-home.vp-static-home");
if (!root) return;
populateHookLists(root);
putBrowseAllFirst(root);
if (root.dataset.vpRolloutsReady === "1") return;
root.dataset.vpRolloutsReady = "1";
var cards = Array.prototype.slice.call(root.querySelectorAll(".vp-portal-card[data-vp-rollout]"));
var mobile = function () {
return window.matchMedia && window.matchMedia("(max-width:700px), (hover:none), (pointer:coarse)").matches;
};
function setExpanded(card, expanded) {
var toggle = card.querySelector(".vp-rollout-toggle");
if (toggle) toggle.setAttribute("aria-expanded", expanded ? "true" : "false");
}
function close(card) {
card.classList.remove("is-open", "is-hover-open");
var panel = card.querySelector(".vp-rollout-panel");
if (panel) {
panel.classList.remove("is-viewport-panel");
panel.style.removeProperty("--vp-panel-top");
panel.style.removeProperty("--vp-panel-left");
panel.style.removeProperty("--vp-panel-width");
if (panel.dataset.vpHooksReady === '1') {
panel.style.removeProperty('max-height');
panel.style.removeProperty('overflow-y');
}
}
setExpanded(card, false);
}
function closeOthers(keep) {
cards.forEach(function (card) { if (card !== keep) close(card); });
}
// V188: keep long random lists attached to the browse control and scroll inside them.
function positionRandomHookPanel(card, panel) {
var key = card.getAttribute('data-vp-rollout');
if (key !== 'questions' && key !== 'memories') return false;
var toggle = card.querySelector('.vp-rollout-toggle');
if (!toggle) return false;
var control = toggle.getBoundingClientRect();
var cardBox = card.getBoundingClientRect();
var header = document.querySelector('header.vector-header, header.mw-header');
var footer = document.getElementById('vh-bottom-bar');
var topLimit = 12;
var bottomLimit = window.innerHeight - 76;
if (header) {
var headerBox = header.getBoundingClientRect();
if (headerBox.top < window.innerHeight && headerBox.bottom > 0) {
topLimit = Math.max(topLimit, headerBox.bottom + 8);
}
}
if (footer) {
var footerBox = footer.getBoundingClientRect();
if (footerBox.top > topLimit && footerBox.top < window.innerHeight) {
bottomLimit = footerBox.top - 8;
}
}
var below = Math.max(0, bottomLimit - control.bottom);
var above = Math.max(0, control.top - topLimit);
var openBelow = below >= 120 || below >= above;
var room = openBelow ? below : above;
var height = Math.min(420, room);
var width = Math.min(panel.getBoundingClientRect().width || 290, window.innerWidth - 24);
var left = Math.max(12, Math.min(cardBox.left, window.innerWidth - width - 12));
panel.style.setProperty('max-height', height + 'px', 'important');
panel.style.setProperty('overflow-y', 'auto', 'important');
var actualHeight = Math.min(panel.getBoundingClientRect().height, height);
var top = openBelow ? control.bottom : control.top - actualHeight;
top = Math.max(topLimit, Math.min(top, bottomLimit - actualHeight));
panel.style.setProperty('--vp-panel-width', width + 'px');
panel.style.setProperty('--vp-panel-left', left + 'px');
panel.style.setProperty('--vp-panel-top', top + 'px');
return true;
}
function place(card) {
var panel = card.querySelector(".vp-rollout-panel");
if (!panel || mobile() || (!card.classList.contains("is-open") && !card.classList.contains("is-hover-open"))) return;
panel.classList.add("is-viewport-panel");
if (positionRandomHookPanel(card, panel)) return;
var anchor = card.getBoundingClientRect();
var width = Math.min(panel.getBoundingClientRect().width || 290, window.innerWidth - 24);
var height = panel.getBoundingClientRect().height || 280;
var topLimit = 12;
var bottomLimit = window.innerHeight - 76;
var side = card.getAttribute("data-vp-rollout-side");
var left;
var top;
if (side === "left" || side === "right") {
var preferredLeft = side === "left" ? anchor.left - width : anchor.right;
left = Math.max(12, Math.min(preferredLeft, window.innerWidth - width - 12));
top = Math.max(topLimit, Math.min(anchor.top, bottomLimit - height));
} else {
left = Math.max(12, Math.min(anchor.left, window.innerWidth - width - 12));
var below = bottomLimit - anchor.bottom;
var above = anchor.top - topLimit;
if (height <= below) top = anchor.bottom;
else if (height <= above) top = anchor.top - height;
else top = Math.max(topLimit, Math.min(anchor.bottom, bottomLimit - height));
}
panel.style.setProperty("--vp-panel-width", width + "px");
panel.style.setProperty("--vp-panel-left", left + "px");
panel.style.setProperty("--vp-panel-top", top + "px");
}
function open(card, mode) {
closeOthers(card);
card.classList.toggle("is-hover-open", mode === "hover");
card.classList.toggle("is-open", mode === "pinned");
setExpanded(card, true);
window.requestAnimationFrame(function () { place(card); });
}
cards.forEach(function (card) {
if (card.dataset.vpRolloutReady === "1") return;
card.dataset.vpRolloutReady = "1";
var toggle = card.querySelector(".vp-rollout-toggle");
if (!toggle) return;
card.addEventListener("pointerdown", function (event) {
card.dataset.pointerTriggeredFocus = event.pointerType || "pointer";
window.setTimeout(function () { delete card.dataset.pointerTriggeredFocus; }, 0);
});
card.addEventListener("pointerenter", function (event) {
if (event.pointerType === "mouse" && !mobile() && !card.classList.contains("is-open")) open(card, "hover");
});
card.addEventListener("pointerleave", function (event) {
if (card.contains(event.relatedTarget)) return;
if (card.classList.contains("is-open") || card.contains(document.activeElement)) return;
close(card);
});
card.addEventListener("focusin", function () {
if (!card.classList.contains("is-open")) open(card, "hover");
});
card.addEventListener("focusout", function () {
window.setTimeout(function () {
if (!card.contains(document.activeElement) && !card.matches(":hover")) close(card);
}, 0);
});
toggle.addEventListener("click", function (event) {
event.preventDefault();
var wasPinned = card.classList.contains("is-open");
if (wasPinned) close(card);
else open(card, "pinned");
});
toggle.addEventListener("keydown", function (event) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
if (card.classList.contains("is-open")) close(card);
else open(card, "pinned");
} else if (event.key === "Escape") {
close(card);
toggle.blur();
}
});
});
document.addEventListener("pointerdown", function (event) {
if (root.contains(event.target)) return;
cards.forEach(close);
});
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") cards.forEach(close);
});
function repositionOpen() {
cards.forEach(function (card) {
if (card.classList.contains("is-open") || card.classList.contains("is-hover-open")) place(card);
});
}
window.addEventListener("resize", repositionOpen, { passive: true });
window.addEventListener("scroll", repositionOpen, { passive: true, capture: true });
}
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);
else init();
if (window.mw && mw.hook) mw.hook("wikipage.content").add(init);
})();

/* V182: restore original desktop Vanipedia top-bar branding and sister-petal links. */
/* ==========================================================
/* ==========================================================
/* ==========================================================
/* ==========================================================
/* ==========================================================
VANIPEDIA TOP BAR CONTROLLER (Step 172: Guaranteed Vanipedia Title & Icons on Mobile)
========================================================== */
(function() {
var titleText = "VANIPEDIA - ŚRĪLA PRABHUPĀDA'S VANI-TEMPLE";
var targetUrl = "https://vanipedia.org";
function removeGlobalSiteNotice() {
$('#siteNotice, #localNotice, .vector-sitenotice-container, #mainbanner, .sitenotice, .mw-sitenotice, .anonnotice, .dismissable-notice, #centralNotice').remove();
}
function createHomeLink() {
var homeSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>';
return $('<a>', {
id: 'vanipedia-topbar-home-link',
href: '/',
title: 'Vanipedia Home / Entry Portal',
'aria-label': 'Home',
class: 'vanipedia-topbar-home'
}).html('<span class="vanipedia-home-icon">' + homeSvg + '</span><span class="vanipedia-home-text">Home</span>');
}
function createCenterBlock() {
var blockStyle = 'position:absolute !important; left:50% !important; top:54% !important; transform:translate(-50%, -50%) !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; white-space:nowrap !important; z-index:10 !important; pointer-events:auto !important;';
var titleStyle = 'position:static !important; transform:none !important; display:block !important; font-family:"Cinzel", Georgia, serif !important; font-size:18px !important; font-weight:700 !important; letter-spacing:2px !important; color:#f5d77f !important; text-decoration:none !important; text-shadow:0 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(245,215,127,0.3) !important; line-height:1.25 !important; margin:0 0 4px 0 !important; padding:0 !important; user-select:text !important;';
var vanisevaWrapStyle = 'position:static !important; transform:none !important; display:block !important; margin:0 0 4px 0 !important; line-height:1.2 !important;';
var vanisevaLinkStyle = 'color:#f5d77f !important; font-family:"Noto Serif", Georgia, serif !important; font-size:12.5px !important; font-style:normal !important; font-weight:500 !important; letter-spacing:0.35px !important; text-decoration:none !important; border:0 !important; background:none !important; outline:none !important; padding:0 !important; border-radius:0 !important; cursor:pointer !important; display:inline-block !important; transition:all 0.18s ease !important;box-shadow:none !important;';
var sisterWrapStyle = 'position:static !important; transform:none !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:14px !important; margin:0 !important; line-height:1.2 !important;';
var sisterLinkStyle = 'color:#f5d77f !important; font-family:"Noto Serif", Georgia, serif !important; font-size:13px !important; font-weight:600 !important; letter-spacing:0.4px !important; text-decoration:none !important; border:none !important; border-bottom:none !important; outline:none !important; padding:2px 8px !important; border-radius:3px !important; display:inline-flex !important; align-items:center !important; cursor:pointer !important; transition:all 0.18s ease !important;';
var sepStyle = 'color:rgba(245,215,127,0.4) !important; font-size:11px !important; line-height:1 !important; user-select:none !important;';
var $block = $('<div>', {
id: 'vanipedia-topbar-center-block',
class: 'vanipedia-topbar-center-block',
style: blockStyle
});
var $title = $('<div>', {
id: 'vanipedia-topbar-title',
class: 'vanipedia-topbar-main-title',
style: titleStyle,
text: titleText
});
var $vaniseva = $('<div>', {
class: 'vanipedia-topbar-vaniseva-title',
style: vanisevaWrapStyle
}).html('<a href="https://vaniseva.org" target="_blank" rel="noopener noreferrer" title="Vaniseva" style="' + vanisevaLinkStyle + '">Collaborate with us to invoke and fully manifest Śrīla Prabhupāda's Vani-presence</a>');
var $sisterLinks = $('<div>', {
class: 'vanipedia-topbar-sister-links',
style: sisterWrapStyle
}).html(
'<a href="https://vanisource.org" target="_blank" rel="noopener noreferrer" class="vanipedia-topbar-sister-link" title="Vanisource" style="' + sisterLinkStyle + '">vanisource.org</a>' +
'<span class="vanipedia-topbar-sister-sep" aria-hidden="true" style="' + sepStyle + '">•</span>' +
'<a href="https://vaniquotes.org" target="_blank" rel="noopener noreferrer" class="vanipedia-topbar-sister-link" title="Vaniquotes" style="' + sisterLinkStyle + '">vaniquotes.org</a>' +
'<span class="vanipedia-topbar-sister-sep" aria-hidden="true" style="' + sepStyle + '">•</span>' +
'<a href="https://vanimedia.org" target="_blank" rel="noopener noreferrer" class="vanipedia-topbar-sister-link" title="Vanimedia" style="' + sisterLinkStyle + '">vanimedia.org</a>'
);
$block.append($title, $vaniseva, $sisterLinks);
return $block;
}
function updateTopBar() {
removeGlobalSiteNotice();
$('#vanipedia-topbar-center-block, #vanipedia-topbar-center-block-mobile, #vanipedia-topbar-title, #vanipedia-topbar-title-mobile, #vanipedia-topbar-title-link, #vanipedia-topbar-center-title, #vanipedia-topbar-home-link, #vanipedia-topbar-sister-links, #vanipedia-topbar-sister-links-mobile, .vanipedia-topbar-sister-links, .vanipedia-topbar-center-block').remove();
$('.vector-header-container').css({
'background': 'transparent',
'background-color': 'transparent',
'border': 'none',
'box-shadow': 'none',
'padding': '0',
'margin': '0',
'min-height': '0',
'height': 'auto',
'width': '100%',
'max-width': '100%'
});
var isMobile = (window.innerWidth <= 999) || $('body').hasClass('skin-minerva') || $('body').hasClass('skin-vector-mobile') || $('.minerva-header').length > 0;
var $header = $('header.mw-header, header.vector-header').not('.minerva-header').first();
if (!$header.length && !$('body').hasClass('skin-minerva') && !$('.minerva-header').length) {
$header = $('#mw-head, header').not('.minerva-header').filter(':visible').first();
}
if ($header.length) {
$header.css({
'min-height': isMobile ? '52px' : '86px',
'height': isMobile ? '52px' : 'auto',
'max-height': isMobile ? '52px' : 'none',
'padding': isMobile ? '0 10px' : '10px 24px',
'background-color': '#345B63',
'border-bottom': '2px solid #b1873d',
'box-shadow': '0 4px 18px rgba(0,0,0,0.35)',
'position': 'relative',
'display': 'flex',
'flex-wrap': 'nowrap',
'align-items': 'center',
'justify-content': 'space-between',
'box-sizing': 'border-box',
'width': '100%',
'max-width': '100%'
});
if (!isMobile) {
$header.append(createCenterBlock());
}
var $search = $header.find('.vector-header-start #p-search, #p-search');
if ($search.length) {
$search.after(createHomeLink());
} else if ($header.find('.vector-header-start').length) {
$header.find('.vector-header-start').append(createHomeLink());
}
}
var $minervaHeader = $('.minerva-header');
if ($minervaHeader.length) {
// 1. Ensure "Vanipedia" Title Link exists with text in the branding box
var $branding = $minervaHeader.find('.branding-box');
if ($branding.length) {
var $brandLink = $branding.find('a');
if ($brandLink.length) {
if (!$brandLink.text().trim()) {
$brandLink.html('<span>Vanipedia</span>');
}
} else {
$branding.html('<a href="/wiki/Main_Page"><span>Vanipedia</span></a>');
}
} else {
var brandHtml = '<div class="branding-box"><a href="/wiki/Main_Page"><span>Vanipedia</span></a></div>';
var $burger = $minervaHeader.find('#mw-mf-main-menu-button, .navigation-drawer.toggle-list').first();
if ($burger.length) {
$burger.after(brandHtml);
} else {
$minervaHeader.prepend(brandHtml);
}
}
// 2. Ensure Home Link is inserted cleanly
var $minervaForm = $minervaHeader.find('.minerva-search-form, #searchform').first();
if ($minervaForm.length && !$minervaHeader.find('#vanipedia-topbar-home-link').length) {
$minervaForm.before(createHomeLink());
} else if (!$minervaHeader.find('#vanipedia-topbar-home-link').length) {
var $minervaUser = $minervaHeader.find('.minerva-user-navigation, #ca-mytalks').first();
if ($minervaUser.length) {
$minervaUser.before(createHomeLink());
} else {
$minervaHeader.append(createHomeLink());
}
}
$minervaHeader.css({
'flex-wrap': 'nowrap',
'height': '52px',
'min-height': '52px',
'max-height': '52px',
'padding': '0 10px',
'display': 'flex',
'align-items': 'center',
'justify-content': 'space-between',
'box-sizing': 'border-box'
});
}
var $stageHeader = $('#vani-stage-header-slot');
if ($stageHeader.length && !$stageHeader.find('.vanipedia-topbar-center-block').length) {
var $stageSearch = $stageHeader.find('#p-search, .search-box, .minerva-search-form').first();
if ($stageSearch.length && !$stageHeader.find('#vanipedia-topbar-home-link').length) {
$stageSearch.after(createHomeLink());
}
if (!isMobile) {
$stageHeader.append(createCenterBlock());
}
}
var $stickyTitle = $('#vector-sticky-header .vector-sticky-header-title, #vector-sticky-header .vector-sticky-header-context-bar .mw-headline');
if ($stickyTitle.length) {
$stickyTitle.html('<a href="' + targetUrl + '" style="color: inherit; text-decoration: none;">' + titleText + '</a>');
}
}
$(function() {
removeGlobalSiteNotice();
});
var topbarResizeTimer;
$(window).on('resize orientationchange', function() {
clearTimeout(topbarResizeTimer);
topbarResizeTimer = setTimeout(updateTopBar, 150);
});
$(document).ready(updateTopBar);
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(updateTopBar);
}
})();
// ==========================================================================
/* 2026-11-11 (Vamshi Krishna): keep the header and footer from overlapping at in-between widths.
- Header: the centre block (site title, Vaniseva line, petal links) is hidden only when it would
actually run over the search box, Home link or the user links.
- Footer: on wide screens the social icons are hidden when they would cover Donate, and the links
are centred. On narrow screens the right edge of the links fades while more are off-screen.
The skin sets these styles inline with !important (and re-applies the footer layout on every resize), so
this runs after it, and Common.css cannot override them. */
(function () {
function leaves(el) {
var out = [];
el.querySelectorAll('*').forEach(function (e) {
if (!e.children.length) {
var r = e.getBoundingClientRect();
if (r.width && r.height) out.push(r);
}
});
return out;
}
function clash(a, b) {
for (var x = 0; x < a.length; x++) {
for (var y = 0; y < b.length; y++) {
var r = a[x], s = b[y];
if (Math.min(r.right, s.right) - Math.max(r.left, s.left) > 0 &&
Math.min(r.bottom, s.bottom) - Math.max(r.top, s.top) > 2) return true;
}
}
return false;
}
function fixMidWidths() {
var w = window.innerWidth;
var header = document.querySelector('header.vector-header, header.mw-header');
document.querySelectorAll('.vanipedia-topbar-center-block').forEach(function (b) {
b.style.setProperty('display', 'flex', 'important');
if (w < 1000 || !header) return;
var theirs = [];
header.querySelectorAll('#p-search, #vanipedia-topbar-home-link, .vector-header-end').forEach(function (e) {
if (!b.contains(e)) theirs = theirs.concat(leaves(e));
});
if (clash(leaves(b), theirs)) b.style.setProperty('display', 'none', 'important');
});

var bar = document.getElementById('vh-bottom-bar');
if (!bar) return;
var left = bar.querySelector('.vh-bottom-bar-left-space');
var right = bar.querySelector('.vh-bottom-bar-right-space');
var inner = bar.querySelector('.vh-bottom-bar-inner');
var nav = bar.querySelector('.vh-bottom-nav-links');
var social = bar.querySelector('.vh-bottom-social-links');
if (!left || !right || !inner || !nav || !social) return;
// The icons measure 0 px until their images load, so check again once they have.
bar.querySelectorAll('img').forEach(function (img) {
if (!img.complete && !img.dataset.fixBound) {
img.dataset.fixBound = '1';
img.addEventListener('load', schedule);
}
});
if (w >= 1000) {
// The footer is kept between resizes here, so clear a fade left over from a narrow window.
nav.style.removeProperty('-webkit-mask-image');
nav.style.removeProperty('mask-image');
var nr = nav.getBoundingClientRect(), sr = social.getBoundingClientRect();
if (sr.width && (nr.right + 8 > sr.left || sr.right > w)) {
left.style.setProperty('display', 'none', 'important');
right.style.setProperty('display', 'none', 'important');
inner.style.setProperty('justify-content', 'center', 'important');
}
return;
}
var updateFade = function () {
var more = nav.scrollLeft + nav.clientWidth < nav.scrollWidth - 2;
var mask = more ? 'linear-gradient(to right, #000 calc(100% - 40px), transparent)' : 'none';
nav.style.setProperty('-webkit-mask-image', mask, 'important');
nav.style.setProperty('mask-image', mask, 'important');
};
updateFade();
if (!nav.dataset.fadeBound) {
nav.dataset.fadeBound = '1';
nav.addEventListener('scroll', updateFade, { passive: true });
}
}
var pending;
// Run after the skin's own header and footer setup (which re-runs on resize and 150 ms after it).
function schedule() { clearTimeout(pending); pending = setTimeout(fixMidWidths, 300); }
$(schedule);
$(window).on('resize orientationchange', schedule);
// This script often starts after the page has loaded, so also re-check when the fonts are ready.
if (document.fonts && document.fonts.ready) document.fonts.ready.then(schedule);
})();

/* VaniSearch Popup Launcher - Desktop & Mobile */
(function() {
var lockPopupSubmitUntil = 0;

// Override global open_modal() so even if an inline HTML attribute calls it on keydown,
// it cannot focus #mspu_txt_input until after the Enter key is released.
window.open_modal = function() {
var ori = document.getElementById('ori_search') || document.getElementById('searchInput');
var modal = document.getElementById('mspu_div_wrapper');
var inpSearch = document.getElementById('mspu_txt_input');
var submitBtn = document.getElementById('mspu_but_submit');

if (!modal || !inpSearch) return false;

lockPopupSubmitUntil = Date.now() + 500;

// Temporarily disable the popup's submit button for 500ms so a held Enter key cannot trigger it
if (submitBtn) {
submitBtn.disabled = true;
setTimeout(function() { submitBtn.disabled = false; }, 500);
}

if (typeof window.sync_but_search === 'function') {
try { window.sync_but_search(); } catch (e) {}
}

if (ori) {
inpSearch.value = ori.value;
ori.blur();
}

modal.style.display = 'block';

// Delay focusing the popup input until the Enter keystroke is completely finished
setTimeout(function() {
inpSearch.focus();
}, 250);

return false;
};

function protectModalForm() {
var modal = document.getElementById('mspu_div_wrapper');
if (!modal || modal.dataset.vaniHardLocked) return;
modal.dataset.vaniHardLocked = 'true';

// Remove any injected magnifying glass inside the popup that might have a redirect attached
var strayBtns = modal.querySelectorAll('.vani-search-trigger-btn');
strayBtns.forEach(function(b) { b.remove(); });

var mForm = modal.querySelector('form');
if (mForm) {
// Completely block form submission if the modal opened less than 500ms ago
mForm.addEventListener('submit', function(e) {
if (Date.now() < lockPopupSubmitUntil) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}, true);
}

var inpSearch = document.getElementById('mspu_txt_input');
if (inpSearch) {
// Strip name="search" while locked or stop Enter propagation during the lock window
['keydown', 'keypress', 'keyup'].forEach(function(evt) {
inpSearch.addEventListener(evt, function(e) {
if (Date.now() < lockPopupSubmitUntil && (e.key === 'Enter' || e.keyCode === 13)) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}, true);
});
}
}

function buildCleanSearchBox(oldElement, isMobile) {
var wrap = document.createElement('div');
wrap.className = isMobile ? 'vani-mobile-search-wrap' : 'vani-desktop-search-wrap';
wrap.style.cssText = isMobile
? 'flex:1 1 auto !important; display:flex !important; align-items:center !important; position:relative !important; margin:0 10px !important; z-index:999999 !important;'
: 'display:flex !important; align-items:center !important; position:relative !important; width:100% !important; max-width:280px !important; z-index:999999 !important;';

var inp = document.createElement('input');
inp.type = 'text'; // Must NOT be 'search' so older Common.js selectors ignore it
inp.id = 'ori_search';
// Intentionally NO inp.name = 'search' so older Common.js input[name="search"] selectors ignore it!
inp.className = 'vani-clean-search-input';
inp.placeholder = 'Search Vanipedia';
inp.autocomplete = 'off';
inp.style.cssText = 'width:100% !important; height:32px !important; background:#1f3e45 !important; background-image:none !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:1.5px solid #f5d77f !important; border-radius:16px !important; padding:2px 32px 2px 12px !important; font-size:15px !important; outline:none !important; box-sizing:border-box !important;';

var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'vani-inline-go';
btn.innerHTML = '🔍';
btn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:20 !important;';

['click', 'focus', 'focusin', 'touchstart', 'input', 'keypress'].forEach(function(evtType) {
inp.addEventListener(evtType, function(e) {
e.stopPropagation();
}, true);
});

// Swallow keydown for Enter so no document/window listener sees it
inp.addEventListener('keydown', function(e) {
e.stopPropagation();
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopImmediatePropagation();
window.open_modal();
}
}, true);

btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
window.open_modal();
}, true);

wrap.appendChild(inp);
wrap.appendChild(btn);
oldElement.replaceWith(wrap);
}

function setupAllSearchBars() {
protectModalForm();

// 1. Mobile Header
var minervaHeader = document.querySelector('.minerva-header');
if (minervaHeader) {
document.documentElement.classList.remove('overlay-enabled');
document.body.classList.remove('search-enabled', 'overlay-enabled');
var b = minervaHeader.querySelector('.branding-box');
if (b) b.style.setProperty('display', 'none', 'important');

var mForm = minervaHeader.querySelector('form.minerva-search-form, form#searchform');
if (mForm && !minervaHeader.querySelector('.vani-mobile-search-wrap')) {
buildCleanSearchBox(mForm, true);
}
}

// 2. Desktop Header (matches wherever #searchform, #searchInput, or #ori_search currently sits, outside the modal)
if (!document.querySelector('.vani-desktop-search-wrap') && !minervaHeader) {
var dTarget = document.querySelector('form#searchform, #p-search form, .vector-search-box form');
if (!dTarget) {
var rawInput = document.querySelector('#ori_search, #searchInput, input[type="search"]');
if (rawInput && !rawInput.closest('#mspu_div_wrapper') && !rawInput.classList.contains('vani-clean-search-input')) {
dTarget = rawInput.closest('form') || rawInput.parentElement;
}
}
if (dTarget && !dTarget.closest('#mspu_div_wrapper')) {
buildCleanSearchBox(dTarget, false);
}
}
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupAllSearchBars);
} else {
setupAllSearchBars();
}
setTimeout(setupAllSearchBars, 200);
setTimeout(setupAllSearchBars, 700);
})();

MediaWiki:Minerva.js

2026-11-13T03:16:49Z

Kashya:

/* VaniSearch Popup Launcher - Desktop & Mobile */
(function() {
var lockPopupSubmitUntil = 0;

// Override global open_modal() so even if an inline HTML attribute calls it on keydown,
// it cannot focus #mspu_txt_input until after the Enter key is released.
window.open_modal = function() {
var ori = document.getElementById('ori_search') || document.getElementById('searchInput');
var modal = document.getElementById('mspu_div_wrapper');
var inpSearch = document.getElementById('mspu_txt_input');
var submitBtn = document.getElementById('mspu_but_submit');

if (!modal || !inpSearch) return false;

lockPopupSubmitUntil = Date.now() + 500;

// Temporarily disable the popup's submit button for 500ms so a held Enter key cannot trigger it
if (submitBtn) {
submitBtn.disabled = true;
setTimeout(function() { submitBtn.disabled = false; }, 500);
}

if (typeof window.sync_but_search === 'function') {
try { window.sync_but_search(); } catch (e) {}
}

if (ori) {
inpSearch.value = ori.value;
ori.blur();
}

modal.style.display = 'block';

// Delay focusing the popup input until the Enter keystroke is completely finished
setTimeout(function() {
inpSearch.focus();
}, 250);

return false;
};

function protectModalForm() {
var modal = document.getElementById('mspu_div_wrapper');
if (!modal || modal.dataset.vaniHardLocked) return;
modal.dataset.vaniHardLocked = 'true';

// Remove any injected magnifying glass inside the popup that might have a redirect attached
var strayBtns = modal.querySelectorAll('.vani-search-trigger-btn');
strayBtns.forEach(function(b) { b.remove(); });

var mForm = modal.querySelector('form');
if (mForm) {
// Completely block form submission if the modal opened less than 500ms ago
mForm.addEventListener('submit', function(e) {
if (Date.now() < lockPopupSubmitUntil) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}, true);
}

var inpSearch = document.getElementById('mspu_txt_input');
if (inpSearch) {
// Strip name="search" while locked or stop Enter propagation during the lock window
['keydown', 'keypress', 'keyup'].forEach(function(evt) {
inpSearch.addEventListener(evt, function(e) {
if (Date.now() < lockPopupSubmitUntil && (e.key === 'Enter' || e.keyCode === 13)) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}, true);
});
}
}

function buildCleanSearchBox(oldElement, isMobile) {
var wrap = document.createElement('div');
wrap.className = isMobile ? 'vani-mobile-search-wrap' : 'vani-desktop-search-wrap';
wrap.style.cssText = isMobile
? 'flex:1 1 auto !important; display:flex !important; align-items:center !important; position:relative !important; margin:0 10px !important; z-index:999999 !important;'
: 'display:flex !important; align-items:center !important; position:relative !important; width:100% !important; max-width:280px !important; z-index:999999 !important;';

var inp = document.createElement('input');
inp.type = 'text'; // Must NOT be 'search' so older Common.js selectors ignore it
inp.id = 'ori_search';
// Intentionally NO inp.name = 'search' so older Common.js input[name="search"] selectors ignore it!
inp.className = 'vani-clean-search-input';
inp.placeholder = 'Search Vanipedia';
inp.autocomplete = 'off';
inp.style.cssText = 'width:100% !important; height:32px !important; background:#1f3e45 !important; background-image:none !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:1.5px solid #f5d77f !important; border-radius:16px !important; padding:2px 32px 2px 12px !important; font-size:15px !important; outline:none !important; box-sizing:border-box !important;';

var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'vani-inline-go';
btn.innerHTML = '🔍';
btn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:20 !important;';

['click', 'focus', 'focusin', 'touchstart', 'input', 'keypress'].forEach(function(evtType) {
inp.addEventListener(evtType, function(e) {
e.stopPropagation();
}, true);
});

// Swallow keydown for Enter so no document/window listener sees it
inp.addEventListener('keydown', function(e) {
e.stopPropagation();
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopImmediatePropagation();
window.open_modal();
}
}, true);

btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
window.open_modal();
}, true);

wrap.appendChild(inp);
wrap.appendChild(btn);
oldElement.replaceWith(wrap);
}

function setupAllSearchBars() {
protectModalForm();

// 1. Mobile Header
var minervaHeader = document.querySelector('.minerva-header');
if (minervaHeader) {
document.documentElement.classList.remove('overlay-enabled');
document.body.classList.remove('search-enabled', 'overlay-enabled');
var b = minervaHeader.querySelector('.branding-box');
if (b) b.style.setProperty('display', 'none', 'important');

var mForm = minervaHeader.querySelector('form.minerva-search-form, form#searchform');
if (mForm && !minervaHeader.querySelector('.vani-mobile-search-wrap')) {
buildCleanSearchBox(mForm, true);
}
}

// 2. Desktop Header (matches wherever #searchform, #searchInput, or #ori_search currently sits, outside the modal)
if (!document.querySelector('.vani-desktop-search-wrap') && !minervaHeader) {
var dTarget = document.querySelector('form#searchform, #p-search form, .vector-search-box form');
if (!dTarget) {
var rawInput = document.querySelector('#ori_search, #searchInput, input[type="search"]');
if (rawInput && !rawInput.closest('#mspu_div_wrapper') && !rawInput.classList.contains('vani-clean-search-input')) {
dTarget = rawInput.closest('form') || rawInput.parentElement;
}
}
if (dTarget && !dTarget.closest('#mspu_div_wrapper')) {
buildCleanSearchBox(dTarget, false);
}
}
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupAllSearchBars);
} else {
setupAllSearchBars();
}
setTimeout(setupAllSearchBars, 200);
setTimeout(setupAllSearchBars, 700);
})();

MediaWiki:Mobile.js

2026-11-13T03:16:44Z

Kashya:

MediaWiki:Minerva.js

2026-11-13T03:14:16Z

Kashya:

/* VaniSearch Popup Launcher for Desktop and Mobile */
(function() {
var modalOpenTimestamp = 0;

function launchMspuModal(sourceInput) {
if (!sourceInput) return false;
var modal = document.getElementById('mspu_div_wrapper');
var inpSearch = document.getElementById('mspu_txt_input');
if (!modal || !inpSearch) return false;

var strayBtn = modal.querySelector('.vani-search-trigger-btn');
if (strayBtn) strayBtn.remove();

modalOpenTimestamp = Date.now();

if (typeof window.sync_but_search === 'function') {
try { window.sync_but_search(); } catch (e) {}
}

inpSearch.value = sourceInput.value;
modal.style.display = 'block';

setTimeout(function() {
inpSearch.focus();
}, 100);

return false;
}

function setupTopBarSearch() {
// 1. Protect the popup form from auto-submitting during the first 350ms after opening
var modal = document.getElementById('mspu_div_wrapper');
if (modal && !modal.dataset.vaniPopupGuard) {
modal.dataset.vaniPopupGuard = 'true';
var stray = modal.querySelector('.vani-search-trigger-btn');
if (stray) stray.remove();

var modalForm = modal.querySelector('form');
if (modalForm) {
modalForm.addEventListener('submit', function(e) {
if (Date.now() - modalOpenTimestamp < 350) {
e.preventDefault();
e.stopPropagation();
return false;
}
}, true);
}
}

// 2. Mobile (Minerva Header): Replace form with standalone div
var minervaHeader = document.querySelector('.minerva-header');
if (minervaHeader) {
document.documentElement.classList.remove('overlay-enabled');
document.body.classList.remove('search-enabled', 'overlay-enabled');

var b = minervaHeader.querySelector('.branding-box');
if (b) b.style.setProperty('display', 'none', 'important');

var mForm = minervaHeader.querySelector('form.minerva-search-form, form#searchform');
if (mForm && !minervaHeader.querySelector('.vani-mobile-search-wrap')) {
var wrap = document.createElement('div');
wrap.className = 'vani-mobile-search-wrap';
wrap.style.cssText = 'flex:1 1 auto !important; display:flex !important; align-items:center !important; position:relative !important; margin:0 10px !important; z-index:999999 !important;';

var inp = document.createElement('input');
inp.type = 'text';
inp.id = 'ori_search';
inp.className = 'vani-clean-search-input';
inp.placeholder = 'Search Vanipedia';
inp.autocomplete = 'off';
inp.style.cssText = 'width:100% !important; height:32px !important; background:#1f3e45 !important; background-image:none !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:1.5px solid #f5d77f !important; border-radius:16px !important; padding:2px 32px 2px 12px !important; font-size:15px !important; outline:none !important; box-sizing:border-box !important;';

var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'vani-inline-go';
btn.innerHTML = '🔍';
btn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:10 !important;';

['click', 'focus', 'focusin', 'touchstart', 'input'].forEach(function(evtType) {
inp.addEventListener(evtType, function(e) {
e.stopPropagation();
}, true);
});

inp.addEventListener('keydown', function(e) {
e.stopPropagation();
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopImmediatePropagation();
launchMspuModal(inp);
}
}, true);

btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(inp);
}, true);

wrap.appendChild(inp);
wrap.appendChild(btn);
mForm.replaceWith(wrap);
}
}

// 3. Desktop (Vector Header): Replace form with standalone div (same as mobile) so Vue/form submit cannot redirect
var desktopSearchContainer = document.querySelector('#p-search, .vector-search-box');
if (desktopSearchContainer && !desktopSearchContainer.querySelector('.vani-desktop-search-wrap')) {
var dForm = desktopSearchContainer.querySelector('form');
if (dForm) {
var dWrap = document.createElement('div');
dWrap.className = 'vani-desktop-search-wrap';
dWrap.style.cssText = 'display:flex !important; align-items:center !important; position:relative !important;';

var dInp = document.createElement('input');
dInp.type = 'text';
dInp.id = 'ori_search';
dInp.className = 'cdx-text-input__input vani-clean-search-input';
dInp.placeholder = 'Search Vanipedia';
dInp.autocomplete = 'off';
dInp.style.cssText = 'height:32px !important; background:#1f3e45 !important; background-image:none !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:1.5px solid #f5d77f !important; border-radius:16px !important; padding:2px 32px 2px 12px !important; font-size:15px !important; outline:none !important; box-sizing:border-box !important;';

var dBtn = document.createElement('button');
dBtn.type = 'button';
dBtn.className = 'vani-inline-go';
dBtn.innerHTML = '🔍';
dBtn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:20 !important;';

['click', 'focus', 'focusin', 'input'].forEach(function(evtType) {
dInp.addEventListener(evtType, function(e) {
e.stopPropagation();
}, true);
});

dInp.addEventListener('keydown', function(e) {
e.stopPropagation();
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopImmediatePropagation();
launchMspuModal(dInp);
}
}, true);

dBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(dInp);
}, true);

dWrap.appendChild(dInp);
dWrap.appendChild(dBtn);
dForm.replaceWith(dWrap);
}
}
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupTopBarSearch);
} else {
setupTopBarSearch();
}
setTimeout(setupTopBarSearch, 250);
setTimeout(setupTopBarSearch, 800);
})();

MediaWiki:Mobile.js

2026-11-13T03:14:09Z

Kashya:

MediaWiki:Minerva.js

2026-11-13T03:09:40Z

Kashya:

/* VaniSearch Popup Launcher for Desktop and Mobile */
(function() {
var modalOpenTimestamp = 0;

function launchMspuModal(sourceInput) {
if (!sourceInput) return false;
var modal = document.getElementById('mspu_div_wrapper');
var inpSearch = document.getElementById('mspu_txt_input');
if (!modal || !inpSearch) return false;

// Remove any stray magnifying glass injected inside the popup's own text input
var strayBtn = modal.querySelector('.vani-search-trigger-btn');
if (strayBtn) strayBtn.remove();

// Record timestamp so the Enter key release cannot accidentally submit the popup form
modalOpenTimestamp = Date.now();

if (typeof window.sync_but_search === 'function') {
try { window.sync_but_search(); } catch (e) {}
}

inpSearch.value = sourceInput.value;
modal.style.display = 'block';

setTimeout(function() {
inpSearch.focus();
}, 100);

return false;
}

function setupTopBarSearch() {
// 1. Protect the popup form from submitting during the first 350ms after opening
var modal = document.getElementById('mspu_div_wrapper');
if (modal && !modal.dataset.vaniPopupGuard) {
modal.dataset.vaniPopupGuard = 'true';
var stray = modal.querySelector('.vani-search-trigger-btn');
if (stray) stray.remove();

var modalForm = modal.querySelector('form');
if (modalForm) {
modalForm.addEventListener('submit', function(e) {
if (Date.now() - modalOpenTimestamp < 350) {
e.preventDefault();
e.stopPropagation();
return false;
}
}, true);
}
}

// 2. Mobile (Minerva Header): Replace Minerva's form with a standalone search bar
var minervaHeader = document.querySelector('.minerva-header');
if (minervaHeader) {
document.documentElement.classList.remove('overlay-enabled');
document.body.classList.remove('search-enabled', 'overlay-enabled');

var b = minervaHeader.querySelector('.branding-box');
if (b) b.style.setProperty('display', 'none', 'important');

var mForm = minervaHeader.querySelector('form.minerva-search-form, form#searchform');
if (mForm && !minervaHeader.querySelector('.vani-mobile-search-wrap')) {
var wrap = document.createElement('div');
wrap.className = 'vani-mobile-search-wrap';
wrap.style.cssText = 'flex:1 1 auto !important; display:flex !important; align-items:center !important; position:relative !important; margin:0 10px !important; z-index:999999 !important;';

var inp = document.createElement('input');
inp.type = 'text';
inp.id = 'ori_search';
inp.className = 'vani-clean-search-input';
inp.placeholder = 'Search Vanipedia';
inp.autocomplete = 'off';
inp.style.cssText = 'width:100% !important; height:32px !important; background:#1f3e45 !important; background-image:none !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:1.5px solid #f5d77f !important; border-radius:16px !important; padding:2px 32px 2px 12px !important; font-size:15px !important; outline:none !important; box-sizing:border-box !important;';

var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'vani-inline-go';
btn.innerHTML = '🔍';
btn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:10 !important;';

['click', 'focus', 'focusin', 'touchstart', 'input'].forEach(function(evtType) {
inp.addEventListener(evtType, function(e) {
e.stopPropagation();
}, true);
});

inp.addEventListener('keydown', function(e) {
e.stopPropagation();
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopImmediatePropagation();
launchMspuModal(inp);
}
}, true);

btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(inp);
}, true);

wrap.appendChild(inp);
wrap.appendChild(btn);
mForm.replaceWith(wrap);
}
}

// 3. Desktop (Vector Header): Open #mspu_div_wrapper on Enter or 🔍 click without submitting form
var desktopForm = document.querySelector('#p-search form, .vector-header form#searchform');
if (desktopForm && !desktopForm.dataset.vaniPopupBound) {
desktopForm.dataset.vaniPopupBound = 'true';

var dInput = desktopForm.querySelector('input[type="search"], input[name="search"], #searchInput, #ori_search');
if (dInput) {
dInput.id = 'ori_search';
dInput.setAttribute('autocomplete', 'off');

desktopForm.addEventListener('submit', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(dInput);
return false;
}, true);

dInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(dInput);
}
}, true);

var dWrap = dInput.parentElement;
if (dWrap) {
// Remove any old .vani-search-trigger-btn that had a direct URL redirect attached
var oldTrigger = dWrap.querySelector('.vani-search-trigger-btn');
if (oldTrigger) oldTrigger.remove();

if (!dWrap.querySelector('.vani-inline-go')) {
dWrap.style.position = 'relative';
var dBtn = document.createElement('button');
dBtn.type = 'button';
dBtn.className = 'vani-inline-go';
dBtn.innerHTML = '🔍';
dBtn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:20 !important;';
dBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(dInput);
}, true);
dWrap.appendChild(dBtn);
}
}
}
}
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupTopBarSearch);
} else {
setupTopBarSearch();
}
setTimeout(setupTopBarSearch, 250);
setTimeout(setupTopBarSearch, 800);
})();

MediaWiki:Mobile.js

2026-11-13T03:09:34Z

Kashya:

/* VaniSearch Popup Launcher for Desktop and Mobile */
(function() {
var modalOpenTimestamp = 0;

function launchMspuModal(sourceInput) {
if (!sourceInput) return false;
var modal = document.getElementById('mspu_div_wrapper');
var inpSearch = document.getElementById('mspu_txt_input');
if (!modal || !inpSearch) return false;

// Remove any stray magnifying glass injected inside the popup's own text input
var strayBtn = modal.querySelector('.vani-search-trigger-btn');
if (strayBtn) strayBtn.remove();

// Record timestamp so the Enter key release cannot accidentally submit the popup form
modalOpenTimestamp = Date.now();

if (typeof window.sync_but_search === 'function') {
try { window.sync_but_search(); } catch (e) {}
}

inpSearch.value = sourceInput.value;
modal.style.display = 'block';

setTimeout(function() {
inpSearch.focus();
}, 100);

return false;
}

function setupTopBarSearch() {
// 1. Protect the popup form from submitting during the first 350ms after opening
var modal = document.getElementById('mspu_div_wrapper');
if (modal && !modal.dataset.vaniPopupGuard) {
modal.dataset.vaniPopupGuard = 'true';
var stray = modal.querySelector('.vani-search-trigger-btn');
if (stray) stray.remove();

var modalForm = modal.querySelector('form');
if (modalForm) {
modalForm.addEventListener('submit', function(e) {
if (Date.now() - modalOpenTimestamp < 350) {
e.preventDefault();
e.stopPropagation();
return false;
}
}, true);
}
}

// 2. Mobile (Minerva Header): Replace Minerva's form with a standalone search bar
var minervaHeader = document.querySelector('.minerva-header');
if (minervaHeader) {
document.documentElement.classList.remove('overlay-enabled');
document.body.classList.remove('search-enabled', 'overlay-enabled');

var b = minervaHeader.querySelector('.branding-box');
if (b) b.style.setProperty('display', 'none', 'important');

var mForm = minervaHeader.querySelector('form.minerva-search-form, form#searchform');
if (mForm && !minervaHeader.querySelector('.vani-mobile-search-wrap')) {
var wrap = document.createElement('div');
wrap.className = 'vani-mobile-search-wrap';
wrap.style.cssText = 'flex:1 1 auto !important; display:flex !important; align-items:center !important; position:relative !important; margin:0 10px !important; z-index:999999 !important;';

var inp = document.createElement('input');
inp.type = 'text';
inp.id = 'ori_search';
inp.className = 'vani-clean-search-input';
inp.placeholder = 'Search Vanipedia';
inp.autocomplete = 'off';
inp.style.cssText = 'width:100% !important; height:32px !important; background:#1f3e45 !important; background-image:none !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:1.5px solid #f5d77f !important; border-radius:16px !important; padding:2px 32px 2px 12px !important; font-size:15px !important; outline:none !important; box-sizing:border-box !important;';

var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'vani-inline-go';
btn.innerHTML = '🔍';
btn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:10 !important;';

['click', 'focus', 'focusin', 'touchstart', 'input'].forEach(function(evtType) {
inp.addEventListener(evtType, function(e) {
e.stopPropagation();
}, true);
});

inp.addEventListener('keydown', function(e) {
e.stopPropagation();
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopImmediatePropagation();
launchMspuModal(inp);
}
}, true);

btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(inp);
}, true);

wrap.appendChild(inp);
wrap.appendChild(btn);
mForm.replaceWith(wrap);
}
}

// 3. Desktop (Vector Header): Open #mspu_div_wrapper on Enter or 🔍 click without submitting form
var desktopForm = document.querySelector('#p-search form, .vector-header form#searchform');
if (desktopForm && !desktopForm.dataset.vaniPopupBound) {
desktopForm.dataset.vaniPopupBound = 'true';

var dInput = desktopForm.querySelector('input[type="search"], input[name="search"], #searchInput, #ori_search');
if (dInput) {
dInput.id = 'ori_search';
dInput.setAttribute('autocomplete', 'off');

desktopForm.addEventListener('submit', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(dInput);
return false;
}, true);

dInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(dInput);
}
}, true);

var dWrap = dInput.parentElement;
if (dWrap) {
// Remove any old .vani-search-trigger-btn that had a direct URL redirect attached
var oldTrigger = dWrap.querySelector('.vani-search-trigger-btn');
if (oldTrigger) oldTrigger.remove();

if (!dWrap.querySelector('.vani-inline-go')) {
dWrap.style.position = 'relative';
var dBtn = document.createElement('button');
dBtn.type = 'button';
dBtn.className = 'vani-inline-go';
dBtn.innerHTML = '🔍';
dBtn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:20 !important;';
dBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
launchMspuModal(dInput);
}, true);
dWrap.appendChild(dBtn);
}
}
}
}
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupTopBarSearch);
} else {
setupTopBarSearch();
}
setTimeout(setupTopBarSearch, 250);
setTimeout(setupTopBarSearch, 800);
})();

MediaWiki:Minerva.js

2026-11-13T03:02:44Z

Kashya:

/* Mobile and Desktop VaniSearch Popup Handler */
(function() {
var popupJustOpened = false;

function triggerVaniModal(inputEl) {
if (!inputEl) return false;

var modal = document.getElementById('mspu_div_wrapper');
var inpSearch = document.getElementById('mspu_txt_input');

if (modal && inpSearch) {
// Lock out accidental auto-submit for 350ms while the Enter key is being released
popupJustOpened = true;
setTimeout(function() { popupJustOpened = false; }, 350);

if (typeof window.sync_but_search === 'function') {
try { window.sync_but_search(); } catch (err) {}
}

inpSearch.value = inputEl.value;
modal.style.display = 'block';

// Focus after 120ms so the initial Enter keypress doesn't submit the popup form
setTimeout(function() {
inpSearch.focus();
}, 120);

return false;
}
return false;
}

function bindModalProtection() {
var modal = document.getElementById('mspu_div_wrapper');
if (!modal || modal.dataset.vaniProtected) return;
modal.dataset.vaniProtected = 'true';

// Block the popup's internal form/button from auto-submitting during the 350ms opening window
modal.addEventListener('keydown', function(e) {
if (popupJustOpened && (e.key === 'Enter' || e.keyCode === 13)) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}
}, true);

modal.addEventListener('submit', function(e) {
if (popupJustOpened) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}, true);

var submitBtn = document.getElementById('mspu_but_submit');
if (submitBtn) {
submitBtn.addEventListener('click', function(e) {
if (popupJustOpened) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}, true);
}
}

function setupSearch() {
bindModalProtection();

// 1. Mobile (Minerva header)
var minervaHeader = document.querySelector('.minerva-header');
if (minervaHeader) {
document.documentElement.classList.remove('overlay-enabled');
document.body.classList.remove('search-enabled', 'overlay-enabled');

var b = minervaHeader.querySelector('.branding-box');
if (b) b.style.setProperty('display', 'none', 'important');

var mForm = minervaHeader.querySelector('form.minerva-search-form');
if (mForm && !minervaHeader.querySelector('.vani-mobile-search-wrap')) {
var wrap = document.createElement('div');
wrap.className = 'vani-mobile-search-wrap';
wrap.style.cssText = 'flex:1 1 auto !important; display:flex !important; align-items:center !important; position:relative !important; margin:0 10px !important; z-index:999999 !important;';

var inp = document.createElement('input');
inp.type = 'text';
inp.id = 'ori_search';
inp.name = 'search';
inp.className = 'vani-clean-search-input';
inp.placeholder = 'Search Vanipedia';
inp.autocomplete = 'off';
inp.style.cssText = 'width:100% !important; height:32px !important; background:#1f3e45 !important; background-image:none !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:1.5px solid #f5d77f !important; border-radius:16px !important; padding:2px 32px 2px 12px !important; font-size:15px !important; outline:none !important; box-sizing:border-box !important;';

var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'vani-inline-go';
btn.innerHTML = '🔍';
btn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:10 !important;';

['click', 'focus', 'focusin', 'touchstart', 'input'].forEach(function(evtType) {
inp.addEventListener(evtType, function(e) {
e.stopPropagation();
}, true);
});

inp.addEventListener('keydown', function(e) {
e.stopPropagation();
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopImmediatePropagation();
triggerVaniModal(inp);
}
}, true);

btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
triggerVaniModal(inp);
}, true);

wrap.appendChild(inp);
wrap.appendChild(btn);
mForm.replaceWith(wrap);
}
}

// 2. Desktop (Vector header)
var desktopForm = document.querySelector('#p-search form, form#searchform');
if (desktopForm && !desktopForm.classList.contains('minerva-search-form') && !desktopForm.dataset.vaniBound) {
desktopForm.dataset.vaniBound = 'true';

var dInput = desktopForm.querySelector('#ori_search, input[type="search"], input[name="search"], #searchInput');
if (dInput) {
dInput.id = 'ori_search';
dInput.setAttribute('autocomplete', 'off');

// Block the desktop form from submitting and reloading the page
desktopForm.addEventListener('submit', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
triggerVaniModal(dInput);
return false;
}, true);

// Intercept Enter in capture phase so no other script in Common.js can redirect the page
dInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
triggerVaniModal(dInput);
}
}, true);

var dWrap = dInput.parentElement;
if (dWrap && !dWrap.querySelector('.vani-inline-go')) {
dWrap.style.position = 'relative';
var dBtn = document.createElement('button');
dBtn.type = 'button';
dBtn.className = 'vani-inline-go';
dBtn.innerHTML = '🔍';
dBtn.style.cssText = 'position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; font-size:15px !important; cursor:pointer !important; padding:0 !important; line-height:1 !important; z-index:20 !important;';
dBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
triggerVaniModal(dInput);
}, true);
dWrap.appendChild(dBtn);
}
}
}
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupSearch);
} else {
setupSearch();
}
setTimeout(setupSearch, 250);
setTimeout(setupSearch, 800);
})();

MediaWiki:Mobile.js

2026-11-13T03:02:39Z

Kashya:

MediaWiki:Minerva.css

2026-11-13T02:57:33Z

Kashya:

/* Mobile and Desktop Search Bar Layout */

/* 1. Hide "Vanipedia" title on mobile so search bar sits in its place */
body.skin-minerva .minerva-header .branding-box {
display: none !important;
}

/* 2. Ensure the top bar and search input are selectable and never blocked by a mask */
body.skin-minerva .minerva-header,
body.skin-minerva .minerva-header .vani-mobile-search-wrap,
body.skin-minerva #vani-mobile-search-input {
pointer-events: auto !important;
user-select: text !important;
-webkit-user-select: text !important;
}

/* 3. Disable Minerva's page mask and search overlay so they cannot block clicks or hide content */
.search-overlay,
.minerva-search-overlay,
div.mw-ui-overlay.search-overlay,
body.search-enabled .mw-mf-page-center__mask,
html.overlay-enabled .mw-mf-page-center__mask,
.cdx-menu,
.cdx-typeahead-search__menu,
.suggestions,
.mw-searchSuggest {
display: none !important;
pointer-events: none !important;
}

html.overlay-enabled #mw-mf-page-center,
html.overlay-enabled #content,
body.search-enabled #mw-mf-page-center,
body.overlay-enabled #mw-mf-page-center {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure VaniSearch popup modal (#mspu_div_wrapper) stays on top of the sticky header */
#mspu_div_wrapper {
z-index: 2147483647 !important;
}

MediaWiki:Mobile.css

2026-11-13T02:57:26Z

Kashya:

/* CSS placed here will affect users of the mobile site */

.mobilehide {
display: none;
}

.mobile-float-reset {
float: none !important;
width: 100% !important;
}

/* Hide the images */
.compact-ambox table .mbox-image,
.compact-ambox table .mbox-imageright,
.compact-ambox table .mbox-empty-cell,
/* Allow for hiding text in compact form */
.compact-ambox .hide-when-compact,
.geo-nondefault, .geo-multi-punct,
/* Hide stuff meant for accounts with special permissions. Made visible again in
[[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-accountcreator.css]] and
[[MediaWiki:Group-autoconfirmed.css]]. */
.sysop-show,
.accountcreator-show,
.autoconfirmed-show,
/* Copied from Common.css - allow for hiding text in compact form e.g. clean up templates */
.hide-when-compact,
/* portal pages are badly formatted. Until this changes these should be hidden. (see https://phabricator.wikimedia.org/T86495) */
.noprint.portal,
/* Temporary fix for bug 53437 - nav boxes can disrupt reading experience on smaller screens
TODO: Update template to have nomobile class */
#content .vertical-navbox,
#content .navbox {
display: none;
}

/* Tablet specific styling */
@media all and (min-width: 768px) {
#content .vertical-navbox,
#content .navbox {
display: inherit;
}
}

/* For linked citation numbers and document IDs, where
the number need not be shown on a screen or a handheld,
but should be included in the printed version
TODO: Move to Citation template when templates have stylesheets
See https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates
*/
@media screen, handheld {
.citation *.printonly {
display: none;
}
}
/* Styling for citations (CSS3). Breaks long urls, etc., rather than overflowing box
*/
.citation {
word-wrap: break-word;
}

/* Default styling for Navbar template
TODO: Move to Navbar template when templates have stylesheets
See https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates
*/
.navbar {
display: inline;
font-size: 88%;
font-weight: normal;
}
.navbar ul {
display: inline;
white-space: nowrap;
}
.navbar li {
word-spacing: -0.125em;
}
.navbar.mini li span {
font-variant: small-caps;
}
/* Navbar styling when nested in infobox and navbox */
.infobox .navbar {
font-size: 100%;
}
.navbox .navbar {
display: block;
font-size: 100%;
}
.navbox-title .navbar {
/* @noflip */
float: left;
/* @noflip */
text-align: left;
/* @noflip */
margin-right: 0.5em;
width: 6em;
}

/* Style for horizontal lists (separator following item).
@source mediawiki.org/wiki/Snippets/Horizontal_lists
@revision 6 (2014-05-09)
@author [[User:Edokter]]
*/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
margin: 0;
display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
}
/* Generate interpuncts */
#content .hlist dt:after {
content: ": ";
}
#content .hlist dd:after,
#content .hlist li:after {
content: " · ";
font-weight: bold;
}
#content .hlist dd:last-child:after,
#content .hlist dt:last-child:after,
#content .hlist li:last-child:after {
content: none;
}
/* Add parentheses around nested lists */
#content .hlist dd dd:first-child:before, #content .hlist dd dt:first-child:before, #content .hlist dd li:first-child:before,
#content .hlist dt dd:first-child:before, #content .hlist dt dt:first-child:before, #content .hlist dt li:first-child:before,
#content .hlist li dd:first-child:before, #content .hlist li dt:first-child:before, #content .hlist li li:first-child:before {
content: " (";
font-weight: normal;
}
#content .hlist dd dd:last-child:after, #content .hlist dd dt:last-child:after, #content .hlist dd li:last-child:after,
#content .hlist dt dd:last-child:after, #content .hlist dt dt:last-child:after, #content .hlist dt li:last-child:after,
#content .hlist li dd:last-child:after, #content .hlist li dt:last-child:after, #content .hlist li li:last-child:after {
content: ") ";
font-weight: normal;
}
/* Put ordinals in front of ordered list items */
#content .hlist ol {
counter-reset: listitem;
}
#content .hlist ol > li {
counter-increment: listitem;
}
#content .hlist ol > li:before {
content: " " counter(listitem) " ";
white-space: nowrap;
}
#content .hlist dd ol > li:first-child:before,
#content .hlist dt ol > li:first-child:before,
#content .hlist li ol > li:first-child:before {
content: " (" counter(listitem) " ";
}

/* Unbulleted lists e.g. Barack Obama page */
.plainlist ul {
list-style: none;
}

/* CODE FOR COMPACT AMBOX */
/* Remove borders, backgrounds, padding, etc.
Please document here what pages use this
*/
.compact-ambox table.ambox {
border: none;
border-collapse: collapse;
background: transparent;
margin: 0 0 0 1.6em !important;
padding: 0 !important;
width: auto;
display: block;
}
.compact-ambox table.mbox-small-left {
font-size: 100%;
width: auto;
margin: 0;
}
/* Style the text cell as a list item and remove its padding */
.compact-ambox table .mbox-text {
padding: 0 !important;
margin: 0 !important;
}
.compact-ambox table .mbox-text-span {
display: list-item;
line-height: 1.5em;
list-style-type: square;
list-style-image: url("data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=");
}

.visualhide {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

/* Hatnotes and disambiguation notices */
.hatnote {
font-style: italic;
}
.hatnote i {
font-style: normal;
}
div.hatnote {
/* @noflip */
padding-left: 1.6em;
margin-bottom: 0.5em;
}
div.hatnote + div.hatnote {
margin-top: -0.5em;
}

/* Geographical coordinates defaults. See [[Template:Coord/link]]
for how these are used. The classes "geo", "longitude", and
"latitude" are used by the [[Geo microformat]]. */
.geo-default, .geo-dms, .geo-dec { display: inline; }

.longitude, .latitude { white-space: nowrap; }

/* Prevent line breaks in silly places:
1) Where desired
2) Links when we don't want them to
3) Bold "links" to the page itself
4) Ref tags with group names <ref group="Note"> --> "[Note 1]"
Please document here what pages use this
*/
.nowrap,
.nowraplinks a,
.nowraplinks .selflink,
sup.reference a {
white-space: nowrap;
}
/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
white-space: normal;
}

/* hidden sortkey for tablesorter */
td .sortkey,
th .sortkey {
display: none;
speak: none;
}

/* Pie chart: Transparent borders */
.transborder {
border: solid transparent;
}

/* Generic class for Times-based serif, texhtml class for inline math */
.times-serif,
span.texhtml {
font-family: serif;
}
span.texhtml {
white-space: nowrap;
}

/* Disabling column-count for {{div col}}, {{reflist}} and {{refbegin}} */
.column-count,
.references-column-count {
-moz-column-count: 1 !important;
-webkit-column-count: 1 !important;
column-count: 1 !important;
}
/* Mobile and Desktop Search Bar Layout */

/* 1. Hide "Vanipedia" title on mobile so search bar sits in its place */
body.skin-minerva .minerva-header .branding-box {
display: none !important;
}

/* 2. Ensure the top bar and search input are selectable and never blocked by a mask */
body.skin-minerva .minerva-header,
body.skin-minerva .minerva-header .vani-mobile-search-wrap,
body.skin-minerva #vani-mobile-search-input {
pointer-events: auto !important;
user-select: text !important;
-webkit-user-select: text !important;
}

/* 3. Disable Minerva's page mask and search overlay so they cannot block clicks or hide content */
.search-overlay,
.minerva-search-overlay,
div.mw-ui-overlay.search-overlay,
body.search-enabled .mw-mf-page-center__mask,
html.overlay-enabled .mw-mf-page-center__mask,
.cdx-menu,
.cdx-typeahead-search__menu,
.suggestions,
.mw-searchSuggest {
display: none !important;
pointer-events: none !important;
}

html.overlay-enabled #mw-mf-page-center,
html.overlay-enabled #content,
body.search-enabled #mw-mf-page-center,
body.overlay-enabled #mw-mf-page-center {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure VaniSearch popup modal (#mspu_div_wrapper) stays on top of the sticky header */
#mspu_div_wrapper {
z-index: 2147483647 !important;
}

MediaWiki:Common.css

2026-11-13T02:57:19Z

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 {
display: none !important;
}
#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 {
display: none;
}
/* -------------------- 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,
.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);
}
}
/* ==========================================================================
GLOBAL SITENOTICE / MEDIAWIKI HEADER SUPPRESSION (ALL PAGES)
========================================================================== */
#siteNotice,
#localNotice,
.mw-sitenotice,
.sitenotice,
.vector-sitenotice-container,
#mainbanner,
.anonnotice,
.dismissable-notice,
#centralNotice {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
outline: none !important;
visibility: hidden !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 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:not(#vector-user-links-dropdown *):not(.vector-user-menu *) {
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. Position Page Title in the MIDDLE of the top bar */
.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: center !important;
text-align: center !important;
flex: 1 1 auto !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: none !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: center !important;
text-align: center !important;
font-size: 1.35rem !important;
font-weight: 700 !important;
color: #000000 !important;
margin: 0 auto !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: 54px !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: 54px !important;
right: 18px !important;
width: 40px !important;
height: 40px !important;
}
}
/* ==========================================================================
UNIVERSAL VĀṆĪ-TEMPLE MAIN PAGE: FULL-WIDTH ARCHITECTURAL BLUEPRINT
========================================================================== */
/* 1. Petal Color & Material Variables */
:root {
--petal-color: #1b2e4b; /* Vanipedia Midnight Blue */
--petal-color-dark: #101c2e;
--vani-gold: #d4af37;
--vani-wood-wall: #241913; /* Rich dark walnut edge-to-edge */
--vani-shelf-depth: #140d09; /* Deep shadow inside open shelves */
--vani-border-wood: #3d2b20;
}
/* 2. Show & Theme the Vector 2022 Top Bar (from image_3992d7.png) */
body.page-Main_Page .vector-header-container, body.page-Main_Page #mw-head { display: flex !important; background: transparent !important; background-color: transparent !important; border: none !important; border-bottom: none !important; box-shadow: none !important; height: auto !important; min-height: 86px !important; }
.vector-header-container .mw-logo-wordmark,
.vector-header-container .vector-menu-heading,
.vector-header-container a,
.vector-sticky-header a {
color: #ffffff !important;
}
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"] {
background-color: #ffffff !important;
border: 1px solid var(--vani-gold) !important;
border-radius: 3px !important;
color: #1a1a1a !important;
}
.vector-header-container .cdx-search-input__end-button,
.vector-header-container input[type="submit"] {
background-color: var(--petal-color-dark) !important;
color: var(--vani-gold) !important;
border: 1px solid var(--vani-gold) !important;
font-weight: bold !important;
}
/* 3. Full-Width Edge-to-Edge Wood Canvas (Zero Columns, Zero Plants) */
body.page-Main_Page #content,
body.page-Main_Page .mw-body,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
padding: 0 !important;
margin: 0 !important;
max-width: 100vw !important;
background-color: var(--vani-wood-wall) !important;
}
.vani-wood-sanctuary {
width: 100vw !important;
max-width: 100vw !important;
min-height: calc(100vh - 110px);
box-sizing: border-box;
margin: 0 !important;
padding: 24px 40px 80px 40px !important;
background:
linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.55) 100%),
radial-gradient(ellipse at 50% 25%, #3a281e 0%, var(--vani-wood-wall) 80%);
color: #e6dfd5;
font-family: 'Noto Serif', Georgia, serif;
position: relative;
}
/* 4. Upper Canopy with Concealed Linear Cove Lighting (No Spotlights) */
.vani-canopy-box {
width: 100%;
background: linear-gradient(180deg, #18100c 0%, #2b1d15 70%, #1c130e 100%);
border-top: 2px solid var(--vani-gold);
border-bottom: 3px solid #140d09;
border-radius: 6px;
padding: 22px 30px 18px;
text-align: center;
position: relative;
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
/* Seamless warm golden wash fading down the wood grain */
.vani-canopy-box::after {
content: "";
position: absolute;
left: 3%;
right: 3%;
bottom: -24px;
height: 24px;
background: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.45) 0%, rgba(212, 175, 55, 0.12) 50%, transparent 80%);
pointer-events: none;
filter: blur(8px);
}
.vani-canopy-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(28px, 2.5vw, 42px);
font-weight: 700;
color: var(--vani-gold);
letter-spacing: 0.05em;
margin: 0 0 6px 0;
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.vani-canopy-subtitle {
font-size: 15px;
color: #c9bfb1;
margin: 0;
letter-spacing: 0.04em;
}
/* 5. Open Recessed Wall Shelves (Without Glass) */
.vani-shelves-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 34px 0 28px;
width: 100%;
}
.vani-open-shelf {
background: linear-gradient(180deg, #110b08 0%, var(--vani-shelf-depth) 100%);
border: 2px solid var(--vani-border-wood);
border-bottom: 4px solid #0d0806;
border-radius: 4px;
padding: 18px 20px;
min-height: 180px;
position: relative;
box-shadow:
inset 0 6px 14px rgba(0, 0, 0, 0.75),
0 4px 12px rgba(0,0,0,0.35);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Subtle indirect light strip inside the top of each shelf */
.vani-open-shelf::before {
content: "";
position: absolute;
top: 0;
left: 8%;
right: 8%;
height: 6px;
background: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.3) 0%, transparent 80%);
filter: blur(2px);
pointer-events: none;
}
.vani-shelf-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 20px;
font-weight: 700;
color: var(--vani-gold);
border-bottom: 1px solid rgba(212, 175, 55, 0.25);
padding-bottom: 6px;
margin-bottom: 14px;
}
/* Content styling inside dark shelves */
.vani-open-shelf a {
color: #dcd4c7 !important;
text-decoration: none !important;
}
.vani-open-shelf a:hover {
color: var(--vani-gold) !important;
}
/* 6. Central Showcase Display Window (Holds Virtual Timeline) */
.vani-center-showcase {
width: 100%;
max-width: 1100px;
margin: 0 auto 35px;
background: #0d0806;
border: 3px solid #3d2b20;
border-radius: 6px;
padding: 18px;
box-shadow:
inset 0 0 20px rgba(0,0,0,0.8),
0 8px 25px rgba(0,0,0,0.5);
}
/* 7. Docked Base Plinth Footer (Always Visible) */
.vani-plinth-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: linear-gradient(180deg, #18110c 0%, #0f0a07 100%);
border-top: 1px solid var(--vani-gold);
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
font-size: 13px;
box-shadow: 0 -4px 15px rgba(0,0,0,0.45);
}
.vani-footer-links {
display: flex;
align-items: center;
gap: 14px;
}
.vani-petal-badge {
color: #d1c7b8 !important;
text-decoration: none !important;
padding: 4px 12px;
border-radius: 12px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
transition: all 0.2s ease;
}
.vani-petal-badge:hover,
.vani-petal-badge.is-active {
background: var(--petal-color);
border-color: var(--vani-gold);
color: #ffffff !important;
}
.vani-footer-milestone {
color: var(--vani-gold);
font-weight: 600;
letter-spacing: 0.03em;
}
@media screen and (max-width: 900px) {
.vani-shelves-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. HIDE ALL WIKI TOOLS & UNWANTED CHROME ON MAIN PAGE
(Main Page, Discussion, Read, Edit, History, Tools, Notices)
---------------------------------------------------------- */
body.page-Main_Page #left-navigation,
body.page-Main_Page #right-navigation,
body.page-Main_Page #p-namespaces,
body.page-Main_Page #p-views,
body.page-Main_Page #p-cactions,
body.page-Main_Page .vector-page-toolbar,
body.page-Main_Page .vector-page-toolbar-container,
body.page-Main_Page .vector-page-tools,
body.page-Main_Page #vector-page-tools-dropdown,
body.page-Main_Page #vector-page-tools-pinned-container,
body.page-Main_Page .vector-page-titlebar,
body.page-Main_Page .mw-page-title-main,
body.page-Main_Page .firstHeading,
body.page-Main_Page #firstHeading,
body.page-Main_Page .mw-indicators,
body.page-Main_Page .mw-editsection,
body.page-Main_Page .catlinks,
body.page-Main_Page .printfooter,
body.page-Main_Page #siteSub,
body.page-Main_Page #contentSub,
body.page-Main_Page #jump-to-nav,
body.page-Main_Page .vector-sitenotice-container,
body.page-Main_Page #siteNotice,
body.page-Main_Page #localNotice,
body.page-Main_Page #mainbanner,
body.page-Main_Page #mw-page-base,
body.page-Main_Page #mw-head-base,
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 #p-lang-btn {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
visibility: hidden !important;
overflow: hidden !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 1.4s 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;
}
}
/* ==========================================================================
ARCHITECTURAL WOOD SANCTUM & SHADOWBOX NICHES (A1 CONCEPT)
========================================================================== */
:root {
--wood-darkest: #110804;
--wood-dark: #1c0e07;
--wood-mid: #2b170e;
--wood-warm: #3d2214;
--wood-light: #54311c;
--gold-bright: #f5d77f;
--gold-mid: #d4af37;
--gold-deep: #997a15;
--text-cream: #f4ebd9;
--text-muted: #bda892;
--spotlight-glow: radial-gradient(circle at 50% 0%, rgba(255, 230, 160, 0.28) 0%, rgba(255, 210, 120, 0.08) 45%, transparent 75%);
}
/* Master Architectural Container */
.sanctum-cabinet {
width: 100%;
max-width: 1280px;
margin: 0 auto;
background: linear-gradient(180deg, #2b170e 0%, #1c0e07 40%, #140904 100%);
border: 3px solid #3d2314;
border-radius: 12px;
box-shadow: 0 25px 60px rgba(0,0,0,0.9), inset 0 2px 4px rgba(255,220,150,0.2), inset 0 -2px 6px rgba(0,0,0,0.9);
position: relative;
overflow: hidden;
font-family: 'Cinzel', 'Georgia', serif;
color: var(--text-cream);
}
.sanctum-cabinet::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 4px);
pointer-events: none;
opacity: 0.7;
}
/* ZONE 1: TOP ARCHITECTURAL CORNICE / NAV BAR */
.cornice-header {
background: linear-gradient(180deg, #3f2314 0%, #28140a 60%, #1b0c05 100%);
border-bottom: 2px solid #5a341b;
box-shadow: 0 8px 16px rgba(0,0,0,0.7), inset 0 2px 3px rgba(255,230,170,0.25);
padding: 14px 28px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 10;
}
.cornice-left {
display: flex;
align-items: center;
gap: 16px;
}
.cornice-left .nav-burger {
cursor: pointer;
font-size: 20px;
color: var(--gold-mid);
background: rgba(0,0,0,0.4);
padding: 6px 12px;
border-radius: 4px;
border: 1px solid #4a2814;
}
.vh-brand-group {
display: flex;
flex-direction: column;
}
.main-brand-title {
font-size: 20px;
font-weight: 700;
letter-spacing: 2.5px;
color: var(--gold-bright);
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 12px rgba(212,175,55,0.3);
}
.brand-subline {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--text-muted);
text-transform: uppercase;
margin-top: 2px;
}
.cornice-search {
flex: 1;
max-width: 480px;
margin: 0 24px;
}
.search-input-wrap {
position: relative;
width: 100%;
}
.search-bevel {
width: 100%;
padding: 10px 18px 10px 42px;
background: #0f0704;
border: 1px solid #472613;
border-radius: 20px;
color: var(--text-cream);
font-family: inherit;
font-size: 13px;
box-shadow: inset 0 3px 6px rgba(0,0,0,0.9), 0 1px 2px rgba(255,255,255,0.08);
outline: none;
}
.search-bevel::placeholder {
color: #7d6b58;
font-style: italic;
}
.search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--gold-mid);
font-size: 14px;
}
.cornice-links {
display: flex;
align-items: center;
gap: 18px;
font-size: 12px;
letter-spacing: 1.5px;
}
.cornice-links a {
color: var(--text-cream) !important;
text-decoration: none;
}
.cornice-links a:hover {
color: var(--gold-bright) !important;
}
.cornice-links .btn-gold a {
background: linear-gradient(180deg, #b8860b 0%, #7d5904 100%);
padding: 6px 14px;
border-radius: 4px;
color: #fff !important;
font-weight: 600;
box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
/* SPOTLIGHT HOOD & OVERHEAD LAMPS (A1 STYLE) */
.spotlight-frieze {
position: relative;
padding: 24px 20px 10px 20px;
text-align: center;
background: linear-gradient(180deg, #24130b 0%, #180c06 100%);
border-bottom: 2px solid #3a1e0f;
}
.lamp-row {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
padding: 0 80px;
pointer-events: none;
}
.lamp {
width: 60px;
height: 8px;
background: radial-gradient(ellipse at center, #ffd700 0%, #b8860b 60%, #442500 100%);
border-radius: 0 0 10px 10px;
box-shadow: 0 0 14px 4px rgba(255, 215, 0, 0.45);
position: relative;
}
.lamp::after {
content: "";
position: absolute;
top: 8px;
left: -70px;
width: 200px;
height: 280px;
background: var(--spotlight-glow);
pointer-events: none;
}
.frieze-title {
font-size: 24px;
letter-spacing: 2px;
color: var(--gold-bright);
text-shadow: 0 2px 6px rgba(0,0,0,0.95);
margin-bottom: 4px;
}
.frieze-subtitle {
font-size: 12px;
letter-spacing: 2.5px;
color: var(--text-muted);
font-style: italic;
}
.shadowbox-body {
padding: 24px 24px;
}
/* ZONE 2: HERO STAGE */
.hero-sanctuary-stage {
display: grid;
grid-template-columns: 1fr 1.25fr 1fr;
gap: 20px;
background: linear-gradient(180deg, #180c06 0%, #100703 100%);
border: 3px solid #361e10;
border-radius: 8px;
padding: 20px;
box-shadow: inset 0 10px 25px rgba(0,0,0,0.9);
margin-bottom: 24px;
align-items: stretch;
}
.spotlight-card {
background: rgba(0, 0, 0, 0.45);
border: 1px solid #3b2011;
border-radius: 6px;
padding: 18px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
display: flex;
flex-direction: column;
}
.spotlight-tag {
font-size: 10px;
letter-spacing: 2px;
color: var(--gold-mid);
text-transform: uppercase;
margin-bottom: 6px;
}
.spotlight-headline a {
font-size: 16px;
color: var(--text-cream) !important;
font-weight: 600;
text-decoration: none;
}
.spotlight-body {
font-size: 12px;
color: #bcaaa4;
line-height: 1.5;
margin: 10px 0;
flex: 1;
}
.spotlight-footer a {
font-size: 11px;
color: var(--gold-bright) !important;
text-decoration: none;
}
.center-frame {
background: #090402;
border: 3px solid #4a2814;
border-radius: 6px;
padding: 18px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.95), inset 0 0 30px rgba(0,0,0,0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.sanctuary-center-badge {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--gold-mid);
text-transform: uppercase;
margin-bottom: 10px;
}
.vh-hero-title-link a {
text-decoration: none;
}
.vh-who-corner {
display: block;
font-size: 11px;
letter-spacing: 3px;
color: var(--gold-mid);
text-transform: uppercase;
}
.vh-main-title {
display: block;
font-size: 26px;
font-weight: 700;
letter-spacing: 2px;
color: var(--gold-bright);
}
.vh-gold-rule {
width: 80px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
margin: 10px auto;
}
.vh-description {
font-size: 12px;
color: var(--text-cream);
font-style: italic;
}
.multilingual-tape {
background: #140904;
border: 1px solid #361b0d;
padding: 6px 14px;
border-radius: 4px;
margin-top: 12px;
font-size: 11px;
color: var(--gold-bright);
letter-spacing: 1px;
}
/* ZONE 3: 3D RECESSED SHADOWBOX SHELF NICHES */
.niches-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 22px;
}
.wood-niche {
background: linear-gradient(180deg, #0e0603 0%, #170b05 100%);
border: 3px solid #381f11;
border-top: 4px solid #1a0c06;
border-radius: 6px;
padding: 22px 18px;
box-shadow: inset 0 8px 18px rgba(0,0,0,0.95), 0 4px 10px rgba(0,0,0,0.7), inset 0 0 20px rgba(0,0,0,0.8);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.2s, border-color 0.2s;
}
.wood-niche:hover {
transform: translateY(-2px);
border-color: #633b20;
}
.niche-lamp {
position: absolute;
top: 0;
width: 36px;
height: 5px;
background: #e2ba4d;
border-radius: 0 0 6px 6px;
box-shadow: 0 0 10px rgba(255,215,0,0.6);
}
.niche-icon-wrap {
font-size: 32px;
margin: 10px 0 10px 0;
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.8));
}
.niche-title {
font-size: 15px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--gold-bright);
text-transform: uppercase;
margin-bottom: 8px;
}
.niche-desc {
font-size: 12px;
line-height: 1.5;
color: var(--text-cream);
margin-bottom: 10px;
}
.niche-links {
font-size: 11px;
line-height: 1.6;
margin-bottom: 10px;
}
.niche-links a {
color: var(--text-cream) !important;
text-decoration: underline;
}
.niche-links a:hover {
color: var(--gold-bright) !important;
}
.niche-meta {
margin-top: auto;
font-size: 11px;
color: var(--gold-mid);
border-top: 1px solid #2d180c;
padding-top: 8px;
width: 100%;
letter-spacing: 1px;
}
/* SUPPLEMENTARY TAXONOMY SHELF */
.taxonomies-carved-shelf {
background: #110704;
border: 1px solid #361b0c;
border-radius: 6px;
padding: 12px 18px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
}
.shelf-label {
font-size: 11px;
letter-spacing: 1.5px;
color: var(--gold-mid);
}
.shelf-chips a {
display: inline-block;
background: #1d0f07;
border: 1px solid #422312;
border-radius: 4px;
padding: 4px 10px;
margin: 0 4px;
color: var(--text-cream) !important;
font-size: 11px;
text-decoration: none;
}
.shelf-chips a:hover {
border-color: var(--gold-mid);
color: var(--gold-bright) !important;
}
/* CARVED TIMELINE RIBBON */
.timeline-carved-ribbon {
background: linear-gradient(180deg, #1c0e07 0%, #120803 100%);
border: 2px solid #381f11;
border-radius: 6px;
padding: 16px 20px;
box-shadow: inset 0 4px 10px rgba(0,0,0,0.9);
}
.timeline-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.timeline-title {
font-size: 13px;
letter-spacing: 2px;
color: var(--gold-mid);
}
.timeline-span-badge {
font-size: 11px;
color: var(--gold-bright);
}
.timeline-years-bar {
display: flex;
justify-content: space-between;
background: #080301;
border: 1px solid #30170a;
border-radius: 20px;
padding: 8px 16px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
overflow-x: auto;
}
.vh-year {
font-size: 11px;
color: #9c8570;
cursor: pointer;
padding: 2px 6px;
transition: color 0.2s;
}
.vh-year:hover, .vh-year.active {
color: var(--gold-bright);
font-weight: 700;
}
/* ZONE 4: BASE PLINTH FOOTER */
.plinth-footer {
background: linear-gradient(180deg, #1d0f07 0%, #120803 100%);
border-top: 3px solid #3d2111;
padding: 20px 28px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: inset 0 3px 6px rgba(255,255,255,0.05);
}
.plinth-stat {
font-size: 13px;
color: var(--gold-bright);
letter-spacing: 1px;
}
.plinth-actions {
display: flex;
gap: 12px;
}
.plinth-btn a {
display: inline-block;
padding: 8px 16px;
background: #190b05;
border: 1px solid #4a2712;
border-radius: 4px;
color: var(--text-cream) !important;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.6);
}
.plinth-btn a:hover {
border-color: var(--gold-mid);
color: var(--gold-bright) !important;
}
@media (max-width: 900px) {
.niches-grid { grid-template-columns: 1fr; }
.hero-sanctuary-stage { grid-template-columns: 1fr; }
.taxonomies-carved-shelf { flex-direction: column; gap: 10px; }
.plinth-footer { flex-direction: column; gap: 14px; text-align: center; }
}
/* ==========================================================================
PERSISTENT TOP BAR: #345B63 SINGLE-ROW (BURGER, SEARCH, TITLE, USER)
========================================================================== */
/* 1. Full-Width Outer Banner Container (Strict #345B63) */
body.page-Main_Page .vector-header-container,
body.page-Main_Page #mw-head,
.vector-header-container {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 86px !important;
max-height: 96px !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 1000 !important;
box-sizing: border-box !important;
}
/* 2. Inner Flex Row: STRICT Single Horizontal Line */
.mw-header {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 86px !important;
max-height: 96px !important;
padding: 0 20px !important;
margin: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
position: relative !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* 3. CENTERED TITLE: Dead-Center On The Same Line */
#vanipedia-topbar-title,
.vanipedia-topbar-main-title {
position: static !important;
transform: none !important;
display: block !important;
font-family: 'Cinzel', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 700 !important;
letter-spacing: 1.8px !important;
color: #f5d77f !important;
text-decoration: none !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
white-space: nowrap !important;
line-height: 1.25 !important;
margin: 0 0 3px 0 !important;
padding: 0 !important;
pointer-events: none !important;
user-select: text !important;
}
#vanipedia-topbar-title {
pointer-events: none !important;
cursor: default !important;
user-select: text !important;
}
#vanipedia-topbar-title:hover {
color: #f5d77f !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
cursor: default !important;
}
/* 4. LEFT SECTION: Burger [ ≡ ] + Search In ONE Row */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
flex: 0 0 auto !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Force Burger Menu Dropdown to ALWAYS display on desktop */
.vector-header-start #vector-main-menu-dropdown {
display: flex !important;
align-items: center !important;
visibility: visible !important;
margin: 0 !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label,
.vector-header-start #vector-main-menu-dropdown .vector-main-menu-dropdown-toggle,
.vector-header-start #vector-main-menu-dropdown .cdx-button--fake-button {
color: #f5d77f !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 6px !important;
line-height: 1 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label:hover {
background-color: rgba(245, 215, 127, 0.15) !important;
border-radius: 4px !important;
}
/* HIGH-VISIBILITY GOLD FOR BURGER & ALL VECTOR ICONS */
.vector-header-container .vector-icon,
.vector-header-start .vector-icon,
.vector-header-end .vector-icon,
.mw-header .vector-icon {
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
filter: brightness(0) saturate(100%) invert(86%) sepia(26%) saturate(884%) hue-rotate(352deg) brightness(102%) contrast(96%) !important;
opacity: 1 !important;
visibility: visible !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
/* Hide duplicate site wordmark & tagline next to burger */
.vector-header-start .mw-logo-wordmark,
.vector-header-start .mw-logo-tagline,
.vector-header-start .mw-logo {
display: none !important;
}
/* Search Box Container on Left */
.vector-header-container #p-search,
.mw-header #p-search {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container #searchform,
.mw-header #searchform {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container .cdx-search-input,
.vector-header-container .vector-search-box-input,
.vector-header-container .cdx-text-input {
max-width: 260px !important;
height: 32px !important;
margin: 0 !important;
}
/* Refined Inset Search Input (Option 1: Harmonious Deep Sea Teal) */
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
background-color: #1f3e45 !important;
border: 1px solid rgba(245, 215, 127, 0.45) !important;
color: #ffffff !important;
border-radius: 18px !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
padding: 4px 12px 4px 30px !important;
font-size: 13px !important;
height: 30px !important;
line-height: 30px !important;
width: 180px !important;
transition: width 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important;
box-sizing: border-box !important;
}
.vector-header-container .cdx-text-input__input:focus,
.vector-header-container input[type="search"]:focus,
#searchInput:focus {
width: 240px !important;
background-color: #173036 !important;
border-color: #f5d77f !important;
box-shadow: 0 0 8px rgba(245, 215, 127, 0.4), inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
outline: none !important;
}
.vector-header-container .cdx-text-input__input::placeholder,
.vector-header-container input[type="search"]::placeholder,
#searchInput::placeholder {
color: #a5c4c9 !important;
font-style: italic !important;
}
.vector-header-container .cdx-text-input__icon,
.vector-header-container .vector-search-box-inner .vector-icon {
color: #f5d77f !important;
fill: #f5d77f !important;
}
/* Hide separate search submit buttons */
.vector-header-container .cdx-search-input__end-button,
.vector-header-container #searchButton,
.vector-header-container #mw-searchButton,
.vector-header-container .searchButton,
.vector-header-container input[type="submit"] {
display: none !important;
}
/* 5. RIGHT SECTION: User Part Fixed (No weird boxes, clean gold, unified dropdown) */
.vector-header-end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: nowrap !important;
gap: 8px !important;
flex: 0 0 auto !important;
height: 100% !important;
margin: 0 0 0 auto !important;
}
/* 5.1 Remove all clunky button box backgrounds and borders from top bar items */
.vector-header-end .cdx-button,
.vector-header-end .cdx-button--fake-button,
.vector-header-end .cdx-button--weight-quiet,
.vector-header-end .vector-dropdown-label,
.vector-header-end .vector-menu-heading,
.vector-header-end #p-personal,
.vector-header-end .vector-user-links,
.vector-header-end .vector-user-menu,
.vector-header-end .vector-menu,
.vector-header-end .vector-menu-content,
.vector-header-end #pt-userpage-2,
.vector-header-end #vector-user-links-dropdown {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* 5.2 Style username & header icons in clean warm gold (no boxes) */
.vector-header-end #pt-userpage-2,
.vector-header-end #pt-userpage-2 span,
.vector-header-end .vector-dropdown-label,
.vector-header-end .vector-user-menu-overflow .vector-dropdown-label {
color: #f5d77f !important;
fill: #f5d77f !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
white-space: nowrap !important;
padding: 4px 8px !important;
border-radius: 4px !important;
display: inline-flex !important;
align-items: center !important;
transition: background-color 0.2s ease, color 0.2s ease !important;
}
.vector-header-end #pt-userpage-2:hover,
.vector-header-end .vector-dropdown-label:hover {
background-color: rgba(245, 215, 127, 0.15) !important;
color: #ffffff !important;
}
/* 5.3 Desktop User Dropdown Menu (Strictly Matching image_a7f3ff.png) */
.vector-header-end .vector-dropdown-content {
background: #1f3e45 !important;
background-color: #1f3e45 !important;
border: 1.5px solid #b1873d !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
padding: 6px 0 !important;
min-width: 175px !important;
width: 180px !important;
overflow: visible !important;
}
.vector-header-end .vector-dropdown-content div,
.vector-header-end .vector-dropdown-content ul,
.vector-header-end .vector-dropdown-content .vector-menu-content {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.vector-header-end .vector-dropdown-content li {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
}
/* Ensure Talk (pt-mytalk) is visible in desktop dropdown */
.vector-header-end .vector-dropdown-content #pt-mytalk {
display: block !important;
visibility: visible !important;
}
/* Hide icons inside desktop user dropdown so it matches image_a7f3ff.png clean text */
.vector-header-end .vector-dropdown-content .vector-icon {
display: none !important;
}
/* Clean, compact, single-row links */
.vector-header-end .vector-dropdown-content a {
display: flex !important;
align-items: center !important;
color: #ffffff !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
line-height: 1.2 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
text-decoration: none !important;
box-sizing: border-box !important;
width: 100% !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
.vector-header-end .vector-dropdown-content a span {
display: inline !important;
padding: 0 !important;
margin: 0 !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
background: transparent !important;
}
.vector-header-end .vector-dropdown-content a:hover,
.vector-header-end .vector-dropdown-content a:focus,
.vector-header-end .vector-dropdown-content a:active {
background-color: #345B63 !important;
color: #f5d77f !important;
text-decoration: none !important;
}
/* Divider above Logout */
.vector-header-end .vector-dropdown-content #pt-logout,
.vector-header-end .vector-dropdown-content #p-user-menu-logout,
.vector-header-end .vector-dropdown-content .vector-user-menu-logout {
border-top: 1px solid rgba(177, 135, 61, 0.35) !important;
margin-top: 6px !important;
padding-top: 4px !important;
}
.vector-header-end .vector-dropdown-content #pt-logout a,
.vector-header-end .vector-dropdown-content #p-user-menu-logout a {
color: #ffffff !important;
}
.vector-header-end .vector-dropdown-content #pt-logout a:hover,
.vector-header-end .vector-dropdown-content #p-user-menu-logout a:hover {
background-color: #345B63 !important;
color: #fca5a5 !important;
}
/* 6. DISABLE ALL HOVER PREVIEWS / POPUPS IN TOP BAR */
.vector-header-container [title]:hover::after,
.vector-header-container [title]:hover::before,
.vector-header-container a[title]:hover::after,
.vector-header-container a[title]:hover::before,
.mw-header [title]:hover::after,
.mw-header [title]:hover::before,
.mw-header a[title]:hover::after,
.mw-header a[title]:hover::before {
display: none !important;
content: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 7. Sticky Header Support (Color: #345B63) */
.vector-sticky-header {
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
height: 48px !important;
}
.vector-sticky-header a,
.vector-sticky-header .vector-icon {
color: #f5d77f !important;
fill: #f5d77f !important;
}
/* 8. Main Page Adjustments: Clean Flush Under Top Bar */
body.page-Main_Page #vani-home .vh-top {
display: none !important;
}
body.page-Main_Page #vani-home .vh-photo-stage {
top: 0 !important;
}
/* ==========================================================================
ELIMINATE UNWANTED LIGHT-GREEN STRIP / TOOLBAR UNDER TOP BAR
========================================================================== */
body.page-Main_Page .vector-page-toolbar-container,
body.page-Main_Page .vector-page-toolbar,
body.page-Main_Page #siteNotice,
body.page-Main_Page #localNotice,
body.page-Main_Page #mw-page-base,
body.page-Main_Page #mw-head-base,
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 #p-lang-btn {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
visibility: hidden !important;
overflow: hidden !important;
}
/* Ensure no gap or background bleed between top bar and content on Main Page */
body.page-Main_Page .vector-header-container {
margin-bottom: 0 !important;
}
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 {
margin-top: 0 !important;
padding-top: 0 !important;
background: #f6f2e9 !important;
background-color: #f6f2e9 !important;
}
/* ==========================================================================
WHO IS SRILA PRABHUPADA & FOUNDER-ACARYA HERO ALIGNMENT
========================================================================== */
.vh-hero-title-wrap {
text-align: center !important;
margin: 16px auto 8px auto !important;
position: relative !important;
z-index: 2 !important;
}
.vh-hero-title-link {
text-decoration: none !important;
display: inline-block !important;
}
.vh-who-corner {
display: block !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: #b1873d !important; /* Temple Gold */
margin-bottom: 4px !important;
}
.vh-main-title {
display: block !important;
font-family: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif !important;
font-size: 46px !important;
font-weight: 700 !important;
line-height: 1.1 !important;
color: #1e353b !important; /* Deep Sacred Slate-Teal */
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}
.vh-founder-subline {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
margin: 6px auto 14px auto !important;
padding: 4px 18px !important;
background: rgba(177, 135, 61, 0.08) !important;
border: 1px solid rgba(177, 135, 61, 0.25) !important;
border-radius: 20px !important;
color: #345B63 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
font-style: italic !important;
letter-spacing: 0.5px !important;
}
.vh-founder-subline::before,
.vh-founder-subline::after {
content: "♦" !important;
font-size: 10px !important;
color: #b1873d !important;
}
/* ==========================================================================
PANORAMIC TIMELINE RIBBON (1896 – 1977) BETWEEN HERO & GATEWAYS
========================================================================== */
.vh-timeline-panoramic {
width: 100% !important;
max-width: 1400px !important;
margin: 18px auto 24px auto !important;
padding: 12px 16px !important;
background: #faf7f0 !important;
border-top: 1px solid rgba(177, 135, 61, 0.35) !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.35) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
border-radius: 4px !important;
box-sizing: border-box !important;
}
.vh-timeline-panoramic .vh-timeline-years {
top: 0 !important;
margin: 0 auto 12px auto !important;
gap: 14px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
.vh-timeline-panoramic .vh-year {
font-size: 16px !important;
font-weight: 600 !important;
padding: 5px 12px !important;
border-radius: 14px !important;
color: #345B63 !important;
background: rgba(255, 255, 255, 0.7) !important;
border: 1px solid rgba(177, 135, 61, 0.2) !important;
transition: all 0.2s ease !important;
}
.vh-timeline-panoramic .vh-year:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
transform: translateY(-2px) !important;
box-shadow: 0 3px 8px rgba(52, 91, 99, 0.25) !important;
}
.vh-timeline-panoramic .vh-year.is-active {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #b1873d !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
/* FORCE WARM PARCHMENT ON ALL MAIN PAGE CONTAINERS (KILL MINT GREEN BLEED) */
body.page-Main_Page,
html.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;
background-color: #f6f2e9 !important;
background-image: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
}
/* ==========================================================================
VANIPEDIA STRICT ZERO-SCROLL VIEWPORT-FIT SYSTEM (STEP 11)
========================================================================== */
/* 1. Strict Zero-Scroll Viewport Locking */
html.page-Main_Page,
body.page-Main_Page {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page .mw-page-container {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
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 {
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* 2. Master Canvas Vertical Rhythm (Auto-distributed inside single screen) */
body.page-Main_Page #vani-home {
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 8px !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 8px 18px 10px 18px !important;
box-sizing: border-box !important;
overflow: hidden !important;
background-color: transparent !important;
}
/* Base Card Styling */
.vh-card,
.vh-gateway,
.vh-quote-frame,
.vh-bottom-card {
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.35) !important;
border-radius: 6px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
box-sizing: border-box !important;
}
/* Card Header Ribbon */
.vh-card-header {
background: rgba(177, 135, 61, 0.1) !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.28) !important;
padding: 6px 12px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #b1873d !important;
}
.vh-card-header .vh-badge-icon {
font-size: 13px !important;
margin-right: 5px !important;
}
.vh-card-header .vh-badge-sub {
font-size: 9.5px !important;
letter-spacing: 1px !important;
color: #345B63 !important;
opacity: 0.85 !important;
}
.vh-card-body {
padding: 10px 14px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
box-sizing: border-box !important;
font-size: 13px !important;
line-height: 1.45 !important;
}
/* SECTION 1: HERO TRIAD (Compact) */
.vh-triad-grid {
display: grid !important;
grid-template-columns: 280px 1fr 280px !important;
gap: 14px !important;
align-items: stretch !important;
flex: 0 0 auto !important;
max-height: 235px !important;
}
/* Memories of Srila Prabhupada Card (Left) */
.vh-card-memories .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #1e353b !important;
text-decoration: none !important;
display: block !important;
margin-bottom: 6px !important;
}
.vh-card-memories .vh-card-snippet {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
color: #4a5568 !important;
flex: 1 1 auto !important;
}
.vh-card-actions {
margin-top: 8px !important;
}
.vh-btn-pill {
display: inline-flex !important;
align-items: center !important;
padding: 4px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #345B63 !important;
background: rgba(52, 91, 99, 0.08) !important;
border: 1px solid rgba(52, 91, 99, 0.28) !important;
border-radius: 14px !important;
transition: all 0.2s ease !important;
}
.vh-btn-pill:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
}
/* Center Sanctuary Frame */
.vh-card-sanctuary {
background: radial-gradient(circle at center, #ffffff 0%, #faf6ee 100%) !important;
padding: 10px 16px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.vh-card-sanctuary .vh-hero-title-wrap {
margin: 0 !important;
}
.vh-card-sanctuary .vh-who-corner {
display: block !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
color: #b1873d !important;
margin-bottom: 0px !important;
}
.vh-card-sanctuary .vh-main-title {
font-family: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif !important;
font-size: 34px !important;
font-weight: 700 !important;
line-height: 1 !important;
color: #1e353b !important;
}
/* Button below Srila Prabhupada: only "Founder-Ācārya of ISKCON", clickable wiki link */
.vh-card-sanctuary .vh-founder-subline {
display: inline-block !important;
margin: 3px auto 6px auto !important;
}
.vh-card-sanctuary .vh-founder-subline a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 3px 14px !important;
background: rgba(177, 135, 61, 0.12) !important;
border: 1px solid rgba(177, 135, 61, 0.4) !important;
border-radius: 16px !important;
color: #345B63 !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.vh-card-sanctuary .vh-founder-subline a:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
box-shadow: 0 2px 6px rgba(52, 91, 99, 0.3) !important;
}
/* Compact Sacred Portrait Oval */
.vh-portrait-wrapper {
margin: 2px auto 4px auto !important;
display: flex !important;
justify-content: center !important;
}
.vh-portrait-wrapper .vh-photo-stage {
width: 110px !important;
height: 110px !important;
border-radius: 50% !important;
border: 2.5px solid #b1873d !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
overflow: hidden !important;
position: relative !important;
background-color: #f4ebd9 !important;
}
.vh-card-sanctuary .vh-description {
font-family: 'Noto Serif', Georgia, serif !important;
font-style: italic !important;
font-size: 12px !important;
color: #576574 !important;
margin: 2px auto 0 auto !important;
max-width: 440px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* SECTION 2: CLEAN INTERACTIVE TIMELINE (No outer border/box rectangle) */
.vh-timeline-section {
position: relative !important;
top: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.vh-timeline-years {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 auto 6px auto !important;
padding: 0 !important;
position: static !important;
top: 0 !important;
}
.vh-timeline-years .vh-year {
padding: 3px 10px !important;
border-radius: 12px !important;
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.28) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: #345B63 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
line-height: 1.2 !important;
}
.vh-timeline-years .vh-year:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
transform: translateY(-1px) !important;
}
.vh-timeline-years .vh-year.is-active {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #b1873d !important;
font-weight: 700 !important;
}
/* Lifeline track window */
.vh-lifeline-window {
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.22) !important;
border-radius: 6px !important;
height: 80px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 auto !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.vh-timeline-track {
display: flex !important;
align-items: flex-start !important;
height: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
.vh-timeline-track::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 36px !important;
height: 1px !important;
background: rgba(177, 135, 61, 0.35) !important;
}
.vh-timeline-item {
flex: 0 0 200px !important;
padding: 6px 14px 0 !important;
box-sizing: border-box !important;
position: relative !important;
}
.vh-timeline-date {
font-size: 11px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 1.2 !important;
}
.vh-timeline-dot {
position: absolute !important;
top: 32px !important;
left: 14px !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #b1873d !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1px #b1873d !important;
}
.vh-timeline-text {
margin-top: 14px !important;
font-size: 11px !important;
line-height: 1.3 !important;
color: #1e293b !important;
max-width: 170px !important;
white-space: normal !important;
}
/* SECTION 3: 6 GATEWAYS GRID (Compact 6-Columns) */
.vh-gateways-frame {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 10px !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.vh-gateway {
padding: 8px 6px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.vh-gateway:hover {
transform: translateY(-2px) !important;
border-color: #b1873d !important;
box-shadow: 0 4px 12px rgba(177, 135, 61, 0.15) !important;
}
.vh-gw-icon-circle {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
background: rgba(177, 135, 61, 0.1) !important;
border: 1px solid rgba(177, 135, 61, 0.22) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 4px !important;
}
.vh-gateway .vh-icon {
font-size: 15px !important;
color: #b1873d !important;
}
.vh-gateway-title {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 13.5px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: #1e353b !important;
margin: 0 0 4px 0 !important;
width: 100% !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.2) !important;
padding-bottom: 2px !important;
}
.vh-gateway-links {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
width: 100% !important;
font-size: 11.5px !important;
}
.vh-gateway-links a {
color: #2c3e50 !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.vh-gateway-links a:hover {
color: #b1873d !important;
text-decoration: underline !important;
}
/* SECTION 4: QUOTE SCROLL (Slim Banner) */
.vh-quote-frame {
background: #faf6ee !important;
border: 1px solid rgba(177, 135, 61, 0.3) !important;
border-radius: 6px !important;
padding: 8px 24px !important;
margin: 0 auto !important;
text-align: center !important;
width: 100% !important;
max-width: 1000px !important;
flex: 0 0 auto !important;
}
.vh-quote-frame .vh-quote-inner {
font-family: 'Noto Serif', Georgia, serif !important;
font-style: italic !important;
font-size: 13.5px !important;
line-height: 1.4 !important;
color: #1e353b !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
}
.vh-quote-frame .vh-quote-text {
max-width: 750px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.vh-quote-frame .vh-quote-source {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-style: normal !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: #b1873d !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.vh-quote-mark {
color: rgba(177, 135, 61, 0.45) !important;
font-size: 24px !important;
line-height: 1 !important;
font-family: Georgia, serif !important;
}
/* SECTION 5: BOTTOM MODULES (Treasures & Network) */
.vh-bottom-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.vh-bottom-card {
padding: 0 !important;
overflow: hidden !important;
}
.vh-feature-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
padding: 8px 10px !important;
}
.vh-feature {
background: #faf7f0 !important;
border: 1px solid rgba(177, 135, 61, 0.2) !important;
border-radius: 4px !important;
padding: 6px 8px !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
font-size: 11px !important;
}
.vh-network-stats-grid {
display: flex !important;
justify-content: space-around !important;
gap: 6px !important;
padding: 8px 10px 4px 10px !important;
text-align: center !important;
}
.vh-network-stat {
flex: 1 1 0 !important;
background: #faf7f0 !important;
border: 1px solid rgba(177, 135, 61, 0.2) !important;
border-radius: 4px !important;
padding: 6px 2px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-decoration: none !important;
}
.vh-stat-num {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #1e353b !important;
}
.vh-stat-lbl {
font-size: 8.5px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #b1873d !important;
}
.vh-network-mission {
text-align: center !important;
padding: 4px 10px 6px 10px !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
font-style: italic !important;
color: #576574 !important;
}
/* ==========================================================================
THEMATIC TAXONOMY INDEX (4 SECTIONS) & PRABHUPADA IN MEDIA (STEP 12)
========================================================================== */
/* Section Heading */
.vh-section-header {
margin: 18px 0 10px 0 !important;
text-align: left !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.25) !important;
padding-bottom: 6px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.vh-section-badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background: #345B63 !important;
padding: 3px 8px !important;
border-radius: 4px !important;
}
.vh-section-heading {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16px !important;
letter-spacing: 1.2px !important;
color: #1e353b !important;
margin: 0 !important;
}
/* 4-Column Taxonomy Grid */
.vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
width: 100% !important;
margin-bottom: 16px !important;
}
.vh-card-tax {
display: flex !important;
flex-direction: column !important;
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.3) !important;
border-radius: 6px !important;
}
.vh-tax-spotlight-item {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
flex: 1 1 auto !important;
}
.vh-tax-item-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #1e353b !important;
text-decoration: none !important;
}
.vh-tax-item-name a:hover {
color: #b1873d !important;
text-decoration: underline !important;
}
.vh-tax-item-desc {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #4a5568 !important;
flex: 1 1 auto !important;
}
.vh-tax-item-link {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
color: #345B63 !important;
text-decoration: none !important;
margin-top: 6px !important;
display: inline-block !important;
}
.vh-tax-item-link:hover {
color: #b1873d !important;
text-decoration: underline !important;
}
/* Prabhupada in the Media Section */
.vh-card-media-section {
background: #faf7f0 !important;
margin-bottom: 16px !important;
}
.vh-media-body {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
padding: 12px 18px !important;
}
.vh-media-desc {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #334155 !important;
flex: 1 1 auto !important;
}
.vh-media-actions {
flex-shrink: 0 !important;
}
/* Allow smooth scrolling when full sections are present */
body.page-Main_Page {
overflow-y: auto !important;
}
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
body.page-Main_Page #vani-home {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
@media (max-width: 1024px) {
.vh-taxonomy-grid { grid-template-columns: repeat(2, 1fr) !important; }
.vh-media-body { flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 640px) {
.vh-taxonomy-grid { grid-template-columns: 1fr !important; }
}
/* Explicitly hide quote and bottom sections if any old cache or DOM remains */
.vh-quote-frame,
#vh-random-quote-wrap,
.vh-bottom-grid,
.vh-bottom-card,
.vh-card-treasures,
.vh-card-network {
display: none !important;
}
/* ==========================================================================
STEP 14: TOP BAR SEARCH ANCHORED LEFT + SACRED 3D ARCHITECTURAL STYLING
========================================================================== */
/* 1. TOP BAR LEFT ANCHOR FOR SEARCH */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
flex: 0 0 auto !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-start #vector-main-menu-dropdown {
order: 1 !important;
}
.vector-header-start #p-search,
.vector-header-container #p-search,
.mw-header #p-search {
order: 2 !important;
display: flex !important;
align-items: center !important;
margin: 0 0 0 4px !important;
padding: 0 !important;
}
/* 2. 3D CARDS (HERO TRIAD, GATEWAYS, TAXONOMY, MEDIA) */
.vh-card,
.vh-gateway,
.vh-card-tax,
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #faf8f4 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.32) !important;
border-top: 1px solid rgba(255, 255, 255, 0.95) !important;
border-bottom: 2.5px solid rgba(177, 135, 61, 0.45) !important;
border-radius: 8px !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 5px 15px rgba(30, 53, 59, 0.07),
0 10px 24px -5px rgba(30, 53, 59, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1) !important;
position: relative !important;
}
.vh-card:hover,
.vh-gateway:hover,
.vh-card-tax:hover,
.vh-card-media-section:hover {
transform: translateY(-3px) !important;
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.06),
0 10px 25px rgba(30, 53, 59, 0.12),
0 16px 32px -6px rgba(177, 135, 61, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
/* Card Header Plaques (Embossed Top Bar) */
.vh-card-header {
background: linear-gradient(180deg, #fbf9f4 0%, #f2ebdd 100%) !important;
border-bottom: 1.5px solid rgba(177, 135, 61, 0.3) !important;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(0, 0, 0, 0.03) !important;
border-top-left-radius: 7px !important;
border-top-right-radius: 7px !important;
}
/* Sanctuary Center Card (Elevated Sovereign Altar) */
.vh-card-sanctuary {
background: radial-gradient(circle at 50% 35%, #ffffff 0%, #faf6ec 65%, #f3ece0 100%) !important;
border: 1.5px solid rgba(177, 135, 61, 0.45) !important;
border-top: 1.5px solid rgba(255, 255, 255, 1) !important;
border-bottom: 3.5px solid rgba(177, 135, 61, 0.6) !important;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.06),
0 8px 24px rgba(30, 53, 59, 0.11),
0 16px 36px -6px rgba(177, 135, 61, 0.14),
inset 0 1px 0 #ffffff,
inset 0 0 20px rgba(177, 135, 61, 0.04) !important;
}
/* Sacred Portrait Medallion Frame */
.vh-portrait-wrapper .vh-photo-stage {
border: 3.5px solid #b1873d !important;
box-shadow:
0 6px 18px rgba(30, 53, 59, 0.22),
0 12px 28px rgba(0, 0, 0, 0.15),
inset 0 2px 4px rgba(255, 255, 255, 0.8),
inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.vh-portrait-wrapper .vh-photo-stage:hover {
transform: scale(1.03) !important;
box-shadow:
0 8px 24px rgba(30, 53, 59, 0.28),
0 16px 36px rgba(177, 135, 61, 0.3),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -3px 6px rgba(0, 0, 0, 0.45) !important;
}
/* 3D Gateways Icon Medallions */
.vh-gw-icon-circle {
background: linear-gradient(145deg, #ffffff 0%, #f6efe0 50%, #eadecb 100%) !important;
border: 1.5px solid #b1873d !important;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.10),
inset 0 1px 1px #ffffff,
inset 0 -1.5px 2px rgba(177, 135, 61, 0.45) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.vh-gateway:hover .vh-gw-icon-circle {
transform: scale(1.08) translateY(-1px) !important;
background: linear-gradient(145deg, #fdfbf7 0%, #f2e3c6 100%) !important;
box-shadow:
0 5px 10px rgba(177, 135, 61, 0.25),
inset 0 1px 1px #ffffff,
inset 0 -1.5px 2px rgba(177, 135, 61, 0.6) !important;
}
/* 3D Tactile Timeline Year Keys */
.vh-timeline-years .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #f4eee2 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.35) !important;
border-top: 1px solid rgba(255, 255, 255, 0.95) !important;
border-bottom: 2.5px solid rgba(177, 135, 61, 0.55) !important;
border-radius: 14px !important;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.07),
inset 0 1px 0 #ffffff !important;
transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.vh-timeline-years .vh-year:hover {
transform: translateY(-2px) !important;
border-bottom: 3.5px solid rgba(177, 135, 61, 0.75) !important;
box-shadow:
0 4px 10px rgba(177, 135, 61, 0.22),
inset 0 1px 0 #ffffff !important;
color: #1e353b !important;
}
.vh-timeline-years .vh-year.is-active {
background: linear-gradient(180deg, #345B63 0%, #1f373c 100%) !important;
color: #ffffff !important;
border: 1px solid #122124 !important;
border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
border-bottom: 2.5px solid #0d1719 !important;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.4),
0 2px 5px rgba(0, 0, 0, 0.15) !important;
}
/* Raised 3D Pill Action Buttons */
.vh-btn-pill,
.vh-founder-subline a,
.vh-tax-item-link {
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
transition: all 0.2s ease !important;
}
.vh-btn-pill {
background: linear-gradient(180deg, #3d6a74 0%, #28474e 100%) !important;
color: #ffffff !important;
border: 1px solid #1a2f34 !important;
border-bottom: 2px solid #0f1c1f !important;
border-radius: 16px !important;
padding: 4px 14px !important;
display: inline-block !important;
}
.vh-btn-pill:hover {
background: linear-gradient(180deg, #b1873d 0%, #916c2a 100%) !important;
border-color: #72531a !important;
border-bottom: 2.5px solid #553e13 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(177, 135, 61, 0.3) !important;
color: #ffffff !important;
}
.vh-founder-subline a {
background: linear-gradient(180deg, #ffffff 0%, #f6efe2 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.4) !important;
border-bottom: 2.5px solid rgba(177, 135, 61, 0.65) !important;
}
.vh-founder-subline a:hover {
background: linear-gradient(180deg, #345B63 0%, #213c42 100%) !important;
color: #ffffff !important;
border-color: #162a2e !important;
border-bottom: 2.5px solid #0b1517 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(30, 53, 59, 0.25) !important;
}
/* 3D Lifeline Track (Carved Groove with Illuminated Bar) */
.vh-lifeline {
background: linear-gradient(180deg, #e4ded0 0%, #ede7db 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.25) !important;
border-bottom: 1px solid #ffffff !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.10) !important;
border-radius: 12px !important;
}
/* ==========================================================================
STEP 15: "SOLID" ARCHITECTURAL PRESENCE & EMBOSSED 3D DEPTH
========================================================================== */
/* 1. SOLID CARD ARCHITECTURE (SUBSTANTIAL GROUNDED PRESENCE) */
.vh-card,
.vh-gateway,
.vh-card-tax,
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #fbf9f4 60%, #f5efe2 100%) !important;
border: 1.5px solid #c09b4d !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #8e6b22 !important;
border-radius: 8px !important;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 8px 20px rgba(24, 38, 35, 0.12),
0 16px 32px -4px rgba(24, 38, 35, 0.14),
inset 0 1px 0 #ffffff,
inset 0 -1px 0 rgba(192, 155, 77, 0.2) !important;
transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1), border-color 0.22s ease !important;
position: relative !important;
}
.vh-card:hover,
.vh-gateway:hover,
.vh-card-tax:hover,
.vh-card-media-section:hover {
transform: translateY(-4px) !important;
border-color: #d4ab55 !important;
border-bottom: 4.5px solid #7a5818 !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.10),
0 14px 28px rgba(24, 38, 35, 0.18),
0 24px 42px -6px rgba(177, 135, 61, 0.25),
inset 0 1px 0 #ffffff !important;
}
/* 2. SOLID EMBOSSED CARD HEADER (STONE/METAL LINTEL) */
.vh-card-header {
background: linear-gradient(180deg, #faf6ee 0%, #ebe0ca 100%) !important;
border-bottom: 2px solid #b89348 !important;
box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.05) !important;
border-top-left-radius: 6.5px !important;
border-top-right-radius: 6.5px !important;
padding: 8px 14px !important;
}
.vh-badge-text {
font-weight: 800 !important;
letter-spacing: 1.6px !important;
color: #725215 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.vh-badge-sub {
font-weight: 700 !important;
color: #55442a !important;
background: rgba(177, 135, 61, 0.16) !important;
border: 1px solid rgba(177, 135, 61, 0.35) !important;
border-radius: 4px !important;
padding: 2px 7px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
/* 3. SANCTUARY CENTER CARD (SOVEREIGN REVERENTIAL ALTAR) */
.vh-card-sanctuary {
background: radial-gradient(circle at 50% 32%, #ffffff 0%, #fbf6ec 55%, #f0e6d2 100%) !important;
border: 2px solid #b1873d !important;
border-top: 2px solid #ffffff !important;
border-bottom: 4.5px solid #785414 !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.09),
0 12px 28px rgba(24, 38, 35, 0.16),
0 22px 44px -8px rgba(177, 135, 61, 0.22),
inset 0 1px 0 #ffffff,
inset 0 0 24px rgba(177, 135, 61, 0.08) !important;
}
.vh-card-sanctuary .vh-main-title {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}
/* 4. SOLID CAST GOLD PORTRAIT MEDALLION */
.vh-portrait-wrapper .vh-photo-stage {
border: 4px solid #b1873d !important;
box-shadow:
0 8px 24px rgba(20, 35, 32, 0.32),
0 16px 36px rgba(0, 0, 0, 0.22),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -4px 8px rgba(0, 0, 0, 0.5) !important;
}
.vh-portrait-wrapper .vh-photo-stage:hover {
transform: scale(1.04) !important;
border-color: #c99c45 !important;
box-shadow:
0 12px 32px rgba(20, 35, 32, 0.40),
0 20px 45px rgba(177, 135, 61, 0.35),
inset 0 2px 4px rgba(255, 255, 255, 1),
inset 0 -4px 8px rgba(0, 0, 0, 0.55) !important;
}
/* 5. SOLID GATEWAYS WITH SCULPTED BRONZE/GOLD MEDALLIONS */
.vh-gateway {
padding: 14px 10px 12px 10px !important;
}
.vh-gw-icon-circle {
width: 38px !important;
height: 38px !important;
background: linear-gradient(135deg, #ffffff 0%, #eedfc7 50%, #d6ba8f 100%) !important;
border: 2px solid #b1873d !important;
border-top-color: #ffffff !important;
border-bottom-color: #825f18 !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.14),
inset 0 1px 1.5px #ffffff,
inset 0 -2px 3px rgba(130, 95, 30, 0.5) !important;
}
.vh-gateway:hover .vh-gw-icon-circle {
transform: scale(1.1) translateY(-2px) !important;
background: linear-gradient(135deg, #ffffff 0%, #f7ebd5 50%, #e5cb9e 100%) !important;
border-color: #c49d48 !important;
box-shadow:
0 6px 14px rgba(177, 135, 61, 0.35),
inset 0 1px 2px #ffffff,
inset 0 -2px 4px rgba(130, 95, 30, 0.6) !important;
}
.vh-gateway-title {
font-size: 14px !important;
font-weight: 700 !important;
color: #14282c !important;
letter-spacing: 1.4px !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
margin-top: 6px !important;
}
/* 6. SOLID TACTILE TIMELINE YEAR BUTTONS */
.vh-timeline-years .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #efe7d6 100%) !important;
border: 1.5px solid #b89348 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #785414 !important;
border-radius: 14px !important;
font-weight: 700 !important;
color: #213c42 !important;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.10),
inset 0 1px 0 #ffffff !important;
padding: 4px 12px !important;
}
.vh-timeline-years .vh-year:hover {
transform: translateY(-2.5px) !important;
border-color: #cda24e !important;
border-bottom: 4.5px solid #63430c !important;
box-shadow:
0 6px 14px rgba(177, 135, 61, 0.28),
inset 0 1px 0 #ffffff !important;
color: #0b1a1c !important;
}
.vh-timeline-years .vh-year.is-active {
background: linear-gradient(180deg, #2b4f57 0%, #172c30 100%) !important;
color: #ffffff !important;
border: 1.5px solid #0d191c !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.4) !important;
border-bottom: 3.5px solid #060c0d !important;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.5),
0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
/* 7. SOLID CARVED LIFELINE TRACK */
.vh-lifeline {
background: linear-gradient(180deg, #ded6c4 0%, #e8e1d3 100%) !important;
border: 1.5px solid #a8843c !important;
border-top-color: #8c6a26 !important;
border-bottom-color: #ffffff !important;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16) !important;
border-radius: 12px !important;
}
/* 8. SOLID 3D ACTION PILL BUTTONS */
.vh-btn-pill {
background: linear-gradient(180deg, #376069 0%, #20393f 100%) !important;
color: #ffffff !important;
border: 1.5px solid #142529 !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
border-bottom: 3px solid #0a1315 !important;
border-radius: 16px !important;
padding: 5px 16px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
box-shadow:
0 3px 7px rgba(0, 0, 0, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
}
.vh-btn-pill:hover {
background: linear-gradient(180deg, #b88e40 0%, #8c661d 100%) !important;
border-color: #61440d !important;
border-top-color: rgba(255, 255, 255, 0.5) !important;
border-bottom: 3.5px solid #432e08 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 14px rgba(177, 135, 61, 0.38) !important;
color: #ffffff !important;
}
.vh-founder-subline a {
background: linear-gradient(180deg, #ffffff 0%, #f4ebd9 100%) !important;
border: 1.5px solid #b89348 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3px solid #785414 !important;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff !important;
}
.vh-founder-subline a:hover {
background: linear-gradient(180deg, #345B63 0%, #1b3237 100%) !important;
color: #ffffff !important;
border-color: #0e1e21 !important;
border-top-color: rgba(255, 255, 255, 0.4) !important;
border-bottom: 3.5px solid #050b0c !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 14px rgba(30, 53, 59, 0.3) !important;
}
/* 9. SOLID DEDICATED MEDIA ARCHIVES SECTION */
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #faf6ee 100%) !important;
border: 1.5px solid #b89348 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #785414 !important;
margin-top: 8px !important;
margin-bottom: 24px !important;
}
.vh-media-desc {
font-size: 13.5px !important;
font-weight: 500 !important;
color: #273b40 !important;
}
/* 10. Hide THEMATIC TAXONOMY INDEX announcement banner from old cache */
.vh-section-header,
.vh-section-badge,
.vh-section-heading {
display: none !important;
}
/* Explicitly hide the 6 gateways frame if any cache remains */
.vh-gateways-frame,
.vh-gateway,
.vh-gw-icon-circle {
display: none !important;
}
/* ==========================================================================
SAFE NO-SCROLL DASHBOARD & ZERO-OVERLAP ARCHITECTURE (STEP 18)
========================================================================== */
/* 1. PREVENT SCROLLING ON MAIN PAGE CLEANLY WITHOUT BREAKING VECTOR INTERNALS */
body.page-Main_Page {
overflow-y: hidden !important;
overflow-x: hidden !important;
}
/* 2. THE MASTER DASHBOARD CONTAINER (FITS SCREEN EXACTLY) */
body.page-Main_Page #vani-home {
height: calc(100vh - 56px) !important;
max-height: calc(100vh - 56px) !important;
box-sizing: border-box !important;
padding: 6px 16px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 6px !important;
overflow: hidden !important;
position: relative !important;
}
/* Neutralize old legacy absolute / conflicting rules */
.vh-intro,
.vh-now,
.vh-main,
.vh-gateways,
.vh-who-link {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
display: block !important;
}
/* 3. SECTION 1: HERO TRIAD */
.vh-triad-grid {
flex: 1 1 37% !important;
max-height: 38vh !important;
min-height: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1.15fr 1fr !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.vh-triad-grid .vh-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.vh-card-header {
flex: 0 0 auto !important;
padding: 5px 10px !important;
}
.vh-card-body {
flex: 1 1 auto !important;
padding: 6px 10px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Center Card: Sanctuary Altar */
.vh-card-sanctuary {
padding: 6px 12px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
}
.vh-card-sanctuary .vh-hero-title-wrap {
margin: 0 !important;
line-height: 1 !important;
}
.vh-card-sanctuary .vh-who-corner {
position: static !important;
display: block !important;
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #b1873d !important;
margin: 0 auto 2px auto !important;
}
.vh-card-sanctuary .vh-main-title {
font-size: 24px !important;
line-height: 1.1 !important;
font-weight: 700 !important;
color: #123f38 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
}
.vh-card-sanctuary .vh-founder-subline {
margin: 2px auto !important;
}
.vh-card-sanctuary .vh-founder-subline a {
padding: 2px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
}
.vh-portrait-wrapper {
margin: 2px auto !important;
}
.vh-portrait-wrapper .vh-photo-stage {
width: 85px !important;
height: 85px !important;
}
.vh-card-sanctuary .vh-gold-rule {
width: 28px !important;
height: 2px !important;
margin: 2px auto !important;
background: #b1873d !important;
}
.vh-card-sanctuary .vh-description {
position: static !important;
width: auto !important;
max-width: 90% !important;
min-height: 0 !important;
font-size: 13px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* 4. SECTION 2: INTERACTIVE LIFE TIMELINE */
.vh-timeline-section {
flex: 0 0 auto !important;
height: 62px !important;
max-height: 62px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
position: relative !important;
}
.vh-timeline-years {
position: static !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
margin: 0 0 3px 0 !important;
padding: 0 !important;
width: 100% !important;
white-space: nowrap !important;
}
.vh-timeline-years .vh-year {
padding: 2px 8px !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
.vh-lifeline-window {
position: relative !important;
height: 30px !important;
max-height: 30px !important;
overflow: hidden !important;
}
.vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
/* 5. SECTION 3: THEMATIC TAXONOMY (4 CARDS) */
.vh-taxonomy-section {
flex: 1 1 37% !important;
max-height: 39vh !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 10px !important;
height: 100% !important;
width: 100% !important;
margin: 0 !important;
}
.vh-card-tax {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.vh-card-tax .vh-card-header {
padding: 4px 8px !important;
}
.vh-card-tax .vh-card-body {
padding: 5px 8px !important;
}
.vh-tax-spotlight-item {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.vh-tax-item-name a {
font-size: 13.5px !important;
font-weight: 700 !important;
}
.vh-tax-item-desc {
font-size: 11px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vh-tax-item-link {
font-size: 10px !important;
margin-top: auto !important;
}
/* 6. SECTION 4: PRABHUPĀDA IN THE MEDIA (COMPACT HORIZONTAL BAR 42px) */
.vh-card-media-section {
flex: 0 0 auto !important;
height: 42px !important;
max-height: 42px !important;
margin: 0 !important;
padding: 0 14px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
box-sizing: border-box !important;
}
.vh-card-media-section .vh-card-header {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.vh-card-media-section .vh-media-body {
padding: 0 !important;
flex: 1 1 auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
}
.vh-card-media-section .vh-media-desc {
font-size: 11.5px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: #273b40 !important;
flex: 1 1 auto !important;
}
.vh-card-media-section .vh-media-actions {
flex-shrink: 0 !important;
}
.vh-card-media-section .vh-btn-pill {
padding: 3px 12px !important;
font-size: 10px !important;
}
/* ==========================================================================
STEP 19: FULL-WIDTH VIEW + TOP-BAR TEAL (#345B63) BORDERS & SHADOWS
+ REFINED COMPACT SIZING & EXPANDED AIRY SPACING
========================================================================== */
/* 1. FULL WIDTH VIEW (EXPAND TO 100% SCREEN WIDTH) */
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
box-sizing: border-box !important;
padding: 10px 24px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
overflow: hidden !important;
position: relative !important;
}
/* 2. TEAL (#345B63) BORDERS & MULTI-STOP TEAL SHADOWS ACROSS ALL CARDS */
.vh-card,
.vh-gateway,
.vh-card-tax,
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 65%, #f2f7f7 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16),
inset 0 1px 0 #ffffff !important;
transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1), border-color 0.22s ease !important;
position: relative !important;
}
.vh-card:hover,
.vh-gateway:hover,
.vh-card-tax:hover,
.vh-card-media-section:hover {
transform: translateY(-3px) !important;
border-color: #43727c !important;
border-bottom: 4.5px solid #1a2f34 !important;
box-shadow:
0 4px 8px rgba(52, 91, 99, 0.12),
0 12px 26px rgba(52, 91, 99, 0.22),
0 22px 38px -6px rgba(52, 91, 99, 0.26),
inset 0 1px 0 #ffffff !important;
}
/* Card Header Lintels (Teal Borders & Toned Accents) */
.vh-card-header {
background: linear-gradient(180deg, #ffffff 0%, #eaf1f2 100%) !important;
border-bottom: 2px solid #345B63 !important;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(52, 91, 99, 0.06) !important;
border-top-left-radius: 6.5px !important;
border-top-right-radius: 6.5px !important;
padding: 5px 12px !important;
}
.vh-badge-text {
font-weight: 800 !important;
letter-spacing: 1.5px !important;
color: #345B63 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.vh-badge-sub {
font-weight: 700 !important;
color: #233e44 !important;
background: rgba(52, 91, 99, 0.12) !important;
border: 1px solid rgba(52, 91, 99, 0.35) !important;
border-radius: 4px !important;
padding: 2px 7px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
/* 3. SANCTUARY ALAR CARD (REFINED 3D TEAL EMBOSSING) */
.vh-card-sanctuary {
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
border: 2px solid #345B63 !important;
border-top: 2px solid #ffffff !important;
border-bottom: 4.5px solid #1a2f34 !important;
box-shadow:
0 4px 8px rgba(52, 91, 99, 0.10),
0 12px 26px rgba(52, 91, 99, 0.18),
0 22px 40px -6px rgba(52, 91, 99, 0.22),
inset 0 1px 0 #ffffff,
inset 0 0 24px rgba(52, 91, 99, 0.05) !important;
padding: 6px 14px !important;
}
/* Sacred Portrait Medallion Bezel in #345B63 */
.vh-portrait-wrapper .vh-photo-stage {
width: 80px !important;
height: 80px !important;
border: 3.5px solid #345B63 !important;
box-shadow:
0 6px 18px rgba(52, 91, 99, 0.35),
0 12px 26px rgba(26, 47, 52, 0.25),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -3px 6px rgba(26, 47, 52, 0.5) !important;
}
.vh-portrait-wrapper .vh-photo-stage:hover {
transform: scale(1.04) !important;
border-color: #4a7d87 !important;
box-shadow:
0 8px 22px rgba(52, 91, 99, 0.45),
0 16px 32px rgba(26, 47, 52, 0.35),
inset 0 2px 4px rgba(255, 255, 255, 1),
inset 0 -3px 6px rgba(26, 47, 52, 0.55) !important;
}
/* Sanctuary Title & Subtitle */
.vh-card-sanctuary .vh-main-title {
font-size: 22px !important;
color: #123f38 !important;
}
.vh-card-sanctuary .vh-who-corner {
color: #345B63 !important;
}
.vh-card-sanctuary .vh-gold-rule {
background: #345B63 !important;
width: 26px !important;
height: 2px !important;
margin: 2px auto !important;
}
.vh-card-sanctuary .vh-description {
font-size: 12.5px !important;
color: #345B63 !important;
line-height: 1.25 !important;
}
/* 4. BIG RECTANGLE ELEMENTS ARE SMALLER WITH BIGGER SPACE BETWEEN THEM */
/* Section 1: Hero Triad Grid (Reduced Height, Expanded 20px Gutter) */
.vh-triad-grid {
flex: 0 0 220px !important;
height: 220px !important;
max-height: 220px !important;
gap: 20px !important;
margin: 0 !important;
}
.vh-triad-grid .vh-card {
height: 220px !important;
max-height: 220px !important;
}
/* Section 2: Timeline (Sleek Key Row & Track, Teal Borders) */
.vh-timeline-section {
flex: 0 0 58px !important;
height: 58px !important;
max-height: 58px !important;
margin: 0 !important;
}
.vh-timeline-years {
gap: 8px !important;
margin: 0 0 3px 0 !important;
}
.vh-timeline-years .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3px solid #233e44 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 2px 9px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.12), inset 0 1px 0 #ffffff !important;
}
.vh-timeline-years .vh-year:hover {
transform: translateY(-2px) !important;
border-color: #4a7d87 !important;
border-bottom: 3.5px solid #1a2f34 !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.25), inset 0 1px 0 #ffffff !important;
color: #123f38 !important;
}
.vh-timeline-years .vh-year.is-active {
background: linear-gradient(180deg, #345B63 0%, #1e353b 100%) !important;
color: #ffffff !important;
border: 1.5px solid #142529 !important;
border-bottom: 3px solid #0b1517 !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(52, 91, 99, 0.2) !important;
}
.vh-lifeline {
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-bottom-color: #ffffff !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.18) !important;
}
.vh-timeline-dot {
background: #345B63 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1px #345B63 !important;
}
/* Section 3: Thematic Taxonomy Grid (Reduced Height, Expanded 18px Gutter) */
.vh-taxonomy-section {
flex: 0 0 170px !important;
height: 170px !important;
max-height: 170px !important;
margin: 0 !important;
}
.vh-taxonomy-grid {
gap: 18px !important;
height: 100% !important;
}
.vh-card-tax {
height: 170px !important;
max-height: 170px !important;
}
.vh-tax-item-name a {
font-size: 13.5px !important;
color: #1e353b !important;
}
.vh-tax-item-name a:hover {
color: #345B63 !important;
}
.vh-tax-item-desc {
font-size: 11px !important;
line-height: 1.35 !important;
color: #3e565c !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vh-tax-item-link {
color: #345B63 !important;
}
/* Section 4: Media Bar (Compact 40px Single-Line Strip) */
.vh-card-media-section {
flex: 0 0 40px !important;
height: 40px !important;
max-height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
}
.vh-media-desc {
font-size: 12px !important;
color: #345B63 !important;
font-weight: 500 !important;
}
/* 5. 3D PILL BUTTONS WITH TEAL THEME */
.vh-btn-pill {
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border: 1.5px solid #1a2f34 !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.4) !important;
border-bottom: 2.5px solid #0f1c1f !important;
border-radius: 14px !important;
padding: 3px 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.vh-btn-pill:hover {
background: linear-gradient(180deg, #4c828d 0%, #2e545b 100%) !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.35) !important;
color: #ffffff !important;
}
.vh-founder-subline a {
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.12), inset 0 1px 0 #ffffff !important;
}
.vh-founder-subline a:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.30) !important;
}
/* ==========================================================================
STEP 20: NARROWER RECTANGLES + COMPLETE FAULT CORRECTIONS
========================================================================== */
/* 1. NARROWER PROPORTIONED CONTAINER (NO LONGER ENDLESSLY WIDE) */
body.page-Main_Page #vani-home {
max-width: 1260px !important;
width: 95% !important;
margin: 0 auto !important;
padding: 8px 16px !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* 2. SANCTUARY CENTER CARD FIXES (PROPER HIERARCHY, NO WEIRD DOUBLE BOXES) */
.vh-card-sanctuary {
padding: 8px 14px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
}
.vh-sanctuary-title {
margin: 0 !important;
line-height: 1.1 !important;
text-align: center !important;
}
.vh-sanctuary-title a {
text-decoration: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.vh-who-sub {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
text-transform: uppercase !important;
margin-bottom: 1px !important;
}
.vh-who-main {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 22px !important;
font-weight: 700 !important;
color: #123f38 !important;
letter-spacing: 0.5px !important;
}
/* Hide legacy floating who-corner and founder subline balloon boxes */
.vh-hero-title-wrap,
.vh-founder-subline::before,
.vh-founder-subline::after {
content: none !important;
display: none !important;
}
.vh-founder-subline {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Dedicated button below portrait */
.vh-founder-btn-wrap {
margin: 2px auto !important;
}
.vh-btn-founder {
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 2px 14px !important;
border-radius: 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.12), inset 0 1px 0 #ffffff !important;
display: inline-block !important;
}
.vh-btn-founder:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.30) !important;
}
/* Portrait */
.vh-portrait-wrapper {
margin: 2px auto !important;
}
.vh-portrait-wrapper .vh-photo-stage {
width: 78px !important;
height: 78px !important;
border: 3px solid #345B63 !important;
box-shadow: 0 6px 16px rgba(52, 91, 99, 0.32), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(26, 47, 52, 0.5) !important;
}
.vh-gold-rule {
width: 26px !important;
height: 2px !important;
margin: 2px auto !important;
background: #345B63 !important;
}
.vh-description {
font-size: 12px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 !important;
padding: 0 !important;
max-width: 90% !important;
}
/* 3. TIMELINE LAYOUT CORRECTIONS (CLEAN & LEGIBLE TRACK) */
.vh-timeline-section {
flex: 0 0 64px !important;
height: 64px !important;
max-height: 64px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
margin: 0 !important;
padding: 0 !important;
}
.vh-timeline-years {
gap: 8px !important;
margin: 0 !important;
}
.vh-lifeline-window {
height: 34px !important;
max-height: 34px !important;
position: relative !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
}
.vh-lifeline {
height: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
.vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.vh-timeline-event {
display: inline-flex !important;
align-items: center !important;
padding: 0 10px !important;
font-size: 11px !important;
color: #1e353b !important;
white-space: nowrap !important;
}
/* 4. CLEAN MEDIA SECTION (SINGLE HORIZONTAL FLEX ROW 44px) */
.vh-card-media-section {
flex: 0 0 44px !important;
height: 44px !important;
max-height: 44px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 18px !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.vh-media-left {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.vh-media-left .vh-badge-text a {
font-size: 12px !important;
font-weight: 800 !important;
color: #345B63 !important;
letter-spacing: 1px !important;
text-decoration: none !important;
}
.vh-media-center {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 14px !important;
}
.vh-media-right {
flex-shrink: 0 !important;
}
.vh-media-right .vh-btn-pill {
padding: 3px 14px !important;
font-size: 11px !important;
}
/* 5. NARROWER HERO & TAXONOMY GRIDS WITH AMPLE SPACING */
.vh-triad-grid {
flex: 0 0 215px !important;
height: 215px !important;
max-height: 215px !important;
gap: 18px !important;
}
.vh-triad-grid .vh-card {
height: 215px !important;
max-height: 215px !important;
}
.vh-taxonomy-section {
flex: 0 0 165px !important;
height: 165px !important;
max-height: 165px !important;
}
.vh-taxonomy-grid {
gap: 16px !important;
height: 100% !important;
}
.vh-card-tax {
height: 165px !important;
max-height: 165px !important;
}
/* ==========================================================================
STEP 21: NARROW RECTANGLES (1140px) + COMPLETE FAULT CORRECTIONS
========================================================================== */
/* 1. FORCE NARROWER DASHBOARD WIDTH (OVERRIDE ALL PREVIOUS MIN-WIDTHS) */
body.page-Main_Page #vani-home {
width: 90% !important;
max-width: 1140px !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 8px 16px !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
overflow: hidden !important;
}
/* 2. NARROW HERO TRIAD (3 CARDS ~360px EACH) */
.vh-triad-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
flex: 0 0 215px !important;
height: 215px !important;
max-height: 215px !important;
width: 100% !important;
margin: 0 !important;
}
.vh-triad-grid .vh-card {
height: 215px !important;
max-height: 215px !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 65%, #f2f7f7 100%) !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16),
inset 0 1px 0 #ffffff !important;
overflow: hidden !important;
}
/* 3. SANCTUARY CENTER CARD (COMPLETELY REBUILT ARCHITECTURE) */
.vh-sanctuary-card {
padding: 8px 14px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
}
.vh-sanctuary-header-text {
margin: 0 !important;
line-height: 1 !important;
text-align: center !important;
}
.vh-sanctuary-who {
display: block !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
}
.vh-sanctuary-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 21px !important;
font-weight: 700 !important;
color: #123f38 !important;
text-decoration: none !important;
letter-spacing: 0.5px !important;
}
.vh-sanctuary-portrait-box {
margin: 2px auto !important;
}
.vh-sanctuary-portrait-box .vh-photo-stage {
width: 76px !important;
height: 76px !important;
border-radius: 50% !important;
border: 3px solid #345B63 !important;
box-shadow:
0 4px 12px rgba(52, 91, 99, 0.35),
inset 0 2px 4px #ffffff,
inset 0 -2px 4px rgba(26, 47, 52, 0.5) !important;
overflow: hidden !important;
position: relative !important;
}
.vh-sanctuary-btn-box {
margin: 2px auto !important;
}
.vh-sanctuary-founder-pill {
display: inline-block !important;
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 2px 14px !important;
border-radius: 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.15), inset 0 1px 0 #ffffff !important;
text-decoration: none !important;
}
.vh-sanctuary-founder-pill:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1px) !important;
}
.vh-sanctuary-rule {
width: 28px !important;
height: 2px !important;
background: #345B63 !important;
margin: 2px auto !important;
}
.vh-sanctuary-subtitle {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 !important;
text-align: center !important;
}
/* 4. NARROW THEMATIC TAXONOMY (4 CARDS ~270px EACH) */
.vh-taxonomy-section {
flex: 0 0 165px !important;
height: 165px !important;
max-height: 165px !important;
width: 100% !important;
margin: 0 !important;
}
.vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
height: 100% !important;
width: 100% !important;
}
.vh-card-tax {
height: 165px !important;
max-height: 165px !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 65%, #f2f7f7 100%) !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16),
inset 0 1px 0 #ffffff !important;
}
/* 5. CLEAN MEDIA BAR (HORIZONTAL SINGLE LINE) */
.vh-media-bar {
flex: 0 0 44px !important;
height: 44px !important;
max-height: 44px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 18px !important;
background: linear-gradient(180deg, #ffffff 0%, #f2f7f7 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3px solid #233e44 !important;
border-radius: 8px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.10) !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.vh-media-bar-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.vh-media-bar-name a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
color: #345B63 !important;
letter-spacing: 1px !important;
text-decoration: none !important;
}
.vh-media-bar-desc {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 16px !important;
}
.vh-media-bar-btn {
flex-shrink: 0 !important;
}
/* ==========================================================================
STEP 22: FULL-WIDTH VIEW + NARROWER CARDS + VISIBLE TOP BORDER + ZERO CUTOUTS
========================================================================== */
/* 1. FULL WIDTH PAGE VIEW (NO ARTIFICIAL MAX-WIDTH ON CONTAINER) */
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
margin: 0 !important;
padding: 10px 30px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
overflow: hidden !important;
}
/* 2. VISIBLE TOP BORDER ON ALL RECTANGLE ELEMENTS (NO MORE MISSING TOP BORDER!) */
.vh-card,
.vh-card-tax,
.vh-sanctuary-card,
.vh-card-memories,
.vh-card-article,
.vh-media-bar {
border: 2px solid #345B63 !important;
border-top: 2px solid #345B63 !important; /* CRITICAL: EXPLICIT VISIBLE TOP BORDER */
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16) !important;
}
.vh-card-header {
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
border-bottom: 2px solid #345B63 !important;
padding: 6px 12px !important;
}
/* 3. NARROWER RECTANGLES WITH GENEROUS GAPS (PAGE IS FULL WIDTH, CARDS ARE NARROWER) */
.vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 28px !important;
flex: 0 0 230px !important;
height: 230px !important;
max-height: 230px !important;
width: 100% !important;
margin: 0 auto !important;
}
.vh-triad-grid .vh-card {
flex: 1 1 0 !important;
max-width: 400px !important; /* NARROWER RECTANGLES */
height: 230px !important;
max-height: 230px !important;
}
/* 4. SANCTUARY CENTER CARD: ZERO WEIRD BOXES, PERFECT VERTICAL FIT */
.vh-sanctuary-card {
padding: 8px 14px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
}
.vh-sanctuary-header-text,
.vh-sanctuary-header-text *,
.vh-sanctuary-name,
.vh-sanctuary-name * {
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.vh-sanctuary-header-text {
margin: 0 !important;
line-height: 1 !important;
}
.vh-sanctuary-who {
display: block !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
}
.vh-sanctuary-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 21px !important;
font-weight: 700 !important;
color: #123f38 !important;
text-decoration: none !important;
display: block !important;
}
.vh-sanctuary-portrait-box {
margin: 2px auto !important;
}
.vh-sanctuary-portrait-box .vh-photo-stage {
width: 74px !important;
height: 74px !important;
border-radius: 50% !important;
border: 3px solid #345B63 !important;
box-shadow:
0 4px 12px rgba(52, 91, 99, 0.35),
inset 0 2px 4px #ffffff,
inset 0 -2px 4px rgba(26, 47, 52, 0.5) !important;
overflow: hidden !important;
position: relative !important;
}
.vh-sanctuary-btn-box {
margin: 2px auto !important;
}
.vh-sanctuary-founder-pill {
display: inline-block !important;
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 3px 16px !important;
border-radius: 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.15), inset 0 1px 0 #ffffff !important;
text-decoration: none !important;
}
.vh-sanctuary-founder-pill:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1px) !important;
}
.vh-sanctuary-rule {
width: 26px !important;
height: 2px !important;
background: #345B63 !important;
margin: 2px auto !important;
}
.vh-sanctuary-subtitle {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 5. PREVENT CUT OUTS IN MEMORIES & SPOTLIGHT */
.vh-card-memories .vh-card-snippet {
font-size: 11.5px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vh-card-article .vh-discover-secondary {
font-size: 11.5px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 6. TIMELINE: ZERO OVERLAPPING */
.vh-timeline-section {
flex: 0 0 68px !important;
height: 68px !important;
max-height: 68px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 1300px !important;
margin: 0 auto !important;
}
.vh-timeline-years {
position: static !important;
top: 0 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
.vh-lifeline-window {
height: 36px !important;
max-height: 36px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
.vh-lifeline {
height: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
.vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.vh-timeline-event {
display: inline-flex !important;
align-items: center !important;
padding: 0 12px !important;
font-size: 11px !important;
color: #1e353b !important;
white-space: nowrap !important;
}
/* 7. NARROWER TAXONOMY CARDS (4 CARDS ~280px EACH) */
.vh-taxonomy-section {
flex: 0 0 175px !important;
height: 175px !important;
max-height: 175px !important;
width: 100% !important;
margin: 0 auto !important;
}
.vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 22px !important;
height: 100% !important;
width: 100% !important;
}
.vh-card-tax {
flex: 1 1 0 !important;
max-width: 290px !important; /* NARROWER TAXONOMY CARDS */
height: 175px !important;
max-height: 175px !important;
}
.vh-card-tax .vh-card-body {
padding: 6px 12px !important;
height: calc(100% - 34px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.vh-tax-spotlight-item {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.vh-tax-item-desc {
font-size: 11px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 8. MEDIA BAR (PERFECT SINGLE ROW, ZERO OVERLAPPING) */
.vh-media-bar {
flex: 0 0 44px !important;
height: 44px !important;
max-height: 44px !important;
width: 100% !important;
max-width: 1300px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 20px !important;
background: linear-gradient(180deg, #ffffff 0%, #f2f7f7 100%) !important;
box-sizing: border-box !important;
}
.vh-media-bar-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.vh-media-bar-name a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
color: #345B63 !important;
letter-spacing: 1px !important;
text-decoration: none !important;
}
.vh-media-bar-desc {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 20px !important;
}
.vh-media-bar-btn {
flex-shrink: 0 !important;
}
/* ==========================================================================
STEP 23: DEFINITIVE FIXES FOR TOP BORDERS, WIDTHS, TIMELINE, FULL-WIDTH PAGE
========================================================================== */
/* 1. FULL WIDTH PAGE: UNLOCK MEDIAWIKI WRAPPERS & CONTAINERS TO 100% */
body.page-Main_Page, html.page-Main_Page {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
body.page-Main_Page #content,
body.page-Main_Page #content.mw-body,
body.page-Main_Page .mw-body,
body.page-Main_Page #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output,
body.page-Main_Page #contentWrapper,
body.page-Main_Page #container,
body.page-Main_Page .vector-body {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-left: none !important;
border-right: none !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
margin: 0 !important;
padding: 6px 16px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 10px !important;
overflow: hidden !important;
}
/* 2. TOP BORDERS: 100% VISIBLE SOLID #345B63 BORDER ON EVERY CARD & HEADER */
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page .vh-media-bar {
border: 2px solid #345B63 !important;
border-top: 2.5px solid #345B63 !important; /* ULTRA-VISIBLE TOP BORDER */
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-header {
border-top: 2.5px solid #345B63 !important; /* HEADER REINFORCED TOP BORDER */
border-bottom: 2px solid #345B63 !important;
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
padding: 5px 10px !important;
}
/* 3. YEAR BUTTONS: SOLID VISIBLE TOP BORDER */
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 2px solid #345B63 !important; /* EXPLICIT SOLID VISIBLE TOP BORDER */
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 3px 10px !important;
line-height: 1.2 !important;
box-shadow: 0 2px 4px rgba(52, 91, 99, 0.12) !important;
transition: all 0.18s ease !important;
}
body.page-Main_Page .vh-timeline-years .vh-year:hover,
body.page-Main_Page .vh-year:hover {
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border-color: #1a2f34 !important;
border-top: 2px solid #1a2f34 !important;
transform: translateY(-1.5px) !important;
}
body.page-Main_Page .vh-timeline-years .vh-year.is-active,
body.page-Main_Page .vh-year.is-active {
background: linear-gradient(180deg, #2b4f57 0%, #15272a 100%) !important;
color: #ffffff !important;
border: 1.5px solid #0b1517 !important;
border-top: 2px solid #0b1517 !important;
border-bottom: 2.5px solid #000000 !important;
}
/* 4. NARROW ALL RECTANGLES BY 30% */
/* HERO TRIAD: Cards narrowed to 280px (was 400px) */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 36px !important;
flex: 0 0 235px !important;
height: 235px !important;
max-height: 235px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-triad-grid .vh-card {
flex: 0 0 280px !important;
width: 280px !important;
max-width: 280px !important;
min-width: 280px !important;
height: 235px !important;
max-height: 235px !important;
}
/* TAXONOMY: 4 Cards narrowed to 210px (was 290px) */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 170px !important;
height: 170px !important;
max-height: 170px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 24px !important;
height: 100% !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-tax {
flex: 0 0 210px !important;
width: 210px !important;
max-width: 210px !important;
min-width: 210px !important;
height: 170px !important;
max-height: 170px !important;
}
/* MEDIA BAR: Narrowed to 930px to match Triad/Taxonomy cluster */
body.page-Main_Page .vh-media-bar {
flex: 0 0 42px !important;
height: 42px !important;
max-height: 42px !important;
width: 100% !important;
max-width: 930px !important;
margin: 0 auto !important;
}
/* 5. FLOWING TIMELINE: FIX VERTICAL TRUNCATION (AMP UP HEIGHT TO 70px) */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 106px !important;
height: 106px !important;
max-height: 106px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 1050px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-timeline-years {
position: static !important;
top: 0 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
height: 26px !important;
flex: 0 0 26px !important;
}
body.page-Main_Page .vh-lifeline-window {
height: 72px !important;
max-height: 72px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 2px solid #345B63 !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
position: relative !important;
}
body.page-Main_Page .vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
body.page-Main_Page .vh-timeline-event {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 64px !important;
padding: 0 14px !important;
white-space: normal !important;
width: 240px !important;
flex: 0 0 240px !important;
box-sizing: border-box !important;
border-right: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
body.page-Main_Page .vh-timeline-event .vh-event-date {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
line-height: 1.2 !important;
}
body.page-Main_Page .vh-timeline-event .vh-event-title,
body.page-Main_Page .vh-timeline-event .vh-event-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11px !important;
line-height: 1.35 !important;
color: #1e353b !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 6. SANCTUARY PORTRAIT & BUTTONS - POLISHED HIERARCHY */
body.page-Main_Page .vh-sanctuary-card {
padding: 8px 12px !important;
}
body.page-Main_Page .vh-sanctuary-who {
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
margin-bottom: 1px !important;
}
body.page-Main_Page .vh-sanctuary-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
color: #123f38 !important;
line-height: 1.1 !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 72px !important;
height: 72px !important;
border: 2.5px solid #345B63 !important;
border-radius: 50% !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.3) !important;
overflow: hidden !important;
margin: 2px auto !important;
}
body.page-Main_Page .vh-sanctuary-founder-pill {
font-size: 10.5px !important;
font-weight: 700 !important;
padding: 2.5px 12px !important;
border: 1.5px solid #345B63 !important;
border-top: 2px solid #345B63 !important; /* SOLID VISIBLE TOP BORDER */
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
color: #345B63 !important;
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
text-decoration: none !important;
display: inline-block !important;
}
body.page-Main_Page .vh-sanctuary-founder-pill:hover {
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border-color: #1a2f34 !important;
}
body.page-Main_Page .vh-sanctuary-rule {
width: 24px !important;
height: 2px !important;
background: #345B63 !important;
margin: 2px auto !important;
}
body.page-Main_Page .vh-sanctuary-subtitle {
font-size: 11px !important;
color: #345B63 !important;
line-height: 1.2 !important;
}
/* ==========================================================================
STEP 24: FIX THICK BORDERS, FULL-WIDTH EDGES, AND BOTTOM OVERLAPPING
========================================================================== */
/* 1. FORCE 100% TRUE FULL-WIDTH (STRIP VECTOR 2022 LEFT/RIGHT INDENTATIONS) */
body.page-Main_Page, html.page-Main_Page {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
body.page-Main_Page #content,
body.page-Main_Page #content.mw-body,
body.page-Main_Page .mw-body,
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output,
body.page-Main_Page .vector-body,
body.page-Main_Page #contentWrapper,
body.page-Main_Page #container {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
border: none !important;
border-left: none !important;
border-right: none !important;
box-sizing: border-box !important;
left: 0 !important;
}
body.page-Main_Page #mw-panel,
body.page-Main_Page .mw-sidebar-container,
body.page-Main_Page .vector-sidebar-container,
body.page-Main_Page .vector-column-start {
display: none !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
margin: 0 !important;
padding: 8px 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* PREVENTS PUSHING MEDIA SECTION OFF-SCREEN */
gap: 12px !important;
overflow: hidden !important;
}
/* 2. FIX UNUSUAL THICK TOP BORDER: UNIFORM 1.5px ON ALL CARDS & NO HEADER BORDER-TOP */
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-tax {
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #345B63 !important; /* CRISP UNIFORM 1.5px (NOT THICK!) */
border-bottom: 3px solid #233e44 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-header {
border-top: none !important; /* REMOVE DUPLICATE TOP BORDER ON HEADER */
border-left: none !important;
border-right: none !important;
border-bottom: 1.5px solid #345B63 !important;
border-top-left-radius: 6.5px !important;
border-top-right-radius: 6.5px !important;
padding: 5px 12px !important;
}
/* 3. HERO TRIAD (30% NARROWER RECTANGLES, PERFECTLY CENTERED) */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 32px !important;
flex: 0 0 225px !important;
height: 225px !important;
max-height: 225px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-triad-grid .vh-card {
flex: 0 0 280px !important;
width: 280px !important;
max-width: 280px !important;
min-width: 280px !important;
height: 225px !important;
max-height: 225px !important;
}
/* 4. FULL-WIDTH FLOWING TIMELINE (STRETCHES EDGE-TO-EDGE) */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 96px !important;
height: 96px !important;
max-height: 96px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important; /* FULL WIDTH EDGE-TO-EDGE */
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-timeline-years {
position: static !important;
display: flex !important;
justify-content: center !important;
gap: 7px !important;
margin: 0 auto !important;
padding: 0 !important;
height: 25px !important;
flex: 0 0 25px !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 2px 9px !important;
line-height: 1.2 !important;
box-shadow: 0 2px 4px rgba(52, 91, 99, 0.12) !important;
}
body.page-Main_Page .vh-lifeline-window {
height: 64px !important;
max-height: 64px !important;
width: 100% !important;
max-width: 100% !important; /* FULL WIDTH TRACK */
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
width: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 1.5px solid #345B63 !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important; /* CONTINUOUS SEAMLESS EDGE-TO-EDGE */
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
body.page-Main_Page .vh-timeline-event {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 60px !important;
padding: 0 14px !important;
white-space: normal !important;
width: 240px !important;
flex: 0 0 240px !important;
box-sizing: border-box !important;
border-right: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
/* 5. TAXONOMY 4 CARDS (30% NARROWER RECTANGLES, PERFECT FIT) */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 165px !important;
height: 165px !important;
max-height: 165px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 22px !important;
height: 100% !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-tax {
flex: 0 0 210px !important;
width: 210px !important;
max-width: 210px !important;
min-width: 210px !important;
height: 165px !important;
max-height: 165px !important;
}
/* 6. FIX BOTTOM OVERLAPPING: SINGLE-CONTAINER MEDIA BAR */
body.page-Main_Page .vh-media-bar,
body.page-Main_Page .vh-card-media-section {
flex: 0 0 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
width: 920px !important;
max-width: 920px !important;
margin: 0 auto !important;
padding: 0 18px !important;
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 2.5px solid #233e44 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
overflow: hidden !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.10) !important;
}
/* STRIP ALL NESTED SUB-BOXES / INTERNAL BORDERS IN MEDIA SECTION */
body.page-Main_Page .vh-media-bar > div,
body.page-Main_Page .vh-media-bar-title,
body.page-Main_Page .vh-media-bar-desc,
body.page-Main_Page .vh-media-bar-btn,
body.page-Main_Page .vh-card-media-section > div,
body.page-Main_Page .vh-card-media-section .vh-card-header,
body.page-Main_Page .vh-card-media-section .vh-media-body,
body.page-Main_Page .vh-card-media-section .vh-media-desc,
body.page-Main_Page .vh-card-media-section .vh-media-actions {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
height: auto !important;
max-height: none !important;
}
body.page-Main_Page .vh-media-bar-title,
body.page-Main_Page .vh-card-media-section .vh-card-header {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
body.page-Main_Page .vh-media-bar-desc,
body.page-Main_Page .vh-card-media-section .vh-media-desc {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11.5px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 16px !important;
}
body.page-Main_Page .vh-media-bar-btn,
body.page-Main_Page .vh-card-media-section .vh-media-actions {
flex-shrink: 0 !important;
}
body.page-Main_Page .vh-media-bar-btn .vh-btn-pill,
body.page-Main_Page .vh-card-media-section .vh-btn-pill {
padding: 2.5px 12px !important;
font-size: 10.5px !important;
}
/* ==========================================================================
STEP 51: DEFINITIVE CLEAN ARCHITECTURE & VISIBLE AT-REST ANIMATION
========================================================================== */
/* 1. CANVAS & WRAPPER RESET (FULL WIDTH, NO SIDEBAR) */
body.page-Main_Page, html.page-Main_Page {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
background-color: #f6f2e9 !important;
background-image: none !important;
}
body.page-Main_Page #content,
body.page-Main_Page #content.mw-body,
body.page-Main_Page .mw-body,
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output,
body.page-Main_Page .vector-body,
body.page-Main_Page #contentWrapper,
body.page-Main_Page #container {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
left: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #mw-panel,
body.page-Main_Page .mw-sidebar-container,
body.page-Main_Page .vector-sidebar-container,
body.page-Main_Page .vector-column-start {
display: none !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 2. MAIN CONTAINER: FULL VIEWPORT HEIGHT SPREAD TOP TO BOTTOM */
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
margin: 0 !important;
padding: 18px 40px 14px 40px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important; /* SPREAD CONTENT FROM TOP TO BOTTOM */
gap: 0 !important;
overflow: hidden !important;
}
/* 3. CARDS: 100% TRANSPARENT OPEN SPACE (NO BOXES, NO BORDERS) */
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page .vh-media-bar,
body.page-Main_Page .vh-card-media-section {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
transition: none !important;
box-sizing: border-box !important;
}
/* Hide all old badges, buttons, headers, and clutter */
body.page-Main_Page .vh-card-header,
body.page-Main_Page .vh-card-actions,
body.page-Main_Page .vh-sanctuary-btn-box,
body.page-Main_Page .vh-sanctuary-rule,
body.page-Main_Page .vh-sanctuary-who,
body.page-Main_Page .vh-badge-sub,
body.page-Main_Page .vh-badge-icon,
body.page-Main_Page .vh-tax-item-link,
body.page-Main_Page .vh-random-article-more,
body.page-Main_Page .vh-media-bar-btn {
display: none !important;
}
body.page-Main_Page .vh-card-body {
background: transparent !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
height: 100% !important;
text-align: center !important;
}
/* 4. SECTION 1: HERO TRIAD (SPREAD ACROSS 1450px) */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
flex: 0 0 295px !important; /* EXPANDED HEIGHT FOR 180px PORTRAIT */
height: 295px !important;
max-height: 295px !important;
}
body.page-Main_Page .vh-triad-grid .vh-card {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
}
body.page-Main_Page .vh-triad-grid .vh-sanctuary-card {
flex: 0 0 360px !important;
width: 360px !important;
max-width: 360px !important;
}
/* Sanctuary Portrait Medallion */
body.page-Main_Page .vh-sanctuary-portrait-box {
margin: 4px auto 6px auto !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box {
width: 180px !important;
height: 180px !important;
margin: 6px auto 10px auto !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 180px !important; /* +120% BIGGER (82px -> 180px) */
height: 180px !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
border-radius: 50% !important;
box-shadow:
0 8px 24px rgba(18, 63, 56, 0.32),
0 2px 6px rgba(0, 0, 0, 0.18),
inset 0 2px 5px rgba(255, 255, 255, 0.7),
inset 0 -3px 6px rgba(0, 0, 0, 0.3) !important;
overflow: hidden !important;
margin: 0 auto !important;
position: relative !important;
}
/* 5. SECTION 2: TIMELINE (EDGE TO EDGE FULL WIDTH) */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 106px !important;
height: 106px !important;
max-height: 106px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-timeline-years {
position: static !important;
display: flex !important;
justify-content: center !important;
gap: 10px !important;
margin: 0 auto !important;
padding: 0 !important;
height: 27px !important;
flex: 0 0 27px !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 2px 9px !important;
line-height: 1.2 !important;
box-shadow: 0 2px 4px rgba(52, 91, 99, 0.12) !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
}
body.page-Main_Page .vh-timeline-years .vh-year:hover,
body.page-Main_Page .vh-year:hover {
transform: translateY(-1.5px) !important;
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border-color: #1a2f34 !important;
}
body.page-Main_Page .vh-timeline-years .vh-year.is-active,
body.page-Main_Page .vh-year.is-active {
background: linear-gradient(180deg, #2b4f57 0%, #15272a 100%) !important;
color: #ffffff !important;
border: 1.5px solid #0b1517 !important;
border-bottom: 2px solid #000000 !important;
}
body.page-Main_Page .vh-lifeline-window {
height: 68px !important;
max-height: 68px !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
width: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 1.5px solid #345B63 !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
body.page-Main_Page .vh-timeline-event {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 64px !important;
padding: 0 18px !important;
white-space: normal !important;
width: 250px !important;
flex: 0 0 250px !important;
box-sizing: border-box !important;
border-right: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
/* 6. SECTION 3: THEMATIC TAXONOMY (SPREAD ACROSS 1450px) */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 155px !important;
height: 155px !important;
max-height: 155px !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
height: 100% !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-tax {
flex: 0 0 260px !important;
width: 260px !important;
max-width: 260px !important;
}
/* 7. SECTION 4: MEDIA BAR (SPREAD ACROSS 1450px) */
body.page-Main_Page .vh-media-bar {
flex: 0 0 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
padding: 0 24px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
border-top: 1px dashed rgba(52, 91, 99, 0.3) !important;
border-bottom: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
/* 8. DESCRIPTIVE TEXT IN CARDS */
body.page-Main_Page .vh-card-text,
body.page-Main_Page .vh-card-snippet,
body.page-Main_Page .vh-tax-item-desc,
body.page-Main_Page .vh-random-article-extract {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #2c3e42 !important;
margin: 0 !important;
text-shadow: none !important;
}
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important; /* 50% LARGER (12.5px -> 19px) */
font-weight: 600 !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
font-style: italic !important;
max-width: 380px !important;
margin: 0 auto !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
body.page-Main_Page .vh-card-tax .vh-card-text {
font-size: 12.5px !important;
line-height: 1.5 !important;
}
body.page-Main_Page .vh-media-text {
font-size: 12px !important;
font-style: italic !important;
}
/* ==========================================================================
9. CAITANYA 3D TITLES + VISIBLE AT-REST BREATHING LINE + ON-HOVER FULL GLIDE
========================================================================== */
/* Title Containers */
body.page-Main_Page .vh-card-title,
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-random-article-title,
body.page-Main_Page .vh-media-title {
display: block !important;
text-align: center !important;
margin-bottom: 8px !important;
transform: none !important;
}
/* ALL TITLE LINKS (KEEPING THE EXACT GORGEOUS 3D STYLE FROM USER'S SCREENSHOT) */
body.page-Main_Page .vh-card-title a,
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-sanctuary-title a,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title a,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page
-Main_Page .vh-media-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 7px !important; /* PERFECT SPACE FOR UNDERLINE */
letter-spacing: 0.025em !important;
line-height: 1.25 !important;
cursor: pointer !important;
transform: none !important;
/* 1. LIGHT COLOR FACE (The exact warm temple gold from screenshot) */
color: #dfad3e !important;
-webkit-text-fill-color: #dfad3e !important;
/* 2. DARK SIDES & DEEP CAST SHADOW (The exact 3D from screenshot) */
text-shadow: none !important;
transition: transform 0.22s ease, color 0.22s ease, text-shadow 0.22s ease !important;
}
/* Specific Font Sizes */
body.page-Main_Page .vh-sanctuary-title a {
font-size: 28px !important;
letter-spacing: 0.03em !important;
}
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title a {
font-size: 20px !important;
}
body.page-Main_Page .vh-card-tax .vh-card-title a {
font-size: 18.5px !important;
}
body.page-Main_Page .vh-media-title a {
font-size: 14.5px !important;
}
/* ==========================================================================
3. THE GOLDEN FILAMENT LINE BENEATH TITLES (RESTORES THE USER'S FAVORITE FEATURE!)
- At Rest: Gently breathes in and out (25% to 65% width) so animation is clearly visible!
- On Hover: Pauses breathing and smoothly glides to full 90% width!
========================================================================== */
body.page-Main_Page .vh-card-title a::after,
body.page-Main_Page .vh-card-memories .vh-card-title a::after,
body.page-Main_Page .vh-sanctuary-title a::after,
body.page-Main_Page .vh-card-article .vh-card-title a::after,
body.page-Main_Page .vh-random-article-title a::after,
body.page-Main_Page .vh-card-tax .vh-card-title a::after,
body.page-Main_Page .vh-media-title a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(223, 173, 62, 0.4) 15%,
#dfad3e 50%,
rgba(223, 173, 62, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(223, 173, 62, 0.75) !important;
border-radius: 2px !important;
pointer-events: none !important;
/* AT REST: VISIBLE BREATHING ANIMATION (2.8s CYCLE) */
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease !important;
}
/* At-Rest Line Breathing Keyframes */
@keyframes vhLineBreath {
0%, 100% {
width: 25%;
left: 37.5%;
opacity: 0.35;
}
50% {
width: 65%;
left: 17.5%;
opacity: 0.95; /* Clearly visible expanding light bar! */
}
}
/* ==========================================================================
4. ON MOUSE HOVER: FULL GOLDEN LINE GLIDE + DIRECT SUNLIGHT 3D ILLUMINATION
========================================================================== */
body.page-Main_Page .vh-card-title a:hover,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page .vh-sanctuary-title a:hover,
body.page-Main_Page .vh-card-article .vh-card-title a:hover,
body.page-Main_Page .vh-random-article-title a:hover,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover,
body.page-Main_Page .vh-media-title a:hover {
transform: translateY(-2.5px) !important; /* RETAINS 3D STEP MOVEMENT */
color: #dfad3e !important; /* DOES NOT CHANGE COLOR (STAYS RICH GOLD) */
-webkit-text-fill-color: #dfad3e !important; /* 100% CONSTANT COLOR */
text-decoration: none !important;
/* Extended 3D shadow deepening as the letters step forward */
text-shadow: none !important;
}
/* ON HOVER: LINE GLIDES OUT TO FULL 90% WIDTH & STAYS SOLID GOLD */
body.page-Main_Page .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover::after,
body.page-Main_Page .vh-sanctuary-title a:hover::after,
body.page-Main_Page .vh-card-article .vh-card-title a:hover::after,
body.page-Main_Page .vh-random-article-title a:hover::after,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover::after,
body.page-Main_Page .vh-media-title a:hover::after {
animation: none !important; /* Stops at-rest breathing */
opacity: 1 !important;
width: 90% !important; /* FULL EXTENSION GLIDE! */
left: 5% !important;
/* EXACT SAME GOLD COLOR AS AT REST — ZERO COLOR CHANGE */
background: linear-gradient(
90deg,
transparent 0%,
rgba(223, 173, 62, 0.4) 15%,
#dfad3e 50%,
rgba(223, 173, 62, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(223, 173, 62, 0.75) !important;
}
/* ==========================================================================
STEP 56: TIMELINE EXPANSION (NO TEXT CROPPING, NO BG, NO LINE) & CAPTION REGULAR
========================================================================== */
/* 1. SANCTUARY CAPTION: REGULAR (NOT ITALIC) */
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-style: normal !important; /* REGULAR, NOT ITALIC */
font-weight: 600 !important;
font-size: 19px !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
text-align: center !important;
}
/* 2. TIMELINE SECTION: EXPANDED HEIGHT TO PREVENT ALL TEXT CROPPING */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 134px !important;
height: 134px !important;
min-height: 134px !important;
max-height: 134px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
/* 3. LIFELINE WINDOW & TRACK: TRANSPARENT, NO TOP LINE, HEIGHT 96px */
body.page-Main_Page .vh-lifeline-window {
height: 96px !important; /* EXPANDED HEIGHT (WAS 68px) */
min-height: 96px !important;
max-height: 96px !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
width: 100% !important;
background: transparent !important; /* REMOVE BACKGROUND */
border: none !important; /* REMOVE ALL BORDERS */
border-top: none !important; /* REMOVE LINE ABOVE */
border-bottom: none !important;
box-shadow: none !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 96px !important;
min-height: 96px !important;
max-height: 96px !important;
}
/* The horizontal golden guide line across the timeline items */
body.page-Main_Page .vh-timeline-track::before {
top: 36px !important;
background: rgba(177, 135, 61, 0.4) !important;
}
/* 4. TIMELINE ITEM: EXACT 240px MATCH WITH JAVASCRIPT ITEM_WIDTH */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item,
body.page-Main_Page .vh-timeline-event {
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
flex: 0 0 240px !important;
height: 96px !important;
min-height: 96px !important;
max-height: 96px !important;
box-sizing: border-box !important;
padding: 8px 16px !important;
background: transparent !important;
border: none !important;
}
body.page-Main_Page .vh-timeline-date {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important; /* Clear Gold Date */
margin-bottom: 2px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
body.page-Main_Page .vh-timeline-dot {
width: 9px !important;
height: 9px !important;
background: #345B63 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #345B63 !important;
margin: 4px 0 !important;
}
body.page-Main_Page .vh-timeline-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.38 !important;
color: #2c3e42 !important;
overflow: visible !important; /* NEVER CROPPED */
white-space: normal !important;
display: block !important;
}
/* ==========================================================================
STEP 57: TIMELINE FULL BLEED (EDGE-TO-EDGE), 50% TALLER (150px),
DOT/TEXT SEPARATION (ZERO OVERLAP), NO THIN LINE ABOVE,
AND CAPTION REGULAR (NOT ITALIC)
========================================================================== */
/* 1. SANCTUARY CAPTION: REGULAR (NOT ITALIC) */
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-style: normal !important; /* REGULAR (NOT ITALIC) */
font-weight: 600 !important;
font-size: 19px !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
text-align: center !important;
}
/* 2. REMOVE ALL THIN LINES ABOVE TIMELINE (NO TOP BORDERS ANYWHERE) */
body.page-Main_Page .vh-triad-grid,
body.page-Main_Page .vh-timeline-section,
body.page-Main_Page #vh-timeline-years,
body.page-Main_Page .vh-timeline-years,
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
border: none !important;
border-top: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
}
/* 3. STRETCH TIMELINE EDGE-TO-EDGE TO VERY LEFT AND RIGHT (FULL BLEED) */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
position: relative !important;
flex: 0 0 190px !important; /* EXPANDED TOTAL HEIGHT (150px track + 40px buttons) */
height: 190px !important;
min-height: 190px !important;
max-height: 190px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
background: transparent !important;
box-sizing: border-box !important;
}
/* Year buttons container centered */
body.page-Main_Page .vh-timeline-years,
body.page-Main_Page #vh-timeline-years {
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
display: flex !important;
justify-content: center !important;
gap: 10px !important;
height: 28px !important;
flex: 0 0 28px !important;
}
/* 4. TIMELINE TRACK WINDOW: 50% TALLER (150px) & FULL BLEED (VERY LEFT TO VERY RIGHT) */
body.page-Main_Page .vh-lifeline-window {
width: 100vw !important;
max-width: 100vw !important;
height: 150px !important; /* 50% TALLER (WAS 96px -> NOW 150px) */
min-height: 150px !important;
max-height: 150px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
background: transparent !important;
}
body.page-Main_Page .vh-lifeline {
width: 100% !important;
height: 100% !important;
background: transparent !important;
position: relative !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 150px !important;
min-height: 150px !important;
max-height: 150px !important;
display: flex !important;
align-items: flex-start !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
/* The horizontal golden guide line passing through the dots */
body.page-Main_Page .vh-timeline-track::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 28px !important; /* GUIDE LINE POSITION */
height: 1.5px !important;
background: rgba(177, 135, 61, 0.45) !important;
z-index: 1 !important;
}
/* 5. TIMELINE ITEM & DOT / TEXT SEPARATION (ZERO OVERLAP!) */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
flex: 0 0 250px !important;
height: 150px !important; /* FULL 150px HEIGHT */
min-height: 150px !important;
max-height: 150px !important;
box-sizing: border-box !important;
padding: 6px 18px !important;
background: transparent !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* Date at the very top */
body.page-Main_Page .vh-timeline-date {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 18px !important;
margin: 0 0 2px 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
z-index: 2 !important;
}
/* Dot on the horizontal line (top: 24px) */
body.page-Main_Page .vh-timeline-dot {
position: absolute !important;
top: 24px !important; /* CENTERED ON THE 28px LINE */
left: 18px !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #233e44 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #b1873d !important;
z-index: 3 !important;
}
/* Event text starts strictly BELOW the dot and line (CLEAR SEPARATION) */
body.page-Main_Page .vh-timeline-text {
margin-top: 18px !important; /* PUSHES TEXT SAFELY BELOW THE DOT! */
padding-top: 0 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #2c3e42 !important;
white-space: normal !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important; /* NEVER CROPPED */
max-height: 100px !important; /* COMFORTABLY HOLDS 6-7 LINES */
}
/* Edge fades on the timeline window (seamless left & right fade) */
body.page-Main_Page .vh-lifeline-window::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 50px !important;
background: linear-gradient(to right, #f6f2e9 0%, rgba(246, 242, 233, 0) 100%) !important;
z-index: 10 !important;
pointer-events: none !important;
}
body.page-Main_Page .vh-lifeline-window::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
width: 50px !important;
background: linear-gradient(to left, #f6f2e9 0%, rgba(246, 242, 233, 0) 100%) !important;
z-index: 10 !important;
pointer-events: none !important;
}
/* ==========================================================================
STEP 58: ABSOLUTE CROPPING ELIMINATION & PERFECT TIMELINE DOT ALIGNMENT
========================================================================== */
/* --------------------------------------------------------------------------
1. HERO TRIAD & PRABHUPĀDA CARD: UNCONSTRAINED HEIGHT (ZERO CROPPING)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home {
height: auto !important;
min-height: calc(100vh - 54px) !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
body.page-Main_Page .vh-triad-grid {
flex: 0 0 auto !important;
height: auto !important;
min-height: 330px !important; /* AMPLE ROOM FOR 180px CIRCLE + CAPTION */
max-height: none !important;
overflow: visible !important;
}
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-triad-grid .vh-sanctuary-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-body {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
body.page-Main_Page .vh-triad-grid .vh-sanctuary-card {
flex: 0 0 380px !important;
width: 380px !important;
max-width: 380px !important;
}
/* Portrait Medallion: 180px */
body.page-Main_Page .vh-sanctuary-portrait-box {
width: 180px !important;
height: 180px !important;
margin: 6px auto 12px auto !important;
overflow: visible !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 180px !important; /* FULL 180px CIRCLE */
height: 180px !important;
border-radius: 50% !important;
overflow: hidden !important; /* CLIPS ONLY THE PHOTO, NOT THE CARD */
position: relative !important;
margin: 0 auto !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
box-shadow:
0 8px 24px rgba(18, 63, 56, 0.32),
0 2px 6px rgba(0, 0, 0, 0.18) !important;
}
/* Caption: Regular (Not Italic) at 19px */
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-style: normal !important; /* STRICTLY REGULAR (NOT ITALIC) */
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
max-width: 380px !important;
margin: 0 auto !important;
text-align: center !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
/* --------------------------------------------------------------------------
2. TIMELINE: 50% TALLER (155px), FULL BLEED, NO THIN TOP LINES
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid,
body.page-Main_Page .vh-timeline-section,
body.page-Main_Page #vh-timeline-years,
body.page-Main_Page .vh-timeline-years,
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
border: none !important;
border-top: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Full Bleed Timeline Section */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 195px !important;
height: 195px !important;
min-height: 195px !important;
max-height: 195px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
background: transparent !important;
}
/* Track Window: 50% Taller (155px) */
body.page-Main_Page .vh-lifeline-window {
width: 100vw !important;
max-width: 100vw !important;
height: 155px !important; /* 50% TALLER (HOLDS 6-7 FULL LINES) */
min-height: 155px !important;
max-height: 155px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
background: transparent !important;
}
body.page-Main_Page .vh-lifeline {
width: 100% !important;
height: 100% !important;
background: transparent !important;
position: relative !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 155px !important;
min-height: 155px !important;
max-height: 155px !important;
display: flex !important;
align-items: flex-start !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
/* Horizontal Guide Line: Fixed at top: 30px */
body.page-Main_Page .vh-timeline-track::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 30px !important; /* GUIDE LINE LEVEL */
height: 1.5px !important;
background: rgba(177, 135, 61, 0.45) !important;
z-index: 1 !important;
}
/* --------------------------------------------------------------------------
3. TIMELINE ITEM: PERFECT VERTICAL & HORIZONTAL DOT ALIGNMENT
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
flex: 0 0 250px !important;
height: 155px !important; /* FULL 155px HEIGHT */
min-height: 155px !important;
max-height: 155px !important;
box-sizing: border-box !important;
padding: 6px 16px !important;
background: transparent !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* Date Text: Centered horizontally above the dot */
body.page-Main_Page .vh-timeline-date {
width: 100% !important;
text-align: center !important; /* CENTERED HORIZONTALLY */
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 18px !important;
margin: 0 0 4px 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
z-index: 2 !important;
}
/* Dot: EXACTLY CENTERED VERTICALLY ON THE 30px LINE & HORIZONTALLY WITH DATE */
body.page-Main_Page .vh-timeline-dot {
position: absolute !important;
top: 25px !important; /* 25px + 5px radius = 30px center (EXACT ON LINE!) */
left: 50% !important; /* CENTERED HORIZONTALLY */
transform: translateX(-50%) !important; /* PERFECT HORIZONTAL ALIGNMENT WITH DATE */
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #233e44 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #b1873d !important;
z-index: 3 !important;
margin: 0 !important;
}
/* Event Text: Safely below the line and dot (ZERO OVERLAPPING) */
body.page-Main_Page .vh-timeline-text {
margin-top: 22px !important; /* PUSHES TEXT SAFELY BELOW THE DOT */
padding-top: 0 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #2c3e42 !important;
white-space: normal !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important; /* NEVER CROPPED */
max-height: 105px !important; /* COMFORTABLY HOLDS 6-7 FULL LINES */
text-align: center !important;
}
/* ==========================================================================
STEP 59: TOP BAR HELP TEXT REMOVAL, TIMELINE 3-TIER AXIS CENTERING,
AND SEAMLESS TITLE MORPH (Śrīla Prabhupāda <-> Who Is Śrīla Prabhupāda)
========================================================================== */
/* 1. TOP BAR: SUPPRESS ALL HOVER HELP TEXTS & TOOLTIPS */
#mw-head [title]::before,
#mw-head [title]::after,
.vector-header [title]::before,
.vector-header [title]::after,
.mw-tooltip,
.tipsy,
.tipsy-inner,
.tooltip {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 2. PERMANENT SANCTUARY HERO TITLE: "Who Is Śrīla Prabhupāda" (NO TEXT CHANGE ON HOVER) */
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title {
margin: 0 !important;
text-align: center !important;
line-height: 1.1 !important;
}
body.page-Main_Page .vh-sanctuary-title a,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a {
position: relative !important;
display: inline-block !important;
min-width: 0 !important;
text-align: center !important;
white-space: nowrap !important;
}
/* Neutralize and remove all text-swapping / morph behavior */
body.page-Main_Page .vh-sanctuary-title .vh-title-hover,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title .vh-title-hover {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Main_Page .vh-sanctuary-title .vh-title-default,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title .vh-title-default {
display: inline !important;
position: static !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
body.page-Main_Page .vh-sanctuary-title a:hover .vh-title-default,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a:hover .vh-title-default {
opacity: 1 !important;
transform: none !important;
}
/* 3. TIMELINE: PERFECT 3-TIER CENTER ALIGNMENT (DATE, DOT, AND TEXT) */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
flex: 0 0 250px !important;
height: 155px !important;
box-sizing: border-box !important;
padding: 6px 14px !important;
background: transparent !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* PERFECT HORIZONTAL AXIS CENTERING */
text-align: center !important;
}
/* Date at the top: centered */
body.page-Main_Page .vh-timeline-date {
width: 100% !important;
text-align: center !important; /* CENTERED */
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 18px !important;
margin: 0 auto 4px auto !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
z-index: 2 !important;
}
/* Horizontal Guide Line */
body.page-Main_Page .vh-timeline-track::before {
top: 30px !important;
height: 1.5px !important;
background: rgba(177, 135, 61, 0.45) !important;
}
/* Dot: Center vertically on the 30px line, and horizontally with the date */
body.page-Main_Page .vh-timeline-dot {
position: absolute !important;
top: 25px !important; /* 25px + 5px radius = 30px (EXACT ON LINE) */
left: 50% !important; /* EXACT HORIZONTAL CENTER */
transform: translateX(-50%) !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #233e44 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #b1873d !important;
z-index: 3 !important;
margin: 0 !important;
}
/* Text below: Properly centered under the dot with ample clearance */
body.page-Main_Page .vh-timeline-text {
width: 100% !important;
max-width: 220px !important;
margin: 24px auto 0 auto !important; /* CLEARLY BELOW DOT & LINE */
padding-top: 0 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #2c3e42 !important;
text-align: center !important; /* PROPERLY CENTERED TEXT */
white-space: normal !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important;
max-height: 105px !important;
}
/* Suppress any tooltip on top bar header title */
#vanipedia-header-title,
.vh-header-title,
.vanipedia-header-title,
#p-logo,
.vector-header {
-webkit-user-select: none !important;
user-select: none !important;
}
/* Transition for Remembering Prabhupada random spotlight */
#vh-random-memories,
.vh-card-memories .vh-card-body {
transition: opacity .7s ease, transform .7s ease;
}
#vh-random-memories.is-changing,
.vh-card-memories .vh-card-body.is-changing {
opacity: 0 !important;
transform: translateY(5px);
}
/* Transition ONLY the text below the titles when randomizing (STEP 70) */
.vh-card-tax .vh-card-text {
transition: opacity .6s ease, transform .6s ease !important;
}
.vh-card-tax .vh-card-text.is-changing,
#vh-tax-random-personality.is-changing,
#vh-tax-random-name.is-changing,
#vh-tax-random-place.is-changing,
#vh-tax-random-question.is-changing {
opacity: 0 !important;
transform: translateY(4px) !important;
}
/* Rotator Titles remain opaque during text rotation while allowing hover rise */
.vh-card-tax .vh-card-title,
.vh-card-tax .vh-card-body > .vh-card-title {
opacity: 1 !important;
animation: none !important;
}
.vh-card-tax .vh-card-title a {
opacity: 1 !important;
animation: none !important;
display: inline-block !important;
}
/* ==========================================================================
STEP 69: FIX BACKGROUND COLOR SCROLL BLEED & STICKY TOP BAR
========================================================================== */
/* 1. PERSISTENT STICKY TOP BAR WHEN SCROLLING DOWN */
.vector-header-container,
#mw-head,
.mw-header {
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
background-color: #345B63 !important;
}
/* 2. PREVENT BACKGROUND COLOR CUTOFF ON SCROLL (SOLID SAGE/TEAL ON ALL PAGES) */
html {
min-height: 100% !important;
background-color: #D4ECDD !important;
}
body {
min-height: 100% !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,
html:not(.skin-theme-clientpref-night) .mw-content-container {
min-height: 100vh !important;
background-color: #D4ECDD !important;
}
/* Restrict cream background strictly to Main Page */
html.page-Main_Page,
body.page-Main_Page {
background-color: #f6f2e9 !important;
}
/* 3. ŚRĪLA PRABHUPĀDA IN THE MEDIA: ARCHIVAL THUMBNAIL STYLING */
body.page-Main_Page .vh-media-bar {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 18px !important;
height: auto !important;
min-height: 48px !important;
max-height: none !important;
padding: 6px 24px !important;
}
body.page-Main_Page .vh-media-title {
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-media-text {
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-media-archival-thumb,
.vh-media-archival-thumb {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
transition: opacity .7s ease, transform .7s ease;
}
body.page-Main_Page .vh-media-archival-thumb.is-changing,
.vh-media-archival-thumb.is-changing {
opacity: 0 !important;
transform: scale(0.95);
}
body.page-Main_Page .vh-media-archival-thumb a {
display: block !important;
border-radius: 4px !important;
overflow: hidden !important;
border: 1.5px solid rgba(177, 135, 61, 0.45) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
line-height: 0 !important;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
body.page-Main_Page .vh-media-archival-thumb a:hover {
transform: translateY(-2px) scale(1.05) !important;
border-color: #dfad3e !important;
box-shadow: 0 4px 12px rgba(177, 135, 61, 0.35) !important;
}
body.page-Main_Page .vh-media-archival-thumb img {
display: block !important;
height: 38px !important;
width: auto !important;
max-width: 75px !important;
object-fit: cover !important;
border-radius: 3px !important;
}
/* ==========================================================================
STEP 71: 5-CARD EQUAL FOOTING ROW (TAXONOMY + MEDIA WITH LARGE THUMBNAILS)
========================================================================== */
/* 1. 5-Column Grid on Equal Footing */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 1450px !important;
height: auto !important;
min-height: 220px !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 16px !important;
width: 100% !important;
height: auto !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 210px !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-tax .vh-card-body {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
text-align: center !important;
}
/* 2. Soft-Switch ONLY Content Below Titles (Titles Stay 100% Static) */
.vh-card-tax .vh-card-text,
.vh-card-tax .vh-media-card-content {
transition: opacity .6s ease, transform .6s ease !important;
}
.vh-card-tax .vh-card-text.is-changing,
.vh-card-tax .vh-media-card-content.is-changing,
#vh-tax-random-personality.is-changing,
#vh-tax-random-name.is-changing,
#vh-tax-random-place.is-changing,
#vh-tax-random-question.is-changing,
#vh-tax-random-media.is-changing {
opacity: 0 !important;
transform: translateY(4px) !important;
}
/* Titles are strictly fixed during text rotation while allowing hover rise */
.vh-card-tax .vh-card-title {
opacity: 1 !important;
animation: none !important;
}
.vh-card-tax .vh-card-title a {
opacity: 1 !important;
animation: none !important;
display: inline-block !important;
}
/* 3. Card 5: Large Archival Media Thumbnail & Captions */
.vh-card-media-item .vh-media-card-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
height: 100% !important;
}
.vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 105px !important;
border-radius: 6px !important;
overflow: hidden !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(177, 135, 61, 0.3) !important;
background: #f0ebe1 !important;
position: relative !important;
line-height: 0 !important;
}
.vh-card-media-item .vh-media-large-thumb a {
display: block !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
.vh-card-media-item .vh-media-large-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
transition: transform .35s ease !important;
}
.vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.05) !important;
}
/* Fallback Vintage Press Badge */
.vh-card-media-item .vh-media-fallback-thumb {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #f7f3ec 0%, #ebdcc7 100%) !important;
}
.vh-card-media-item .vh-media-vintage-badge {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
text-decoration: none !important;
}
.vh-card-media-item .vh-media-vintage-badge .vh-media-icon {
font-size: 24px !important;
}
.vh-card-media-item .vh-media-vintage-badge .vh-media-tag {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #8c6a26 !important;
}
/* Captions Below Large Thumbnail */
.vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: center !important;
width: 100% !important;
}
.vh-card-media-item .vh-media-outlet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #8c6a26 !important;
}
.vh-card-media-item .vh-media-headline {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
}
.vh-card-media-item .vh-media-headline a {
color: #2c3e42 !important;
text-decoration: none !important;
transition: color .2s ease !important;
}
.vh-card-media-item .vh-media-headline a:hover {
color: #345B63 !important;
text-decoration: underline !important;
}
/* 4. Hide legacy bottom media bar since it is now unified in the 5-card row */
.vh-media-bar,
body.page-Main_Page .vh-media-bar {
display: none !important;
}
/* Responsive Grid Breakpoints */
@media (max-width: 1280px) {
body.page-Main_Page .vh-taxonomy-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
body.page-Main_Page .vh-taxonomy-grid {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
STEP 72: UNIFIED "STEP FORTH" TOP BAR ICONS & LEFT COLUMN STACK
========================================================================== */
/* --------------------------------------------------------------------------
1. UNIFIED "STEP FORTH" ANIMATION ACROSS ALL TOP BAR ICONS & BUTTONS
-------------------------------------------------------------------------- */
.vector-header-container .vector-icon,
.vector-header-start .vector-icon,
.vector-header-end .vector-icon,
.vector-header-start .cdx-button,
.vector-header-end .cdx-button,
.vector-header-start .vector-dropdown-label,
.vector-header-end .vector-dropdown-label,
.vector-header-container .cdx-text-input__icon,
.mw-header .vector-icon,
.vector-sticky-header .vector-icon {
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
filter 0.25s ease,
color 0.25s ease,
background-color 0.25s ease !important;
will-change: transform, filter !important;
}
/* STEP FORTH HOVER: Icon floats up 2.5px, scales up, glows with 3D drop shadow */
.vector-header-start #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-start .cdx-button:hover .vector-icon,
.vector-header-end .cdx-button:hover .vector-icon,
.vector-header-start .vector-dropdown-label:hover .vector-icon,
.vector-header-end .vector-dropdown-label:hover .vector-icon,
.vector-header-end #pt-userpage-2:hover .vector-icon,
.vector-header-container .cdx-search-input:hover .cdx-text-input__icon,
.vector-header-container .cdx-text-input__input:focus ~ .cdx-text-input__icon,
.vector-header-container .vector-icon:hover {
transform: translateY(-2.5px) scale(1.14) !important;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 10px rgba(245, 215, 127, 0.8)) !important;
color: #ffffff !important;
fill: #ffffff !important;
}
/* STEP FORTH BUTTON CONTAINER HOVER */
.vector-header-start .vector-dropdown-label:hover,
.vector-header-end .vector-dropdown-label:hover,
.vector-header-start .cdx-button:hover,
.vector-header-end .cdx-button:hover,
.vector-header-end #pt-userpage-2:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(245, 215, 127, 0.45) !important;
background-color: rgba(245, 215, 127, 0.18) !important;
}
/* ACTIVE / CLICK STATE: Tactile press depression */
.vector-header-start .vector-dropdown-label:active .vector-icon,
.vector-header-end .vector-dropdown-label:active .vector-icon,
.vector-header-start .cdx-button:active .vector-icon,
.vector-header-end .cdx-button:active .vector-icon {
transform: translateY(0.5px) scale(0.98) !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}
/* --------------------------------------------------------------------------
2. TOP-LEFT COLUMN: MEMORIES (TOP) + SRILA PRABHUPADA IN MEDIA (BOTTOM)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: stretch !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
gap: 24px !important;
height: auto !important;
min-height: 330px !important;
}
/* Left Stacked Column */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 310px !important;
height: 100% !important;
justify-content: space-between !important;
}
body.page-Main_Page .vh-triad-column-left .vh-card {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
}
/* Center Sanctuary Hero */
body.page-Main_Page .vh-sanctuary-card {
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 310px !important;
height: auto !important;
}
/* Right Thematic Article Spotlight */
body.page-Main_Page .vh-card-article {
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 310px !important;
height: auto !important;
}
/* Media Card in Hero Left: Large Thumbnail & Captions Below */
body.page-Main_Page .vh-card-media-item .vh-media-card-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 95px !important;
border-radius: 5px !important;
overflow: hidden !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(177, 135, 61, 0.35) !important;
background: #f0ebe1 !important;
line-height: 0 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb a {
display: block !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
transition: transform .35s ease !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.05) !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: center !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #8c6a26 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
}
/* --------------------------------------------------------------------------
3. BOTTOM 4-COLUMN TAXONOMY GRID (EQUAL FOOTING)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-taxonomy-section {
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 180px !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 18px !important;
width: 100% !important;
height: auto !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 175px !important;
}
/* Clean up any legacy media bar */
.vh-media-bar,
body.page-Main_Page .vh-media-bar {
display: none !important;
}
/* ==========================================================================
STEP 73: FIT EVERYTHING TO SCREEN + 100% LARGER TITLES & TEXTS
+ MAXIMIZED ŚRĪLA PRABHUPĀDA CARD SIZE
========================================================================== */
/* --------------------------------------------------------------------------
1. FIT EVERYTHING TO SCREEN (ZERO SCROLLBAR ON DESKTOP)
-------------------------------------------------------------------------- */
body.page-Main_Page,
html.page-Main_Page {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
}
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 {
margin: 0 !important;
padding: 0 !important;
border: none !important;
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
background-color: #faf7f0 !important;
}
/* Master Homepage Container: Perfectly fits single viewport height */
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 48px) !important;
max-height: calc(100vh - 48px) !important;
min-height: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 8px 32px 10px 32px !important;
margin: 0 !important;
overflow: hidden !important;
position: relative !important;
}
/* --------------------------------------------------------------------------
2. MAXIMIZED ŚRĪLA PRABHUPĀDA CARD & HERO ROW PROPORTIONS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: stretch !important;
width: 100% !important;
max-width: 1560px !important;
margin: 0 auto !important;
gap: 22px !important;
flex: 1 1 auto !important;
height: auto !important;
min-height: 310px !important;
max-height: 44vh !important;
}
/* Left Stacked Column: Memories (Top) + Media (Bottom) */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
min-width: 300px !important;
height: 100% !important;
justify-content: space-between !important;
}
body.page-Main_Page .vh-triad-column-left .vh-card {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important;
padding: 8px 14px !important;
}
body.page-Main_Page .vh-card-media-item {
flex: 1 1 auto !important;
padding: 8px 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
/* CENTER: MAXIMIZED ŚRĪLA PRABHUPĀDA CARD */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 440px !important;
height: 100% !important;
padding: 10px 24px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
}
/* Grand Portrait Circle - Maximized Size */
body.page-Main_Page .vh-sanctuary-portrait-box {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 4px 0 !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: min(240px, 24vh) !important;
height: min(240px, 24vh) !important;
min-width: 190px !important;
min-height: 190px !important;
border-radius: 50% !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 8px 28px rgba(18, 63, 56, 0.35),
0 2px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
overflow: hidden !important;
margin: 0 auto !important;
position: relative !important;
}
/* Right Column: Thematic Article Spotlight */
body.page-Main_Page .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
min-width: 300px !important;
height: 100% !important;
padding: 10px 16px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
/* --------------------------------------------------------------------------
3. INCREASE ALL CARD TITLES BY 100% (MAJESTIC 3D SACRED GOLD)
-------------------------------------------------------------------------- */
/* Center Title: "Śrīla Prabhupāda" (+100% -> 46px) */
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 46px !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: 0.5px !important;
margin-bottom: 4px !important;
}
/* Memories & Article Titles (+100% -> 28px) */
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 28px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
/* Media Card Title (+100% -> 26px) */
body.page-Main_Page .vh-card-media-item .vh-card-title,
body.page-Main_Page .vh-card-media-item .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 26px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
/* Bottom 4 Taxonomy Card Titles: Personalities, Names, Places, Questions (+100% -> 30px) */
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 30px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
/* --------------------------------------------------------------------------
4. INCREASE ALL TEXTS IN THOSE CARDS BY 100%
-------------------------------------------------------------------------- */
/* Śrīla Prabhupāda Sanctuary Subtitle (+100% -> 22px) */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-style: normal !important;
font-weight: 600 !important;
font-size: 22px !important;
line-height: 1.3 !important;
color: #2b4b52 !important;
text-align: center !important;
margin: 4px 0 0 0 !important;
}
/* Bottom 4 Taxonomy Descriptions (+100% -> 18px) */
body.page-Main_Page .vh-card-tax .vh-card-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.4 !important;
color: #2c3e42 !important;
text-align: center !important;
}
body.page-Main_Page .vh-card-tax .vh-card-text strong,
body.page-Main_Page .vh-card-tax .vh-card-text a strong {
font-size: 19px !important;
color: #123f38 !important;
font-weight: 700 !important;
}
/* Memories Text (+100% -> 18px) */
body.page-Main_Page .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-snippet {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.38 !important;
color: #2c3e42 !important;
}
/* Media Card Outlet Tag & Headline (+100%) */
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-size: 14.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
}
/* Media Thumbnail Dimensions */
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 100px !important;
border-radius: 6px !important;
overflow: hidden !important;
}
/* Right Article Spotlight Text (+100% -> 18px) */
body.page-Main_Page .vh-card-article .vh-card-text,
body.page-Main_Page .vh-card-article .vh-random-article-extract {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.4 !important;
color: #2c3e42 !important;
}
/* --------------------------------------------------------------------------
5. COMPACT TIMELINE TO FIT THE 100vh SCREEN PERFECTLY
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 130px !important;
height: 130px !important;
min-height: 130px !important;
max-height: 130px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
margin-top: 4px !important;
margin-bottom: 4px !important;
background: transparent !important;
}
body.page-Main_Page .vh-timeline-years {
flex: 0 0 32px !important;
height: 32px !important;
min-height: 32px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
padding: 4px 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
}
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
flex: 0 0 92px !important;
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
}
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
padding: 2px 14px !important;
}
body.page-Main_Page .vh-timeline-date {
font-size: 11px !important;
font-weight: 800 !important;
}
body.page-Main_Page .vh-timeline-text {
font-size: 13px !important;
line-height: 1.3 !important;
margin-top: 14px !important;
}
/* --------------------------------------------------------------------------
6. BOTTOM 4 TAXONOMY CARDS PROPORTIONS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-taxonomy-section {
width: 100% !important;
max-width: 1560px !important;
margin: 0 auto !important;
flex: 0 0 auto !important;
height: auto !important;
min-height: 145px !important;
max-height: 22vh !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
width: 100% !important;
height: 100% !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 140px !important;
padding: 8px 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* ==========================================================================
STEP 77: TARGETED ADJUSTMENTS STARTING FROM STEP 73
1. Centered, ROUND picture (no oval distortion, no text overlap)
2. Subtitle second line in one line, not truncated (same text size: 20-22px)
3. Put media card UP to fit in under "...remembers..." (no push-down)
4. Put bottom 4 cards up & decrease text size (14.5px) to fit in cleanly
5. Put timeline and years above it MORE DOWN (margin-top: 38px)
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: CENTERED ROUND PICTURE (NOT OVAL, NO TEXT OVERLAP)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 4px auto !important;
text-align: center !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 180px !important;
height: 180px !important;
min-width: 180px !important;
min-height: 180px !important;
max-width: 180px !important;
max-height: 180px !important;
border-radius: 50% !important; /* PERFECT 100% ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
box-shadow:
0 8px 24px rgba(18, 63, 56, 0.35),
0 2px 6px rgba(0, 0, 0, 0.22),
inset 0 2px 5px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage .vh-photo {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
background-size: cover !important;
background-position: center top !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
ITEM 2: SECOND LINE IN ONE LINE, NOT TRUNCATED (SAME TEXT SIZE)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin: 6px auto 0 auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
position: static !important; /* NEVER OVERLAPS WITH PHOTO */
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important; /* SAME PROMINENT TEXT SIZE */
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.25 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important; /* SAME PROMINENT TEXT SIZE */
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.25 !important;
}
/* --------------------------------------------------------------------------
ITEM 3: PUT MEDIA CARD UP TO FIT IN UNDER "...REMEMBERS..."
-------------------------------------------------------------------------- */
/* Left Column: Natural flow (no space-between that forces media down) */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* PUT IT UP UNDER REMEMBERS */
gap: 8px !important;
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: 275px !important;
max-height: 275px !important;
}
/* Memories Card (Top Left) */
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 110px !important;
max-height: 110px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories .vh-card-title a {
font-size: 22px !important;
margin-bottom: 3px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-memories .vh-card-text {
font-size: 14.5px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Media Card (Bottom Left): Sits directly under Memories with compact thumb */
body.page-Main_Page .vh-card-media-item {
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 155px !important;
max-height: 155px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 3px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-title a {
font-size: 21px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 68px !important; /* COMPACT THUMBNAIL FITS UP UNDER REMEMBERS */
border-radius: 5px !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-size: 11px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-size: 13.5px !important;
line-height: 1.25 !important;
color: #2c3e42 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Center Sanctuary Card */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 660px !important;
min-width: 440px !important;
height: 275px !important;
max-height: 275px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-bottom: 2px !important;
}
/* Right Column: Article Spotlight */
body.page-Main_Page .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: 275px !important;
max-height: 275px !important;
padding: 8px 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-article .vh-card-title a {
font-size: 22px !important;
line-height: 1.15 !important;
margin-bottom: 4px !important;
}
body.page-Main_Page .vh-card-article .vh-card-text {
font-size: 14px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
display: -webkit-box !important;
-webkit-line-clamp: 7 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Hero Row Container Height Capped at 275px */
body.page-Main_Page .vh-triad-grid {
height: 275px !important;
max-height: 275px !important;
}
/* --------------------------------------------------------------------------
ITEM 5: PUT THE TIMELINE AND THE YEARS ABOVE IT MORE DOWN
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 auto !important;
height: 120px !important;
min-height: 120px !important;
max-height: 120px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
margin-top: 38px !important; /* PUSHES TIMELINE & YEARS DOWN */
margin-bottom: 22px !important; /* GENEROUS BREATHING ROOM BELOW */
background: transparent !important;
}
body.page-Main_Page .vh-timeline-years {
flex: 0 0 28px !important;
height: 28px !important;
min-height: 28px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
padding: 3px 9px !important;
font-size: 12px !important;
font-weight: 700 !important;
}
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
flex: 0 0 82px !important;
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
}
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
padding: 2px 14px !important;
}
body.page-Main_Page .vh-timeline-date {
font-size: 10.5px !important;
font-weight: 800 !important;
}
body.page-Main_Page .vh-timeline-text {
font-size: 12px !important;
line-height: 1.25 !important;
margin-top: 10px !important;
}
/* --------------------------------------------------------------------------
ITEM 4: PUT BOTTOM CARDS UP & DECREASE TEXT SIZE IN THESE FOUR CARDS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-taxonomy-section {
width: 100% !important;
max-width: 1560px !important;
margin: 0 auto !important;
flex: 0 0 auto !important;
height: 110px !important;
min-height: 110px !important;
max-height: 110px !important;
margin-bottom: 10px !important; /* ELEVATED ABOVE SCREEN BOTTOM */
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
width: 100% !important;
height: 100% !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
height: 110px !important;
min-height: 110px !important;
max-height: 110px !important;
padding: 6px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
/* Title: 24px Grand Golden 3D Typography */
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a {
font-size: 24px !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
/* Decreased text size so it fits in without truncation */
body.page-Main_Page .vh-card-tax .vh-card-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14.5px !important; /* DECREASED FROM 18px TO FIT IN */
line-height: 1.35 !important;
color: #2c3e42 !important;
text-align: center !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-tax .vh-card-text strong,
body.page-Main_Page .vh-card-tax .vh-card-text a strong {
font-size: 15.5px !important;
color: #123f38 !important;
font-weight: 700 !important;
}
/* ==========================================================================
STEP 78: 50% LARGER ROUND IMAGE, ZERO SUBTITLE GAP, SMALL MEDIA GAP
1. 50% larger round image (270px x 270px) with clean visual gaps above/below
2. Zero gap between "Founder-Ācārya" and "International Society..."
3. Small gap (4px) between "Remembers..." and "In the Media"
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: 50% LARGER ROUND IMAGE (270px x 270px) WITH VISUAL GAPS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 460px !important;
height: auto !important;
min-height: 375px !important;
max-height: 390px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-bottom: 6px !important; /* VISUAL GAP ABOVE ROUND IMAGE */
}
/* Portrait stage increased by 50% (180px -> 270px) */
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 4px auto !important;
text-align: center !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 270px !important; /* +50% LARGER (180px -> 270px) */
height: 270px !important;
min-width: 270px !important;
min-height: 270px !important;
max-width: 270px !important;
max-height: 270px !important;
border-radius: 50% !important; /* 100% ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 10px 30px rgba(18, 63, 56, 0.38),
0 3px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage .vh-photo {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
background-size: cover !important;
background-position: center top !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
ITEM 2: NO GAP BETWEEN "FOUNDER-ĀCĀRYA" AND "INTERNATIONAL SOCIETY..."
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin: 8px auto 0 auto !important; /* VISUAL GAP BELOW ROUND IMAGE */
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINES */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 3: PUT MEDIA CARD UNDER "...REMEMBERS..." WITH JUST SMALL GAP (4px)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid {
height: auto !important;
min-height: 375px !important;
max-height: 390px !important;
}
/* Left Stacked Column: 4px crisp small gap */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 4px !important; /* JUST SMALL GAP! */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: 100% !important;
}
body.page-Main_Page .vh-card-memories {
margin: 0 !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 110px !important;
max-height: 110px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item {
margin: 0 !important;
margin-top: 0 !important; /* ZERO EXTRA MARGIN (CONTROLLED BY 4px GAP) */
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 155px !important;
max-height: 155px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
box-sizing: border-box !important;
}
/* Right Article Card height aligned */
body.page-Main_Page .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 275px !important;
max-height: 385px !important;
padding: 8px 14px !important;
}
/* Timeline section spacing adjusted for new hero height */
body.page-Main_Page .vh-timeline-section {
margin-top: 20px !important;
margin-bottom: 16px !important;
}
/* Bottom 4 cards padding & positioning */
body.page-Main_Page .vh-taxonomy-section {
margin-bottom: 8px !important;
}
/* ==========================================================================
STEP 79: MOVE "FOUNDER..." +10px DOWN & REMOVE HUGE GAP UNDER REMEMBERS
1. Subtitle ("Founder-Ācārya / International Society...") moved +10px down
2. "Śrīla Prabhupāda in the Media" pulled directly under "Remembers..."
with just a small 6px gap (huge empty gap completely eliminated)
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: MOVE THOSE TWO LINES "FOUNDER..." +10px DOWN
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 18px !important; /* MOVED +10px DOWN (FROM 8px TO 18px) */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINE 1 AND LINE 2 */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 2: REMOVE HUGE EMPTY GAP UNDER REMEMBERS (PUT MEDIA DIRECTLY UNDER)
-------------------------------------------------------------------------- */
/* Left Column Container: Natural tight vertical flow */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* TIGHT TOP PACKING (NO SPACE-BETWEEN) */
align-items: stretch !important;
gap: 6px !important; /* CRISP SMALL GAP! */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important; /* UNCONSTRAINED TO PREVENT PUSH-DOWN */
min-height: 0 !important;
}
/* Top Card: Memories (Tight fit to content, zero empty space below) */
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important; /* NEVER EXPAND VERTICALLY */
height: auto !important; /* EXACT HEIGHT OF CONTENT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-bottom: 0 !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories .vh-card-body,
body.page-Main_Page #vh-random-memories {
height: auto !important; /* NEVER STRETCH TO 100% */
min-height: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-memories .vh-card-title a {
font-size: 21px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-memories .vh-card-text {
font-size: 14px !important;
line-height: 1.35 !important;
margin-bottom: 0 !important;
}
/* Bottom Card: Media Item (Sits immediately below Memories with only 6px gap) */
body.page-Main_Page .vh-card-media-item {
flex: 0 0 auto !important; /* NEVER EXPAND VERTICALLY */
height: auto !important; /* EXACT HEIGHT OF CONTENT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important; /* ZERO EXTRA MARGIN (GAP CONTROLS IT) */
margin-bottom: 0 !important;
padding: 6px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-body {
height: auto !important;
min-height: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-title a {
font-size: 20px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 68px !important;
border-radius: 5px !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-size: 11px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-size: 13.5px !important;
line-height: 1.25 !important;
color: #2c3e42 !important;
}
/* ==========================================================================
STEP 80: ABSOLUTE ELIMINATION OF LEFT GAP & CENTER VERTICAL SHIFTS
1. Left Column: Completely eliminate the huge gap between "...remembers..."
and "In the Media" (align-items: flex-start, unconstrained auto height,
flex: 0 0 auto on both cards, strict 4px gap).
2. Center Card:
- Shift the round image 30px down from the title (margin-top: 36px)
- Text lines under the image increased +30px from image (margin-top: 48px)
- Zero gap between "Founder-Ācārya" and "International Society..."
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: ABSOLUTE ELIMINATION OF THE HUGE EMPTY GAP ON THE LEFT
-------------------------------------------------------------------------- */
/* Unstretch hero row so left column hugs its content instead of stretching 390px */
body.page-Main_Page .vh-triad-grid {
align-items: flex-start !important; /* STOPS FORCING LEFT COLUMN TO STRETCH */
height: auto !important;
min-height: 450px !important;
}
/* Left Stacked Column: Strictly pack items with only 4px gap */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* PACK TIGHTLY AT TOP */
align-items: stretch !important;
gap: 4px !important; /* CRISP 4px GAP ONLY */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important; /* NEVER 100% HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Memories Card (Top Left) */
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important; /* NEVER EXPAND */
height: auto !important; /* EXACT CONTENT HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories .vh-card-body,
body.page-Main_Page #vh-random-memories {
flex: 0 0 auto !important;
height: auto !important; /* NEVER 100% HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Media Card (Bottom Left): Sits immediately 4px under Memories */
body.page-Main_Page .vh-card-media-item {
flex: 0 0 auto !important; /* NEVER EXPAND */
height: auto !important; /* EXACT CONTENT HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important; /* ZERO EXTRA MARGIN (4px GAP CONTROLS IT) */
margin-bottom: 0 !important;
padding: 6px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-body {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 2: CENTER CARD - SHIFT IMAGE 30px DOWN & TEXT LINES +30px DOWN
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 460px !important;
height: auto !important;
min-height: 440px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 1. Shift the round image 30px down from the title */
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-top: 36px !important; /* SHIFTED 30px DOWN FROM TITLE */
margin-bottom: 0 !important;
text-align: center !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 270px !important;
height: 270px !important;
min-width: 270px !important;
min-height: 270px !important;
max-width: 270px !important;
max-height: 270px !important;
border-radius: 50% !important; /* PERFECT ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 10px 30px rgba(18, 63, 56, 0.38),
0 3px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* 2. Text lines under the image increased +30px from the image */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 48px !important; /* INCREASED +30px DOWN FROM THE IMAGE (18px -> 48px) */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINE 1 AND LINE 2 */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* ==========================================================================
STEP 81: SPECIFICITY OVERHAUL - ELIMINATING THE 340px SQUARE ON MEMORIES CARD
The user's DevTools confirmed: .vh-card.vh-card-memories was computing to
EXACTLY 339.99px x 339.99px (a square) because an older high-specificity rule
"body.page-Main_Page .vh-triad-grid .vh-card { flex: 0 0 340px !important; }"
was matching it. In a column flex container (.vh-triad-column-left),
flex-basis: 340px forces the HEIGHT to 340px!
We now use #vani-home scoped selectors to permanently override and reset
flex, height, and margins on all cards inside the left column.
========================================================================== */
/* 1. HERO TRIAD GRID & LEFT COLUMN: UNSTRETCH & WRAP CONTENT */
body.page-Main_Page #vani-home .vh-triad-grid,
body.page-Main_Page .vh-triad-grid {
align-items: flex-start !important;
height: auto !important;
min-height: 450px !important;
}
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page #vani-home .vh-triad-column-left,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 4px !important; /* CRISP 4px GAP BETWEEN THE TWO CARDS */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 2. OVERRIDE THE 340px FLEX-BASIS ON ALL CARDS IN THE LEFT COLUMN */
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card,
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card-memories,
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card-media-item,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-memories,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-media-item,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card-memories,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card-media-item {
flex: 0 0 auto !important; /* KILLS 340px HEIGHT! */
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important; /* HUGS EXACT CONTENT HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
}
/* 3. CARD BODIES IN LEFT COLUMN */
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card-body,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-body,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card-body,
body.page-Main_Page .vh-triad-column-left .vh-card-body,
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left #vh-random-memories,
body.page-Main_Page #vani-home .vh-triad-column-left #vh-random-memories,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left #vh-random-memories,
body.page-Main_Page .vh-triad-column-left #vh-random-memories {
flex: 0 0 auto !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
height: auto !important; /* KILLS 100% HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4. MEDIA ITEM CARD SPECIFIC STYLING IN LEFT COLUMN */
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-media-item,
body.page-Main_Page .vh-triad-column-left .vh-card-media-item {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
}
/* --------------------------------------------------------------------------
CENTER CARD: SHIFT ROUND IMAGE 30px DOWN & TEXT LINES +30px FROM IMAGE
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page #vani-home .vh-sanctuary-card,
body.page-Main_Page .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 460px !important;
height: auto !important;
min-height: 440px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Shift the round image 30px down from the title */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-top: 36px !important; /* SHIFTED 30px DOWN FROM TITLE */
margin-bottom: 0 !important;
text-align: center !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 270px !important;
height: 270px !important;
min-width: 270px !important;
min-height: 270px !important;
max-width: 270px !important;
max-height: 270px !important;
border-radius: 50% !important; /* PERFECT ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 10px 30px rgba(18, 63, 56, 0.38),
0 3px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* Text lines under the image increased +30px from the image */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page #vani-home .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 48px !important; /* INCREASED +30px DOWN FROM THE IMAGE (18px -> 48px) */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINE 1 AND LINE 2 */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text br,
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-sub-1,
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-sub-2,
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* --------------------------------------------------------------------------
RIGHT COLUMN: ARTICLE CARD (CLEAN UNCONSTRAINED AUTO HEIGHT)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-card-article,
body.page-Main_Page .vh-triad-grid > .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 275px !important;
max-height: 440px !important;
padding: 8px 14px !important;
}
/* ==========================================================================
STEP 82:
1. Unclamp Memories text so disciple name at the end of "recounted by..."
displays fully as it used to be (remove -webkit-line-clamp: 3).
2. Make +50px bigger gap between Memories card and "SP in Media" card
(gap: 50px).
3. Make the media thumbnail view a complete standard size (175px tall),
filling the plenty space below, with object-fit: contain so thumbnails
fit completely inside without any cropping and without changing their
aspect ratio.
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: DISPLAY FULL NAME AT END OF "RECOUNTED BY..." (UNCLAMP TEXT)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-text {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
max-height: none !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* --------------------------------------------------------------------------
ITEM 2: +50px BIGGER GAP TO "SP IN THE MEDIA"
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page #vani-home .vh-triad-column-left,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 50px !important; /* +50px BIGGER GAP */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-card-media-item,
body.page-Main_Page .vh-card-media-item {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 3: COMPLETE STANDARD SIZE THUMBNAIL VIEW (NO CROPPING, FIT ASPECT RATIO)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 175px !important; /* COMPLETE STANDARD VIEW SIZE FILLING THE SPACE */
min-height: 175px !important;
max-height: 175px !important;
border-radius: 6px !important;
overflow: hidden !important;
background: #f4efe6 !important; /* WARM VINTAGE PARCHMENT TONE */
border: 1px solid rgba(177, 135, 61, 0.3) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 6px 0 8px 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb a,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
text-decoration: none !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important; /* FITS COMPLETE THUMBNAIL WITHOUT CROPPING */
object-position: center center !important;
transition: transform .3s ease !important;
display: block !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb:hover img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.03) !important;
}
/* Captions under the thumbnail */
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-caption,
body.page-Main_Page .vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: center !important;
width: 100% !important;
margin-top: 2px !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-outlet,
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.2 !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-headline,
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-headline a,
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.3 !important;
color: #2c3e42 !important;
}
/* ==========================================================================
STEP 86:
1. NEUTRALIZE STRAY PARAGRAPHS: Prevent MediaWiki parser from generating
top/side offsets.
2. FOUNDER-ĀCARYA CLICKABLE TITLE:
- Macron ONLY above capital 'A' (Founder-Ācarya).
- Styled in exact 3D sacred gold as other card titles.
- Breathing filament underline at rest, 90% glide & lift on hover.
3. DECREASE GAP ABOVE 4 BOTTOM CARDS JUST TO 30px:
- Shifts .vh-taxonomy-section UP by 50px via translateY(-50px)
reducing the ~80px gap directly to 30px, keeping layout fully stable.
4. UNIFY HOVER ANIMATIONS FOR ALL TOP BAR ICONS & BUTTONS:
- Unified smooth lift (translateY(-2px)) on all topbar buttons/links.
- Unified warm gold glowing pill (rgba(245, 215, 127, 0.18)).
- Unified icon scale (1.08x) with soft glow, eliminating double-jumping.
========================================================================== */
/* 1. Neutralize stray paragraph tags */
body.page-Main_Page .mw-parser-output > p {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
body.page-Main_Page .mw-parser-output > p:empty {
display: none !important;
}
/* 2. Decrease gap above 4 bottom cards just to 30px */
body.page-Main_Page #vani-home .vh-taxonomy-section,
body.page-Main_Page .vh-taxonomy-section {
transform: translateY(-50px) !important; /* DECREASES GAP ABOVE 4 BOTTOM CARDS TO 30px */
}
/* 3. Founder-Ācarya Clickable 3D Title Link */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-sanctuary-card .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 40px !important; /* MAINTAINS +30px GAP FROM 270px ROUND IMAGE */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
position: static !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-founder-title,
body.page-Main_Page .vh-founder-title,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1,
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
text-align: center !important;
margin: 0 !important;
margin-bottom: 2px !important;
padding: 0 !important;
line-height: 1.15 !important;
}
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page .vh-founder-title a,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 24px !important; /* IDENTICAL CARD TITLE SIZE */
font-weight: 700 !important;
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 7px !important; /* SPACE FOR BREATHING UNDERLINE */
letter-spacing: 0.025em !important;
line-height: 1.2 !important;
cursor: pointer !important;
transform: none !important;
/* Temple Gold Face */
color: #dfad3e !important;
-webkit-text-fill-color: #dfad3e !important;
/* 3D Chiseled Shadow */
text-shadow: none !important;
transition: transform 0.22s ease, color 0.22s ease, text-shadow 0.22s ease !important;
}
/* Golden Breathing Filament Underline at Rest */
body.page-Main_Page #vani-home .vh-founder-title a::after,
body.page-Main_Page .vh-founder-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a::after,
body.page-Main_Page .vh-sanctuary-sub-1 a::after,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(223, 173, 62, 0.4) 15%,
#dfad3e 50%,
rgba(223, 173, 62, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(223, 173, 62, 0.75) !important;
border-radius: 2px !important;
pointer-events: none !important;
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease !important;
}
/* On Hover: 3D Lift & Full Glide Underline */
body.page-Main_Page #vani-home .vh-founder-title a:hover,
body.page-Main_Page .vh-founder-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover,
body.page-Main_Page .vh-sanctuary-sub-1 a:hover,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a:hover {
transform: translateY(-2.5px) !important;
color: #dfad3e !important;
-webkit-text-fill-color: #dfad3e !important;
text-decoration: none !important;
text-shadow: none !important;
}
body.page-Main_Page #vani-home .vh-founder-title a:hover::after,
body.page-Main_Page .vh-founder-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover::after,
body.page-Main_Page .vh-sanctuary-sub-1 a:hover::after,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a:hover::after {
animation: none !important;
opacity: 1 !important;
width: 90% !important;
left: 5% !important;
}
/* Subtitle Line 2: International Society for Kṛṣṇa Consciousness */
body.page-Main_Page #vani-home .vh-sanctuary-sub-2,
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4. UNIFIED HOVER ANIMATION FOR ALL TOP BAR ICONS & BUTTONS */
/* Base transitions on all interactive elements in top bar */
.vector-header-container .cdx-button,
.vector-header-container .vector-dropdown-label,
.vector-header-container #pt-userpage-2,
.vector-header-container .vector-user-links a,
.vector-header-container .vector-icon,
.vector-header-container svg {
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
filter 0.22s ease !important;
}
/* Unified button container hover */
.vector-header-container .vector-header-start .cdx-button:hover,
.vector-header-container .vector-header-end .cdx-button:hover,
.vector-header-container .vector-dropdown-label:hover,
.vector-header-container #vector-main-menu-dropdown .vector-dropdown-label:hover,
.vector-header-container #pt-userpage-2:hover,
.vector-header-container .vector-user-links a:hover {
transform: translateY(-2px) !important;
background-color: rgba(245, 215, 127, 0.18) !important;
border-radius: 4px !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(245, 215, 127, 0.4) !important;
color: #ffffff !important;
}
/* Unified icon scale & soft glow (no double translation) */
.vector-header-container .vector-header-start .cdx-button:hover .vector-icon,
.vector-header-container .vector-header-end .cdx-button:hover .vector-icon,
.vector-header-container .vector-dropdown-label:hover .vector-icon,
.vector-header-container #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-container #pt-userpage-2:hover .vector-icon,
.vector-header-container .vector-user-links a:hover .vector-icon,
.vector-header-container .cdx-button:hover svg,
.vector-header-container .vector-dropdown-label:hover svg,
.vector-header-container .vector-icon:hover {
transform: scale(1.08) !important;
color: #ffffff !important;
fill: #ffffff !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 8px rgba(245, 215, 127, 0.65)) !important;
}
/* ==========================================================================
STEP 87: COMPLETELY ELIMINATE / AVOID TOP BAR ICON ANIMATIONS
- Neutralize all transforms, scales, translations, and jumping animations on
all top bar icons, buttons, dropdowns, and links.
- Clean, quiet, stationary hover state with subtle background pill only.
========================================================================== */
/* 1. Reset all transforms, filters, and animations on top bar container elements */
.vector-header-container,
.vector-header-start,
.vector-header-end,
.vector-header-container *,
.vector-header-container .vector-icon,
.vector-header-container svg,
.vector-header-container .cdx-button,
.vector-header-container .vector-dropdown-label,
.vector-header-container #pt-userpage-2,
.vector-header-container .vector-user-links a,
.mw-header .vector-icon,
.vector-sticky-header .vector-icon {
transform: none !important;
animation: none !important;
filter: none !important;
will-change: auto !important;
}
/* 2. On hover: Keep icons strictly stationary — zero movement, zero scale, zero drop-shadow */
.vector-header-container .vector-icon:hover,
.vector-header-container svg:hover,
.vector-header-container .cdx-button:hover .vector-icon,
.vector-header-container .cdx-button:hover svg,
.vector-header-container .vector-dropdown-label:hover .vector-icon,
.vector-header-container .vector-dropdown-label:hover svg,
.vector-header-container #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-container #vector-main-menu-dropdown:hover svg,
.vector-header-container #pt-userpage-2:hover .vector-icon,
.vector-header-container #pt-userpage-2:hover svg,
.vector-header-container .vector-user-links a:hover .vector-icon,
.vector-header-container .vector-user-links a:hover svg,
.vector-header-container .cdx-search-input:hover .cdx-text-input__icon,
.vector-header-container .cdx-text-input__input:focus ~ .cdx-text-input__icon,
.vector-header-start .cdx-button:hover .vector-icon,
.vector-header-end .cdx-button:hover .vector-icon,
.vector-header-start .vector-dropdown-label:hover .vector-icon,
.vector-header-end .vector-dropdown-label:hover .vector-icon,
.vector-header-start #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-end #pt-userpage-2:hover .vector-icon {
transform: none !important;
filter: none !important;
animation: none !important;
color: #ffffff !important;
fill: #ffffff !important;
}
/* 3. On button/dropdown hover: subtle stationary background highlight only (no vertical lift, no jumping) */
.vector-header-container .cdx-button:hover,
.vector-header-container .vector-dropdown-label:hover,
.vector-header-container #vector-main-menu-dropdown .vector-dropdown-label:hover,
.vector-header-container #pt-userpage-2:hover,
.vector-header-container .vector-user-links a:hover,
.vector-header-start .cdx-button:hover,
.vector-header-end .cdx-button:hover,
.vector-header-start .vector-dropdown-label:hover,
.vector-header-end .vector-dropdown-label:hover,
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label:hover,
.vector-header-end #pt-userpage-2:hover {
transform: none !important;
box-shadow: none !important;
background-color: rgba(245, 215, 127, 0.15) !important;
border-radius: 4px !important;
color: #ffffff !important;
}
/* 4. On active / click: no displacement */
.vector-header-container .cdx-button:active,
.vector-header-container .vector-dropdown-label:active,
.vector-header-container .vector-icon:active,
.vector-header-start .vector-dropdown-label:active .vector-icon,
.vector-header-end .vector-dropdown-label:active .vector-icon,
.vector-header-start .cdx-button:active .vector-icon,
.vector-header-end .cdx-button:active .vector-icon {
transform: none !important;
filter: none !important;
}
/* ==========================================================================
STEP 91:
1. STRICTLY SCOPED TO MAIN PAGE (ZERO LEAKAGE TO REGULAR MEDIAWIKI PAGES):
- Every cursor rule is prefixed with html body.page-Main_Page.
- Regular MediaWiki pages retain 100% normal default Windows mouse behavior.
2. ABSOLUTE DISABLE OF WINDOWS CURSOR ACROSS MAIN PAGE & ALL HOVER STATES:
- Uses high-specificity rules targeting *:hover, a:hover, etc.
ensuring the native Windows cursor/pointing hand is completely suppressed.
3. CUSTOM GOLDEN CURSOR (ARROW AT REST, HAND ONLY ABOVE LINKS):
- Sleek golden arrow pointer by default.
- Smoothly switches to golden pointing hand ONLY above links (body.vh-cursor-link).
- No outer halo ring, zero lag, zero clutter.
4. FOUNDER-ĀCĀRYA MACRON CENTERING PRESERVED:
- 'Noto Serif', 'Cormorant Garamond' font stack.
========================================================================== */
/* 1. DISABLE WINDOWS CURSOR ON MAIN PAGE ONLY (ACROSS ALL ELEMENTS & HOVER STATES) */
html body.page-Main_Page,
html body.page-Main_Page *,
html body.page-Main_Page *:hover,
html body.page-Main_Page a,
html body.page-Main_Page a:hover,
html body.page-Main_Page a:focus,
html body.page-Main_Page a:active,
html body.page-Main_Page a:visited,
html body.page-Main_Page a *,
html body.page-Main_Page a *:hover,
html body.page-Main_Page [href],
html body.page-Main_Page [href]:hover,
html body.page-Main_Page [href] *,
html body.page-Main_Page [href] *:hover,
html body.page-Main_Page button,
html body.page-Main_Page button:hover,
html body.page-Main_Page input,
html body.page-Main_Page input:hover,
html body.page-Main_Page textarea,
html body.page-Main_Page select,
html body.page-Main_Page [role="button"],
html body.page-Main_Page [role="button"]:hover,
html body.page-Main_Page .cdx-button,
html body.page-Main_Page .cdx-button:hover,
html body.page-Main_Page .vh-card,
html body.page-Main_Page .vh-card:hover,
html body.page-Main_Page .vh-card *,
html body.page-Main_Page .vh-card *:hover,
html body.page-Main_Page .vh-year,
html body.page-Main_Page .vh-year:hover,
html body.page-Main_Page .vector-menu a,
html body.page-Main_Page .vector-menu a:hover,
html body.page-Main_Page .vector-dropdown-label,
html body.page-Main_Page .vector-dropdown-label:hover {
cursor: auto !important;
}
/* 2. CUSTOM GOLDEN CURSOR (MAIN PAGE ONLY) */
body.page-Main_Page #vh-cursor-pointer {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 24px !important;
height: 24px !important;
pointer-events: none !important;
z-index: 99999999 !important;
transform: translate3d(-100px, -100px, 0);
will-change: transform !important;
transition: opacity 0.15s ease !important;
}
body.page-Main_Page #vh-cursor-pointer svg {
width: 100% !important;
height: 100% !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65))
drop-shadow(0 0 6px rgba(223, 173, 62, 0.75)) !important;
transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.25, 1),
filter 0.18s ease !important;
}
/* State 1: Default Golden Arrow */
body.page-Main_Page #vh-cursor-pointer .vh-cursor-arrow {
display: block !important;
}
body.page-Main_Page #vh-cursor-pointer .vh-cursor-hand {
display: none !important;
}
/* State 2: ONLY Above Links -> Golden Pointing Hand */
body.page-Main_Page.vh-cursor-link #vh-cursor-pointer .vh-cursor-arrow {
display: none !important;
}
body.page-Main_Page.vh-cursor-link #vh-cursor-pointer .vh-cursor-hand {
display: block !important;
}
body.page-Main_Page.vh-cursor-link #vh-cursor-pointer svg {
transform: scale(1.12) !important;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75))
drop-shadow(0 0 10px rgba(245, 215, 127, 0.95)) !important;
}
/* Click Compression */
body.page-Main_Page.vh-cursor-click #vh-cursor-pointer svg {
transform: scale(0.88) !important;
}
/* Touchscreens / mobile protection: restore native behavior */
@media (hover: none) or (pointer: coarse) {
html body.page-Main_Page,
html body.page-Main_Page *,
html body.page-Main_Page a,
html body.page-Main_Page button {
cursor: auto !important;
}
body.page-Main_Page #vh-cursor-pointer {
display: none !important;
}
}
/* 3. FOUNDER-ĀCĀRYA PERFECT MACRON CENTERING FIX */
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page .vh-founder-title a,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-sanctuary-sub-1 a {
font-family: 'Noto Serif', 'Cormorant Garamond', Georgia, serif !important;
font-size: 24px !important;
font-weight: 700 !important;
letter-spacing: 0.025em !important;
}
/* ==========================================================================
STEP 92: PERMANENT BOTTOM NAVIGATION BAR STYLING
- Appears on Main Page AND all regular MediaWiki pages.
- Fixed at bottom of screen, permanently visible while scrolling.
- Deep temple teal background (#19383e), delicate gold top hairline border,
warm ivory/gold links, and highlighted Donate button.
========================================================================== */
.vh-bottom-bar {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 38px !important;
background: #19383e !important;
border-top: 1.5px solid rgba(223, 173, 62, 0.45) !important;
box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.35) !important;
z-index: 99990 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
user-select: none !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.vh-bottom-bar-inner {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
max-width: 1200px !important;
width: 100% !important;
padding: 0 16px !important;
overflow-x: auto !important;
white-space: nowrap !important;
scrollbar-width: none !important; /* Firefox */
}
.vh-bottom-bar-inner::-webkit-scrollbar {
display: none !important; /* Chrome/Safari */
}
.vh-bottom-link {
color: #f5d77f !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
letter-spacing: 0.35px !important;
padding: 3px 10px !important;
border-radius: 4px !important;
transition: color 0.18s ease, background-color 0.18s ease, transform 0.15s ease !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
}
.vh-bottom-link:hover {
color: #ffffff !important;
background-color: rgba(245, 215, 127, 0.18) !important;
text-decoration: none !important;
}
.vh-bottom-donate {
background: linear-gradient(135deg, rgba(223, 173, 62, 0.3) 0%, rgba(223, 173, 62, 0.12) 100%) !important;
border: 1px solid rgba(223, 173, 62, 0.65) !important;
color: #fce8a6 !important;
padding: 2.5px 14px !important;
border-radius: 12px !important;
font-weight: 700 !important;
}
.vh-bottom-donate:hover {
background: linear-gradient(135deg, #dfad3e 0%, #b88a38 100%) !important;
color: #150b00 !important;
border-color: #dfad3e !important;
box-shadow: 0 0 10px rgba(223, 173, 62, 0.5) !important;
}
.vh-bottom-sep {
color: rgba(245, 215, 127, 0.35) !important;
font-size: 12px !important;
line-height: 1 !important;
pointer-events: none !important;
}
/* Ensure long wiki pages leave space above the permanent bottom bar */
body {
padding-bottom: 46px !important;
}
/* On Main Page with custom cursor, ensure bottom links trigger the hand cursor */
body.page-Main_Page .vh-bottom-link {
cursor: auto !important;
}
/* ==========================================================================
STEP 93:
1. ELIMINATE RIGHT-SIDE GREEN STRIP ON MAIN PAGE:
- Vector 2022 skin uses a multi-column CSS grid on .mw-page-container-inner
with .vector-column-end having background-color: #D4ECDD !important;.
- Collapse grid to 100% full width and hide right/left columns on Main Page.
- Ensure mw-page-container and mw-content-container match the warm cream background.
2. PREVENT STICKY HEADER FROM APPEARING AT THE BOTTOM OF REGULAR PAGES:
- MediaWiki places .vector-sticky-header-container after the page content.
- Enforce position: fixed !important; top: 0 !important; on sticky header container,
and completely hide it (display: none !important;) when not actively sticky-visible.
3. VANI-TEMPLE RETURN LINK IN PERMANENT BOTTOM BAR:
- Provides an immediate 1-click return to the Main Page from any regular wiki page.
========================================================================== */
/* 1. ELIMINATE RIGHT-SIDE GREEN STRIP ON MAIN PAGE */
body.page-Main_Page .vector-column-end,
body.page-Main_Page .vector-column-start,
body.page-Main_Page .vector-toc-pinned-container,
body.page-Main_Page .vector-appearance-pinned-container,
body.page-Main_Page .vector-sitenotice-container {
display: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
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 {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
background: #f6f2e9 !important;
background-color: #f6f2e9 !important;
grid-template-columns: 1fr !important;
border: none !important;
box-shadow: none !important;
}
/* 2. PREVENT STICKY HEADER FROM APPEARING AT THE BOTTOM OF REGULAR WIKI PAGES */
.vector-sticky-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
}
/* Strictly hide the sticky header container whenever it is NOT in active sticky view */
.vector-sticky-header-container:not(.vector-sticky-header-visible),
.vector-header-container.vector-sticky-header-container:not(.vector-sticky-header-visible) {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* 3. VANI-TEMPLE RETURN LINK STYLING */
.vh-bottom-link.vh-bottom-home {
color: #dfad3e !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
}
.vh-bottom-link.vh-bottom-home:hover {
color: #ffffff !important;
background-color: rgba(223, 173, 62, 0.25) !important;
}
/* ==========================================================================
STEP 95: SMOOTH TRANSITION FOR IN THE MEDIA CARD CONTENT
========================================================================== */
body.page-Main_Page .vh-card-media-item .vh-media-card-content {
transition: opacity .5s ease, transform .5s ease !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-card-content.is-changing {
opacity: 0 !important;
transform: translateY(4px) !important;
}
/* ==========================================================================
STEP 96:
1. INCREASE ROUND HERO IMAGE BY 20% (270px -> 324px) WHILE KEEPING TOP/BOTTOM GAPS
2. INCREASE QUOTED TEXT IN RIGHT ARTICLE SPOTLIGHT BY +3 LINES (7 -> 10 LINES)
========================================================================== */
/* 1. Round hero image increased by 20% to 324px */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 324px !important;
height: 324px !important;
min-width: 324px !important;
min-height: 324px !important;
max-width: 324px !important;
max-height: 324px !important;
border-radius: 50% !important;
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow: 0 12px 36px rgba(18, 63, 56, 0.40), 0 3px 10px rgba(0, 0, 0, 0.24), inset 0 2px 6px rgba(255, 255, 255, 0.75), inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* Ensure top gap from title remains clean (36px) */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-portrait-box {
margin-top: 36px !important;
margin-bottom: 0 !important;
}
/* Ensure bottom gap from round image remains clean (40px) */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-sanctuary-card .vh-card-text.vh-sanctuary-text {
margin-top: 40px !important;
margin-bottom: 0 !important;
}
/* Ensure sanctuary card container height gracefully accommodates 324px image */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page #vani-home .vh-sanctuary-card,
body.page-Main_Page .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page .vh-sanctuary-card {
min-height: 500px !important;
height: auto !important;
}
/* 2. Increase right article quoted text by +3 lines (-webkit-line-clamp: 10) */
body.page-Main_Page #vani-home .vh-card-article .vh-card-text,
body.page-Main_Page .vh-card-article .vh-card-text {
display: -webkit-box !important;
-webkit-line-clamp: 10 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
/* Allow right card to expand gracefully up to 500px to match sanctuary height */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-card-article,
body.page-Main_Page .vh-triad-grid > .vh-card-article {
max-height: 500px !important;
min-height: 275px !important;
height: auto !important;
}
/* Explicit fast and visible 1.4s crossfade for round hero photo */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-photo-stage .vh-photo,
body.page-Main_Page .vh-sanctuary-card .vh-photo-stage .vh-photo {
transition: opacity 1.4s ease-in-out !important;
}
/* ==========================================================================
STEP 97: MOBILE OPTIMIZATION (STAGE 1 - REGULAR WIKI PAGES)
1. Universal #345B63 Dark Teal top bar across all pages and viewports.
2. Desktop title banner strictly scoped to screens >= 1000px.
3. Mobile header layout (burger menu, search, icons).
4. Mobile content readability, fluid images, and responsive table scrolling.
5. Mobile bottom bar and floating Back to Top button positioning.
========================================================================== */
/* 1. UNIVERSAL #345B63 TOP BAR ACROSS ALL PAGES AND VIEWPORTS */
.vector-header-container,
.vector-header,
.mw-header,
#mw-head {
background-color: #345B63 !important;
background: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
/* 2. DESKTOP TITLE BANNER SCOPED STRICTLY TO SCREENS >= 1000px */
@media screen and (max-width: 999px) {
#vanipedia-topbar-title,
#vanipedia-topbar-title-link,
#vanipedia-topbar-center-title {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
}
/* 3. MOBILE REGULAR WIKI PAGES OPTIMIZATIONS (<= 768px) */
@media screen and (max-width: 768px) {
/* 3.1 Top Bar Header Row */
.mw-header {
padding: 0 10px !important;
gap: 8px !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
}
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* 3.2 Hamburger Site Menu Button */
.vector-header-start #vector-main-menu-dropdown {
display: flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
margin: 0 !important;
padding: 0 4px !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-icon {
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
width: 22px !important;
height: 22px !important;
}
/* 3.3 Search Bar: Fluidly fits available space between burger and user tools */
.vector-header-container #p-search,
.mw-header #p-search,
.vector-header-start #p-search {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
max-width: calc(100vw - 110px) !important;
min-width: 100px !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container #searchform,
.mw-header #searchform {
width: 100% !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container .cdx-search-input,
.vector-header-container .vector-search-box-input,
.vector-header-container .cdx-text-input {
width: 100% !important;
max-width: 100% !important;
height: 32px !important;
margin: 0 !important;
}
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
width: 100% !important;
min-width: 80px !important;
height: 32px !important;
font-size: 13.5px !important;
padding-left: 30px !important;
box-sizing: border-box !important;
border-radius: 16px !important;
background-color: #1f3e45 !important;
border: 1px solid rgba(245, 215, 127, 0.45) !important;
color: #ffffff !important;
}
.vector-header-container .cdx-text-input__input:focus,
.vector-header-container input[type="search"]:focus,
#searchInput:focus {
width: 100% !important;
background-color: #173036 !important;
border-color: #f5d77f !important;
}
/* 3.4 Mobile Vector Sidebar Navigation Drawer */
#vector-main-menu-dropdown .vector-dropdown-content,
#vector-main-menu-dropdown-content,
#vector-main-menu-unpinned-container,
#vector-main-menu-dropdown .vector-dropdown-content.is-open {
position: fixed !important;
top: 52px !important;
left: 0 !important;
width: 290px !important;
max-width: 85vw !important;
height: calc(100vh - 52px - 38px) !important;
max-height: calc(100vh - 90px) !important;
overflow-y: auto !important;
background-color: #1f3e45 !important;
border-right: 2px solid #b1873d !important;
box-shadow: 4px 0 18px rgba(0, 0, 0, 0.45) !important;
z-index: 100001 !important;
padding: 10px 0 !important;
}
#vector-main-menu-dropdown .vector-dropdown-content a,
#vector-main-menu-dropdown-content a,
#vector-main-menu-unpinned-container a {
color: #f5d77f !important;
font-size: 14.5px !important;
padding: 9px 18px !important;
display: block !important;
text-decoration: none !important;
border-left: 3px solid transparent !important;
}
#vector-main-menu-dropdown .vector-dropdown-content a:hover,
#vector-main-menu-dropdown-content a:hover,
#vector-main-menu-unpinned-container a:hover {
background-color: #345B63 !important;
color: #ffffff !important;
border-left-color: #f5d77f !important;
}
#vector-main-menu-dropdown .vector-menu-heading,
#vector-main-menu-dropdown-content .vector-menu-heading,
#vector-main-menu-unpinned-container .vector-menu-heading {
color: #fce8a6 !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
border-bottom: 1px solid rgba(245, 215, 127, 0.3) !important;
padding: 10px 18px 6px 18px !important;
margin-top: 8px !important;
}
/* 4. CONTENT VIEW ON MOBILE */
#content, .mw-body, .mw-content-container {
padding: 12px 14px !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
font-size: 15.5px !important;
line-height: 1.62 !important;
}
#firstHeading, .mw-first-heading {
font-size: 1.65em !important;
line-height: 1.25 !important;
margin-bottom: 0.4em !important;
word-wrap: break-word !important;
}
h2, .mw-parser-output h2 {
font-size: 1.3em !important;
line-height: 1.3 !important;
margin-top: 1.1em !important;
margin-bottom: 0.35em !important;
}
h3, .mw-parser-output h3 {
font-size: 1.15em !important;
line-height: 1.3 !important;
}
/* Tables horizontal scroll wrapping */
.vanitable, .wikitable, .daytable {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
margin: 12px 0 !important;
}
.timelinesummary {
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Fluid images & media embeds */
div.tright, div.tleft, div.floatright, div.floatleft {
float: none !important;
margin: 12px auto !important;
max-width: 100% !important;
text-align: center !important;
}
div.thumbinner {
max-width: 100% !important;
width: auto !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
.mw-parser-output img {
max-width: 100% !important;
height: auto !important;
}
/* 5. BOTTOM BAR & BACK TO TOP BUTTON ON MOBILE */
.vh-bottom-bar {
height: 38px !important;
}
.vh-bottom-bar-inner {
gap: 10px !important;
padding: 0 10px !important;
}
.vh-bottom-link {
font-size: 12px !important;
padding: 2px 6px !important;
}
#vanipedia-back-to-top {
bottom: 50px !important;
right: 14px !important;
width: 42px !important;
height: 42px !important;
z-index: 100000 !important;
}
#footer, .mw-footer {
padding-bottom: 54px !important;
}
}
/* ==========================================================================
STEP 105: ROBUST NON-OVERLAPPING MINERVA MOBILE HEADER & USER DROPDOWN
1. Fix Magnifying Glass & User Icon Overlap:
- Header uses strictly rigid flex items:
Burger (32px left) + 20px gap + Title (auto) + [margin-left: auto spacer] + Search (32px right) + 8px gap + User (32px far right).
- Zero possibility of overlap.
2. User Menu Dropdown:
- Placed outside header flow (fixed positioning) with full dark teal & gold styling.
3. Plain burger icon, golden-yellow (#ffd700) SVGs for all icons.
========================================================================== */
/* 1. TOP BAR CONTAINER */
body.skin-minerva .header-container,
body.skin-minerva .header-chrome {
background-color: #345B63 !important;
background: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
box-sizing: border-box !important;
}
/* 2. STRICT RIGID SINGLE-ROW FLEX LAYOUT */
body.skin-minerva .minerva-header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
height: 100% !important;
width: 100% !important;
padding: 0 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
}
/* 2.1 BURGER (FAR LEFT: 32px) */
.minerva-header .navigation-drawer.toggle-list {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.minerva-header #mw-mf-main-menu-button,
.minerva-header .toggle-list__toggle {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.minerva-header .minerva-icon--menu,
.minerva-header #mw-mf-main-menu-button .minerva-icon--menu {
background-color: #f5d77f !important;
opacity: 1 !important;
width: 24px !important;
height: 24px !important;
display: inline-block !important;
}
/* 2.2 SITE TITLE (SPACED 20px FROM BURGER) */
.minerva-header .branding-box {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
margin: 0 0 0 20px !important;
padding: 0 !important;
}
.minerva-header .branding-box a,
.minerva-header .branding-box span {
color: #f5d77f !important;
font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-decoration: none !important;
white-space: nowrap !important;
}
/* 2.3 SEARCH FORM (PUSHED TO THE FAR RIGHT: 32px) */
.minerva-header .minerva-search-form {
margin-left: auto !important; /* Absorbs ALL horizontal space between title and search */
margin-right: 8px !important;
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
/* Hide the large search box input on mobile screens */
.minerva-header .minerva-search-form .search-box {
display: none !important;
}
.minerva-header #searchIcon {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.minerva-header .minerva-icon--search,
.minerva-header #searchIcon .minerva-icon--search {
background-color: #f5d77f !important;
opacity: 1 !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
.minerva-header #searchIcon span:last-child {
display: none !important;
}
/* 2.4 USER ICON (FAR RIGHT: 32px) */
.minerva-header .minerva-user-navigation {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
.minerva-header .minerva-notifications,
.minerva-header .minerva-user-navigation ul,
.minerva-header .minerva-user-navigation li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
}
.minerva-header #ca-mytalks {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.minerva-header .minerva-icon--bellOutline,
.minerva-header #ca-mytalks .minerva-icon--bellOutline {
background-color: #f5d77f !important;
opacity: 1 !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
.minerva-header #ca-mytalks span:last-child {
display: none !important;
}
/* 3. MOBILE USER DROPDOWN MENU (POPUP AT TOP-RIGHT) */
#vanipedia-mobile-user-menu {
display: none !important;
position: fixed !important;
top: 52px !important;
right: 8px !important;
width: 175px !important;
background-color: #1f3e45 !important;
border: 1.5px solid #b1873d !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
padding: 6px 0 !important;
z-index: 999999 !important;
box-sizing: border-box !important;
flex-direction: column !important;
}
#vanipedia-mobile-user-menu.is-open {
display: flex !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-item {
color: #f5d77f !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
text-decoration: none !important;
display: block !important;
line-height: 1.2 !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-item:hover,
#vanipedia-mobile-user-menu a.vani-user-menu-item:active {
background-color: #345B63 !important;
color: #ffffff !important;
}
#vanipedia-mobile-user-menu .vani-user-menu-divider {
height: 1px !important;
background-color: rgba(177, 135, 61, 0.35) !important;
margin: 5px 0 !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-logout {
color: #fca5a5 !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-logout:hover {
background-color: rgba(239, 68, 68, 0.2) !important;
color: #ffffff !important;
}
/* 4. MINERVA NAVIGATION DRAWER (THE LEFT MENU) */
#mw-mf-page-left.navigation-drawer,
#mw-mf-page-left.menu {
background-color: #1f3e45 !important;
border-right: 2px solid #b1873d !important;
box-shadow: 4px 0 18px rgba(0, 0, 0, 0.45) !important;
}
#mw-mf-page-left a.toggle-list-item__anchor {
color: #f5d77f !important;
font-size: 14.5px !important;
}
#mw-mf-page-left a.toggle-list-item__anchor:hover {
background-color: #345B63 !important;
color: #ffffff !important;
}
#mw-mf-page-left .minerva-icon {
background-color: #ffd700 !important;
}
/* ==========================================================================
STEP 107: BULLETPROOF DESKTOP USER DROPDOWN (MATCHING image_a7f3ff.png)
1. Card background: Dark teal (#1f3e45) with gold border (#b1873d).
2. Zero white background bleed: all inner elements transparent.
3. Links: High-contrast warm gold (#f5d77f) text, white on hover (#345B63).
4. Pure clean text without clunky icons: .vector-icon hidden.
5. Divider above Log out with soft rose highlight.
========================================================================== */
/* 1. DESKTOP USER DROPDOWN CARD */
html #vector-user-links-dropdown .vector-dropdown-content,
html .vector-user-menu .vector-dropdown-content,
html body.page-Main_Page #vector-user-links-dropdown .vector-dropdown-content,
html body #p-personal.vector-menu,
html body #p-personal .vector-menu-content,
#vector-user-links-dropdown-content {
background: #1f3e45 !important;
background-color: #1f3e45 !important;
border: 1.5px solid #b1873d !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
padding: 6px 0 !important;
min-width: 175px !important;
width: 180px !important;
box-sizing: border-box !important;
}
/* 2. INNER CONTAINERS: 100% TRANSPARENT */
html #vector-user-links-dropdown .vector-dropdown-content div,
html #vector-user-links-dropdown .vector-dropdown-content ul,
html #vector-user-links-dropdown .vector-dropdown-content li,
html #vector-user-links-dropdown .vector-dropdown-content .vector-menu-content,
html #vector-user-links-dropdown .vector-dropdown-content .vector-menu-content-list,
html .vector-user-menu .vector-dropdown-content div,
html .vector-user-menu .vector-dropdown-content ul,
html .vector-user-menu .vector-dropdown-content li {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* 3. ENSURE TALK (pt-mytalk) IS VISIBLE */
html #vector-user-links-dropdown #pt-mytalk,
html .vector-user-menu #pt-mytalk {
display: block !important;
visibility: visible !important;
}
/* 4. RESTORE USER FIGURE ICON ON HEADER BUTTON (BRIGHT GOLD & VISIBLE) */
#vector-user-links-dropdown-label .vector-icon,
#vector-user-links-dropdown .vector-dropdown-label .vector-icon,
.vector-user-menu .vector-dropdown-label .vector-icon,
.vector-header-end #vector-user-links-dropdown .vector-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
color: #f5d77f !important;
fill: #f5d77f !important;
background-color: #f5d77f !important;
margin-right: 4px !important;
vertical-align: middle !important;
}
/* Inside dropdown items: keep icons compact & inline so they never cause vertical bloating */
#vector-user-links-dropdown .vector-dropdown-content .vector-icon,
.vector-user-menu .vector-dropdown-content .vector-icon {
display: inline-block !important;
width: 16px !important;
height: 16px !important;
margin: 0 8px 0 0 !important;
padding: 0 !important;
color: #f5d77f !important;
fill: #f5d77f !important;
background-color: #f5d77f !important;
vertical-align: middle !important;
}
/* 5. LINKS: HIGH-CONTRAST WARM GOLD TEXT (#f5d77f) */
html #vector-user-links-dropdown .vector-dropdown-content a,
html .vector-user-menu .vector-dropdown-content a,
html #p-personal .vector-menu-content a {
display: flex !important;
align-items: center !important;
color: #f5d77f !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
line-height: 1.2 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
text-decoration: none !important;
box-sizing: border-box !important;
width: 100% !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
html #vector-user-links-dropdown .vector-dropdown-content a span,
html .vector-user-menu .vector-dropdown-content a span,
html #p-personal .vector-menu-content a span {
color: #f5d77f !important;
font-size: 15px !important;
font-weight: 500 !important;
display: inline !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* 6. HOVER STATE: LIGHTER TEAL (#345B63) WITH BRIGHT WHITE TEXT */
html #vector-user-links-dropdown .vector-dropdown-content a:hover,
html #vector-user-links-dropdown .vector-dropdown-content a:focus,
html #vector-user-links-dropdown .vector-dropdown-content a:active,
html .vector-user-menu .vector-dropdown-content a:hover,
html .vector-user-menu .vector-dropdown-content a:focus,
html .vector-user-menu .vector-dropdown-content a:active {
background-color: #345B63 !important;
color: #ffffff !important;
text-decoration: none !important;
}
html #vector-user-links-dropdown .vector-dropdown-content a:hover span,
html .vector-user-menu .vector-dropdown-content a:hover span {
color: #ffffff !important;
}
/* 7. DIVIDER ABOVE LOGOUT */
html #vector-user-links-dropdown #pt-logout,
html .vector-user-menu #pt-logout {
border-top: 1px solid rgba(177, 135, 61, 0.35) !important;
margin-top: 6px !important;
padding-top: 4px !important;
}
html #vector-user-links-dropdown #pt-logout a,
html .vector-user-menu #pt-logout a {
color: #fca5a5 !important;
}
html #vector-user-links-dropdown #pt-logout a:hover,
html .vector-user-menu #pt-logout a:hover {
background-color: rgba(239, 68, 68, 0.25) !important;
color: #ffffff !important;
}
/* ==========================================================================
STEP 110: MOBILE STICKY TOP BAR & BOTTOM BAR FIRST LINK ("MAIN PAGE")
1. Top bar remains sticky/visible when scrolling down on mobile viewports.
2. Fix bottom bar flex centering bug: justify-content: flex-start on mobile
ensures the first link ("Main Page") is always visible and not clipped.
3. Fully reverted experimental Main Page viewport scaling & hint banners.
========================================================================== */
/* 1. STICKY TOP BAR ON MOBILE (REMAINS VISIBLE ON SCROLL) */
body.skin-minerva .header-container,
body.skin-minerva .header-chrome,
body.skin-minerva header {
position: sticky !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
}
/* 2. BOTTOM BAR: ENSURE "MAIN PAGE" IS VISIBLE AS FIRST LINK ON MOBILE */
@media screen and (max-width: 768px) {
.vh-bottom-bar-inner {
justify-content: flex-start !important;
padding: 0 14px !important;
gap: 10px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.vh-bottom-link.vh-bottom-home {
display: inline-flex !important;
flex-shrink: 0 !important;
}
}
/* ==========================================================================
ENTRY PAGE SUPPRESSION (dev.vanipedia.org / VanipediaEntry3D)
Neither top bar nor bottom bar must appear on the 3D entry page.
========================================================================== */
body.ext-vp3d-fullscreen #vh-bottom-bar,
body.ext-vp3d-fullscreen .header-container,
body.ext-vp3d-fullscreen .header-chrome,
body.ext-vp3d-fullscreen .minerva-header,
body.ext-vp3d-fullscreen .vector-header-container,
body.ext-vp3d-fullscreen #mw-head,
body.ext-vp3d-fullscreen .mw-header,
body.ext-vp3d-fullscreen #mw-navigation,
body:has(.vp-entry3d-container) #vh-bottom-bar,
body:has(.vp-entry3d-container) .header-container,
body:has(.vp-entry3d-container) .header-chrome,
body:has(.vp-entry3d-container) .minerva-header,
body:has(.vp-entry3d-container) .vector-header-container,
body:has(.vp-entry3d-wrapper) #vh-bottom-bar,
body:has(.vp-entry3d-wrapper) .header-container,
body:has(.vp-entry3d-wrapper) .header-chrome,
body:has(.vp-entry3d-wrapper) .minerva-header,
body:has(.vp-entry3d-wrapper) .vector-header-container {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================================
STEP 116: UNIFIED 3-SLOT ROTATED LANDSCAPE STAGE FOR MAIN PAGE ON MOBILE
Includes Top Bar, Main Page, and Bottom Bar in one unified landscape orientation.
========================================================================== */
#vani-mobile-stage {
position: fixed !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
overflow: hidden !important;
z-index: 999999 !important;
background-color: #f6f2e9 !important;
margin: 0 !important;
padding: 0 !important;
}
#vani-rotated-box {
position: absolute !important;
top: 0 !important;
left: 0 !important;
transform-origin: top left !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
background-color: #f6f2e9 !important;
margin: 0 !important;
padding: 0 !important;
}
#vani-rotated-box.is-auto-landscape {
transform: rotate(90deg) translate(0, -100%) !important;
}
#vani-rotated-box.is-native-landscape {
transform: none !important;
}
/* 1. TOP HEADER SLOT (Landscape orientation) */
#vani-stage-header-slot {
flex: 0 0 50px !important;
width: 100% !important;
height: 50px !important;
max-height: 50px !important;
min-height: 50px !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
z-index: 1000 !important;
overflow: visible !important;
position: relative !important;
box-sizing: border-box !important;
}
#vani-stage-header-slot .header-container,
#vani-stage-header-slot .header-chrome,
#vani-stage-header-slot .minerva-header,
#vani-stage-header-slot .vector-header-container,
#vani-stage-header-slot #mw-head {
position: static !important;
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 12px !important;
box-shadow: none !important;
border: none !important;
background-color: #345B63 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
/* 2. CONTENT SLOT (Landscape orientation, containing #vani-home) */
#vani-stage-content-slot {
flex: 1 1 auto !important;
width: 100% !important;
height: calc(100% - 50px - 36px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
position: relative !important;
background-color: #f6f2e9 !important;
}
/* Enforce rigid 1200px desktop grid on #vani-home inside mobile stage */
#vani-stage-content-slot #vani-home {
width: 1200px !important;
min-width: 1200px !important;
max-width: 1200px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 8px 16px 20px 16px !important;
margin: 0 !important;
background-color: #f6f2e9 !important;
}
/* Hero Triad in Mobile Landscape: Rigid 3-Column Horizontal Flow */
#vani-stage-content-slot .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
gap: 16px !important;
flex-wrap: nowrap !important;
height: auto !important;
min-height: 250px !important;
}
#vani-stage-content-slot .vh-triad-column-left {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
#vani-stage-content-slot .vh-card-memories,
#vani-stage-content-slot .vh-card-media-item {
flex: 0 0 auto !important;
height: auto !important;
}
#vani-stage-content-slot .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
text-align: center !important;
}
#vani-stage-content-slot .vh-photo-stage {
width: 200px !important;
height: 200px !important;
margin: 0 auto !important;
}
#vani-stage-content-slot .vh-card-text.vh-sanctuary-text {
margin-top: 10px !important;
}
#vani-stage-content-slot .vh-card-article {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
height: auto !important;
}
/* Interactive Timeline in Mobile Landscape */
#vani-stage-content-slot .vh-timeline-section {
width: 100% !important;
max-width: 100% !important;
margin: 6px 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
flex: 0 0 auto !important;
height: auto !important;
}
/* Thematic Taxonomy in Mobile Landscape: Rigid 4-Column Grid */
#vani-stage-content-slot .vh-taxonomy-section {
width: 100% !important;
transform: none !important;
margin: 6px 0 !important;
}
#vani-stage-content-slot .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
width: 100% !important;
}
#vani-stage-content-slot .vh-card-tax {
height: auto !important;
min-height: 105px !important;
}
/* 3. FOOTER SLOT (Landscape orientation, containing #vh-bottom-bar) */
#vani-stage-footer-slot {
flex: 0 0 36px !important;
width: 100% !important;
height: 36px !important;
max-height: 36px !important;
min-height: 36px !important;
background-color: #19383e !important;
border-top: 1.5px solid #b1873d !important;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
z-index: 99990 !important;
overflow: hidden !important;
position: relative !important;
box-sizing: border-box !important;
}
#vani-stage-footer-slot #vh-bottom-bar,
#vani-stage-footer-slot .vh-bottom-bar {
position: static !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
background-color: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#vani-stage-footer-slot .vh-bottom-bar-inner {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
gap: 14px !important;
padding: 0 16px !important;
}
/* Dropdown Menu inside Stage Header */
#vani-stage-header-slot #vanipedia-mobile-user-menu {
position: absolute !important;
top: 48px !important;
right: 8px !important;
z-index: 1000000 !important;
}
/* Minerva Left Navigation Drawer z-index when open */
#mw-mf-page-left.navigation-drawer {
z-index: 1000005 !important;
}
/* Robust Header Child Layout in Landscape Stage */
#vani-stage-header-slot .vector-header,
#vani-stage-header-slot .mw-header {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 12px !important;
box-sizing: border-box !important;
}
#vani-stage-header-slot .vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
flex: 1 1 auto !important;
}
#vani-stage-header-slot .vector-header-end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
flex: 0 0 auto !important;
}
/* Hide any duplicate/stray bars outside the stage when active */
body.has-vani-stage > .vector-header-container,
body.has-vani-stage > .vector-sticky-header-container,
body.has-vani-stage > #mw-head,
body.has-vani-stage > #vh-bottom-bar {
display: none !important;
}
/* ==========================================================================
STEP 119: EXACT DESKTOP SIDEBAR FORMATTING FOR MOBILE BURGER MENU
1. Cleans out Minerva default clutter (Nearby, Random, Settings, About, etc.)
2. Styles the mobile drawer (#mw-mf-page-left) to match the desktop
accordion layout (.vanipedia-sidebar-menu).
========================================================================== */
#mw-mf-page-left {
background-color: #f6f2e9 !important;
border-right: 2px solid #b1873d !important;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.45) !important;
padding: 12px 10px !important;
box-sizing: border-box !important;
width: 290px !important;
max-width: 85vw !important;
}
/* Hide all Minerva default lists completely */
#mw-mf-page-left > ul#p-navigation,
#mw-mf-page-left > ul#p-personal,
#mw-mf-page-left > ul.hlist,
#mw-mf-page-left .menu__item--nearby,
#mw-mf-page-left .menu__item--random {
display: none !important;
}
/* Mobile drawer container for desktop sidebar */
#mw-mf-page-left #vani-mobile-synced-sidebar {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* In mobile drawer, make .vanipedia-sidebar-menu take full drawer width */
#mw-mf-page-left .vanipedia-sidebar-menu {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 6px !important;
}
/* Ensure mobile drawer accordion header matches desktop */
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading {
cursor: pointer !important;
background-color: #2c4c50 !important;
border: 1px solid #1b3033 !important;
border-radius: 4px !important;
margin-bottom: 4px !important;
padding: 10px 14px !important;
font-weight: 600 !important;
font-size: 14px !important;
color: #ffffff !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu:not(.vanipedia-collapsed) .vector-menu-heading {
border-radius: 4px 4px 0 0 !important;
margin-bottom: 0 !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading:hover {
background-color: #385e63 !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading::after {
content: "▼" !important;
font-size: 0.75em !important;
color: #ffffff !important;
transition: transform 0.2s ease !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-heading::after {
transform: rotate(-90deg) !important;
}
/* Content Area inside Mobile Accordion */
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content {
background-color: #eaeff0 !important;
border: 1px solid #2c4c50 !important;
border-top: none !important;
border-radius: 0 0 4px 4px !important;
padding: 0 0 4px 0 !important;
margin-bottom: 6px !important;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
box-sizing: border-box !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-content {
display: none !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li a {
display: block !important;
padding: 9px 14px 9px 18px !important;
color: #1b3033 !important;
font-size: 14px !important;
text-decoration: none !important;
border-left: 3px solid transparent !important;
border-bottom: 1px solid rgba(44, 76, 80, 0.1) !important;
transition: all 0.15s ease !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li:last-child a {
border-bottom: none !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li a:hover {
background-color: #dbe4e6 !important;
border-left: 3px solid #2c4c50 !important;
color: #000000 !important;
}
/* 102 Languages Search box inside Mobile Drawer */
#mw-mf-page-left #sidebarLanguageSearch {
width: 100% !important;
box-sizing: border-box !important;
padding: 7px 10px !important;
font-size: 14px !important;
border: 1px solid #a2a9b1 !important;
border-radius: 3px !important;
background-color: #ffffff !important;
color: #1a1a1a !important;
margin-bottom: 4px !important;
}
/* ==========================================================================
STEP 122: STRICT POSITIONING OF "HOME" LINK/ICON (RIGHT OF SEARCH)
1. Desktop: Positioned strictly on the RIGHT of search bar via order: 10 vs order: 5.
2. Clean golden styling (#f5d77f), no underline, subtle hover highlight.
3. Mobile (both Minerva & Vector landscape): Golden Home icon (width 22px)
strictly visible next to the search icon.
========================================================================== */
/* Strict Flex Ordering: Left to Right across .vector-header-start */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.vector-header-start .vector-main-menu-landmark,
.vector-header-start #vector-main-menu-dropdown {
order: 1 !important;
}
.vector-header-start .mw-logo {
order: 2 !important;
display: none !important;
}
/* Search Bar strictly ORDER 5 */
.vector-header-start #p-search,
.vector-header-container #p-search,
.mw-header #p-search,
div#p-search {
order: 5 !important;
margin-right: 0 !important;
}
/* Home Link strictly ORDER 10 (GUARANTEES IT SITS ON THE RIGHT OF SEARCH) */
.vector-header-start #vanipedia-topbar-home-link,
.vector-header-container #vanipedia-topbar-home-link,
#vanipedia-topbar-home-link,
a.vanipedia-topbar-home {
order: 10 !important;
margin-left: 10px !important;
margin-right: 14px !important;
color: #f5d77f !important;
text-decoration: none !important;
text-decoration-line: none !important;
border: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14.5px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 5px 10px !important;
border-radius: 4px !important;
background: transparent !important;
background-color: transparent !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
flex-shrink: 0 !important;
line-height: 1 !important;
visibility: visible !important;
opacity: 1 !important;
}
a.vanipedia-topbar-home:hover,
a.vanipedia-topbar-home:active,
.vector-header-container a.vanipedia-topbar-home:hover,
.vector-header-container #vanipedia-topbar-home-link:hover,
.minerva-header a.vanipedia-topbar-home:hover,
#vani-stage-header-slot a.vanipedia-topbar-home:hover {
color: #ffffff !important;
background-color: rgba(245, 215, 127, 0.2) !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
transform: translateY(-1px) !important;
}
/* Home Icon Styling */
.vanipedia-topbar-home .vanipedia-home-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
.vanipedia-topbar-home .vanipedia-home-icon svg {
width: 18px !important;
height: 18px !important;
stroke: #f5d77f !important;
fill: none !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
transition: stroke 0.2s ease, transform 0.2s ease !important;
display: inline-block !important;
vertical-align: middle !important;
}
.vanipedia-topbar-home:hover .vanipedia-home-icon svg {
stroke: #ffffff !important;
transform: scale(1.1) !important;
}
/* Home Text Styling on Desktop */
.vanipedia-topbar-home .vanipedia-home-text {
display: inline-block !important;
line-height: 1 !important;
text-decoration: none !important;
}
/* MOBILE RESPONSIVE (Both Vector & Minerva) */
@media screen and (max-width: 900px) {
.vector-header-start #p-search,
.vector-header-container #p-search,
.mw-header #p-search {
flex: 1 1 auto !important;
max-width: calc(100vw - 160px) !important;
}
.vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
.vector-header-start #vanipedia-topbar-home-link,
.vector-header-container #vanipedia-topbar-home-link,
#vanipedia-topbar-home-link,
a.vanipedia-topbar-home {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
margin: 0 4px !important;
border-radius: 50% !important;
order: 10 !important;
}
.vanipedia-topbar-home .vanipedia-home-icon svg {
width: 20px !important;
height: 20px !important;
}
}
/* MINERVA MOBILE SKIN HEADER (Regular Articles on Mobile) */
.minerva-header .vanipedia-topbar-home,
.minerva-header #vanipedia-topbar-home-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 6px !important;
padding: 0 !important;
z-index: 1000 !important;
border-radius: 50% !important;
}
.minerva-header .vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
.minerva-header .vanipedia-topbar-home .vanipedia-home-icon svg {
width: 20px !important;
height: 20px !important;
}
/* In Rotated Landscape Stage on Main Page */
#vani-stage-header-slot .vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
#vani-stage-header-slot .vanipedia-topbar-home {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
padding: 0 !important;
margin: 0 8px !important;
width: 34px !important;
height: 34px !important;
box-sizing: border-box !important;
order: 10 !important;
}
#vani-stage-header-slot .vanipedia-topbar-home .vanipedia-home-icon svg {
width: 20px !important;
height: 20px !important;
}
#vani-stage-header-slot .vector-header-start #p-search {
order: 5 !important;
}
/* Bottom Bar Home Link: Strict no underline */
.vh-bottom-link.vh-bottom-entry,
a.vh-bottom-link {
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
}
.vh-bottom-link.vh-bottom-entry:hover,
a.vh-bottom-link:hover {
text-decoration: none !important;
text-decoration-line: none !important;
}
/* ==========================================================================
STEP 129: RESTORE COMPLETE ORIGINAL STRUCTURE (ZERO OVERLAPS, 4 TAXONOMY IN 1 ROW)
+ TOP BANNER TITLE AS PLAIN TEXT
+ WHO IS ŚRĪLA PRABHUPĀDA PERMANENT TITLE
+ OPTION A: RICH BURNISHED ANTIQUE GOLD (#966817)
+ RISE HOVER EFFECT ON ALL 9 CARD TITLES
========================================================================== */
/* 1. TOP BANNER TITLE AS PURE PLAIN TEXT */
#vanipedia-topbar-title,
span#vanipedia-topbar-title,
a#vanipedia-topbar-title {
pointer-events: none !important;
cursor: default !important;
user-select: text !important;
text-decoration: none !important;
}
#vanipedia-topbar-title:hover,
span#vanipedia-topbar-title:hover,
a#vanipedia-topbar-title:hover {
color: #f5d77f !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
cursor: default !important;
transform: translate(-50%, -50%) !important;
}
/* 2. SANCTUARY CARD TITLE SIZING & NO TEXT CHANGE */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a {
font-size: 38px !important;
line-height: 1.15 !important;
letter-spacing: 0.015em !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
white-space: nowrap !important;
}
body.page-Main_Page .vh-sanctuary-title a .vh-title-hover {
display: none !important;
}
body.page-Main_Page .vh-sanctuary-title a .vh-title-default {
opacity: 1 !important;
transform: none !important;
}
/* 3. OPTION A: RICH BURNISHED ANTIQUE GOLD ON ALL CARD TITLES */
body.page-Main_Page .vh-card-title,
body.page-Main_Page .vh-card-title a,
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a,
body.page-Main_Page .vh-card-article .vh-card-title,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title,
body.page-Main_Page .vh-random-article-title a,
body.page-Main_Page .vh-card-memories .vh-card-title,
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-media-item .vh-card-title,
body.page-Main_Page .vh-card-media-item .vh-card-title a,
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page-Main_Page .vh-media-title,
body.page-Main_Page .vh-media-title a,
body.page-Main_Page .vh-founder-title,
body.page-Main_Page .vh-founder-title a,
body.page-Main_Page #vani-home .vh-founder-title,
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a,
#vani-stage-content-slot .vh-card-title a,
#vani-stage-content-slot .vh-sanctuary-title a {
color: #966817 !important;
-webkit-text-fill-color: #966817 !important;
-webkit-text-stroke: 0 !important;
paint-order: normal !important;
text-shadow: none !important;
-webkit-filter: none !important;
filter: none !important;
display: inline-block !important;
position: relative !important;
cursor: pointer !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
color 0.2s ease,
-webkit-text-fill-color 0.2s ease !important;
}
/* 4. RISE HOVER EFFECT ON ALL 9 CARD TITLES (-3px LIFT + GOLD ILLUMINATION) */
body.page-Main_Page #vani-home .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-article .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a:hover,
body.page-Main_Page #vani-home .vh-founder-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-media-item .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-body > .vh-card-title a:hover,
body.page-Main_Page .vh-card-title a:hover,
body.page-Main_Page .vh-card-article .vh-card-title a:hover,
body.page-Main_Page .vh-sanctuary-title a:hover,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a:hover,
body.page-Main_Page .vh-founder-title a:hover,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page .vh-card-media-item .vh-card-title a:hover,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover,
#vani-stage-content-slot .vh-card-title a:hover,
#vani-stage-content-slot .vh-sanctuary-title a:hover,
#vani-stage-content-slot .vh-founder-title a:hover {
transform: translateY(-3px) !important;
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: none !important;
}
/* 5. GOLDEN FILAMENT UNDERLINE AT REST & GLIDE ON HOVER */
body.page-Main_Page .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-title a::after,
body.page-Main_Page .vh-card-article .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-article .vh-card-title a::after,
body.page-Main_Page .vh-sanctuary-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a::after,
body.page-Main_Page .vh-founder-title a::after,
body.page-Main_Page #vani-home .vh-founder-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a::after,
body.page-Main_Page .vh-card-memories .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a::after,
body.page-Main_Page .vh-card-media-item .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-media-item .vh-card-title a::after,
body.page-Main_Page .vh-media-title a::after,
body.page-Main_Page .vh-card-tax .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a::after,
body.page-Main_Page .vh-card-tax .vh-card-body > .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-body > .vh-card-title a::after,
#vani-stage-content-slot .vh-card-title a::after,
#vani-stage-content-slot .vh-sanctuary-title a::after,
#vani-stage-content-slot .vh-founder-title a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 6px rgba(181, 130, 36, 0.65) !important;
border-radius: 2px !important;
pointer-events: none !important;
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.2s ease !important;
}
body.page-Main_Page #vani-home .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-article .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a:hover::after,
body.page-Main_Page #vani-home .vh-founder-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover::after,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-media-item .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-body > .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-article .vh-card-title a:hover::after,
body.page-Main_Page .vh-sanctuary-title a:hover::after,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a:hover::after,
body.page-Main_Page .vh-founder-title a:hover::after,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-media-item .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover::after,
#vani-stage-content-slot .vh-card-title a:hover::after,
#vani-stage-content-slot .vh-sanctuary-title a:hover::after,
#vani-stage-content-slot .vh-founder-title a:hover::after {
animation: none !important;
opacity: 1 !important;
width: 90% !important;
left: 5% !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(181, 130, 36, 0.75) !important;
}
/* 6. STRICT STRUCTURAL RESTORATION: CLEAN ELEVATION & COLUMN BALANCING */
/* Introductory Articles flat title styling & hover */
body.page-Main_Page #vani-home .vh-intro-articles-title,
body.page-Main_Page #vani-home .vh-intro-articles-title a,
body.page-Main_Page .vh-intro-articles-title,
body.page-Main_Page .vh-intro-articles-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 24px !important;
font-weight: 700 !important;
color: #966817 !important;
-webkit-text-fill-color: #966817 !important;
text-shadow: none !important;
letter-spacing: 0.025em !important;
line-height: 1.2 !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 5px !important;
margin: 0 0 4px 0 !important;
cursor: pointer !important;
text-align: center !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
color 0.2s ease,
-webkit-text-fill-color 0.2s ease !important;
}
body.page-Main_Page #vani-home .vh-intro-articles-title a:hover,
body.page-Main_Page .vh-intro-articles-title a:hover {
transform: translateY(-3px) !important;
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: none !important;
}
body.page-Main_Page #vani-home .vh-intro-articles-title a::after,
body.page-Main_Page .vh-intro-articles-title a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 6px rgba(181, 130, 36, 0.65) !important;
border-radius: 2px !important;
pointer-events: none !important;
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.2s ease !important;
}
body.page-Main_Page #vani-home .vh-intro-articles-title a:hover::after,
body.page-Main_Page .vh-intro-articles-title a:hover::after {
animation: none !important;
opacity: 1 !important;
width: 90% !important;
left: 5% !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(181, 130, 36, 0.75) !important;
}
/* Specific article item headline within the spotlight card */
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-article-item-title,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-article-item-title a,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-card-title,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-card-title a,
body.page-Main_Page .vh-card-article #vh-random-article .vh-article-item-title,
body.page-Main_Page .vh-card-article #vh-random-article .vh-article-item-title a,
body.page-Main_Page .vh-card-article #vh-random-article .vh-card-title,
body.page-Main_Page .vh-card-article #vh-random-article .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
display: block !important;
margin-top: 2px !important;
margin-bottom: 4px !important;
text-align: center !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-article-item-title a:hover,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-card-title a:hover,
body.page-Main_Page .vh-card-article #vh-random-article .vh-article-item-title a:hover,
body.page-Main_Page .vh-card-article #vh-random-article .vh-card-title a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
/* Devotee Subtitle in Memories card */
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a,
body.page-Main_Page .vh-memory-devotee-subtitle,
body.page-Main_Page .vh-memory-devotee-subtitle a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 17.5px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
display: block !important;
margin-top: 2px !important;
margin-bottom: 5px !important;
text-align: center !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page .vh-memory-devotee-subtitle a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
@media screen and (min-width: 901px) {
/* Enforce 3 columns on desktop for Section 3 (Personalities, Names, Places) */
body.page-Main_Page #vani-home .vh-taxonomy-grid,
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 90px !important;
max-height: 130px !important;
}
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a,
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page-Main_Page #vani-home .vh-card-questions .vh-card-title,
body.page-Main_Page #vani-home .vh-card-questions .vh-card-title a,
body.page-Main_Page .vh-card-questions .vh-card-title,
body.page-Main_Page .vh-card-questions .vh-card-title a {
font-size: 21px !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
body.page-Main_Page #vani-home .vh-card-tax,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page #vani-home .vh-card-questions,
body.page-Main_Page .vh-card-questions {
padding: 2px 10px 4px 10px !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-tax .vh-card-text,
body.page-Main_Page .vh-card-tax .vh-card-text,
body.page-Main_Page #vani-home .vh-card-questions .vh-card-text,
body.page-Main_Page .vh-card-questions .vh-card-text {
font-size: 13px !important;
line-height: 1.35 !important;
margin-top: 2px !important;
}
/* Lift 3 bottom taxonomy cards up so they sit comfortably above the footer */
body.page-Main_Page #vani-home .vh-taxonomy-section,
body.page-Main_Page .vh-taxonomy-section {
transform: translateY(-72px) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
height: auto !important;
min-height: 95px !important;
max-height: 120px !important;
position: relative !important;
z-index: 2 !important;
}
/* Founder-Ācārya and Preeminent Śikṣā-Guru single line fitting */
body.page-Main_Page #vani-home .vh-founder-title,
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page .vh-founder-title,
body.page-Main_Page .vh-founder-title a {
font-size: 21px !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-sub-2,
body.page-Main_Page .vh-sanctuary-sub-2 {
font-size: 17.5px !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
/* SHIFT MARKED SECTION (Hero Triad + Timeline) DOWN EXACTLY 30px */
body.page-Main_Page #vani-home .vh-triad-grid,
body.page-Main_Page .vh-triad-grid {
transform: translateY(30px) !important;
height: auto !important;
min-height: 380px !important;
max-height: 420px !important;
align-items: flex-start !important;
margin-bottom: 8px !important;
}
body.page-Main_Page #vani-home .vh-timeline-section,
body.page-Main_Page .vh-timeline-section {
transform: translateY(30px) !important;
position: relative !important;
margin-top: 16px !important;
margin-bottom: 10px !important;
height: 125px !important;
min-height: 125px !important;
max-height: 125px !important;
flex: 0 0 125px !important;
}
/* Left & Right Stacked Columns: Symmetrical 340px widths */
body.page-Main_Page #vani-home .vh-triad-column-left,
body.page-Main_Page .vh-triad-column-left,
body.page-Main_Page #vani-home .vh-triad-column-right,
body.page-Main_Page .vh-triad-column-right,
body.page-Main_Page #vani-home .vh-triad-column-stacked,
body.page-Main_Page .vh-triad-column-stacked {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 14px !important;
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 0 !important;
max-height: 420px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Card padding and bounding inside both columns */
body.page-Main_Page #vani-home .vh-triad-column-stacked .vh-card,
body.page-Main_Page .vh-triad-column-stacked .vh-card,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card,
body.page-Main_Page .vh-triad-column-left .vh-card,
body.page-Main_Page #vani-home .vh-triad-column-right .vh-card,
body.page-Main_Page .vh-triad-column-right .vh-card,
body.page-Main_Page #vani-home .vh-card-article,
body.page-Main_Page #vani-home .vh-card-questions,
body.page-Main_Page #vani-home .vh-card-memories,
body.page-Main_Page #vani-home .vh-card-media-item {
flex: 0 0 auto !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 4px 10px !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
height: 135px !important;
min-height: 135px !important;
max-height: 135px !important;
}
}
/* ==========================================================================
STEP 139: DISCIPLES REMEMBER ŚRĪLA PRABHUPĀDA TWO-LINE TITLE & DEVOTEE NAME
========================================================================== */
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title,
body.page-Main_Page .vh-card-memories .vh-card-title {
margin: 0 0 2px 0 !important;
text-align: center !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-memories .vh-card-title a {
display: inline-block !important;
line-height: 1.05 !important;
text-align: center !important;
padding-bottom: 5px !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-title-line,
body.page-Main_Page .vh-card-memories .vh-title-line {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle {
margin-top: 2px !important;
margin-bottom: 2px !important;
text-align: center !important;
display: block !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
text-decoration: none !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-text {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
margin-top: 2px !important;
margin-bottom: 0 !important;
text-align: center !important;
}
/* ==========================================================================
STEP 141: STATIC TITLE ON MEMORIES ROTATION + 3-LINE WIDER LANGUAGES CARD
========================================================================== */
/* 1. DISCIPLES REMEMBER ŚRĪLA PRABHUPĀDA TITLE: 100% STATIC (NEVER ANIMATES ON ROTATION) */
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-memories .vh-card-title,
body.page-Main_Page .vh-card-memories .vh-card-title a {
opacity: 1 !important;
transform: none !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
color 0.2s ease,
-webkit-text-fill-color 0.2s ease !important;
margin: 0 0 2px 0 !important;
text-align: center !important;
padding: 0 0 5px 0 !important;
display: inline-block !important;
line-height: 1.05 !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover {
transform: translateY(-3px) !important;
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: none !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-title-line,
body.page-Main_Page .vh-card-memories .vh-title-line {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
/* Transition ONLY the disciple name subtitle during randomizer */
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle {
margin-top: 2px !important;
margin-bottom: 2px !important;
text-align: center !important;
display: block !important;
transition: opacity 0.45s ease, transform 0.45s ease !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle.is-changing,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle.is-changing {
opacity: 0 !important;
transform: translateY(3px) !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
text-decoration: none !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-text {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
margin-top: 2px !important;
margin-bottom: 0 !important;
text-align: center !important;
}
/* 2. SP IN MEDIA: FRAME FITS EXACTLY AROUND THUMBNAIL WITH ZERO SIDE GAPS */
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-card-content,
body.page-Main_Page .vh-card-media-item .vh-media-card-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: 135px !important;
margin: 0 auto 6px auto !important;
padding: 0 !important;
border-radius: 6px !important;
overflow: hidden !important;
background: transparent !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(177, 135, 61, 0.45) !important;
line-height: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb a,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb a {
display: inline-block !important;
width: auto !important;
height: auto !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb img {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: 130px !important;
max-height: 130px !important;
object-fit: contain !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
transition: transform 0.35s ease !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb:hover img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.03) !important;
}
/* 3. SECTION 3: 4 COLUMNS WITH WIDER COLUMN FOR PARTICIPATING LANGUAGES */
@media screen and (min-width: 901px) {
body.page-Main_Page #vani-home .vh-taxonomy-grid,
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr 1.35fr !important;
gap: 16px !important;
width: 100% !important;
max-width: 1220px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 90px !important;
max-height: 130px !important;
}
body.page-Main_Page #vani-home .vh-card-tax,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page #vani-home .vh-card-languages,
body.page-Main_Page .vh-card-languages {
padding: 3px 8px 5px 8px !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a,
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page-Main_Page #vani-home .vh-card-languages .vh-card-title,
body.page-Main_Page #vani-home .vh-card-languages .vh-card-title a,
body.page-Main_Page .vh-card-languages .vh-card-title,
body.page-Main_Page .vh-card-languages .vh-card-title a {
font-size: 20px !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
}
/* 4. LANGUAGES CARD: EXACTLY 3 ROWS (5 COUNTRIES PER ROW) */
body.page-Main_Page #vani-home .vh-card-languages .vh-languages-list,
body.page-Main_Page .vh-card-languages .vh-languages-list {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 3px !important;
padding: 2px 0 0 0 !important;
margin: 0 !important;
width: 100% !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-row,
body.page-Main_Page .vh-card-languages .vh-lang-row {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
white-space: nowrap !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-item,
body.page-Main_Page .vh-card-languages .vh-lang-item {
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11px !important;
line-height: 1.25 !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-item a,
body.page-Main_Page .vh-card-languages .vh-lang-item a {
color: #2c3e42 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
transition: color 0.15s ease !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-item a:hover,
body.page-Main_Page .vh-card-languages .vh-lang-item a:hover {
color: #966817 !important;
text-decoration: underline !important;
}
/* Flag thumbnail element */
.vh-flag {
display: inline-block !important;
width: 15px !important;
height: 10px !important;
margin-right: 4px !important;
vertical-align: -1px !important;
border-radius: 1.5px !important;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.45) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
flex-shrink: 0 !important;
}
/* Crisp SVG Flag Definitions */
/* ==========================================================================
STEP 147: SOCIAL ICONS IN THE MID OF THE SPACE ON THE RIGHT
========================================================================== */
.vh-bottom-bar-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
padding: 0 24px !important;
position: relative !important;
box-sizing: border-box !important;
}
.vh-bottom-bar-left-space {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.vh-bottom-nav-links {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
white-space: nowrap !important;
}
.vh-bottom-bar-right-space {
flex: 1 1 0 !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.vh-bottom-social-links {
position: static !important;
transform: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 24px !important;
}
.vh-bottom-social-item {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 24px !important;
line-height: 0 !important;
transition: transform 0.2s ease, opacity 0.2s ease !important;
text-decoration: none !important;
}
.vh-bottom-social-item:hover {
transform: scale(1.15) !important;
opacity: 0.9 !important;
}
.vh-bottom-social-item img {
display: block !important;
height: 20px !important;
width: auto !important;
max-height: 20px !important;
object-fit: contain !important;
border: none !important;
}
/* ==========================================================================
STEP 153: DISTINGUISHED VANISEVA PILL + ELEVATED BACK-TO-TOP + FLAG STYLING
========================================================================== */
/* 1. ELEVATED BACK-TO-TOP ARROW (Floats 16px clearly above the 38px bottom bar) */
#vanipedia-back-to-top {
position: fixed !important;
bottom: 54px !important;
right: 24px !important;
width: 44px !important;
height: 44px !important;
z-index: 100000 !important;
}
@media screen and (max-width: 768px) {
#vanipedia-back-to-top {
bottom: 54px !important;
right: 16px !important;
width: 40px !important;
height: 40px !important;
z-index: 100000 !important;
}
}
/* 2. REMOVE EXTRA BOX/BAR AROUND HEADER (Outer container completely borderless & transparent) */
body.page-Main_Page .vector-header-container,
.vector-header-container,
.vector-header-container.vector-sticky-header-container {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
/* 3. THE VERY EXISTING TOP BAR: Single, clean, elegant header bar */
header.mw-header,
header.vector-header,
body.page-Main_Page #mw-head,
body.page-Main_Page .vector-header-container header.mw-header {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 86px !important;
max-height: 96px !important;
padding: 10px 24px !important;
background: #345B63 !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
position: relative !important;
box-sizing: border-box !important;
}
/* 4. TOP BAR CENTER BLOCK */
.vanipedia-topbar-center-block {
position: absolute !important;
left: 50% !important;
top: 54% !important;
transform: translate(-50%, -50%) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: nowrap !important;
z-index: 10 !important;
pointer-events: auto !important;
line-height: 1 !important;
}
#vanipedia-topbar-center-block * {
position: static !important;
transform: none !important;
}
.vanipedia-topbar-main-title,
#vanipedia-topbar-title {
position: static !important;
transform: none !important;
display: block !important;
font-family: 'Cinzel', Georgia, serif !important;
font-size: 17.5px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
color: #f5d77f !important;
text-decoration: none !important;
text-decoration-line: none !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
line-height: 1.25 !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
pointer-events: none !important;
user-select: text !important;
}
/* 5. DISTINGUISHED MIDDLE LINE: VANISEVA LUMINOUS INVITATION PILL */
.vanipedia-topbar-vaniseva-title {
position: static !important;
transform: none !important;
display: block !important;
margin: 0 0 4px 0 !important;
line-height: 1.2 !important;
}
.vanipedia-topbar-vaniseva-title a {
color:#f5d77f !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12.5px !important;
font-style: normal !important;
font-weight: 500 !important;
letter-spacing: 0.35px !important;
text-decoration: none !important;
text-decoration-line: none !important;
border:0 !important;
border-bottom:0 !important;
background:none !important;
outline: none !important;
padding:0 !important;
border-radius:0 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
display: inline-block !important;
}
.vanipedia-topbar-vaniseva-title a:hover,
.vanipedia-topbar-vaniseva-title a:focus,
.vanipedia-topbar-vaniseva-title a:active {
color:#f5d77f !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-color:transparent !important;
background-color:transparent !important;
box-shadow:none !important;
}
/* 6. SISTER PROJECTS (Line 3) */
.vanipedia-topbar-sister-links {
position: static !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.vanipedia-topbar-sister-link {
color: #f5d77f !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.4px !important;
text-decoration: none !important;
text-decoration-line: none !important;
border: none !important;
border-bottom: none !important;
outline: none !important;
padding: 1px 6px !important;
border-radius: 3px !important;
transition: all 0.18s ease !important;
display: inline-flex !important;
align-items: center !important;
cursor: pointer !important;
}
.vanipedia-topbar-sister-link:hover,
.vanipedia-topbar-sister-link:focus,
.vanipedia-topbar-sister-link:active {
color: #ffffff !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
background-color: rgba(245, 215, 127, 0.18) !important;
}
.vanipedia-topbar-sister-sep {
color: rgba(245, 215, 127, 0.4) !important;
font-size: 10px !important;
line-height: 1 !important;
user-select: none !important;
}
/* 7. PARTICIPATING LANGUAGES FLAGS STYLING */
.vh-flag {
display: inline-block !important;
width: 15px !important;
height: 10px !important;
margin-right: 5px !important;
vertical-align: -1px !important;
border-radius: 1.5px !important;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.45) !important;
flex-shrink: 0 !important;
overflow: hidden !important;
}
.vh-flag svg {
width: 100% !important;
height: 100% !important;
display: block !important;
}
/* 8. MINERVA MOBILE SKIN (Phone Header) */
body.skin-minerva .minerva-header {
flex-wrap: nowrap !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 10px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
}
/* 8.1 Burger Navigation Drawer Button */
.minerva-header .navigation-drawer.toggle-list,
.minerva-header #mw-mf-main-menu-button,
.minerva-header .toggle-list__toggle {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
}
.minerva-header .minerva-icon--menu,
.minerva-header #mw-mf-main-menu-button .minerva-icon--menu {
background-color: #f5d77f !important;
display: inline-block !important;
width: 24px !important;
height: 24px !important;
}
/* 8.2 Branding Box Title (Pure CSS Content Injection - 100% JS-Independent) */
body.skin-minerva .minerva-header .branding-box,
.minerva-header .branding-box {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
flex: 1 1 auto !important;
margin: 0 0 0 14px !important;
padding: 0 !important;
min-width: 0 !important;
overflow: visible !important;
}
body.skin-minerva .minerva-header .branding-box a,
.minerva-header .branding-box a {
display: inline-flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
text-decoration: none !important;
color: #f5d77f !important;
}
body.skin-minerva .minerva-header .branding-box a::before,
.minerva-header .branding-box a::before {
content: "Vanipedia" !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
color: #f5d77f !important;
font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.skin-minerva .minerva-header .branding-box a > span,
.minerva-header .branding-box a > span,
body.skin-minerva .minerva-header .branding-box a > img,
.minerva-header .branding-box a > img {
display: none !important;
}
/* 8.3 Home Link in Minerva */
.minerva-header a.vanipedia-topbar-home {
flex: 0 0 28px !important;
width: 28px !important;
height: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 4px !important;
padding: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #f5d77f !important;
}
/* 8.4 Search Button in Minerva */
.minerva-header .minerva-search-form {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
.minerva-header #searchIcon {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
}
.minerva-header .minerva-icon--search,
.minerva-header #searchIcon .minerva-icon--search {
background-color: #f5d77f !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
}
/* 8.5 User Navigation in Minerva */
.minerva-header .minerva-user-navigation {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
.minerva-header #ca-mytalks {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
}
.minerva-header .minerva-icon--bellOutline,
.minerva-header #ca-mytalks .minerva-icon--bellOutline {
background-color: #f5d77f !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
}
/* STRICTLY HIDE center block and extra lines on mobile */
body.skin-minerva .vanipedia-topbar-center-block,
body.skin-minerva #vanipedia-topbar-center-block,
body.skin-minerva #vanipedia-topbar-center-block-mobile,
body.skin-minerva .vanipedia-topbar-main-title,
body.skin-minerva .vanipedia-topbar-vaniseva-title,
body.skin-minerva .vanipedia-topbar-sister-links,
body.skin-minerva .vanipedia-topbar-sister-link,
body.skin-minerva .vanipedia-topbar-sister-sep {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Bottom bar mobile styling (from STEP 165) */
body.skin-minerva .vh-bottom-social-links,
body.skin-minerva .vh-bottom-bar-right-space {
display: none !important;
width: 0 !important;
}
body.skin-minerva .vh-bottom-bar-left-space {
display: none !important;
}
body.skin-minerva .vh-bottom-bar-inner {
justify-content: center !important;
padding: 0 10px !important;
}
body.skin-minerva .vh-bottom-nav-links {
width: 100% !important;
justify-content: center !important;
gap: 8px !important;
font-size: 11px !important;
}
/* 9. RESPONSIVE BREAKPOINTS (Desktop >= 1000px Intact; Mobile < 1000px Full Controls) */
@media screen and (max-width: 1200px) and (min-width: 1000px) {
.vanipedia-topbar-main-title {
font-size: 16px !important;
letter-spacing: 1.5px !important;
}
.vanipedia-topbar-vaniseva-title a {
font-size: 11.5px !important;
padding:0 !important;
}
.vanipedia-topbar-sister-link {
font-size: 11.5px !important;
}
}
@media screen and (max-width: 999px) {
/* Single Row Header on Mobile Viewports */
header.mw-header,
header.vector-header,
.vector-header-container .mw-header {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 10px !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
}
/* Top Row Left Section: Burger + Search + Home in single row */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
flex: 1 1 auto !important;
min-width: 0 !important;
gap: 6px !important;
}
/* 1. FORCE BURGER MENU TO DISPLAY VISIBLE ON MOBILE */
.vector-header-start #vector-main-menu-dropdown,
#vector-main-menu-dropdown {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
cursor: pointer !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 4px !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label,
.vector-header-start #vector-main-menu-dropdown .vector-main-menu-dropdown-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
padding: 4px !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
width: 22px !important;
height: 22px !important;
}
/* 2. SEARCH INPUT WITH GUARANTEED VISIBLE MAGNIFYING GLASS */
.vector-header-container #p-search,
.mw-header #p-search,
.vector-header-start #p-search {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
min-width: 60px !important;
max-width: calc(100vw - 140px) !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container .cdx-search-input,
.vector-header-container .vector-search-box-input,
.vector-header-container .cdx-text-input,
.vector-header-start .cdx-text-input {
width: 100% !important;
max-width: 100% !important;
height: 32px !important;
margin: 0 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
}
.vector-header-container .cdx-text-input__icon,
.vector-header-container .cdx-text-input__start-icon,
.vector-header-start .cdx-text-input__icon,
.vector-header-start .cdx-text-input__start-icon,
#p-search .cdx-text-input__icon,
#p-search .cdx-text-input__start-icon {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
left: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
z-index: 5 !important;
pointer-events: none !important;
}
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
width: 100% !important;
min-width: 60px !important;
height: 32px !important;
font-size: 13px !important;
padding-left: 32px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
border-radius: 16px !important;
background-color: #1f3e45 !important;
border: 1px solid rgba(245, 215, 127, 0.45) !important;
color: #ffffff !important;
}
/* Compact Home Icon */
.vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
.vector-header-start #vanipedia-topbar-home-link,
#vanipedia-topbar-home-link,
a.vanipedia-topbar-home {
margin: 0 2px !important;
padding: 3px 5px !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
/* 3. USER ICON GUARANTEED ON FAR RIGHT */
.vector-header-end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-end .vector-user-links,
.vector-header-end .vector-user-links-wide,
.vector-header-end .vector-user-links-main {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.vector-header-end #p-vector-user-menu-userpage {
display: none !important;
}
.vector-header-end #p-vector-user-menu-overflow,
.vector-header-end #vector-user-links-dropdown,
.vector-header-end .vector-user-menu-overflow {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-end #vector-user-links-dropdown .vector-dropdown-label,
.vector-header-end .vector-user-menu-overflow .vector-dropdown-label {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
}
.vector-header-end #vector-user-links-dropdown .vector-icon,
.vector-header-end .vector-user-menu-overflow .vector-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
}
.vector-header-end .vector-dropdown-label-text {
display: none !important;
}
/* STRICTLY HIDE center block and extra lines on mobile viewports (< 1000px) */
.vanipedia-topbar-center-block,
#vanipedia-topbar-center-block,
#vanipedia-topbar-center-block-mobile,
.vanipedia-topbar-main-title,
#vanipedia-topbar-title,
#vanipedia-topbar-title-mobile,
#vanipedia-topbar-title-link,
#vanipedia-topbar-center-title,
.vanipedia-topbar-vaniseva-title,
.vanipedia-topbar-sister-links,
.vanipedia-topbar-sister-link,
.vanipedia-topbar-sister-sep {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Bottom bar social links hidden on mobile (from STEP 165) */
.vh-bottom-social-links,
.vh-bottom-bar-right-space {
display: none !important;
width: 0 !important;
flex: 0 0 0 !important;
visibility: hidden !important;
}
.vh-bottom-bar-left-space {
display: none !important;
width: 0 !important;
flex: 0 0 0 !important;
}
.vh-bottom-bar-inner {
justify-content: center !important;
padding: 0 10px !important;
}
.vh-bottom-nav-links {
width: 100% !important;
justify-content: center !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
gap: 8px !important;
font-size: 11px !important;
}
}
/* ==========================================================================
STEP 173: RESTORE WORKING STEP 117 COMPACT STAGE PROPORTIONS (ZERO-CROP)
Overrides all desktop-specific shifts (min-height: 380px, translateY: 30px,
translateY: -72px, 324px photo) inside the mobile rotated landscape stage.
========================================================================== */
#vani-mobile-stage #vani-rotated-box #vani-stage-content-slot #vani-home,
body.page-Main_Page #vani-stage-content-slot #vani-home {
width: 1200px !important;
min-width: 1200px !important;
max-width: 1200px !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 8px !important;
padding: 4px 16px 12px 16px !important;
margin: 0 !important;
background-color: #f6f2e9 !important;
overflow: visible !important;
}
#vani-stage-content-slot #vani-home .vh-triad-grid,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
gap: 16px !important;
flex-wrap: nowrap !important;
height: auto !important;
min-height: 250px !important;
max-height: 270px !important;
transform: none !important;
margin: 0 0 6px 0 !important;
}
#vani-stage-content-slot #vani-home .vh-photo-stage,
#vani-stage-content-slot #vani-home .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-photo-stage,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-sanctuary-portrait-box .vh-photo-stage {
width: 200px !important;
height: 200px !important;
min-width: 200px !important;
min-height: 200px !important;
max-width: 200px !important;
max-height: 200px !important;
margin: 0 auto !important;
border-radius: 50% !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
box-shadow: 0 8px 24px rgba(18, 63, 56, 0.35), 0 2px 6px rgba(0, 0, 0, 0.22) !important;
overflow: hidden !important;
position: relative !important;
}
#vani-stage-content-slot #vani-home .vh-sanctuary-card,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
text-align: center !important;
margin: 0 !important;
height: auto !important;
min-height: auto !important;
max-height: 270px !important;
}
#vani-stage-content-slot #vani-home .vh-card-text.vh-sanctuary-text,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-text.vh-sanctuary-text {
margin-top: 8px !important;
margin-bottom: 0 !important;
}
#vani-stage-content-slot #vani-home .vh-triad-column-left,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-triad-column-left,
#vani-stage-content-slot #vani-home .vh-card-article,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-article {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
height: auto !important;
min-height: auto !important;
max-height: 270px !important;
}
#vani-stage-content-slot #vani-home .vh-card-memories,
#vani-stage-content-slot #vani-home .vh-card-media-item {
flex: 0 0 auto !important;
height: auto !important;
}
#vani-stage-content-slot #vani-home .vh-card-media-item .vh-media-large-thumb {
height: 110px !important;
min-height: 110px !important;
}
#vani-stage-content-slot #vani-home .vh-timeline-section,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-timeline-section {
transform: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 4px 0 !important;
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
flex: 0 0 80px !important;
position: relative !important;
left: auto !important;
right: auto !important;
}
#vani-stage-content-slot #vani-home .vh-timeline-track,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-timeline-track {
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
}
#vani-stage-content-slot #vani-home .vh-timeline-item,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-timeline-item {
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
}
#vani-stage-content-slot #vani-home .vh-taxonomy-section,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-taxonomy-section {
transform: none !important;
width: 100% !important;
margin: 4px 0 !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
flex: 0 0 auto !important;
}
#vani-stage-content-slot #vani-home .vh-taxonomy-grid,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
width: 100% !important;
height: auto !important;
}
#vani-stage-content-slot #vani-home .vh-card-tax,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-tax,
#vani-stage-content-slot #vani-home .vh-card-languages,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-languages {
height: auto !important;
min-height: 95px !important;
max-height: 110px !important;
padding: 6px 10px !important;
}
#vani-stage-header-slot .vanipedia-stage-title-link,
#vani-stage-header-slot .vanipedia-topbar-title-link,
#vani-stage-header-slot .vanipedia-topbar-main-title,
#vani-stage-header-slot .branding-box a {
display: inline-flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
color: #f5d77f !important;
text-decoration: none !important;
letter-spacing: 0.8px !important;
line-height: 1 !important;
margin: 0 10px !important;
cursor: pointer !important;
}

/* V174 — Vanipedia main page: static, naturally scrolling, and responsive. */
body.page-Main_Page {
background:#faf7ef !important;
overflow-x:hidden !important;
}
body.page-Main_Page #vani-home.vp-static-home {
--vp-paper:#faf7ef;
--vp-card:#fffdf8;
--vp-ink:#263a39;
--vp-brand:#345b63;
--vp-accent:#b1873d;
--vp-line:#ded7c6;
box-sizing:border-box !important;
display:block !important;
position:relative !important;
width:100% !important;
min-width:0 !important;
max-width:1240px !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 auto !important;
padding:clamp(18px,3vw,38px) !important;
overflow:visible !important;
color:var(--vp-ink) !important;
background:var(--vp-paper) !important;
font:400 17px/1.6 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home,
body.page-Main_Page #vani-home.vp-static-home * {
box-sizing:border-box !important;
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
body.page-Main_Page #vani-home.vp-static-home a {
color:var(--vp-brand) !important;
text-decoration:underline !important;
text-decoration-color:#aab3a8 !important;
text-underline-offset:3px !important;
background:none !important;
box-shadow:none !important;
}
body.page-Main_Page #vani-home.vp-static-home a:hover {
color:var(--vp-accent) !important;
text-decoration-thickness:2px !important;
}
body.page-Main_Page #vani-home.vp-static-home a:focus-visible {
outline:3px solid var(--vp-brand) !important;
outline-offset:3px !important;
}
body.page-Main_Page #vani-home.vp-static-home h1,
body.page-Main_Page #vani-home.vp-static-home h2,
body.page-Main_Page #vani-home.vp-static-home h3,
body.page-Main_Page #vani-home.vp-static-home p {
margin-top:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home h1 {
margin:0 0 10px !important;
color:var(--vp-brand) !important;
font:600 clamp(29px,4vw,40px)/1.2 Georgia,"Noto Serif",serif !important;
text-align:center !important;
}
body.page-Main_Page #vani-home.vp-static-home h2 {
margin:0 0 14px !important;
padding:0 0 9px !important;
border:0 !important;
border-bottom:1px solid var(--vp-line) !important;
color:var(--vp-brand) !important;
font:600 22px/1.3 Georgia,"Noto Serif",serif !important;
text-align:left !important;
}
body.page-Main_Page #vani-home.vp-static-home h3 {
margin:0 0 7px !important;
color:var(--vp-ink) !important;
font:600 18px/1.4 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home p { margin-bottom:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
display:grid !important;
grid-template-columns:220px minmax(0,1fr) !important;
align-items:center !important;
gap:clamp(24px,5vw,64px) !important;
max-width:1000px !important;
margin:0 auto 32px !important;
padding:8px 0 28px !important;
border-bottom:1px solid var(--vp-line) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait {
width:220px !important;
height:220px !important;
max-width:100% !important;
margin:0 auto !important;
overflow:hidden !important;
border:3px solid var(--vp-brand) !important;
border-radius:50% !important;
background:#f0eee3 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait p,
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait a {
display:block !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait img {
display:block !important;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:cover !important;
object-position:center 35% !important;
border:0 !important;
box-shadow:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy {
min-width:0 !important;
text-align:center !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role {
margin:0 auto 4px !important;
color:var(--vp-accent) !important;
font-size:clamp(19px,2.2vw,25px) !important;
font-weight:600 !important;
line-height:1.35 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization {
color:var(--vp-ink) !important;
font-size:17px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-who { margin-top:12px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-feature-grid {
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:22px !important;
margin:0 0 30px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-card {
min-width:0 !important;
padding:20px !important;
border:1px solid var(--vp-line) !important;
border-radius:6px !important;
background:var(--vp-card) !important;
color:var(--vp-ink) !important;
box-shadow:0 2px 9px rgba(38,58,57,.045) !important;
transform:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-card:hover {
transform:none !important;
box-shadow:0 2px 9px rgba(38,58,57,.045) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-card h3 { margin-bottom:8px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-card blockquote {
margin:4px 0 0 !important;
padding:4px 0 4px 16px !important;
border-left:3px solid var(--vp-accent) !important;
color:var(--vp-ink) !important;
font:400 17px/1.6 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-feature {
display:grid !important;
grid-template-columns:minmax(120px,190px) minmax(0,1fr) !important;
align-items:center !important;
gap:16px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-image,
body.page-Main_Page #vani-home.vp-static-home .vp-media-image p,
body.page-Main_Page #vani-home.vp-static-home .vp-media-image a {
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-image img {
display:block !important;
width:100% !important;
height:auto !important;
max-width:100% !important;
border-radius:3px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-outlet {
margin-bottom:5px !important;
color:#706b62 !important;
font-size:14px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-headline { font-size:17px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-section {
margin:0 0 30px !important;
padding:20px 0 22px !important;
border-block:1px solid var(--vp-line) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-intro { margin:-5px 0 12px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-years {
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(76px,1fr)) !important;
gap:6px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-years a {
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:42px !important;
padding:6px 8px !important;
border:1px solid var(--vp-line) !important;
border-radius:4px !important;
background:var(--vp-card) !important;
color:var(--vp-brand) !important;
text-align:center !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-years a:hover {
border-color:var(--vp-brand) !important;
background:#f1f3ee !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-section { margin:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid {
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:18px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-card { padding:18px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-languages-card { grid-column:span 1 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-languages-list {
display:flex !important;
flex-wrap:wrap !important;
gap:8px 12px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-lang-item {
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
min-height:32px !important;
white-space:nowrap !important;
}
body.page-Main_Page #vani-home.vp-static-home .vh-flag {
display:inline-block !important;
flex:0 0 22px !important;
width:22px !important;
height:15px !important;
vertical-align:middle !important;
}
/* Restore ordinary page flow and neutralize any legacy rotated-stage wrapper. */
#vani-mobile-stage, #vani-rotated-box {
position:static !important;
inset:auto !important;
width:auto !important;
height:auto !important;
min-width:0 !important;
min-height:0 !important;
max-width:none !important;
max-height:none !important;
overflow:visible !important;
transform:none !important;
rotate:none !important;
}
#vani-stage-header-slot, #vani-stage-content-slot, #vani-stage-footer-slot { display:contents !important; }
@media (max-width:950px) {
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:700px) {
body.page-Main_Page #vani-home.vp-static-home { padding:20px 16px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
grid-template-columns:minmax(0,1fr) !important;
gap:16px !important;
margin-bottom:24px !important;
padding-bottom:22px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait { width:160px !important; height:160px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-feature-grid { grid-template-columns:minmax(0,1fr) !important; gap:16px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid { grid-template-columns:minmax(0,1fr) !important; gap:14px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-card { padding:17px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-feature { grid-template-columns:minmax(100px,34%) minmax(0,1fr) !important; gap:12px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-section { margin-bottom:24px !important; }
}
@media (max-width:380px) {
body.page-Main_Page #vani-home.vp-static-home .vp-media-feature { grid-template-columns:minmax(0,1fr) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-image { max-width:260px !important; }
}
@media (prefers-reduced-motion:reduce) {
body.page-Main_Page #vani-home.vp-static-home *,
body.page-Main_Page #vani-home.vp-static-home *::before,
body.page-Main_Page #vani-home.vp-static-home *::after {
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
}

/* V175: natural document scrolling, Vanisource-style hero, Vanipedia colors. */
html,
body.page-Main_Page {
height:auto !important;
min-height:100% !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
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-content-text,
body.page-Main_Page .mw-parser-output {
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
body.page-Main_Page #vani-home.vp-static-home {
--vp-brand:#345B63;
--vp-accent:#f5d77f;
--vp-ink:#263a3d;
--vp-line:#d8d1c3;
--vp-card:#fffdf8;
position:relative !important;
display:block !important;
width:min(100%, 1200px) !important;
min-width:0 !important;
max-width:1200px !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 auto !important;
padding:26px clamp(16px,3vw,34px) 100px !important;
overflow:visible !important;
background:#faf7ef !important;
}
/* The site-wide footer remains fixed; this page has room to scroll past it. */
body.page-Main_Page #vani-home.vp-static-home::after {
content:"";
display:block;
height:0;
clear:both;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
display:grid !important;
grid-template-columns:minmax(170px,210px) minmax(0,1fr) !important;
align-items:center !important;
gap:clamp(24px,4vw,44px) !important;
width:100% !important;
max-width:880px !important;
min-height:0 !important;
margin:0 auto 30px !important;
padding:22px 26px !important;
border:1px solid #345B63 !important;
border-left:5px solid #f5d77f !important;
border-radius:8px !important;
background:#345B63 !important;
color:#fff8e4 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait {
box-sizing:border-box !important;
width:min(100%,210px) !important;
height:auto !important;
aspect-ratio:445 / 542 !important;
margin:0 auto !important;
overflow:hidden !important;
border:2px solid #f5d77f !important;
border-radius:6px !important;
background:#faf7ef !important;
box-shadow:0 5px 18px rgba(18,35,37,.3) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait p,
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait a {
display:block !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait img {
display:block !important;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:cover !important;
object-position:center !important;
border:0 !important;
border-radius:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy,
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy h1 {
min-width:0 !important;
text-align:center !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy h1 {
margin:0 0 9px !important;
color:#f5d77f !important;
font:600 clamp(32px,3vw,42px)/1.15 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role {
margin:0 0 7px !important;
color:#fff8e4 !important;
font:600 clamp(19px,1.7vw,22px)/1.3 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role a,
body.page-Main_Page #vani-home.vp-static-home .vp-home-who a {
color:#f5d77f !important;
text-decoration:underline !important;
text-underline-offset:4px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role a:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-home-who a:hover { color:#fff !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization {
margin:0 !important;
color:#fff8e4 !important;
font:500 clamp(17px,1.5vw,20px)/1.4 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-who { margin-top:10px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-card,
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-section,
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-section,
body.page-Main_Page #vani-home.vp-static-home .vp-feature-grid,
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid {
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-quote {
margin:4px 0 0 !important;
padding:4px 0 4px 16px !important;
border-left:3px solid #f5d77f !important;
color:var(--vp-ink) !important;
font:400 17px/1.6 Georgia,"Noto Serif",serif !important;
}
/* Remove the old decorative cursor and restore the operating system pointer. */
html body.page-Main_Page,
html body.page-Main_Page * {
cursor:auto !important;
}
html body.page-Main_Page a[href],
html body.page-Main_Page button,
html body.page-Main_Page [role="button"],
html body.page-Main_Page .cdx-button {
cursor:pointer !important;
}
html body.page-Main_Page #vh-cursor-pointer,
html body.page-Main_Page #vh-kill-windows-cursor {
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
@media (max-width:700px) {
body.page-Main_Page #vani-home.vp-static-home { padding:18px 14px 96px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
grid-template-columns:minmax(0,1fr) !important;
gap:14px !important;
max-width:460px !important;
margin-bottom:24px !important;
padding:17px 17px 19px !important;
border-left-width:4px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait { width:min(100%,170px) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-role { font-size:17px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization { font-size:17px !important; }
}

/* V176: native mouse cursor; main page language links are the remaining taxonomy feature. */
body.page-Main_Page #vani-home.vp-static-home .vp-language-section {
margin:0 !important;
padding:0 0 32px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-languages-card {
width:100% !important;
max-width:none !important;
grid-column:auto !important;
}

/* V179: native Windows pointer and viewport-contained portal rollouts. */
html body.page-Main_Page #vani-home.vp-static-home,
html body.page-Main_Page #vani-home.vp-static-home * {
cursor:default !important;
}
html body.page-Main_Page #vani-home.vp-static-home a[href],
html body.page-Main_Page #vani-home.vp-static-home a[href] *,
html body.page-Main_Page #vani-home.vp-static-home button,
html body.page-Main_Page #vani-home.vp-static-home [role="button"],
html body.page-Main_Page #vani-home.vp-static-home [role="button"] * {
cursor:pointer !important;
}
html body.page-Main_Page #vh-cursor-pointer,
html body.page-Main_Page #vh-kill-windows-cursor {
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-grid {
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
align-items:start !important;
gap:24px 18px !important;
width:100% !important;
margin:0 auto 28px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-secondary-grid {
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
max-width:640px !important;
margin-left:auto !important;
margin-right:auto !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card {
position:relative !important;
z-index:1 !important;
min-width:0 !important;
overflow:visible !important;
border:1px solid #d8d1c3 !important;
border-radius:7px !important;
background:#fffdf8 !important;
box-shadow:0 2px 9px rgba(38,58,57,.07) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-hover-open,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-open {
z-index:100 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image p,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image a {
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image {
height:168px !important;
overflow:hidden !important;
border-radius:6px 6px 0 0 !important;
background:#e9e4d8 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image img {
display:block !important;
width:100% !important;
height:168px !important;
max-width:none !important;
object-fit:cover !important;
object-position:center 36% !important;
border:0 !important;
border-radius:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy {
min-height:145px !important;
padding:14px 15px 13px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy h2 {
min-height:50px !important;
margin:0 0 7px !important;
padding:0 0 7px !important;
border-bottom:1px solid #ded7c6 !important;
color:#345B63 !important;
font:700 18px/1.28 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy h2 a {
color:#345B63 !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy p {
min-height:44px !important;
margin:0 0 8px !important;
color:#354444 !important;
font:400 14px/1.45 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-toggle {
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
min-height:30px !important;
padding:4px 9px !important;
border:1px solid #d8d1c3 !important;
border-radius:4px !important;
background:#f6f2e9 !important;
color:#345B63 !important;
font:600 13px/1.3 Arial,Helvetica,sans-serif !important;
cursor:pointer !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-toggle:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-toggle:focus-visible {
border-color:#b1873d !important;
outline:2px solid #b1873d !important;
outline-offset:2px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-panel {
display:none !important;
position:fixed !important;
top:var(--vp-panel-top, 20px) !important;
left:var(--vp-panel-left, 12px) !important;
right:auto !important;
bottom:auto !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
width:var(--vp-panel-width, 290px) !important;
max-width:calc(100vw - 24px) !important;
max-height:min(380px,calc(100vh - 100px)) !important;
overflow:auto !important;
overscroll-behavior:contain !important;
padding:11px 12px 12px !important;
border:1px solid #d8d1c3 !important;
border-top:3px solid #b1873d !important;
border-radius:7px !important;
background:#fffdf8 !important;
box-shadow:0 10px 22px rgba(38,58,57,.22) !important;
text-align:left !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-hover-open > .vp-rollout-panel,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-open > .vp-rollout-panel {
display:block !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-heading {
display:block !important;
margin:0 0 7px !important;
color:#345B63 !important;
font:700 14px/1.35 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options {
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
gap:2px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options > span { display:block !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options a {
display:block !important;
min-height:34px !important;
padding:7px 8px !important;
border-radius:4px !important;
color:#345B63 !important;
font:500 14px/1.4 Georgia,"Noto Serif",serif !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options a:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options a:focus-visible {
background:#f2eee4 !important;
color:#805b16 !important;
text-decoration:underline !important;
outline:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-year-options { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-year-options a { text-align:center !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-language-options { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-language-options a { display:flex !important; align-items:center !important; gap:8px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-all { display:block !important; margin-top:7px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-all a {
display:block !important;
padding:7px 8px !important;
border-top:1px solid #ded7c6 !important;
color:#345B63 !important;
font:600 13px/1.35 Arial,Helvetica,sans-serif !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-all a:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-media-all a:focus-visible { text-decoration:underline !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-article-all { display:block !important; margin:0 0 10px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-article-all a {
display:block !important;
padding:8px 10px !important;
border-radius:4px !important;
background:#f2eee4 !important;
color:#345B63 !important;
font:700 14px/1.35 Arial,Helvetica,sans-serif !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-categories-heading {
padding-top:8px !important;
border-top:1px solid #ded7c6 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-articles-panel {
width:min(720px,calc(100vw - 24px)) !important;
--vp-panel-width:720px;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-options {
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:1px 5px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-options a {
min-height:0 !important;
padding:5px 6px !important;
font-size:12px !important;
line-height:1.25 !important;
}
@media (max-width:950px) {
body.page-Main_Page #vani-home.vp-static-home .vp-primary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-secondary-grid { max-width:100% !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-article-options { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-articles-panel { width:min(620px,calc(100vw - 24px)) !important; --vp-panel-width:620px; }
}
@media (max-width:700px) {
body.page-Main_Page #vani-home.vp-static-home .vp-primary-grid,
body.page-Main_Page #vani-home.vp-static-home .vp-secondary-grid {
grid-template-columns:minmax(0,1fr) !important;
gap:16px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image img { height:210px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy { min-height:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy h2,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy p { min-height:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-panel {
position:static !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
width:auto !important;
max-width:none !important;
max-height:none !important;
margin:0 !important;
border-top:1px solid #d8d1c3 !important;
border-left:3px solid #b1873d !important;
border-radius:0 0 7px 7px !important;
box-shadow:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-options { grid-template-columns:minmax(0,1fr) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-articles-panel { width:auto !important; --vp-panel-width:auto; }
}

/* V181: restore the native Windows pointing hand on sidebar menu targets.
Earlier Main Page cursor rules forced .vector-menu links to cursor:auto. */
html body.page-Main_Page #mw-panel .vector-menu a[href],
html body.page-Main_Page #mw-panel .vector-menu a[href] *,
html body.page-Main_Page #mw-mf-page-left .vector-menu a[href],
html body.page-Main_Page #mw-mf-page-left .vector-menu a[href] *,
html body.page-Main_Page #vector-main-menu .vector-menu a[href],
html body.page-Main_Page #vector-main-menu .vector-menu a[href] *,
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-content li a[href],
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-content li a[href] *,
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-heading,
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-heading * {
cursor:pointer !important;
}

/* V183: restore the pointing-hand cursor on every actionable top and bottom bar item.
Older Main Page rules set .vector-dropdown-label and .vh-bottom-link to cursor:auto. */
html body .vector-header-container a[href],
html body .vector-header-container a[href] *,
html body header.vector-header a[href],
html body header.vector-header a[href] *,
html body header.mw-header a[href],
html body header.mw-header a[href] *,
html body #mw-head a[href],
html body #mw-head a[href] *,
html body .minerva-header a[href],
html body .minerva-header a[href] *,
html body #vh-bottom-bar a[href],
html body #vh-bottom-bar a[href] *,
html body .vh-bottom-bar a[href],
html body .vh-bottom-bar a[href] *,
html body .vector-header-container button,
html body .vector-header-container button *,
html body .vector-header-container [role="button"],
html body .vector-header-container [role="button"] *,
html body header.vector-header .vector-dropdown-label,
html body header.vector-header .vector-dropdown-label *,
html body .vector-header-container .vector-dropdown-label,
html body .vector-header-container .vector-dropdown-label *,
html body .minerva-header button,
html body .minerva-header button *,
html body .minerva-header [role="button"],
html body .minerva-header [role="button"] *,
html body #vh-bottom-bar button,
html body #vh-bottom-bar button *,
html body #vh-bottom-bar [role="button"],
html body #vh-bottom-bar [role="button"] *,
html body #vh-bottom-bar .vh-bottom-link[href] {
cursor: pointer !important;
}
html body .vector-header-container .vector-dropdown-label:hover,
html body header.vector-header .vector-dropdown-label:hover,
html body .vector-header-container .vector-dropdown-label:focus,
html body header.vector-header .vector-dropdown-label:focus {
cursor: pointer !important;
}

/* V184: the legacy Main Page cursor reset also targets Vector menu links and
dropdown labels. Override those exact top-bar targets after the legacy rules. */
html body.page-Main_Page .vector-header-container a[href],
html body.page-Main_Page .vector-header-container a[href] *,
html body.page-Main_Page .vector-header-container a[href]:hover,
html body.page-Main_Page .vector-header-container .vector-menu a[href],
html body.page-Main_Page .vector-header-container .vector-menu a[href] *,
html body.page-Main_Page .vector-header-container .vector-menu a[href]:hover,
html body.page-Main_Page .vector-header-container .vector-menu a[href]:hover *,
html body.page-Main_Page #mw-head a[href],
html body.page-Main_Page #mw-head a[href] *,
html body.page-Main_Page #mw-head a[href]:hover,
html body.page-Main_Page #mw-head .vector-menu a[href],
html body.page-Main_Page #mw-head .vector-menu a[href] *,
html body.page-Main_Page #mw-head .vector-menu a[href]:hover,
html body.page-Main_Page #vector-sticky-header a[href],
html body.page-Main_Page #vector-sticky-header a[href] *,
html body.page-Main_Page #vector-sticky-header a[href]:hover,
html body.page-Main_Page #vector-sticky-header .vector-menu a[href],
html body.page-Main_Page #vector-sticky-header .vector-menu a[href] *,
html body.page-Main_Page #vector-sticky-header .vector-menu a[href]:hover,
html body.page-Main_Page #mw-head .vector-dropdown-label,
html body.page-Main_Page #mw-head .vector-dropdown-label *,
html body.page-Main_Page #mw-head .vector-dropdown-label:hover,
html body.page-Main_Page #mw-head .vector-dropdown-label:focus,
html body.page-Main_Page #mw-head .vector-main-menu-dropdown-toggle,
html body.page-Main_Page #mw-head .vector-main-menu-dropdown-toggle *,
html body.page-Main_Page .vector-header-container .vector-dropdown-label,
html body.page-Main_Page .vector-header-container .vector-dropdown-label *,
html body.page-Main_Page .vector-header-container .vector-dropdown-label:hover,
html body.page-Main_Page .vector-header-container .vector-dropdown-label:focus,
html body.page-Main_Page .vector-header-container .vector-main-menu-dropdown-toggle,
html body.page-Main_Page .vector-header-container .vector-main-menu-dropdown-toggle *,
html body.page-Main_Page .vector-header-container button,
html body.page-Main_Page .vector-header-container button *,
html body.page-Main_Page .vector-header-container [role="button"],
html body.page-Main_Page .vector-header-container [role="button"] *,
html body.page-Main_Page #mw-head button,
html body.page-Main_Page #mw-head button *,
html body.page-Main_Page #mw-head [role="button"],
html body.page-Main_Page #mw-head [role="button"] * {
cursor: pointer !important;
}
ct: 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;
}
}
/* ==========================================================================
ARCHITECTURAL WOOD SANCTUM & SHADOWBOX NICHES (A1 CONCEPT)
========================================================================== */
:root {
--wood-darkest: #110804;
--wood-dark: #1c0e07;
--wood-mid: #2b170e;
--wood-warm: #3d2214;
--wood-light: #54311c;
--gold-bright: #f5d77f;
--gold-mid: #d4af37;
--gold-deep: #997a15;
--text-cream: #f4ebd9;
--text-muted: #bda892;
--spotlight-glow: radial-gradient(circle at 50% 0%, rgba(255, 230, 160, 0.28) 0%, rgba(255, 210, 120, 0.08) 45%, transparent 75%);
}
/* Master Architectural Container */
.sanctum-cabinet {
width: 100%;
max-width: 1280px;
margin: 0 auto;
background: linear-gradient(180deg, #2b170e 0%, #1c0e07 40%, #140904 100%);
border: 3px solid #3d2314;
border-radius: 12px;
box-shadow: 0 25px 60px rgba(0,0,0,0.9), inset 0 2px 4px rgba(255,220,150,0.2), inset 0 -2px 6px rgba(0,0,0,0.9);
position: relative;
overflow: hidden;
font-family: 'Cinzel', 'Georgia', serif;
color: var(--text-cream);
}
.sanctum-cabinet::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 4px);
pointer-events: none;
opacity: 0.7;
}
/* ZONE 1: TOP ARCHITECTURAL CORNICE / NAV BAR */
.cornice-header {
background: linear-gradient(180deg, #3f2314 0%, #28140a 60%, #1b0c05 100%);
border-bottom: 2px solid #5a341b;
box-shadow: 0 8px 16px rgba(0,0,0,0.7), inset 0 2px 3px rgba(255,230,170,0.25);
padding: 14px 28px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 10;
}
.cornice-left {
display: flex;
align-items: center;
gap: 16px;
}
.cornice-left .nav-burger {
cursor: pointer;
font-size: 20px;
color: var(--gold-mid);
background: rgba(0,0,0,0.4);
padding: 6px 12px;
border-radius: 4px;
border: 1px solid #4a2814;
}
.vh-brand-group {
display: flex;
flex-direction: column;
}
.main-brand-title {
font-size: 20px;
font-weight: 700;
letter-spacing: 2.5px;
color: var(--gold-bright);
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 12px rgba(212,175,55,0.3);
}
.brand-subline {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--text-muted);
text-transform: uppercase;
margin-top: 2px;
}
.cornice-search {
flex: 1;
max-width: 480px;
margin: 0 24px;
}
.search-input-wrap {
position: relative;
width: 100%;
}
.search-bevel {
width: 100%;
padding: 10px 18px 10px 42px;
background: #0f0704;
border: 1px solid #472613;
border-radius: 20px;
color: var(--text-cream);
font-family: inherit;
font-size: 13px;
box-shadow: inset 0 3px 6px rgba(0,0,0,0.9), 0 1px 2px rgba(255,255,255,0.08);
outline: none;
}
.search-bevel::placeholder {
color: #7d6b58;
font-style: italic;
}
.search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--gold-mid);
font-size: 14px;
}
.cornice-links {
display: flex;
align-items: center;
gap: 18px;
font-size: 12px;
letter-spacing: 1.5px;
}
.cornice-links a {
color: var(--text-cream) !important;
text-decoration: none;
}
.cornice-links a:hover {
color: var(--gold-bright) !important;
}
.cornice-links .btn-gold a {
background: linear-gradient(180deg, #b8860b 0%, #7d5904 100%);
padding: 6px 14px;
border-radius: 4px;
color: #fff !important;
font-weight: 600;
box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
/* SPOTLIGHT HOOD & OVERHEAD LAMPS (A1 STYLE) */
.spotlight-frieze {
position: relative;
padding: 24px 20px 10px 20px;
text-align: center;
background: linear-gradient(180deg, #24130b 0%, #180c06 100%);
border-bottom: 2px solid #3a1e0f;
}
.lamp-row {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
padding: 0 80px;
pointer-events: none;
}
.lamp {
width: 60px;
height: 8px;
background: radial-gradient(ellipse at center, #ffd700 0%, #b8860b 60%, #442500 100%);
border-radius: 0 0 10px 10px;
box-shadow: 0 0 14px 4px rgba(255, 215, 0, 0.45);
position: relative;
}
.lamp::after {
content: "";
position: absolute;
top: 8px;
left: -70px;
width: 200px;
height: 280px;
background: var(--spotlight-glow);
pointer-events: none;
}
.frieze-title {
font-size: 24px;
letter-spacing: 2px;
color: var(--gold-bright);
text-shadow: 0 2px 6px rgba(0,0,0,0.95);
margin-bottom: 4px;
}
.frieze-subtitle {
font-size: 12px;
letter-spacing: 2.5px;
color: var(--text-muted);
font-style: italic;
}
.shadowbox-body {
padding: 24px 24px;
}
/* ZONE 2: HERO STAGE */
.hero-sanctuary-stage {
display: grid;
grid-template-columns: 1fr 1.25fr 1fr;
gap: 20px;
background: linear-gradient(180deg, #180c06 0%, #100703 100%);
border: 3px solid #361e10;
border-radius: 8px;
padding: 20px;
box-shadow: inset 0 10px 25px rgba(0,0,0,0.9);
margin-bottom: 24px;
align-items: stretch;
}
.spotlight-card {
background: rgba(0, 0, 0, 0.45);
border: 1px solid #3b2011;
border-radius: 6px;
padding: 18px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
display: flex;
flex-direction: column;
}
.spotlight-tag {
font-size: 10px;
letter-spacing: 2px;
color: var(--gold-mid);
text-transform: uppercase;
margin-bottom: 6px;
}
.spotlight-headline a {
font-size: 16px;
color: var(--text-cream) !important;
font-weight: 600;
text-decoration: none;
}
.spotlight-body {
font-size: 12px;
color: #bcaaa4;
line-height: 1.5;
margin: 10px 0;
flex: 1;
}
.spotlight-footer a {
font-size: 11px;
color: var(--gold-bright) !important;
text-decoration: none;
}
.center-frame {
background: #090402;
border: 3px solid #4a2814;
border-radius: 6px;
padding: 18px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.95), inset 0 0 30px rgba(0,0,0,0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.sanctuary-center-badge {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--gold-mid);
text-transform: uppercase;
margin-bottom: 10px;
}
.vh-hero-title-link a {
text-decoration: none;
}
.vh-who-corner {
display: block;
font-size: 11px;
letter-spacing: 3px;
color: var(--gold-mid);
text-transform: uppercase;
}
.vh-main-title {
display: block;
font-size: 26px;
font-weight: 700;
letter-spacing: 2px;
color: var(--gold-bright);
}
.vh-gold-rule {
width: 80px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
margin: 10px auto;
}
.vh-description {
font-size: 12px;
color: var(--text-cream);
font-style: italic;
}
.multilingual-tape {
background: #140904;
border: 1px solid #361b0d;
padding: 6px 14px;
border-radius: 4px;
margin-top: 12px;
font-size: 11px;
color: var(--gold-bright);
letter-spacing: 1px;
}
/* ZONE 3: 3D RECESSED SHADOWBOX SHELF NICHES */
.niches-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 22px;
}
.wood-niche {
background: linear-gradient(180deg, #0e0603 0%, #170b05 100%);
border: 3px solid #381f11;
border-top: 4px solid #1a0c06;
border-radius: 6px;
padding: 22px 18px;
box-shadow: inset 0 8px 18px rgba(0,0,0,0.95), 0 4px 10px rgba(0,0,0,0.7), inset 0 0 20px rgba(0,0,0,0.8);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.2s, border-color 0.2s;
}
.wood-niche:hover {
transform: translateY(-2px);
border-color: #633b20;
}
.niche-lamp {
position: absolute;
top: 0;
width: 36px;
height: 5px;
background: #e2ba4d;
border-radius: 0 0 6px 6px;
box-shadow: 0 0 10px rgba(255,215,0,0.6);
}
.niche-icon-wrap {
font-size: 32px;
margin: 10px 0 10px 0;
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.8));
}
.niche-title {
font-size: 15px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--gold-bright);
text-transform: uppercase;
margin-bottom: 8px;
}
.niche-desc {
font-size: 12px;
line-height: 1.5;
color: var(--text-cream);
margin-bottom: 10px;
}
.niche-links {
font-size: 11px;
line-height: 1.6;
margin-bottom: 10px;
}
.niche-links a {
color: var(--text-cream) !important;
text-decoration: underline;
}
.niche-links a:hover {
color: var(--gold-bright) !important;
}
.niche-meta {
margin-top: auto;
font-size: 11px;
color: var(--gold-mid);
border-top: 1px solid #2d180c;
padding-top: 8px;
width: 100%;
letter-spacing: 1px;
}
/* SUPPLEMENTARY TAXONOMY SHELF */
.taxonomies-carved-shelf {
background: #110704;
border: 1px solid #361b0c;
border-radius: 6px;
padding: 12px 18px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
}
.shelf-label {
font-size: 11px;
letter-spacing: 1.5px;
color: var(--gold-mid);
}
.shelf-chips a {
display: inline-block;
background: #1d0f07;
border: 1px solid #422312;
border-radius: 4px;
padding: 4px 10px;
margin: 0 4px;
color: var(--text-cream) !important;
font-size: 11px;
text-decoration: none;
}
.shelf-chips a:hover {
border-color: var(--gold-mid);
color: var(--gold-bright) !important;
}
/* CARVED TIMELINE RIBBON */
.timeline-carved-ribbon {
background: linear-gradient(180deg, #1c0e07 0%, #120803 100%);
border: 2px solid #381f11;
border-radius: 6px;
padding: 16px 20px;
box-shadow: inset 0 4px 10px rgba(0,0,0,0.9);
}
.timeline-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.timeline-title {
font-size: 13px;
letter-spacing: 2px;
color: var(--gold-mid);
}
.timeline-span-badge {
font-size: 11px;
color: var(--gold-bright);
}
.timeline-years-bar {
display: flex;
justify-content: space-between;
background: #080301;
border: 1px solid #30170a;
border-radius: 20px;
padding: 8px 16px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
overflow-x: auto;
}
.vh-year {
font-size: 11px;
color: #9c8570;
cursor: pointer;
padding: 2px 6px;
transition: color 0.2s;
}
.vh-year:hover, .vh-year.active {
color: var(--gold-bright);
font-weight: 700;
}
/* ZONE 4: BASE PLINTH FOOTER */
.plinth-footer {
background: linear-gradient(180deg, #1d0f07 0%, #120803 100%);
border-top: 3px solid #3d2111;
padding: 20px 28px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: inset 0 3px 6px rgba(255,255,255,0.05);
}
.plinth-stat {
font-size: 13px;
color: var(--gold-bright);
letter-spacing: 1px;
}
.plinth-actions {
display: flex;
gap: 12px;
}
.plinth-btn a {
display: inline-block;
padding: 8px 16px;
background: #190b05;
border: 1px solid #4a2712;
border-radius: 4px;
color: var(--text-cream) !important;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.6);
}
.plinth-btn a:hover {
border-color: var(--gold-mid);
color: var(--gold-bright) !important;
}
@media (max-width: 900px) {
.niches-grid { grid-template-columns: 1fr; }
.hero-sanctuary-stage { grid-template-columns: 1fr; }
.taxonomies-carved-shelf { flex-direction: column; gap: 10px; }
.plinth-footer { flex-direction: column; gap: 14px; text-align: center; }
}
/* ==========================================================================
PERSISTENT TOP BAR: #345B63 SINGLE-ROW (BURGER, SEARCH, TITLE, USER)
========================================================================== */
/* 1. Full-Width Outer Banner Container (Strict #345B63) */
body.page-Main_Page .vector-header-container,
body.page-Main_Page #mw-head,
.vector-header-container {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 86px !important;
max-height: 96px !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 1000 !important;
box-sizing: border-box !important;
}
/* 2. Inner Flex Row: STRICT Single Horizontal Line */
.mw-header {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 86px !important;
max-height: 96px !important;
padding: 0 20px !important;
margin: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
position: relative !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* 3. CENTERED TITLE: Dead-Center On The Same Line */
#vanipedia-topbar-title,
.vanipedia-topbar-main-title {
position: static !important;
transform: none !important;
display: block !important;
font-family: 'Cinzel', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 700 !important;
letter-spacing: 1.8px !important;
color: #f5d77f !important;
text-decoration: none !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
white-space: nowrap !important;
line-height: 1.25 !important;
margin: 0 0 3px 0 !important;
padding: 0 !important;
pointer-events: none !important;
user-select: text !important;
}
#vanipedia-topbar-title {
pointer-events: none !important;
cursor: default !important;
user-select: text !important;
}
#vanipedia-topbar-title:hover {
color: #f5d77f !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
cursor: default !important;
}
/* 4. LEFT SECTION: Burger [ ≡ ] + Search In ONE Row */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
flex: 0 0 auto !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Force Burger Menu Dropdown to ALWAYS display on desktop */
.vector-header-start #vector-main-menu-dropdown {
display: flex !important;
align-items: center !important;
visibility: visible !important;
margin: 0 !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label,
.vector-header-start #vector-main-menu-dropdown .vector-main-menu-dropdown-toggle,
.vector-header-start #vector-main-menu-dropdown .cdx-button--fake-button {
color: #f5d77f !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 6px !important;
line-height: 1 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label:hover {
background-color: rgba(245, 215, 127, 0.15) !important;
border-radius: 4px !important;
}
/* HIGH-VISIBILITY GOLD FOR BURGER & ALL VECTOR ICONS */
.vector-header-container .vector-icon,
.vector-header-start .vector-icon,
.vector-header-end .vector-icon,
.mw-header .vector-icon {
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
filter: brightness(0) saturate(100%) invert(86%) sepia(26%) saturate(884%) hue-rotate(352deg) brightness(102%) contrast(96%) !important;
opacity: 1 !important;
visibility: visible !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
/* Hide duplicate site wordmark & tagline next to burger */
.vector-header-start .mw-logo-wordmark,
.vector-header-start .mw-logo-tagline,
.vector-header-start .mw-logo {
display: none !important;
}
/* Search Box Container on Left */
.vector-header-container #p-search,
.mw-header #p-search {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container #searchform,
.mw-header #searchform {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container .cdx-search-input,
.vector-header-container .vector-search-box-input,
.vector-header-container .cdx-text-input {
max-width: 260px !important;
height: 32px !important;
margin: 0 !important;
}
/* Refined Inset Search Input (Option 1: Harmonious Deep Sea Teal) */
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
background-color: #1f3e45 !important;
border: 1px solid rgba(245, 215, 127, 0.45) !important;
color: #ffffff !important;
border-radius: 18px !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
padding: 4px 12px 4px 30px !important;
font-size: 13px !important;
height: 30px !important;
line-height: 30px !important;
width: 180px !important;
transition: width 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important;
box-sizing: border-box !important;
}
.vector-header-container .cdx-text-input__input:focus,
.vector-header-container input[type="search"]:focus,
#searchInput:focus {
width: 240px !important;
background-color: #173036 !important;
border-color: #f5d77f !important;
box-shadow: 0 0 8px rgba(245, 215, 127, 0.4), inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
outline: none !important;
}
.vector-header-container .cdx-text-input__input::placeholder,
.vector-header-container input[type="search"]::placeholder,
#searchInput::placeholder {
color: #a5c4c9 !important;
font-style: italic !important;
}
.vector-header-container .cdx-text-input__icon,
.vector-header-container .vector-search-box-inner .vector-icon {
color: #f5d77f !important;
fill: #f5d77f !important;
}
/* Hide separate search submit buttons */
.vector-header-container .cdx-search-input__end-button,
.vector-header-container #searchButton,
.vector-header-container #mw-searchButton,
.vector-header-container .searchButton,
.vector-header-container input[type="submit"] {
display: none !important;
}
/* 5. RIGHT SECTION: User Part Fixed (No weird boxes, clean gold, unified dropdown) */
.vector-header-end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: nowrap !important;
gap: 8px !important;
flex: 0 0 auto !important;
height: 100% !important;
margin: 0 0 0 auto !important;
}
/* 5.1 Remove all clunky button box backgrounds and borders from top bar items */
.vector-header-end .cdx-button,
.vector-header-end .cdx-button--fake-button,
.vector-header-end .cdx-button--weight-quiet,
.vector-header-end .vector-dropdown-label,
.vector-header-end .vector-menu-heading,
.vector-header-end #p-personal,
.vector-header-end .vector-user-links,
.vector-header-end .vector-user-menu,
.vector-header-end .vector-menu,
.vector-header-end .vector-menu-content,
.vector-header-end #pt-userpage-2,
.vector-header-end #vector-user-links-dropdown {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* 5.2 Style username & header icons in clean warm gold (no boxes) */
.vector-header-end #pt-userpage-2,
.vector-header-end #pt-userpage-2 span,
.vector-header-end .vector-dropdown-label,
.vector-header-end .vector-user-menu-overflow .vector-dropdown-label {
color: #f5d77f !important;
fill: #f5d77f !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
white-space: nowrap !important;
padding: 4px 8px !important;
border-radius: 4px !important;
display: inline-flex !important;
align-items: center !important;
transition: background-color 0.2s ease, color 0.2s ease !important;
}
.vector-header-end #pt-userpage-2:hover,
.vector-header-end .vector-dropdown-label:hover {
background-color: rgba(245, 215, 127, 0.15) !important;
color: #ffffff !important;
}
/* 5.3 Desktop User Dropdown Menu (Strictly Matching image_a7f3ff.png) */
.vector-header-end .vector-dropdown-content {
background: #1f3e45 !important;
background-color: #1f3e45 !important;
border: 1.5px solid #b1873d !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
padding: 6px 0 !important;
min-width: 175px !important;
width: 180px !important;
overflow: visible !important;
}
.vector-header-end .vector-dropdown-content div,
.vector-header-end .vector-dropdown-content ul,
.vector-header-end .vector-dropdown-content .vector-menu-content {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.vector-header-end .vector-dropdown-content li {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
}
/* Ensure Talk (pt-mytalk) is visible in desktop dropdown */
.vector-header-end .vector-dropdown-content #pt-mytalk {
display: block !important;
visibility: visible !important;
}
/* Hide icons inside desktop user dropdown so it matches image_a7f3ff.png clean text */
.vector-header-end .vector-dropdown-content .vector-icon {
display: none !important;
}
/* Clean, compact, single-row links */
.vector-header-end .vector-dropdown-content a {
display: flex !important;
align-items: center !important;
color: #ffffff !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
line-height: 1.2 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
text-decoration: none !important;
box-sizing: border-box !important;
width: 100% !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
.vector-header-end .vector-dropdown-content a span {
display: inline !important;
padding: 0 !important;
margin: 0 !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
background: transparent !important;
}
.vector-header-end .vector-dropdown-content a:hover,
.vector-header-end .vector-dropdown-content a:focus,
.vector-header-end .vector-dropdown-content a:active {
background-color: #345B63 !important;
color: #f5d77f !important;
text-decoration: none !important;
}
/* Divider above Logout */
.vector-header-end .vector-dropdown-content #pt-logout,
.vector-header-end .vector-dropdown-content #p-user-menu-logout,
.vector-header-end .vector-dropdown-content .vector-user-menu-logout {
border-top: 1px solid rgba(177, 135, 61, 0.35) !important;
margin-top: 6px !important;
padding-top: 4px !important;
}
.vector-header-end .vector-dropdown-content #pt-logout a,
.vector-header-end .vector-dropdown-content #p-user-menu-logout a {
color: #ffffff !important;
}
.vector-header-end .vector-dropdown-content #pt-logout a:hover,
.vector-header-end .vector-dropdown-content #p-user-menu-logout a:hover {
background-color: #345B63 !important;
color: #fca5a5 !important;
}
/* 6. DISABLE ALL HOVER PREVIEWS / POPUPS IN TOP BAR */
.vector-header-container [title]:hover::after,
.vector-header-container [title]:hover::before,
.vector-header-container a[title]:hover::after,
.vector-header-container a[title]:hover::before,
.mw-header [title]:hover::after,
.mw-header [title]:hover::before,
.mw-header a[title]:hover::after,
.mw-header a[title]:hover::before {
display: none !important;
content: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 7. Sticky Header Support (Color: #345B63) */
.vector-sticky-header {
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
height: 48px !important;
}
.vector-sticky-header a,
.vector-sticky-header .vector-icon {
color: #f5d77f !important;
fill: #f5d77f !important;
}
/* 8. Main Page Adjustments: Clean Flush Under Top Bar */
body.page-Main_Page #vani-home .vh-top {
display: none !important;
}
body.page-Main_Page #vani-home .vh-photo-stage {
top: 0 !important;
}
/* ==========================================================================
ELIMINATE UNWANTED LIGHT-GREEN STRIP / TOOLBAR UNDER TOP BAR
========================================================================== */
body.page-Main_Page .vector-page-toolbar-container,
body.page-Main_Page .vector-page-toolbar,
body.page-Main_Page #siteNotice,
body.page-Main_Page #localNotice,
body.page-Main_Page #mw-page-base,
body.page-Main_Page #mw-head-base,
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 #p-lang-btn {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
visibility: hidden !important;
overflow: hidden !important;
}
/* Ensure no gap or background bleed between top bar and content on Main Page */
body.page-Main_Page .vector-header-container {
margin-bottom: 0 !important;
}
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 {
margin-top: 0 !important;
padding-top: 0 !important;
background: #f6f2e9 !important;
background-color: #f6f2e9 !important;
}
/* ==========================================================================
WHO IS SRILA PRABHUPADA & FOUNDER-ACARYA HERO ALIGNMENT
========================================================================== */
.vh-hero-title-wrap {
text-align: center !important;
margin: 16px auto 8px auto !important;
position: relative !important;
z-index: 2 !important;
}
.vh-hero-title-link {
text-decoration: none !important;
display: inline-block !important;
}
.vh-who-corner {
display: block !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: #b1873d !important; /* Temple Gold */
margin-bottom: 4px !important;
}
.vh-main-title {
display: block !important;
font-family: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif !important;
font-size: 46px !important;
font-weight: 700 !important;
line-height: 1.1 !important;
color: #1e353b !important; /* Deep Sacred Slate-Teal */
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}
.vh-founder-subline {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
margin: 6px auto 14px auto !important;
padding: 4px 18px !important;
background: rgba(177, 135, 61, 0.08) !important;
border: 1px solid rgba(177, 135, 61, 0.25) !important;
border-radius: 20px !important;
color: #345B63 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
font-style: italic !important;
letter-spacing: 0.5px !important;
}
.vh-founder-subline::before,
.vh-founder-subline::after {
content: "♦" !important;
font-size: 10px !important;
color: #b1873d !important;
}
/* ==========================================================================
PANORAMIC TIMELINE RIBBON (1896 – 1977) BETWEEN HERO & GATEWAYS
========================================================================== */
.vh-timeline-panoramic {
width: 100% !important;
max-width: 1400px !important;
margin: 18px auto 24px auto !important;
padding: 12px 16px !important;
background: #faf7f0 !important;
border-top: 1px solid rgba(177, 135, 61, 0.35) !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.35) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
border-radius: 4px !important;
box-sizing: border-box !important;
}
.vh-timeline-panoramic .vh-timeline-years {
top: 0 !important;
margin: 0 auto 12px auto !important;
gap: 14px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
.vh-timeline-panoramic .vh-year {
font-size: 16px !important;
font-weight: 600 !important;
padding: 5px 12px !important;
border-radius: 14px !important;
color: #345B63 !important;
background: rgba(255, 255, 255, 0.7) !important;
border: 1px solid rgba(177, 135, 61, 0.2) !important;
transition: all 0.2s ease !important;
}
.vh-timeline-panoramic .vh-year:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
transform: translateY(-2px) !important;
box-shadow: 0 3px 8px rgba(52, 91, 99, 0.25) !important;
}
.vh-timeline-panoramic .vh-year.is-active {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #b1873d !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
/* FORCE WARM PARCHMENT ON ALL MAIN PAGE CONTAINERS (KILL MINT GREEN BLEED) */
body.page-Main_Page,
html.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;
background-color: #f6f2e9 !important;
background-image: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
}
/* ==========================================================================
VANIPEDIA STRICT ZERO-SCROLL VIEWPORT-FIT SYSTEM (STEP 11)
========================================================================== */
/* 1. Strict Zero-Scroll Viewport Locking */
html.page-Main_Page,
body.page-Main_Page {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page .mw-page-container {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
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 {
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* 2. Master Canvas Vertical Rhythm (Auto-distributed inside single screen) */
body.page-Main_Page #vani-home {
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 8px !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 8px 18px 10px 18px !important;
box-sizing: border-box !important;
overflow: hidden !important;
background-color: transparent !important;
}
/* Base Card Styling */
.vh-card,
.vh-gateway,
.vh-quote-frame,
.vh-bottom-card {
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.35) !important;
border-radius: 6px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
box-sizing: border-box !important;
}
/* Card Header Ribbon */
.vh-card-header {
background: rgba(177, 135, 61, 0.1) !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.28) !important;
padding: 6px 12px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #b1873d !important;
}
.vh-card-header .vh-badge-icon {
font-size: 13px !important;
margin-right: 5px !important;
}
.vh-card-header .vh-badge-sub {
font-size: 9.5px !important;
letter-spacing: 1px !important;
color: #345B63 !important;
opacity: 0.85 !important;
}
.vh-card-body {
padding: 10px 14px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
box-sizing: border-box !important;
font-size: 13px !important;
line-height: 1.45 !important;
}
/* SECTION 1: HERO TRIAD (Compact) */
.vh-triad-grid {
display: grid !important;
grid-template-columns: 280px 1fr 280px !important;
gap: 14px !important;
align-items: stretch !important;
flex: 0 0 auto !important;
max-height: 235px !important;
}
/* Memories of Srila Prabhupada Card (Left) */
.vh-card-memories .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #1e353b !important;
text-decoration: none !important;
display: block !important;
margin-bottom: 6px !important;
}
.vh-card-memories .vh-card-snippet {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
color: #4a5568 !important;
flex: 1 1 auto !important;
}
.vh-card-actions {
margin-top: 8px !important;
}
.vh-btn-pill {
display: inline-flex !important;
align-items: center !important;
padding: 4px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #345B63 !important;
background: rgba(52, 91, 99, 0.08) !important;
border: 1px solid rgba(52, 91, 99, 0.28) !important;
border-radius: 14px !important;
transition: all 0.2s ease !important;
}
.vh-btn-pill:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
}
/* Center Sanctuary Frame */
.vh-card-sanctuary {
background: radial-gradient(circle at center, #ffffff 0%, #faf6ee 100%) !important;
padding: 10px 16px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.vh-card-sanctuary .vh-hero-title-wrap {
margin: 0 !important;
}
.vh-card-sanctuary .vh-who-corner {
display: block !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
color: #b1873d !important;
margin-bottom: 0px !important;
}
.vh-card-sanctuary .vh-main-title {
font-family: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif !important;
font-size: 34px !important;
font-weight: 700 !important;
line-height: 1 !important;
color: #1e353b !important;
}
/* Button below Srila Prabhupada: only "Founder-Ācārya of ISKCON", clickable wiki link */
.vh-card-sanctuary .vh-founder-subline {
display: inline-block !important;
margin: 3px auto 6px auto !important;
}
.vh-card-sanctuary .vh-founder-subline a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 3px 14px !important;
background: rgba(177, 135, 61, 0.12) !important;
border: 1px solid rgba(177, 135, 61, 0.4) !important;
border-radius: 16px !important;
color: #345B63 !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.vh-card-sanctuary .vh-founder-subline a:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
box-shadow: 0 2px 6px rgba(52, 91, 99, 0.3) !important;
}
/* Compact Sacred Portrait Oval */
.vh-portrait-wrapper {
margin: 2px auto 4px auto !important;
display: flex !important;
justify-content: center !important;
}
.vh-portrait-wrapper .vh-photo-stage {
width: 110px !important;
height: 110px !important;
border-radius: 50% !important;
border: 2.5px solid #b1873d !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
overflow: hidden !important;
position: relative !important;
background-color: #f4ebd9 !important;
}
.vh-card-sanctuary .vh-description {
font-family: 'Noto Serif', Georgia, serif !important;
font-style: italic !important;
font-size: 12px !important;
color: #576574 !important;
margin: 2px auto 0 auto !important;
max-width: 440px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* SECTION 2: CLEAN INTERACTIVE TIMELINE (No outer border/box rectangle) */
.vh-timeline-section {
position: relative !important;
top: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.vh-timeline-years {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 auto 6px auto !important;
padding: 0 !important;
position: static !important;
top: 0 !important;
}
.vh-timeline-years .vh-year {
padding: 3px 10px !important;
border-radius: 12px !important;
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.28) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: #345B63 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
line-height: 1.2 !important;
}
.vh-timeline-years .vh-year:hover {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #345B63 !important;
transform: translateY(-1px) !important;
}
.vh-timeline-years .vh-year.is-active {
background: #345B63 !important;
color: #f5d77f !important;
border-color: #b1873d !important;
font-weight: 700 !important;
}
/* Lifeline track window */
.vh-lifeline-window {
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.22) !important;
border-radius: 6px !important;
height: 80px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 auto !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.vh-timeline-track {
display: flex !important;
align-items: flex-start !important;
height: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
.vh-timeline-track::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 36px !important;
height: 1px !important;
background: rgba(177, 135, 61, 0.35) !important;
}
.vh-timeline-item {
flex: 0 0 200px !important;
padding: 6px 14px 0 !important;
box-sizing: border-box !important;
position: relative !important;
}
.vh-timeline-date {
font-size: 11px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 1.2 !important;
}
.vh-timeline-dot {
position: absolute !important;
top: 32px !important;
left: 14px !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #b1873d !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1px #b1873d !important;
}
.vh-timeline-text {
margin-top: 14px !important;
font-size: 11px !important;
line-height: 1.3 !important;
color: #1e293b !important;
max-width: 170px !important;
white-space: normal !important;
}
/* SECTION 3: 6 GATEWAYS GRID (Compact 6-Columns) */
.vh-gateways-frame {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 10px !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.vh-gateway {
padding: 8px 6px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.vh-gateway:hover {
transform: translateY(-2px) !important;
border-color: #b1873d !important;
box-shadow: 0 4px 12px rgba(177, 135, 61, 0.15) !important;
}
.vh-gw-icon-circle {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
background: rgba(177, 135, 61, 0.1) !important;
border: 1px solid rgba(177, 135, 61, 0.22) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 4px !important;
}
.vh-gateway .vh-icon {
font-size: 15px !important;
color: #b1873d !important;
}
.vh-gateway-title {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 13.5px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: #1e353b !important;
margin: 0 0 4px 0 !important;
width: 100% !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.2) !important;
padding-bottom: 2px !important;
}
.vh-gateway-links {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
width: 100% !important;
font-size: 11.5px !important;
}
.vh-gateway-links a {
color: #2c3e50 !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.vh-gateway-links a:hover {
color: #b1873d !important;
text-decoration: underline !important;
}
/* SECTION 4: QUOTE SCROLL (Slim Banner) */
.vh-quote-frame {
background: #faf6ee !important;
border: 1px solid rgba(177, 135, 61, 0.3) !important;
border-radius: 6px !important;
padding: 8px 24px !important;
margin: 0 auto !important;
text-align: center !important;
width: 100% !important;
max-width: 1000px !important;
flex: 0 0 auto !important;
}
.vh-quote-frame .vh-quote-inner {
font-family: 'Noto Serif', Georgia, serif !important;
font-style: italic !important;
font-size: 13.5px !important;
line-height: 1.4 !important;
color: #1e353b !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
}
.vh-quote-frame .vh-quote-text {
max-width: 750px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.vh-quote-frame .vh-quote-source {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-style: normal !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: #b1873d !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.vh-quote-mark {
color: rgba(177, 135, 61, 0.45) !important;
font-size: 24px !important;
line-height: 1 !important;
font-family: Georgia, serif !important;
}
/* SECTION 5: BOTTOM MODULES (Treasures & Network) */
.vh-bottom-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.vh-bottom-card {
padding: 0 !important;
overflow: hidden !important;
}
.vh-feature-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
padding: 8px 10px !important;
}
.vh-feature {
background: #faf7f0 !important;
border: 1px solid rgba(177, 135, 61, 0.2) !important;
border-radius: 4px !important;
padding: 6px 8px !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
font-size: 11px !important;
}
.vh-network-stats-grid {
display: flex !important;
justify-content: space-around !important;
gap: 6px !important;
padding: 8px 10px 4px 10px !important;
text-align: center !important;
}
.vh-network-stat {
flex: 1 1 0 !important;
background: #faf7f0 !important;
border: 1px solid rgba(177, 135, 61, 0.2) !important;
border-radius: 4px !important;
padding: 6px 2px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-decoration: none !important;
}
.vh-stat-num {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #1e353b !important;
}
.vh-stat-lbl {
font-size: 8.5px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #b1873d !important;
}
.vh-network-mission {
text-align: center !important;
padding: 4px 10px 6px 10px !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
font-style: italic !important;
color: #576574 !important;
}
/* ==========================================================================
THEMATIC TAXONOMY INDEX (4 SECTIONS) & PRABHUPADA IN MEDIA (STEP 12)
========================================================================== */
/* Section Heading */
.vh-section-header {
margin: 18px 0 10px 0 !important;
text-align: left !important;
border-bottom: 1px solid rgba(177, 135, 61, 0.25) !important;
padding-bottom: 6px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.vh-section-badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background: #345B63 !important;
padding: 3px 8px !important;
border-radius: 4px !important;
}
.vh-section-heading {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16px !important;
letter-spacing: 1.2px !important;
color: #1e353b !important;
margin: 0 !important;
}
/* 4-Column Taxonomy Grid */
.vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
width: 100% !important;
margin-bottom: 16px !important;
}
.vh-card-tax {
display: flex !important;
flex-direction: column !important;
background: #ffffff !important;
border: 1px solid rgba(177, 135, 61, 0.3) !important;
border-radius: 6px !important;
}
.vh-tax-spotlight-item {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
flex: 1 1 auto !important;
}
.vh-tax-item-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #1e353b !important;
text-decoration: none !important;
}
.vh-tax-item-name a:hover {
color: #b1873d !important;
text-decoration: underline !important;
}
.vh-tax-item-desc {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #4a5568 !important;
flex: 1 1 auto !important;
}
.vh-tax-item-link {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
color: #345B63 !important;
text-decoration: none !important;
margin-top: 6px !important;
display: inline-block !important;
}
.vh-tax-item-link:hover {
color: #b1873d !important;
text-decoration: underline !important;
}
/* Prabhupada in the Media Section */
.vh-card-media-section {
background: #faf7f0 !important;
margin-bottom: 16px !important;
}
.vh-media-body {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
padding: 12px 18px !important;
}
.vh-media-desc {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #334155 !important;
flex: 1 1 auto !important;
}
.vh-media-actions {
flex-shrink: 0 !important;
}
/* Allow smooth scrolling when full sections are present */
body.page-Main_Page {
overflow-y: auto !important;
}
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
body.page-Main_Page #vani-home {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
@media (max-width: 1024px) {
.vh-taxonomy-grid { grid-template-columns: repeat(2, 1fr) !important; }
.vh-media-body { flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 640px) {
.vh-taxonomy-grid { grid-template-columns: 1fr !important; }
}
/* Explicitly hide quote and bottom sections if any old cache or DOM remains */
.vh-quote-frame,
#vh-random-quote-wrap,
.vh-bottom-grid,
.vh-bottom-card,
.vh-card-treasures,
.vh-card-network {
display: none !important;
}
/* ==========================================================================
STEP 14: TOP BAR SEARCH ANCHORED LEFT + SACRED 3D ARCHITECTURAL STYLING
========================================================================== */
/* 1. TOP BAR LEFT ANCHOR FOR SEARCH */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
flex: 0 0 auto !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-start #vector-main-menu-dropdown {
order: 1 !important;
}
.vector-header-start #p-search,
.vector-header-container #p-search,
.mw-header #p-search {
order: 2 !important;
display: flex !important;
align-items: center !important;
margin: 0 0 0 4px !important;
padding: 0 !important;
}
/* 2. 3D CARDS (HERO TRIAD, GATEWAYS, TAXONOMY, MEDIA) */
.vh-card,
.vh-gateway,
.vh-card-tax,
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #faf8f4 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.32) !important;
border-top: 1px solid rgba(255, 255, 255, 0.95) !important;
border-bottom: 2.5px solid rgba(177, 135, 61, 0.45) !important;
border-radius: 8px !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 5px 15px rgba(30, 53, 59, 0.07),
0 10px 24px -5px rgba(30, 53, 59, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1) !important;
position: relative !important;
}
.vh-card:hover,
.vh-gateway:hover,
.vh-card-tax:hover,
.vh-card-media-section:hover {
transform: translateY(-3px) !important;
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.06),
0 10px 25px rgba(30, 53, 59, 0.12),
0 16px 32px -6px rgba(177, 135, 61, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
/* Card Header Plaques (Embossed Top Bar) */
.vh-card-header {
background: linear-gradient(180deg, #fbf9f4 0%, #f2ebdd 100%) !important;
border-bottom: 1.5px solid rgba(177, 135, 61, 0.3) !important;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(0, 0, 0, 0.03) !important;
border-top-left-radius: 7px !important;
border-top-right-radius: 7px !important;
}
/* Sanctuary Center Card (Elevated Sovereign Altar) */
.vh-card-sanctuary {
background: radial-gradient(circle at 50% 35%, #ffffff 0%, #faf6ec 65%, #f3ece0 100%) !important;
border: 1.5px solid rgba(177, 135, 61, 0.45) !important;
border-top: 1.5px solid rgba(255, 255, 255, 1) !important;
border-bottom: 3.5px solid rgba(177, 135, 61, 0.6) !important;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.06),
0 8px 24px rgba(30, 53, 59, 0.11),
0 16px 36px -6px rgba(177, 135, 61, 0.14),
inset 0 1px 0 #ffffff,
inset 0 0 20px rgba(177, 135, 61, 0.04) !important;
}
/* Sacred Portrait Medallion Frame */
.vh-portrait-wrapper .vh-photo-stage {
border: 3.5px solid #b1873d !important;
box-shadow:
0 6px 18px rgba(30, 53, 59, 0.22),
0 12px 28px rgba(0, 0, 0, 0.15),
inset 0 2px 4px rgba(255, 255, 255, 0.8),
inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.vh-portrait-wrapper .vh-photo-stage:hover {
transform: scale(1.03) !important;
box-shadow:
0 8px 24px rgba(30, 53, 59, 0.28),
0 16px 36px rgba(177, 135, 61, 0.3),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -3px 6px rgba(0, 0, 0, 0.45) !important;
}
/* 3D Gateways Icon Medallions */
.vh-gw-icon-circle {
background: linear-gradient(145deg, #ffffff 0%, #f6efe0 50%, #eadecb 100%) !important;
border: 1.5px solid #b1873d !important;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.10),
inset 0 1px 1px #ffffff,
inset 0 -1.5px 2px rgba(177, 135, 61, 0.45) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.vh-gateway:hover .vh-gw-icon-circle {
transform: scale(1.08) translateY(-1px) !important;
background: linear-gradient(145deg, #fdfbf7 0%, #f2e3c6 100%) !important;
box-shadow:
0 5px 10px rgba(177, 135, 61, 0.25),
inset 0 1px 1px #ffffff,
inset 0 -1.5px 2px rgba(177, 135, 61, 0.6) !important;
}
/* 3D Tactile Timeline Year Keys */
.vh-timeline-years .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #f4eee2 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.35) !important;
border-top: 1px solid rgba(255, 255, 255, 0.95) !important;
border-bottom: 2.5px solid rgba(177, 135, 61, 0.55) !important;
border-radius: 14px !important;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.07),
inset 0 1px 0 #ffffff !important;
transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.vh-timeline-years .vh-year:hover {
transform: translateY(-2px) !important;
border-bottom: 3.5px solid rgba(177, 135, 61, 0.75) !important;
box-shadow:
0 4px 10px rgba(177, 135, 61, 0.22),
inset 0 1px 0 #ffffff !important;
color: #1e353b !important;
}
.vh-timeline-years .vh-year.is-active {
background: linear-gradient(180deg, #345B63 0%, #1f373c 100%) !important;
color: #ffffff !important;
border: 1px solid #122124 !important;
border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
border-bottom: 2.5px solid #0d1719 !important;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.4),
0 2px 5px rgba(0, 0, 0, 0.15) !important;
}
/* Raised 3D Pill Action Buttons */
.vh-btn-pill,
.vh-founder-subline a,
.vh-tax-item-link {
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
transition: all 0.2s ease !important;
}
.vh-btn-pill {
background: linear-gradient(180deg, #3d6a74 0%, #28474e 100%) !important;
color: #ffffff !important;
border: 1px solid #1a2f34 !important;
border-bottom: 2px solid #0f1c1f !important;
border-radius: 16px !important;
padding: 4px 14px !important;
display: inline-block !important;
}
.vh-btn-pill:hover {
background: linear-gradient(180deg, #b1873d 0%, #916c2a 100%) !important;
border-color: #72531a !important;
border-bottom: 2.5px solid #553e13 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(177, 135, 61, 0.3) !important;
color: #ffffff !important;
}
.vh-founder-subline a {
background: linear-gradient(180deg, #ffffff 0%, #f6efe2 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.4) !important;
border-bottom: 2.5px solid rgba(177, 135, 61, 0.65) !important;
}
.vh-founder-subline a:hover {
background: linear-gradient(180deg, #345B63 0%, #213c42 100%) !important;
color: #ffffff !important;
border-color: #162a2e !important;
border-bottom: 2.5px solid #0b1517 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(30, 53, 59, 0.25) !important;
}
/* 3D Lifeline Track (Carved Groove with Illuminated Bar) */
.vh-lifeline {
background: linear-gradient(180deg, #e4ded0 0%, #ede7db 100%) !important;
border: 1px solid rgba(177, 135, 61, 0.25) !important;
border-bottom: 1px solid #ffffff !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.10) !important;
border-radius: 12px !important;
}
/* ==========================================================================
STEP 15: "SOLID" ARCHITECTURAL PRESENCE & EMBOSSED 3D DEPTH
========================================================================== */
/* 1. SOLID CARD ARCHITECTURE (SUBSTANTIAL GROUNDED PRESENCE) */
.vh-card,
.vh-gateway,
.vh-card-tax,
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #fbf9f4 60%, #f5efe2 100%) !important;
border: 1.5px solid #c09b4d !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #8e6b22 !important;
border-radius: 8px !important;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 8px 20px rgba(24, 38, 35, 0.12),
0 16px 32px -4px rgba(24, 38, 35, 0.14),
inset 0 1px 0 #ffffff,
inset 0 -1px 0 rgba(192, 155, 77, 0.2) !important;
transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1), border-color 0.22s ease !important;
position: relative !important;
}
.vh-card:hover,
.vh-gateway:hover,
.vh-card-tax:hover,
.vh-card-media-section:hover {
transform: translateY(-4px) !important;
border-color: #d4ab55 !important;
border-bottom: 4.5px solid #7a5818 !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.10),
0 14px 28px rgba(24, 38, 35, 0.18),
0 24px 42px -6px rgba(177, 135, 61, 0.25),
inset 0 1px 0 #ffffff !important;
}
/* 2. SOLID EMBOSSED CARD HEADER (STONE/METAL LINTEL) */
.vh-card-header {
background: linear-gradient(180deg, #faf6ee 0%, #ebe0ca 100%) !important;
border-bottom: 2px solid #b89348 !important;
box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.05) !important;
border-top-left-radius: 6.5px !important;
border-top-right-radius: 6.5px !important;
padding: 8px 14px !important;
}
.vh-badge-text {
font-weight: 800 !important;
letter-spacing: 1.6px !important;
color: #725215 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.vh-badge-sub {
font-weight: 700 !important;
color: #55442a !important;
background: rgba(177, 135, 61, 0.16) !important;
border: 1px solid rgba(177, 135, 61, 0.35) !important;
border-radius: 4px !important;
padding: 2px 7px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
/* 3. SANCTUARY CENTER CARD (SOVEREIGN REVERENTIAL ALTAR) */
.vh-card-sanctuary {
background: radial-gradient(circle at 50% 32%, #ffffff 0%, #fbf6ec 55%, #f0e6d2 100%) !important;
border: 2px solid #b1873d !important;
border-top: 2px solid #ffffff !important;
border-bottom: 4.5px solid #785414 !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.09),
0 12px 28px rgba(24, 38, 35, 0.16),
0 22px 44px -8px rgba(177, 135, 61, 0.22),
inset 0 1px 0 #ffffff,
inset 0 0 24px rgba(177, 135, 61, 0.08) !important;
}
.vh-card-sanctuary .vh-main-title {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}
/* 4. SOLID CAST GOLD PORTRAIT MEDALLION */
.vh-portrait-wrapper .vh-photo-stage {
border: 4px solid #b1873d !important;
box-shadow:
0 8px 24px rgba(20, 35, 32, 0.32),
0 16px 36px rgba(0, 0, 0, 0.22),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -4px 8px rgba(0, 0, 0, 0.5) !important;
}
.vh-portrait-wrapper .vh-photo-stage:hover {
transform: scale(1.04) !important;
border-color: #c99c45 !important;
box-shadow:
0 12px 32px rgba(20, 35, 32, 0.40),
0 20px 45px rgba(177, 135, 61, 0.35),
inset 0 2px 4px rgba(255, 255, 255, 1),
inset 0 -4px 8px rgba(0, 0, 0, 0.55) !important;
}
/* 5. SOLID GATEWAYS WITH SCULPTED BRONZE/GOLD MEDALLIONS */
.vh-gateway {
padding: 14px 10px 12px 10px !important;
}
.vh-gw-icon-circle {
width: 38px !important;
height: 38px !important;
background: linear-gradient(135deg, #ffffff 0%, #eedfc7 50%, #d6ba8f 100%) !important;
border: 2px solid #b1873d !important;
border-top-color: #ffffff !important;
border-bottom-color: #825f18 !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.14),
inset 0 1px 1.5px #ffffff,
inset 0 -2px 3px rgba(130, 95, 30, 0.5) !important;
}
.vh-gateway:hover .vh-gw-icon-circle {
transform: scale(1.1) translateY(-2px) !important;
background: linear-gradient(135deg, #ffffff 0%, #f7ebd5 50%, #e5cb9e 100%) !important;
border-color: #c49d48 !important;
box-shadow:
0 6px 14px rgba(177, 135, 61, 0.35),
inset 0 1px 2px #ffffff,
inset 0 -2px 4px rgba(130, 95, 30, 0.6) !important;
}
.vh-gateway-title {
font-size: 14px !important;
font-weight: 700 !important;
color: #14282c !important;
letter-spacing: 1.4px !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
margin-top: 6px !important;
}
/* 6. SOLID TACTILE TIMELINE YEAR BUTTONS */
.vh-timeline-years .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #efe7d6 100%) !important;
border: 1.5px solid #b89348 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #785414 !important;
border-radius: 14px !important;
font-weight: 700 !important;
color: #213c42 !important;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.10),
inset 0 1px 0 #ffffff !important;
padding: 4px 12px !important;
}
.vh-timeline-years .vh-year:hover {
transform: translateY(-2.5px) !important;
border-color: #cda24e !important;
border-bottom: 4.5px solid #63430c !important;
box-shadow:
0 6px 14px rgba(177, 135, 61, 0.28),
inset 0 1px 0 #ffffff !important;
color: #0b1a1c !important;
}
.vh-timeline-years .vh-year.is-active {
background: linear-gradient(180deg, #2b4f57 0%, #172c30 100%) !important;
color: #ffffff !important;
border: 1.5px solid #0d191c !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.4) !important;
border-bottom: 3.5px solid #060c0d !important;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.5),
0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
/* 7. SOLID CARVED LIFELINE TRACK */
.vh-lifeline {
background: linear-gradient(180deg, #ded6c4 0%, #e8e1d3 100%) !important;
border: 1.5px solid #a8843c !important;
border-top-color: #8c6a26 !important;
border-bottom-color: #ffffff !important;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16) !important;
border-radius: 12px !important;
}
/* 8. SOLID 3D ACTION PILL BUTTONS */
.vh-btn-pill {
background: linear-gradient(180deg, #376069 0%, #20393f 100%) !important;
color: #ffffff !important;
border: 1.5px solid #142529 !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
border-bottom: 3px solid #0a1315 !important;
border-radius: 16px !important;
padding: 5px 16px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
box-shadow:
0 3px 7px rgba(0, 0, 0, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
}
.vh-btn-pill:hover {
background: linear-gradient(180deg, #b88e40 0%, #8c661d 100%) !important;
border-color: #61440d !important;
border-top-color: rgba(255, 255, 255, 0.5) !important;
border-bottom: 3.5px solid #432e08 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 14px rgba(177, 135, 61, 0.38) !important;
color: #ffffff !important;
}
.vh-founder-subline a {
background: linear-gradient(180deg, #ffffff 0%, #f4ebd9 100%) !important;
border: 1.5px solid #b89348 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3px solid #785414 !important;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff !important;
}
.vh-founder-subline a:hover {
background: linear-gradient(180deg, #345B63 0%, #1b3237 100%) !important;
color: #ffffff !important;
border-color: #0e1e21 !important;
border-top-color: rgba(255, 255, 255, 0.4) !important;
border-bottom: 3.5px solid #050b0c !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 14px rgba(30, 53, 59, 0.3) !important;
}
/* 9. SOLID DEDICATED MEDIA ARCHIVES SECTION */
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #faf6ee 100%) !important;
border: 1.5px solid #b89348 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #785414 !important;
margin-top: 8px !important;
margin-bottom: 24px !important;
}
.vh-media-desc {
font-size: 13.5px !important;
font-weight: 500 !important;
color: #273b40 !important;
}
/* 10. Hide THEMATIC TAXONOMY INDEX announcement banner from old cache */
.vh-section-header,
.vh-section-badge,
.vh-section-heading {
display: none !important;
}
/* Explicitly hide the 6 gateways frame if any cache remains */
.vh-gateways-frame,
.vh-gateway,
.vh-gw-icon-circle {
display: none !important;
}
/* ==========================================================================
SAFE NO-SCROLL DASHBOARD & ZERO-OVERLAP ARCHITECTURE (STEP 18)
========================================================================== */
/* 1. PREVENT SCROLLING ON MAIN PAGE CLEANLY WITHOUT BREAKING VECTOR INTERNALS */
body.page-Main_Page {
overflow-y: hidden !important;
overflow-x: hidden !important;
}
/* 2. THE MASTER DASHBOARD CONTAINER (FITS SCREEN EXACTLY) */
body.page-Main_Page #vani-home {
height: calc(100vh - 56px) !important;
max-height: calc(100vh - 56px) !important;
box-sizing: border-box !important;
padding: 6px 16px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 6px !important;
overflow: hidden !important;
position: relative !important;
}
/* Neutralize old legacy absolute / conflicting rules */
.vh-intro,
.vh-now,
.vh-main,
.vh-gateways,
.vh-who-link {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
display: block !important;
}
/* 3. SECTION 1: HERO TRIAD */
.vh-triad-grid {
flex: 1 1 37% !important;
max-height: 38vh !important;
min-height: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1.15fr 1fr !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.vh-triad-grid .vh-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.vh-card-header {
flex: 0 0 auto !important;
padding: 5px 10px !important;
}
.vh-card-body {
flex: 1 1 auto !important;
padding: 6px 10px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Center Card: Sanctuary Altar */
.vh-card-sanctuary {
padding: 6px 12px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
}
.vh-card-sanctuary .vh-hero-title-wrap {
margin: 0 !important;
line-height: 1 !important;
}
.vh-card-sanctuary .vh-who-corner {
position: static !important;
display: block !important;
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #b1873d !important;
margin: 0 auto 2px auto !important;
}
.vh-card-sanctuary .vh-main-title {
font-size: 24px !important;
line-height: 1.1 !important;
font-weight: 700 !important;
color: #123f38 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
}
.vh-card-sanctuary .vh-founder-subline {
margin: 2px auto !important;
}
.vh-card-sanctuary .vh-founder-subline a {
padding: 2px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
}
.vh-portrait-wrapper {
margin: 2px auto !important;
}
.vh-portrait-wrapper .vh-photo-stage {
width: 85px !important;
height: 85px !important;
}
.vh-card-sanctuary .vh-gold-rule {
width: 28px !important;
height: 2px !important;
margin: 2px auto !important;
background: #b1873d !important;
}
.vh-card-sanctuary .vh-description {
position: static !important;
width: auto !important;
max-width: 90% !important;
min-height: 0 !important;
font-size: 13px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* 4. SECTION 2: INTERACTIVE LIFE TIMELINE */
.vh-timeline-section {
flex: 0 0 auto !important;
height: 62px !important;
max-height: 62px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
position: relative !important;
}
.vh-timeline-years {
position: static !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
margin: 0 0 3px 0 !important;
padding: 0 !important;
width: 100% !important;
white-space: nowrap !important;
}
.vh-timeline-years .vh-year {
padding: 2px 8px !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
.vh-lifeline-window {
position: relative !important;
height: 30px !important;
max-height: 30px !important;
overflow: hidden !important;
}
.vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
/* 5. SECTION 3: THEMATIC TAXONOMY (4 CARDS) */
.vh-taxonomy-section {
flex: 1 1 37% !important;
max-height: 39vh !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 10px !important;
height: 100% !important;
width: 100% !important;
margin: 0 !important;
}
.vh-card-tax {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.vh-card-tax .vh-card-header {
padding: 4px 8px !important;
}
.vh-card-tax .vh-card-body {
padding: 5px 8px !important;
}
.vh-tax-spotlight-item {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.vh-tax-item-name a {
font-size: 13.5px !important;
font-weight: 700 !important;
}
.vh-tax-item-desc {
font-size: 11px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vh-tax-item-link {
font-size: 10px !important;
margin-top: auto !important;
}
/* 6. SECTION 4: PRABHUPĀDA IN THE MEDIA (COMPACT HORIZONTAL BAR 42px) */
.vh-card-media-section {
flex: 0 0 auto !important;
height: 42px !important;
max-height: 42px !important;
margin: 0 !important;
padding: 0 14px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
box-sizing: border-box !important;
}
.vh-card-media-section .vh-card-header {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.vh-card-media-section .vh-media-body {
padding: 0 !important;
flex: 1 1 auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
}
.vh-card-media-section .vh-media-desc {
font-size: 11.5px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: #273b40 !important;
flex: 1 1 auto !important;
}
.vh-card-media-section .vh-media-actions {
flex-shrink: 0 !important;
}
.vh-card-media-section .vh-btn-pill {
padding: 3px 12px !important;
font-size: 10px !important;
}
/* ==========================================================================
STEP 19: FULL-WIDTH VIEW + TOP-BAR TEAL (#345B63) BORDERS & SHADOWS
+ REFINED COMPACT SIZING & EXPANDED AIRY SPACING
========================================================================== */
/* 1. FULL WIDTH VIEW (EXPAND TO 100% SCREEN WIDTH) */
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
box-sizing: border-box !important;
padding: 10px 24px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
overflow: hidden !important;
position: relative !important;
}
/* 2. TEAL (#345B63) BORDERS & MULTI-STOP TEAL SHADOWS ACROSS ALL CARDS */
.vh-card,
.vh-gateway,
.vh-card-tax,
.vh-card-media-section {
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 65%, #f2f7f7 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16),
inset 0 1px 0 #ffffff !important;
transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1), border-color 0.22s ease !important;
position: relative !important;
}
.vh-card:hover,
.vh-gateway:hover,
.vh-card-tax:hover,
.vh-card-media-section:hover {
transform: translateY(-3px) !important;
border-color: #43727c !important;
border-bottom: 4.5px solid #1a2f34 !important;
box-shadow:
0 4px 8px rgba(52, 91, 99, 0.12),
0 12px 26px rgba(52, 91, 99, 0.22),
0 22px 38px -6px rgba(52, 91, 99, 0.26),
inset 0 1px 0 #ffffff !important;
}
/* Card Header Lintels (Teal Borders & Toned Accents) */
.vh-card-header {
background: linear-gradient(180deg, #ffffff 0%, #eaf1f2 100%) !important;
border-bottom: 2px solid #345B63 !important;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(52, 91, 99, 0.06) !important;
border-top-left-radius: 6.5px !important;
border-top-right-radius: 6.5px !important;
padding: 5px 12px !important;
}
.vh-badge-text {
font-weight: 800 !important;
letter-spacing: 1.5px !important;
color: #345B63 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.vh-badge-sub {
font-weight: 700 !important;
color: #233e44 !important;
background: rgba(52, 91, 99, 0.12) !important;
border: 1px solid rgba(52, 91, 99, 0.35) !important;
border-radius: 4px !important;
padding: 2px 7px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
/* 3. SANCTUARY ALAR CARD (REFINED 3D TEAL EMBOSSING) */
.vh-card-sanctuary {
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
border: 2px solid #345B63 !important;
border-top: 2px solid #ffffff !important;
border-bottom: 4.5px solid #1a2f34 !important;
box-shadow:
0 4px 8px rgba(52, 91, 99, 0.10),
0 12px 26px rgba(52, 91, 99, 0.18),
0 22px 40px -6px rgba(52, 91, 99, 0.22),
inset 0 1px 0 #ffffff,
inset 0 0 24px rgba(52, 91, 99, 0.05) !important;
padding: 6px 14px !important;
}
/* Sacred Portrait Medallion Bezel in #345B63 */
.vh-portrait-wrapper .vh-photo-stage {
width: 80px !important;
height: 80px !important;
border: 3.5px solid #345B63 !important;
box-shadow:
0 6px 18px rgba(52, 91, 99, 0.35),
0 12px 26px rgba(26, 47, 52, 0.25),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -3px 6px rgba(26, 47, 52, 0.5) !important;
}
.vh-portrait-wrapper .vh-photo-stage:hover {
transform: scale(1.04) !important;
border-color: #4a7d87 !important;
box-shadow:
0 8px 22px rgba(52, 91, 99, 0.45),
0 16px 32px rgba(26, 47, 52, 0.35),
inset 0 2px 4px rgba(255, 255, 255, 1),
inset 0 -3px 6px rgba(26, 47, 52, 0.55) !important;
}
/* Sanctuary Title & Subtitle */
.vh-card-sanctuary .vh-main-title {
font-size: 22px !important;
color: #123f38 !important;
}
.vh-card-sanctuary .vh-who-corner {
color: #345B63 !important;
}
.vh-card-sanctuary .vh-gold-rule {
background: #345B63 !important;
width: 26px !important;
height: 2px !important;
margin: 2px auto !important;
}
.vh-card-sanctuary .vh-description {
font-size: 12.5px !important;
color: #345B63 !important;
line-height: 1.25 !important;
}
/* 4. BIG RECTANGLE ELEMENTS ARE SMALLER WITH BIGGER SPACE BETWEEN THEM */
/* Section 1: Hero Triad Grid (Reduced Height, Expanded 20px Gutter) */
.vh-triad-grid {
flex: 0 0 220px !important;
height: 220px !important;
max-height: 220px !important;
gap: 20px !important;
margin: 0 !important;
}
.vh-triad-grid .vh-card {
height: 220px !important;
max-height: 220px !important;
}
/* Section 2: Timeline (Sleek Key Row & Track, Teal Borders) */
.vh-timeline-section {
flex: 0 0 58px !important;
height: 58px !important;
max-height: 58px !important;
margin: 0 !important;
}
.vh-timeline-years {
gap: 8px !important;
margin: 0 0 3px 0 !important;
}
.vh-timeline-years .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3px solid #233e44 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 2px 9px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.12), inset 0 1px 0 #ffffff !important;
}
.vh-timeline-years .vh-year:hover {
transform: translateY(-2px) !important;
border-color: #4a7d87 !important;
border-bottom: 3.5px solid #1a2f34 !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.25), inset 0 1px 0 #ffffff !important;
color: #123f38 !important;
}
.vh-timeline-years .vh-year.is-active {
background: linear-gradient(180deg, #345B63 0%, #1e353b 100%) !important;
color: #ffffff !important;
border: 1.5px solid #142529 !important;
border-bottom: 3px solid #0b1517 !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(52, 91, 99, 0.2) !important;
}
.vh-lifeline {
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-bottom-color: #ffffff !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.18) !important;
}
.vh-timeline-dot {
background: #345B63 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1px #345B63 !important;
}
/* Section 3: Thematic Taxonomy Grid (Reduced Height, Expanded 18px Gutter) */
.vh-taxonomy-section {
flex: 0 0 170px !important;
height: 170px !important;
max-height: 170px !important;
margin: 0 !important;
}
.vh-taxonomy-grid {
gap: 18px !important;
height: 100% !important;
}
.vh-card-tax {
height: 170px !important;
max-height: 170px !important;
}
.vh-tax-item-name a {
font-size: 13.5px !important;
color: #1e353b !important;
}
.vh-tax-item-name a:hover {
color: #345B63 !important;
}
.vh-tax-item-desc {
font-size: 11px !important;
line-height: 1.35 !important;
color: #3e565c !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vh-tax-item-link {
color: #345B63 !important;
}
/* Section 4: Media Bar (Compact 40px Single-Line Strip) */
.vh-card-media-section {
flex: 0 0 40px !important;
height: 40px !important;
max-height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
}
.vh-media-desc {
font-size: 12px !important;
color: #345B63 !important;
font-weight: 500 !important;
}
/* 5. 3D PILL BUTTONS WITH TEAL THEME */
.vh-btn-pill {
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border: 1.5px solid #1a2f34 !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.4) !important;
border-bottom: 2.5px solid #0f1c1f !important;
border-radius: 14px !important;
padding: 3px 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.vh-btn-pill:hover {
background: linear-gradient(180deg, #4c828d 0%, #2e545b 100%) !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.35) !important;
color: #ffffff !important;
}
.vh-founder-subline a {
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.12), inset 0 1px 0 #ffffff !important;
}
.vh-founder-subline a:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.30) !important;
}
/* ==========================================================================
STEP 20: NARROWER RECTANGLES + COMPLETE FAULT CORRECTIONS
========================================================================== */
/* 1. NARROWER PROPORTIONED CONTAINER (NO LONGER ENDLESSLY WIDE) */
body.page-Main_Page #vani-home {
max-width: 1260px !important;
width: 95% !important;
margin: 0 auto !important;
padding: 8px 16px !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* 2. SANCTUARY CENTER CARD FIXES (PROPER HIERARCHY, NO WEIRD DOUBLE BOXES) */
.vh-card-sanctuary {
padding: 8px 14px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
}
.vh-sanctuary-title {
margin: 0 !important;
line-height: 1.1 !important;
text-align: center !important;
}
.vh-sanctuary-title a {
text-decoration: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.vh-who-sub {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
text-transform: uppercase !important;
margin-bottom: 1px !important;
}
.vh-who-main {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 22px !important;
font-weight: 700 !important;
color: #123f38 !important;
letter-spacing: 0.5px !important;
}
/* Hide legacy floating who-corner and founder subline balloon boxes */
.vh-hero-title-wrap,
.vh-founder-subline::before,
.vh-founder-subline::after {
content: none !important;
display: none !important;
}
.vh-founder-subline {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Dedicated button below portrait */
.vh-founder-btn-wrap {
margin: 2px auto !important;
}
.vh-btn-founder {
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 2px 14px !important;
border-radius: 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.12), inset 0 1px 0 #ffffff !important;
display: inline-block !important;
}
.vh-btn-founder:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1.5px) !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.30) !important;
}
/* Portrait */
.vh-portrait-wrapper {
margin: 2px auto !important;
}
.vh-portrait-wrapper .vh-photo-stage {
width: 78px !important;
height: 78px !important;
border: 3px solid #345B63 !important;
box-shadow: 0 6px 16px rgba(52, 91, 99, 0.32), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(26, 47, 52, 0.5) !important;
}
.vh-gold-rule {
width: 26px !important;
height: 2px !important;
margin: 2px auto !important;
background: #345B63 !important;
}
.vh-description {
font-size: 12px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 !important;
padding: 0 !important;
max-width: 90% !important;
}
/* 3. TIMELINE LAYOUT CORRECTIONS (CLEAN & LEGIBLE TRACK) */
.vh-timeline-section {
flex: 0 0 64px !important;
height: 64px !important;
max-height: 64px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
margin: 0 !important;
padding: 0 !important;
}
.vh-timeline-years {
gap: 8px !important;
margin: 0 !important;
}
.vh-lifeline-window {
height: 34px !important;
max-height: 34px !important;
position: relative !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
}
.vh-lifeline {
height: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
.vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.vh-timeline-event {
display: inline-flex !important;
align-items: center !important;
padding: 0 10px !important;
font-size: 11px !important;
color: #1e353b !important;
white-space: nowrap !important;
}
/* 4. CLEAN MEDIA SECTION (SINGLE HORIZONTAL FLEX ROW 44px) */
.vh-card-media-section {
flex: 0 0 44px !important;
height: 44px !important;
max-height: 44px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 18px !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.vh-media-left {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.vh-media-left .vh-badge-text a {
font-size: 12px !important;
font-weight: 800 !important;
color: #345B63 !important;
letter-spacing: 1px !important;
text-decoration: none !important;
}
.vh-media-center {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 14px !important;
}
.vh-media-right {
flex-shrink: 0 !important;
}
.vh-media-right .vh-btn-pill {
padding: 3px 14px !important;
font-size: 11px !important;
}
/* 5. NARROWER HERO & TAXONOMY GRIDS WITH AMPLE SPACING */
.vh-triad-grid {
flex: 0 0 215px !important;
height: 215px !important;
max-height: 215px !important;
gap: 18px !important;
}
.vh-triad-grid .vh-card {
height: 215px !important;
max-height: 215px !important;
}
.vh-taxonomy-section {
flex: 0 0 165px !important;
height: 165px !important;
max-height: 165px !important;
}
.vh-taxonomy-grid {
gap: 16px !important;
height: 100% !important;
}
.vh-card-tax {
height: 165px !important;
max-height: 165px !important;
}
/* ==========================================================================
STEP 21: NARROW RECTANGLES (1140px) + COMPLETE FAULT CORRECTIONS
========================================================================== */
/* 1. FORCE NARROWER DASHBOARD WIDTH (OVERRIDE ALL PREVIOUS MIN-WIDTHS) */
body.page-Main_Page #vani-home {
width: 90% !important;
max-width: 1140px !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 8px 16px !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
overflow: hidden !important;
}
/* 2. NARROW HERO TRIAD (3 CARDS ~360px EACH) */
.vh-triad-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
flex: 0 0 215px !important;
height: 215px !important;
max-height: 215px !important;
width: 100% !important;
margin: 0 !important;
}
.vh-triad-grid .vh-card {
height: 215px !important;
max-height: 215px !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 65%, #f2f7f7 100%) !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16),
inset 0 1px 0 #ffffff !important;
overflow: hidden !important;
}
/* 3. SANCTUARY CENTER CARD (COMPLETELY REBUILT ARCHITECTURE) */
.vh-sanctuary-card {
padding: 8px 14px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
}
.vh-sanctuary-header-text {
margin: 0 !important;
line-height: 1 !important;
text-align: center !important;
}
.vh-sanctuary-who {
display: block !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
}
.vh-sanctuary-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 21px !important;
font-weight: 700 !important;
color: #123f38 !important;
text-decoration: none !important;
letter-spacing: 0.5px !important;
}
.vh-sanctuary-portrait-box {
margin: 2px auto !important;
}
.vh-sanctuary-portrait-box .vh-photo-stage {
width: 76px !important;
height: 76px !important;
border-radius: 50% !important;
border: 3px solid #345B63 !important;
box-shadow:
0 4px 12px rgba(52, 91, 99, 0.35),
inset 0 2px 4px #ffffff,
inset 0 -2px 4px rgba(26, 47, 52, 0.5) !important;
overflow: hidden !important;
position: relative !important;
}
.vh-sanctuary-btn-box {
margin: 2px auto !important;
}
.vh-sanctuary-founder-pill {
display: inline-block !important;
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 2px 14px !important;
border-radius: 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.15), inset 0 1px 0 #ffffff !important;
text-decoration: none !important;
}
.vh-sanctuary-founder-pill:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1px) !important;
}
.vh-sanctuary-rule {
width: 28px !important;
height: 2px !important;
background: #345B63 !important;
margin: 2px auto !important;
}
.vh-sanctuary-subtitle {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 !important;
text-align: center !important;
}
/* 4. NARROW THEMATIC TAXONOMY (4 CARDS ~270px EACH) */
.vh-taxonomy-section {
flex: 0 0 165px !important;
height: 165px !important;
max-height: 165px !important;
width: 100% !important;
margin: 0 !important;
}
.vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
height: 100% !important;
width: 100% !important;
}
.vh-card-tax {
height: 165px !important;
max-height: 165px !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 65%, #f2f7f7 100%) !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16),
inset 0 1px 0 #ffffff !important;
}
/* 5. CLEAN MEDIA BAR (HORIZONTAL SINGLE LINE) */
.vh-media-bar {
flex: 0 0 44px !important;
height: 44px !important;
max-height: 44px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 18px !important;
background: linear-gradient(180deg, #ffffff 0%, #f2f7f7 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 3px solid #233e44 !important;
border-radius: 8px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.10) !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.vh-media-bar-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.vh-media-bar-name a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
color: #345B63 !important;
letter-spacing: 1px !important;
text-decoration: none !important;
}
.vh-media-bar-desc {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 16px !important;
}
.vh-media-bar-btn {
flex-shrink: 0 !important;
}
/* ==========================================================================
STEP 22: FULL-WIDTH VIEW + NARROWER CARDS + VISIBLE TOP BORDER + ZERO CUTOUTS
========================================================================== */
/* 1. FULL WIDTH PAGE VIEW (NO ARTIFICIAL MAX-WIDTH ON CONTAINER) */
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
margin: 0 !important;
padding: 10px 30px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 12px !important;
overflow: hidden !important;
}
/* 2. VISIBLE TOP BORDER ON ALL RECTANGLE ELEMENTS (NO MORE MISSING TOP BORDER!) */
.vh-card,
.vh-card-tax,
.vh-sanctuary-card,
.vh-card-memories,
.vh-card-article,
.vh-media-bar {
border: 2px solid #345B63 !important;
border-top: 2px solid #345B63 !important; /* CRITICAL: EXPLICIT VISIBLE TOP BORDER */
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
box-shadow:
0 2px 4px rgba(52, 91, 99, 0.08),
0 8px 20px rgba(52, 91, 99, 0.14),
0 16px 30px -4px rgba(52, 91, 99, 0.16) !important;
}
.vh-card-header {
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
border-bottom: 2px solid #345B63 !important;
padding: 6px 12px !important;
}
/* 3. NARROWER RECTANGLES WITH GENEROUS GAPS (PAGE IS FULL WIDTH, CARDS ARE NARROWER) */
.vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 28px !important;
flex: 0 0 230px !important;
height: 230px !important;
max-height: 230px !important;
width: 100% !important;
margin: 0 auto !important;
}
.vh-triad-grid .vh-card {
flex: 1 1 0 !important;
max-width: 400px !important; /* NARROWER RECTANGLES */
height: 230px !important;
max-height: 230px !important;
}
/* 4. SANCTUARY CENTER CARD: ZERO WEIRD BOXES, PERFECT VERTICAL FIT */
.vh-sanctuary-card {
padding: 8px 14px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6faf9 60%, #e7f0ef 100%) !important;
}
.vh-sanctuary-header-text,
.vh-sanctuary-header-text *,
.vh-sanctuary-name,
.vh-sanctuary-name * {
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.vh-sanctuary-header-text {
margin: 0 !important;
line-height: 1 !important;
}
.vh-sanctuary-who {
display: block !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
}
.vh-sanctuary-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 21px !important;
font-weight: 700 !important;
color: #123f38 !important;
text-decoration: none !important;
display: block !important;
}
.vh-sanctuary-portrait-box {
margin: 2px auto !important;
}
.vh-sanctuary-portrait-box .vh-photo-stage {
width: 74px !important;
height: 74px !important;
border-radius: 50% !important;
border: 3px solid #345B63 !important;
box-shadow:
0 4px 12px rgba(52, 91, 99, 0.35),
inset 0 2px 4px #ffffff,
inset 0 -2px 4px rgba(26, 47, 52, 0.5) !important;
overflow: hidden !important;
position: relative !important;
}
.vh-sanctuary-btn-box {
margin: 2px auto !important;
}
.vh-sanctuary-founder-pill {
display: inline-block !important;
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #ffffff !important;
border-bottom: 2.5px solid #233e44 !important;
color: #345B63 !important;
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 3px 16px !important;
border-radius: 14px !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.15), inset 0 1px 0 #ffffff !important;
text-decoration: none !important;
}
.vh-sanctuary-founder-pill:hover {
background: linear-gradient(180deg, #345B63 0%, #223f45 100%) !important;
color: #ffffff !important;
border-color: #162c30 !important;
border-bottom: 2.5px solid #0b1719 !important;
transform: translateY(-1px) !important;
}
.vh-sanctuary-rule {
width: 26px !important;
height: 2px !important;
background: #345B63 !important;
margin: 2px auto !important;
}
.vh-sanctuary-subtitle {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.25 !important;
color: #345B63 !important;
margin: 0 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 5. PREVENT CUT OUTS IN MEMORIES & SPOTLIGHT */
.vh-card-memories .vh-card-snippet {
font-size: 11.5px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vh-card-article .vh-discover-secondary {
font-size: 11.5px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 6. TIMELINE: ZERO OVERLAPPING */
.vh-timeline-section {
flex: 0 0 68px !important;
height: 68px !important;
max-height: 68px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 1300px !important;
margin: 0 auto !important;
}
.vh-timeline-years {
position: static !important;
top: 0 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
.vh-lifeline-window {
height: 36px !important;
max-height: 36px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
.vh-lifeline {
height: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
.vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.vh-timeline-event {
display: inline-flex !important;
align-items: center !important;
padding: 0 12px !important;
font-size: 11px !important;
color: #1e353b !important;
white-space: nowrap !important;
}
/* 7. NARROWER TAXONOMY CARDS (4 CARDS ~280px EACH) */
.vh-taxonomy-section {
flex: 0 0 175px !important;
height: 175px !important;
max-height: 175px !important;
width: 100% !important;
margin: 0 auto !important;
}
.vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 22px !important;
height: 100% !important;
width: 100% !important;
}
.vh-card-tax {
flex: 1 1 0 !important;
max-width: 290px !important; /* NARROWER TAXONOMY CARDS */
height: 175px !important;
max-height: 175px !important;
}
.vh-card-tax .vh-card-body {
padding: 6px 12px !important;
height: calc(100% - 34px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.vh-tax-spotlight-item {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.vh-tax-item-desc {
font-size: 11px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 8. MEDIA BAR (PERFECT SINGLE ROW, ZERO OVERLAPPING) */
.vh-media-bar {
flex: 0 0 44px !important;
height: 44px !important;
max-height: 44px !important;
width: 100% !important;
max-width: 1300px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 20px !important;
background: linear-gradient(180deg, #ffffff 0%, #f2f7f7 100%) !important;
box-sizing: border-box !important;
}
.vh-media-bar-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.vh-media-bar-name a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
color: #345B63 !important;
letter-spacing: 1px !important;
text-decoration: none !important;
}
.vh-media-bar-desc {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 20px !important;
}
.vh-media-bar-btn {
flex-shrink: 0 !important;
}
/* ==========================================================================
STEP 23: DEFINITIVE FIXES FOR TOP BORDERS, WIDTHS, TIMELINE, FULL-WIDTH PAGE
========================================================================== */
/* 1. FULL WIDTH PAGE: UNLOCK MEDIAWIKI WRAPPERS & CONTAINERS TO 100% */
body.page-Main_Page, html.page-Main_Page {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
body.page-Main_Page #content,
body.page-Main_Page #content.mw-body,
body.page-Main_Page .mw-body,
body.page-Main_Page #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output,
body.page-Main_Page #contentWrapper,
body.page-Main_Page #container,
body.page-Main_Page .vector-body {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-left: none !important;
border-right: none !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
margin: 0 !important;
padding: 6px 16px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 10px !important;
overflow: hidden !important;
}
/* 2. TOP BORDERS: 100% VISIBLE SOLID #345B63 BORDER ON EVERY CARD & HEADER */
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page .vh-media-bar {
border: 2px solid #345B63 !important;
border-top: 2.5px solid #345B63 !important; /* ULTRA-VISIBLE TOP BORDER */
border-bottom: 3.5px solid #233e44 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-header {
border-top: 2.5px solid #345B63 !important; /* HEADER REINFORCED TOP BORDER */
border-bottom: 2px solid #345B63 !important;
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
padding: 5px 10px !important;
}
/* 3. YEAR BUTTONS: SOLID VISIBLE TOP BORDER */
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 2px solid #345B63 !important; /* EXPLICIT SOLID VISIBLE TOP BORDER */
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 3px 10px !important;
line-height: 1.2 !important;
box-shadow: 0 2px 4px rgba(52, 91, 99, 0.12) !important;
transition: all 0.18s ease !important;
}
body.page-Main_Page .vh-timeline-years .vh-year:hover,
body.page-Main_Page .vh-year:hover {
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border-color: #1a2f34 !important;
border-top: 2px solid #1a2f34 !important;
transform: translateY(-1.5px) !important;
}
body.page-Main_Page .vh-timeline-years .vh-year.is-active,
body.page-Main_Page .vh-year.is-active {
background: linear-gradient(180deg, #2b4f57 0%, #15272a 100%) !important;
color: #ffffff !important;
border: 1.5px solid #0b1517 !important;
border-top: 2px solid #0b1517 !important;
border-bottom: 2.5px solid #000000 !important;
}
/* 4. NARROW ALL RECTANGLES BY 30% */
/* HERO TRIAD: Cards narrowed to 280px (was 400px) */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 36px !important;
flex: 0 0 235px !important;
height: 235px !important;
max-height: 235px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-triad-grid .vh-card {
flex: 0 0 280px !important;
width: 280px !important;
max-width: 280px !important;
min-width: 280px !important;
height: 235px !important;
max-height: 235px !important;
}
/* TAXONOMY: 4 Cards narrowed to 210px (was 290px) */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 170px !important;
height: 170px !important;
max-height: 170px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 24px !important;
height: 100% !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-tax {
flex: 0 0 210px !important;
width: 210px !important;
max-width: 210px !important;
min-width: 210px !important;
height: 170px !important;
max-height: 170px !important;
}
/* MEDIA BAR: Narrowed to 930px to match Triad/Taxonomy cluster */
body.page-Main_Page .vh-media-bar {
flex: 0 0 42px !important;
height: 42px !important;
max-height: 42px !important;
width: 100% !important;
max-width: 930px !important;
margin: 0 auto !important;
}
/* 5. FLOWING TIMELINE: FIX VERTICAL TRUNCATION (AMP UP HEIGHT TO 70px) */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 106px !important;
height: 106px !important;
max-height: 106px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 1050px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-timeline-years {
position: static !important;
top: 0 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
height: 26px !important;
flex: 0 0 26px !important;
}
body.page-Main_Page .vh-lifeline-window {
height: 72px !important;
max-height: 72px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 2px solid #345B63 !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
position: relative !important;
}
body.page-Main_Page .vh-timeline-track {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
body.page-Main_Page .vh-timeline-event {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 64px !important;
padding: 0 14px !important;
white-space: normal !important;
width: 240px !important;
flex: 0 0 240px !important;
box-sizing: border-box !important;
border-right: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
body.page-Main_Page .vh-timeline-event .vh-event-date {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
line-height: 1.2 !important;
}
body.page-Main_Page .vh-timeline-event .vh-event-title,
body.page-Main_Page .vh-timeline-event .vh-event-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11px !important;
line-height: 1.35 !important;
color: #1e353b !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 6. SANCTUARY PORTRAIT & BUTTONS - POLISHED HIERARCHY */
body.page-Main_Page .vh-sanctuary-card {
padding: 8px 12px !important;
}
body.page-Main_Page .vh-sanctuary-who {
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #345B63 !important;
margin-bottom: 1px !important;
}
body.page-Main_Page .vh-sanctuary-name a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
color: #123f38 !important;
line-height: 1.1 !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 72px !important;
height: 72px !important;
border: 2.5px solid #345B63 !important;
border-radius: 50% !important;
box-shadow: 0 4px 10px rgba(52, 91, 99, 0.3) !important;
overflow: hidden !important;
margin: 2px auto !important;
}
body.page-Main_Page .vh-sanctuary-founder-pill {
font-size: 10.5px !important;
font-weight: 700 !important;
padding: 2.5px 12px !important;
border: 1.5px solid #345B63 !important;
border-top: 2px solid #345B63 !important; /* SOLID VISIBLE TOP BORDER */
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
color: #345B63 !important;
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
text-decoration: none !important;
display: inline-block !important;
}
body.page-Main_Page .vh-sanctuary-founder-pill:hover {
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border-color: #1a2f34 !important;
}
body.page-Main_Page .vh-sanctuary-rule {
width: 24px !important;
height: 2px !important;
background: #345B63 !important;
margin: 2px auto !important;
}
body.page-Main_Page .vh-sanctuary-subtitle {
font-size: 11px !important;
color: #345B63 !important;
line-height: 1.2 !important;
}
/* ==========================================================================
STEP 24: FIX THICK BORDERS, FULL-WIDTH EDGES, AND BOTTOM OVERLAPPING
========================================================================== */
/* 1. FORCE 100% TRUE FULL-WIDTH (STRIP VECTOR 2022 LEFT/RIGHT INDENTATIONS) */
body.page-Main_Page, html.page-Main_Page {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
body.page-Main_Page #content,
body.page-Main_Page #content.mw-body,
body.page-Main_Page .mw-body,
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output,
body.page-Main_Page .vector-body,
body.page-Main_Page #contentWrapper,
body.page-Main_Page #container {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
border: none !important;
border-left: none !important;
border-right: none !important;
box-sizing: border-box !important;
left: 0 !important;
}
body.page-Main_Page #mw-panel,
body.page-Main_Page .mw-sidebar-container,
body.page-Main_Page .vector-sidebar-container,
body.page-Main_Page .vector-column-start {
display: none !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 52px) !important;
max-height: calc(100vh - 52px) !important;
margin: 0 !important;
padding: 8px 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* PREVENTS PUSHING MEDIA SECTION OFF-SCREEN */
gap: 12px !important;
overflow: hidden !important;
}
/* 2. FIX UNUSUAL THICK TOP BORDER: UNIFORM 1.5px ON ALL CARDS & NO HEADER BORDER-TOP */
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-tax {
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #345B63 !important; /* CRISP UNIFORM 1.5px (NOT THICK!) */
border-bottom: 3px solid #233e44 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-header {
border-top: none !important; /* REMOVE DUPLICATE TOP BORDER ON HEADER */
border-left: none !important;
border-right: none !important;
border-bottom: 1.5px solid #345B63 !important;
border-top-left-radius: 6.5px !important;
border-top-right-radius: 6.5px !important;
padding: 5px 12px !important;
}
/* 3. HERO TRIAD (30% NARROWER RECTANGLES, PERFECTLY CENTERED) */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 32px !important;
flex: 0 0 225px !important;
height: 225px !important;
max-height: 225px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-triad-grid .vh-card {
flex: 0 0 280px !important;
width: 280px !important;
max-width: 280px !important;
min-width: 280px !important;
height: 225px !important;
max-height: 225px !important;
}
/* 4. FULL-WIDTH FLOWING TIMELINE (STRETCHES EDGE-TO-EDGE) */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 96px !important;
height: 96px !important;
max-height: 96px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important; /* FULL WIDTH EDGE-TO-EDGE */
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-timeline-years {
position: static !important;
display: flex !important;
justify-content: center !important;
gap: 7px !important;
margin: 0 auto !important;
padding: 0 !important;
height: 25px !important;
flex: 0 0 25px !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 2px 9px !important;
line-height: 1.2 !important;
box-shadow: 0 2px 4px rgba(52, 91, 99, 0.12) !important;
}
body.page-Main_Page .vh-lifeline-window {
height: 64px !important;
max-height: 64px !important;
width: 100% !important;
max-width: 100% !important; /* FULL WIDTH TRACK */
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
width: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 1.5px solid #345B63 !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important; /* CONTINUOUS SEAMLESS EDGE-TO-EDGE */
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
body.page-Main_Page .vh-timeline-event {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 60px !important;
padding: 0 14px !important;
white-space: normal !important;
width: 240px !important;
flex: 0 0 240px !important;
box-sizing: border-box !important;
border-right: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
/* 5. TAXONOMY 4 CARDS (30% NARROWER RECTANGLES, PERFECT FIT) */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 165px !important;
height: 165px !important;
max-height: 165px !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 22px !important;
height: 100% !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-tax {
flex: 0 0 210px !important;
width: 210px !important;
max-width: 210px !important;
min-width: 210px !important;
height: 165px !important;
max-height: 165px !important;
}
/* 6. FIX BOTTOM OVERLAPPING: SINGLE-CONTAINER MEDIA BAR */
body.page-Main_Page .vh-media-bar,
body.page-Main_Page .vh-card-media-section {
flex: 0 0 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
width: 920px !important;
max-width: 920px !important;
margin: 0 auto !important;
padding: 0 18px !important;
background: linear-gradient(180deg, #ffffff 0%, #edf5f5 100%) !important;
border: 1.5px solid #345B63 !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 2.5px solid #233e44 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
overflow: hidden !important;
box-shadow: 0 2px 5px rgba(52, 91, 99, 0.10) !important;
}
/* STRIP ALL NESTED SUB-BOXES / INTERNAL BORDERS IN MEDIA SECTION */
body.page-Main_Page .vh-media-bar > div,
body.page-Main_Page .vh-media-bar-title,
body.page-Main_Page .vh-media-bar-desc,
body.page-Main_Page .vh-media-bar-btn,
body.page-Main_Page .vh-card-media-section > div,
body.page-Main_Page .vh-card-media-section .vh-card-header,
body.page-Main_Page .vh-card-media-section .vh-media-body,
body.page-Main_Page .vh-card-media-section .vh-media-desc,
body.page-Main_Page .vh-card-media-section .vh-media-actions {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
height: auto !important;
max-height: none !important;
}
body.page-Main_Page .vh-media-bar-title,
body.page-Main_Page .vh-card-media-section .vh-card-header {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
body.page-Main_Page .vh-media-bar-desc,
body.page-Main_Page .vh-card-media-section .vh-media-desc {
flex: 1 1 auto !important;
text-align: center !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11.5px !important;
color: #273b40 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 16px !important;
}
body.page-Main_Page .vh-media-bar-btn,
body.page-Main_Page .vh-card-media-section .vh-media-actions {
flex-shrink: 0 !important;
}
body.page-Main_Page .vh-media-bar-btn .vh-btn-pill,
body.page-Main_Page .vh-card-media-section .vh-btn-pill {
padding: 2.5px 12px !important;
font-size: 10.5px !important;
}
/* ==========================================================================
STEP 51: DEFINITIVE CLEAN ARCHITECTURE & VISIBLE AT-REST ANIMATION
========================================================================== */
/* 1. CANVAS & WRAPPER RESET (FULL WIDTH, NO SIDEBAR) */
body.page-Main_Page, html.page-Main_Page {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
background-color: #f6f2e9 !important;
background-image: none !important;
}
body.page-Main_Page #content,
body.page-Main_Page #content.mw-body,
body.page-Main_Page .mw-body,
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 #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output,
body.page-Main_Page .vector-body,
body.page-Main_Page #contentWrapper,
body.page-Main_Page #container {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
left: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #mw-panel,
body.page-Main_Page .mw-sidebar-container,
body.page-Main_Page .vector-sidebar-container,
body.page-Main_Page .vector-column-start {
display: none !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 2. MAIN CONTAINER: FULL VIEWPORT HEIGHT SPREAD TOP TO BOTTOM */
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 54px) !important;
max-height: calc(100vh - 54px) !important;
margin: 0 !important;
padding: 18px 40px 14px 40px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important; /* SPREAD CONTENT FROM TOP TO BOTTOM */
gap: 0 !important;
overflow: hidden !important;
}
/* 3. CARDS: 100% TRANSPARENT OPEN SPACE (NO BOXES, NO BORDERS) */
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page .vh-media-bar,
body.page-Main_Page .vh-card-media-section {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
transition: none !important;
box-sizing: border-box !important;
}
/* Hide all old badges, buttons, headers, and clutter */
body.page-Main_Page .vh-card-header,
body.page-Main_Page .vh-card-actions,
body.page-Main_Page .vh-sanctuary-btn-box,
body.page-Main_Page .vh-sanctuary-rule,
body.page-Main_Page .vh-sanctuary-who,
body.page-Main_Page .vh-badge-sub,
body.page-Main_Page .vh-badge-icon,
body.page-Main_Page .vh-tax-item-link,
body.page-Main_Page .vh-random-article-more,
body.page-Main_Page .vh-media-bar-btn {
display: none !important;
}
body.page-Main_Page .vh-card-body {
background: transparent !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
height: 100% !important;
text-align: center !important;
}
/* 4. SECTION 1: HERO TRIAD (SPREAD ACROSS 1450px) */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
flex: 0 0 295px !important; /* EXPANDED HEIGHT FOR 180px PORTRAIT */
height: 295px !important;
max-height: 295px !important;
}
body.page-Main_Page .vh-triad-grid .vh-card {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
}
body.page-Main_Page .vh-triad-grid .vh-sanctuary-card {
flex: 0 0 360px !important;
width: 360px !important;
max-width: 360px !important;
}
/* Sanctuary Portrait Medallion */
body.page-Main_Page .vh-sanctuary-portrait-box {
margin: 4px auto 6px auto !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box {
width: 180px !important;
height: 180px !important;
margin: 6px auto 10px auto !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 180px !important; /* +120% BIGGER (82px -> 180px) */
height: 180px !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
border-radius: 50% !important;
box-shadow:
0 8px 24px rgba(18, 63, 56, 0.32),
0 2px 6px rgba(0, 0, 0, 0.18),
inset 0 2px 5px rgba(255, 255, 255, 0.7),
inset 0 -3px 6px rgba(0, 0, 0, 0.3) !important;
overflow: hidden !important;
margin: 0 auto !important;
position: relative !important;
}
/* 5. SECTION 2: TIMELINE (EDGE TO EDGE FULL WIDTH) */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 106px !important;
height: 106px !important;
max-height: 106px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-timeline-years {
position: static !important;
display: flex !important;
justify-content: center !important;
gap: 10px !important;
margin: 0 auto !important;
padding: 0 !important;
height: 27px !important;
flex: 0 0 27px !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
border: 1.5px solid #345B63 !important;
border-bottom: 2.5px solid #1a2f34 !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #345B63 !important;
padding: 2px 9px !important;
line-height: 1.2 !important;
box-shadow: 0 2px 4px rgba(52, 91, 99, 0.12) !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
}
body.page-Main_Page .vh-timeline-years .vh-year:hover,
body.page-Main_Page .vh-year:hover {
transform: translateY(-1.5px) !important;
background: linear-gradient(180deg, #3d6a74 0%, #25444a 100%) !important;
color: #ffffff !important;
border-color: #1a2f34 !important;
}
body.page-Main_Page .vh-timeline-years .vh-year.is-active,
body.page-Main_Page .vh-year.is-active {
background: linear-gradient(180deg, #2b4f57 0%, #15272a 100%) !important;
color: #ffffff !important;
border: 1.5px solid #0b1517 !important;
border-bottom: 2px solid #000000 !important;
}
body.page-Main_Page .vh-lifeline-window {
height: 68px !important;
max-height: 68px !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
width: 100% !important;
background: linear-gradient(180deg, #dce8e8 0%, #e8f0f0 100%) !important;
border-top: 1.5px solid #345B63 !important;
border-bottom: 1.5px solid #345B63 !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important;
box-shadow: inset 0 2px 4px rgba(52, 91, 99, 0.15) !important;
}
body.page-Main_Page .vh-timeline-event {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 64px !important;
padding: 0 18px !important;
white-space: normal !important;
width: 250px !important;
flex: 0 0 250px !important;
box-sizing: border-box !important;
border-right: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
/* 6. SECTION 3: THEMATIC TAXONOMY (SPREAD ACROSS 1450px) */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 155px !important;
height: 155px !important;
max-height: 155px !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
height: 100% !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-tax {
flex: 0 0 260px !important;
width: 260px !important;
max-width: 260px !important;
}
/* 7. SECTION 4: MEDIA BAR (SPREAD ACROSS 1450px) */
body.page-Main_Page .vh-media-bar {
flex: 0 0 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
padding: 0 24px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
border-top: 1px dashed rgba(52, 91, 99, 0.3) !important;
border-bottom: 1px dashed rgba(52, 91, 99, 0.3) !important;
}
/* 8. DESCRIPTIVE TEXT IN CARDS */
body.page-Main_Page .vh-card-text,
body.page-Main_Page .vh-card-snippet,
body.page-Main_Page .vh-tax-item-desc,
body.page-Main_Page .vh-random-article-extract {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #2c3e42 !important;
margin: 0 !important;
text-shadow: none !important;
}
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important; /* 50% LARGER (12.5px -> 19px) */
font-weight: 600 !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
font-style: italic !important;
max-width: 380px !important;
margin: 0 auto !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
body.page-Main_Page .vh-card-tax .vh-card-text {
font-size: 12.5px !important;
line-height: 1.5 !important;
}
body.page-Main_Page .vh-media-text {
font-size: 12px !important;
font-style: italic !important;
}
/* ==========================================================================
9. CAITANYA 3D TITLES + VISIBLE AT-REST BREATHING LINE + ON-HOVER FULL GLIDE
========================================================================== */
/* Title Containers */
body.page-Main_Page .vh-card-title,
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-random-article-title,
body.page-Main_Page .vh-media-title {
display: block !important;
text-align: center !important;
margin-bottom: 8px !important;
transform: none !important;
}
/* ALL TITLE LINKS (KEEPING THE EXACT GORGEOUS 3D STYLE FROM USER'S SCREENSHOT) */
body.page-Main_Page .vh-card-title a,
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-sanctuary-title a,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title a,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page
-Main_Page .vh-media-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 7px !important; /* PERFECT SPACE FOR UNDERLINE */
letter-spacing: 0.025em !important;
line-height: 1.25 !important;
cursor: pointer !important;
transform: none !important;
/* 1. LIGHT COLOR FACE (The exact warm temple gold from screenshot) */
color: #dfad3e !important;
-webkit-text-fill-color: #dfad3e !important;
/* 2. DARK SIDES & DEEP CAST SHADOW (The exact 3D from screenshot) */
text-shadow: none !important;
transition: transform 0.22s ease, color 0.22s ease, text-shadow 0.22s ease !important;
}
/* Specific Font Sizes */
body.page-Main_Page .vh-sanctuary-title a {
font-size: 28px !important;
letter-spacing: 0.03em !important;
}
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title a {
font-size: 20px !important;
}
body.page-Main_Page .vh-card-tax .vh-card-title a {
font-size: 18.5px !important;
}
body.page-Main_Page .vh-media-title a {
font-size: 14.5px !important;
}
/* ==========================================================================
3. THE GOLDEN FILAMENT LINE BENEATH TITLES (RESTORES THE USER'S FAVORITE FEATURE!)
- At Rest: Gently breathes in and out (25% to 65% width) so animation is clearly visible!
- On Hover: Pauses breathing and smoothly glides to full 90% width!
========================================================================== */
body.page-Main_Page .vh-card-title a::after,
body.page-Main_Page .vh-card-memories .vh-card-title a::after,
body.page-Main_Page .vh-sanctuary-title a::after,
body.page-Main_Page .vh-card-article .vh-card-title a::after,
body.page-Main_Page .vh-random-article-title a::after,
body.page-Main_Page .vh-card-tax .vh-card-title a::after,
body.page-Main_Page .vh-media-title a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(223, 173, 62, 0.4) 15%,
#dfad3e 50%,
rgba(223, 173, 62, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(223, 173, 62, 0.75) !important;
border-radius: 2px !important;
pointer-events: none !important;
/* AT REST: VISIBLE BREATHING ANIMATION (2.8s CYCLE) */
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease !important;
}
/* At-Rest Line Breathing Keyframes */
@keyframes vhLineBreath {
0%, 100% {
width: 25%;
left: 37.5%;
opacity: 0.35;
}
50% {
width: 65%;
left: 17.5%;
opacity: 0.95; /* Clearly visible expanding light bar! */
}
}
/* ==========================================================================
4. ON MOUSE HOVER: FULL GOLDEN LINE GLIDE + DIRECT SUNLIGHT 3D ILLUMINATION
========================================================================== */
body.page-Main_Page .vh-card-title a:hover,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page .vh-sanctuary-title a:hover,
body.page-Main_Page .vh-card-article .vh-card-title a:hover,
body.page-Main_Page .vh-random-article-title a:hover,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover,
body.page-Main_Page .vh-media-title a:hover {
transform: translateY(-2.5px) !important; /* RETAINS 3D STEP MOVEMENT */
color: #dfad3e !important; /* DOES NOT CHANGE COLOR (STAYS RICH GOLD) */
-webkit-text-fill-color: #dfad3e !important; /* 100% CONSTANT COLOR */
text-decoration: none !important;
/* Extended 3D shadow deepening as the letters step forward */
text-shadow: none !important;
}
/* ON HOVER: LINE GLIDES OUT TO FULL 90% WIDTH & STAYS SOLID GOLD */
body.page-Main_Page .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover::after,
body.page-Main_Page .vh-sanctuary-title a:hover::after,
body.page-Main_Page .vh-card-article .vh-card-title a:hover::after,
body.page-Main_Page .vh-random-article-title a:hover::after,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover::after,
body.page-Main_Page .vh-media-title a:hover::after {
animation: none !important; /* Stops at-rest breathing */
opacity: 1 !important;
width: 90% !important; /* FULL EXTENSION GLIDE! */
left: 5% !important;
/* EXACT SAME GOLD COLOR AS AT REST — ZERO COLOR CHANGE */
background: linear-gradient(
90deg,
transparent 0%,
rgba(223, 173, 62, 0.4) 15%,
#dfad3e 50%,
rgba(223, 173, 62, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(223, 173, 62, 0.75) !important;
}
/* ==========================================================================
STEP 56: TIMELINE EXPANSION (NO TEXT CROPPING, NO BG, NO LINE) & CAPTION REGULAR
========================================================================== */
/* 1. SANCTUARY CAPTION: REGULAR (NOT ITALIC) */
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-style: normal !important; /* REGULAR, NOT ITALIC */
font-weight: 600 !important;
font-size: 19px !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
text-align: center !important;
}
/* 2. TIMELINE SECTION: EXPANDED HEIGHT TO PREVENT ALL TEXT CROPPING */
body.page-Main_Page .vh-timeline-section {
flex: 0 0 134px !important;
height: 134px !important;
min-height: 134px !important;
max-height: 134px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
/* 3. LIFELINE WINDOW & TRACK: TRANSPARENT, NO TOP LINE, HEIGHT 96px */
body.page-Main_Page .vh-lifeline-window {
height: 96px !important; /* EXPANDED HEIGHT (WAS 68px) */
min-height: 96px !important;
max-height: 96px !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
}
body.page-Main_Page .vh-lifeline {
height: 100% !important;
width: 100% !important;
background: transparent !important; /* REMOVE BACKGROUND */
border: none !important; /* REMOVE ALL BORDERS */
border-top: none !important; /* REMOVE LINE ABOVE */
border-bottom: none !important;
box-shadow: none !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 96px !important;
min-height: 96px !important;
max-height: 96px !important;
}
/* The horizontal golden guide line across the timeline items */
body.page-Main_Page .vh-timeline-track::before {
top: 36px !important;
background: rgba(177, 135, 61, 0.4) !important;
}
/* 4. TIMELINE ITEM: EXACT 240px MATCH WITH JAVASCRIPT ITEM_WIDTH */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item,
body.page-Main_Page .vh-timeline-event {
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
flex: 0 0 240px !important;
height: 96px !important;
min-height: 96px !important;
max-height: 96px !important;
box-sizing: border-box !important;
padding: 8px 16px !important;
background: transparent !important;
border: none !important;
}
body.page-Main_Page .vh-timeline-date {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important; /* Clear Gold Date */
margin-bottom: 2px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
body.page-Main_Page .vh-timeline-dot {
width: 9px !important;
height: 9px !important;
background: #345B63 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #345B63 !important;
margin: 4px 0 !important;
}
body.page-Main_Page .vh-timeline-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.38 !important;
color: #2c3e42 !important;
overflow: visible !important; /* NEVER CROPPED */
white-space: normal !important;
display: block !important;
}
/* ==========================================================================
STEP 57: TIMELINE FULL BLEED (EDGE-TO-EDGE), 50% TALLER (150px),
DOT/TEXT SEPARATION (ZERO OVERLAP), NO THIN LINE ABOVE,
AND CAPTION REGULAR (NOT ITALIC)
========================================================================== */
/* 1. SANCTUARY CAPTION: REGULAR (NOT ITALIC) */
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-style: normal !important; /* REGULAR (NOT ITALIC) */
font-weight: 600 !important;
font-size: 19px !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
text-align: center !important;
}
/* 2. REMOVE ALL THIN LINES ABOVE TIMELINE (NO TOP BORDERS ANYWHERE) */
body.page-Main_Page .vh-triad-grid,
body.page-Main_Page .vh-timeline-section,
body.page-Main_Page #vh-timeline-years,
body.page-Main_Page .vh-timeline-years,
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
border: none !important;
border-top: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
}
/* 3. STRETCH TIMELINE EDGE-TO-EDGE TO VERY LEFT AND RIGHT (FULL BLEED) */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
position: relative !important;
flex: 0 0 190px !important; /* EXPANDED TOTAL HEIGHT (150px track + 40px buttons) */
height: 190px !important;
min-height: 190px !important;
max-height: 190px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
background: transparent !important;
box-sizing: border-box !important;
}
/* Year buttons container centered */
body.page-Main_Page .vh-timeline-years,
body.page-Main_Page #vh-timeline-years {
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
display: flex !important;
justify-content: center !important;
gap: 10px !important;
height: 28px !important;
flex: 0 0 28px !important;
}
/* 4. TIMELINE TRACK WINDOW: 50% TALLER (150px) & FULL BLEED (VERY LEFT TO VERY RIGHT) */
body.page-Main_Page .vh-lifeline-window {
width: 100vw !important;
max-width: 100vw !important;
height: 150px !important; /* 50% TALLER (WAS 96px -> NOW 150px) */
min-height: 150px !important;
max-height: 150px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
background: transparent !important;
}
body.page-Main_Page .vh-lifeline {
width: 100% !important;
height: 100% !important;
background: transparent !important;
position: relative !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 150px !important;
min-height: 150px !important;
max-height: 150px !important;
display: flex !important;
align-items: flex-start !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
/* The horizontal golden guide line passing through the dots */
body.page-Main_Page .vh-timeline-track::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 28px !important; /* GUIDE LINE POSITION */
height: 1.5px !important;
background: rgba(177, 135, 61, 0.45) !important;
z-index: 1 !important;
}
/* 5. TIMELINE ITEM & DOT / TEXT SEPARATION (ZERO OVERLAP!) */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
flex: 0 0 250px !important;
height: 150px !important; /* FULL 150px HEIGHT */
min-height: 150px !important;
max-height: 150px !important;
box-sizing: border-box !important;
padding: 6px 18px !important;
background: transparent !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* Date at the very top */
body.page-Main_Page .vh-timeline-date {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 18px !important;
margin: 0 0 2px 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
z-index: 2 !important;
}
/* Dot on the horizontal line (top: 24px) */
body.page-Main_Page .vh-timeline-dot {
position: absolute !important;
top: 24px !important; /* CENTERED ON THE 28px LINE */
left: 18px !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #233e44 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #b1873d !important;
z-index: 3 !important;
}
/* Event text starts strictly BELOW the dot and line (CLEAR SEPARATION) */
body.page-Main_Page .vh-timeline-text {
margin-top: 18px !important; /* PUSHES TEXT SAFELY BELOW THE DOT! */
padding-top: 0 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #2c3e42 !important;
white-space: normal !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important; /* NEVER CROPPED */
max-height: 100px !important; /* COMFORTABLY HOLDS 6-7 LINES */
}
/* Edge fades on the timeline window (seamless left & right fade) */
body.page-Main_Page .vh-lifeline-window::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 50px !important;
background: linear-gradient(to right, #f6f2e9 0%, rgba(246, 242, 233, 0) 100%) !important;
z-index: 10 !important;
pointer-events: none !important;
}
body.page-Main_Page .vh-lifeline-window::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
width: 50px !important;
background: linear-gradient(to left, #f6f2e9 0%, rgba(246, 242, 233, 0) 100%) !important;
z-index: 10 !important;
pointer-events: none !important;
}
/* ==========================================================================
STEP 58: ABSOLUTE CROPPING ELIMINATION & PERFECT TIMELINE DOT ALIGNMENT
========================================================================== */
/* --------------------------------------------------------------------------
1. HERO TRIAD & PRABHUPĀDA CARD: UNCONSTRAINED HEIGHT (ZERO CROPPING)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home {
height: auto !important;
min-height: calc(100vh - 54px) !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
body.page-Main_Page .vh-triad-grid {
flex: 0 0 auto !important;
height: auto !important;
min-height: 330px !important; /* AMPLE ROOM FOR 180px CIRCLE + CAPTION */
max-height: none !important;
overflow: visible !important;
}
body.page-Main_Page .vh-card,
body.page-Main_Page .vh-triad-grid .vh-card,
body.page-Main_Page .vh-sanctuary-card,
body.page-Main_Page .vh-triad-grid .vh-sanctuary-card,
body.page-Main_Page .vh-card-memories,
body.page-Main_Page .vh-card-article,
body.page-Main_Page .vh-card-body {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
body.page-Main_Page .vh-triad-grid .vh-sanctuary-card {
flex: 0 0 380px !important;
width: 380px !important;
max-width: 380px !important;
}
/* Portrait Medallion: 180px */
body.page-Main_Page .vh-sanctuary-portrait-box {
width: 180px !important;
height: 180px !important;
margin: 6px auto 12px auto !important;
overflow: visible !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 180px !important; /* FULL 180px CIRCLE */
height: 180px !important;
border-radius: 50% !important;
overflow: hidden !important; /* CLIPS ONLY THE PHOTO, NOT THE CARD */
position: relative !important;
margin: 0 auto !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
box-shadow:
0 8px 24px rgba(18, 63, 56, 0.32),
0 2px 6px rgba(0, 0, 0, 0.18) !important;
}
/* Caption: Regular (Not Italic) at 19px */
body.page-Main_Page .vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-style: normal !important; /* STRICTLY REGULAR (NOT ITALIC) */
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: #2b4b52 !important;
max-width: 380px !important;
margin: 0 auto !important;
text-align: center !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
/* --------------------------------------------------------------------------
2. TIMELINE: 50% TALLER (155px), FULL BLEED, NO THIN TOP LINES
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid,
body.page-Main_Page .vh-timeline-section,
body.page-Main_Page #vh-timeline-years,
body.page-Main_Page .vh-timeline-years,
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
border: none !important;
border-top: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Full Bleed Timeline Section */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 195px !important;
height: 195px !important;
min-height: 195px !important;
max-height: 195px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
background: transparent !important;
}
/* Track Window: 50% Taller (155px) */
body.page-Main_Page .vh-lifeline-window {
width: 100vw !important;
max-width: 100vw !important;
height: 155px !important; /* 50% TALLER (HOLDS 6-7 FULL LINES) */
min-height: 155px !important;
max-height: 155px !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
background: transparent !important;
}
body.page-Main_Page .vh-lifeline {
width: 100% !important;
height: 100% !important;
background: transparent !important;
position: relative !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 155px !important;
min-height: 155px !important;
max-height: 155px !important;
display: flex !important;
align-items: flex-start !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
/* Horizontal Guide Line: Fixed at top: 30px */
body.page-Main_Page .vh-timeline-track::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 30px !important; /* GUIDE LINE LEVEL */
height: 1.5px !important;
background: rgba(177, 135, 61, 0.45) !important;
z-index: 1 !important;
}
/* --------------------------------------------------------------------------
3. TIMELINE ITEM: PERFECT VERTICAL & HORIZONTAL DOT ALIGNMENT
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
flex: 0 0 250px !important;
height: 155px !important; /* FULL 155px HEIGHT */
min-height: 155px !important;
max-height: 155px !important;
box-sizing: border-box !important;
padding: 6px 16px !important;
background: transparent !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* Date Text: Centered horizontally above the dot */
body.page-Main_Page .vh-timeline-date {
width: 100% !important;
text-align: center !important; /* CENTERED HORIZONTALLY */
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 18px !important;
margin: 0 0 4px 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
z-index: 2 !important;
}
/* Dot: EXACTLY CENTERED VERTICALLY ON THE 30px LINE & HORIZONTALLY WITH DATE */
body.page-Main_Page .vh-timeline-dot {
position: absolute !important;
top: 25px !important; /* 25px + 5px radius = 30px center (EXACT ON LINE!) */
left: 50% !important; /* CENTERED HORIZONTALLY */
transform: translateX(-50%) !important; /* PERFECT HORIZONTAL ALIGNMENT WITH DATE */
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #233e44 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #b1873d !important;
z-index: 3 !important;
margin: 0 !important;
}
/* Event Text: Safely below the line and dot (ZERO OVERLAPPING) */
body.page-Main_Page .vh-timeline-text {
margin-top: 22px !important; /* PUSHES TEXT SAFELY BELOW THE DOT */
padding-top: 0 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #2c3e42 !important;
white-space: normal !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important; /* NEVER CROPPED */
max-height: 105px !important; /* COMFORTABLY HOLDS 6-7 FULL LINES */
text-align: center !important;
}
/* ==========================================================================
STEP 59: TOP BAR HELP TEXT REMOVAL, TIMELINE 3-TIER AXIS CENTERING,
AND SEAMLESS TITLE MORPH (Śrīla Prabhupāda <-> Who Is Śrīla Prabhupāda)
========================================================================== */
/* 1. TOP BAR: SUPPRESS ALL HOVER HELP TEXTS & TOOLTIPS */
#mw-head [title]::before,
#mw-head [title]::after,
.vector-header [title]::before,
.vector-header [title]::after,
.mw-tooltip,
.tipsy,
.tipsy-inner,
.tooltip {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 2. PERMANENT SANCTUARY HERO TITLE: "Who Is Śrīla Prabhupāda" (NO TEXT CHANGE ON HOVER) */
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title {
margin: 0 !important;
text-align: center !important;
line-height: 1.1 !important;
}
body.page-Main_Page .vh-sanctuary-title a,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a {
position: relative !important;
display: inline-block !important;
min-width: 0 !important;
text-align: center !important;
white-space: nowrap !important;
}
/* Neutralize and remove all text-swapping / morph behavior */
body.page-Main_Page .vh-sanctuary-title .vh-title-hover,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title .vh-title-hover {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Main_Page .vh-sanctuary-title .vh-title-default,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title .vh-title-default {
display: inline !important;
position: static !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
body.page-Main_Page .vh-sanctuary-title a:hover .vh-title-default,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a:hover .vh-title-default {
opacity: 1 !important;
transform: none !important;
}
/* 3. TIMELINE: PERFECT 3-TIER CENTER ALIGNMENT (DATE, DOT, AND TEXT) */
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
flex: 0 0 250px !important;
height: 155px !important;
box-sizing: border-box !important;
padding: 6px 14px !important;
background: transparent !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* PERFECT HORIZONTAL AXIS CENTERING */
text-align: center !important;
}
/* Date at the top: centered */
body.page-Main_Page .vh-timeline-date {
width: 100% !important;
text-align: center !important; /* CENTERED */
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #b1873d !important;
height: 18px !important;
line-height: 18px !important;
margin: 0 auto 4px auto !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
z-index: 2 !important;
}
/* Horizontal Guide Line */
body.page-Main_Page .vh-timeline-track::before {
top: 30px !important;
height: 1.5px !important;
background: rgba(177, 135, 61, 0.45) !important;
}
/* Dot: Center vertically on the 30px line, and horizontally with the date */
body.page-Main_Page .vh-timeline-dot {
position: absolute !important;
top: 25px !important; /* 25px + 5px radius = 30px (EXACT ON LINE) */
left: 50% !important; /* EXACT HORIZONTAL CENTER */
transform: translateX(-50%) !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #233e44 !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1.5px #b1873d !important;
z-index: 3 !important;
margin: 0 !important;
}
/* Text below: Properly centered under the dot with ample clearance */
body.page-Main_Page .vh-timeline-text {
width: 100% !important;
max-width: 220px !important;
margin: 24px auto 0 auto !important; /* CLEARLY BELOW DOT & LINE */
padding-top: 0 !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: #2c3e42 !important;
text-align: center !important; /* PROPERLY CENTERED TEXT */
white-space: normal !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important;
max-height: 105px !important;
}
/* Suppress any tooltip on top bar header title */
#vanipedia-header-title,
.vh-header-title,
.vanipedia-header-title,
#p-logo,
.vector-header {
-webkit-user-select: none !important;
user-select: none !important;
}
/* Transition for Remembering Prabhupada random spotlight */
#vh-random-memories,
.vh-card-memories .vh-card-body {
transition: opacity .7s ease, transform .7s ease;
}
#vh-random-memories.is-changing,
.vh-card-memories .vh-card-body.is-changing {
opacity: 0 !important;
transform: translateY(5px);
}
/* Transition ONLY the text below the titles when randomizing (STEP 70) */
.vh-card-tax .vh-card-text {
transition: opacity .6s ease, transform .6s ease !important;
}
.vh-card-tax .vh-card-text.is-changing,
#vh-tax-random-personality.is-changing,
#vh-tax-random-name.is-changing,
#vh-tax-random-place.is-changing,
#vh-tax-random-question.is-changing {
opacity: 0 !important;
transform: translateY(4px) !important;
}
/* Rotator Titles remain opaque during text rotation while allowing hover rise */
.vh-card-tax .vh-card-title,
.vh-card-tax .vh-card-body > .vh-card-title {
opacity: 1 !important;
animation: none !important;
}
.vh-card-tax .vh-card-title a {
opacity: 1 !important;
animation: none !important;
display: inline-block !important;
}
/* ==========================================================================
STEP 69: FIX BACKGROUND COLOR SCROLL BLEED & STICKY TOP BAR
========================================================================== */
/* 1. PERSISTENT STICKY TOP BAR WHEN SCROLLING DOWN */
.vector-header-container,
#mw-head,
.mw-header {
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
background-color: #345B63 !important;
}
/* 2. PREVENT BACKGROUND COLOR CUTOFF ON SCROLL (SOLID SAGE/TEAL ON ALL PAGES) */
html {
min-height: 100% !important;
background-color: #D4ECDD !important;
}
body {
min-height: 100% !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,
html:not(.skin-theme-clientpref-night) .mw-content-container {
min-height: 100vh !important;
background-color: #D4ECDD !important;
}
/* Restrict cream background strictly to Main Page */
html.page-Main_Page,
body.page-Main_Page {
background-color: #f6f2e9 !important;
}
/* 3. ŚRĪLA PRABHUPĀDA IN THE MEDIA: ARCHIVAL THUMBNAIL STYLING */
body.page-Main_Page .vh-media-bar {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 18px !important;
height: auto !important;
min-height: 48px !important;
max-height: none !important;
padding: 6px 24px !important;
}
body.page-Main_Page .vh-media-title {
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-media-text {
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-media-archival-thumb,
.vh-media-archival-thumb {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
transition: opacity .7s ease, transform .7s ease;
}
body.page-Main_Page .vh-media-archival-thumb.is-changing,
.vh-media-archival-thumb.is-changing {
opacity: 0 !important;
transform: scale(0.95);
}
body.page-Main_Page .vh-media-archival-thumb a {
display: block !important;
border-radius: 4px !important;
overflow: hidden !important;
border: 1.5px solid rgba(177, 135, 61, 0.45) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
line-height: 0 !important;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
body.page-Main_Page .vh-media-archival-thumb a:hover {
transform: translateY(-2px) scale(1.05) !important;
border-color: #dfad3e !important;
box-shadow: 0 4px 12px rgba(177, 135, 61, 0.35) !important;
}
body.page-Main_Page .vh-media-archival-thumb img {
display: block !important;
height: 38px !important;
width: auto !important;
max-width: 75px !important;
object-fit: cover !important;
border-radius: 3px !important;
}
/* ==========================================================================
STEP 71: 5-CARD EQUAL FOOTING ROW (TAXONOMY + MEDIA WITH LARGE THUMBNAILS)
========================================================================== */
/* 1. 5-Column Grid on Equal Footing */
body.page-Main_Page .vh-taxonomy-section {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 1450px !important;
height: auto !important;
min-height: 220px !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 16px !important;
width: 100% !important;
height: auto !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 210px !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-tax .vh-card-body {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
text-align: center !important;
}
/* 2. Soft-Switch ONLY Content Below Titles (Titles Stay 100% Static) */
.vh-card-tax .vh-card-text,
.vh-card-tax .vh-media-card-content {
transition: opacity .6s ease, transform .6s ease !important;
}
.vh-card-tax .vh-card-text.is-changing,
.vh-card-tax .vh-media-card-content.is-changing,
#vh-tax-random-personality.is-changing,
#vh-tax-random-name.is-changing,
#vh-tax-random-place.is-changing,
#vh-tax-random-question.is-changing,
#vh-tax-random-media.is-changing {
opacity: 0 !important;
transform: translateY(4px) !important;
}
/* Titles are strictly fixed during text rotation while allowing hover rise */
.vh-card-tax .vh-card-title {
opacity: 1 !important;
animation: none !important;
}
.vh-card-tax .vh-card-title a {
opacity: 1 !important;
animation: none !important;
display: inline-block !important;
}
/* 3. Card 5: Large Archival Media Thumbnail & Captions */
.vh-card-media-item .vh-media-card-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
height: 100% !important;
}
.vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 105px !important;
border-radius: 6px !important;
overflow: hidden !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(177, 135, 61, 0.3) !important;
background: #f0ebe1 !important;
position: relative !important;
line-height: 0 !important;
}
.vh-card-media-item .vh-media-large-thumb a {
display: block !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
.vh-card-media-item .vh-media-large-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
transition: transform .35s ease !important;
}
.vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.05) !important;
}
/* Fallback Vintage Press Badge */
.vh-card-media-item .vh-media-fallback-thumb {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #f7f3ec 0%, #ebdcc7 100%) !important;
}
.vh-card-media-item .vh-media-vintage-badge {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
text-decoration: none !important;
}
.vh-card-media-item .vh-media-vintage-badge .vh-media-icon {
font-size: 24px !important;
}
.vh-card-media-item .vh-media-vintage-badge .vh-media-tag {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #8c6a26 !important;
}
/* Captions Below Large Thumbnail */
.vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: center !important;
width: 100% !important;
}
.vh-card-media-item .vh-media-outlet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #8c6a26 !important;
}
.vh-card-media-item .vh-media-headline {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
}
.vh-card-media-item .vh-media-headline a {
color: #2c3e42 !important;
text-decoration: none !important;
transition: color .2s ease !important;
}
.vh-card-media-item .vh-media-headline a:hover {
color: #345B63 !important;
text-decoration: underline !important;
}
/* 4. Hide legacy bottom media bar since it is now unified in the 5-card row */
.vh-media-bar,
body.page-Main_Page .vh-media-bar {
display: none !important;
}
/* Responsive Grid Breakpoints */
@media (max-width: 1280px) {
body.page-Main_Page .vh-taxonomy-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
body.page-Main_Page .vh-taxonomy-grid {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
STEP 72: UNIFIED "STEP FORTH" TOP BAR ICONS & LEFT COLUMN STACK
========================================================================== */
/* --------------------------------------------------------------------------
1. UNIFIED "STEP FORTH" ANIMATION ACROSS ALL TOP BAR ICONS & BUTTONS
-------------------------------------------------------------------------- */
.vector-header-container .vector-icon,
.vector-header-start .vector-icon,
.vector-header-end .vector-icon,
.vector-header-start .cdx-button,
.vector-header-end .cdx-button,
.vector-header-start .vector-dropdown-label,
.vector-header-end .vector-dropdown-label,
.vector-header-container .cdx-text-input__icon,
.mw-header .vector-icon,
.vector-sticky-header .vector-icon {
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
filter 0.25s ease,
color 0.25s ease,
background-color 0.25s ease !important;
will-change: transform, filter !important;
}
/* STEP FORTH HOVER: Icon floats up 2.5px, scales up, glows with 3D drop shadow */
.vector-header-start #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-start .cdx-button:hover .vector-icon,
.vector-header-end .cdx-button:hover .vector-icon,
.vector-header-start .vector-dropdown-label:hover .vector-icon,
.vector-header-end .vector-dropdown-label:hover .vector-icon,
.vector-header-end #pt-userpage-2:hover .vector-icon,
.vector-header-container .cdx-search-input:hover .cdx-text-input__icon,
.vector-header-container .cdx-text-input__input:focus ~ .cdx-text-input__icon,
.vector-header-container .vector-icon:hover {
transform: translateY(-2.5px) scale(1.14) !important;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 10px rgba(245, 215, 127, 0.8)) !important;
color: #ffffff !important;
fill: #ffffff !important;
}
/* STEP FORTH BUTTON CONTAINER HOVER */
.vector-header-start .vector-dropdown-label:hover,
.vector-header-end .vector-dropdown-label:hover,
.vector-header-start .cdx-button:hover,
.vector-header-end .cdx-button:hover,
.vector-header-end #pt-userpage-2:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(245, 215, 127, 0.45) !important;
background-color: rgba(245, 215, 127, 0.18) !important;
}
/* ACTIVE / CLICK STATE: Tactile press depression */
.vector-header-start .vector-dropdown-label:active .vector-icon,
.vector-header-end .vector-dropdown-label:active .vector-icon,
.vector-header-start .cdx-button:active .vector-icon,
.vector-header-end .cdx-button:active .vector-icon {
transform: translateY(0.5px) scale(0.98) !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}
/* --------------------------------------------------------------------------
2. TOP-LEFT COLUMN: MEMORIES (TOP) + SRILA PRABHUPADA IN MEDIA (BOTTOM)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: stretch !important;
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
gap: 24px !important;
height: auto !important;
min-height: 330px !important;
}
/* Left Stacked Column */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 310px !important;
height: 100% !important;
justify-content: space-between !important;
}
body.page-Main_Page .vh-triad-column-left .vh-card {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
}
/* Center Sanctuary Hero */
body.page-Main_Page .vh-sanctuary-card {
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 310px !important;
height: auto !important;
}
/* Right Thematic Article Spotlight */
body.page-Main_Page .vh-card-article {
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 310px !important;
height: auto !important;
}
/* Media Card in Hero Left: Large Thumbnail & Captions Below */
body.page-Main_Page .vh-card-media-item .vh-media-card-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 95px !important;
border-radius: 5px !important;
overflow: hidden !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(177, 135, 61, 0.35) !important;
background: #f0ebe1 !important;
line-height: 0 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb a {
display: block !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
transition: transform .35s ease !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.05) !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: center !important;
width: 100% !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #8c6a26 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
}
/* --------------------------------------------------------------------------
3. BOTTOM 4-COLUMN TAXONOMY GRID (EQUAL FOOTING)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-taxonomy-section {
width: 100% !important;
max-width: 1450px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 180px !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 18px !important;
width: 100% !important;
height: auto !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 175px !important;
}
/* Clean up any legacy media bar */
.vh-media-bar,
body.page-Main_Page .vh-media-bar {
display: none !important;
}
/* ==========================================================================
STEP 73: FIT EVERYTHING TO SCREEN + 100% LARGER TITLES & TEXTS
+ MAXIMIZED ŚRĪLA PRABHUPĀDA CARD SIZE
========================================================================== */
/* --------------------------------------------------------------------------
1. FIT EVERYTHING TO SCREEN (ZERO SCROLLBAR ON DESKTOP)
-------------------------------------------------------------------------- */
body.page-Main_Page,
html.page-Main_Page {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
}
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 {
margin: 0 !important;
padding: 0 !important;
border: none !important;
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
background-color: #faf7f0 !important;
}
/* Master Homepage Container: Perfectly fits single viewport height */
body.page-Main_Page #vani-home {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 48px) !important;
max-height: calc(100vh - 48px) !important;
min-height: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 8px 32px 10px 32px !important;
margin: 0 !important;
overflow: hidden !important;
position: relative !important;
}
/* --------------------------------------------------------------------------
2. MAXIMIZED ŚRĪLA PRABHUPĀDA CARD & HERO ROW PROPORTIONS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: stretch !important;
width: 100% !important;
max-width: 1560px !important;
margin: 0 auto !important;
gap: 22px !important;
flex: 1 1 auto !important;
height: auto !important;
min-height: 310px !important;
max-height: 44vh !important;
}
/* Left Stacked Column: Memories (Top) + Media (Bottom) */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
min-width: 300px !important;
height: 100% !important;
justify-content: space-between !important;
}
body.page-Main_Page .vh-triad-column-left .vh-card {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important;
padding: 8px 14px !important;
}
body.page-Main_Page .vh-card-media-item {
flex: 1 1 auto !important;
padding: 8px 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
/* CENTER: MAXIMIZED ŚRĪLA PRABHUPĀDA CARD */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 440px !important;
height: 100% !important;
padding: 10px 24px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
}
/* Grand Portrait Circle - Maximized Size */
body.page-Main_Page .vh-sanctuary-portrait-box {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 4px 0 !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: min(240px, 24vh) !important;
height: min(240px, 24vh) !important;
min-width: 190px !important;
min-height: 190px !important;
border-radius: 50% !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 8px 28px rgba(18, 63, 56, 0.35),
0 2px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
overflow: hidden !important;
margin: 0 auto !important;
position: relative !important;
}
/* Right Column: Thematic Article Spotlight */
body.page-Main_Page .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
min-width: 300px !important;
height: 100% !important;
padding: 10px 16px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
/* --------------------------------------------------------------------------
3. INCREASE ALL CARD TITLES BY 100% (MAJESTIC 3D SACRED GOLD)
-------------------------------------------------------------------------- */
/* Center Title: "Śrīla Prabhupāda" (+100% -> 46px) */
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 46px !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: 0.5px !important;
margin-bottom: 4px !important;
}
/* Memories & Article Titles (+100% -> 28px) */
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 28px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
/* Media Card Title (+100% -> 26px) */
body.page-Main_Page .vh-card-media-item .vh-card-title,
body.page-Main_Page .vh-card-media-item .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 26px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
/* Bottom 4 Taxonomy Card Titles: Personalities, Names, Places, Questions (+100% -> 30px) */
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 30px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
/* --------------------------------------------------------------------------
4. INCREASE ALL TEXTS IN THOSE CARDS BY 100%
-------------------------------------------------------------------------- */
/* Śrīla Prabhupāda Sanctuary Subtitle (+100% -> 22px) */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-style: normal !important;
font-weight: 600 !important;
font-size: 22px !important;
line-height: 1.3 !important;
color: #2b4b52 !important;
text-align: center !important;
margin: 4px 0 0 0 !important;
}
/* Bottom 4 Taxonomy Descriptions (+100% -> 18px) */
body.page-Main_Page .vh-card-tax .vh-card-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.4 !important;
color: #2c3e42 !important;
text-align: center !important;
}
body.page-Main_Page .vh-card-tax .vh-card-text strong,
body.page-Main_Page .vh-card-tax .vh-card-text a strong {
font-size: 19px !important;
color: #123f38 !important;
font-weight: 700 !important;
}
/* Memories Text (+100% -> 18px) */
body.page-Main_Page .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-snippet {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.38 !important;
color: #2c3e42 !important;
}
/* Media Card Outlet Tag & Headline (+100%) */
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-size: 14.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
}
/* Media Thumbnail Dimensions */
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 100px !important;
border-radius: 6px !important;
overflow: hidden !important;
}
/* Right Article Spotlight Text (+100% -> 18px) */
body.page-Main_Page .vh-card-article .vh-card-text,
body.page-Main_Page .vh-card-article .vh-random-article-extract {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.4 !important;
color: #2c3e42 !important;
}
/* --------------------------------------------------------------------------
5. COMPACT TIMELINE TO FIT THE 100vh SCREEN PERFECTLY
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 130px !important;
height: 130px !important;
min-height: 130px !important;
max-height: 130px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
margin-top: 4px !important;
margin-bottom: 4px !important;
background: transparent !important;
}
body.page-Main_Page .vh-timeline-years {
flex: 0 0 32px !important;
height: 32px !important;
min-height: 32px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
padding: 4px 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
}
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
flex: 0 0 92px !important;
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
}
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
padding: 2px 14px !important;
}
body.page-Main_Page .vh-timeline-date {
font-size: 11px !important;
font-weight: 800 !important;
}
body.page-Main_Page .vh-timeline-text {
font-size: 13px !important;
line-height: 1.3 !important;
margin-top: 14px !important;
}
/* --------------------------------------------------------------------------
6. BOTTOM 4 TAXONOMY CARDS PROPORTIONS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-taxonomy-section {
width: 100% !important;
max-width: 1560px !important;
margin: 0 auto !important;
flex: 0 0 auto !important;
height: auto !important;
min-height: 145px !important;
max-height: 22vh !important;
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
width: 100% !important;
height: 100% !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 140px !important;
padding: 8px 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* ==========================================================================
STEP 77: TARGETED ADJUSTMENTS STARTING FROM STEP 73
1. Centered, ROUND picture (no oval distortion, no text overlap)
2. Subtitle second line in one line, not truncated (same text size: 20-22px)
3. Put media card UP to fit in under "...remembers..." (no push-down)
4. Put bottom 4 cards up & decrease text size (14.5px) to fit in cleanly
5. Put timeline and years above it MORE DOWN (margin-top: 38px)
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: CENTERED ROUND PICTURE (NOT OVAL, NO TEXT OVERLAP)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 4px auto !important;
text-align: center !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 180px !important;
height: 180px !important;
min-width: 180px !important;
min-height: 180px !important;
max-width: 180px !important;
max-height: 180px !important;
border-radius: 50% !important; /* PERFECT 100% ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
box-shadow:
0 8px 24px rgba(18, 63, 56, 0.35),
0 2px 6px rgba(0, 0, 0, 0.22),
inset 0 2px 5px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage .vh-photo {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
background-size: cover !important;
background-position: center top !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
ITEM 2: SECOND LINE IN ONE LINE, NOT TRUNCATED (SAME TEXT SIZE)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin: 6px auto 0 auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
position: static !important; /* NEVER OVERLAPS WITH PHOTO */
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important; /* SAME PROMINENT TEXT SIZE */
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.25 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important; /* SAME PROMINENT TEXT SIZE */
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.25 !important;
}
/* --------------------------------------------------------------------------
ITEM 3: PUT MEDIA CARD UP TO FIT IN UNDER "...REMEMBERS..."
-------------------------------------------------------------------------- */
/* Left Column: Natural flow (no space-between that forces media down) */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* PUT IT UP UNDER REMEMBERS */
gap: 8px !important;
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: 275px !important;
max-height: 275px !important;
}
/* Memories Card (Top Left) */
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 110px !important;
max-height: 110px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories .vh-card-title a {
font-size: 22px !important;
margin-bottom: 3px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-memories .vh-card-text {
font-size: 14.5px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Media Card (Bottom Left): Sits directly under Memories with compact thumb */
body.page-Main_Page .vh-card-media-item {
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 155px !important;
max-height: 155px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 3px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-title a {
font-size: 21px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 68px !important; /* COMPACT THUMBNAIL FITS UP UNDER REMEMBERS */
border-radius: 5px !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-size: 11px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-size: 13.5px !important;
line-height: 1.25 !important;
color: #2c3e42 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Center Sanctuary Card */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 660px !important;
min-width: 440px !important;
height: 275px !important;
max-height: 275px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-bottom: 2px !important;
}
/* Right Column: Article Spotlight */
body.page-Main_Page .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: 275px !important;
max-height: 275px !important;
padding: 8px 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-article .vh-card-title a {
font-size: 22px !important;
line-height: 1.15 !important;
margin-bottom: 4px !important;
}
body.page-Main_Page .vh-card-article .vh-card-text {
font-size: 14px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
display: -webkit-box !important;
-webkit-line-clamp: 7 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Hero Row Container Height Capped at 275px */
body.page-Main_Page .vh-triad-grid {
height: 275px !important;
max-height: 275px !important;
}
/* --------------------------------------------------------------------------
ITEM 5: PUT THE TIMELINE AND THE YEARS ABOVE IT MORE DOWN
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-timeline-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
left: 0 !important;
right: 0 !important;
flex: 0 0 auto !important;
height: 120px !important;
min-height: 120px !important;
max-height: 120px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 0 !important;
margin-top: 38px !important; /* PUSHES TIMELINE & YEARS DOWN */
margin-bottom: 22px !important; /* GENEROUS BREATHING ROOM BELOW */
background: transparent !important;
}
body.page-Main_Page .vh-timeline-years {
flex: 0 0 28px !important;
height: 28px !important;
min-height: 28px !important;
margin: 0 auto !important;
}
body.page-Main_Page .vh-timeline-years .vh-year,
body.page-Main_Page .vh-year {
padding: 3px 9px !important;
font-size: 12px !important;
font-weight: 700 !important;
}
body.page-Main_Page .vh-lifeline-window,
body.page-Main_Page .vh-lifeline {
flex: 0 0 82px !important;
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
}
body.page-Main_Page #vani-home .vh-timeline-track,
body.page-Main_Page .vh-timeline-track {
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
}
body.page-Main_Page #vani-home .vh-timeline-item,
body.page-Main_Page .vh-timeline-item {
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
padding: 2px 14px !important;
}
body.page-Main_Page .vh-timeline-date {
font-size: 10.5px !important;
font-weight: 800 !important;
}
body.page-Main_Page .vh-timeline-text {
font-size: 12px !important;
line-height: 1.25 !important;
margin-top: 10px !important;
}
/* --------------------------------------------------------------------------
ITEM 4: PUT BOTTOM CARDS UP & DECREASE TEXT SIZE IN THESE FOUR CARDS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-taxonomy-section {
width: 100% !important;
max-width: 1560px !important;
margin: 0 auto !important;
flex: 0 0 auto !important;
height: 110px !important;
min-height: 110px !important;
max-height: 110px !important;
margin-bottom: 10px !important; /* ELEVATED ABOVE SCREEN BOTTOM */
}
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
width: 100% !important;
height: 100% !important;
align-items: stretch !important;
}
body.page-Main_Page .vh-card-tax {
flex: 1 1 0 !important;
width: 100% !important;
max-width: none !important;
height: 110px !important;
min-height: 110px !important;
max-height: 110px !important;
padding: 6px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
/* Title: 24px Grand Golden 3D Typography */
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a {
font-size: 24px !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
/* Decreased text size so it fits in without truncation */
body.page-Main_Page .vh-card-tax .vh-card-text {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14.5px !important; /* DECREASED FROM 18px TO FIT IN */
line-height: 1.35 !important;
color: #2c3e42 !important;
text-align: center !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-tax .vh-card-text strong,
body.page-Main_Page .vh-card-tax .vh-card-text a strong {
font-size: 15.5px !important;
color: #123f38 !important;
font-weight: 700 !important;
}
/* ==========================================================================
STEP 78: 50% LARGER ROUND IMAGE, ZERO SUBTITLE GAP, SMALL MEDIA GAP
1. 50% larger round image (270px x 270px) with clean visual gaps above/below
2. Zero gap between "Founder-Ācārya" and "International Society..."
3. Small gap (4px) between "Remembers..." and "In the Media"
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: 50% LARGER ROUND IMAGE (270px x 270px) WITH VISUAL GAPS
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 460px !important;
height: auto !important;
min-height: 375px !important;
max-height: 390px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-bottom: 6px !important; /* VISUAL GAP ABOVE ROUND IMAGE */
}
/* Portrait stage increased by 50% (180px -> 270px) */
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 4px auto !important;
text-align: center !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 270px !important; /* +50% LARGER (180px -> 270px) */
height: 270px !important;
min-width: 270px !important;
min-height: 270px !important;
max-width: 270px !important;
max-height: 270px !important;
border-radius: 50% !important; /* 100% ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 10px 30px rgba(18, 63, 56, 0.38),
0 3px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage .vh-photo {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
background-size: cover !important;
background-position: center top !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
ITEM 2: NO GAP BETWEEN "FOUNDER-ĀCĀRYA" AND "INTERNATIONAL SOCIETY..."
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin: 8px auto 0 auto !important; /* VISUAL GAP BELOW ROUND IMAGE */
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINES */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 3: PUT MEDIA CARD UNDER "...REMEMBERS..." WITH JUST SMALL GAP (4px)
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-triad-grid {
height: auto !important;
min-height: 375px !important;
max-height: 390px !important;
}
/* Left Stacked Column: 4px crisp small gap */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 4px !important; /* JUST SMALL GAP! */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: 100% !important;
}
body.page-Main_Page .vh-card-memories {
margin: 0 !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 110px !important;
max-height: 110px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item {
margin: 0 !important;
margin-top: 0 !important; /* ZERO EXTRA MARGIN (CONTROLLED BY 4px GAP) */
flex: 0 0 auto !important;
padding: 6px 12px !important;
height: 155px !important;
max-height: 155px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
box-sizing: border-box !important;
}
/* Right Article Card height aligned */
body.page-Main_Page .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 275px !important;
max-height: 385px !important;
padding: 8px 14px !important;
}
/* Timeline section spacing adjusted for new hero height */
body.page-Main_Page .vh-timeline-section {
margin-top: 20px !important;
margin-bottom: 16px !important;
}
/* Bottom 4 cards padding & positioning */
body.page-Main_Page .vh-taxonomy-section {
margin-bottom: 8px !important;
}
/* ==========================================================================
STEP 79: MOVE "FOUNDER..." +10px DOWN & REMOVE HUGE GAP UNDER REMEMBERS
1. Subtitle ("Founder-Ācārya / International Society...") moved +10px down
2. "Śrīla Prabhupāda in the Media" pulled directly under "Remembers..."
with just a small 6px gap (huge empty gap completely eliminated)
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: MOVE THOSE TWO LINES "FOUNDER..." +10px DOWN
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 18px !important; /* MOVED +10px DOWN (FROM 8px TO 18px) */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINE 1 AND LINE 2 */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 2: REMOVE HUGE EMPTY GAP UNDER REMEMBERS (PUT MEDIA DIRECTLY UNDER)
-------------------------------------------------------------------------- */
/* Left Column Container: Natural tight vertical flow */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* TIGHT TOP PACKING (NO SPACE-BETWEEN) */
align-items: stretch !important;
gap: 6px !important; /* CRISP SMALL GAP! */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important; /* UNCONSTRAINED TO PREVENT PUSH-DOWN */
min-height: 0 !important;
}
/* Top Card: Memories (Tight fit to content, zero empty space below) */
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important; /* NEVER EXPAND VERTICALLY */
height: auto !important; /* EXACT HEIGHT OF CONTENT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-bottom: 0 !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories .vh-card-body,
body.page-Main_Page #vh-random-memories {
height: auto !important; /* NEVER STRETCH TO 100% */
min-height: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-memories .vh-card-title a {
font-size: 21px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-memories .vh-card-text {
font-size: 14px !important;
line-height: 1.35 !important;
margin-bottom: 0 !important;
}
/* Bottom Card: Media Item (Sits immediately below Memories with only 6px gap) */
body.page-Main_Page .vh-card-media-item {
flex: 0 0 auto !important; /* NEVER EXPAND VERTICALLY */
height: auto !important; /* EXACT HEIGHT OF CONTENT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important; /* ZERO EXTRA MARGIN (GAP CONTROLS IT) */
margin-bottom: 0 !important;
padding: 6px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-body {
height: auto !important;
min-height: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-title a {
font-size: 20px !important;
margin-bottom: 2px !important;
line-height: 1.15 !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 68px !important;
border-radius: 5px !important;
overflow: hidden !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-size: 11px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-size: 13.5px !important;
line-height: 1.25 !important;
color: #2c3e42 !important;
}
/* ==========================================================================
STEP 80: ABSOLUTE ELIMINATION OF LEFT GAP & CENTER VERTICAL SHIFTS
1. Left Column: Completely eliminate the huge gap between "...remembers..."
and "In the Media" (align-items: flex-start, unconstrained auto height,
flex: 0 0 auto on both cards, strict 4px gap).
2. Center Card:
- Shift the round image 30px down from the title (margin-top: 36px)
- Text lines under the image increased +30px from image (margin-top: 48px)
- Zero gap between "Founder-Ācārya" and "International Society..."
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: ABSOLUTE ELIMINATION OF THE HUGE EMPTY GAP ON THE LEFT
-------------------------------------------------------------------------- */
/* Unstretch hero row so left column hugs its content instead of stretching 390px */
body.page-Main_Page .vh-triad-grid {
align-items: flex-start !important; /* STOPS FORCING LEFT COLUMN TO STRETCH */
height: auto !important;
min-height: 450px !important;
}
/* Left Stacked Column: Strictly pack items with only 4px gap */
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* PACK TIGHTLY AT TOP */
align-items: stretch !important;
gap: 4px !important; /* CRISP 4px GAP ONLY */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important; /* NEVER 100% HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Memories Card (Top Left) */
body.page-Main_Page .vh-card-memories {
flex: 0 0 auto !important; /* NEVER EXPAND */
height: auto !important; /* EXACT CONTENT HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-memories .vh-card-body,
body.page-Main_Page #vh-random-memories {
flex: 0 0 auto !important;
height: auto !important; /* NEVER 100% HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Media Card (Bottom Left): Sits immediately 4px under Memories */
body.page-Main_Page .vh-card-media-item {
flex: 0 0 auto !important; /* NEVER EXPAND */
height: auto !important; /* EXACT CONTENT HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important; /* ZERO EXTRA MARGIN (4px GAP CONTROLS IT) */
margin-bottom: 0 !important;
padding: 6px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-card-media-item .vh-card-body {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 2: CENTER CARD - SHIFT IMAGE 30px DOWN & TEXT LINES +30px DOWN
-------------------------------------------------------------------------- */
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 460px !important;
height: auto !important;
min-height: 440px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 1. Shift the round image 30px down from the title */
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-top: 36px !important; /* SHIFTED 30px DOWN FROM TITLE */
margin-bottom: 0 !important;
text-align: center !important;
}
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 270px !important;
height: 270px !important;
min-width: 270px !important;
min-height: 270px !important;
max-width: 270px !important;
max-height: 270px !important;
border-radius: 50% !important; /* PERFECT ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 10px 30px rgba(18, 63, 56, 0.38),
0 3px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* 2. Text lines under the image increased +30px from the image */
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 48px !important; /* INCREASED +30px DOWN FROM THE IMAGE (18px -> 48px) */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINE 1 AND LINE 2 */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* ==========================================================================
STEP 81: SPECIFICITY OVERHAUL - ELIMINATING THE 340px SQUARE ON MEMORIES CARD
The user's DevTools confirmed: .vh-card.vh-card-memories was computing to
EXACTLY 339.99px x 339.99px (a square) because an older high-specificity rule
"body.page-Main_Page .vh-triad-grid .vh-card { flex: 0 0 340px !important; }"
was matching it. In a column flex container (.vh-triad-column-left),
flex-basis: 340px forces the HEIGHT to 340px!
We now use #vani-home scoped selectors to permanently override and reset
flex, height, and margins on all cards inside the left column.
========================================================================== */
/* 1. HERO TRIAD GRID & LEFT COLUMN: UNSTRETCH & WRAP CONTENT */
body.page-Main_Page #vani-home .vh-triad-grid,
body.page-Main_Page .vh-triad-grid {
align-items: flex-start !important;
height: auto !important;
min-height: 450px !important;
}
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page #vani-home .vh-triad-column-left,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 4px !important; /* CRISP 4px GAP BETWEEN THE TWO CARDS */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 2. OVERRIDE THE 340px FLEX-BASIS ON ALL CARDS IN THE LEFT COLUMN */
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card,
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card-memories,
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card-media-item,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-memories,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-media-item,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card-memories,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card-media-item {
flex: 0 0 auto !important; /* KILLS 340px HEIGHT! */
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important; /* HUGS EXACT CONTENT HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
}
/* 3. CARD BODIES IN LEFT COLUMN */
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left .vh-card-body,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-body,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left .vh-card-body,
body.page-Main_Page .vh-triad-column-left .vh-card-body,
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left #vh-random-memories,
body.page-Main_Page #vani-home .vh-triad-column-left #vh-random-memories,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left #vh-random-memories,
body.page-Main_Page .vh-triad-column-left #vh-random-memories {
flex: 0 0 auto !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
height: auto !important; /* KILLS 100% HEIGHT */
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4. MEDIA ITEM CARD SPECIFIC STYLING IN LEFT COLUMN */
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card-media-item,
body.page-Main_Page .vh-triad-column-left .vh-card-media-item {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px !important;
}
/* --------------------------------------------------------------------------
CENTER CARD: SHIFT ROUND IMAGE 30px DOWN & TEXT LINES +30px FROM IMAGE
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page #vani-home .vh-sanctuary-card,
body.page-Main_Page .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
max-width: 680px !important;
min-width: 460px !important;
height: auto !important;
min-height: 440px !important;
padding: 6px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a {
font-size: 40px !important;
line-height: 1 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Shift the round image 30px down from the title */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-portrait-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-top: 36px !important; /* SHIFTED 30px DOWN FROM TITLE */
margin-bottom: 0 !important;
text-align: center !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 270px !important;
height: 270px !important;
min-width: 270px !important;
min-height: 270px !important;
max-width: 270px !important;
max-height: 270px !important;
border-radius: 50% !important; /* PERFECT ROUND CIRCLE */
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow:
0 10px 30px rgba(18, 63, 56, 0.38),
0 3px 8px rgba(0, 0, 0, 0.22),
inset 0 2px 6px rgba(255, 255, 255, 0.75),
inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* Text lines under the image increased +30px from the image */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page #vani-home .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 48px !important; /* INCREASED +30px DOWN FROM THE IMAGE (18px -> 48px) */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important; /* ZERO GAP BETWEEN LINE 1 AND LINE 2 */
position: static !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text br,
body.page-Main_Page .vh-card-text.vh-sanctuary-text br {
display: none !important; /* NO LINE BREAK GAP */
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-sub-1,
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-sub-2,
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important; /* STRICTLY ONE LINE, NOT TRUNCATED */
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important; /* ZERO GAP */
padding: 0 !important;
}
/* --------------------------------------------------------------------------
RIGHT COLUMN: ARTICLE CARD (CLEAN UNCONSTRAINED AUTO HEIGHT)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-card-article,
body.page-Main_Page .vh-triad-grid > .vh-card-article {
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 275px !important;
max-height: 440px !important;
padding: 8px 14px !important;
}
/* ==========================================================================
STEP 82:
1. Unclamp Memories text so disciple name at the end of "recounted by..."
displays fully as it used to be (remove -webkit-line-clamp: 3).
2. Make +50px bigger gap between Memories card and "SP in Media" card
(gap: 50px).
3. Make the media thumbnail view a complete standard size (175px tall),
filling the plenty space below, with object-fit: contain so thumbnails
fit completely inside without any cropping and without changing their
aspect ratio.
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 1: DISPLAY FULL NAME AT END OF "RECOUNTED BY..." (UNCLAMP TEXT)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-text {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
max-height: none !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* --------------------------------------------------------------------------
ITEM 2: +50px BIGGER GAP TO "SP IN THE MEDIA"
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page #vani-home .vh-triad-column-left,
body.page-Main_Page .vh-triad-grid .vh-triad-column-left,
body.page-Main_Page .vh-triad-column-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 50px !important; /* +50px BIGGER GAP */
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-card-media-item,
body.page-Main_Page .vh-card-media-item {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* --------------------------------------------------------------------------
ITEM 3: COMPLETE STANDARD SIZE THUMBNAIL VIEW (NO CROPPING, FIT ASPECT RATIO)
-------------------------------------------------------------------------- */
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
width: 100% !important;
height: 175px !important; /* COMPLETE STANDARD VIEW SIZE FILLING THE SPACE */
min-height: 175px !important;
max-height: 175px !important;
border-radius: 6px !important;
overflow: hidden !important;
background: #f4efe6 !important; /* WARM VINTAGE PARCHMENT TONE */
border: 1px solid rgba(177, 135, 61, 0.3) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 6px 0 8px 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb a,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
text-decoration: none !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important; /* FITS COMPLETE THUMBNAIL WITHOUT CROPPING */
object-position: center center !important;
transition: transform .3s ease !important;
display: block !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb:hover img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.03) !important;
}
/* Captions under the thumbnail */
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-caption,
body.page-Main_Page .vh-card-media-item .vh-media-caption {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: center !important;
width: 100% !important;
margin-top: 2px !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-outlet,
body.page-Main_Page .vh-card-media-item .vh-media-outlet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
color: #8c6a26 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.2 !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-headline,
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-headline a,
body.page-Main_Page .vh-card-media-item .vh-media-headline,
body.page-Main_Page .vh-card-media-item .vh-media-headline a {
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.3 !important;
color: #2c3e42 !important;
}
/* ==========================================================================
STEP 86:
1. NEUTRALIZE STRAY PARAGRAPHS: Prevent MediaWiki parser from generating
top/side offsets.
2. FOUNDER-ĀCARYA CLICKABLE TITLE:
- Macron ONLY above capital 'A' (Founder-Ācarya).
- Styled in exact 3D sacred gold as other card titles.
- Breathing filament underline at rest, 90% glide & lift on hover.
3. DECREASE GAP ABOVE 4 BOTTOM CARDS JUST TO 30px:
- Shifts .vh-taxonomy-section UP by 50px via translateY(-50px)
reducing the ~80px gap directly to 30px, keeping layout fully stable.
4. UNIFY HOVER ANIMATIONS FOR ALL TOP BAR ICONS & BUTTONS:
- Unified smooth lift (translateY(-2px)) on all topbar buttons/links.
- Unified warm gold glowing pill (rgba(245, 215, 127, 0.18)).
- Unified icon scale (1.08x) with soft glow, eliminating double-jumping.
========================================================================== */
/* 1. Neutralize stray paragraph tags */
body.page-Main_Page .mw-parser-output > p {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
body.page-Main_Page .mw-parser-output > p:empty {
display: none !important;
}
/* 2. Decrease gap above 4 bottom cards just to 30px */
body.page-Main_Page #vani-home .vh-taxonomy-section,
body.page-Main_Page .vh-taxonomy-section {
transform: translateY(-50px) !important; /* DECREASES GAP ABOVE 4 BOTTOM CARDS TO 30px */
}
/* 3. Founder-Ācarya Clickable 3D Title Link */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-sanctuary-card .vh-card-text.vh-sanctuary-text {
text-align: center !important;
margin-top: 40px !important; /* MAINTAINS +30px GAP FROM 270px ROUND IMAGE */
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
position: static !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-founder-title,
body.page-Main_Page .vh-founder-title,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1,
body.page-Main_Page .vh-sanctuary-sub-1 {
display: block !important;
text-align: center !important;
margin: 0 !important;
margin-bottom: 2px !important;
padding: 0 !important;
line-height: 1.15 !important;
}
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page .vh-founder-title a,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 24px !important; /* IDENTICAL CARD TITLE SIZE */
font-weight: 700 !important;
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 7px !important; /* SPACE FOR BREATHING UNDERLINE */
letter-spacing: 0.025em !important;
line-height: 1.2 !important;
cursor: pointer !important;
transform: none !important;
/* Temple Gold Face */
color: #dfad3e !important;
-webkit-text-fill-color: #dfad3e !important;
/* 3D Chiseled Shadow */
text-shadow: none !important;
transition: transform 0.22s ease, color 0.22s ease, text-shadow 0.22s ease !important;
}
/* Golden Breathing Filament Underline at Rest */
body.page-Main_Page #vani-home .vh-founder-title a::after,
body.page-Main_Page .vh-founder-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a::after,
body.page-Main_Page .vh-sanctuary-sub-1 a::after,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(223, 173, 62, 0.4) 15%,
#dfad3e 50%,
rgba(223, 173, 62, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(223, 173, 62, 0.75) !important;
border-radius: 2px !important;
pointer-events: none !important;
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease !important;
}
/* On Hover: 3D Lift & Full Glide Underline */
body.page-Main_Page #vani-home .vh-founder-title a:hover,
body.page-Main_Page .vh-founder-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover,
body.page-Main_Page .vh-sanctuary-sub-1 a:hover,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a:hover {
transform: translateY(-2.5px) !important;
color: #dfad3e !important;
-webkit-text-fill-color: #dfad3e !important;
text-decoration: none !important;
text-shadow: none !important;
}
body.page-Main_Page #vani-home .vh-founder-title a:hover::after,
body.page-Main_Page .vh-founder-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover::after,
body.page-Main_Page .vh-sanctuary-sub-1 a:hover::after,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a:hover::after {
animation: none !important;
opacity: 1 !important;
width: 90% !important;
left: 5% !important;
}
/* Subtitle Line 2: International Society for Kṛṣṇa Consciousness */
body.page-Main_Page #vani-home .vh-sanctuary-sub-2,
body.page-Main_Page .vh-sanctuary-sub-2 {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 19px !important;
font-weight: 600 !important;
color: #2b4b52 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: 0.15px !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4. UNIFIED HOVER ANIMATION FOR ALL TOP BAR ICONS & BUTTONS */
/* Base transitions on all interactive elements in top bar */
.vector-header-container .cdx-button,
.vector-header-container .vector-dropdown-label,
.vector-header-container #pt-userpage-2,
.vector-header-container .vector-user-links a,
.vector-header-container .vector-icon,
.vector-header-container svg {
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
filter 0.22s ease !important;
}
/* Unified button container hover */
.vector-header-container .vector-header-start .cdx-button:hover,
.vector-header-container .vector-header-end .cdx-button:hover,
.vector-header-container .vector-dropdown-label:hover,
.vector-header-container #vector-main-menu-dropdown .vector-dropdown-label:hover,
.vector-header-container #pt-userpage-2:hover,
.vector-header-container .vector-user-links a:hover {
transform: translateY(-2px) !important;
background-color: rgba(245, 215, 127, 0.18) !important;
border-radius: 4px !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(245, 215, 127, 0.4) !important;
color: #ffffff !important;
}
/* Unified icon scale & soft glow (no double translation) */
.vector-header-container .vector-header-start .cdx-button:hover .vector-icon,
.vector-header-container .vector-header-end .cdx-button:hover .vector-icon,
.vector-header-container .vector-dropdown-label:hover .vector-icon,
.vector-header-container #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-container #pt-userpage-2:hover .vector-icon,
.vector-header-container .vector-user-links a:hover .vector-icon,
.vector-header-container .cdx-button:hover svg,
.vector-header-container .vector-dropdown-label:hover svg,
.vector-header-container .vector-icon:hover {
transform: scale(1.08) !important;
color: #ffffff !important;
fill: #ffffff !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 8px rgba(245, 215, 127, 0.65)) !important;
}
/* ==========================================================================
STEP 87: COMPLETELY ELIMINATE / AVOID TOP BAR ICON ANIMATIONS
- Neutralize all transforms, scales, translations, and jumping animations on
all top bar icons, buttons, dropdowns, and links.
- Clean, quiet, stationary hover state with subtle background pill only.
========================================================================== */
/* 1. Reset all transforms, filters, and animations on top bar container elements */
.vector-header-container,
.vector-header-start,
.vector-header-end,
.vector-header-container *,
.vector-header-container .vector-icon,
.vector-header-container svg,
.vector-header-container .cdx-button,
.vector-header-container .vector-dropdown-label,
.vector-header-container #pt-userpage-2,
.vector-header-container .vector-user-links a,
.mw-header .vector-icon,
.vector-sticky-header .vector-icon {
transform: none !important;
animation: none !important;
filter: none !important;
will-change: auto !important;
}
/* 2. On hover: Keep icons strictly stationary — zero movement, zero scale, zero drop-shadow */
.vector-header-container .vector-icon:hover,
.vector-header-container svg:hover,
.vector-header-container .cdx-button:hover .vector-icon,
.vector-header-container .cdx-button:hover svg,
.vector-header-container .vector-dropdown-label:hover .vector-icon,
.vector-header-container .vector-dropdown-label:hover svg,
.vector-header-container #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-container #vector-main-menu-dropdown:hover svg,
.vector-header-container #pt-userpage-2:hover .vector-icon,
.vector-header-container #pt-userpage-2:hover svg,
.vector-header-container .vector-user-links a:hover .vector-icon,
.vector-header-container .vector-user-links a:hover svg,
.vector-header-container .cdx-search-input:hover .cdx-text-input__icon,
.vector-header-container .cdx-text-input__input:focus ~ .cdx-text-input__icon,
.vector-header-start .cdx-button:hover .vector-icon,
.vector-header-end .cdx-button:hover .vector-icon,
.vector-header-start .vector-dropdown-label:hover .vector-icon,
.vector-header-end .vector-dropdown-label:hover .vector-icon,
.vector-header-start #vector-main-menu-dropdown:hover .vector-icon,
.vector-header-end #pt-userpage-2:hover .vector-icon {
transform: none !important;
filter: none !important;
animation: none !important;
color: #ffffff !important;
fill: #ffffff !important;
}
/* 3. On button/dropdown hover: subtle stationary background highlight only (no vertical lift, no jumping) */
.vector-header-container .cdx-button:hover,
.vector-header-container .vector-dropdown-label:hover,
.vector-header-container #vector-main-menu-dropdown .vector-dropdown-label:hover,
.vector-header-container #pt-userpage-2:hover,
.vector-header-container .vector-user-links a:hover,
.vector-header-start .cdx-button:hover,
.vector-header-end .cdx-button:hover,
.vector-header-start .vector-dropdown-label:hover,
.vector-header-end .vector-dropdown-label:hover,
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label:hover,
.vector-header-end #pt-userpage-2:hover {
transform: none !important;
box-shadow: none !important;
background-color: rgba(245, 215, 127, 0.15) !important;
border-radius: 4px !important;
color: #ffffff !important;
}
/* 4. On active / click: no displacement */
.vector-header-container .cdx-button:active,
.vector-header-container .vector-dropdown-label:active,
.vector-header-container .vector-icon:active,
.vector-header-start .vector-dropdown-label:active .vector-icon,
.vector-header-end .vector-dropdown-label:active .vector-icon,
.vector-header-start .cdx-button:active .vector-icon,
.vector-header-end .cdx-button:active .vector-icon {
transform: none !important;
filter: none !important;
}
/* ==========================================================================
STEP 91:
1. STRICTLY SCOPED TO MAIN PAGE (ZERO LEAKAGE TO REGULAR MEDIAWIKI PAGES):
- Every cursor rule is prefixed with html body.page-Main_Page.
- Regular MediaWiki pages retain 100% normal default Windows mouse behavior.
2. ABSOLUTE DISABLE OF WINDOWS CURSOR ACROSS MAIN PAGE & ALL HOVER STATES:
- Uses high-specificity rules targeting *:hover, a:hover, etc.
ensuring the native Windows cursor/pointing hand is completely suppressed.
3. CUSTOM GOLDEN CURSOR (ARROW AT REST, HAND ONLY ABOVE LINKS):
- Sleek golden arrow pointer by default.
- Smoothly switches to golden pointing hand ONLY above links (body.vh-cursor-link).
- No outer halo ring, zero lag, zero clutter.
4. FOUNDER-ĀCĀRYA MACRON CENTERING PRESERVED:
- 'Noto Serif', 'Cormorant Garamond' font stack.
========================================================================== */
/* 1. DISABLE WINDOWS CURSOR ON MAIN PAGE ONLY (ACROSS ALL ELEMENTS & HOVER STATES) */
html body.page-Main_Page,
html body.page-Main_Page *,
html body.page-Main_Page *:hover,
html body.page-Main_Page a,
html body.page-Main_Page a:hover,
html body.page-Main_Page a:focus,
html body.page-Main_Page a:active,
html body.page-Main_Page a:visited,
html body.page-Main_Page a *,
html body.page-Main_Page a *:hover,
html body.page-Main_Page [href],
html body.page-Main_Page [href]:hover,
html body.page-Main_Page [href] *,
html body.page-Main_Page [href] *:hover,
html body.page-Main_Page button,
html body.page-Main_Page button:hover,
html body.page-Main_Page input,
html body.page-Main_Page input:hover,
html body.page-Main_Page textarea,
html body.page-Main_Page select,
html body.page-Main_Page [role="button"],
html body.page-Main_Page [role="button"]:hover,
html body.page-Main_Page .cdx-button,
html body.page-Main_Page .cdx-button:hover,
html body.page-Main_Page .vh-card,
html body.page-Main_Page .vh-card:hover,
html body.page-Main_Page .vh-card *,
html body.page-Main_Page .vh-card *:hover,
html body.page-Main_Page .vh-year,
html body.page-Main_Page .vh-year:hover,
html body.page-Main_Page .vector-menu a,
html body.page-Main_Page .vector-menu a:hover,
html body.page-Main_Page .vector-dropdown-label,
html body.page-Main_Page .vector-dropdown-label:hover {
cursor: auto !important;
}
/* 2. CUSTOM GOLDEN CURSOR (MAIN PAGE ONLY) */
body.page-Main_Page #vh-cursor-pointer {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 24px !important;
height: 24px !important;
pointer-events: none !important;
z-index: 99999999 !important;
transform: translate3d(-100px, -100px, 0);
will-change: transform !important;
transition: opacity 0.15s ease !important;
}
body.page-Main_Page #vh-cursor-pointer svg {
width: 100% !important;
height: 100% !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65))
drop-shadow(0 0 6px rgba(223, 173, 62, 0.75)) !important;
transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.25, 1),
filter 0.18s ease !important;
}
/* State 1: Default Golden Arrow */
body.page-Main_Page #vh-cursor-pointer .vh-cursor-arrow {
display: block !important;
}
body.page-Main_Page #vh-cursor-pointer .vh-cursor-hand {
display: none !important;
}
/* State 2: ONLY Above Links -> Golden Pointing Hand */
body.page-Main_Page.vh-cursor-link #vh-cursor-pointer .vh-cursor-arrow {
display: none !important;
}
body.page-Main_Page.vh-cursor-link #vh-cursor-pointer .vh-cursor-hand {
display: block !important;
}
body.page-Main_Page.vh-cursor-link #vh-cursor-pointer svg {
transform: scale(1.12) !important;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75))
drop-shadow(0 0 10px rgba(245, 215, 127, 0.95)) !important;
}
/* Click Compression */
body.page-Main_Page.vh-cursor-click #vh-cursor-pointer svg {
transform: scale(0.88) !important;
}
/* Touchscreens / mobile protection: restore native behavior */
@media (hover: none) or (pointer: coarse) {
html body.page-Main_Page,
html body.page-Main_Page *,
html body.page-Main_Page a,
html body.page-Main_Page button {
cursor: auto !important;
}
body.page-Main_Page #vh-cursor-pointer {
display: none !important;
}
}
/* 3. FOUNDER-ĀCĀRYA PERFECT MACRON CENTERING FIX */
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page .vh-founder-title a,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-sanctuary-sub-1 a {
font-family: 'Noto Serif', 'Cormorant Garamond', Georgia, serif !important;
font-size: 24px !important;
font-weight: 700 !important;
letter-spacing: 0.025em !important;
}
/* ==========================================================================
STEP 92: PERMANENT BOTTOM NAVIGATION BAR STYLING
- Appears on Main Page AND all regular MediaWiki pages.
- Fixed at bottom of screen, permanently visible while scrolling.
- Deep temple teal background (#19383e), delicate gold top hairline border,
warm ivory/gold links, and highlighted Donate button.
========================================================================== */
.vh-bottom-bar {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 38px !important;
background: #19383e !important;
border-top: 1.5px solid rgba(223, 173, 62, 0.45) !important;
box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.35) !important;
z-index: 99990 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
user-select: none !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.vh-bottom-bar-inner {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
max-width: 1200px !important;
width: 100% !important;
padding: 0 16px !important;
overflow-x: auto !important;
white-space: nowrap !important;
scrollbar-width: none !important; /* Firefox */
}
.vh-bottom-bar-inner::-webkit-scrollbar {
display: none !important; /* Chrome/Safari */
}
.vh-bottom-link {
color: #f5d77f !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
letter-spacing: 0.35px !important;
padding: 3px 10px !important;
border-radius: 4px !important;
transition: color 0.18s ease, background-color 0.18s ease, transform 0.15s ease !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
}
.vh-bottom-link:hover {
color: #ffffff !important;
background-color: rgba(245, 215, 127, 0.18) !important;
text-decoration: none !important;
}
.vh-bottom-donate {
background: linear-gradient(135deg, rgba(223, 173, 62, 0.3) 0%, rgba(223, 173, 62, 0.12) 100%) !important;
border: 1px solid rgba(223, 173, 62, 0.65) !important;
color: #fce8a6 !important;
padding: 2.5px 14px !important;
border-radius: 12px !important;
font-weight: 700 !important;
}
.vh-bottom-donate:hover {
background: linear-gradient(135deg, #dfad3e 0%, #b88a38 100%) !important;
color: #150b00 !important;
border-color: #dfad3e !important;
box-shadow: 0 0 10px rgba(223, 173, 62, 0.5) !important;
}
.vh-bottom-sep {
color: rgba(245, 215, 127, 0.35) !important;
font-size: 12px !important;
line-height: 1 !important;
pointer-events: none !important;
}
/* Ensure long wiki pages leave space above the permanent bottom bar */
body {
padding-bottom: 46px !important;
}
/* On Main Page with custom cursor, ensure bottom links trigger the hand cursor */
body.page-Main_Page .vh-bottom-link {
cursor: auto !important;
}
/* ==========================================================================
STEP 93:
1. ELIMINATE RIGHT-SIDE GREEN STRIP ON MAIN PAGE:
- Vector 2022 skin uses a multi-column CSS grid on .mw-page-container-inner
with .vector-column-end having background-color: #D4ECDD !important;.
- Collapse grid to 100% full width and hide right/left columns on Main Page.
- Ensure mw-page-container and mw-content-container match the warm cream background.
2. PREVENT STICKY HEADER FROM APPEARING AT THE BOTTOM OF REGULAR PAGES:
- MediaWiki places .vector-sticky-header-container after the page content.
- Enforce position: fixed !important; top: 0 !important; on sticky header container,
and completely hide it (display: none !important;) when not actively sticky-visible.
3. VANI-TEMPLE RETURN LINK IN PERMANENT BOTTOM BAR:
- Provides an immediate 1-click return to the Main Page from any regular wiki page.
========================================================================== */
/* 1. ELIMINATE RIGHT-SIDE GREEN STRIP ON MAIN PAGE */
body.page-Main_Page .vector-column-end,
body.page-Main_Page .vector-column-start,
body.page-Main_Page .vector-toc-pinned-container,
body.page-Main_Page .vector-appearance-pinned-container,
body.page-Main_Page .vector-sitenotice-container {
display: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
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 {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
background: #f6f2e9 !important;
background-color: #f6f2e9 !important;
grid-template-columns: 1fr !important;
border: none !important;
box-shadow: none !important;
}
/* 2. PREVENT STICKY HEADER FROM APPEARING AT THE BOTTOM OF REGULAR WIKI PAGES */
.vector-sticky-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
}
/* Strictly hide the sticky header container whenever it is NOT in active sticky view */
.vector-sticky-header-container:not(.vector-sticky-header-visible),
.vector-header-container.vector-sticky-header-container:not(.vector-sticky-header-visible) {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* 3. VANI-TEMPLE RETURN LINK STYLING */
.vh-bottom-link.vh-bottom-home {
color: #dfad3e !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
}
.vh-bottom-link.vh-bottom-home:hover {
color: #ffffff !important;
background-color: rgba(223, 173, 62, 0.25) !important;
}
/* ==========================================================================
STEP 95: SMOOTH TRANSITION FOR IN THE MEDIA CARD CONTENT
========================================================================== */
body.page-Main_Page .vh-card-media-item .vh-media-card-content {
transition: opacity .5s ease, transform .5s ease !important;
}
body.page-Main_Page .vh-card-media-item .vh-media-card-content.is-changing {
opacity: 0 !important;
transform: translateY(4px) !important;
}
/* ==========================================================================
STEP 96:
1. INCREASE ROUND HERO IMAGE BY 20% (270px -> 324px) WHILE KEEPING TOP/BOTTOM GAPS
2. INCREASE QUOTED TEXT IN RIGHT ARTICLE SPOTLIGHT BY +3 LINES (7 -> 10 LINES)
========================================================================== */
/* 1. Round hero image increased by 20% to 324px */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page .vh-sanctuary-portrait-box .vh-photo-stage {
width: 324px !important;
height: 324px !important;
min-width: 324px !important;
min-height: 324px !important;
max-width: 324px !important;
max-height: 324px !important;
border-radius: 50% !important;
margin: 0 auto !important;
overflow: hidden !important;
position: relative !important;
border: 4.5px solid #233e44 !important;
border-top: 4.5px solid #4a757e !important;
border-bottom: 5.5px solid #112023 !important;
box-shadow: 0 12px 36px rgba(18, 63, 56, 0.40), 0 3px 10px rgba(0, 0, 0, 0.24), inset 0 2px 6px rgba(255, 255, 255, 0.75), inset 0 -3px 6px rgba(0, 0, 0, 0.35) !important;
}
/* Ensure top gap from title remains clean (36px) */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page #vani-home .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-portrait-box,
body.page-Main_Page .vh-sanctuary-portrait-box {
margin-top: 36px !important;
margin-bottom: 0 !important;
}
/* Ensure bottom gap from round image remains clean (40px) */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-card-text.vh-sanctuary-text,
body.page-Main_Page .vh-sanctuary-card .vh-card-text.vh-sanctuary-text {
margin-top: 40px !important;
margin-bottom: 0 !important;
}
/* Ensure sanctuary card container height gracefully accommodates 324px image */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page #vani-home .vh-sanctuary-card,
body.page-Main_Page .vh-triad-grid > .vh-sanctuary-card,
body.page-Main_Page .vh-sanctuary-card {
min-height: 500px !important;
height: auto !important;
}
/* 2. Increase right article quoted text by +3 lines (-webkit-line-clamp: 10) */
body.page-Main_Page #vani-home .vh-card-article .vh-card-text,
body.page-Main_Page .vh-card-article .vh-card-text {
display: -webkit-box !important;
-webkit-line-clamp: 10 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
/* Allow right card to expand gracefully up to 500px to match sanctuary height */
body.page-Main_Page #vani-home .vh-triad-grid > .vh-card-article,
body.page-Main_Page .vh-triad-grid > .vh-card-article {
max-height: 500px !important;
min-height: 275px !important;
height: auto !important;
}
/* Explicit fast and visible 1.4s crossfade for round hero photo */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-photo-stage .vh-photo,
body.page-Main_Page .vh-sanctuary-card .vh-photo-stage .vh-photo {
transition: opacity 1.4s ease-in-out !important;
}
/* ==========================================================================
STEP 97: MOBILE OPTIMIZATION (STAGE 1 - REGULAR WIKI PAGES)
1. Universal #345B63 Dark Teal top bar across all pages and viewports.
2. Desktop title banner strictly scoped to screens >= 1000px.
3. Mobile header layout (burger menu, search, icons).
4. Mobile content readability, fluid images, and responsive table scrolling.
5. Mobile bottom bar and floating Back to Top button positioning.
========================================================================== */
/* 1. UNIVERSAL #345B63 TOP BAR ACROSS ALL PAGES AND VIEWPORTS */
.vector-header-container,
.vector-header,
.mw-header,
#mw-head {
background-color: #345B63 !important;
background: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
/* 2. DESKTOP TITLE BANNER SCOPED STRICTLY TO SCREENS >= 1000px */
@media screen and (max-width: 999px) {
#vanipedia-topbar-title,
#vanipedia-topbar-title-link,
#vanipedia-topbar-center-title {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
}
/* 3. MOBILE REGULAR WIKI PAGES OPTIMIZATIONS (<= 768px) */
@media screen and (max-width: 768px) {
/* 3.1 Top Bar Header Row */
.mw-header {
padding: 0 10px !important;
gap: 8px !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
}
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* 3.2 Hamburger Site Menu Button */
.vector-header-start #vector-main-menu-dropdown {
display: flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
margin: 0 !important;
padding: 0 4px !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-icon {
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
width: 22px !important;
height: 22px !important;
}
/* 3.3 Search Bar: Fluidly fits available space between burger and user tools */
.vector-header-container #p-search,
.mw-header #p-search,
.vector-header-start #p-search {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
max-width: calc(100vw - 110px) !important;
min-width: 100px !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container #searchform,
.mw-header #searchform {
width: 100% !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container .cdx-search-input,
.vector-header-container .vector-search-box-input,
.vector-header-container .cdx-text-input {
width: 100% !important;
max-width: 100% !important;
height: 32px !important;
margin: 0 !important;
}
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
width: 100% !important;
min-width: 80px !important;
height: 32px !important;
font-size: 13.5px !important;
padding-left: 30px !important;
box-sizing: border-box !important;
border-radius: 16px !important;
background-color: #1f3e45 !important;
border: 1px solid rgba(245, 215, 127, 0.45) !important;
color: #ffffff !important;
}
.vector-header-container .cdx-text-input__input:focus,
.vector-header-container input[type="search"]:focus,
#searchInput:focus {
width: 100% !important;
background-color: #173036 !important;
border-color: #f5d77f !important;
}
/* 3.4 Mobile Vector Sidebar Navigation Drawer */
#vector-main-menu-dropdown .vector-dropdown-content,
#vector-main-menu-dropdown-content,
#vector-main-menu-unpinned-container,
#vector-main-menu-dropdown .vector-dropdown-content.is-open {
position: fixed !important;
top: 52px !important;
left: 0 !important;
width: 290px !important;
max-width: 85vw !important;
height: calc(100vh - 52px - 38px) !important;
max-height: calc(100vh - 90px) !important;
overflow-y: auto !important;
background-color: #1f3e45 !important;
border-right: 2px solid #b1873d !important;
box-shadow: 4px 0 18px rgba(0, 0, 0, 0.45) !important;
z-index: 100001 !important;
padding: 10px 0 !important;
}
#vector-main-menu-dropdown .vector-dropdown-content a,
#vector-main-menu-dropdown-content a,
#vector-main-menu-unpinned-container a {
color: #f5d77f !important;
font-size: 14.5px !important;
padding: 9px 18px !important;
display: block !important;
text-decoration: none !important;
border-left: 3px solid transparent !important;
}
#vector-main-menu-dropdown .vector-dropdown-content a:hover,
#vector-main-menu-dropdown-content a:hover,
#vector-main-menu-unpinned-container a:hover {
background-color: #345B63 !important;
color: #ffffff !important;
border-left-color: #f5d77f !important;
}
#vector-main-menu-dropdown .vector-menu-heading,
#vector-main-menu-dropdown-content .vector-menu-heading,
#vector-main-menu-unpinned-container .vector-menu-heading {
color: #fce8a6 !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
border-bottom: 1px solid rgba(245, 215, 127, 0.3) !important;
padding: 10px 18px 6px 18px !important;
margin-top: 8px !important;
}
/* 4. CONTENT VIEW ON MOBILE */
#content, .mw-body, .mw-content-container {
padding: 12px 14px !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
font-size: 15.5px !important;
line-height: 1.62 !important;
}
#firstHeading, .mw-first-heading {
font-size: 1.65em !important;
line-height: 1.25 !important;
margin-bottom: 0.4em !important;
word-wrap: break-word !important;
}
h2, .mw-parser-output h2 {
font-size: 1.3em !important;
line-height: 1.3 !important;
margin-top: 1.1em !important;
margin-bottom: 0.35em !important;
}
h3, .mw-parser-output h3 {
font-size: 1.15em !important;
line-height: 1.3 !important;
}
/* Tables horizontal scroll wrapping */
.vanitable, .wikitable, .daytable {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
margin: 12px 0 !important;
}
.timelinesummary {
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Fluid images & media embeds */
div.tright, div.tleft, div.floatright, div.floatleft {
float: none !important;
margin: 12px auto !important;
max-width: 100% !important;
text-align: center !important;
}
div.thumbinner {
max-width: 100% !important;
width: auto !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
.mw-parser-output img {
max-width: 100% !important;
height: auto !important;
}
/* 5. BOTTOM BAR & BACK TO TOP BUTTON ON MOBILE */
.vh-bottom-bar {
height: 38px !important;
}
.vh-bottom-bar-inner {
gap: 10px !important;
padding: 0 10px !important;
}
.vh-bottom-link {
font-size: 12px !important;
padding: 2px 6px !important;
}
#vanipedia-back-to-top {
bottom: 50px !important;
right: 14px !important;
width: 42px !important;
height: 42px !important;
z-index: 100000 !important;
}
#footer, .mw-footer {
padding-bottom: 54px !important;
}
}
/* ==========================================================================
STEP 105: ROBUST NON-OVERLAPPING MINERVA MOBILE HEADER & USER DROPDOWN
1. Fix Magnifying Glass & User Icon Overlap:
- Header uses strictly rigid flex items:
Burger (32px left) + 20px gap + Title (auto) + [margin-left: auto spacer] + Search (32px right) + 8px gap + User (32px far right).
- Zero possibility of overlap.
2. User Menu Dropdown:
- Placed outside header flow (fixed positioning) with full dark teal & gold styling.
3. Plain burger icon, golden-yellow (#ffd700) SVGs for all icons.
========================================================================== */
/* 1. TOP BAR CONTAINER */
body.skin-minerva .header-container,
body.skin-minerva .header-chrome {
background-color: #345B63 !important;
background: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
box-sizing: border-box !important;
}
/* 2. STRICT RIGID SINGLE-ROW FLEX LAYOUT */
body.skin-minerva .minerva-header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
height: 100% !important;
width: 100% !important;
padding: 0 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
}
/* 2.1 BURGER (FAR LEFT: 32px) */
.minerva-header .navigation-drawer.toggle-list {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.minerva-header #mw-mf-main-menu-button,
.minerva-header .toggle-list__toggle {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.minerva-header .minerva-icon--menu,
.minerva-header #mw-mf-main-menu-button .minerva-icon--menu {
background-color: #f5d77f !important;
opacity: 1 !important;
width: 24px !important;
height: 24px !important;
display: inline-block !important;
}
/* 2.2 SITE TITLE (SPACED 20px FROM BURGER) */
.minerva-header .branding-box {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
margin: 0 0 0 20px !important;
padding: 0 !important;
}
.minerva-header .branding-box a,
.minerva-header .branding-box span {
color: #f5d77f !important;
font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-decoration: none !important;
white-space: nowrap !important;
}
/* 2.3 SEARCH FORM (PUSHED TO THE FAR RIGHT: 32px) */
.minerva-header .minerva-search-form {
margin-left: auto !important; /* Absorbs ALL horizontal space between title and search */
margin-right: 8px !important;
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
/* Hide the large search box input on mobile screens */
.minerva-header .minerva-search-form .search-box {
display: none !important;
}
.minerva-header #searchIcon {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.minerva-header .minerva-icon--search,
.minerva-header #searchIcon .minerva-icon--search {
background-color: #f5d77f !important;
opacity: 1 !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
.minerva-header #searchIcon span:last-child {
display: none !important;
}
/* 2.4 USER ICON (FAR RIGHT: 32px) */
.minerva-header .minerva-user-navigation {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
.minerva-header .minerva-notifications,
.minerva-header .minerva-user-navigation ul,
.minerva-header .minerva-user-navigation li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
}
.minerva-header #ca-mytalks {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.minerva-header .minerva-icon--bellOutline,
.minerva-header #ca-mytalks .minerva-icon--bellOutline {
background-color: #f5d77f !important;
opacity: 1 !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
}
.minerva-header #ca-mytalks span:last-child {
display: none !important;
}
/* 3. MOBILE USER DROPDOWN MENU (POPUP AT TOP-RIGHT) */
#vanipedia-mobile-user-menu {
display: none !important;
position: fixed !important;
top: 52px !important;
right: 8px !important;
width: 175px !important;
background-color: #1f3e45 !important;
border: 1.5px solid #b1873d !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
padding: 6px 0 !important;
z-index: 999999 !important;
box-sizing: border-box !important;
flex-direction: column !important;
}
#vanipedia-mobile-user-menu.is-open {
display: flex !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-item {
color: #f5d77f !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
text-decoration: none !important;
display: block !important;
line-height: 1.2 !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-item:hover,
#vanipedia-mobile-user-menu a.vani-user-menu-item:active {
background-color: #345B63 !important;
color: #ffffff !important;
}
#vanipedia-mobile-user-menu .vani-user-menu-divider {
height: 1px !important;
background-color: rgba(177, 135, 61, 0.35) !important;
margin: 5px 0 !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-logout {
color: #fca5a5 !important;
}
#vanipedia-mobile-user-menu a.vani-user-menu-logout:hover {
background-color: rgba(239, 68, 68, 0.2) !important;
color: #ffffff !important;
}
/* 4. MINERVA NAVIGATION DRAWER (THE LEFT MENU) */
#mw-mf-page-left.navigation-drawer,
#mw-mf-page-left.menu {
background-color: #1f3e45 !important;
border-right: 2px solid #b1873d !important;
box-shadow: 4px 0 18px rgba(0, 0, 0, 0.45) !important;
}
#mw-mf-page-left a.toggle-list-item__anchor {
color: #f5d77f !important;
font-size: 14.5px !important;
}
#mw-mf-page-left a.toggle-list-item__anchor:hover {
background-color: #345B63 !important;
color: #ffffff !important;
}
#mw-mf-page-left .minerva-icon {
background-color: #ffd700 !important;
}
/* ==========================================================================
STEP 107: BULLETPROOF DESKTOP USER DROPDOWN (MATCHING image_a7f3ff.png)
1. Card background: Dark teal (#1f3e45) with gold border (#b1873d).
2. Zero white background bleed: all inner elements transparent.
3. Links: High-contrast warm gold (#f5d77f) text, white on hover (#345B63).
4. Pure clean text without clunky icons: .vector-icon hidden.
5. Divider above Log out with soft rose highlight.
========================================================================== */
/* 1. DESKTOP USER DROPDOWN CARD */
html #vector-user-links-dropdown .vector-dropdown-content,
html .vector-user-menu .vector-dropdown-content,
html body.page-Main_Page #vector-user-links-dropdown .vector-dropdown-content,
html body #p-personal.vector-menu,
html body #p-personal .vector-menu-content,
#vector-user-links-dropdown-content {
background: #1f3e45 !important;
background-color: #1f3e45 !important;
border: 1.5px solid #b1873d !important;
border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
padding: 6px 0 !important;
min-width: 175px !important;
width: 180px !important;
box-sizing: border-box !important;
}
/* 2. INNER CONTAINERS: 100% TRANSPARENT */
html #vector-user-links-dropdown .vector-dropdown-content div,
html #vector-user-links-dropdown .vector-dropdown-content ul,
html #vector-user-links-dropdown .vector-dropdown-content li,
html #vector-user-links-dropdown .vector-dropdown-content .vector-menu-content,
html #vector-user-links-dropdown .vector-dropdown-content .vector-menu-content-list,
html .vector-user-menu .vector-dropdown-content div,
html .vector-user-menu .vector-dropdown-content ul,
html .vector-user-menu .vector-dropdown-content li {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* 3. ENSURE TALK (pt-mytalk) IS VISIBLE */
html #vector-user-links-dropdown #pt-mytalk,
html .vector-user-menu #pt-mytalk {
display: block !important;
visibility: visible !important;
}
/* 4. RESTORE USER FIGURE ICON ON HEADER BUTTON (BRIGHT GOLD & VISIBLE) */
#vector-user-links-dropdown-label .vector-icon,
#vector-user-links-dropdown .vector-dropdown-label .vector-icon,
.vector-user-menu .vector-dropdown-label .vector-icon,
.vector-header-end #vector-user-links-dropdown .vector-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
color: #f5d77f !important;
fill: #f5d77f !important;
background-color: #f5d77f !important;
margin-right: 4px !important;
vertical-align: middle !important;
}
/* Inside dropdown items: keep icons compact & inline so they never cause vertical bloating */
#vector-user-links-dropdown .vector-dropdown-content .vector-icon,
.vector-user-menu .vector-dropdown-content .vector-icon {
display: inline-block !important;
width: 16px !important;
height: 16px !important;
margin: 0 8px 0 0 !important;
padding: 0 !important;
color: #f5d77f !important;
fill: #f5d77f !important;
background-color: #f5d77f !important;
vertical-align: middle !important;
}
/* 5. LINKS: HIGH-CONTRAST WARM GOLD TEXT (#f5d77f) */
html #vector-user-links-dropdown .vector-dropdown-content a,
html .vector-user-menu .vector-dropdown-content a,
html #p-personal .vector-menu-content a {
display: flex !important;
align-items: center !important;
color: #f5d77f !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
line-height: 1.2 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
text-decoration: none !important;
box-sizing: border-box !important;
width: 100% !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
html #vector-user-links-dropdown .vector-dropdown-content a span,
html .vector-user-menu .vector-dropdown-content a span,
html #p-personal .vector-menu-content a span {
color: #f5d77f !important;
font-size: 15px !important;
font-weight: 500 !important;
display: inline !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* 6. HOVER STATE: LIGHTER TEAL (#345B63) WITH BRIGHT WHITE TEXT */
html #vector-user-links-dropdown .vector-dropdown-content a:hover,
html #vector-user-links-dropdown .vector-dropdown-content a:focus,
html #vector-user-links-dropdown .vector-dropdown-content a:active,
html .vector-user-menu .vector-dropdown-content a:hover,
html .vector-user-menu .vector-dropdown-content a:focus,
html .vector-user-menu .vector-dropdown-content a:active {
background-color: #345B63 !important;
color: #ffffff !important;
text-decoration: none !important;
}
html #vector-user-links-dropdown .vector-dropdown-content a:hover span,
html .vector-user-menu .vector-dropdown-content a:hover span {
color: #ffffff !important;
}
/* 7. DIVIDER ABOVE LOGOUT */
html #vector-user-links-dropdown #pt-logout,
html .vector-user-menu #pt-logout {
border-top: 1px solid rgba(177, 135, 61, 0.35) !important;
margin-top: 6px !important;
padding-top: 4px !important;
}
html #vector-user-links-dropdown #pt-logout a,
html .vector-user-menu #pt-logout a {
color: #fca5a5 !important;
}
html #vector-user-links-dropdown #pt-logout a:hover,
html .vector-user-menu #pt-logout a:hover {
background-color: rgba(239, 68, 68, 0.25) !important;
color: #ffffff !important;
}
/* ==========================================================================
STEP 110: MOBILE STICKY TOP BAR & BOTTOM BAR FIRST LINK ("MAIN PAGE")
1. Top bar remains sticky/visible when scrolling down on mobile viewports.
2. Fix bottom bar flex centering bug: justify-content: flex-start on mobile
ensures the first link ("Main Page") is always visible and not clipped.
3. Fully reverted experimental Main Page viewport scaling & hint banners.
========================================================================== */
/* 1. STICKY TOP BAR ON MOBILE (REMAINS VISIBLE ON SCROLL) */
body.skin-minerva .header-container,
body.skin-minerva .header-chrome,
body.skin-minerva header {
position: sticky !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
}
/* 2. BOTTOM BAR: ENSURE "MAIN PAGE" IS VISIBLE AS FIRST LINK ON MOBILE */
@media screen and (max-width: 768px) {
.vh-bottom-bar-inner {
justify-content: flex-start !important;
padding: 0 14px !important;
gap: 10px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.vh-bottom-link.vh-bottom-home {
display: inline-flex !important;
flex-shrink: 0 !important;
}
}
/* ==========================================================================
ENTRY PAGE SUPPRESSION (dev.vanipedia.org / VanipediaEntry3D)
Neither top bar nor bottom bar must appear on the 3D entry page.
========================================================================== */
body.ext-vp3d-fullscreen #vh-bottom-bar,
body.ext-vp3d-fullscreen .header-container,
body.ext-vp3d-fullscreen .header-chrome,
body.ext-vp3d-fullscreen .minerva-header,
body.ext-vp3d-fullscreen .vector-header-container,
body.ext-vp3d-fullscreen #mw-head,
body.ext-vp3d-fullscreen .mw-header,
body.ext-vp3d-fullscreen #mw-navigation,
body:has(.vp-entry3d-container) #vh-bottom-bar,
body:has(.vp-entry3d-container) .header-container,
body:has(.vp-entry3d-container) .header-chrome,
body:has(.vp-entry3d-container) .minerva-header,
body:has(.vp-entry3d-container) .vector-header-container,
body:has(.vp-entry3d-wrapper) #vh-bottom-bar,
body:has(.vp-entry3d-wrapper) .header-container,
body:has(.vp-entry3d-wrapper) .header-chrome,
body:has(.vp-entry3d-wrapper) .minerva-header,
body:has(.vp-entry3d-wrapper) .vector-header-container {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================================
STEP 116: UNIFIED 3-SLOT ROTATED LANDSCAPE STAGE FOR MAIN PAGE ON MOBILE
Includes Top Bar, Main Page, and Bottom Bar in one unified landscape orientation.
========================================================================== */
#vani-mobile-stage {
position: fixed !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
overflow: hidden !important;
z-index: 999999 !important;
background-color: #f6f2e9 !important;
margin: 0 !important;
padding: 0 !important;
}
#vani-rotated-box {
position: absolute !important;
top: 0 !important;
left: 0 !important;
transform-origin: top left !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
background-color: #f6f2e9 !important;
margin: 0 !important;
padding: 0 !important;
}
#vani-rotated-box.is-auto-landscape {
transform: rotate(90deg) translate(0, -100%) !important;
}
#vani-rotated-box.is-native-landscape {
transform: none !important;
}
/* 1. TOP HEADER SLOT (Landscape orientation) */
#vani-stage-header-slot {
flex: 0 0 50px !important;
width: 100% !important;
height: 50px !important;
max-height: 50px !important;
min-height: 50px !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
z-index: 1000 !important;
overflow: visible !important;
position: relative !important;
box-sizing: border-box !important;
}
#vani-stage-header-slot .header-container,
#vani-stage-header-slot .header-chrome,
#vani-stage-header-slot .minerva-header,
#vani-stage-header-slot .vector-header-container,
#vani-stage-header-slot #mw-head {
position: static !important;
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 12px !important;
box-shadow: none !important;
border: none !important;
background-color: #345B63 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
/* 2. CONTENT SLOT (Landscape orientation, containing #vani-home) */
#vani-stage-content-slot {
flex: 1 1 auto !important;
width: 100% !important;
height: calc(100% - 50px - 36px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
position: relative !important;
background-color: #f6f2e9 !important;
}
/* Enforce rigid 1200px desktop grid on #vani-home inside mobile stage */
#vani-stage-content-slot #vani-home {
width: 1200px !important;
min-width: 1200px !important;
max-width: 1200px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 8px 16px 20px 16px !important;
margin: 0 !important;
background-color: #f6f2e9 !important;
}
/* Hero Triad in Mobile Landscape: Rigid 3-Column Horizontal Flow */
#vani-stage-content-slot .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
gap: 16px !important;
flex-wrap: nowrap !important;
height: auto !important;
min-height: 250px !important;
}
#vani-stage-content-slot .vh-triad-column-left {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
#vani-stage-content-slot .vh-card-memories,
#vani-stage-content-slot .vh-card-media-item {
flex: 0 0 auto !important;
height: auto !important;
}
#vani-stage-content-slot .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
text-align: center !important;
}
#vani-stage-content-slot .vh-photo-stage {
width: 200px !important;
height: 200px !important;
margin: 0 auto !important;
}
#vani-stage-content-slot .vh-card-text.vh-sanctuary-text {
margin-top: 10px !important;
}
#vani-stage-content-slot .vh-card-article {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
height: auto !important;
}
/* Interactive Timeline in Mobile Landscape */
#vani-stage-content-slot .vh-timeline-section {
width: 100% !important;
max-width: 100% !important;
margin: 6px 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
flex: 0 0 auto !important;
height: auto !important;
}
/* Thematic Taxonomy in Mobile Landscape: Rigid 4-Column Grid */
#vani-stage-content-slot .vh-taxonomy-section {
width: 100% !important;
transform: none !important;
margin: 6px 0 !important;
}
#vani-stage-content-slot .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
width: 100% !important;
}
#vani-stage-content-slot .vh-card-tax {
height: auto !important;
min-height: 105px !important;
}
/* 3. FOOTER SLOT (Landscape orientation, containing #vh-bottom-bar) */
#vani-stage-footer-slot {
flex: 0 0 36px !important;
width: 100% !important;
height: 36px !important;
max-height: 36px !important;
min-height: 36px !important;
background-color: #19383e !important;
border-top: 1.5px solid #b1873d !important;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
z-index: 99990 !important;
overflow: hidden !important;
position: relative !important;
box-sizing: border-box !important;
}
#vani-stage-footer-slot #vh-bottom-bar,
#vani-stage-footer-slot .vh-bottom-bar {
position: static !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
background-color: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#vani-stage-footer-slot .vh-bottom-bar-inner {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
gap: 14px !important;
padding: 0 16px !important;
}
/* Dropdown Menu inside Stage Header */
#vani-stage-header-slot #vanipedia-mobile-user-menu {
position: absolute !important;
top: 48px !important;
right: 8px !important;
z-index: 1000000 !important;
}
/* Minerva Left Navigation Drawer z-index when open */
#mw-mf-page-left.navigation-drawer {
z-index: 1000005 !important;
}
/* Robust Header Child Layout in Landscape Stage */
#vani-stage-header-slot .vector-header,
#vani-stage-header-slot .mw-header {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 12px !important;
box-sizing: border-box !important;
}
#vani-stage-header-slot .vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
flex: 1 1 auto !important;
}
#vani-stage-header-slot .vector-header-end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
flex: 0 0 auto !important;
}
/* Hide any duplicate/stray bars outside the stage when active */
body.has-vani-stage > .vector-header-container,
body.has-vani-stage > .vector-sticky-header-container,
body.has-vani-stage > #mw-head,
body.has-vani-stage > #vh-bottom-bar {
display: none !important;
}
/* ==========================================================================
STEP 119: EXACT DESKTOP SIDEBAR FORMATTING FOR MOBILE BURGER MENU
1. Cleans out Minerva default clutter (Nearby, Random, Settings, About, etc.)
2. Styles the mobile drawer (#mw-mf-page-left) to match the desktop
accordion layout (.vanipedia-sidebar-menu).
========================================================================== */
#mw-mf-page-left {
background-color: #f6f2e9 !important;
border-right: 2px solid #b1873d !important;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.45) !important;
padding: 12px 10px !important;
box-sizing: border-box !important;
width: 290px !important;
max-width: 85vw !important;
}
/* Hide all Minerva default lists completely */
#mw-mf-page-left > ul#p-navigation,
#mw-mf-page-left > ul#p-personal,
#mw-mf-page-left > ul.hlist,
#mw-mf-page-left .menu__item--nearby,
#mw-mf-page-left .menu__item--random {
display: none !important;
}
/* Mobile drawer container for desktop sidebar */
#mw-mf-page-left #vani-mobile-synced-sidebar {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* In mobile drawer, make .vanipedia-sidebar-menu take full drawer width */
#mw-mf-page-left .vanipedia-sidebar-menu {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 6px !important;
}
/* Ensure mobile drawer accordion header matches desktop */
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading {
cursor: pointer !important;
background-color: #2c4c50 !important;
border: 1px solid #1b3033 !important;
border-radius: 4px !important;
margin-bottom: 4px !important;
padding: 10px 14px !important;
font-weight: 600 !important;
font-size: 14px !important;
color: #ffffff !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu:not(.vanipedia-collapsed) .vector-menu-heading {
border-radius: 4px 4px 0 0 !important;
margin-bottom: 0 !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading:hover {
background-color: #385e63 !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading::after {
content: "▼" !important;
font-size: 0.75em !important;
color: #ffffff !important;
transition: transform 0.2s ease !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-heading::after {
transform: rotate(-90deg) !important;
}
/* Content Area inside Mobile Accordion */
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content {
background-color: #eaeff0 !important;
border: 1px solid #2c4c50 !important;
border-top: none !important;
border-radius: 0 0 4px 4px !important;
padding: 0 0 4px 0 !important;
margin-bottom: 6px !important;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
box-sizing: border-box !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-content {
display: none !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li a {
display: block !important;
padding: 9px 14px 9px 18px !important;
color: #1b3033 !important;
font-size: 14px !important;
text-decoration: none !important;
border-left: 3px solid transparent !important;
border-bottom: 1px solid rgba(44, 76, 80, 0.1) !important;
transition: all 0.15s ease !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li:last-child a {
border-bottom: none !important;
}
#mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li a:hover {
background-color: #dbe4e6 !important;
border-left: 3px solid #2c4c50 !important;
color: #000000 !important;
}
/* 102 Languages Search box inside Mobile Drawer */
#mw-mf-page-left #sidebarLanguageSearch {
width: 100% !important;
box-sizing: border-box !important;
padding: 7px 10px !important;
font-size: 14px !important;
border: 1px solid #a2a9b1 !important;
border-radius: 3px !important;
background-color: #ffffff !important;
color: #1a1a1a !important;
margin-bottom: 4px !important;
}
/* ==========================================================================
STEP 122: STRICT POSITIONING OF "HOME" LINK/ICON (RIGHT OF SEARCH)
1. Desktop: Positioned strictly on the RIGHT of search bar via order: 10 vs order: 5.
2. Clean golden styling (#f5d77f), no underline, subtle hover highlight.
3. Mobile (both Minerva & Vector landscape): Golden Home icon (width 22px)
strictly visible next to the search icon.
========================================================================== */
/* Strict Flex Ordering: Left to Right across .vector-header-start */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.vector-header-start .vector-main-menu-landmark,
.vector-header-start #vector-main-menu-dropdown {
order: 1 !important;
}
.vector-header-start .mw-logo {
order: 2 !important;
display: none !important;
}
/* Search Bar strictly ORDER 5 */
.vector-header-start #p-search,
.vector-header-container #p-search,
.mw-header #p-search,
div#p-search {
order: 5 !important;
margin-right: 0 !important;
}
/* Home Link strictly ORDER 10 (GUARANTEES IT SITS ON THE RIGHT OF SEARCH) */
.vector-header-start #vanipedia-topbar-home-link,
.vector-header-container #vanipedia-topbar-home-link,
#vanipedia-topbar-home-link,
a.vanipedia-topbar-home {
order: 10 !important;
margin-left: 10px !important;
margin-right: 14px !important;
color: #f5d77f !important;
text-decoration: none !important;
text-decoration-line: none !important;
border: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 14.5px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 5px 10px !important;
border-radius: 4px !important;
background: transparent !important;
background-color: transparent !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
flex-shrink: 0 !important;
line-height: 1 !important;
visibility: visible !important;
opacity: 1 !important;
}
a.vanipedia-topbar-home:hover,
a.vanipedia-topbar-home:active,
.vector-header-container a.vanipedia-topbar-home:hover,
.vector-header-container #vanipedia-topbar-home-link:hover,
.minerva-header a.vanipedia-topbar-home:hover,
#vani-stage-header-slot a.vanipedia-topbar-home:hover {
color: #ffffff !important;
background-color: rgba(245, 215, 127, 0.2) !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
transform: translateY(-1px) !important;
}
/* Home Icon Styling */
.vanipedia-topbar-home .vanipedia-home-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
.vanipedia-topbar-home .vanipedia-home-icon svg {
width: 18px !important;
height: 18px !important;
stroke: #f5d77f !important;
fill: none !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
transition: stroke 0.2s ease, transform 0.2s ease !important;
display: inline-block !important;
vertical-align: middle !important;
}
.vanipedia-topbar-home:hover .vanipedia-home-icon svg {
stroke: #ffffff !important;
transform: scale(1.1) !important;
}
/* Home Text Styling on Desktop */
.vanipedia-topbar-home .vanipedia-home-text {
display: inline-block !important;
line-height: 1 !important;
text-decoration: none !important;
}
/* MOBILE RESPONSIVE (Both Vector & Minerva) */
@media screen and (max-width: 900px) {
.vector-header-start #p-search,
.vector-header-container #p-search,
.mw-header #p-search {
flex: 1 1 auto !important;
max-width: calc(100vw - 160px) !important;
}
.vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
.vector-header-start #vanipedia-topbar-home-link,
.vector-header-container #vanipedia-topbar-home-link,
#vanipedia-topbar-home-link,
a.vanipedia-topbar-home {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
margin: 0 4px !important;
border-radius: 50% !important;
order: 10 !important;
}
.vanipedia-topbar-home .vanipedia-home-icon svg {
width: 20px !important;
height: 20px !important;
}
}
/* MINERVA MOBILE SKIN HEADER (Regular Articles on Mobile) */
.minerva-header .vanipedia-topbar-home,
.minerva-header #vanipedia-topbar-home-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 6px !important;
padding: 0 !important;
z-index: 1000 !important;
border-radius: 50% !important;
}
.minerva-header .vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
.minerva-header .vanipedia-topbar-home .vanipedia-home-icon svg {
width: 20px !important;
height: 20px !important;
}
/* In Rotated Landscape Stage on Main Page */
#vani-stage-header-slot .vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
#vani-stage-header-slot .vanipedia-topbar-home {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
padding: 0 !important;
margin: 0 8px !important;
width: 34px !important;
height: 34px !important;
box-sizing: border-box !important;
order: 10 !important;
}
#vani-stage-header-slot .vanipedia-topbar-home .vanipedia-home-icon svg {
width: 20px !important;
height: 20px !important;
}
#vani-stage-header-slot .vector-header-start #p-search {
order: 5 !important;
}
/* Bottom Bar Home Link: Strict no underline */
.vh-bottom-link.vh-bottom-entry,
a.vh-bottom-link {
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
}
.vh-bottom-link.vh-bottom-entry:hover,
a.vh-bottom-link:hover {
text-decoration: none !important;
text-decoration-line: none !important;
}
/* ==========================================================================
STEP 129: RESTORE COMPLETE ORIGINAL STRUCTURE (ZERO OVERLAPS, 4 TAXONOMY IN 1 ROW)
+ TOP BANNER TITLE AS PLAIN TEXT
+ WHO IS ŚRĪLA PRABHUPĀDA PERMANENT TITLE
+ OPTION A: RICH BURNISHED ANTIQUE GOLD (#966817)
+ RISE HOVER EFFECT ON ALL 9 CARD TITLES
========================================================================== */
/* 1. TOP BANNER TITLE AS PURE PLAIN TEXT */
#vanipedia-topbar-title,
span#vanipedia-topbar-title,
a#vanipedia-topbar-title {
pointer-events: none !important;
cursor: default !important;
user-select: text !important;
text-decoration: none !important;
}
#vanipedia-topbar-title:hover,
span#vanipedia-topbar-title:hover,
a#vanipedia-topbar-title:hover {
color: #f5d77f !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
cursor: default !important;
transform: translate(-50%, -50%) !important;
}
/* 2. SANCTUARY CARD TITLE SIZING & NO TEXT CHANGE */
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a {
font-size: 38px !important;
line-height: 1.15 !important;
letter-spacing: 0.015em !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
white-space: nowrap !important;
}
body.page-Main_Page .vh-sanctuary-title a .vh-title-hover {
display: none !important;
}
body.page-Main_Page .vh-sanctuary-title a .vh-title-default {
opacity: 1 !important;
transform: none !important;
}
/* 3. OPTION A: RICH BURNISHED ANTIQUE GOLD ON ALL CARD TITLES */
body.page-Main_Page .vh-card-title,
body.page-Main_Page .vh-card-title a,
body.page-Main_Page .vh-sanctuary-title,
body.page-Main_Page .vh-sanctuary-title a,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a,
body.page-Main_Page .vh-card-article .vh-card-title,
body.page-Main_Page .vh-card-article .vh-card-title a,
body.page-Main_Page .vh-random-article-title,
body.page-Main_Page .vh-random-article-title a,
body.page-Main_Page .vh-card-memories .vh-card-title,
body.page-Main_Page .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-media-item .vh-card-title,
body.page-Main_Page .vh-card-media-item .vh-card-title a,
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page-Main_Page .vh-media-title,
body.page-Main_Page .vh-media-title a,
body.page-Main_Page .vh-founder-title,
body.page-Main_Page .vh-founder-title a,
body.page-Main_Page #vani-home .vh-founder-title,
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-sanctuary-sub-1 a,
body.page-Main_Page .vh-card-text.vh-sanctuary-text a,
#vani-stage-content-slot .vh-card-title a,
#vani-stage-content-slot .vh-sanctuary-title a {
color: #966817 !important;
-webkit-text-fill-color: #966817 !important;
-webkit-text-stroke: 0 !important;
paint-order: normal !important;
text-shadow: none !important;
-webkit-filter: none !important;
filter: none !important;
display: inline-block !important;
position: relative !important;
cursor: pointer !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
color 0.2s ease,
-webkit-text-fill-color 0.2s ease !important;
}
/* 4. RISE HOVER EFFECT ON ALL 9 CARD TITLES (-3px LIFT + GOLD ILLUMINATION) */
body.page-Main_Page #vani-home .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-article .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a:hover,
body.page-Main_Page #vani-home .vh-founder-title a:hover,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-media-item .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a:hover,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-body > .vh-card-title a:hover,
body.page-Main_Page .vh-card-title a:hover,
body.page-Main_Page .vh-card-article .vh-card-title a:hover,
body.page-Main_Page .vh-sanctuary-title a:hover,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a:hover,
body.page-Main_Page .vh-founder-title a:hover,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page .vh-card-media-item .vh-card-title a:hover,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover,
#vani-stage-content-slot .vh-card-title a:hover,
#vani-stage-content-slot .vh-sanctuary-title a:hover,
#vani-stage-content-slot .vh-founder-title a:hover {
transform: translateY(-3px) !important;
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: none !important;
}
/* 5. GOLDEN FILAMENT UNDERLINE AT REST & GLIDE ON HOVER */
body.page-Main_Page .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-title a::after,
body.page-Main_Page .vh-card-article .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-article .vh-card-title a::after,
body.page-Main_Page .vh-sanctuary-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a::after,
body.page-Main_Page .vh-founder-title a::after,
body.page-Main_Page #vani-home .vh-founder-title a::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a::after,
body.page-Main_Page .vh-card-memories .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a::after,
body.page-Main_Page .vh-card-media-item .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-media-item .vh-card-title a::after,
body.page-Main_Page .vh-media-title a::after,
body.page-Main_Page .vh-card-tax .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a::after,
body.page-Main_Page .vh-card-tax .vh-card-body > .vh-card-title a::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-body > .vh-card-title a::after,
#vani-stage-content-slot .vh-card-title a::after,
#vani-stage-content-slot .vh-sanctuary-title a::after,
#vani-stage-content-slot .vh-founder-title a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 6px rgba(181, 130, 36, 0.65) !important;
border-radius: 2px !important;
pointer-events: none !important;
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.2s ease !important;
}
body.page-Main_Page #vani-home .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-article .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-card .vh-sanctuary-title a:hover::after,
body.page-Main_Page #vani-home .vh-founder-title a:hover::after,
body.page-Main_Page #vani-home .vh-sanctuary-sub-1 a:hover::after,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-media-item .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a:hover::after,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-body > .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-article .vh-card-title a:hover::after,
body.page-Main_Page .vh-sanctuary-title a:hover::after,
body.page-Main_Page .vh-sanctuary-card .vh-sanctuary-title a:hover::after,
body.page-Main_Page .vh-founder-title a:hover::after,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-media-item .vh-card-title a:hover::after,
body.page-Main_Page .vh-card-tax .vh-card-title a:hover::after,
#vani-stage-content-slot .vh-card-title a:hover::after,
#vani-stage-content-slot .vh-sanctuary-title a:hover::after,
#vani-stage-content-slot .vh-founder-title a:hover::after {
animation: none !important;
opacity: 1 !important;
width: 90% !important;
left: 5% !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(181, 130, 36, 0.75) !important;
}
/* 6. STRICT STRUCTURAL RESTORATION: CLEAN ELEVATION & COLUMN BALANCING */
/* Introductory Articles flat title styling & hover */
body.page-Main_Page #vani-home .vh-intro-articles-title,
body.page-Main_Page #vani-home .vh-intro-articles-title a,
body.page-Main_Page .vh-intro-articles-title,
body.page-Main_Page .vh-intro-articles-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 24px !important;
font-weight: 700 !important;
color: #966817 !important;
-webkit-text-fill-color: #966817 !important;
text-shadow: none !important;
letter-spacing: 0.025em !important;
line-height: 1.2 !important;
display: inline-block !important;
position: relative !important;
padding-bottom: 5px !important;
margin: 0 0 4px 0 !important;
cursor: pointer !important;
text-align: center !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
color 0.2s ease,
-webkit-text-fill-color 0.2s ease !important;
}
body.page-Main_Page #vani-home .vh-intro-articles-title a:hover,
body.page-Main_Page .vh-intro-articles-title a:hover {
transform: translateY(-3px) !important;
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: none !important;
}
body.page-Main_Page #vani-home .vh-intro-articles-title a::after,
body.page-Main_Page .vh-intro-articles-title a::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
height: 2.5px !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 6px rgba(181, 130, 36, 0.65) !important;
border-radius: 2px !important;
pointer-events: none !important;
animation: vhLineBreath 2.8s ease-in-out infinite !important;
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.2s ease !important;
}
body.page-Main_Page #vani-home .vh-intro-articles-title a:hover::after,
body.page-Main_Page .vh-intro-articles-title a:hover::after {
animation: none !important;
opacity: 1 !important;
width: 90% !important;
left: 5% !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(150, 104, 23, 0.4) 15%,
#b58224 50%,
rgba(150, 104, 23, 0.4) 85%,
transparent 100%
) !important;
box-shadow: 0 0 8px rgba(181, 130, 36, 0.75) !important;
}
/* Specific article item headline within the spotlight card */
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-article-item-title,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-article-item-title a,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-card-title,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-card-title a,
body.page-Main_Page .vh-card-article #vh-random-article .vh-article-item-title,
body.page-Main_Page .vh-card-article #vh-random-article .vh-article-item-title a,
body.page-Main_Page .vh-card-article #vh-random-article .vh-card-title,
body.page-Main_Page .vh-card-article #vh-random-article .vh-card-title a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
display: block !important;
margin-top: 2px !important;
margin-bottom: 4px !important;
text-align: center !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-article-item-title a:hover,
body.page-Main_Page #vani-home .vh-card-article #vh-random-article .vh-card-title a:hover,
body.page-Main_Page .vh-card-article #vh-random-article .vh-article-item-title a:hover,
body.page-Main_Page .vh-card-article #vh-random-article .vh-card-title a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
/* Devotee Subtitle in Memories card */
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a,
body.page-Main_Page .vh-memory-devotee-subtitle,
body.page-Main_Page .vh-memory-devotee-subtitle a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 17.5px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
display: block !important;
margin-top: 2px !important;
margin-bottom: 5px !important;
text-align: center !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page .vh-memory-devotee-subtitle a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
@media screen and (min-width: 901px) {
/* Enforce 3 columns on desktop for Section 3 (Personalities, Names, Places) */
body.page-Main_Page #vani-home .vh-taxonomy-grid,
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 90px !important;
max-height: 130px !important;
}
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a,
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page-Main_Page #vani-home .vh-card-questions .vh-card-title,
body.page-Main_Page #vani-home .vh-card-questions .vh-card-title a,
body.page-Main_Page .vh-card-questions .vh-card-title,
body.page-Main_Page .vh-card-questions .vh-card-title a {
font-size: 21px !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
body.page-Main_Page #vani-home .vh-card-tax,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page #vani-home .vh-card-questions,
body.page-Main_Page .vh-card-questions {
padding: 2px 10px 4px 10px !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-tax .vh-card-text,
body.page-Main_Page .vh-card-tax .vh-card-text,
body.page-Main_Page #vani-home .vh-card-questions .vh-card-text,
body.page-Main_Page .vh-card-questions .vh-card-text {
font-size: 13px !important;
line-height: 1.35 !important;
margin-top: 2px !important;
}
/* Lift 3 bottom taxonomy cards up so they sit comfortably above the footer */
body.page-Main_Page #vani-home .vh-taxonomy-section,
body.page-Main_Page .vh-taxonomy-section {
transform: translateY(-72px) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
height: auto !important;
min-height: 95px !important;
max-height: 120px !important;
position: relative !important;
z-index: 2 !important;
}
/* Founder-Ācārya and Preeminent Śikṣā-Guru single line fitting */
body.page-Main_Page #vani-home .vh-founder-title,
body.page-Main_Page #vani-home .vh-founder-title a,
body.page-Main_Page .vh-founder-title,
body.page-Main_Page .vh-founder-title a {
font-size: 21px !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
body.page-Main_Page #vani-home .vh-sanctuary-sub-2,
body.page-Main_Page .vh-sanctuary-sub-2 {
font-size: 17.5px !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
/* SHIFT MARKED SECTION (Hero Triad + Timeline) DOWN EXACTLY 30px */
body.page-Main_Page #vani-home .vh-triad-grid,
body.page-Main_Page .vh-triad-grid {
transform: translateY(30px) !important;
height: auto !important;
min-height: 380px !important;
max-height: 420px !important;
align-items: flex-start !important;
margin-bottom: 8px !important;
}
body.page-Main_Page #vani-home .vh-timeline-section,
body.page-Main_Page .vh-timeline-section {
transform: translateY(30px) !important;
position: relative !important;
margin-top: 16px !important;
margin-bottom: 10px !important;
height: 125px !important;
min-height: 125px !important;
max-height: 125px !important;
flex: 0 0 125px !important;
}
/* Left & Right Stacked Columns: Symmetrical 340px widths */
body.page-Main_Page #vani-home .vh-triad-column-left,
body.page-Main_Page .vh-triad-column-left,
body.page-Main_Page #vani-home .vh-triad-column-right,
body.page-Main_Page .vh-triad-column-right,
body.page-Main_Page #vani-home .vh-triad-column-stacked,
body.page-Main_Page .vh-triad-column-stacked {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 14px !important;
flex: 0 0 340px !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
min-height: 0 !important;
max-height: 420px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Card padding and bounding inside both columns */
body.page-Main_Page #vani-home .vh-triad-column-stacked .vh-card,
body.page-Main_Page .vh-triad-column-stacked .vh-card,
body.page-Main_Page #vani-home .vh-triad-column-left .vh-card,
body.page-Main_Page .vh-triad-column-left .vh-card,
body.page-Main_Page #vani-home .vh-triad-column-right .vh-card,
body.page-Main_Page .vh-triad-column-right .vh-card,
body.page-Main_Page #vani-home .vh-card-article,
body.page-Main_Page #vani-home .vh-card-questions,
body.page-Main_Page #vani-home .vh-card-memories,
body.page-Main_Page #vani-home .vh-card-media-item {
flex: 0 0 auto !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 4px 10px !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
height: 135px !important;
min-height: 135px !important;
max-height: 135px !important;
}
}
/* ==========================================================================
STEP 139: DISCIPLES REMEMBER ŚRĪLA PRABHUPĀDA TWO-LINE TITLE & DEVOTEE NAME
========================================================================== */
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title,
body.page-Main_Page .vh-card-memories .vh-card-title {
margin: 0 0 2px 0 !important;
text-align: center !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-memories .vh-card-title a {
display: inline-block !important;
line-height: 1.05 !important;
text-align: center !important;
padding-bottom: 5px !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-title-line,
body.page-Main_Page .vh-card-memories .vh-title-line {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle {
margin-top: 2px !important;
margin-bottom: 2px !important;
text-align: center !important;
display: block !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
text-decoration: none !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-text {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
margin-top: 2px !important;
margin-bottom: 0 !important;
text-align: center !important;
}
/* ==========================================================================
STEP 141: STATIC TITLE ON MEMORIES ROTATION + 3-LINE WIDER LANGUAGES CARD
========================================================================== */
/* 1. DISCIPLES REMEMBER ŚRĪLA PRABHUPĀDA TITLE: 100% STATIC (NEVER ANIMATES ON ROTATION) */
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title,
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a,
body.page-Main_Page .vh-card-memories .vh-card-title,
body.page-Main_Page .vh-card-memories .vh-card-title a {
opacity: 1 !important;
transform: none !important;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
color 0.2s ease,
-webkit-text-fill-color 0.2s ease !important;
margin: 0 0 2px 0 !important;
text-align: center !important;
padding: 0 0 5px 0 !important;
display: inline-block !important;
line-height: 1.05 !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-title a:hover,
body.page-Main_Page .vh-card-memories .vh-card-title a:hover {
transform: translateY(-3px) !important;
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: none !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-title-line,
body.page-Main_Page .vh-card-memories .vh-title-line {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
/* Transition ONLY the disciple name subtitle during randomizer */
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle {
margin-top: 2px !important;
margin-bottom: 2px !important;
text-align: center !important;
display: block !important;
transition: opacity 0.45s ease, transform 0.45s ease !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle.is-changing,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle.is-changing {
opacity: 0 !important;
transform: translateY(3px) !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: #7b5310 !important;
-webkit-text-fill-color: #7b5310 !important;
text-shadow: none !important;
text-decoration: none !important;
cursor: pointer !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page #vani-home .vh-memory-devotee-subtitle a:hover,
body.page-Main_Page .vh-card-memories .vh-memory-devotee-subtitle a:hover {
color: #b58224 !important;
-webkit-text-fill-color: #b58224 !important;
text-decoration: underline !important;
}
body.page-Main_Page #vani-home .vh-card-memories .vh-card-text,
body.page-Main_Page .vh-card-memories .vh-card-text {
display: block !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.35 !important;
color: #2c3e42 !important;
margin-top: 2px !important;
margin-bottom: 0 !important;
text-align: center !important;
}
/* 2. SP IN MEDIA: FRAME FITS EXACTLY AROUND THUMBNAIL WITH ZERO SIDE GAPS */
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-card-content,
body.page-Main_Page .vh-card-media-item .vh-media-card-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: 135px !important;
margin: 0 auto 6px auto !important;
padding: 0 !important;
border-radius: 6px !important;
overflow: hidden !important;
background: transparent !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(177, 135, 61, 0.45) !important;
line-height: 0 !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb a,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb a {
display: inline-block !important;
width: auto !important;
height: auto !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb img {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: 130px !important;
max-height: 130px !important;
object-fit: contain !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
transition: transform 0.35s ease !important;
}
body.page-Main_Page #vani-home .vh-card-media-item .vh-media-large-thumb:hover img,
body.page-Main_Page .vh-card-media-item .vh-media-large-thumb:hover img {
transform: scale(1.03) !important;
}
/* 3. SECTION 3: 4 COLUMNS WITH WIDER COLUMN FOR PARTICIPATING LANGUAGES */
@media screen and (min-width: 901px) {
body.page-Main_Page #vani-home .vh-taxonomy-grid,
body.page-Main_Page .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr 1.35fr !important;
gap: 16px !important;
width: 100% !important;
max-width: 1220px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 90px !important;
max-height: 130px !important;
}
body.page-Main_Page #vani-home .vh-card-tax,
body.page-Main_Page .vh-card-tax,
body.page-Main_Page #vani-home .vh-card-languages,
body.page-Main_Page .vh-card-languages {
padding: 3px 8px 5px 8px !important;
box-sizing: border-box !important;
}
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title,
body.page-Main_Page #vani-home .vh-card-tax .vh-card-title a,
body.page-Main_Page .vh-card-tax .vh-card-title,
body.page-Main_Page .vh-card-tax .vh-card-title a,
body.page-Main_Page #vani-home .vh-card-languages .vh-card-title,
body.page-Main_Page #vani-home .vh-card-languages .vh-card-title a,
body.page-Main_Page .vh-card-languages .vh-card-title,
body.page-Main_Page .vh-card-languages .vh-card-title a {
font-size: 20px !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
}
/* 4. LANGUAGES CARD: EXACTLY 3 ROWS (5 COUNTRIES PER ROW) */
body.page-Main_Page #vani-home .vh-card-languages .vh-languages-list,
body.page-Main_Page .vh-card-languages .vh-languages-list {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 3px !important;
padding: 2px 0 0 0 !important;
margin: 0 !important;
width: 100% !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-row,
body.page-Main_Page .vh-card-languages .vh-lang-row {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
white-space: nowrap !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-item,
body.page-Main_Page .vh-card-languages .vh-lang-item {
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 11px !important;
line-height: 1.25 !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-item a,
body.page-Main_Page .vh-card-languages .vh-lang-item a {
color: #2c3e42 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
transition: color 0.15s ease !important;
}
body.page-Main_Page #vani-home .vh-card-languages .vh-lang-item a:hover,
body.page-Main_Page .vh-card-languages .vh-lang-item a:hover {
color: #966817 !important;
text-decoration: underline !important;
}
/* Flag thumbnail element */
.vh-flag {
display: inline-block !important;
width: 15px !important;
height: 10px !important;
margin-right: 4px !important;
vertical-align: -1px !important;
border-radius: 1.5px !important;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.45) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
flex-shrink: 0 !important;
}
/* Crisp SVG Flag Definitions */
/* ==========================================================================
STEP 147: SOCIAL ICONS IN THE MID OF THE SPACE ON THE RIGHT
========================================================================== */
.vh-bottom-bar-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
padding: 0 24px !important;
position: relative !important;
box-sizing: border-box !important;
}
.vh-bottom-bar-left-space {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.vh-bottom-nav-links {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
white-space: nowrap !important;
}
.vh-bottom-bar-right-space {
flex: 1 1 0 !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.vh-bottom-social-links {
position: static !important;
transform: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 24px !important;
}
.vh-bottom-social-item {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 24px !important;
line-height: 0 !important;
transition: transform 0.2s ease, opacity 0.2s ease !important;
text-decoration: none !important;
}
.vh-bottom-social-item:hover {
transform: scale(1.15) !important;
opacity: 0.9 !important;
}
.vh-bottom-social-item img {
display: block !important;
height: 20px !important;
width: auto !important;
max-height: 20px !important;
object-fit: contain !important;
border: none !important;
}
/* ==========================================================================
STEP 153: DISTINGUISHED VANISEVA PILL + ELEVATED BACK-TO-TOP + FLAG STYLING
========================================================================== */
/* 1. ELEVATED BACK-TO-TOP ARROW (Floats 16px clearly above the 38px bottom bar) */
#vanipedia-back-to-top {
position: fixed !important;
bottom: 54px !important;
right: 24px !important;
width: 44px !important;
height: 44px !important;
z-index: 100000 !important;
}
@media screen and (max-width: 768px) {
#vanipedia-back-to-top {
bottom: 54px !important;
right: 16px !important;
width: 40px !important;
height: 40px !important;
z-index: 100000 !important;
}
}
/* 2. REMOVE EXTRA BOX/BAR AROUND HEADER (Outer container completely borderless & transparent) */
body.page-Main_Page .vector-header-container,
.vector-header-container,
.vector-header-container.vector-sticky-header-container {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
/* 3. THE VERY EXISTING TOP BAR: Single, clean, elegant header bar */
header.mw-header,
header.vector-header,
body.page-Main_Page #mw-head,
body.page-Main_Page .vector-header-container header.mw-header {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 86px !important;
max-height: 96px !important;
padding: 10px 24px !important;
background: #345B63 !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
position: relative !important;
box-sizing: border-box !important;
}
/* 4. TOP BAR CENTER BLOCK */
.vanipedia-topbar-center-block {
position: absolute !important;
left: 50% !important;
top: 54% !important;
transform: translate(-50%, -50%) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: nowrap !important;
z-index: 10 !important;
pointer-events: auto !important;
line-height: 1 !important;
}
#vanipedia-topbar-center-block * {
position: static !important;
transform: none !important;
}
.vanipedia-topbar-main-title,
#vanipedia-topbar-title {
position: static !important;
transform: none !important;
display: block !important;
font-family: 'Cinzel', Georgia, serif !important;
font-size: 17.5px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
color: #f5d77f !important;
text-decoration: none !important;
text-decoration-line: none !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important;
line-height: 1.25 !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
pointer-events: none !important;
user-select: text !important;
}
/* 5. DISTINGUISHED MIDDLE LINE: VANISEVA LUMINOUS INVITATION PILL */
.vanipedia-topbar-vaniseva-title {
position: static !important;
transform: none !important;
display: block !important;
margin: 0 0 4px 0 !important;
line-height: 1.2 !important;
}
.vanipedia-topbar-vaniseva-title a {
color:#f5d77f !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12.5px !important;
font-style: normal !important;
font-weight: 500 !important;
letter-spacing: 0.35px !important;
text-decoration: none !important;
text-decoration-line: none !important;
border:0 !important;
border-bottom:0 !important;
background:none !important;
outline: none !important;
padding:0 !important;
border-radius:0 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
display: inline-block !important;
}
.vanipedia-topbar-vaniseva-title a:hover,
.vanipedia-topbar-vaniseva-title a:focus,
.vanipedia-topbar-vaniseva-title a:active {
color:#f5d77f !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-color:transparent !important;
background-color:transparent !important;
box-shadow:none !important;
}
/* 6. SISTER PROJECTS (Line 3) */
.vanipedia-topbar-sister-links {
position: static !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.vanipedia-topbar-sister-link {
color: #f5d77f !important;
font-family: 'Noto Serif', Georgia, serif !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.4px !important;
text-decoration: none !important;
text-decoration-line: none !important;
border: none !important;
border-bottom: none !important;
outline: none !important;
padding: 1px 6px !important;
border-radius: 3px !important;
transition: all 0.18s ease !important;
display: inline-flex !important;
align-items: center !important;
cursor: pointer !important;
}
.vanipedia-topbar-sister-link:hover,
.vanipedia-topbar-sister-link:focus,
.vanipedia-topbar-sister-link:active {
color: #ffffff !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
background-color: rgba(245, 215, 127, 0.18) !important;
}
.vanipedia-topbar-sister-sep {
color: rgba(245, 215, 127, 0.4) !important;
font-size: 10px !important;
line-height: 1 !important;
user-select: none !important;
}
/* 7. PARTICIPATING LANGUAGES FLAGS STYLING */
.vh-flag {
display: inline-block !important;
width: 15px !important;
height: 10px !important;
margin-right: 5px !important;
vertical-align: -1px !important;
border-radius: 1.5px !important;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.45) !important;
flex-shrink: 0 !important;
overflow: hidden !important;
}
.vh-flag svg {
width: 100% !important;
height: 100% !important;
display: block !important;
}
/* 8. MINERVA MOBILE SKIN (Phone Header) */
body.skin-minerva .minerva-header {
flex-wrap: nowrap !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 10px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
}
/* 8.1 Burger Navigation Drawer Button */
.minerva-header .navigation-drawer.toggle-list,
.minerva-header #mw-mf-main-menu-button,
.minerva-header .toggle-list__toggle {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
}
.minerva-header .minerva-icon--menu,
.minerva-header #mw-mf-main-menu-button .minerva-icon--menu {
background-color: #f5d77f !important;
display: inline-block !important;
width: 24px !important;
height: 24px !important;
}
/* 8.2 Branding Box Title (Pure CSS Content Injection - 100% JS-Independent) */
body.skin-minerva .minerva-header .branding-box,
.minerva-header .branding-box {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
flex: 1 1 auto !important;
margin: 0 0 0 14px !important;
padding: 0 !important;
min-width: 0 !important;
overflow: visible !important;
}
body.skin-minerva .minerva-header .branding-box a,
.minerva-header .branding-box a {
display: inline-flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
text-decoration: none !important;
color: #f5d77f !important;
}
body.skin-minerva .minerva-header .branding-box a::before,
.minerva-header .branding-box a::before {
content: "Vanipedia" !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
color: #f5d77f !important;
font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.skin-minerva .minerva-header .branding-box a > span,
.minerva-header .branding-box a > span,
body.skin-minerva .minerva-header .branding-box a > img,
.minerva-header .branding-box a > img {
display: none !important;
}
/* 8.3 Home Link in Minerva */
.minerva-header a.vanipedia-topbar-home {
flex: 0 0 28px !important;
width: 28px !important;
height: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 4px !important;
padding: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #f5d77f !important;
}
/* 8.4 Search Button in Minerva */
.minerva-header .minerva-search-form {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
.minerva-header #searchIcon {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
}
.minerva-header .minerva-icon--search,
.minerva-header #searchIcon .minerva-icon--search {
background-color: #f5d77f !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
}
/* 8.5 User Navigation in Minerva */
.minerva-header .minerva-user-navigation {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
}
.minerva-header #ca-mytalks {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
}
.minerva-header .minerva-icon--bellOutline,
.minerva-header #ca-mytalks .minerva-icon--bellOutline {
background-color: #f5d77f !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
}
/* STRICTLY HIDE center block and extra lines on mobile */
body.skin-minerva .vanipedia-topbar-center-block,
body.skin-minerva #vanipedia-topbar-center-block,
body.skin-minerva #vanipedia-topbar-center-block-mobile,
body.skin-minerva .vanipedia-topbar-main-title,
body.skin-minerva .vanipedia-topbar-vaniseva-title,
body.skin-minerva .vanipedia-topbar-sister-links,
body.skin-minerva .vanipedia-topbar-sister-link,
body.skin-minerva .vanipedia-topbar-sister-sep {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Bottom bar mobile styling (from STEP 165) */
body.skin-minerva .vh-bottom-social-links,
body.skin-minerva .vh-bottom-bar-right-space {
display: none !important;
width: 0 !important;
}
body.skin-minerva .vh-bottom-bar-left-space {
display: none !important;
}
body.skin-minerva .vh-bottom-bar-inner {
justify-content: center !important;
padding: 0 10px !important;
}
body.skin-minerva .vh-bottom-nav-links {
width: 100% !important;
justify-content: center !important;
gap: 8px !important;
font-size: 11px !important;
}
/* 9. RESPONSIVE BREAKPOINTS (Desktop >= 1000px Intact; Mobile < 1000px Full Controls) */
@media screen and (max-width: 1200px) and (min-width: 1000px) {
.vanipedia-topbar-main-title {
font-size: 16px !important;
letter-spacing: 1.5px !important;
}
.vanipedia-topbar-vaniseva-title a {
font-size: 11.5px !important;
padding:0 !important;
}
.vanipedia-topbar-sister-link {
font-size: 11.5px !important;
}
}
@media screen and (max-width: 999px) {
/* Single Row Header on Mobile Viewports */
header.mw-header,
header.vector-header,
.vector-header-container .mw-header {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 10px !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background-color: #345B63 !important;
border-bottom: 2px solid #b1873d !important;
}
/* Top Row Left Section: Burger + Search + Home in single row */
.vector-header-start {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
flex: 1 1 auto !important;
min-width: 0 !important;
gap: 6px !important;
}
/* 1. FORCE BURGER MENU TO DISPLAY VISIBLE ON MOBILE */
.vector-header-start #vector-main-menu-dropdown,
#vector-main-menu-dropdown {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
cursor: pointer !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 4px !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-dropdown-label,
.vector-header-start #vector-main-menu-dropdown .vector-main-menu-dropdown-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
padding: 4px !important;
}
.vector-header-start #vector-main-menu-dropdown .vector-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
width: 22px !important;
height: 22px !important;
}
/* 2. SEARCH INPUT WITH GUARANTEED VISIBLE MAGNIFYING GLASS */
.vector-header-container #p-search,
.mw-header #p-search,
.vector-header-start #p-search {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
min-width: 60px !important;
max-width: calc(100vw - 140px) !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-container .cdx-search-input,
.vector-header-container .vector-search-box-input,
.vector-header-container .cdx-text-input,
.vector-header-start .cdx-text-input {
width: 100% !important;
max-width: 100% !important;
height: 32px !important;
margin: 0 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
}
.vector-header-container .cdx-text-input__icon,
.vector-header-container .cdx-text-input__start-icon,
.vector-header-start .cdx-text-input__icon,
.vector-header-start .cdx-text-input__start-icon,
#p-search .cdx-text-input__icon,
#p-search .cdx-text-input__start-icon {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
left: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
z-index: 5 !important;
pointer-events: none !important;
}
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
width: 100% !important;
min-width: 60px !important;
height: 32px !important;
font-size: 13px !important;
padding-left: 32px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
border-radius: 16px !important;
background-color: #1f3e45 !important;
border: 1px solid rgba(245, 215, 127, 0.45) !important;
color: #ffffff !important;
}
/* Compact Home Icon */
.vanipedia-topbar-home .vanipedia-home-text {
display: none !important;
}
.vector-header-start #vanipedia-topbar-home-link,
#vanipedia-topbar-home-link,
a.vanipedia-topbar-home {
margin: 0 2px !important;
padding: 3px 5px !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
/* 3. USER ICON GUARANTEED ON FAR RIGHT */
.vector-header-end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-end .vector-user-links,
.vector-header-end .vector-user-links-wide,
.vector-header-end .vector-user-links-main {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.vector-header-end #p-vector-user-menu-userpage {
display: none !important;
}
.vector-header-end #p-vector-user-menu-overflow,
.vector-header-end #vector-user-links-dropdown,
.vector-header-end .vector-user-menu-overflow {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
.vector-header-end #vector-user-links-dropdown .vector-dropdown-label,
.vector-header-end .vector-user-menu-overflow .vector-dropdown-label {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
}
.vector-header-end #vector-user-links-dropdown .vector-icon,
.vector-header-end .vector-user-menu-overflow .vector-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
background-color: #f5d77f !important;
color: #f5d77f !important;
fill: #f5d77f !important;
}
.vector-header-end .vector-dropdown-label-text {
display: none !important;
}
/* STRICTLY HIDE center block and extra lines on mobile viewports (< 1000px) */
.vanipedia-topbar-center-block,
#vanipedia-topbar-center-block,
#vanipedia-topbar-center-block-mobile,
.vanipedia-topbar-main-title,
#vanipedia-topbar-title,
#vanipedia-topbar-title-mobile,
#vanipedia-topbar-title-link,
#vanipedia-topbar-center-title,
.vanipedia-topbar-vaniseva-title,
.vanipedia-topbar-sister-links,
.vanipedia-topbar-sister-link,
.vanipedia-topbar-sister-sep {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Bottom bar social links hidden on mobile (from STEP 165) */
.vh-bottom-social-links,
.vh-bottom-bar-right-space {
display: none !important;
width: 0 !important;
flex: 0 0 0 !important;
visibility: hidden !important;
}
.vh-bottom-bar-left-space {
display: none !important;
width: 0 !important;
flex: 0 0 0 !important;
}
.vh-bottom-bar-inner {
justify-content: center !important;
padding: 0 10px !important;
}
.vh-bottom-nav-links {
width: 100% !important;
justify-content: center !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
gap: 8px !important;
font-size: 11px !important;
}
}
/* ==========================================================================
STEP 173: RESTORE WORKING STEP 117 COMPACT STAGE PROPORTIONS (ZERO-CROP)
Overrides all desktop-specific shifts (min-height: 380px, translateY: 30px,
translateY: -72px, 324px photo) inside the mobile rotated landscape stage.
========================================================================== */
#vani-mobile-stage #vani-rotated-box #vani-stage-content-slot #vani-home,
body.page-Main_Page #vani-stage-content-slot #vani-home {
width: 1200px !important;
min-width: 1200px !important;
max-width: 1200px !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 8px !important;
padding: 4px 16px 12px 16px !important;
margin: 0 !important;
background-color: #f6f2e9 !important;
overflow: visible !important;
}
#vani-stage-content-slot #vani-home .vh-triad-grid,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-triad-grid {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
gap: 16px !important;
flex-wrap: nowrap !important;
height: auto !important;
min-height: 250px !important;
max-height: 270px !important;
transform: none !important;
margin: 0 0 6px 0 !important;
}
#vani-stage-content-slot #vani-home .vh-photo-stage,
#vani-stage-content-slot #vani-home .vh-sanctuary-portrait-box .vh-photo-stage,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-photo-stage,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-sanctuary-portrait-box .vh-photo-stage {
width: 200px !important;
height: 200px !important;
min-width: 200px !important;
min-height: 200px !important;
max-width: 200px !important;
max-height: 200px !important;
margin: 0 auto !important;
border-radius: 50% !important;
border: 4px solid #233e44 !important;
border-top: 4px solid #4a757e !important;
border-bottom: 5px solid #112023 !important;
box-shadow: 0 8px 24px rgba(18, 63, 56, 0.35), 0 2px 6px rgba(0, 0, 0, 0.22) !important;
overflow: hidden !important;
position: relative !important;
}
#vani-stage-content-slot #vani-home .vh-sanctuary-card,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-sanctuary-card {
flex: 1 1 auto !important;
width: auto !important;
text-align: center !important;
margin: 0 !important;
height: auto !important;
min-height: auto !important;
max-height: 270px !important;
}
#vani-stage-content-slot #vani-home .vh-card-text.vh-sanctuary-text,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-text.vh-sanctuary-text {
margin-top: 8px !important;
margin-bottom: 0 !important;
}
#vani-stage-content-slot #vani-home .vh-triad-column-left,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-triad-column-left,
#vani-stage-content-slot #vani-home .vh-card-article,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-article {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
height: auto !important;
min-height: auto !important;
max-height: 270px !important;
}
#vani-stage-content-slot #vani-home .vh-card-memories,
#vani-stage-content-slot #vani-home .vh-card-media-item {
flex: 0 0 auto !important;
height: auto !important;
}
#vani-stage-content-slot #vani-home .vh-card-media-item .vh-media-large-thumb {
height: 110px !important;
min-height: 110px !important;
}
#vani-stage-content-slot #vani-home .vh-timeline-section,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-timeline-section {
transform: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 4px 0 !important;
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
flex: 0 0 80px !important;
position: relative !important;
left: auto !important;
right: auto !important;
}
#vani-stage-content-slot #vani-home .vh-timeline-track,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-timeline-track {
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
}
#vani-stage-content-slot #vani-home .vh-timeline-item,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-timeline-item {
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
}
#vani-stage-content-slot #vani-home .vh-taxonomy-section,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-taxonomy-section {
transform: none !important;
width: 100% !important;
margin: 4px 0 !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
flex: 0 0 auto !important;
}
#vani-stage-content-slot #vani-home .vh-taxonomy-grid,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-taxonomy-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
width: 100% !important;
height: auto !important;
}
#vani-stage-content-slot #vani-home .vh-card-tax,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-tax,
#vani-stage-content-slot #vani-home .vh-card-languages,
body.page-Main_Page #vani-stage-content-slot #vani-home .vh-card-languages {
height: auto !important;
min-height: 95px !important;
max-height: 110px !important;
padding: 6px 10px !important;
}
#vani-stage-header-slot .vanipedia-stage-title-link,
#vani-stage-header-slot .vanipedia-topbar-title-link,
#vani-stage-header-slot .vanipedia-topbar-main-title,
#vani-stage-header-slot .branding-box a {
display: inline-flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 700 !important;
color: #f5d77f !important;
text-decoration: none !important;
letter-spacing: 0.8px !important;
line-height: 1 !important;
margin: 0 10px !important;
cursor: pointer !important;
}

/* V174 — Vanipedia main page: static, naturally scrolling, and responsive. */
body.page-Main_Page {
background:#faf7ef !important;
overflow-x:hidden !important;
}
body.page-Main_Page #vani-home.vp-static-home {
--vp-paper:#faf7ef;
--vp-card:#fffdf8;
--vp-ink:#263a39;
--vp-brand:#345b63;
--vp-accent:#b1873d;
--vp-line:#ded7c6;
box-sizing:border-box !important;
display:block !important;
position:relative !important;
width:100% !important;
min-width:0 !important;
max-width:1240px !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 auto !important;
padding:clamp(18px,3vw,38px) !important;
overflow:visible !important;
color:var(--vp-ink) !important;
background:var(--vp-paper) !important;
font:400 17px/1.6 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home,
body.page-Main_Page #vani-home.vp-static-home * {
box-sizing:border-box !important;
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
body.page-Main_Page #vani-home.vp-static-home a {
color:var(--vp-brand) !important;
text-decoration:underline !important;
text-decoration-color:#aab3a8 !important;
text-underline-offset:3px !important;
background:none !important;
box-shadow:none !important;
}
body.page-Main_Page #vani-home.vp-static-home a:hover {
color:var(--vp-accent) !important;
text-decoration-thickness:2px !important;
}
body.page-Main_Page #vani-home.vp-static-home a:focus-visible {
outline:3px solid var(--vp-brand) !important;
outline-offset:3px !important;
}
body.page-Main_Page #vani-home.vp-static-home h1,
body.page-Main_Page #vani-home.vp-static-home h2,
body.page-Main_Page #vani-home.vp-static-home h3,
body.page-Main_Page #vani-home.vp-static-home p {
margin-top:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home h1 {
margin:0 0 10px !important;
color:var(--vp-brand) !important;
font:600 clamp(29px,4vw,40px)/1.2 Georgia,"Noto Serif",serif !important;
text-align:center !important;
}
body.page-Main_Page #vani-home.vp-static-home h2 {
margin:0 0 14px !important;
padding:0 0 9px !important;
border:0 !important;
border-bottom:1px solid var(--vp-line) !important;
color:var(--vp-brand) !important;
font:600 22px/1.3 Georgia,"Noto Serif",serif !important;
text-align:left !important;
}
body.page-Main_Page #vani-home.vp-static-home h3 {
margin:0 0 7px !important;
color:var(--vp-ink) !important;
font:600 18px/1.4 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home p { margin-bottom:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
display:grid !important;
grid-template-columns:220px minmax(0,1fr) !important;
align-items:center !important;
gap:clamp(24px,5vw,64px) !important;
max-width:1000px !important;
margin:0 auto 32px !important;
padding:8px 0 28px !important;
border-bottom:1px solid var(--vp-line) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait {
width:220px !important;
height:220px !important;
max-width:100% !important;
margin:0 auto !important;
overflow:hidden !important;
border:3px solid var(--vp-brand) !important;
border-radius:50% !important;
background:#f0eee3 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait p,
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait a {
display:block !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait img {
display:block !important;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:cover !important;
object-position:center 35% !important;
border:0 !important;
box-shadow:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy {
min-width:0 !important;
text-align:center !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role {
margin:0 auto 4px !important;
color:var(--vp-accent) !important;
font-size:clamp(19px,2.2vw,25px) !important;
font-weight:600 !important;
line-height:1.35 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization {
color:var(--vp-ink) !important;
font-size:17px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-who { margin-top:12px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-feature-grid {
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:22px !important;
margin:0 0 30px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-card {
min-width:0 !important;
padding:20px !important;
border:1px solid var(--vp-line) !important;
border-radius:6px !important;
background:var(--vp-card) !important;
color:var(--vp-ink) !important;
box-shadow:0 2px 9px rgba(38,58,57,.045) !important;
transform:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-card:hover {
transform:none !important;
box-shadow:0 2px 9px rgba(38,58,57,.045) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-card h3 { margin-bottom:8px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-card blockquote {
margin:4px 0 0 !important;
padding:4px 0 4px 16px !important;
border-left:3px solid var(--vp-accent) !important;
color:var(--vp-ink) !important;
font:400 17px/1.6 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-feature {
display:grid !important;
grid-template-columns:minmax(120px,190px) minmax(0,1fr) !important;
align-items:center !important;
gap:16px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-image,
body.page-Main_Page #vani-home.vp-static-home .vp-media-image p,
body.page-Main_Page #vani-home.vp-static-home .vp-media-image a {
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-image img {
display:block !important;
width:100% !important;
height:auto !important;
max-width:100% !important;
border-radius:3px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-outlet {
margin-bottom:5px !important;
color:#706b62 !important;
font-size:14px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-headline { font-size:17px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-section {
margin:0 0 30px !important;
padding:20px 0 22px !important;
border-block:1px solid var(--vp-line) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-intro { margin:-5px 0 12px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-years {
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(76px,1fr)) !important;
gap:6px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-years a {
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:42px !important;
padding:6px 8px !important;
border:1px solid var(--vp-line) !important;
border-radius:4px !important;
background:var(--vp-card) !important;
color:var(--vp-brand) !important;
text-align:center !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-years a:hover {
border-color:var(--vp-brand) !important;
background:#f1f3ee !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-section { margin:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid {
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:18px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-card { padding:18px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-languages-card { grid-column:span 1 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-languages-list {
display:flex !important;
flex-wrap:wrap !important;
gap:8px 12px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-lang-item {
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
min-height:32px !important;
white-space:nowrap !important;
}
body.page-Main_Page #vani-home.vp-static-home .vh-flag {
display:inline-block !important;
flex:0 0 22px !important;
width:22px !important;
height:15px !important;
vertical-align:middle !important;
}
/* Restore ordinary page flow and neutralize any legacy rotated-stage wrapper. */
#vani-mobile-stage, #vani-rotated-box {
position:static !important;
inset:auto !important;
width:auto !important;
height:auto !important;
min-width:0 !important;
min-height:0 !important;
max-width:none !important;
max-height:none !important;
overflow:visible !important;
transform:none !important;
rotate:none !important;
}
#vani-stage-header-slot, #vani-stage-content-slot, #vani-stage-footer-slot { display:contents !important; }
@media (max-width:950px) {
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:700px) {
body.page-Main_Page #vani-home.vp-static-home { padding:20px 16px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
grid-template-columns:minmax(0,1fr) !important;
gap:16px !important;
margin-bottom:24px !important;
padding-bottom:22px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait { width:160px !important; height:160px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-feature-grid { grid-template-columns:minmax(0,1fr) !important; gap:16px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid { grid-template-columns:minmax(0,1fr) !important; gap:14px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-card { padding:17px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-feature { grid-template-columns:minmax(100px,34%) minmax(0,1fr) !important; gap:12px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-section { margin-bottom:24px !important; }
}
@media (max-width:380px) {
body.page-Main_Page #vani-home.vp-static-home .vp-media-feature { grid-template-columns:minmax(0,1fr) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-image { max-width:260px !important; }
}
@media (prefers-reduced-motion:reduce) {
body.page-Main_Page #vani-home.vp-static-home *,
body.page-Main_Page #vani-home.vp-static-home *::before,
body.page-Main_Page #vani-home.vp-static-home *::after {
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
}

/* V175: natural document scrolling, Vanisource-style hero, Vanipedia colors. */
html,
body.page-Main_Page {
height:auto !important;
min-height:100% !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
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-content-text,
body.page-Main_Page .mw-parser-output {
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
body.page-Main_Page #vani-home.vp-static-home {
--vp-brand:#345B63;
--vp-accent:#f5d77f;
--vp-ink:#263a3d;
--vp-line:#d8d1c3;
--vp-card:#fffdf8;
position:relative !important;
display:block !important;
width:min(100%, 1200px) !important;
min-width:0 !important;
max-width:1200px !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 auto !important;
padding:26px clamp(16px,3vw,34px) 100px !important;
overflow:visible !important;
background:#faf7ef !important;
}
/* The site-wide footer remains fixed; this page has room to scroll past it. */
body.page-Main_Page #vani-home.vp-static-home::after {
content:"";
display:block;
height:0;
clear:both;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
display:grid !important;
grid-template-columns:minmax(170px,210px) minmax(0,1fr) !important;
align-items:center !important;
gap:clamp(24px,4vw,44px) !important;
width:100% !important;
max-width:880px !important;
min-height:0 !important;
margin:0 auto 30px !important;
padding:22px 26px !important;
border:1px solid #345B63 !important;
border-left:5px solid #f5d77f !important;
border-radius:8px !important;
background:#345B63 !important;
color:#fff8e4 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait {
box-sizing:border-box !important;
width:min(100%,210px) !important;
height:auto !important;
aspect-ratio:445 / 542 !important;
margin:0 auto !important;
overflow:hidden !important;
border:2px solid #f5d77f !important;
border-radius:6px !important;
background:#faf7ef !important;
box-shadow:0 5px 18px rgba(18,35,37,.3) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait p,
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait a {
display:block !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait img {
display:block !important;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:cover !important;
object-position:center !important;
border:0 !important;
border-radius:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy,
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy h1 {
min-width:0 !important;
text-align:center !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy h1 {
margin:0 0 9px !important;
color:#f5d77f !important;
font:600 clamp(32px,3vw,42px)/1.15 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role {
margin:0 0 7px !important;
color:#fff8e4 !important;
font:600 clamp(19px,1.7vw,22px)/1.3 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role a,
body.page-Main_Page #vani-home.vp-static-home .vp-home-who a {
color:#f5d77f !important;
text-decoration:underline !important;
text-underline-offset:4px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-role a:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-home-who a:hover { color:#fff !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization {
margin:0 !important;
color:#fff8e4 !important;
font:500 clamp(17px,1.5vw,20px)/1.4 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-who { margin-top:10px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-card,
body.page-Main_Page #vani-home.vp-static-home .vp-timeline-section,
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-section,
body.page-Main_Page #vani-home.vp-static-home .vp-feature-grid,
body.page-Main_Page #vani-home.vp-static-home .vp-taxonomy-grid {
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-quote {
margin:4px 0 0 !important;
padding:4px 0 4px 16px !important;
border-left:3px solid #f5d77f !important;
color:var(--vp-ink) !important;
font:400 17px/1.6 Georgia,"Noto Serif",serif !important;
}
/* Remove the old decorative cursor and restore the operating system pointer. */
html body.page-Main_Page,
html body.page-Main_Page * {
cursor:auto !important;
}
html body.page-Main_Page a[href],
html body.page-Main_Page button,
html body.page-Main_Page [role="button"],
html body.page-Main_Page .cdx-button {
cursor:pointer !important;
}
html body.page-Main_Page #vh-cursor-pointer,
html body.page-Main_Page #vh-kill-windows-cursor {
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
@media (max-width:700px) {
body.page-Main_Page #vani-home.vp-static-home { padding:18px 14px 96px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero {
grid-template-columns:minmax(0,1fr) !important;
gap:14px !important;
max-width:460px !important;
margin-bottom:24px !important;
padding:17px 17px 19px !important;
border-left-width:4px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-portrait { width:min(100%,170px) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-role { font-size:17px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization { font-size:17px !important; }
}

/* V176: native mouse cursor; main page language links are the remaining taxonomy feature. */
body.page-Main_Page #vani-home.vp-static-home .vp-language-section {
margin:0 !important;
padding:0 0 32px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-languages-card {
width:100% !important;
max-width:none !important;
grid-column:auto !important;
}

/* V179: native Windows pointer and viewport-contained portal rollouts. */
html body.page-Main_Page #vani-home.vp-static-home,
html body.page-Main_Page #vani-home.vp-static-home * {
cursor:default !important;
}
html body.page-Main_Page #vani-home.vp-static-home a[href],
html body.page-Main_Page #vani-home.vp-static-home a[href] *,
html body.page-Main_Page #vani-home.vp-static-home button,
html body.page-Main_Page #vani-home.vp-static-home [role="button"],
html body.page-Main_Page #vani-home.vp-static-home [role="button"] * {
cursor:pointer !important;
}
html body.page-Main_Page #vh-cursor-pointer,
html body.page-Main_Page #vh-kill-windows-cursor {
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-grid {
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
align-items:start !important;
gap:24px 18px !important;
width:100% !important;
margin:0 auto 28px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-secondary-grid {
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
max-width:640px !important;
margin-left:auto !important;
margin-right:auto !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card {
position:relative !important;
z-index:1 !important;
min-width:0 !important;
overflow:visible !important;
border:1px solid #d8d1c3 !important;
border-radius:7px !important;
background:#fffdf8 !important;
box-shadow:0 2px 9px rgba(38,58,57,.07) !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-hover-open,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-open {
z-index:100 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image p,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image a {
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image {
height:168px !important;
overflow:hidden !important;
border-radius:6px 6px 0 0 !important;
background:#e9e4d8 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image img {
display:block !important;
width:100% !important;
height:168px !important;
max-width:none !important;
object-fit:cover !important;
object-position:center 36% !important;
border:0 !important;
border-radius:0 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy {
min-height:145px !important;
padding:14px 15px 13px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy h2 {
min-height:50px !important;
margin:0 0 7px !important;
padding:0 0 7px !important;
border-bottom:1px solid #ded7c6 !important;
color:#345B63 !important;
font:700 18px/1.28 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy h2 a {
color:#345B63 !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy p {
min-height:44px !important;
margin:0 0 8px !important;
color:#354444 !important;
font:400 14px/1.45 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-toggle {
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
min-height:30px !important;
padding:4px 9px !important;
border:1px solid #d8d1c3 !important;
border-radius:4px !important;
background:#f6f2e9 !important;
color:#345B63 !important;
font:600 13px/1.3 Arial,Helvetica,sans-serif !important;
cursor:pointer !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-toggle:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-toggle:focus-visible {
border-color:#b1873d !important;
outline:2px solid #b1873d !important;
outline-offset:2px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-panel {
display:none !important;
position:fixed !important;
top:var(--vp-panel-top, 20px) !important;
left:var(--vp-panel-left, 12px) !important;
right:auto !important;
bottom:auto !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
width:var(--vp-panel-width, 290px) !important;
max-width:calc(100vw - 24px) !important;
max-height:min(380px,calc(100vh - 100px)) !important;
overflow:auto !important;
overscroll-behavior:contain !important;
padding:11px 12px 12px !important;
border:1px solid #d8d1c3 !important;
border-top:3px solid #b1873d !important;
border-radius:7px !important;
background:#fffdf8 !important;
box-shadow:0 10px 22px rgba(38,58,57,.22) !important;
text-align:left !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-hover-open > .vp-rollout-panel,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-card.is-open > .vp-rollout-panel {
display:block !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-heading {
display:block !important;
margin:0 0 7px !important;
color:#345B63 !important;
font:700 14px/1.35 Georgia,"Noto Serif",serif !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options {
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
gap:2px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options > span { display:block !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options a {
display:block !important;
min-height:34px !important;
padding:7px 8px !important;
border-radius:4px !important;
color:#345B63 !important;
font:500 14px/1.4 Georgia,"Noto Serif",serif !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options a:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-options a:focus-visible {
background:#f2eee4 !important;
color:#805b16 !important;
text-decoration:underline !important;
outline:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-year-options { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-year-options a { text-align:center !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-language-options { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-language-options a { display:flex !important; align-items:center !important; gap:8px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-all { display:block !important; margin-top:7px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-media-all a {
display:block !important;
padding:7px 8px !important;
border-top:1px solid #ded7c6 !important;
color:#345B63 !important;
font:600 13px/1.35 Arial,Helvetica,sans-serif !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-media-all a:hover,
body.page-Main_Page #vani-home.vp-static-home .vp-media-all a:focus-visible { text-decoration:underline !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-article-all { display:block !important; margin:0 0 10px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-article-all a {
display:block !important;
padding:8px 10px !important;
border-radius:4px !important;
background:#f2eee4 !important;
color:#345B63 !important;
font:700 14px/1.35 Arial,Helvetica,sans-serif !important;
text-decoration:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-categories-heading {
padding-top:8px !important;
border-top:1px solid #ded7c6 !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-articles-panel {
width:min(720px,calc(100vw - 24px)) !important;
--vp-panel-width:720px;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-options {
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:1px 5px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-options a {
min-height:0 !important;
padding:5px 6px !important;
font-size:12px !important;
line-height:1.25 !important;
}
@media (max-width:950px) {
body.page-Main_Page #vani-home.vp-static-home .vp-primary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-secondary-grid { max-width:100% !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-article-options { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-articles-panel { width:min(620px,calc(100vw - 24px)) !important; --vp-panel-width:620px; }
}
@media (max-width:700px) {
body.page-Main_Page #vani-home.vp-static-home .vp-primary-grid,
body.page-Main_Page #vani-home.vp-static-home .vp-secondary-grid {
grid-template-columns:minmax(0,1fr) !important;
gap:16px !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-image img { height:210px !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy { min-height:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy h2,
body.page-Main_Page #vani-home.vp-static-home .vp-portal-copy p { min-height:0 !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-rollout-panel {
position:static !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
width:auto !important;
max-width:none !important;
max-height:none !important;
margin:0 !important;
border-top:1px solid #d8d1c3 !important;
border-left:3px solid #b1873d !important;
border-radius:0 0 7px 7px !important;
box-shadow:none !important;
}
body.page-Main_Page #vani-home.vp-static-home .vp-article-options { grid-template-columns:minmax(0,1fr) !important; }
body.page-Main_Page #vani-home.vp-static-home .vp-articles-panel { width:auto !important; --vp-panel-width:auto; }
}

/* V181: restore the native Windows pointing hand on sidebar menu targets.
Earlier Main Page cursor rules forced .vector-menu links to cursor:auto. */
html body.page-Main_Page #mw-panel .vector-menu a[href],
html body.page-Main_Page #mw-panel .vector-menu a[href] *,
html body.page-Main_Page #mw-mf-page-left .vector-menu a[href],
html body.page-Main_Page #mw-mf-page-left .vector-menu a[href] *,
html body.page-Main_Page #vector-main-menu .vector-menu a[href],
html body.page-Main_Page #vector-main-menu .vector-menu a[href] *,
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-content li a[href],
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-content li a[href] *,
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-heading,
html body.page-Main_Page .vanipedia-sidebar-menu .vector-menu-heading * {
cursor:pointer !important;
}

/* V183: restore the pointing-hand cursor on every actionable top and bottom bar item.
Older Main Page rules set .vector-dropdown-label and .vh-bottom-link to cursor:auto. */
html body .vector-header-container a[href],
html body .vector-header-container a[href] *,
html body header.vector-header a[href],
html body header.vector-header a[href] *,
html body header.mw-header a[href],
html body header.mw-header a[href] *,
html body #mw-head a[href],
html body #mw-head a[href] *,
html body .minerva-header a[href],
html body .minerva-header a[href] *,
html body #vh-bottom-bar a[href],
html body #vh-bottom-bar a[href] *,
html body .vh-bottom-bar a[href],
html body .vh-bottom-bar a[href] *,
html body .vector-header-container button,
html body .vector-header-container button *,
html body .vector-header-container [role="button"],
html body .vector-header-container [role="button"] *,
html body header.vector-header .vector-dropdown-label,
html body header.vector-header .vector-dropdown-label *,
html body .vector-header-container .vector-dropdown-label,
html body .vector-header-container .vector-dropdown-label *,
html body .minerva-header button,
html body .minerva-header button *,
html body .minerva-header [role="button"],
html body .minerva-header [role="button"] *,
html body #vh-bottom-bar button,
html body #vh-bottom-bar button *,
html body #vh-bottom-bar [role="button"],
html body #vh-bottom-bar [role="button"] *,
html body #vh-bottom-bar .vh-bottom-link[href] {
cursor: pointer !important;
}
html body .vector-header-container .vector-dropdown-label:hover,
html body header.vector-header .vector-dropdown-label:hover,
html body .vector-header-container .vector-dropdown-label:focus,
html body header.vector-header .vector-dropdown-label:focus {
cursor: pointer !important;
}

/* V185: plain, clickable gold collaboration invitation. */
html body .vanipedia-topbar-vaniseva-title a {
color:#f5d77f !important;
border:0 !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
padding:0 !important;
cursor:pointer !important;
}
html body .vanipedia-topbar-vaniseva-title a:hover {
color:#f5d77f !important;
background:none !important;
text-decoration:underline !important;
}
html body .vanipedia-topbar-vaniseva-title a:focus-visible {
outline:1px dotted #f5d77f !important;
outline-offset:3px !important;
}

/* Shared petal label inside the hero */
.vani-hero-petal-title {
margin: 0 0 8px !important;
padding: 0 !important;
color: #f5d77f !important;
font-family: Georgia, "Noto Serif", serif !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: 2px !important;
text-align: center !important;
text-transform: uppercase !important;
position: relative;
top: -16px;
}
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy h1 {
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}

body.page-Main_Page #vani-home.vp-static-home .vp-home-role {
margin: 0 0 4px !important;
padding: 0 !important;
line-height: 1.15 !important;
}

/* Match the organization text to the gold founder title */
body.page-Main_Page #vani-home.vp-static-home .vp-home-organization {
color: #f5d77f !important;
}

/* Separate the introductory link from the main hero text */
body.page-Main_Page #vani-home.vp-static-home .vp-home-who {
margin-top: 36px !important;
margin-bottom: 0 !important;
}

/* Remove spacing from MediaWiki's hero heading wrapper */
body.page-Main_Page #vani-home.vp-static-home .vp-home-hero-copy .mw-heading1 {
margin: 0 !important;
padding: 0 !important;
}

/* 2026-11-11 (Vamshi Krishna): phones (700 px and below), where the photo sits above the title.
Do not lift the VANIPEDIA title onto the photo, and give the two-line Founder-Acarya role room. */
@media (max-width:700px) {
html body.page-Main_Page #vani-home.vp-static-home .vani-hero-petal-title {
top:0 !important;
}
html body.page-Main_Page #vani-home.vp-static-home .vp-home-role {
line-height:1.45 !important;
}
}
/* Remove white background and borders from search bar */
.vector-header-container form#searchform,
.vector-header-container .cdx-search-input,
.vector-header-container .cdx-text-input,
.vector-header-container .cdx-text-input__input,
.vector-header-container .cdx-search-input__wrapper,
.vector-header-container .cdx-search-input__input-wrapper {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}

/* Hide the magnifying glass icon */
.vector-header-container .cdx-text-input__start-icon,
.vector-header-container .cdx-text-input__icon {
display: none !important;
}
/* 3. Strip all dynamic widths from Vue wrappers so they don't stretch */
.vector-typeahead-search-container,
.cdx-search-input,
.cdx-search-input__input-wrapper,
.cdx-text-input {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
}

/* 4. Strictly control the input width (180px closed -> 240px focused) */
.vector-header-container .cdx-text-input__input,
.vector-header-container input[type="search"],
#searchInput {
width: 180px !important;
max-width: 180px !important;
min-width: 180px !important;
box-sizing: border-box !important;
transition: width 0.25s ease !important;
}

.vector-header-container .cdx-text-input__input:focus,
.vector-header-container input[type="search"]:focus,
#searchInput:focus {
width: 240px !important;
max-width: 240px !important;
}

/* 5. Provide a hard buffer to protect the Home link from overlap */
#vanipedia-topbar-home-link {
margin-left: 20px !important;
position: relative !important;
z-index: 10 !important;
}

/* 6. Push the entire search block slightly left */
.vector-header-start #p-search,
.vector-header-start .vector-search-box-vue {
margin-right: 12px !important;
}
/* Completely hide native search suggestions dropdown on mobile and desktop */
.minerva-search-overlay .search-results,
.minerva-search-overlay .page-list,
.cdx-typeahead-search__menu,
.cdx-menu,
.suggestions,
.mw-searchSuggest {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}

/* Mobile and Desktop Search Bar Layout */

/* 1. Hide "Vanipedia" title on mobile so search bar sits in its place */
body.skin-minerva .minerva-header .branding-box {
display: none !important;
}

/* 2. Ensure the top bar and search input are selectable and never blocked by a mask */
body.skin-minerva .minerva-header,
body.skin-minerva .minerva-header .vani-mobile-search-wrap,
body.skin-minerva #vani-mobile-search-input {
pointer-events: auto !important;
user-select: text !important;
-webkit-user-select: text !important;
}

/* 3. Disable Minerva's page mask and search overlay so they cannot block clicks or hide content */
.search-overlay,
.minerva-search-overlay,
div.mw-ui-overlay.search-overlay,
body.search-enabled .mw-mf-page-center__mask,
html.overlay-enabled .mw-mf-page-center__mask,
.cdx-menu,
.cdx-typeahead-search__menu,
.suggestions,
.mw-searchSuggest {
display: none !important;
pointer-events: none !important;
}

html.overlay-enabled #mw-mf-page-center,
html.overlay-enabled #content,
body.search-enabled #mw-mf-page-center,
body.overlay-enabled #mw-mf-page-center {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure VaniSearch popup modal (#mspu_div_wrapper) stays on top of the sticky header */
#mspu_div_wrapper {
z-index: 2147483647 !important;
}