|
|
| Line 1: |
Line 1: |
| | /* INSTALL ONLY IN MediaWiki:Common.css — Vanisource V16 */ |
| /* 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; | | 1. VANISOURCE CORE UTILITIES & TEXT FORMATTING |
| | ========================================================================== */ |
| | .cw_0 { display: none; } |
| | .cw_50 { width: 50px; } |
| | .cw_150 { width: 150px; } |
| | .cw_500 { width: 500px; } |
| | |
| | .tabs-input { display: none !important; } |
| | .noautonum .tocnumber { display: none; } |
| | |
| | .daytable { text-align: left; } |
| | .vanitable { |
| | border: 0.1em solid #BFBFBF; |
| | border-collapse: collapse; |
| | padding: 0.25em; |
| | background-color: #F2F2F2; |
| | text-align: left; |
| | vertical-align: middle; |
| } | | } |
| .cw_50 { | | .journaltable { max-width: 108em; min-width: 65em; } |
| width: 50px;
| | |
| | .timelineh2 { |
| | text-align: center; |
| | border: 1px solid #ddcef2; |
| | background: #F2F2F2; |
| | padding: 0.2em 0.4em; |
| | margin: auto; |
| | overflow: hidden; |
| } | | } |
| .cw_150 { | | .timelineh3 { |
| width: 150px;
| | text-align: center; |
| | border-top: 1px solid #ddcef2; |
| | border-bottom: 1px solid #ddcef2; |
| | background: #FFFFFF; |
| | padding: 0.2em 0.4em; |
| | margin: auto; |
| | overflow: hidden; |
| } | | } |
| .cw_500 { | | .timelinesummary { |
| width: 500px; | | 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; |
| } | | } |
| .tabs-input { | | .timelinelinks { text-align: center; font-size: 132%; font-weight: bold; } |
| display: none !important;
| | .timelinelinks a { color: #B5BD64; } |
| | |
| | .greentext { color: #296F39; } |
| | .quotelink { font-size: 1em; font-weight: bold; color: #296F39; } |
| | .nectardroptext { font-size: 1em; font-weight: bold; color: #296F39; } |
| | .daystext { color: #296F39; } |
| | .daystextb { color: #296F39; font-weight: bold; } |
| | .lec_code { font-weight: bold; } |
| | .code { font-weight: bold; font-size: 90%; } |
| | |
| | .highlight_quote { background-color: #F9F7E0; margin: 0px; padding: 4px 2px; } |
| | .highlight_terms { background-color: #EEE8AA; } |
| | .hlterm { background-color: yellow; border: 1px Solid #EE9977; padding: 1px 2px 1px 2px; margin: -1px; } |
| | |
| | .firstchar { |
| | float: left; |
| | width: 0.7em; |
| | font-size: 375%; |
| | font-family: algerian, courier; |
| | line-height: 80%; |
| } | | } |
| .noautonum .tocnumber { | | .MITL_page_nav { |
| display: none;
| | text-align: left; |
| | border: 1px solid #BFBFBF; |
| | background: #FFF2E6; |
| | padding: 0.2em 0.4em; |
| | margin: auto; |
| } | | } |
| .daytable { /* Usage: {| class="daytable" */ | | .daysnav,.monthsnav { display: flex; flex-wrap: wrap; justify-content: center; } |
| text-align: left;
| | .daysnav .month { margin: 25px 2%; } |
| | .monthsnav .year { margin: 25px 5%; } |
| | |
| | /* ----------------- Book styles ----------------- */ |
| | .devanagari { color: #000000; font-weight: bold; } |
| | @font-face { |
| | font-family: interDiac; |
| | src: url(/css/GauraTimes.ttf); |
| } | | } |
| .vanitable { /* Usage: {| class="vanitable" */ | | .verse { color: #000000; font-style: italic; } |
| border: 0.1em solid #BFBFBF; /* #BFBFBF=light grey border */
| | .versecenter { color: #000000; font-style: italic; text-align: center; } |
| border-collapse: collapse;
| | .verse.inter_diac { font-family: interDiac; } |
| padding: 0.25em; /* 0.25em=4px cellpadding */
| | .synonyms { color: #000000; } |
| background-color: #F2F2F2; /* #F2F2F2=pale grey background */
| | .synonyms.inter_diac { font-family: interDiac; } |
| text-align: left; /* left, center, right */ | | .translation { color: #000000; font-weight: bold; } |
| vertical-align: middle; /* top, bottom, or middle */
| | .translation.inter_diac { font-family: interDiac; font-size: 1.1em; } |
| | .purport { color: #000000; } |
| | .purport.inter_diac { font-family: interDiac; font-size: 1.1em; } |
| | *:not(a).text { color: #000000; } |
| | .text.inter_diac { font-family: interDiac; font-size: 1.1em; } |
| | a[href*="syno_o"]:visited { color: purple; } |
| | |
| | .SB65verse { |
| | white-space: pre-line; |
| | white-space: -moz-pre-wrap; |
| | white-space: -pre-wrap; |
| | white-space: -o-pre-wrap; |
| | word-wrap: break-word; |
| | text-align: center; |
| | color: #000000; |
| } | | } |
| .timelineh2 { /* (Used on the timeline pages) Usage: <div class="timelineh2" */
| | |
| text-align: center;
| | #verse { white-space: pre; } |
| border: 1px solid #ddcef2;
| | #translation { color: #000000; font-weight: bold; } |
| background: #F2F2F2; /* was #faf5ff; */
| | |
| padding: 0.2em 0.4em; | | /* -------------------- BEGIN NEW COMPILE FORM -------------------- */ |
| margin: auto; | | .quote { margin: 1.5em 0em; font-family: tahoma; } |
| overflow: hidden;
| | .quote_heading { font-weight: bold; color: #296F39; } |
| | .quote_translation { font-weight: bold; color: #000000; } |
| | .quote_link { font-weight: bold; } |
| | .quote_text { color: #000000; } |
| | .quote_verse { color: #000000; } |
| | .quote_text a { font-weight: bold; } |
| | |
| | /* -------------------- BEGIN MAIN PAGE CODING -------------------- */ |
| | .MainHeader h4 { margin:0!important; padding:0.2em 0.4em; } |
| | |
| | body.page-Main_Page h2, body.page-Talk_Main_Page h2, body.page-Main_Page_test h2, body.page-Main_Page_test h1 { |
| | background: #f9f9f9; |
| | border-bottom: 1px solid #ccc; |
| | border-top: 1px solid #ccc; |
| | padding: 0.3em; |
| | margin: 1em 0; |
| | color: #B5BD64; |
| | font-family: georgia; |
| | font-weight: bold; |
| | text-align: center; |
| } | | } |
| .timelineh3 { /* Usage: <div class="timelineh3" */
| | |
| text-align: center; | | #banner { |
| border-top: 1px solid #ddcef2;
| | text-align: center; |
| border-bottom: 1px solid #ddcef2; | | background: #f9f9f9; |
| background: #FFFFFF;
| | border-bottom: 1px solid #ccc; |
| padding: 0.2em 0.4em; | | border-top: 1px solid #ccc; |
| margin: auto;
| | padding: 0.3em; |
| overflow: hidden;
| | font-size: 125%; |
| } | | } |
| .timelinesummary { /* Usage: <div class="timelinesummary" */
| | |
| border: thin solid #ddcef2; | | #mainbanner { |
| border-radius: 1em; | | text-align: center; |
| box-shadow: 0.5em 0.5em 0.5em #888888;
| | background: #345B63; |
| background: #FFFFCC;
| | border-bottom: 1px solid #ccc; |
| min-width: 77em;
| | border-top: 1px solid #ccc; |
| margin: 1em auto 3em auto;
| | padding: 0.3em; |
| padding: 1em;
| | color: #faf2af; |
| text-align: center;
| | font-family: georgia; |
| | font-size: 150%; |
| | font-style: italic; |
| } | | } |
| .timelinelinks { /* Usage: <div class="timelinelinks"> for Timelinenav template */ | | |
| text-align: center; | | #mainlinks { text-align:center; font-weight:bold; font-size: 110%; margin-bottom:0.5em } |
| font-size: 132%; | | #mainlinks a, #mainh2links a { color:#B5BD64 } |
| font-weight: bold; | | #mainmantra { text-align:center; margin-top:1.5em; color:#B5BD64; } |
| | .maincenter { text-align:center; max-width:65em; margin:0px auto; padding-bottom:1em; } |
| | .mainleft { text-align: left; max-width: 100em; margin: 0px auto; padding-bottom: 1em; } |
| | .mainjustify { text-align: justify; max-width: 65em; margin: 0px auto; padding-bottom: 1em; } |
| | |
| | .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; } |
| | |
| | /* V6: original article utilities retained; shared shell replaced below. */ |
| | /* ========================================================================== |
| | 6. UI COMPONENTS (ACCORDION, THEME GRID, CARDS, BACK-TO-TOP) |
| | ========================================================================== */ |
| | .theme-analysis-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin: 2em 0; width: 100%; box-sizing: border-box; } |
| | .theme-column { background: rgba(255, 255, 255, 0.2); padding: 15px; border: 1px solid #B5BD64; border-radius: 8px; } |
| | .theme-column ul { list-style-type: none; padding: 0; margin: 0; } |
| | .theme-column li { margin-bottom: 10px; font-weight: bold; } |
| | |
| | .book-accordion { background: #FFF8EE; border: none; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); overflow: hidden; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } |
| | .book-accordion-header { background-color: #91cfa9; color: #1f4033; padding: 16px 20px 16px 60px; font-size: 18px; font-weight: bold; border-bottom: 3px solid #296F39; cursor: pointer; transition: background-color 0.2s ease; user-select: none; } |
| | .book-accordion-header:hover { background-color: #7fbd97; } |
| | .book-accordion .mw-collapsible-toggle { float: right; font-weight: normal; font-size: 13px; background: rgba(255, 255, 255, 0.15); padding: 4px 12px; border-radius: 20px; margin-top: -2px; } |
| | .book-accordion .mw-collapsible-toggle a { color: #1f4033 !important; text-decoration: none; } |
| | .book-accordion .mw-collapsible-toggle a:hover { text-decoration: underline; } |
| | .book-accordion-content { padding: 24px; } |
| | |
| | .book-grid-list { column-width: 280px; column-gap: 20px; list-style-type: none; margin: 0; padding: 0; } |
| | .book-grid-list.single-column { column-width: auto; column-count: 1; column-gap: 0; } |
| | .book-grid-list li { margin-bottom: 12px; break-inside: avoid; } |
| | .mw-parser-output .book-grid-list li a, .mw-parser-output .book-grid-list li a.external { display: block !important; padding: 8px 16px !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid #e1e4e8 !important; border-radius: 6px; text-decoration: none; color: #1a5e9a; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.02); transition: all 0.2s ease; } |
| | .mw-parser-output .book-grid-list li a:hover, .mw-parser-output .book-grid-list li a.external:hover { background-color: #f4f8fc !important; border-color: #1a5e9a !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(26,94,154,0.12); } |
| | |
| | .vision-btn.btn-framed { position: relative !important; margin: 12px !important; } |
| | .vision-btn.btn-framed::after { content: ""; position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px; border: 2px solid #296F39 !important; border-radius: 6px !important; pointer-events: none; } |
| | .vision-btn.btn-framed:hover::after { border-color: #1d5229 !important; } |
| | |
| | .compilation-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 30px; margin: 20px auto; max-width: 1000px; } |
| | .compilation-image { flex: 1 1 300px; text-align: center; max-width: 450px; } |
| | .compilation-button-grid { flex: 1 1 400px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 15px; } |
| | .compilation-btn { background-color: #296F39; padding: 12px 24px; font-size: 16px; font-weight: bold; border-bottom: 3px solid #1d5229; border-radius: 4px; text-align: center; } |
| | .compilation-btn a { color: #ffffff !important; text-decoration: none; display: block; } |
| | .compilation-btn-full { grid-column: 1 / -1; } |
| | |
| | #vanipedia-back-to-top { position: fixed !important; bottom: 24px !important; right: 24px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background-color: #296F39 !important; color: #ffffff !important; border: none !important; outline: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; z-index: 1000 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease !important; } |
| | #vanipedia-back-to-top.visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } |
| | #vanipedia-back-to-top:hover { background-color: #1d5229 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important; } |
| | #vanipedia-back-to-top svg { display: block !important; width: 22px !important; height: 22px !important; stroke: #ffffff !important; } |
| | |
| | /* MEDIA SNIPPETS OVERFLOW FIX */ |
| | .mw-parser-output div[style*="#feffe1"] { max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } |
| | .mw-parser-output div[style*="#feffe1"] div { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } |
| | .mw-parser-output div[style*="#feffe1"] img, .mw-parser-output div[style*="#feffe1"] iframe, .mw-parser-output div[style*="#feffe1"] .embedvideo, .mw-parser-output div[style*="#feffe1"] span[typeof="mw:File"] { max-width: 100% !important; height: auto !important; box-sizing: border-box !important; display: block !important; margin: 0 auto !important; } |
| | |
| | /* ========================================================================== |
| | 7. MOBILE RESPONSIVENESS |
| | ========================================================================== */ |
| | @media screen and (max-width: 900px) { |
| | .theme-analysis-grid { grid-template-columns: repeat(2, 1fr); } |
| } | | } |
| .timelinelinks a { /* Usage: for Timelinenav template, link text color */ | | @media screen and (max-width: 768px) { |
| color: #B5BD64; /* #B5BD64 (light mustard) */
| | .mw-parser-output img { max-width: 100%; height: auto !important; } |
| | #vanipedia-back-to-top { bottom: 18px !important; right: 18px !important; width: 40px !important; height: 40px !important; } |
| | .book-grid-list { grid-template-columns: 1fr; display: block; } |
| } | | } |
| .greentext { /* Usage: <span class="greentext">vaniquotes.org</span> */ | | @media screen and (max-width: 600px) { |
| color: #296F39; /* #296F39=green */
| | .theme-analysis-grid { grid-template-columns: 1fr; } |
| } | | } |
| .quotelink { /* Usage: <span class="quotelink">vaniquotes.org</span> for quote boxes */
| | |
| font-size: 1em; | | /* ========================================================================== |
| font-weight: bold;
| | 8. LEGACY AC_RESULTS (AUTOCOMPLETE) |
| color: #296F39; /* #296F39=green */ | | ========================================================================== */ |
| } | | .ac_results { padding: 0px; border: 1px solid black; background-color: Window; overflow: hidden; z-index: 99999; } |
| .nectardroptext { /* Usage: <span class="nectardroptext">"Text"</span> for Nectar Drop boxes */ | | .ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; } |
| font-size: 1em;
| | .ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; font: menu; font-size: 12px; line-height: 16px; overflow: hidden; } |
| font-weight: bold;
| | .ac_loading { background: Window url('indicator.gif') right center no-repeat; } |
| color: #296F39; /* #296F39=green */ | | .ac_odd { background-color: #eee; } |
| } | | .ac_over { background-color: aquamarine; color: HighlightText; } |
| .firstchar { /* Usage: <span class="firstchar">A</span> */ | | .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; } |
| float: left;
| | |
| width: 0.7em; | | /* ========================================================================== |
| font-size: 375%;
| | 9. USED BY TEMPLATE:NAVBAR AND BG FOOTER |
| font-family: algerian, courier;
| | ========================================================================== */ |
| line-height: 80%; | | .verse-nav { float:right; } |
| | .prev-link { float:left; min-height:22px; padding:0 0 0 25px; background:url(/w/images/Go-previous.png) no-repeat left } |
| | .next-link { float:left; min-height:22px; padding:0 25px; background:url(/w/images/Go-next.png) no-repeat right } |
| | .chap-nav, #chap-nav, #book-nav, #page-nav { float:left } |
| | |
| | /* ========================================================================== |
| | 10. DARK MODE / NIGHT MODE OVERRIDES |
| | ========================================================================== */ |
| | html.skin-theme-clientpref-night { --background-color-base: #121212 !important; --background-color-page: #121212 !important; --background-color-quiet: #1a1a1a !important; --color-base: #e2e8f0 !important; } |
| | html.skin-theme-clientpref-night body, html.skin-theme-clientpref-night #content, html.skin-theme-clientpref-night .mw-body, html.skin-theme-clientpref-night #mw-page-base, html.skin-theme-clientpref-night #mw-head-base { background: #121212 !important; color: #e2e8f0 !important; } |
| | html.skin-theme-clientpref-night .mw-page-container, html.skin-theme-clientpref-night .mw-page-container-inner, html.skin-theme-clientpref-night .mw-content-container, html.skin-theme-clientpref-night .mw-header, html.skin-theme-clientpref-night .vector-header-container, html.skin-theme-clientpref-night .vector-sticky-header, html.skin-theme-clientpref-night .vector-column-start, html.skin-theme-clientpref-night .vector-column-end, html.skin-theme-clientpref-night .vector-sidebar-container, html.skin-theme-clientpref-night .vector-pinnable-element, html.skin-theme-clientpref-night .vector-pinnable-header, html.skin-theme-clientpref-night .vector-pinned-container, html.skin-theme-clientpref-night .vector-toc, html.skin-theme-clientpref-night #vector-toc, html.skin-theme-clientpref-night .vector-toc-pinned-container, html.skin-theme-clientpref-night .vector-toc-contents, html.skin-theme-clientpref-night .vector-menu-content, html.skin-theme-clientpref-night .vector-appearance-pinned-container, html.skin-theme-clientpref-night .vector-page-toolbar-container, html.skin-theme-clientpref-night .vector-page-toolbar, html.skin-theme-clientpref-night .cdx-menu, html.skin-theme-clientpref-night .cdx-menu__list, html.skin-theme-clientpref-night .cdx-menu-item, html.skin-theme-clientpref-night .cdx-radio, html.skin-theme-clientpref-night #vector-appearance { background-color: #121212 !important; background-image: none !important; border: none !important; box-shadow: none !important; color: #e2e8f0 !important; } |
| | html.skin-theme-clientpref-night #vector-sticky-header { background-color: #1a1a1a !important; border-bottom: 2px solid #3b4b5f !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; } |
| | html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .mw-headline, html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .vector-sticky-header-title { color: #ffffff !important; } |
| | html.skin-theme-clientpref-night #vanipedia-back-to-top { background-color: #3b4b5f !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important; } |
| | html.skin-theme-clientpref-night #vanipedia-back-to-top:hover { background-color: #4f637c !important; } |
| | html.skin-theme-clientpref-night .quote_text, html.skin-theme-clientpref-night *:not(a).text { color: #e2e8f0 !important; } |
| | html.skin-theme-clientpref-night .devanagari, html.skin-theme-clientpref-night .verse, html.skin-theme-clientpref-night .versecenter, html.skin-theme-clientpref-night .synonyms, html.skin-theme-clientpref-night .translation, html.skin-theme-clientpref-night .purport { color: #e2e8f0 !important; } |
| | |
| | /* ========================================================================== |
| | 11. LIGHT MODE SPECIFIC OVERRIDES |
| | ========================================================================== */ |
| | html:not(.skin-theme-clientpref-night) .vector-sidebar-container { background-color: #e6dfa1 !important; --background-color-interactive: #e6dfa1 !important; } |
| | html:not(.skin-theme-clientpref-night) .vector-dropdown-content { background-color: #ffffff !important; border: 1px solid #c8ccd1 !important; border-radius: 4px !important; padding: 6px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; } |
| | html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-main-menu, html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-toc { background-color: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; } |
| | html:not(.skin-theme-clientpref-night) #vector-main-menu .vector-menu-heading, html:not(.skin-theme-clientpref-night) .vector-dropdown-content .vector-menu-heading { background-color: #296F39 !important; color: #ffffff !important; border-radius: 4px !important; padding: 8px 12px !important; margin-bottom: 4px !important; } |
| | html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a, html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link { color: #296F39 !important; } |
| | html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a:hover, html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link:hover { color: #0645ad !important; background-color: #e6dfa1 !important; border-radius: 2px !important; } |
| | |
| | /* ========================================================================== |
| | 12. VANIPEDIA MAIN PAGE & CUSTOM HOMEPAGE GRIDS |
| | ========================================================================== */ |
| | body.page-Custom_Landing_Page #mw-head, body.page-Custom_Landing_Page #mw-panel, body.page-Custom_Landing_Page #left-navigation, body.page-Custom_Landing_Page #right-navigation, body.page-Custom_Landing_Page #p-personal, body.page-Custom_Landing_Page #p-search, body.page-Custom_Landing_Page #p-logo, body.page-Custom_Landing_Page #siteSub, body.page-Custom_Landing_Page #contentSub, body.page-Custom_Landing_Page #jump-to-nav, body.page-Custom_Landing_Page .mw-indicators, body.page-Custom_Landing_Page .mw-editsection, body.page-Custom_Landing_Page .vector-page-toolbar, body.page-Custom_Landing_Page .vector-page-titlebar, body.page-Custom_Landing_Page .vector-header-container, body.page-Custom_Landing_Page .vector-column-start, body.page-Custom_Landing_Page .vector-column-end, body.page-Custom_Landing_Page .vector-toc, body.page-Custom_Landing_Page .vector-settings, body.page-Custom_Landing_Page .vector-page-tools, body.page-Custom_Landing_Page .vector-main-menu-landmark, body.page-Custom_Landing_Page .mw-page-title-main, body.page-Custom_Landing_Page .firstHeading, body.page-Custom_Landing_Page #footer, body.page-Custom_Landing_Page .printfooter, body.page-Custom_Landing_Page .catlinks, body.page-Custom_Landing_Page .vector-sitenotice-container, body.page-Custom_Landing_Page #siteNotice, body.page-Custom_Landing_Page #localNotice, body.page-Custom_Landing_Page #mainbanner { display: none !important; } |
| | body.page-Custom_Landing_Page, body.page-Custom_Landing_Page .mw-page-container, body.page-Custom_Landing_Page .mw-page-container-inner, body.page-Custom_Landing_Page .mw-content-container, body.page-Custom_Landing_Page #content, body.page-Custom_Landing_Page .mw-body, body.page-Custom_Landing_Page .mw-body-content, body.page-Custom_Landing_Page #bodyContent, body.page-Custom_Landing_Page #mw-content-text, body.page-Custom_Landing_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; background: #f6f2e9 !important; } |
| | body.page-Custom_Landing_Page .mw-page-container, body.page-Custom_Landing_Page .mw-page-container-inner, body.page-Custom_Landing_Page .mw-content-container { display: block !important; min-height: 0 !important; } |
| | body.page-Custom_Landing_Page main#content { position: static !important; } |
| | body.page-Custom_Landing_Page { overflow-x: hidden; } |
| | |
| | /* 13. CUSTOM WIKIPEDIA-STYLE HOVER POPUP */ |
| | a[title]:hover::after { |
| | content: "Preview: " attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); |
| | background: var(--background-color-page, #ffffff); color: var(--color-base, #202122); padding: 12px 16px; |
| | border: 1px solid var(--border-color-base, #a2a9b1); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
| | font-size: 14px; line-height: 1.5; white-space: normal; width: 280px; z-index: 10000; |
| } | | } |
| .daystext { /* Usage: <span class="daystext">Text Here</span> */
| | |
| color: #296F39; /* #296F39 = Green used for Video info on the Day in the life pages */
| | /* ========================================================== |
| | VANISOURCE HEADER TABS |
| | ========================================================== */ |
| | |
| | |
| | /* HEADER STRIP */ |
| | |
| | #headertabs .oo-ui-menuLayout-menu { |
| | background: #faedf5 !important; |
| | border: 1px solid #5a636c !important; |
| | border-bottom: none !important; |
| | padding: 5px 5px 0 5px !important; |
| | box-shadow: none !important; |
| } | | } |
| .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;
| | /* REMOVE OOUI FRAMES */ |
| | |
| | #headertabs .oo-ui-menuLayout-menu .oo-ui-panelLayout-framed, |
| | #headertabs .oo-ui-tabSelectWidget-framed, |
| | #headertabs .mw-header-tabs-wrapper.oo-ui-panelLayout-framed { |
| | background: transparent !important; |
| | border: none !important; |
| | box-shadow: none !important; |
| } | | } |
| .MITL_page_nav { /* Usage: <div class="MITL_page_nav" */
| | |
| text-align: left;
| | |
| border: 1px solid #BFBFBF; | | /* ========================================================== |
| background: #FFF2E6;
| | CONTENT BELOW TABS |
| padding: 0.2em 0.4em; | | ========================================================== */ |
| margin: auto
| | |
| | #headertabs .oo-ui-menuLayout-content { |
| | background: transparent !important; |
| | border: 1px solid #a2a9b1 !important; |
| | border-top: 1px solid #5a636c !important; |
| | font-size: 16px !important; |
| | padding: 1.5em !important; |
| } | | } |
| .daysnav,.monthsnav { /* For D/MITL desktop & mobile */
| | |
| display: flex;
| | |
| flex-wrap: wrap;
| | /* ========================================================== |
| justify-content: center;
| | ALL TABS |
| | ========================================================== */ |
| | |
| | #headertabs .oo-ui-tabOptionWidget { |
| | position: relative !important; |
| | background: transparent !important; |
| | border: 1px solid transparent !important; |
| | box-shadow: none !important; |
| } | | } |
| .daysnav .month { | | |
| margin: 25px 2%;
| | |
| | /* TAB TEXT */ |
| | |
| | #headertabs .oo-ui-tabOptionWidget .oo-ui-labelElement-label { |
| | font-size: 15px !important; |
| | color: #000000 !important; |
| | font-weight: bold !important; |
| | padding: 6px 12px !important; |
| } | | } |
| .monthsnav .year { | | |
| margin: 25px 5%; | | |
| | /* ========================================================== |
| | ACTIVE TAB |
| | ========================================================== */ |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { |
| | position: relative !important; |
| | z-index: 10 !important; |
| | |
| | background: #BDB76B !important; |
| | |
| | border: 1px solid #a2a9b1 !important; |
| | border-bottom: none !important; |
| | |
| | box-shadow: none !important; |
| | |
| | margin-bottom: -1px !important; |
| } | | } |
| /* ----------------- Book styles (BG is done) ----------------- */ | | |
| .devanagari { /* Usage: <div class="devanagari"> */
| | |
| color: #000000; /* Font color #0000 = black */
| | /* ========================================================== |
| font-weight: bold;
| | REMOVE ALL OOUI DECORATION INSIDE ACTIVE TAB |
| }
| | ========================================================== */ |
| @font-face {
| | |
| font-family: interDiac;
| | #headertabs |
| src: url(/css/GauraTimes.ttf); /* Vedabase font */
| | .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected |
| | .oo-ui-buttonElement-button, |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected |
| | .oo-ui-labelElement-label, |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected |
| | .oo-ui-buttonElement-button > span { |
| | background: transparent !important; |
| | background-color: transparent !important; |
| | background-image: none !important; |
| | |
| | border: none !important; |
| | border-top: none !important; |
| | border-right: none !important; |
| | border-bottom: none !important; |
| | border-left: none !important; |
| | |
| | box-shadow: none !important; |
| | outline: none !important; |
| | text-decoration: none !important; |
| } | | } |
| .verse { /* Usage: <div class="verse"> */
| | |
| color: #000000; /* Font color #0000 = black */ | | |
| font-style: italic;
| | /* Restore active-tab text */ |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected |
| | .oo-ui-labelElement-label { |
| | color: #000000 !important; |
| } | | } |
| .verse.inter_diac { /* Usage: <div class="verse inter_diac"> */
| | |
| font-family: interDiac; /* International diacritics */
| | |
| | /* ========================================================== |
| | REMOVE OOUI PSEUDO ELEMENTS |
| | ========================================================== */ |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected::before, |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected::after, |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected |
| | .oo-ui-buttonElement-button::before, |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected |
| | .oo-ui-buttonElement-button::after, |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected |
| | .oo-ui-labelElement-label::before, |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected |
| | .oo-ui-labelElement-label::after { |
| | content: none !important; |
| | display: none !important; |
| } | | } |
| .synonyms { /* Usage: <div class="synonyms"> */
| | |
| color: #000000;
| | |
| | /* ========================================================== |
| | ACTIVE TAB BOTTOM |
| | Covers line belonging to the strip underneath |
| | ========================================================== */ |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { |
| | border-bottom: 3px solid #BDB76B !important; |
| } | | } |
| .synonyms.inter_diac { /* Usage: <div class="synonyms inter_diac"> */
| | |
| font-family: interDiac; /* International diacritics */
| | /* ========================================================== |
| | INACTIVE TAB HOVER |
| | ========================================================== */ |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget:hover:not(.oo-ui-optionWidget-selected) { |
| | background: #d7d4a8 !important; |
| | border: 1px solid #a2a9b1 !important; |
| } | | } |
| .translation { /* Usage: <div class="translation"> */
| | |
| color: #000000; /* #296F39 = green */
| | |
| font-weight: bold;
| | /* Inner inactive tabs */ |
| | |
| | #headertabs |
| | .oo-ui-tabOptionWidget:not(.oo-ui-optionWidget-selected) |
| | .oo-ui-buttonElement-button { |
| | background: transparent !important; |
| | background-image: none !important; |
| | border: none !important; |
| | box-shadow: none !important; |
| } | | } |
| .translation.inter_diac { /* Usage: <div class="translation inter_diac"> */
| | |
| font-family: interDiac; /* International diacritics */
| | /* V6 — one responsive main-page system, plus the shared petal shell. */ |
| font-size: 1.1em;
| | :root { |
| | --vs-paper:#faf7ef; --vs-ink:#263a39; --vs-green:#486247; |
| | --vs-gold:#f4d98b; --vs-brass:#805b16; --vs-line:#ded7c6; |
| | --vs-wash:#f0eee3; |
| } | | } |
| .purport { /* Usage: <div class="purport"> */ | | body { background:var(--vs-paper); } |
| color: #000000;
| | body.vs-main-view, body.vs-main-view .mw-page-container, |
| | body.vs-main-view .mw-page-container-inner, body.vs-main-view .mw-body, |
| | body.vs-main-view .mw-content-container { background:var(--vs-paper); } |
| | body.vs-main-view .mw-page-container { padding:0 24px; } |
| | body.vs-main-view .mw-page-container-inner { |
| | display:block; max-width:1240px; margin-inline:auto; |
| } | | } |
| .purport.inter_diac { /* Usage: <div class="purport inter_diac"> */ | | body.vs-main-view .mw-body { width:100%; min-width:0; max-width:none; margin:0; padding:0; border:0; } |
| font-family: interDiac; /* International diacritics */ | | body.vs-main-view #firstHeading, body.vs-main-view .mw-body-header, |
| font-size: 1.1em;
| | body.vs-main-view .vector-column-start, body.vs-main-view .vector-column-end, |
| | body.vs-main-view .vector-page-toolbar { display:none; } |
| | body.vs-main-view .mw-parser-output { width:100%; } |
| | body.vs-shell-ready .vs-native-header-replaced, |
| | body.vs-shell-ready #vector-sticky-header { display:none !important; } |
| | body.vs-shell-ready .vector-header-container { padding:0; min-height:0; } |
| | body.vs-main-view .vector-main-menu-pinned-container { display:none; } |
| | |
| | /* Main page: selectors are isolated from existing book and article styles. */ |
| | #vs-home { box-sizing:border-box; width:100%; max-width:1180px; margin:0 auto; padding:24px 24px 32px; color:var(--vs-ink); font:400 17px/1.6 Georgia,'Noto Serif',serif; } |
| | #vs-home * { box-sizing:border-box; } |
| | #vs-home a { color:var(--vs-ink); background-image:none; text-decoration:underline; text-decoration-color:#8e9a8a; text-underline-offset:4px; overflow-wrap:anywhere; } |
| | #vs-home a:hover { color:var(--vs-brass); text-decoration-thickness:2px; } |
| | #vs-home a:focus-visible { outline:3px solid var(--vs-green); outline-offset:3px; border-radius:2px; } |
| | #vs-home h1, #vs-home h2 { background:none; border:0; padding:0; margin:0; font-family:inherit; line-height:1.3; font-weight:600; color:var(--vs-brass); text-align:left; overflow-wrap:anywhere; } |
| | #vs-home h1 { font-size:27px; text-align:center; margin-bottom:18px; } |
| | #vs-home h2 { font-size:24px; margin-bottom:14px; } |
| | #vs-home h2 a { color:inherit; text-decoration:none; } |
| | #vs-home h2 a:hover { text-decoration:underline; } |
| | #vs-home .mw-heading { display:block; margin:0; } |
| | #vs-home .mw-editsection { display:none; } |
| | #vs-home p { margin:0; } |
| | #vs-home .vs-search { display:flex; align-items:end; gap:8px; max-width:660px; margin:0 auto 32px; font:400 16px/1.4 system-ui,sans-serif; } |
| | #vs-home .vs-search label { display:block; flex:1; min-width:0; font-size:14px; } |
| | #vs-home .vs-search input[type="search"] { display:block; width:100%; min-height:48px; padding:12px 14px; margin-top:6px; background:#fffdf7; color:var(--vs-ink); border:1px solid #829078; border-radius:5px; font:400 16px/1.4 system-ui,sans-serif; } |
| | #vs-home .vs-search button { min-height:48px; padding:12px 18px; color:var(--vs-gold); background:var(--vs-green); border:1px solid var(--vs-green); border-radius:5px; font:400 16px/1.4 system-ui,sans-serif; cursor:pointer; } |
| | #vs-home .vs-search :focus-visible { outline:3px solid var(--vs-green); outline-offset:3px; } |
| | #vs-home #vs-search-slot>a { display:block; margin-bottom:24px; text-align:center; } |
| | #vs-home .vs-collections { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.17fr) minmax(0,1fr); grid-template-areas:'books sanctuary lectures' 'letters sanctuary conversations'; gap:26px 32px; align-items:start; } |
| | #vs-home .vs-books { grid-area:books; } #vs-home .vs-letters { grid-area:letters; } |
| | #vs-home .vs-lectures { grid-area:lectures; } #vs-home .vs-conversations { grid-area:conversations; } |
| | #vs-home .vs-sanctuary { grid-area:sanctuary; text-align:center; padding:0 8px; min-width:0; } |
| | #vs-home .vs-collection { min-width:0; } |
| | #vs-home .vs-collection h2 { padding-bottom:10px; border-bottom:1px solid var(--vs-line); } |
| | #vs-home .vs-link-list a { display:block; min-height:44px; padding:8px 24px 8px 0; position:relative; text-decoration:none; border-bottom:1px solid #e9e3d6; } |
| | #vs-home .vs-link-list a::after { content:'›'; position:absolute; right:4px; top:8px; color:var(--vs-brass); font-size:22px; } |
| | #vs-home .vs-link-list a:hover { text-decoration:underline; } |
| | #vs-home .vs-link-list a:last-child { border-bottom:0; } |
| | #vs-home #vs-portrait-frame { display:block; position:relative; width:230px; height:230px; max-width:100%; margin:0 auto 20px; border:3px solid #345b63; border-radius:50%; overflow:hidden; background:var(--vs-wash); box-shadow:0 4px 16px #263a3920; } |
| | #vs-home #vs-portrait-frame p, #vs-home #vs-portrait-frame span, #vs-home #vs-portrait-frame a { display:contents; } |
| | #vs-home #vs-portrait-frame img { display:block; position:absolute; inset:0; width:100%; height:100% !important; max-width:none; object-fit:cover; object-position:50% 50%; margin:0; } |
| | #vs-home .vs-source-quote { font-size:17px; line-height:1.6; margin-bottom:12px; } |
| | #vs-home .vs-source-meta { font-size:15px; } |
| | #vs-home .vs-source-meta a { color:var(--vs-brass); } |
| | #vs-home .vs-browse { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:32px 0; padding:22px 0; border-block:1px solid var(--vs-line); } |
| | #vs-home .vs-browse h2 { font-size:21px; color:var(--vs-green); margin-bottom:8px; } |
| | #vs-home .vs-browse-group { min-width:0; } |
| | #vs-home .vs-browse-group a { display:inline-block; padding:6px 0; min-height:36px; } |
| | #vs-home .vs-resources { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; } |
| | #vs-home .vs-resource { min-width:0; } |
| | #vs-home .vs-resource h2 { font-size:22px; margin-bottom:10px; } |
| | #vs-home .vs-resource>div { font-size:16px; } |
| | #vs-home .vs-resource a { display:inline-block; padding-block:5px; } |
| | |
| | /* Tablet and narrower windows: center identity followed by two collections per row. */ |
| | @media (max-width:1050px) { |
| | #vs-site-header { grid-template-columns:140px minmax(0,1fr) 100px; padding-inline:16px; } |
| | #vs-home .vs-collections { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:'sanctuary sanctuary' 'books letters' 'lectures conversations'; gap:26px; } |
| | #vs-home .vs-sanctuary { max-width:620px; width:100%; margin-inline:auto; padding-bottom:22px; border-bottom:1px solid var(--vs-line); } |
| | #vs-home #vs-portrait-frame { width:160px; height:160px; } |
| | #vs-home .vs-browse, #vs-home .vs-resources { grid-template-columns:repeat(2,minmax(0,1fr)); } |
| } | | } |
| \*:not(a).text { /* Usage: <div class="text"> */
| | /* Phones: keep the visitor's orientation, normal text sizes and vertical scroll. */ |
| color: #000000; /* Font color #0000 = black */
| | @media (max-width:650px) { |
| | body.vs-main-view .mw-page-container { padding-inline:0; } |
| | #vs-site-header { grid-template-columns:64px minmax(0,1fr) 74px; padding:12px 8px; gap:6px; } |
| | #vs-site-header .vs-header-tools>a { display:none; } |
| | #vs-site-header button { padding:8px 4px; font-size:14px; } |
| | #vs-site-header .vs-name { font-size:21px; letter-spacing:1px; } |
| | #vs-site-header .vs-subtitle { font-size:12px; } |
| | #vs-site-header .vs-header-petals { display:none; } |
| | #vs-site-header .vs-shell-panel { left:8px; width:min(360px,calc(100vw - 16px)); max-height:65vh; } |
| | #vs-site-header #vs-account-panel { right:8px; left:auto; } |
| | #vs-home { padding:20px; } |
| | #vs-home .vs-search { gap:6px; margin-bottom:24px; } |
| | #vs-home .vs-search button { padding-inline:10px; } |
| | #vs-home .vs-search input[type="search"] { padding-inline:10px; } |
| | #vs-home .vs-collections { grid-template-columns:minmax(0,1fr); grid-template-areas:'sanctuary' 'books' 'letters' 'lectures' 'conversations'; gap:24px; } |
| | #vs-home h1 { font-size:24px; } |
| | #vs-home h2 { font-size:23px; } |
| | #vs-home #vs-portrait-frame { width:110px; height:110px; margin-bottom:14px; } |
| | #vs-home .vs-browse { gap:20px 18px; margin:26px 0; } |
| | #vs-home .vs-browse h2 { font-size:20px; } |
| | #vs-home .vs-browse-group a { min-height:44px; } |
| | #vs-home .vs-resources { grid-template-columns:minmax(0,1fr); gap:24px; } |
| | #vs-home .vs-resource a { min-height:44px; padding-block:9px; } |
| | #vs-site-footer { padding:18px; } |
| | #vs-site-footer nav { gap:3px 18px; } |
| } | | } |
| .text.inter_diac { /* Usage: <div class="text inter_diac"> */
| | @media (max-width:360px) { |
| font-family: interDiac; /* International diacritics */ | | #vs-site-header { grid-template-columns:58px minmax(0,1fr) 65px; gap:4px; } |
| font-size: 1.1em;
| | #vs-site-header .vs-name { font-size:19px; } |
| | #vs-home { padding:16px; } |
| | #vs-home .vs-browse { grid-template-columns:minmax(0,1fr); } |
| } | | } |
| .SB65verse { /* 1962-65 SB */
| | @media (prefers-reduced-motion:reduce) { |
| white-space: pre-line; /* CSS 3 */
| | #vanipedia-back-to-top { transition:none !important; } |
| 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) --- */ | | /* Original V173 bar rules, in original cascade order. */ |
| #verse {
| | @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'); |
| white-space: pre;
| | @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Noto+Serif:wght@400;500;600&display=swap'); |
| | @font-face { |
| | font-family: interDiac; |
| | src: url(/css/GauraTimes.ttf); /* Vedabase font */ |
| } | | } |
| #text { /* Used for verses and was: font-style: italic; */ | | #mainbanner { |
| | display: none !important; |
| } | | } |
| #synonyms { /* Usage: <div id="synonyms"> */ | | #mw-head-base { |
| | background: #D4ECDD !important; |
| | background-image: none !important; |
| | font-family: tahoma; |
| } | | } |
| #translation { /* Usage: <div id="translation"> */ | | #searchform { |
| color: #000000;
| | padding-bottom:0.5em |
| font-weight: bold;
| |
| } | | } |
| #purport { /* Usage: <div id="purport"> */ | | #siteNotice, |
| | #localNotice, |
| | .mw-sitenotice, |
| | .sitenotice, |
| | .vector-sitenotice-container, |
| | #mainbanner, |
| | .anonnotice, |
| | #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; |
| } | | } |
| /* ----------------- End old books styles BG, SB, CC ----------------- */
| | html.skin-theme-clientpref-night #mw-head-base { |
| /* -------------------- BEGIN NEW COMPILE FORM -------------------- */
| | background: #121212 !important; |
| .quote {
| | color: #e2e8f0 !important; |
| margin: 1.5em 0em; /* Places 20px space between quotes on multi-quote pages */
| |
| font-family: tahoma;
| |
| } | | } |
| .quote_heading { | | html.skin-theme-clientpref-night .mw-header, |
| font-weight: bold;
| | html.skin-theme-clientpref-night .vector-header-container, |
| color: #296F39; | | html.skin-theme-clientpref-night .vector-sticky-header { |
| | background-color: #121212 !important; |
| | background-image: none !important; |
| | border: none !important; |
| | box-shadow: none !important; |
| | color: #e2e8f0 !important; |
| } | | } |
| .quote_translation { | | html.skin-theme-clientpref-night #vector-main-menu a, |
| font-weight: bold;
| | html.skin-theme-clientpref-night #vector-main-menu a \* { |
| color: #000000; | | color: #e2e8f0 !important; |
| | background-color: transparent !important; |
| } | | } |
| .quote_link { /* Vanisource link */ | | html.skin-theme-clientpref-night #vector-main-menu a:hover, |
| font-weight: bold;
| | 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; |
| } | | } |
| .quote_text { | | html.skin-theme-clientpref-night #vector-main-menu .vector-menu-heading { |
| color: #000000; | | background-color: #3b4b5f !important; |
| | color: #ffffff !important; |
| | border-radius: 4px !important; |
| | padding: 8px 12px !important; |
| | margin-bottom: 4px !important; |
| | border: 1px solid #4a5568 !important; |
| } | | } |
| .quote_verse { /* To center use: text-align: center; */ | | html:not(.skin-theme-clientpref-night) .vector-dropdown-content:not(#vector-user-links-dropdown *):not(.vector-user-menu *) { |
| color: #000000;
| | 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 */ |
| } | | } |
| .quote_text a { /* Makes the Vanisource verse links bold */ | | html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-main-menu { |
| font-weight: bold;
| | background-color: transparent !important; |
| | padding: 0 !important; |
| | border: none !important; |
| | box-shadow: none !important; |
| } | | } |
| /* -------------------- END NEW COMPILE FORM -------------------- */
| | html:not(.skin-theme-clientpref-night) #vector-main-menu .vector-menu-heading { |
| /* -------------------- BEGIN MAIN PAGE CODING -------------------- */ | | background-color: #526B50 !important; /* Dark teal background for headers */ |
| .MainHeader h4 {
| | color: #ffffff !important; /* White text */ |
| margin:0!important;
| | border-radius: 4px !important; |
| padding:0.2em 0.4em;
| | padding: 8px 12px !important; |
| | margin-bottom: 4px !important; |
| } | | } |
| #mainbanner { | | html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a { |
| display: none !important;
| | color: #2F5E5E !important; |
| } | | } |
| #mainlinks { | | html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a:hover { |
| text-align:center;
| | color: #0645ad !important; |
| font-weight:bold;
| | background-color: #EEF2F9 !important; /* Soft hover highlight */ |
| font-size: 110%;
| | border-radius: 2px !important; |
| margin-bottom:0.5em
| |
| } | | } |
| #mainlinks a { | | #mainbanner { |
| color:#B5BD64
| | margin: 0 !important; |
| | padding: 0 !important; |
| | border: none !important; |
| } | | } |
| #mainmantra { | | #vector-main-menu.vanipedia-sidebar-menu.vanipedia-collapsed { |
| text-align:center;
| | display: none !important; |
| margin-top:1.5em;
| |
| color:#B5BD64;
| |
| } | | } |
| .maincenter { | | #vector-main-menu-pinned-container, |
| text-align:center;
| | .vector-main-menu-pinned-container, |
| max-width:65em;
| | .vector-main-menu-action, |
| margin:0px auto;
| | [data-event-name\*="vector-main-menu.pin"], |
| padding-bottom:1em;
| | [data-event-name\*="vector-main-menu.unpin"] { |
| | display: none !important; |
| } | | } |
| /* Don't display some stuff on the main page */
| | #vector-sticky-header .vector-sticky-header-search-toggle, |
| body.page-Main_Page #t-cite,
| | #vector-sticky-header #vector-sticky-header-search-toggle, |
| body.page-Main_Page #lastmod,
| | #vector-sticky-header .search-toggle, |
| body.page-Main_Page #siteSub {
| | #vector-sticky-header .mw-ui-icon-wikimedia-search, |
| display: none;
| | #vector-sticky-header .mw-ui-icon-search, |
| }
| | #vector-sticky-header .vector-icon.mw-ui-icon-search, |
| /* -------------------- END MAIN PAGE CODING -------------------- */
| | #vector-sticky-header .cdx-search-input__start-icon { |
| /* -------------------- BEGIN CODING TO IDENTIFY AND SORT OUT -------------------- */
| | display: none !important; |
| /* 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 { | | .skin-vector-2022 #vector-sticky-header, |
| background: inherit; | | #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; |
| } | | } |
| #headertabs ul li.ui-state-active { | | html.skin-theme-clientpref-night #vector-sticky-header { |
| background: #D4ECDD; | | background-color: #1a1a1a !important; |
| | border-bottom: 2px solid #3b4b5f !important; |
| | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; |
| } | | } |
| /* 3. Force teal and remove borders on all Vector 2022 UI containers, sidebars, and Codex menus */
| | .skin-vector-2022 #vector-sticky-header .vector-sticky-header-start, |
| .mw-page-container,
| | #vector-sticky-header .vector-sticky-header-start { |
| .mw-page-container-inner,
| | display: flex !important; |
| .mw-content-container,
| | align-items: center !important; |
| .vector-column-start, | | flex: 0 0 auto !important; /* Stops it from expanding across the middle */ |
| .vector-column-end,
| | flex-grow: 0 !important; |
| .vector-sidebar-container,
| | width: auto !important; |
| .vector-pinnable-element, | | position: relative !important; |
| .vector-toc,
| | z-index: 10 !important; |
| #vector-toc, | | gap: 18px !important; |
| .vector-toc-pinned-container, | | margin: 0 !important; |
| .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;
| |
| } | | } |
| /* ------------------------------------ */
| | #vanipedia-sticky-main-menu { |
| div.thumb { /* Remove white border from thumbnails */
| | display: inline-flex !important; |
| border: none;
| | align-items: center !important; |
| }
| | justify-content: center !important; |
| div.tright {
| | flex: 0 0 auto !important; |
| border: none;
| | width: 32px !important; |
| margin: 0.5em 0 0.8em 1.4em; | | min-width: 32px !important; |
| }
| | height: 32px !important; |
| div.tleft {
| | margin: 0 !important; |
| border: none;
| | cursor: pointer !important; |
| margin: 0.5em 1.4em 0.8em 0;
| | position: relative !important; |
| | z-index: 20 !important; |
| } | | } |
| #lastmod { | | #vanipedia-sticky-main-menu .vector-icon { |
| display:none | | display: inline-block !important; |
| | width: 20px !important; |
| | height: 20px !important; |
| } | | } |
| li#ca-unify {
| | #vector-sticky-header #p-search, |
| margin-left:1.6em; | | #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; |
| } | | } |
| #google-search input { | | #vector-sticky-header input.searchbox, |
| font-size:95%;
| | #vector-sticky-header input[type="search"] { |
| width:10.9em;
| | position: relative !important; |
| | left: auto !important; |
| | margin: 0 !important; |
| } | | } |
| #searchform { | | .skin-vector-2022 #vector-sticky-header .vector-sticky-header-context-bar, |
| padding-bottom:0.5em
| | #vector-sticky-header .vector-sticky-header-context-bar { |
| }
| | display: flex !important; |
| #p-logo a, #p-logo a:hover { | | align-items: center !important; |
| height:190px;
| | justify-content: center !important; |
| }
| | text-align: center !important; |
| #column-one {
| | flex: 1 1 auto !important; |
| padding-top:190px;
| | margin-left: auto !important; |
| }
| | margin-right: auto !important; |
| #p-navigation {
| | max-width: none !important; |
| padding-top:30px;
| |
| } | | } |
| .ac_results { | | #vector-sticky-header .vector-sticky-header-context-bar-primary, |
| padding: 0px;
| | #vector-sticky-header .vector-sticky-header-title, |
| border: 1px solid black;
| | #vector-sticky-header .vector-sticky-header-context-bar .mw-headline { |
| background-color: Window;
| | display: inline-flex !important; |
| overflow: hidden; | | align-items: center !important; |
| z-index: 99999;
| | 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; |
| } | | } |
| .ac_results ul { | | html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .mw-headline, |
| width: 100%;
| | html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .vector-sticky-header-title { |
| list-style-position: outside;
| | color: #ffffff !important; |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| } | | } |
| .ac_results li { | | .skin-vector-2022 #vector-sticky-header .vector-sticky-header-end, |
| margin: 0px;
| | #vector-sticky-header .vector-sticky-header-end { |
| padding: 2px 5px;
| | display: flex !important; |
| cursor: default;
| | align-items: center !important; |
| display: block; | | flex: 0 0 auto !important; |
| /* if width will be 100% horizontal scrollbar will appear when scroll mode will be used */
| | margin-left: auto !important; |
| /* 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 { | | #vector-main-menu-dropdown .vector-dropdown-content { |
| background: Window url('indicator.gif') right center no-repeat;
| | box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important; |
| | border-radius: 4px !important; |
| | background-color: var(--background-color-base, #ffffff) !important; |
| } | | } |
| .ac_odd { | | body.page-Main_Page .vector-header-container, |
| background-color: #eee;
| | 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; |
| } | | } |
| .ac_over { | | .vector-header-container .cdx-text-input__input, |
| background-color: aquamarine;
| | .vector-header-container input[type="search"] { |
| color: HighlightText;
| | background-color: #ffffff !important; |
| }
| | border: 1px solid var(--vani-gold) !important; |
| .ac_moreItems { | | border-radius: 3px !important; |
| text-align: center; | | color: #1a1a1a !important; |
| 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 {
| | .vector-header-container .cdx-search-input__end-button, |
| background:#f0f0f0; | | .vector-header-container input[type="submit"] { |
| border-bottom:1px solid #ccc;
| | background-color: var(--petal-color-dark) !important; |
| border-top:1px solid #ccc; | | color: var(--vani-gold) !important; |
| padding:0.3em;
| | border: 1px solid var(--vani-gold) !important; |
| margin:1em 0;
| | font-weight: bold !important; |
| color:#000000;
| |
| font-family:georgia;
| |
| font-weight:bold; | |
| font-size: 110%;
| |
| text-align:center;
| |
| } | | } |
| #mainh2links a { | | body.page-Main_Page .vector-sitenotice-container, |
| color:#B5BD64
| | body.page-Main_Page #siteNotice, |
| | body.page-Main_Page #localNotice, |
| | body.page-Main_Page #mainbanner, |
| | body.page-Main_Page #mw-head-base { |
| | 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; |
| } | | } |
| /* -------------------- END MAIN PAGE TEST -------------------- */
| | @media (max-width:1500px) { |
| /* --------------- DONATION PAGE - http://vanipedia.org/wiki/Special:IframePage/Donation --------------------*/
| | .vh-bottom { |
| #iframeframe {
| | grid-template-columns: |
| height: 800px;
| | minmax(560px, 1.12fr) |
| }
| | minmax(570px, 1fr); |
| /* -------------------- 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; | | 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 */
| | @media (max-width:1365px) { |
| .youtube_right .thumbcaption, | | .vh-bottom { |
| .youtube_left .thumbcaption {
| | grid-template-columns: |
| width: auto;
| | 1.05fr |
| max-width: 100%;
| | .95fr; |
| } | | } |
| /* 4. Ensure old table layouts don't cause horizontal scroll */
| |
| .vanitable {
| |
| display: block;
| |
| overflow-x: auto;
| |
| width: 100%;
| |
| } | | } |
| | .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; |
| } | | } |
| @media screen and (max-width: 400px) | | @media (max-width:1500px) { |
| { | | .vh-bottom { |
| #mp-upper div[style\*="40em"] {
| | grid-template-columns: |
| width: 78vw !important;
| | minmax(650px, 1.2fr) |
| }
| | minmax(650px, 1fr); |
| #mp-upper > tbody > tr > td:nth-child(1) {
| | column-gap: 20px; |
| border-bottom: none !important;
| |
| } | | } |
| .youtube_right .thumbcaption, .youtube_left .thumbcaption {
| |
| width: 69vw !important;
| |
| } | | } |
| #mp-upper .embedvideowrap {
| | @media (max-width:1365px) { |
| width: 69vw !important;
| | .vh-bottom { |
| | grid-template-columns: |
| | minmax(600px, 1.1fr) |
| | minmax(620px, 1fr); |
| } | | } |
| #mp-upper .embedvideo {
| |
| padding: 0px !important;
| |
| } | | } |
| #mp-upper div[style\*="24em"] { | | body.page-Main_Page .vector-header-container, |
| width: unset !important; | | 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; |
| } | | } |
| #mp-upper .embedvideo iframe {
| | .mw-header { |
| width: 67vw; | | width: 100% !important; |
| }
| | max-width: 100% !important; |
| #mp-upper div[style\*="32em"] { /* right-to-left languages */
| | height: auto !important; |
| min-width: 80vw !important;
| | min-height: 86px !important; |
| }
| | max-height: 96px !important; |
| }
| | padding: 0 20px !important; |
| @media screen and (max-width: 320px)
| | margin: 0 !important; |
| {
| | background: transparent !important; |
| #mp-upper .embedvideo iframe {
| | background-color: transparent !important; |
| width: 70vw;
| | background-image: none !important; |
| }
| | border: none !important; |
| .youtube_right .thumbcaption, .youtube_left .thumbcaption {
| | box-shadow: none !important; |
| width: 69vw;
| | 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; |
| } | | } |
| #mp-upper .embedvideo { | | #vanipedia-topbar-title, |
| width: 71vw !important;
| | .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; |
| } | | } |
| #mp-upper .embedvideowrap { | | #vanipedia-topbar-title { |
| width: 67vw !important;
| | pointer-events: none !important; |
| | cursor: default !important; |
| | user-select: text !important; |
| } | | } |
| .NectarDropBox
| | #vanipedia-topbar-title:hover { |
| {
| | color: #f5d77f !important; |
| min-width: 17.5em !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; |
| } | | } |
| #mp-right > tbody > tr:nth-child(4) > td
| | .vector-header-start { |
| { | | display: flex !important; |
| padding: 0 0 0 .5em !important;
| | flex-direction: row !important; |
| }
| | align-items: center !important; |
| #mp-right > tbody > tr:nth-child(6) > td
| | flex-wrap: nowrap !important; |
| {
| | gap: 12px !important; |
| padding: 0 0 0 .4em !important;
| | flex: 0 0 auto !important; |
| | height: 100% !important; |
| | margin: 0 !important; |
| | padding: 0 !important; |
| } | | } |
| #mp-upper div[style\*="32em"] { /* right-to-left languages */ | | .vector-header-start #vector-main-menu-dropdown { |
| min-width: 86vw !important;
| | 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; |
| } | | } |
| /* End main page mobile view classes */
| | .vector-header-start #vector-main-menu-dropdown .vector-dropdown-label:hover { |
| /* Generic center class */
| | background-color: rgba(245, 215, 127, 0.15) !important; |
| div.center
| | border-radius: 4px !important; |
| {
| |
| text-align: center;
| |
| } | | } |
| /* Nectar drop classes */
| | .vector-header-container .vector-icon, |
| @media only screen and (max-width: 640px)
| | .vector-header-start .vector-icon, |
| { | | .vector-header-end .vector-icon, |
| div.NectarDropBox
| | .mw-header .vector-icon { |
| {
| | background-color: #f5d77f !important; |
| max-width: 30%;
| | 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; |
| } | | } |
| | .vector-header-start .mw-logo-wordmark, |
| | .vector-header-start .mw-logo-tagline, |
| | .vector-header-start .mw-logo { |
| | display: none !important; |
| } | | } |
| .vaniquotebox | | .vector-header-container #p-search, |
| {
| | .mw-header #p-search { |
| text-align: left;
| | display: flex !important; |
| min-height: 11.6em;
| | align-items: center !important; |
| border:thin solid #000000;
| | margin: 0 !important; |
| border-radius: 1em;
| | padding: 0 !important; |
| box-shadow: 0.5em 0.5em 1em #bcbcbc;
| |
| margin: 1em 0em;
| |
| } | | } |
| @media screen and (min-width: 800px)
| | .vector-header-container #searchform, |
| { | | .mw-header #searchform { |
| .vaniquotebox {
| | display: flex !important; |
| max-width:80%;
| | 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; |
| } | | } |
| .vaniquotebox > table | | .vector-header-container .cdx-text-input__input, |
| { | | .vector-header-container input[type="search"], |
| text-align:left;
| | #searchInput { |
| font-size:1em; | | background-color: #1f3e45 !important; |
| color:#000000;
| | border: 1px solid rgba(245, 215, 127, 0.45) !important; |
| min-height: 11.5em;
| | color: #ffffff !important; |
| margin: 0;
| | 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; |
| } | | } |
| .vaniquotebox td | | .vector-header-container .cdx-text-input__input:focus, |
| {
| | .vector-header-container input[type="search"]:focus, |
| padding: 8px;
| | #searchInput:focus { |
| }
| | width: 240px !important; |
| /* Put spacing between the YouTube video player and text that flows around it */
| | background-color: #173036 !important; |
| /* left-to-right languages */
| | border-color: #f5d77f !important; |
| .youtube_right .embedvideo | | 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; |
| 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 { | | .vector-header-container .cdx-text-input__input::placeholder, |
| content: "תוכן עניינים";
| | .vector-header-container input[type="search"]::placeholder, |
| | #searchInput::placeholder { |
| | color: #a5c4c9 !important; |
| | font-style: italic !important; |
| } | | } |
| .rtltoc.he,.rtltoc.ar { | | .vector-header-container .cdx-text-input__icon, |
| font-weight: bold;
| | .vector-header-container .vector-search-box-inner .vector-icon { |
| font-weight: sans-serif;
| | color: #f5d77f !important; |
| | fill: #f5d77f !important; |
| } | | } |
| .rtltoc.he h2,.rtltoc.ar h2 | | .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; | | display: none !important; |
| } | | } |
| /* Kasya */
| | .vector-header-end { |
| /* Custom Wikipedia-style Hover Popup Alternative */
| | display: flex !important; |
| a[title]:hover::after {
| | flex-direction: row !important; |
| content: "Preview: " attr(title);
| | align-items: center !important; |
| position: absolute;
| | justify-content: flex-end !important; |
| bottom: 120%;
| | flex-wrap: nowrap !important; |
| left: 50%;
| | gap: 8px !important; |
| transform: translateX(-50%);
| | flex: 0 0 auto !important; |
| background: var(--background-color-page, #ffffff);
| | height: 100% !important; |
| color: var(--color-base, #202122);
| | margin: 0 0 0 auto !important; |
| 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 -------------------- */
| | .vector-header-end .cdx-button, |
| /* 5-Column Grid */
| | .vector-header-end .cdx-button--fake-button, |
| .theme-analysis-grid { | | .vector-header-end .cdx-button--weight-quiet, |
| display: grid;
| | .vector-header-end .vector-dropdown-label, |
| grid-template-columns: repeat(5, 1fr);
| | .vector-header-end .vector-menu-heading, |
| gap: 15px;
| | .vector-header-end #p-personal, |
| margin: 2em 0;
| | .vector-header-end .vector-user-links, |
| }
| | .vector-header-end .vector-user-menu, |
| .theme-column { | | .vector-header-end .vector-menu, |
| background: rgba(255, 255, 255, 0.2);
| | .vector-header-end .vector-menu-content, |
| padding: 15px;
| | .vector-header-end #pt-userpage-2, |
| border: 1px solid #B5BD64;
| | .vector-header-end #vector-user-links-dropdown { |
| border-radius: 8px;
| | background: transparent !important; |
| }
| | background-color: transparent !important; |
| /* 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; | | border: none !important; |
| background-color: #D4ECDD !important;
| | box-shadow: none !important; |
| | outline: none !important; |
| } | | } |
| /* Override core Vector 2022 background CSS variables */
| | .vector-header-end #pt-userpage-2, |
| :root,
| | .vector-header-end #pt-userpage-2 span, |
| .skin-vector-2022, | | .vector-header-end .vector-dropdown-label, |
| html {
| | .vector-header-end .vector-user-menu-overflow .vector-dropdown-label { |
| --background-color-base: #D4ECDD !important; | | color: #f5d77f !important; |
| --background-color-page: #D4ECDD !important; | | fill: #f5d77f !important; |
| --background-color-quiet: #D4ECDD !important; | | font-size: 13px !important; |
| --border-color-base: transparent !important; /* Neutralizes structural borders */ | | 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; |
| } | | } |
| /* Force the specific grid columns and pinned containers to adopt the teal */
| | .vector-header-end #pt-userpage-2:hover, |
| .vector-sidebar-container, | | .vector-header-end .vector-dropdown-label:hover { |
| .vector-column-start,
| | background-color: rgba(245, 215, 127, 0.15) !important; |
| .vector-column-end, | | color: #ffffff !important; |
| .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 */
| | .vector-header-end .vector-dropdown-content { |
| .ww-card { | | background: #1f3e45 !important; |
| transition: transform 0.3s ease, box-shadow 0.3s ease;
| | 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; |
| } | | } |
| .ww-card:hover { | | .vector-header-end .vector-dropdown-content div, |
| transform: translateY(-2px);
| | .vector-header-end .vector-dropdown-content ul, |
| box-shadow: 0 6px 15px rgba(0,0,0,0.2) !important; | | .vector-header-end .vector-dropdown-content .vector-menu-content { |
| }
| | background: transparent !important; |
| .ww-image-layer {
| | background-color: transparent !important; |
| transition: transform 0.5s ease;
| | border: none !important; |
| | box-shadow: none !important; |
| | margin: 0 !important; |
| | padding: 0 !important; |
| | list-style: none !important; |
| } | | } |
| .ww-card:hover .ww-image-layer { | | .vector-header-end .vector-dropdown-content li { |
| transform: scale(1.05);
| | margin: 0 !important; |
| | padding: 0 !important; |
| | background: transparent !important; |
| | background-color: transparent !important; |
| | border: none !important; |
| } | | } |
| .ww-text-arrow { | | .vector-header-end .vector-dropdown-content #pt-mytalk { |
| display: inline-block; | | display: block !important; |
| transition: transform 0.3s ease;
| | visibility: visible !important; |
| } | | } |
| .ww-card:hover .ww-text-arrow { | | .vector-header-end .vector-dropdown-content .vector-icon { |
| transform: translateX(4px);
| | display: none !important; |
| } | | } |
| /* Portal Books Accordion Styles */
| | .vector-header-end .vector-dropdown-content a { |
| .book-accordion-report { | | display: flex !important; |
| background: #FDF2D5; | | align-items: center !important; |
| border: 1px solid #d0d7de;
| | color: #ffffff !important; |
| border-radius: 6px; | | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; |
| margin-bottom: 12px;
| | font-size: 15px !important; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.04); | | font-weight: 500 !important; |
| overflow: hidden;
| | 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; |
| } | | } |
| /* --- ENHANCED PORTAL BOOKS ACCORDION --- */
| | .vector-header-end .vector-dropdown-content a span { |
| /* The Main Container */
| | display: inline !important; |
| .book-accordion {
| | padding: 0 !important; |
| background: #FFF8EE;
| | margin: 0 !important; |
| border: none;
| | color: inherit !important; |
| border-radius: 8px;
| | font-size: inherit !important; |
| margin-bottom: 20px;
| | font-weight: inherit !important; |
| box-shadow: 0 4px 15px rgba(0,0,0,0.06); /* Deeper, softer shadow */
| | background: transparent !important; |
| overflow: hidden;
| |
| font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
| |
| } | | } |
| /* The Clickable Header Bar */
| | .vector-header-end .vector-dropdown-content a:hover, |
| .book-accordion-header { | | .vector-header-end .vector-dropdown-content a:focus, |
| background-color: #91cfa9;
| | .vector-header-end .vector-dropdown-content a:active { |
| color: #1f4033;
| | background-color: #526B50 !important; |
| padding: 16px 20px 16px 60px; /* Top: 16px, Right: 20px, Bottom: 16px, Left: 60px */
| | color: #f5d77f !important; |
| font-size: 18px;
| | text-decoration: none !important; |
| font-weight: bold;
| |
| border-bottom: 3px solid #2a4452;
| |
| cursor: pointer;
| |
| transition: background-color 0.2s ease;
| |
| user-select: none;
| |
| } | | } |
| /* Header Hover Effect */
| | .vector-header-end .vector-dropdown-content #pt-logout, |
| .book-accordion-header:hover { | | .vector-header-end .vector-dropdown-content #p-user-menu-logout, |
| background-color: #7fbd97; /* Lightens the bar slightly on hover */
| | .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; |
| } | | } |
| .extra-button { | | .vector-header-end .vector-dropdown-content #pt-logout a, |
| background-color: #5B3E34;
| | .vector-header-end .vector-dropdown-content #p-user-menu-logout a { |
| | color: #ffffff !important; |
| } | | } |
| .extra-button:hover { | | .vector-header-end .vector-dropdown-content #pt-logout a:hover, |
| background-color: #907359; | | .vector-header-end .vector-dropdown-content #p-user-menu-logout a:hover { |
| | background-color: #526B50 !important; |
| | color: #fca5a5 !important; |
| } | | } |
| /* Fix for the standard MediaWiki Collapse/Expand Button */
| | .vector-header-container [title]:hover::after, |
| .book-accordion .mw-collapsible-toggle { | | .vector-header-container [title]:hover::before, |
| float: right;
| | .vector-header-container a[title]:hover::after, |
| font-weight: normal;
| | .vector-header-container a[title]:hover::before, |
| font-size: 13px;
| | .mw-header [title]:hover::after, |
| background: rgba(255, 255, 255, 0.15);
| | .mw-header [title]:hover::before, |
| padding: 4px 12px;
| | .mw-header a[title]:hover::after, |
| border-radius: 20px; /* Makes it a pill shape */
| | .mw-header a[title]:hover::before { |
| margin-top: -2px;
| | display: none !important; |
| | content: none !important; |
| | visibility: hidden !important; |
| | opacity: 0 !important; |
| } | | } |
| /* Target the link inside the toggle to ensure it stays white */
| | .vector-sticky-header { |
| .book-accordion .mw-collapsible-toggle a {
| | background-color: #526B50 !important; |
| color: #1f4033 !important; | | border-bottom: 2px solid #b1873d !important; |
| text-decoration: none;
| | height: 48px !important; |
| } | | } |
| .book-accordion .mw-collapsible-toggle a:hover { | | .vector-sticky-header a, |
| text-decoration: underline;
| | .vector-sticky-header .vector-icon { |
| | color: #f5d77f !important; |
| | fill: #f5d77f !important; |
| } | | } |
| /* The Content Area */
| | body.page-Main_Page #siteNotice, |
| .book-accordion-content { | | body.page-Main_Page #localNotice, |
| padding: 24px;
| | body.page-Main_Page #mw-head-base { |
| }
| | display: none !important; |
| /* The Grid Setup */
| | height: 0 !important; |
| .book-grid-list {
| | min-height: 0 !important; |
| column-width: 280px;
| | max-height: 0 !important; |
| column-gap: 20px;
| | margin: 0 !important; |
| list-style-type: none;
| | padding: 0 !important; |
| margin: 0; | | border: none !important; |
| padding: 0; | | background: transparent !important; |
| }
| | visibility: hidden !important; |
| /* Single-column version of accordion link list */
| | overflow: hidden !important; |
| .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 */
| | body.page-Main_Page .vector-header-container { |
| .mw-parser-output .book-grid-list li a,
| | margin-bottom: 0 !important; |
| .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 */
| | .vh-bottom-card { |
| .mw-parser-output .book-grid-list li a:hover,
| | background: #ffffff !important; |
| .mw-parser-output .book-grid-list li a.external:hover {
| | border: 1px solid rgba(177, 135, 61, 0.35) !important; |
| background-color: #f4f8fc !important; | | border-radius: 6px !important; |
| border-color: #1a5e9a !important; | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important; |
| transform: translateY(-2px);
| | box-sizing: border-box !important; |
| box-shadow: 0 4px 10px rgba(26,94,154,0.12); | |
| } | | } |
| /* Mini-Card Hover Effect */
| | .vh-bottom-grid { |
| .book-grid-list li a:hover {
| | display: grid !important; |
| background-color: #f4f8fc;
| | grid-template-columns: 1fr 1fr !important; |
| border-color: #1a5e9a;
| | gap: 12px !important; |
| transform: translateY(-2px); /* Lifts the card up slightly */
| | width: 100% !important; |
| box-shadow: 0 4px 10px rgba(26,94,154,0.12); /* Subtle blue glow */
| | flex: 0 0 auto !important; |
| } | | } |
| /* --- Solid Buttons with a Padded Outer Frame (Pseudo-Element Method) --- */
| | .vh-bottom-card { |
| .vision-btn.btn-framed { | | padding: 0 !important; |
| position: relative !important; /* Required to anchor the frame */
| | overflow: hidden !important; |
| margin: 12px !important; /* Ensures there is room for the frame to render */
| |
| } | | } |
| /* This draws the actual frame 6px outside the button */
| | .vh-bottom-grid, |
| .vision-btn.btn-framed::after { | | .vh-bottom-card { |
| content: "";
| | display: none !important; |
| 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 */
| | .vector-header-start { |
| .vision-btn.btn-framed:hover::after { | | display: flex !important; |
| border-color: #466e84 !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; |
| } | | } |
| /* Mobile Responsiveness for Custom Book Grids */
| | .vector-header-start #vector-main-menu-dropdown { |
| @media screen and (max-width: 720px) {
| | order: 1 !important; |
| .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;
| |
| } | | } |
| | .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; |
| } | | } |
| /* ----------------------------------------------------
| | #mw-head [title]::before, |
| FIX: Mobile-Only Image Scaling (Leaves Desktop Intact)
| | #mw-head [title]::after, |
| ---------------------------------------------------- */ | | .vector-header [title]::before, |
| @media screen and (max-width: 768px) {
| | .vector-header [title]::after { |
| .mw-parser-output img { | | display: none !important; |
| max-width: 100%;
| | visibility: hidden !important; |
| height: auto !important;
| | opacity: 0 !important; |
| | pointer-events: none !important; |
| } | | } |
| | .vector-header { |
| | -webkit-user-select: none !important; |
| | user-select: none !important; |
| } | | } |
| /* Don't show external-link icon for image-only links */
| | .vector-header-container, |
| .mw-parser-output a.external:has(img) { | | #mw-head, |
| background-image: none !important;
| | .mw-header { |
| padding-right: 0 !important;
| | position: sticky !important; |
| | top: 0 !important; |
| | z-index: 1000 !important; |
| | background-color: #526B50 !important; |
| } | | } |
| /* Responsive Layout for Image & Button Grids */
| | .vector-header-container .vector-icon, |
| .compilation-wrapper { | | .vector-header-start .vector-icon, |
| display: flex;
| | .vector-header-end .vector-icon, |
| flex-wrap: wrap;
| | .vector-header-start .cdx-button, |
| align-items: flex-start;
| | .vector-header-end .cdx-button, |
| justify-content: center;
| | .vector-header-start .vector-dropdown-label, |
| gap: 30px;
| | .vector-header-end .vector-dropdown-label, |
| margin: 20px auto;
| | .vector-header-container .cdx-text-input__icon, |
| max-width: 1000px;
| | .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; |
| } | | } |
| .compilation-image { | | .vector-header-start #vector-main-menu-dropdown:hover .vector-icon, |
| flex: 1 1 300px;
| | .vector-header-start .cdx-button:hover .vector-icon, |
| text-align: center;
| | .vector-header-end .cdx-button:hover .vector-icon, |
| max-width: 450px;
| | .vector-header-start .vector-dropdown-label:hover .vector-icon, |
| }
| | .vector-header-end .vector-dropdown-label:hover .vector-icon, |
| .compilation-button-grid { | | .vector-header-end #pt-userpage-2:hover .vector-icon, |
| flex: 1 1 400px;
| | .vector-header-container .cdx-search-input:hover .cdx-text-input__icon, |
| display: grid;
| | .vector-header-container .cdx-text-input__input:focus~.cdx-text-input__icon, |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
| | .vector-header-container .vector-icon:hover { |
| gap: 15px;
| | transform: translateY(-2.5px) scale(1.14) !important; |
| }
| | filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)) |
| .compilation-btn { | | drop-shadow(0 0 10px rgba(245, 215, 127, 0.8)) !important; |
| 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; | | color: #ffffff !important; |
| text-decoration: none;
| | fill: #ffffff !important; |
| display: block;
| |
| } | | } |
| .compilation-btn-full { | | .vector-header-start .vector-dropdown-label:hover, |
| grid-column: 1 / -1;
| | .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; |
| } | | } |
| /* Defines the layout for the main container holding all columns */
| | .vector-header-start .vector-dropdown-label:active .vector-icon, |
| .theme-analysis-grid { | | .vector-header-end .vector-dropdown-label:active .vector-icon, |
| display: grid;
| | .vector-header-start .cdx-button:active .vector-icon, |
| grid-template-columns: repeat(5, 1fr); /* Creates exactly 5 equal columns */
| | .vector-header-end .cdx-button:active .vector-icon { |
| gap: 15px; /* Adds consistent breathing room between the columns */
| | transform: translateY(0.5px) scale(0.98) !important; |
| width: 100%;
| | filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important; |
| box-sizing: border-box;
| |
| } | | } |
| /* Optional but highly recommended: Make it stack nicely on smaller screens */
| | .vector-header-container .cdx-button, |
| @media screen and (max-width: 900px) {
| | .vector-header-container .vector-dropdown-label, |
| .theme-analysis-grid { | | .vector-header-container #pt-userpage-2, |
| grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
| | .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; |
| } | | } |
| | .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; |
| } | | } |
| @media screen and (max-width: 600px) {
| | .vector-header-container .vector-header-start .cdx-button:hover .vector-icon, |
| .theme-analysis-grid { | | .vector-header-container .vector-header-end .cdx-button:hover .vector-icon, |
| grid-template-columns: 1fr; /* 1 single column on mobile */
| | .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; |
| } | | } |
| /* =========================================================
| | .vector-header-container, |
| MEDIA SNIPPETS OVERFLOW FIX (The Nuclear Option)
| | .vector-header-start, |
| ========================================================= */
| | .vector-header-end, |
| /* 1. Target the main column boxes by their unique background color */
| | .vector-header-container *, |
| .mw-parser-output div[style\*="#feffe1"] { | | .vector-header-container .vector-icon, |
| max-width: 100% !important;
| | .vector-header-container svg, |
| box-sizing: border-box !important;
| | .vector-header-container .cdx-button, |
| overflow: hidden !important; /* Force-stops ANY visual spilling */
| | .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. Target the nested inner divs and forcefully strip their hardcoded 300px widths */
| | .vector-header-container .vector-icon:hover, |
| .mw-parser-output div[style\*="#feffe1"] div { | | .vector-header-container svg:hover, |
| width: 100% !important;
| | .vector-header-container .cdx-button:hover .vector-icon, |
| max-width: 100% !important;
| | .vector-header-container .cdx-button:hover svg, |
| min-width: 0 !important;
| | .vector-header-container .vector-dropdown-label:hover .vector-icon, |
| box-sizing: border-box !important;
| | .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. Keep images, video frames, and MediaWiki file wrappers strictly contained */
| | .vector-header-container .cdx-button:hover, |
| .mw-parser-output div[style\*="#feffe1"] img, | | .vector-header-container .vector-dropdown-label:hover, |
| .mw-parser-output div[style\*="#feffe1"] iframe, | | .vector-header-container #vector-main-menu-dropdown .vector-dropdown-label:hover, |
| .mw-parser-output div[style\*="#feffe1"] .embedvideo, | | .vector-header-container #pt-userpage-2:hover, |
| .mw-parser-output div[style\*="#feffe1"] span[typeof="mw:File"] { | | .vector-header-container .vector-user-links a:hover, |
| max-width: 100% !important;
| | .vector-header-start .cdx-button:hover, |
| height: auto !important;
| | .vector-header-end .cdx-button:hover, |
| box-sizing: border-box !important;
| | .vector-header-start .vector-dropdown-label:hover, |
| display: block !important;
| | .vector-header-end .vector-dropdown-label:hover, |
| margin: 0 auto !important; /* Centers the media nicely */
| | .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; |
| } | | } |
| /* ==========================================================
| | .vector-header-container .cdx-button:active, |
| VANIPEDIA VISION
| | .vector-header-container .vector-dropdown-label:active, |
| ========================================================== */
| | .vector-header-container .vector-icon:active, |
| .vision-layout-wrapper { | | .vector-header-start .vector-dropdown-label:active .vector-icon, |
| display: block;
| | .vector-header-end .vector-dropdown-label:active .vector-icon, |
| width: 100%;
| | .vector-header-start .cdx-button:active .vector-icon, |
| max-width: 950px;
| | .vector-header-end .cdx-button:active .vector-icon { |
| margin: 10px auto 30px;
| | transform: none !important; |
| box-sizing: border-box;
| | filter: none !important; |
| } | | } |
| /* INTRODUCTION */
| | .vh-bottom-bar { |
| .vision-intro { | | position: fixed !important; |
| max-width: 850px;
| | bottom: 0 !important; |
| margin: 0 auto 22px;
| | left: 0 !important; |
| text-align: center;
| | right: 0 !important; |
| color: #263b38;
| | width: 100% !important; |
| font-size: 17px;
| | height: 38px !important; |
| line-height: 1.6;
| | background: #526B50 !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; |
| } | | } |
| /* CORE PRINCIPLES TITLE */
| | .vh-bottom-bar-inner { |
| .vision-core-title { | | display: flex !important; |
| margin: 0 auto 14px;
| | align-items: center !important; |
| text-align: center;
| | justify-content: center !important; |
| color: #3a5c6e;
| | gap: 14px !important; |
| font-size: 22px;
| | max-width: 1200px !important; |
| font-weight: 700;
| | width: 100% !important; |
| line-height: 1.25;
| | padding: 0 16px !important; |
| | overflow-x: auto !important; |
| | white-space: nowrap !important; |
| | scrollbar-width: none !important; /* Firefox */ |
| } | | } |
| .vision-core-title span { | | .vh-bottom-bar-inner::-webkit-scrollbar { |
| font-size: 18px;
| | display: none !important; /* Chrome/Safari */ |
| font-weight: 500;
| |
| } | | } |
| /* CORE PRINCIPLES IMAGE
| | .vh-bottom-link { |
| No border/frame/padding.
| | color: #f5d77f !important; |
| Uses full available content width.
| | font-family: 'Noto Serif', Georgia, serif !important; |
| */
| | font-size: 13.5px !important; |
| .vision-core-image {
| | font-weight: 600 !important; |
| width: 100%;
| | text-decoration: none !important; |
| margin: 0;
| | letter-spacing: 0.35px !important; |
| padding: 0;
| | padding: 3px 10px !important; |
| line-height: 0;
| | border-radius: 4px !important; |
| cursor: pointer;
| | transition: color 0.18s ease, background-color 0.18s ease, transform 0.15s ease !important; |
| }
| | display: inline-flex !important; |
| .vision-core-image .mw-file-description,
| | align-items: center !important; |
| .vision-core-image .mw-file-element,
| | white-space: nowrap !important; |
| .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 */
| | .vh-bottom-link:hover { |
| .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; | | color: #ffffff !important; |
| font-size: 16px !important;
| | background-color: rgba(245, 215, 127, 0.18) !important; |
| font-weight: bold;
| | text-decoration: none !important; |
| text-align: center;
| |
| text-decoration: none; | |
| } | | } |
| /* RESPONSIVE */
| | .vh-bottom-donate { |
| @media (max-width: 800px) {
| | background: linear-gradient(135deg, rgba(223, 173, 62, 0.3) 0%, rgba(223, 173, 62, 0.12) 100%) !important; |
| .vision-buttons-row { | | border: 1px solid rgba(223, 173, 62, 0.65) !important; |
| flex-wrap: wrap;
| | color: #fce8a6 !important; |
| | padding: 2.5px 14px !important; |
| | border-radius: 12px !important; |
| | font-weight: 700 !important; |
| } | | } |
| .vision-btn { | | .vh-bottom-donate:hover { |
| flex: 1 1 45%;
| | 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; |
| } | | } |
| .vision-intro { | | .vh-bottom-sep { |
| font-size: 16px; | | color: rgba(245, 215, 127, 0.35) !important; |
| | font-size: 12px !important; |
| | line-height: 1 !important; |
| | pointer-events: none !important; |
| } | | } |
| | body.page-Main_Page .vh-bottom-link { |
| | cursor: none !important; |
| } | | } |
| /* ----------------------------------------------------
| | body.page-Main_Page .vector-sitenotice-container { |
| Vanipedia Community Section
| | display: none !important; |
| ---------------------------------------------------- */
| | width: 0 !important; |
| .community-layout-wrapper { | | min-width: 0 !important; |
| max-width: 1100px;
| | max-width: 0 !important; |
| margin: 35px auto 40px;
| | margin: 0 !important; |
| padding: 0 15px;
| | padding: 0 !important; |
| 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 { | | .vector-sticky-header-container { |
| display: flex;
| | position: fixed !important; |
| align-items: center;
| | top: 0 !important; |
| justify-content: center;
| | left: 0 !important; |
| | right: 0 !important; |
| | width: 100% !important; |
| | z-index: 1000 !important; |
| } | | } |
| .community-platform-item img { | | .vector-sticky-header-container:not(.vector-sticky-header-visible), |
| display: block; | | .vector-header-container.vector-sticky-header-container:not(.vector-sticky-header-visible) { |
| max-width: 240px; | | display: none !important; |
| height: auto !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; |
| } | | } |
| .community-platform-item a { | | .vh-bottom-link.vh-bottom-home { |
| display: inline-block;
| | color: #dfad3e !important; |
| transition: transform 0.2s ease;
| | font-weight: 700 !important; |
| | letter-spacing: 0.5px !important; |
| } | | } |
| .community-platform-item a:hover { | | .vh-bottom-link.vh-bottom-home:hover { |
| transform: scale(1.05);
| | color: #ffffff !important; |
| | background-color: rgba(223, 173, 62, 0.25) !important; |
| } | | } |
| /* YouTube + Facebooks + Instagram */
| | .vector-header-container, |
| .community-social-row { | | .vector-header, |
| display: flex;
| | .mw-header, |
| justify-content: center;
| | #mw-head { |
| align-items: center;
| | background-color: #526B50 !important; |
| gap: 102px;
| | background: #526B50 !important; |
| margin-bottom: 2px;
| | border-bottom: 2px solid #b1873d !important; |
| | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; |
| } | | } |
| .community-social-item {
| | @media screen and (max-width:999px) { |
| display: flex; | | #vanipedia-topbar-title, |
| align-items: center;
| | #vanipedia-topbar-title-link, |
| justify-content: center;
| | #vanipedia-topbar-center-title { |
| }
| | display: none !important; |
| .community-social-item img {
| | visibility: hidden !important; |
| display: block;
| | pointer-events: none !important; |
| max-width: 115px;
| | width: 0 !important; |
| height: auto !important;
| | height: 0 !important; |
| | opacity: 0 !important; |
| } | | } |
| .community-social-item a {
| |
| display: inline-block;
| |
| transition: transform 0.2s ease;
| |
| } | | } |
| .community-social-item a:hover { | | @media screen and (max-width:768px) { |
| transform: scale(1.08);
| | .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: #526B50 !important; |
| } | | } |
| /* Community image */
| | .vector-header-start { |
| .community-image-container { | | display: flex !important; |
| width: 100%;
| | flex-direction: row !important; |
| text-align: center;
| | align-items: center !important; |
| margin-bottom: 28px;
| | gap: 8px !important; |
| | flex: 1 1 auto !important; |
| | min-width: 0 !important; |
| } | | } |
| .community-image-container img { | | .vector-header-start #vector-main-menu-dropdown { |
| display: block; | | display: flex !important; |
| width: 100%;
| | align-items: center !important; |
| max-width: 1000px;
| | visibility: visible !important; |
| height: auto !important;
| | opacity: 1 !important; |
| margin: 0 auto;
| | cursor: pointer !important; |
| | flex-shrink: 0 !important; |
| | margin: 0 !important; |
| | padding: 0 4px !important; |
| } | | } |
| /* Contact + Statistics buttons */
| | .vector-header-start #vector-main-menu-dropdown .vector-icon { |
| .community-button-row { | | background-color: #f5d77f !important; |
| display: flex;
| | color: #f5d77f !important; |
| justify-content: center;
| | fill: #f5d77f !important; |
| align-items: stretch;
| | width: 22px !important; |
| gap: 30px;
| | height: 22px !important; |
| margin: 0 auto 30px;
| |
| } | | } |
| .community-button-row .vision-btn { | | .vector-header-container #p-search, |
| width: 250px;
| | .mw-header #p-search, |
| box-sizing: border-box;
| | .vector-header-start #p-search { |
| }
| | display: flex !important; |
| /* Mobile */
| | align-items: center !important; |
| @media screen and (max-width: 768px) {
| | flex: 1 1 auto !important; |
| .community-layout-wrapper {
| | max-width: calc(100vw - 110px) !important; |
| padding: 0 10px;
| | min-width: 100px !important; |
| margin-top: 25px;
| | margin: 0 !important; |
| | padding: 0 !important; |
| } | | } |
| .community-platform-row { | | .vector-header-container #searchform, |
| gap: 25px;
| | .mw-header #searchform { |
| margin-bottom: 22px; | | width: 100% !important; |
| | display: flex !important; |
| | align-items: center !important; |
| | margin: 0 !important; |
| | padding: 0 !important; |
| } | | } |
| .community-platform-item img { | | .vector-header-container .cdx-search-input, |
| max-width: 150px; | | .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; |
| } | | } |
| .community-social-row { | | .vector-header-container .cdx-text-input__input, |
| gap: 18px;
| | .vector-header-container input[type="search"], |
| margin-bottom: 25px;
| | #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; |
| } | | } |
| .community-social-item img { | | .vector-header-container .cdx-text-input__input:focus, |
| max-width: 65px;
| | .vector-header-container input[type="search"]:focus, |
| | #searchInput:focus { |
| | width: 100% !important; |
| | background-color: #173036 !important; |
| | border-color: #f5d77f !important; |
| } | | } |
| .community-image-container { | | #vector-main-menu-dropdown .vector-dropdown-content, |
| margin-bottom: 22px;
| | #vector-main-menu-dropdown-content, |
| }
| | #vector-main-menu-unpinned-container, |
| .community-button-row { | | #vector-main-menu-dropdown .vector-dropdown-content.is-open { |
| gap: 12px;
| | 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; |
| } | | } |
| .community-button-row .vision-btn { | | #vector-main-menu-dropdown .vector-dropdown-content a, |
| width: calc(50% - 6px);
| | #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: #526B50 !important; |
| | color: #ffffff !important; |
| | border-left-color: #f5d77f !important; |
| } | | } |
| /* ==========================================================================
| | #vector-main-menu-dropdown .vector-menu-heading, |
| GLOBAL SITENOTICE / MEDIAWIKI HEADER SUPPRESSION (ALL PAGES)
| | #vector-main-menu-dropdown-content .vector-menu-heading, |
| ========================================================================== */
| | #vector-main-menu-unpinned-container .vector-menu-heading { |
| #siteNotice, | | color: #fce8a6 !important; |
| #localNotice, | | font-weight: 700 !important; |
| .mw-sitenotice, | | font-size: 13px !important; |
| .sitenotice,
| | letter-spacing: 0.6px !important; |
| .vector-sitenotice-container,
| | text-transform: uppercase !important; |
| #mainbanner,
| | border-bottom: 1px solid rgba(245, 215, 127, 0.3) !important; |
| .anonnotice, | | padding: 10px 18px 6px 18px !important; |
| .dismissable-notice,
| | margin-top: 8px !important; |
| #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 */
| | .vh-bottom-bar { |
| body.restricted-ui #ca-history,
| | height: 38px !important; |
| body.restricted-ui #ca-talk,
| |
| body.restricted-ui #ca-viewsource {
| |
| display: none !important;
| |
| } | | } |
| /* =========================================================
| | .vh-bottom-bar-inner { |
| NIGHT MODE / DARK MODE OVERRIDES
| | gap: 10px !important; |
| ========================================================= */
| | padding: 0 10px !important; |
| /* 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 */
| | .vh-bottom-link { |
| html.skin-theme-clientpref-night body,
| | font-size: 12px !important; |
| html.skin-theme-clientpref-night #content,
| | padding: 2px 6px !important; |
| 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 {
| | body.skin-minerva .minerva-header { |
| background: #1a1a1a !important;
| | display: flex !important; |
| border-color: #333 !important;
| | flex-direction: row !important; |
| }
| | align-items: center !important; |
| html.skin-theme-clientpref-night .book-accordion-header {
| | justify-content: flex-start !important; |
| background-color: #2d3748 !important;
| | height: 100% !important; |
| border-bottom: 3px solid #1a202c !important;
| | width: 100% !important; |
| }
| | padding: 0 12px !important; |
| html.skin-theme-clientpref-night .mw-parser-output .book-grid-list li a,
| | margin: 0 !important; |
| html.skin-theme-clientpref-night .mw-parser-output .book-grid-list li a.external {
| | box-sizing: border-box !important; |
| background-color: #2d3748 !important;
| | background-color: #526B50 !important; |
| border: 1px solid #4a5568 !important; | |
| color: #90cdf4 !important; | |
| } | | } |
| html.skin-theme-clientpref-night .mw-parser-output .book-grid-list li a:hover {
| | .minerva-header .navigation-drawer.toggle-list { |
| background-color: #4a5568 !important;
| | 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; |
| } | | } |
| html.skin-theme-clientpref-night .quote_text,
| | .minerva-header #mw-mf-main-menu-button, |
| html.skin-theme-clientpref-night \*:not(a).text {
| | .minerva-header .toggle-list__toggle { |
| color: #e2e8f0 !important;
| | background: transparent !important; |
| }
| | background-color: transparent !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; | | box-shadow: none !important; |
| outline: 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; |
| } | | } |
| html.skin-theme-clientpref-night .cdx-text-input__input {
| | .minerva-header .minerva-icon--menu, |
| background-color: transparent !important; | | .minerva-header #mw-mf-main-menu-button .minerva-icon--menu { |
| color: #e2e8f0 !important;
| | background-color: #f5d77f !important; |
| | opacity: 1 !important; |
| | width: 24px !important; |
| | height: 24px !important; |
| | display: inline-block !important; |
| } | | } |
| html.skin-theme-clientpref-night .cdx-text-input__input::placeholder {
| | .minerva-header .branding-box { |
| color: #a0aec0 !important;
| | display: flex !important; |
| }
| | align-items: center !important; |
| html.skin-theme-clientpref-night .cdx-search-input__end-button {
| | flex: 0 0 auto !important; |
| background-color: #2d3748 !important;
| | margin: 0 0 0 20px !important; |
| border-color: #4a5568 !important;
| | padding: 0 !important; |
| color: #e2e8f0 !important;
| |
| } | | } |
| html.skin-theme-clientpref-night .cdx-typeahead-search__menu {
| | .minerva-header .branding-box a, |
| background-color: #121212 !important;
| | .minerva-header .branding-box span { |
| border: 1px solid #333 !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; |
| | text-decoration: none !important; |
| | white-space: nowrap !important; |
| } | | } |
| html.skin-theme-clientpref-night .cdx-menu-item:hover,
| | .minerva-header .minerva-search-form { |
| html.skin-theme-clientpref-night .cdx-menu-item--selected {
| | margin-left: auto !important; /* Absorbs ALL horizontal space between title and search */ |
| background-color: #2d3748 !important;
| | 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; |
| } | | } |
| /* 6. Invert external iframes and override inline widget colors */
| | .minerva-header .minerva-search-form .search-box { |
| html.skin-theme-clientpref-night .vanipedia-clock iframe {
| | display: none !important; |
| filter: invert(0.92) hue-rotate(180deg) !important;
| |
| } | | } |
| html.skin-theme-clientpref-night .mw-parser-output div[style\*="#ede9ce"],
| | .minerva-header #searchIcon { |
| html.skin-theme-clientpref-night .mw-parser-output div[style\*="background-color: #ede9ce"],
| | background: transparent !important; |
| 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; | | background-color: transparent !important; |
| color: inherit !important;
| | border: none !important; |
| } | | box-shadow: none !important; |
| /* 7. Scrollbars and Edge Stripes Cleanup */
| | outline: none !important; |
| html.skin-theme-clientpref-night #vector-toc,
| | padding: 0 !important; |
| html.skin-theme-clientpref-night .vector-dropdown-content {
| | margin: 0 !important; |
| scrollbar-color: #3b4b5f #1a202c !important;
| | width: 32px !important; |
| }
| | height: 32px !important; |
| html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar,
| | display: flex !important; |
| html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar {
| | align-items: center !important; |
| width: 8px !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; |
| } | | } |
| html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar-track,
| | .minerva-header .minerva-user-navigation { |
| html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar-track {
| | flex: 0 0 32px !important; |
| background: #1a202c !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; |
| } | | } |
| html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar-thumb,
| | .minerva-header .minerva-notifications, |
| html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar-thumb {
| | .minerva-header .minerva-user-navigation ul, |
| background-color: #3b4b5f !important;
| | .minerva-header .minerva-user-navigation li { |
| border-radius: 4px !important;
| | 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; |
| } | | } |
| html.skin-theme-clientpref-night #vector-toc .vector-toc-list-item-active {
| | .minerva-header #ca-mytalks { |
| | background: transparent !important; |
| background-color: transparent !important; | | background-color: transparent !important; |
| box-shadow: none !important;
| |
| border: 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; | | 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; |
| } | | } |
| /* 8. Dark Mode Sidebar Menu Widgets & Headers */
| | .minerva-header .minerva-icon--bellOutline, |
| html.skin-theme-clientpref-night .vector-dropdown-content {
| | .minerva-header #ca-mytalks .minerva-icon--bellOutline { |
| background-color: #253141 !important; | | background-color: #f5d77f !important; |
| border: 1px solid #3b4b5f !important;
| | opacity: 1 !important; |
| border-radius: 4px !important;
| | width: 22px !important; |
| padding: 4px !important;
| | height: 22px !important; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
| | display: inline-block !important; |
| } | | } |
| html.skin-theme-clientpref-night .vector-dropdown-content a,
| | .minerva-header #ca-mytalks span:last-child { |
| html.skin-theme-clientpref-night .vector-dropdown-content a \*,
| | display: none !important; |
| 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,
| | #vanipedia-mobile-user-menu { |
| 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; | | 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 { |
| LIGHT MODE OVERRIDES
| | display: flex !important; |
| ========================================================= */
| |
| /* 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 */
| | #vanipedia-mobile-user-menu a.vani-user-menu-item { |
| html:not(.skin-theme-clientpref-night) .vector-dropdown-content:not(#vector-user-links-dropdown *):not(.vector-user-menu *) {
| | color: #f5d77f !important; |
| background-color: #ffffff !important; /* Clean white background */
| | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; |
| border: 1px solid #c8ccd1 !important; /* Soft grey border */
| | font-size: 15px !important; |
| border-radius: 4px !important;
| | font-weight: 500 !important; |
| padding: 6px !important;
| | padding: 10px 18px !important; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; /* Soft shadow */
| | text-decoration: none !important; |
| | display: block !important; |
| | line-height: 1.2 !important; |
| } | | } |
| /* Ensure inner wrappers don't double-pad or override the box */
| | #vanipedia-mobile-user-menu a.vani-user-menu-item:hover, |
| html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-main-menu,
| | #vanipedia-mobile-user-menu a.vani-user-menu-item:active { |
| html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-toc {
| | background-color: #526B50 !important; |
| background-color: transparent !important; | | color: #ffffff !important; |
| padding: 0 !important;
| |
| border: none !important;
| |
| box-shadow: none !important;
| |
| } | | } |
| /* 3. Light Mode Sidebar Menu Typography & Headers */
| | #vanipedia-mobile-user-menu .vani-user-menu-divider { |
| html:not(.skin-theme-clientpref-night) #vector-main-menu .vector-menu-heading,
| | height: 1px !important; |
| html:not(.skin-theme-clientpref-night) .vector-dropdown-content .vector-menu-heading {
| | background-color: rgba(177, 135, 61, 0.35) !important; |
| background-color: #345B63 !important; /* Dark teal background for headers */
| | margin: 5px 0 !important; |
| 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,
| | #vanipedia-mobile-user-menu a.vani-user-menu-logout { |
| html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link {
| | color: #fca5a5 !important; |
| color: #2F5E5E !important; | |
| } | | } |
| html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a:hover,
| | #vanipedia-mobile-user-menu a.vani-user-menu-logout:hover { |
| html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link:hover {
| | background-color: rgba(239, 68, 68, 0.2) !important; |
| color: #0645ad !important; | | color: #ffffff !important; |
| background-color: #EEF2F9 !important; /* Soft hover highlight */
| |
| border-radius: 2px !important;
| |
| } | | } |
| /* =========================================================
| | #mw-mf-page-left.navigation-drawer, |
| GLOBAL OVERRIDES (BOTH MODES)
| | #mw-mf-page-left.menu { |
| ========================================================= */
| | background-color: #1f3e45 !important; |
| #mainbanner { | | border-right: 2px solid #b1873d !important; |
| margin: 0 !important;
| | box-shadow: 4px 0 18px rgba(0, 0, 0, 0.45) !important; |
| padding: 0 !important;
| |
| border: none !important;
| |
| } | | } |
| .mw-body,
| | #mw-mf-page-left a.toggle-list-item__anchor { |
| #content,
| | color: #f5d77f !important; |
| .mw-body-content,
| | font-size: 14.5px !important; |
| #mw-content-text {
| |
| margin-top: 0 !important;
| |
| padding-top: 0 !important;
| |
| border-top: none !important;
| |
| border: none !important;
| |
| outline: none !important;
| |
| } | | } |
| /* Personality Landing Hero */
| | #mw-mf-page-left a.toggle-list-item__anchor:hover { |
| .personality-card { | | background-color: #526B50 !important; |
| max-width: 1100px;
| | color: #ffffff !important; |
| margin: 0 auto 35px auto;
| |
| background: #3a5c6e; | |
| border: 1px solid #7FA28B;
| |
| color: #ffffff; | |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| box-sizing: border-box;
| |
| } | | } |
| .personality-hero { | | #mw-mf-page-left .minerva-icon { |
| display: flex;
| | background-color: #ffd700 !important; |
| gap: 28px;
| |
| align-items: center; /* This centers the shorter column (image or text) vertically */
| |
| } | | } |
| .personality-image { | | html #vector-user-links-dropdown .vector-dropdown-content, |
| flex: 0 0 396px;
| | html body.page-Main_Page #vector-user-links-dropdown .vector-dropdown-content, |
| text-align: center;
| | 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; |
| } | | } |
| .personality-image img { | | html #vector-user-links-dropdown .vector-dropdown-content div, |
| max-width: 360px;
| | html #vector-user-links-dropdown .vector-dropdown-content ul, |
| width: 100%;
| | html #vector-user-links-dropdown .vector-dropdown-content li, |
| height: auto;
| | html #vector-user-links-dropdown .vector-dropdown-content .vector-menu-content, |
| display: block;
| | html #vector-user-links-dropdown .vector-dropdown-content .vector-menu-content-list { |
| margin: auto;
| | background: transparent !important; |
| padding: 4px;
| | background-color: transparent !important; |
| background: #E7F3E5;
| | border: none !important; |
| border: 1px solid #c8c8c8;
| | box-shadow: none !important; |
| border-radius: 4px;
| | margin: 0 !important; |
| box-shadow: 0 1px 3px rgba(0,0,0,.08);
| | padding: 0 !important; |
| }
| | list-style: none !important; |
| /* 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 { | | html #vector-user-links-dropdown #pt-mytalk, |
| flex: 1;
| | html .vector-user-menu #pt-mytalk { |
| padding: 0 24px 0 0;
| | display: block !important; |
| | visibility: visible !important; |
| } | | } |
| /* --- Mobile Layout Rules --- */
| | #vector-user-links-dropdown-label .vector-icon, |
| @media (max-width: 768px) {
| | #vector-user-links-dropdown .vector-dropdown-label .vector-icon, |
| .personality-hero {
| | .vector-header-end #vector-user-links-dropdown .vector-icon { |
| flex-direction: column; /* Stacks the image and text vertically */
| | display: inline-block !important; |
| gap: 16px; /* Reduces the gap slightly so it doesn't feel too empty on mobile */
| | 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; |
| } | | } |
| .personality-image { | | #vector-user-links-dropdown .vector-dropdown-content .vector-icon { |
| flex: 1 1 auto; /* Removes the rigid 360px width constraint */
| | display: inline-block !important; |
| width: 100%; /* Allows the image to fill the mobile container gracefully */
| | 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; |
| } | | } |
| .personality-image img { | | html #vector-user-links-dropdown .vector-dropdown-content a, |
| max-width: 100%; /* Ensures the image never spills off the screen */
| | html #p-personal .vector-menu-content a { |
| }
| | display: flex !important; |
| .personality-title { | | align-items: center !important; |
| text-align: center; /* Optional: Centering the title often looks better on stacked mobile layouts */
| | color: #f5d77f !important; |
| }
| | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; |
| .personality-content {
| | font-size: 15px !important; |
| padding: 0 16px; /* Adds 16px of space to the left and right of the text */
| | font-weight: 500 !important; |
| }
| | padding: 10px 18px !important; |
| }
| | line-height: 1.2 !important; |
| /*--- Additional Info Card ---*/
| | background: transparent !important; |
| .info-card {
| | background-color: transparent !important; |
| max-width: 900px;
| | border: none !important; |
| margin: 30px auto;
| | text-decoration: none !important; |
| padding: 24px 28px;
| | box-sizing: border-box !important; |
| background: #FFF8EE; | | width: 100% !important; |
| border: 1px solid #D8C7A5; | | transition: background-color 0.15s ease, color 0.15s ease !important; |
| border-radius: 8px;
| |
| box-sizing: border-box; | |
| text-align: left;
| |
| } | | } |
| .info-card h3 { | | html #vector-user-links-dropdown .vector-dropdown-content a span, |
| margin: 0 0 15px;
| | html #p-personal .vector-menu-content a span { |
| font-size: 150%; | | color: #f5d77f !important; |
| color: #345B63;
| | font-size: 15px !important; |
| | font-weight: 500 !important; |
| | display: inline !important; |
| | padding: 0 !important; |
| | margin: 0 !important; |
| | background: transparent !important; |
| } | | } |
| .info-card p { | | html #vector-user-links-dropdown .vector-dropdown-content a:hover, |
| margin: 0 0 16px;
| | html #vector-user-links-dropdown .vector-dropdown-content a:focus, |
| line-height: 1.7;
| | html #vector-user-links-dropdown .vector-dropdown-content a:active { |
| | background-color: #526B50 !important; |
| | color: #ffffff !important; |
| | text-decoration: none !important; |
| } | | } |
| .info-card .cta-button { | | html #vector-user-links-dropdown .vector-dropdown-content a:hover span { |
| margin-top: 10px;
| | color: #ffffff !important; |
| } | | } |
| /* Hide empty sidebar menu headings */
| | html #vector-user-links-dropdown #pt-logout, |
| #vector-main-menu.vanipedia-sidebar-menu.vanipedia-collapsed { | | html .vector-user-menu #pt-logout { |
| display: none !important;
| | border-top: 1px solid rgba(177, 135, 61, 0.35) !important; |
| | margin-top: 6px !important; |
| | padding-top: 4px !important; |
| } | | } |
| .accordion-toc-heading { | | html #vector-user-links-dropdown #pt-logout a, |
| display: none;
| | html .vector-user-menu #pt-logout a { |
| | color: #fca5a5 !important; |
| } | | } |
| /* ==========================================================================
| | html #vector-user-links-dropdown #pt-logout a:hover, |
| STICKY HEADER & FLOATING MENU ONLY
| | html .vector-user-menu #pt-logout a:hover { |
| ========================================================================== */
| | background-color: rgba(239, 68, 68, 0.25) !important; |
| /* 1. Permanently remove the pinned sidebar column & all pinning buttons */
| | color: #ffffff !important; |
| #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 */
| | @media screen and (max-width:768px) { |
| #vector-sticky-header .vector-sticky-header-search-toggle,
| | .vh-bottom-bar-inner { |
| #vector-sticky-header #vector-sticky-header-search-toggle,
| | justify-content: flex-start !important; |
| #vector-sticky-header .search-toggle,
| | padding: 0 14px !important; |
| #vector-sticky-header .mw-ui-icon-wikimedia-search,
| | gap: 10px !important; |
| #vector-sticky-header .mw-ui-icon-search,
| | overflow-x: auto !important; |
| #vector-sticky-header .vector-icon.mw-ui-icon-search,
| | -webkit-overflow-scrolling: touch !important; |
| #vector-sticky-header .cdx-search-input__start-icon {
| |
| display: none !important;
| |
| } | | } |
| /* 3. Sticky header container layout */
| | .vh-bottom-link.vh-bottom-home { |
| .skin-vector-2022 #vector-sticky-header,
| | display: inline-flex !important; |
| #vector-sticky-header {
| | flex-shrink: 0 !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 */
| |
| 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) */
| | body.ext-vp3d-fullscreen #vh-bottom-bar, |
| .skin-vector-2022 #vector-sticky-header .vector-sticky-header-start, | | body.ext-vp3d-fullscreen .minerva-header, |
| #vector-sticky-header .vector-sticky-header-start { | | body.ext-vp3d-fullscreen .vector-header-container, |
| display: flex !important; | | body.ext-vp3d-fullscreen #mw-head, |
| align-items: center !important;
| | body.ext-vp3d-fullscreen .mw-header, |
| flex: 0 0 auto !important; /* Stops it from expanding across the middle */
| | body:has(.vp-entry3d-container) #vh-bottom-bar, |
| flex-grow: 0 !important;
| | body:has(.vp-entry3d-container) .minerva-header, |
| width: auto !important;
| | body:has(.vp-entry3d-container) .vector-header-container, |
| position: relative !important;
| | body:has(.vp-entry3d-wrapper) #vh-bottom-bar, |
| z-index: 10 !important;
| | body:has(.vp-entry3d-wrapper) .minerva-header, |
| gap: 18px !important;
| | 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; | | margin: 0 !important; |
| | padding: 0 !important; |
| } | | } |
| /* 5. Burger button */
| | #vani-stage-header-slot .minerva-header, |
| #vanipedia-sticky-main-menu { | | #vani-stage-header-slot .vector-header-container, |
| display: inline-flex !important; | | #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: #526B50 !important; |
| | display: flex !important; |
| | flex-direction: row !important; |
| align-items: center !important; | | align-items: center !important; |
| justify-content: center !important; | | justify-content: space-between !important; |
| flex: 0 0 auto !important;
| | box-sizing: border-box !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 { | | #vani-stage-footer-slot #vh-bottom-bar, |
| display: inline-block !important;
| | #vani-stage-footer-slot .vh-bottom-bar { |
| width: 20px !important;
| | position: static !important; |
| height: 20px !important;
| | width: 100% !important; |
| }
| | height: 100% !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; | | margin: 0 !important; |
| float: none !important;
| | padding: 0 !important; |
| display: inline-flex !important; | | border: none !important; |
| | box-shadow: none !important; |
| | background-color: transparent !important; |
| | display: flex !important; |
| align-items: center !important; | | align-items: center !important; |
| flex: 0 0 auto !important;
| | justify-content: center !important; |
| z-index: 10 !important;
| |
| } | | } |
| #vector-sticky-header input.searchbox, | | #vani-stage-footer-slot .vh-bottom-bar-inner { |
| #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; | | display: flex !important; |
| align-items: center !important; | | align-items: center !important; |
| justify-content: center !important; | | justify-content: center !important; |
| text-align: center !important;
| | width: 100% !important; |
| flex: 1 1 auto !important;
| | height: 100% !important; |
| margin-left: auto !important;
| | gap: 14px !important; |
| margin-right: auto !important;
| | padding: 0 16px !important; |
| max-width: none !important;
| |
| } | | } |
| #vector-sticky-header .vector-sticky-header-context-bar-primary, | | #vani-stage-header-slot #vanipedia-mobile-user-menu { |
| #vector-sticky-header .vector-sticky-header-title,
| | position: absolute !important; |
| #vector-sticky-header .vector-sticky-header-context-bar .mw-headline { | | top: 48px !important; |
| display: inline-flex !important;
| | right: 8px !important; |
| align-items: center !important;
| | z-index: 1000000 !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 */
| | #mw-mf-page-left.navigation-drawer { |
| html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .mw-headline,
| | z-index: 1000005 !important; |
| 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 */
| | #vani-stage-header-slot .vector-header, |
| .skin-vector-2022 #vector-sticky-header .vector-sticky-header-end,
| | #vani-stage-header-slot .mw-header { |
| #vector-sticky-header .vector-sticky-header-end { | | width: 100% !important; |
| | max-width: 100% !important; |
| | height: 100% !important; |
| display: flex !important; | | display: flex !important; |
| | flex-direction: row !important; |
| align-items: center !important; | | align-items: center !important; |
| flex: 0 0 auto !important;
| | justify-content: space-between !important; |
| margin-left: auto !important;
| | padding: 0 12px !important; |
| | box-sizing: border-box !important; |
| } | | } |
| /* 9. Floating Dropdown Menu Box Styling */
| | #vani-stage-header-slot .vector-header-start { |
| #vector-main-menu-dropdown .vector-dropdown-content { | | display: flex !important; |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
| | flex-direction: row !important; |
| border-radius: 4px !important;
| | align-items: center !important; |
| background-color: var(--background-color-base, #ffffff) !important;
| | gap: 12px !important; |
| | flex: 1 1 auto !important; |
| } | | } |
| /* ==========================================================================
| | #vani-stage-header-slot .vector-header-end { |
| 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; | | display: flex !important; |
| | flex-direction: row !important; |
| align-items: center !important; | | align-items: center !important; |
| justify-content: center !important;
| | gap: 10px !important; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
| | flex: 0 0 auto !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 */
| | body.has-vani-stage>.vector-header-container, |
| #vanipedia-back-to-top.visible { | | body.has-vani-stage>.vector-sticky-header-container, |
| opacity: 1 !important;
| | body.has-vani-stage>#mw-head, |
| visibility: visible !important;
| | body.has-vani-stage>#vh-bottom-bar { |
| transform: translateY(0) !important;
| | display: none !important; |
| } | | } |
| #vanipedia-back-to-top:hover { | | #mw-mf-page-left { |
| background-color: #244147 !important; | | background-color: #f6f2e9 !important; |
| transform: translateY(-2px) !important;
| | border-right: 2px solid #b1873d !important; |
| box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !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; |
| } | | } |
| #vanipedia-back-to-top:active { | | #mw-mf-page-left>ul#p-navigation, |
| transform: translateY(0) !important;
| | #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; |
| } | | } |
| #vanipedia-back-to-top svg { | | #mw-mf-page-left #vani-mobile-synced-sidebar { |
| display: block !important;
| | width: 100% !important; |
| width: 22px !important; | | padding: 0 !important; |
| height: 22px !important;
| | margin: 0 !important; |
| stroke: #ffffff !important;
| | } |
| | #mw-mf-page-left .vanipedia-sidebar-menu { |
| | width: 100% !important; |
| | max-width: 100% !important; |
| | box-sizing: border-box !important; |
| | margin-bottom: 6px !important; |
| } | | } |
| /* Dark mode theme */
| | #mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading { |
| html.skin-theme-clientpref-night #vanipedia-back-to-top {
| | cursor: pointer !important; |
| background-color: #3b4b5f !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; | | color: #ffffff !important; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important; | | display: flex !important; |
| | justify-content: space-between !important; |
| | align-items: center !important; |
| | box-sizing: border-box !important; |
| | transition: all 0.2s ease !important; |
| } | | } |
| html.skin-theme-clientpref-night #vanipedia-back-to-top:hover {
| | #mw-mf-page-left .vanipedia-sidebar-menu:not(.vanipedia-collapsed) .vector-menu-heading { |
| background-color: #4f637c !important;
| | border-radius: 4px 4px 0 0 !important; |
| | margin-bottom: 0 !important; |
| } | | } |
| /* Mobile positioning */
| | #mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-heading:hover { |
| @media screen and (max-width: 768px) {
| | background-color: #385e63 !important; |
| #vanipedia-back-to-top {
| |
| bottom: 54px !important;
| |
| right: 18px !important;
| |
| width: 40px !important;
| |
| height: 40px !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 { |
| UNIVERSAL VĀṆĪ-TEMPLE MAIN PAGE: FULL-WIDTH ARCHITECTURAL BLUEPRINT
| | transform: rotate(-90deg) !important; |
| ========================================================================== */
| |
| /* 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) */
| | #mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content { |
| 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; }
| | background-color: #eaeff0 !important; |
| .vector-header-container .mw-logo-wordmark,
| | border: 1px solid #2c4c50 !important; |
| .vector-header-container .vector-menu-heading,
| | border-top: none !important; |
| .vector-header-container a, | | border-radius: 0 0 4px 4px !important; |
| .vector-sticky-header a {
| | padding: 0 0 4px 0 !important; |
| color: #ffffff !important;
| | margin-bottom: 6px !important; |
| | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important; |
| | box-sizing: border-box !important; |
| } | | } |
| .vector-header-container .cdx-text-input__input, | | #mw-mf-page-left .vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-content { |
| .vector-header-container input[type="search"] { | | display: none !important; |
| 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,
| | #mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content ul { |
| .vector-header-container input[type="submit"] { | | list-style: none !important; |
| background-color: var(--petal-color-dark) !important;
| | margin: 0 !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;
| |
| max-width: 100vw !important;
| |
| background-color: var(--vani-wood-wall) !important;
| |
| } | | } |
| .vani-wood-sanctuary { | | #mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li a { |
| width: 100vw !important;
| | display: block !important; |
| max-width: 100vw !important;
| | padding: 9px 14px 9px 18px !important; |
| min-height: calc(100vh - 110px);
| | color: #1b3033 !important; |
| box-sizing: border-box;
| | font-size: 14px !important; |
| margin: 0 !important;
| | text-decoration: none !important; |
| padding: 24px 40px 80px 40px !important;
| | border-left: 3px solid transparent !important; |
| background:
| | border-bottom: 1px solid rgba(44, 76, 80, 0.1) !important; |
| linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.55) 100%),
| | transition: all 0.15s ease !important; |
| 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) */
| | #mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li:last-child a { |
| .vani-canopy-box {
| | border-bottom: none !important; |
| 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 */
| | #mw-mf-page-left .vanipedia-sidebar-menu .vector-menu-content li a:hover { |
| .vani-canopy-box::after { | | background-color: #dbe4e6 !important; |
| content: "";
| | border-left: 3px solid #2c4c50 !important; |
| position: absolute;
| | color: #000000 !important; |
| 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 {
| | #mw-mf-page-left #sidebarLanguageSearch { |
| font-family: 'Cormorant Garamond', Georgia, serif;
| | width: 100% !important; |
| font-size: clamp(28px, 2.5vw, 42px); | | box-sizing: border-box !important; |
| font-weight: 700;
| | padding: 7px 10px !important; |
| color: var(--vani-gold);
| | font-size: 14px !important; |
| letter-spacing: 0.05em;
| | border: 1px solid #a2a9b1 !important; |
| margin: 0 0 6px 0;
| | border-radius: 3px !important; |
| text-shadow: 0 2px 8px rgba(0,0,0,0.8);
| | background-color: #ffffff !important; |
| | color: #1a1a1a !important; |
| | margin-bottom: 4px !important; |
| } | | } |
| .vani-canopy-subtitle { | | .vector-header-start { |
| font-size: 15px;
| | display: flex !important; |
| color: #c9bfb1;
| | flex-direction: row !important; |
| margin: 0;
| | align-items: center !important; |
| letter-spacing: 0.04em;
| | flex-wrap: nowrap !important; |
| } | | } |
| /* 5. Open Recessed Wall Shelves (Without Glass) */
| | .vector-header-start .vector-main-menu-landmark, |
| .vani-shelves-grid { | | .vector-header-start #vector-main-menu-dropdown { |
| display: grid;
| | order: 1 !important; |
| grid-template-columns: repeat(3, 1fr);
| |
| gap: 24px;
| |
| margin: 34px 0 28px;
| |
| width: 100%;
| |
| } | | } |
| .vani-open-shelf { | | .vector-header-start .mw-logo { |
| background: linear-gradient(180deg, #110b08 0%, var(--vani-shelf-depth) 100%);
| | order: 2 !important; |
| border: 2px solid var(--vani-border-wood);
| | display: none !important; |
| 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 */
| | .vector-header-start #p-search, |
| .vani-open-shelf::before { | | .vector-header-container #p-search, |
| content: "";
| | .mw-header #p-search, |
| position: absolute;
| | div#p-search { |
| top: 0;
| | order: 5 !important; |
| left: 8%;
| | margin-right: 0 !important; |
| 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 { | | .vector-header-start #vanipedia-topbar-home-link, |
| font-family: 'Cormorant Garamond', Georgia, serif;
| | .vector-header-container #vanipedia-topbar-home-link, |
| font-size: 20px;
| | #vanipedia-topbar-home-link, |
| font-weight: 700;
| | a.vanipedia-topbar-home { |
| color: var(--vani-gold);
| | order: 10 !important; |
| border-bottom: 1px solid rgba(212, 175, 55, 0.25);
| | margin-left: 10px !important; |
| padding-bottom: 6px;
| | margin-right: 14px !important; |
| margin-bottom: 14px; | | color: #f5d77f !important; |
| }
| |
| /* Content styling inside dark shelves */
| |
| .vani-open-shelf a {
| |
| color: #dcd4c7 !important; | |
| text-decoration: none !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; |
| } | | } |
| .vani-open-shelf a:hover { | | a.vanipedia-topbar-home:hover, |
| color: var(--vani-gold) !important;
| | a.vanipedia-topbar-home:active, |
| }
| | .vector-header-container a.vanipedia-topbar-home:hover, |
| /* 6. Central Showcase Display Window (Holds Virtual Timeline) */
| | .vector-header-container #vanipedia-topbar-home-link:hover, |
| .vani-center-showcase { | | .minerva-header a.vanipedia-topbar-home:hover, |
| width: 100%;
| | #vani-stage-header-slot a.vanipedia-topbar-home:hover { |
| max-width: 1100px;
| | color: #ffffff !important; |
| margin: 0 auto 35px;
| | background-color: rgba(245, 215, 127, 0.2) !important; |
| 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; | | text-decoration: none !important; |
| padding: 4px 12px;
| | text-decoration-line: none !important; |
| border-radius: 12px; | | border-bottom: none !important; |
| background: rgba(255,255,255,0.06);
| | transform: translateY(-1px) !important; |
| border: 1px solid rgba(255,255,255,0.12);
| |
| transition: all 0.2s ease;
| |
| } | | } |
| .vani-petal-badge:hover, | | .vanipedia-topbar-home .vanipedia-home-icon { |
| .vani-petal-badge.is-active { | | display: inline-flex !important; |
| background: var(--petal-color);
| | align-items: center !important; |
| border-color: var(--vani-gold);
| | justify-content: center !important; |
| color: #ffffff !important;
| | line-height: 1 !important; |
| } | | } |
| .vani-footer-milestone { | | .vanipedia-topbar-home .vanipedia-home-icon svg { |
| color: var(--vani-gold);
| | width: 18px !important; |
| font-weight: 600;
| | height: 18px !important; |
| letter-spacing: 0.03em;
| | stroke: #f5d77f !important; |
| }
| | fill: none !important; |
| @media screen and (max-width: 900px) {
| | stroke-width: 2 !important; |
| .vani-shelves-grid {
| | stroke-linecap: round !important; |
| grid-template-columns: 1fr;
| | 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; |
| } | | } |
| /* ==========================================================================
| | .vanipedia-topbar-home .vanipedia-home-text { |
| Vanipedia Visitors Statistics — Zero Scrollbar Configuration
| | display: inline-block !important; |
| ========================================================================== */
| | line-height: 1 !important; |
| /* Hide right Appearance menu */
| | text-decoration: none !important; |
| .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 */
| | @media screen and (max-width:900px) { |
| body.page-Vanipedia_Visitors_Statistics {
| | .vector-header-start #p-search, |
| --max-width-base: 1350px !important; | | .vector-header-container #p-search, |
| --width-layout: 1350px !important;
| | .mw-header #p-search { |
| | flex: 1 1 auto !important; |
| | max-width: calc(100vw - 160px) !important; |
| } | | } |
| .page-Vanipedia_Visitors_Statistics .mw-page-container { | | .vanipedia-topbar-home .vanipedia-home-text { |
| max-width: 1350px !important;
| | display: none !important; |
| width: 90% !important;
| |
| margin: 0 auto !important;
| |
| } | | } |
| .page-Vanipedia_Visitors_Statistics .mw-page-container-inner, | | .vector-header-start #vanipedia-topbar-home-link, |
| .page-Vanipedia_Visitors_Statistics .mw-content-container, | | .vector-header-container #vanipedia-topbar-home-link, |
| .page-Vanipedia_Visitors_Statistics #content,
| | #vanipedia-topbar-home-link, |
| .page-Vanipedia_Visitors_Statistics .mw-parser-output { | | a.vanipedia-topbar-home { |
| max-width: 100% !important;
| | display: inline-flex !important; |
| width: 100% !important; | | visibility: visible !important; |
| margin: 0 !important;
| | opacity: 1 !important; |
| | width: 32px !important; |
| | height: 32px !important; |
| padding: 0 !important; | | padding: 0 !important; |
| display: block !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; |
| } | | } |
| /* 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 */
| | .minerva-header .vanipedia-topbar-home, |
| .page-Vanipedia_Visitors_Statistics .vanipedia-analytics-dashboard iframe { | | .minerva-header #vanipedia-topbar-home-link { |
| display: block !important; | | display: inline-flex !important; |
| width: 100% !important;
| | align-items: center !important; |
| min-width: 100% !important;
| | justify-content: center !important; |
| height: 950px !important;
| | visibility: visible !important; |
| border: 0 !important;
| | opacity: 1 !important; |
| margin: 0 !important; | | flex: 0 0 32px !important; |
| | width: 32px !important; |
| | height: 32px !important; |
| | margin: 0 6px !important; |
| padding: 0 !important; | | padding: 0 !important; |
| background: transparent !important;
| | z-index: 1000 !important; |
| overflow: hidden !important;
| | border-radius: 50% !important; |
| } | | } |
| /* ==========================================================
| | .minerva-header .vanipedia-topbar-home .vanipedia-home-text { |
| 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; | | 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;
| |
| } | | } |
| /* ----------------------------------------------------------
| | .minerva-header .vanipedia-topbar-home .vanipedia-home-icon svg { |
| 2. REMOVE VECTOR WIDTH / GRID / MARGINS
| | width: 20px !important; |
| ---------------------------------------------------------- */
| | height: 20px !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 {
| |
| 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,
| | #vani-stage-header-slot .vanipedia-topbar-home .vanipedia-home-text { |
| body.page-Main_Page .mw-page-container-inner,
| | display: none !important; |
| body.page-Main_Page .mw-content-container {
| |
| display: block !important; | |
| min-height: 0 !important;
| |
| } | | } |
| body.page-Main_Page main#content {
| | #vani-stage-header-slot .vanipedia-topbar-home { |
| position: static !important;
| | display: inline-flex !important; |
| }
| | visibility: visible !important; |
| body.page-Main_Page {
| | opacity: 1 !important; |
| margin: 0 !important;
| |
| padding: 0 !important; | | padding: 0 !important; |
| overflow-x: hidden;
| | margin: 0 8px !important; |
| background: #f5f1e8 !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 { |
| 3. RESET MEDIAWIKI STYLING INSIDE HOMEPAGE
| | width: 20px !important; |
| ---------------------------------------------------------- */
| | height: 20px !important; |
| 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-stage-header-slot .vector-header-start #p-search { |
| margin: 0 !important;
| | order: 5 !important; |
| padding: 0 !important;
| |
| } | | } |
| body.page-Main_Page #vani-home a {
| | .vh-bottom-link.vh-bottom-entry, |
| border: 0 !important;
| | a.vh-bottom-link { |
| background: transparent !important;
| |
| box-shadow: none !important;
| |
| color: inherit;
| |
| text-decoration: none !important; | | text-decoration: none !important; |
| | text-decoration-line: none !important; |
| | border-bottom: none !important; |
| } | | } |
| body.page-Main_Page #vani-home a.external {
| | .vh-bottom-link.vh-bottom-entry:hover, |
| padding-right: 0 !important;
| | a.vh-bottom-link:hover { |
| background-image: none !important;
| | text-decoration: none !important; |
| | text-decoration-line: none !important; |
| } | | } |
| body.page-Main_Page #vani-home img {
| | #vanipedia-topbar-title, |
| margin: 0 !important;
| | span#vanipedia-topbar-title, |
| padding: 0 !important;
| | a#vanipedia-topbar-title { |
| border: 0 !important;
| | pointer-events: none !important; |
| background: transparent !important;
| | cursor: default !important; |
| box-shadow: none !important;
| | user-select: text !important; |
| | text-decoration: none !important; |
| } | | } |
| /* ==========================================================
| | #vanipedia-topbar-title:hover, |
| HOMEPAGE CANVAS
| | span#vanipedia-topbar-title:hover, |
| ========================================================== */
| | a#vanipedia-topbar-title:hover { |
| body.page-Main_Page #vani-home {
| | color: #f5d77f !important; |
| --cream: #f6f2e9; | | text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 215, 127, 0.3) !important; |
| --cream-2: #eee8dc;
| | cursor: default !important; |
| --green: #123f38; | | transform: translate(-50%, -50%) !important; |
| --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;
| |
| } | | } |
| /* ==========================================================
| | .vh-bottom-bar-inner { |
| TOP BAR
| | display: flex !important; |
| ========================================================== */
| | align-items: center !important; |
| .vh-top { | | justify-content: space-between !important; |
| height: 66px;
| | width: 100% !important; |
| display: flex; | | max-width: 100% !important; |
| align-items: center; | | height: 100% !important; |
| justify-content: space-between; | | padding: 0 24px !important; |
| position: relative;
| | position: relative !important; |
| z-index: 20;
| | box-sizing: border-box !important; |
| margin-bottom: 20px;
| |
| } | | } |
| /* ==========================================================
| | .vh-bottom-bar-left-space { |
| BRAND
| | flex: 1 1 0 !important; |
| ========================================================== */
| | min-width: 0 !important; |
| .vh-brand { | |
| display: flex;
| |
| align-items: center;
| |
| } | | } |
| /* ROUND LOGO */
| | .vh-bottom-nav-links { |
| .vh-round-logo { | | flex: 0 0 auto !important; |
| flex: 0 0 auto; | | display: flex !important; |
| | align-items: center !important; |
| | justify-content: center !important; |
| | gap: 12px !important; |
| | white-space: nowrap !important; |
| } | | } |
| .vh-round-logo img { | | .vh-bottom-bar-right-space { |
| width: 60px; | | flex: 1 1 0 !important; |
| height: 60px;
| | min-width: 0 !important; |
| object-fit: contain;
| | display: flex !important; |
| | align-items: center !important; |
| | justify-content: center !important; |
| } | | } |
| /* VANIPEDIA WORDMARK + SMALL NETWORK LINKS */
| | .vh-bottom-social-links { |
| .vh-wordmark-group { | | position: static !important; |
| position: relative; | | transform: none !important; |
| flex: 0 0 auto; | | display: inline-flex !important; |
| line-height: 0;
| | align-items: center !important; |
| | gap: 24px !important; |
| } | | } |
| .vh-brand-network { | | .vh-bottom-social-item { |
| position: absolute;
| | display: inline-flex !important; |
| top: 100%;
| | align-items: center !important; |
| left: 0;
| | justify-content: center !important; |
| right: 0;
| | height: 24px !important; |
| transform: translateX(10px);
| | line-height: 0 !important; |
| display: flex; | | transition: transform 0.2s ease, opacity 0.2s ease !important; |
| 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; | | text-decoration: none !important; |
| transition: color .2s ease;
| |
| } | | } |
| .vh-brand-network a:hover { | | .vh-bottom-social-item:hover { |
| color: var(--gold) !important;
| | transform: scale(1.15) !important; |
| | opacity: 0.9 !important; |
| } | | } |
| .vh-brand-network span { | | .vh-bottom-social-item img { |
| margin: 0 3px;
| | display: block !important; |
| color: var(--gold);
| | height: 20px !important; |
| | width: auto !important; |
| | max-height: 20px !important; |
| | object-fit: contain !important; |
| | border: none !important; |
| } | | } |
| .vh-round-logo { | | body.page-Main_Page .vector-header-container, |
| flex: 0 0 auto;
| | .vector-header-container, |
| }
| | .vector-header-container.vector-sticky-header-container { |
| .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; | | background: transparent !important; |
| border: 0 !important; | | background-color: transparent !important; |
| | background-image: none !important; |
| | border: none !important; |
| | border-bottom: none !important; |
| box-shadow: none !important; | | box-shadow: none !important; |
| color: var(--gold);
| | padding: 0 !important; |
| font-size: 11px;
| | margin: 0 !important; |
| font-weight: 600;
| | width: 100% !important; |
| line-height: 1.35;
| | max-width: 100% !important; |
| letter-spacing: .12em;
| | height: auto !important; |
| text-align: left;
| | min-height: 0 !important; |
| } | | } |
| /* ----------------------------------------------------------
| | header.mw-header, |
| Rotating content
| | header.vector-header, |
| ---------------------------------------------------------- */ | | body.page-Main_Page #mw-head, |
| #vh-random-letter {
| | body.page-Main_Page .vector-header-container header.mw-header { |
| opacity: 1;
| | width: 100% !important; |
| transition:
| | max-width: 100% !important; |
| opacity .45s ease,
| | height: auto !important; |
| transform .45s ease;
| | min-height: 86px !important; |
| | max-height: 96px !important; |
| | padding: 10px 24px !important; |
| | background: #526B50 !important; |
| | background-color: #526B50 !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; |
| } | | } |
| #vh-random-letter.is-changing {
| | .vanipedia-topbar-center-block { |
| opacity: 0;
| | position: absolute !important; |
| transform: translateY(5px); | | 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 * { |
| Whole item clickable
| | position: static !important; |
| ---------------------------------------------------------- */
| | transform: none !important; |
| .vh-random-letter-link {
| |
| display: block;
| |
| color: inherit;
| |
| text-decoration: none !important;
| |
| } | | } |
| /* ----------------------------------------------------------
| | .vanipedia-topbar-main-title, |
| Recipient
| | #vanipedia-topbar-title { |
| ---------------------------------------------------------- */ | | position: static !important; |
| .vh-random-letter-person {
| | transform: none !important; |
| margin-bottom: 5px;
| | display: block !important; |
| color: var(--green);
| | font-family: 'Cinzel', Georgia, serif !important; |
| font-family: "Noto Serif", Georgia, serif; | | font-size: 17.5px !important; |
| font-size: 17px; | | font-weight: 700 !important; |
| font-weight: 600; | | letter-spacing: 2px !important; |
| line-height: 1.2;
| | color: #f5d77f !important; |
| }
| | text-decoration: none !important; |
| /* ----------------------------------------------------------
| | text-decoration-line: none !important; |
| Date
| | 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; |
| .vh-random-letter-date {
| | margin: 0 0 4px 0 !important; |
| margin-bottom: 14px;
| | padding: 0 !important; |
| color: var(--gold);
| | pointer-events: none !important; |
| font-family: Arial, Helvetica, sans-serif;
| | user-select: text !important; |
| font-size: 10px;
| |
| font-weight: 400;
| |
| line-height: 1.3;
| |
| letter-spacing: .04em;
| |
| } | | } |
| /* ----------------------------------------------------------
| | .vanipedia-topbar-vaniseva-title { |
| Selected passage
| | position: static !important; |
| ---------------------------------------------------------- */
| | transform: none !important; |
| .vh-random-letter-text { | | display: block !important; |
| color: var(--text);
| | margin: 0 0 4px 0 !important; |
| font-family: "Noto Serif", Georgia, serif;
| | line-height: 1.2 !important; |
| font-size: 12px;
| |
| font-weight: 400;
| |
| line-height: 1.45; | |
| } | | } |
| /* ----------------------------------------------------------
| | .vanipedia-topbar-vaniseva-title a { |
| Read letter
| | color: #fff2c4 !important; |
| ---------------------------------------------------------- */ | | font-family: 'Noto Serif', Georgia, serif !important; |
| .vh-random-letter-more {
| | font-size: 12.5px !important; |
| margin-top: 14px;
| | font-style: normal !important; |
| padding-top: 9px;
| | font-weight: 500 !important; |
| border-top: | | letter-spacing: 0.35px !important; |
| 1px solid rgba(177,135,61,.30); | | text-decoration: none !important; |
| color: var(--gold);
| | text-decoration-line: none !important; |
| font-family: Arial, Helvetica, sans-serif;
| | border: 1px solid rgba(223, 173, 62, 0.35) !important; |
| font-size: 9px;
| | border-bottom: 1px solid rgba(223, 173, 62, 0.35) !important; |
| font-weight: 600;
| | background: rgba(245, 215, 127, 0.08) !important; |
| line-height: 1.2;
| | outline: none !important; |
| letter-spacing: .08em;
| | padding: 2px 14px !important; |
| text-transform: uppercase;
| | border-radius: 12px !important; |
| | cursor: pointer !important; |
| | transition: all 0.2s ease !important; |
| | display: inline-block !important; |
| } | | } |
| /* ----------------------------------------------------------
| | .vanipedia-topbar-vaniseva-title a:hover, |
| Hover
| | .vanipedia-topbar-vaniseva-title a:focus, |
| ---------------------------------------------------------- */
| | .vanipedia-topbar-vaniseva-title a:active { |
| .vh-random-letter-link:hover | | color: #ffffff !important; |
| .vh-random-letter-person, | | text-decoration: none !important; |
| .vh-random-letter-link:hover | | text-decoration-line: none !important; |
| .vh-random-letter-more {
| | border-color: rgba(223, 173, 62, 0.7) !important; |
| color: var(--gold); | | background-color: rgba(245, 215, 127, 0.22) !important; |
| }
| | box-shadow: 0 0 10px rgba(245, 215, 127, 0.3) !important; |
| /* ----------------------------------------------------------
| |
| 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, | | .vanipedia-topbar-sister-links { |
| .vh-top-links,
| | position: static !important; |
| .vh-small-heading,
| | transform: none !important; |
| .vh-gateway-title,
| | display: flex !important; |
| .vh-section-title,
| | align-items: center !important; |
| .vh-feature-copy small,
| | justify-content: center !important; |
| .vh-network-grid small {
| | gap: 14px !important; |
| font-family: Arial, Helvetica, sans-serif;
| | margin: 0 !important; |
| | line-height: 1.2 !important; |
| } | | } |
| .vh-gold-rule { | | .vanipedia-topbar-sister-link { |
| width: 35px;
| | color: #f5d77f !important; |
| height: 2px;
| | font-family: 'Noto Serif', Georgia, serif !important; |
| margin: 27px 0 18px;
| | font-size: 12px !important; |
| background: var(--gold);
| | 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, |
| ROTATING ŚRĪLA PRABHUPĀDA SUBTITLE
| | .vanipedia-topbar-sister-link:focus, |
| ========================================================== */
| | .vanipedia-topbar-sister-link:active { |
| .vh-description { | | color: #ffffff !important; |
| width: 700px;
| | text-decoration: none !important; |
| max-width: 700px;
| | text-decoration-line: none !important; |
| min-height: 64px;
| | border-bottom: none !important; |
| color: var(--text);
| | background-color: rgba(245, 215, 127, 0.18) !important; |
| font-size: 26px;
| |
| line-height: 1.48;
| |
| opacity: 1;
| |
| transition: opacity .45s ease;
| |
| left: 50px;
| |
| bottom: 0px; | |
| background: transparent; | |
| } | | } |
| .vh-description.is-changing { | | .vanipedia-topbar-sister-sep { |
| opacity: 0 !important;
| | color: rgba(245, 215, 127, 0.4) !important; |
| | font-size: 10px !important; |
| | line-height: 1 !important; |
| | user-select: none !important; |
| } | | } |
| /* ==========================================================
| | body.skin-minerva .minerva-header { |
| HERO PHOTO AREA
| | flex-wrap: nowrap !important; |
| ========================================================== */
| | height: 52px !important; |
| .vh-photo-stage { | | min-height: 52px !important; |
| position: relative;
| | max-height: 52px !important; |
| z-index: 2;
| | padding: 0 10px !important; |
| grid-column: 1;
| | display: flex !important; |
| grid-row: 1;
| | flex-direction: row !important; |
| width: 790px;
| | align-items: center !important; |
| justify-self: end;
| | justify-content: space-between !important; |
| margin: 0 35px 0 0;
| | box-sizing: border-box !important; |
| overflow: hidden;
| | background-color: #526B50 !important; |
| pointer-events: none;
| | border-bottom: 2px solid #b1873d !important; |
| height: calc(105% + 90px);
| |
| top: -85px;
| |
| } | | } |
| .vh-photo { | | .minerva-header .navigation-drawer.toggle-list, |
| position: absolute;
| | .minerva-header #mw-mf-main-menu-button, |
| inset: 0;
| | .minerva-header .toggle-list__toggle { |
| background-position: center center;
| | flex: 0 0 32px !important; |
| background-repeat: no-repeat;
| | width: 32px !important; |
| background-size: cover;
| | height: 32px !important; |
| opacity: 0;
| | display: flex !important; |
| filter:
| | align-items: center !important; |
| grayscale(.10)
| | justify-content: center !important; |
| sepia(.06)
| | background: transparent !important; |
| saturate(.82)
| | border: none !important; |
| contrast(.96);
| | cursor: pointer !important; |
| transition: opacity 1.4s ease-in-out;
| | margin: 0 !important; |
| border-radius: 50;
| | padding: 0 !important; |
| -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;
| |
| } | | } |
| /* ==========================================================
| | .minerva-header .minerva-icon--menu, |
| DISCOVER
| | .minerva-header #mw-mf-main-menu-button .minerva-icon--menu { |
| ========================================================== */
| | background-color: #f5d77f !important; |
| /* ==========================================================
| | display: inline-block !important; |
| THEMATIC ARTICLE SPOTLIGHT
| | width: 24px !important; |
| ========================================================== */
| | height: 24px !important; |
| .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 */
| | body.skin-minerva .minerva-header .branding-box, |
| .vh-discover-heading { | | .minerva-header .branding-box { |
| font-size: 18px;
| | display: flex !important; |
| line-height: 1.35;
| | visibility: visible !important; |
| letter-spacing: .12em;
| | opacity: 1 !important; |
| color: var(--gold);
| | align-items: center !important; |
| }
| | flex: 1 1 auto !important; |
| /* Random article container */
| | margin: 0 0 0 14px !important; |
| #vh-random-article {
| | padding: 0 !important; |
| margin-top: 28px; | | min-width: 0 !important; |
| transition:
| | overflow: visible !important; |
| opacity .7s ease,
| |
| transform .7s ease;
| |
| }
| |
| #vh-random-article.is-changing {
| |
| opacity: 0;
| |
| transform: translateY(5px);
| |
| } | | } |
| /* Whole article preview is clickable */
| | body.skin-minerva .minerva-header .branding-box a, |
| .vh-random-article-link { | | .minerva-header .branding-box a { |
| display: block; | | display: inline-flex !important; |
| color: inherit;
| | align-items: center !important; |
| | visibility: visible !important; |
| | opacity: 1 !important; |
| text-decoration: none !important; | | text-decoration: none !important; |
| | color: #f5d77f !important; |
| } | | } |
| /* Article title */
| | body.skin-minerva .minerva-header .branding-box a::before, |
| .vh-random-article-title { | | .minerva-header .branding-box a::before { |
| color: var(--green); | | content: "Vanipedia" !important; |
| font-family: "Noto Serif", Georgia, serif; | | display: inline-block !important; |
| font-size: 18px; | | visibility: visible !important; |
| font-weight: 400; | | opacity: 1 !important; |
| line-height: 1.18; | | color: #f5d77f !important; |
| margin-bottom: 13px;
| | 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; |
| } | | } |
| /* First lines of article */
| | body.skin-minerva .minerva-header .branding-box a>span, |
| .vh-random-article-extract { | | .minerva-header .branding-box a>span, |
| color: var(--text);
| | body.skin-minerva .minerva-header .branding-box a>img, |
| font-family: "Noto Serif", Georgia, serif;
| | .minerva-header .branding-box a>img { |
| font-size: 14px;
| | display: none !important; |
| font-weight: 400;
| |
| line-height: 1.45;
| |
| } | | } |
| /* Read article link */
| | .minerva-header a.vanipedia-topbar-home { |
| .vh-random-article-more { | | flex: 0 0 28px !important; |
| margin-top: 15px;
| | width: 28px !important; |
| padding-top: 10px;
| | height: 28px !important; |
| border-top: 1px solid rgba(177,135,61,.35);
| | display: inline-flex !important; |
| color: var(--gold);
| | align-items: center !important; |
| font-size: 10px;
| | justify-content: center !important; |
| line-height: 1.2;
| | margin: 0 4px !important; |
| letter-spacing: .08em;
| | padding: 0 !important; |
| text-transform: uppercase;
| | border-radius: 50% !important; |
| | background: transparent !important; |
| | color: #f5d77f !important; |
| } | | } |
| /* Hover */
| | .minerva-header .minerva-search-form { |
| .vh-random-article-link:hover .vh-random-article-title,
| | flex: 0 0 32px !important; |
| .vh-random-article-link:hover .vh-random-article-more { | | width: 32px !important; |
| color: var(--gold);
| | height: 32px !important; |
| }
| | margin: 0 4px !important; |
| /* ==========================================================
| | display: flex !important; |
| GATEWAYS
| | align-items: center !important; |
| ========================================================== */
| | justify-content: center !important; |
| .vh-gateways {
| | position: static !important; |
| position: absolute;
| |
| left: 170px;
| |
| bottom: 35px;
| |
| z-index: 20;
| |
| display: flex; | |
| align-items: stretch; | |
| width: 1000px;
| |
| height: 125px;
| |
| } | | } |
| .vh-gateway { | | .minerva-header #searchIcon { |
| position: relative;
| | width: 32px !important; |
| flex: 1 1 150px; | | height: 32px !important; |
| min-width: 140px;
| | display: flex !important; |
| padding: 0 8px; | | align-items: center !important; |
| text-align: center;
| | justify-content: center !important; |
| | background: transparent !important; |
| | border: none !important; |
| | cursor: pointer !important; |
| | padding: 0 !important; |
| | margin: 0 !important; |
| } | | } |
| /* Taller separators between gateways */
| | .minerva-header .minerva-icon--search, |
| .vh-gateway:not(:last-child)::after { | | .minerva-header #searchIcon .minerva-icon--search { |
| content: "";
| | background-color: #f5d77f !important; |
| position: absolute;
| | display: inline-block !important; |
| right: 0;
| | width: 22px !important; |
| top: 15px;
| | height: 22px !important; |
| bottom: 15px;
| |
| width: 1px; | |
| background: rgba(18,63,56,.18);
| |
| pointer-events: none;
| |
| } | | } |
| .vh-gateway:last-child { | | .minerva-header .minerva-user-navigation { |
| border-right: 0;
| | flex: 0 0 32px !important; |
| }
| | width: 32px !important; |
| .vh-icon {
| | height: 32px !important; |
| 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; | | margin: 0 !important; |
| | display: flex !important; |
| | align-items: center !important; |
| | justify-content: center !important; |
| | position: static !important; |
| } | | } |
| /* ==========================================================
| | .minerva-header #ca-mytalks { |
| CONTINUOUS LIFE TIMELINE
| | width: 32px !important; |
| ========================================================== */
| | height: 32px !important; |
| .vh-lifeline-window { | | display: flex !important; |
| position: relative;
| | align-items: center !important; |
| z-index: 10;
| | justify-content: center !important; |
| height: 116px; | | background: transparent !important; |
| margin-top: 30px;
| | border: none !important; |
| width: 100vw;
| | cursor: pointer !important; |
| max-width: 100vw;
| | padding: 0 !important; |
| margin-left: calc(50% - 50vw);
| | margin: 0 !important; |
| margin-right: calc(50% - 50vw);
| |
| overflow: hidden;
| |
| cursor: grab; | |
| user-select: none;
| |
| -webkit-user-select: none;
| |
| } | | } |
| .vh-lifeline-window:active { | | .minerva-header .minerva-icon--bellOutline, |
| cursor: grabbing;
| | .minerva-header #ca-mytalks .minerva-icon--bellOutline { |
| | background-color: #f5d77f !important; |
| | display: inline-block !important; |
| | width: 22px !important; |
| | height: 22px !important; |
| } | | } |
| .vh-lifeline { | | body.skin-minerva .vanipedia-topbar-center-block, |
| position: relative;
| | body.skin-minerva #vanipedia-topbar-center-block, |
| width: 100%;
| | body.skin-minerva #vanipedia-topbar-center-block-mobile, |
| height: 100%; | | body.skin-minerva .vanipedia-topbar-main-title, |
| overflow: hidden; | | body.skin-minerva .vanipedia-topbar-vaniseva-title, |
| touch-action: pan-y;
| | 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; |
| } | | } |
| .vh-timeline-track { | | body.skin-minerva .vh-bottom-social-links, |
| position: absolute;
| | body.skin-minerva .vh-bottom-bar-right-space { |
| top: 0;
| | display: none !important; |
| left: 0;
| | width: 0 !important; |
| display: flex;
| |
| align-items: flex-start;
| |
| width: max-content;
| |
| height: 100%;
| |
| will-change: transform;
| |
| } | | } |
| /* horizontal line */
| | body.skin-minerva .vh-bottom-bar-left-space { |
| .vh-timeline-track::before { | | display: none !important; |
| content: "";
| |
| position: absolute;
| |
| left: 0;
| |
| right: 0;
| |
| top: 42px;
| |
| height: 1px;
| |
| background: rgba(177,135,61,.55);
| |
| } | | } |
| /* one timeline event */
| | body.skin-minerva .vh-bottom-bar-inner { |
| .vh-timeline-item { | | justify-content: center !important; |
| position: relative;
| | padding: 0 10px !important; |
| flex: 0 0 220px;
| |
| box-sizing: border-box;
| |
| padding: 10px 20px 0; | |
| color: var(--green);
| |
| text-decoration: none !important;
| |
| } | | } |
| /* date */
| | body.skin-minerva .vh-bottom-nav-links { |
| .vh-timeline-date { | | width: 100% !important; |
| height: 21px;
| | justify-content: center !important; |
| color: var(--gold);
| | gap: 8px !important; |
| font-family: Arial, Helvetica, sans-serif;
| | font-size: 11px !important; |
| font-size: 10px; | |
| font-weight: 600;
| |
| line-height: 1.2;
| |
| letter-spacing: .06em;
| |
| text-transform: uppercase;
| |
| } | | } |
| /* dot */
| | @media screen and (max-width:1200px) and (min-width:1000px) { |
| .vh-timeline-dot {
| | .vanipedia-topbar-main-title { |
| position: absolute;
| | font-size: 16px !important; |
| top: 38px;
| | letter-spacing: 1.5px !important; |
| 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 */
| | .vanipedia-topbar-vaniseva-title a { |
| .vh-timeline-text { | | font-size: 11.5px !important; |
| margin-top: 24px;
| | padding: 2px 10px !important; |
| max-width: 175px;
| |
| color: var(--text);
| |
| font-family: "Noto Serif", Georgia, serif;
| |
| font-size: 11px; | |
| font-weight: 400;
| |
| line-height: 1.35;
| |
| } | | } |
| /* hover */
| | .vanipedia-topbar-sister-link { |
| .vh-timeline-item:hover .vh-timeline-date, | | font-size: 11.5px !important; |
| .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 { | | @media screen and (max-width:999px) { |
| left: 0;
| | header.mw-header, |
| background:
| | header.vector-header, |
| linear-gradient(
| | .vector-header-container .mw-header { |
| to right,
| | display: flex !important; |
| #f6f2e9, | | flex-direction: row !important; |
| rgba(246,242,233,0)
| | 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: #526B50 !important; |
| | border-bottom: 2px solid #b1873d !important; |
| } | | } |
| .vh-lifeline-window::after { | | .vector-header-start { |
| right: 0;
| | display: flex !important; |
| background:
| | flex-direction: row !important; |
| linear-gradient(
| | align-items: center !important; |
| to left,
| | flex-wrap: nowrap !important; |
| #f6f2e9,
| | flex: 1 1 auto !important; |
| rgba(246,242,233,0)
| | min-width: 0 !important; |
| );
| | gap: 6px !important; |
| } | | } |
| /* ==========================================================
| | .vector-header-start #vector-main-menu-dropdown, |
| TEMPORARY LOGO FALLBACK
| | #vector-main-menu-dropdown { |
| Only relevant if you use .vh-logo-temp
| | display: flex !important; |
| ========================================================== */
| | visibility: visible !important; |
| .vh-logo-temp {
| | opacity: 1 !important; |
| width: 58px;
| | cursor: pointer !important; |
| height: 58px;
| | flex: 0 0 auto !important; |
| display: flex; | | margin: 0 !important; |
| align-items: center;
| | padding: 0 4px !important; |
| justify-content: center;
| |
| border: 3px solid var(--gold);
| |
| border-radius: 50%;
| |
| background: var(--green);
| |
| color: #fff;
| |
| font-size: 37px;
| |
| line-height: 1;
| |
| } | | } |
| /* ==========================================================
| | .vector-header-start #vector-main-menu-dropdown .vector-dropdown-label, |
| MOTION ACCESSIBILITY
| | .vector-header-start #vector-main-menu-dropdown .vector-main-menu-dropdown-toggle { |
| ========================================================== */
| | display: flex !important; |
| @media (prefers-reduced-motion: reduce) {
| | align-items: center !important; |
| .vh-lifeline {
| | justify-content: center !important; |
| animation: none !important;
| | background: transparent !important; |
| | border: none !important; |
| | padding: 4px !important; |
| } | | } |
| .vh-photo, | | .vector-header-start #vector-main-menu-dropdown .vector-icon { |
| #vh-discover-content, | | display: inline-block !important; |
| .vh-feature-grid {
| | visibility: visible !important; |
| transition: none !important;
| | opacity: 1 !important; |
| | background-color: #f5d77f !important; |
| | color: #f5d77f !important; |
| | fill: #f5d77f !important; |
| | width: 22px !important; |
| | height: 22px !important; |
| } | | } |
| | .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, |
| 1366–1500px DESKTOPS
| | .vector-header-container .vector-search-box-input, |
| ========================================================== */
| | .vector-header-container .cdx-text-input, |
| @media (max-width: 1500px) {
| | .vector-header-start .cdx-text-input { |
| body.page-Main_Page #vani-home {
| | width: 100% !important; |
| padding-left: 24px !important;
| | max-width: 100% !important; |
| padding-right: 24px !important;
| | height: 32px !important; |
| | margin: 0 !important; |
| | position: relative !important; |
| | display: flex !important; |
| | align-items: center !important; |
| } | | } |
| .vh-main-title { | | .vector-header-container .cdx-text-input__icon, |
| font-size: 67px;
| | .vector-header-container .cdx-text-input__start-icon, |
| }
| | .vector-header-start .cdx-text-input__icon, |
| .vh-gateways {
| | .vector-header-start .cdx-text-input__start-icon, |
| width: 585px;
| | #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; |
| } | | } |
| .vh-gateway { | | .vector-header-container .cdx-text-input__input, |
| padding-left: 8px; | | .vector-header-container input[type="search"], |
| padding-right: 8px; | | #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; |
| } | | } |
| .vh-bottom { | | .vanipedia-topbar-home .vanipedia-home-text { |
| grid-template-columns:
| | display: none !important; |
| minmax(560px, 1.12fr)
| |
| minmax(570px, 1fr);
| |
| gap: 20px;
| |
| } | | } |
| .vh-network-grid { | | .vector-header-start #vanipedia-topbar-home-link, |
| grid-template-columns:
| | #vanipedia-topbar-home-link, |
| repeat(4, 88px)
| | a.vanipedia-topbar-home { |
| minmax(150px, 1fr);
| | margin: 0 2px !important; |
| }
| | padding: 3px 5px !important; |
| .vh-wordmark {
| | flex-shrink: 0 !important; |
| font-size: 30px;
| | display: inline-flex !important; |
| | align-items: center !important; |
| } | | } |
| .vh-subtitle { | | .vector-header-end { |
| font-size: 9px;
| | 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 { |
| 1200–1365px DESKTOPS
| | display: none !important; |
| ========================================================== */
| |
| @media (max-width: 1365px) {
| |
| .vh-main-title {
| |
| font-size: 61px;
| |
| } | | } |
| .vh-description { | | .vector-header-end #p-vector-user-menu-overflow, |
| font-size: 12px;
| | .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; |
| } | | } |
| .vh-gateways { | | .vector-header-end #vector-user-links-dropdown .vector-dropdown-label, |
| width: 525px;
| | .vector-header-end .vector-user-menu-overflow .vector-dropdown-label { |
| }
| | display: flex !important; |
| .vh-gateway-text { | | align-items: center !important; |
| font-size: 9px;
| | justify-content: center !important; |
| }
| | padding: 4px !important; |
| .vh-gateway-title {
| | background: transparent !important; |
| font-size: 9px;
| | border: none !important; |
| }
| | cursor: pointer !important; |
| .vh-bottom {
| |
| grid-template-columns:
| |
| 1.05fr
| |
| .95fr;
| |
| } | | } |
| .vh-network-grid { | | .vector-header-end #vector-user-links-dropdown .vector-icon, |
| grid-template-columns:
| | .vector-header-end .vector-user-menu-overflow .vector-icon { |
| 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; | | display: inline-block !important; |
| color: var(--green) !important;
| | visibility: visible !important; |
| text-decoration: none !important;
| | opacity: 1 !important; |
| font-weight: 500;
| | width: 20px !important; |
| opacity: .82;
| | height: 20px !important; |
| transition:
| | background-color: #f5d77f !important; |
| color .22s ease, | | color: #f5d77f !important; |
| opacity .22s ease,
| | fill: #f5d77f !important; |
| transform .22s ease;
| |
| } | | } |
| /* Very fine underline */
| | .vector-header-end .vector-dropdown-label-text { |
| .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; | | display: none !important; |
| } | | } |
| /* ==========================================================
| | .vanipedia-topbar-center-block, |
| MAIN PAGE — REMOVE STRAY TOP/BOTTOM SKIN STRIPS
| | #vanipedia-topbar-center-block, |
| ========================================================== */
| | #vanipedia-topbar-center-block-mobile, |
| /* Force every outer Vector wrapper behind homepage to cream */
| | .vanipedia-topbar-main-title, |
| body.page-Main_Page,
| | #vanipedia-topbar-title, |
| body.page-Main_Page .mw-page-container,
| | #vanipedia-topbar-title-mobile, |
| body.page-Main_Page .mw-page-container-inner,
| | #vanipedia-topbar-title-link, |
| body.page-Main_Page .mw-content-container,
| | #vanipedia-topbar-center-title, |
| body.page-Main_Page #content,
| | .vanipedia-topbar-vaniseva-title, |
| body.page-Main_Page .mw-body,
| | .vanipedia-topbar-sister-links, |
| body.page-Main_Page .mw-body-content,
| | .vanipedia-topbar-sister-link, |
| body.page-Main_Page #bodyContent,
| | .vanipedia-topbar-sister-sep { |
| body.page-Main_Page #mw-content-text,
| | display: none !important; |
| body.page-Main_Page .mw-parser-output {
| | height: 0 !important; |
| background: #f6f2e9 !important;
| | min-height: 0 !important; |
| }
| | max-height: 0 !important; |
| /* MediaWiki sometimes creates empty paragraphs around the page markup */
| | visibility: hidden !important; |
| body.page-Main_Page .mw-parser-output > p:empty {
| | overflow: hidden !important; |
| display: none !important;
| | pointer-events: none !important; |
| margin: 0 !important; | | margin: 0 !important; |
| padding: 0 !important; | | padding: 0 !important; |
| height: 0 !important;
| | border: none !important; |
| } | | } |
| /* Remove any residual top/bottom spacing around parser output */
| | .vh-bottom-social-links, |
| body.page-Main_Page .mw-parser-output > p:first-child {
| | .vh-bottom-bar-right-space { |
| display: none !important; | | display: none !important; |
| | width: 0 !important; |
| | flex: 0 0 0 !important; |
| | visibility: hidden !important; |
| } | | } |
| /* No outer spacing around homepage */
| | .vh-bottom-bar-left-space { |
| 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; | | display: none !important; |
| margin: 0 !important;
| | width: 0 !important; |
| padding: 0 !important;
| | flex: 0 0 0 !important; |
| height: 0 !important;
| |
| min-height: 0 !important;
| |
| } | | } |
| body.page-Main_Page .mw-jump-link {
| | .vh-bottom-bar-inner { |
| display: none !important;
| | justify-content: center !important; |
| | padding: 0 10px !important; |
| } | | } |
| body.page-Main_Page,
| | .vh-bottom-nav-links { |
| body.page-Main_Page .mw-page-container,
| | width: 100% !important; |
| body.page-Main_Page .mw-page-container-inner {
| | justify-content: center !important; |
| margin-top: 0 !important;
| | overflow-x: auto !important; |
| padding-top: 0 !important;
| | -webkit-overflow-scrolling: touch !important; |
| background: #f6f2e9 !important;
| | gap: 8px !important; |
| | font-size: 11px !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,
| | #vani-stage-header-slot .vanipedia-topbar-title-link, |
| body.page-Main_Page #vani-home .vh-gold-rule,
| | #vani-stage-header-slot .vanipedia-topbar-main-title, |
| body.page-Main_Page #vani-home .vh-description {
| | #vani-stage-header-slot .branding-box a { |
| position: relative !important;
| | display: inline-flex !important; |
| left: 60px !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; |
| } | | } |
| /* ==========================================================
| | |
| FROM HIS LETTERS — LEFT PANEL
| | /* Petal identity only; inherited V173 dimensions, effects and typography stay. */ |
| ========================================================== */
| | header.vector-header, header.mw-header, #vector-sticky-header, #vh-bottom-bar { |
| /* | | background:#526b50 !important; background-color:#526b50 !important; |
| \* 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 { | | #vh-bottom-bar .vh-bottom-petal-links { display:flex; justify-content:center; align-items:center; gap:12px; } |
| display: block; | | #vh-bottom-bar .vh-bottom-petal-links a { color:#f5d77f; font:600 12px 'Noto Serif',Georgia,serif; text-decoration:none; } |
| width: 100%;
| | #vh-bottom-bar .vh-bottom-petal-links a:hover { color:#fff; } |
| height: auto;
| | /* Vanisource content reflows; do not activate the V173 rotated stage. */ |
| margin: 0 0 22px;
| | body.vs-main-view { padding-bottom:46px !important; } |
| padding: 0;
| | body.vs-main-view .mw-body-header, body.vs-main-view #firstHeading, |
| background: transparent !important;
| | body.vs-main-view .vector-column-start, body.vs-main-view .vector-column-end { display:none; } |
| border: 0 !important;
| | /* Retain the complete controls in native portrait flow when there is no stage. */ |
| box-shadow: none !important;
| | @media(max-width:999px) { |
| color: var(--gold);
| | body.vs-main-view #vh-bottom-bar { position:static !important; height:auto !important; min-height:38px; } |
| font-size: 13px;
| | body.vs-main-view #vh-bottom-bar .vh-bottom-bar-inner { flex-wrap:wrap !important; height:auto !important; padding:10px !important; gap:10px; } |
| font-weight: 600;
| | body.vs-main-view #vh-bottom-bar .vh-bottom-bar-left-space, |
| line-height: 1.35;
| | body.vs-main-view #vh-bottom-bar .vh-bottom-bar-right-space { flex:1 1 100% !important; } |
| letter-spacing: .12em;
| | body.vs-main-view #vh-bottom-bar .vh-bottom-nav-links { flex:1 1 100% !important; flex-wrap:wrap; white-space:normal !important; } |
| text-align: center;
| | body.vs-main-view { padding-bottom:0 !important; } |
| } | | } |
| /* ========================================================== | | |
| HERO TITLE — WHO IS REVEAL
| | /* V11: main-page cleanup; shared bar and top-bar search retained. */ |
| ========================================================== */
| | #footer, |
| .vh-hero-title-wrap { | | .mw-footer { display:none !important; } |
| position: relative; | | /* The fixed desktop bottom bar is 38px high; leave a 16px gap above it. */ |
| display: inline-block;
| | #vanipedia-back-to-top { bottom:54px !important; } |
| | |
| | /* V12: one sticky primary header across Vanisource; native controls retained. */ |
| | body > .vector-header-container:not(.vector-sticky-header-container), |
| | body > header.vector-header, |
| | body > header.mw-header { |
| | position:sticky !important; top:0 !important; z-index:99995 !important; |
| | overflow:visible !important; |
| } | | } |
| .vh-hero-title-link { | | html { scroll-padding-top:calc(var(--vs-header-height, 96px) + 12px); } |
| position: relative;
| | #vector-sticky-header { display:none !important; } |
| display: inline-block; | | |
| | /* V13: book catalogue and source details. Shared V173 bars and V12 sticky |
| | header/footer behaviour remain in the preceding, unchanged rules. */ |
| | #vs-home.vs-library-main { max-width:1180px; font-size:16px; } |
| | #vs-home.vs-library-main .vs-sanctuary { display:flex; align-items:center; justify-content:center; gap:24px; max-width:730px; margin:0 auto 32px; padding:0; border:0; text-align:left; } |
| | #vs-home.vs-library-main #vs-portrait-frame { width:106px; height:106px; flex:none; margin:0; border-width:2px; } |
| | #vs-home.vs-library-main .vs-sanctuary-copy { min-width:0; } |
| | #vs-home.vs-library-main .vs-eyebrow { color:var(--vs-green); font-size:15px; } |
| | #vs-home.vs-library-main h1 { text-align:left; font-size:30px; margin:3px 0 10px; } |
| | #vs-home.vs-library-main .vs-source-quote { margin-bottom:7px; font-size:16px; } |
| | #vs-home.vs-library-main .vs-source-meta { font-size:14px; } |
| | #vs-home.vs-library-main .vs-library-heading { padding-top:24px; border-top:1px solid var(--vs-line); } |
| | #vs-home.vs-library-main .vs-library-heading h2 { margin:0 0 7px; } |
| | #vs-home.vs-library-main .vs-book-jump { display:flex; flex-wrap:wrap; gap:10px 24px; margin:14px 0 24px; } |
| | #vs-home.vs-library-main .vs-book-jump a { display:inline-flex; min-height:44px; align-items:center; color:var(--vs-green); font-size:15px; } |
| | #vs-home.vs-library-main .vs-book-shelf { margin-bottom:32px; scroll-margin-top:calc(var(--vs-header-height,96px) + 16px); } |
| | #vs-home.vs-library-main .vs-book-shelf h3 { background:none; font:500 21px/1.3 Georgia,'Noto Serif',serif; color:var(--vs-brass); margin:0 0 22px; padding:0 0 9px; border:0; border-bottom:1px solid var(--vs-line); text-align:left; } |
| | #vs-home.vs-library-main .vs-book-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px 28px; } |
| | #vs-home.vs-library-main .vs-book-card { min-width:0; text-align:center; font-size:15px; line-height:1.45; } |
| | #vs-home.vs-library-main .vs-book-cover { display:flex; align-items:flex-end; justify-content:center; height:270px; margin-bottom:15px; } |
| | #vs-home.vs-library-main .vs-book-cover p { margin:0; } |
| | #vs-home.vs-library-main .vs-book-cover > span, #vs-home.vs-library-main .vs-book-cover > p { min-width:0; max-width:100%; } |
| | #vs-home.vs-library-main .vs-book-cover a { display:block; max-width:100%; } |
| | #vs-home.vs-library-main .vs-book-cover img { display:block; width:auto; height:auto !important; max-width:100%; max-height:260px; object-fit:contain; box-shadow:2px 4px 7px #263a3925; } |
| | #vs-home.vs-library-main .vs-cover-unavailable { display:flex; align-items:center; justify-content:center; width:125px; max-width:100%; height:190px; padding:16px; background:var(--vs-wash); color:var(--vs-ink); border:1px dashed #afb5a8; font-size:14px; } |
| | #vs-home.vs-library-main .vs-book-title { min-height:56px; font-size:18px; font-weight:500; line-height:1.42; overflow-wrap:anywhere; } |
| | #vs-home.vs-library-main .vs-book-title a { text-decoration:none; } |
| | #vs-home.vs-library-main .vs-book-title a:hover { text-decoration:underline; } |
| | #vs-home.vs-library-main .vs-book-meta { margin-top:5px; color:var(--vs-green); font-size:13px; } |
| | #vs-home.vs-library-main .vs-book-action a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; color:var(--vs-green); font-size:14px; } |
| | #vs-home.vs-library-main .vs-publication-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 28px; } |
| | #vs-home.vs-library-main .vs-publication-item { min-width:0; } |
| | #vs-home.vs-library-main .vs-publication-item .vs-book-title { min-height:0; font-size:18px; } |
| | #vs-home.vs-library-main .vs-other-teachings { border-top:1px solid var(--vs-line); padding-top:24px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; } |
| | #vs-home.vs-library-main .vs-other-teachings h2 { font-size:22px; margin-bottom:12px; } |
| | #vs-home.vs-library-main .vs-other-teachings a { display:block; min-height:44px; padding:7px 0; font-size:15px; color:var(--vs-green); } |
| | #vs-home.vs-library-main .vs-support { display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:center; margin-top:25px; padding-top:16px; border-top:1px solid var(--vs-line); } |
| | #vs-home.vs-library-main .vs-support a { display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:var(--vs-green); } |
| | #vs-home.vs-library-main a[title]:hover::after, #vs-editions a[title]:hover::after { content:none; } |
| | |
| | #vs-editions { background:var(--vs-paper); color:var(--vs-ink); padding:24px; max-width:1000px; margin:0 auto; font:400 16px/1.55 Georgia,'Noto Serif',serif; } |
| | #vs-editions * { box-sizing:border-box; } |
| | #vs-editions p { margin:8px 0; } |
| | #vs-editions h1, #vs-editions h2, #vs-editions h3 { background:none; border:0; font-family:inherit; color:var(--vs-brass); font-weight:500; text-align:left; padding:0; } |
| | #vs-editions h1 { font-size:28px; margin:0 0 16px; } |
| | #vs-editions h2 { font-size:25px; margin:0 0 12px; } |
| | #vs-editions h3 { font-size:21px; margin:0; } |
| | #vs-editions a { color:var(--vs-green); background-image:none; text-underline-offset:4px; overflow-wrap:anywhere; } |
| | #vs-editions a:focus-visible { outline:3px solid var(--vs-green); outline-offset:3px; } |
| | #vs-editions .vs-edition-nav { display:flex; gap:12px 24px; flex-wrap:wrap; margin-bottom:24px; } |
| | #vs-editions .vs-edition-nav a { display:inline-flex; align-items:center; min-height:44px; } |
| | #vs-editions .vs-edition-index-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 20px; } |
| | #vs-editions .vs-edition-index-grid a { display:flex; align-items:center; min-height:44px; } |
| | #vs-editions .vs-edition-book { margin:32px 0; padding-top:24px; border-top:1px solid var(--vs-line); scroll-margin-top:calc(var(--vs-header-height,96px) + 16px); } |
| | #vs-editions .vs-edition-intro { display:flex; gap:32px; align-items:center; margin-bottom:24px; } |
| | #vs-editions .vs-edition-cover { width:140px; flex:none; text-align:center; } |
| | #vs-editions .vs-edition-cover img { max-width:100%; max-height:210px; width:auto; height:auto !important; object-fit:contain; } |
| | #vs-editions .vs-cover-caption { font-size:14px; color:var(--vs-green); } |
| | #vs-editions .vs-edition-row { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:22px 0; border-top:1px solid var(--vs-line); } |
| | #vs-editions .vs-edition-row > div { min-width:0; } |
| | #vs-editions .vs-edition-actions { display:flex; flex-wrap:wrap; gap:10px; flex:none; } |
| | #vs-editions .vs-edition-actions a { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid var(--vs-green); border-radius:4px; text-decoration:none; } |
| | #vs-editions .vs-edition-actions a.vs-read-link { background:var(--vs-green); color:var(--vs-gold); } |
| | #vs-editions .vs-related-publication { margin:24px 0; } |
| | #vs-editions .vs-related-publication a { display:inline-flex; align-items:center; min-height:44px; margin-right:20px; } |
| | #vs-editions [hidden] { display:none !important; } |
| | #vs-editions .vs-edition-book:focus { outline:none; } |
| | |
| | @media(max-width:1000px) { |
| | #vs-home.vs-library-main .vs-book-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } |
| | #vs-home.vs-library-main .vs-other-teachings { grid-template-columns:repeat(2,minmax(0,1fr)); } |
| | #vs-editions .vs-edition-index-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } |
| } | | } |
| /* MediaWiki-generated link wrapping everything */
| | @media(max-width:600px) { |
| .vh-hero-title-link > a { | | #vs-home.vs-library-main { padding:20px 18px; } |
| display: block;
| | #vs-home.vs-library-main .vs-sanctuary { flex-direction:column; text-align:center; gap:12px; } |
| position: relative;
| | #vs-home.vs-library-main h1 { text-align:center; font-size:27px; } |
| color: inherit;
| | #vs-home.vs-library-main .vs-book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 18px; } |
| text-decoration: none !important; | | #vs-home.vs-library-main .vs-publication-grid, #vs-home.vs-library-main .vs-other-teachings { grid-template-columns:1fr; } |
| | #vs-editions { padding:20px 16px; } |
| | #vs-editions .vs-edition-index-grid { grid-template-columns:1fr; } |
| | #vs-editions .vs-edition-intro { flex-direction:column; gap:18px; text-align:center; } |
| | #vs-editions .vs-edition-intro h2 { text-align:center; } |
| | #vs-editions .vs-edition-row { display:block; } |
| | #vs-editions .vs-edition-actions { margin-top:14px; } |
| } | | } |
| .vh-who-corner { | | |
| position: absolute;
| | #vs-editions .vs-edition-actions .vs-read-link a { background:var(--vs-green); color:var(--vs-gold); } |
| /* VERTICAL POSITION */ | | |
| top: 3px;
| | /* V15: native modal top layer preserves the existing petal bars underneath. */ |
| /* HORIZONTAL POSITION */ | | html.vs-edition-modal-open { overflow:hidden; } |
| right: -5px;
| | #vs-edition-dialog { box-sizing:border-box; width:680px; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; margin:auto; padding:24px; border:1px solid var(--vs-line); border-radius:12px; background:var(--vs-paper); color:var(--vs-ink); font:400 16px/1.55 Georgia,'Noto Serif',serif; box-shadow:0 12px 40px #263a3930; } |
| /* SIZE */ | | #vs-edition-dialog::backdrop { background:#17262299; } |
| font-size: 40px;
| | #vs-edition-dialog * { box-sizing:border-box; } |
| color: var(--green); | | #vs-edition-dialog .vs-modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:12px; } |
| font-family: "Cormorant Garamond", Georgia, serif; | | #vs-edition-dialog h2 { margin:0; min-width:0; color:var(--vs-brass); font:500 25px/1.3 Georgia,'Noto Serif',serif; } |
| font-weight: 700; | | #vs-edition-dialog h3 { margin:0; color:var(--vs-brass); font:500 21px/1.3 Georgia,'Noto Serif',serif; } |
| line-height: .88; | | #vs-edition-dialog p { margin:8px 0; } |
| letter-spacing: -.025em;
| | #vs-edition-dialog .vs-modal-close { flex:none; min-height:44px; padding:8px 12px; border:1px solid var(--vs-line); border-radius:4px; background:var(--vs-paper); color:var(--vs-green); font:400 15px/1.4 Georgia,serif; cursor:pointer; } |
| white-space: nowrap;
| | #vs-edition-dialog a { color:var(--vs-green); background-image:none; text-underline-offset:4px; overflow-wrap:anywhere; } |
| opacity: 0;
| | #vs-edition-dialog a[title]:hover::after { content:none; } |
| transform: translateX(-18px);
| | #vs-edition-dialog :focus-visible { outline:3px solid var(--vs-green); outline-offset:3px; } |
| transition:
| | #vs-edition-dialog .vs-modal-note { font-size:14px; } |
| opacity .45s ease,
| | #vs-edition-dialog .vs-modal-edition { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--vs-line); padding:18px 0; } |
| transform .55s cubic-bezier(.22,.7,.25,1);
| | #vs-edition-dialog .vs-modal-edition-description { min-width:0; flex:1; } |
| | #vs-edition-dialog .vs-modal-edition-description p { font-size:14px; } |
| | #vs-edition-dialog .vs-modal-actions { display:flex; flex-wrap:wrap; gap:8px; max-width:48%; } |
| | #vs-edition-dialog .vs-modal-actions a { display:inline-flex; align-items:center; min-height:44px; padding:8px 12px; border:1px solid var(--vs-green); border-radius:4px; text-decoration:none; } |
| | #vs-edition-dialog .vs-modal-actions .vs-modal-read { background:var(--vs-green); color:var(--vs-gold); } |
| | #vs-edition-dialog .vs-modal-last-used { display:inline-block; font-size:13px; color:var(--vs-green); } |
| | #vs-edition-dialog .vs-modal-more-sources { border-top:1px solid var(--vs-line); margin-top:10px; padding-top:12px; } |
| | #vs-edition-dialog summary { min-height:44px; padding:8px 0; color:var(--vs-green); cursor:pointer; } |
| | #vs-edition-dialog .vs-modal-related { padding:12px 0; } |
| | #vs-edition-dialog .vs-modal-related a { display:inline-flex; align-items:center; min-height:44px; } |
| | @media(max-width:600px) { |
| | #vs-edition-dialog { position:fixed; top:auto; bottom:0; left:0; right:0; width:100%; max-width:none; max-height:85vh; max-height:85dvh; margin:0; padding:20px 18px; padding-bottom:max(20px, env(safe-area-inset-bottom)); border-radius:16px 16px 0 0; } |
| | #vs-edition-dialog h2 { font-size:23px; } |
| | #vs-edition-dialog .vs-modal-edition { display:block; } |
| | #vs-edition-dialog .vs-modal-actions { max-width:none; margin-top:12px; } |
| } | | } |
| /* Reveal */ | | |
| .vh-hero-title-wrap:hover .vh-who-corner {
| | |
| opacity: 1;
| | |
| transform: translateX(0);
| | /* V18: Vector sets html and body to height:100%, leaving body viewport-height. |
| | Sticky headers are constrained by that containing block and stop at its end. |
| | Let body grow with the document so the shared top bar stays sticky throughout. */ |
| | body { |
| | height:auto !important; |
| | min-height:100vh !important; |
| } | | } |
| /* No standard link effects */ | | |
| .vh-hero-title-link a:hover, | | |
| .vh-hero-title-link a:visited { | | |
| color: inherit;
| | /* V19: keep the shared bottom navigation fixed on narrow screens too. |
| text-decoration: none !important;
| | V10 made it static on the Main Page so it could wrap; keep it one-line and |
| | horizontally scrollable instead, with room below the content. */ |
| | @media (max-width:999px) { |
| | body.vs-main-view { |
| | padding-bottom:46px !important; |
| | } |
| | body.vs-main-view #vh-bottom-bar { |
| | position:fixed !important; |
| | top:auto !important; |
| | bottom:0 !important; |
| | left:0 !important; |
| | right:0 !important; |
| | width:100% !important; |
| | height:38px !important; |
| | min-height:38px !important; |
| | z-index:99990 !important; |
| | } |
| | body.vs-main-view #vh-bottom-bar .vh-bottom-bar-inner { |
| | flex-wrap:nowrap !important; |
| | justify-content:flex-start !important; |
| | overflow-x:auto !important; |
| | overflow-y:hidden !important; |
| | white-space:nowrap !important; |
| | } |
| | body.vs-main-view #vh-bottom-bar .vh-bottom-nav-links { |
| | flex-wrap:nowrap !important; |
| | } |
| } | | } |
| /* ========================================================== | | |
| WHO IS ŚRĪLA PRABHUPĀDA?
| | |
| ========================================================== */
| | /* V20: keep the Main Page link visible in the mobile bottom navigation and |
| .vh-who-link { | | enlarge the Main Page hero portrait by 50% (106px -> 159px). */ |
| position: absolute;
| | @media (max-width:999px) { |
| left: 4px;
| | body.vs-main-view #vh-bottom-bar .vh-bottom-nav-links { |
| bottom: -39px;
| | width:max-content !important; |
| z-index: 30;
| | justify-content:flex-start !important; |
| opacity: 0;
| | overflow:visible !important; |
| transform: translateY(-7px);
| | } |
| pointer-events: none;
| | body.vs-main-view #vh-bottom-bar .vh-bottom-link.vh-bottom-home { |
| transition:
| | display:inline-flex !important; |
| opacity .35s ease,
| | visibility:visible !important; |
| transform .35s ease;
| | opacity:1 !important; |
| | flex:0 0 auto !important; |
| | } |
| } | | } |
| .vh-who-link a { | | #vs-home.vs-library-main #vs-portrait-frame { width:159px; height:159px; } |
| display: inline-flex;
| | |
| align-items: center;
| | |
| gap: 9px;
| | /* V24 shared petal hero, centered copy, and no per-book edition counts. */ |
| padding: 8px 13px 7px;
| | #vs-home.vs-library-main .vs-sanctuary.vs-petal-hero { |
| border: 1px solid rgba(177,135,61,.65);
| | display:grid; grid-template-columns:minmax(180px, 220px) minmax(0, 1fr); |
| border-radius: 2px;
| | align-items:center; justify-content:stretch; gap:34px; |
| background: rgba(246,242,233,.88);
| | width:100%; max-width:850px; margin:0 auto 32px; |
| color: var(--gold);
| | padding:24px 28px; border:1px solid #526b50; |
| font-family: Arial, Helvetica, sans-serif;
| | border-left:5px solid #f5d77f; border-radius:8px; |
| font-size: 10px;
| | background:#526b50; color:#faf7ef; text-align:left; |
| 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 { | | #vs-home.vs-library-main #vs-portrait-frame.vs-hero-image { |
| position: relative; | | box-sizing:border-box; position:relative; width:min(100%, 220px); height:auto; |
| top: -1px;
| | aspect-ratio:445 / 542; justify-self:center; margin:0; overflow:hidden; |
| font-size: 14px;
| | border:2px solid #f5d77f; border-radius:6px; background:#faf7ef; |
| line-height: 1;
| | box-shadow:0 5px 18px #17262255; |
| transition: transform .25s ease;
| |
| } | | } |
| /* Reveal ONLY when interacting with the hero title */
| | #vs-home.vs-library-main #vs-portrait-frame.vs-hero-image img { |
| .vh-hero-title-wrap:hover .vh-who-link { | | display:block; position:static; inset:auto; width:100%; height:auto !important; |
| opacity: 1;
| | max-width:100%; aspect-ratio:445 / 542; object-fit:contain; |
| transform: translateY(0);
| | object-position:center; margin:0; |
| pointer-events: auto;
| |
| } | | } |
| /* Button hover */
| | #vs-home.vs-library-main .vs-hero-copy { min-width:0; text-align:center; } |
| .vh-who-link a:hover { | | #vs-home.vs-library-main .vs-hero-copy h1 { |
| color: var(--green);
| | margin:0 0 9px; color:#f5d77f; |
| border-color: var(--gold);
| | font:600 clamp(32px, 3vw, 42px)/1.15 Georgia,'Noto Serif',serif; text-align:center; |
| background: rgba(246,242,233,.98);
| |
| } | | } |
| .vh-who-link a:hover .vh-who-arrow { | | #vs-home.vs-library-main .vs-hero-role { |
| transform: translateX(3px);
| | margin:0 0 7px; font:600 clamp(20px, 1.7vw, 22px)/1.25 Georgia,'Noto Serif',serif; |
| | white-space:nowrap; |
| } | | } |
| .vh-lifeline-window { | | #vs-home.vs-library-main .vs-hero-role a { |
| cursor: grab;
| | color:#f5d77f; text-decoration-thickness:1px; text-underline-offset:4px; |
| user-select: none;
| |
| -webkit-user-select: none;
| |
| } | | } |
| .vh-lifeline-window.is-dragging { | | #vs-home.vs-library-main .vs-hero-role a:hover { color:#fff; } |
| cursor: grabbing;
| | #vs-home.vs-library-main .vs-hero-organization { |
| | margin:0; color:#fff8e4; font:500 clamp(19px, 1.7vw, 22px)/1.4 Georgia,'Noto Serif',serif; |
| } | | } |
| .vh-timeline-item { | | /* Four book cards per desktop row, with larger covers and high-contrast titles. */ |
| -webkit-user-drag: none; | | #vs-home.vs-library-main .vs-book-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 28px; } |
| user-drag: none;
| | #vs-home.vs-library-main .vs-book-cover { height:270px; margin-bottom:15px; } |
| | #vs-home.vs-library-main .vs-book-cover img { max-height:260px; } |
| | #vs-home.vs-library-main .vs-book-title { min-height:58px; font-size:21px; font-weight:700; line-height:1.34; } |
| | #vs-home.vs-library-main .vs-book-title a { color:#526b50; } |
| | #vs-home.vs-library-main .vs-book-title a:hover { color:#805b16; text-decoration:underline; } |
| | #vs-home.vs-library-main .vs-book-meta { margin-top:6px; color:#526b50; font-size:15px; font-weight:600; } |
| | @media (max-width:700px) { |
| | #vs-home.vs-library-main .vs-sanctuary.vs-petal-hero { |
| | grid-template-columns:minmax(0,1fr); gap:15px; max-width:420px; |
| | margin-bottom:26px; padding:17px 17px 19px; border-left-width:4px; |
| | } |
| | #vs-home.vs-library-main #vs-portrait-frame.vs-hero-image { width:min(100%, 170px); } |
| | #vs-home.vs-library-main .vs-hero-copy, |
| | #vs-home.vs-library-main .vs-hero-copy h1 { text-align:center; } |
| | #vs-home.vs-library-main .vs-hero-copy h1 { font-size:32px; } |
| | #vs-home.vs-library-main .vs-hero-role { font-size:16px; white-space:normal; } |
| | #vs-home.vs-library-main .vs-hero-organization { font-size:18px; } |
| } | | } |
| .vh-timeline-item:hover .vh-timeline-dot { | | |
| transform: scale(1.5);
| | #vs-home.vs-library-main .vs-library-heading .vs-library-subtitle { |
| | margin:8px 0 20px; color:#526b50; font-size:16px; line-height:1.5; |
| } | | } |
| .vh-timeline-dot { | | |
| transition: transform .2s ease;
| | /* Vanisource main page refinement: brand-color section titles and larger covers. */ |
| | #vs-home.vs-library-main .vs-library-heading h2, |
| | #vs-home.vs-library-main .vs-book-shelf h3 { |
| | color:#526b50; |
| } | | } |
| /* Timeline must follow JS position immediately */
| | #vs-home.vs-library-main #vs-posthumous-books > h3 { |
| body.page-Main_Page #vani-home .vh-timeline-track {
| | background:none; |
| transition: none !important;
| | border:0; |
| animation: none !important;
| | padding:0; |
| scroll-behavior: auto !important;
| | margin:0 0 14px; |
| transform-origin: 0 0;
| | font:600 24px/1.3 Georgia,'Noto Serif',serif; |
| | color:#526b50; |
| | text-align:left; |
| } | | } |
| body.page-Main_Page #vani-home .vh-timeline-item {
| | #vs-home.vs-library-main .vs-book-grid { |
| transition: none !important;
| | grid-template-columns:repeat(4,minmax(0,1fr)); |
| | gap:32px 12px; |
| } | | } |
| /* ==========================================================
| | #vs-home.vs-library-main .vs-book-cover { height:320px; } |
| VIRTUAL TIMELINE PERFORMANCE
| | #vs-home.vs-library-main .vs-book-cover img { max-height:310px; } |
| ========================================================== */
| | @media (max-width:600px) { |
| body.page-Main_Page #vani-home .vh-timeline-track {
| | #vs-home.vs-library-main .vs-book-grid { |
| display: flex;
| | grid-template-columns:repeat(2,minmax(0,1fr)); |
| position: absolute;
| | gap:25px 14px; |
| top: 0;
| | } |
| left: 0;
| | #vs-home.vs-library-main .vs-book-cover { height:240px; } |
| height: 100%;
| | #vs-home.vs-library-main .vs-book-cover img { max-height:230px; } |
| 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;
| | /* Vanisource main page: black book titles and hero tagline. */ |
| transition: none !important;
| | #vs-home.vs-library-main .vs-book-title a, |
| animation: none !important;
| | #vs-home.vs-library-main .vs-book-title a:hover { color:#000; } |
| -webkit-user-drag: none; | | #vs-home.vs-library-main .vs-hero-motto { |
| | margin:22px 0 0; color:#f5d77f; |
| | font:700 16px/1.4 system-ui,sans-serif; letter-spacing:.16em; |
| | text-align:center; white-space:nowrap; |
| } | | } |
| body.page-Main_Page #vani-home .vh-lifeline-window {
| | #vs-home.vs-library-main .vs-publication-item .vs-book-cover { |
| cursor: grab;
| | height:320px; margin-bottom:15px; |
| user-select: none;
| |
| -webkit-user-select: none; | |
| touch-action: pan-y;
| |
| } | | } |
| body.page-Main_Page #vani-home .vh-lifeline-window.is-dragging {
| | #vs-home.vs-library-main .vs-publication-item .vs-book-cover img { |
| cursor: grabbing;
| | max-height:310px; |
| } | | } |
| /* ==========================================================
| | @media (max-width:600px) { |
| TIMELINE YEAR NAVIGATION
| | #vs-home.vs-library-main .vs-hero-motto { |
| ========================================================== */
| | margin-top:15px; font-size:13px; letter-spacing:.12em; |
| .vh-timeline-section { | | } |
| position: relative;
| | #vs-home.vs-library-main .vs-publication-item .vs-book-cover { height:240px; } |
| top: 12px;
| | #vs-home.vs-library-main .vs-publication-item .vs-book-cover img { max-height:230px; } |
| } | | } |
| .vh-timeline-years { | | |
| display: flex !important; | | |
| align-items: center; | | /* Center diary covers and captions within their publication cards. */ |
| justify-content: center;
| | #vs-home.vs-library-main .vs-publication-item { |
| width: 100%;
| | display:flex; flex-direction:column; align-items:center; text-align:center; |
| 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 { | | #vs-home.vs-library-main .vs-publication-item .vs-book-cover { |
| display: inline-block;
| | width:100%; justify-content:center; |
| 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 { | | #vs-home.vs-library-main .vs-publication-item .vs-book-title { |
| color: var(--gold);
| | width:100%; text-align:center; |
| transform: translateY(-1px);
| |
| } | | } |
| .vh-timeline-years .vh-year.is-active { | | |
| color: var(--gold); | | |
| font-weight: 700; | | /* V33: compact, grouped discovery links in the four-column teaching section. */ |
| | #vs-home.vs-library-main .vs-other-teachings h2, |
| | #vs-home.vs-library-main .vs-other-teachings h3 { color:#526b50; } |
| | #vs-home.vs-library-main .vs-other-teachings h3 { margin:10px 0 3px; font-size:15px; line-height:1.35; font-weight:600; } |
| | #vs-home.vs-library-main .vs-other-teachings .vs-teaching-subsection:first-of-type h3 { margin-top:0; } |
| | #vs-home.vs-library-main .vs-other-teachings .vs-teaching-note { margin:3px 0 5px; color:var(--vs-ink); font-size:13px; line-height:1.45; } |
| | #vs-home.vs-library-main .vs-other-teachings .vs-link-row { margin:3px 0; font-size:14px; line-height:1.55; } |
| | #vs-home.vs-library-main .vs-other-teachings .vs-link-row a { display:inline; min-height:0; padding:0; color:var(--vs-green); font-size:inherit; text-decoration:underline; text-decoration-color:#8e9a8a; text-underline-offset:3px; } |
| | #vs-home.vs-library-main .vs-other-teachings .vs-link-row a:hover { color:#526b50; } |
| | #vs-home.vs-library-main .vs-other-teachings > div { min-width:0; } |
| | |
| | |
| | /* V35: reachable hover/focus menus for all date, essay and letter indexes. */ |
| | #vs-home.vs-library-main .vs-hover-item { position:relative; display:inline-block; } |
| | #vs-home.vs-library-main .vs-hover-panel { display:none; position:absolute; left:0; top:100%; z-index:10010; width:248px; max-width:min(360px,calc(100vw - 32px)); max-height:min(360px,calc(100vh - 48px)); overflow:auto; padding:8px; border:1px solid var(--vs-line); border-radius:7px; background:var(--vs-paper); box-shadow:0 8px 22px rgba(38,58,57,.22); text-align:left; } |
| | #vs-home.vs-library-main .vs-hover-panel::before { content:""; position:absolute; left:0; right:0; top:-8px; height:9px; } |
| | #vs-home.vs-library-main .vs-hover-item:hover > .vs-hover-panel, |
| | #vs-home.vs-library-main .vs-hover-item:focus-within > .vs-hover-panel { display:block; } |
| | #vs-home.vs-library-main .vs-hover-heading { display:block; position:sticky; top:-8px; z-index:1; padding:5px 7px 7px; color:#526b50; font-size:13px; font-weight:700; line-height:1.35; background:var(--vs-paper); border-bottom:1px solid var(--vs-line); } |
| | #vs-home.vs-library-main .vs-hover-options { display:block; } |
| | #vs-home.vs-library-main .vs-hover-options > span { display:block; } |
| | #vs-home.vs-library-main .vs-hover-options a { display:block; min-height:34px; padding:6px 7px; border-radius:4px; color:var(--vs-green); font-size:13px; line-height:1.4; text-decoration:none; } |
| | #vs-home.vs-library-main .vs-hover-options a:hover, |
| | #vs-home.vs-library-main .vs-hover-options a:focus-visible { background:#f0eee3; color:#526b50; text-decoration:underline; } |
| | #vs-home.vs-library-main .vs-hover-panel.vs-essays-panel { width:360px; } |
| | #vs-home.vs-library-main .vs-hover-panel.vs-letters-panel { width:290px; } |
| | #vs-home.vs-library-main .vs-other-teachings > div:last-child .vs-hover-panel { left:auto; right:0; } |
| | @media (hover:none) { |
| | #vs-home.vs-library-main .vs-hover-panel { display:none !important; } |
| } | | } |
| /* Random quotes */ | | |
| .vh-quote {
| | |
| height: 82px;
| | /* V38: force all browse panels closed until their own trigger is hovered or focused. */ |
| display: flex;
| | #vs-home.vs-library-main .vs-hover-item:not(:hover):not(:focus-within) > .vs-hover-panel { |
| align-items: center;
| | display:none !important; |
| justify-content: center;
| | visibility:hidden !important; |
| gap: 20px;
| | opacity:0 !important; |
| padding: 0 40px;
| | pointer-events:none !important; |
| 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, | | #vs-home.vs-library-main .vs-hover-item:hover > .vs-hover-panel, |
| .vh-network { | | #vs-home.vs-library-main .vs-hover-item:focus-within > .vs-hover-panel { |
| min-width: 0;
| | display:block !important; |
| | visibility:visible !important; |
| | opacity:1 !important; |
| | pointer-events:auto !important; |
| } | | } |
| /* ==========================================================
| | @media (hover:none) { |
| TREASURES OF THE VANI — TITLE
| | #vs-home.vs-library-main .vs-hover-item:hover > .vs-hover-panel, |
| ========================================================== */
| | #vs-home.vs-library-main .vs-hover-item:focus-within > .vs-hover-panel { |
| .vh-featured .vh-section-title { | | display:none !important; |
| display: flex;
| | visibility:hidden !important; |
| align-items: center;
| | opacity:0 !important; |
| gap: 12px;
| | pointer-events:none !important; |
| 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 V40: BTG and Diaries share one desktop row */ | | /* V41: display BTG and Diaries together; stack them on phones. */ |
| #vs-home.vs-library-main .vs-btg-diaries-row { | | #vs-home.vs-library-main .vs-btg-diaries-row { |
| display: grid; | | display:grid; |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); | | grid-template-columns:minmax(0,1fr) minmax(0,1fr); |
| gap: clamp(24px, 4vw, 56px); | | gap:clamp(24px,4vw,56px); |
| align-items: start; | | 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-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-publication-grid { grid-template-columns:minmax(0,1fr); } |
| #vs-home.vs-library-main .vs-btg-section .vs-btg-issues { margin: 8px 0 0; } | | #vs-home.vs-library-main .vs-btg-section .vs-btg-issues { margin:8px 0 0; } |
| @media (max-width: 600px) { | | @media (max-width:600px) { |
| #vs-home.vs-library-main .vs-btg-diaries-row { grid-template-columns: minmax(0, 1fr); gap: 20px; } | | #vs-home.vs-library-main .vs-btg-diaries-row { grid-template-columns:minmax(0,1fr); gap:20px; } |
| } | | } |
