From 8a05cceb20731c32591f07925dd30a4cfd8fe1f6 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 12 Apr 2021 17:01:57 +0530 Subject: [PATCH] v0.15.23 Added background art to floating sections --- assets/bg/bitbonds-bg.png | Bin 0 -> 1553 bytes assets/bg/bobsfund-bg.png | Bin 0 -> 1218 bytes assets/bg/ico-bg.png | Bin 0 -> 1315 bytes css/main.css | 25 ++++++++++++++++++++----- css/main.min.css | 2 +- css/main.scss | 23 ++++++++++++++++++----- index.html | 6 +++--- 7 files changed, 42 insertions(+), 14 deletions(-) create mode 100644 assets/bg/bitbonds-bg.png create mode 100644 assets/bg/bobsfund-bg.png create mode 100644 assets/bg/ico-bg.png diff --git a/assets/bg/bitbonds-bg.png b/assets/bg/bitbonds-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..be8a3a29a633c530ff6bc8a6b24ecceae4422412 GIT binary patch literal 1553 zcmdUv`#aMM9LK+#ZDzSlOp?3KaZO}yZIx+S=I%(VjG=>6!a5kaw8&*`D{^#%<`TM? zJe?CZohf6=W#Vy5Q%LGK9uG3N9XoUWi}QJ&_Ya@f`}w>-zkHrgzP~R)4WWks06@+2 zBt8%TK#(25VG7a@C+-+3@h8tv0brNbjzBK2aXvTzXkzb@ zg+l=VTI-3&1*L!%BwmcNQ-F%jkCv^r0H z(rl{O{68;BI}dn9+OoE{eKMiM{k~r~ZK+46QMfErve<&Td|#Tf z&G_?-B{-9aq(F<`wL7L`ivqECj12Rknh=ux8f(yjMvSjojiKl$X6(!L+HNn#brr(F zHse=Qw6Rd%O^yG($+8ZZTvn`d-iHjDOyFPzM5q9iEG!(tf!AxIaNT$Jp(%l7WFX9Y9Hr5N98E6CyYekkwzCDOgyqE2RGXR+<*i z#Xu=48z}Y`;C~)an4alaeI;|azh}v>$s6C#Du`~e_<(9k@=iEngiF`miMwhq`{r%} z_djmbEIj3gE#5Q+O5ou5d}B8#O>N3M z1gZ%A$}Kcr|MFw~Odyh%zQJ4-7I%45wwY-rl{mF#Zdd1pO_qPKWf-@kQvWVT zAI?1NG~}1y;S^UYyCq<(f9uPmE(%|_X6uF2iYC3BS$vl}i<71OU90En<|~42hVqR< zOCb>fBjB;;kwyP}xxU3@<_TA2Yeb<&lLhjoNug7p~j@p_c z=l~z>4C{0mSq_ePE=Jq@NBl=r-=f1OFY=f!C8L_#nra%dVvD;gh=vjEvY>2(yOQj& zQinq=7L8^?$E8U03%T^o^*S90DCya7=L)SpBgVOLLB2ceMC2@G=+#!W3NFi)_42-9 zuYJpf=ElV}(KuJ!!(bLa>geLiPxH;;c7#c3+97E@M)#u-tlxrptOZ%uVz)gwacBBt z6M>c?|7B8rtf1@dVfVe3LI0G4dhh0LYY1n%84TKiaFgg=J-Lr!cSG(?RcZ`Y#_3nL zcu!PkGo={yi3d+V>=}lGd*h8e8xnFhJC;1q!AbhDzWX4cC=vsK>&B@6^9manbLlve z)9`z4Llo zQH__E1C}k}dn``RlFZpe?K3WJ$G+8(2YYMTzUF8`s`2c{U+<#Cd94(Yw`cm>5oU- z%V%w7ToQIm^icm{f3H9Hrc`{NY@BM_Q1XrCP=IiFvYs9%+li&-pH{1$JC;^+`KvgS z$KvuM-_O? ziiNmCs9L<@n}1Ksd?Kqh{`i>vG>gIb{Z6Jt4@t(*8GZ_HcH9wDjOSvT;XC=e0AKmK z*ZLB{hjM0p<4Szazx{8kx_{Ec%hyl)GoEP?=5A5^%Q{0+U7o{QOy0ih^!&Yn@7O;$ z%_`%6Xs|8vF!#Ech}^v6n!mq4kJ!IeqTBHCzwRHa?(0i4PMuNz#eYs`@TQ*zNq={D z^j`f|Kdr(zEuu4`dTD3f?;wSM-k%n%u>yZ;l^?B_j$WUA!DQoy-2H1he0idweS{Twz|Q&G~P~zEGu* zm7PnU*6oxGSh$kSNt`KG;>sm;iB!EL#RWmZoGntnSr(ft%~kogV4}y~dD;TI7?u zuz%CdBS*8t*i|;E3mARp{3hKa`TObT1{b!*4cXB~w|gW{X6%a=OnE2Vvt?_1qNc*k zpFaHJy{GF~H(8xE7EO2V>^|0$QmUn{cDC!_j6!1*Al>O`Pj+W1DSS43~$G zLeA}+M{^sVusAK3HD33{+g`!4QQ%n5hmcFpke<#)l>ru>cL~S^8_z!MEN9`(81Fsa4)>2WMOa z3T#`&d~k-KT5!I?j#^H&uv~>3>lr4mHWqjj-jKX9@6>~DsuufRg>e9_c>G)bLwBP3 TGLi7DpuF$t>gTe~DWM4f!K%o? literal 0 HcmV?d00001 diff --git a/assets/bg/ico-bg.png b/assets/bg/ico-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..b306cfd2fed4a07ab2da54266ea9620dbe7b6dfb GIT binary patch literal 1315 zcmeAS@N?(olHy`uVBq!ia0y~yU}OPd4mP03ISwz71ZROqWHAE+w=f7ZGR&GI0Tg5` z4sv&5Sa(k5C6L3C?&#~tz_78O`%fY(kh{av#WAFU@$FsT{E$!y_7Bg4RJ?j7XsBc< z^&Vq+?9@49gP~?1kF{YP!&B)E zI8V!)>vIj)_r2?T6t=urot3HgN>=D%%_JMHndh|{2p6or|7P!=^S!5P=3VkVvf6gizhAlE3Pmpz z=;!;?UpZ(XQ~T)#x1fJcU&O{|-|E%a9oKQ>nHFz+d;eaUwVwB7VSV5CzmvYbUdqTj zJt$T+2X>u?_Mcfc5aALKYA@=29Pbx5%7Ci=+<9`k2eI^-jKBalk)q&xysnm00puWaXgfAw$6 z_vDFDckTXu{@TX1nT4q&(|wO@>vng2mha2{pIetNf2(}+bqeBMdZ=C1(-Y_t>S`HRomLGj}n+JFG$Dp{9Ez4?? z>gV}J%v-iBsgH%}%)xnKTaz=pN=prDgt*WAom=mhJL6yG^UH6Q*&p-We9KXuaoMA4 z@v28_9p6nlvsf6n4nQK*u; zQh&wu*9A9(YD3ul@6Fu#_Y&XPLo7@p+bUIfw=287;{HC>O2+Ng@-VmjW5M&j`E1m_ zuleiJ*~H&23J&wHI(MbN=B`?@??&6}$Hrenw{O}dBXl@cU-tC;pstI*e*d&Lf3}r> majA0g#kZ@0xqP?-wg>gLx0|$fS2_IzdDYX^&t;ucLK6TlW&GLz literal 0 HcmV?d00001 diff --git a/css/main.css b/css/main.css index f0ba6d4..3dcf8ea 100644 --- a/css/main.css +++ b/css/main.css @@ -12,7 +12,7 @@ body { --text-color: 17, 17, 17; --text-color-light: 100, 100, 100; --foreground-color: 255, 255, 255; - --background-color: #F3F3F3; + --background-color: #F6f6f6; --error-color: red; --red: #E84545; color: rgba(var(--text-color), 1); @@ -22,7 +22,7 @@ body { } body[data-theme=dark] { - --accent-color:#2fb3ff; + --accent-color:#2babf5; --text-color: 240, 240, 240; --text-color-light: 170, 170, 170; --foreground-color: 20, 20, 20; @@ -510,8 +510,6 @@ ul { overflow-y: auto; max-height: calc(100vh - 5rem); grid-template-columns: 2rem 1fr; - background: url(../assets/bg/homepage-bg.svg) no-repeat center; - background-size: cover; } #floor_line_map { @@ -648,7 +646,9 @@ ul { } .outlet-preview__button { - justify-self: flex-end; + background-color: rgba(var(--text-color), 0.1); + justify-self: flex-start; + border-radius: 0.3rem; } /* .outlet-preview__carousel{ @@ -664,6 +664,21 @@ ul { font-size: 1.3rem; } +#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%; diff --git a/css/main.min.css b/css/main.min.css index 8056119..656018f 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.pos-relative,button{position:relative}.floor-title,.overflow-ellipsis,.td{white-space:nowrap}.hide,.ripple{pointer-events:none}.interact,.theme-switcher,button{cursor:pointer;-webkit-tap-highlight-color:transparent}*{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}body{--accent-color:#1042e9;--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:#F3F3F3;--error-color:red;--red:#E84545;color:rgba(var(--text-color),1);height:calc(100%);font-size:clamp(1rem,1.2vmax,3rem);background:var(--background-color)}body[data-theme=dark]{--accent-color:#2fb3ff;--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)}.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,.outlet__title{text-transform:capitalize}p{max-width:60ch;line-height:1.7}img{object-fit:cover}button{overflow:hidden;display:inline-flex;align-items:center;border:none;background:0 0;outline:0;color:inherit;font-weight:500}.flex,.floor-label{display:flex}.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}.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}.elevator__header,.popup__header{grid-template-columns:auto 1fr;gap:.5rem}.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}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#elevator_popup,.elevator__header{background:rgba(var(--foreground-color),1);top:0}.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;display:grid;width:100%}#elevator_popup{position:absolute;width:100%;height:100%;left:0;right:0;bottom:0;z-index:10;overflow-y:auto;grid-template-rows:auto 1fr}.elevator__header{position:sticky;padding:1.2rem 1.5rem;display:grid;align-items:center;justify-content:flex-start;width:100%;z-index:1}#elevator_sections{align-content:flex-start;padding:0 1.5rem 4rem}#elevator_button_panel{gap:2rem;overflow:auto;scroll-snap-type:x proximity;grid-template-columns:repeat(3,min(40ch,80%))}#elevator_button_panel li{display:grid;gap:2rem;align-content:flex-start;scroll-snap-align:start}#elevator_button_panel sup{font-weight:500;font-size:1rem}.outlet-section{display:grid;user-select:none}.popup__header__close{padding:.5rem;cursor:pointer}.floor__button{position:relative;padding:1rem;height:4rem;width:4rem;justify-content:center;border-radius:.5rem;font-size:1.5rem;font-weight:900;background:rgba(var(--text-color),.06)}.floor-circle,.line-map__circle{border-radius:1rem;position:absolute}.floor__button--active{background:rgba(var(--text-color),.2);box-shadow:0 0 0 .4rem rgba(var(--text-color),1) inset}.elevator__floor-line{flex:1;height:.1rem;margin-left:2rem;background-color:var(--red)}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3,1fr)}#elevator_button{justify-self:flex-start;margin-left:-1rem}#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{overflow-y:auto;max-height:calc(100vh - 5rem);background:url(../assets/bg/homepage-bg.svg) center no-repeat;background-size:cover}#floor_line_map{position:sticky;top:1rem;height:40vh;z-index:5;grid-column:1/2}.grid-2,.investor-card{grid-template-columns:auto 1fr}.line-map{height:100%}.line-map__circle{width:1rem;height:1rem;margin-top:-.5rem;background:rgba(var(--foreground-color),1);border:.2rem solid var(--red);transition:transform .1s linear;z-index:5}.line-map__bar{width:.1rem;height:100%;border-radius:1rem;background:var(--red)}.floor-label{position:absolute;align-items:center;left:.75rem;margin-top:-.9rem;padding-bottom:1rem;user-select:none}.outlet-number,.outlet-preview{display:grid;position:relative}.floor-label--active .floor-title{opacity:1;box-shadow:0 0 .5rem rgba(0,0,0,.2)}.floor-circle{height:.5rem;width:.5rem;background:rgba(var(--text-color),1)}#outlet_switcher,.floor-title,sm-carousel{background:rgba(var(--foreground-color),1)}.floor-title{opacity:.5;font-size:.9rem;padding:.4rem .6rem;margin-left:1rem;border-radius:.2rem;transition:box-shadow .3s,opacity .3s}#floor_container{width:calc(100% - 1rem)}.floor{padding-bottom:3rem;width:100%}.big-icon,.outlet-number{width:2rem;height:2rem}#floor_1__outlets{margin:3rem 0;gap:1.5rem}.outlet-preview{align-items:center}.outlet-number{aspect-ratio:1/1;font-size:1.3rem;font-weight:900;margin-bottom:.5rem;border-radius:.2rem;place-content:center;justify-self:flex-start;background:rgba(var(--text-color),1);color:rgba(var(--foreground-color),1);box-shadow:.2rem .2rem 0 var(--red)}.outlet-preview__info{position:relative;padding:1rem;border-radius:.5rem}.outlet__title{font-weight:700;font-size:1.8rem;margin-bottom:.8rem}.outlet__description{color:rgba(var(--text-color),.8)}.outlet-label,.outlet_switcher__button--active,.room-button[active]{color:var(--accent-color)}.outlet-preview__border{position:absolute;height:100%;width:100%;z-index:-1;box-shadow:0 0 0 .1rem rgba(var(--text-color),.2);border-radius:.5rem}.outlet-preview__button{justify-self:flex-end}.label{position:relative;font-size:.8rem;margin-bottom:.3rem}.value{font-size:1.3rem}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}.bit-bond-series__row,.bob-fund__row,.investor-card{min-width:100%}.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__button{font-size:1rem;padding:.4rem 0}.outlet_switcher__button:not(:last-of-type)::after{content:"";position:relative;width:4vw;height:.1rem;margin:0 .5rem;background:var(--red)}.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{position:sticky;top:0;--padding:0.5rem 0;--border-radius:0.3rem;--background:var(--background-color);--grid-auto-flow:column;z-index:1}scroll-tab-panels{--background:transparent;overscroll-behavior:contain}scroll-tab-panels>*{min-height:100vh;padding-top:4rem;opacity:.4;transition:opacity .6s}.room-button,.td{padding:.6rem .8rem}scroll-tab-panels>[active]{opacity:1}.auto-grid-layout{justify-content:flex-start;overflow-x:auto}.room-button{position:relative;opacity:.6;border-radius:0;font-weight:500;font-size:1.1rem;transition:opacity .3s,background-color .3s}.room-button[active]{opacity:1}.room-button[active] .icon{fill:var(--accent-color)}.room-button[active]::after{content:"";position:absolute;height:.1rem;width:100%;bottom:0;left:0;border-radius:.2rem .2rem 0 0;background:var(--accent-color)}table{border-collapse:collapse;width:max-content}.tr{margin:.5rem}.tr:nth-of-type(even){background:rgba(var(--text-color),.1)}#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}.floor-label{transition:transform .3s}.floor-label .floor-title{opacity:0;transform:translateX(-1rem);transition:opacity .3s,transform .3s}.floor-label--active{opacity:1}.floor-label--active .floor-title{opacity:1;box-shadow:0 0 .5rem rgba(0,0,0,.2);transform:none}#outlet_switcher{width:calc(100% - 2rem)}.outlet-hero-section{margin-top: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}#elevator_sections{padding:0 3rem 4rem 4.6rem}#home_page{grid-template-columns:1fr 80vw 1fr}#floor_line_map{margin-left:.8rem}#floor_1__outlets{gap:5rem}.outlet-preview{gap:1rem;grid-template-columns:repeat(2,1fr)}.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:-2rem 5rem 4rem -2rem rgba(0,0,0,.2)}.carousel-holder--left~.outlet-preview__border{justify-self:flex-end}.carousel-holder--right{box-shadow: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){::-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)}.page-link:hover .icon{fill:var(--accent-color)}.outlet-section .icon{transform:translateX(-.5rem);transition:transform .3s}.outlet-section:hover .icon{transform:none}.floor__button:hover{background:rgba(var(--text-color),.2)}} \ No newline at end of file +.pos-relative,button{position:relative}.floor-title,.overflow-ellipsis,.td{white-space:nowrap}.hide,.ripple{pointer-events:none}.interact,.theme-switcher,button{cursor:pointer;-webkit-tap-highlight-color:transparent}*{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}body{--accent-color:#1042e9;--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;--red:#E84545;color:rgba(var(--text-color),1);height:calc(100%);font-size:clamp(1rem,1.2vmax,3rem);background:var(--background-color)}body[data-theme=dark]{--accent-color:#2babf5;--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)}.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,.outlet__title{text-transform:capitalize}p{max-width:60ch;line-height:1.7}img{object-fit:cover}button{overflow:hidden;display:inline-flex;align-items:center;border:none;background:0 0;outline:0;color:inherit;font-weight:500}.flex,.floor-label{display:flex}.button--primary,.outlet-number{color:rgba(var(--foreground-color),1)}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{background: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}.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}.elevator__header,.popup__header{grid-template-columns:auto 1fr;gap:.5rem}.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}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#elevator_popup,.elevator__header{background:rgba(var(--foreground-color),1);top:0}.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;display:grid;width:100%}#elevator_popup{position:absolute;width:100%;height:100%;left:0;right:0;bottom:0;z-index:10;overflow-y:auto;grid-template-rows:auto 1fr}.elevator__header{position:sticky;padding:1.2rem 1.5rem;display:grid;align-items:center;justify-content:flex-start;width:100%;z-index:1}#elevator_sections{align-content:flex-start;padding:0 1.5rem 4rem}#elevator_button_panel{gap:2rem;overflow:auto;scroll-snap-type:x proximity;grid-template-columns:repeat(3,min(40ch,80%))}#elevator_button_panel li{display:grid;gap:2rem;align-content:flex-start;scroll-snap-align:start}#elevator_button_panel sup{font-weight:500;font-size:1rem}.outlet-section{display:grid;user-select:none}.popup__header__close{padding:.5rem;cursor:pointer}.floor__button{position:relative;padding:1rem;height:4rem;width:4rem;justify-content:center;border-radius:.5rem;font-size:1.5rem;font-weight:900;background:rgba(var(--text-color),.06)}.floor-circle,.line-map__circle{border-radius:1rem;position:absolute}.floor__button--active{background:rgba(var(--text-color),.2);box-shadow:0 0 0 .4rem rgba(var(--text-color),1) inset}.elevator__floor-line{flex:1;height:.1rem;margin-left:2rem;background-color:var(--red)}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3,1fr)}#elevator_button{justify-self:flex-start;margin-left:-1rem}#main_header__logo{height:1.8rem;width:1.8rem}.theme-switcher{position:relative;justify-self:flex-end;width:1.5rem;height:1.5rem}.floor-label,.outlet-preview{align-items:center}.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{overflow-y:auto;max-height:calc(100vh - 5rem)}#floor_line_map{position:sticky;top:1rem;height:40vh;z-index:5;grid-column:1/2}.grid-2,.investor-card{grid-template-columns:auto 1fr}.line-map{height:100%}.line-map__circle{width:1rem;height:1rem;margin-top:-.5rem;background:rgba(var(--foreground-color),1);border:.2rem solid var(--red);transition:transform .1s linear;z-index:5}.line-map__bar{width:.1rem;height:100%;border-radius:1rem;background:var(--red)}.floor-label{position:absolute;left:.75rem;margin-top:-.9rem;padding-bottom:1rem;user-select:none}.outlet-number,.outlet-preview{display:grid;position:relative}.floor-label--active .floor-title{opacity:1;box-shadow:0 0 .5rem rgba(0,0,0,.2)}.floor-circle{height:.5rem;width:.5rem;background:rgba(var(--text-color),1)}.floor-title{opacity:.5;font-size:.9rem;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%}.big-icon,.outlet-number{width:2rem;height:2rem}#floor_1__outlets{margin:3rem 0;gap:1.5rem}.outlet-number{aspect-ratio:1/1;font-size:1.3rem;font-weight:900;margin-bottom:.5rem;border-radius:.2rem;place-content:center;justify-self:flex-start;background:rgba(var(--text-color),1);box-shadow:.2rem .2rem 0 var(--red)}.outlet-preview__info{position:relative;padding:1rem;border-radius:.5rem}.outlet__title{font-weight:700;font-size:1.8rem;margin-bottom:.8rem}.outlet__description{color:rgba(var(--text-color),.8)}.outlet-label,.outlet_switcher__button--active,.room-button[active]{color:var(--accent-color)}.outlet-preview__border{position:absolute;height:100%;width:100%;z-index:-1;box-shadow:0 0 0 .1rem rgba(var(--text-color),.2);border-radius:.5rem}.outlet-preview__button{background-color:rgba(var(--text-color),.1);justify-self:flex-start;border-radius:.3rem}#outlet_switcher,sm-carousel{background:rgba(var(--foreground-color),1)}.label{position:relative;font-size:.8rem;margin-bottom:.3rem}.value{font-size:1.3rem}#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%;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}.bit-bond-series__row,.bob-fund__row,.investor-card{min-width:100%}.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__button{font-size:1rem;padding:.4rem 0}.outlet_switcher__button:not(:last-of-type)::after{content:"";position:relative;width:4vw;height:.1rem;margin:0 .5rem;background:var(--red)}.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{position:sticky;top:0;--padding:0.5rem 0;--border-radius:0.3rem;--background:var(--background-color);--grid-auto-flow:column;z-index:1}scroll-tab-panels{--background:transparent;overscroll-behavior:contain}scroll-tab-panels>*{min-height:100vh;padding-top:4rem;opacity:.4;transition:opacity .6s}.room-button,.td{padding:.6rem .8rem}scroll-tab-panels>[active]{opacity:1}.auto-grid-layout{justify-content:flex-start;overflow-x:auto}.room-button{position:relative;opacity:.6;border-radius:0;font-weight:500;font-size:1.1rem;transition:opacity .3s,background-color .3s}.room-button[active]{opacity:1}.room-button[active] .icon{fill:var(--accent-color)}.room-button[active]::after{content:"";position:absolute;height:.1rem;width:100%;bottom:0;left:0;border-radius:.2rem .2rem 0 0;background:var(--accent-color)}table{border-collapse:collapse;width:max-content}.tr{margin:.5rem}.tr:nth-of-type(even){background:rgba(var(--text-color),.1)}#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}.floor-label{transition:transform .3s}.floor-label .floor-title{opacity:0;transform:translateX(-1rem);transition:opacity .3s,transform .3s}.floor-label--active{opacity:1}.floor-label--active .floor-title{opacity:1;box-shadow:0 0 .5rem rgba(0,0,0,.2);transform:none}#outlet_switcher{width:calc(100% - 2rem)}.outlet-hero-section{margin-top: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}#elevator_sections{padding:0 3rem 4rem 4.6rem}#home_page{grid-template-columns:1fr 80vw 1fr}#floor_line_map{margin-left:.8rem}#floor_1__outlets{gap:5rem}.outlet-preview{gap:1rem;grid-template-columns:repeat(2,1fr)}.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:-2rem 5rem 4rem -2rem rgba(0,0,0,.2)}.carousel-holder--left~.outlet-preview__border{justify-self:flex-end}.carousel-holder--right{box-shadow: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){::-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)}.page-link:hover .icon{fill:var(--accent-color)}.outlet-section .icon{transform:translateX(-.5rem);transition:transform .3s}.outlet-section:hover .icon{transform:none}.floor__button:hover{background:rgba(var(--text-color),.2)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 0556195..feef00e 100644 --- a/css/main.scss +++ b/css/main.scss @@ -12,7 +12,7 @@ body { --text-color: 17, 17, 17; --text-color-light: 100, 100, 100; --foreground-color: 255, 255, 255; - --background-color: #F3F3F3; + --background-color: #F6f6f6; --error-color: red; --red: #E84545; color: rgba(var(--text-color), 1); @@ -21,7 +21,7 @@ body { background: var(--background-color); } body[data-theme='dark']{ - --accent-color:#2fb3ff; + --accent-color:#2babf5; --text-color: 240, 240, 240; --text-color-light: 170, 170, 170; --foreground-color: 20, 20, 20; @@ -441,8 +441,6 @@ ul{ overflow-y: auto; max-height: calc(100vh - 5rem); grid-template-columns: 2rem 1fr; - background: url(../assets/bg/homepage-bg.svg) no-repeat center; - background-size: cover; } #floor_line_map{ @@ -570,7 +568,9 @@ ul{ border-radius: 0.5rem; } .outlet-preview__button{ - justify-self: flex-end; + background-color: rgba(var(--text-color), 0.1); + justify-self: flex-start; + border-radius: 0.3rem; } /* .outlet-preview__carousel{ @@ -585,6 +585,19 @@ ul{ font-size: 1.3rem; } +#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%; diff --git a/index.html b/index.html index c5f5dca..22bd86c 100644 --- a/index.html +++ b/index.html @@ -216,7 +216,7 @@ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.

@@ -233,7 +233,7 @@ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.

@@ -250,7 +250,7 @@ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.