v0.15.22
Changed rooms layout
This commit is contained in:
sairaj mote
parent
4a83898e5e
commit
400cb95840
@ -3744,7 +3744,7 @@ scrollTabPanels.innerHTML = `
|
||||
.tab-panels{
|
||||
display: grid;
|
||||
gap: var(--gap);
|
||||
height: var(--height);
|
||||
// height: var(--height);
|
||||
overflow-y: auto;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--background);
|
||||
@ -3811,10 +3811,11 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
|
||||
|
||||
handlePanelChange = (e) => {
|
||||
if (e.detail.targetPanelGroup === this.id) {
|
||||
this.tabPanels.scrollTo({
|
||||
/* this.tabPanels.scrollTo({
|
||||
top: (this._assignedElements[e.detail.panelIndex].getBoundingClientRect().top - this.tabPanels.getBoundingClientRect().top + this.tabPanels.scrollTop),
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}) */
|
||||
this._assignedElements[e.detail.panelIndex].scrollIntoView({block: "nearest", inline: 'start', behavior: 'smooth'})
|
||||
}
|
||||
}
|
||||
|
||||
@ -3837,7 +3838,7 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
|
||||
},
|
||||
{
|
||||
threshold: 0.8,
|
||||
root: this.tabPanels
|
||||
// root: this.tabPanels
|
||||
})
|
||||
this.tabPanels.addEventListener('slotchange', e => {
|
||||
this._assignedElements = this.tabPanelsSlot.assignedElements()
|
||||
|
||||
272
css/main.css
272
css/main.css
@ -12,13 +12,13 @@ body {
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 100, 100, 100;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #efefef;
|
||||
--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: #F3F3F3;
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
body[data-theme=dark] {
|
||||
@ -26,21 +26,20 @@ body[data-theme=dark] {
|
||||
--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);
|
||||
background: #0a0a0a;
|
||||
}
|
||||
body[data-theme=dark] #outlet_switcher {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--text-color), 0.06)), to(rgba(var(--text-color), 0.06))), rgba(var(--foreground-color), 1);
|
||||
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
|
||||
}
|
||||
body[data-theme=dark] .outlet-preview__info {
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/4;
|
||||
}
|
||||
|
||||
/* .h1, .h2, .h3, .h4, .h5{
|
||||
// font-family: 'Lora', serif;
|
||||
} */
|
||||
.h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
@ -75,19 +74,14 @@ p {
|
||||
}
|
||||
|
||||
img {
|
||||
-o-object-fit: cover;
|
||||
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;
|
||||
align-items: center;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
@ -125,8 +119,7 @@ sm-button {
|
||||
}
|
||||
|
||||
sm-tab-header {
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -134,8 +127,6 @@ ul {
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -176,15 +167,11 @@ ul {
|
||||
}
|
||||
|
||||
.align-start {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
@ -192,15 +179,11 @@ ul {
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: start;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-right {
|
||||
@ -208,8 +191,7 @@ ul {
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.justify-self-center {
|
||||
@ -221,16 +203,11 @@ ul {
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
@ -283,8 +260,7 @@ ul {
|
||||
}
|
||||
|
||||
.no-transformations {
|
||||
-webkit-transform: none !important;
|
||||
transform: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
@ -297,8 +273,7 @@ ul {
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
transform: scale(0);
|
||||
background: rgba(var(--text-color), 0.16);
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -386,9 +361,7 @@ ul {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -412,42 +385,34 @@ ul {
|
||||
}
|
||||
|
||||
.elevator__header {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 1.2rem 1.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#elevator_sections {
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
align-content: flex-start;
|
||||
padding: 0 1.5rem 4rem 1.5rem;
|
||||
}
|
||||
|
||||
#elevator_button_panel {
|
||||
gap: 2rem;
|
||||
overflow: auto;
|
||||
-ms-scroll-snap-type: x proximity;
|
||||
scroll-snap-type: x proximity;
|
||||
scroll-snap-type: x proximity;
|
||||
grid-template-columns: repeat(3, min(40ch, 80%));
|
||||
}
|
||||
#elevator_button_panel li {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
align-content: flex-start;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
#elevator_button_panel sup {
|
||||
@ -457,10 +422,7 @@ ul {
|
||||
|
||||
.outlet-section {
|
||||
display: grid;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.popup__header__close {
|
||||
@ -473,9 +435,7 @@ ul {
|
||||
padding: 1rem;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
@ -483,14 +443,11 @@ ul {
|
||||
}
|
||||
.floor__button--active {
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
-webkit-box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
|
||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
|
||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
|
||||
.elevator__floor-line {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
height: 0.1rem;
|
||||
margin-left: 2rem;
|
||||
background-color: var(--red);
|
||||
@ -522,22 +479,17 @@ ul {
|
||||
}
|
||||
.theme-switcher .icon {
|
||||
position: absolute;
|
||||
-webkit-transition: -webkit-transform 0.6s;
|
||||
transition: -webkit-transform 0.6s;
|
||||
transition: transform 0.6s;
|
||||
transition: transform 0.6s, -webkit-transform 0.6s;
|
||||
}
|
||||
|
||||
.theme-switcher__checkbox {
|
||||
display: none;
|
||||
}
|
||||
.theme-switcher__checkbox:checked ~ .moon-icon {
|
||||
-webkit-transform: scale(0) rotate(90deg);
|
||||
transform: scale(0) rotate(90deg);
|
||||
transform: scale(0) rotate(90deg);
|
||||
}
|
||||
.theme-switcher__checkbox:not(:checked) ~ .sun-icon {
|
||||
-webkit-transform: scale(0) rotate(-90deg);
|
||||
transform: scale(0) rotate(-90deg);
|
||||
transform: scale(0) rotate(-90deg);
|
||||
}
|
||||
|
||||
.page {
|
||||
@ -563,7 +515,6 @@ ul {
|
||||
}
|
||||
|
||||
#floor_line_map {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
height: 40vh;
|
||||
@ -584,10 +535,7 @@ ul {
|
||||
margin-top: -0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border: solid 0.2rem var(--red);
|
||||
-webkit-transition: -webkit-transform 0.1s linear;
|
||||
transition: -webkit-transform 0.1s linear;
|
||||
transition: transform 0.1s linear;
|
||||
transition: transform 0.1s linear, -webkit-transform 0.1s linear;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@ -600,24 +548,16 @@ ul {
|
||||
|
||||
.floor-label {
|
||||
position: absolute;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
left: 0.75rem;
|
||||
margin-top: -0.9rem;
|
||||
padding-bottom: 1rem;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.floor-label--active .floor-title {
|
||||
opacity: 1;
|
||||
-webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.floor-circle {
|
||||
@ -636,10 +576,7 @@ ul {
|
||||
margin-left: 1rem;
|
||||
border-radius: 0.2rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
-webkit-transition: opacity 0.3s, -webkit-box-shadow 0.3s;
|
||||
transition: opacity 0.3s, -webkit-box-shadow 0.3s;
|
||||
transition: box-shadow 0.3s, opacity 0.3s;
|
||||
transition: box-shadow 0.3s, opacity 0.3s, -webkit-box-shadow 0.3s;
|
||||
}
|
||||
|
||||
#floor_container {
|
||||
@ -663,16 +600,31 @@ ul {
|
||||
|
||||
.outlet-preview {
|
||||
position: relative;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.outlet-number {
|
||||
display: grid;
|
||||
position: relative;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
aspect-ratio: 1/1;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 900;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.2rem;
|
||||
place-content: center;
|
||||
justify-self: flex-start;
|
||||
background: rgba(var(--text-color), 1);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0.2rem 0.2rem 0 var(--red);
|
||||
}
|
||||
|
||||
.outlet-preview__info {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
|
||||
.outlet__title {
|
||||
@ -691,15 +643,17 @@ ul {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
-webkit-box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.3);
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.3);
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.2);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.outlet-preview__button {
|
||||
justify-self: flex-start;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
/* .outlet-preview__carousel{
|
||||
}
|
||||
*/
|
||||
.label {
|
||||
position: relative;
|
||||
font-size: 0.8rem;
|
||||
@ -732,9 +686,7 @@ sm-carousel {
|
||||
}
|
||||
|
||||
.investor-card {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
@ -771,8 +723,7 @@ sm-carousel {
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
-webkit-box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@ -793,12 +744,8 @@ sm-carousel {
|
||||
}
|
||||
|
||||
.outlet-label {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
justify-self: flex-start;
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 0.5rem;
|
||||
@ -809,36 +756,24 @@ sm-carousel {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
scroll-tab-header,
|
||||
scroll-tab-panels {
|
||||
--border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
scroll-tab-header {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
--gap: 0.5rem;
|
||||
--padding: 0.5rem;
|
||||
margin-right: 1.5rem;
|
||||
--background: linear-gradient(rgba(var(--text-color), 0.04), rgba(var(--text-color), 0.04)), rgba(var(--foreground-color), 1);
|
||||
--padding: 0.5rem 0;
|
||||
--border-radius: 0.3rem;
|
||||
--background: var(--background-color);
|
||||
--grid-auto-flow: column;
|
||||
justify-self: flex-start;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
scroll-tab-panels {
|
||||
--height: max(24rem, 50vh);
|
||||
--gap: 4rem;
|
||||
--background: transparent;
|
||||
-ms-scroll-chaining: none;
|
||||
overscroll-behavior: contain;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
scroll-tab-panels > * {
|
||||
min-height: max(24rem, 50vh);
|
||||
margin-bottom: 6rem;
|
||||
min-height: 100vh;
|
||||
padding-top: 4rem;
|
||||
opacity: 0.4;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
scroll-tab-panels > [active] {
|
||||
@ -846,9 +781,7 @@ scroll-tab-panels > [active] {
|
||||
}
|
||||
|
||||
.auto-grid-layout {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@ -857,27 +790,34 @@ scroll-tab-panels > [active] {
|
||||
}
|
||||
|
||||
.room-button {
|
||||
position: relative;
|
||||
opacity: 0.6;
|
||||
border-radius: 0;
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.6;
|
||||
-webkit-transition: opacity 0.3s, background-color 0.3s;
|
||||
transition: opacity 0.3s, background-color 0.3s;
|
||||
padding: 0.6rem 0.8rem;
|
||||
}
|
||||
.room-button[active] {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
opacity: 1;
|
||||
border-radius: 0.3rem;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.room-button[active] .icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
.room-button[active]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 0.1rem;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 0.2rem 0.2rem 0 0;
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
@ -895,8 +835,6 @@ table {
|
||||
|
||||
#ico_page__carousel {
|
||||
width: min(36rem, 100%);
|
||||
height: -webkit-max-content;
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
@ -915,8 +853,7 @@ table {
|
||||
position: absolute;
|
||||
margin-top: 1rem;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.progress-bar__circle {
|
||||
@ -947,29 +884,20 @@ table {
|
||||
}
|
||||
|
||||
.floor-label {
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
}
|
||||
.floor-label .floor-title {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(-1rem);
|
||||
transform: translateX(-1rem);
|
||||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transform: translateX(-1rem);
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
|
||||
}
|
||||
.floor-label--active {
|
||||
opacity: 1;
|
||||
}
|
||||
.floor-label--active .floor-title {
|
||||
opacity: 1;
|
||||
-webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#outlet_switcher {
|
||||
@ -1027,25 +955,21 @@ table {
|
||||
}
|
||||
|
||||
.carousel-holder {
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
-webkit-transform: translateY(-2rem);
|
||||
transform: translateY(-2rem);
|
||||
align-self: flex-start;
|
||||
transform: translateY(-2rem);
|
||||
z-index: 1;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.carousel-holder--left {
|
||||
grid-row: 1/2;
|
||||
grid-column: 1/2;
|
||||
-webkit-box-shadow: -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.carousel-holder--left ~ .outlet-preview__border {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.carousel-holder--right {
|
||||
-webkit-box-shadow: 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.outlet-preview__border {
|
||||
@ -1053,7 +977,7 @@ table {
|
||||
}
|
||||
|
||||
.outlet-preview__info {
|
||||
padding: 2rem 3rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.outlet-preview__carousel {
|
||||
@ -1068,10 +992,6 @@ table {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
scroll-tab-header {
|
||||
--grid-auto-flow: row;
|
||||
}
|
||||
|
||||
.auto-grid-layout {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
@ -1086,9 +1006,7 @@ table {
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
/* & > .grid:not(:last-of-type){
|
||||
position: relative;
|
||||
&::after{
|
||||
@ -1126,7 +1044,6 @@ table {
|
||||
|
||||
.page-link {
|
||||
cursor: pointer;
|
||||
-webkit-transition: color 0.3s;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.page-link:hover {
|
||||
@ -1137,16 +1054,11 @@ table {
|
||||
}
|
||||
|
||||
.outlet-section .icon {
|
||||
-webkit-transform: translateX(-0.5rem);
|
||||
transform: translateX(-0.5rem);
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transform: translateX(-0.5rem);
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
}
|
||||
.outlet-section:hover .icon {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.floor__button:hover {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -12,36 +12,33 @@ body {
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 100, 100, 100;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #efefef;
|
||||
--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: #F3F3F3;
|
||||
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);
|
||||
background: #0a0a0a;
|
||||
#outlet_switcher{
|
||||
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.outlet-preview__info{
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
}
|
||||
|
||||
.full-bleed{
|
||||
grid-column: 1/4;
|
||||
}
|
||||
|
||||
.h1, .h2, .h3, .h4, .h5{
|
||||
// font-family: 'Lorr', serif;
|
||||
}
|
||||
/* .h1, .h2, .h3, .h4, .h5{
|
||||
// font-family: 'Lora', serif;
|
||||
} */
|
||||
.h1{
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
@ -534,10 +531,26 @@ ul{
|
||||
align-items: center;
|
||||
display: grid;
|
||||
}
|
||||
.outlet-number{
|
||||
display: grid;
|
||||
position: relative;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
aspect-ratio: 1/1;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 900;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.2rem;
|
||||
place-content: center;
|
||||
justify-self: flex-start;
|
||||
background: rgba(var(--text-color), 1);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0.2rem 0.2rem 0 var(--red);
|
||||
}
|
||||
.outlet-preview__info{
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
.outlet__title{
|
||||
font-weight: 700;
|
||||
@ -553,16 +566,16 @@ ul{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.3);
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.2);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.outlet-preview__button{
|
||||
justify-self: flex-start;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.outlet-preview__carousel{
|
||||
/* .outlet-preview__carousel{
|
||||
}
|
||||
|
||||
*/
|
||||
.label{
|
||||
position: relative;
|
||||
font-size: 0.8rem;
|
||||
@ -658,29 +671,21 @@ sm-carousel{
|
||||
}
|
||||
}
|
||||
|
||||
scroll-tab-header,
|
||||
scroll-tab-panels{
|
||||
--border-radius: 0.5rem;
|
||||
}
|
||||
scroll-tab-header{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
--gap: 0.5rem;
|
||||
--padding: 0.5rem;
|
||||
margin-right: 1.5rem;
|
||||
--background: linear-gradient(rgba(var(--text-color), 0.04), rgba(var(--text-color), 0.04)), rgba(var(--foreground-color), 1);
|
||||
--padding: 0.5rem 0;
|
||||
--border-radius: 0.3rem;
|
||||
--background: var(--background-color);
|
||||
--grid-auto-flow: column;
|
||||
justify-self: flex-start;
|
||||
z-index: 1;
|
||||
}
|
||||
scroll-tab-panels{
|
||||
--height: max(24rem, 50vh);
|
||||
--gap: 4rem;
|
||||
--background: transparent;
|
||||
overscroll-behavior: contain;
|
||||
& > *{
|
||||
min-height: max(24rem, 50vh);
|
||||
margin-bottom: 6rem;
|
||||
min-height: 100vh;
|
||||
padding-top: 4rem;
|
||||
opacity: 0.4;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
@ -696,19 +701,29 @@ scroll-tab-panels{
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
.room-button{
|
||||
position: relative;
|
||||
opacity: 0.6;
|
||||
border-radius: 0;
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s, background-color 0.3s;
|
||||
padding: 0.6rem 0.8rem;
|
||||
&[active]{
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
opacity: 1;
|
||||
border-radius: 0.3rem;
|
||||
color: var(--accent-color);
|
||||
.icon{
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 0.1rem;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 0.2rem 0.2rem 0 0;
|
||||
background: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -857,7 +872,7 @@ table{
|
||||
width: 66%;
|
||||
}
|
||||
.outlet-preview__info{
|
||||
padding: 2rem 3rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
.outlet-preview__carousel{
|
||||
padding: 2rem 2rem 5rem 2rem;
|
||||
@ -868,9 +883,6 @@ table{
|
||||
.outlet-hero-section{
|
||||
margin-top: 4rem;
|
||||
}
|
||||
scroll-tab-header{
|
||||
--grid-auto-flow: row;
|
||||
}
|
||||
.auto-grid-layout{
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
130
index.html
130
index.html
@ -139,15 +139,15 @@
|
||||
<div class="elevator__floor-line"></div>
|
||||
</div>
|
||||
<div class="outlet-section page-link interact" data-target="bitbonds">
|
||||
<h3 class="h3 margin-bottom-0-5r">BitCoin Bonds</h3>
|
||||
<h3 class="h3 margin-bottom-0-5r">1. BitCoin Bonds</h3>
|
||||
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
||||
</div>
|
||||
<div class="outlet-section page-link interact" data-target="bob'sfund">
|
||||
<h3 class="h3 margin-bottom-0-5r">Bob's Fund</h3>
|
||||
<h3 class="h3 margin-bottom-0-5r">2. Bob's Fund</h3>
|
||||
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
||||
</div>
|
||||
<div class="outlet-section page-link interact" data-target="ico">
|
||||
<h3 class="h3 margin-bottom-0-5r">ICO</h3>
|
||||
<h3 class="h3 margin-bottom-0-5r">3. ICO</h3>
|
||||
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
||||
</div>
|
||||
</li>
|
||||
@ -210,13 +210,14 @@
|
||||
<main id="floor_1__outlets" class="grid">
|
||||
<div id="bit_bond_outlet" class="outlet-preview carousel-container">
|
||||
<div class="grid outlet-preview__info">
|
||||
<div class="outlet-number">1</div>
|
||||
<h3 class="outlet__title">bitcoin bonds</h3>
|
||||
<p class="outlet__description margin-bottom-1-5r">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
|
||||
</p>
|
||||
<button class="button page-link outlet-preview__button" data-target="bitbonds">
|
||||
<span class="button__label">VISIT</span>
|
||||
<svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12l-6 6V6z"/></svg>
|
||||
<svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid carousel-holder carousel-holder--right">
|
||||
@ -226,13 +227,14 @@
|
||||
</div>
|
||||
<div id="bob_fund_outlet" class="outlet-preview carousel-container">
|
||||
<div class="grid outlet-preview__info">
|
||||
<div class="outlet-number">2</div>
|
||||
<h3 class="outlet__title">Bob's Fund</h3>
|
||||
<p class="outlet__description margin-bottom-1-5r">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
|
||||
</p>
|
||||
<button class="button page-link outlet-preview__button" data-target="bob'sfund">
|
||||
<span class="button__label">VISIT</span>
|
||||
<svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12l-6 6V6z"/></svg>
|
||||
<svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid carousel-holder carousel-holder--left">
|
||||
@ -242,13 +244,14 @@
|
||||
</div>
|
||||
<div id="ico_outlet" class="outlet-preview carousel-container">
|
||||
<div class="grid outlet-preview__info">
|
||||
<div class="outlet-number">3</div>
|
||||
<h3 class="outlet__title">ICO</h3>
|
||||
<p class="outlet__description margin-bottom-1-5r">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
|
||||
</p>
|
||||
<button class="button page-link outlet-preview__button" data-target="ico">
|
||||
<span class="button__label">VISIT</span>
|
||||
<svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12l-6 6V6z"/></svg>
|
||||
<svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid carousel-holder carousel-holder--right">
|
||||
@ -296,64 +299,62 @@
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
|
||||
</button>
|
||||
<h2 class="h2 weight-700 margin-bottom-1r">BitCoin Bonds</h2>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
|
||||
<p>lorem40 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
|
||||
</section>
|
||||
<h3 class="h3 margin-bottom-1r">Rooms</h3>
|
||||
<div class="grid auto-grid-layout">
|
||||
<scroll-tab-header data-target="bit_bond_page_group" class="margin-bottom-1r">
|
||||
<button class="room-button">
|
||||
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z"/><polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93"/><polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9"/></g></g></svg>
|
||||
<span class="button__label">
|
||||
Returns
|
||||
</span>
|
||||
</button>
|
||||
<button class="room-button">
|
||||
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
||||
<span class="button__label">
|
||||
More
|
||||
</span>
|
||||
</button>
|
||||
</scroll-tab-header>
|
||||
<scroll-tab-panels id="bit_bond_page_group">
|
||||
<div class="flex w-100" style="overflow-x: auto;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr class="tr">
|
||||
<td class="td weight-700 uppercase">Series</td>
|
||||
<td class="td weight-700 uppercase">Series date</td>
|
||||
<td class="td weight-700 uppercase">Time Elapsed</td>
|
||||
<td class="td weight-700 uppercase">Current value</td>
|
||||
<td class="td weight-700 uppercase">Rate of return</td>
|
||||
<scroll-tab-header data-target="bit_bond_page_group" class="margin-bottom-1r">
|
||||
<button class="room-button">
|
||||
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z"/><polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93"/><polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9"/></g></g></svg>
|
||||
<span class="button__label">
|
||||
Returns
|
||||
</span>
|
||||
</button>
|
||||
<button class="room-button">
|
||||
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
||||
<span class="button__label">
|
||||
More
|
||||
</span>
|
||||
</button>
|
||||
</scroll-tab-header>
|
||||
<scroll-tab-panels id="bit_bond_page_group">
|
||||
<div class="flex w-100" style="overflow-x: auto;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr class="tr">
|
||||
<td class="td weight-700 uppercase">Series</td>
|
||||
<td class="td weight-700 uppercase">Series date</td>
|
||||
<td class="td weight-700 uppercase">Time Elapsed</td>
|
||||
<td class="td weight-700 uppercase">Current value</td>
|
||||
<td class="td weight-700 uppercase">Rate of return</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$975</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$975</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$1057</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$1064</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$1205</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$1285</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$2513</td>
|
||||
</tr>
|
||||
<td class="td weight-500">$1057</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$1064</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p id="bit_bond_info">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore error omnis ipsam ut incidunt, doloremque pariatur expedita distinctio itaque.
|
||||
</p>
|
||||
</scroll-tab-panels>
|
||||
</div>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$1205</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$1285</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="td weight-500">$2513</td>
|
||||
</tr>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p id="bit_bond_info">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore error omnis ipsam ut incidunt, doloremque pariatur expedita distinctio itaque.
|
||||
</p>
|
||||
</scroll-tab-panels>
|
||||
</article>
|
||||
|
||||
<article id="bob'sfund" class="page grid hide-completely">
|
||||
@ -367,7 +368,6 @@
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
|
||||
</section>
|
||||
<h3 class="h3 margin-bottom-1r">Rooms</h3>
|
||||
<div class="grid auto-grid-layout">
|
||||
<scroll-tab-header data-target="bob_fund_page_group" class="margin-bottom-1r">
|
||||
<button class="room-button">
|
||||
<svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
|
||||
@ -391,7 +391,6 @@
|
||||
<p id="bob_fund_info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi facere officiis eius iusto quibusdam tenetur illo blanditiis asperiores et corporis!</p>
|
||||
</div>
|
||||
</scroll-tab-panels>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article id="ico" class="page grid hide-completely">
|
||||
@ -405,7 +404,6 @@
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
|
||||
</section>
|
||||
<h3 class="h3 margin-bottom-1r">Rooms</h3>
|
||||
<div class="grid auto-grid-layout">
|
||||
<scroll-tab-header data-target="ico_page_group" class="margin-bottom-1r">
|
||||
<button class="room-button" title="Investors">
|
||||
<svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
|
||||
@ -426,12 +424,12 @@
|
||||
</div>
|
||||
<ul id="ico_phase_list"></ul>
|
||||
</scroll-tab-panels>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- -->
|
||||
<script src="components.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
|
||||
<script id="standard_UI_functions">
|
||||
|
||||
const domRefs = {}
|
||||
@ -857,7 +855,7 @@
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
const render = {
|
||||
bitBondRow(obj){
|
||||
const {series, currentValue, timeElapsed} = obj
|
||||
@ -1437,9 +1435,9 @@
|
||||
easing: 'ease'
|
||||
}
|
||||
|
||||
const siteMapTimeline = gsap.timeline({defaults: {ease: 'power1'}, onReverseComplete: resumeScrolling, paused: true})
|
||||
const siteMapTimeline = gsap.timeline({defaults: {ease: 'power2'}, onReverseComplete: resumeScrolling, paused: true})
|
||||
siteMapTimeline.from('#elevator_popup', {opacity: 0})
|
||||
siteMapTimeline.from('.close-button', {scale: 0})
|
||||
.from('.close-button', {scale: 0}, '-= 0.2')
|
||||
.from('#elevator_sections', {opacity: 0, y: 10})
|
||||
.from('.outlet-section', {opacity: 0, x: 10, stagger: 0.1}, '-=0.1')
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user