106 lines
2.1 KiB
CSS
106 lines
2.1 KiB
CSS
@layer components {
|
|
.area {
|
|
--area-bg: transparent;
|
|
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
text-align: center;
|
|
|
|
background: var(--area-bg);
|
|
|
|
@media screen and (--bp-tablet-down) {
|
|
border-bottom: var(--size-1) solid var(--color-palette-gunmetal);
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.area_1 {
|
|
position: relative;
|
|
grid-area: area_1;
|
|
}
|
|
|
|
.area_2 {
|
|
position: relative;
|
|
grid-area: area_2;
|
|
}
|
|
|
|
.area_3 {
|
|
position: relative;
|
|
grid-area: area_3;
|
|
}
|
|
|
|
.area_4 {
|
|
position: relative;
|
|
grid-area: area_4;
|
|
}
|
|
|
|
.area_5 {
|
|
position: relative;
|
|
grid-area: area_5;
|
|
}
|
|
|
|
.hasBGImg {
|
|
position: relative;
|
|
|
|
&:hover {
|
|
& .bgImg {
|
|
animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bgImg {
|
|
--area-bg-animation-keyframe: none;
|
|
--area-bg--animation-duration: 0s;
|
|
--area-bg--animation-timing: linear;
|
|
--area-bg-filter: grayscale(100%) contrast(10) brightness(250);
|
|
--area-bg-blendmode: color-dodge;
|
|
|
|
position: absolute;
|
|
z-index: -1;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
filter: var(--area-bg-filter);
|
|
mix-blend-mode: var(--area-bg-blendmode);
|
|
|
|
@media screen and (--bp-tablet-down) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (--bp-desktop) {
|
|
.chainbreaker {
|
|
--area-animation-keyframe: var(--kf-color-bleed);
|
|
--area-animation-duration: var(--img-colorbleed-duration);
|
|
--area-animation-timing: var(--img-colorbleed-timing);
|
|
|
|
& .bgImg {
|
|
z-index: -2;
|
|
}
|
|
|
|
&.hasBGImg {
|
|
--divider-color: transparent;
|
|
--title-color: transparent;
|
|
--subtitle-color: transparent;
|
|
--subtitle-transition: all 0.3s ease-in-out;
|
|
--title-transition: color 0.3s ease-in-out;
|
|
|
|
&:hover {
|
|
--divider-color: var(--color-tertiary);
|
|
--title-color: var(--color-tertiary);
|
|
--subtitle-color: var(--color-tertiary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |