/* 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-row-gap: 15px; grid-column-gap: 5px; grid-template-columns: 10vw 10vw 10vw 10vw 10vw 10vw 10vw; grid-template-rows: 50px 50px; align-items: center; justify-items: center; margin: auto;
}
.sponser-banner img {
height: 50px; width: auto;
}
.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 ] --- */
- bodyContent .content-panel.pipeline h1 {
font-weight: 600; 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;
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;
}
- 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;
}
- 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;
}
- 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;
}
- 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;
}
- 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;
}
- 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;
}
- 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; }
}