server/static/assets/organization.css

294 lines
No EOL
4.5 KiB
CSS

.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1em;
padding-bottom: 1em;
font-size: 1.2em;
}
.return {
display: flex;
align-items: center;
color: #34495e;
cursor: pointer;
transition: all .2s;
}
.return-icon {
font-size: 1.5em;
margin-right: .5em;
}
.return:hover {
opacity: 0.88;
text-decoration: underline;
}
.cover-background {
background-position: center;
background-size: cover;
height: 13em;
width: 100%;
}
.cover {
height: 13em;
margin-top: -13em;
background-color: rgba(230, 126, 34, 0.78);
background-size: cover;
}
.cover-content {
color: white;
display: flex;
align-items: center;
height: 13em;
}
.cover-image {
background: white;
border-radius: 50%;
border: 3px solid #FD6E0B;
background-size: cover;
background-position: center;
width: 10em;
height: 10em;
margin-right: 3em;
}
.cover-title-container {
}
.cover-title {
font-family: 'Roboto Slab', serif;
font-size: 3.5em;
font-weight: normal;
margin: 0;
}
.cover-sub-title {
font-size: 1.5em;
font-weight: normal;
margin: 0;
}
.media-mosaic {
margin-top: .75em;
width: 100%;
height: 25em;
display: grid;
grid-template-columns: 1fr .5fr .5fr;
grid-template-rows: 1fr 1fr;
grid-column-gap: .75em;
grid-row-gap: .75em;
}
.media-overlay {
background-color: rgba(196, 196, 196, 0.7);
color: #B12008;
display: flex;
justify-content: center;
align-items: center;
font-size: 3.5em;
}
.media-overlay i {
cursor: pointer;
transition: all 0.2s;
}
.media-overlay i:hover {
transform: scale(1.2);
}
.media-main {
grid-row: 1 / span 2;
}
/* .media-sec {
display: grid;
grid-template-rows: 50% 50%;
}
.media-sec-row {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
} */
.media {
border-radius: 4px;
background-size: cover;
background-position: center;
}
section {
margin-top: .5em;
margin-bottom: 0;
}
.section-title {
margin-top: 1em;
margin-bottom: 1em;
}
.section-title h1, .section-title h2, .section-title h3 {
margin: 0;
font-weight: normal;
font-family: 'Roboto Slab', serif;
font-size: 1.8em;
}
.section-divider {
background-color: rgba(194, 129, 0, 0.5);
width: 100%;
height: 3px;
border-radius: 1px;
}
.description {
line-height: 1.5em;
text-align: justify;
margin: 0 auto;
width: 80%;
margin-top: 1.5em;
margin-bottom: .5em;
}
/***********
* PRICING *
***********/
.pricing {
display: flex;
justify-content: space-between;
}
.pricing-card {
height: 10em;
width: 100%;
padding-top: 1.5em;
padding-bottom: 1.5em;
text-align: center;
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-right: 1.5em;
color: white;
}
.pricing .pricing-card:nth-child(1) {
background-color: rgba(177, 88, 8, .80);
}
.pricing .pricing-card:nth-child(2) {
background-color: rgba(253, 110, 11, .780);
}
.pricing .pricing-card:nth-child(3) {
background-color: rgba(177, 32, 8, .80);
}
.pricing .pricing-card:last-child {
margin-right: 0;
}
.pricing-label {
font-size: 1.5em;
}
.pricing-name {
font-size: 1.8em;
}
.princing-description {
}
/***********
* CONTACT *
***********/
.contact {
margin: 0 auto;
width: 70%;
}
.contact-item {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: .75em;
padding-bottom: .75em;
padding-left: 2em;
padding-right: 2em;
background-color: #ECF0F1;
border-radius: 4px;
margin-bottom: 1em;
}
.contact-icon {
color: #B15808;
background-color: #C4C4C4;
border-radius: 50%;
width: 2em;
height: 2em;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
}
.contact-content {
text-align: right;
}
.external-link {
margin-left: .25em;
font-weight: bold;
}
.facebook .contact-icon {
background-color: #3B5999;
color: white;
}
.instagram .contact-icon {
background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
color: white;
}
.twitter .contact-icon {
background-color: #1DA1F2;
color: white;
}
/**********
* FOOTER *
**********/
.footer {
width: 100%;
display: grid;
grid-template-columns: 50% 25% 25%;
grid-template-rows: 1fr;
height: 1em;
margin-top: 2em;
}
.footer div:nth-child(1) {
background-color: rgb(177, 32, 8, .83);
}
.footer div:nth-child(2) {
background-color: rgb(177, 88, 8, .83);
}
.footer div:nth-child(3) {
background-color: rgb(253, 110, 11, .83);
}