MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* Use IDs (#) when there is only one concurrence per page */ | /* Use IDs (#) when there is only one concurrence per page */ | ||
/* Use classes (.) when there are one or more occurrences per page */ | /* Use classes (.) when there are one or more occurrences per page */ | ||
/* Useful parameters... margin-bottom:0.5em */ | /* 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=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_0 { display: none; } | .cw_50 { | ||
.cw_50 { width: 50px; } | width: 50px; | ||
.cw_150 { width: 150px | } | ||
.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; */ | |||
/* | |||
font- | |||
} | } | ||
# | #synonyms { /* Usage: <div id="synonyms"> */ | ||
} | } | ||
# | #translation { /* Usage: <div id="translation"> */ | ||
color: #000000; | |||
font-weight: bold; | |||
font- | |||
} | } | ||
# | #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: # | color: #296F39; | ||
} | } | ||
.quote_translation { | |||
font-weight: bold; | |||
color: #000000; | |||
color: # | |||
} | } | ||
.quote_link { /* Vanisource link */ | |||
font-weight: bold; | |||
} | } | ||
.quote_text { | |||
color: #000000; | |||
color: # | |||
} | } | ||
.quote_verse { /* To center use: text-align: center; */ | |||
color: #000000; | |||
color: # | } | ||
.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 | padding:0.2em 0.4em; | ||
} | } | ||
#mainbanner { | |||
display: none !important; | |||
} | } | ||
#mainlinks { | |||
text-align:center; | |||
font-weight:bold; | |||
font-size: 110%; | |||
margin-bottom:0.5em | |||
margin-bottom: | |||
} | } | ||
#mainlinks a { | |||
color: # | 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 */ | ||
display: none | 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 -------------------- */ | |||
.vector- | /* 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, | |||
#vector- | #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; | |||
border | margin: 0.5em 0 0.8em 1.4em; | ||
} | } | ||
. | div.tleft { | ||
border: none; | |||
margin: 0.5em 1.4em 0.8em 0; | |||
} | } | ||
# | #lastmod { | ||
display: | display:none | ||
} | |||
li#ca-unify { | |||
margin-left:1.6em; | |||
width: | } | ||
#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; | |||
top: | |||
} | } | ||
.ac_results { | |||
padding: 0px; | |||
border: 1px solid black; | |||
background-color: Window; | |||
overflow: hidden; | |||
z-index: 99999; | |||
} | } | ||
. | .ac_results ul { | ||
width: 100%; | |||
display: | 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; | |||
color: # | |||
} | } | ||
.ac_over { | |||
background-color: aquamarine; | |||
color: | color: HighlightText; | ||
} | } | ||
. | .ac_moreItems { | ||
text-align: center; | |||
display: | 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- | 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; | |||
display: none | |||
} | } | ||
/* 1. Stack the 5-column theme analysis sections vertically */ | |||
. | .theme-analysis-grid { | ||
grid-template-columns: | grid-template-columns: 1fr; | ||
gap: 20px; | 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; | |||
padding | } | ||
#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; | |||
. | |||
width: | |||
} | } | ||
. | #mp-upper .embedvideo { | ||
width: | 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; | |||
align | |||
} | } | ||
/* 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; | 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 */ | ||
display: | .theme-analysis-grid { | ||
display: grid; | |||
grid-template-columns: repeat(5, 1fr); | |||
margin: 0 | gap: 15px; | ||
margin: 2em 0; | |||
} | } | ||
. | .theme-column { | ||
background: rgba(255, 255, 255, 0.2); | |||
. | padding: 15px; | ||
border: 1px solid #B5BD64; | |||
border-radius: 8px; | |||
} | } | ||
.vector- | /* Formats the links cleanly inside each column */ | ||
.vector- | .theme-column ul { | ||
list-style-type: none; | |||
background-color: # | padding: 0; | ||
margin: 0; | |||
color: # | } | ||
border- | .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, | |||
transition: | .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; | |||
box-shadow: 0 | |||
} | } | ||
. | .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; | |||
box-shadow: | |||
} | } | ||
/* The Clickable Header Bar */ | |||
. | .book-accordion-header { | ||
background-color: #91cfa9; | |||
color: #1f4033; | |||
color: # | padding: 16px 20px 16px 60px; /* Top: 16px, Right: 20px, Bottom: 16px, Left: 60px */ | ||
font-size: 18px; | |||
font-size: | font-weight: bold; | ||
font-weight: | border-bottom: 3px solid #2a4452; | ||
cursor: pointer; | |||
transition: background-color 0.2s ease; | |||
user-select: none; | |||
border- | |||
transition: background-color 0.2s ease | |||
} | } | ||
. | /* Header Hover Effect */ | ||
.book-accordion-header:hover { | |||
background- | background-color: #7fbd97; /* Lightens the bar slightly on hover */ | ||
color: # | |||
} | } | ||
. | .extra-button { | ||
background: # | background-color: #5B3E34; | ||
background-color: # | } | ||
.extra-button:hover { | |||
background-color: #907359; | |||
} | |||
padding: | /* 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: | 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; | 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; | |||
padding- | |||
} | } | ||
. | /* 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; | |||
display: | 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; | |||
border | |||
} | } | ||
/* 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; | 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; | |||
height: | |||
margin: 0 !important; | margin: 0 !important; | ||
padding: 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); | |||
transform: | |||
} | } | ||
. | /* 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); | |||
width: | |||
} | } | ||
} | } | ||
. | /* ========================================================================== | ||
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; | |||
} | } | ||
. | /* ========================================================= | ||
background | NIGHT MODE / DARK MODE OVERRIDES | ||
========================================================= */ | |||
color: # | /* 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 */ | ||
background: | html.skin-theme-clientpref-night body, | ||
html.skin-theme-clientpref-night #content, | |||
border-color: # | 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; | 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 { | ||
color: # | 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: | 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; | |||
width: | |||
} | } | ||
.vector- | html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar-track, | ||
. | html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar-track { | ||
.vector- | background: #1a202c !important; | ||
} | } | ||
.vector- | 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; | |||
} | } | ||
.vector- | html.skin-theme-clientpref-night .vector-sticky-pinned-container::after, | ||
.vector- | 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; | |||
background- | |||
} | } | ||
. | /* 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 \*, | |||
#vector-main-menu- | html.skin-theme-clientpref-night #vector-main-menu a, | ||
#vector-main-menu | html.skin-theme-clientpref-night #vector-main-menu a \* { | ||
color: #e2e8f0 !important; | |||
background-color: transparent !important; | |||
background-color: | |||
} | } | ||
html.skin-theme-clientpref-night .vector-dropdown-content a:hover, | |||
html.skin-theme-clientpref-night .vector-dropdown-content a:hover \*, | |||
#vector-main-menu- | html.skin-theme-clientpref-night #vector-main-menu a:hover, | ||
color: # | 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; | text-decoration: none !important; | ||
} | } | ||
#vector-main-menu | 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; | |||
background-color: # | |||
color: #ffffff !important; | color: #ffffff !important; | ||
border- | 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 *) { | |||
padding: | 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; | |||
padding: | margin-bottom: 4px !important; | ||
margin | |||
} | } | ||
. | 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; | margin: 0 !important; | ||
padding: 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; | border: none !important; | ||
outline: 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; | |||
margin: | display: block; | ||
padding: 0 | 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- | 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 */ | |||
width: | 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 */ | |||
width: | |||
} | } | ||
. | .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: | margin: 30px auto; | ||
padding: | padding: 24px 28px; | ||
background: #FFF8EE; | |||
border: 1px solid #D8C7A5; | |||
align | 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; | |||
height: | |||
} | } | ||
. | .info-card .cta-button { | ||
margin-top: 10px; | |||
} | } | ||
. | /* Hide empty sidebar menu headings */ | ||
#vector-main-menu.vanipedia-sidebar-menu.vanipedia-collapsed { | |||
display: none !important; | 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; | display: none !important; | ||
} | } | ||
# | /* 3. Sticky header container layout */ | ||
.skin-vector-2022 #vector-sticky-header, | |||
#vector-sticky-header { | |||
display: flex !important; | 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 */ | |||
color: # | 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; | |||
} | } | ||
#vanipedia- | /* 5. Burger button */ | ||
#vanipedia-sticky-main-menu { | |||
display: inline-flex !important; | |||
margin: | 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- | #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; | |||
} | } | ||
html | /* 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 { | |||
html | color: #ffffff !important; | ||
#vector- | |||
} | } | ||
/* 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; | |||
background-color: | 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; | border: none !important; | ||
box-shadow: | 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; | 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; | |||
} | |||
display: | #vanipedia-back-to-top svg { | ||
display: block !important; | |||
width: 22px !important; | |||
height: 22px !important; | |||
stroke: #ffffff !important; | |||
color: # | } | ||
/* 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 | |||
color: # | ========================================================================== */ | ||
/* 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; | padding: 0 !important; | ||
margin: 0 !important; | margin: 0 !important; | ||
background: | 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 { | |||
justify-content: flex-start | display: grid; | ||
padding: | 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; | width: 100% !important; | ||
margin: 0 !important; | margin: 0 !important; | ||
padding: 0 | 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; | 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; | width: 100% !important; | ||
min-width: 100% !important; | |||
height: 950px !important; | |||
border: 0 !important; | |||
margin: 0 !important; | margin: 0 !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
background: transparent !important; | |||
overflow: hidden !important; | |||
background | |||
} | } | ||
# | /* ========================================================== | ||
display: | 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; | width: 100% !important; | ||
max-width: none !important; | |||
min-width: 0 !important; | |||
padding: 0 | 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 { | |||
#vani- | margin: 0 !important; | ||
padding: 0 !important; | |||
padding: 0 | |||
} | } | ||
#vani- | body.page-Main_Page #vani-home a { | ||
border: 0 !important; | |||
background: transparent !important; | |||
box-shadow: none !important; | |||
color: inherit; | |||
text-decoration: none !important; | |||
} | } | ||
#vani- | body.page-Main_Page #vani-home a.external { | ||
padding-right: 0 !important; | |||
background-image: none !important; | |||
} | } | ||
body. | 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 { | |||
padding: | --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; | |||
} | } | ||
/* ========================================================== | |||
width: 100% | BRAND | ||
========================================================== */ | |||
margin: | .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 { | |||
background-color: | width: auto; | ||
height: 50px; | |||
object-fit: contain; | |||
} | |||
padding: 0 | .vh-subtitle { | ||
width: 950px; | |||
box-shadow: | 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); | |||
} | } | ||
/* ---------------------------------------------------------- | |||
display: block | Whole item clickable | ||
---------------------------------------------------------- */ | |||
color: | .vh-random-letter-link { | ||
display: block; | |||
color: inherit; | |||
text-decoration: none !important; | 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; | |||
} | } | ||
/* ---------------------------------------------------------- | |||
width: | Read letter | ||
---------------------------------------------------------- */ | |||
padding: | .vh-random-letter-more { | ||
font-size: | margin-top: 14px; | ||
padding-top: 9px; | |||
border-top: | |||
1px solid rgba(177,135,61,.30); | |||
color: var(--gold); | |||
margin- | 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; | |||
font-size: | 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; | |||
transition: | 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; | text-decoration: none !important; | ||
} | } | ||
. | /* Article title */ | ||
.vh-random-article-title { | |||
color: var(--green); | |||
font-family: "Noto Serif", Georgia, serif; | |||
line-height: 1 | 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; | |||
a | |||
display: inline | |||
} | } | ||
. | .vh-gateway-text { | ||
font-size: 18px; | |||
height: | 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; | |||
width: | z-index: 10; | ||
height: 116px; | |||
margin: | 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 { | ||
width: | position: relative; | ||
height: | 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: | 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; | |||
border- | left: 20px; | ||
width: 8px; | |||
height: 8px; | |||
border-radius: 50%; | |||
background: var(--green); | |||
border: 2px solid #f6f2e9; | |||
box-sizing: border-box; | |||
z-index: 2; | |||
} | } | ||
.vh- | /* 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- | .vh-lifeline-window::after { | ||
right: 0; | |||
background: | |||
linear-gradient( | |||
to left, | |||
#f6f2e9, | |||
rgba(246,242,233,0) | |||
); | |||
} | } | ||
.vh- | /* ========================================================== | ||
flex: | 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- | .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- | .vh-main-title { | ||
font-size: 67px; | |||
} | } | ||
.vh- | .vh-gateways { | ||
width: 585px; | |||
width: | |||
} | } | ||
.vh-gateway { | |||
padding-left: 8px; | |||
padding-right: 8px; | |||
padding | |||
} | } | ||
.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- | font-size: 61px; | ||
} | |||
.vh-description { | |||
font-size: 12px; | |||
color: | } | ||
.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; | text-decoration: none !important; | ||
font-weight: 500; | |||
opacity: .82; | |||
transition: | |||
color .22s ease, | |||
opacity .22s ease, | |||
transform .22s ease; | |||
} | } | ||
. | /* Very fine underline */ | ||
position: | .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 */ | ||
color: | .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; | |||
} | } | ||
body. | /* Remove any residual top/bottom spacing around parser output */ | ||
body.page-Main_Page .mw-parser-output > p:first-child { | |||
display: none !important; | |||
display: | |||
} | } | ||
/* 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; | margin: 0 !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
height: 0 !important; | |||
min-height: 0 !important; | |||
} | } | ||
. | body.page-Main_Page .mw-jump-link { | ||
display: none !important; | |||
display: | |||
} | } | ||
body. | 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; | |||
padding | |||
} | } | ||
.vh-intro::before { | |||
content: ""; | |||
position: absolute; | |||
z-index: -1; | |||
left: -20px; | |||
top: 0; | |||
bottom: 0; | |||
width: 500px; | |||
height: 500px; | |||
pointer-events: none; | |||
} | } | ||
body. | 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: | width: 100%; | ||
height: | height: auto; | ||
margin: 0 0 22px; | |||
padding: 0; | |||
margin: 0 | |||
padding: 0 | |||
background: transparent !important; | background: transparent !important; | ||
color: | 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 | 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; | 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); | |||
cursor: pointer | 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 { | ||
display: | color: var(--gold); | ||
font-weight: 700; | |||
} | |||
/* Random quotes */ | |||
.vh-quote { | |||
height: 82px; | |||
width: | 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; | |||
opacity: | |||
} | } | ||
. | .vh-featured { | ||
width: auto; | |||
padding-right: 0; | |||
width: | |||
padding-right: | |||
} | } | ||
. | .vh-featured .vh-section-title { | ||
display: | 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); | |||
} | } | ||
. | /* ========================================================== | ||
display: | BOTTOM AREA | ||
========================================================== */ | |||
align-items: | .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 | |||
. | ========================================================== */ | ||
display: flex | .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 | |||
. | ========================================================== */ | ||
display: | .vh-feature-grid { | ||
display: grid; | |||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
margin: 0 | gap: 14px; | ||
margin-top: 0; | |||
} | } | ||
/* ========================================================== | |||
. | INDIVIDUAL TREASURE CARD | ||
display: | ========================================================== */ | ||
.vh-feature { | |||
display: grid; | |||
grid-template-columns: 48% 52%; | |||
height: 125px; | |||
min-width: 0; | |||
cursor: pointer | 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; | |||
. | |||
. | |||
. | |||
. | |||
} | } | ||
.vh- | /* SHORT | ||
.vh- | Keep complete vertical YouTube Shorts thumbnail visible. | ||
*/ | |||
width: 0 | .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-bottom- | .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; | |||
} | } | ||
.vh- | /* 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; | |||
display: | justify-content: center; | ||
align-items: center | width: 42px; | ||
height: 42px; | |||
font-size: 37px; | |||
border: 1px solid rgba(177,135,61,.50); | |||
font-size: | border-radius: 50%; | ||
color: var(--gold); | |||
color: | line-height: 1; | ||
cursor: pointer; | |||
transition: | |||
line-height: 1 | 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: | @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: none !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: none !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: #fff2c4 !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: 1px solid rgba(223, 173, 62, 0.35) !important; | |||
border-bottom: 1px solid rgba(223, 173, 62, 0.35) !important; | |||
background: rgba(245, 215, 127, 0.08) !important; | |||
outline: none !important; | |||
padding: 2px 14px !important; | |||
border-radius: 12px !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: #ffffff !important; | |||
text-decoration: none !important; | |||
text-decoration-line: none !important; | |||
border-color: rgba(223, 173, 62, 0.7) !important; | |||
background-color: rgba(245, 215, 127, 0.22) !important; | |||
box-shadow: 0 0 10px rgba(245, 215, 127, 0.3) !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: 2px 10px !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; | |||
} | |||
/* Vanisource V39: place BTG Magazine beside Diaries on desktop */ | |||
#vs-home.vs-library-main .vs-btg-diaries-row { | |||
display: grid; | |||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); | |||
gap: clamp(24px, 4vw, 56px); | |||
align-items: start; | |||
} | } | ||
#vs-home.vs-library-main .vs-btg-diaries-row > .vs-book-shelf { min-width: 0; } | |||
#vs-home.vs-library-main .vs-btg-section .vs-publication-grid { grid-template-columns: minmax(0, 1fr); } | |||
#vs-home.vs-library-main .vs-btg-section .vs-btg-issues { margin: 8px 0 0; } | |||
@media (max-width: 600px) { | |||
#vs-home.vs-library-main .vs-btg-diaries-row { grid-template-columns: minmax(0, 1fr); gap: 20px; } | |||
} | } | ||
Revision as of 01:26, 15 October 2026
/* 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: none !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: none !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: #fff2c4 !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: 1px solid rgba(223, 173, 62, 0.35) !important;
border-bottom: 1px solid rgba(223, 173, 62, 0.35) !important;
background: rgba(245, 215, 127, 0.08) !important;
outline: none !important;
padding: 2px 14px !important;
border-radius: 12px !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: #ffffff !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-color: rgba(223, 173, 62, 0.7) !important;
background-color: rgba(245, 215, 127, 0.22) !important;
box-shadow: 0 0 10px rgba(245, 215, 127, 0.3) !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: 2px 10px !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;
}
/* Vanisource V39: place BTG Magazine beside Diaries on desktop */
#vs-home.vs-library-main .vs-btg-diaries-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(24px, 4vw, 56px);
align-items: start;
}
#vs-home.vs-library-main .vs-btg-diaries-row > .vs-book-shelf { min-width: 0; }
#vs-home.vs-library-main .vs-btg-section .vs-publication-grid { grid-template-columns: minmax(0, 1fr); }
#vs-home.vs-library-main .vs-btg-section .vs-btg-issues { margin: 8px 0 0; }
@media (max-width: 600px) {
#vs-home.vs-library-main .vs-btg-diaries-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}