/* Custom overrides for elements not covered by the purchased template. Loaded after the template's own stylesheets so these rules take priority. */ /* Tells browsers (Samsung Internet's forced dark mode, Chrome's auto-dark theme, etc.) that this site is intentionally light-themed and shouldn't be auto-recolored/inverted. Works alongside the color-scheme meta tag in each page's . */ :root { color-scheme: light; } /* Keeps the header logo at a sensible size no matter what dimensions the source image file happens to be - prevents it from ever crowding into the nav/buttons next to it. */ .logo-box-style4 img, .sticky-logo-box-style1 img, .logo-box img, .logo img { max-height: 40px; width: auto; display: block; } /* The three homepage Explore box icons (Events/Locations/Blog) are different characters in the icon font, and some are visually heavier/larger than others even at the same font-size. Nudge the worst offender down slightly so all three look consistent. */ .single-service-style2 .img-box .overlay-icon .icon-target-1 { transform: scale(0.85); display: inline-block; } /* The blog post body renders raw HTML wrote in the rich text editor - give it sensible spacing and make embedded images behave responsively. */ .blog-post-body p { margin: 0; line-height: 1.7; } .blog-post-body h2, .blog-post-body h3 { margin: 30px 0 15px; text-transform: uppercase; } .blog-post-body img { max-width: 100%; height: auto; display: block; margin: 25px 0; } .blog-post-body ul, .blog-post-body ol { margin-bottom: 18px; padding-left: 24px; } /* The Events/Locations/Blog description text on the homepage varies in length, and since the whole title+text block is only anchored at its BOTTOM edge, longer text pushes the title above it to a different height per box. Clamping the text to a fixed 2 lines (with matching reserved height) keeps all three titles lined up at the same spot regardless of how much text each one has. */ .single-service-style2 .img-box .overlay-content .text p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 48px; line-height: 24px; } .logo-box-style4, .logo-box-style4 a { display: flex; align-items: center; height: 100%; } /* The REAL cause of the logo sitting too low: .main-header-style4__bottom-left (one level up from .logo-box-style4) is absolutely positioned with a hardcoded height: 130px anchored from top: 0, but the actual header bar around it has no fixed height - it just shrinks to fit the nav content, which renders shorter than 130px. So the logo gets vertically centered inside an invisible box taller than the visible white bar, pushing it down past the bottom edge. Previous fixes targeted the inner .logo-box-style4 box, which doesn't help since ITS parent is still the mismatched 130px box. This overrides the actual culprit: instead of anchoring from the top at a fixed height, center it via the standard "unknown height" trick (top: 50% + translateY(-50%)), which stays correct no matter how tall the real header ends up being. */ .main-header-style4__bottom-left { height: auto !important; top: 50% !important; transform: translateY(-50%); } /* Footer "Quick Links" list (used inside .single-footer-widget-open-hours on the simplified footer) had no color rules at all in the template, so it was falling back to the browser's default blue/purple link colors against the dark footer background. */ .footer-widget-manu-links { padding: 0; margin: 0; list-style: none; } .footer-widget-manu-links li { margin-bottom: 8px; } .footer-widget-manu-links li:last-child { margin-bottom: 0; } .footer-widget-manu-links li a { color: #bfbdb9; font-size: 15px; text-decoration: none; transition: color 200ms linear; } .footer-widget-manu-links li a:hover, .footer-widget-manu-links li a:focus { color: var(--thm-primary-color); text-decoration: none; } /* Media page filter tabs (All / Photos / Videos) */ .media-filter-btn { display: inline-block; margin: 0 6px 10px; padding: 8px 26px; background: transparent; border: 1px solid var(--thm-border-color); color: var(--thm-body-font-color); font-family: var(--thm-font-2); font-weight: 700; font-size: 14px; text-transform: uppercase; cursor: pointer; transition: all 200ms linear; } .media-filter-btn:hover { color: var(--thm-white); background-color: var(--thm-primary-color); border-color: var(--thm-primary-color); } .media-filter-btn.active { color: var(--thm-white); background-color: var(--thm-primary-color); border-color: var(--thm-primary-color); } .media-thumb img { transition: transform 0.5s ease; } .media-thumb:hover img { transform: scale(1.05); } /* Login/Admin buttons: on mobile these move into the pull-out nav menu instead (see mobile-nav__contact), so hide the desktop header copy below the point where the hamburger menu takes over. */ @media (max-width: 991px) { .main-header-style4__bottom-middle__bottom-right { display: none !important; } } /* Locations page map: clean custom pin icon (removes Leaflet's default white box/border that divIcon markers get by default) */ .field-marker-icon { background: transparent; border: none; } /* Leaflet popup links (e.g. "Visit Website") had no color rules at all, so they fell back to the browser's default blue. */ .leaflet-popup-content a { color: var(--thm-primary-color); font-weight: 700; text-decoration: none; } .leaflet-popup-content a:hover, .leaflet-popup-content a:focus { text-decoration: underline; } /* Hover tooltip showing just the field name */ .leaflet-tooltip { background-color: var(--thm-black-bg); color: #ffffff; border: none; font-family: var(--thm-font-2); font-weight: 700; font-size: 13px; text-transform: uppercase; padding: 6px 12px; box-shadow: none; } .leaflet-tooltip-top:before { border-top-color: var(--thm-black-bg); } /* The contact form's inputs still used the template's original dark theme (near-black background, dark gray text) - made sense against the old dark decorative wrapper, but clashes now that the section is a plain white background like the rest of the site. Match the same clean light input style used everywhere else (locations search, media suggest form, etc). */ .contact-form form input[type="text"], .contact-form form input[type="email"], .contact-form form textarea { background-color: #ffffff; border: 1px solid var(--thm-border-color); color: #333333; } .contact-form form input[type="text"]::placeholder, .contact-form form input[type="email"]::placeholder, .contact-form form textarea::placeholder { color: #777777; }