153 lines
2.5 KiB
CSS
153 lines
2.5 KiB
CSS
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--light);
|
|
text-transform: none;
|
|
}
|
|
|
|
h4 {
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
letter-spacing: 3px;
|
|
opacity: 0.7;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.custom-hero-font-1 {
|
|
padding: 0;
|
|
line-height: 1;
|
|
font-size: clamp(16px, 8vw, 90px);
|
|
font-weight: 500;
|
|
letter-spacing: 12px;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.custom-perspective {
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.sticky-wrapper.sticky-wrapper-effect-1.sticky-wrapper-effect-1-dark.sticky-effect-active .sticky-body {
|
|
background: var(--dark);
|
|
}
|
|
|
|
html.side-header-overlay-full-screen #header {
|
|
background: var(--dark);
|
|
}
|
|
|
|
.custom-hero .custom-el-2:nth-child(1) {
|
|
opacity: 0.9;
|
|
transition: all 1s;
|
|
}
|
|
|
|
.custom-hero .custom-el-2:nth-child(2) {
|
|
mix-blend-mode: hard-light;
|
|
opacity: 0;
|
|
transition: all 1s;
|
|
}
|
|
|
|
.custom-hero:hover .custom-el-2:nth-child(1) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.custom-hero:hover .custom-el-2:nth-child(2) {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.custom-el-1,
|
|
.custom-el-2,
|
|
.custom-el-2-wrapper {
|
|
width: 425px;
|
|
height: 500px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.custom-el-1,
|
|
.custom-el-2,
|
|
.custom-el-2-wrapper {
|
|
width: 340px;
|
|
height: 400px;
|
|
}
|
|
}
|
|
|
|
.custom-el-1 {
|
|
margin: -10px;
|
|
}
|
|
|
|
.custom-el-2 {
|
|
margin: 10px;
|
|
}
|
|
|
|
.custom-el-2 img {
|
|
opacity: 0;
|
|
transition: all 300ms;
|
|
}
|
|
|
|
.custom-el-2 img.lazyloaded {
|
|
opacity: 1;
|
|
}
|
|
|
|
.thumb-info-floating-element {
|
|
z-index: -1;
|
|
}
|
|
|
|
.bg-color-changer {
|
|
transition: background-color 700ms cubic-bezier(0.25, 1, 0.5, 1);
|
|
bottom: 0;
|
|
left: 0;
|
|
min-height: 100vh;
|
|
min-width: 100vw;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.custom-portfolio-item-1 .custom-portfolio-item-1-img {
|
|
border-radius: 4px 0px 0px 4px;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.custom-portfolio-item-1 .custom-portfolio-item-1-img {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
}
|
|
|
|
.custom-portfolio-item-1 .custom-portfolio-item-1-type {
|
|
padding: 10px;
|
|
width: 60px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.custom-portfolio-item-1 .custom-portfolio-item-1-type span {
|
|
display: block;
|
|
white-space: nowrap;
|
|
transform-origin: 0 0;
|
|
transform: translate3d(32px, 10px, 0) rotate(90deg);
|
|
text-align: left;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.custom-portfolio-item-1 .custom-portfolio-item-1-type {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@keyframes arrowMove {
|
|
0% {
|
|
transform: translateY(5px);
|
|
}
|
|
50% {
|
|
transform: translateY(10px);
|
|
}
|
|
100% {
|
|
transform: translateY(5px);
|
|
}
|
|
}
|
|
|
|
.custom-arrow-anim {
|
|
animation: arrowMove 600ms ease;
|
|
animation-iteration-count: infinite;
|
|
}
|