From a984d3a7ae17c973e27f446ff966ba3c81406258 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 5 Jun 2021 22:16:33 +0530 Subject: [PATCH] UI update -- Added room icons -- Added link to respective website for rooms --- assets/bg/bitbonds-bg.png | Bin 1553 -> 0 bytes assets/bg/bobsfund-bg.png | Bin 1218 -> 0 bytes assets/bg/homepage-bg.svg | 44 ---------- assets/bg/ico-bg.png | Bin 1315 -> 0 bytes assets/illustrations/Artboard 2.svg | 1 + assets/illustrations/performance.png | Bin 0 -> 1607 bytes assets/illustrations/performance.svg | 1 + assets/illustrations/product.svg | 1 + assets/illustrations/purchase.svg | 1 + bitcoinbonds.html | 15 +++- bob'sfund.html | 15 +++- css/main.css | 121 +++++++++++++++++++++++---- css/main.min.css | 2 +- css/main.scss | 115 +++++++++++++++++++++---- js/index.js | 8 +- 15 files changed, 241 insertions(+), 83 deletions(-) delete mode 100644 assets/bg/bitbonds-bg.png delete mode 100644 assets/bg/bobsfund-bg.png delete mode 100644 assets/bg/homepage-bg.svg delete mode 100644 assets/bg/ico-bg.png create mode 100644 assets/illustrations/Artboard 2.svg create mode 100644 assets/illustrations/performance.png create mode 100644 assets/illustrations/performance.svg create mode 100644 assets/illustrations/product.svg create mode 100644 assets/illustrations/purchase.svg diff --git a/assets/bg/bitbonds-bg.png b/assets/bg/bitbonds-bg.png deleted file mode 100644 index be8a3a29a633c530ff6bc8a6b24ecceae4422412..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 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? diff --git a/assets/bg/homepage-bg.svg b/assets/bg/homepage-bg.svg deleted file mode 100644 index fb0cba6..0000000 --- a/assets/bg/homepage-bg.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/bg/ico-bg.png b/assets/bg/ico-bg.png deleted file mode 100644 index b306cfd2fed4a07ab2da54266ea9620dbe7b6dfb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 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 diff --git a/assets/illustrations/Artboard 2.svg b/assets/illustrations/Artboard 2.svg new file mode 100644 index 0000000..72cb012 --- /dev/null +++ b/assets/illustrations/Artboard 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/illustrations/performance.png b/assets/illustrations/performance.png new file mode 100644 index 0000000000000000000000000000000000000000..d69a8c0b451cb736697a420492ebd0f05c265e5d GIT binary patch literal 1607 zcmV-N2Dtf&P)f zLC{{Ci#_alEs6m_uzS)CD|Vv@9>ngYcx(|bLLdt(qOfkeOPlPvbvGAXm9EpUwn>{m z@{4cEWZs*ZH_aq7=?BWB@4X50{k`A&z2Ey~gl4k|$BkG#8v%d>08ElA@(Q`G1Aq(w zYr^iI-ybUj#NydG0GI)QH>pl7vGwUXX&1i^b1IT(b+r;@QPs ziAMx);7aT21`mkEvl!{$qB?l7Dqi%~iobp-;b+G^px5FN!56xI_}NJha74T`AQy|D z4=evW<^fKKht}F3xZL)?6CU7{c+nqPD{L-KwY5>Bx{PBpFM4Z&CorRJw>=Y#q;u+e zT!dUPt9x|%=X=uvz$|qWFGm!Q2>$SUn|D7hQSEjt0U~;i{4sNPUv>Yjwa)j>GY65tgM4vWX4r|1t&Q|&4&8z7R- zq3{o>4hD{jN7oNT-r2l+(z!`eoM5hTEzXM{{;IHX^&-`wfy)4qbPh{W zpHdwy~bFfq2BW7ACYj?( zczNTI+6b|D7Miunk!yg8_yfsL_1OV;9#BqA@V=gM4abF-Hx8#f_QEI2jqTzrG#k`l zBN*au$eCoq;1(gIS`>bIH{}@`{T2lN6~_?Y6?mV>>Wd2Jv_{yx z^}!pwMlcYcrv`V3>C==`6Z5LqOlkZA)ub}QqPn4Fgy6G3P$T)oBWqMkhZx2HGJ}t( zH#PhMc+dDi8XE*L=!M$fRXA9C3XLbs1JP7?d86&Y$Irfhv;Oa2FIg0i49l71(YF%@ zW*#uF6)%KD2)=$2{AY(+;t}sDKMY(r3F2wyrZT5(*u3-6%VJ=7z3qF=#jn~e9?>-b znf-ZfyYGAm1c`l{|9qHgQ@yR-Mq%UXB$ls$Kj1AwzA@@B-c7 ziM2a%WMqp&d`ZqESE$w=7@!Sle2^N{DSy29>O~Xrpbe&W!ZbiRH8E#(_7xicP=U}e zcb7BCyvdkSx7;6L8h|zX-e`atq@`LY15~M9g=gzB61dQf;HN+tpq!dWXxA-9erZ(q z_eE$PG@x=zhT5G9)kl&jGxQRibvctXGET=(24HPl-sjn~kHT@*cfZ?)`h$I{9|eS$ zH%tYPWx#@Z7Q1N+*<|aZPHs}PefClK{)4AbyH{noyuwb00xrv$r0toX7VVxzJ+NoY zcewA@<$XBV+SQwFH7Guz%>XTcr@jT7wKCBffC_%nb3r&L?LzJTo?fb}Wfi|iT^F#( z4yiZvghK<6;79!wR>|)exw)Dfqz<6Bo_U$+X4KcB_5jNLTbPTtOE{hlmJ9-7S7;f4 z1V5{8hxNWC8-yz?c6-ZX(K-&3%#Y_yZ6zyP>R^q#3S|kH&HgG8-IW80lL$Mr<5=Z= z$aschH`^?{n%UnWsjHo9+tr`}aQ&l;V@<#3LC8@6;6Joj6p+>NXj=dP002ovPDHLk FV1ih6{2u@S literal 0 HcmV?d00001 diff --git a/assets/illustrations/performance.svg b/assets/illustrations/performance.svg new file mode 100644 index 0000000..130d176 --- /dev/null +++ b/assets/illustrations/performance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/illustrations/product.svg b/assets/illustrations/product.svg new file mode 100644 index 0000000..4f3ffa8 --- /dev/null +++ b/assets/illustrations/product.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/illustrations/purchase.svg b/assets/illustrations/purchase.svg new file mode 100644 index 0000000..1929f6c --- /dev/null +++ b/assets/illustrations/purchase.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/bitcoinbonds.html b/bitcoinbonds.html index 67484b6..6a3a675 100644 --- a/bitcoinbonds.html +++ b/bitcoinbonds.html @@ -45,7 +45,7 @@ -
+
@@ -92,17 +92,22 @@
+ +

Performance
+

Product
-

Purchase

+ + +

Buy

 @@ -235,6 +240,12 @@
+
+ +

See this in action

+

Visit the website to see investors and asset performance

+ +
diff --git a/bob'sfund.html b/bob'sfund.html index c3dfdeb..c86aa86 100644 --- a/bob'sfund.html +++ b/bob'sfund.html @@ -53,7 +53,7 @@ -
+
@@ -95,17 +95,22 @@
+ +

Performance
+

Product
-

Purchase

+ + +

Buy

 @@ -156,6 +161,12 @@
+
+ +

See this in action

+

Visit the website to see investors and asset performance

+ +
diff --git a/css/main.css b/css/main.css index 8cb4bcc..47a427c 100644 --- a/css/main.css +++ b/css/main.css @@ -619,6 +619,10 @@ ol[type="1"] { grid-column: 2/3; } +.page { + padding-bottom: 4rem; +} + .tag { background: var(--accent-color); padding: 0.4rem 0.6rem; @@ -960,6 +964,7 @@ ol[type="1"] { background: rgba(var(--foreground-color), 1); box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2); z-index: 2; + outline: none; } .outlet_switcher__floor { @@ -991,12 +996,15 @@ ol[type="1"] { align-items: center; justify-self: flex-start; color: var(--accent-color); + background-color: rgba(var(--text-color), 0.06); + border-radius: 0.2rem; + padding: 0.8rem 0.8rem; margin-bottom: 0.5rem; font-size: 1rem; + gap: 0.5rem; } .outlet-label .icon { fill: var(--accent-color); - margin-right: 0.5rem; } scroll-tab-header { @@ -1031,8 +1039,6 @@ scroll-tab-panels > [active] { } .rooms__header { - position: sticky; - top: 0; z-index: 1; display: flex; align-items: center; @@ -1045,9 +1051,9 @@ scroll-tab-panels > [active] { position: relative; display: flex; align-items: center; - font-weight: calc(500 * var(--font-weight-factor)); - margin-right: 0.5rem; + font-weight: calc(700 * var(--font-weight-factor)); padding-right: 1.5rem; + font-size: 1.5rem; } .room-button { @@ -1127,15 +1133,32 @@ scroll-tab-panels > [active] { } .room-tile--main .tile-content { position: absolute; - top: 0; + bottom: 0; } .room-tile .tile-content { + display: flex; + width: 100%; + height: 100%; padding: 1rem; + align-self: flex-end; + flex-direction: column; + justify-content: flex-end; } .room-tile:active { transform: scale(0.95); } +.room-tile__icon { + height: 4rem; + width: 4rem; + margin-bottom: 1rem; + fill: rgba(var(--text-color), 1); +} + +.room-tile__title { + font-size: 1.2rem; +} + #expanding_tile { position: fixed; border-radius: 0.5rem; @@ -1152,7 +1175,8 @@ scroll-tab-panels > [active] { z-index: 6; overflow-y: auto; background-color: var(--background-color); - align-content: flex-start; + grid-template-rows: auto auto 1fr auto; + align-items: flex-start; } .room { @@ -1169,27 +1193,26 @@ scroll-tab-panels > [active] { } #hero_title { - font-size: 2.5rem; + font-size: 2rem; margin-bottom: 2rem; + font-weight: calc(700 * var(--font-weight-factor)); } .room-container__footer { position: sticky; - display: grid; + display: flex; gap: 1rem; - grid-auto-flow: column; - justify-content: flex-start; - align-items: center; bottom: 0; z-index: 2; - margin-top: auto; - padding: 0.5rem; - background-color: inherit; + overflow-x: auto; + align-items: center; + padding: 2rem 0.5rem 0.5rem 0.5rem; + background: linear-gradient(0deg, var(--background-color) 70%, rgba(0, 0, 0, 0) 100%); } #room_switcher { display: grid; - gap: 1rem; + gap: 0.5rem; grid-auto-flow: column; justify-content: flex-start; } @@ -1199,6 +1222,57 @@ scroll-tab-panels > [active] { border-radius: 0.3rem; background-color: rgba(var(--text-color), 0.06); } +.room-shortcut .room-tile__title { + font-weight: 500; + font-size: 0.9rem; +} + +.ext-link-tile { + position: relative; + display: flex; + width: min(24rem, 100%); + padding: 1rem; + border-radius: 0.5rem; + flex-direction: column; + background-size: contain; + justify-content: flex-end; + background-color: var(--banner-color); + box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2); + -webkit-tap-highlight-color: transparent; + overflow: hidden; +} +.ext-link-tile::after, .ext-link-tile::before { + position: absolute; + content: ""; + border-radius: 50%; +} +.ext-link-tile::before { + top: 5rem; + right: -2rem; + height: 4rem; + width: 4rem; + background-color: rgba(var(--text-color), 0.5); +} +.ext-link-tile::after { + top: -2rem; + right: -3rem; + height: 10rem; + width: 10rem; + background-color: rgba(var(--text-color), 0.2); +} + +.tile__title { + padding-top: 1em; + font-size: 3rem; + line-height: 0.9; + color: white; + font-weight: calc(900 * var(--font-weight-factor)); +} + +.tile__brief { + margin-top: 1rem; + color: rgba(255, 255, 255, 0.8); +} @media only screen and (max-width: 640px) { .hide-on-mobile { @@ -1249,11 +1323,22 @@ scroll-tab-panels > [active] { padding-top: 100%; } .room-tile--main { + padding-top: 50%; grid-column: span 2; } .room-tile .tile-content { top: 0; position: absolute; + align-items: center; + } + + .room-tile__icon { + height: 3rem; + width: 3rem; + } + + #hero_title { + margin-top: 2rem; } } @media only screen and (min-width: 640px) { @@ -1386,6 +1471,10 @@ scroll-tab-panels > [active] { .people-grid { gap: 5rem 3rem; } + + #hero_title { + font-size: 3rem; + } } @media only screen and (min-width: 1280px) { #home_page, .page, diff --git a/css/main.min.css b/css/main.min.css index b132b55..fccc51c 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}.interact,.room-tile,.theme-switcher,button{-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;--banner-color:#1E88E5;--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);--banner-color:#0166be;--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,.person__name{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;cursor:pointer;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}.text-align-right{text-align:right}.person-card,.text-center{text-align:center}.align-start{align-items:flex-start}.align-center{align-items: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;cursor:pointer}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.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))}.weight-500{font-weight:calc(500 * var(--font-weight-factor))}.outlet-title,.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;grid-template-columns:auto 1fr;gap:.5rem;align-items:center;width:100%}.banner,.elevator__header{align-items:center;display:grid}.banner{gap:1rem;padding:.2rem 0 .2rem 1rem;background-color:var(--banner-color);grid-template-columns:1fr auto}.banner .close-icon{fill:#fff;width:2.2rem;height:2.2rem}#elevator_popup,.elevator__header{width:100%;background:rgba(var(--foreground-color),1);top:0}.banner__text{max-width:unset;font-size:.9rem;color:#fff}#elevator_popup{position:absolute;height:100%;left:0;right:0;bottom:0;z-index:15;grid-template-rows:auto 1fr}.elevator__header{position:sticky;padding:1.2rem 1.5rem;grid-template-columns:auto 1fr;gap:.5rem;justify-content:flex-start;z-index:1}#floor_list{align-content:flex-start;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-label,.floor-list__outlet,.floor__num{display:flex;align-items:center}.floor_list__item:last-of-type{padding-bottom:25vh}.floor_list__header{position:sticky;top:0;padding-bottom:.5rem;background:rgba(var(--foreground-color),1);z-index:1}.outlet-list{gap:2rem;counter-reset:outlet-counter}.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;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;cursor:pointer}.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,.page-layout{position:relative;display:grid;grid-template-columns:1rem 1fr 1rem}#floor_line_map,#home_page{grid-template-columns:2rem 1fr}.page-layout>*,.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}.floor-label,.room-tile{transition:transform .3s}.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;left:.2rem;margin-top:-1rem;user-select:none}.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)}.bit-bond-series__row,.bob-fund__row,.outlet-preview,.starter{background-color:rgba(var(--foreground-color),1)}.floor__num{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}.outlet__title{line-height:1.2;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);margin:0 .5rem}.outlet-preview__number::after{content:attr(data-number);position:absolute;line-height:1;font-size:1em;font-weight:900;-webkit-text-stroke:0;color:rgba(var(--foreground-color),1)}.intern__level,.outlet_switcher__button,.percent-gain{font-weight:calc(500 * var(--font-weight-factor))}.label{position:relative;font-size:.8rem;margin-bottom:.3rem}.value{font-size:1.1rem}.series-container{gap:1.5rem;padding-bottom:1.5rem;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__row,.bob-fund__row,.person-card{min-width:100%}.bob-fund__row .grid{align-content:flex-start}.bit-bond-series__row,.bob-fund__row{gap:1rem;border-radius:.5rem;align-items:flex-start;box-shadow:0 .5rem 1rem -.5rem rgba(0,0,0,.1)}.up-arrow{height:1em;width:1em;fill:var(--green);margin-right:.1em}.outlet-label .icon,.room-button[active] .icon{fill:var(--accent-color)}.percent-gain{margin-right:.5em}.percent-gain,.time-elapsed{font-size:.8rem}.time-elapsed{color:rgba(var(--text-color),.8)}.person-card{position:relative;gap:1rem;justify-items:center;align-content:flex-start;grid-template-columns:1fr}.person__image{height:10rem;width:10rem;object-position:top;border-radius:50%}.person__name{font-size:1.1rem}.investor__bio,.investor__contribution{font-size:.85rem}.investor__bio{margin-top:.5rem}.intern-flo-id{margin-top:.3rem;font-size:.75rem}.intern__project{margin-top:.5rem}.intern__level{position:absolute;cursor:pointer;font-size:.8rem;border-radius:.2rem;margin-bottom:.3rem;padding:.3rem .5rem;justify-self:flex-end;box-shadow:0 .1rem .2rem rgba(0,0,0,.2)}.motivated{color:#000;background-color:#FFCA28}.passionate{color:#000;background-color:#00E676}#intern_level_popup{--width:min(48rem, 100%)}.table{display:grid;gap:1rem;grid-template-columns:6rem 1fr}.table p{font-size:.9rem;color:rgba(var(--text-color),.9)}#outlet_switcher{position:absolute;top:0;padding:1rem;border-radius:.3rem;background:rgba(var(--foreground-color),1);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{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}.room__label,.rooms__header{display:flex;align-items:center}.grid-2{grid-template-columns:auto 1fr}.rooms__header{position:sticky;top:0;z-index:1;margin-bottom:1.5rem;background:var(--background-color);box-shadow:0 1rem 1rem -1rem rgba(0,0,0,.2)}.room-button,.room__label{position:relative;font-weight:calc(500 * var(--font-weight-factor))}.room__label{margin-right:.5rem;padding-right:1.5rem}.room-button{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)}.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)}#expanding_tile,.room-tile{border-radius:.5rem;background-color:rgba(var(--foreground-color),1)}.people-grid{display:grid;gap:3rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}.rooms-layout{position:relative;display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:4rem}.room-tile{display:flex;position:relative;box-shadow:0 1rem 3rem -1rem rgba(0,0,0,.2)}.room-tile--main{padding-top:100%;grid-row:span 2}.room-tile--main .tile-content{position:absolute;top:0}.room-tile .tile-content{padding:1rem}.room-tile:active{transform:scale(.95)}#expanding_tile{position:fixed;z-index:5}.room-container{position:fixed;top:0;bottom:0;left:0;right:0;z-index:6;overflow-y:auto;background-color:var(--background-color);align-content:flex-start}.room-container__footer,.room-container__header{position:sticky;z-index:2;background-color:inherit}.room{padding-bottom:4rem}.room-container__header{display:flex;top:0;padding:1rem 0}#room_switcher,.room-container__footer{display:grid;gap:1rem;grid-auto-flow:column}#hero_title{font-size:2.5rem;margin-bottom:2rem}.room-container__footer{justify-content:flex-start;align-items:center;bottom:0;margin-top:auto;padding:.5rem}#room_switcher{justify-content:flex-start}.room-shortcut{padding:.5em .8rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}@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}.outlet-preview__number::after{left:0}.outlet-preview__number{font-size:5rem}#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)}.room-tile{padding-top:100%}.room-tile--main{grid-column:span 2}.room-tile .tile-content{top:0;position:absolute}}@media only screen and (min-width:640px){#home_page,.page,.page-layout{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 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_switcher{padding:1rem 1.5rem}.outlet-hero-section{margin-top:4rem}.auto-grid-layout{grid-template-columns:auto 1fr}.rooms-layout{grid-template-rows:1fr 1fr}.room-container__header{padding:1.5rem 0}.people-grid{gap:5rem 3rem}}@media only screen and (min-width:1280px){#home_page,.page,.page-layout{grid-template-columns:1fr 85vw 1fr}.grid-3{justify-content:center}.grid-3>.grid{width:100%}.rooms-layout{grid-template-columns:repeat(3,1fr);grid-auto-flow:column}}@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)}.intern__level{transition:transform .3s}.intern__level:hover{transform:scale(1.1)}} \ No newline at end of file +a,button{color:inherit}#room_switcher,.bit-bond-series__row,.flow-column{grid-auto-flow:column}.pos-relative,button{position:relative}.ext-link-tile,.interact,.room-tile,.theme-switcher,button{-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;--banner-color:#1E88E5;--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);--banner-color:#0166be;--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,.person__name{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;cursor:pointer;outline:0;font-weight:calc(500 * var(--font-weight-factor))}.button--primary,.tag{background:var(--accent-color)}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{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}.banner,.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.person-card,.text-center{text-align:center}.align-start{align-items:flex-start}.align-center,.popup__header{align-items: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;cursor:pointer}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.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))}.weight-500{font-weight:calc(500 * var(--font-weight-factor))}.outlet-title,.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;grid-template-columns:auto 1fr;gap:.5rem;width:100%}.banner{display:grid;padding:.2rem 0 .2rem 1rem;align-items:center;background-color:var(--banner-color);grid-template-columns:1fr auto}.banner .close-icon{fill:#fff;width:2.2rem;height:2.2rem}.banner__text{max-width:unset;font-size:.9rem;color:#fff}.outlet-title,.room-tile__title{font-size:1.2rem}#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;grid-template-columns:auto 1fr;gap:.5rem;align-items:center;justify-content:flex-start;width:100%}#floor_list{align-content:flex-start;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-label,.floor-list__outlet,.floor__num{display:flex;align-items:center}.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::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{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;cursor:pointer}.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,.page-layout{position:relative;display:grid;grid-template-columns:1rem 1fr 1rem}#floor_line_map,#home_page{grid-template-columns:2rem 1fr}.page-layout>*,.page>*{grid-column:2/3}.page{padding-bottom:4rem}.tag{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;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)}.floor__num{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.2;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-preview__button,.room__label{font-weight:calc(700 * var(--font-weight-factor))}.outlet__description{color:rgba(var(--text-color),.8)}.outlet-preview__button{padding:.5rem 0;justify-self:flex-start;color:var(--accent-color)}.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);margin:0 .5rem}.outlet-preview__number::after{content:attr(data-number);position:absolute;line-height:1;font-size:1em;font-weight:900;-webkit-text-stroke:0;color:rgba(var(--foreground-color),1)}.intern__level,.outlet_switcher__button,.percent-gain{font-weight:calc(500 * var(--font-weight-factor))}.label{position:relative;font-size:.8rem;margin-bottom:.3rem}.value{font-size:1.1rem}.series-container{gap:1.5rem;padding-bottom:1.5rem;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__row,.bob-fund__row,.person-card{min-width:100%}.bob-fund__row .grid{align-content:flex-start}.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{margin-right:.5em}.percent-gain,.time-elapsed{font-size:.8rem}.time-elapsed{color:rgba(var(--text-color),.8)}.person-card{position:relative;gap:1rem;justify-items:center;align-content:flex-start;grid-template-columns:1fr}.person__image{height:10rem;width:10rem;object-position:top;border-radius:50%}.person__name{font-size:1.1rem}.investor__bio,.investor__contribution{font-size:.85rem}.investor__bio{margin-top:.5rem}.intern-flo-id{margin-top:.3rem;font-size:.75rem}.intern__project{margin-top:.5rem}.intern__level{position:absolute;cursor:pointer;font-size:.8rem;border-radius:.2rem;margin-bottom:.3rem;padding:.3rem .5rem;justify-self:flex-end;box-shadow:0 .1rem .2rem rgba(0,0,0,.2)}.starter{background-color:rgba(var(--foreground-color),1)}.motivated{color:#000;background-color:#FFCA28}.passionate{color:#000;background-color:#00E676}#intern_level_popup{--width:min(48rem, 100%)}.table{display:grid;gap:1rem;grid-template-columns:6rem 1fr}.table p{font-size:.9rem;color:rgba(var(--text-color),.9)}#outlet_switcher{position:absolute;top:0;padding:1rem;border-radius:.3rem;background:rgba(var(--foreground-color),1);box-shadow:0 2rem 4rem -1rem rgba(0,0,0,.2);z-index:2;outline:0}.outlet_switcher__floor{overflow-x:auto}.outlet_switcher__button{display:flex;align-items:center;font-size:1rem;padding:.4rem 0;flex-shrink:0}.outlet-label,.rooms__header{align-items:center;display:flex}.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{justify-self:flex-start;color:var(--accent-color);background-color:rgba(var(--text-color),.06);border-radius:.2rem;padding:.8rem;margin-bottom:.5rem;font-size:1rem;gap:.5rem}.outlet-label .icon{fill:var(--accent-color)}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}.grid-2{grid-template-columns:auto 1fr}.rooms__header{z-index:1;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;padding-right:1.5rem;font-size:1.5rem}.room-button{position:relative;opacity:.6;flex-shrink:0;border-radius:0;font-weight:calc(500 * var(--font-weight-factor));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)}.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)}#expanding_tile,.room-tile{border-radius:.5rem;background-color:rgba(var(--foreground-color),1)}.people-grid{display:grid;gap:3rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}.rooms-layout{position:relative;display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:4rem}.room-tile{display:flex;position:relative;transition:transform .3s;box-shadow:0 1rem 3rem -1rem rgba(0,0,0,.2)}.room-tile--main{padding-top:100%;grid-row:span 2}.room-tile--main .tile-content{position:absolute;bottom:0}.room-tile .tile-content{display:flex;width:100%;height:100%;padding:1rem;align-self:flex-end;flex-direction:column;justify-content:flex-end}.room-tile:active{transform:scale(.95)}.room-tile__icon{height:4rem;width:4rem;margin-bottom:1rem;fill:rgba(var(--text-color),1)}#expanding_tile{position:fixed;z-index:5}.room-container{position:fixed;top:0;bottom:0;left:0;right:0;z-index:6;overflow-y:auto;background-color:var(--background-color);grid-template-rows:auto auto 1fr auto;align-items:flex-start}.room{padding-bottom:4rem}.room-container__header{display:flex;position:sticky;top:0;z-index:2;background-color:inherit;padding:1rem 0}#hero_title{font-size:2rem;margin-bottom:2rem;font-weight:calc(700 * var(--font-weight-factor))}.room-container__footer{position:sticky;display:flex;gap:1rem;bottom:0;z-index:2;overflow-x:auto;align-items:center;padding:2rem .5rem .5rem;background:linear-gradient(0deg,var(--background-color) 70%,rgba(0,0,0,0) 100%)}#room_switcher{display:grid;gap:.5rem;justify-content:flex-start}.room-shortcut{padding:.5em .8rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}.room-shortcut .room-tile__title{font-weight:500;font-size:.9rem}.ext-link-tile{position:relative;display:flex;width:min(24rem,100%);padding:1rem;border-radius:.5rem;flex-direction:column;background-size:contain;justify-content:flex-end;background-color:var(--banner-color);box-shadow:0 1rem 3rem -1rem rgba(0,0,0,.2);overflow:hidden}.ext-link-tile::after,.ext-link-tile::before{position:absolute;content:"";border-radius:50%}.ext-link-tile::before{top:5rem;right:-2rem;height:4rem;width:4rem;background-color:rgba(var(--text-color),.5)}.ext-link-tile::after{top:-2rem;right:-3rem;height:10rem;width:10rem;background-color:rgba(var(--text-color),.2)}.tile__title{padding-top:1em;font-size:3rem;line-height:.9;color:#fff;font-weight:calc(900 * var(--font-weight-factor))}.tile__brief{margin-top:1rem;color:rgba(255,255,255,.8)}@media only screen and (max-width:640px){#hero_title,.outlet-hero-section{margin-top:2rem}.hide-on-mobile{display:none}.outlet-preview{gap:1.5rem}.outlet-preview__number-container{grid-row:1/2}.outlet-preview__number::after{left:0}.outlet-preview__number{font-size:5rem}#outlet_switcher{width:calc(100% - 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)}.room-tile{padding-top:100%}.room-tile--main{padding-top:50%;grid-column:span 2}.room-tile .tile-content{top:0;position:absolute;align-items:center}.room-tile__icon{height:3rem;width:3rem}}@media only screen and (min-width:640px){#home_page,.page,.page-layout{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 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_switcher{padding:1rem 1.5rem}.outlet-hero-section{margin-top:4rem}.auto-grid-layout{grid-template-columns:auto 1fr}.rooms-layout{grid-template-rows:1fr 1fr}.room-container__header{padding:1.5rem 0}.people-grid{gap:5rem 3rem}#hero_title{font-size:3rem}}@media only screen and (min-width:1280px){#home_page,.page,.page-layout{grid-template-columns:1fr 85vw 1fr}.grid-3{justify-content:center}.grid-3>.grid{width:100%}.rooms-layout{grid-template-columns:repeat(3,1fr);grid-auto-flow:column}}@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)}.intern__level{transition:transform .3s}.intern__level:hover{transform:scale(1.1)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index f254108..b86e111 100644 --- a/css/main.scss +++ b/css/main.scss @@ -538,6 +538,10 @@ ol[type="1"]{ } } +.page{ + padding-bottom: 4rem; +} + .tag{ background: var(--accent-color); padding: 0.4rem 0.6rem; @@ -856,6 +860,7 @@ ol[type="1"]{ background: rgba(var(--foreground-color), 1); box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2); z-index: 2; + outline: none; } .outlet_switcher__floor{ overflow-x: auto; @@ -884,11 +889,14 @@ ol[type="1"]{ align-items: center; justify-self: flex-start; color: var(--accent-color); + background-color: rgba(var(--text-color), 0.06); + border-radius: 0.2rem; + padding: 0.8rem 0.8rem; margin-bottom: 0.5rem; font-size: 1rem; + gap: 0.5rem; .icon{ fill: var(--accent-color); - margin-right: 0.5rem; } } @@ -921,8 +929,6 @@ scroll-tab-panels{ } .rooms__header{ - position: sticky; - top: 0; z-index: 1; display: flex; align-items: center; @@ -934,9 +940,9 @@ scroll-tab-panels{ position: relative; display: flex; align-items: center; - font-weight: calc(500 * var(--font-weight-factor)); - margin-right: 0.5rem; + font-weight: calc(700 * var(--font-weight-factor)); padding-right: 1.5rem; + font-size: 1.5rem; } .room-button{ position: relative; @@ -1011,16 +1017,31 @@ scroll-tab-panels{ grid-row: span 2; .tile-content{ position: absolute; - top: 0; + bottom: 0; } } .tile-content{ + display: flex; + width: 100%; + height: 100%; padding: 1rem; + align-self: flex-end; + flex-direction: column; + justify-content: flex-end; } &:active{ transform: scale(0.95); } } +.room-tile__icon{ + height: 4rem; + width: 4rem; + margin-bottom: 1rem; + fill: rgba(var(--text-color), 1); +} +.room-tile__title{ + font-size: 1.2rem; +} #expanding_tile{ position: fixed; border-radius: 0.5rem; @@ -1037,7 +1058,8 @@ scroll-tab-panels{ z-index: 6; overflow-y: auto; background-color: var(--background-color); - align-content: flex-start; + grid-template-rows: auto auto 1fr auto; + align-items: flex-start; } .room{ padding-bottom: 4rem; @@ -1052,26 +1074,25 @@ scroll-tab-panels{ padding: 1rem 0; } #hero_title{ - font-size: 2.5rem; + font-size: 2rem; margin-bottom: 2rem; + font-weight: calc(700 * var(--font-weight-factor)); } .room-container__footer{ position: sticky; - display: grid; + display: flex; gap: 1rem; - grid-auto-flow: column; - justify-content: flex-start; - align-items: center; bottom: 0; z-index: 2; - margin-top: auto; - padding: 0.5rem; - background-color: inherit; + overflow-x: auto; + align-items: center; + padding: 2rem 0.5rem 0.5rem 0.5rem; + background: linear-gradient(0deg, var(--background-color) 70%, rgba(0,0,0,0) 100%); } #room_switcher{ display: grid; - gap: 1rem; + gap: 0.5rem; grid-auto-flow: column; justify-content: flex-start; } @@ -1080,6 +1101,56 @@ scroll-tab-panels{ padding: 0.5em 0.8rem; border-radius: 0.3rem; background-color: rgba(var(--text-color), 0.06); + .room-tile__title{ + font-weight: 500; + font-size: 0.9rem; + } +} + +.ext-link-tile{ + position: relative; + display: flex; + width: min(24rem, 100%); + padding: 1rem; + border-radius: 0.5rem; + flex-direction: column; + background-size: contain; + justify-content: flex-end; + background-color: var(--banner-color); + box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2); + -webkit-tap-highlight-color: transparent; + overflow: hidden; + &::after, + &::before{ + position: absolute; + content: ''; + border-radius: 50%; + } + &::before{ + top: 5rem; + right: -2rem; + height: 4rem; + width: 4rem; + background-color: rgba(var(--text-color), 0.5); + } + &::after{ + top: -2rem; + right: -3rem; + height: 10rem; + width: 10rem; + background-color: rgba(var(--text-color), 0.2); + } +} +.tile__title{ + padding-top: 1em; + font-size: 3rem; + line-height: 0.9; + color: white; + font-weight: calc(900 * var(--font-weight-factor)); +} +.tile__brief{ + margin-top: 1rem; + color: rgba(255, 255, 255, 0.8); } @media only screen and (max-width: 640px) { @@ -1122,13 +1193,22 @@ scroll-tab-panels{ .room-tile{ padding-top: 100%; &--main{ + padding-top: 50%; grid-column: span 2; } .tile-content{ top: 0; position: absolute; + align-items: center; } } + .room-tile__icon{ + height: 3rem; + width: 3rem; + } + #hero_title{ + margin-top: 2rem; + } } @media only screen and (min-width: 640px) { #home_page,.page, @@ -1250,6 +1330,9 @@ scroll-tab-panels{ .people-grid{ gap: 5rem 3rem; } + #hero_title{ + font-size: 3rem; + } } @media only screen and (min-width: 1280px) { #home_page, .page, diff --git a/js/index.js b/js/index.js index 1917bfe..264a545 100644 --- a/js/index.js +++ b/js/index.js @@ -707,12 +707,14 @@ function showOutletSwitcher(button) { `top: ${buttonDimensions.top + document.documentElement.scrollTop }px; left: ${buttonDimensions.left}px;` ); - getRef("outlet_switcher").classList.remove("hide"); + getRef("outlet_switcher").classList.remove("hide-completely"); getRef("outlet_switcher").animate(slideInDown, { duration: 300, easing: easeOutOvershoot, fill: "forwards", }); + getRef("outlet_switcher").setAttribute('tabindex', '-1') + getRef("outlet_switcher").focus() } function hideOutletSwitcher() { @@ -722,7 +724,7 @@ function hideOutletSwitcher() { easing: easeInOvershoot, fill: "forwards", }).onfinish = () => { - getRef("outlet_switcher").classList.add("hide"); + getRef("outlet_switcher").classList.add("hide-completely"); isOutletSwitcherOpen = false; }; } @@ -929,6 +931,8 @@ function renderRoomShorcuts() { if (room.href.split('#').pop() !== window.location.hash.split('#').pop()) { const clone = room.cloneNode(true) clone.classList.remove('room-tile', 'room-tile--main') + if(clone.querySelector('img, svg')) + clone.querySelector('img, svg').remove() clone.classList.add('room-shortcut') frag.append(clone) }