initial commit

views/styles/main.css

@@ -0,0 +1,425 @@
+@font-face {
+    font-family: "Instrument Sans";
+    src: url("/fonts/InstrumentSans-Regular.ttf");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Instrument Sans";
+    src: url("/fonts/InstrumentSans-SemiBold.ttf");
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Instrument Sans";
+    src: url("/fonts/InstrumentSans-Italic.ttf");
+    font-weight: normal;
+    font-style: italic;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #151316;
+    color: white;
+    font-family: "Instrument Sans", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    font-variation-settings:
+        "wdth" 100;
+}
+
+p {
+    margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
+    font-weight: 600;
+}
+
+h1 {
+    font-size: 64px;
+}
+
+h2 {
+    font-size: 36px;
+}
+
+.font-semibold {
+    font-weight: 600;
+}
+
+.bg-transparent {
+    background-color: transparent;
+}
+
+.bg-\[\#211F23\] {
+    background-color: #211F23;
+}
+
+.bg-\[\#0E0A0E\] {
+    background-color: #0E0A0E;
+}
+
+.bg-\[\#1C1C21\] {
+    background-color: #1C1C21;
+}
+
+.hover\:bg-\[\#29292e\]:hover {
+    background-color: #29292e;
+}
+
+.bg-\[\#151316\] {
+    background-color: #151316;
+}
+
+.bg-\[\#8A42FF\] {
+    background-color: #8A42FF;
+}
+
+.bg-\[\#00000070\] {
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.border-0 {
+    border-width: 0px;
+}
+
+.border {
+    border-style: solid;
+    border-width: 1px;
+}
+
+.border-solid {
+    border-style: solid;
+}
+
+.border-dashed {
+    border-style: dashed;
+}
+
+.border-\[rgb\(86\,86\,91\)\/30\] {
+    border-color: rgba(86, 86, 91, 0.30);
+}
+
+.border-\[\#656565\] {
+    border-color: #656565;
+}
+
+.border-\[\#211F23\] {
+    border-color: #211F23;
+}
+
+.rounded-full {
+    border-radius: 9999px;
+}
+
+.relative {
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.hidden {
+    display: none;
+}
+
+.flex {
+    display: flex;
+}
+
+.grid {
+    display: grid;
+}
+
+.grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.gap-2 {
+    gap: 0.5rem;
+}
+
+.gap-y-3 {
+    row-gap: 0.75rem;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.h-100vh {
+    height: 100vh;
+}
+
+.h-7 {
+    height: 1.752rem;
+}
+
+.h-96 {
+    height: 24rem;
+}
+
+.h-fit {
+    height: fit-content;
+}
+
+.w-64 {
+    width: 16rem;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.w-fit {
+    width: fit-content;
+}
+
+.w-\[700px\] {
+    width: 700px;
+}
+
+.min-w-\[50vw\] {
+    min-width: 50vw;
+}
+
+.max-w-\[80vw\] {
+    max-width: 80vw;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.mr-3 {
+    margin-right: 0.75rem;
+}
+
+.mr-2 {
+    margin-right: 0.5rem;
+}
+
+.my-2 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.p-0\.5 {
+    padding: 0.125rem;
+}
+
+.px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+.px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+}
+
+.px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+.py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+.py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
+.pb-2\.5 {
+    padding-bottom: 0.625rem;
+}
+
+.p-2\.5 {
+    padding: 0.625rem;
+}
+
+.p-4 {
+    padding: 1rem;
+}
+
+.h-2 {
+    height: 2rem;
+}
+
+.w-8\/10 {
+    width: 80%;
+}
+
+.top-0 {
+    top: 0px;
+}
+
+.left-0 {
+    left: 0px;
+}
+
+.bottom-0 {
+    bottom: 0px;
+}
+
+.right-0 {
+    right: 0px;
+}
+
+.top-1 {
+    top: 0.25rem;
+}
+
+.right-1 {
+    right: 0.25rem;
+}
+
+.top-2\.5 {
+    top: 0.625rem;
+}
+
+.left-2\.5 {
+    left: 0.625rem;
+}
+
+.text-\[\#BABABA\] {
+    color: #BABABA;
+}
+
+.text-\[\#D7D7D7\] {
+    color: #D7D7D7;
+}
+
+.text-\[\#656565\] {
+    color: #656565;
+}
+
+.text-white {
+    color: white;
+}
+
+.text-4xl {
+    font-size: 2.25rem;
+}
+
+.underline-none {
+    text-decoration: none;
+}
+
+.underline {
+    text-decoration: underline;
+}
+
+.decoration-dashed {
+    text-decoration-style: dashed;
+}
+
+.text-unset {
+    color: unset;
+}
+
+.text-sm {
+    font-size: 0.875rem;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.rounded-md {
+    border-radius: 0.375rem;
+}
+
+.rounded-xl {
+    border-radius: 0.75rem;
+}
+
+.rounded-2xl {
+    border-radius: 1rem;
+}
+
+.overflow-hidden {
+    overflow: hidden;
+}
+
+.shadow-md {
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+.hover\:shadow-xl:hover {
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
+
+.transition-\[shadow\,transform\] {
+    transition-property: box-shadow,transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+.ease-\[cubic-bezier\(0\.16\,1\,0\.3\,1\)\] {
+    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.capitalize {
+    text-transform: capitalize;
+}
+
+.hover\:-translate-y-1:hover {
+    transform: translateY(-0.25rem);
+}
+
+.object-contain {
+    object-fit: contain;
+}
+
+.object-cover {
+    object-fit: cover;
+}
+
+.select-none {
+    user-select: none;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+input,
+textarea,
+select {
+    color: inherit;
+    font: inherit;
+}
+
+input:focus-visible {
+    outline: none;
+}
+
+input::placeholder {
+    color: #656565;
+    font-style: italic;
+}