Template:Calgary/Banner-Styling

iGEMwiki toolssearchlogin

Template:Calgary/Banner-Styling /* --- [ MOBILE PAGE BANNER] --- */

HQ_page .mobile-banner-back .page-banner .page-subtitle .emphasis { color: rgb(255, 255, 255); font-weight: 600; font-size: 15px; }

HQ_page .mobile-banner-back .page-banner button.toggle { border: none; background: none; color: rgb(255, 255, 255); }

HQ_page .mobile-banner-back { width: 100%; z-index: 2; transition: top 0.2s ease-in-out; 

	background-color: #257D93;

}

HQ_page .mobile-banner-back .page-banner { display: flex; justify-content: space-between; line-height: 1; padding: 15px 15px 15px 15px; font-size: 15px; }

HQ_page .mobile-banner-back .page-banner h2 { font-size: 15px; padding-top: 10px; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; }

HQ_page .mobile-banner-back .page-banner .toggle-button { font-weight: 600; color: rgba(255,255,255,1); }


/* --- [ DESKTOP PAGE BANNER] --- */

HQ_page .desktop-banner-back { 

background-image: url("T--Calgary--header-background.jpg");
background-color: #cccccc;
height: 380;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;

}

HQ_page .desktop-banner-back .text-area { z-index: -10; min-height: 380px; display: flex; flex-direction: column; justify-content: center; }

.hero-image {

}

HQ_page .desktop-banner-back .text-area .page-banner { text-align: center; text-transform: uppercase; }

HQ_page .desktop-banner-back .text-area .page-banner .page-subtitle { font-size: 30px; color: rgba(255, 255, 255, 0.6); }

HQ_page .desktop-banner-back .text-area .page-banner .page-title { font-size: 60px; color: white; font-weight: 500; }

bodyContent .page-banner h2, #bodyContent .page-banner h1 { 

  margin-bottom: 0px;

}


/* —————— [ MOBILE TO DESKTOP TRANSISTION ] —————— */

@media only screen and (min-width: 769px) {

  1. HQ_page .mobile-banner-back { display: none; }
  1. HQ_page .desktop-banner-back { display: inherit; }
  1. HQ_page #team-page-banner.desktop-banner-back { display: inherit; } }