|
|
|
|
@ -1,7 +1,8 @@
|
|
|
|
|
/* Define root CSS variables for easy theme management */
|
|
|
|
|
:root {
|
|
|
|
|
--main-bg-color: #121E2A;
|
|
|
|
|
--main-text-color: #fff;
|
|
|
|
|
--secondary-bg-color: #DAE6E7;
|
|
|
|
|
--secondary-bg-color: #e8eff0;
|
|
|
|
|
--secondary-text-color: #121E2A;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -10,17 +11,17 @@
|
|
|
|
|
src: url(SourceCodeVF-Upright.otf);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* General Body Styling */
|
|
|
|
|
/* General body styling, applies to the entire document */
|
|
|
|
|
body {
|
|
|
|
|
font-family: sourcecodevf, 'Arial', sans-serif;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
max-width: 1581px;
|
|
|
|
|
max-width: 2048px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
background-color: white;
|
|
|
|
|
color: var(--main-text-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Container */
|
|
|
|
|
/* Container is a wrapper for all content, provides padding and centers content */
|
|
|
|
|
.container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: auto;
|
|
|
|
|
@ -39,7 +40,7 @@ body {
|
|
|
|
|
color: var(--main-text-color);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* logo */
|
|
|
|
|
@ -65,7 +66,7 @@ body {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.menu ul li {
|
|
|
|
|
display: inline;
|
|
|
|
|
display: inline; /* inline display for list items for a horizontal navigation menu */
|
|
|
|
|
margin-left: 35px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -93,21 +94,21 @@ body {
|
|
|
|
|
|
|
|
|
|
.banner-content-middle {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 34%;
|
|
|
|
|
left: 36%;
|
|
|
|
|
font-size: 54px; /* Responsive font size */
|
|
|
|
|
top: 35%;
|
|
|
|
|
left: 35%;
|
|
|
|
|
font-size: 80px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.banner-content-middle .company-name {
|
|
|
|
|
font-size: 68px; /* Responsive font size */
|
|
|
|
|
font-size: 100px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.banner-content-bottom {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 7%;
|
|
|
|
|
right: 11%;
|
|
|
|
|
font-size: 20px; /* Responsive font size */
|
|
|
|
|
bottom: 8%;
|
|
|
|
|
right: 4%;
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.banner-content-bottom a {
|
|
|
|
|
@ -119,14 +120,29 @@ body {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Main Content */
|
|
|
|
|
main {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
color: var(--secondary-text-color);
|
|
|
|
|
background: var(--main-bg-color);
|
|
|
|
|
margin-top: -1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
section {
|
|
|
|
|
padding: 5px 15px;
|
|
|
|
|
-webkit-box-shadow: 6px 6px 8px 0px rgba(255,255,255,0.6);
|
|
|
|
|
box-shadow: 6px 6px 8px 0px rgba(255,255,255,0.6);
|
|
|
|
|
/*
|
|
|
|
|
-webkit-box-shadow: 6px 6px 8px 0px rgba(18,30,42,0.6);
|
|
|
|
|
box-shadow: 6px 6px 8px 0px rgba(18,30,42,0.6);
|
|
|
|
|
*/
|
|
|
|
|
background: var(--secondary-bg-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
section:not(:first-child) {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Footer */
|
|
|
|
|
.footer {
|
|
|
|
|
background: var(--main-bg-color);
|
|
|
|
|
@ -163,7 +179,11 @@ main {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Media Queries */
|
|
|
|
|
@media (max-width: 1581px) {
|
|
|
|
|
@media (max-width: 2048px) {
|
|
|
|
|
.header a {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.banner-content-middle {
|
|
|
|
|
top: 35%;
|
|
|
|
|
left: 35%;
|
|
|
|
|
@ -175,14 +195,15 @@ main {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.banner-content-bottom {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 8%;
|
|
|
|
|
right: 4%;
|
|
|
|
|
font-size: 1.4vw; /* Responsive font size */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
.header a {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.menu {
|
|
|
|
|
float: none;
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
