Line 1: | Line 1: | ||
div[bg=dark] { | div[bg=dark] { | ||
− | + | background-color: rgba(0, 0, 0, 0.85); | |
} | } | ||
div[bg=none] { | div[bg=none] { | ||
− | + | background-color: none; | |
} | } | ||
#fixedOverlay { | #fixedOverlay { | ||
− | + | position: fixed; | |
− | + | height: 100%; | |
− | + | width: 100%; | |
− | + | z-index: 3; | |
− | + | transition: 1s; | |
+ | font-family: "montserrat-light" !important; | ||
+ | } | ||
+ | #fixedOverlay[bg=none], #fixedOverlay[bg=dark] { | ||
+ | pointer-events: none; | ||
+ | } | ||
+ | #fixedOverlay[bg=none] #bubbles, #fixedOverlay[bg=dark] #bubbles { | ||
+ | pointer-events: none; | ||
} | } | ||
− | |||
#fixedOverlay #sidebar { | #fixedOverlay #sidebar { | ||
− | + | width: 5vw; | |
− | + | height: 100%; | |
− | + | position: fixed; | |
− | + | color: #FAFAFC; | |
− | display: flex; | + | display: flex; |
− | + | justify-content: center; | |
} | } | ||
− | |||
#fixedOverlay #sidebar #sidebar-wrapper { | #fixedOverlay #sidebar #sidebar-wrapper { | ||
− | + | width: 40%; | |
− | + | height: 100%; | |
} | } | ||
− | |||
#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container { | #fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container { | ||
− | + | width: 30%; | |
− | + | height: 30%; | |
− | + | background: rgba(98, 129, 239, 0.3); | |
− | + | position: absolute; | |
− | + | left: 50%; | |
− | + | top: 50%; | |
− | + | transform: translate(-50%, -50%); | |
− | + | border-radius: 10px; | |
− | + | max-width: 7px; | |
− | + | opacity: 1; | |
− | + | transition: 0.5s; | |
} | } | ||
− | #fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container[hiddenScroll= | + | #fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container[hiddenScroll=true] { |
− | + | opacity: 0; | |
} | } | ||
− | |||
#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container #scrollbar { | #fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container #scrollbar { | ||
− | + | width: 100%; | |
− | + | background: #6281EF; | |
− | + | opacity: 100%; | |
− | + | height: 0%; | |
− | + | border-radius: 20px; | |
} | } | ||
− | |||
#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll { | #fixedOverlay #sidebar #sidebar-wrapper #indicateScroll { | ||
− | + | position: absolute; | |
− | + | left: 50%; | |
− | + | transform: translateX(-50%); | |
− | + | bottom: 10vh; | |
} | } | ||
− | |||
#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 { | #fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 { | ||
− | + | padding-top: 10px; | |
− | + | transform: rotate(180deg); | |
− | + | writing-mode: vertical-lr; | |
− | + | text-transform: uppercase; | |
− | + | margin: -2px; | |
} | } | ||
− | |||
#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll img { | #fixedOverlay #sidebar #sidebar-wrapper #indicateScroll img { | ||
− | + | width: 100%; | |
− | + | text-align: center; | |
} | } | ||
− | |||
#fixedOverlay nav { | #fixedOverlay nav { | ||
− | + | box-sizing: border-box; | |
− | + | z-index: 2; | |
− | + | pointer-events: none; | |
− | + | display: block; | |
− | + | transition: 0.5s; | |
− | + | height: 70px; | |
} | } | ||
− | #fixedOverlay nav[onText=true]{ | + | #fixedOverlay nav[onText=true] { |
− | background-color: #FAFAFC; | + | background-color: #FAFAFC; |
− | box-sizing: border-box; | + | box-sizing: border-box; |
− | border-bottom: solid 1px rgba(0,0,0,0.1); | + | border-bottom: solid 1px rgba(0, 0, 0, 0.1); |
− | padding-bottom: 10px; | + | padding-bottom: 10px; |
− | box-shadow: 0px 1px 5px #999; | + | box-shadow: 0px 1px 5px #999; |
+ | } | ||
+ | #fixedOverlay nav .header-part { | ||
+ | margin: 20px; | ||
} | } | ||
− | |||
#fixedOverlay nav #header { | #fixedOverlay nav #header { | ||
− | + | display: flex; | |
− | + | justify-content: space-between; | |
− | height: 100%; | + | height: 100%; |
− | + | align-items: center; | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
#fixedOverlay nav #header img { | #fixedOverlay nav #header img { | ||
− | + | width: 145px; | |
} | } | ||
− | |||
#fixedOverlay nav #header .active .menu-short { | #fixedOverlay nav #header .active .menu-short { | ||
− | + | transform: translateX(30%) scaleX(0); | |
} | } | ||
− | |||
#fixedOverlay nav #header .active #top-hamb { | #fixedOverlay nav #header .active #top-hamb { | ||
− | + | transform: scale(0.7) translateY(20px) rotate(45deg); | |
} | } | ||
− | |||
#fixedOverlay nav #header .active #bottom-hamb { | #fixedOverlay nav #header .active #bottom-hamb { | ||
− | + | transform: scale(0.7) translateY(-9px) rotate(-45deg); | |
} | } | ||
− | |||
#fixedOverlay nav #header .menu-wrapper { | #fixedOverlay nav #header .menu-wrapper { | ||
− | + | cursor: pointer; | |
− | + | z-index: 11; | |
− | + | box-sizing: border-box; | |
− | + | min-width: 30px; | |
− | + | pointer-events: all; | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
#fixedOverlay nav #header .menu-wrapper .menu-hamb { | #fixedOverlay nav #header .menu-wrapper .menu-hamb { | ||
− | + | height: 4px; | |
− | + | border-radius: 5px; | |
− | + | transition: 0.5s; | |
− | + | background-color: #6281EF; | |
} | } | ||
− | |||
#fixedOverlay nav #header .menu-wrapper .menu-short { | #fixedOverlay nav #header .menu-wrapper .menu-short { | ||
− | + | width: 70%; | |
− | + | margin-bottom: 6px; | |
− | + | margin-top: 6px; | |
− | + | transition: 0.1s; | |
+ | } | ||
+ | #fixedOverlay nav #header #logo a { | ||
+ | pointer-events: all; | ||
} | } | ||
− | #fixedOverlay #bubbles-to-close{ | + | #fixedOverlay #bubbles-to-close { |
− | height: 100%; | + | height: 100%; |
− | width: 100%; | + | width: 100%; |
− | position: absolute; | + | position: absolute; |
− | display:none; | + | display: none; |
} | } | ||
− | #fixedOverlay #bubbles-to-close[open=true]{ | + | #fixedOverlay #bubbles-to-close[open=true] { |
− | display: initial; | + | display: initial; |
− | pointer-events: all | + | pointer-events: all; |
} | } | ||
#bubbles { | #bubbles { | ||
− | + | position: fixed; | |
− | + | height: 100%; | |
− | + | width: 100%; | |
} | } | ||
− | |||
#bubbles .bubble .choices { | #bubbles .bubble .choices { | ||
− | + | position: absolute; | |
− | + | left: 50%; | |
− | + | top: 50%; | |
− | + | transform: translate(-50%, -50%); | |
− | + | text-transform: uppercase; | |
− | + | padding-left: 20px; | |
− | + | padding-right: 20px; | |
− | pointer-events: all; | + | pointer-events: all; |
} | } | ||
− | |||
#bubbles .bubble .choices .menu-list { | #bubbles .bubble .choices .menu-list { | ||
− | + | width: fit-content; | |
− | + | list-style: none; | |
− | + | font-size: 2em; | |
+ | } | ||
+ | #bubbles .bubble .choices .menu-list h1 { | ||
+ | margin: 0; | ||
+ | font-size: 1.2em; | ||
+ | font-family: "montserrat-bold"; | ||
} | } | ||
− | |||
#bubbles .bubble .choices .menu-list .main-choice h1 { | #bubbles .bubble .choices .menu-list .main-choice h1 { | ||
− | + | box-shadow: inset 0 0 0 -1px #6281EF; | |
− | + | transition: 0.3s; | |
− | + | padding: 0 5px; | |
} | } | ||
− | |||
#bubbles .bubble .choices .menu-list .main-choice h1:hover { | #bubbles .bubble .choices .menu-list .main-choice h1:hover { | ||
− | + | box-shadow: inset 0 -0.5em 0 -1px #6281EF; | |
} | } | ||
− | |||
#bubbles .bubble .choices .menu-list .active h1 { | #bubbles .bubble .choices .menu-list .active h1 { | ||
− | + | box-shadow: inset 0 -0.5em 0 -1px #6281EF; | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
#bubbles .bubble .choices ol li { | #bubbles .bubble .choices ol li { | ||
− | + | counter-increment: count-me; | |
− | + | cursor: pointer; | |
− | + | padding: 10px; | |
− | + | width: fit-content; | |
} | } | ||
− | |||
#bubbles .bubble .choices ol li::before { | #bubbles .bubble .choices ol li::before { | ||
− | + | content: counter(count-me) ". "; | |
− | + | max-width: 0px; | |
− | + | max-height: 0px; | |
− | + | left: -1.3em; | |
− | + | position: relative; | |
− | + | display: flex; | |
} | } | ||
− | |||
#bubbles .bubble .choices ul { | #bubbles .bubble .choices ul { | ||
− | + | padding-inline-start: 0; | |
} | } | ||
− | |||
#bubbles #popup-main { | #bubbles #popup-main { | ||
− | + | background-color: #121212; | |
− | + | height: 40vw; | |
− | + | width: 40vw; | |
− | + | border-radius: 100%; | |
− | + | position: absolute; | |
− | + | right: -80vw; | |
− | + | top: -80vh; | |
− | + | transition: 1s; | |
− | + | color: #FAFAFC; | |
− | + | z-index: 2; | |
− | + | -webkit-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57); | |
− | + | -moz-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57); | |
− | + | box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57); | |
} | } | ||
− | |||
#bubbles #popup-main .menu-list { | #bubbles #popup-main .menu-list { | ||
− | + | font-size: 1.8em; | |
} | } | ||
− | |||
#bubbles #popup-main .menu-list li::before { | #bubbles #popup-main .menu-list li::before { | ||
− | + | -webkit-text-fill-color: #121212; | |
− | + | -webkit-text-stroke-width: 1px; | |
− | + | -webkit-text-stroke-color: #FAFAFC; | |
− | + | line-height: 0.6em; | |
− | + | font-size: 2em; | |
} | } | ||
− | |||
#bubbles #popup-main .menu-list .active::before { | #bubbles #popup-main .menu-list .active::before { | ||
− | + | -webkit-text-fill-color: #FAFAFC; | |
} | } | ||
− | |||
#bubbles #popup-next { | #bubbles #popup-next { | ||
− | + | background-color: #6281EF; | |
− | + | height: 70vw; | |
− | + | width: 70vw; | |
− | + | border-radius: 100%; | |
− | + | position: absolute; | |
− | + | left: -90vw; | |
− | + | bottom: -200vh; | |
− | + | transition: 1s; | |
− | + | color: #FAFAFC; | |
− | + | display: table; | |
− | + | overflow: hidden; | |
− | + | z-index: 3; | |
− | + | transform: translate(-50%, 50%); | |
} | } | ||
− | |||
#bubbles #popup-next .project { | #bubbles #popup-next .project { | ||
− | + | columns: 2; | |
− | + | -webkit-columns: 2; | |
− | + | -moz-columns: 2; | |
− | + | column-gap: 0; | |
} | } | ||
− | |||
#bubbles #popup-next .project li { | #bubbles #popup-next .project li { | ||
− | + | padding-left: 0; | |
− | + | padding-right: 0; | |
− | + | font-family: "montserrat-bold"; | |
} | } | ||
− | |||
#bubbles #popup-next .choices { | #bubbles #popup-next .choices { | ||
− | + | vertical-align: middle; | |
− | + | display: table-cell; | |
} | } | ||
− | |||
#bubbles #popup-next .choices .menu-list { | #bubbles #popup-next .choices .menu-list { | ||
− | + | font-size: 2em; | |
− | + | list-style: none; | |
− | + | margin: 0 auto; | |
− | + | padding-right: 10px; | |
− | + | padding-left: 10px; | |
− | + | text-align: -webkit-center; | |
} | } | ||
− | |||
#bubbles #popup-next .choices .menu-list li { | #bubbles #popup-next .choices .menu-list li { | ||
− | + | width: fit-content; | |
− | + | margin-bottom: 15px; | |
− | + | font-family: "montserrat-bold"; | |
} | } | ||
− | |||
#bubbles #popup-next .choices .menu-list li a { | #bubbles #popup-next .choices .menu-list li a { | ||
− | + | box-shadow: inset 0 0 0 -1px #3356CE; | |
− | + | transition: 0.3s; | |
− | + | padding: 0 5px; | |
} | } | ||
− | |||
#bubbles #popup-next .choices .menu-list li a:hover { | #bubbles #popup-next .choices .menu-list li a:hover { | ||
− | + | box-shadow: inset 0 -0.5em 0 -1px #3356CE; | |
} | } | ||
− | |||
#bubbles #popup-next .choices .menu-list a { | #bubbles #popup-next .choices .menu-list a { | ||
− | + | color: #FAFAFC; | |
− | + | text-decoration: none; | |
− | + | white-space: nowrap; | |
} | } | ||
− | |||
#bubbles #bub_first .active { | #bubbles #bub_first .active { | ||
− | + | right: -7vw; | |
− | + | top: -3vh; | |
} | } | ||
− | |||
#bubbles #bub_second .active { | #bubbles #bub_second .active { | ||
− | + | left: 50vw; | |
− | + | bottom: 50vh; | |
} | } | ||
− | # | + | #intro-page { |
− | # | + | background-color: #121212; |
− | + | width: 100%; | |
+ | height: 100vh; | ||
+ | } | ||
+ | #intro-page #intro-header { | ||
+ | padding-top: 10vh; | ||
+ | width: 120%; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | #intro-page #intro-header img { | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | left: 50%; | ||
+ | margin-left: -70vw; | ||
+ | } | ||
+ | #intro-page #intro { | ||
+ | z-index: 1; | ||
+ | background-color: transparent; | ||
+ | height: 70vh; | ||
+ | width: 70vh; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | border-radius: 100%; | ||
+ | } | ||
+ | #intro-page #intro #title-wrapper { | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | } | ||
+ | #intro-page #intro h1 { | ||
+ | text-transform: uppercase; | ||
+ | color: #FAFAFC; | ||
+ | font-size: 70px; | ||
+ | font-family: "montserrat-bold"; | ||
+ | text-align: center; | ||
+ | margin: 0; | ||
} | } | ||
− | # | + | #problem-page { |
− | + | background-color: #FAFAFC; | |
− | + | width: 100%; | |
+ | height: 100vh; | ||
} | } | ||
@media only screen and (min-width: 768px) and (max-width: 1023px) { | @media only screen and (min-width: 768px) and (max-width: 1023px) { | ||
− | + | #bubbles #popup-main { | |
− | + | background-color: #121212; | |
− | + | height: 60vh; | |
− | + | width: 60vh; | |
− | + | right: -100vw; | |
− | + | top: -100vh; | |
− | + | } | |
− | + | #bubbles #popup-main .menu-list { | |
− | + | font-size: 18px; | |
− | + | } | |
− | + | #bubbles #popup-main .menu-list h1 { | |
− | + | font-size: 1.2em; | |
− | + | } | |
− | + | #bubbles #popup-main .menu-list li::before { | |
− | + | line-height: 22px; | |
− | + | } | |
− | + | #bubbles #popup-next { | |
− | + | height: 100vw; | |
− | + | width: 100vw; | |
− | + | } | |
− | + | #bubbles #popup-next .menu-list { | |
− | + | font-size: 1.5em; | |
− | + | } | |
− | + | #bubbles #popup-next .menu-list li { | |
− | + | padding: 5px; | |
− | + | } | |
− | + | #bubbles #popup-next .project { | |
− | + | columns: 2; | |
− | + | -webkit-columns: 2; | |
− | + | -moz-columns: 2; | |
− | + | column-gap: 0; | |
− | + | } | |
− | + | #bubbles #popup-next .project li { | |
− | + | padding-left: 0; | |
− | + | padding-right: 0; | |
− | + | margin-bottom: 3px; | |
− | + | } | |
− | + | #bubbles #bub_first .active { | |
− | + | right: -7vw; | |
− | + | top: -4vh; | |
− | + | } | |
− | + | #bubbles #bub_second .active { | |
− | + | left: 40vw; | |
− | + | bottom: 40vh; | |
− | + | } | |
− | + | ||
− | + | #fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 { | |
− | + | font-size: 0.65em; | |
− | + | } | |
− | + | #fixedOverlay nav #header h1 { | |
− | + | font-size: 18px; | |
− | + | } | |
− | + | #fixedOverlay nav #header .active #top-hamb { | |
− | + | transform: scale(0.7) translateY(15px) rotate(45deg); | |
− | + | } | |
− | + | #fixedOverlay nav #header .active #bottom-hamb { | |
− | + | transform: scale(0.7) translateY(-8px) rotate(-45deg); | |
− | + | } | |
− | + | #fixedOverlay nav #header .menu-wrapper .menu-hamb { | |
− | + | height: 3px; | |
− | + | } | |
− | + | #fixedOverlay nav #header .menu-wrapper .menu-short { | |
− | + | margin-bottom: 5px; | |
− | + | margin-top: 5px; | |
+ | } | ||
} | } | ||
+ | @media only screen and (max-width: 767px) { | ||
+ | #bubbles #popup-main { | ||
+ | background-color: #121212; | ||
+ | height: 60vh; | ||
+ | width: 60vh; | ||
+ | right: -100vw; | ||
+ | top: -100vh; | ||
+ | } | ||
+ | #bubbles #popup-main .menu-list { | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | #bubbles #popup-main .menu-list h1 { | ||
+ | font-size: 1.3em; | ||
+ | } | ||
+ | #bubbles #popup-next { | ||
+ | height: 100vw; | ||
+ | width: 100vw; | ||
+ | } | ||
+ | #bubbles #popup-next .choices .menu-list { | ||
+ | font-size: 1.45em; | ||
+ | } | ||
+ | #bubbles #popup-next .choices .menu-list li { | ||
+ | margin-bottom: 3px; | ||
+ | } | ||
+ | #bubbles #popup-next .choices li { | ||
+ | padding: 5px; | ||
+ | } | ||
+ | #bubbles #popup-next .project { | ||
+ | column-gap: 0; | ||
+ | } | ||
+ | #bubbles #popup-next .project li { | ||
+ | padding-left: 0; | ||
+ | padding-right: 0; | ||
+ | margin-bottom: 3px; | ||
+ | } | ||
+ | #bubbles #bub_first .active { | ||
+ | right: -22vw; | ||
+ | top: -6vh; | ||
+ | } | ||
+ | #bubbles #bub_second .active { | ||
+ | left: 50vw; | ||
+ | bottom: 25vh; | ||
+ | } | ||
− | + | #fixedOverlay nav .header-part { | |
− | + | margin: 5px 30px; | |
− | + | } | |
− | + | #fixedOverlay nav #header h1 { | |
− | + | font-size: 18px; | |
− | + | } | |
− | + | #fixedOverlay nav #header .active #top-hamb { | |
− | + | transform: scale(0.7) translateY(15px) rotate(45deg); | |
− | + | } | |
− | + | #fixedOverlay nav #header .active #bottom-hamb { | |
− | + | transform: scale(0.7) translateY(-8px) rotate(-45deg); | |
− | + | } | |
− | + | #fixedOverlay nav #header .menu-wrapper .menu-hamb { | |
− | + | height: 3px; | |
− | + | } | |
− | + | #fixedOverlay nav #header .menu-wrapper .menu-short { | |
− | + | margin-bottom: 5px; | |
− | + | margin-top: 5px; | |
− | + | } | |
− | + | #fixedOverlay #sidebar { | |
− | + | width: 10vw; | |
− | + | } | |
− | + | #fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 { | |
− | + | font-size: 0.65em; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
@media only screen and (max-width: 420px) and (max-height: 600px) { | @media only screen and (max-width: 420px) and (max-height: 600px) { | ||
− | + | #bubbles #popup-main .menu-list libefore { | |
− | + | font-size: 1.8em; | |
− | line-height: 0.5em; | + | line-height: 0.5em; |
− | + | } | |
− | + | #bubbles #popup-main .menu-list h1 { | |
− | + | font-size: 1em; | |
− | + | } | |
− | + | #bubbles #popup-next .choices .menu-list { | |
− | + | font-size: 1.2em; | |
− | + | } | |
} | } |
Revision as of 12:45, 4 October 2020
div[bg=dark] {
background-color: rgba(0, 0, 0, 0.85);
}
div[bg=none] {
background-color: none;
}
- fixedOverlay {
position: fixed; height: 100%; width: 100%; z-index: 3; transition: 1s; font-family: "montserrat-light" !important;
}
- fixedOverlay[bg=none], #fixedOverlay[bg=dark] {
pointer-events: none;
}
- fixedOverlay[bg=none] #bubbles, #fixedOverlay[bg=dark] #bubbles {
pointer-events: none;
}
- fixedOverlay #sidebar {
width: 5vw; height: 100%; position: fixed; color: #FAFAFC; display: flex; justify-content: center;
}
- fixedOverlay #sidebar #sidebar-wrapper {
width: 40%; height: 100%;
}
- fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container {
width: 30%; height: 30%; background: rgba(98, 129, 239, 0.3); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 10px; max-width: 7px; opacity: 1; transition: 0.5s;
}
- fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container[hiddenScroll=true] {
opacity: 0;
}
- fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container #scrollbar {
width: 100%; background: #6281EF; opacity: 100%; height: 0%; border-radius: 20px;
}
- fixedOverlay #sidebar #sidebar-wrapper #indicateScroll {
position: absolute; left: 50%; transform: translateX(-50%); bottom: 10vh;
}
- fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {
padding-top: 10px; transform: rotate(180deg); writing-mode: vertical-lr; text-transform: uppercase; margin: -2px;
}
- fixedOverlay #sidebar #sidebar-wrapper #indicateScroll img {
width: 100%; text-align: center;
}
- fixedOverlay nav {
box-sizing: border-box; z-index: 2; pointer-events: none; display: block; transition: 0.5s; height: 70px;
}
- fixedOverlay nav[onText=true] {
background-color: #FAFAFC; box-sizing: border-box; border-bottom: solid 1px rgba(0, 0, 0, 0.1); padding-bottom: 10px; box-shadow: 0px 1px 5px #999;
}
- fixedOverlay nav .header-part {
margin: 20px;
}
- fixedOverlay nav #header {
display: flex; justify-content: space-between; height: 100%; align-items: center;
}
- fixedOverlay nav #header img {
width: 145px;
}
- fixedOverlay nav #header .active .menu-short {
transform: translateX(30%) scaleX(0);
}
- fixedOverlay nav #header .active #top-hamb {
transform: scale(0.7) translateY(20px) rotate(45deg);
}
- fixedOverlay nav #header .active #bottom-hamb {
transform: scale(0.7) translateY(-9px) rotate(-45deg);
}
- fixedOverlay nav #header .menu-wrapper {
cursor: pointer; z-index: 11; box-sizing: border-box; min-width: 30px; pointer-events: all;
}
- fixedOverlay nav #header .menu-wrapper .menu-hamb {
height: 4px; border-radius: 5px; transition: 0.5s; background-color: #6281EF;
}
- fixedOverlay nav #header .menu-wrapper .menu-short {
width: 70%; margin-bottom: 6px; margin-top: 6px; transition: 0.1s;
}
- fixedOverlay nav #header #logo a {
pointer-events: all;
}
- fixedOverlay #bubbles-to-close {
height: 100%; width: 100%; position: absolute; display: none;
}
- fixedOverlay #bubbles-to-close[open=true] {
display: initial; pointer-events: all;
}
- bubbles {
position: fixed; height: 100%; width: 100%;
}
- bubbles .bubble .choices {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-transform: uppercase; padding-left: 20px; padding-right: 20px; pointer-events: all;
}
- bubbles .bubble .choices .menu-list {
width: fit-content; list-style: none; font-size: 2em;
}
- bubbles .bubble .choices .menu-list h1 {
margin: 0; font-size: 1.2em; font-family: "montserrat-bold";
}
- bubbles .bubble .choices .menu-list .main-choice h1 {
box-shadow: inset 0 0 0 -1px #6281EF; transition: 0.3s; padding: 0 5px;
}
- bubbles .bubble .choices .menu-list .main-choice h1:hover {
box-shadow: inset 0 -0.5em 0 -1px #6281EF;
}
- bubbles .bubble .choices .menu-list .active h1 {
box-shadow: inset 0 -0.5em 0 -1px #6281EF;
}
- bubbles .bubble .choices ol li {
counter-increment: count-me; cursor: pointer; padding: 10px; width: fit-content;
}
- bubbles .bubble .choices ol li::before {
content: counter(count-me) ". "; max-width: 0px; max-height: 0px; left: -1.3em; position: relative; display: flex;
}
- bubbles .bubble .choices ul {
padding-inline-start: 0;
}
- bubbles #popup-main {
background-color: #121212; height: 40vw; width: 40vw; border-radius: 100%; position: absolute; right: -80vw; top: -80vh; transition: 1s; color: #FAFAFC; z-index: 2; -webkit-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57); -moz-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57); box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
}
- bubbles #popup-main .menu-list {
font-size: 1.8em;
}
- bubbles #popup-main .menu-list li::before {
-webkit-text-fill-color: #121212; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #FAFAFC; line-height: 0.6em; font-size: 2em;
}
- bubbles #popup-main .menu-list .active::before {
-webkit-text-fill-color: #FAFAFC;
}
- bubbles #popup-next {
background-color: #6281EF; height: 70vw; width: 70vw; border-radius: 100%; position: absolute; left: -90vw; bottom: -200vh; transition: 1s; color: #FAFAFC; display: table; overflow: hidden; z-index: 3; transform: translate(-50%, 50%);
}
- bubbles #popup-next .project {
columns: 2; -webkit-columns: 2; -moz-columns: 2; column-gap: 0;
}
- bubbles #popup-next .project li {
padding-left: 0; padding-right: 0; font-family: "montserrat-bold";
}
- bubbles #popup-next .choices {
vertical-align: middle; display: table-cell;
}
- bubbles #popup-next .choices .menu-list {
font-size: 2em; list-style: none; margin: 0 auto; padding-right: 10px; padding-left: 10px; text-align: -webkit-center;
}
- bubbles #popup-next .choices .menu-list li {
width: fit-content; margin-bottom: 15px; font-family: "montserrat-bold";
}
- bubbles #popup-next .choices .menu-list li a {
box-shadow: inset 0 0 0 -1px #3356CE; transition: 0.3s; padding: 0 5px;
}
- bubbles #popup-next .choices .menu-list li a:hover {
box-shadow: inset 0 -0.5em 0 -1px #3356CE;
}
- bubbles #popup-next .choices .menu-list a {
color: #FAFAFC; text-decoration: none; white-space: nowrap;
}
- bubbles #bub_first .active {
right: -7vw; top: -3vh;
}
- bubbles #bub_second .active {
left: 50vw; bottom: 50vh;
}
- intro-page {
background-color: #121212; width: 100%; height: 100vh;
}
- intro-page #intro-header {
padding-top: 10vh; width: 120%; margin: 0 auto;
}
- intro-page #intro-header img {
width: 100%; position: relative; left: 50%; margin-left: -70vw;
}
- intro-page #intro {
z-index: 1; background-color: transparent; height: 70vh; width: 70vh; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 100%;
}
- intro-page #intro #title-wrapper {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
- intro-page #intro h1 {
text-transform: uppercase; color: #FAFAFC; font-size: 70px; font-family: "montserrat-bold"; text-align: center; margin: 0;
}
- problem-page {
background-color: #FAFAFC; width: 100%; height: 100vh;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
#bubbles #popup-main { background-color: #121212; height: 60vh; width: 60vh; right: -100vw; top: -100vh; } #bubbles #popup-main .menu-list { font-size: 18px; } #bubbles #popup-main .menu-list h1 { font-size: 1.2em; } #bubbles #popup-main .menu-list li::before { line-height: 22px; } #bubbles #popup-next { height: 100vw; width: 100vw; } #bubbles #popup-next .menu-list { font-size: 1.5em; } #bubbles #popup-next .menu-list li { padding: 5px; } #bubbles #popup-next .project { columns: 2; -webkit-columns: 2; -moz-columns: 2; column-gap: 0; } #bubbles #popup-next .project li { padding-left: 0; padding-right: 0; margin-bottom: 3px; } #bubbles #bub_first .active { right: -7vw; top: -4vh; } #bubbles #bub_second .active { left: 40vw; bottom: 40vh; }
#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 { font-size: 0.65em; } #fixedOverlay nav #header h1 { font-size: 18px; } #fixedOverlay nav #header .active #top-hamb { transform: scale(0.7) translateY(15px) rotate(45deg); } #fixedOverlay nav #header .active #bottom-hamb { transform: scale(0.7) translateY(-8px) rotate(-45deg); } #fixedOverlay nav #header .menu-wrapper .menu-hamb { height: 3px; } #fixedOverlay nav #header .menu-wrapper .menu-short { margin-bottom: 5px; margin-top: 5px; }
} @media only screen and (max-width: 767px) {
#bubbles #popup-main { background-color: #121212; height: 60vh; width: 60vh; right: -100vw; top: -100vh; } #bubbles #popup-main .menu-list { font-size: 18px; } #bubbles #popup-main .menu-list h1 { font-size: 1.3em; } #bubbles #popup-next { height: 100vw; width: 100vw; } #bubbles #popup-next .choices .menu-list { font-size: 1.45em; } #bubbles #popup-next .choices .menu-list li { margin-bottom: 3px; } #bubbles #popup-next .choices li { padding: 5px; } #bubbles #popup-next .project { column-gap: 0; } #bubbles #popup-next .project li { padding-left: 0; padding-right: 0; margin-bottom: 3px; } #bubbles #bub_first .active { right: -22vw; top: -6vh; } #bubbles #bub_second .active { left: 50vw; bottom: 25vh; }
#fixedOverlay nav .header-part { margin: 5px 30px; } #fixedOverlay nav #header h1 { font-size: 18px; } #fixedOverlay nav #header .active #top-hamb { transform: scale(0.7) translateY(15px) rotate(45deg); } #fixedOverlay nav #header .active #bottom-hamb { transform: scale(0.7) translateY(-8px) rotate(-45deg); } #fixedOverlay nav #header .menu-wrapper .menu-hamb { height: 3px; } #fixedOverlay nav #header .menu-wrapper .menu-short { margin-bottom: 5px; margin-top: 5px; } #fixedOverlay #sidebar { width: 10vw; } #fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 { font-size: 0.65em; }
} @media only screen and (max-width: 420px) and (max-height: 600px) {
#bubbles #popup-main .menu-list libefore { font-size: 1.8em; line-height: 0.5em; } #bubbles #popup-main .menu-list h1 { font-size: 1em; } #bubbles #popup-next .choices .menu-list { font-size: 1.2em; }
}