/** * DS—DDD Main Styles * Base mobile-first styles (0-767px) */ /* —————————————————————————————————————————— CSS VARIABLES —————————————————————————————————————————— */ :root { /* Colors */ --K00 : #FFFFFF; --K01 : #000000; --K02 : #666666; --KPink : #F87283; --KPink7 : #FA9FAA; /* 70% opacity */ --KPink3 : #FDD5DA; /* 30% opacity */ --KBlue : #0000FF; /* Fonts */ --F01: "Figtree", sans-serif; --F02: "Gentium Plus", serif; /* Font sizes */ --FS00: 0.75rem; /* 12px */ --FS01: 1.00rem; /* 16px */ --FS02: 1.25rem; /* 20px */ --FS03: 1.50rem; /* 24px */ --FS04: 2.00rem; /* 32px */ --FS05: 2.50rem; /* 40px */ --FS06: 3.00rem; /* 48px */ --FS07: 4.00rem; /* 64px */ --FS08: 5.00rem; /* 80px */ --FS09: 6.00rem; /* 96px */ --FS99: 3.50rem; /* 56px - used for big menu */ /* Spacing */ --S00: 0.75rem; /* 12px */ --S01: 1.25rem; /* 20px */ --S02: 1.875rem; /* 30px */ --S03: 2.5rem; /* 40px */ --S04: 3.125rem; /* 50px */ --S05: 3.75rem; /* 60px */ --S06: 5rem; /* 80px */ --S07: 6.25rem; /* 100px */ --S08: 7.5rem; /* 120px */ --S09: 8.75rem; /* 140px */ --S10: 10rem; /* 160px */ --S11: 12.5rem; /* 200px */ --S12: 13.75rem; /* 220px */ /* Aceleration & Transitions */ --A01: 0.2s ease; --A02: 0.3s ease; --A03: 0.5s ease; /* Mix */ --header-H: var(--S06); --caption-H: var(--S04); --available-H: calc(100dvh - var(--header-H)); --shape-H: calc(100dvh - var(--header-H) - var(--caption-H)); --mosaic-H: calc(100dvh - var(--header-H) - var(--caption-H)); } /* —————————————————————————————————————————— RESET & BASE —————————————————————————————————————————— */ * { box-sizing: border-box; } *:not(p) { margin: 0; padding: 0; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 0; } a { color: var(--K01); text-decoration: underline; text-underline-offset: 0.2em; } a:hover { color: var(--K01); text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } /* —————————————————————————————————————————— TYPOGRAPHY —————————————————————————————————————————— */ /* FONT FAMILIES */ body, .ds-popup-container { font-family: var(--F01); font-weight: 400; font-style: normal; } .keywords { font-family: var(--F02); font-weight: 400; font-style: italic; } /* FONT SIZES & VARIANTS */ body { font-size: var(--FS02); line-height: 1.50em; } .big-navigation { font-size: var(--FS99); line-height: 0.75em; font-weight: 700; } .big-navigation .big-number { font-variant-numeric: tabular-nums; } .main-navigation { font-size: var(--FS04); line-height: 0.75em; font-weight: 700; } .main-navigation a::before { font-weight: 400; } .footer-navigation { font-size: var(--FS01); line-height: 1.00em; letter-spacing: 0.025em; font-weight: 300; } h1 { font-size: var(--FS05); line-height: 1.30em; font-weight: 500; } h2 { font-size: var(--FS05); line-height: 1.30em; font-weight: 400; } h3 { font-size: var(--FS04); line-height: 1.40em; font-weight: 400; } h4 { font-size: var(--FS03); line-height: 1.40em; font-weight: 400; } h5 { font-size: var(--FS02); line-height: 1.40em; font-weight: 400; } h6 { font-size: var(--FS01); line-height: 1.40em; font-weight: 400; letter-spacing: 0.025em; text-transform: uppercase; } .text-xbig { font-size: var(--FS07); line-height: 1.30em; } .text-big { font-size: var(--FS04); line-height: 1.40em; } .text-regular { font-size: var(--FS02); line-height: 1.50em; } .text-small { font-size: var(--FS01); line-height: 1.40em; } .keywords { font-size: var(--FS08); line-height: 1.00em; } .caption { font-size: var(--FS00); line-height: 1.20em; letter-spacing: 0.025em; } .flickity-fullscreen-button { font-size: var(--FS00); line-height: 1.20em; letter-spacing: 0.025em; text-transform: uppercase; } .datasheet { font-size: var(--FS01); line-height: 1.20em; letter-spacing: 0.025em; } .ds-marker__dot { font-size: var(--FS00); line-height: 1.00em; font-weight: 500; text-transform: uppercase; } .ds-marker__label { font-size: var(--FS00); line-height: 1.00em; letter-spacing: 0.05em; text-transform: uppercase; } .ds-popup__category { font-size: var(--FS00); line-height: 1.00em; letter-spacing: 0.05em; text-transform: uppercase; } .ds-popup__title h3 { font-size: var(--FS04); line-height: 1.10em; } .ds-popup__text { font-size: var(--FS01); line-height: 1.40em; letter-spacing: 0.025em; } .ds-popup__link { font-size: var(--FS01); line-height: 1.00em; letter-spacing: 0.025em; } .site-footer { font-size: var(--FS01); line-height: 1.00em; letter-spacing: 0.025em; font-weight: 300; } /* —————————————————————————————————————————— LAYOUT —————————————————————————————————————————— */ body { width: 100%; height: 100%; margin: 0; padding: 0; background: var(--K00); color: var(--K01); } main { width: 100%; height: auto; margin: 0 0 80vh 0 ; padding: 0; background-color: var(--K00); position: relative; display: flex; flex-direction: column; z-index: 100; } html.is-flickity-fullscreen .site-main { z-index: auto; } .main-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--S01); } .home-layout { width: 100%; height: auto; margin: 0; padding: 0 var(--S01) var(--S01) var(--S01); display: flex; flex-direction: column; gap: var(--S07); } .page-layout { width: 100%; height: auto; margin: 0; padding: 0 var(--S01) var(--S01) var(--S01); display: flex; flex-direction: column; gap: var(--S07); } .blocks-layout { width: 100%; height: auto; margin: 0; padding: 0 var(--S01) var(--S01) var(--S01); display: flex; flex-direction: column; gap: var(--S07); } .unit-layout { width: 100%; height: auto; margin: 0; padding: 0 var(--S01) var(--S01) var(--S01); display: flex; flex-direction: column; gap: var(--S04); } .contact-layout { width: 100%; height: auto; margin: 0; padding: 0 var(--S01) var(--S01) var(--S01); display: flex; flex-direction: column; gap: var(--S04); } .colophon-layout { width: 100%; min-height: var(--available-H); margin: 0; padding: var(--S07) var(--S01); display: flex; flex-direction: column; gap: var(--S04); } /* —————————————————————————————————————————— UI COMPONENTS —————————————————————————————————————————— */ .ruler { width: 100%; height: 2px; margin: 0; padding: 0; background-color: var(--K01); border: none; } .bt-inline { display: inline; border: solid 2px var(--K01); padding: 0.15em 0.5em 0.25em 0.5em; border-radius: 100px; color: var(--K01); text-box: trim-both cap alphabetic; text-decoration: none !important; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color var(--A02), color var(--A02); } .bt-inline:hover { background-color: var(--K01); color: var(--K00); text-decoration: none !important; } /* —————————————————————————————————————————— MAIN HEADER & NAV —————————————————————————————————————————— */ .site-header { width: 100%; height: var(--header-H); margin: 0; padding: 0 var(--S01); display: flex; align-items: center; justify-content: center; position: relative; z-index: 200; } .site-branding { width: 100%; } /* BIG MENU */ .big-navigation { width: 100%; height: auto; margin: 0; padding: 0; } .big-navigation ul { width: 100%; height: auto; margin: 0; list-style: none; } .big-navigation li { grid-column: span 3; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .big-navigation a { color: var(--K01); text-decoration: none; display: inline-flex; overflow: hidden; } .big-navigation a:hover { color: var(--K01); text-decoration: none; } .big-navigation a .big-letter { position: relative; margin-left: -0.075em; background-color: var(--K00); z-index: 2; } .big-navigation a .big-number { position: relative; transform: translateX(-100%); transition: transform var(--A03); z-index: 1; } .big-navigation a:hover .big-number, .big-navigation .current-menu-item a .big-number { transform: translateX(0); overflow: visible; } .big-navigation li:first-child a .big-number { margin-left: -0.075em; } /* MENU PANEL */ .menu-panel { width: 100%; height: 66vh; position: fixed; top: 0; right: 0; margin: 0; padding: var(--S02) var(--S01) var(--S01); background: var(--K01); visibility: hidden; overflow-y: auto; transform: translateY(-100%); transition: transform var(--A03), visibility var(--A03); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; z-index: 999; } .menu-panel.toggled { transform: translateY(0); transition: transform var(--A03), visibility 0s 0s; visibility: visible; } .menu-panel .big-navigation a { color: var(--K00); } .menu-panel .big-navigation a:hover { color: var(--K00); } .menu-panel .big-navigation a .big-letter { background-color: var(--K01); } /* MAIN NAVIGATION */ .main-navigation ul { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-direction: column; gap: var(--S02); } .main-navigation li { margin: 0; padding: 0; } .main-navigation a { color: var(--K00); text-decoration: none; display: inline-flex; align-items: center; overflow: hidden; } .main-navigation a:hover { color: var(--K00); text-decoration: none; } .main-navigation a::before { content: "→\00a0"; display: inline-block; max-width: 0; overflow: hidden; transform: translateX(-100%); transition: max-width var(--A03), transform var(--A03); } .main-navigation .current-menu-item a::before, .main-navigation a:hover::before { max-width: 1.25em; transform: translateX(0); } /* MENU TOGGLE */ .menu-toggle { width: 35px; height: var(--header-H); margin: 0; padding: 0; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; position: fixed; top: 0; right: var(--S01); z-index: 1000; } .menu-toggle:focus { outline: none; } .menu-toggle span { display: block; width: 35px; height: 2px; background: var(--K01); transition: all var(--A02); } .menu-toggle.toggled span { background: var(--K00); } .menu-toggle.toggled span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-toggle.toggled span:nth-child(2) { transform: translateY(-6px) rotate(-45deg); } /* —————————————————————————————————————————— CONTENT —————————————————————————————————————————— */ /* HOME */ .entrance { width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: var(--S01); } .entrance__unit { width: 100%; margin: 0; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--S00); color: var(--K01); text-decoration: none; cursor: pointer; } .entrance__unit:hover { color: inherit; text-decoration: none; } .entrance__svg { display: block; width: 100%; height: auto; } .entrance__label { height: auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .home-text { padding-top: var(--S07); padding-bottom: var(--S07); } /* PAGES */ .page-body { width: 100%; min-height: var(--available-H); margin: 0; padding-top: var(--S07) 0 0 0; } .page-label { grid-column: 1 / span 12; margin-bottom: var(--S02); } .page-content { grid-column: 1 / span 12; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--S04); } .page-content ul { margin: 0; padding-left: 0.80em; list-style-position: outside; } .page-content li { margin: 0; padding-left: 0.50em; } /* BLOCKS */ .block__cover { width: 100%; height: var(--available-H); margin: 0; padding: 0; } .cover-image { width: 100%; height: var(--shape-H); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .cover-image img { width: 100%; height: 100%; object-fit: cover; } .cover-label { height: var(--caption-H); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .block__text { padding: var(--S07) 0; } .block__col-left { grid-column: 1 / span 12; } .block__col-left-cross { grid-column: 1 / span 12; } .block__col-right { grid-column: 1 / span 12; } .block__col-right-top { grid-column: 1 / span 12; } .block__col-single { grid-column: 1 / span 12; } .keywords-wrapper { width: max-content; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--S02); padding: 0; justify-self: center; align-self: flex-start; } .keywords-wrapper .ruler { width: 70%; } .keywords { text-align: center; } /* UNITS */ .unit__gallery { width: 100%; height: auto; margin: 0; } .unit__about { width: 100%; height: auto; margin: 0; } .unit__synopsis { grid-column: 1 / span 12; padding: var(--S08) 0 var(--S11) 0; } .unit__info { width: 100%; height: auto; margin: 0; } .unit__heading { width: 100%; height: auto; margin: 0; padding: var(--S01) 0; border-bottom: solid 1px var(--K01); background-color: var(--K00); } .unit__plans .unit__heading { position: sticky; top: 0; z-index: 1; } .unit__specs { grid-column: 1 / span 12; background-color: var(--K00); position:relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--S04); position: sticky; top: 0; align-self: flex-start; } .unit__datasheet { width: 100%; height: auto; padding-top: var(--S01); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--S00); } .unit__datasheet-label { grid-column: span 2; margin: 0; padding: 0; } .unit__datasheet-value { grid-column: span 3; margin: 0; padding: 0; } .unit__facade { width: auto; height: var(--S06); } .unit__plans { grid-column: 1 / span 12; background-color: var(--K00); position:relative; display: flex; flex-direction: column; gap: var(--S06); } .unit__plan { width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--S04); } .unit__floorplan { width: 100%; height: auto; margin: 0; padding: 0; position: relative; } .unit__floorplan-image { width: 100%; height: auto; margin: 0; padding: 0; } .unit__orientation { width: auto; height: var(--S05); position: absolute; top: 0; right: 0; } .unit__disclaimer { width: 100%; height: auto; margin: 0; } .unit__disclaimer-text { grid-column: 1 / span 12; padding: var(--S06) 0; } /* CONTACTS */ .contacts { width: 100%; height: auto; margin: 0; padding: 0; } .contacts__main { grid-column: 1 / span 12; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; } .contacts__extra { grid-column: 1 / span 12; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; text-align: left; } .contacts a { color: var(--K01); text-decoration: underline; text-underline-offset: 0.1em; } /* COLOPHON */ .colophon__label { grid-row: 1; grid-column: 1 / span 12; margin-bottom: var(--S02); } .colophon__list--1 { grid-row: 3; grid-column: 1 / span 12; } .colophon__list--2 { grid-row: 2; grid-column: 1 / span 12; margin-bottom: var(--S02); } .colophon__list { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--S00); flex-wrap: wrap; list-style: none; } .colophon__list-label { display: block; font-weight: 700; } .colophon__list-name { display: block; } .colophon a { color: var(--K01); text-decoration: none; } .colophon a:hover { color: var(--K01); text-decoration: underline; text-underline-offset: 0.2em; } /* —————————————————————————————————————————— LOCATION MAP —————————————————————————————————————————— */ .location-map { width: 100%; margin: 0; padding: 0; } .location-map__canvas { width: 100%; height: 70vh; margin: 0; padding: 0; position: relative !important; overflow: hidden; touch-action: pan-y pinch-zoom; } /* MARKERS */ .ds-marker { position: relative; display: flex; align-items: flex-start; } .ds-marker.is-open { z-index: 10; } .ds-marker__dot { width: 24px; height: 24px; margin: 0; padding: 0; background: var(--K00); color: var(--KBlue); border: 2px solid var(--KBlue); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--A01), color var(--A01), transform var(--A01); } .ds-marker__dot:hover { background-color: var(--KBlue); color: var(--K00); } .ds-marker.is-open .ds-marker__dot { background-color: var(--KBlue); color: transparent; z-index: 100; } .ds-marker.is-open .ds-marker__dot::before, .ds-marker.is-open .ds-marker__dot::after { content: ''; position: absolute; width: 12px; height: 2px; background-color: var(--K00); } .ds-marker.is-open .ds-marker__dot::before { transform: rotate(45deg); } .ds-marker.is-open .ds-marker__dot::after { transform: rotate(-45deg); } .ds-marker--complete .ds-marker__dot { background-color: var(--KBlue); color: var(--K00); } /* MARKER LABEL */ .ds-marker__label { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 24px; margin: 0; padding: 0; background: var(--K00); color: var(--KBlue); border-radius: 24px; display: flex; flex-direction: row; align-items: center; overflow: hidden; opacity: 0; transition: max-width var(--A02), opacity var(--A02), padding var(--A02); z-index: 50; } .ds-marker.is-open .ds-marker__label { width: max-content; padding: 0 24px 0 36px; opacity: 1; } .ds-marker--complete .ds-marker__label { cursor: pointer; background-color: var(--KBlue); color: var(--K00); } .ds-marker--complete .ds-marker__label:hover { background: var(--KBlue); } .ds-marker--building .ds-marker__dot { width: 48px; height: 48px; background: var(--KBlue); background-image: url('img/icons/arcs.svg'); background-size: 20px; background-repeat: no-repeat; background-position: center; cursor: default; } .ds-marker--building .ds-marker__dot:hover { transform: none; } /* MODAL */ .ds-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; } .ds-modal.is-open { display: flex; } .ds-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 255, 0); cursor: pointer; } .ds-modal__dialog { position: relative; width: 1000px; height: 50vh; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); margin: 0; padding: 15px; border-radius: 30px; background-color: var(--KBlue); color: var(--K00); overflow: hidden; box-sizing: border-box; } .ds-modal__dialog:not(:has(.ds-popup__media)) { width: 500px; } .ds-modal__content { width: 100%; height: 100%; } .ds-modal__close { position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; padding: 0; background: transparent; border: 0; cursor: pointer; z-index: 1; } .ds-modal__close::before, .ds-modal__close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 2px; background-color: var(--K00); } .ds-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); } .ds-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .ds-popup { width: 100%; height: 100%; display: flex; flex-direction: row; gap: 15px; border-radius: 15px; overflow: hidden; } .ds-popup__media, .ds-popup__body { flex: 1 1 0; min-width: 0; height: 100%; } .ds-popup__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .ds-popup__body { display: flex; } .ds-popup__body-inner { padding: var(--S02); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--S02); } .ds-popup__title { display: flex; flex-direction: column; gap: var(--S00); } .ds-popup__link { color: var(--K00); text-decoration: none; } .ds-popup__link:hover { color: var(--K00); text-decoration: underline; text-underline-offset: 4px; } /* MAP CONTROLS */ .mapboxgl-ctrl-bottom-right { bottom: 20px !important; right: 20px !important; z-index: 200; } .mapboxgl-ctrl { margin: 0 !important; } .mapboxgl-ctrl-group { border-radius: 100px !important; border: 2px solid var(--KPink7) !important; padding: 8px; display: flex; flex-direction: column; gap: 10px !important; box-shadow: none !important; background-color: var(--K00) !important; } .mapboxgl-ctrl-group button { width: 40px !important; height: 40px !important; border-radius: 50% !important; background-color: var(--KPink7) !important; color: var(--K00) !important; border: none !important; cursor: pointer; transition: background-color var(--A02); } .mapboxgl-ctrl-group button:hover { background-color: var(--KPink) !important; color: var(--K00) !important; } .mapboxgl-ctrl-icon { background-size: 24px 24px !important; background-position: center !important; background-repeat: no-repeat !important; filter: none !important; } .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { background-image: url('img/icons/icn-plus.svg') !important; } .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { background-image: url('img/icons/icn-minus.svg') !important; } .mapboxgl-ctrl-logo { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='0.3' stroke='%23F87283' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' fill='%23F87283' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='0.9' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E") !important; } .mapboxgl-ctrl-logo { display: none !important;} .mapboxgl-ctrl-attrib { font-size: 10px; opacity: 0.3; } .mapboxgl-ctrl-attrib { display: none !important; } .mapboxgl-ctrl-attrib a { color: var(--KPink) !important; } /* —————————————————————————————————————————— FOOTER —————————————————————————————————————————— */ .site-footer { width: 100%; height: 80vh; margin: 0; padding: var(--S01); background-color: var(--KPink); color: var(--K00); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; position: fixed; bottom: 0; left: 0; z-index: 1; } .site-footer__bottom { width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--S04); align-items: flex-start; } .site-footer .big-navigation a { color: var(--K00); } .site-footer .big-navigation a:hover { color: var(--K00); } .site-footer .big-navigation a .big-letter { background-color: var(--KPink); } /* FOOTER NAVIGATION */ .footer-navigation { width: 100%; height: auto; margin: 0; padding: 0; } .footer-navigation > ul { width: 100%; height: auto; margin: 0; list-style: none; } .footer-navigation > ul > li { grid-column: span 12; margin-top: 15px; } .footer-navigation > ul > li > a { display: none; } /* hide top-level links */ .footer-navigation .sub-menu { width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; list-style: none; } .footer-navigation .sub-menu li { margin: 0; padding: 0; } .footer-navigation .sub-menu a { color: var(--K00); text-decoration: none; } .footer-navigation .sub-menu .current-menu-item a, .footer-navigation .sub-menu a:hover { color: var(--K00); text-decoration: underline; text-underline-offset: 4px; } /* SITE INFO */ .site-info { width: 100%; margin: 0; } .site-info div { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-star; justify-content: flex-end; gap: var(--S01); } .site-info__copy { grid-row: 1; grid-column: span 12; } .site-info__adrs { grid-row: 2; grid-column: span 12; } .site-info .id-footer { width: 30px; height: 30px;} /* —————————————————————————————————————————— UTILITIES —————————————————————————————————————————— */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* —————————————————————————————————————————— IMAGE CLASSES —————————————————————————————————————————— */ img.landscape { display: block; } img.portrait { display: block; } img.square { display: block; }