/* header-footer.css - Purpose: contains navigation (header) and footer styles only. - Global/site-wide styles (typography, variables, containers) live in /_assets/css/global.css Keep navigation- and footer-specific rules grouped and clearly labeled so edits are easy to locate. */ .ss-custom-navbar { font-family: "Yankeebold", "Helvetica Neue", Arial, sans-serif; background-color: transparent; transition: background-color 0.7s ease; /* border-bottom: 1px solid rgba(246,246,246,0.12); */ display: flex; flex-direction: column; align-items: stretch; } .ss-custom-navbar > .container-fluid { display: flex; align-items: center; } .ss-custom-navbar > .container-fluid, .ss-custom-navbar .nav-top-inner { width: 94%; max-width: 1600px; margin-left: auto; margin-right: auto; } /* Top */ .nav-top-row { width: 100%; background: rgba(0,0,0,0.90); } .nav-top-row2 { width: 100%; background: rgba(0,0,0,0.90); display: none; text-align: right; } .nav-top-row2 .nav-top-inner-container { justify-content: flex-end; } .nav-top-inner { width: 94%; max-width: 1600px; margin: 0 auto; min-height: 35px; max-height: 37px; display: block; } .nav-top-inner > .row { width: 100%; } .nav-top-inner-container { display: flex; gap: 20px; width: 100%; } .nav-top-inner { padding-left: 0; padding-right: 0; } .nav-top-left { display: flex; align-items: center; flex-grow: 1; color: #f6f6f6; } .nav-top-right { display: flex; justify-content: flex-end; align-items: center; height: 100%; } .nav-top-right .search-form-trigger { display: inline-flex; background-color: #e3b95b; color: #ffffff; text-transform: uppercase; transition: all 0.6s ease; min-height: 35px; max-height: 37px; align-items: center; justify-content: center; font-weight: 600; width: 40px; } .donate-btn { display: inline-flex; background-color: #d9a22a /*#cba144*/; color: #000000; font-family: "YankeeBold", "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; transition: all 0.6s ease; min-height: 35px; max-height: 37px; align-items: center; justify-content: center; font-weight: 900 !important; letter-spacing: 1.75px; line-height: normal; padding: 0 25px; } .donate-btn:hover, .nav-top-right .search-form-trigger:hover { text-decoration: none; background-color: #a1791f; color: #ffffff; } .inner-nav-search-dropdown { position: absolute; padding: 20px 15px; width: 350px; right: 0; background-color: #a1791f; opacity: 0; visibility: hidden; z-index: 100; transition: opacity 0.4s ease, visibility 0.4s ease; } .inner-nav-search-dropdown .search-input { height: 45px; border-radius: 10px; border: 2px solid #ffffff; padding: 0 70px 0 25px; color: #6c6c6c; } .inner-nav-search-dropdown .search-submit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #6c6c6c; cursor: pointer; line-height: 0; } .search-form-container:hover .inner-nav-search-dropdown { display: block; opacity: 1; visibility: visible; } .inner-nav-social-icons { display: flex; margin-right: 15px; gap: 12px; align-items: center; } .inner-nav-social-icons a { color: #a1791f /*rgba(180,151,49,0.91)*/; font-size: 20px; transition: color 0.3s ease; } .inner-nav-social-icons a:hover, .inner-nav-social-icons a:focus { color: #F6F6F6; } .inner-nav-social-icons a:visited { color: #a1791f /*rgba(180,151,49,0.91)*/; } @media (max-width: 900px) { .nav-top-row { display: none; } .nav-top-row2 { display: block; } } /* .ss-custom-navbar > .container-fluid { width: 94%; max-width: 1600px; display:flex; align-items:center; } */ .ss-res-btn { display: inline-block; padding: 6px 16px; background-color: rgba(0, 0, 0, 0.85); color: #ffffff; border: 1.5px solid #ffffff; border-radius: 5px; text-decoration: none; font-size: 0.8rem; font-family: "YankeeBold", "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; font-weight: 500; transition: all 0.6s ease; cursor: pointer; vertical-align: middle; } /* ========================== Navigation / Header Styles ========================== Group: navbar, mega menu, mobile nav, togglers, scrolled state */ nav li, footer li { margin-bottom: 0.5rem; } .navbar-brand .logo { display: inline-block; background-image: url("../img/common/bhc-foundation-lt.png"); width: clamp(325px, 10vw + 240px, 350px); height: 100px; background-repeat: no-repeat; background-size: contain; background-position: left; transition: all 0.9s ease-in-out; } .ss-custom-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .ss-custom-navbar .navbar-nav { gap: 2.355rem; font-weight: 600; } .ss-custom-navbar .navbar-nav .ss-nav-item { margin-bottom: 0; } .ss-search-form .input-group { border-radius: 7px; padding-left: 0.88rem; padding-right: 0.88rem; border: 1.5px solid #151515; align-items: center; font-size: 14px; color: #151515; } .ss-search-form .input-group svg { width: 16px; } .ss-search-form .input-group input { padding: 6px; font-size: 14px; color: #151515; background-color: transparent; height: auto; } .ss-search-form .input-group input::placeholder { color: #151515; } .ss-search-form .input-group-text, .ss-search-form input { border: none; } .ss-search-form input:focus, .ss-search-form input:focus-visible { box-shadow: none; border: none; background-color: transparent; outline: none; } .ss-mega-overlay { position: fixed; top: 61px; left: 0; width: 100%; height: calc(100vh - 61px); background-color: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; z-index: 10; transition: opacity 5.4s ease; } .ss-mega-overlay.active { opacity: 1; visibility: visible; } .ss-mega-menu-container { position: absolute; background-color: #F6F6F6 /*#e5e5e5*/; /* row 298+/- for meganav */ border-top: 1px solid #b6b6b6; top: 100%; width: 100%; left: 0; z-index: 20; box-shadow: 0 12px 15px rgba(0, 0, 0, 0.4); } .ss-mega-menu-container .ss-menu-item_media { margin-bottom: 1.333rem; } .ss-mega-menu-container a { text-decoration: none; } .ss-mega-menu-container ul { list-style: none; padding: 0; } .ss-mega-menu-container .ss-menu-item_list a { display: inline-block; padding-top: 0.5rem; font-size: 15px; line-height: 24px; color: #000; } .ss-mega-menu-container .ss-menu-item p { font-size: 15px; } .ss-mega-menu-container .ss-menu-item_list h4 a { font-family: YankeeBold; font-size: 22px; } .ss-menu-item_social { gap: 10px; } .ss-navbar-toggler { display: inline-flex; align-items: center; margin: 0; padding: 0; border: none; } .ss-navbar-toggler:focus { outline: none; box-shadow: none; } .ss-mbl-navbar-toggler { position: absolute; display: none; padding: 0; top: 35px; left: 35px; z-index: 1; border: 0; outline: none; } .ss-mbl-navbar-toggler svg { width: 25px; } .ss-mbl-navbar-toggler:focus { outline: none; box-shadow: none; } .ss-nav-social { display: flex; margin-top: 30px; align-items: center; gap: 30px; font-size: 24px; } .ss-nav-social a { color: #000; } .navbar-toggler-text { margin-right: 10px; color: #fff; text-transform: uppercase; font-weight: 600; } /* Navbar Scrolled Starts */ .navbar-scrolled.ss-custom-navbar .navbar-toggler-text, .ss-sticky-top.ss-custom-navbar .navbar-toggler-text { color: #090716; } .navbar-scrolled.ss-custom-navbar .navbar-toggler-icon, .ss-sticky-top.ss-custom-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .ss-sticky-top .navbar-brand .logo { background-image: url("../img/common/bhc-foundation-lt.png"); width: clamp(325px, 10vw + 240px, 350px); } .navbar-scrolled .navbar-brand .logo { background-image: url("../img/common/bhc-foundation-dk.png"); width: clamp(325px, 10vw + 240px, 350px); height: 100px; } .navbar-scrolled.ss-custom-navbar, .ss-sticky-top.ss-custom-navbar { background-color: #fff; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); border-bottom: 1px solid #fff; } .navbar-scrolled.ss-custom-navbar .navbar-nav .nav-link, .ss-sticky-top.ss-custom-navbar .navbar-nav .nav-link { color: #090716; } /* Navbar Scrolled Ends */ @media (max-width: 480px) { .navbar-toggler-text { display: none; } .ss-navbar-collapse { width: 100% !important; } } @media (min-width: 1200px) and (max-width: 1220px) { .ss-custom-navbar .navbar-nav .nav-link { font-size: 16px; } } @media (min-width: 1200px) { .ss-mega-menu-container { display: block; padding-top: 1.777rem; padding-bottom: 1.777rem; opacity: 0; transform: translateY(10px); visibility: hidden; transition: opacity 0.4s ease, transform 0.4s ease; } .ss-custom-navbar .navbar-nav .ss-nav-item:hover .ss-mega-menu-container { display: block; opacity: 1; visibility: visible; transform: translateY(0); } .ss-mega-menu-container .ss-menu-item { padding-left: 1.5rem; padding-right: 1.5rem; } .ss-mega-menu-container > .row.no-gutters { margin-left: auto; margin-right: auto; width: calc(94% + 48px); max-width: calc(1600px + 48px); } .ss-mega-menu-container > .row > div .ss-menu-item { height: 100%; } .ss-mega-menu-container > .row > div:not(:last-child) .ss-menu-item { border-right: 1px solid rgba(50,50,50,0.35); } .ss-custom-navbar .navbar-nav .nav-link { position: relative; display: flex; padding-left: 0; padding-right: 0; color: #fff; /* text-transform: uppercase; */ align-items: center; overflow: hidden; } .ss-custom-navbar .navbar-nav .nav-link:after { background-color: #cba144; bottom: 0; content: ""; height: 5px; left: 0; position: absolute; transform: translateY(100%); transition: transform 0.5s ease; width: calc(100%); } .ss-custom-navbar .navbar-nav .nav-link:hover { color: #fff; } .ss-custom-navbar .navbar-nav .ss-nav-item:hover .nav-link:after { transform: translateY(0); } .ss-search-form { margin-left: 1.75rem; } /* SEARCH FORM MAG GLASS */ .search-form-trigger, .search-form-trigger:hover, .search-form-trigger:focus, .search-form-trigger:active { text-decoration: none; } /* Navbar Scrolled Starts */ .navbar-scrolled.ss-custom-navbar .ss-search-form .input-group, .ss-sticky-top.ss-custom-navbar .ss-search-form .input-group { border: 1.5px solid #090716; color: #090716; } .navbar-scrolled.ss-custom-navbar .ss-search-form .input-group input, .ss-sticky-top.ss-custom-navbar .ss-search-form .input-group input { color: #090716; } .navbar-scrolled.ss-custom-navbar .ss-search-form .input-group input::placeholder, .ss-sticky-top.ss-custom-navbar .ss-search-form .input-group input::placeholder { color: #090716; } .navbar-scrolled.ss-custom-navbar .navbar-nav .nav-link:hover, .ss-sticky-top.ss-custom-navbar .navbar-nav .nav-link:hover { color: #090716; } /* Navbar Scrolled Ends */ } /* Small Navigation Starts */ @media (max-width: 1199px) { .ss-footer-heading { color: #151515; font-family: "YankeeBlack", serif; } .ss-footer-holder h4 { /* font-size: clamp(1.5rem, 3vw, 2rem); */ line-height: 1.4; text-transform: uppercase; } .ss-custom-navbar { font-family: "YankeeMedium"; } .navbar-expand-md > .container { padding-left: 0; padding-right: 0; } /* ORIGINAL .navbar-expand-md > .container { padding-left: 20px; padding-right: 20px; } */ .ss-custom-navbar .navbar-nav .nav-link { position: relative; display: flex; font-family: "YankeeBold"; font-size: 15px; text-transform: uppercase; align-items: center; overflow: hidden; } .ss-custom-navbar .navbar-nav .has-mega-menu .nav-link:after { content: "\f078"; position: absolute; right: 12px; left: auto; top: 50%; transform: translateY(-50%); font-size: 12px; font-family: "Font Awesome 6 Free"; } .ss-custom-navbar .navbar-nav .has-mega-menu .nav-link:not(.collapsed):after { transform: translateY(-50%) rotate(180deg); } .ss-mbl-navbar-toggler { display: inline-block; } .ss-navbar-collapse { position: fixed; padding: 90px 0 50px 0; display: flex; flex-direction: column; align-items: center; right: 0; top: 0px; width: 372px; max-width: 100vw; height: 100vh; z-index: 999; gap: 30px; overflow-y: auto; background-color: #e9e9e9 /*#cbcbcb #eaeaea*/; box-shadow: -4px 0px 11px -6px #000; } .ss-navbar-collapse.collapsing { right: -100%; transition: height 0s ease; } .ss-navbar-collapse.show { right: 0; transition: right 0.4s ease-in-out; } .navbar-toggler.collapsed ~ .ss-navbar-collapse { transition: right 0.5s ease-in-out; } .ss-custom-navbar .navbar-nav { font-size: 22px; align-items: flex-start; width: 100%; gap: 0; } .ss-custom-navbar .navbar-nav .ss-nav-item { width: 100%; border-bottom: 1px solid #151515; } .navbar-light.ss-custom-navbar .navbar-nav .nav-link { padding: 1.777rem; color: #151515; height: auto; } .navbar-light.ss-custom-navbar .navbar-nav .nav-link:hover, .navbar-light.ss-custom-navbar .navbar-nav .nav-link:focus { background-color: #eaeaea; } .ss-mega-menu-container { position: static; padding: 0 1.777rem 1.777rem; background-color: transparent; box-shadow: none; } .ss-mega-menu-container > .row { gap: 1.777rem; } .ss-mega-menu-container > .row > div:not(:last-child) .ss-menu-item { padding-bottom: 1.777rem; border-bottom: 1px solid #151515; } .ss-mega-menu-container .ss-menu-item_list a { font-family: "Kumbh Sans", sans-serif; font-size: 15px; color: #151515; } .ss-mega-menu-container .ss-menu-item_list h4 a { font-size: 15px; text-transform: uppercase; } .ss-mega-menu-container .ss-menu-item p { color: #151515; } .ss-mega-menu-container .ss-nav-social a { color: #fff; } .inner-nav-social-icons a { color: #d9a22a; } .inner-nav-social-icons a:hover, .inner-nav-social-icons a:focus { filter: invert; } } /* Small Navigation Ends */ /* ========================== Footer Styles ========================== Group: wide footer, small/mobile footer, footer typography and link styles */ .foosty { /* background-color: #FF47; border-top: 1px solid rgba(189, 182, 175, 0.80); /*rgba(189, 182, 175, 0.30)*/ } /* Wide Footer Starts */ .ss-footer-container { position: relative; margin-top: 2rem; padding-top: 1.25rem; /* space below the rule */ border-top: 0; /* make sure no border is fighting this */ } .ss-footer-container::before { content: ""; position: absolute; top: 0; left: 15px; /* Bootstrap 4 gutter */ right: 15px; /* Bootstrap 4 gutter */ border-top: 1px solid #696969; } .ss-footer-holder { position: relative; padding: 0px 0 20px; overflow: hidden; } .ss-footer-holder > .container-fluid { width: calc(94% + 30px); max-width: 1600px; } .ss-footer-holder .row { align-items: stretch; } .footer-cat { font-family: "YankeeBold", "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; line-height: 1.5; font-size: 1.05rem; letter-spacing: 0.02em; color: #F6F6F6; margin-bottom: 0.5rem; } .footer-cat a { color: inherit; text-decoration: none; font-weight: normal; margin-right: 1rem; transition: color 0.3s ease, text-decoration 0.3s ease; } .footer-cat a:last-child { margin-right: 0; } .footer-cat a:hover, .footer-cat a:focus { text-decoration: underline; color: #FFFFFF; } .footer-cat:not(:first-of-type) { margin-top: 4rem; } .footer-link { font-family: "Kumbh Sans", sans-serif; font-weight: 500; line-height: 1.5; font-size: 0.8rem; letter-spacing: 0.025em; color: #F6F6F6; margin-bottom: 1.0rem; } .footer-link a { color: inherit; font-weight: 500; text-decoration: none; transition: color 0.3s ease, text-decoration 0.3s ease; } .footer-link a:hover, .footer-link a:focus { text-decoration: underline; color: #FFFFFF; } .footer-txt { font-family: "Manrope", sans-serif; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.5; font-size: 0.7rem; letter-spacing: 0.025em; color: #bbbbbb; margin-bottom: 0.5rem; } .footer-txt a { color: inherit; font-weight: 500 !important; text-decoration: none; margin-right: 1rem; transition: color 0.3s ease, text-decoration 0.3s ease; } p.footer-txt a { font-family: "Manrope", sans-serif; } .footer-txt a:last-child { margin-right: 0; } .footer-txt a:hover, .footer-txt a:focus { text-decoration: underline; color: #FFFFFF; } @media (min-width: 768px) { .ss-footer-holder .container { padding-left: 60px; padding-right: 60px; } } @media (max-width: 767.98px) { .container { padding-left: 0; padding-right: 0; } } /* Wide Footer Ends */ /* Small Footer Starts */ /* .ss-footer-mobile * { color: #fff; } */ .footer-logo { max-height: 45px; } .ss-footer-holder h4 { font-family: "YankeeBold", "Helvetica Neue", Arial, sans-serif !important; text-transform: uppercase; } .ss-footer-holder .txt-medium { font-family: "YankeeMedium"; font-size: 15px; } .ss-mbl-footer-accordion .card { background-color: transparent; border-radius: 0; border: none; border-bottom: 1px solid #d9a22a !important; color: #222; } .ss-mbl-footer-accordion .card .card-header { border: none; background-color: transparent; } .ss-footer-mobile .card-header h2 button { color: #bbbbbb; background-color: transparent; border: none; transition: color 0.3s ease, text-decoration 0.3s ease; font-family: "YankeeBold", "Helvetica Neue", Arial, sans-serif !important; text-transform: uppercase; margin-top: 5px; } .ss-footer-mobile .card-header h2 button:hover { color: #d9a22a; } .ss-mbl-footer-accordion .card .card-header .btn { display: flex; align-items: center; justify-content: space-between; font-family: "YankeeBold"; font-size: 16px; text-transform: uppercase; border: none; text-decoration: none; } .ss-mbl-footer-accordion .card .card-header .btn::after { content: "\f078"; position: absolute; right: 12px; left: auto; top: 19px; font-size: 12px; font-family: "Font Awesome 6 Free"; font-weight: bold; } .ss-mbl-footer-accordion .card .card-header .btn[aria-expanded="true"]::after { transform: rotate(180deg); } .ss-mbl-footer-accordion .card ul { padding: 0; list-style: none; } .ss-footer-mobile .btn-link:hover { color: #fff; } .ss-footer-mobile .btn:focus-visible { outline: none; } .ss-footer-mobile .card-body ul li a { color: #F6F6F6; text-decoration: none; transition: color 0.3s ease, text-decoration 0.3s ease; } .ss-footer-mobile .card-body ul li a:hover { color: #8c8c8c; text-decoration: underline; } @media (max-width: 767.98px) { .ss-footer-holder { padding: clamp(50px, 8vw, 100px) 0; } } /* .ss-footer-holder { background-color: #222222; } */ /* Small Footer Ends */