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 @@