/* INFO: When creating a floor plan, classes are added to : body.floorplanPage - for the floorplan page body.floorplanOverlay - for pages where floorplan is used as an overlay (displayed when clicking on the button) When the overlay opens, classe are added to : body.floorplanOverlay.floorplanOverlayOpen */ body { } body .rightSide { height: 100vh; padding: 0 !important; } .floorplanContainer { position: relative; display: flex; width: 100vw; height: 100vh; flex-direction: row; color: var(--floorplan-text); overflow: hidden; transition-delay: 0ms !important; } body.floorplanOverlay .floorplanContainer { transition: all 1s ease !important; transform: translateY(-100%) !important; } body.floorplanOverlay.floorplanOverlayOpen .floorplanContainer { transition: all 1s ease !important; transform: translateY(0%) !important; } .floorplanContainer::before { content: ""; position: absolute; inset: 0; filter: blur(10px); z-index: 0; } .floorplanContainer::after { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.9); background-color: var(--floorplan-bg); z-index: 1; } body.floorplanOverlay .floorplanContainer::after { background-color: var(--floorplan-overlay-bg); backdrop-filter: var(--floorplan-overlay-backdrop-filter); } .floorplanContainer > * { position: relative; z-index: 2; } .floorplanContainer[data-loading] > div { opacity: 0.5 !important; pointer-events: none !important; } .floorplanBackToAllUnits { position: relative; margin-right: auto; margin-left: calc(var(--fpLegendWidth) + 50px); } body.floorplanOverlay .floorplanBackToAllUnits { position: absolute; top: 10px; z-index: 3; } .fpDownloadButton { padding: max(1rem, 16px); display: flex; flex-direction: column; align-items: center; } .floorplanBackToAllUnits i { font-size: 1rem; margin-right: 0.3rem; vertical-align: middle; color: lightgray !important; } /* Units */ .unitsControl, .unitsContainer { position: relative; top: 0; height: 100%; } .unitsControl { width: auto; left: 0; display: flex; overflow-y: auto; background-image: radial-gradient(ellipse at right, #ffffff10 0%, transparent 50%); margin-left: 40px; } body.floorplanOverlay .unitsControl { margin-left: 0; } .unitsControl > div { position: relative; } .unitsContainer { width: var(--fpUnitsWidth); right: 0; overflow: hidden; } .unitsContainer > svg { width: 100%; height: 100%; padding: 6.5rem 3rem 5rem 3rem; padding: 0; mask-image: linear-gradient(to bottom, transparent 0%, black 80px, black calc(100% - 80px), transparent 100%), linear-gradient(to right, #00000010 0%, black 10%, black calc(100% - 10%), transparent 100%); mask-composite: intersect; } .unitsContainer #units > * { transition: all 0.2s ease; fill-opacity: 0.6; cursor: pointer; mix-blend-mode: screen; fill: #333; } body.hasHover .unitsContainer #units > *:hover { fill-opacity: 1; } /* Units */ /* Legend */ .unitsControl .legend { width: var(--fpLegendWidth); height: calc(100% - var(--footerHeight) - var(--headerHeight)); top: var(--headerHeight); padding: 0 0.2rem; display: flex; flex-direction: column; overflow-y: auto; } body.floorplanOverlay .unitsControl .legend { height: 100%; top: 0; } .unitsControl .legend > * { position: relative; } .unitsControl .legend .disclaimer { font-size: 0.8em; opacity: 0.7; user-select: none; transition: opacity 0.2s; padding: 0 1rem 0; color: rgba(255, 255, 255, 0.3); margin: auto 0 0 0; } body.floorplanOverlay .unitsControl .legend .disclaimer { margin-bottom: 1rem; } .unitsControl .legend .disclaimer:hover { opacity: 1; } /* Specs */ .unitsControl .legend .spec { flex-wrap: wrap; display: flex; opacity: 0; height: 0; overflow: hidden; transition: opacity 1s ease; } .unitsControl .legend .spec.active { height: auto; opacity: 1; } .unitsControl .legend .spec .statusValue { width: auto !important; padding: 0; border-radius: 1rem; margin-left: auto; font-family: var(--font-base); font-weight: var(--font-accent-weight) !important; font-size: max(0.9rem, 12px) !important; padding: 0.2em 1em; text-shadow: 0 0 5px rgba(0, 0, 0, 1); white-space: nowrap; } .unitsControl .legend .spec > div { padding: 0.75rem; position: relative; width: 100%; border-bottom: solid 1px var(--floorplan-values-border); display: flex; color: var(--floorplan-text); opacity: 0.8; transition: background-color 0.2s ease; font-family: var(--font-base); font-weight: var(--font-base-weight); border-radius: var(--container-border-radius); } .unitsControl .legend .spec > div:first-child { font-family: var(--font-accent); border-bottom: 1px solid #8873612e; } body.hasHover .unitsControl .legend .spec > div:hover { user-select: none; transition: background-color 0s; background-color: var(--floorplan-values-hover-bg) !important; } .unitsControl .legend .spec > div > div { width: 50%; position: relative; } .unitsControl .legend .spec > div > div:nth-child(2n + 0) { text-align: right; font-size: max(0.8rem, 12px); color: var(--floorplan-values); font-weight: var(--font-accent-weight); } .unitsControl .legend .spec > div > div:nth-child(2n + 1) { font-weight: 400; white-space: nowrap; font-size: max(0.8rem, 12px); } /* Specs */ /* Switcher */ .switcher { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; align-items: center; margin-bottom: max(2rem, 20px); margin-top: max(1rem, 16px); } .switcher .switcherNumber { font-size: max(1.75rem, 20px); padding: 0.5em 0; color: var(--floorplan-text); font-weight: var(--font-accent-weight); font-family: var(--font-accent); min-width: 86px; width: fit-content; text-align: center; } .switcherButton { width: 4rem; height: 2rem; border-radius: 4px; transition: var(--fpButtonHoverTransition); cursor: pointer; box-shadow: var(--fpButtonOutline); position: relative; } .switcherButton.disabled { pointer-events: none; opacity: 0.5; } .switcherButton:before { content: ""; background-image: var(--fpNextButtonIcon); background-position: center; background-repeat: no-repeat; pointer-events: none; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .switcherButton:nth-child(1):before { background-image: var(--fpPrevButtonIcon); } body.hasHover .switcherButton:hover { background: var(--fpButtonHoverBackground); box-shadow: var(--fpButtonHoverOutline); } .filterItem i, .filterItem[data-filter="all"] i { box-shadow: 0 0 0 2px var(--status-all); } /* Filters */ .filters { display: flex; flex-direction: column; gap: max(1.2rem, 14px); margin-top: 1.25rem; } .filterContainer { display: flex; justify-content: start; padding: 1rem 0.5rem; font-family: var(--font-base); font-size: max(1rem, 16px); flex-direction: column; align-items: center; } .filterTitle { font-size: max(1rem, 16px); font-weight: var(--font-accent-weight); font-family: var(--font-accent); } .filterContainer .filterItem { color: var(--floorplan-text); transition: all 0.2s; cursor: pointer; user-select: none; text-align: left; font-size: max(0.9rem, 14px); display: flex; align-items: center; padding-left: 0.5rem; } .filterContainer .filterItem i { display: inline-block; width: max(0.9rem, 14px); height: max(0.9rem, 14px); border-radius: 50%; margin-right: max(0.5rem, 8px); vertical-align: middle; } .filterItem.active i, .filterItem.active[data-filter="all"] i { background-color: var(--status-all); } body.hasHover .filterContainer .filterItem:hover, .filterContainer .filterItem.active { color: var(--floorplan-text-active); } /* Pinch to zoom */ .panoStartAnimation-pinch { position: absolute; z-index: 100; display: block; left: calc(50% - 150px); width: 300px; height: 300px; top: calc(50% - 150px); width: 100%; height: 100%; left: 0; top: 0; font-weight: 500; transform-origin: bottom; pointer-events: none !important; opacity: 0; transform: scale(0) translateY(100%); transform: scale(0.9) translateY(0); transition: all 0.5s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; background-image: radial-gradient(#00000080 10%, transparent 50%); } .panoStartAnimation-pinch > img { width: 60px; display: block; margin: 0 auto 0.5rem auto; } /* visible state */ .hintAnimationStart { opacity: 1 !important; transform: scale(1) translateY(0) !important; } /* UI Change with Overlay open-close */ body.floorplanOverlay header, body.floorplanOverlay footer { transition: all 0.3s ease; } body.floorplanOverlay.floorplanOverlayOpen header, body.floorplanOverlay.floorplanOverlayOpen footer { opacity: 0; transform: translateY(-100%); } body.floorplanOverlay.floorplanOverlayOpen footer { transform: translateY(100%); } body .floorViewCloseButton { position: absolute; top: 10px; right: 10px; cursor: pointer; border-radius: 50%; overflow: hidden; z-index: 21; } .unitsContainer svg.floorSvg > *:not(image) { mix-blend-mode: screen; }