/* Global Theme overrides */ :root { --HNLight: "HelveticaNeueLTW04-45Light", "HelveticaNeue", "Helvetica", "Arial", sans-serif; --HNLightWeight: 200; --HNRoman: "HelveticaNeueLTW04-55Roman", "HelveticaNeue", "Helvetica", "Arial", sans-serif; --HNRomanWeight: 300; --HNMedium: "HelveticaNeueLTW04-65Medium", "HelveticaNeue", "Helvetica", "Arial", sans-serif; --HNMediumWeight: 500; --HNBold: "HelveticaNeueLTW06-75Bold", "HelveticaNeue", "Helvetica", "Arial", sans-serif; --HNBoldWeight: 700; --GranRoman: "GranjonLTW01-Roman", "Garamond", "Times New Roman", serif; --GranRomanWeight: 300; /* UCSF Colors */ --ucsf-navy: #052049; --ucsf-dark-navy: #121A31; --ucsf-white: #ffffff; --ucsf-cta-blue: #006BE9; --ucsf-dark-blue: #0F388A; --ucsf-light-blue: #B9D6F4; --ucsf-gray: #878D96; --ucsf-red: #E61048; --ucsf-light-gray: #F2F3F4; --ucsf-light-med-gray: #E6E9ED; --ucsf-med-gray: #DCE0E6; --ucsf-cool-gray: #9BA6B6; --ucsf-blue-gray: #506380; --ucsf-dark-gray: #344460; --ucsf-menu-underline: #D5D9DE; --ucsf-hr-on-white-or-gray: var(--ucsf-cool-gray); --ucsf-hr-on-navy: var(--ucsf-blue-gray); /* Additional BCH Colors */ --bch-light-yellow: #FED658; --bch-portola-red: #EB5757; --bch-yosemite-purple: #8A8CE3; --bch-blue: #4896E8; --bch-point-reyes-green:#B4DC55; /* Common defaults */ --ucsf-small-text-shadow: rgba(0, 0, 0, 0.04); --ucsf-small-text-shadow2: rgba(0, 0, 0, 0.4); --site-black: #000; --ucsf-unset: unset; --ucsf-zero: 0; --ucsf-none: none; --ucsf-hidden: hidden; --ucsf-table-bottom-border: 1px solid var(--site-black); --ucsf-table-td-padding: 0.75rem 0.5rem; --ucsf-table-td-chair: 50%; /* Most of these will go away Keeping for now. */ --ucsf-font-style_normal: normal; --ucsf-font-stretch_normal:normal; --ucsf-webkit-font-smoothing: antialiased; --ucsf-osx-font-smoothing: grayscale; --ucsf-list-style-type: disc; /* DXP Sitewide UI redefines */ /* Desktop Base Font Size */ --dxp-s-html-font-size: 16px; /* Mobile Base Font Size */ --dxp-s-html-font-size-mobile: 16px; /* Headings and Body */ /* Font Family */ --dxp-s-level-font-family: var(--HNLight); /* Font Size */ --dxp-s-level-font-size: 1.125rem; /* Font Style */ --dxp-s-level-font-style: var(--ucsf-font-style_normal); /* Font Weight */ --dxp-s-level-font-weight: var(--HNLightWeight); /* Text Decoration */ --dxp-s-level-text-decoration: none; /* Doesn’t apply to Button Text. */ /* Text Case */ --dxp-s-level-text-transform: ; /* Line Height */ --dxp-s-level-line-height: 1.8; /* Character Spacing */ --dxp-s-level-letter-spacing: 0.013rem; /* Link Text */ /* Text Decoration Underline handled by border-botoom */ --dxp-s-link-text-decoration: none ; /* Focus Text Decoration */ --dxp-s-link-text-decoration-focus: none; /* Hover Text Decoration */ --dxp-s-link-text-decoration-hover: none ; /* Text */ /* Heading 1 */ --dxp-s-text-heading-extra-large-color: var(--ucsf-navy); --dxp-s-text-heading-extra-large-font-family: var(--HNBold) ; --dxp-s-text-heading-extra-large-font-size: 4rem; --dxp-s-text-heading-extra-large-line-height: 1.125 ; /* Heading 2 */ --dxp-s-text-heading-large-color: var(--ucsf-navy); --dxp-s-text-heading-large-font-family: var(--GranRoman) ; --dxp-s-text-heading-large-font-size: 3.5rem; --dxp-s-text-heading-large-line-height: 1.125 ; /* Heading 3 */ --dxp-s-text-heading-medium-color: var(--ucsf-navy); --dxp-s-text-heading-medium-font-family: var(--HNLight) ; --dxp-s-text-heading-medium-font-size: 2.25rem; --dxp-s-text-heading-medium-line-height: 1.125 ; /* Heading 4 */ --dxp-s-text-heading-small-color: var(--ucsf-navy); --dxp-s-text-heading-small-font-family: var(--HNLight) ; --dxp-s-text-heading-small-font-size: 2.25rem; --dxp-s-text-heading-small-line-height: 1.125 ; /* Paragraph 1 */ --dxp-s-body-text-color: var(--ucsf-navy); --dxp-s-body-text-font-family: var(--HNLight) ; --dxp-s-body-text-font-size: 1.25rem; --dxp-s-body-text-line-height: 1.8 ; /* Paragraph 2 */ --dxp-s-body-small-text-color: var(--ucsf-navy); --dxp-s-body-small-font-family: var(--HNRoman); --dxp-s-body-small-font-size: 0.875rem; --dxp-s-body-small-line-height: 1.715; --dxp-s-body-font-size: 1.125rem; /* --dxp-g-font-size-3 */ --dxp-s-body-font-style: var(--ucsf-font-style_normal); --dxp-s-body-font-family: var(--HNLight); --dxp-s-body-font-weight: var(--HNLightWeight); --dxp-s-body-text-decoration: none; --dxp-s-body-text-transform: normal; --dxp-s-body-line-height: 1.8; --dxp-s-body-letter-spacing: 0.013rem ; --dxp-s-body-text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); ; --dxp-s-body-text-color: var(--ucsf-navy); /* Links */ /* Link Color */ --dxp-s-link-text-color: var(--ucsf-cta-blue); /* Link Hover Color */ --dxp-s-link-text-color-hover: var(--ucsf-dark-blue); /* Buttons */ /* Button Color */ /* --dxp-s-button-color: var(--ucsf-white); */ /* Button Hover */ --dxp-s-button-color-hover: var(--ucsf-dark-blue); /* Button Focus */ --dxp-s-button-color-focus: var(--ucsf-dark-blue); --dxp-g-brand-focus: box-shadow:none; /* Button Active */ --dxp-s-button-color-active: var(--ucsf-dark-blue); /* Forms */ /* Input Text */ --dxp-s-form-element-text-color: var(--ucsf-dark-blue); /* Field Label */ --dxp-s-form-element-label-color: var(--ucsf-dark-blue); /* --dxp-s-form-element-label-background: var(--foo, green); --dxp-s-form-element-label-background-clor: var(--foo, green); */ /* Field Background Fill */ --dxp-s-form-element-color-background: var(--ucsf-white); /* Field Border Color */ --dxp-s-form-element-color-border: var(--ucsf-gray); /* Dropdown Text Color */ --dxp-s-dropdown-text-color: var(--ucsf-dark-blue); /* Dropdown Background Color */ --dxp-s-dropdown-color-background: var(--ucsf-med-gray); /* Dropdown Text Hover Color */ --dxp-s-dropdown-text-color-hover: var(--ucsf-dark-blue); /* Dropdown Background Hover Color */ --dxp-s-dropdown-color-background-hover: var(--ucsf-light-gray); /* Dropdown Border Color */ --dxp-s-dropdown-color-border: var(--ucsf-gray); /* Desktop Site Spacing */ /* Max Content Width */ /* --dxp-s-section-columns-max-width: ; */ --dxp-s-header-content-max-width: 1440px ; --dxp-s-footer-content-max-width: 1440px ; /* Section Padding: Top & Bottom */ /* --dxp-s-section-content-spacing-block-start: ; */ /* --dxp-s-section-content-spacing-block-end: ; */ /* Section Padding: Left & Right */ /* --dxp-s-section-content-spacing-inline-start: ; */ /* --dxp-s-section-content-spacing-inline-end: ; */ /* Column Gutters */ --dxp-s-column-spacer-size: 0 ; /* Vertical Space Between Components */ --dxp-s-component-wrapper-spacer-size: 0 ; /* Mobile Site Spacing */ /* Max Content Width */ --dxp-s-section-columns-max-width-mobile: 100%; --dxp-s-header-content-max-width-mobile: 100%; --dxp-s-footer-content-max-width-mobile: 100%; /* Section Padding: Top & Bottom */ /* --dxp-s-section-content-spacing-block-start-mobile: ; */ /* --dxp-s-section-content-spacing-block-end-mobile: ; */ /* Section Padding: Left & Right */ /* --dxp-s-section-content-spacing-inline-start-mobile: ; */ /* --dxp-s-section-content-spacing-inline-end-mobile: ; */ /* Column Gutters */ --dxp-s-column-spacer-size-mobile: 0 ; /* Vertical Space Between Components */ --dxp-s-component-wrapper-spacer-size-mobile: 0 ; /* --dxp-g-spacing-none: 0 !important; --dxp-g-spacing-xxxsmall: 0.125rem; --dxp-g-spacing-xxsmall: 0.25rem; --dxp-g-spacing-xsmall: 0.5rem; --dxp-g-spacing-small: 0.75rem; --dxp-g-spacing-medium: 1rem; --dxp-g-spacing-large: 1.5rem; --dxp-g-spacing-xlarge: 2rem; --dxp-g-spacing-xxlarge: 3rem; */ --dxp-g-root-font-family: var(--HNRoman); --dxp-g-heading-font-family: var(--HNBold); /* --dxp-g-font-size-1: 0.625rem; --dxp-g-font-size-2: 0.75rem; --dxp-g-font-size-3: 0.8125rem; --dxp-g-font-size-4: 0.875rem; --dxp-g-font-size-5: 1rem; --dxp-g-font-size-6: 1.125rem; --dxp-g-font-size-7: 1.25rem; --dxp-g-font-size-8: 1.5rem; --dxp-g-font-size-9: 1.75rem; --dxp-g-font-size-10: 2rem; --dxp-g-font-size-11: 2.625rem; */ /* Text Values for All Buttons */ /* Font Family */ --dxp-s-button-font-family: var(--HNMedium) ; /* Font Style */ --dxp-s-button-font-style: normal; /* Font Weight */ --dxp-s-button-font-weight: var(--HNMediumWeight) ; /* Text Case */ --dxp-s-button-text-transform: initial ; /* Line Height */ --dxp-s-button-line-height: 1.4; /* Character Spacing */ --dxp-s-button-letter-spacing: 0.013rem; /* Standard Button Values */ /* Horizontal Padding */ --dxp-s-button-padding: 1em; /* Font Size */ --dxp-s-button-font-size: 1.125rem; /* Border Radius */ --dxp-s-button-radius-border: 100px; /* Small Button Values */ /* Horizontal Padding */ /* --dxp-s-button-small-padding: ; */ /* Font Size */ /* --dxp-s-button-small-font-size: ; */ /* Border Radius */ /* --dxp-s-button-small-radius-border: ; */ /* Large Button Values */ /* Horizontal Padding */ /* --dxp-s-button-large-padding: ; */ /* Font Size */ /* --dxp-s-button-large-font-size: ; */ /* Border Radius */ /* --dxp-s-button-large-radius-border: ; */ /* Forms */ /* Border Radius */ --dxp-s-form-element-radius-border: 3px; /* Border Weight */ /* --dxp-s-form-element-width-border: ; */ /* Breakpoints that match the B2C LWR Template */ --ucsf-break-mobile-only: 479px; --ucsf-break-mobile-up: 480px; --ucsf-break-tablet-up: 768px; --ucsf-break-desktop-up: 1024px; --ucsf-max-content-width: 1440px; } /* end :root */ /* Can't use CSS Variables in media queries; only properties */ @media screen and (width <= 479px) {} /* only mobile; use only to specifically target only mobile */ /* @media screen and (min-width: 480px) {} mobile and up; should not need this as mobile is first/default */ @media screen and (min-width: 768px) {} /* tablet and up */ @media screen and (min-width: 1024px) {} /* desktop and up */ /* html { font-size:18px; } @media screen and (min-width: 1024px) { html { font-size: 16px; } } */ /* not sure this will work */ .slds-button_brand:focus, .slds-button_brand, .slds-button--brand-focus, .slds-button--brand:focus { box-shadow: none !important; /* Winter 25 fix */ } /* Body (--HNLight) */ body { background-color: var(--ucsf-light-gray); font-family: var(--HNLight); font-weight: var(--HNLightWeight); font-size: 1.125em; font-style: var(--ucsf-font-style_normal); font-stretch: var(--ucsf-font-stretch_normal); -webkit-font-smoothing: var(--ucsf-webkit-font-smoothing); -moz-osx-font-smoothing: var(--ucsf-osx-font-smoothing); -webkit-text-size-adjust: none; text-size-adjust: none; line-height: 1.8; letter-spacing: 0.013rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); color: var(--ucsf-navy); } body p, body ul { margin-bottom: 3rem; } body nav ul { margin-bottom: 0; } /* Body Bold (--HNMedium) */ .body-bold, body strong, body p strong, body b, body p b { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); } /* Body Links (--HNMedium) */ body a, body p a { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); color: var(--ucsf-cta-blue); border-bottom: 2px solid var(--ucsf-cta-blue); text-decoration: none; transition: color 0.15s cubic-bezier(0.33,0.66,0.66,1); } a:hover, a:focus { color: var(--ucsf-dark-blue); border-bottom: 2px solid var(--ucsf-dark-blue);/* revisit this */ text-decoration: none; box-shadow:none; /* Winter '25 fix */ } /* This is added by the framework * { box-sizing: border-box; } */ a:focus-visible { outline: -webkit-focus-ring-color auto 1px; } a:-webkit-any-link:focus-visible { outline-offset: 1px; } div.content { background-color: var(--ucsf-white); } /* >>>>>>====== nav menus @note NAV =========<<<<<< */ .nav-menus button[title="Navigation Menu Trigger"] { margin-right:10px; } @media screen and (max-width: 767px) { .nav-menus nav ul[aria-label="Ways to Give"] li a[href^="http"] { background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link.svg") ; background-repeat: no-repeat; background-position: 95% center; } /* .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(5) a, .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(7) a, .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(11) a { background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link.svg") ; background-repeat: no-repeat; background-position: 95% center; } */ .nav-menus nav ul[aria-label="Ways to Give"] li a[href^="http"]:hover { background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link-hover.svg"); } /* .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(5) a:hover, .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(7) a:hover, .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(11) a:hover, .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(5) a:focus, .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(7) a:focus, .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(11) a:focus { background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link-hover.svg") ; } */ .nav-menus span.close-button-wrapper { top: 39px; background-color: white; z-index: 10; } .nav-menus span.close-button-wrapper button { margin-right:10px; } .nav-menus span.close-button-wrapper button svg { width: 30px; height:30px; } .nav-menus nav ul { background-color: var(--ucsf-light-gray) !important; padding-top: 3rem; z-index: 5 !important; /* border-left: 10px solid var(--ucsf-gray); */ overflow-y:scroll; } .nav-menus .mobile-menu-container, .nav-menus .mobile-menu-container commerce-drilldown-navigation-list nav.activeMenu { background-color: var(--ucsf-light-gray) !important; } .nav-menus nav ul li button { background:none !important; border-radius:0 !important; box-shadow:none !important; border-bottom: 2px solid var(--ucsf-menu-underline)!important; font-family: var(--HNlight); font-weight: var(--HNLightWeight); font-size: 1rem !important; padding: 0.75rem 2rem; } .nav-menus nav ul[aria-label="Ways to Give"] li button, .nav-menus nav ul[aria-label="Explore Funds"] li button { color: var(--ucsf-cta-blue); } .bch-navigation-menus .nav-menus nav ul li button, .bch-navigation-menus .nav-menus nav ul[aria-label="Ways to Give"] li a, .bch-navigation-menus .nav-menus nav ul[aria-label="Explore Funds"] li a { padding: 0.75rem 2rem; background:none; background-color: var(--ucsf-light-gray) !important; } .bch-navigation-menus .nav-menus nav ul li button lightning-icon, .bch-navigation-menus .nav-menus nav ul[aria-label="Ways to Give"] li a lightning-icon, .bch-navigation-menus .nav-menus nav ul[aria-label="Explore Funds"] li a lightning-icon { right:5px !important; } .nav-menus nav ul li a { background-color: transparent !important; font-family: var(--HNLight); font-weight: var(--HNlightWeight); font-size: 1rem !important; line-height:1.4; border-bottom: 1px solid var(--ucsf-menu-underline); padding:0.75rem 1.5rem; } .nav-menus nav ul li a:hover, .nav-menus nav ul li a:focus { color: var(--ucsf-cta-blue) !important; background-color: var(--ucsf-light-med-gray) !important; } } /* @media */ @media screen and (min-width: 768px) { .nav-menus nav ul li:first-child nav ul li a[href^="http"] { background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link.svg") ; background-repeat: no-repeat; background-position: right center; } /* .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(5) a:hover */ /* .nav-menus nav ul li:first-child nav ul li:nth-child(4) a, .nav-menus nav ul li:first-child nav ul li:nth-child(6) a, .nav-menus nav ul li:first-child nav ul li:nth-child(10) a { background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link.svg") ; background-repeat: no-repeat; background-position: right center; } */ .nav-menus nav ul li:first-child nav ul li a[href^="http"]:hover{ background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link-hover.svg") ; } /* .nav-menus nav ul li:first-child nav ul li:nth-child(4) a:hover, .nav-menus nav ul li:first-child nav ul li:nth-child(6) a:hover, .nav-menus nav ul li:first-child nav ul li:nth-child(10) a:hover, .nav-menus nav ul li:first-child nav ul li:nth-child(4) a:focus, .nav-menus nav ul li:first-child nav ul li:nth-child(6) a:focus, .nav-menus nav ul li:first-child nav ul li:nth-child(10) a:focus { background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link-hover.svg") ; } */ .nav-menus nav { min-width:unset; } .nav-menus nav ul li button { background:none !important; border-radius:none !important; box-shadow:none !important; padding: 30px 0 26px 0 !important; border-bottom: 4px solid transparent !important; border-radius: 0; margin-right: 1.5rem; } .nav-menus nav ul li button > lightning-icon { display:none; } .nav-menus nav ul li button:hover, .nav-menus nav ul li button:focus, .nav-menus nav ul li button[aria-expanded="true"] { border-bottom: 4px solid var(--ucsf-cta-blue) !important; background:none !important; border-radius:none !important; box-shadow:none !important; } .nav-menus nav ul li a, .nav-menus nav ul li ul li a { text-decoration: var(--none, none); border-bottom: var(--none, none); } .nav-menus nav ul { min-width:300px; } .nav-menus nav ul, .nav-menus nav ul li ul { max-height: var(--unset, unset); /* max-width: var(--unset, unset); */ } .nav-menus nav ul li nav ul { min-width: 700px !important; min-height: 300px; top: 86px !important; padding:2rem; border: none; background-color: var(--ucsf-light-gray) !important; column-count: 2; border-top: none; border-right:none; border-bottom:none; border-left: 40px solid var(--ucsf-navy); overflow: visible !important; box-shadow: 0 12px 12px rgba(0,0,0,0.2) !important; } .nav-menus nav ul li:nth-child(1) nav ul { /* right:-250px; */ right:-440px; } .nav-menus nav ul li:nth-child(2) nav ul { /* right: -100px; */ right: -320px; } @media screen and (min-width: 1270px) { .nav-menus nav ul li:nth-child(1) nav ul { right:-250px } .nav-menus nav ul li:nth-child(2) nav ul { right: -300px; } } /* ===== NAV MENUS ====== */ .nav-menus nav ul li nav ul:before { position: absolute; /* width: 200px; */ /* height: 40px; */ /* height: 200px; */ color: white; font-family: var(--HNBold); font-weight: var(--HNBoldWeight); font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.1rem; margin: 0; padding: 0 0 45px 0; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); text-transform: uppercase; writing-mode: vertical-lr; white-space: nowrap; /* transform: rotate(90deg); transform-origin: top left; */ z-index: 2; top: 1rem; left: -30px; /* background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0MCAxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MCAxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxyZWN0IHg9IjAiIGNsYXNzPSJzdDAiIHdpZHRoPSI0MCIgaGVpZ2h0PSIxIi8+Cjwvc3ZnPgo="); */ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBNSVQuIE1hZGUgYnkgcmFkaXgtdWk6IGh0dHBzOi8vZ2l0aHViLmNvbS9yYWRpeC11aS9pY29ucyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aAogICAgZmlsbC1ydWxlPSJldmVub2RkIgogICAgY2xpcC1ydWxlPSJldmVub2RkIgogICAgZD0iTTcuNSAyQzcuNzc2MTQgMiA4IDIuMjIzODYgOCAyLjVMOCAxMi41QzggMTIuNzc2MSA3Ljc3NjE0IDEzIDcuNSAxM0M3LjIyMzg2IDEzIDcgMTIuNzc2MSA3IDEyLjVMNyAyLjVDNyAyLjIyMzg2IDcuMjIzODYgMiA3LjUgMloiCiAgICBmaWxsPSIjRkZGRkZGIgogIC8+Cjwvc3ZnPg=="); background-repeat: no-repeat; /* background-size: 40px 1px; */ background-size: 200%; /* background-position: 85% 7px; */ background-position: 53% 100%; } .nav-menus nav ul li:nth-child(1) nav ul:before { content: "Ways To Give"; /* background-position: 73% 7px; */ } .nav-menus nav ul li:nth-child(2) nav ul:before { content: "Explore Funds"; } .nav-menus nav ul li nav ul li { border-bottom: 1px solid var(--ucsf-menu-underline); } .nav-menus nav ul li nav ul li a { background-color: transparent !important; font-family: var(--HNLight); font-weight: var(--HNLightWeight); font-size: 1rem !important; } .nav-menus nav ul li nav ul li a:hover, .nav-menus nav ul li nav ul li a:focus { background-color: var(--ucsf-light-med-gray) !important; } } /* @media */ /* .nav-menus .mobile-menu-container commerce-drilldown-navigation-list .close-button-wrapper + nav ul li:last-child:not(:is(.nav-menus nav.activeMenu ul li:last-child)) { */ .nav-menus .mobile-menu-container commerce-drilldown-navigation-list nav ul li:last-child:not(:is(.nav-menus nav.activeMenu ul li:last-child)) { position:absolute; bottom: -1px; left:0px; right:0px; } .nav-menus .mobile-menu-container commerce-drilldown-navigation-list nav ul li:last-child a:not(:is(.nav-menus nav.activeMenu ul li:last-child a)) { /* .nav-menus .mobile-menu-container commerce-drilldown-navigation-list nav ul li:last-child a:not(:is(.nav-menus nav.activeMenu ul li:last-child a)) { */ /* .nav-menus .mobile-menu-container commerce-drilldown-navigation-list .close-button-wrapper + nav ul li:last-child a { */ background-color: var(--ucsf-cta-blue) !important; font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.125rem; line-height: 1.4; letter-spacing: 0.013rem; text-align: left; color: var(--ucsf-white) !important; cursor: pointer; text-shadow: unset !important; background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/heart-white.svg"); background-repeat: no-repeat; background-position: calc(100% - 1.5rem) center; border: none; } .nav-menus .mobile-menu-container commerce-drilldown-navigation-list nav ul li:last-child a:focus:not(:is(.nav-menus nav.activeMenu ul li:last-child a:focus)) { background-color: var(--ucsf-navy) !important; } .nav-menus .mobile-menu-container commerce-drilldown-navigation-list lightning-button-icon button lightning-primitive-icon svg, .nav-menus .mobile-menu-container commerce-drilldown-navigation-list lightning-button-icon button:focus lightning-primitive-icon svg { fill: var(--ucsf-cta-blue); } @media screen and (min-width: 768px) { .nav-menus commerce-drilldown-navigation-bar > nav > ul > li:nth-child(2) button { margin-right:0; } .nav-menus commerce-drilldown-navigation-bar > nav > ul > li:last-child { display: none; } } .badgeContainer { padding:0; max-width: 50px; /* z-index: 10; top: -20px; right: 67px; position: relative; */ } .badgeContainer span.cart-container { display:block; padding:0; } .badgeContainer span.cart-container a { border: none !important; } /* Hide original SVG */ .badgeContainer span.cart-container a .icon-container svg { display:none !important; /* fill: var(--ucsf-cta-blue); */ /* width: 2rem; height:2rem; */ } .badgeContainer span.cart-container a .icon-container { display:block; background-image:url("/sfsites/c/resource/ucsf_svg_icons_1/cart-nav.svg"); background-repeat: no-repeat; background-position: center 24px; background-size: 32px; width:50px; height: 85px; border-bottom: 4px solid transparent; } .badgeContainer span.cart-container a .icon-container:hover, .badgeContainer span.cart-container a .icon-container:focus{ background-image:url("/sfsites/c/resource/ucsf_svg_icons_1/cart-nav-hover.svg"); border-bottom: 4px solid var(--ucsf-cta-blue); } .badgeContainer span.cart-container a .icon-container:focus{ outline:2px solid var(--ucsf-cta-blue); } .badgeContainer .slds-notification-badge.show-notification { font-family: var(--HNBold); font-weight: var(--HNBoldWeight); width: 20px; height: 20px; line-height: 20px; font-size: 12px; right: -5px; top:20%; } body .homepage-main-body-content { background-color: var(--ucsf-white) !important; } .homepage-top-swoosh { padding-bottom:3rem !important; } .homepage-bottom-swoosh { margin-top:3rem !important; } @media screen and (min-width: 480px ) { .homepage-top-swoosh { background: url(/sfsites/c/resource/ucsf_long_swooshes_left/ucsf-bg-swoop-left-gray.svg) center 275px / 100% no-repeat; } .homepage-bottom-swoosh { background: url(/sfsites/c/resource/ucsf_long_swooshes_right/ucsf-bg-swoop-right-gray.svg) center 0px / 100% no-repeat; } }/* media */ .homepage-main-body-content .subscribe-section { background-color: var(--ucsf-white); } /* homepage-search-input cat-search-searchbox .homepage-search-input { width:100%; max-width:800px; margin:0 auto; } .homepage-search-input div.input-container { height: unset !important; filter: drop-shadow(0px 12px 12px rgba(0,0,0,0.04)); } .homepage-search-input .input-wrapper { border-radius: 100px 0 0 100px !important; border-width:2px !important; padding:2rem 0 2rem 2rem !important; height:100px; border-right: none !important; } .homepage-search-input input.search-input-with-button { padding:0 !important; font-family: var(--HNLight); font-weight: var(--HNLightWeight); font-size: 1.5rem !important; line-height: normal; } .homepage-search-input button.input-search-button { height:100px !important; padding:2rem 2rem 2rem 0 !important; border-radius: 0 100px 100px 0 !important; border-width: 2px; background-color: var(--ucsf-white); border-left: none !important; } .homepage-search-input div#placeholder { } .homepage-search-input button.input-search-button svg { width: 30px !important; height:30px !important; fill: var(--ucsf-cta-blue) !important; } */ /* commerce-search-input div.input-container div.input-wrapper input.search-input-with-button div.input-icon-container div.lwc-5j9kqrar72e button.input-search-button */ .homepage-give-now-section, .why-give-section { padding:2rem 0 !important; } @media screen and (min-width: 768px ) { .homepage-give-now-section, .why-give-section { padding:3rem 2rem !important; } } @media screen and (min-width: 1024px ) { .homepage-give-now-section, .why-give-section { padding:3rem 3rem !important; } } @media screen and (min-width: 1280px ) { .homepage-give-now-section, .why-give-section { padding:3rem 6rem !important; } } .homepage-give-now-section .homepage-give-now-title { margin-top:2rem; margin-bottom:0; } .homepage-give-now-section .homepage-give-now-copy p { max-width:450px; } /* .main-body-section .homepage-main-body-content .homepage-give-now-section*/ .main-body-section .homepage-main-body-content .homepage-give-now-section .homepage-give-now-button a { padding-left:4.5rem !important; padding-right:3rem !important; background-image:url("/sfsites/c/resource/ucsf_svg_icons_1/heart-white.svg"); background-repeat: no-repeat; background-position: 30px center; background-size: 35px; } .main-body-section .homepage-main-body-content .homepage-give-now-section .homepage-give-now-button a:focus { box-shadow:none; /* Winter '25 fix */ } .other-ways-to-give-links { margin:0 5vw !important; } .other-ways-to-give-links a p { display: inline-block !important; /* winter '25 fix */ color: var(--ucsf-navy); font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.13rem; line-height: 1.2; border-bottom: 2px solid var(--ucsf-navy); padding-top:2px; padding-bottom:4px; } .other-ways-to-give-links a { display:block; text-align: center; border:none; margin-bottom:2.25rem; } .other-ways-to-give-links a[href^="http"] p { display: inline-block; /* winter '25 fix */ background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link.svg") ; background-repeat: no-repeat; background-position: right center; padding-right:30px !important; } .other-ways-to-give-links a p:hover { color: var(--ucsf-cta-blue); border-bottom: 2px solid var(--ucsf-cta-blue); } .why-give-section { } .why-give-section .why-give-title {} .why-give-section .why-give-copy {} /* Sitewide H1 = Fund + Cart + Basic H1 (--HNBold) */ h1, .h1 { font-family: var(--HNBold); font-weight: var(--HNBoldWeight); font-size: 2rem !important; color: var(--ucsf-navy); line-height: 1.125; letter-spacing: -0.038rem ; margin-bottom: 3rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } @media screen and (min-width: 768px) { h1, .h1 { font-size: 3rem !important; } } /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) { h1, .h1 { font-size: 4rem !important; letter-spacing: -0.125rem; } } /* Sitewide H2 = Fund Description/Make My Gift Sidebar + Basic H2 (--GranRoman) */ h2, .h2, .fund-description, .make-my-gift-sidebar-block, .make-my-gift-sidebar-block h2 { font-family: var(--GranRoman); font-weight: var(--GranRomanWeight); font-size: 2rem; line-height: 1.125; letter-spacing: -0.038rem; margin-bottom: 2rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) { h2, .h2, .fund-description, .make-my-gift-sidebar-block, .make-my-gift-sidebar-block h2 { font-size: 3.5rem; letter-spacing: -0.075rem; } } /* Cart H2 + Sitewide H3 = Fund Description H3 + Basic H3 (--HNLight) */ h3, .h3, .cart h2, .cart .h2, .cart .fund-description h3 { font-family: var(--HNLight); font-weight: var(--HNLightWeight); font-size: 1.5rem; line-height: 1.4; letter-spacing: -0.025rem; margin-bottom: 2rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) { h3, .h3, .cart h2, .cart .h2, .cart .fund-description h3 { font-size: 2.25rem; letter-spacing: -0.05rem; margin-bottom: 3rem; } } /* Sitewide H4 = Fund "Make My Gift" Sidebar H3 + Basic Sidebar H3 (--GranRoman) */ h4, .h4, .fund-make-my-gift-sidebar h3, h3.sidebar { font-family: var(--GranRoman); font-weight: var(--GranRomanWeight); font-size: 2rem; line-height: 1.125; letter-spacing: -0.038rem; margin-bottom: 2rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) { h4, .h4, .fund-make-my-gift-sidebar h3, h3.sidebar { font-size: 2.25rem; letter-spacing: -0.025rem; } } /* Sitewide H5 (--HNMedium) */ h5, .h5 { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.25rem; line-height: 1.4; letter-spacing: 0.013rem; margin-bottom: 2rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) { h5, .h5 { font-size: 1.5rem; line-height: 1.8; } } /* Sitewide H6 (--HNMedium) */ h6, .h6 { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.125rem; line-height: 1.8; letter-spacing: 0.013rem; margin-bottom: 3rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) {} /* This is for category descriptions Larger font */ /* Fund Sidebar Links List (--HNMedium) */ .fund-sidebar { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); color: var(--ucsf-navy); /* border-bottom: 2px solid var(--ucsf-navy); */ } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) {} /* Big Links (--HNMedium) */ .big-links { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.5rem; line-height: 1.8; letter-spacing: 0.013rem; margin-bottom: 2rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); border-bottom: 2px solid var(--ucsf-navy); } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) {} /* Featured Paragrah = Under H1/H2s (--HNLight) */ .featured-text { font-family: var(--HNLight); font-weight: var(--HNLightWeight); font-size: 1.5rem; line-height: 1.5; letter-spacing: 0.013rem; margin-bottom: 3rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); color: var(--ucsf-blue-gray); } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) {} /* Small Text (--HNRoman) */ .small-text { font-family: var(--HNRoman); font-weight: var(--HNRomanWeight); font-size: 0.875rem; line-height: 1.715; letter-spacing: 0.019rem; margin-bottom: 2rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) {} /* Eyebrow (--HNBold) Was this intended to be all uppercase? */ .eyebrow { font-family: var(--HNBold); font-weight: var(--HNBoldWeight); font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.1rem; margin:0; padding:0; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); text-transform: uppercase; } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) {} .small-eyebrow { font-family: var(--HNBold); font-weight: var(--HNBoldWeight); font-size: 0.625rem; line-height: 1.4; letter-spacing: 0.1rem; margin-bottom: 0.75rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); text-transform: uppercase; } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) {} /* Home Heading H2-Bold = Big "Give Now" Headers (--HNBold) */ .home-heading-h2, .home-heading-h2 h2 { font-family: var(--HNBold); font-weight: var(--HNBoldWeight); font-size: 2.375rem; line-height: 1.125; letter-spacing: -0.038rem; margin-bottom: 3rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } @media screen and (min-width: 768px) { .home-heading-h2, .home-heading-h2 h2 { font-size: 3rem; /* letter-spacing: -0.125rem; */ } } @media screen and (min-width: 1024px) { .home-heading-h2, .home-heading-h2 h2 { font-size: 4rem; /* letter-spacing: -0.125rem; */ } } @media screen and (min-width: 1280px) { .home-heading-h2, .home-heading-h2 h2 { font-size: 6rem; /* letter-spacing: -0.125rem; */ } } /* Home H2-Light = "Find your fund" and "Other ways to give" (--HNLight) */ .home-heading-light-h2, .home-heading-light-h2 h2 { font-family: var(--HNLight); font-weight: var(--HNLightWeight); font-size: 2rem; line-height: 1.25; letter-spacing: -0.038rem; margin-bottom: 3rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) { .home-heading-light-h2, .home-heading-light-h2 h2 { font-size: 3.5rem; line-height: 1.25; letter-spacing: -0.075rem; } } /* Category H1 (--HNLight) */ .category-heading-light-h1, .category-heading-light-h1 h1 { font-family: var(--HNLight); font-weight: var(--HNLightWeight) !important; font-size: 2rem; line-height: 1.25; letter-spacing: -0.038rem; margin-top:3.75rem; margin-bottom: 1rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) { .category-heading-light-h1, .category-heading-light-h1 h1 { font-size: 3.5rem; line-height: 1.25; letter-spacing: -0.075rem; } } /* SearchResults H1 (--HNLight) */ .searchresults-heading-light-h1, .searchresults-heading-light-h1 h1 { font-family: var(--HNLight); font-weight: var(--HNLightWeight) !important; font-size: 2rem; line-height: 1.25; letter-spacing: -0.038rem; margin-top:1rem; margin-bottom: 0; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) { .searchresults-heading-light-h1, .searchresults-heading-light-h1 h1 { font-size: 3.5rem; line-height: 1.25; letter-spacing: -0.075rem; } } /* This does not work due to the variant css class bug not carrying over variant classes */ .explore-funds-heading-variant h1 { margin-top: 3.75rem; margin-bottom:1rem; } community_layout-section.category-section community_layout-column webruntime-slot-container webruntime-component-container dxp_base-text-block h1 { margin-top: 3.75rem; margin-bottom:1rem; background-color:unset; } /* =============================*/ /* @note Top Header Search Bar */ .searchContainer .input-container .input-wrapper, .searchContainer .input-container .input-wrapper.active { border:none !important; border-bottom: 1px solid var(--ucsf-blue-gray) !important; border-radius: 0 !important; box-shadow: none; background-color: transparent !important; } .searchContainer .input-container .input-wrapper.active { } .searchContainer .input-container { height:unset !important; } .searchContainer .input-container input.search-input-with-button { padding: 0 !important; font-family: var(--HNLight); font-weight: var(--HNLightWeight); font-size: 1.3rem; color: var(--ucsf-blue-gray); box-shadow:none; border-radius:0 !important; background-color:transparent !important; text-overflow:ellipsis; } @media screen and (min-width:600px ){ .searchContainer .input-container input.search-input-with-button { font-size: 2rem; } } .searchContainer .input-container button.input-search-button { position: relative; top: 4px; padding: 0 0 0.25rem 0 !important; height:unset !important; border:none !important; border-bottom:1px solid var(--ucsf-navy) !important; background-color:transparent !important; box-shadow: none; border-radius: 0 !important; } .searchContainer .input-container button.input-search-button svg { fill: var(--ucsf-cta-blue) !important; width: 30px; } .searchContainer .closeSearchBtn button { color: unset; background:none; border:none; } .searchContainer .closeSearchBtn button:hover { background: none; border:none; } .searchContainer .closeSearchBtn button svg { width: 35px; height:35px; border-radius: 40px; color: var(--ucsf-cta-blue); } .searchContainer .closeSearchBtn button svg:hover { color: var(--ucsf-dark-blue); background-color: var(--ucsf-light-gray); } .searchContainer .searchBox .closeSearchBtn { position: absolute; top:10px; right: 10px; } .searchresults-section { background-color: var(--ucsf-light-gray); } /* changed in component .searchresults-section div[c-categorydescription_categorydescription].category-description_main { padding-bottom:3.75rem; } */ /* Only for Explore all category; compoonent variation set in admin ui, which adds the new classname */ c-category-description .category-description.explore-all .category-description_main-content{ color:var(--ucsf-navy); } .transparent-bak { background-color:transparent !important; } /* Not sure why this has to be in head markup and not here */ /* .category-section { background-color: var(--ucsf-light-gray); } .category-section c-category-description lightning-formatted-rich-text span::part(formatted-rich-text) p { color:red; } */ /* Summer '24 Structure */ /* .category-section-results section.results-layout commerce_builder-search-results-layout.category-results-layout section.left-container commerce_builder-search-filters.category-filters div.panel-wrapper div.panel-container commerce_search-filters-panel div.panel-class div.header-and-body section h3.filters-header // filters column header lightning-button button section commerce-search-filters-category-list commerce-search-filters-category-section commerce-search-filters-panel-section div.categories-section div.section-header h3 // header of category figure button div#categories-section div.category-list commerce-link-list ul.is-root li.is-leaf p a //link of category */ commerce_search-filters-panel .panel-class { margin-right:1rem; } commerce_search-filters-panel .header-and-body .filters-header { margin-bottom:0; font-size: 1.6rem; letter-spacing: normal; font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); } commerce_builder-search-results-layout > .search-container > .category-header { padding:0 !important; margin:0; } commerce_builder-search-results-layout > .search-container > .category-header > webruntime-component-container dxp_base-text-block p { margin:0; } section.filters-container { margin-bottom:1rem; align-items: flex-end; } .category-section-results .category-filters { margin:0; padding:0; } .category-section-results .category-sort { margin:0; padding:0; } .sorting-menu { /* margin-top: 10px; margin-right: 10px; */ } /* commerce_builder-search-sort-menu commerce_search-sort-menu commerce-dropdown lightning-button-menu button, commerce_builder-search-sort-menu commerce_search-sort-menu commerce-dropdown lightning-button-menu button:hover { */ commerce-dropdown lightning-button-menu button, commerce-dropdown lightning-button-menu button:hover { background: none; margin-left: 20px; border-radius: unset; } commerce_builder-search-sort-menu commerce_search-sort-menu commerce-dropdown div[part="overlay dropdown"] { background-color:white; } commerce_builder-search-sort-menu commerce_search-sort-menu commerce-dropdown div[part="overlay dropdown"] lightning-menu-item { border:none; } commerce_builder-search-sort-menu commerce_search-sort-menu commerce-dropdown div[part="overlay dropdown"] lightning-menu-item [part="menu-item"] { border:none } commerce_builder-search-sort-menu commerce_search-sort-menu commerce-dropdown div[part="overlay dropdown"] lightning-menu-item [part="menu-item"] a { border:none; } @media screen and (max-width: 1024px) { commerce_builder-search-results-layout .right-container .header-container { padding-right:0; } commerce_builder-search-sort-menu .right-container .header-container .search-header { } /* commerce_builder-search-sort-menu .right-container .header-container .search-header .sorting-menu webruntime-component-container commerce_builder-search-sort-menu button.sort-filter-button { */ commerce_builder-search-sort-menu button.sort-filter-button { background-color: var(--ucsf-cta-blue) !important; text-decoration:none !important; } commerce-search-filters-panel-section lightning-radio-group fieldset input[type="radio"]:checked, commerce-search-filters-panel-section lightning-radio-group fieldset input[type="radio"]:checked + label { background-color: transparent !important; } commerce_builder-search-filters commerce-search-filters .panel-wrapper { width: unset; } commerce_builder-search-results-layout .search-container .content-container { display:block !important; /* important correction for mobile to fit */ } commerce_search-product-grid ul { } commerce_search-product-grid ul li { padding:1rem !important; } /* remove sticky Make A Gift button on mobile */ commerce_builder-sticky-container .sticky-container .sticky { position:relative !important; } } /* @media mobile */ @media screen and (min-width:768px) and (max-width:1024px){ commerce_builder-search-filters commerce-search-filters .panel-container { width: 375px !important; left: -375px !important; } } .category-section-results .category-sort button.slds-input_faux { background-color: var(--ucsf-white); } .category-section-results .category-sort .slds-listbox.slds-listbox_vertical.slds-dropdown { background-color: var(--ucsf-white); } .category-section-results .category-sort .slds-listbox.slds-listbox_vertical.slds-dropdown .slds-media__body span { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 0.8rem; } .category-section-results section.results-container p, .category-section-results div[slot="searchHeader"] p, .bch-category-section-results section.results-container p, .bch-category-section-results .bch-category-results-layout .header dxp_base-text-block p { margin-bottom:0 ; } .category-section-results { padding:0; } .category-section-results .category-results-layout { margin:0 1rem; background-color: transparent; } /* Old Spring '24 layout .category-section-results, .category-section .category-section-results, .category-section-results .category-results-layout, .bch-category-section-results, .bch-category-section-results section.results-container, .bch-category-section-results .category-results-layout, .bch-category-section-results .bch-category-results-layout { padding-top:0; } commerce_builder-search-results-layout.bch-category-results-layout section.results-container, commerce_builder-search-results-layout section.results-container { padding-top:1rem !important; } */ @media screen and (min-width: 768px ) { .category-section-results .category-results-layout { margin:0 2rem; } } @media screen and (min-width: 1024px ) { .category-section-results .category-results-layout { margin:0 3rem; } } @media screen and (min-width: 1280px ) { .category-section-results .category-results-layout { margin:0 6rem; } } .bch-category-section-results .bch-category-results-layout #categories-section ul.is-root, #categories-section .category-list ul.is-root, .bch-category-section-results .bch-category-results-layout #categories-section ul.is-root li, #categories-section .category-list ul.is-root li { --com-c-link-list-font-size: unset !important; margin-bottom:1rem; font-size: 0.875rem !important; } .bch-category-section-results .bch-category-results-layout #categories-section ul.is-root li, #categories-section .category-list ul.is-root li, .bch-category-section-results .bch-category-results-layout #categories-section ul.is-root li h3, .bch-category-section-results .bch-category-results-layout #categories-section ul.is-root li p, #categories-section .category-list ul.is-root li h3, #categories-section .category-list ul.is-root li p { padding:0; margin:0.5rem 0 0 0; } .bch-category-section-results .bch-category-results-layout #categories-section ul.is-root li h3 a, .bch-category-section-results .bch-category-results-layout #categories-section ul.is-root li p a, #categories-section .category-list ul.is-root li h3 a, #categories-section .category-list ul.is-root li p a { padding:0; margin:0; border-bottom:2px solid transparent; color: var(--ucsf-navy); text-decoration: none; font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 0.875rem; white-space: normal; letter-spacing:0.025rem; } .bch-category-section-results .bch-category-results-layout #categories-section ul.is-root li h3 a:hover, .bch-category-section-results .bch-category-results-layout #categories-section ul.is-root li p a:hover, #categories-section .category-list ul.is-root li h3 a:hover, #categories-section .category-list ul.is-root li p a:hover, .bch-category-section-results .bch-category-results-layout #categories-section ul.is-root li h3 a:focus, .bch-category-section-results .bch-category-results-layout #categories-section ul.is-root li p a:focus, #categories-section .category-list ul.is-root li h3 a:focus, #categories-section .category-list ul.is-root li p a:focus { text-decoration: none; color: var(--ucsf-cta-blue) !important; border-bottom: 2px solid var(--ucsf-cta-blue); } commerce_builder-search-results-layout.component-wrapper-spacer { margin:0 1rem; } @media screen and (min-width: 768px ) { commerce_builder-search-results-layout.component-wrapper-spacer { margin:0 2rem; } } @media screen and (min-width: 1024px ) { commerce_builder-search-results-layout.component-wrapper-spacer { margin:0 3rem; } } @media screen and (min-width: 1280px ) { commerce_builder-search-results-layout.component-wrapper-spacer { margin:0 6rem; } } .sort-by-label.eyebrow { margin-top:0; } /* Spring '24 Layout (old) commerce_builder-search-results-layout section.results-container article.results-container aside.filters div.filters-header h2.filters-title lightning-button.clear-all button[part="button"] section#categories-section commerce_search-category-tree h2 ul.categories li li.selected-category section.facets-section (3 sections) commerce_search-facet div.facet-header h2.facet-name figure div.facet-body commerce_search-input-facet commerce_search-facet-item lightning-input span section.results commerce_builider-search-results section commerce_search-product-grid ul li */ /* Absolutely Infuriating. */ commerce_search-filters-panel .panel-class span.clear-button commerce-action-button.desktop-clear-all, commerce_search-filters-panel .panel-class span.clear-button commerce-action-button.desktop-clear-all:hover, commerce_search-filters-panel .panel-class span.clear-button commerce-action-button.desktop-clear-all:focus, commerce_search-filters-panel .panel-class span.clear-button commerce-action-button.desktop-clear-all button, commerce_search-filters-panel .panel-class span.clear-button commerce-action-button.desktop-clear-all button:hover, commerce_search-filters-panel .panel-class span.clear-button commerce-action-button.desktop-clear-all button:focus { transition:unset !important; will-change: unset !important; border-radius: unset; background:none !important; border:none !important; color: var(--ucsf-navy); font-size: 0.75rem; text-decoration:none; } commerce_search-filters-panel .panel-class span.clear-button commerce-action-button.desktop-clear-all button:hover, commerce_search-filters-panel .panel-class span.clear-button commerce-action-button.desktop-clear-all button:focus { color: var(--ucsf-cta-blue); } commerce-search-filters-panel-section .search-filters-selected-section { display:none !important; /* unnecessary applied filters section */ } commerce-search-filters-panel-section .categories-section .section-header h3, commerce_search-facet commerce-search-filters-panel-section .section-header h3 { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.125rem; color: var(--ucsf-cta-blue); margin:0 !important; letter-spacing: 0.025rem; } commerce-search-filters-panel-section .categories-section #categories-section commerce-action-button button { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 0.875rem; background:none; border-radius:unset; border:none; color: var(--ucsf-navy); letter-spacing: 0.075rem; } commerce-search-filters-panel-section .categories-section #categories-section commerce-action-button button:hover { border:none; color:var(--ucsf-cta-blue); } commerce-search-filters-panel-section .categories-section #categories-section commerce-action-button button span { margin-left: 0.5rem !important; } commerce_search-input-facet commerce_search-facet-item.input-padding { padding:0 !important; } commerce_search-input-facet commerce_search-facet-item.input-padding span.facet-item-name { padding-top:7px; letter-spacing: 0.025rem; } commerce-search-filters-panel-section figure lightning-icon button, commerce-search-filters-panel-section figure lightning-icon button:hover, commerce-search-filters-panel-section figure lightning-icon button:focus, commerce-search-filters-panel-section figure lightning-icon button:active, commerce-search-filters-panel-section figure lightning-icon button lightning-primitive-icon , commerce-search-filters-panel-section figure lightning-icon button lightning-primitive-icon:hover, commerce-search-filters-panel-section figure lightning-icon button lightning-primitive-icon:focus, commerce-search-filters-panel-section figure lightning-icon button lightning-primitive-icon:active { background:none; border:1px solid transparent; /* padding:0; margin:0; line-height: 1.5; */ border-radius: unset; border-radius: initial; } /* Fix facets here */ .facet-body .lwc-1q54g11aet8, .facet-body span::part(input-checkbox) { height:2.25rem; margin:0; padding:0; font-size: .88rem; font-family: var(--HNRoman); font-weight: var(--HNRomanWeight); } lightning-primitive-input-checkbox[lwc-66unc5l95ad] { height:2.25rem; } commerce_search-facet-item.lwc-7aoidjjdg4i { height:2.25rem; } commerce_search-facet-item.lwc-64711lksfdt { margin:0; padding:0; } lightning-primitive-input-checkbox[lwc-66unc5l95ad] input[type="checkbox"]+label { background:none; border:none; padding:0; margin:0; cursor:pointer; } lightning-primitive-input-checkbox[lwc-66unc5l95ad] input[type="checkbox"]+label:hover { background:none; border:none; } /* ==== Categories Modal Filters Mobile ===== */ .slds-modal__container { background-color: var(--ucsf-white); margin:0; padding:0; justify-content: flex-start; } .slds-modal__container .slds-modal__close { height: 3rem; } .slds-modal__container .slds-modal__close button { color: var(--ucsf-cta-blue) !important; right:20px; top:10px; } .slds-modal__content { max-height:unset !important; } .modal-body-content + section { padding:0 1rem; } .modal-body-content #categories-section ul.is-root li, .modal-body-content #categories-section ul.is-root li p a { padding-left: 0; margin-left:0; } /* Moved to head markup article.results-container aside.filters div.filters-header h2.filters-title { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.125rem; color: var(--ucsf-cta-blue); } aside.filters div.filters-header { align-items: center; } aside.filters div.filters-header h2.filters-title { margin:0; } .category-tree-section ul.categories { } .lwc-36vevjtd9ac ul.categories li a { text-decoration: none; } .category-tree-section ul.categories ul { margin:0; padding:0; } .lwc-36vevjtd9ac ul.categories { margin-bottom: 1rem; } .lwc-36vevjtd9ac ul.categories li { } .lwc-36vevjtd9ac ul.categories li a { text-decoration: none; border-bottom: none; font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 0.875rem; } .lwc-36vevjtd9ac ul.categories li a:hover { text-decoration: none; color: var(--ucsf-cta-blue); border-bottom: 2px solid var(--ucsf-cta-blue); } */ /* FIX FOR HIDING Category PLP & Search Result Images */ commerce_search-product-grid commerce_search-product-card section.cardContainerList div.imageArea { display: var(--ucsf-none); } /* commerce_builder-search-results.category-results-list { margin: 0 2rem; border:2px solid var(--ucsf-cta-blue); border-radius:100px; } article.results-container aside.filters { flex: 1 1 40%; max-width: unset; } article.results-container section.results { flex: 1 1 60%; border-left: 50px solid transparent; } section.cardContainerList div.fieldsArea a { text-decoration: none; border:none; } section.cardContainerList div.fieldsArea a:hover div:nth-child(1) commerce_search-product-field lightning-formatted-rich-text span { color:var(--ucsf-dark-blue); border-bottom: 2px solid var(--ucsf-dark-blue); } .fieldsArea a div:nth-child(1) commerce_search-product-field lightning-formatted-rich-text span { display: inline-block; margin-bottom:1.5rem; font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.5rem; color: var(--ucsf-cta-blue); border-bottom: 2px solid var(--ucsf-cta-blue); } .fieldsArea a div:nth-child(2) commerce_search-product-field lightning-formatted-rich-text span { display:block; font-family: var(--HNLight); font-weight: var(--HNLightWeight); font-size: 1.13rem; line-height:1.8; text-overflow: unset; white-space: normal; } */ section.cardContainerList.lwc-70omf7k760p { display:flex; flex-direction: column; width:100%; margin:0; padding:0; overflow:unset; grid-template-columns: none; grid-template-areas: none; flex-grow:unset; } @media screen and (min-width: 768px) { section.cardContainerList.lwc-70omf7k760p { flex-direction: row; } } section.cardContainerList div.fieldsArea { display:block; grid-area: none; padding:0; flex:1 1 auto; width: 100%; } @media screen and (min-width: 768px) { section.cardContainerList div.fieldsArea { width: 75%; } } section.cardContainerList div.fieldsArea commerce_search-product-field>div { white-space:normal } section.cardContainerList div.callToActionArea { align-items: center; grid-area:none; justify-self: unset; flex: 1 1 25%; justify-content: flex-start; margin-top: 2rem; } @media screen and (min-width: 768px) { section.cardContainerList div.callToActionArea { justify-content: flex-end !important; margin-top: 0 !important; } } section.cardContainerList div.callToActionArea .callToActionButton { height: unset; white-space: nowrap; } section.cardContainerList div.callToActionArea .callToActionButton a { white-space: nowrap; } section.cardContainerList div.callToActionArea .callToActionButton a:focus { box-shadow:none; /* Winter '25 fix */ } commerce_search-product-grid section.cardContainerList div.callToActionArea a { position: relative; padding: 1rem 2.5rem 1rem 4rem !important; background-image:url("/sfsites/c/resource/ucsf_svg_icons_1/plus-small.svg"); background-repeat: no-repeat; background-position: 20px center; background-size: 32px; transition: 0.2s ease background-color !important; } commerce_search-product-grid section.cardContainerList div.callToActionArea a:hover, commerce_search-product-grid section.cardContainerList div.callToActionArea a:focus { background-color: var(--ucsf-dark-blue); border: 1px solid var(--ucsf-dark-blue); box-shadow:none; /* Winter '25 fix */ } /* commerce_search-product-field.lwc-70omf7k760p lightning-formatted-rich-text.lwc-4ervem0d9nl span { font-family: var(--HNRoman); font-weight: var(--HNRomanWeight); color: var(--ucsf-cta-blue); border-bottom: 2px solid var(--ucsf-cta-blue); } */ /* section.cardContainerList div.fieldsArea a:hover { } commerce_search-product-grid ul.lwc-7r0fpe1q2mp { border: 4px solid var(--ucsf-cta-blue); border-radius: 75px; padding: 50px 0; margin-bottom:0; } */ /* :root { --com-c-product-grid-spacing-row: large; --com-c-product-grid-list-color-border: rgb(0, 107, 233); --com-c-product-card-button-variant: primary; --com-c-product-card-container-color-background: var(--dxp-g-root); --com-c-product-card-container-color-border: var(--dxp-g-root); --com-c-product-card-container-radius-border: 1; --com-c-product-pricing-negotiated-price-label-color: var(--dxp-g-root-contrast); --com-c-product-pricing-negotiated-price-label-size: var(--dxp-s-text-heading-medium-font-size); --com-c-product-pricing-original-price-label-color: var(--dxp-g-root-contrast); --com-c-product-pricing-original-price-label-size: var(--dxp-s-text-heading-medium-font-size); } */ /* Button Type (--HNMedium) */ button { /* display: inline-block; */ padding: 0.75rem 2rem; font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.125rem; line-height: 1.4; letter-spacing: 0.013rem; text-decoration: none; text-align: center; color: var(--ucsf-white); /* background-color: transparent; */ background-color: var(--ucsf-cta-blue); border: 2px solid var(--ucsf-cta-blue); border-color: var(--ucsf-cta-blue); border-radius: 100px; /* cursor: pointer; */ transition: 0.2s ease background-color; } button:hover { background-color: var(--ucsf-dark-blue); /* border-width: 2px; */ border-color: var(--ucsf-dark-blue); } button:focus { box-shadow:0px 0px 12px var(--ucsf-cta-blue); -moz-box-shadow:0px 0px 12px var(--ucsf-cta-blue); -webkit-box-shadow:0px 0px 12px var(--ucsf-cta-blue); } @media screen and (min-width: 768px) {} /* tablet and up */ /* desktop and up */ @media screen and (min-width: 1024px) { } .button-alt, .button-alt button, .button-alt a { /* display: inline-block; */ padding: 1em 1.5em; line-height: 1.4; /* background-color: transparent; */ border-radius: 32px; border-color: var(--ucsf-cta-blue); color: var(--ucsf-cta-blue); text-decoration: none; text-align: center; /* cursor: pointer; */ /* min-height: 64px; */ } a.giveButton, a.giveButton:visited { /* display: inline-block; */ padding: 0.75rem 2rem; font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.125rem; line-height: 1.4; letter-spacing: 0.013rem; text-decoration: none !important; text-align: center; color: var(--ucsf-white) !important; /* background-color: transparent; */ background-color: var(--ucsf-cta-blue) !important; border: 2px solid var(--ucsf-cta-blue) !important; border-color: var(--ucsf-cta-blue) !important; border-radius: 100px; /* cursor: pointer; */ transition: 0.2s ease background-color !important; text-shadow: unset !important; } a.giveButton:hover { background-color: var(--ucsf-dark-blue) !important; /* border-width: 2px; */ border-color: var(--ucsf-dark-blue) !important; } a.giveButton:focus { box-shadow:0px 0px 12px var(--ucsf-cta-blue); -moz-box-shadow:0px 0px 12px var(--ucsf-cta-blue); -webkit-box-shadow:0px 0px 12px var(--ucsf-cta-blue); } .button-pill-small button.btn-pill-sm, .button-pill-small a.btn-pill-sm { border-radius: 200px; padding: 0.75rem 2.5rem 0.75rem 1.5rem; } .button-pill-small.button-add-icon button.btn-pill-sm, .button-pill-small.button-add-icon a.btn-pill-sm { padding-left: 3rem; padding-left:3.5rem; background-image: url("/sfsites/c/resource/ucsf_icons/plus-icon.svg") ; background-repeat: no-repeat; background-position: 1.2em center; } .button-pill-large.button-icon button.btn-pill-lrg, .button-pill-large.button-icon a.btn-pill-lrg { padding-left:4.3rem; background-image: url("/sfsites/c/resource/ucsf_icons/heart-icon.svg") ; background-repeat: no-repeat; background-position: 1.5em center; } input[type="radio"]+label, input[type="checkbox"]+label, input[type="submit"]+label { padding: 0.5rem 0.3rem; line-height: 1.4; background-color: var(--ucsf-white); border-color: var(--ucsf-cta-blue); /* border-radius: 50px; */ color: var(--ucsf-cta-blue); text-decoration: none; --webkit-box-shadow:none; box-shadow:none; } /* input[type="radio"]+label:hover, input[type="radio"]+label:focus, input[type="checkbox"]+label:hover, input[type="checkbox"]+label:focus, input[type="submit"]+label:hover, input[type="submit"]+label:focus { color: var(--ucsf-white); background-color: var(--ucsf-cta-blue); border-color: var(--ucsf-cta-blue); } */ input[type="radio"]+label:hover, input[type="checkbox"]+label:hover { cursor:pointer; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-inner-spin-button:hover, input[type=number]::-webkit-inner-spin-button:focus, input::-webkit-outer-spin-button, input::-webkit-outer-spin-button:hover, input::-webkit-outer-spin-button:focus, input::-webkit-inner-spin-button, input::-webkit-inner-spin-button:hover, input::-webkit-inner-spin-button:focus { appearance: none !important; -webkit-appearance: none !important; /* margin: 0; */ } /* Firefox */ input[type=number], input[type=number]:hover { appearance: none !important; -moz-appearance: textfield !important; } .other-ways-to-give-links p { margin-bottom: 2rem; } /* Fix for broken search results: THis is incorrect override; needs changing */ /* .desktop.lwc-20bef5plkfo .results-container.lwc-20bef5plkfo .results.lwc-20bef5plkfo { flex: unset; } */ /* @note STATIC CONTENT */ /* .ucsf-page-static-content { } .ucsf-page-static-content.content-top { } .column-content c-waystogive { } */ .ucsf-page-static-content { } .ucsf-page-static-content ul li p { margin-bottom:1.5rem; } .ucsf-page-static-content.insider-form { } .ucsf-page-static-content.insider-form input[type="checkbox"] + label { background:none; border:none; padding:0; margin:0; cursor:pointer; } .ucsf-page-static-content.insider-form input[type="checkbox"] + label:hover { background:none; border:none; } .ucsf-page-static-content.bch-contact-form input[type="text"], .ucsf-page-static-content.bch-contact-form input[type="email"], .ucsf-page-static-content.bch-contact-form textarea[type="textarea"] { padding: 0.5rem 1rem; margin-bottom: 1rem; width: 100%; } /* Container for grouping fields on one line */ .ucsf-page-static-content.bch-newsletter .inputContainer, .ucsf-page-static-content.insider-form .inputContainer { display: flex; flex-direction: column; font-weight: 400; } .ucsf-page-static-content.bch-newsletter .inputContainer > div, .ucsf-page-static-content.insider-form .inputContainer > div { align-items: center; } .ucsf-page-static-content.bch-newsletter .inputContainer { margin-bottom:1rem; } .ucsf-page-static-content.bch-newsletter .inputElement, .ucsf-page-static-content.insider-form .inputElement { padding: 12px 10px; /* border: 2px solid #9b9b9b; */ border: 2px solid var(--ucsf-med-gray); border-radius: 3px; font-size: 1.125rem; color: var(--ucsf-blue-gray); background-color: #fff; width: 100%; } .ucsf-page-static-content.newsletter .inputElement::placeholder, .ucsf-page-static-content.insider-form .inputElement::placeholder { color: var(--ucsf-blue-gray); } .ucsf-page-static-content.newsletter .inputElement:focus, .ucsf-page-static-content.insider-form .inputElement:focus { outline: none; /* border: 2px solid var(--dxp-g-brand); */ border: 2px solid var(--ucsf-cta-blue); } /* ====== TEMP HIDE OF ADD TO CART TOAST MESSAGE. NO WAY TO DISABLE ======*/ .toast-container { display:none !important; } .main-body-section, .pdp-main-body-section, .static-main-body-section { background-color: var(--ucsf-white); margin: 0 !important; padding:0 !important; } /* first items on bottom (lowest z-index); last items on top (highest z-index) */ .pdp-main-body-content, .static-main-body-content { background-color: var(--ucsf-white) !important; } @media screen and (min-width: 480px ) { .pdp-main-body-content, .static-main-body-content { background: url(/sfsites/c/resource/ucsf_long_swooshes_right/ucsf-bg-swoop-right-white.svg) center 1500px / 100% no-repeat, url(/sfsites/c/resource/ucsf_bg_squares_long/gray-long-square.svg) center 750px / 100% no-repeat, url(/sfsites/c/resource/ucsf_long_swooshes_right/ucsf-bg-swoop-right-gray.svg) center -125px / 100% no-repeat; } } .confirmation-main-body-content { background:none !important; background-color: var(--ucsf-white) !important; } .pdp-main-body-content, .static-main-body-content { padding:0 1rem; } @media screen and (min-width: 768px ) { .pdp-main-body-content, .static-main-body-content{ padding:0 2rem; } } @media screen and (min-width: 1024px ) { .pdp-main-body-content, .static-main-body-content { padding:0 3rem; } } @media screen and (min-width: 1280px ) { .pdp-main-body-content, .static-main-body-content { padding:0 6rem; } } .static-details-content h3 { margin-bottom:0; } .static-details-content .ucsf-page-static-content h3 {} .static-details-content.endowed-professorships .h3 { margin:3.75rem 0 1rem 0; } community_builder-output-rich-text table td, .ucsf-page-static-content table td { padding: 0.75rem 0.5rem; line-height: 1.5rem; } community_builder-output-rich-text table td.chair { } community_builder-output-rich-text table td.name, .ucsf-page-static-content table td.name { width: 30%; } .pdp-header-content{ margin: 3.75rem 0 3rem 0 !important; padding-bottom:3rem; border-bottom: 1px solid var(--ucsf-hr-on-white-or-gray); } .static-variable-header { margin: 3.75rem 0 3rem 0 !important; padding-bottom:3rem; border-bottom: 1px solid var(--ucsf-hr-on-white-or-gray); } .static-variable-body { margin: 3.75rem 0 3rem 0 !important; padding-bottom:3rem; border-bottom: none; } /* .static-variable-header .main-column { padding-right:0; } */ .static-header-content { margin: 3.75rem 0 3rem 0 !important; padding-bottom:3rem; padding-right:0 !important; border-bottom: 1px solid var(--ucsf-hr-on-white-or-gray); } @media screen and (min-width: 480px ) { .static-header-content { /* padding-right: 0.5rem; */ } } @media screen and (min-width: 768px ) { .static-header-content { word-break: normal; /* padding-right: 3rem; */ } } /* PDP add to cart button Important! Do not Change! */ .make-my-gift-c .custom-brand-button button.slds-button_brand { /* background-color: var(--ucsf-cta-blue); */ border: 2px solid var(--ucsf-cta-blue); /* border-radius: 100px; */ /* cursor: pointer; */ padding: 0.75rem 3rem 0.75rem 4.5rem !important; background-image:url("/sfsites/c/resource/ucsf_svg_icons_1/plus-small.svg") !important; background-repeat: no-repeat !important; background-position: 20px center !important; background-size: 32px !important; transition: 0.2s ease background-color !important; } .make-my-gift-c .custom-brand-button button.slds-button_brand:hover, .make-my-gift-c .custom-brand-button button.slds-button_brand:focus { background-color: var(--ucsf-dark-blue) !important; border: 2px solid var(--ucsf-dark-blue) !important; box-shadow: none; /* Winter '25 fix */ } /* === Add to Cart Modal Button Brand outline button -====*/ .card div[c-continueshoppingmodal_continueshoppingmodal].choices [variant="brand-outline"] button { padding:1rem 2rem; background-color: var(--ucsf-white) !important; border: 2px solid var(--ucsf-dark-blue) !important; color: var(--ucsf-dark-blue) !important; } .card div[c-continueshoppingmodal_continueshoppingmodal].choices [variant="brand-outline"] button:hover { background-color: var(--ucsf-dark-blue) !important; border: 2px solid var(--ucsf-dark-blue) !important; color: var(--ucsf-white) !important; white-space: nowrap; } .pdp-header-image-wrapper { } .pdp-header-image-wrapper .slds-modal__container { padding-top:3rem; } .pdp-header-image-wrapper .slds-modal__container .slds-modal__content img { border-radius:0; } .pdp-header-image-wrapper .images button.image-container, .pdp-header-image-wrapper .images button.image-container:hover, .pdp-header-image-wrapper .images button.image-container:focus, .pdp-header-image-wrapper .images button.image-container:active { pointer-events: none; border-radius:0 !important; } .pdp-header-image-wrapper .images button.image-container { margin-top: 1rem; } @media screen and (min-width: 1024px ) { .pdp-header-image-wrapper .images button.image-container { margin-top: 0; } } community_builder-output-rich-text address, .ucsf-page-static-content address { font-style: normal; margin: 0; padding: 0; } community_builder-output-rich-text ul, .ucsf-page-static-content ul { list-style-type: disc; } community_builder-output-rich-text li, .ucsf-page-static-content li { margin-left:3rem; margin-bottom:0.5rem; } community_builder-output-rich-text table tr , .ucsf-page-static-content table tr { border-bottom: 1px solid #000; } community_builder-output-rich-text table td, .ucsf-page-static-content table td { padding: 0.75rem 0.5rem; line-height: 1.5rem; } /* commerce_builder-product-gallery commerce_product_details-gallery commerce_product_details-gallery-image figure button experience-picture */ commerce_product_details-gallery-image { height: auto !important; } commerce_product_details-gallery .images commerce_product_details-gallery-image.desktop-gallery-image, commerce_product_details-gallery .images commerce_product_details-gallery-image.mobile-gallery-image { width:var(--unset, unset); height:var(--unset, unset); border:var(--none, none); width:100%; margin-right:0; } commerce_product_details-gallery .images commerce_product_details-gallery-image.desktop-gallery-image button.image-container experience-picture, commerce_product_details-gallery .images commerce_product_details-gallery-image.mobile-gallery-image button.image-container experience-picture { align-items: flex-start; } commerce_product_details-gallery .images commerce_product_details-gallery-image.desktop-gallery-image figure, commerce_product_details-gallery .images commerce_product_details-gallery-image.mobile-gallery-image figure { aspect-ratio: unset !important; /* How on earth do you just decide someone's image must be 1:1? Apalling. */ align-items: flex-start; /* not really necessary, but why did they assume centering everything was a good default? LEAVE IT ALONE */ } /* hide the carousel on product image */ commerce_product_details-carousel, commerce_product_details-carousel.desktop-featured-image-carousel, commerce_product_details-gallery commerce_product_details-dot-indicators { display:none !important; } commerce_product_details-gallery .images commerce_product_details-horizontal-scroller { display:unset; width:100%; } @media screen and (min-width: 480px ) { commerce_product_details-gallery .images commerce_product_details-gallery-image.desktop-gallery-image { } } @media screen and (min-width: 768px ) { commerce_product_details-gallery .images commerce_product_details-gallery-image.desktop-gallery-image { } commerce_product_details-gallery .images commerce_product_details-horizontal-scroller { display:flex; } } @media screen and (min-width: 1024px ) { commerce_product_details-gallery .images commerce_product_details-gallery-image.desktop-gallery-image { /* margin-right:3rem; */ } } @media screen and (min-width: 1280px ) { commerce_product_details-gallery .images commerce_product_details-gallery-image.desktop-gallery-image { /* margin-right:6rem; */ } } .pdp-header-name-description { /* padding:0 0.25rem; */ margin:0; padding:0; } .pdp-header-name-description div:last-child, .pdp-header-content .pdp-header-name-description div:last-child, .static-header-content .ucsf-page-static-content p:last-child, .static-variable-header .ucsf-page-static-content p:last-child { padding:0; margin-bottom: 0; } .static-variable-header .ucsf-page-static-content p { color: var(--ucsf-blue-gray) !important; font-size:1.5rem; } /* community_builder-output-rich-text */ .pdp-header-name { margin:0 !important; } .pdp-header-name h1 { padding-left:0 !important; padding-right:0 !important; } .pdp-header-description { margin:0 !important; } /* Important for static content headers */ .ucsf-page-static-content.full-width { } .ucsf-page-static-content.content-top { } .ucsf-page-static-content.content-top h1 { margin-bottom:0; padding-left:0; padding-right:0; } @media screen and (min-width: 1024px ) { .ucsf-page-static-content.content-top { max-width: 60%; padding-right:3rem; } .ucsf-page-static-content.content-top h1 { margin-bottom:3rem; } .ucsf-page-static-content.full-width, .ucsf-page-static-content.content-top.full-width { max-width:100%; } } .pdp-details-content { /* background-color: yellow; */ } @media screen and (min-width: 480px ) { .pdp-header-name-description { /* padding-right: 0.5rem; */ } } @media screen and (min-width: 768px ) { .pdp-header-name { word-break: normal; } .pdp-header-name-description { /* padding-right: 3rem; */ } } @media screen and (min-width: 1024px ) { .pdp-header-name-description { } } .static-more-ways-to-give { margin:0 0 6rem 0; } .pdp-more-ways-to-give-title h2, .static-more-ways-to-give-title h2 { font-size: 2.25rem; line-height: 1.125; letter-spacing: -0.038rem; } .pdp-more-ways-to-give-links { margin-bottom:6rem; } .pdp-more-ways-to-give-links a, .pdp-more-ways-to-give-links p { /* margin-bottom:0; font-family: var(--HNMedium) !important; font-weight: var(--HNMediumWeight) !important; font-size: 1.13rem; color: var(--ucsf-navy) !important; border-color: var(--ucsf-navy) !important; */ } .pdp-more-ways-to-give-links a:hover, .pdp-more-ways-to-give-links p:hover { /* color:var(--ucsf-cta-blue) !important; border-color: var(--ucsf-cta-blue) !important; */ } .gift-comments textarea[name="writeincomments"] { font-family: var(--HNRoman); font-weight: var(--HNRomanWeight); font-size: 1.125rem; line-height: 1.125; color: var(--ucsf-navy); min-height:100px; } .gift-comments label { color: var(--ucsf-navy); margin-bottom:0.5rem; } /* change */ /** online giving FAQ */ .online-giving-faq {} .online-giving-faq p { margin-bottom:1rem; } .online-giving-faq .dxp-tabs-container { } .online-giving-faq .dxp-tabs-container dxp_layout-tab-bar .dxp-tabs-container { } @media screen and (min-width: 768px ) { .online-giving-faq .dxp-tabs-container{ } .online-giving-faq .dxp-tabs-container dxp_layout-tab-bar .dxp-tabs-container { } } .online-giving-faq .dxp-tab-container { padding: 0 3rem 6rem 3rem; } .online-giving-faq dxp_layout-tab > div.dxp-tab-container dxp_base-text-block:nth-child(1) { border-bottom: 1px solid var(--ucsf-hr-on-white-or-gray); } .online-giving-faq dxp_layout-tab > div.dxp-tab-container dxp_base-horizontal-line { --dxp-c-horizontal-line-color: var(--ucsf-hr-on-white-or-gray); } .online-giving-faq dxp_base-text-block.component-wrapper-spacer p { margin-bottom:1rem; } .online-giving-faq ul.dxp-tab-bar-container { width: 100%; background-color: white; } @media screen and (min-width: 768px) { .online-giving-faq ul.dxp-tab-bar-container { width: 300px; } } .online-giving-faq li.dxp-tab-nav-container { padding:0; margin:0; border:none; } .dxp-tab-bar-hover-tab-vertical[data-active="false"]:hover { margin:0; padding:0 !important; border:none; } .online-giving-faq li.dxp-tab-nav-container p { margin:0; } .online-giving-faq li.dxp-tab-bar-visible-tab-hover dxp_base-text-block p { } .online-giving-faq li.dxp-tab-bar-visible-tab-hover div[aria-selected="false"] dxp_base-text-block p { padding: 1rem 1rem 1rem 2rem; font-weight: normal; border-left: 6px solid transparent; } .online-giving-faq li.dxp-tab-bar-visible-tab-hover div[aria-selected="false"] { margin: 0 5px 10px 0; box-shadow: none; } .online-giving-faq li.dxp-tab-bar-visible-tab-hover div[aria-selected="true"] { margin: 0 5px 10px 0; box-shadow: 0px 5px 8px rgba(0,0,0,0.1); } .online-giving-faq li.dxp-tab-bar-visible-tab-hover div[aria-selected="true"] dxp_base-text-block p { padding: 1rem 1rem 1rem 2rem; color: var(--ucsf-cta-blue); border-left: 6px solid var(--ucsf-cta-blue); font-weight: bold; } /* CART */ .cart-main-body-section, .cart-main-body-content { background-color: var(--ucsf-white); } commerce_unified_checkout-checkout-section-one-page fieldset header { height:0 !important; } commerce_builder-cart-summary { margin:0 !important; } .cart-content-container {} .cart-content {} .cart-content-form { background-color: var(--ucsf-white); } .cart-content-form .cart-title h1 { margin-bottom: 1rem !important; } c-ucsf-cart-layout .layout .cart-title h1 { margin-bottom: 1rem !important; } @media screen and (min-width: 768px) { c-ucsf-cart-layout .layout .cart-title h1 { margin-bottom: 2rem !important; } } .cart-content-form .cart-title h2 { font-family: var(--HNBold); font-weight: var(--HNBoldWeight); font-size: 2rem !important; color: var(--ucsf-navy); line-height: 1.125; letter-spacing: -0.038rem ; margin-bottom: 2rem; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } @media screen and (min-width: 768px) { .cart-content-form .cart-title h2 { font-size: 3rem !important; } } @media screen and (min-width: 1024px) { .cart-content-form .cart-title h2 { font-size: 4rem !important; letter-spacing: -0.125rem; } } .cart-content-summary { position: relative; background-color: #F2F4F6; } .cart-summary-title .summary-title { font-family: var(--HNLight); font-weight: var(--HNLightWeight); font-size: 2.125rem !important; line-height: normal; margin-bottom: 2rem; letter-spacing: 0.013em !important; } .cart-item-count { position:absolute; z-index: 2; width: 28px; height:28px; right: 0; top:10px; background-color: var(--ucsf-dark-blue); border-radius: 50px; } .cart-item-count p { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1rem; line-height: 1.6 !important; text-align: center !important; color: var(--ucsf-white) !important; margin-bottom:0; } .cart-content-summary .description-name-label h2, .cart-content-summary .description-name-label p { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.013rem; color: var(--ucsf-navy) !important; margin-bottom: 1rem; padding-right: 2rem !important; } /* Important to override SLDS grid used here in the summary. Easier to remove grid and allow natural flow as is matches design */ /* Cart Summary */ commerce_cart-item .container.no-image { display:flex !important; flex-direction: column; gap:1rem; } /* Checkout Summary */ @media screen and (min-width: 768px) { commerce_builder-checkout-layout-accordion { min-height:unset !important } } commerce_cart-item .container.no-image-no-delete { display:block !important; } commerce_cart-items button.skip-link-button:hover, commerce_cart-items button.skip-link-button:focus { background-color: var(--ucsf-cta-blue) !important; } commerce_cart-items ul.items > li { border-bottom: 2px solid var(--ucsf-gray) !important; } commerce_cart-item .item-prices .item_details_currency .actualPrice:before { position: absolute; display:block; content: "Gift Amount:"; text-align: right; left:-132px; top: 3px; font-family: var(--HNBold); font-weight: var(--HNBoldWeight); font-size: 0.75rem; color: var(--ucsf-navy) !important; line-height: 1.4; letter-spacing: 0.1rem; margin:0; padding:0; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); text-transform: uppercase; white-space: nowrap; } commerce_cart-item .item-prices .item_details_currency .actualPrice { position: relative; font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.013rem; color: var(--ucsf-navy) !important; } /* Same as Eyebrow */ commerce_cart-item .item-details-pills-qty commerce_product_information-variant-attributes-display ul li { font-family: var(--HNBold); font-weight: var(--HNBoldWeight); font-size: 0.75rem; color: var(--ucsf-navy) !important; line-height: 1.4; letter-spacing: 0.1rem; margin:0; padding:0; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); text-transform: uppercase; width: 100%; text-align: right; margin-right:10px; } /* hide sku which cannot be removed from cart */ commerce_cart-item .item-details-pills-qty > div.product-fields { display: none; } .checkout-summary commerce_cart-item .item-details-pills-qty { margin-bottom: 1rem; } commerce_cart-item .item-details-pills-qty commerce_product_information-variant-attributes-display, commerce_cart-item .item-prices .item_details_currency .totalPrice, commerce_cart-item .item-prices .item_details_currency .actualPrice { flex-direction: column !important; } commerce_cart-item .item-details-pills-qty commerce_product_information-variant-attributes-display, commerce_cart-item .item-prices .item_details_currency .totalPrice, commerce_cart-item .item-prices .item_details_currency .actualPrice { align-items: end; } commerce_cart-items ul.items { margin-bottom:1rem; } ul.items li commerce_cart-item { padding:0; margin-bottom:1rem; } ul.items li commerce_cart-item > .container { position: relative; } ul.items li commerce_cart-item > .container .item-image { display:none; } /* delete button */ ul.items li commerce_cart-item .item-delete { position:absolute; top:-4px; right:0; margin-top:0; margin-left:20px; } ul.items li commerce_cart-item .item-delete commerce-action-button button { background-image: url(/sfsites/c/resource/ucsf_svg_icons_1/x-small-blue.svg); background-position: right center; background-repeat: no-repeat; background-size: contain; height: 30px; width: 30px; text-indent: -150px; /* Winter '25 fix */ white-space: nowrap; overflow: hidden; display: inline-block; border-radius: 0; } ul.items li commerce_cart-item .item-name a.description-name-label { display:block; border:none; margin-right:3rem; } /* These are different because, well, THEY SHOULD NOT BE */ commerce_builder-cart-items commerce_search-paging-control, commerce-builder-cart-items commerce_search-paging-control { display:none !important; /* Winter '25 Hide the pagination on cart summary */ } commerce_product_information-variant-attributes-display ul { margin-bottom:0; } /* commerce_cart-items .item_actions commerce-action-button button { font-size: 0.75rem; color:var(--ucsf-navy) !important; } commerce_cart-items .item_actions commerce-action-button button:hover { color:var(--ucsf-cta-blue) !important; } */ commerce_cart-summary .total-price { justify-content: end !important; align-items: baseline !important; } /* .cart-layout-content .sidebar .cart-total-text, .cart-layout-content .sidebar .cart-total-text p */ commerce_cart-summary .total-price .cart-total-text { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 0.75rem !important; color: var(--ucsf-navy) !important; line-height: 1.4; letter-spacing: 0.013rem; margin:0; padding:0; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); } commerce_cart-summary dl .total-price .cart-total-text h2 { font-family: var(--HNBold); font-weight: var(--HNBoldWeight); font-size: 0.75rem !important; color: var(--ucsf-navy) !important; line-height: 1.4; letter-spacing: 0.1rem; margin:0; padding:0; text-shadow: 1px 1px 1px var(--ucsf-small-text-shadow); text-transform: uppercase; text-align: right; } commerce_cart-summary dl .total-price dd lightning-formatted-number { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight) !important; font-size: 1.125rem !important; line-height: 1.25; letter-spacing: -0.013rem; color: var(--ucsf-navy) !important; } /* CHECKOUT */ /* in order for this to style inside the content that is inside the TITLE clock region, and inside the HTML Editor area within that, we need to add these to ucsf_og_global_overrides.css in static resources */ commerce_builder-checkout-layout-accordion .container .checkout-column { padding:0 !important; } c-saltbox-billing-address-component lightning-card article header h2 { font-family: var(--HNMedium); font-weight: var(--HNMediumWeight) !important; font-size: 1.3rem !important; letter-spacing: normal; } commerce_unified_checkout-checkout-section-accordion .title { width:100%; } commerce_unified_checkout-checkout-section-accordion header div[slot="edit"] { position: absolute; right: 0; top: 200px; z-index:50; /*important for keeping over content */ } @media screen and (min-width: 480px) { commerce_unified_checkout-checkout-section-accordion header div[slot="edit"] { top: 155px; } } @media screen and (min-width: 1024px) { commerce_unified_checkout-checkout-section-accordion header div[slot="edit"] { top: 130px; } } commerce_unified_checkout-checkout-section-accordion header div[slot="edit"] button:focus { border:none; outline:none; } commerce_unified_checkout-checkout-section-payment div[slot="proceed"] { float:none !important; width:100% !important; /* just canceling the float should do it. Bug with place order button currently */ margin-top:2rem; } commerce_unified_checkout-checkout-section-payment div[slot="proceed"] > div, commerce_unified_checkout-checkout-section-payment div[slot="proceed"] button { width:100%; } .checkout-title-comp { } .checkout-page.mainContainer { font-size: 1.125rem; font-weight: 400;/* ?? */ position: relative; } .checkout-page .sectionTitleContainer { margin: 20px 0 0 0; display: flex; align-items: center; } @media screen and (min-width: 800px){ /* .checkout-page .sectionTitleContainer { margin: 20px 0 0 0; } */ } .checkout-page.mainContainer .sectionTitleContainer h2.sectionTitleText, .checkout-page.mainContainer .sectionTitleContainer .sectionTitleText { font-family: var(--HNLight); font-weight: var(--HNLightWeight); font-size: 2.125rem !important; line-height: normal; margin-bottom: 0; } .checkout-page.mainContainer .sectionTitleContainer .sectionTitleIcon { display: inline-block; margin-left: 20px; height: 48px; width: 48px; } .checkout-page.mainContainer .sectionTitleContainer .heartIcon { height: 30px; width: 30px; } .checkout-page .subSectionTitleContainer { margin: 10px 0; display: flex; align-items: center; justify-content: space-between; } .checkout-page .subSectionTitleContainer .subSectionTitleText { /* change these */ font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); font-size: 1.125rem; margin-top:1rem; } .checkout-page.mainContainer > .subSectionTitleContainer .subSectionTitleText { margin-top:0; } .checkout-page.mainContainer .checkout-step .svg-step { height: 51px; background-image: url("/sfsites/c/resource/ucsf_checkout_steps_v2/cart-nav-step1-mobile.svg"); background-position: left center; background-repeat: no-repeat; } @media screen and (min-width: 1024px) { .checkout-page.mainContainer .checkout-step .svg-step { height: 24px; background-image: url("/sfsites/c/resource/ucsf_checkout_steps_v2/cart-nav-step2.svg"); } } /* this of course does not work */ /* iframe#vf-62 #iframe_container iframe#payment_iframe #id_form #id_number_row input#id_number_input { width:100% !important; } */ .static-main-body-content .confirmation-gift-summary { } .static-main-body-content .confirmation-sidebar h2 { font-size: 2.25rem; } @media screen and (max-width: 1024px ) { .ucsf-page-static-content h1.order-confirmation-title { margin-bottom:1rem; } } /*Hiding price in the cart SALTBOX*/ /* .unitPrice{ display: none !important; } */ /* slds-form-element__help { font-size: 14px; } div.slds-form-element__help.slds-show{ font-size: 14px; } lightning-formatted-number.lwc-5annsfgtgga{ font-size:24px !important; font-weight:500 !important; position:relative !important; padding-right:.8vw !important; padding-bottom:2.04vh !important; float:left !important; } */ .errorElement { font-size: 0.875rem; font-family: var(--HNMedium); font-weight: var(--HNMediumWeight); color: var(--ucsf-red); } .subscribe-button a { margin:0 auto !important; } .subscribe-button a:focus { box-shadow:none !important; /* Winter '25 fix */ } @media screen and (min-width: 480px ) { .subscribe-button a { font-size:1.125rem !important; padding-left: 100px !important; padding-right: 100px !important; } } @media screen and (min-width: 1024px ) { .subscribe-button a { margin:0 auto 0 0 !important; } } /* =========================================================== */ /* =============================BEGIN BCH ========================= */ /* =========================================================== */ /* BCH MObile Only */ @media screen and (max-width: 767px) { .bch-navigation-menus .nav-menus nav ul[aria-label="Ways to Give"] li a { background: none; } /* .bch-navigation-menus .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(5) a, .bch-navigation-menus .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(7) a, .bch-navigation-menus .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(11) a { background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link.svg") ; background-repeat: no-repeat; background-position: 95% center; } .bch-navigation-menus .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(5) a:hover, .bch-navigation-menus .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(7) a:hover, .bch-navigation-menus .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(11) a:hover, .bch-navigation-menus .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(5) a:focus, .bch-navigation-menus .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(7) a:focus, .bch-navigation-menus .nav-menus nav ul[aria-label="Ways to Give"] li:nth-child(11) a:focus { background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link-hover.svg") ; } */ } @media screen and (min-width: 768px) { .bch-navigation-menus .nav-menus nav ul li:first-child nav ul li a, .bch-navigation-menus .nav-menus nav ul li:first-child nav ul li a:hover, .bch-navigation-menus .nav-menus nav ul li:first-child nav ul li a:focus { background: none; } /* .bch-navigation-menus .nav-menus nav ul li:first-child nav ul li:nth-child(4) a, .bch-navigation-menus .nav-menus nav ul li:first-child nav ul li:nth-child(6) a, .bch-navigation-menus .nav-menus nav ul li:first-child nav ul li:nth-child(10) a { background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link.svg") ; background-repeat: no-repeat; background-position: right center; } .bch-navigation-menus .nav-menus nav ul li:first-child nav ul li:nth-child(4) a:hover, .bch-navigation-menus .nav-menus nav ul li:first-child nav ul li:nth-child(6) a:hover, .bch-navigation-menus .nav-menus nav ul li:first-child nav ul li:nth-child(10) a:hover, .bch-navigation-menus .nav-menus nav ul li:first-child nav ul li:nth-child(4) a:focus, .bch-navigation-menus .nav-menus nav ul li:first-child nav ul li:nth-child(6) a:focus, .bch-navigation-menus .nav-menus nav ul li:first-child nav ul li:nth-child(10) a:focus { background-image: url("/sfsites/c/resource/ucsf_svg_icons_1/external-link-hover.svg") ; } */ } .bch-navigation-menus .nav-menus commerce-drilldown-navigation-bar ul { /* justify-content: flex-end; */ } .bch-navigation-menus .nav-menus commerce-drilldown-navigation-bar ul li { /* margin-right:1.5rem; */ } .bch-navigation-menus .nav-menus commerce-drilldown-navigation-bar ul li lightning-icon { /* margin-left:5px; */ } .bch-navigation-menus .nav-menus nav ul li nav ul li a { padding: 0.75rem; } .bch-main-body-section { } .bch-homepage-main-body-content { margin: 0; } .bch-homepage-hero { } .bch-homepage-hero .home-heading-light-h2 { font-size: 3.635rem; } .bch-homepage-explore-funds { } .bch-explore-funds-to-support-banner { margin:3rem 0; } .explore-subtitle { } .bch-find-your-funds-description { } .bch-find-your-funds-description p { margin:0 1rem; } @media screen and (min-width: 768px ) { .bch-find-your-funds-description p { margin:0 auto; max-width:75%; } } @media screen and (min-width: 1024px ) { .bch-find-your-funds-description p { max-width:60%; } } .bch-homepage-more-ways-to-give { margin:3rem 0; } @media print { c-ucsf-header, c-ucsf-footer, c-bch-header, c-bch-footer, div.header[name="header"], div[name="footer"] { display:none !important; } }