MaultoBello (Talk | contribs) |
|||
(86 intermediate revisions by 3 users not shown) | |||
Line 9: | Line 9: | ||
.fixed .navbar { | .fixed .navbar { | ||
transition: top 0.15s linear; | transition: top 0.15s linear; | ||
− | |||
} | } | ||
Line 15: | Line 14: | ||
padding: 0; | padding: 0; | ||
} | } | ||
− | |||
− | |||
/* --- [ HEADER PANEL ] --- */ | /* --- [ HEADER PANEL ] --- */ | ||
Line 231: | Line 228: | ||
.content-panel.pipeline { | .content-panel.pipeline { | ||
− | background-color: # | + | background-color: #f3f3f3; |
} | } | ||
− | .content-panel.pipeline h1 { | + | #bodyContent .content-panel.pipeline h1 { |
− | font-weight: | + | font-weight: 600; |
font-size: 36px; | font-size: 36px; | ||
line-height: 50px; | line-height: 50px; | ||
letter-spacing: 0.2em; | letter-spacing: 0.2em; | ||
+ | |||
+ | margin-bottom: 10px; | ||
} | } | ||
− | .content-panel.pipeline h2 { | + | #bodyContent .content-panel.pipeline h2 { |
font-weight: 400; | font-weight: 400; | ||
Line 251: | Line 250: | ||
line-height: 40px; | line-height: 40px; | ||
letter-spacing: 0.1em; | letter-spacing: 0.1em; | ||
+ | |||
+ | margin-bottom: 80px; | ||
} | } | ||
Line 271: | Line 272: | ||
.content-panel.pipeline .pipeline-interface .pipeline-information h3 { | .content-panel.pipeline .pipeline-interface .pipeline-information h3 { | ||
− | display: | + | display: inline; |
font-family: Barlow Medium; | font-family: Barlow Medium; | ||
Line 332: | Line 333: | ||
@media only screen and (max-width: 900px) { | @media only screen and (max-width: 900px) { | ||
− | .content-panel.pipeline h1 { | + | #bodyContent .content-panel.pipeline h1 { |
− | |||
font-size: 36px; | font-size: 36px; | ||
Line 342: | Line 342: | ||
} | } | ||
− | .content-panel.pipeline h2 { | + | #bodyContent .content-panel.pipeline h2 { |
− | |||
font-size: 30px; | font-size: 30px; | ||
Line 365: | Line 364: | ||
padding: 40px; | 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; | ||
+ | |||
+ | } | ||
} | } | ||
Line 373: | Line 402: | ||
.content-panel.main-message { | .content-panel.main-message { | ||
− | background-color: # | + | background-color: #1E6273; |
padding: 80px; | padding: 80px; | ||
Line 449: | Line 478: | ||
display: flex; | display: flex; | ||
flex-direction: row; | flex-direction: row; | ||
− | margin-top: | + | margin-top: 20px; |
} | } | ||
Line 477: | Line 506: | ||
} | } | ||
− | .content-panel.highlights .article-holder .emphasis-quote:last-child { | + | .content-panel.highlights .article-holder .emphasis-quote > *:last-child { |
margin-bottom: 0px; | margin-bottom: 0px; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 501: | Line 521: | ||
letter-spacing: 0.1em; | letter-spacing: 0.1em; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
color: #444444; | color: #444444; | ||
Line 556: | Line 578: | ||
letter-spacing: 0.1em; | letter-spacing: 0.1em; | ||
− | color: # | + | color: #1E6273; |
} | } | ||
Line 579: | Line 601: | ||
color: #444444; | 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; | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | /* --- [ PROJECT COMPONENTS STYLING ] --- */ | ||
+ | |||
+ | .content-panel.project-icons { | ||
+ | background-color: #f3f3f3; | ||
+ | } | ||
+ | |||
+ | .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: 260px; | ||
+ | padding: 30px; | ||
+ | transform: scale(1); | ||
+ | -webkit-transition: transform 1000ms linear; | ||
+ | -ms-transition: transform 500ms linear; | ||
+ | transition: transform 500ms linear; | ||
+ | cursor: pointer; | ||
+ | background-color: white; | ||
+ | } | ||
+ | |||
+ | #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: #444444; | ||
+ | -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: #00C2FF; | ||
+ | -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; | ||
+ | } | ||
+ | |||
} | } | ||
Line 585: | Line 812: | ||
/* --- [ MISCELLANEOUS STYLING ] --- */ | /* --- [ MISCELLANEOUS STYLING ] --- */ | ||
− | .content-panel.pipeline > h1, .content-panel.highlights > h1 { | + | .content-panel.pipeline > h1, .content-panel.highlights > h1, .content-panel.project-icons > h1 { |
display: flex; | display: flex; | ||
Line 604: | Line 831: | ||
} | } | ||
− | .content-panel.pipeline > h2, .content-panel.highlights > h2 { | + | .content-panel.pipeline > h2, .content-panel.highlights > h2, .content-panel.project-icons > h2 { |
display: flex; | display: flex; | ||
Line 633: | Line 860: | ||
padding: 50px; | 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; | ||
+ | |||
+ | } | ||
} | } |
Latest revision as of 01:22, 22 October 2019
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
/* --- [ GENERAL FORMATTING ] --- */
html, body { height: 100%; }
.fixed .navbar {
transition: top 0.15s linear;
}
.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; }
- HQ_page .intro-message .text-container {
flex-direction: column; background-color: white; padding: 4vw; max-width: 40vw; }
- 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;
}
- HQ_page .intro-message .text-container h1 .emphasis {
color: #FEC605;
}
- HQ_page .intro-message .text-container p {
font-size: 1.4vw; line-height: 2vw;
color: #6E6E6E;
}
- 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: #f3f3f3; }
- bodyContent .content-panel.pipeline h1 {
font-weight: 600; font-size: 36px;
line-height: 50px; letter-spacing: 0.2em;
margin-bottom: 10px;
}
- 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: inline;
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-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: #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: 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;
}
}
/* --- [ PROJECT COMPONENTS STYLING ] --- */
.content-panel.project-icons { background-color: #f3f3f3; }
.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: 260px; padding: 30px; transform: scale(1); -webkit-transition: transform 1000ms linear;
-ms-transition: transform 500ms linear; transition: transform 500ms linear;
cursor: pointer; background-color: white; }
- 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: #444444;
-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: #00C2FF;
-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;
}
}