landing/styles.css

261 lines
5.4 KiB
CSS

html,
body {
font-family: "Roboto", sans-serif;
}
.row {
margin: 0;
}
p {
margin: 0;
}
header {
height: 70px;
}
.PBP-container {
padding: 0;
}
.PBP-container .PBP-header {
background-color: #001529;
color: #f8f8f8;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
.PBP-container .PBP-header .logo-container {
padding: 11px 12px;
font-size: 20px;
font-weight: 400;
white-space: nowrap;
}
.PBP-container .PBP-header .logo-container p {
font-weight: 300;
font-size: 20px;
margin-bottom: 0;
}
.PBP-container .PBP-header .logo-container p b {
font-weight: bold;
}
.PBP-container .PBP-header .logo-container p span {
background-color: white;
color: #E58F65;
padding: 0 1px;
}
.PBP-container .PBP-header .logo-container .sm-text {
font-size: 11px;
letter-spacing: 1.4px;
}
.PBP-container main {
position: relative;
height: calc(100vh - 70px);
min-height: fit-content;
}
.PBP-container main img {
height: 100%;
object-fit: cover;
width: 100%;
background-position: center;
background-repeat: no-repeat;
}
.PBP-container main::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.6);
z-index: 1;
}
.PBP-container main .container {
max-height: 60%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: absolute;
top: 20%;
text-align: center;
z-index: 999;
}
.PBP-container main .container .main-text-wrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20%;
}
.PBP-container main .container .main-text-wrapper h1 {
font-size: 29px;
font-weight: 600;
text-shadow: 5px 4px 10px rgba(0, 0, 0, 0.25);
line-height: 100%;
letter-spacing: 5px;
}
.PBP-container main .container .main-text-wrapper .line {
position: absolute;
bottom: 0;
width: 330px;
height: 2px;
background-color: #001529;
display: block;
}
.PBP-container main .container .btn-pb {
background-color: #001529;
color: white;
font-size: 16px;
font-weight: 500;
margin-bottom: 25%;
transition: all 0.3s;
}
.PBP-container main .container .btn-pb:hover {
background-color: #093460;
}
.PBP-container main .container .btn-pb:active {
transform: translateY(2px);
padding: 4px 10px;
border: none;
}
.PBP-container main .container .contact-us-wrapper h5 {
font-weight: 600;
margin-bottom: 0;
text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.17);
}
.PBP-container main .container .contact-us-wrapper .line {
width: 100px;
height: 1px;
background-color: #001529;
}
.PBP-container main .container .contact-us-wrapper p {
font-weight: bolder;
}
.PF-container {
padding: 0;
}
.PF-container .PF-header {
background: linear-gradient(32deg, #D05353 24%, #E58F65 100%);
color: #f8f8f8;
display: flex;
flex-direction: column;
justify-content: center;
align-items: end;
}
.PF-container .PF-header .logo-container {
padding: 11px 12px;
font-size: 20px;
font-weight: 400;
white-space: nowrap;
}
.PF-container .PF-header .logo-container p {
font-weight: 300;
font-size: 20px;
margin-bottom: 0;
}
.PF-container .PF-header .logo-container p b {
font-weight: bold;
}
.PF-container .PF-header .logo-container p span {
background-color: white;
color: #E58F65;
padding: 0 1px;
}
.PF-container .PF-header .logo-container .sm-text {
font-size: 11px;
letter-spacing: 1.4px;
}
.PF-container .main-pf {
position: relative;
height: calc(100vh - 70px);
min-height: fit-content;
}
.PF-container .main-pf img {
height: 100%;
object-fit: cover;
width: 100%;
position: relative;
background-position: center;
background-repeat: no-repeat;
}
.PF-container .main-pf::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 238, 229, 0.68);
z-index: 1;
}
.PF-container .main-pf .container {
max-height: 60%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: absolute;
top: 20%;
text-align: center;
z-index: 999;
color: #D05353;
}
.PF-container .main-pf .container .main-text-wrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 26%;
}
.PF-container .main-pf .container .main-text-wrapper h1 {
font-size: 29px;
font-weight: 600;
text-shadow: 5px 4px 10px rgba(0, 0, 0, 0.25);
line-height: 100%;
letter-spacing: 5px;
}
.PF-container .main-pf .container .main-text-wrapper .line {
position: absolute;
bottom: 0;
width: 330px;
height: 2px;
background-color: #D05353;
display: block;
}
.PF-container .main-pf .container .btn-pb {
background-color: #146960;
color: white;
font-size: 16px;
font-weight: 500;
margin-bottom: 25%;
transition: all 0.3s;
}
.PF-container .main-pf .container .btn-pb:hover {
background-color: #0e4f47;
}
.PF-container .main-pf .container .btn-pb:active {
transform: translateY(2px);
padding: 4px 10px;
border: none;
}
.PF-container .main-pf .container .contact-us-wrapper h5 {
font-weight: 600;
margin-bottom: 0;
text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.17);
}
.PF-container .main-pf .container .contact-us-wrapper .line {
width: 100px;
height: 1px;
background-color: #D05353;
}
.PF-container .main-pf .container .contact-us-wrapper p {
font-weight: bolder;
}
/*# sourceMappingURL=styles.css.map */