/* ========================================================= MISKOM CAREBRIDGE SUPPORT FOUNDATION — Brand overrides Loaded after master.css / responsive.css ========================================================= */ :root{ --mcsf-blue: #0202F2; --mcsf-blue-dark: #010196; --mcsf-red: #FE0000; --mcsf-red-dark: #B60000; --mcsf-ink: #16181d; /* Kept as aliases so any old references still resolve to the real brand colors */ --mcsf-teal: var(--mcsf-blue); --mcsf-teal-dark: var(--mcsf-blue-dark); --mcsf-amber: var(--mcsf-red); --mcsf-amber-dark: var(--mcsf-red-dark); } /* ---- Brand color remaps (drives most of the template) ---- */ .default-bg{background-color: var(--mcsf-blue) !important;} .default-color{color: var(--mcsf-blue) !important;} .secondary-bg{background-color: var(--mcsf-red) !important;} .secondary-color{color: var(--mcsf-red) !important;} .btn-color{background-color: var(--mcsf-blue); color:#fff;} .btn-color:hover, .btn-color:active, .btn-color:focus{background-color: var(--mcsf-blue-dark); color:#fff;} .btn-amber{background-color: var(--mcsf-red); color:#fff; border-color: var(--mcsf-red);} .btn-amber:hover, .btn-amber:active, .btn-amber:focus{background-color: var(--mcsf-red-dark); color:#fff; border-color: var(--mcsf-red-dark);} a{color: var(--mcsf-blue);} a:hover{color: var(--mcsf-red);} /* ---- Logo (real MISKOM CareBridge mark: blue "M" with red raised-arms figure) ---- */ .brand-logo{display:flex; align-items:center; text-decoration:none; height:80px;} .brand-logo-mark{width:46px; height:auto; margin-right:12px; flex:0 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));} .brand-logo-text{font-family:'Montserrat', sans-serif; font-weight:600; font-size:15px; line-height:1.15; color:#fff; letter-spacing:.2px; transition:color .3s ease;} .brand-logo-text strong{color: var(--mcsf-red); font-weight:800;} .brand-logo-text small{display:block; font-size:9.5px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; opacity:.85; color:#fff;} nav.navbar:not(.navbar-transparent) .brand-logo-text, nav.navbar.sticked .brand-logo-text{ color: var(--mcsf-blue); } nav.navbar:not(.navbar-transparent) .brand-logo-text small, nav.navbar.sticked .brand-logo-text small{ color: var(--mcsf-ink); opacity:.75; } /* Safety net: the nav is styled for white text (it normally sits over a dark hero image), so give it a faint dark backdrop of its own. This keeps the menu readable even on a page with no hero image behind it, or if a hero photo is slow to load. */ nav.navbar.navbar-transparent{background: linear-gradient(180deg, rgba(8,20,18,.55) 0%, rgba(8,20,18,0) 100%);} /* Mobile dropdown menu needs its own solid background — without this it sits transparently over whatever hero content is behind it. */ @media (max-width: 991px){ nav.navbar.bootsnav .navbar-collapse.in{ background-color:#ffffff; box-shadow:0 16px 30px rgba(9,20,18,.18); border-radius:0 0 10px 10px; padding-bottom:10px; } nav.navbar.bootsnav .navbar-collapse.in .navbar-nav > li > a{ color: var(--mcsf-ink) !important; } nav.navbar.bootsnav .navbar-collapse.in .navbar-nav > li > a:hover, nav.navbar.bootsnav .navbar-collapse.in .navbar-nav > li.active > a{ color: var(--mcsf-teal) !important; } nav.navbar.bootsnav .navbar-collapse.in .donate-mobile-link{ color: var(--mcsf-amber) !important; } } .nav-donate-btn{margin-left:15px; padding:8px 20px !important;} .donate-mobile-link{color: var(--mcsf-amber) !important; font-weight:700;} /* ---- Global type scale ---- The template's default headings (h1 58px / h2 40px / h3 26px) read as oversized "writeups" once real copy is dropped in, especially for section headings and inner-page banner titles. Scale them down to a more normal editorial size site-wide. */ h1{font-size:40px;} h2{font-size:28px;} h3{font-size:22px;} .section-heading h2{font-size:28px;} .section-heading h5{font-size:15px;} .page-title h1{font-size:36px;} .page-title h4{font-size:15px;} /* ---- Hero banners (inner pages) ---- */ .title-hero-bg-sm{min-height:300px;} .title-hero-bg::before{background: linear-gradient(180deg, rgba(9,20,18,.55) 0%, rgba(9,20,18,.78) 100%);} .page-title .breadcrumb-tag{display:inline-block; background: rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.4); color:#fff; text-transform:uppercase; letter-spacing:2px; font-size:11px; padding:5px 14px; border-radius:30px; margin-bottom:16px;} /* ---- Home hero slider (Torneo .home-slider / .default-slider, real Slick carousel) ---- */ .home-slider{height:92vh; min-height:560px; padding:0; position:relative;} .home-slider .default-slider, .home-slider .slick-list, .home-slider .slick-track, .home-slider .slide, .home-slider .slide-img, .home-slider .hero-text-wrap{height:92vh; min-height:560px; width:100%;} .home-slider .hero-text-wrap{background:linear-gradient(100deg, rgba(2,2,40,.82) 0%, rgba(2,2,60,.55) 45%, rgba(2,2,80,.28) 100%);} .home-slider .hero-text .container{position:relative; z-index:2;} /* The hero text is vertically centered (see master.css .hero-text), which on shorter screens can put the eyebrow tag right under the fixed nav's logo, and push the buttons down into the dots/stats row. This padding keeps a guaranteed gap at both the top (clear of the nav) and the bottom (clear of the dots + stats bar) no matter the viewport height. */ .home-slider .hero-text{padding:100px 0 80px;} /* Higher-specificity selector + !important: master.css's ".hero-text h1" rule (78px) and responsive.css's breakpoint rules (70px / 40px, several marked !important) both out-rank a plain ".hero-slide-title" class selector, so this has to out-specify and out-important all of them to actually take effect at every screen width. */ .hero-text h1.hero-slide-title{font-size:26px !important; line-height:1.3 !important; font-weight:700; max-width:520px; letter-spacing:normal !important;} .home-slider p.lead{font-size:14px; line-height:1.6; max-width:480px;} .home-slider .breadcrumb-tag{margin-bottom:12px;} @media (max-width:991px){ .home-slider .hero-text{padding:100px 0 80px;} } /* The dots list renders as a full-width