403 lines
8.8 KiB
CSS
403 lines
8.8 KiB
CSS
@layer components {
|
|
/* === MenuGrid === */
|
|
|
|
.menu {
|
|
pointer-events: none;
|
|
|
|
position: fixed;
|
|
z-index: 9;
|
|
top: var(--el-header-height);
|
|
left: 0;
|
|
|
|
display: grid;
|
|
grid-auto-columns: 1fr;
|
|
grid-template-areas:
|
|
"area_1"
|
|
"area_2"
|
|
"area_3"
|
|
"area_4"
|
|
"area_5";
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: repeat(5, auto);
|
|
gap: 0;
|
|
gap: var(--spacing-cozy);
|
|
|
|
width: 100vw;
|
|
height: 100%;
|
|
max-height: calc(100vh - var(--el-header-height));
|
|
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
background-color: var(--color-palette-charcoal-gray);
|
|
|
|
transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
|
|
|
|
&.isOpen {
|
|
pointer-events: auto;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
@media screen and (--bp-tablet) {
|
|
@mixin px var(--spacing-comfortable);
|
|
|
|
grid-template-areas:
|
|
"area_1"
|
|
"area_2"
|
|
"area_3"
|
|
"area_4"
|
|
"area_5";
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
gap: var(--spacing-comfortable);
|
|
}
|
|
|
|
@media screen and (--bp-desktop) {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"area_4 area_4 area_3 area_3 area_3 area_3 area_2"
|
|
"area_4 area_4 area_3 area_3 area_3 area_3 area_2"
|
|
"area_5 area_5 area_3 area_3 area_3 area_3 area_2"
|
|
"area_5 area_5 area_3 area_3 area_3 area_3 area_1"
|
|
"area_5 area_5 area_3 area_3 area_3 area_3 area_1";
|
|
grid-template-columns: 2.5fr 1fr 3fr 1.5fr 1fr 1fr 4fr;
|
|
grid-template-rows: 3fr 1fr 2.5fr 1.5fr 2fr;
|
|
}
|
|
}
|
|
|
|
/* === MenuArea === */
|
|
.area {
|
|
/* === AREA VARIABLES === */
|
|
--area-bg: transparent;
|
|
--area-border: transparent;
|
|
--area-animation-keyframe: none;
|
|
--area-animation-duration: 0s;
|
|
--area-animation-timing: linear;
|
|
--area-bg-filter: grayscale(100%) contrast(150) brightness(150);
|
|
|
|
/** === TITLE VARIABLES === */
|
|
--title-color: var(--color-palette-light-silver);
|
|
--title-font: var(--font-header);
|
|
--title-font-size: var(--typo-size-2xl);
|
|
--title-font-weight: var(--typo-weight-black);
|
|
--title-line-height: 1;
|
|
--title-transform: uppercase;
|
|
--title-spacing: var(--typo-spacing-comfortable);
|
|
--title-hover-color: var(--color-tertiary);
|
|
--title-current-color: var(--color-primary);
|
|
--title-current-bg: var(--color-primary);
|
|
|
|
/** === SUBLINK VARIABLES === */;
|
|
--sublink-color: var(--color-palette-light-silver);
|
|
--sublink-font: var(--font-header);
|
|
--sublink-font-size: var(--typo-size-2xl);
|
|
--sublink-font-weight: var(--typo-weight-black);
|
|
--sublink-transform: uppercase;
|
|
--sublink-spacing: var(--typo-spacing-relaxed);
|
|
--sublink-line-height: var(--typo-leading-relaxed);
|
|
--sublink-letter-spacing: var(--typo-spacing-relaxed);
|
|
--sublink-current-color: var(--color-primary);
|
|
--sublink-current-bg: var(--color-primary);
|
|
|
|
/** === SUBTITLE VARIABLES === **/
|
|
--divider-color: var(--color-palette-light-silver);
|
|
--divider-width: var(--size-6);
|
|
--divider-height: var(--size-2);
|
|
--divider-font: var(--font-mono);
|
|
--divider-symbol: ⯆;
|
|
--divider-font-size: var(--typo-size-2xl);
|
|
--divider-padding: 0 var(--typo-spacing-cozy);
|
|
--subtitle-color: var(--color-palette-light-silver);
|
|
--subtitle-font: var(--font-mono);
|
|
--subtitle-font-size: var(--typo-size-2xl);
|
|
--subtitle-text-transform: uppercase;
|
|
--subtitle-letter-spacing: var(--typo-spacing-cozy);
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
border: var(--size-1) solid var(--area-border);
|
|
|
|
text-align: center;
|
|
|
|
background: var(--area-bg);
|
|
|
|
transition: all 0.2s ease-in-out;
|
|
|
|
&:not(.current) {
|
|
&:hover {
|
|
animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
|
|
}
|
|
}
|
|
}
|
|
|
|
.area_1 { grid-area: area_1; }
|
|
.area_2 { grid-area: area_2; }
|
|
.area_3 { grid-area: area_3; }
|
|
.area_4 { grid-area: area_4; }
|
|
.area_5 { grid-area: area_5; }
|
|
|
|
.hasBGImg {
|
|
&:hover {
|
|
.bgImg {
|
|
animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bgImg {
|
|
position: absolute;
|
|
z-index: -1;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
filter: var(--area-bg-filter);
|
|
|
|
@media screen and (--bp-tablet-down) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* === MenuTitle === */
|
|
.title {
|
|
position: relative;
|
|
}
|
|
|
|
.mainlink {
|
|
position: relative;
|
|
|
|
font-family: var(--title-font);
|
|
font-size: var(--title-font-size);
|
|
font-weight: var(--title-font-weight);
|
|
line-height: var(--title-line-height);
|
|
color: var(--title-color);
|
|
text-transform: var(--title-transform);
|
|
letter-spacing: var(--title-spacing);
|
|
|
|
transition: any 0.5s ease-in-out;
|
|
|
|
&:focus {
|
|
&:hover {
|
|
color: var(--title-current-color);
|
|
}
|
|
|
|
@media screen and (--bp-tablet-down) {
|
|
outline: none;
|
|
|
|
&:hover {
|
|
color: var(--title-current-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.current {
|
|
pointer-events: none;
|
|
|
|
@media screen and (--bp-tablet-down) {
|
|
&:hover {
|
|
color: var(--title-current-color);
|
|
}
|
|
}
|
|
|
|
@media screen and (--bp-desktop) {
|
|
}
|
|
}
|
|
|
|
@media screen and (--bp-tablet-down) {
|
|
transition: border 0.5s ease-in-out;
|
|
}
|
|
}
|
|
|
|
/* === MenuSublinks === */
|
|
.list {
|
|
@media screen and (--bp-tablet-down) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
}
|
|
|
|
.sublink {
|
|
position: relative;
|
|
|
|
font-family: var(--sublink-font);
|
|
font-size: var(--sublink-font-size);
|
|
font-weight: var(--sublink-font-weight);
|
|
line-height: var(--sublink-line-height);
|
|
color: var(--sublink-color);
|
|
text-transform: var(--sublink-transform);
|
|
letter-spacing: var(--sublink-spacing);;
|
|
|
|
&:not(.current),
|
|
&:not(.focus) {
|
|
transition: var(--sublink-hover-transition);
|
|
|
|
&::after,
|
|
&::before {
|
|
position: absolute;
|
|
font-family: var(--sublink-hover-decorator-font);
|
|
opacity: 0;
|
|
transition: var(--sublink-hover-decorator-transition);
|
|
}
|
|
|
|
&::before {
|
|
content: var(--sublink-hover-decorator-left-symbol);
|
|
left: 0;
|
|
}
|
|
|
|
&::after {
|
|
content: var(--sublink-hover-decorator-right-symbol);
|
|
right: 0;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--sublink-hover-color);
|
|
|
|
&::before {
|
|
top: var(--sublink-hover-decorator-left-pos-y);
|
|
left: var(--sublink-hover-decorator-left-pos-x);
|
|
transform: var(--sublink-hover-decorator-left-transform);
|
|
opacity: 1;
|
|
}
|
|
|
|
&::after {
|
|
top: var(--sublink-hover-decorator-right-pos-y);
|
|
right: var(--sublink-hover-decorator-rightt-pos-x);
|
|
transform: var(--sublink-hover-decorator-right-transform);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
&:hover {
|
|
color: var(--sublink-current-color);
|
|
}
|
|
}
|
|
|
|
&.current {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* === MenuSubtitle === */
|
|
.wrapper {
|
|
position: relative;
|
|
|
|
@media screen and (--bp-tablet-down) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* === UTILITY Classes */
|
|
@media screen and (--bp-desktop) {
|
|
.pos_tr {
|
|
position: absolute;
|
|
top: 1em;
|
|
right: 1em;
|
|
}
|
|
|
|
.pos_tc {
|
|
position: absolute;
|
|
top: 1em;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.pos_tl {
|
|
position: absolute;
|
|
top: 1em;
|
|
left: 1em;
|
|
}
|
|
|
|
.pos_cr {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 1em;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.pos_c {
|
|
position: absolute;
|
|
bottom: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, 50%);
|
|
}
|
|
|
|
.pos_cl {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 1em;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.pos_br {
|
|
position: absolute;
|
|
right: 1em;
|
|
bottom: 1em;
|
|
}
|
|
|
|
.pos_bc {
|
|
position: absolute;
|
|
bottom: 1em;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.pos_bl {
|
|
position: absolute;
|
|
bottom: 1em;
|
|
left: 1em;
|
|
}
|
|
|
|
.vertical-rl {
|
|
writing-mode: vertical-rl;
|
|
|
|
& * {
|
|
writing-mode: vertical-rl;
|
|
}
|
|
}
|
|
|
|
.vertical-lr {
|
|
writing-mode: vertical-lr;
|
|
|
|
& * {
|
|
writing-mode: vertical-lr;
|
|
}
|
|
}
|
|
|
|
.sideways-rl {
|
|
writing-mode: sideways-rl;
|
|
|
|
& * {
|
|
writing-mode: sideways-rl;
|
|
}
|
|
}
|
|
|
|
.sideways-lr {
|
|
writing-mode: sideways-lr;
|
|
|
|
& * {
|
|
writing-mode: sideways-lr;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* === CATEGORY Variants === */
|
|
@media screen and (--bp-desktop) {
|
|
.meta {}
|
|
.kitchensink {}
|
|
.awq {}
|
|
.worldburner {}
|
|
.chainbreaker {}
|
|
}
|
|
} |