/var/www/flurhymez/resources/scss
Edit: /var/www/flurhymez/resources/scss/_sections.scss (18953B)
//
// Theme Sections
// --------------------------------------------------
// Header
.sidenav-back {
background-color: $primary;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
visibility: hidden;
opacity: 0;
transition: all 0.3s;
}
.sidenav-back.show {
visibility: visible;
opacity: 0.4;
}
header {
.navbar-brand {
.main-logo {
background-image: url("/img/flurhymez-logo.png");
height: 50px;
width: 76px;
background-size: 100%;
background-repeat: no-repeat;
}
}
.sidenav-brand {
display: none;
.main-logo {
background-image: url("/img/flurhymez-logo.png");
height: 50px;
width: 76px;
background-size: 100%;
background-repeat: no-repeat;
}
}
.navbar-nav {
.lang-item {
display: none;
}
.nav-item {
.nav-link {
color: $body-color !important;
position: relative;
font-weight: 500;
&:hover,
&:focus {
color: $primary !important;
}
&:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 5px;
width: 0;
display: block;
left: 7px;
bottom: 12px;
z-index: -1;
background-color: $secondary;
transition: all 0.3 ease-in-out;
}
&.active {
color: $primary !important;
&:before {
width: calc(100% - 10px);
}
}
}
}
}
}
.dark-theme {
header {
.navbar-brand {
.main-logo {
background-image: url("/img/flurhymez-logo-white.png");
}
}
.sidenav-brand {
.main-logo {
background-image: url("/img/flurhymez-logo-white.png");
}
}
}
}
@media (max-width: 992px) {
header {
.sidenav-brand {
display: block;
}
.theme-toggle{
position: absolute !important;
right: 20px;
top: 35px;
}
.navbar-toggler{
color: $secondary !important;
border: 0;
font-size: 2.8em;
margin-top: 5px;
box-shadow: 0 0 0 !important;
}
.navbar-collapse {
position: fixed;
left: -80vw;
top: 0;
height: 100vh !important;
background-color: #fff;
width: 80vw;
max-width: 400px;
padding: 30px 15px;
transition: all 0.3s;
display: block !important;
z-index: 999;
&.show {
left: 0;
}
}
.navbar-nav {
padding: 0;
margin: 0;
.lang-item {
display: block;
}
.lang-dropdown{
display: none;
}
.nav-item {
.nav-link {
padding-right: 1rem;
padding-left: 1rem;
&:before {
display: none;
}
}
}
}
}
.dark-theme {
header {
.navbar-collapse {
background-color: $light;
}
}
}
}
// Intro
.intro {
position: relative;
padding: 0;
display: flex;
.intro-img {
position: absolute;
right: 0;
height: 100%;
min-height: 110vh;
width: 26vw;
display: flex;
align-items: center;
justify-content: center;
> img {
width: 14vw;
height: 65%;
object-fit: cover;
border-radius: 1000px;
}
&:before {
content: "";
position: absolute;
right: -130px;
top: 0;
background-color: $primary;
display: block;
width: 200px;
height: 100%;
border-radius: 1000px;
}
&:after {
content: "";
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
background-color: $secondary;
display: block;
width: 90px;
height: 200px;
border-radius: 1000px;
}
}
.intro-content {
width: calc(100% - 290px);
margin-top: 10vh;
h1 {
@include font-size(4.7rem);
font-weight: bold;
@include margin-bottom(40px);
}
p {
@include font-size(1.9rem);
width: 80%;
@include margin-bottom(60px);
}
}
}
@media (max-width: 1200px) {
.intro {
.intro-img {
min-height: 100vh;
> img {
width: 12vw;
}
}
}
}
@media (max-width: 992px) {
.intro {
flex-direction: column-reverse;
.intro-img {
position: static;
min-height: auto;
height: auto;
width: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
margin: 5vh 0;
> img {
width: 100%;
height: 25vh;
border-radius: 1000px 0 0 1000px #{"/*rtl:0 1000px 1000px 0*/"};
padding-left: var(--bs-gutter-x, 0.75rem);
}
&:before {
display: none;
}
&:after {
position: static;
width: 170px;
height: 70px;
transform: none;
margin-top: 20px;
border-radius: 1000px 0 0 1000px;
}
}
.intro-content {
width: 100%;
margin-top: 5vh;
h1 {
@include font-size(7rem);
}
p {
width: 100%;
}
> hr {
display: none;
}
}
}
}
// Services
.services {
.row {
> div {
.services-item {
margin-bottom: 60px;
}
&:nth-last-child(-n + 4) {
.services-item {
margin-bottom: 0;
}
}
}
}
.services-item {
.popover-item {
font-weight: bold;
@include font-size(1.6rem);
}
}
}
@media (max-width: 992px) {
.services {
.row {
> div {
.services-item {
margin-bottom: 60px;
}
&:nth-last-child(-n + 4) {
.services-item {
margin-bottom: 60px;
}
}
&:last-child {
.services-item {
margin-bottom: 0;
}
}
}
}
.services-item {
text-align: center;
.popover-item {
font-weight: bold;
@include font-size(1.6rem);
}
.popover-content {
> img {
margin-bottom: 30px;
}
}
}
}
}
// Works
.works {
.swiper-wrapper {
align-items: center;
}
.works-item {
position: relative;
.popover-content {
max-width: 300px;
}
> img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1000px;
}
.social-media {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-color: rgba($primary, 0.6);
border-radius: 1000px;
opacity: 0;
visibility: hidden;
transition: all 300ms;
> li {
> a {
color: #fff;
@include font-size(2.2em);
margin: 0;
svg {
fill: #ffffff;
}
&:hover,
&:focus {
color: $secondary;
svg {
fill: $secondary;
}
}
}
svg {
height: 24px;
}
}
}
&:hover {
.social-media {
opacity: 1;
visibility: visible;
}
}
}
}
.works-page {
.works-page-item {
display: flex;
align-items: center;
.works-page-item-img {
height: 720px;
width: 340px;
margin-right: 50px;
> img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 1000px;
}
}
.works-page-item-content {
width: calc(100% - 390px);
h1 {
@include font-size(4.1rem);
font-weight: bold;
margin-bottom: 30px;
}
p {
@include font-size(1.8rem);
margin-bottom: 40px;
}
span {
@include font-size(1.4rem);
color: $primary;
font-weight: 500;
}
.social-media {
> li {
> a {
color: $primary;
svg {
fill: $primary;
}
&:hover,
&:focus {
color: $secondary;
svg {
fill: $secondary;
}
}
}
}
}
}
}
}
.dark-theme {
.works {
.works-item {
.social-media {
> li {
> a {
color: $secondary;
svg {
fill: $secondary;
}
&:hover,
&:focus {
color: #fff;
svg {
fill: #ffffff;
}
}
}
}
}
}
}
.works-page {
.works-page-item {
.works-page-item-content {
.social-media {
> li {
> a {
color: $secondary;
svg {
fill: $secondary;
}
&:hover,
&:focus {
color: #fff;
svg {
fill: #ffffff;
}
}
}
}
}
}
}
}
}
@media (max-width: 992px) {
.works {
display: none;
}
.works-page {
display: block !important;
.works-page-item {
flex-direction: column;
&:last-child {
&.mb-5 {
margin-bottom: 0 !important;
}
}
.works-page-item-img {
height: 200px;
width: 100%;
margin-bottom: 20px;
margin-right: 0;
> img {
border-radius: 1000px;
}
}
.works-page-item-content {
width: 100%;
h1 {
@include font-size(3.1rem);
margin-bottom: 15px;
}
p {
@include font-size(1.4rem);
margin-bottom: 20px;
}
span {
@include font-size(1rem);
}
.social-media {
justify-content: space-between;
> li {
> a {
margin-right: 0;
}
}
}
}
}
}
}
@media (max-width: 576px) {
.works-page {
.works-page-item {
.works-page-item-img {
width: calc(100% + var(--bs-gutter-x, 0.75rem));
margin-left: var(---bs-gutter-x, -0.75rem);
> img {
border-radius: 0 1000px 1000px 0;
}
}
}
}
}
// Events
.events,
.events-page {
.events-item {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $light;
min-height: 140px;
border-radius: 1000px;
padding: 30px 60px;
margin-bottom: 40px;
&:last-child {
margin-bottom: 0;
}
> div {
display: flex;
align-items: center;
> span {
@include font-size(2.6rem);
font-weight: bold;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
> span {
font-weight: 500;
font-size: 0.9em;
}
> p {
display: none;
font-weight: 500;
font-size: 0.9em;
margin-bottom: 0;
margin-left: 15px;
color: $primary;
}
}
> a {
@include font-size(1.6rem);
font-weight: bold;
color: $body-color;
&:hover,
&:focus {
color: $primary;
}
}
}
> p {
margin: 0;
font-size: 1.3em;
color: $primary;
}
}
}
.dark-theme {
.events,
.events-page {
.events-item {
> div {
> span {
color: $secondary;
}
}
}
}
}
@media (max-width: 992px) {
.events,
.events-page {
.events-item {
flex-direction: column;
text-align: center;
padding: 30px;
> div {
flex-direction: column;
> span {
flex-direction: row;
margin: 0 0 20px !important;
> span {
margin-left: 5px;
}
> p {
display: inline-block;
}
}
}
> p {
display: none;
}
}
}
}
// Contact
.contact {
.contact-item {
h4 {
color: $primary;
font-weight: bold;
margin-bottom: 15px;
}
> p {
font-size: 1.2rem;
margin-bottom: 0;
}
> a {
font-size: 1.2rem;
color: $body-color;
&:hover,
&:focus {
color: $primary;
}
}
}
}
// Story
.story {
.sec-head .sec-title {
@include margin-bottom(50px);
h1 {
@include font-size(2.7rem);
}
}
p {
@include font-size(1.4rem);
margin-bottom: 0;
}
}
@media (max-width: 992px) {
.story {
.sec-head .sec-title {
margin-bottom: 0;
}
}
}
// Mission
.mission {
.sec-head .sec-title {
@include margin-bottom(50px);
h1 {
@include font-size(2.7rem);
}
}
p {
@include font-size(1.4rem);
margin-bottom: 0;
}
}
@media (max-width: 992px) {
.mission {
.sec-head .sec-title {
margin-bottom: 0;
}
}
}
//Statistics
.statistics {
.statistics-item {
> span {
@include font-size(2.8rem);
font-weight: bold;
color: $secondary;
display: block;
margin-bottom: 10px;
}
> h4 {
@include font-size(1.4rem);
}
}
}
@media (max-width: 992px) {
.statistics {
.row {
> div {
.statistics-item {
margin-bottom: 40px;
}
&:last-child {
.services-item {
margin-bottom: 0;
}
}
}
}
.statistics-item {
text-align: center;
> span {
@include font-size(3.8rem);
}
> h4 {
@include font-size(2rem);
}
}
}
}
// Team
.team {
.swiper-wrapper {
align-items: stretch;
}
.team-item {
position: relative;
height: 720px;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($primary, 0.6);
border-radius: 1000px;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: all 300ms;
}
> img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1000px;
}
.team-item-content {
position: absolute;
bottom: 30%;
left: 50%;
width: 390px;
transform: translate(-50%, 0) rotate(-90deg);
opacity: 0;
visibility: hidden;
transition: all 300ms;
z-index: 2;
> h3 {
font-weight: bold;
white-space: nowrap;
color: $secondary;
@include font-size(2.3rem);
}
> p {
color: $secondary;
@include font-size(1.3rem);
}
.social-media {
> li {
> a {
color: $secondary;
svg {
fill: $secondary;
}
&:hover {
color: #fff;
svg {
fill: #fff;
}
}
}
}
}
}
&:hover {
&:before,
.team-item-content {
opacity: 1;
visibility: visible;
}
}
}
}
@media (max-width: 992px) {
.team {
.swiper-wrapper {
align-items: stretch;
}
.swiper-slide-active {
.team-item {
&:before,
.team-item-content {
opacity: 1 !important;
visibility: visible !important;
}
}
}
.team-item {
height: 590px;
.team-item-content {
bottom: 35%;
> h3 {
@include font-size(3rem);
}
> p {
color: $secondary;
@include font-size(1.8rem);
}
}
&:hover {
&:before,
.team-item-content {
opacity: 0;
visibility: hidden;
}
}
}
}
}
// Testimonials
.testimonials {
.swiper-wrapper {
align-items: stretch;
padding-top: 60px;
.swiper-slide {
height: auto;
}
}
.testimonials-item {
position: relative;
height: 100%;
background-color: $light;
border-radius: 1000px;
padding: 0 60px 40px;
text-align: center;
> img {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 50%;
margin-top: -60px;
}
.testimonials-item-content {
margin-top: 30px;
> h3 {
font-weight: bold;
@include font-size(2.3rem);
}
> span {
@include font-size(1.2rem);
}
> p {
@include font-size(1.3rem);
margin-bottom: 30px;
}
}
}
}
@media (max-width: 992px) {
.testimonials {
.swiper-wrapper {
align-items: stretch;
padding-top: 60px;
.swiper-slide {
height: auto;
}
}
.testimonials-item {
margin: 0 var(--bs-gutter-x, 0.75rem);
background-color: transparent;
padding: 0;
}
}
}
// Partners
.partners {
.partners-item {
> img {
max-height: 80px;
max-width: 180px;
filter: grayscale(100%);
transition: all 300ms;
}
&:hover {
> img {
filter: grayscale(0);
}
}
}
}
// Footer
footer {
text-align: center;
.container {
padding-bottom: 70px;
img {
height: 50px;
margin-bottom: 10px;
}
.main-logo {
background-image: url("/img/flurhymez-logo.png");
height: 50px;
width: 76px;
background-size: 100%;
background-repeat: no-repeat;
margin: 0 auto 10px;
}
p {
margin-bottom: 10px;
}
span {
color: $text-color;
i {
color: $danger;
position: relative;
top: 3px;
font-size: 1.2em;
}
}
}
}
.dark-theme {
footer {
.container {
.main-logo {
background-image: url("/img/flurhymez-logo-white.png");
}
}
}
}