/*———— GLOBAL HEADER ————*/ /* AFP - Set minimum height of navbar to align with CMS. */ .navbar { min-height: 96px; } /* AFP - Set padding of AFP navbar logo to align with CMS. */ .navbar-brand { padding: 8px 18.5px; } /* AFP - Sets a maximum height on the mobile logo to align with CMS. */ .m-logo-retina { max-height: 80px; } /* Fix the Font Color of the "MENU" Button on Mobile when it's "Active." */ .navbar-default .m-toggle-button.s-active .m-toggle-button-text { color: #EE5623; } /*———— GLOBAL NAVIGATION ————*/ /* Removes the right margin from the stock CH CSS on the page contents since it causes horizontal scrolling on small viewports. */ div[id$=":PageContainer"] { margin-right: 0px; } /* AFP - Set margin of navbar to align with CMS. Doesn't affect logo. */ nav.navbar-collapse { margin-top: 18px; margin-bottom: 18px; } /* Adds the missing padding-right for the global navigation bar container, centering it. */ .navbar-default .container { padding-right: 15px; } /* AFP - Set padding and style of global navbar menu items to align with CMS. */ .navbar-default .navbar-nav>li.m-global-nav-item>a { padding: 18px 15px; transition: all .35s; font-weight: 700; font-size: 16px; } /* AFP - Set focus/hover color for global navbar menu items to align with CMS. */ .navbar-default .navbar-nav>li.m-global-nav-item>a:focus, .navbar-default .navbar-nav>li.m-global-nav-item>a:hover { color: #EE5623; } /* AFP - When nav-orange is declared on a global navbar menu item, orange font color is added. */ .navbar-default .navbar-nav>li.nav-orange>a { color: #EE5623; } /* AFP - Set focus/hover style on "nav-orange" menu items but not if it's also "nav-border". First we add an invisible pseudo-underline. */ .navbar-default .navbar-nav>li.nav-orange:not(.nav-border)>a::after { text-decoration: underline; content: ""; display: block; background: 0 0; height: 2px; width: 100%; } /* AFP - Color the pseudo-underline on focus/hover. */ .navbar-default .navbar-nav>li.nav-orange:not(.nav-border)>a:focus::after, .navbar-default .navbar-nav>li.nav-orange:not(.nav-border)>a:hover::after { background-color: #EE5623; } /* AFP - When nav-border is declared on a global navbar menu item, an orange border is added and the text is forced to uppercase. */ .navbar-default .navbar-nav>li.nav-border>a { border: 2px solid #EE5623; text-transform: uppercase; margin-left: 8px; /* Add margin to prevent neighboring nav-border buttons from touching. */ } /* AFP - Set focus/hover style on "nav-orange" menu items. */ .navbar-default .navbar-nav>li.nav-border>a:focus, .navbar-default .navbar-nav>li.nav-border>a:hover { background-color: #EE5623; border-color: #EE5623; color: #FFFFFF; transition: all .35s; } /*———— PAGE HEADER ————*/ /* Adds a transparent gradient to the page header's background. The Theme Settings color will bleed through. */ .page-header { background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.17) 100%); } /* Adds the missing padding-right for the page heading container, centering it. */ .page-header .container { padding-right: 15px; } /* AFP - Styles page header's heading to align more closely with CMS, but a bit smaller. */ .page-header h1 { font-size: 54px; line-height: 62px; font-weight: 400; } /* AFP - Styles page header's subheading to align with CMS, but a bit smaller. */ .page-header p { font-size: 22px; line-height: 34px; font-weight: 400; } /*———— ACCOUNT NAVIGATION ————*/ /* When nav-child is declared on an account navigation menu item, this indents and shrinks it to make it appear nested. */ .nav-child { margin-left: 2em; font-size: .9em; } /* Changes the top border color on the account navigation menu (visible on larger viewports). */ .l-canvas .list-group { border-top-color: #FFC92B; } /* Applies visual emphasis to tags in the account menu. The nav-current class can be added via custom JS loaded by Community Hub's core template. */ .l-canvas .container .list-group a.nav-current { font-weight: 700; background-color: #EEEEEE; } /* Same purpose as above but for the mobile menu. Can optionally be styled differently. */ .l-off-canvas .m-off-canvas-nav a.nav-current { font-weight: 700; background-color: #EEEEEE; } /*———— CARDS ————*/ /* When no-border-top is declared on a card, this hides the top border that the Bold theme puts on a card. */ .card.no-border-top { border-top: 0; } /* Colors the top-border of cards. */ .container .card, .container .card-list { border-top-color: #FFC92B; } /* For card lists, changes the font of the main heading. */ .card-list .card-list-heading.row { font-size: 1.7em; line-height: 1.7em; font-weight: 500; text-transform: uppercase; } /* For card lists, changes the font of sub-headings. The main applications of this are cards on the "My Affiliations" and "My Orders" pages. */ .card-list .row .card-heading { text-transform: uppercase; font-size: 18px; line-height: 1.3em; font-weight: 500; } /* AFP - Sets card headings to be all uppercase. */ .card .card-heading { text-transform: uppercase; } /* Improves the line-height of the "Upload Photo" card to prevent overlap when the first field spans multiple lines */ .card.m-profile-card ul.m-profile-info li:first-of-type { line-height: 1.3em; } /* When no-show is declared on a card, it hides. Used for hiding cards that run JavaScript or do behind-the-scenes actions. */ .card.no-show { display: none; } /* Changes the dark gray color of a selected item in a list to the primary color (e.g., Checkout page). */ .m-list-group-select a.list-group-item.active, .m-list-group-select a.list-group-item.active:focus, .m-list-group-select a.list-group-item.active:hover, .m-list-group-select div.list-group-item.active { background-color: #EE5623; } /* AFP - For card lists, changes its main heading font to match the CMS. */ .card-list .card-list-heading { font-size: 20px; line-height: 22px; font-weight: 500; color: #000000; /* Added in, since Theme Settings doesn't affect this. */ } /* Removes unnecessary spacing from text-based lists in Read Only Field Set cards. */ .card ul.card-detail li > span > ul li, .card ul.card-detail li > span > ol li { padding-left: 0px; padding-right: 0px; } .card ul.card-detail li > span > ul li:before, .card ul.card-detail li > span > ol li:before { content: none; } /* Makes Community Hub show bullets for unordered text-based lists in the Read Only Field Set card type. Styles up to six levels deep. */ .card ul.card-detail li > span > ul > li, /* level 1 */ .card ul.card-detail li > span > ul > li > ul > li > ul > li > ul > li { /* level 4 */ list-style-type: disc; /* solid bullets */ } .card ul.card-detail li > span > ul > li > ul > li, /* level 2 */ .card ul.card-detail li > span > ul > li > ul > li > ul > li > ul > li > ul > li { /* level 5 */ list-style-type: circle; /* hollow bullets */ } .card ul.card-detail li > span > ul > li > ul > li > ul > li, /* level 3 */ .card ul.card-detail li > span > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li { /* level 6 */ list-style-type: square; /* solid squares */ } /* Makes Community Hub show bullets for ordered text-based lists in the Read Only Field Set card type. Styles up to six levels deep. */ .card ul.card-detail li > span > ol > li, /* level 1 */ .card ul.card-detail li > span > ol > li > ol > li > ol > li > ol > li { /* level 4 */ list-style-type: decimal; /* numbers like 1. 2. 3. */ } .card ul.card-detail li > span > ol > li > ol > li, /* level 2 */ .card ul.card-detail li > span > ol > li > ol > li > ol > li > ol > li > ol > li { /* level 5 */ list-style-type: lower-alpha; /* lowercase letters like a. b. c. */ } .card ul.card-detail li > span > ol > li > ol > li > ol > li, /* level 3 */ .card ul.card-detail li > span > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li { /* level 6 */ list-style-type: lower-roman; /* lowercase roman numerals like i. ii. iii. */ } /* Makes Community Hub show bullets for unordered text-based lists in the Event card type. Styles up to six levels deep. */ .card div.m-event-description > ul > li, /* level 1 */ .card div.m-event-description > ul > li > ul > li > ul > li > ul > li { /* level 4 */ list-style-type: disc; /* solid bullets */ } .card div.m-event-description > ul > li > ul > li, /* level 2 */ .card div.m-event-description > ul > li > ul > li > ul > li > ul > li > ul > li { /* level 5 */ list-style-type: circle; /* hollow bullets */ } .card div.m-event-description > ul > li > ul > li > ul > li, /* level 3 */ .card div.m-event-description > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li { /* level 6 */ list-style-type: square; /* solid squares */ } /* Makes Community Hub show bullets for ordered text-based lists in the Event card type. Styles up to six levels deep. */ .card div.m-event-description > ol > li, /* level 1 */ .card div.m-event-description > ol > li > ol > li > ol > li > ol > li { /* level 4 */ list-style-type: decimal; /* numbers like 1. 2. 3. */ } .card div.m-event-description > ol > li > ol > li, /* level 2 */ .card div.m-event-description > ol > li > ol > li > ol > li > ol > li > ol > li { /* level 5 */ list-style-type: lower-alpha; /* lowercase letters like a. b. c. */ } .card div.m-event-description > ol > li > ol > li > ol > li, /* level 3 */ .card div.m-event-description > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li { /* level 6 */ list-style-type: lower-roman; /* lowercase roman numerals like i. ii. iii. */ } /*———— BUTTONS ————*/ /* Adds margin above each block button in a list-based card. By default, there is zero margin, causing buttons to touch. */ .card .card-actions .btn-list-button { margin-top: 16px; } /* Adds margin above each inline button in a list-based card. When there are multiple buttons in a card and they break across two or more lines, there is zero margin by default, causing buttons to touch. */ .card .card-actions .l-display-inline .btn-list-button { margin-top: 8px; } /* For "Bottom" buttons, adds a margin to the right so there is spacing between each button. */ .card .pull-left .m-margin-separation { margin-right: 5px; } /* When full-width-button-wrapper is declared, this is intended to target the button div to ensure the buttons can take up the entire card width instead of 7/12 of the width. This works on at least record lists with non-bottom buttons, i.e., those displayed in the row. */ .card.full-width-button-wrapper .col-sm-7 { width: 100%; } /* AFP - Styles buttons to align with the CMS. */ .nu-lightning-wrapper .slds-scope .one-payment-wizard .launch-button > button.slds-button_brand, /* One Payment Button */ .card-list .m-filter-group .btn, /* Buttons in filter configurations */ input.btn, /* Buttons on original pages such as nc__joinrenew */ input.btn:hover, input.btn:focus, .m-button-row-item .btn, /* Buttons in button rows */ .m-button-row-item .btn:hover, .m-button-row-item .btn:focus, .row a.btn, /* Hardcoded buttons on some cards (such as on "My Checkout" and "View Registration"). */ .row a.btn:hover, .row a.btn:focus, .card.m-card-as-alert .card-detail .btn, .card.m-card-as-alert .card-detail .btn:hover, .card.m-card-as-alert .card-detail .btn:focus, .card .card-detail .btn, /* Buttons on most cards */ .card .card-detail .btn:hover, .card .card-detail .btn:focus { line-height: 1.42857143; font-weight: 900; text-transform: uppercase; font-size: 14px; letter-spacing: 1.75px; padding: 17px 32px; white-space: normal; word-wrap: break-word; } /* AFP - Adds color directly to the One Payment button, since it doesn't inherit Theme Settings */ .nu-lightning-wrapper .slds-scope .one-payment-wizard .launch-button > button.slds-button_brand { background-color: #EE5623; border-color: #EE5623; color: #FFFFFF; } /* AFP - Sets the focus/hover style on buttons to match the CMS. */ .card-list .m-filter-group .btn:hover, .card-list .m-filter-group .btn:focus, input.btn:hover, input.btn:focus, .m-button-row-item .btn:hover, .m-button-row-item .btn:focus, .row a.btn:hover, .row a.btn:focus, .card.m-card-as-alert .card-detail .btn:hover, .card.m-card-as-alert .card-detail .btn:focus, .card .card-detail .btn:hover, .card .card-detail .btn:focus { transition: all .35s; background-color: #BE451C; } /* AFP - Sets the focus/hover style on the One Payment button with specificity that overrides BoldCore's !important declaration. */ .nu-lightning-wrapper .slds-scope .one-payment-wizard .launch-button > button.slds-button_brand:hover, .nu-lightning-wrapper .slds-scope .one-payment-wizard .launch-button > button.slds-button_brand:focus { transition: all .35s !important; background-color: #BE451C !important; border-color: #BE451C !important; } /* AFP - Adds full border to secondary buttons to match the CMS. */ .card-list .m-filter-group .btn:not(.m-btn-selected), .card-list .m-filter-group .btn:not(.m-btn-selected):hover, .card-list .m-filter-group .btn:not(.m-btn-selected):focus, input.btn.btn-secondary, input.btn.btn-secondary:hover, input.btn.btn-secondary:focus, .m-button-row-item .btn.btn-secondary, .m-button-row-item .btn.btn-secondary:hover, .m-button-row-item .btn.btn-secondary:focus, .row a.btn.btn-secondary, .row a.btn.btn-secondary:hover, .row a.btn.btn-secondary:focus, .card.m-card-as-alert .card-detail .btn.btn-secondary, .card.m-card-as-alert .card-detail .btn.btn-secondary:hover, .card.m-card-as-alert .card-detail .btn.btn-secondary:focus, .card .card-detail .btn.btn-secondary, .card .card-detail .btn.btn-secondary:hover, .card .card-detail .btn.btn-secondary:focus { border: 2px solid #EE5623; } /* AFP - Sets the focus/hover style on secondary buttons to match the CMS. */ .card-list .m-filter-group .btn:not(.m-btn-selected):hover, .card-list .m-filter-group .btn:not(.m-btn-selected):focus, input.btn.btn-secondary:hover, input.btn.btn-secondary:focus, .m-button-row-item .btn.btn-secondary:hover, .m-button-row-item .btn.btn-secondary:focus, .row a.btn.btn-secondary:hover, .row a.btn.btn-secondary:focus, .card.m-card-as-alert .card-detail .btn.btn-secondary:hover, .card.m-card-as-alert .card-detail .btn.btn-secondary:focus, .card .card-detail .btn.btn-secondary:hover, .card .card-detail .btn.btn-secondary:focus { background-color: #EE5623; border-color: #EE5623; color: #FFFFFF; transition: all .35s; } /* Gives buttons labeled "Remove" inside cards a red background and a shade on hover/focus. */ .m-button-row-item .btn[aria-label|="Remove"], .card > .row .card-detail .btn[aria-label|="Remove"], .card > .row .card-detail .btn[aria-label|="Remove"] { background-color: #DE3C61; border-color: #DE3C61; color: #FFFFFF; } .m-button-row-item .btn[aria-label|="Remove"]:focus, .m-button-row-item .btn[aria-label|="Remove"]:hover, .card > .row .card-detail .btn[aria-label|="Remove"]:focus, .card > .row .card-detail .btn[aria-label|="Remove"]:hover { background-color: #DE3C61; border-color: #DE3C61; box-shadow: 0 3000px rgba(0, 0, 0, 0.2) inset; } /* AFP - Add spacing above filter buttons row. */ .card-list > .card-list-heading .m-filter-group { margin-top: 10px; } /* AFP - Styles Filter button and "card-small-btns" to be smaller. */ .card.card-small-btns > .card-detail .btn, .card.card-small-btns > .card-detail .btn:hover, .card.card-small-btns > .card-detail .btn:focus, .card-list.card-small-btns > .card-detail .btn, .card-list.card-small-btns > .card-detail .btn:hover, .card-list.card-small-btns > .card-detail .btn:focus, .card-list > .card-list-heading .m-filter-group > .btn, .card-list > .card-list-heading .m-filter-group > .btn:hover, .card-list > .card-list-heading .m-filter-group > .btn:focus { border: 1px solid #EE5623; padding: 8px 16px; width: auto; } /*———— FLOWS ————*/ /* Corrects checkbox option display within a flow. */ .nu-lightning-wrapper .uiBlock .bBody .slds-form-element__control .slds-checkbox { width: auto; } /* CSS to relocate the required asterisk */ .nu-lightning-wrapper .uiBlock .bBody .inputHeader .required{ margin-right: auto; margin-left: auto; } /* Corrects text area label display within a flow. */ .nu-lightning-wrapper .bBody .inputHeader .richTextLabel { display: inline-block; float: none; text-align: left; width: 100%; } /* Corrects FlowRuntime fields from extending outside card. */ flowruntime-screen-field div.container, flowruntime-record-field div.container { width: 100%; } /* Adds margin above and below FlowRuntime radio-select and multi-select fields. */ .nu-lightning-wrapper .slds-scope flowruntime-radio-button-input-lwc fieldset, .nu-lightning-wrapper .slds-scope flowruntime-multi-checkbox-lwc fieldset { margin-top: 1.5rem; margin-bottom: 1.5rem; } /* Corrects previous button display within a flow. */ .slds-button.slds-button_neutral.uiButton--default.uiButton{ padding-left: 1rem; padding-right: 1rem; text-align: center; vertical-align: middle; border: 1px solid #EE5623; transition: border .15s linear; background-color: #EE5623; color: rgb(255, 255, 255); } /* Relocates the required asterisk on Lightning-wrapped components. */ .nu-lightning-wrapper .uiBlock .bBody .inputHeader .required{ margin-right: auto; margin-left: auto; } /* Adds padding to radio button inputs within a flow. */ .flowruntimeRadioButtonInput .bBody .slds-form-element__control{ padding-top: 25px; } /* Allows radio select component to occupy full width. Default is 33%. */ .nu-lightning-wrapper .slds-card .slds-form-element__control .slds-radio { width: 100%; } /* Adds a backgound color, border radius, and padding to the SLDS help text bubble. */ lightning-primitive-bubble:not(.slds-hide).slds-popover_tooltip { background-color: #EE5623; border-radius: 0.5em; padding: 0.5em; } /* Sets the SLDS help text to use a white font color. */ .slds-popover__body { color: #FFFFFF; } /* Hides the help text icon for Lookup components since they they never go away once they appear. They just pull in the Filter Criteria's message, which isn't necessarily helpful. As of at least Winter '22, you cannot override or disable the help text in the screen flow. */ lightning-lookup lightning-helptext { display: none; } /* Hides the "Show All Results for" option in the dropdown for Lookup components, since it doesn't work in Community Hub. */ lightning-base-combobox-item[data-value="actionAdvancedSearch"] { display: none !important; } /*———— MOBILE MENU CANVAS ————*/ /* Removes margin from the top of the mobile menu so it aligns with the container div. */ .m-off-canvas-nav { margin-top: 0px; } /* Changes dark gray background color of mobile menu to light gray. */ .l-off-canvas.l-off-canvas-left { background-color: #F9F9F9; } /* AFP - Sets the color of Navigation Menu Items in the mobile menu. */ .m-off-canvas-nav a.list-group-item { background-color: #FFFFFF; border-color: #5B6770; color: #5B6770 !important; } /* AFP - Simplifies mobile menu Nav Menu Item hover and focus colors to be light gray. */ .l-off-canvas .m-off-canvas-nav a.list-group-item:focus, .l-off-canvas .m-off-canvas-nav a.list-group-item:hover { background-color: #EEEEEE; } /* In mobile menu, converts left margin of child Nav Menu Items to left padding to prevent white background from appearing. */ .m-off-canvas-nav a.list-group-item.nav-child { margin-left: 0; padding-left: 2.5em; } /* AFP - Simplify Mobile Menu "list group" border to AFP yellow. */ .l-off-canvas .m-off-canvas-nav .list-group { border-bottom-color: #FFC92B; } /*———— MOBILE @MEDIA ————*/ @media (max-width: 1000px) { /* Hides "hide-mini" global navigation menu items to prevent collisions with the logo. */ .navbar-nav > li.hide-mini { display: none; } } @media (max-width: 850px) { /* Hides "hide-mini-2" global navigation menu items to prevent collisions with the logo. */ .navbar-nav > li.hide-mini-2 { display: none; } } @media (min-width: 768px) { .container { width: 100%; } } @media (max-width: 767px) { /* Reduces navbar height so it doesn't cover page header. */ .navbar { min-height: 50px; } /* Ensures off-canvas navigation is not hidden behind navbar. */ .l-off-canvas.l-off-canvas-left { top: 63px; } /* Changes background-color of off-canvas area. */ .l-off-canvas { background: #FFFFFF; } /* Fixes vertical alignment of page header. */ .l-canvas { top: 16px; } /* Reduces page header's heading. */ .page-header h1 { font-size: 40px; line-height: 48px; } /* Reduces page header's subheading. */ .page-header p { font-size: 20px; line-height: 28px; } } @media (max-width: 767px) { .navbar { min-height: 50px; } }