Template:Calgary/Imposter-Landing-2-Style

/* GENERAL PAGE CSS */

/* TEXT STYLING */ h1, h2, p {

 overflow-wrap: break-word;

}

/* SUBHEADING */ .sub-heading {

 padding: 0px;
 margin-top: -10px;
 background: #882916;
 display: inline-grid;
 grid-gap: 0px;
 grid-template-columns: 50vw 50vw;
 grid-template-rows: auto;
 align-items: center;
 justify-items: center;

}

.sub-heading-image {

 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;

}

.sub-heading-image img {

 width: 50vw;

}

.sub-heading-text {

 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 1;
 grid-row-end: 2;
 text-align: center;
 width: 50vw;
 height: auto;
 padding: 35px;

}

.sub-heading h1 {

 color: #fbf6f3;
 font-weight: 700;
 font-size: 3vw;

}

.sub-heading h2 {

 color: #fbf6f3;
 font-weight: 500;
 font-size: 2.2vw;

}

.emphasis {

 color: #ffa600;
 display: inline;

}

/* INTRO BODY */ .intro-body {

 background: #ffffff;
 padding: 7vw 15vw;
 text-align: center;

}

.intro-body p {

 color: #444444;
 text-align: left;
 font-weight: 300;
 text-align: center;

}

.intro-body h1 {

 color: black;
 letter-spacing: 0.3em;
 font-weight: 700;
 text-align: center;

}

.intro-body h2 {

 color: #ffa600;
 font-weight: 500;
 text-align: center;

}

.intro-body img {

 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 50%;

}

/* HEADER/BANNER */

.banner-image {

 /*height: 80vh;*/
 display: inline-block;

}

body, html {

 height: 100%;

}

/* The banner image */ .banner-image {

 /*background-attachment: fixed; Makes image look as if it's in the background*/
 background-position: center top;
 width: 100vw;
 /* Position and center the image to scale nicely on all screens */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;

}

/* Place text in the middle of the image */ .banner-text {

 font-size: 8vh;
 font-weight: 300;
 color: #882916;
 text-align: center;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 /* Simulates outlining the text */
 text-shadow: -0.5px -0.5px 0 #fbf6f3, 0.5px -0.5px 0 #fbf6f3,
   -0.5px 0.5px 0 #fbf6f3, 0.5px 0.5px 0 #fbf6f3;

}

/* SLIDESHOW */

• {

 box-sizing: border-box;

}

/* Slideshow container */ .slideshow-container {

 max-width: 1000px;
 position: relative;
 margin: auto;

}

/* Hide the images by default */ .mySlides {

 display: none;

}

/* Next & previous buttons */ .prev, .next {

 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 color: #fbf6f3;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 user-select: none;

}

/* Position the "next button" to the right */ .next {

 right: 0;
 border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover {

 background-color: #423636;

}

/* Caption text */ .text {

 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 8px;
 width: 100%;
 text-align: center;

}

/* Number text (1/3 etc) */ .numbertext {

 color: #fbf6f3;
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;

}

/* The dots/bullets/indicators */ .dot {

 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;

}

.active, .dot:hover {

 background-color: #423636;

}

/* Fading animation */ .fade {

 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;

}

@-webkit-keyframes fade {

 from {
   opacity: 0.4;
 }
 to {
   opacity: 1;
 }

}

@keyframes fade {

 from {
   opacity: 0.4;
 }
 to {
   opacity: 1;
 }

}

/* SPONSER BANNER STYLING */ .gradient-divider {

 background-image: linear-gradient(to right, #882916, #ff7700);
 width: 80vw;
 height: 6px;
 margin: auto;
 margin-bottom: 35px;
 margin-top: 35px;

}

.sponser-grid {

 vertical-align: center;
 max-width: 100%;
 width: 100%;
 overflow-x: hidden;
 text-align: center;
 margin-top: 100px;

}

.sponser-banner {

   display: inline-grid;
   grid-template-columns: 10vw 10vw 10vw 10vw 10vw 10vw 10vw;
   grid-template-rows: auto auto;
   align-items: center;
   justify-items: center;
   margin: auto;

}

.sponser-banner img {

   overflow: hidden;
   height: auto;
   width: 8vw;

}

.sponser1 {

 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;

}

.sponser2 {

 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 1;
 grid-row-end: 2;

}

.sponser3 {

 grid-column-start: 3;
 grid-column-end: 4;
 grid-row-start: 1;
 grid-row-end: 2;

}

.sponser4 {

 grid-column-start: 4;
 grid-column-end: 5;
 grid-row-start: 1;
 grid-row-end: 2;

}

.sponser5 {

 grid-column-start: 5;
 grid-column-end: 6;
 grid-row-start: 1;
 grid-row-end: 2;

}

.sponser6 {

 grid-column-start: 6;
 grid-column-end: 7;
 grid-row-start: 1;
 grid-row-end: 2;

}

.sponser7 {

 grid-column-start: 7;
 grid-column-end: 8;
 grid-row-start: 1;
 grid-row-end: 2;

}

.sponser8 {

 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 2;
 grid-row-end: 3;

}

.sponser9 {

 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 2;
 grid-row-end: 3;

}

.sponser10 {

 grid-column-start: 3;
 grid-column-end: 4;
 grid-row-start: 2;
 grid-row-end: 3;

}

.sponser11 {

 grid-column-start: 4;
 grid-column-end: 5;
 grid-row-start: 2;
 grid-row-end: 3;

}

.sponser12 {

 grid-column-start: 5;
 grid-column-end: 6;
 grid-row-start: 2;
 grid-row-end: 3;

}

.sponser13 {

 grid-column-start: 6;
 grid-column-end: 7;
 grid-row-start: 2;
 grid-row-end: 3;

}

.sponser14 {

 grid-column-start: 7;
 grid-column-end: 8;
 grid-row-start: 2;
 grid-row-end: 3;

} /* Fixing the top content under the navbar */ .banner-image {

 position: relative;

}

/* Style page content */ .main {

 padding: 0px 0px;
 position: relative;
 top: -100px; /* To override the odd 
 tag bug */

}

@media (max-width: 767px) {

 .sub-heading {
   display: block;
 }
 .sub-heading-image img {
   width: 100vw;
 }
 .sub-heading-text {
   width: 100vw;
   height: 67vw;
 }
 .sub-heading h2 {
   font-size: 5vw;
 }
 .sub-heading h1 {
   font-size: 7vw;
 }

}

/* PROJECT COMPONENTS */ /* --- [ PROJECT COMPONENTS STYLING ] --- */ /* --- [ PIPELINE PANELS ] --- */

1. bodyContent .content-panel.pipeline h1 {

 font-weight: 600;
 font-size: 36px;

 line-height: 50px;
 letter-spacing: 0.2em;

}

1. bodyContent .content-panel.pipeline h2 {

 font-weight: 400;
 font-size: 30px;

 line-height: 40px;
 letter-spacing: 0.1em;

 margin-bottom: 80px;

}

.title {

 color: #882916;

}

.content-panel.pipeline .pipeline-interface {

 display: flex;
 flex-direction: row;

}

.content-panel.pipeline .pipeline-interface .pipeline-information {

 background-color: #444444;
 padding: 60px;
 flex: 1;

}

.content-panel.pipeline .pipeline-interface .pipeline-information .hidden {

 display: none;

}

.content-panel.pipeline .pipeline-interface .pipeline-information h3 {

 display: inline;
 font-style: normal;
 font-weight: 500;
 font-size: 36px;

 line-height: 43px;
 align-items: center;

 color: rgb(68, 68, 68);

 margin-bottom: 20px;

}

.content-panel.pipeline .pipeline-interface .pipeline-information p {

 display: flex;

 font-family: Barlow;
 font-style: normal;
 font-weight: normal;
 font-size: 18px;

 line-height: 25px;

 color: rgb(68, 68, 68);

 margin-bottom: 20px;

}

.content-panel.pipeline .pipeline-interface .pipeline-information p:last-child {

 margin-bottom: 0px;

}

.content-panel.pipeline .pipeline-interface .pipeline-information .ast {

 font-weight: 600;

 color: #ffa600;

}

.content-panel.pipeline .pipeline-interface .pipeline-diagram {

 margin-right: 80px;

}

.content-panel.pipeline .pipeline-interface .pipeline-diagram g:hover {

 cursor: pointer;

}

.content-panel.pipeline .pipeline-interface .pipeline-diagram g .fixed {

 position: absolute;

}

@media only screen and (max-width: 900px) {

 #bodyContent .content-panel.pipeline h1 {
   font-size: 36px;

   line-height: 50px;
   letter-spacing: 0.2em;
 }

 #bodyContent .content-panel.pipeline h2 {
   font-size: 30px;

   line-height: 40px;
   letter-spacing: 0.1em;
 }

 .content-panel.pipeline .pipeline-interface {
   flex-direction: column;
 }

 .content-panel.pipeline .pipeline-interface .pipeline-diagram {
   margin-right: 0px;
   margin-bottom: 80px;
   text-align: center;
 }

 .content-panel.pipeline .pipeline-interface .pipeline-information {
   padding: 40px;
 }

 #proposed-diagram {
   max-width: 70vw;
 }

}

@media only screen and (max-width: 600px) {

 .content-panel.pipeline .pipeline-interface .pipeline-information h3 {
   font-size: 30px;

   line-height: 40px;
 }

}

@media only screen and (max-width: 400px) {

 .content-panel.pipeline .pipeline-interface .pipeline-information h3 {
   font-size: 24px;

   line-height: 30px;
 }

}

/* --- [ MAIN MESSAGE PANEL ] --- */

.content-panel.main-message {

 background-color: #1e6273;
 padding: 80px;

 text-align: left;
 justify-content: left;

}

.content-panel.main-message > * {

 margin-bottom: 10px;

}

.content-panel.main-message h2 {

 font-weight: bold;
 font-size: 36px;
 line-height: 43px;
 letter-spacing: 0.05em;
 text-transform: uppercase;

 color: rgba(255, 255, 255, 0.6);

}

.content-panel.main-message h1 {

 font-size: 48px;
 line-height: 58px;
 font-weight: bold;
 letter-spacing: 0.05em;
 text-transform: uppercase;

 color: rgba(255, 255, 255, 0.9);

}

.content-panel.main-message h1 .emphasis {

 color: #f1c23f;

}

.content-panel.main-message p {

 font-weight: 500;
 font-size: 24px;
 line-height: 29px;

 color: rgba(255, 255, 255, 0.9);

 max-width: 700px;

}

@media only screen and (max-width: 900px) {

 .content-panel.main-message h2 {
   font-size: 30px;
 }

 .content-panel.main-message h1 {
   font-size: 36px;
 }

 .content-panel.main-message p {
   font-size: 21px;
 }

}

/* --- [ HIGHLIGHTS STYLING ] --- */

.content-panel.highlights .article-holder {

 display: flex;
 flex-direction: row;
 margin-top: 20px;

}

.content-panel.highlights .article-holder .emphasis-quote {

 display: flex;
 flex-direction: column;

 justify-content: center;

 margin-right: 40px;

 padding: 60px;

}

.content-panel.highlights .article-holder .emphasis-quote:hover {

 cursor: pointer;

}

.content-panel.highlights .article-holder .emphasis-quote > * {

 margin-bottom: 60px;

}

.content-panel.highlights .article-holder .emphasis-quote > *:last-child {

 margin-bottom: 0px;

}

1. HQ_page .content-panel.highlights .article-holder .emphasis-quote .quote {

 font-weight: 500;
 font-size: 36px;
 line-height: 43px;
 align-items: center;
 text-align: center;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 margin-left: auto;
 margin-right: auto;

 color: #444444;

 max-width: 350px;

}

.content-panel.highlights .articles {

 display: flex;
 flex-direction: column;
 justify-content: center;

}

.content-panel.highlights .article-row {

 display: flex;
 flex-direction: row;
 margin-bottom: 40px;

}

.content-panel.highlights .article-row:last-child {

 margin-bottom: 0px;

}

.content-panel.highlights .article-row .article {

 text-align: left;
 justify-content: left;
 margin-right: 40px;

 max-width: 350px;

}

.content-panel.highlights .article-row .article:hover {

 cursor: pointer;

}

.content-panel.highlights .article-row .article:last-child {

 text-align: left;
 justify-content: left;
 margin-right: 0px;

}

.content-panel.highlights .article-row .article h2 {

 font-weight: 700;
 font-size: 18px;
 line-height: 22px;
 letter-spacing: 0.1em;

 color: #1e6273;

}

.content-panel.highlights .article-row .article h1 {

 font-weight: 600;
 font-size: 24px;
 line-height: 29px;
 letter-spacing: 0.1em;

 color: #444444;

}

.content-panel.highlights .article-row .article p {

 font-size: 18px;
 line-height: 22px;
 letter-spacing: 0.1em;

 color: #444444;

}

@media only screen and (max-width: 1000px) {

 .content-panel.highlights .article-holder {
   flex-direction: column;
 }

 .content-panel.highlights .article-holder .emphasis-quote {
   margin-right: 0px;
   margin-bottom: 40px;
   padding: 30px;
 }

 #HQ_page .content-panel.highlights .article-holder .emphasis-quote .quote {
   max-width: 500px;
 }

}

@media only screen and (max-width: 600px) {

 .content-panel.highlights .article-row {
   flex-direction: column;
   margin-bottom: 40px;
 }

 .content-panel.highlights .article-row .article {
   margin-right: 0px;
   margin-bottom: 40px;

   max-width: 500px;
 }

 .content-panel.highlights .article-row .article:last-child {
   margin-bottom: 0px;
 }

}

@media only screen and (max-width: 400px) {

 .content-panel.highlights .article-holder .emphasis-quote {
   padding: 0px;
   text-align: center;
 }

 #HQ_page .content-panel.highlights .article-holder .emphasis-quote .quote {
   font-size: 24px;
   line-height: 30px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin-left: auto;
   margin-right: auto;
 }

 #HQ_page
   .content-panel.highlights
   .article-holder
   .emphasis-quote
   .quotation {
   max-width: 20px;
   margin-left: auto;
   margin-right: auto;
 }

 .content-panel.highlights .article-holder .emphasis-quote > * {
   margin-bottom: 20px;
 }

 .content-panel.highlights .article-holder .emphasis-quote > *:last-child {
   margin-bottom: 0px;
 }

}

.content-panel.project-icons {

 background-color: white;

}

.content-panel.project-icons .component-holder {

 display: flex;
 flex-direction: column;
 margin-top: 120px;

}

.content-panel.project-icons .component-holder .component-row {

 display: flex;
 flex-direction: row;
 margin-bottom: 40px;
 margin-left: auto;
 margin-right: auto;

}

.content-panel.project-icons .component-holder .component-row:last-child {

 margin-bottom: 0px;

}

.content-panel.project-icons .component-holder .component-row > * {

 margin-right: 40px;

}

.content-panel.project-icons .component-holder .component-row > *:last-child {

 margin-right: 0px;

}

1. HQ_page

 .content-panel.project-icons
 .component-holder
 .component-row
 .project-component {
 text-align: center;
 max-width: 300px;
 min-width: 300px;
 max-height: 300px;
 min-height: 300px;
 padding: 30px;
 transform: scale(1);
 -webkit-transition: transform 1000ms linear;
 -ms-transition: transform 500ms linear;
 transition: transform 500ms linear;
 cursor: pointer;
 background-color: #f0eadf;

}

1. HQ_page

 .content-panel.project-icons
 .component-holder
 .component-row
 .project-component:hover {
 transform: scale(1.1);
 -webkit-transition: transform 500ms linear;
 -ms-transition: transform 500ms linear;
 transition: transform 500ms linear;
 cursor: pointer;

}

1. HQ_page

 .content-panel.project-icons
 .component-holder
 .component-row
 .project-component:hover
 .icon
 svg
 > * {
 stroke: #f8b200;
 -webkit-transition: stroke 500ms linear;
 -ms-transition: stroke 500ms linear;
 transition: stroke 500ms linear;

}

1. HQ_page

 .content-panel.project-icons
 .component-holder
 .component-row
 .project-component:hover
 p {
 color: #ffa600;
 -webkit-transition: color 500ms linear;
 -ms-transition: color 500ms linear;
 transition: color 500ms linear;

}

1. HQ_page

 .content-panel.project-icons
 .component-holder
 .component-row
 .project-component
 p {
 text-align: center;
 color: #aaaaaa;
 -webkit-transition: color 500ms linear;
 -ms-transition: color 500ms linear;
 transition: color 500ms linear;

}

1. HQ_page

 .content-panel.project-icons
 .component-holder
 .component-row
 .project-component
 h2 {
 font-weight: 600;
 font-size: 16px;
 line-height: 24px;
 text-transform: uppercase;
 font-variant: small-caps;
 margin-bottom: 5px;

}

.content-panel.project-icons

 .component-holder
 .component-row
 .project-component
 .icon {
 margin-bottom: 20px;

}

.content-panel.project-icons

 .component-holder
 .component-row
 .project-component
 .icon
 svg
 > * {
 stroke: #0197ae;
 -webkit-transition: stroke 1000ms linear;
 -ms-transition: stroke 1000ms linear;
 transition: stroke 1000ms linear;

}

@media only screen and (max-width: 750px) {

 .content-panel.project-icons .component-holder .component-row {
   flex-direction: column;
   margin-bottom: 40px;
   margin-left: auto;
   margin-right: auto;
 }

 .content-panel.project-icons .component-holder .component-row > * {
   margin-right: 0px;
   margin-bottom: 40px;
 }

 .content-panel.project-icons .component-holder .component-row > *:last-child {
   margin-right: 0px;
   margin-bottom: 0px;
 }

}

/* --- [ MISCELLANEOUS STYLING ] --- */

.content-panel.pipeline > h1, .content-panel.highlights > h1, .content-panel.project-icons > h1 {

 display: flex;

 font-family: Barlow SemiBold;
 font-style: normal;
 font-weight: 600;
 font-size: 48px;

 color: rgb(68, 68, 68);

 line-height: 58px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 justify-content: center;
 text-align: center;

}

.content-panel.pipeline > h2, .content-panel.highlights > h2, .content-panel.project-icons > h2 {

 display: flex;

 font-family: Barlow Medium;
 font-style: normal;
 font-weight: 500;
 font-size: 36px;

 color: rgba(68, 68, 68, 0.5);

 line-height: 43px;
 justify-content: center;
 letter-spacing: 0.1em;
 text-align: center;

 margin-bottom: 80px;

}

.content-panel.dynamic-padding {

 padding: 80px;

}

@media only screen and (max-width: 900px) {

 .content-panel.dynamic-padding {
   padding: 50px;
 }

}

@media only screen and (max-width: 600px) {

 .content-panel.pipeline > h1,
 .content-panel.highlights > h1,
 .content-panel.project-icons > h1 {
   font-size: 36px;

   line-height: 50px;
 }

 .content-panel.pipeline > h2,
 .content-panel.highlights > h2. .content-panel.project-icons > h2 {
   font-size: 30px;

   line-height: 45px;
 }

}

@media only screen and (max-width: 400px) {

 #bodyContent .content-panel.pipeline > h1,
 .content-panel.highlights > h1,
 .content-panel.project-icons > h1 {
   font-size: 30px;

   line-height: 40px;
 }

 #bodyContent .content-panel.pipeline > h2,
 .content-panel.highlights > h2,
 .content-panel.project-icons > h2 {
   font-size: 24px;

   line-height: 35px;
 }

}