styles.css
/*--------------------------------------------------------------
TABLE OF CONTENTS
----------------------------------------------------------------
1.0 IMPORTS
2.0 VARIABLES
2.1 COLOUR
2.2 TYPOGRAPHY
3.0 FOUNDATION
3.1 DEFAULT
3.2 NAVBAR
3.3 FOOTER
4.0 TYPOGRAPHY
4.1 MEDIA
5.0 ANIMATIONS
5.1 FADERS
5.2 KEYFRAMES
6.0 CUSTOM
6.1 CURSOR
6.2 SCROLL
6.3 DROPDOWN
6.4 SWITCH
6.5 BUTTON
6.6 ARROW
7.0 MAIN
7.1 HEADER
7.2 BODY
8.0 MEDIA
--------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 IMPORTS
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
/*--------------------------------------------------------------
2.0 VARIABLES
--------------------------------------------------------------*/
:root {
/*------------------------------------------------------------
|
| 2.1 COLOUR
|
------------------------------------------------------------*/
--lightest: rgb(168,168,168);
--light: rgb(50,50,60);
--dark: rgb(22,20,30);
--darkest: rgb(13,12,18);
--light-orange: #f9d423;
--dark-orange: #f83600;
--white: #fff;
--black: #000;
--purple: #8000ff;
--light-purple: #cf59e6;
--light-blue: #6bc5f8;
/*------------------------------------------------------------
|
| 2.2 TYPOGRAPHY
|
------------------------------------------------------------*/
--base-font-size: 1em;
}
/*--------------------------------------------------------------
3.0 FOUNDATION
--------------------------------------------------------------*/
/*------------------------------------------------------------
|
| 3.1 DEFAULT
|
------------------------------------------------------------*/
html {
scroll-behavior: smooth;
}
::selection {
background-color: rgba(255, 207, 103, 0.781);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--darkest);
cursor: none;
}
.text-container {
padding: 5vh 15vh 5vh;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 3s;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/*------------------------------------------------------------
|
| 3.2 NAVBAR
|
------------------------------------------------------------*/
.nav-container {
width: 100%;
position: absolute;
z-index: 999;
font-size: 110%;
animation: fadeIn 3s;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar {
position: relative;
justify-content: space-between;
align-items: center;
width: 100%;
display: flex;
}
.navbar ul {
padding: 45px 0px 45px 60px;
}
.navbar-items {
position: relative;
display: flex;
}
.navbar-items li {
padding: 45px 20px;
}
.navbar-items li a {
transition: ease-in-out color 0.3s;
}
.navbar-items li a:hover {
color: orange;
}
.navbar-items li:last-child {
padding-right: 60px;
}
.nav-resources,
.nav-subcategory {
display: none;
}
.logo {
display: flex;
font-size: larger;
}
.logo-circle {
color: orange;
}
.toggle-button {
position: relative;
margin-left: auto;
display: none;
flex-direction: column;
justify-content: space-between;
width: 35px;
height: 20px;
}
.toggle-button .bar {
height: 2px;
width: 100%;
background-color: var(--darkest);
border-radius: 10px;
}
/*------------------------------------------------------------
|
| 3.3 FOOTER
|
------------------------------------------------------------*/
.footer-container {
position: relative;
margin-top: 10vh;
animation: fadeIn 3s;
}
.footer {
position: absolute;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-bottom: 5vh;
height: 5vh;
width: 100%;
background-color: var(--white);
}
/*--------------------------------------------------------------
4.0 TYPOGRAPHY
--------------------------------------------------------------*/
/*------------------------------------------------------------
|
| 4.1 MEDIA
|
------------------------------------------------------------*/
body {
font-size: calc(var(--base-font-size)*0.9);
}
@media (min-width: 48em) {
body {
font-size: calc(var(--base-font-size));
}
}
@media (min-width: 64em) {
body {
font-size: calc(var(--base-font-size)*1);
}
.nav-resources {
margin-left: -46px !important;
}
}
@media (min-width: 120em) {
body {
font-size: calc(var(--base-font-size)*1.1);
}
.nav-resources {
top: 116px !important;
margin-left: -47px !important;
}
}
@media (min-width: 160em) {
body {
font-size: calc(var(--base-font-size)*1.2);
}
.nav-resources {
top: 120px !important;
margin-left: -49px !important;
}
}
/*--------------------------------------------------------------
5.0 ANIMATIONS
--------------------------------------------------------------*/
/*------------------------------------------------------------
|
| 5.1 FADERS
|
------------------------------------------------------------*/
.fade-in,
.fade {
opacity: 0;
}
.fade-in.appear {
opacity: 1;
animation: fadeIn 3s;
}
.fade.appear {
opacity: 1;
animation: fadeIn 3s;
}
.from-bottom {
transform: translateY(10vh);
}
.from-bottom.appear {
transform: translateY(0);
}
/*------------------------------------------------------------
|
| 5.2 KEYFRAMES
|
------------------------------------------------------------*/
@keyframes fadeIn {
0% {opacity: 0; visibility: hidden;}
100% {opacity: 1; visibility: visible;}
}
@keyframes fadeScroll {
0% {background: var(--darkest);}
100% {}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
/*--------------------------------------------------------------
6.0 CUSTOM
--------------------------------------------------------------*/
/*------------------------------------------------------------
|
| 6.1 CURSOR
|
------------------------------------------------------------*/
.custom-cursor {
display: none;
position: fixed;
left: 0;
top: 0;
z-index: 10000000 !important;
pointer-events: none;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.custom-cursor .outer {
margin-left: -15px;
margin-top: -15px;
width: 30px;
height: 30px;
border: 1px solid var(--darkest);
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 10000000 !important;
opacity: .5;
-webkit-transition: all .08s ease-out;
-o-transition: all .08s ease-out;
transition: all .08s ease-out;
}
.custom-cursor .inner {
position: absolute;
background-color: var(--darkest);
transition: linear height 0.2s, linear width 0.2s;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
z-index: 10000001 !important;
}
.hoveredCursor {
width: 30px !important;
height: 30px !important;
}
/*------------------------------------------------------------
|
| 6.2 SCROLL
|
------------------------------------------------------------*/
::-webkit-scrollbar {
width: 15px;
transition: ease-in-out 1s;
}
::-webkit-scrollbar.active {
display: block;
}
::-webkit-scrollbar-track {
background: var(--white);
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
background: var(--darkest);
animation: fadeScroll 3s;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--dark);
}
/*------------------------------------------------------------
|
| 6.3 DROPDOWN
|
------------------------------------------------------------*/
.dropdowns {
margin-bottom: 3rem;
}
.dropdown > div {
display: flex;
flex-direction: column;
align-items: center;
}
.inputs div label {
color: var(--darkest);
}
input {
font-size: 100%;
width: 200px;
border: 2px solid var(--darkest);
border-radius: 5px;
outline: 0;
padding: 10px;
margin-top: 0.5rem;
font-family: 'Montserrat', sans-serif;
background: transparent;
text-align: center;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
top: 4.2rem;
position: absolute;
display: none;
background-color: rgb(240, 240, 240);
min-width: 100%;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content span {
text-align: center;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown span:hover {
background-color: rgb(170, 170, 170);
}
.show {
display: block;
}
#year {
width: 100px;
}
#paper {
width: 80px;
}
/*------------------------------------------------------------
|
| 6.4 SWITCH
|
------------------------------------------------------------*/
.switch {
padding-top: 1vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1rem;
}
.check-text {
color: rgb(200, 200, 200);
}
.switch label {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input { /* Hide default HTML checkbox */
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(150, 150, 150);
box-shadow: 0 0 10px white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider::before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: orange;
box-shadow: 0 0 10px orange;
}
input:checked + .slider::before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round::before {
border-radius: 50%;
}
.check-text.active {
color: black;
}
.inputs,
.switches {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1rem;
}
.switches {
flex-direction: column;
margin-bottom: 4rem;
}
/*------------------------------------------------------------
|
| 6.5 BUTTON
|
------------------------------------------------------------*/
.button {
--offset: 10px;
--border-size: 2px;
display: block;
position: relative;
padding: 1.5em 3em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: transparent;
color: var(--darkest);
text-transform: uppercase;
letter-spacing: 0.25em;
outline: none;
font-weight: bold;
border-radius: 0;
box-shadow: inset 0 0 0 var(--border-size) currentcolor;
transition: background 0.8s ease;
}
.button:hover {
background: rgba(100, 0, 0, 0.03);
}
.button__horizontal, .button__vertical {
position: absolute;
top: var(--horizontal-offset, 0);
right: var(--vertical-offset, 0);
bottom: var(--horizontal-offset, 0);
left: var(--vertical-offset, 0);
transition: transform 0.8s ease;
will-change: transform;
}
.button__horizontal::before, .button__vertical::before {
content: "";
position: absolute;
border: inherit;
}
.button__horizontal {
--vertical-offset: calc(var(--offset) * -1);
border-top: var(--border-size) solid currentcolor;
border-bottom: var(--border-size) solid currentcolor;
}
.button__horizontal::before {
top: calc(var(--vertical-offset) - var(--border-size));
bottom: calc(var(--vertical-offset) - var(--border-size));
left: calc(var(--vertical-offset) * -1);
right: calc(var(--vertical-offset) * -1);
}
.button:hover .button__horizontal {
transform: scaleX(0);
}
.button__vertical {
--horizontal-offset: calc(var(--offset) * -1);
border-left: var(--border-size) solid currentcolor;
border-right: var(--border-size) solid currentcolor;
}
.button__vertical::before {
top: calc(var(--horizontal-offset) * -1);
bottom: calc(var(--horizontal-offset) * -1);
left: calc(var(--horizontal-offset) - var(--border-size));
right: calc(var(--horizontal-offset) - var(--border-size));
}
.button:hover .button__vertical {
transform: scaleY(0);
}
/*------------------------------------------------------------
|
| 6.6 ARROW
|
------------------------------------------------------------*/
.arrow {
top: 75%;
position: absolute;
text-align: center;
}
.arrow.fade.appear {
opacity: 1;
animation: fadeIn 3s, bounce 2.5s infinite;
}
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2.5s infinite;
}
/*--------------------------------------------------------------
7.0 MAIN
--------------------------------------------------------------*/
/*------------------------------------------------------------
|
| 7.1 HEADER
|
------------------------------------------------------------*/
.header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3rem;
padding: 5vh 1rem 8vh;
}
.header-text {
font-size: 7rem;
}
.header-description {
padding: 0 1rem;
font-size: 1.5rem;
}
.header span {
line-height: 100%;
letter-spacing: -.02em;
}
.header-text,
.header h2 {
animation: fadeIn 3s;
}
.header-description {
font-size: 100%;
text-align: center;
}
.sub-header {
font-size: larger;
animation: fadeIn 3s;
padding: 5vh 5vh 0vh;
display: flex;
align-items: center;
justify-content: center;
}
/*------------------------------------------------------------
|
| 7.2 BODY
|
------------------------------------------------------------*/
.body-container {
display: flex;
justify-content: space-evenly;
gap: 2rem;
background-color: var(--white);
transition: ease-in-out 1s;
}
.slide {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.form {
padding: 3rem;
}
/*--------------------------------------------------------------
8.0 MEDIA
--------------------------------------------------------------*/
@media (min-width: 800px) {
.header-text {
font-size: 7rem;
}
.header-description {
font-size: 1.5rem;
}
.nav-resources > ul {
flex-direction: column;
padding: 3px 5px 5px 0px;
border: 3px solid var(--darkest);
background-color: var(--white);
}
.nav-resources li {
padding: 3px 5px 3px 10px;
}
.nav-resources ul li a {
font-size: 90%;
}
.nav-resources {
position: absolute;
opacity: 0;
top: 110px;
margin-left: -48px;
z-index: 1;
}
.resources-button:hover .nav-resources {
display: flex;
opacity: 1;
}
.resources-button:hover .navbar-item {
color: orange;
}
.subcategory-button.active .nav-subcategory {
display: flex;
opacity: 1;
}
.subcategory-button.active ul {
padding-top: 5px;
border: none;
}
.subcategory-button.active > a {
position: relative;
z-index: 1;
border-bottom: 3px solid orange;
}
.subcategory-button.active div ul li a:hover {
color: orange;
}
}
@media (max-width: 1000px) {
.header-text {
font-size: 5rem;
}
.header-description {
font-size: 1.5rem;
}
.body-container {
flex-direction: column;
}
.arrow {
opacity: 1;
animation: fadeIn 3s, bounce 2.5s infinite;
}
}
@media (max-width: 800px) {
#month {
width: 150px;
}
.toggle-button {
display: flex;
margin-right: 35px;
}
.navbar ul {
padding: 4vh 0 4vh 35px;
}
.nav-container {
flex-direction: column;
}
.navbar {
justify-content: space-between;
align-items: center;
height: 100px;
}
.navbar-items {
display: none;
background-color: var(--dark);
width: 100%;
align-items: center;
flex-direction: column;
margin-right: 0px;
padding: 5px 0 5px 0;
}
.navbar-items ul {
width: 100%;
flex-direction: column;
margin-right: 0px;
}
.nav-resources ul {
background-color: var(--light);
}
.nav-subcategory > ul {
background-color: var(--darkest);
}
.navbar-items.active {
display: flex;
padding: 5px 0 5px 0;
}
.navbar-items li {
font-size: 1rem;
padding: 1vh 0vh;
text-align: center;
}
.navbar-items li:nth-last-child(1) {
padding-right: 0vh;
}
.navbar-items.active {
position: static;
display: flex;
}
.resources-button {
width: 100%;
padding: 0;
}
.resources-button:hover .projects ul {
opacity: 1;
visibility: visible;
transition: all 0.3s ease 0s;
}
.nav-resources ul {
display: flex;
flex-direction: column;
margin-top: 1.8vh;
}
.nav-resources li {
width: 100%;
padding: 7px 0;
}
.nav-resources li a {
padding: 10px 10px;
font-size: 0.9rem;
}
.navbar-items li a {
color: var(--white);
}
.navbar-items li a:hover {
color: orange;
}
.nav-resources.active {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.subcategory-button.active .nav-subcategory {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.subcategory-button.active ul {
border: none;
}
.subcategory-button.active div ul li a:hover {
color: var(--white);
}
.header {
margin-bottom: 5rem;
}
.header-text {
font-size: 4.5rem;
}
.header-description {
font-size: 1.2rem;
}
}
@media (max-width: 500px) {
.header {
padding: 3vh 0;
}
.header-text {
font-size: 3.5rem;
}
.header-description {
font-size: 1rem;
}
.text-container {
padding: 5vh 7vh;
}
.sub-header {
font-size: small;
}
.footer {
padding-top: 5vh;
}
.footer p {
font-size: smaller;
}
}
@media (max-height: 600px) {
.form {
padding-top: 6rem;
}
}