diff --git a/assets/titles/ICO.svg b/assets/titles/ICO.svg new file mode 100644 index 0000000..ab3ec60 --- /dev/null +++ b/assets/titles/ICO.svg @@ -0,0 +1 @@ +Initial CoinOffering \ No newline at end of file diff --git a/assets/titles/incoporation BC.svg b/assets/titles/incoporation BC.svg new file mode 100644 index 0000000..fd40b3b --- /dev/null +++ b/assets/titles/incoporation BC.svg @@ -0,0 +1 @@ +Incorporation Blockchain Contract \ No newline at end of file diff --git a/css/main.css b/css/main.css index f636c3b..a2840d9 100644 --- a/css/main.css +++ b/css/main.css @@ -19,6 +19,7 @@ body { --background-color: #F6f6f6; --error-color: red; --green: #007936; + --font-weight-factor: 1; color: rgba(var(--text-color), 1); height: calc(100%); background: var(--background-color); @@ -32,21 +33,19 @@ body[data-theme=dark] { --foreground-color: 20, 20, 20; --background-color: #0a0a0a; --error-color: rgb(255, 106, 106); + --font-weight-factor: 0.9; } body[data-theme=dark] #outlet_switcher { background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1); } -body[data-theme=dark] .outlet__title { - font-weight: 800; +body[data-theme=dark] .outlet-preview { + box-shadow: 0 4rem 3rem -2rem rgba(0, 0, 0, 0.3); } .full-bleed { grid-column: 1/4; } -/* h1, h2, h3, h4, h5{ - font-family: 'Manrope', sans-serif; -} */ .h1 { font-size: 2.5rem; } @@ -76,8 +75,9 @@ body[data-theme=dark] .outlet__title { } p { + font-weight: calc(400 * var(--font-weight-factor)); max-width: 70ch; - line-height: 1.7; + line-height: 1.6; } img { @@ -106,7 +106,7 @@ button { cursor: pointer; outline: none; color: inherit; - font-weight: 500; + font-weight: calc(500 * var(--font-weight-factor)); -webkit-tap-highlight-color: transparent; } @@ -372,20 +372,24 @@ ol[type="1"] { color: rgba(var(--text-color), 0.7); } +.color-0-3 { + color: rgba(var(--text-color), 0.3); +} + .weight-400 { - font-weight: 400; + font-weight: calc(400 * var(--font-weight-factor)); } .weight-500 { - font-weight: 500; + font-weight: calc(500 * var(--font-weight-factor)); } .weight-700 { - font-weight: 700; + font-weight: calc(700 * var(--font-weight-factor)); } .weight-900 { - font-weight: 900; + font-weight: calc(900 * var(--font-weight-factor)); } .popup__header { @@ -488,7 +492,7 @@ ol[type="1"] { .outlet-title { font-size: 1.2rem; - font-weight: 700; + font-weight: calc(700 * var(--font-weight-factor)); margin-bottom: 0.5rem; } @@ -508,7 +512,7 @@ ol[type="1"] { align-items: flex-start; border-radius: 0.2rem; font-size: 1.5rem; - font-weight: 900; + font-weight: calc(900 * var(--font-weight-factor)); background: rgba(var(--foreground-color), 1); } .floor__button--active { @@ -619,11 +623,22 @@ ol[type="1"] { } .line-map__bar { + position: relative; width: 0.1rem; height: 100%; border-radius: 1rem; background: var(--accent-color); } +.line-map__bar::after { + position: absolute; + content: ""; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 0.7rem; + height: 0.2rem; + background-color: var(--accent-color); +} .floor-label { position: absolute; @@ -672,48 +687,42 @@ ol[type="1"] { } .floor__header { - position: sticky; - top: 0; - z-index: 8; + position: relative; + /* position: sticky; + top: 0; + z-index: 8; */ padding: 0.5rem 0; transform: translateY(-0.1rem); background: var(--background-color); -} -.floor__header::before { - content: ""; - position: absolute; - left: -1%; - width: 1%; - height: 100%; - background: var(--background-color); -} -.floor__header::after { - content: ""; - position: absolute; - right: -1%; - width: 1%; - height: 100%; - background: var(--background-color); + /* &::before{ + content: ''; + position: absolute; + left: -1%; + width: 1%; + height: 100%; + background: var(--background-color); + } + &::after{ + content: ''; + position: absolute; + right: -1%; + width: 1%; + height: 100%; + background: var(--background-color); + } */ } .floor__num { display: flex; align-items: center; - font-size: 1.2rem; - font-weight: 700; - color: var(--accent-color); -} -.floor__num::after { - content: ""; - width: 4rem; - height: 0.1rem; - background: var(--accent-color); - margin-left: 0.5rem; + font-size: 1.8rem; + font-weight: calc(900 * var(--font-weight-factor)); + color: rgba(var(--text-color), 0.3); } .floor__title { - font-size: 1.5rem; - font-weight: 800; + font-size: 1.3rem; + font-weight: calc(700 * var(--font-weight-factor)); } .big-icon { @@ -728,65 +737,58 @@ ol[type="1"] { .outlet-preview { position: relative; - align-items: center; display: grid; -} - -.outlet-number { - display: grid; - position: relative; - width: 2rem; - height: 2rem; - aspect-ratio: 1/1; - font-size: 1.3rem; - font-weight: 900; - margin-bottom: 1.5rem; - border-radius: 0.2rem; - place-content: center; - justify-self: flex-start; - background: var(--accent-color); - color: white; - box-shadow: 0.2rem 0.2rem 0 rgba(var(--text-color), 1); -} - -.outlet-preview__info { - position: relative; padding: 1rem; - border-radius: 0.5rem; + align-items: center; + border-radius: 0.7rem; + background-color: rgba(var(--foreground-color), 1); } .outlet__title { - font-weight: 900; + line-height: 1.1; + max-width: 18ch; font-size: 1.8rem; - margin-bottom: 0.8rem; + margin-bottom: 1rem; text-transform: capitalize; + font-weight: calc(900 * var(--font-weight-factor)); +} + +.svg-outlet-title { + height: 4rem; + margin-bottom: 1.5rem; + fill: rgba(var(--text-color), 1); + font-weight: calc(900 * var(--font-weight-factor)); } .outlet__description { color: rgba(var(--text-color), 0.8); } -.outlet-preview__border { - position: absolute; - height: 100%; - width: 100%; - z-index: -1; - border-radius: 0.5rem; - background: var(--background-color); - box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 2rem 3rem -2rem rgba(0, 0, 0, 0.1); -} - .outlet-preview__button { + padding: 0.5rem 0; justify-self: flex-start; - border-radius: 0.2rem; - padding: 0.3rem 1rem; - color: white; - background-color: var(--accent-color); + color: var(--accent-color); + font-weight: calc(700 * var(--font-weight-factor)); } -/* .outlet-preview__carousel{ +.outlet-preview__number { + position: relative; + line-height: 1; + font-size: 8rem; + font-weight: 900; + -webkit-text-stroke: 1rem var(--accent-color); + -webkit-text-fill-color: rgba(var(--foreground-color), 1); } - */ +.outlet-preview__number::after { + content: attr(data-number); + position: absolute; + line-height: 1; + font-size: 8rem; + font-weight: 900; + -webkit-text-stroke: 0; + color: rgba(var(--foreground-color), 1); +} + .label { position: relative; font-size: 0.8rem; @@ -800,25 +802,13 @@ ol[type="1"] { .series-container { gap: 1.5rem; padding-bottom: 1.5rem; - grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } .series-container .bit-bond-series__row, .series-container .bob-fund__row { padding: 1.5rem; } -/* #bit_bond_series__container{ - background: url(../assets/bg/bitbonds-bg.png) bottom right no-repeat, rgba(var(--foreground-color), 1); - background-size: 60%; -} -#bob_fund_investors__container{ - background: url(../assets/bg/bobsfund-bg.png) bottom left no-repeat, rgba(var(--foreground-color), 1); - background-size: 60%; -} -#ico_investors__container{ - background: url(../assets/bg/ico-bg.png) top right no-repeat, rgba(var(--foreground-color), 1); - background-size: 60%; -} */ sm-carousel { position: relative; height: 100%; @@ -866,7 +856,7 @@ sm-carousel { } .percent-gain { - font-weight: 500; + font-weight: calc(500 * var(--font-weight-factor)); color: var(--green); margin-right: 0.5em; } @@ -932,7 +922,7 @@ sm-carousel { font-size: 1rem; padding: 0.4rem 0; flex-shrink: 0; - font-weight: 500; + font-weight: calc(500 * var(--font-weight-factor)); } .outlet_switcher__button--active { color: var(--accent-color) !important; @@ -1005,7 +995,7 @@ scroll-tab-panels > [active] { position: relative; display: flex; align-items: center; - font-weight: 500; + font-weight: calc(500 * var(--font-weight-factor)); margin-right: 0.5rem; padding-right: 1.5rem; } @@ -1023,7 +1013,7 @@ scroll-tab-panels > [active] { opacity: 0.6; flex-shrink: 0; border-radius: 0; - font-weight: 500; + font-weight: calc(500 * var(--font-weight-factor)); font-size: 1.1rem; transition: opacity 0.3s, background-color 0.3s; padding: 0.6rem 0.8rem; @@ -1094,6 +1084,20 @@ scroll-tab-panels > [active] { display: none; } + .outlet-preview { + gap: 1.5rem; + } + + .outlet-preview__number-container { + grid-row: 1/2; + text-align: right; + justify-content: right; + } + + .outlet-preview__number::after { + right: 0; + } + #outlet_switcher { width: calc(100% - 2rem); } @@ -1119,7 +1123,7 @@ scroll-tab-panels > [active] { } } @media only screen and (min-width: 640px) { - .page { + #home_page, .page { grid-template-columns: 1fr 90vw 1fr; } @@ -1179,10 +1183,6 @@ scroll-tab-panels > [active] { grid-column: 1/2; } - #home_page { - grid-template-columns: 1fr 80vw 1fr; - } - .floor__header::before { left: -10%; width: 10%; @@ -1193,17 +1193,34 @@ scroll-tab-panels > [active] { } .outlets-container { - gap: 5rem; + gap: 1.5rem; } .outlet-preview { gap: 1rem; - grid-template-columns: repeat(2, 1fr); + padding: 5rem 4rem; + grid-template-columns: 1.2fr 1fr; + border: 1px solid rgba(0, 0, 0, 0.2); + box-shadow: 0 4rem 3rem -2rem rgba(0, 0, 0, 0.06); + } + .outlet-preview:nth-of-type(even) { + grid-template-columns: 1fr 1.2fr; } .outlet-preview:nth-of-type(even) .outlet-preview__info { grid-column: 2/3; } - .outlet-preview:nth-of-type(even) .outlet-preview__border { + .outlet-preview:nth-of-type(even) .outlet-preview__number-container { + grid-column: 1/2; + grid-row: 1/2; + } + .outlet-preview:nth-of-type(even) .outlet-preview__number::after { + left: 0; + } + .outlet-preview:nth-of-type(odd) .outlet-preview__number-container { + margin-left: auto; + text-align: right; + } + .outlet-preview:nth-of-type(odd) .outlet-preview__number::after { right: 0; } @@ -1211,32 +1228,20 @@ scroll-tab-panels > [active] { grid-auto-flow: column; } - .carousel-holder { - align-self: flex-start; - transform: translateY(-2rem); - z-index: 1; - border-radius: 0.5rem; - } - .carousel-holder--left { - grid-row: 1/2; - grid-column: 1/2; - box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2); - } - .carousel-holder--left ~ .outlet-preview__border { - justify-self: flex-end; - } - .carousel-holder--right { - box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2); - } - - .outlet-preview__border { - width: 66%; - } - - .outlet-preview__info { - padding: 2rem; - } - + /* .carousel-holder{ + align-self: flex-start; + transform: translateY(-2rem); + z-index: 1; + border-radius: 0.5rem; + &--left{ + grid-row: 1/2; + grid-column: 1/2; + box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2); + } + &--right{ + box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2); + } + } */ .outlet-preview__carousel { padding: 2rem 2rem 5rem 2rem; } @@ -1258,8 +1263,8 @@ scroll-tab-panels > [active] { } } @media only screen and (min-width: 1280px) { - .page { - grid-template-columns: 1fr 80vw 1fr; + #home_page, .page { + grid-template-columns: 1fr 85vw 1fr; } .grid-3 { @@ -1269,11 +1274,6 @@ scroll-tab-panels > [active] { width: 100%; } } -@media only screen and (min-width: 1920px) { - .page, #home_page { - grid-template-columns: 1fr 60vw 1fr; - } -} @media (any-hover: hover) { ::-webkit-scrollbar { width: 0.5rem; diff --git a/css/main.min.css b/css/main.min.css index b56cbe4..dae0d40 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -a,button{color:inherit}.bit-bond-series__row,.flow-column{grid-auto-flow:column}.pos-relative,button{position:relative}#floor_list,.bob-fund__row .grid{align-content:flex-start}.interact,.theme-switcher,button{cursor:pointer;-webkit-tap-highlight-color:transparent}* :not(ol){padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto Slab",serif}.button__icon--left,.margin-right-0-5{margin-right:.5rem}:root{font-size:clamp(1rem,1.2vmax,3rem)}body{--accent-color:#E72C37;--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:#007936;color:rgba(var(--text-color),1);height:calc(100%);background:var(--background-color)}body[data-theme=dark]{--accent-color:#ff3949;--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] #outlet_switcher{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1)}body[data-theme=dark] .outlet__title{font-weight:800}.full-bleed{grid-column:1/4}.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,.floor_list__header,.outlet__title{text-transform:capitalize}p{max-width:70ch;line-height:1.7}img{object-fit:cover}a{text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}p a{color:var(--accent-color)}button{overflow:hidden;display:inline-flex;align-items:center;border:none;background:0 0;outline:0;font-weight:500}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{background:var(--accent-color);color:rgba(var(--foreground-color),1)}.accent-color,.floor__num,.outlet-label,.room-button[active]{color:var(--accent-color)}.button--primary .icon{fill:rgba(var(--foreground-color),1)}button:focus-visible{outline:solid rgba(var(--text-color),1)}sm-input,sm-textarea{--border-radius:0.2rem;--background:rgba(var(--text-color), 0.06)}sm-button{--border-radius:0.2rem}sm-tab-header{align-self:flex-start}ul{list-style:none}ol[type="1"]{display:grid;gap:2rem}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr))}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.elevator__header,.popup__header{grid-template-columns:auto 1fr;gap:.5rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.button__icon--right,.margin-left-0-5{margin-left:.5rem}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.elevator__header,.popup__header{align-items:center;display:grid;width:100%}.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,.outlet-number{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.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}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16);pointer-events:none}.interact{position:relative;overflow:hidden}.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),.9)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-.5rem}.button__label{font-size:1rem}.button__icon{height:1.1rem;width:1.1rem}.color-0-9{color:rgba(var(--text-color),.9)}.color-0-8{color:rgba(var(--text-color),.8)}.color-0-7{color:rgba(var(--text-color),.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.popup__header{padding:.5rem 1.5rem 0 1rem}#elevator_popup{position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:15;grid-template-rows:auto 1fr;background:rgba(var(--foreground-color),1)}.elevator__header,.floor_list__header{position:sticky;background:rgba(var(--foreground-color),1);z-index:1}.elevator__header{top:0;padding:1.2rem 1.5rem;justify-content:flex-start}#floor_list{padding:0 1.5rem 4rem;gap:2rem;overflow-y:auto;transform-origin:top}.floor_list__item{display:grid;gap:1.5rem;transform-origin:top}.floor_list__item:last-of-type{padding-bottom:25vh}.floor_list__header{top:0;padding-bottom:.5rem}.outlet-list{gap:2rem;counter-reset:outlet-counter}.floor-list__outlet{display:flex;align-items:center}.floor-list__outlet::before{content:"";width:.4rem;height:1.5rem;margin-right:.5rem;background-color:var(--accent-color)}.outlet-list__item{display:grid;user-select:none;width:min(50ch,100%);counter-increment:outlet-counter}.outlet-list__item .outlet-title::before{content:counter(outlet-counter) ". "}.outlet-list__item .icon{fill:var(--accent-color);flex-shrink:0}.outlet-title{font-size:1.2rem;font-weight:700;margin-bottom:.5rem}.outlet-brief{color:rgba(var(--text-color),.8)}.popup__header__close{padding:.5rem;cursor:pointer}.floor__button{padding:.5rem 0;flex-direction:column;text-align:left;align-items:flex-start;border-radius:.2rem;font-size:1.5rem;font-weight:900;background:rgba(var(--foreground-color),1)}.floor__button--active{background:rgba(var(--text-color),.2);box-shadow:0 0 0 .4rem rgba(var(--text-color),1) inset}.floor-name{margin-top:.2rem;font-size:.8rem}.elevator__floor-line{flex:1;height:.1rem;margin-left:2rem;background-color:var(--accent-color)}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3,1fr)}#elevator_button{justify-self:flex-start;margin-left:-1rem}#elevator_button .icon{width:1.7rem;height:1.7rem}#main_header__logo{height:1.8rem;width:1.8rem}.theme-switcher{position:relative;justify-self:flex-end;width:1.5rem;height:1.5rem}.theme-switcher .icon{position:absolute;transition:transform .6s}.theme-switcher__checkbox{display:none}.theme-switcher__checkbox:checked~.moon-icon{transform:scale(0) rotate(90deg)}.theme-switcher__checkbox:not(:checked)~.sun-icon{transform:scale(0) rotate(-90deg)}.page{position:relative;display:grid;grid-template-columns:1rem 1fr 1rem}#floor_line_map,#home_page{grid-template-columns:2rem 1fr}.page>*{grid-column:2/3}.tag{background:var(--accent-color);padding:.4rem .6rem}#home_page{will-change:scroll-position;overflow-y:auto;max-height:calc(100vh - 5.2rem);scroll-behavior:smooth}#floor_line_map{position:sticky;top:1rem;height:40vh;z-index:10;grid-column:1/2}.line-map{height:100%}.line-map__circle{position:absolute;border-radius:1rem;width:1rem;height:1rem;margin-top:-.7rem;background:rgba(var(--foreground-color),1);border:.2rem solid var(--accent-color);transition:transform .1s linear;z-index:5}.line-map__bar,.outlet-number{background:var(--accent-color)}.line-map__bar{width:.1rem;height:100%;border-radius:1rem}.floor-label{position:absolute;display:flex;align-items:center;left:.2rem;margin-top:-1rem;user-select:none;transition:transform .3s}.floor-circle{position:relative;border-radius:1rem;padding:.8rem}.floor-circle::after{content:"";position:absolute;padding:.3rem;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(var(--text-color),1);border-radius:1rem}.floor-title{opacity:.5;font-size:.9rem;white-space:nowrap;padding:.4rem .6rem;margin-left:1rem;border-radius:.2rem;background:rgba(var(--foreground-color),1);transition:box-shadow .3s,opacity .3s}#floor_container{width:calc(100% - 1rem)}.floor{padding-bottom:3rem;width:100%}.floor__header{position:sticky;top:0;z-index:8;padding:.5rem 0;transform:translateY(-.1rem);background:var(--background-color)}.floor__header::before{content:"";position:absolute;left:-1%;width:1%;height:100%;background:var(--background-color)}.floor__header::after{content:"";position:absolute;right:-1%;width:1%;height:100%;background:var(--background-color)}.floor__num{display:flex;align-items:center;font-size:1.2rem;font-weight:700}.outlet-number,.outlet-preview{display:grid;position:relative}.floor__num::after{content:"";width:4rem;height:.1rem;background:var(--accent-color);margin-left:.5rem}.floor__title{font-size:1.5rem;font-weight:800}.big-icon{height:2rem;width:2rem}.outlets-container{margin:1rem 0;gap:1.5rem}.outlet-preview{align-items:center}.outlet-number{width:2rem;height:2rem;aspect-ratio:1/1;font-size:1.3rem;font-weight:900;border-radius:.2rem;place-content:center;justify-self:flex-start;color:#fff;box-shadow:.2rem .2rem 0 rgba(var(--text-color),1)}.outlet-preview__info{position:relative;padding:1rem;border-radius:.5rem}.outlet__title{font-weight:900;font-size:1.8rem;margin-bottom:.8rem}.outlet__description{color:rgba(var(--text-color),.8)}.outlet-preview__border{position:absolute;height:100%;width:100%;z-index:-1;border-radius:.5rem;background:var(--background-color);box-shadow:0 0 0 1px rgba(var(--text-color),.2) inset,0 2rem 3rem -2rem rgba(0,0,0,.1)}.outlet-preview__button{justify-self:flex-start;border-radius:.2rem;padding:.3rem 1rem;color:#fff;background-color:var(--accent-color)}#outlet_switcher,sm-carousel{background:rgba(var(--foreground-color),1)}.label{position:relative;font-size:.8rem;margin-bottom:.3rem}.value{font-size:1.3rem}.series-container{gap:1.5rem;padding-bottom:1.5rem;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}.grid-2,.investor-card{grid-template-columns:auto 1fr}.series-container .bit-bond-series__row,.series-container .bob-fund__row{padding:1.5rem}sm-carousel{position:relative;height:100%;border-radius:.5rem;padding:1.5rem 1.5rem 4rem;--arrow-left:1.5rem;--arrow-right:1.5rem;--arrow-fill:rgba(var(--text-color), 1);--arrow-background:transparent;--arrow-box-shadow:none;--arrow-bottom:-3.5rem;--indicator-bottom:-2.5rem;--active-indicator-color:var(--accent-color)}.bit-bond-series__row,.bob-fund__row,.investor-card{min-width:100%}.bit-bond-series__row,.bob-fund__row{gap:1rem;border-radius:.5rem;align-items:flex-start;background-color:rgba(var(--foreground-color),1);box-shadow:0 .5rem 1rem -.5rem rgba(0,0,0,.1)}.up-arrow{height:1em;width:1em;fill:var(--green);margin-right:.1em}.percent-gain{font-weight:500;color:var(--green);margin-right:.5em}.percent-gain,.time-elapsed{font-size:.8rem}.time-elapsed{color:rgba(var(--text-color),.8)}.investor-card{align-items:flex-start;grid-template-rows:auto 1fr}.investor-card--small{grid-template-areas:"img ." "para para"}.investor-card--small .investor__image{width:4rem;height:4rem;border-radius:50%}.investor-card--big{grid-template-areas:"img ." "img para"}.investor__image{grid-area:img;width:5rem;border-radius:.5rem}.investor__bio{font-size:.9rem;margin-top:.5rem}.investor__contribution-container{grid-area:para}#outlet_switcher{position:absolute;top:0;padding:1rem;border-radius:.3rem;box-shadow:0 2rem 4rem -1rem rgba(0,0,0,.2);z-index:2}.outlet_switcher__floor{overflow-x:auto}.outlet_switcher__button{display:flex;align-items:center;font-size:1rem;padding:.4rem 0;flex-shrink:0;font-weight:500}.outlet_switcher__button--active{color:var(--accent-color)!important}.outlet_switcher__button:not(:last-of-type)::after{content:"";position:relative;width:4vw;height:.1rem;margin:0 .5rem;background:var(--accent-color)}.outlet-label{display:flex;align-items:center;justify-self:flex-start;margin-bottom:.5rem;font-size:1rem}.outlet-label .icon{fill:var(--accent-color);margin-right:.5rem}scroll-tab-header{--padding:0.5rem 0;--border-radius:0.3rem;--background:transparent}scroll-tab-panels{--gap:1.5rem;--background:transparent;margin-bottom:6rem}scroll-tab-panels>*{opacity:.4;flex-shrink:0;min-width:100%;transition:opacity .6s;align-self:start}scroll-tab-panels>[active]{opacity:1}.auto-grid-layout{justify-content:flex-start;overflow-x:auto}.rooms__header{position:sticky;top:0;z-index:1;display:flex;align-items:center;margin-bottom:1.5rem;background:var(--background-color);box-shadow:0 1rem 1rem -1rem rgba(0,0,0,.2)}.room__label{position:relative;display:flex;align-items:center;font-weight:500;margin-right:.5rem;padding-right:1.5rem}.room__label::after{content:"";position:absolute;height:150%;width:.1rem;right:0;background-color:rgba(var(--text-color),.5)}.room-button{position:relative;opacity:.6;flex-shrink:0;border-radius:0;font-weight:500;font-size:1.1rem;transition:opacity .3s,background-color .3s;padding:.6rem .8rem}.room-button:not(:last-of-type)::after{content:"";height:.1rem;width:4rem;margin-left:1rem;align-self:center;background:var(--accent-color)}.room-button[active]{opacity:1}.room-button[active] .icon{fill:var(--accent-color)}#ico_page__carousel{width:min(36rem,100%);height:max-content}.phase{grid-template-columns:4rem 1fr}.phase:not(:last-of-type) .phase__description{padding-bottom:1.5rem}.phase:last-of-type .progress-bar__line{height:0}.progress-bar__circle,.progress-bar__line{position:absolute;margin-top:1rem;left:50%;transform:translateX(-50%)}.progress-bar__circle{padding:.4rem;background:rgba(var(--foreground-color),1);border:rgba(var(--text-color),1) solid;border-radius:50%;z-index:1}.progress-bar__line{height:100%;width:.1rem;background:rgba(var(--text-color),.9)}.phase__date{margin-top:.3rem}.phase__description{margin-top:1rem}@media only screen and (max-width:640px){.hide-on-mobile{display:none}#outlet_switcher{width:calc(100% - 2rem)}.outlet-hero-section{margin-top:2rem}.series-container{gap:1rem}.outlet-list__item .icon{margin-left:auto}.rooms__header{flex-direction:column;align-items:flex-start}.rooms__header scroll-tab-header{width:calc(100vw - 2rem)}}@media only screen and (min-width:640px){.page{grid-template-columns:1fr 90vw 1fr}.h1{font-size:4rem}.h2{font-size:2.5rem}.h3{font-size:1.5rem}.h4{font-size:1.1rem}#main_header{padding:1.2rem 2rem}#floor_list{gap:8vw;padding:0 8vw 4rem}.floor_list__item{position:relative;grid-template-columns:1fr 1fr;align-items:center;justify-content:center}.floor_list__item .floor_list__header{display:grid}.floor_list__item:not(:last-of-type){padding-bottom:8vw}.floor_list__item:not(:last-of-type)::after{content:"";position:absolute;width:24rem;height:.2rem;bottom:0;background-color:var(--accent-color);justify-self:center}.floor_list__item:nth-of-type(odd) .floor_list__header{text-align:right;grid-column:2/3;grid-row:1/2}.floor_list__item:nth-of-type(odd) .outlet-list{grid-row:1/2;grid-column:1/2}#home_page{grid-template-columns:1fr 80vw 1fr}.floor__header::before{left:-10%;width:10%}.floor__header::after{right:-10%;width:10%}.outlets-container{gap:5rem}.outlet-preview{gap:1rem;grid-template-columns:repeat(2,1fr)}.outlet-preview:nth-of-type(even) .outlet-preview__info{grid-column:2/3}.outlet-preview:nth-of-type(even) .outlet-preview__border{right:0}.bit-bond-series__row{grid-auto-flow:column}.carousel-holder{align-self:flex-start;transform:translateY(-2rem);z-index:1;border-radius:.5rem}.carousel-holder--left{grid-row:1/2;grid-column:1/2;box-shadow:1px .1rem .1rem rgba(0,0,0,.06),-2rem 5rem 4rem -2rem rgba(0,0,0,.2)}.carousel-holder--left~.outlet-preview__border{justify-self:flex-end}.carousel-holder--right{box-shadow:1px .1rem .1rem rgba(0,0,0,.06),2rem 5rem 4rem -2rem rgba(0,0,0,.2)}.outlet-preview__border{width:66%}.outlet-preview__info{padding:2rem}.outlet-preview__carousel{padding:2rem 2rem 5rem}#outlet_switcher{padding:1rem 1.5rem}.outlet-hero-section{margin-top:4rem}.auto-grid-layout{grid-template-columns:auto 1fr}.investor__image{width:8rem}}@media only screen and (min-width:1280px){.page{grid-template-columns:1fr 80vw 1fr}.grid-3{justify-content:center}.grid-3>.grid{width:100%}}@media only screen and (min-width:1920px){#home_page,.page{grid-template-columns:1fr 60vw 1fr}}@media (any-hover:hover){.outlet-list__item .icon,.page-link:hover .icon{fill:var(--accent-color)}::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.page-link{cursor:pointer;transition:color .3s}.page-link:hover{color:var(--accent-color)}.floor__button:hover{background:var(--background-color)}.outlet-list__item .icon{opacity:0;transform-origin:left;transform:translateX(-.5rem);transition:opacity .3s,transform .3s}.outlet-list__item:hover .icon{opacity:1;transform:translateX(0)}} \ No newline at end of file +a,button{color:inherit}.bit-bond-series__row,.flow-column{grid-auto-flow:column}#floor_list,.bob-fund__row .grid{align-content:flex-start}.pos-relative,button{position:relative}.interact,.theme-switcher,button{cursor:pointer;-webkit-tap-highlight-color:transparent}* :not(ol){padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto Slab",serif}.button__icon--left,.margin-right-0-5{margin-right:.5rem}:root{font-size:clamp(1rem,1.2vmax,3rem)}body{--accent-color:#E72C37;--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:#007936;--font-weight-factor:1;color:rgba(var(--text-color),1);height:calc(100%);background:var(--background-color)}body[data-theme=dark]{--accent-color:#ff3949;--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);--font-weight-factor:0.9}body[data-theme=dark] #outlet_switcher{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1)}body[data-theme=dark] .outlet-preview{box-shadow:0 4rem 3rem -2rem rgba(0,0,0,.3)}.full-bleed{grid-column:1/4}.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,.floor_list__header,.outlet__title{text-transform:capitalize}p{font-weight:calc(400 * var(--font-weight-factor));max-width:70ch;line-height:1.6}img{object-fit:cover}a{text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}p a{color:var(--accent-color)}button{overflow:hidden;display:inline-flex;align-items:center;border:none;background:0 0;outline:0;font-weight:calc(500 * var(--font-weight-factor))}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{background:var(--accent-color);color:rgba(var(--foreground-color),1)}.button--primary .icon{fill:rgba(var(--foreground-color),1)}button:focus-visible{outline:solid rgba(var(--text-color),1)}sm-input,sm-textarea{--border-radius:0.2rem;--background:rgba(var(--text-color), 0.06)}sm-button{--border-radius:0.2rem}sm-tab-header{align-self:flex-start}ul{list-style:none}ol[type="1"]{display:grid;gap:2rem}.accent-color{color:var(--accent-color)}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr))}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.elevator__header,.popup__header{grid-template-columns:auto 1fr;gap:.5rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center,.popup__header{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.button__icon--right,.margin-left-0-5{margin-left:.5rem}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.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}.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}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16);pointer-events:none}.interact{position:relative;overflow:hidden}.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),.9)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-.5rem}.button__label{font-size:1rem}.button__icon{height:1.1rem;width:1.1rem}.color-0-9{color:rgba(var(--text-color),.9)}.color-0-8{color:rgba(var(--text-color),.8)}.color-0-7{color:rgba(var(--text-color),.7)}.color-0-3,.floor__num{color:rgba(var(--text-color),.3)}.weight-400{font-weight:calc(400 * var(--font-weight-factor))}.outlet_switcher__button,.percent-gain,.room-button,.room__label,.weight-500{font-weight:calc(500 * var(--font-weight-factor))}.weight-700{font-weight:calc(700 * var(--font-weight-factor))}.weight-900{font-weight:calc(900 * var(--font-weight-factor))}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;width:100%}#elevator_popup{position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:15;grid-template-rows:auto 1fr;background:rgba(var(--foreground-color),1)}.elevator__header,.floor_list__header{position:sticky;background:rgba(var(--foreground-color),1);z-index:1}.elevator__header{top:0;padding:1.2rem 1.5rem;display:grid;align-items:center;justify-content:flex-start;width:100%}#floor_list{padding:0 1.5rem 4rem;gap:2rem;overflow-y:auto;transform-origin:top}.floor_list__item{display:grid;gap:1.5rem;transform-origin:top}.floor_list__item:last-of-type{padding-bottom:25vh}.floor_list__header{top:0;padding-bottom:.5rem}.outlet-list{gap:2rem;counter-reset:outlet-counter}.floor-list__outlet{display:flex;align-items:center}.floor-list__outlet::before{content:"";width:.4rem;height:1.5rem;margin-right:.5rem;background-color:var(--accent-color)}.outlet-list__item{display:grid;user-select:none;width:min(50ch,100%);counter-increment:outlet-counter}.outlet-list__item .outlet-title::before{content:counter(outlet-counter) ". "}.outlet-list__item .icon{fill:var(--accent-color);flex-shrink:0}.outlet-title{font-size:1.2rem;font-weight:calc(700 * var(--font-weight-factor));margin-bottom:.5rem}.floor__button,.floor__num{font-weight:calc(900 * var(--font-weight-factor))}.outlet-brief{color:rgba(var(--text-color),.8)}.popup__header__close{padding:.5rem;cursor:pointer}.floor__button{padding:.5rem 0;flex-direction:column;text-align:left;align-items:flex-start;border-radius:.2rem;font-size:1.5rem;background:rgba(var(--foreground-color),1)}.floor__button--active{background:rgba(var(--text-color),.2);box-shadow:0 0 0 .4rem rgba(var(--text-color),1) inset}.floor-name{margin-top:.2rem;font-size:.8rem}.elevator__floor-line{flex:1;height:.1rem;margin-left:2rem;background-color:var(--accent-color)}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3,1fr)}#elevator_button{justify-self:flex-start;margin-left:-1rem}#elevator_button .icon{width:1.7rem;height:1.7rem}#main_header__logo{height:1.8rem;width:1.8rem}.theme-switcher{position:relative;justify-self:flex-end;width:1.5rem;height:1.5rem}.theme-switcher .icon{position:absolute;transition:transform .6s}.theme-switcher__checkbox{display:none}.theme-switcher__checkbox:checked~.moon-icon{transform:scale(0) rotate(90deg)}.theme-switcher__checkbox:not(:checked)~.sun-icon{transform:scale(0) rotate(-90deg)}.page{position:relative;display:grid;grid-template-columns:1rem 1fr 1rem}#floor_line_map,#home_page{grid-template-columns:2rem 1fr}.page>*{grid-column:2/3}.tag{background:var(--accent-color);padding:.4rem .6rem}#home_page{will-change:scroll-position;overflow-y:auto;max-height:calc(100vh - 5.2rem);scroll-behavior:smooth}#floor_line_map{position:sticky;top:1rem;height:40vh;z-index:10;grid-column:1/2}.line-map{height:100%}.line-map__circle{position:absolute;border-radius:1rem;width:1rem;height:1rem;margin-top:-.7rem;background:rgba(var(--foreground-color),1);border:.2rem solid var(--accent-color);transition:transform .1s linear;z-index:5}.line-map__bar{position:relative;width:.1rem;height:100%;border-radius:1rem;background:var(--accent-color)}.line-map__bar::after{position:absolute;content:"";bottom:0;left:50%;transform:translateX(-50%);width:.7rem;height:.2rem;background-color:var(--accent-color)}.floor-label{position:absolute;display:flex;align-items:center;left:.2rem;margin-top:-1rem;user-select:none;transition:transform .3s}.floor-circle{position:relative;border-radius:1rem;padding:.8rem}.floor-circle::after{content:"";position:absolute;padding:.3rem;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(var(--text-color),1);border-radius:1rem}.floor-title{opacity:.5;font-size:.9rem;white-space:nowrap;padding:.4rem .6rem;margin-left:1rem;border-radius:.2rem;background:rgba(var(--foreground-color),1);transition:box-shadow .3s,opacity .3s}#floor_container{width:calc(100% - 1rem)}.floor{padding-bottom:3rem;width:100%}.floor__header{position:relative;padding:.5rem 0;transform:translateY(-.1rem);background:var(--background-color)}#outlet_switcher,sm-carousel{background:rgba(var(--foreground-color),1)}.floor__num{display:flex;align-items:center;font-size:1.8rem}.floor__title{font-size:1.3rem;font-weight:calc(700 * var(--font-weight-factor))}.outlet__title,.svg-outlet-title{font-weight:calc(900 * var(--font-weight-factor))}.big-icon{height:2rem;width:2rem}.outlets-container{margin:1rem 0;gap:1.5rem}.outlet-preview{position:relative;display:grid;padding:1rem;align-items:center;border-radius:.7rem;background-color:rgba(var(--foreground-color),1)}.outlet__title{line-height:1.1;max-width:18ch;font-size:1.8rem;margin-bottom:1rem}.svg-outlet-title{height:4rem;margin-bottom:1.5rem;fill:rgba(var(--text-color),1)}.outlet__description{color:rgba(var(--text-color),.8)}.outlet-preview__button{padding:.5rem 0;justify-self:flex-start;color:var(--accent-color);font-weight:calc(700 * var(--font-weight-factor))}.outlet-preview__number{position:relative;line-height:1;font-size:8rem;font-weight:900;-webkit-text-stroke:1rem var(--accent-color);-webkit-text-fill-color:rgba(var(--foreground-color),1)}.outlet-preview__number::after{content:attr(data-number);position:absolute;line-height:1;font-size:8rem;font-weight:900;-webkit-text-stroke:0;color:rgba(var(--foreground-color),1)}.label{position:relative;font-size:.8rem;margin-bottom:.3rem}.value{font-size:1.3rem}.series-container{gap:1.5rem;padding-bottom:1.5rem;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}.grid-2,.investor-card{grid-template-columns:auto 1fr}.series-container .bit-bond-series__row,.series-container .bob-fund__row{padding:1.5rem}sm-carousel{position:relative;height:100%;border-radius:.5rem;padding:1.5rem 1.5rem 4rem;--arrow-left:1.5rem;--arrow-right:1.5rem;--arrow-fill:rgba(var(--text-color), 1);--arrow-background:transparent;--arrow-box-shadow:none;--arrow-bottom:-3.5rem;--indicator-bottom:-2.5rem;--active-indicator-color:var(--accent-color)}.bit-bond-series__row,.bob-fund__row,.investor-card{min-width:100%}.bit-bond-series__row,.bob-fund__row{gap:1rem;border-radius:.5rem;align-items:flex-start;background-color:rgba(var(--foreground-color),1);box-shadow:0 .5rem 1rem -.5rem rgba(0,0,0,.1)}.up-arrow{height:1em;width:1em;fill:var(--green);margin-right:.1em}.percent-gain{color:var(--green);margin-right:.5em}.percent-gain,.time-elapsed{font-size:.8rem}.time-elapsed{color:rgba(var(--text-color),.8)}.investor-card{align-items:flex-start;grid-template-rows:auto 1fr}.investor-card--small{grid-template-areas:"img ." "para para"}.investor-card--small .investor__image{width:4rem;height:4rem;border-radius:50%}.investor-card--big{grid-template-areas:"img ." "img para"}.investor__image{grid-area:img;width:5rem;border-radius:.5rem}.investor__bio{font-size:.9rem;margin-top:.5rem}.investor__contribution-container{grid-area:para}#outlet_switcher{position:absolute;top:0;padding:1rem;border-radius:.3rem;box-shadow:0 2rem 4rem -1rem rgba(0,0,0,.2);z-index:2}.outlet_switcher__floor{overflow-x:auto}.outlet_switcher__button{display:flex;align-items:center;font-size:1rem;padding:.4rem 0;flex-shrink:0}.outlet_switcher__button--active{color:var(--accent-color)!important}.outlet_switcher__button:not(:last-of-type)::after{content:"";position:relative;width:4vw;height:.1rem;margin:0 .5rem;background:var(--accent-color)}.outlet-label{display:flex;align-items:center;justify-self:flex-start;color:var(--accent-color);margin-bottom:.5rem;font-size:1rem}.outlet-label .icon{fill:var(--accent-color);margin-right:.5rem}scroll-tab-header{--padding:0.5rem 0;--border-radius:0.3rem;--background:transparent}scroll-tab-panels{--gap:1.5rem;--background:transparent;margin-bottom:6rem}scroll-tab-panels>*{opacity:.4;flex-shrink:0;min-width:100%;transition:opacity .6s;align-self:start}scroll-tab-panels>[active]{opacity:1}.auto-grid-layout{justify-content:flex-start;overflow-x:auto}.rooms__header{position:sticky;top:0;z-index:1;display:flex;align-items:center;margin-bottom:1.5rem;background:var(--background-color);box-shadow:0 1rem 1rem -1rem rgba(0,0,0,.2)}.room__label{position:relative;display:flex;align-items:center;margin-right:.5rem;padding-right:1.5rem}.room__label::after{content:"";position:absolute;height:150%;width:.1rem;right:0;background-color:rgba(var(--text-color),.5)}.room-button{position:relative;opacity:.6;flex-shrink:0;border-radius:0;font-size:1.1rem;transition:opacity .3s,background-color .3s;padding:.6rem .8rem}.room-button:not(:last-of-type)::after{content:"";height:.1rem;width:4rem;margin-left:1rem;align-self:center;background:var(--accent-color)}.room-button[active]{opacity:1;color:var(--accent-color)}.room-button[active] .icon{fill:var(--accent-color)}#ico_page__carousel{width:min(36rem,100%);height:max-content}.phase{grid-template-columns:4rem 1fr}.phase:not(:last-of-type) .phase__description{padding-bottom:1.5rem}.phase:last-of-type .progress-bar__line{height:0}.progress-bar__circle,.progress-bar__line{position:absolute;margin-top:1rem;left:50%;transform:translateX(-50%)}.progress-bar__circle{padding:.4rem;background:rgba(var(--foreground-color),1);border:rgba(var(--text-color),1) solid;border-radius:50%;z-index:1}.progress-bar__line{height:100%;width:.1rem;background:rgba(var(--text-color),.9)}.phase__date{margin-top:.3rem}.phase__description{margin-top:1rem}@media only screen and (max-width:640px){.hide-on-mobile{display:none}.outlet-preview{gap:1.5rem}.outlet-preview__number-container{grid-row:1/2;text-align:right;justify-content:right}.outlet-preview__number::after{right:0}#outlet_switcher{width:calc(100% - 2rem)}.outlet-hero-section{margin-top:2rem}.series-container{gap:1rem}.outlet-list__item .icon{margin-left:auto}.rooms__header{flex-direction:column;align-items:flex-start}.rooms__header scroll-tab-header{width:calc(100vw - 2rem)}}@media only screen and (min-width:640px){#home_page,.page{grid-template-columns:1fr 90vw 1fr}.h1{font-size:4rem}.h2{font-size:2.5rem}.h3{font-size:1.5rem}.h4{font-size:1.1rem}#main_header{padding:1.2rem 2rem}#floor_list{gap:8vw;padding:0 8vw 4rem}.floor_list__item{position:relative;grid-template-columns:1fr 1fr;align-items:center;justify-content:center}.floor_list__item .floor_list__header{display:grid}.floor_list__item:not(:last-of-type){padding-bottom:8vw}.floor_list__item:not(:last-of-type)::after{content:"";position:absolute;width:24rem;height:.2rem;bottom:0;background-color:var(--accent-color);justify-self:center}.floor_list__item:nth-of-type(odd) .floor_list__header{text-align:right;grid-column:2/3;grid-row:1/2}.floor_list__item:nth-of-type(odd) .outlet-list{grid-row:1/2;grid-column:1/2}.floor__header::before{left:-10%;width:10%}.floor__header::after{right:-10%;width:10%}.outlets-container{gap:1.5rem}.outlet-preview{gap:1rem;padding:5rem 4rem;grid-template-columns:1.2fr 1fr;border:1px solid rgba(0,0,0,.2);box-shadow:0 4rem 3rem -2rem rgba(0,0,0,.06)}.outlet-preview:nth-of-type(even){grid-template-columns:1fr 1.2fr}.outlet-preview:nth-of-type(even) .outlet-preview__info{grid-column:2/3}.outlet-preview:nth-of-type(even) .outlet-preview__number-container{grid-column:1/2;grid-row:1/2}.outlet-preview:nth-of-type(even) .outlet-preview__number::after{left:0}.outlet-preview:nth-of-type(odd) .outlet-preview__number-container{margin-left:auto;text-align:right}.outlet-preview:nth-of-type(odd) .outlet-preview__number::after{right:0}.bit-bond-series__row{grid-auto-flow:column}.outlet-preview__carousel{padding:2rem 2rem 5rem}#outlet_switcher{padding:1rem 1.5rem}.outlet-hero-section{margin-top:4rem}.auto-grid-layout{grid-template-columns:auto 1fr}.investor__image{width:8rem}}@media only screen and (min-width:1280px){#home_page,.page{grid-template-columns:1fr 85vw 1fr}.grid-3{justify-content:center}.grid-3>.grid{width:100%}}@media (any-hover:hover){.outlet-list__item .icon,.page-link:hover .icon{fill:var(--accent-color)}::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.page-link{cursor:pointer;transition:color .3s}.page-link:hover{color:var(--accent-color)}.floor__button:hover{background:var(--background-color)}.outlet-list__item .icon{opacity:0;transform-origin:left;transform:translateX(-.5rem);transition:opacity .3s,transform .3s}.outlet-list__item:hover .icon{opacity:1;transform:translateX(0)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 4cdebf1..957bdc8 100644 --- a/css/main.scss +++ b/css/main.scss @@ -17,6 +17,7 @@ body { --background-color: #F6f6f6; --error-color: red; --green: #007936; + --font-weight-factor: 1; color: rgba(var(--text-color), 1); height: calc(100%); background: var(--background-color); @@ -29,11 +30,12 @@ body[data-theme='dark']{ --foreground-color: 20, 20, 20; --background-color: #0a0a0a; --error-color: rgb(255, 106, 106); + --font-weight-factor: 0.9; #outlet_switcher{ background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1); } - .outlet__title{ - font-weight: 800; + .outlet-preview{ + box-shadow: 0 4rem 3rem -2rem rgba(0, 0, 0, 0.3); } } @@ -41,9 +43,6 @@ body[data-theme='dark']{ grid-column: 1/4; } -/* h1, h2, h3, h4, h5{ - font-family: 'Manrope', sans-serif; -} */ .h1{ font-size: 2.5rem; } @@ -68,8 +67,9 @@ body[data-theme='dark']{ } p { + font-weight: calc(400 * var(--font-weight-factor)); max-width: 70ch; - line-height: 1.7; + line-height: 1.6; } img{ @@ -99,7 +99,7 @@ button{ cursor: pointer; outline: none; color: inherit; - font-weight: 500; + font-weight: calc(500 * var(--font-weight-factor)); -webkit-tap-highlight-color: transparent; } .button{ @@ -308,18 +308,21 @@ ol[type="1"]{ .color-0-7{ color: rgba(var(--text-color), 0.7); } +.color-0-3{ + color: rgba(var(--text-color), 0.3); +} .weight-400{ - font-weight: 400; + font-weight: calc(400 * var(--font-weight-factor)); } .weight-500{ - font-weight: 500; + font-weight: calc(500 * var(--font-weight-factor)); } .weight-700{ - font-weight: 700; + font-weight: calc(700 * var(--font-weight-factor)); } .weight-900{ - font-weight: 900; + font-weight: calc(900 * var(--font-weight-factor)); } .popup__header{ @@ -415,7 +418,7 @@ ol[type="1"]{ } .outlet-title{ font-size: 1.2rem; - font-weight: 700; + font-weight: calc(700 * var(--font-weight-factor)); margin-bottom: 0.5rem; } .outlet-brief{ @@ -435,7 +438,7 @@ ol[type="1"]{ align-items: flex-start; border-radius: 0.2rem; font-size: 1.5rem; - font-weight: 900; + font-weight: calc(900 * var(--font-weight-factor)); background: rgba(var(--foreground-color), 1); &--active{ background: rgba(var(--text-color), 0.2); @@ -539,10 +542,21 @@ ol[type="1"]{ z-index: 5; } .line-map__bar{ + position: relative; width: 0.1rem; height: 100%; border-radius: 1rem; background: var(--accent-color); + &::after{ + position: absolute; + content: ''; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 0.7rem; + height: 0.2rem; + background-color: var(--accent-color); + } } .floor-label{ @@ -591,13 +605,14 @@ ol[type="1"]{ } .floor__header{ - position: sticky; + position: relative; +/* position: sticky; top: 0; - z-index: 8; + z-index: 8; */ padding: 0.5rem 0; transform: translateY(-0.1rem); background: var(--background-color); - &::before{ +/* &::before{ content: ''; position: absolute; left: -1%; @@ -612,27 +627,20 @@ ol[type="1"]{ width: 1%; height: 100%; background: var(--background-color); - } + } */ } .floor__num{ display: flex; align-items: center; - font-size: 1.2rem; - font-weight: 700; - color: var(--accent-color); - &::after{ - content: ''; - width: 4rem; - height: 0.1rem; - background: var(--accent-color); - margin-left: 0.5rem; - } + font-size: 1.8rem; + font-weight: calc(900 * var(--font-weight-factor)); + color: rgba(var(--text-color), 0.3); } .floor__title{ - font-size: 1.5rem; - font-weight: 800; + font-size: 1.3rem; + font-weight: calc(700 * var(--font-weight-factor)); } .big-icon{ @@ -647,60 +655,54 @@ ol[type="1"]{ .outlet-preview{ position: relative; - align-items: center; display: grid; -} -.outlet-number{ - display: grid; - position: relative; - width: 2rem; - height: 2rem; - aspect-ratio: 1/1; - font-size: 1.3rem; - font-weight: 900; - margin-bottom: 1.5rem; - border-radius: 0.2rem; - place-content: center; - justify-self: flex-start; - background: var(--accent-color); - color: white; - box-shadow: 0.2rem 0.2rem 0 rgba(var(--text-color), 1); -} -.outlet-preview__info{ - position: relative; padding: 1rem; - border-radius: 0.5rem; + align-items: center; + border-radius: 0.7rem; + background-color: rgba(var(--foreground-color), 1); } .outlet__title{ - font-weight: 900; + line-height: 1.1; + max-width: 18ch; font-size: 1.8rem; - margin-bottom: 0.8rem; + margin-bottom: 1rem; text-transform: capitalize; + font-weight: calc(900 * var(--font-weight-factor)); +} +.svg-outlet-title{ + height: 4rem; + margin-bottom: 1.5rem; + fill: rgba(var(--text-color), 1); + font-weight: calc(900 * var(--font-weight-factor)); } .outlet__description{ color: rgba(var(--text-color), 0.8); } -.outlet-preview__border{ - position: absolute; - height: 100%; - width: 100%; - z-index: -1; - border-radius: 0.5rem; - background: var(--background-color); - box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 2rem 3rem -2rem rgba(0, 0, 0, 0.1); -} .outlet-preview__button{ + padding: 0.5rem 0; justify-self: flex-start; - border-radius: 0.2rem; - padding: 0.3rem 1rem; - // box-shadow: 0 0 0 1px rgba(var(--text-color), 1); - color: white; - background-color: var(--accent-color); + color: var(--accent-color); + font-weight: calc(700 * var(--font-weight-factor)); } -/* .outlet-preview__carousel{ +.outlet-preview__number{ + position: relative; + line-height: 1; + font-size: 8rem; + font-weight: 900; + -webkit-text-stroke: 1rem var(--accent-color); + -webkit-text-fill-color: rgba(var(--foreground-color), 1); + &::after{ + content: attr(data-number); + position: absolute; + line-height: 1; + font-size: 8rem; + font-weight: 900; + -webkit-text-stroke: 0; + color: rgba(var(--foreground-color), 1); + } } - */ + .label{ position: relative; font-size: 0.8rem; @@ -713,24 +715,12 @@ ol[type="1"]{ .series-container{ gap: 1.5rem; padding-bottom: 1.5rem; - grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); .bit-bond-series__row, .bob-fund__row{ padding: 1.5rem; } } -/* #bit_bond_series__container{ - background: url(../assets/bg/bitbonds-bg.png) bottom right no-repeat, rgba(var(--foreground-color), 1); - background-size: 60%; -} -#bob_fund_investors__container{ - background: url(../assets/bg/bobsfund-bg.png) bottom left no-repeat, rgba(var(--foreground-color), 1); - background-size: 60%; -} -#ico_investors__container{ - background: url(../assets/bg/ico-bg.png) top right no-repeat, rgba(var(--foreground-color), 1); - background-size: 60%; -} */ sm-carousel{ position: relative; @@ -779,7 +769,7 @@ sm-carousel{ margin-right: 0.1em; } .percent-gain{ - font-weight: 500; + font-weight: calc(500 * var(--font-weight-factor)); color: var(--green); margin-right: 0.5em; } @@ -838,7 +828,7 @@ sm-carousel{ font-size: 1rem; padding: 0.4rem 0; flex-shrink: 0; - font-weight: 500; + font-weight: calc(500 * var(--font-weight-factor)); &--active{ color: var(--accent-color) !important; } @@ -906,7 +896,7 @@ scroll-tab-panels{ position: relative; display: flex; align-items: center; - font-weight: 500; + font-weight: calc(500 * var(--font-weight-factor)); margin-right: 0.5rem; padding-right: 1.5rem; &::after{ @@ -923,7 +913,7 @@ scroll-tab-panels{ opacity: 0.6; flex-shrink: 0; border-radius: 0; - font-weight: 500; + font-weight: calc(500 * var(--font-weight-factor)); font-size: 1.1rem; transition: opacity 0.3s, background-color 0.3s; padding: 0.6rem 0.8rem; @@ -995,6 +985,17 @@ scroll-tab-panels{ .hide-on-mobile{ display: none; } + .outlet-preview{ + gap: 1.5rem; + } + .outlet-preview__number-container{ + grid-row: 1/2; + text-align: right; + justify-content: right; + } + .outlet-preview__number::after{ + right: 0; + } #outlet_switcher{ width: calc(100% - 2rem); } @@ -1018,7 +1019,7 @@ scroll-tab-panels{ } } @media only screen and (min-width: 640px) { - .page{ + #home_page,.page{ grid-template-columns: 1fr 90vw 1fr; } .h1{ @@ -1073,9 +1074,6 @@ scroll-tab-panels{ } } } - #home_page{ - grid-template-columns: 1fr 80vw 1fr; - } .floor__header{ &::before{ left: -10%; @@ -1087,16 +1085,33 @@ scroll-tab-panels{ } } .outlets-container{ - gap: 5rem; + gap: 1.5rem; } .outlet-preview{ gap: 1rem; - grid-template-columns: repeat(2, 1fr); + padding: 5rem 4rem; + grid-template-columns: 1.2fr 1fr; + border: 1px solid rgba(0, 0, 0, 0.2); + box-shadow: 0 4rem 3rem -2rem rgba(0, 0, 0, 0.06); &:nth-of-type(even){ + grid-template-columns: 1fr 1.2fr; .outlet-preview__info{ grid-column: 2/3; } - .outlet-preview__border{ + .outlet-preview__number-container{ + grid-column: 1/2; + grid-row: 1/2; + } + .outlet-preview__number::after{ + left: 0; + } + } + &:nth-of-type(odd){ + .outlet-preview__number-container{ + margin-left: auto; + text-align: right; + } + .outlet-preview__number::after{ right: 0; } } @@ -1104,7 +1119,7 @@ scroll-tab-panels{ .bit-bond-series__row{ grid-auto-flow: column; } - .carousel-holder{ +/* .carousel-holder{ align-self: flex-start; transform: translateY(-2rem); z-index: 1; @@ -1113,20 +1128,11 @@ scroll-tab-panels{ grid-row: 1/2; grid-column: 1/2; box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2); - & ~ .outlet-preview__border{ - justify-self: flex-end; - } } &--right{ box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2); } - } - .outlet-preview__border{ - width: 66%; - } - .outlet-preview__info{ - padding: 2rem; - } + } */ .outlet-preview__carousel{ padding: 2rem 2rem 5rem 2rem; } @@ -1144,8 +1150,8 @@ scroll-tab-panels{ } } @media only screen and (min-width: 1280px) { - .page{ - grid-template-columns: 1fr 80vw 1fr; + #home_page, .page{ + grid-template-columns: 1fr 85vw 1fr; } .grid-3{ justify-content: center; @@ -1154,11 +1160,6 @@ scroll-tab-panels{ } } } -@media only screen and (min-width: 1920px) { - .page, #home_page{ - grid-template-columns: 1fr 60vw 1fr; - } -} @media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; diff --git a/index.html b/index.html index 0bacbfa..5f2f703 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - + @@ -77,300 +77,7 @@
-
-
-
-

Floor 1

-

- Current Projects -

-
-
- - - - -
-
-
-
-

Floor 2

-

- Blockchain Contracts -

-
-
-

- Blockchain Contracts are one of RanchiMall's flagship innovations. - We believe each blockchain contract will be transformational in its area and will add - tremendously to our enterprise value. -

-
-
-
Outlet no.
-
2
-

Incorporation Blockchain Contract

-

- RanchiMall is incorporated on the blockchain and structured as Incorporation Blockchain Contract. Incorporation Blockchain Contract owns all the other blockchain contracts of RanchiMall. -

- - Visit - -
-
-
-
-
-
Outlet no.
-
1
-

Internship Blockchain Contract

-

- Internship Blockchain Contract tokenizes all our internship initiatives. This is owned by Incorporation Blockchain Contract. -

- - Visit - -
-
-
-
-
-
Outlet no.
-
3
-

FLO Blockchain Contract

-

- FLO Blockchain contract consists of all projects RanchiMall performs on FLO Blockchain (previously called Florincoin). -

- - Visit - -
-
-
-
-
-
-
-

Floor 3

-

- Blockchain Apps -

-
-
-
-
-
Outlet no.
-
1
-

Web Wallet

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum. -

- -
-
-
-
-
-
Outlet no.
-
2
-

FLO Messenger

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum. -

- -
-
-
-
-
-
Outlet no.
-
3
-

Content Collaboration

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum. -

- -
-
-
-
-
-
Outlet no.
-
4
-

RanchiMall Times

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum. -

- -
-
-
-
-
-
-
-

Floor 4

-

- Experimental Ideas -

-
-
-
-
-
Outlet no.
-
1
-

Blockchain Cloud

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum. -

- -
-
-
-
-
-
Outlet no.
-
2
-

UPI on Blockchain

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum. -

- -
-
-
-
-
-
Outlet no.
-
3
-

E-Commerce on Blockchain

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum. -

- -
-
-
-
-
-
-
-

Floor 5

-

- Statistics and Administration -

-
-
-
-
-
Outlet no.
-
1
-

Incorporation

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum. -

- -
-
-
-
-
-
Outlet no.
-
2
-

Team

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum. -

- -
-
-
-
-
-
Outlet no.
-
3
-

Operational Statistics

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum. -

- -
-
-
-
-
-
+
@@ -496,9 +203,9 @@ }) getRef('ico_investors__container').append(frag) } - renderAllIcoInvestors() +/* renderAllIcoInvestors() renderAllSeries() - renderAllFundInvestors() + renderAllFundInvestors() */ function showOutletSwitcher(button){ @@ -568,6 +275,79 @@ }) document.querySelectorAll('.floor').forEach(floor => floorObserver.observe(floor)) + + function renderFloor(obj){ + console.log(obj) + const {floorNo, floor, brief, outlets} = obj + const floorSection = document.createElement('section') + floorSection.classList.add('floor') + floorSection.id = `floor_${floorNo + 1}` + floorSection.innerHTML = ` +
+

Floor ${floorNo + 1}

+

${floor}

+
+
+

${brief}

+
+ ` + floorSection.querySelector(`#floor_${floorNo + 1}__outlets`).append(outlets) + return floorSection; + } + + function renderAllFloors(){ + const frag = document.createDocumentFragment() + siteMap.forEach((floor, floorNo) => { + frag.append(renderFloor({...floor, floorNo, outlets: renderFloorOutlets(floor.outlets)})) + }) + getRef('floor_container').append(frag) + } + renderAllFloors() + + function renderOutletPreview(obj){ + const {outletNo, name, brief, url, isSold} = obj + const preview = document.createElement('section') + preview.classList.add('outlet-preview', 'carousel-container') + let composed = ` +
+

${name}

+

${brief}

+
+ ` + if(isSold){ + composed += ` + + Buy + + ` + } + composed += ` + + Learn more + +
+
+ +
+

Outlet

+

${outletNo + 1}

+
+ ` + preview.innerHTML = composed + return preview; + } + + function renderFloorOutlets(outlets){ + const frag = document.createDocumentFragment() + outlets.forEach((outlet, outletNo) => { + frag.append(renderOutletPreview({...outlet, outletNo})) + }) + return frag + } + + \ No newline at end of file diff --git a/js/index.js b/js/index.js index ab25034..eb73319 100644 --- a/js/index.js +++ b/js/index.js @@ -231,40 +231,55 @@ function throttle(func, delay) { const siteMap = [ { floor: "Current Products", + brief: ``, outlets: [ { name: "Bitcoin Bonds", url: "bitcoinbonds", + brief: `Bondholders get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of all Bitcoin price gains whichever is higher. It offers full capital protection if + Bitcoin prices fall below acquisition price.`, + isSold: true }, { name: `Bob's Fund`, url: `bob'sfund`, + brief: `Bobs Fund is a 20 year long term Bitcoin price linked product. Investors are entitled to 100% of Bitcoin price gains, but they most hold for 20 years.`, + isSold: true }, { name: "Initial Coin Offering", url: "ico", + brief: `The Initial Coin Offering (ICO) of RanchiMall was launched in 2017. It was envisioned to sell 21 million tokens over 14 phases over 3 years.`, + isSold: true }, ], }, { floor: "Blockchain Contracts", + brief: `Blockchain Contracts are one of RanchiMall's flagship innovations. + We believe each blockchain contract will be transformational in its area and will add + tremendously to our enterprise value.`, outlets: [ { name: "Incorporation Blockchain Contract", url: "incorporationblockchaincontract", + brief: `RanchiMall is incorporated on the blockchain and structured as Incorporation Blockchain Contract. Incorporation Blockchain Contract owns all the other blockchain contracts of RanchiMall.` }, { name: `Internship Blockchain Contract`, url: `internshipblockchaincontract`, + brief: `Internship Blockchain Contract tokenizes all our internship initiatives. This is owned by Incorporation Blockchain Contract.` }, { name: "FLO Blockchain Contract", url: "floblockchaincontract", + brief: `FLO Blockchain contract consists of all projects RanchiMall performs on FLO Blockchain (previously called Florincoin).` } ], }, /* { floor: 'Blockchain Apps', + brief: ``, outlets: [ { name: "Web Wallet", @@ -289,6 +304,7 @@ const siteMap = [ }, { floor: 'Experimental Ideas', + brief: ``, outlets: [ { name: "Blockchain Cloud", @@ -306,6 +322,7 @@ const siteMap = [ }, { floor: 'Statistics and Administration', + brief: ``, outlets: [ { name: "Incorporation", @@ -506,7 +523,7 @@ const render = { const li = outletListitemTemplate.content.cloneNode(true).firstElementChild li.querySelector('a').href = `${url}.html` li.querySelector('.outlet-title').textContent = name - li.querySelector('.outlet-brief').textContent = brief ? brief : '' + // li.querySelector('.outlet-brief').textContent = brief ? brief : '' return li }, floorListitem(floorObj, index) { @@ -670,9 +687,9 @@ const outletObserver = new IntersectionObserver( } ); -document +/* document .querySelectorAll(".carousel-container") - .forEach((outlet) => outletObserver.observe(outlet)); + .forEach((outlet) => outletObserver.observe(outlet)); */ let isOutletSwitcherOpen = false; document.addEventListener("click", (e) => { @@ -738,7 +755,6 @@ function renderSiteMap() { for (outlet of floor.outlets) { currentPage = pathArray[pathArray.length - 1] if (pathArray[pathArray.length - 1].includes(outlet.url)) { - console.log(pathArray[pathArray.length - 1], outlet.url) renderFloorOutlets(floor, outlet.url) break; }