Template:Calgary/Home-Style

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

/* --- [ GENERAL FORMATTING ] --- */

html, body { height: 100%; }

.fixed .navbar {

 transition: top 0.15s linear;
 background-color: #00C2FF;

}

.interface-group { padding: 0; }

/* --- [ HEADER PANEL ] --- */

.content-panel.header { width: 100%; position: relative; }

.content-panel.header > .header-photo { display: none; width: 100%; }

.intro-message { display: flex; flex-direction: row; position: absolute; top: 50%; transform: translateY(-50%); right: 20vh; margin-left: auto; margin-right: auto; justify-content: center; }

1. HQ_page .intro-message .text-container {

flex-direction: column; background-color: white; padding: 4vw; max-width: 40vw; }

1. HQ_page .intro-message .text-container h1 {

font-style: normal; font-weight: 500; font-size: 2vw; line-height: 2.3vw;

color: #444444;

margin-bottom: 1vw;

}

1. HQ_page .intro-message .text-container h1 .emphasis {

color: #FEC605;

}

1. HQ_page .intro-message .text-container p {

font-size: 1.4vw; line-height: 2vw;

color: #6E6E6E;

}

1. HQ_page .intro-message .text-container p .emphasis {

font-weight: 600;

color: #2ADD3C;

}

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

#header-size-1 { display: inherit; }

}

@media only screen and (min-width: 800px) and (max-width: 1099px) {

#header-size-1 { display: none; }

#header-size-2 { display: inherit; }

#HQ_page .intro-message { right: 16vh; }

#HQ_page .intro-message .text-container { padding: 6vw; max-width: 55vw; }

#HQ_page .intro-message .text-container h1 {

font-size: 2.8vw; line-height: 3.5vw;

color: #444444;

margin-bottom: 2vw;

}

#HQ_page .intro-message .text-container p {

font-size: 1.8vw; line-height: 2.8vw;

}

}

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

#header-size-1 { display: none; }

#header-size-2 { display: none; }

#header-size-3 { display: inherit; }

#HQ_page .intro-message { right: auto; left: 10vw; }

#HQ_page .intro-message .text-container { padding: 8vw; max-width: 80vw; }

#HQ_page .intro-message .text-container h1 {

font-size: 5vw; line-height: 6.5vw;

color: #444444;

margin-bottom: 3vw;

}

#HQ_page .intro-message .text-container p {

font-size: 3.3vw; line-height: 5vw;

}

}

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

#header-size-1 { display: none; }

#header-size-2 { display: none; }

#header-size-3 { display: none; }

#header-size-4 { display: inherit; }

#HQ_page .intro-message { right: auto; left: 12vw; }

#HQ_page .intro-message .text-container { padding: 10vw; max-width: 76vw; }

#HQ_page .intro-message .text-container h1 {

font-size: 5.5vw; line-height: 7vw;

color: #444444;

margin-bottom: 4vw;

}

#HQ_page .intro-message .text-container p {

font-size: 4vw; line-height: 6.3vw;

}

}

/* ------ CHANGE THE MARGINS AND PADDINGS TO % UNITS TO MAKE THEM GOOD ACROSS DEVICES*/

/* --- [ PIPELINE PANELS ] --- */

.content-panel.pipeline { background-color: #EEEEEE; }

1. bodyContent .content-panel.pipeline h1 {

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

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

margin-bottom: 10px;

}

1. bodyContent .content-panel.pipeline h2 {

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

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

margin-bottom: 80px;

}

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

.content-panel.pipeline .pipeline-interface .pipeline-information { background-color: #ffffff; padding: 60px; flex: 1; }

.content-panel.pipeline .pipeline-interface .pipeline-information .hidden { display: none; }

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

display: flex;

font-family: Barlow Medium; 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: #F8B200;

}

.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-weight: 500; font-size: 36px;

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

}

#bodyContent .content-panel.pipeline h2 {

font-weight: 400; 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: 80vw;

}

}

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

.content-panel.main-message { background-color: #00C2FF; 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: #FFE600;

}

.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: 80px; }

.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;

}

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

font-family: Nunito; font-size: 150px;

text-align: center;

}

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: #00C2FF;

}

.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;

 	}

}

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

.content-panel.pipeline > h1, .content-panel.highlights > 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 {

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; }

}