diff --git a/css/main.css b/css/main.css
index f6e9c5f..40fbed0 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
* {
padding: 0;
margin: 0;
@@ -7,7 +6,7 @@
}
:root {
- font-size: clamp(1rem, 1.2vmax, 1.2rem);
+ font-size: clamp(16px, 1.2vmax, 20px);
}
html,
@@ -45,28 +44,40 @@ body[data-theme=dark] sm-input.outlined {
--active-placeholder-color: rgba(var(--text-color), 1);
}
-.full-bleed {
- grid-column: 1/4 !important;
-}
-
.h1 {
- font-size: 2.5rem;
+ font-size: 6rem;
}
.h2 {
- font-size: 2rem;
+ font-size: 4rem;
}
.h3 {
- font-size: 1.4rem;
+ font-size: 3rem;
}
.h4 {
- font-size: 1rem;
+ font-size: 2rem;
}
.h5 {
- font-size: 0.8rem;
+ font-size: 1.5rem;
+}
+
+.h6 {
+ font-size: 1.2rem;
+}
+
+.body-1 {
+ font-size: 1rem;
+}
+
+.body-2 {
+ font-size: 0.85rem;
+}
+
+.full-bleed {
+ grid-column: 1/4 !important;
}
.uppercase {
@@ -80,7 +91,7 @@ body[data-theme=dark] sm-input.outlined {
p {
font-size: 0.8;
max-width: 70ch;
- line-height: 1.5;
+ line-height: 1.7;
color: rgba(var(--text-color), 0.8);
}
@@ -90,94 +101,7 @@ img {
}
a {
- color: inherit;
- text-decoration: none;
-}
-a:focus-visible {
- box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
-}
-
-button {
- position: relative;
- display: inline-flex;
- overflow: hidden;
- align-items: center;
- background: none;
- cursor: pointer;
- outline: none;
- color: inherit;
- font-size: 0.9rem;
- font-weight: 500;
- border-radius: 0.2rem;
- padding: 0.5rem 0.6rem;
- -webkit-tap-highlight-color: transparent;
- border: none;
-}
-
-.button--primary {
- background: var(--accent-color);
- color: white;
-}
-.button--primary .icon {
- fill: rgba(var(--foreground-color), 1);
-}
-
-button:focus-visible {
- outline: rgba(var(--text-color), 1) 0.1rem solid;
-}
-
-a:-webkit-any-link {
- position: relative;
- display: inline-flex;
- align-items: center;
- background: none;
- cursor: pointer;
- outline: none;
- color: inherit;
- font-weight: 500;
- font-size: 0.8rem;
- border-radius: 0.3rem;
- padding: 0.4rem 0.6rem;
- align-self: flex-start;
- text-decoration: none;
- -webkit-tap-highlight-color: transparent;
- border: 1px solid rgba(var(--text-color), 0.8);
-}
-
-a:-moz-any-link {
- position: relative;
- display: inline-flex;
- align-items: center;
- background: none;
- cursor: pointer;
- outline: none;
- color: inherit;
- font-weight: 500;
- font-size: 0.8rem;
- border-radius: 0.3rem;
- padding: 0.4rem 0.6rem;
- align-self: flex-start;
- text-decoration: none;
- -webkit-tap-highlight-color: transparent;
- border: 1px solid rgba(var(--text-color), 0.8);
-}
-
-a:any-link {
- position: relative;
- display: inline-flex;
- align-items: center;
- background: none;
- cursor: pointer;
- outline: none;
- color: inherit;
- font-weight: 500;
- font-size: 0.8rem;
- border-radius: 0.3rem;
- padding: 0.4rem 0.6rem;
- align-self: flex-start;
- text-decoration: none;
- -webkit-tap-highlight-color: transparent;
- border: 1px solid rgba(var(--text-color), 0.8);
+ color: var(--accent-color);
}
a:-webkit-any-link:focus-visible {
@@ -192,6 +116,147 @@ a:any-link:focus-visible {
outline: rgba(var(--text-color), 1) 0.1rem solid;
}
+button,
+.button {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ position: relative;
+ display: inline-flex;
+ border: none;
+ background-color: transparent;
+ overflow: hidden;
+ color: inherit;
+ -webkit-tap-highlight-color: transparent;
+ align-items: center;
+ font-size: 0.9rem;
+ font-weight: 500;
+ white-space: nowrap;
+ padding: 0.8rem;
+ border-radius: 0.3rem;
+ justify-content: center;
+}
+button:focus-visible,
+.button:focus-visible {
+ outline: var(--accent-color) solid medium;
+}
+button:not(:disabled),
+.button:not(:disabled) {
+ cursor: pointer;
+}
+
+.button {
+ background-color: rgba(var(--text-color), 0.02);
+ border: solid thin rgba(var(--text-color), 0.06);
+}
+.button--primary {
+ color: rgba(var(--background-color), 1) !important;
+}
+.button--primary .icon {
+ fill: rgba(var(--background-color), 1);
+}
+.button--danger {
+ color: var(--danger-color);
+}
+.button--danger .icon {
+ fill: var(--danger-color);
+}
+.button--primary {
+ background-color: var(--accent-color);
+}
+.button--colored {
+ color: var(--accent-color);
+}
+.button--colored .icon {
+ fill: var(--accent-color);
+}
+.button--small {
+ padding: 0.4rem 0.6rem;
+}
+.button--outlined {
+ border: solid rgba(var(--text-color), 0.3) 0.1rem;
+ background-color: rgba(var(--foreground-color), 1);
+}
+.button--transparent {
+ background-color: transparent;
+}
+
+button:disabled {
+ opacity: 0.5;
+}
+
+a:-webkit-any-link {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ background: none;
+ cursor: pointer;
+ outline: none;
+ color: var(--accent-color);
+ font-weight: 500;
+ font-size: 0.8rem;
+ border-radius: 0.3rem;
+ padding: 0.4rem 0.6rem;
+ align-self: flex-start;
+ text-decoration: none;
+ -webkit-tap-highlight-color: transparent;
+ border: 1px solid var(--accent-color);
+}
+
+a:-moz-any-link {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ background: none;
+ cursor: pointer;
+ outline: none;
+ color: var(--accent-color);
+ font-weight: 500;
+ font-size: 0.8rem;
+ border-radius: 0.3rem;
+ padding: 0.4rem 0.6rem;
+ align-self: flex-start;
+ text-decoration: none;
+ -webkit-tap-highlight-color: transparent;
+ border: 1px solid var(--accent-color);
+}
+
+a:any-link {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ background: none;
+ cursor: pointer;
+ outline: none;
+ color: var(--accent-color);
+ font-weight: 500;
+ font-size: 0.8rem;
+ border-radius: 0.3rem;
+ padding: 0.4rem 0.6rem;
+ align-self: flex-start;
+ text-decoration: none;
+ -webkit-tap-highlight-color: transparent;
+ border: 1px solid var(--accent-color);
+}
+
+a:-webkit-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:-moz-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+.icon {
+ height: 1.2rem;
+ width: 1.2rem;
+ fill: rgba(var(--text-color), 1);
+}
+
sm-input,
sm-textarea {
--border-radius: 0.5rem;
@@ -262,7 +327,7 @@ ul {
align-items: flex-start;
}
-.align-center {
+.align-items-center {
align-items: center;
}
@@ -436,12 +501,6 @@ ul {
display: none;
}
-.icon {
- width: 1.5rem;
- height: 1.5rem;
- fill: rgba(var(--text-color), 0.9);
-}
-
#loading_page,
#error_page {
position: relative;
@@ -678,15 +737,12 @@ ul {
align-items: center;
justify-content: center;
border: none;
- height: 2.2rem;
- width: 2.2rem;
justify-self: flex-end;
border-radius: 50%;
+ padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.16);
}
#profile_button .icon {
- height: 1rem;
- width: 1rem;
fill: white;
}
@@ -704,7 +760,7 @@ ul {
}
#home_page {
- --side-padding: 8vw;
+ --side-padding: 5vw;
display: flex;
flex-direction: column;
padding: 0 max(1rem, var(--side-padding));
@@ -714,7 +770,7 @@ ul {
#homepage__hero-section {
color: white;
padding: 2rem 0 12rem 0;
- margin: 0 calc(-1 * max(1rem, var(--side-padding))) -8rem calc(-1 * max(1rem, var(--side-padding)));
+ margin: 0 calc(-1 * max(1rem, var(--side-padding))) -5.5rem calc(-1 * max(1rem, var(--side-padding)));
background-image: url(../assets/bg-1.svg);
background-color: var(--accent-color);
background-size: cover;
@@ -724,17 +780,28 @@ ul {
}
.fund-list__header {
+ display: flex;
+ align-items: center;
color: white;
align-items: center;
gap: 1rem;
+ margin-bottom: 1rem;
}
#search_investor {
+ position: -webkit-sticky;
+ position: sticky;
+ top: 1rem;
--background: rgba(var(--foreground-color), 1);
+ border: solid thin rgba(var(--text-color), 0.2);
color: rgba(var(--text-color), 1);
- grid-area: search;
- width: min(20rem, 100%);
- justify-self: flex-end;
+ --padding: 1rem;
+ width: min(26rem, 100%);
+ align-self: center;
+ margin-bottom: 1.5rem;
+ border-radius: 0.5rem;
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+ z-index: 1;
}
.label {
@@ -753,6 +820,7 @@ ul {
word-break: break-word;
-webkit-hyphens: auto;
hyphens: auto;
+ min-width: 6rem;
}
.warning-container {
@@ -764,7 +832,8 @@ ul {
}
#fund_list {
- display: grid;
+ display: flex;
+ flex-direction: column;
gap: 1.5rem;
}
@@ -782,30 +851,6 @@ ul {
justify-self: center;
}
-fund-block:first-of-type::before {
- display: inline-flex;
- content: "• Latest Fund";
- padding: 0.4rem 0.8rem;
- font-weight: 700;
- font-size: 1rem;
- color: white;
- background-color: var(--accent-color);
- border-radius: 0.3rem 0.3rem 0 0;
-}
-fund-block:not(:last-of-type)::after {
- display: flex;
- content: "";
- padding: 0.4rem 0;
- font-weight: 700;
- width: 100%;
- background-color: var(--error-color);
- border-radius: 0 0 0.5rem 0.5rem;
-}
-
-.flex-grid {
- grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
-}
-
form {
padding: 1rem;
border-radius: 0.3rem;
@@ -842,13 +887,6 @@ form select option {
margin-bottom: 2rem;
}
-.flex-grid {
- display: grid;
- gap: 1rem;
- justify-content: start;
- grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
-}
-
.fund-placeholder {
gap: 1rem;
padding: 1rem;
@@ -899,11 +937,28 @@ form select option {
opacity: 1;
}
}
-.fund-investor {
+.investors-list {
display: grid;
gap: 1rem;
- padding: 1rem 0;
- background-color: rgba(var(--foreground-color), 1);
+}
+
+.fund-investor {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem;
+ border-radius: 0.5rem;
+ border: solid thin rgba(var(--text-color), 0.2);
+}
+.fund-investor__redeem {
+ background-color: var(--accent-color);
+ border-radius: 3rem;
+ padding: 0.8rem 1.5rem;
+ color: white;
+ filter: saturate(0.8);
+ align-self: flex-start;
}
.transaction-column {
@@ -911,10 +966,6 @@ form select option {
flex-direction: column;
}
-.space-between {
- justify-content: space-between;
-}
-
.fund-block {
border-radius: 0.5rem;
padding: 1rem;
@@ -923,18 +974,30 @@ form select option {
}
.fund-block__details {
- gap: 1.5rem;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2rem 3rem;
}
-.tapout-container,
-.investment-container {
- grid-column: 1/3;
+.start-date {
+ display: flex;
+ align-items: center;
+ margin-bottom: 3rem;
+ background-color: rgba(var(--text-color), 0.06);
+ padding: 0.8rem 1rem;
+ border-radius: 0.5rem;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
}
-
-.investment-container {
- gap: 1.5rem;
- justify-content: flex-start;
- grid-template-columns: 1fr 1fr;
+.start-date::before {
+ content: "";
+ display: inline-block;
+ width: 0.5em;
+ height: 0.5em;
+ margin-right: 0.5rem;
+ border-radius: 50%;
+ background-color: var(--accent-color);
}
.tapout-list {
@@ -953,51 +1016,7 @@ form select option {
justify-self: flex-end;
}
-.investor-group {
- display: grid;
- padding: 0.5rem;
- margin-top: 1.8rem;
- border-radius: 0.3rem;
- box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3);
-}
-
-.investor-group header {
- margin-top: -1.5rem;
- margin-bottom: 0.5rem;
- justify-self: flex-end;
-}
-
-.investor-group > * {
- background-color: rgba(var(--foreground-color), 1);
-}
-
-.investor-group h4 {
- padding: 0 0.5rem;
- margin-left: -0.5rem;
-}
-
-.investor-group__list {
- display: grid;
- gap: 0.8rem;
- grid-template-columns: minmax(0, 1fr);
-}
-
@media only screen and (max-width: 640px) {
- .h1 {
- font-size: 2rem;
- }
- .h2 {
- font-size: 1.8rem;
- }
- .h3 {
- font-size: 1.3rem;
- }
- .h4 {
- font-size: 1rem;
- }
- .h5 {
- font-size: 0.8rem;
- }
#main_header {
grid-template-areas: ". profile-button";
}
@@ -1008,10 +1027,6 @@ form select option {
padding: 2rem 0 20rem 0;
margin-bottom: -16rem;
}
- .fund-list__header {
- grid-template-columns: auto 1fr;
- grid-template-areas: ". ." "search search";
- }
.investor-input {
grid-template-columns: 1fr auto;
grid-template-areas: ". close" ". close";
@@ -1040,30 +1055,20 @@ form select option {
.dropdown__panel {
left: auto;
}
- .fund-list__header {
- grid-template-columns: auto 1fr auto;
- grid-template-areas: ". search .";
- }
.investor-input {
grid-template-columns: 1.5fr 1fr auto;
grid-template-areas: ". . close";
}
.fund-block {
+ padding: 3vw;
+ }
+ .fund-investor {
padding: 1.5rem;
}
- .fund-block__details {
- grid-template-columns: 1fr 1fr;
- }
- .investor-group {
- padding: 0.5rem 1rem;
- }
.justify-self-end {
justify-self: flex-end;
text-align: right;
}
- .investment-container {
- grid-template-columns: auto auto 1fr;
- }
}
@media only screen and (min-width: 1280px) {
.page-layout {
@@ -1072,10 +1077,6 @@ form select option {
.multi-form {
grid-template-columns: 1fr 1fr;
}
- .fund-investor {
- gap: 1.5rem;
- grid-template-columns: 1fr auto;
- }
}
@media (any-hover: hover) {
::-webkit-scrollbar {
diff --git a/css/main.min.css b/css/main.min.css
index 896a4cd..1d363a5 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #2353ff;--light-shade: rgba(var(--text-color), 0.06);--text-color: 17, 17, 17;--text-color-light: 100, 100, 100;--foreground-color: 255, 255, 255;--background-color: #f6f6f6;--error-color: red;--green: #00843b;color:rgba(var(--text-color), 1);background:var(--background-color)}body[data-theme=dark]{--accent-color: #2353ff;--green: #13ff5a;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--background-color: #0a0a0a;--error-color: rgb(255, 106, 106)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}body[data-theme=dark] sm-input.outlined{--active-placeholder-color: rgba(var(--text-color), 1)}.full-bleed{grid-column:1/4 !important}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{font-size:.8;max-width:70ch;line-height:1.5;color:rgba(var(--text-color), 0.8)}img{-o-object-fit:cover;object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button{position:relative;display:inline-flex;overflow:hidden;align-items:center;background:none;cursor:pointer;outline:none;color:inherit;font-size:.9rem;font-weight:500;border-radius:.2rem;padding:.5rem .6rem;-webkit-tap-highlight-color:rgba(0,0,0,0);border:none}.button--primary{background:var(--accent-color);color:#fff}.button--primary .icon{fill:rgba(var(--foreground-color), 1)}button:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-webkit-any-link{position:relative;display:inline-flex;align-items:center;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid rgba(var(--text-color), 0.8)}a:-moz-any-link{position:relative;display:inline-flex;align-items:center;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid rgba(var(--text-color), 0.8)}a:any-link{position:relative;display:inline-flex;align-items:center;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid rgba(var(--text-color), 0.8)}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea{--border-radius: 0.5rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.5rem}ul{list-style:none}.accent-color{color:var(--accent-color)}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.pos-relative{position:relative}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.align-end{align-content:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}#loading_page,#error_page{position:relative;display:grid;height:100%;place-content:center;justify-items:center}.sad-face{height:6rem;margin:1rem;fill:rgba(var(--text-color), 1)}.sad-face .eyes{transform-origin:center;-webkit-animation:blink 1s infinite alternate;animation:blink 1s infinite alternate}.sad-face .face{-webkit-animation:nod 2s 1s;animation:nod 2s 1s}@-webkit-keyframes blink{0%{transform:scaleY(1)}80%{transform:scaleY(1)}100%{transform:scaleY(0)}}@keyframes blink{0%{transform:scaleY(1)}80%{transform:scaleY(1)}100%{transform:scaleY(0)}}@-webkit-keyframes nod{0%{transform:translateX(0)}20%{transform:translateX(-1.5rem)}30%{transform:translateX(1.5rem)}40%{transform:translateX(-1rem)}50%{transform:translateX(1rem)}60%{transform:translateX(-0.7rem)}70%{transform:translateX(0.7rem)}80%{transform:translateX(-0.5rem)}90%{transform:translateX(0.5rem)}100%{transform:translateX(0)}}@keyframes nod{0%{transform:translateX(0)}20%{transform:translateX(-1.5rem)}30%{transform:translateX(1.5rem)}40%{transform:translateX(-1rem)}50%{transform:translateX(1rem)}60%{transform:translateX(-0.7rem)}70%{transform:translateX(0.7rem)}80%{transform:translateX(-0.5rem)}90%{transform:translateX(0.5rem)}100%{transform:translateX(0)}}.page__footer{position:absolute;padding:3rem;bottom:0}#rm_logo{width:auto;height:2rem;fill:rgba(var(--text-color), 1)}#loader{display:flex;position:relative;width:4rem;height:8rem;fill:none;stroke-width:4;stroke-linecap:round;stroke:rgba(var(--text-color), 1)}#loader polyline:nth-of-type(2),#loader polyline:nth-of-type(3),#loader polyline:nth-of-type(4){stroke-dasharray:60;-webkit-animation:loading infinite 1s;animation:loading infinite 1s}@-webkit-keyframes loading{0%{stroke-dashoffset:-60}50%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}@keyframes loading{0%{stroke-dashoffset:-60}50%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}#main_header{position:relative;display:grid;gap:1.5rem;padding:1rem;align-items:center;background-color:var(--accent-color);color:#fff}#main_header__logo{fill:#fff;height:2.4rem;width:2.4rem;margin-left:-0.3rem}.header__company-name{font-weight:500}.header__app-name{font-weight:700;font-size:1.2rem}#current_price{justify-self:flex-start}#usd-rate{display:flex;align-items:center}#usd-rate::before{content:"";width:1px;height:2rem;background-color:#fff;margin-right:1rem}.dropdown{display:flex;justify-content:flex-end;z-index:5}.dropdown__panel{position:absolute;display:grid;left:0;right:0;top:100%;margin:0 1rem;margin-top:.5rem;border-radius:.3rem;grid-template-columns:1fr;justify-content:flex-start;color:rgba(var(--text-color), 1);width:min(24rem,100vw - 2rem);background-color:rgba(var(--foreground-color), 1);box-shadow:0 2rem 2rem -0.5rem rgba(0,0,0,.16)}.dropdown__panel li{padding:1rem}#profile_button{align-items:center;justify-content:center;border:none;height:2.2rem;width:2.2rem;justify-self:flex-end;border-radius:50%;background-color:rgba(0,0,0,.16)}#profile_button .icon{height:1rem;width:1rem;fill:#fff}#theme_switcher{overflow:hidden;width:100%}.page-layout{display:grid;grid-template-columns:1rem minmax(0, 1fr) 1rem}.page-layout>*{grid-column:2/3}#home_page{--side-padding: 8vw;display:flex;flex-direction:column;padding:0 max(1rem,var(--side-padding));padding-bottom:6rem}#homepage__hero-section{color:#fff;padding:2rem 0 12rem 0;margin:0 calc(-1*max(1rem,var(--side-padding))) -8rem calc(-1*max(1rem,var(--side-padding)));background-image:url(../assets/bg-1.svg);background-color:var(--accent-color);background-size:cover}#homepage__hero-section p{color:rgba(255,255,255,.8)}.fund-list__header{color:#fff;align-items:center;gap:1rem}#search_investor{--background: rgba(var(--foreground-color), 1);color:rgba(var(--text-color), 1);grid-area:search;width:min(20rem,100%);justify-self:flex-end}.label{font-weight:500;font-size:.85rem;margin-bottom:.3rem;color:rgba(var(--text-color), 0.8)}.value{font-weight:700;font-size:1rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.warning-container{padding:1rem;margin-bottom:1rem;border-radius:.3rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}#fund_list{display:grid;gap:1.5rem}#fund_list__empty-state{padding:4rem 0;border-radius:.3rem;place-content:center;margin-bottom:3rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}#fund_list__empty-state .icon--big{height:6rem;width:6rem;justify-self:center}fund-block:first-of-type::before{display:inline-flex;content:"• Latest Fund";padding:.4rem .8rem;font-weight:700;font-size:1rem;color:#fff;background-color:var(--accent-color);border-radius:.3rem .3rem 0 0}fund-block:not(:last-of-type)::after{display:flex;content:"";padding:.4rem 0;font-weight:700;width:100%;background-color:var(--error-color);border-radius:0 0 .5rem .5rem}.flex-grid{grid-template-columns:repeat(auto-fill, minmax(24rem, 1fr))}form{padding:1rem;border-radius:.3rem;width:min(32rem,100%);margin-bottom:3rem;background:rgba(var(--foreground-color), 1)}form input{display:inline-flex;color:inherit;font-family:inherit;padding:.6rem;border:none;box-shadow:0 0 0 1px rgba(var(--text-color), 0.3);background-color:rgba(var(--text-color), 0.06);flex:1}form select option{color:inherit;background-color:rgba(var(--text-color), 0.1)}.investor-input{gap:.5rem}.remove-investor{grid-area:close}#term_details,#fund_details{line-height:1.7;margin-bottom:2rem}.flex-grid{display:grid;gap:1rem;justify-content:start;grid-template-columns:repeat(auto-fill, minmax(9rem, 1fr))}.fund-placeholder{gap:1rem;padding:1rem;border-radius:.3rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}.fund-placeholder .placeholder__block:first-of-type{width:min(24rem,100%)}.fund-placeholder:nth-of-type(2) .placeholder__block{-webkit-animation-delay:.3s;animation-delay:.3s}.fund-placeholder:nth-of-type(3) .placeholder__block{-webkit-animation-delay:.6s;animation-delay:.6s}.fund-placeholder:nth-of-type(4) .placeholder__block{-webkit-animation-delay:.8s;animation-delay:.8s}.placeholder__block{display:flex;border-radius:.3rem;min-width:9rem;padding:1.2rem 1rem;-webkit-animation:pulse alternate .6s ease infinite;animation:pulse alternate .6s ease infinite;background-color:rgba(var(--text-color), 0.1)}@-webkit-keyframes pulse{from{opacity:.4}to{opacity:1}}@keyframes pulse{from{opacity:.4}to{opacity:1}}.fund-investor{display:grid;gap:1rem;padding:1rem 0;background-color:rgba(var(--foreground-color), 1)}.transaction-column{display:flex;flex-direction:column}.space-between{justify-content:space-between}.fund-block{border-radius:.5rem;padding:1rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}.fund-block__details{gap:1.5rem}.tapout-container,.investment-container{grid-column:1/3}.investment-container{gap:1.5rem;justify-content:flex-start;grid-template-columns:1fr 1fr}.tapout-list{display:grid;gap:1.5rem;overflow-x:auto;grid-auto-flow:column;justify-content:flex-start}.tapout-list li{min-width:8rem}.fund-link{justify-self:flex-end}.investor-group{display:grid;padding:.5rem;margin-top:1.8rem;border-radius:.3rem;box-shadow:0 0 0 1px rgba(var(--text-color), 0.3)}.investor-group header{margin-top:-1.5rem;margin-bottom:.5rem;justify-self:flex-end}.investor-group>*{background-color:rgba(var(--foreground-color), 1)}.investor-group h4{padding:0 .5rem;margin-left:-0.5rem}.investor-group__list{display:grid;gap:.8rem;grid-template-columns:minmax(0, 1fr)}@media only screen and (max-width: 640px){.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.h5{font-size:.8rem}#main_header{grid-template-areas:". profile-button"}#main_header .dropdown{grid-area:profile-button}#homepage__hero-section{padding:2rem 0 20rem 0;margin-bottom:-16rem}.fund-list__header{grid-template-columns:auto 1fr;grid-template-areas:". ." "search search"}.investor-input{grid-template-columns:1fr auto;grid-template-areas:". close" ". close"}.fund-link{grid-column:2/3}}@media only screen and (min-width: 640px){#main_header{padding:2rem calc(5vw - .4rem);grid-template-columns:auto 1fr auto}#main_header::after{height:5rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.value{min-width:9rem}#current_price{justify-self:flex-end}.dropdown__panel{left:auto}.fund-list__header{grid-template-columns:auto 1fr auto;grid-template-areas:". search ."}.investor-input{grid-template-columns:1.5fr 1fr auto;grid-template-areas:". . close"}.fund-block{padding:1.5rem}.fund-block__details{grid-template-columns:1fr 1fr}.investor-group{padding:.5rem 1rem}.justify-self-end{justify-self:flex-end;text-align:right}.investment-container{grid-template-columns:auto auto 1fr}}@media only screen and (min-width: 1280px){.page-layout{grid-template-columns:1fr 90vw 1fr}.multi-form{grid-template-columns:1fr 1fr}.fund-investor{gap:1.5rem;grid-template-columns:1fr auto}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(16px,1.2vmax,20px)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #2353ff;--light-shade: rgba(var(--text-color), 0.06);--text-color: 17, 17, 17;--text-color-light: 100, 100, 100;--foreground-color: 255, 255, 255;--background-color: #f6f6f6;--error-color: red;--green: #00843b;color:rgba(var(--text-color), 1);background:var(--background-color)}body[data-theme=dark]{--accent-color: #2353ff;--green: #13ff5a;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--background-color: #0a0a0a;--error-color: rgb(255, 106, 106)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}body[data-theme=dark] sm-input.outlined{--active-placeholder-color: rgba(var(--text-color), 1)}.h1{font-size:6rem}.h2{font-size:4rem}.h3{font-size:3rem}.h4{font-size:2rem}.h5{font-size:1.5rem}.h6{font-size:1.2rem}.body-1{font-size:1rem}.body-2{font-size:.85rem}.full-bleed{grid-column:1/4 !important}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{font-size:.8;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}img{-o-object-fit:cover;object-fit:cover}a{color:var(--accent-color)}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}button,.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.02);border:solid thin rgba(var(--text-color), 0.06)}.button--primary{color:rgba(var(--background-color), 1) !important}.button--primary .icon{fill:rgba(var(--background-color), 1)}.button--danger{color:var(--danger-color)}.button--danger .icon{fill:var(--danger-color)}.button--primary{background-color:var(--accent-color)}.button--colored{color:var(--accent-color)}.button--colored .icon{fill:var(--accent-color)}.button--small{padding:.4rem .6rem}.button--outlined{border:solid rgba(var(--text-color), 0.3) .1rem;background-color:rgba(var(--foreground-color), 1)}.button--transparent{background-color:rgba(0,0,0,0)}button:disabled{opacity:.5}a:-webkit-any-link{position:relative;display:inline-flex;align-items:center;background:none;cursor:pointer;outline:none;color:var(--accent-color);font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid var(--accent-color)}a:-moz-any-link{position:relative;display:inline-flex;align-items:center;background:none;cursor:pointer;outline:none;color:var(--accent-color);font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid var(--accent-color)}a:any-link{position:relative;display:inline-flex;align-items:center;background:none;cursor:pointer;outline:none;color:var(--accent-color);font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid var(--accent-color)}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}.icon{height:1.2rem;width:1.2rem;fill:rgba(var(--text-color), 1)}sm-input,sm-textarea{--border-radius: 0.5rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.5rem}ul{list-style:none}.accent-color{color:var(--accent-color)}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.pos-relative{position:relative}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-items-center{align-items:center}.align-end{align-content:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}#loading_page,#error_page{position:relative;display:grid;height:100%;place-content:center;justify-items:center}.sad-face{height:6rem;margin:1rem;fill:rgba(var(--text-color), 1)}.sad-face .eyes{transform-origin:center;-webkit-animation:blink 1s infinite alternate;animation:blink 1s infinite alternate}.sad-face .face{-webkit-animation:nod 2s 1s;animation:nod 2s 1s}@-webkit-keyframes blink{0%{transform:scaleY(1)}80%{transform:scaleY(1)}100%{transform:scaleY(0)}}@keyframes blink{0%{transform:scaleY(1)}80%{transform:scaleY(1)}100%{transform:scaleY(0)}}@-webkit-keyframes nod{0%{transform:translateX(0)}20%{transform:translateX(-1.5rem)}30%{transform:translateX(1.5rem)}40%{transform:translateX(-1rem)}50%{transform:translateX(1rem)}60%{transform:translateX(-0.7rem)}70%{transform:translateX(0.7rem)}80%{transform:translateX(-0.5rem)}90%{transform:translateX(0.5rem)}100%{transform:translateX(0)}}@keyframes nod{0%{transform:translateX(0)}20%{transform:translateX(-1.5rem)}30%{transform:translateX(1.5rem)}40%{transform:translateX(-1rem)}50%{transform:translateX(1rem)}60%{transform:translateX(-0.7rem)}70%{transform:translateX(0.7rem)}80%{transform:translateX(-0.5rem)}90%{transform:translateX(0.5rem)}100%{transform:translateX(0)}}.page__footer{position:absolute;padding:3rem;bottom:0}#rm_logo{width:auto;height:2rem;fill:rgba(var(--text-color), 1)}#loader{display:flex;position:relative;width:4rem;height:8rem;fill:none;stroke-width:4;stroke-linecap:round;stroke:rgba(var(--text-color), 1)}#loader polyline:nth-of-type(2),#loader polyline:nth-of-type(3),#loader polyline:nth-of-type(4){stroke-dasharray:60;-webkit-animation:loading infinite 1s;animation:loading infinite 1s}@-webkit-keyframes loading{0%{stroke-dashoffset:-60}50%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}@keyframes loading{0%{stroke-dashoffset:-60}50%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}#main_header{position:relative;display:grid;gap:1.5rem;padding:1rem;align-items:center;background-color:var(--accent-color);color:#fff}#main_header__logo{fill:#fff;height:2.4rem;width:2.4rem;margin-left:-0.3rem}.header__company-name{font-weight:500}.header__app-name{font-weight:700;font-size:1.2rem}#current_price{justify-self:flex-start}#usd-rate{display:flex;align-items:center}#usd-rate::before{content:"";width:1px;height:2rem;background-color:#fff;margin-right:1rem}.dropdown{display:flex;justify-content:flex-end;z-index:5}.dropdown__panel{position:absolute;display:grid;left:0;right:0;top:100%;margin:0 1rem;margin-top:.5rem;border-radius:.3rem;grid-template-columns:1fr;justify-content:flex-start;color:rgba(var(--text-color), 1);width:min(24rem,100vw - 2rem);background-color:rgba(var(--foreground-color), 1);box-shadow:0 2rem 2rem -0.5rem rgba(0,0,0,.16)}.dropdown__panel li{padding:1rem}#profile_button{align-items:center;justify-content:center;border:none;justify-self:flex-end;border-radius:50%;padding:.5rem;background-color:rgba(0,0,0,.16)}#profile_button .icon{fill:#fff}#theme_switcher{overflow:hidden;width:100%}.page-layout{display:grid;grid-template-columns:1rem minmax(0, 1fr) 1rem}.page-layout>*{grid-column:2/3}#home_page{--side-padding: 5vw;display:flex;flex-direction:column;padding:0 max(1rem,var(--side-padding));padding-bottom:6rem}#homepage__hero-section{color:#fff;padding:2rem 0 12rem 0;margin:0 calc(-1*max(1rem,var(--side-padding))) -5.5rem calc(-1*max(1rem,var(--side-padding)));background-image:url(../assets/bg-1.svg);background-color:var(--accent-color);background-size:cover}#homepage__hero-section p{color:rgba(255,255,255,.8)}.fund-list__header{display:flex;align-items:center;color:#fff;align-items:center;gap:1rem;margin-bottom:1rem}#search_investor{position:-webkit-sticky;position:sticky;top:1rem;--background: rgba(var(--foreground-color), 1);border:solid thin rgba(var(--text-color), 0.2);color:rgba(var(--text-color), 1);--padding: 1rem;width:min(26rem,100%);align-self:center;margin-bottom:1.5rem;border-radius:.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.1);z-index:1}.label{font-weight:500;font-size:.85rem;margin-bottom:.3rem;color:rgba(var(--text-color), 0.8)}.value{font-weight:700;font-size:1rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;min-width:6rem}.warning-container{padding:1rem;margin-bottom:1rem;border-radius:.3rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}#fund_list{display:flex;flex-direction:column;gap:1.5rem}#fund_list__empty-state{padding:4rem 0;border-radius:.3rem;place-content:center;margin-bottom:3rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}#fund_list__empty-state .icon--big{height:6rem;width:6rem;justify-self:center}form{padding:1rem;border-radius:.3rem;width:min(32rem,100%);margin-bottom:3rem;background:rgba(var(--foreground-color), 1)}form input{display:inline-flex;color:inherit;font-family:inherit;padding:.6rem;border:none;box-shadow:0 0 0 1px rgba(var(--text-color), 0.3);background-color:rgba(var(--text-color), 0.06);flex:1}form select option{color:inherit;background-color:rgba(var(--text-color), 0.1)}.investor-input{gap:.5rem}.remove-investor{grid-area:close}#term_details,#fund_details{line-height:1.7;margin-bottom:2rem}.fund-placeholder{gap:1rem;padding:1rem;border-radius:.3rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}.fund-placeholder .placeholder__block:first-of-type{width:min(24rem,100%)}.fund-placeholder:nth-of-type(2) .placeholder__block{-webkit-animation-delay:.3s;animation-delay:.3s}.fund-placeholder:nth-of-type(3) .placeholder__block{-webkit-animation-delay:.6s;animation-delay:.6s}.fund-placeholder:nth-of-type(4) .placeholder__block{-webkit-animation-delay:.8s;animation-delay:.8s}.placeholder__block{display:flex;border-radius:.3rem;min-width:9rem;padding:1.2rem 1rem;-webkit-animation:pulse alternate .6s ease infinite;animation:pulse alternate .6s ease infinite;background-color:rgba(var(--text-color), 0.1)}@-webkit-keyframes pulse{from{opacity:.4}to{opacity:1}}@keyframes pulse{from{opacity:.4}to{opacity:1}}.investors-list{display:grid;gap:1rem}.fund-investor{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border-radius:.5rem;border:solid thin rgba(var(--text-color), 0.2)}.fund-investor__redeem{background-color:var(--accent-color);border-radius:3rem;padding:.8rem 1.5rem;color:#fff;filter:saturate(0.8);align-self:flex-start}.transaction-column{display:flex;flex-direction:column}.fund-block{border-radius:.5rem;padding:1rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}.fund-block__details{display:flex;flex-wrap:wrap;gap:2rem 3rem}.start-date{display:flex;align-items:center;margin-bottom:3rem;background-color:rgba(var(--text-color), 0.06);padding:.8rem 1rem;border-radius:.5rem;width:-webkit-max-content;width:-moz-max-content;width:max-content}.start-date::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.5rem;border-radius:50%;background-color:var(--accent-color)}.tapout-list{display:grid;gap:1.5rem;overflow-x:auto;grid-auto-flow:column;justify-content:flex-start}.tapout-list li{min-width:8rem}.fund-link{justify-self:flex-end}@media only screen and (max-width: 640px){#main_header{grid-template-areas:". profile-button"}#main_header .dropdown{grid-area:profile-button}#homepage__hero-section{padding:2rem 0 20rem 0;margin-bottom:-16rem}.investor-input{grid-template-columns:1fr auto;grid-template-areas:". close" ". close"}.fund-link{grid-column:2/3}}@media only screen and (min-width: 640px){#main_header{padding:2rem calc(5vw - .4rem);grid-template-columns:auto 1fr auto}#main_header::after{height:5rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.value{min-width:9rem}#current_price{justify-self:flex-end}.dropdown__panel{left:auto}.investor-input{grid-template-columns:1.5fr 1fr auto;grid-template-areas:". . close"}.fund-block{padding:3vw}.fund-investor{padding:1.5rem}.justify-self-end{justify-self:flex-end;text-align:right}}@media only screen and (min-width: 1280px){.page-layout{grid-template-columns:1fr 90vw 1fr}.multi-form{grid-template-columns:1fr 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 9ee80bc..551447a 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -5,7 +5,7 @@
font-family: "Roboto", sans-serif;
}
:root {
- font-size: clamp(1rem, 1.2vmax, 1.2rem);
+ font-size: clamp(16px, 1.2vmax, 20px);
}
html,
body {
@@ -39,25 +39,34 @@ body[data-theme="dark"] {
--active-placeholder-color: rgba(var(--text-color), 1);
}
}
+.h1 {
+ font-size: 6rem;
+}
+.h2 {
+ font-size: 4rem;
+}
+.h3 {
+ font-size: 3rem;
+}
+.h4 {
+ font-size: 2rem;
+}
+.h5 {
+ font-size: 1.5rem;
+}
+.h6 {
+ font-size: 1.2rem;
+}
+.body-1 {
+ font-size: 1rem;
+}
+.body-2 {
+ font-size: 0.85rem;
+}
.full-bleed {
grid-column: 1/4 !important;
}
-.h1 {
- font-size: 2.5rem;
-}
-.h2 {
- font-size: 2rem;
-}
-.h3 {
- font-size: 1.4rem;
-}
-.h4 {
- font-size: 1rem;
-}
-.h5 {
- font-size: 0.8rem;
-}
.uppercase {
text-transform: uppercase;
@@ -69,7 +78,7 @@ body[data-theme="dark"] {
p {
font-size: 0.8;
max-width: 70ch;
- line-height: 1.5;
+ line-height: 1.7;
color: rgba(var(--text-color), 0.8);
}
@@ -78,38 +87,81 @@ img {
}
a {
+ color: var(--accent-color);
+}
+
+a:any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+button,
+.button {
+ user-select: none;
+ position: relative;
+ display: inline-flex;
+ border: none;
+ background-color: transparent;
+ overflow: hidden;
color: inherit;
- text-decoration: none;
+ -webkit-tap-highlight-color: transparent;
+ align-items: center;
+ font-size: 0.9rem;
+ font-weight: 500;
+ white-space: nowrap;
+ padding: 0.8rem;
+ border-radius: 0.3rem;
+ justify-content: center;
+
&:focus-visible {
- box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+ outline: var(--accent-color) solid medium;
+ }
+
+ &:not(:disabled) {
+ cursor: pointer;
}
}
-button {
- position: relative;
- display: inline-flex;
- overflow: hidden;
- align-items: center;
- background: none;
- cursor: pointer;
- outline: none;
- color: inherit;
- font-size: 0.9rem;
- font-weight: 500;
- border-radius: 0.2rem;
- padding: 0.5rem 0.6rem;
- -webkit-tap-highlight-color: transparent;
- border: none;
-}
-.button--primary {
- background: var(--accent-color);
- color: white;
- .icon {
- fill: rgba(var(--foreground-color), 1);
+.button {
+ background-color: rgba(var(--text-color), 0.02);
+ border: solid thin rgba(var(--text-color), 0.06);
+ &--primary {
+ color: rgba(var(--background-color), 1) !important;
+
+ .icon {
+ fill: rgba(var(--background-color), 1);
+ }
+ }
+ &--danger {
+ color: var(--danger-color);
+ .icon {
+ fill: var(--danger-color);
+ }
+ }
+
+ &--primary {
+ background-color: var(--accent-color);
+ }
+ &--colored {
+ color: var(--accent-color);
+ .icon {
+ fill: var(--accent-color);
+ }
+ }
+
+ &--small {
+ padding: 0.4rem 0.6rem;
+ }
+
+ &--outlined {
+ border: solid rgba(var(--text-color), 0.3) 0.1rem;
+ background-color: rgba(var(--foreground-color), 1);
+ }
+ &--transparent {
+ background-color: transparent;
}
}
-button:focus-visible {
- outline: rgba(var(--text-color), 1) 0.1rem solid;
+button:disabled {
+ opacity: 0.5;
}
a:any-link {
position: relative;
@@ -118,7 +170,7 @@ a:any-link {
background: none;
cursor: pointer;
outline: none;
- color: inherit;
+ color: var(--accent-color);
font-weight: 500;
font-size: 0.8rem;
border-radius: 0.3rem;
@@ -126,11 +178,16 @@ a:any-link {
align-self: flex-start;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
- border: 1px solid rgba(var(--text-color), 0.8);
+ border: 1px solid var(--accent-color);
}
a:any-link:focus-visible {
outline: rgba(var(--text-color), 1) 0.1rem solid;
}
+.icon {
+ height: 1.2rem;
+ width: 1.2rem;
+ fill: rgba(var(--text-color), 1);
+}
sm-input,
sm-textarea {
@@ -185,7 +242,7 @@ ul {
.align-start {
align-items: flex-start;
}
-.align-center {
+.align-items-center {
align-items: center;
}
.align-end {
@@ -327,11 +384,6 @@ ul {
.observe-empty-state:not(:empty) ~ .empty-state {
display: none;
}
-.icon {
- width: 1.5rem;
- height: 1.5rem;
- fill: rgba(var(--text-color), 0.9);
-}
#loading_page,
#error_page {
@@ -502,14 +554,11 @@ ul {
align-items: center;
justify-content: center;
border: none;
- height: 2.2rem;
- width: 2.2rem;
justify-self: flex-end;
border-radius: 50%;
+ padding: 0.5rem;
background-color: rgba($color: #000000, $alpha: 0.16);
.icon {
- height: 1rem;
- width: 1rem;
fill: white;
}
}
@@ -528,7 +577,7 @@ ul {
}
#home_page {
- --side-padding: 8vw;
+ --side-padding: 5vw;
display: flex;
flex-direction: column;
padding: 0 max(1rem, var(--side-padding));
@@ -537,7 +586,7 @@ ul {
#homepage__hero-section {
color: white;
padding: 2rem 0 12rem 0;
- margin: 0 calc(-1 * max(1rem, var(--side-padding))) -8rem calc(-1 * max(1rem, var(--side-padding)));
+ margin: 0 calc(-1 * max(1rem, var(--side-padding))) -5.5rem calc(-1 * max(1rem, var(--side-padding)));
background-image: url(../assets/bg-1.svg);
background-color: var(--accent-color);
background-size: cover;
@@ -547,17 +596,27 @@ ul {
}
.fund-list__header {
+ display: flex;
+ align-items: center;
color: white;
align-items: center;
gap: 1rem;
+ margin-bottom: 1rem;
}
#search_investor {
+ position: sticky;
+ top: 1rem;
--background: rgba(var(--foreground-color), 1);
+ border: solid thin rgba(var(--text-color), 0.2);
color: rgba(var(--text-color), 1);
- grid-area: search;
- width: min(20rem, 100%);
- justify-self: flex-end;
+ --padding: 1rem;
+ width: min(26rem, 100%);
+ align-self: center;
+ margin-bottom: 1.5rem;
+ border-radius: 0.5rem;
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+ z-index: 1;
}
.label {
@@ -577,6 +636,7 @@ ul {
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
+ min-width: 6rem;
}
.warning-container {
@@ -588,7 +648,8 @@ ul {
}
#fund_list {
- display: grid;
+ display: flex;
+ flex-direction: column;
gap: 1.5rem;
}
@@ -605,36 +666,6 @@ ul {
justify-self: center;
}
}
-
-fund-block {
- &:first-of-type::before {
- display: inline-flex;
- content: "• Latest Fund";
- padding: 0.4rem 0.8rem;
- font-weight: 700;
- font-size: 1rem;
- color: white;
- background-color: var(--accent-color);
- border-radius: 0.3rem 0.3rem 0 0;
- }
- &:not(:last-of-type)::after {
- display: flex;
- content: "";
- // justify-content: center;
- padding: 0.4rem 0;
- font-weight: 700;
- width: 100%;
- // font-size: 0.9rem;
- // color: var(--background-color);
- background-color: var(--error-color);
- border-radius: 0 0 0.5rem 0.5rem;
- }
-}
-
-.flex-grid {
- grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
-}
-
form {
padding: 1rem;
border-radius: 0.3rem;
@@ -669,13 +700,6 @@ form {
line-height: 1.7;
margin-bottom: 2rem;
}
-
-.flex-grid {
- display: grid;
- gap: 1rem;
- justify-content: start;
- grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
-}
.fund-placeholder {
gap: 1rem;
padding: 1rem;
@@ -712,19 +736,32 @@ form {
opacity: 1;
}
}
-.fund-investor {
+.investors-list {
display: grid;
gap: 1rem;
- padding: 1rem 0;
- background-color: rgba(var(--foreground-color), 1);
+}
+.fund-investor {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem;
+ border-radius: 0.5rem;
+ border: solid thin rgba(var(--text-color), 0.2);
+ &__redeem {
+ background-color: var(--accent-color);
+ border-radius: 3rem;
+ padding: 0.8rem 1.5rem;
+ color: white;
+ filter: saturate(0.8);
+ align-self: flex-start;
+ }
}
.transaction-column {
display: flex;
flex-direction: column;
}
-.space-between {
- justify-content: space-between;
-}
.fund-block {
border-radius: 0.5rem;
padding: 1rem;
@@ -732,16 +769,28 @@ form {
box-shadow: 0 1rem 2rem -1rem rgba($color: #000000, $alpha: 0.16);
}
.fund-block__details {
- gap: 1.5rem;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2rem 3rem;
}
-.tapout-container,
-.investment-container {
- grid-column: 1/3;
-}
-.investment-container {
- gap: 1.5rem;
- justify-content: flex-start;
- grid-template-columns: 1fr 1fr;
+
+.start-date {
+ display: flex;
+ align-items: center;
+ margin-bottom: 3rem;
+ background-color: rgba(var(--text-color), 0.06);
+ padding: 0.8rem 1rem;
+ border-radius: 0.5rem;
+ width: max-content;
+ &::before {
+ content: "";
+ display: inline-block;
+ width: 0.5em;
+ height: 0.5em;
+ margin-right: 0.5rem;
+ border-radius: 50%;
+ background-color: var(--accent-color);
+ }
}
.tapout-list {
display: grid;
@@ -756,47 +805,8 @@ form {
.fund-link {
justify-self: flex-end;
}
-.investor-group {
- display: grid;
- padding: 0.5rem;
- margin-top: 1.8rem;
- border-radius: 0.3rem;
- box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3);
-}
-.investor-group header {
- margin-top: -1.5rem;
- margin-bottom: 0.5rem;
- justify-self: flex-end;
-}
-.investor-group > * {
- background-color: rgba(var(--foreground-color), 1);
-}
-.investor-group h4 {
- padding: 0 0.5rem;
- margin-left: -0.5rem;
-}
-.investor-group__list {
- display: grid;
- gap: 0.8rem;
- grid-template-columns: minmax(0, 1fr);
-}
@media only screen and (max-width: 640px) {
- .h1 {
- font-size: 2rem;
- }
- .h2 {
- font-size: 1.8rem;
- }
- .h3 {
- font-size: 1.3rem;
- }
- .h4 {
- font-size: 1rem;
- }
- .h5 {
- font-size: 0.8rem;
- }
#main_header {
grid-template-areas: ". profile-button";
.dropdown {
@@ -807,10 +817,6 @@ form {
padding: 2rem 0 20rem 0;
margin-bottom: -16rem;
}
- .fund-list__header {
- grid-template-columns: auto 1fr;
- grid-template-areas: ". ." "search search";
- }
.investor-input {
grid-template-columns: 1fr auto;
grid-template-areas: ". close" ". close";
@@ -839,30 +845,20 @@ form {
.dropdown__panel {
left: auto;
}
- .fund-list__header {
- grid-template-columns: auto 1fr auto;
- grid-template-areas: ". search .";
- }
.investor-input {
grid-template-columns: 1.5fr 1fr auto;
grid-template-areas: ". . close";
}
.fund-block {
+ padding: 3vw;
+ }
+ .fund-investor {
padding: 1.5rem;
}
- .fund-block__details {
- grid-template-columns: 1fr 1fr;
- }
- .investor-group {
- padding: 0.5rem 1rem;
- }
.justify-self-end {
justify-self: flex-end;
text-align: right;
}
- .investment-container {
- grid-template-columns: auto auto 1fr;
- }
}
@media only screen and (min-width: 1280px) {
.page-layout {
@@ -871,10 +867,6 @@ form {
.multi-form {
grid-template-columns: 1fr 1fr;
}
- .fund-investor {
- gap: 1.5rem;
- grid-template-columns: 1fr auto;
- }
}
@media (any-hover: hover) {
::-webkit-scrollbar {
diff --git a/index.html b/index.html
index 3aac02b..e21cca9 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@