diff --git a/assets/investors-thumbnail/Abhijeet Das Gupta.jpg b/assets/investors-thumbnail/Abhijeet Das Gupta.jpg index ba33683..73368a9 100644 Binary files a/assets/investors-thumbnail/Abhijeet Das Gupta.jpg and b/assets/investors-thumbnail/Abhijeet Das Gupta.jpg differ diff --git a/assets/investors-thumbnail/Amit Jagetia.jpg b/assets/investors-thumbnail/Amit Jagetia.jpg index fae9fc4..31ab0ee 100644 Binary files a/assets/investors-thumbnail/Amit Jagetia.jpg and b/assets/investors-thumbnail/Amit Jagetia.jpg differ diff --git a/assets/investors-thumbnail/Amitesh Anand.jpg b/assets/investors-thumbnail/Amitesh Anand.jpg index dc54e45..2338889 100644 Binary files a/assets/investors-thumbnail/Amitesh Anand.jpg and b/assets/investors-thumbnail/Amitesh Anand.jpg differ diff --git a/assets/investors-thumbnail/Atul Agarwal.jpg b/assets/investors-thumbnail/Atul Agarwal.jpg index c5f2f2e..88547a2 100644 Binary files a/assets/investors-thumbnail/Atul Agarwal.jpg and b/assets/investors-thumbnail/Atul Agarwal.jpg differ diff --git a/assets/investors-thumbnail/Barun Kumar.jpg b/assets/investors-thumbnail/Barun Kumar.jpg index b12b049..adc22b8 100644 Binary files a/assets/investors-thumbnail/Barun Kumar.jpg and b/assets/investors-thumbnail/Barun Kumar.jpg differ diff --git a/assets/investors-thumbnail/Janardan Tiwary.jpg b/assets/investors-thumbnail/Janardan Tiwary.jpg index 49f2a4a..0d59513 100644 Binary files a/assets/investors-thumbnail/Janardan Tiwary.jpg and b/assets/investors-thumbnail/Janardan Tiwary.jpg differ diff --git a/assets/investors-thumbnail/Kanwal Koul.jpg b/assets/investors-thumbnail/Kanwal Koul.jpg index d8f5852..642821e 100644 Binary files a/assets/investors-thumbnail/Kanwal Koul.jpg and b/assets/investors-thumbnail/Kanwal Koul.jpg differ diff --git a/assets/investors-thumbnail/Mansoor Ahmed.jpg b/assets/investors-thumbnail/Mansoor Ahmed.jpg index a41aa08..89d197e 100644 Binary files a/assets/investors-thumbnail/Mansoor Ahmed.jpg and b/assets/investors-thumbnail/Mansoor Ahmed.jpg differ diff --git a/assets/investors-thumbnail/Meghna Patel.jpg b/assets/investors-thumbnail/Meghna Patel.jpg index 3e0f7dd..18c1bbe 100644 Binary files a/assets/investors-thumbnail/Meghna Patel.jpg and b/assets/investors-thumbnail/Meghna Patel.jpg differ diff --git a/assets/investors-thumbnail/Nikhil Kulkarni.jpg b/assets/investors-thumbnail/Nikhil Kulkarni.jpg index 9ddafcc..47b55d6 100644 Binary files a/assets/investors-thumbnail/Nikhil Kulkarni.jpg and b/assets/investors-thumbnail/Nikhil Kulkarni.jpg differ diff --git a/assets/investors-thumbnail/Pankaj Miglani.jpg b/assets/investors-thumbnail/Pankaj Miglani.jpg index 3d66b04..5b94e81 100644 Binary files a/assets/investors-thumbnail/Pankaj Miglani.jpg and b/assets/investors-thumbnail/Pankaj Miglani.jpg differ diff --git a/assets/investors-thumbnail/Rajeev Kumar Gupta.jpg b/assets/investors-thumbnail/Rajeev Kumar Gupta.jpg index 2bc063b..169e0d9 100644 Binary files a/assets/investors-thumbnail/Rajeev Kumar Gupta.jpg and b/assets/investors-thumbnail/Rajeev Kumar Gupta.jpg differ diff --git a/assets/investors-thumbnail/Sudhir Taneja.jpg b/assets/investors-thumbnail/Sudhir Taneja.jpg index 18a39b8..7cd7e03 100644 Binary files a/assets/investors-thumbnail/Sudhir Taneja.jpg and b/assets/investors-thumbnail/Sudhir Taneja.jpg differ diff --git a/assets/investors-thumbnail/Varucchi Dubey.jpg b/assets/investors-thumbnail/Varucchi Dubey.jpg index 0d36af8..ef100d7 100644 Binary files a/assets/investors-thumbnail/Varucchi Dubey.jpg and b/assets/investors-thumbnail/Varucchi Dubey.jpg differ diff --git a/assets/investors-thumbnail/Venkat Narayanan.jpg b/assets/investors-thumbnail/Venkat Narayanan.jpg index ea39c46..42ea895 100644 Binary files a/assets/investors-thumbnail/Venkat Narayanan.jpg and b/assets/investors-thumbnail/Venkat Narayanan.jpg differ diff --git a/assets/investors/Abhijeet Das Gupta.jpg b/assets/investors/Abhijeet Das Gupta.jpg index e3148e5..286ff38 100644 Binary files a/assets/investors/Abhijeet Das Gupta.jpg and b/assets/investors/Abhijeet Das Gupta.jpg differ diff --git a/assets/investors/Amit Jagetia.jpg b/assets/investors/Amit Jagetia.jpg index b24c89e..1d87d12 100644 Binary files a/assets/investors/Amit Jagetia.jpg and b/assets/investors/Amit Jagetia.jpg differ diff --git a/assets/investors/Amitesh Anand.jpg b/assets/investors/Amitesh Anand.jpg index b14753a..6e16f9a 100644 Binary files a/assets/investors/Amitesh Anand.jpg and b/assets/investors/Amitesh Anand.jpg differ diff --git a/assets/investors/Atul Agarwal.jpg b/assets/investors/Atul Agarwal.jpg index 9a7aedf..317ee07 100644 Binary files a/assets/investors/Atul Agarwal.jpg and b/assets/investors/Atul Agarwal.jpg differ diff --git a/assets/investors/Barun Kumar.jpg b/assets/investors/Barun Kumar.jpg index e5afd41..95fda93 100644 Binary files a/assets/investors/Barun Kumar.jpg and b/assets/investors/Barun Kumar.jpg differ diff --git a/assets/investors/Janardan Tiwary.jpeg b/assets/investors/Janardan Tiwary.jpeg deleted file mode 100644 index 2d9a095..0000000 Binary files a/assets/investors/Janardan Tiwary.jpeg and /dev/null differ diff --git a/assets/investors/Janardan Tiwary.jpg b/assets/investors/Janardan Tiwary.jpg new file mode 100644 index 0000000..893b25d Binary files /dev/null and b/assets/investors/Janardan Tiwary.jpg differ diff --git a/assets/investors/Kanwal Koul.jpeg b/assets/investors/Kanwal Koul.jpeg deleted file mode 100644 index ba24643..0000000 Binary files a/assets/investors/Kanwal Koul.jpeg and /dev/null differ diff --git a/assets/investors/Kanwal Koul.jpg b/assets/investors/Kanwal Koul.jpg new file mode 100644 index 0000000..b03738c Binary files /dev/null and b/assets/investors/Kanwal Koul.jpg differ diff --git a/assets/investors/Mansoor Ahmed.jpg b/assets/investors/Mansoor Ahmed.jpg index 81035a4..dbe23bf 100644 Binary files a/assets/investors/Mansoor Ahmed.jpg and b/assets/investors/Mansoor Ahmed.jpg differ diff --git a/assets/investors/Meghna Patel.jpeg b/assets/investors/Meghna Patel.jpeg deleted file mode 100644 index b42d8b9..0000000 Binary files a/assets/investors/Meghna Patel.jpeg and /dev/null differ diff --git a/assets/investors/Meghna Patel.jpg b/assets/investors/Meghna Patel.jpg new file mode 100644 index 0000000..c13d5f5 Binary files /dev/null and b/assets/investors/Meghna Patel.jpg differ diff --git a/assets/investors/Nikhil Kulkarni.jpg b/assets/investors/Nikhil Kulkarni.jpg index 0a4ee88..d6d1987 100644 Binary files a/assets/investors/Nikhil Kulkarni.jpg and b/assets/investors/Nikhil Kulkarni.jpg differ diff --git a/assets/investors/Pankaj Miglani.jpg b/assets/investors/Pankaj Miglani.jpg index 0f972ff..d1f8156 100644 Binary files a/assets/investors/Pankaj Miglani.jpg and b/assets/investors/Pankaj Miglani.jpg differ diff --git a/assets/investors/Rajeev Kumar Gupta.jpg b/assets/investors/Rajeev Kumar Gupta.jpg index 5970515..0c96e87 100644 Binary files a/assets/investors/Rajeev Kumar Gupta.jpg and b/assets/investors/Rajeev Kumar Gupta.jpg differ diff --git a/assets/investors/Sudhir Taneja.jpg b/assets/investors/Sudhir Taneja.jpg index 5c23825..eadb96e 100644 Binary files a/assets/investors/Sudhir Taneja.jpg and b/assets/investors/Sudhir Taneja.jpg differ diff --git a/assets/investors/Varucchi Dubey.jpg b/assets/investors/Varucchi Dubey.jpg index 329d4a9..730d6eb 100644 Binary files a/assets/investors/Varucchi Dubey.jpg and b/assets/investors/Varucchi Dubey.jpg differ diff --git a/assets/investors/Venkat Narayanan.jpg b/assets/investors/Venkat Narayanan.jpg index 85df6a4..bba6f53 100644 Binary files a/assets/investors/Venkat Narayanan.jpg and b/assets/investors/Venkat Narayanan.jpg differ diff --git a/components.js b/components.js index 67f9f22..2944a89 100644 --- a/components.js +++ b/components.js @@ -2339,9 +2339,7 @@ button:focus-visible{ } .carousel-container{ position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; + display: grid; width: 100%; -webkit-box-align: center; -ms-flex-align: center; @@ -2451,7 +2449,8 @@ customElements.define('sm-carousel', class extends HTMLElement { }).append(smCarousel.content.cloneNode(true)) this.isAutoPlaying = false - this.autoPlayInterval = 3000 + this.autoPlayInterval = 5000 + this.autoPlayTimeout this.activeSlideNum = 0 this.carouselItems this.indicators @@ -2504,14 +2503,14 @@ customElements.define('sm-carousel', class extends HTMLElement { else this.showSlide(0) if (this.isAutoPlaying) { - setTimeout(() => { + this.autoPlayTimeout = setTimeout(() => { this.startAutoPlay() }, this.autoPlayInterval); } } stopAutoPlay = () => { - this.isAutoPlaying = false + this.removeAttribute('autoplay') } connectedCallback() { @@ -2617,7 +2616,8 @@ customElements.define('sm-carousel', class extends HTMLElement { this.startAutoPlay() } else { - this.stopAutoPlay() + this.isAutoPlaying = false + clearTimeout(this.autoPlayTimeout) } } @@ -2626,7 +2626,7 @@ customElements.define('sm-carousel', class extends HTMLElement { this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim())) } else { - this.autoPlayInterval = 3000 + this.autoPlayInterval = 5000 } } } @@ -3490,9 +3490,6 @@ smTabPanels.innerHTML = ` -webkit-box-sizing: border-box; box-sizing: border-box; } -:host{ - width: 100%; -} .panel-container{ position: relative; display: -webkit-box; @@ -3504,17 +3501,7 @@ smTabPanels.innerHTML = ` } slot::slotted(.hide-completely){ display: none; -} -@media (hover: none){ - .tab-header::-webkit-scrollbar-track { - -webkit-box-shadow: none !important; - background-color: transparent !important; - } - .tab-header::-webkit-scrollbar { - height: 0; - background-color: transparent; - } -} +}
Nothing to see here. diff --git a/css/main.css b/css/main.css index 3dc9d93..b0a84bf 100644 --- a/css/main.css +++ b/css/main.css @@ -37,7 +37,7 @@ body[data-theme=dark] .outlet-preview { -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px -1px, rgba(0, 0, 0, 0.4) 0px 1px 3px -1px; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px -1px, rgba(0, 0, 0, 0.4) 0px 1px 3px -1px; } -body[data-theme=dark] sm-carousel { +body[data-theme=dark] .outlet-preview sm-carousel { border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7); } @@ -168,6 +168,16 @@ ul { gap: 3rem; } +.pos-relative { + position: relative; +} + +.align-start { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} + .align-center { -webkit-box-align: center; -ms-flex-align: center; @@ -178,6 +188,12 @@ ul { text-align: center; } +.justify-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: start; +} + .justify-center { -webkit-box-pack: center; -ms-flex-pack: center; @@ -188,6 +204,15 @@ ul { margin-left: auto; } +.align-self-center { + -ms-flex-item-align: center; + align-self: center; +} + +.justify-self-center { + justify-self: center; +} + .direction-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; @@ -416,6 +441,11 @@ ul { padding: 0 1rem; } +.tag { + background: var(--accent-color); + padding: 0.4rem 0.6rem; +} + .common-padding { padding: 0 1rem; } @@ -433,6 +463,7 @@ ul { .outlet-preview { padding-top: 2rem; background: rgba(var(--foreground-color), 1); + border-radius: 0.3rem; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; @@ -444,6 +475,9 @@ ul { background-size: contain; } */ } +.outlet-preview sm-carousel { + border-top: dashed 0.5rem rgba(var(--foreground-color), 1); +} .outlet__title { font-weight: 900; @@ -462,13 +496,13 @@ ul { } sm-carousel { - border-top: dashed 0.5rem rgba(var(--foreground-color), 1); + position: relative; height: 100%; background: rgba(var(--text-color), 0.06); padding-bottom: 4rem; padding-top: 1.5rem; - --arrow-left: 2rem; - --arrow-right: 2rem; + --arrow-left: 1.5rem; + --arrow-right: 1.5rem; --arrow-fill: rgba(var(--text-color), 1); --arrow-background: transparent; --arrow-box-shadow: none; @@ -483,18 +517,33 @@ sm-carousel { } .investor-card { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; grid-template-columns: auto 1fr; + 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: 4rem; - height: 4rem; - border-radius: 50%; + width: 8rem; + border-radius: 0.5rem; +} + +.investor__bio { + font-size: 0.9rem; + margin-top: 0.5rem; } .investor__contribution-container { @@ -526,6 +575,10 @@ table { white-space: nowrap; } +#ico_page__carousel { + width: min(32rem, 100%); +} + @media only screen and (max-width: 640px) { .hide-on-mobile { display: none; diff --git a/css/main.min.css b/css/main.min.css index c7c558d..ab20bdb 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}html{scroll-behavior:smooth}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: #efefef;--error-color: red;color:rgba(var(--text-color), 1);height:calc(100%);font-size:clamp(1rem, 1.2vmax, 3rem);background:rgba(var(--text-color), 0.06)}body[data-theme=dark]{--accent-color:#2fb3ff;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--error-color: rgb(255, 106, 106);background:rgba(var(--foreground-color), 1)}body[data-theme=dark] .outlet-preview{background:rgba(var(--text-color), 0.02);-webkit-box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px}body[data-theme=dark] sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 0.7)}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{max-width:60ch;line-height:1.5}img{-o-object-fit:cover;object-fit:cover}button{position:relative;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;-webkit-tap-highlight-color:transparent}.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:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea{--border-radius: 0.2rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.2rem}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.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}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{-webkit-transform:none !important;transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;-webkit-transform:scale(0);transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-0.5rem}.button__label{font-size:1rem}.button__icon{height:1.1rem;width:1.1rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.popup__header__close{padding:.5rem;cursor:pointer}#elevator_button_panel{gap:1rem;grid-template-columns:repeat(3, 1fr)}.floor__button{padding:1rem;height:4rem;width:4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:.5rem;font-size:1.5rem;font-weight:900;background:rgba(var(--text-color), 0.06)}.floor__button--active{background:rgba(var(--text-color), 0.2);-webkit-box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3, 1fr)}#elevator_button{justify-self:flex-start}#main_logo{justify-self:center}#main_header__logo{height:1.8rem;width:1.8rem}#theme_switcher{justify-self:flex-end}.page{position:relative;padding:0 1rem}.common-padding{padding:0 1rem}.floor{margin-bottom:3rem}#floor_1__outlets{margin:1rem 0;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr))}.outlet-preview{padding-top:2rem;background:rgba(var(--foreground-color), 1);-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s;-webkit-box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px}.outlet__title{font-weight:900;text-transform:capitalize}.outlet__description{color:rgba(var(--text-color), 0.8)}.label{position:relative;font-size:.8rem;color:var(--accent-color);margin-bottom:.3rem}sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 1);height:100%;background:rgba(var(--text-color), 0.06);padding-bottom:4rem;padding-top:1.5rem;--arrow-left: 2rem;--arrow-right: 2rem;--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{-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"img ." "para para"}.investor__image{grid-area:img;width:4rem;height:4rem;border-radius:50%}.investor__contribution-container{grid-area:para}sm-tab-header{padding:.3rem;border-radius:.3rem;background:rgba(var(--text-color), 0.06)}table{border-collapse:collapse;width:-webkit-max-content;width:-moz-max-content;width:max-content}.tr{margin:.5rem}.tr:nth-of-type(even){background:rgba(var(--text-color), 0.1)}.td{padding:.6rem .8rem;white-space:nowrap}@media only screen and (max-width: 640px){.hide-on-mobile{display:none}}@media only screen and (min-width: 640px){.h1{font-size:4rem}.h2{font-size:2.5rem}.h3{font-size:1.5rem}.h4{font-size:1.1rem}#main_header{padding:1.5rem 2rem}.page{padding:0 3rem}.common-padding{padding:0 2rem}.floor__aside{position:absolute;left:1rem;top:50%;-webkit-transform:translateY(-50%) rotate(-90deg);transform:translateY(-50%) rotate(-90deg)}.outlet-preview{padding-top:3rem}table{justify-self:center}#elevator_sections{gap:3rem;grid-template-columns:auto 1fr}}@media only screen and (min-width: 1280px){.page{padding:0 10vw}#elevator_popup{--width: min(100%, 54rem) }}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}body[data-theme=dark] .outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px}.outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px}.page-link{cursor:pointer;-webkit-transition:color .3s;transition:color .3s}.page-link:hover{color:var(--accent-color)}.page-link:hover .icon{fill:var(--accent-color)}.floor__button:hover{background:rgba(var(--text-color), 0.2)}} \ No newline at end of file +*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}html{scroll-behavior:smooth}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: #efefef;--error-color: red;color:rgba(var(--text-color), 1);height:calc(100%);font-size:clamp(1rem, 1.2vmax, 3rem);background:rgba(var(--text-color), 0.06)}body[data-theme=dark]{--accent-color:#2fb3ff;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--error-color: rgb(255, 106, 106);background:rgba(var(--foreground-color), 1)}body[data-theme=dark] .outlet-preview{background:rgba(var(--text-color), 0.02);-webkit-box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px}body[data-theme=dark] .outlet-preview sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 0.7)}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{max-width:60ch;line-height:1.5}img{-o-object-fit:cover;object-fit:cover}button{position:relative;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;-webkit-tap-highlight-color:transparent}.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:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea{--border-radius: 0.2rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.2rem}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.pos-relative{position:relative}.align-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{-webkit-transform:none !important;transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;-webkit-transform:scale(0);transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-0.5rem}.button__label{font-size:1rem}.button__icon{height:1.1rem;width:1.1rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.popup__header__close{padding:.5rem;cursor:pointer}#elevator_button_panel{gap:1rem;grid-template-columns:repeat(3, 1fr)}.floor__button{padding:1rem;height:4rem;width:4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:.5rem;font-size:1.5rem;font-weight:900;background:rgba(var(--text-color), 0.06)}.floor__button--active{background:rgba(var(--text-color), 0.2);-webkit-box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3, 1fr)}#elevator_button{justify-self:flex-start}#main_logo{justify-self:center}#main_header__logo{height:1.8rem;width:1.8rem}#theme_switcher{justify-self:flex-end}.page{position:relative;padding:0 1rem}.tag{background:var(--accent-color);padding:.4rem .6rem}.common-padding{padding:0 1rem}.floor{margin-bottom:3rem}#floor_1__outlets{margin:1rem 0;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr))}.outlet-preview{padding-top:2rem;background:rgba(var(--foreground-color), 1);border-radius:.3rem;-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s;-webkit-box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px}.outlet-preview sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 1)}.outlet__title{font-weight:900;text-transform:capitalize}.outlet__description{color:rgba(var(--text-color), 0.8)}.label{position:relative;font-size:.8rem;color:var(--accent-color);margin-bottom:.3rem}sm-carousel{position:relative;height:100%;background:rgba(var(--text-color), 0.06);padding-bottom:4rem;padding-top:1.5rem;--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{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;grid-template-columns:auto 1fr;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:8rem;border-radius:.5rem}.investor__bio{font-size:.9rem;margin-top:.5rem}.investor__contribution-container{grid-area:para}sm-tab-header{padding:.3rem;border-radius:.3rem;background:rgba(var(--text-color), 0.06)}table{border-collapse:collapse;width:-webkit-max-content;width:-moz-max-content;width:max-content}.tr{margin:.5rem}.tr:nth-of-type(even){background:rgba(var(--text-color), 0.1)}.td{padding:.6rem .8rem;white-space:nowrap}#ico_page__carousel{width:min(32rem, 100%)}@media only screen and (max-width: 640px){.hide-on-mobile{display:none}}@media only screen and (min-width: 640px){.h1{font-size:4rem}.h2{font-size:2.5rem}.h3{font-size:1.5rem}.h4{font-size:1.1rem}#main_header{padding:1.5rem 2rem}.page{padding:0 3rem}.common-padding{padding:0 2rem}.floor__aside{position:absolute;left:1rem;top:50%;-webkit-transform:translateY(-50%) rotate(-90deg);transform:translateY(-50%) rotate(-90deg)}.outlet-preview{padding-top:3rem}table{justify-self:center}#elevator_sections{gap:3rem;grid-template-columns:auto 1fr}}@media only screen and (min-width: 1280px){.page{padding:0 10vw}#elevator_popup{--width: min(100%, 54rem) }}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}body[data-theme=dark] .outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px}.outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px}.page-link{cursor:pointer;-webkit-transition:color .3s;transition:color .3s}.page-link:hover{color:var(--accent-color)}.page-link:hover .icon{fill:var(--accent-color)}.floor__button:hover{background:rgba(var(--text-color), 0.2)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index e6354d8..66dc030 100644 --- a/css/main.scss +++ b/css/main.scss @@ -32,9 +32,9 @@ body[data-theme='dark']{ .outlet-preview{ background: rgba(var(--text-color), 0.02); box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px -1px, rgba(0, 0, 0, 0.4) 0px 1px 3px -1px; - } - sm-carousel{ - border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7); + sm-carousel{ + border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7); + } } } /* .font-mono{ @@ -138,18 +138,33 @@ ul{ .gap-3{ gap: 3rem; } +.pos-relative{ + position: relative; +} +.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; } +.align-self-center{ + align-self: center; +} +.justify-self-center{ + justify-self: center; +} .direction-column{ flex-direction: column; } @@ -334,6 +349,11 @@ ul{ padding: 0 1rem; } +.tag{ + background: var(--accent-color); + padding: 0.4rem 0.6rem; +} + .common-padding{ padding: 0 1rem; } @@ -351,9 +371,14 @@ ul{ .outlet-preview{ padding-top: 2rem; background: rgba(var(--foreground-color), 1); - // border: solid 0.8rem rgba(var(--text-color), 1); + // border: solid 0.2rem rgba(var(--text-color), 0.2); + border-radius: 0.3rem; transition: box-shadow 0.3s; + // box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; + sm-carousel{ + border-top: dashed 0.5rem rgba(var(--foreground-color), 1); + } /* &:nth-of-type(1){ background: url(../assets/bg/floor-1-bg.svg) no-repeat top center, linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1)); background-size: contain; @@ -376,13 +401,13 @@ ul{ } sm-carousel{ - border-top: dashed 0.5rem rgba(var(--foreground-color), 1); + position: relative; height: 100%; background: rgba(var(--text-color), 0.06); padding-bottom: 4rem; padding-top: 1.5rem; - --arrow-left: 2rem; - --arrow-right: 2rem; + --arrow-left: 1.5rem; + --arrow-right: 1.5rem; --arrow-fill: rgba(var(--text-color), 1); --arrow-background: transparent; --arrow-box-shadow: none; @@ -397,15 +422,29 @@ sm-carousel{ } .investor-card{ - align-items: center; + align-items: flex-start; grid-template-columns: auto 1fr; - grid-template-areas: 'img .' 'para para'; + grid-template-rows: auto 1fr; + &--small{ + grid-template-areas: 'img .' 'para para'; + .investor__image{ + width: 4rem; + height: 4rem; + border-radius: 50%; + } + } + &--big{ + grid-template-areas: 'img .' 'img para'; + } } .investor__image{ grid-area: img; - width: 4rem; - height: 4rem; - border-radius: 50%; + width: 8rem; + border-radius: 0.5rem; +} +.investor__bio{ + font-size: 0.9rem; + margin-top: 0.5rem; } .investor__contribution-container{ grid-area: para; @@ -434,6 +473,10 @@ table{ white-space: nowrap; } +#ico_page__carousel{ + width: min(32rem ,100%); +} + @media only screen and (max-width: 640px) { .hide-on-mobile{ diff --git a/index.html b/index.html index 4b5c8ac..b1e95ec 100644 --- a/index.html +++ b/index.html @@ -39,15 +39,15 @@