/* sv-global.css — Skanda Vale static site. Authored file. Linked from every page. Holds the few fixes that have to apply site-wide rather than to one template. 2026-08-11 — scroll-to-top link, cookie-banner clearance. */ /* The widget's own data-settings say _position:fixed — it was always meant to float bottom-right. It never did, because Elementor ships it opacity:0 / visibility:hidden and reveals it with a scroll script that does not run here. Restore the intended behaviour: pinned bottom right, always visible, above the page but below the cookie banner. */ #scrolltop { position: fixed !important; right: 28px; bottom: 28px; left: auto !important; top: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; z-index: 9000; } #scrolltop .elementor-widget-container, #scrolltop .elementor-icon-wrapper { margin: 0; padding: 0; } #scrolltop a.elementor-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: #ca4d2a; color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); transition: background-color .15s ease; } #scrolltop a.elementor-icon i, #scrolltop a.elementor-icon svg { color: #fff; fill: #fff; } #scrolltop a.elementor-icon:hover, #scrolltop a.elementor-icon:focus-visible { background: #b34324; } /* on small screens keep it out of the way of the thumb */ @media (max-width: 600px) { #scrolltop { right: 16px; bottom: 16px; } #scrolltop a.elementor-icon { width: 2.6rem; height: 2.6rem; } } /* While the cookie banner is on screen it is fixed to the bottom of the window and would sit over whatever is at the foot of the page. Give the document a little room underneath so nothing is obscured. */ /* driven by a class the banner's script adds to . :has() proved unreliable here, and this cannot silently stop matching. */ body.sv-banner-open #scrolltop { bottom: 7.5rem !important; } @media (max-width: 600px) { body.sv-banner-open #scrolltop { bottom: 12rem !important; } } /* 2026-08-12 — owner instruction: logo on the left, Livestream and Donate together on the right. The top bar is a three-column Elementor section shared byte-for-byte by all 280 pages (Livestream 2c18a00f | logo 0ecccd0 | Donate 68720da), so the re-order is done here with flex order instead of editing every page. Applies wherever the buttons are visible (tablet and up). */ @media (min-width: 768px) { .elementor-element-0ecccd0 { order: 1; width: auto !important; } .elementor-element-2c18a00f { order: 2; width: auto !important; margin-left: auto; } .elementor-element-68720da { order: 3; width: auto !important; } /* the logo image was centred in its column; keep it flush left */ .elementor-element-0ecccd0 .elementor-widget-image .elementor-widget-container { text-align: left; } } /* Phones (owner instruction, same day): logo flush left there too. The Livestream and Donate buttons are display:none at this width, but the Livestream column still reserved a third of the row and centred the logo. Collapse it and let the logo column take the space; the hamburger keeps the right edge. */ @media (max-width: 767px) { .elementor-element-2c18a00f { width: 0 !important; } .elementor-element-0ecccd0 { flex-grow: 1; } .elementor-element-0ecccd0 .elementor-widget-image .elementor-widget-container { text-align: left; } } /* 2026-08-12 — video previews in listing tiles. The tiles used to embed a live YouTube player whose poster YouTube chooses itself — at tile size that was its 480px "hqdefault", upscaled and soft on any retina screen (the post pages looked fine because their players are bigger). The players were swapped for still posters at the best resolution each video actually has on i.ytimg.com. 16:9 exactly removes the letterbox bars baked into the older 4:3 poster files. */ .jet-listing-grid__item .elementor-shortcode img.sv-video-poster { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* 2026-08-14 — owner: with the dead keyword search gone from the music pages, the "Songs" title sits flush left like other page headers. 1e4bdbc is the heading shared by the 8 music-lyrics pages; Elementor centres it with a higher-specificity page rule, hence the !important. */ .elementor-element.elementor-element-1e4bdbc { text-align: left !important; } /* Category icons on the journal cards are square (40x40) but were being drawn 20x12, i.e. squashed. Keep them square and let the height follow the width. */ .jet-listing-grid img[src*="/icon-teachings"], .jet-listing-grid img[src*="/icon-stories"], .jet-listing-grid img[src*="/icon-uncategorised"] { width: 20px; height: 20px; object-fit: contain; }