/* ========================================================= JA MORGAN / JA MASTHEAD OVERRIDES ========================================================= */ /* Hide masthead meta/description overlay */ .ja-masthead-description { display: none !important; } /* --------------------------------------------------------- 1) HERO HEIGHTS --------------------------------------------------------- */ /* Default hero height (standard pages) */ .ja-masthead { height: clamp(340px, 24vw, 460px); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; } /* NEWS LANDING (/news): shorter hero (classes are on ) */ html.view-category.layout-blog.news-landing .ja-masthead{ height: clamp(280px, 18vw, 360px) !important; min-height: clamp(280px, 18vw, 360px) !important; } /* NEWS ARTICLES: tall hero (do NOT exclude layout-blog because your template applies it on articles too) */ html.view-article.news-landing .ja-masthead{ height: 560px !important; min-height: 560px !important; } /* Partnership safeguard (optional — only if you’re using this page class) */ .partnership-hero .ja-masthead { height: clamp(340px, 24vw, 460px) !important; min-height: clamp(340px, 24vw, 460px) !important; /* Optional crop tweak */ /* background-position: center 25% !important; */ } /* --------------------------------------------------------- 2) MASTHEAD TEXT POSITIONING (BOTTOM + LEFT) --------------------------------------------------------- */ /* Make the inner container fill the masthead height */ .ja-masthead > .container { position: relative; height: 100%; } /* Base positioning for masthead text */ .ja-masthead .ja-masthead-detail { position: absolute !important; left: 0; right: 0; bottom: 0 !important; top: auto !important; transform: none !important; text-align: left; padding-bottom: 28px; /* default breathing room */ box-sizing: border-box; } /* News titles are sometimes

, so target the class not just h1 */ .ja-masthead .ja-masthead-title{ margin: 0 !important; } .ja-masthead .ja-masthead-title h1{ margin: 0 !important; } /* --------------------------------------------------------- 3) NEWS GRID ALIGNMENT FIX (MATCH SITE CONTAINER) --------------------------------------------------------- */ /* Force news masthead text onto the same grid as the rest of the site */ .news-landing .ja-masthead .ja-masthead-detail { max-width: 1320px; margin-left: auto !important; margin-right: auto !important; padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box; } /* Ensure news landing doesn’t get centred by template rules */ .news-landing .ja-masthead .ja-masthead-title, .news-landing .ja-masthead .ja-masthead-title h1{ text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* --------------------------------------------------------- 4) NEWS ARTICLE TITLE/DATE VERTICAL TWEAK (LOCKED) --------------------------------------------------------- */ /* NEWS ARTICLES: lock the title/date block lower + prevent “nudging up” */ html.view-article.news-landing .ja-masthead .ja-masthead-detail{ bottom: -50px !important; /* your ideal position */ padding-bottom: 0 !important; /* avoid fighting the base rule */ margin: 0 !important; top: auto !important; transform: none !important; padding-top: 0 !important; } /* --------------------------------------------------------- 5) MOBILE: prevent titles touching the screen edge --------------------------------------------------------- */ @media (max-width: 576px) { .ja-masthead .ja-masthead-detail { padding-left: 16px !important; padding-right: 16px !important; } /* Reduce the negative drop on small screens so text doesn’t fall too low */ html.view-article.news-landing .ja-masthead .ja-masthead-detail{ bottom: -20px !important; } } /* Remove bullets safely without touching icons */ .mod-articles ul, .mod-list ul, .latestnews ul{ list-style: none !important; padding-left: 0 !important; } .mod-articles li, .mod-list li, .latestnews li{ list-style: none !important; } /* Fix missing calendar icon (FontAwesome3) */ .icon-calendar::before{ font-family: FontAwesome3 !important; content: "\f073" !important; /* FA calendar icon */ speak: none; display: inline-block; margin-right: 6px; } /* Ensure the span itself doesn’t show a fallback square */ .icon-calendar{ font-family: FontAwesome3 !important; } /* Bulletproof fallback: hide broken icon font and use emoji */ .mod-articles-date .icon-calendar{ display:none !important; } .mod-articles-date::before{ content:"📅"; margin-right:6px; } /* Back-to-top hidden by default */ #back-to-top, .back-to-top, #t3-back-to-top{ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; } /* Shown after scroll */ #back-to-top.show, .back-to-top.show, #t3-back-to-top.show{ opacity: 1; visibility: visible; pointer-events: auto; } @media (max-width: 767px){ #back-to-top.hidden-xs.show, .back-to-top.hidden-xs.show, #t3-back-to-top.hidden-xs.show{ display: block !important; } }