/* ============================================================================
BAC — Mobile Website Feedback Fixes
Source: "01 June - BAC Mobile Website Feedback Checklist"
Scope: Mobile view only (<= 767px) unless noted. Additive & reversible.
Loaded after Elementor via riff-child/functions.php (bac_child_mobile_fixes).
============================================================================ */
/* Mobile breakpoint wrapper. Most rules live inside @media (max-width: 767px). */
@media (max-width: 767px) {
/* =========================================================================
1. HOMEPAGE & NAVIGATION — Header top bar (Checklist: Home-1, Home-2)
"Apply Now / Login hang awkwardly in the centre."
The .top-menu (#applyMenu / #loginMenu) is a shrink-wrapped flex box that
the header column centres. Push it to the right edge and shrink it.
========================================================================= */
.top-menu {
justify-content: flex-end !important;
width: auto !important;
margin-left: auto !important;
margin-right: 0 !important;
gap: 6px;
}
.elementor-widget-html .elementor-widget-container:has(> .top-menu),
.elementor-widget-html .elementor-widget-container:has(.top-menu) {
text-align: right !important;
}
/* The .top-menu widget is centred by its header column wrap
(.elementor-widget-wrap{justify-content:center}); flip that wrap to
flex-end so Apply/Login actually sit at the right edge. */
.elementor-widget-wrap:has(.top-menu) {
justify-content: flex-end !important;
}
.top-menu .menu-btn {
display: inline-flex !important;
align-items: center !important;
font-size: 12px !important;
/* the caret is position:absolute on ::after — reserve room on the right
so it isn't squashed against the label */
padding: 3px 18px 3px 6px !important;
line-height: 1.2 !important;
}
/* keep the Apply/Login dropdowns from spilling off-screen to the right */
.top-menu .menu-item .dropdown {
right: 0;
left: auto;
}
/* -------------------------------------------------------------------------
Header logo vs. text scale (Home-2): keep header/nav text from rendering
larger than the logo. Cap the inline header menu + layout text sizes.
------------------------------------------------------------------------- */
.top_panel .sc_layouts_menu_nav > li > a {
font-size: 15px !important;
}
.top_panel .sc_layouts_logo img {
max-height: 46px;
width: auto;
}
/* -------------------------------------------------------------------------
Sticky header Donate button, injected beside the hamburger by JS
(initHeaderDonate). Red pill, mobile only. Home-8: keep Donate handy at
the top next to a smaller hamburger.
------------------------------------------------------------------------- */
.bac-header-donate {
display: inline-flex !important;
align-items: center;
justify-content: center;
margin-right: 10px;
padding: 6px 14px;
border-radius: 999px;
background: #e23744;
color: #ffffff !important;
font-size: 13px;
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.bac-header-donate:hover {
background: #c92b3a;
color: #ffffff !important;
}
/* =========================================================================
2. HOMEPAGE & NAVIGATION — Buttons too wide (Checklist: Home-6)
Reduce width/padding of buttons so they don't eat half the screen.
Scoped to .home so other pages' buttons are unaffected.
========================================================================= */
.home .sc_button.sc_button_size_normal,
.home .sc_button.sc_button_size_large,
.home .elementor-button.elementor-size-md,
.home .elementor-button.elementor-size-lg {
padding-left: 1.25em !important;
padding-right: 1.25em !important;
}
/* stop buttons stretching full-width unless they are intentional blocks */
.home .sc_button:not(.sc_button_fullwidth) {
width: auto !important;
max-width: 100%;
}
/* =========================================================================
3. MOBILE MENU (Checklist: hamburger void, menu-bg, donate, arrows)
Convert the full-screen black "height reveal" into a right-side slide-in
panel with a light gradient and a semi-transparent overlay over content.
The theme adds .opened to .menu_mobile and body.menu_mobile_opened.
========================================================================= */
body.menu_mobile_opened {
overflow: hidden;
}
/* Slide-in panel from the right */
.menu_mobile {
left: auto !important;
right: 0 !important;
width: 84% !important;
max-width: 340px !important;
height: 100% !important;
transform: translateX(100%);
-webkit-transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.5, 1, 0.89, 1) !important;
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.5, 1, 0.89, 1) !important;
box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
}
.menu_mobile.opened {
transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
}
/* Light gradient background instead of the solid black void */
.menu_mobile .menu_mobile_inner {
background: linear-gradient(160deg, #ffffff 0%, #fff4f7 48%, #fff8e8 100%) !important;
color: #2b2b2b !important;
text-align: left !important;
}
/* Semi-transparent dark overlay across the rest of the page */
.menu_mobile_overlay {
background-color: rgba(18, 18, 18, 0.45) !important;
opacity: 1 !important;
}
/* Nav items: left aligned, calmer sizing, dark text */
.menu_mobile .menu_mobile_nav_area {
text-align: left !important;
}
.menu_mobile .menu_mobile_nav > li > a,
.menu_mobile .menu_mobile_nav li a {
color: #2b2b2b !important;
font-size: 20px !important;
text-align: left !important;
justify-content: flex-start !important;
}
.menu_mobile .menu_mobile_nav li a:hover,
.menu_mobile .menu_mobile_nav .current-menu-item > a {
color: #e23744 !important;
}
/* Submenu items follow the same menu rules as the parents (Syne / weight),
left-aligned and indented one level deeper than the 40px parent padding,
only the colour differs. (Checklist round-4 item 5) */
.menu_mobile .menu_mobile_nav .sub-menu {
margin: 0 !important;
padding: 0 !important;
}
.menu_mobile .menu_mobile_nav .sub-menu a {
display: block !important;
font-size: 17px !important;
font-weight: 600 !important;
line-height: 28px !important;
opacity: 1 !important;
padding: 2px 40px 2px 58px !important; /* parent 40px + one indent level */
text-align: left !important;
justify-content: flex-start !important;
color: #7a7a82 !important; /* distinct sub-item colour */
}
.menu_mobile .menu_mobile_nav .sub-menu a:hover {
color: #e23744 !important;
}
/* Down-arrow on sections that have sub-pages (Contact Us etc.) */
.menu_mobile .menu_mobile_nav .menu-item-has-children > a {
display: inline-flex !important;
align-items: center;
}
.menu_mobile .menu_mobile_nav .menu-item-has-children > a .open_child_menu {
position: static !important;
display: inline-flex !important;
align-items: center;
width: auto !important;
height: auto !important;
margin: 0 0 0 0.45em !important;
top: auto !important;
right: auto !important;
}
.menu_mobile .menu_mobile_nav .menu-item-has-children > a .open_child_menu::before {
/* a clean down CHEVRON (matches the dropdown arrows used across the site),
not the theme's straight arrow glyph */
content: "" !important;
font-family: inherit !important;
display: inline-block;
width: 8px;
height: 8px;
border-right: 2px solid #2b2b2b;
border-bottom: 2px solid #2b2b2b;
transform: rotate(45deg) translateY(-2px);
-webkit-transform: rotate(45deg) translateY(-2px);
}
/* "Donate" is rebuilt as a real menu item by mobile-fixes.js
(initMenuDonate) so it inherits ALL menu-item rules/behaviour. Hide the
original sc_button widget that animated/behaved like a button. Menu-donate. */
.menu_mobile .menu_mobile_inner .sc_item_button {
display: none !important;
}
/* the injected item is a normal nav ; it already inherits the
.menu_mobile_nav li a styling above (dark #2b2b2b / Syne / 20px / left). */
.menu_mobile .menu_mobile_nav li.bac-menu-donate > a:hover {
color: #e23744 !important;
}
/* Close (X) icon -> red on the light panel (fontello \e9e1) */
.menu_mobile .menu_mobile_close .menu_button_close_icon:before {
color: #e23744 !important;
}
/* =========================================================================
4. reCAPTCHA badge overlapping footer (Checklist: Home-9 / Global)
========================================================================= */
.grecaptcha-badge {
transform: scale(0.7);
transform-origin: bottom right;
opacity: 0.85;
}
/* =========================================================================
5. HOMEPAGE — "All Campaigns" CTA (Checklist: Home-7)
Replace the big button with a simple text link + animated right arrow.
#12e3047 is the unique Elementor element wrapping this CTA.
========================================================================= */
.elementor-element-12e3047.btn-cls a.sc_button.sc_button_hover.color_style_link2,
.elementor-element-12e3047 a.sc_button.sc_button_hover.color_style_link2,
.elementor-element-12e3047 a.sc_button.color_style_link2,
.elementor-element-12e3047 a.sc_button,
/* keep it a plain text link in EVERY state — no button fill on hover/tap/focus */
.elementor-element-12e3047.btn-cls a.sc_button.sc_button_hover.color_style_link2:hover,
.elementor-element-12e3047.btn-cls a.sc_button.sc_button_hover.color_style_link2:focus,
.elementor-element-12e3047.btn-cls a.sc_button.sc_button_hover.color_style_link2:active,
.elementor-element-12e3047 a.sc_button:hover,
.elementor-element-12e3047 a.sc_button:focus,
.elementor-element-12e3047 a.sc_button:active {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
/* it was a button with overflow:hidden (clipped the text when it shifted);
as a plain text link nothing should ever be hidden. */
overflow: visible !important;
white-space: nowrap !important;
color: #ffffff !important; /* link now sits on the purple section (item 1) */
font-size: 14px !important; /* same size as the "Support a Cause" button */
font-weight: 700 !important; /* same weight as the button */
display: inline-flex !important;
align-items: center;
gap: 0.4em;
/* completely static — no animation or transition (user request) */
transition: none !important;
animation: none !important;
transform: none !important;
}
.elementor-element-12e3047 a.sc_button *,
.elementor-element-12e3047 a.sc_button .sc_button_text,
.elementor-element-12e3047 a.sc_button .sc_button_title {
transition: none !important;
animation: none !important;
transform: none !important;
}
.elementor-element-12e3047 a.sc_button::before,
.elementor-element-12e3047 a.sc_button::after,
.elementor-element-12e3047 a.sc_button:hover::before,
.elementor-element-12e3047 a.sc_button:hover::after,
.elementor-element-12e3047 a.sc_button:active::before,
.elementor-element-12e3047 a.sc_button:active::after,
.elementor-element-12e3047 a.sc_button:focus::before,
.elementor-element-12e3047 a.sc_button:focus::after {
display: none !important;
}
.elementor-element-12e3047 .sc_button .sc_button_text::after {
content: "\2192"; /* → static, no movement */
display: inline-block;
margin-left: 0.4em;
transition: none !important;
animation: none !important;
transform: none !important;
}
/* Round-4 item 1: the "See All Campaigns" link sat on a separate white strip
below the campaigns. Paint its section the same purple as the campaigns
block (rgb(35,9,76)) so it reads as part of that section; link -> white. */
.elementor-element-8333f62 {
background-color: rgb(35, 9, 76) !important;
}
.elementor-element-8333f62 .elementor-element-12e3047 a.sc_button,
.elementor-element-12e3047 a.sc_button {
color: #ffffff !important;
}
/* Reduce the empty space above the "See All Campaigns" link (user request). */
.elementor-element-1cce6ae,
.elementor-element-1cce6ae .elementor-spacer-inner,
.elementor-element-6635033,
.elementor-element-6635033 .elementor-spacer-inner {
height: 6px !important;
}
/* =========================================================================
6. GLOBAL — thin separator line above the footer (Checklist: Global-1)
========================================================================= */
footer.footer_wrap {
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
/* =========================================================================
7. FOOTER — collapsible columns (Checklist: Home-14 / footer length)
JS (mobile-fixes.js) turns each footer section title into an accordion
toggle. These styles provide the collapse animation + chevron.
========================================================================= */
.bac-foot-acc-title {
cursor: pointer;
position: relative;
}
.bac-foot-acc-title .sc_item_title::after,
.bac-foot-acc-title.bac-no-inner::after {
content: "\25BE"; /* ▾ */
font-size: 0.7em;
margin-left: 0.5em;
display: inline-block;
transition: transform 0.25s ease;
}
.bac-foot-acc-title.bac-open .sc_item_title::after,
.bac-foot-acc-title.bac-open.bac-no-inner::after {
transform: rotate(180deg);
}
.bac-foot-acc-content {
overflow: hidden;
max-height: 0;
transition: max-height 0.35s ease;
}
.bac-foot-acc-content.bac-open {
max-height: 1500px;
}
/* Tighten the vertical spacing between the footer sections (user request).
Zero the compounding widget margins; give the titles a small tap padding. */
.footer_wrap .elementor-element-5641437 .elementor-widget-trx_sc_title,
.footer_wrap .elementor-element-5641437 .elementor-widget-trx_widget_custom_links,
.footer_wrap .elementor-element-5641437 .elementor-widget-trx_sc_socials,
.footer_wrap .elementor-element-5641437 .bac-foot-acc-content {
margin-top: 0 !important;
margin-bottom: 0 !important;
min-height: 0 !important; /* let collapsed flex items fully yield their space */
}
.footer_wrap .elementor-element-5641437 .bac-foot-acc-content:not(.bac-open) {
flex-basis: 0 !important;
}
/* structural gap around the title widgets comes from nested wrappers; pull
each title up to tighten (mobile only). (Socials excluded so they don't
overlap the "Follow Us" title; accordion open state is unaffected.) */
.footer_wrap .elementor-element-5641437 .elementor-widget-trx_sc_title {
margin-top: -26px !important;
}
.footer_wrap .elementor-element-5641437 .elementor-widget-trx_sc_title .sc_item_title {
margin: 0 !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
}
/* Centre the social icons inside their circles (user request). */
.footer_wrap .elementor-element-5641437 .social_item {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
text-align: center !important;
}
.footer_wrap .elementor-element-5641437 .social_item .social_icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100%;
height: 100%;
line-height: 1 !important;
}
.footer_wrap .elementor-element-5641437 .social_item .social_icon [class^="icon-"],
.footer_wrap .elementor-element-5641437 .social_item .social_icon [class*=" icon-"] {
display: inline-flex !important;
align-items: center;
justify-content: center;
line-height: 1 !important;
}
/* Footer fine-print below the separator line — smaller (user request). */
.footer_wrap .elementor-element-503014a,
.footer_wrap .elementor-element-503014a p,
.footer_wrap .elementor-element-795696b,
.footer_wrap .elementor-element-795696b p {
font-size: 12px !important;
line-height: 1.55 !important;
}
/* =========================================================================
8. ABOUT US — Team cards: keep the ORIGINAL hover popup; only add a way to
dismiss it on mobile (per request — nothing else changed).
The theme reveals the bio overlay on :hover, which works on tap. We simply
let that happen, and let the user close it by tapping the card again or
tapping outside — which force-hides the popup via .bac-hide-overlay
(toggled by mobile-fixes.js). No restyling of the popup itself.
========================================================================= */
.sc_team_item .post_featured,
.sc_team_item .sc_team_item_thumb {
cursor: pointer;
}
.sc_team_item.bac-hide-overlay .trx_addons_hover_team,
.sc_team_item.bac-hide-overlay .trx_addons_hover_mask {
opacity: 0 !important;
visibility: hidden !important;
}
/* =========================================================================
9. ABOUT US — Contact / Corporate info icons (Checklist: About-2)
Shrink the bloated icons and keep them left-aligned beside the text.
========================================================================= */
.elementor-element-bac06de .sc_icons_item,
.sc_icons_item {
justify-content: flex-start !important;
text-align: left !important;
}
.elementor-element-bac06de .sc_icons_item .sc_icons_icon,
.sc_icons_item .sc_icons_icon {
width: auto !important;
min-width: 0 !important;
height: auto !important;
margin-right: 0.55em !important;
flex: 0 0 auto;
}
.elementor-element-bac06de .sc_icons_item .sc_icons_icon,
.elementor-element-bac06de .sc_icons_item .sc_icons_icon span,
.sc_icons_item .sc_icons_icon,
.sc_icons_item .sc_icons_icon span {
font-size: 14px !important;
line-height: 1.4 !important;
}
.sc_icons_item .sc_icons_icon span::before,
.sc_icons_item .sc_icons_icon::before {
font-size: 15px !important;
}
/* =========================================================================
10. PROGRAMS / MUSIC SCHOLARSHIP / ABOUT — heading uniformity (Prog-2)
Section headings render at 22 / 26 / 28 px inconsistently. Scoped to the
Programs (46932), Music Scholarship (47028) and About (3738) pages only,
so hero/other-page headings are untouched. Excludes the top banner row.
========================================================================= */
body.page-id-46932 .elementor-element:not(.elementor-element-edit-mode) .elementor-widget-heading:not(.sc_layouts_item) h2.elementor-heading-title,
body.page-id-47028 .elementor-widget-heading h2.elementor-heading-title,
body.page-id-3738 .elementor-widget-heading h2.elementor-heading-title,
body.page-id-46932 .elementor-widget-trx_sc_title h2,
body.page-id-47028 .elementor-widget-trx_sc_title h2,
body.page-id-3738 .elementor-widget-trx_sc_title h2 {
font-size: 22px !important;
line-height: 1.28 !important;
}
body.page-id-47028 .elementor-widget-heading h3.elementor-heading-title,
body.page-id-3738 .elementor-widget-heading h3.elementor-heading-title {
font-size: 18px !important;
line-height: 1.3 !important;
}
/* =========================================================================
11. PROGRAMS — Checklist & Guidelines popup (Checklist: Prog-5, Prog-3)
Stop it filling the whole screen; make it a compact, scrollable card with
a clean red ✕ (no background). The mobile section dropdown (.bac-tabs-
dropdown) is the vertical replacement for the desktop horizontal tabs.
========================================================================= */
/* NOTE: do NOT force `display` here — the popup JS toggles display:none/flex
inline to open/close it. We only set padding + centering, which apply
once the overlay is shown. */
.bac-popup-overlay {
padding: 18px 14px !important;
align-items: center !important;
justify-content: center !important;
}
.bac-popup {
width: 100% !important;
max-width: 340px !important;
max-height: 82vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
margin: 0 auto !important;
}
.bac-popup-close {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #e23744 !important;
font-size: 26px !important;
line-height: 1 !important;
width: auto !important;
height: auto !important;
padding: 4px !important;
}
/* horizontal tabs hidden on mobile; vertical dropdown shown */
.bac-popup .bac-tabs {
display: none !important;
}
.bac-popup .bac-tabs-dropdown {
display: block !important;
}
/* Dropdown arrow: replace the badly-arranged default with a clean chevron,
consistent with the menu "Contact Us" chevron. (user request) */
.bac-tabs-dropdown .select_container::after,
.bac-tabs-dropdown .select_container::before {
display: none !important;
}
.bac-tabs-dropdown select.bac-tabs-select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%232b2b2b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 12px 8px !important;
padding-right: 38px !important;
}
/* =========================================================================
12. PROGRAMS — "Start Your Application" alignment (Checklist: Prog-6)
Fix the inverted alignment; centre the button. (The link target change to
a Coming Soon page is handled as a content edit.)
========================================================================= */
.elementor-element-5ec8f4a {
text-align: center !important;
}
.elementor-element-5ec8f4a .sc_button_wrap,
.elementor-element-5ec8f4a .elementor-widget-container,
.elementor-element-5ec8f4a .sc_item_button {
text-align: center !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* =========================================================================
13. CONTACT US — forms more compact (Checklist: Contact-1)
========================================================================= */
.wpcf7-form p {
margin: 0 0 10px !important;
}
.wpcf7-form label {
margin-bottom: 4px !important;
line-height: 1.3 !important;
}
.wpcf7-form input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form select.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control {
padding-top: 9px !important;
padding-bottom: 9px !important;
}
.wpcf7-form textarea.wpcf7-form-control {
min-height: 80px !important;
}
/* trim the big vertical padding inside the form sections */
.elementor-element-419ca9d .elementor-widget-container,
.wpcf7-form br {
line-height: 1.2;
}
/* =========================================================================
14. CONTACT US — dropdown arrows on selectors (Checklist: Contact-2)
CF7 selects use appearance:none with no arrow; add a chevron.
========================================================================= */
#contactus select.wpcf7-select,
#contactus .select_container select,
body .wpcf7-form .select_container select.wpcf7-select,
body .wpcf7-form select.wpcf7-select.fill_inited,
body .jobs-filter-bar select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-color: #fff !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e23744' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 12px 8px !important;
padding-right: 32px !important;
}
/* =========================================================================
15. CAREERS (Contact page #careers) (Checklist: Careers-1..3)
========================================================================= */
/* Ca-2: location filter text must not clip to "..." */
.jobs-filter-bar select,
.jobs-filter-bar .jobs-filter-control,
.jobs-filter-bar [class*="select"] {
max-width: 100% !important;
width: auto !important;
min-width: 150px !important;
text-overflow: clip !important;
white-space: normal !important;
}
/* Ca-3: heavy coloured blocks -> clean thin separators */
.jobs-filter-bar {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-bottom: 1px solid #e6e6e6 !important;
border-radius: 0 !important;
padding: 10px 0 !important;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.job-accordion-item,
[class*="job-accordion-item"] {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-bottom: 1px solid #e6e6e6 !important;
border-radius: 0 !important;
}
.job-accordion-title {
font-size: 17px !important;
}
/* Ca-1: keep the CAREERS section title clearly larger than its subtitle */
.elementor-element-419ca9d .sc_item_subtitle,
.elementor-element-419ca9d .elementor-widget-heading + .elementor-widget-heading h3 {
font-size: 14px !important;
}
/* Ca-4: resume upload — filename + a clear remove (x) chip below the button.
The name truncates so the x stays visible even for long file names. */
.bac-file-info {
/* JS toggles inline display (none <-> flex); these set the layout. */
align-items: center;
gap: 8px;
margin-top: 8px;
max-width: 100%;
font-size: 13px;
color: #2b2b2b;
}
.bac-file-info[style*="flex"] {
display: flex !important;
}
.bac-file-info .bac-file-name {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bac-file-remove {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
max-width: 20px !important;
padding: 0 !important;
margin: 0 0 0 8px !important; /* gap from the filename it sits next to */
vertical-align: middle !important;
border: 0 !important;
border-radius: 50% !important;
background: #e23744 !important;
color: #ffffff !important;
font-size: 14px !important;
line-height: 1 !important;
box-shadow: none !important;
cursor: pointer;
}
.bac-file-remove:hover {
background: #c92b3a !important;
}
/* when our own filename+x row is active, hide the theme's plain filename so
there's no duplicate (CSS beats the theme JS re-showing it). */
.bac-has-custom-file .uploaded-file-name {
display: none !important;
}
/* =========================================================================
16. DONATE — banner heading wrap + testimonial cards (Checklist: Donate-1,2)
========================================================================= */
/* D-1: keep "Change Happen" wrapping cleanly, not split awkwardly */
.elementor-element-dc0b5ba .sc_item_title,
.elementor-element-dc0b5ba h2 {
font-size: 20px !important;
line-height: 1.3 !important;
text-wrap: balance;
}
/* D-2: de-float the staggered grid into a clean vertical list of compact
landscape cards (image left, quote right) to remove dead space */
.testimonial-section .floating-grid {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
height: auto !important;
position: static !important;
}
.testimonial-section .floating-grid .card {
position: static !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
transform: none !important;
top: auto !important;
left: auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center;
gap: 12px;
padding: 14px !important;
text-align: left !important;
}
.testimonial-section .floating-grid .card > div[style*="position:relative"],
.testimonial-section .floating-grid .card .avatar {
flex: 0 0 auto;
}
.testimonial-section .floating-grid .card .avatar {
width: 78px !important;
height: 78px !important;
object-fit: cover;
}
.testimonial-section .floating-grid .card .details {
text-align: left !important;
flex: 1 1 auto;
}
/* Quote icon was floating in the gap between avatar and text; tuck it onto
the avatar's bottom-right corner so it sits close to the person. */
.testimonial-section .floating-grid .card .quote-icon {
left: 48px !important;
right: auto !important;
top: auto !important;
bottom: 2px !important;
}
/* The avatar's container was ~140px wide (avatar is only 78px), leaving empty
space before the text. Shrink it so the text block moves left to fill the
gap; its right edge stays the same (details is flex:1 and last in the row). */
.testimonial-section .floating-grid .card > div[style*="position:relative"] {
width: 90px !important;
flex: 0 0 90px !important;
min-width: 0 !important;
}
.testimonial-section .floating-grid .card {
gap: 10px !important;
}
/* Reduce the text inside the story cards for a cleaner, tighter look. */
.testimonial-section .floating-grid .card .details p {
font-size: 14px !important;
line-height: 1.5 !important;
margin-bottom: 10px !important;
}
.testimonial-section .floating-grid .card .details .author {
font-size: 13px !important;
line-height: 1.4 !important;
}
.testimonial-section .floating-grid .card .details .location {
font-size: 13px !important;
line-height: 1.4 !important;
}
/* =========================================================================
17. PRIVACY POLICY — typography spacing (Checklist: Privacy-1)
========================================================================= */
body.page-id-12954 .post_content,
body.page-id-12954 .entry-content {
line-height: 1.7 !important;
}
body.page-id-12954 .post_content p,
body.page-id-12954 .entry-content p,
body.page-id-12954 .post_content li,
body.page-id-12954 .entry-content li {
line-height: 1.7 !important;
margin-bottom: 0.85em !important;
}
body.page-id-12954 .post_content h2,
body.page-id-12954 .post_content h3,
body.page-id-12954 .entry-content h2,
body.page-id-12954 .entry-content h3 {
margin-top: 1.4em !important;
margin-bottom: 0.5em !important;
line-height: 1.3 !important;
}
/* =========================================================================
18. REPORTS — soften the muddy beige-yellow backdrop (Checklist: Reports-1)
========================================================================= */
/* All director bio panels — uniform background (matches Ashish's) */
#meet_directors .director_details,
#meet_directors .elementor-column.director_details,
#meet_directors .director_details.elementor-element {
background-color: rgb(255, 254, 247) !important;
}
/* =========================================================================
19. NEWSROOM — "Load More" button fits mobile width (Checklist: News-1)
========================================================================= */
.elementor-element-92dbd3e .load-more,
.load-more {
display: inline-block !important;
max-width: 100% !important;
white-space: nowrap;
margin-left: auto !important;
margin-right: auto !important;
}
.elementor-element-92dbd3e {
text-align: center !important;
}
/* =========================================================================
/* =========================================================================
20. PARTNERSHIPS — equal-width CTA buttons, SIDE BY SIDE, TWO-LINE
"Partnership Stories" & "Partner With Us" sit in one row, both buttons
wrap text to two lines for consistent visual weight.
(Checklist: Pr-2)
========================================================================= */
.elementor-element-d3043d6 .sc_button_wrap.sc_button_multiple {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 8px !important;
text-align: center !important;
}
.elementor-element-d3043d6 .sc_button.sc_button_multiple_item {
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
padding: 14px 16px !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
border-radius: 28px !important;
margin: 0 !important;
white-space: normal !important;
text-align: center !important;
min-height: 64px !important;
}
/* Force "Partner With Us" to wrap as "Partner With\nUs" (2 lines) */
.elementor-element-d3043d6 .sc_button.sc_button_multiple_item .sc_button_title,
.elementor-element-d3043d6 .sc_button.sc_button_multiple_item span {
display: inline-block;
white-space: normal;
max-width: 90px;
}
/* =========================================================================
21. PRIVACY — effective/last-updated note sized to the footer boilerplate
(Checklist: Pr-3). Was a 20px H3; bring it down to a small note line.
========================================================================= */
.elementor-element-45e4aa4 .sc_item_title,
.elementor-element-45e4aa4 h3 {
font-size: 14px !important;
line-height: 1.55 !important;
font-weight: 400 !important;
}
/* =========================================================================
22. HERO BANNERS — show the mobile image at its true proportions (item 6)
The banner images are 800x1000 (4:5) but the container was 410x675, so
`cover` cropped the sides and `contain` left dark letterbox bands. Instead
give the hero the image's own 4:5 aspect ratio so it fills exactly — full
image, no crop, no letterbox. All page banners share this 4:5 set.
========================================================================= */
.elementor-element-19f83f13.elementor-section-height-full,
.elementor-element-979b51b.elementor-section-height-full,
.elementor-element-d048d71.elementor-section-height-full,
.elementor-element-19f83f13,
.elementor-element-979b51b,
.elementor-element-d048d71 {
height: 125vw !important; /* 5/4 of full width => exact 4:5, no crop/letterbox */
min-height: 0 !important;
max-height: none !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
/* =========================================================================
24. ALIGNMENT — simple-button arrow icons vertically centred (user request)
sc_button_simple renders its arrow as an absolutely-positioned pseudo at
top:1px, which floats it above the label ("Explore the Program ->"). Centre
it so the arrow lines up with the text. Applies wherever sc_button_simple
is used, so no other instance has the same slip-up.
========================================================================= */
.sc_button.sc_button_simple:not(.bac-no-arrow)::before,
.sc_button.sc_button_simple:not(.bac-no-arrow)::after {
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
}
/* Keep the same gap between the label and the arrow as on desktop (~32px). */
.sc_button.sc_button_simple {
padding-right: 32px !important;
}
/* =========================================================================
23. BUTTONS — smaller, more mobile-appropriate sizing (user request)
========================================================================= */
/* Newsroom filter tabs: matches header Donate button size, left-aligned. */
.media-tabs {
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
gap: 6px !important;
overflow: visible !important;
padding-left: 0 !important;
}
.media-tabs > a,
.media-tabs > button {
flex: 0 1 auto !important;
width: auto !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 6px 14px !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1 !important;
white-space: nowrap !important;
text-align: center !important;
border-radius: 999px !important;
}
/* General CTA buttons: trimmer padding + size so they sit better on mobile.
(Buttons with their own bespoke rules — header Donate, in-menu items, the
See-All link, Apply/Login — keep those via higher specificity.
sc_button_simple is excluded: it needs its right padding to space the
arrow icon, exactly like desktop.) */
.sc_button.sc_button_size_normal:not(.sc_button_simple),
.sc_button.sc_button_size_large:not(.sc_button_simple),
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg,
.wpcf7-submit,
.bac-btn {
padding-top: 0.62em !important;
padding-bottom: 0.62em !important;
padding-left: 1.4em !important;
padding-right: 1.4em !important;
font-size: 14px !important;
}
/* =========================================================================
25. FAQ PAGE — category tabs as a dropdown (user request)
Hide the horizontal tabs, show the injected select (styled like the
guidelines popup dropdown, same chevron).
========================================================================= */
.elementor-element-8088f9c .elementor-tabs-wrapper {
display: none !important;
}
.bac-faq-dropdown {
display: block !important;
position: relative;
margin: 0 auto 18px;
max-width: 100%;
}
/* the theme wraps the select in .select_container and adds its OWN arrow
pseudo — kill it so only our single chevron shows (no double arrow). */
.bac-faq-dropdown.select_container::before,
.bac-faq-dropdown.select_container::after,
.bac-faq-dropdown::before,
.bac-faq-dropdown::after {
content: none !important;
display: none !important;
}
/* Matched to the Music Scholarship guidelines dropdown: same text treatment,
border, radius and chevron. */
.bac-faq-dropdown select.bac-faq-select {
width: 100%;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
padding: 14px 38px 14px 22px !important;
border: 1px solid rgb(208, 213, 213) !important;
border-radius: 50px !important;
background-color: transparent !important;
color: rgb(109, 115, 115) !important;
font-size: 14px !important;
line-height: 1.2 !important;
cursor: pointer;
/* same chevron as the guidelines dropdown (theme select-fill needs
!important to be overridden, hence these flags). */
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236d7373' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 12px 8px !important;
}
/* =========================================================================
26. MOBILE MENU — remove the logo from the slide-in nav (user request)
========================================================================= */
.menu_mobile .menu_mobile_header_wrap .sc_layouts_logo,
.menu_mobile .menu_mobile_header_wrap .logo,
.menu_mobile_inner .sc_layouts_logo {
display: none !important;
}
} /* end @media (max-width: 767px) */
/* ============================================================================
Desktop guard — mobile-only injected elements are hidden here so desktop
keeps its original layout.
============================================================================ */
@media (min-width: 768px) {
.bac-header-donate {
display: none !important;
}
/* FAQ keeps the horizontal tabs on desktop; the dropdown is mobile-only. */
.bac-faq-dropdown {
display: none !important;
}
}