old.css updated

assets/css/main.css

@@ -8,7 +8,9 @@ body {
   height: 100%;
 }
 
-main, textarea, textfield {
+main,
+textarea,
+textfield {
   font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
 }
 
@@ -776,7 +778,8 @@ nav {
   }
 }
 
-textarea, textfield {
+textarea,
+textfield {
   padding: 5px;
   font-size: 0.95rem;
 }

assets/css/old.css

@@ -1,25 +1,35 @@
 @import url("/assets/css/fonts/jost.css");
 @import url("/assets/css/fonts/noto-sans-jp.css");
 @import url("/assets/css/fonts/plus-jarkata-sans.css");
+
 body {
   margin: 0px;
   height: 100%;
 }
-main {
+
+main,
+textarea,
+textfield {
   font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
+}
+
+main {
   margin: 0.75rem;
   height: 100%;
   margin-bottom: 0;
   margin-top: 0;
   min-height: calc(100vh - 10vh);
 }
+
 .main-page {
   max-width: 2300px;
   margin: 0 auto;
 }
+
 hr {
   margin: 2rem 0px;
 }
+
 nav {
   z-index: 4;
   position: -webkit-sticky;
@@ -28,8 +38,7 @@ nav {
 	 */
   top: 10px;
   background-color: #f5f5f5;
-  font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
+  font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
-    --apple-system;
   font-size: 1.25rem;
   padding: 4px;
   margin: 10px;
@@ -39,28 +48,33 @@ nav {
   display: grid;
   grid-template-columns: auto 1fr auto;
 }
+
 nav ul {
   padding-left: 15px;
   list-style-type: none;
   margin: 0px;
   align-content: center;
 }
+
 nav ul li {
   display: inline-block;
   padding-right: 4px;
   vertical-align: middle;
 }
+
 nav ul li p {
   padding-top: 0.4rem;
   vertical-align: middle;
   margin: 0.5rem 1rem;
 }
+
 nav ul img {
   margin-top: 0.25rem;
   height: 1.5rem;
   vertical-align: middle;
   padding-right: 0.3rem;
 }
+
 nav a {
   color: black;
   text-decoration: none;
@@ -71,19 +85,23 @@ nav a {
   -ms-user-select: none;
   user-select: none;
 }
+
 nav .vertical-line {
   width: 0.1rem;
   background-color: black;
   height: 100%;
 }
+
 nav .social {
   font-size: 2.5rem;
   padding-bottom: 0.4rem;
   transition: 0.3s;
 }
+
 nav .social:hover {
   opacity: 50%;
 }
+
 nav .dropdown {
   margin: 0.75rem;
   position: absolute;
@@ -97,6 +115,7 @@ nav .dropdown {
   opacity: 0;
   transition: 0.3s;
 }
+
 .footer {
   font-family: Jost, "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif;
   position: sticky;
@@ -114,11 +133,13 @@ nav .dropdown {
   text-align: center;
   align-content: center;
 }
+
 /*---nav---*/
 .menu {
   padding-top: 0.4rem;
   padding-bottom: 0.8rem;
 }
+
 .menu p {
   background-size: 0% 0.2em;
   background-image: linear-gradient(#000, #000);
@@ -127,11 +148,13 @@ nav .dropdown {
   background-repeat: no-repeat;
   transition: 0.3s ease-in-out;
 }
+
 .menu p:hover,
 .menu .currentpage {
   opacity: 60%;
   background-size: 100% 0.2em;
 }
+
 .burger {
   border: none;
   display: none;
@@ -145,6 +168,7 @@ nav .dropdown {
   border-radius: 12px;
   transition: 0.2s ease-in-out;
 }
+
 .burger span {
   transition: 0.2s ease-in-out;
   box-sizing: border-box;
@@ -152,6 +176,7 @@ nav .dropdown {
   background-color: #000;
   border-radius: 2px;
 }
+
 .burger #hamburger {
   position: absolute;
   height: 100%;
@@ -159,6 +184,7 @@ nav .dropdown {
   top: 0%;
   left: 0%;
 }
+
 .burger #hamburger span {
   width: 70%;
   height: 5%;
@@ -167,15 +193,19 @@ nav .dropdown {
   position: relative;
   margin: 12% 0;
 }
+
 .burger #hamburger span:nth-child(1) {
   transition-delay: 0.2s;
 }
+
 .burger #hamburger span:nth-child(2) {
   transition-delay: 0.3s;
 }
+
 .burger #hamburger span:nth-child(3) {
   transition-delay: 0.4s;
 }
+
 .burger #cross {
   position: absolute;
   height: 100%;
@@ -184,6 +214,7 @@ nav .dropdown {
   left: 1.5%;
   transform: rotate(45deg);
 }
+
 .burger #cross span:nth-child(1) {
   height: 0%;
   width: 5%;
@@ -194,6 +225,7 @@ nav .dropdown {
   transform: translate(-50%);
   transition-delay: 0s;
 }
+
 .burger #cross span:nth-child(2) {
   width: 0%;
   height: 5%;
@@ -202,34 +234,43 @@ nav .dropdown {
   top: 48%;
   transition-delay: 0s;
 }
+
 .burger:hover {
   opacity: 40%;
 }
+
 .burger.open #hamburger span {
   width: 0%;
 }
+
 .burger.open #hamburger span:nth-child(1) {
   transition-delay: 0s;
 }
+
 .burger.open #hamburger span:nth-child(2) {
   transition-delay: 0.1s;
 }
+
 .burger.open #hamburger span:nth-child(3) {
   transition-delay: 0.2s;
 }
+
 .burger.open #cross span:nth-child(1) {
   height: 80%;
   transition-delay: 0.3s;
 }
+
 .burger.open #cross span:nth-child(2) {
   width: 80%;
   transition-delay: 0.3s;
 }
+
 .dropdown {
   display: none;
   overflow: auto;
   max-height: 70vh;
 }
+
 /*---- main ----*/
 .container {
   position: relative;
@@ -238,6 +279,7 @@ nav .dropdown {
   margin: auto;
   margin-top: 1rem;
 }
+
 .carousel {
   z-index: 1;
   width: 100%;
@@ -247,6 +289,7 @@ nav .dropdown {
   position: relative;
   overflow: hidden;
 }
+
 .slider-bg {
   height: 100%;
   width: 100%;
@@ -267,6 +310,7 @@ nav .dropdown {
   border-radius: 0.5rem;
   transform: scale(1.1);
 }
+
 .slider section {
   overflow: hidden;
   z-index: 1;
@@ -279,9 +323,9 @@ nav .dropdown {
   width: 100%;
   height: 100%;
   border-radius: 0.5rem;
-  font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
+  font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
-    --apple-system;
 }
+
 .slider section div {
   color: #fff;
   position: relative;
@@ -292,16 +336,19 @@ nav .dropdown {
   grid-template-rows: 3.5fr 1fr 1fr 5rem;
   grid-template-columns: 1fr auto 1fr;
 }
+
 .slider section h1 {
   font-size: 2rem;
   grid-row-start: 2;
   grid-row-end: 3;
 }
+
 .slider section p {
   font-size: 1.25rem;
   grid-row-start: 3;
   grid-row-end: 4;
 }
+
 .slider section p,
 .slider section h1 {
   width: 60vw;
@@ -310,9 +357,11 @@ nav .dropdown {
   /*|•|*/
   grid-column-end: 3;
 }
+
 .slider:hover {
   cursor: pointer;
 }
+
 .prev,
 .next {
   background-color: rgba(0, 0, 0, 0.3);
@@ -334,12 +383,15 @@ nav .dropdown {
   -ms-user-select: none;
   user-select: none;
 }
+
 .next {
   right: 1rem;
 }
+
 .prev {
   left: 1rem;
 }
+
 .pgctrl {
   font-family: sans-serif, --apple-system;
   z-index: 1;
@@ -366,9 +418,11 @@ nav .dropdown {
   -ms-user-select: none;
   user-select: none;
 }
+
 .control {
   text-align: center;
 }
+
 /* Cards */
 .album-cards {
   margin: auto;
@@ -379,6 +433,7 @@ nav .dropdown {
   grid-template-columns: repeat(auto-fill, 23rem);
   grid-gap: 1rem;
 }
+
 .album-cards .card {
   transition: 0.75s;
   color: black;
@@ -387,6 +442,7 @@ nav .dropdown {
   border-radius: 7px;
   text-decoration: none;
 }
+
 .album-cards .card div {
   z-index: 1;
   position: inherit;
@@ -396,12 +452,15 @@ nav .dropdown {
   border-radius: 7px;
   transition: 0.5s;
 }
+
 .album-cards .card h2 {
   font-size: 1.9rem;
 }
+
 .album-cards .card p {
   font-size: 1.2rem;
 }
+
 .album-cards .card h2,
 .album-cards .card p {
   color: white;
@@ -411,6 +470,7 @@ nav .dropdown {
   opacity: 0;
   transition: 0.5s;
 }
+
 .album-cards .card .bg-img {
   /* background: url(/assets/img/t404_null-logo.png);
 	 */
@@ -419,15 +479,18 @@ nav .dropdown {
   height: 23rem;
   width: 23rem;
 }
+
 .album-cards .card:hover .bg-img {
   filter: blur(5px) brightness(50%);
   -webkit-filter: blur(5px) brightness(50%);
 }
+
 .album-cards .card:hover h2,
 .album-cards .card:hover p {
   filter: none;
   opacity: 1;
 }
+
 .half-image-cards {
   margin: auto;
   margin-bottom: 2.5rem;
@@ -437,6 +500,7 @@ nav .dropdown {
   grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem));
   grid-gap: 1rem;
 }
+
 .half-image-cards .card {
   transition: 0.75s;
   color: black;
@@ -445,6 +509,7 @@ nav .dropdown {
   border-radius: 7px;
   text-decoration: none;
 }
+
 .half-image-cards .card div {
   z-index: 1;
   position: inherit;
@@ -454,12 +519,15 @@ nav .dropdown {
   border-radius: 7px;
   transition: 0.5s;
 }
+
 .half-image-cards .card h2 {
   font-size: 1.9rem;
 }
+
 .half-image-cards .card p {
   font-size: 1.1rem;
 }
+
 .half-image-cards .card h2,
 .half-image-cards .card p {
   /* color: black;
@@ -470,6 +538,7 @@ nav .dropdown {
   opacity: 0;
   transition: 0.5s;
 }
+
 .half-image-cards .card .bg-img {
   /* background: url(/assets/img/t404_null-logo.png);
 	 */
@@ -479,18 +548,21 @@ nav .dropdown {
   height: 30rem;
   width: 30rem;
 }
+
 .half-image-cards .card:hover .bg-img {
   filter: brightness(40%);
   -webkit-filter: brightness(40%);
   width: 8vw;
   border-radius: 7px 0px 0px 7px;
 }
+
 .half-image-cards .card:hover h2,
 .half-image-cards .card:hover p {
   padding: 0.3rem 5vw 0.3rem 10vw;
   filter: none;
   opacity: 1;
 }
+
 .contact-cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, 23rem);
@@ -498,16 +570,19 @@ nav .dropdown {
   justify-content: center;
   padding: 0;
 }
+
 .contact-cards li {
   border-radius: 7px;
   background-color: #ddd;
 }
+
 .topic {
   padding: 1rem;
   font-size: 3rem;
   margin-top: 3vw;
   margin-bottom: 7vw;
 }
+
 .topic a {
   text-decoration: none;
   color: black;
@@ -518,22 +593,27 @@ nav .dropdown {
   background-repeat: no-repeat;
   transition: 0.3s ease-in-out;
 }
+
 .topic a:hover {
   opacity: 70%;
   background-size: 100% 0.2em;
 }
+
 /* overall */
 .icons {
   font-size: 2.25rem;
   font-weight: 500;
 }
+
 @font-face {
   font-family: "NerdFontsSymbols Nerd Font";
   src: url("/assets/fonts/nf-symbols.woff2") format("woff2");
 }
+
 .nf-icons {
   font-family: "NerdFontsSymbols Nerd Font";
 }
+
 /* Releases */
 .release-track {
   background-size: cover;
@@ -544,9 +624,11 @@ nav .dropdown {
   border-radius: 10px;
   border: 1px solid #ddd;
 }
+
 .release-track strong {
   color: #fff;
 }
+
 .release-track .text-box {
   max-width: 1250px;
   margin: 25% auto;
@@ -557,6 +639,7 @@ nav .dropdown {
   border-radius: 7px;
   font-size: 1.2rem;
 }
+
 .release-track .text-box a {
   text-decoration: none;
   color: #fff;
@@ -567,19 +650,23 @@ nav .dropdown {
   background-repeat: no-repeat;
   transition: 0.3s ease-in-out;
 }
+
 .release-track .text-box a:hover {
   color: #ccc;
   background-size: 100% 0.2em;
 }
+
 /* info */
 .info {
   text-decoration: none;
   list-style-type: none;
   font-size: 1.4rem;
 }
+
 .info li {
   padding: 1rem;
 }
+
 .info a {
   text-decoration: none;
   color: #46f;
@@ -590,27 +677,106 @@ nav .dropdown {
   background-repeat: no-repeat;
   transition: 0.3s ease-in-out;
 }
+
 .info a:hover {
   opacity: 70%;
   background-size: 100% 0.2em;
 }
+
 .info .title {
   font-size: 1.6rem;
 }
+
 .subdiv {
   padding: 1rem;
 }
+
 .long-br {
   display: block;
   height: 2rem;
 }
-@media screen and (width >= 1180px) and (width<=1690px) {
+
+.contact-email .inputbox {
+  outline: none;
+  height: 3rem;
+  width: 100%;
+  display: block;
+  background: #efefef;
+  color: black;
+  border: 0px solid #505050;
+  border-radius: 5px;
+  transition: 0.3s;
+  margin-top: 0.5rem;
+}
+
+.contact-email :not(textarea) {
+  text-align: center;
+}
+
+.contact-email .inputbox:hover {
+  background: #dedede;
+}
+
+.contact-email .inputbox:focus {
+  background: #cecece;
+}
+
+.contact-email button {
+  width: 100%;
+  height: 3rem;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.contact-email .formbutton {
+  background: #272727;
+  color: #fff;
+  border: 0px;
+  transition-duration: 300ms;
+  cursor: pointer;
+}
+
+.contact-email .formbutton:hover {
+  background: #727272;
+}
+
+.contact-email .form {
+  border-radius: 5px;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  padding: 4rem 2.5rem;
+  width: 65%;
+  background: #fdfdfd;
+  box-shadow: rgba(50, 50, 50, 0.1) 0px 4px 12px;
+}
+
+.contact-email .error_box {
+  background: #fee;
+  border-radius: 5px;
+  margin: auto;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 1rem 1rem;
+  margin-bottom: 1.5rem;
+}
+
+textarea,
+textfield {
+  padding: 5px;
+  font-size: 0.95rem;
+}
+
+@media screen and (width >=1180px) and (width<=1690px) {
+
   /*if(width<1620px&&width>=1125px)*/
   nav .dropdown .dropdown-social {
     position: relative;
     width: 17.5rem;
     padding: 0rem 0rem;
   }
+
   nav .dropdown .dropdown-social a {
     transition: 0.2s;
     display: flex;
@@ -618,62 +784,78 @@ nav .dropdown {
     border-radius: 7px;
     margin: 0.3rem 0;
   }
+
   nav .dropdown .dropdown-social a:hover {
     background-color: #ddd;
   }
+
   nav .dropdown .dropdown-social strong {
     margin-left: auto;
     margin-right: auto;
     align-content: center;
   }
+
   nav .dropdown .dropdown-social p {
     margin: 0.5rem 0;
   }
+
   nav .dropdown .dropdown-menu {
     display: none;
   }
+
   nav .menu,
   nav .dropdown-open.dropdown,
   nav .dropdown-open.dropdown-social {
     opacity: 1;
     display: initial;
   }
+
   nav .social,
   nav .dropdown-open.dropdown-menu {
     opacity: 0;
     display: none;
   }
+
   nav .burger {
     display: block;
   }
 }
+
 @media screen and (width<1180px) {
+
   /*if(width<1125px)*/
   nav {
     font-size: 1.4rem;
   }
+
   nav ul img {
     height: 2.5rem;
   }
+
   nav .social {
     font-size: 2rem;
   }
+
   nav .burger {
     height: 100px;
     width: 100px;
   }
+
   nav .dropdown .dropdown-social,
   nav .dropdown .dropdown-menu {
     position: relative;
   }
+
   nav .dropdown .dropdown-menu {
     width: 18rem;
     padding: 0rem 0rem;
   }
+
   nav .dropdown .dropdown-social {
     display: flex;
     flex-wrap: wrap;
   }
+
   nav .dropdown .dropdown-menu p,
   nav .dropdown .dropdown-social a {
     transition: 0.2s;
@@ -681,34 +863,42 @@ nav .dropdown {
     border-radius: 7px;
     margin: 0.3rem 0;
   }
+
   nav .dropdown .dropdown-menu p:hover {
     background-color: #ddd;
   }
+
   nav .dropdown .dropdown-social a:hover {
     opacity: 50%;
   }
+
   nav .dropdown hr {
     margin: 0.75rem 0rem;
     padding: 1rem;
     border: 1px solid #aaa;
   }
+
   nav .social-name {
     display: none;
   }
+
   nav .social,
   nav .menu-item {
     display: none;
   }
+
   nav .dropdown-open {
     transition: 0.3s;
     opacity: 1;
     display: initial;
   }
+
   nav .dropdown-open .dropdown,
   nav .dropdown-open .dropdown-social,
   nav .dropdown-open .downdown-menu {
     display: initial;
   }
+
   nav .burger {
     display: block;
   }