.sl-hero { --sl-hero-bg: var(--sl-teal); --sl-k: 1; position: relative; padding-inline: var(--sl-gutter); --sl-header-h: 108px; } .sl-hero::before { content: ""; position: absolute; inset-inline: calc(50% - 50vw + var(--sl-sbw, 0px) / 2); inset-block-start: calc(-1 * var(--sl-header-h)); height: calc(var(--sl-header-h) + 50%); background: var(--sl-bg-soft, #F9FAFC); z-index: -1; } @media (max-width: 1024px) { .sl-hero { --sl-header-h: 80px; } } .sl-hero__card { position: relative; width: 100%; max-width: 1320px; height: calc(612px * var(--sl-k)); margin-inline: auto; background: var(--sl-hero-bg); border-radius: calc(20px * var(--sl-k)); clip-path: path("M20,0 H1300 A20,20 0 0 1 1320,20 V592 A20,20 0 0 1 1300,612 H765 C717.75,612 707.5,562 660,562 C612.5,562 602.25,612 555,612 H20 A20,20 0 0 1 0,592 V20 A20,20 0 0 1 20,0 Z"); } .sl-hero__art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .sl-hero__backdrop, .sl-hero__photo, .sl-hero__sparkle { position: absolute; display: block; background-repeat: no-repeat; } .sl-hero__arcs { position: absolute; top: 0; left: 0; width: calc(1320px * var(--sl-k)); height: calc(612px * var(--sl-k)); color: rgba(255, 255, 255, .27); overflow: visible; } .sl-hero__backdrop { top: 0; left: calc(134px * var(--sl-k)); width: calc(354px * var(--sl-k)); height: calc(612px * var(--sl-k)); background-size: cover; background-position: center; transform: rotate(180deg); } .sl-hero__photo { top: calc(32px * var(--sl-k)); left: calc(94px * var(--sl-k)); width: calc(464px * var(--sl-k)); height: calc(580px * var(--sl-k)); background-size: calc(909.8px * var(--sl-k)) calc(606px * var(--sl-k)); background-position: calc(-346.64px * var(--sl-k)) 0; } .sl-hero__sparkle { top: calc(100px * var(--sl-k)); left: calc(581px * var(--sl-k)); width: calc(54px * var(--sl-k)); height: calc(55px * var(--sl-k)); background-size: contain; background-position: center; } .sl-hero__body { position: absolute; inset: 0; direction: rtl; } .sl-hero__title { position: absolute; top: calc(114px * var(--sl-k)); right: calc(112px * var(--sl-k)); margin: 0; color: #fff; font-size: calc(32px * var(--sl-k)); font-weight: 800; line-height: calc(48px * var(--sl-k)); letter-spacing: -.02em; text-align: right; white-space: nowrap; } .sl-hero__line { display: block; } .sl-hero__line--mark { position: relative; } .sl-hero__mark { position: absolute; bottom: calc(4px * var(--sl-k)); right: 0; width: calc(312px * var(--sl-k)); height: calc(20px * var(--sl-k)); background: var(--sl-orange); } .sl-hero__linetext { position: relative; } .sl-hero__text { position: absolute; top: calc(242px * var(--sl-k)); right: calc(112px * var(--sl-k)); width: calc(536px * var(--sl-k)); margin: 0; color: #fff; font-size: calc(16px * var(--sl-k)); font-weight: 400; line-height: calc(28px * var(--sl-k)); letter-spacing: -.02em; text-align: right; } .sl-hero__search { position: absolute; z-index: 5; top: calc(330px * var(--sl-k)); right: calc(112px * var(--sl-k)); display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: calc(12px * var(--sl-k)); width: calc(536px * var(--sl-k)); height: calc(60px * var(--sl-k)); padding: calc(4px * var(--sl-k)) calc(24px * var(--sl-k)) calc(4px * var(--sl-k)) calc(4px * var(--sl-k)); background: rgba(255, 255, 255, .15); border: 2px solid rgba(255, 255, 255, .3); border-radius: 1000px; box-shadow: 0 0 30px rgba(255, 255, 255, .08); backdrop-filter: blur(10px); box-sizing: border-box; } .sl-hero__submit { order: 3; flex: none; height: calc(48px * var(--sl-k)); padding-inline: calc(32px * var(--sl-k)); background: var(--sl-orange); border: 0; border-radius: 100px; color: #fff; font: inherit; font-size: calc(16px * var(--sl-k)); font-weight: 600; line-height: calc(24px * var(--sl-k)); cursor: pointer; transition: background-color .18s ease; } .sl-hero__submit:hover { background: #ea6a0c; } .sl-hero__input { order: 2; flex: 1 1 auto; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: calc(14px * var(--sl-k)); font-weight: 300; line-height: calc(20px * var(--sl-k)); letter-spacing: -.02em; outline: none; } .sl-hero__input::placeholder { color: #fff; opacity: 1; } .sl-hero__divider { order: 1; flex: none; width: 1px; height: calc(40px * var(--sl-k)); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%); } .sl-hero__city { order: 0; display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: calc(4px * var(--sl-k)); flex: none; width: calc(112px * var(--sl-k)); padding-inline-start: calc(12px * var(--sl-k)); color: #fff; } .sl-hero__cityinput { width: 100%; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: calc(14px * var(--sl-k)); line-height: calc(20px * var(--sl-k)); letter-spacing: -.02em; text-align: end; outline: none; } .sl-hero__cityinput::placeholder { color: #fff; opacity: 1; } .sl-hero__city .sl-i, .sl-hero__city svg { flex: none; width: calc(16px * var(--sl-k)); height: calc(16px * var(--sl-k)); font-size: calc(16px * var(--sl-k)); } .sl-hero__cityselect { width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: calc(14px * var(--sl-k)); font-weight: 600; line-height: calc(20px * var(--sl-k)); letter-spacing: -.02em; direction: rtl; text-align: right; text-align-last: right; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; } .sl-hero__cityselect:focus-visible { border-radius: 4px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); } .sl-hero__cityselect option, .sl-hero__cityselect optgroup { color: var(--sl-ink, #040404); background: #fff; font-weight: 400; } .sl-hero__cityselect optgroup { color: var(--sl-muted, #828282); font-weight: 600; } @supports (appearance: base-select) { .sl-hero__cityselect, .sl-hero__cityselect::picker(select) { appearance: base-select; } .sl-hero__city { width: auto; } .sl-hero__cityselect { display: flex; align-items: center; gap: 6px; width: max-content; padding: 0; border: 0; background: none; white-space: nowrap; } .sl-hero__cityselect::picker-icon { content: ""; width: 10px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .8; transition: transform .2s ease; } .sl-hero__cityselect:open::picker-icon { transform: rotate(180deg); } .sl-hero__cityselect::picker(select) { direction: rtl; position-area: bottom span-left; position-try-fallbacks: none; box-sizing: border-box; width: 260px; max-height: min(300px, 36vh); margin: 12px 0 0; padding: 8px; overflow-y: auto; background: #fff; border: 1px solid var(--sl-border, #EDEDED); border-radius: 16px; box-shadow: 0 16px 48px rgba(4, 28, 26, .18), 0 2px 8px rgba(0, 0, 0, .06); scrollbar-width: thin; scrollbar-color: #D9D9D9 transparent; opacity: 0; translate: 0 -6px; transition: opacity .16s ease, translate .16s ease, overlay .16s allow-discrete, display .16s allow-discrete; } .sl-hero__cityselect:open::picker(select) { opacity: 1; translate: 0 0; } @starting-style { .sl-hero__cityselect:open::picker(select) { opacity: 0; translate: 0 -6px; } } .sl-hero__cityselect option { display: flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 10px; color: var(--sl-ink, #040404); background: none; font-size: 14px; font-weight: 400; line-height: 20px; cursor: pointer; transition: background-color .12s ease, color .12s ease; } .sl-hero__cityselect option:hover, .sl-hero__cityselect option:focus-visible { background: var(--sl-bg-soft, #F9FAFC); outline: none; } .sl-hero__cityselect option:checked { background: var(--sl-teal-soft, #E6F3F2); color: var(--sl-teal-600, #00796B); font-weight: 600; } .sl-hero__cityselect option::checkmark { display: none; } .sl-hero__cityselect option[value=""] { min-height: 32px; color: var(--sl-muted, #828282); font-size: 13px; } .sl-hero__cityselect optgroup { display: block; margin-block-start: 6px; padding-block-start: 6px; border-block-start: 1px solid var(--sl-line, #F3F3F3); background: none; } .sl-hero__cityselect optgroup::label { display: block; padding: 4px 14px 6px; color: var(--sl-muted, #828282); font-size: 12px; font-weight: 600; } } .sl-hero__stats { position: absolute; top: calc(422px * var(--sl-k)); right: calc(155px * var(--sl-k)); display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: calc(12px * var(--sl-k)); width: calc(450px * var(--sl-k)); height: calc(76px * var(--sl-k)); } .sl-hero__stat { display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--sl-k)); width: calc(134px * var(--sl-k)); flex: none; color: #fff; text-align: center; } .sl-hero__staticon { display: inline-flex; font-size: calc(24px * var(--sl-k)); line-height: 1; } .sl-hero__staticon svg { width: calc(24px * var(--sl-k)); height: calc(24px * var(--sl-k)); } .sl-hero__statvalue { direction: ltr; unicode-bidi: isolate; font-size: calc(20px * var(--sl-k)); font-weight: 800; line-height: calc(24px * var(--sl-k)); letter-spacing: -.02em; } .sl-hero__statlabel { font-size: calc(14px * var(--sl-k)); font-weight: 400; line-height: calc(20px * var(--sl-k)); letter-spacing: -.02em; } .sl-hero__statsep { flex: none; width: 1px; height: calc(56px * var(--sl-k)); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%); } .sl-hero__scroll { position: absolute; top: calc(580px * var(--sl-k)); left: 50%; margin-left: calc(-16px * var(--sl-k)); z-index: 3; display: grid; place-items: center; width: calc(32px * var(--sl-k)); height: calc(32px * var(--sl-k)); padding: 0; border: 0; background: none; color: var(--sl-teal); cursor: pointer; animation: sl-nudge 2.4s ease-in-out infinite; } .sl-hero__scroll svg { display: block; width: 100%; height: 100%; } .sl-hero__scroll:hover { color: var(--sl-ink); } .sl-hero__scroll:focus-visible { outline: 2px solid var(--sl-teal); outline-offset: 4px; border-radius: 6px; } @keyframes sl-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(4px); } } @media (prefers-reduced-motion: reduce) { .sl-hero__scroll { animation: none; } } .sl-hero__scroll svg { width: 100%; height: 100%; } @media (max-width: 1400px) { .sl-hero { --sl-k: .92; } } @media (max-width: 1240px) { .sl-hero { --sl-k: .84; } } @media (max-width: 1120px) { .sl-hero { --sl-k: .76; } } @media (max-width: 1023px) { .sl-hero__card { height: auto; padding: 32px 24px 40px; clip-path: none; border-radius: 20px; } .sl-hero__body { position: static; display: flex; flex-direction: column; gap: 20px; } .sl-hero__title, .sl-hero__text, .sl-hero__search, .sl-hero__stats { position: static; width: 100%; inset: auto; } .sl-hero__title { font-size: 26px; line-height: 40px; white-space: normal; } .sl-hero__line--mark { display: inline-block; } .sl-hero__mark { width: 100%; height: 16px; } .sl-hero__text { font-size: 15px; line-height: 28px; } .sl-hero__search { height: 56px; padding: 4px 16px 4px 4px; } .sl-hero__stats { height: auto; justify-content: space-between; } .sl-hero__stat { width: auto; flex: 1; } .sl-hero__art { position: relative; height: 320px; margin-block-end: 24px; } .sl-hero__backdrop { left: 50%; transform: translateX(-50%) rotate(180deg); width: 240px; height: 320px; } .sl-hero__photo { top: 0; left: 50%; width: 280px; height: 320px; transform: translateX(-50%); background-size: cover; background-position: 62% top; } .sl-hero__sparkle, .sl-hero__arcs, .sl-hero__scroll { display: none; } .sl-hero__input, .sl-hero__cityselect { font-size: 14px; } .sl-hero__submit { height: 44px; padding-inline: 24px; font-size: 15px; line-height: 24px; } .sl-hero__city .sl-i, .sl-hero__city svg { width: 16px; height: 16px; font-size: 16px; } .sl-hero__divider { height: 28px; } .sl-hero__statvalue { font-size: 20px; line-height: 28px; } .sl-hero__statlabel { font-size: 12px; line-height: 18px; } .sl-hero__staticon svg { width: 22px; height: 22px; } } @media (max-width: 560px) { .sl-hero__search { flex-wrap: wrap; height: auto; border-radius: 20px; padding: 10px; } .sl-hero__submit { order: 10; width: 100%; } .sl-hero__divider { display: none; } .sl-hero__city { order: 1; width: auto; } .sl-hero__stats { flex-wrap: wrap; gap: 16px; } .sl-hero__statsep { display: none; } } body:has(.sl-hero) { overflow-x: clip; } body.sl-citymodal-open { overflow: hidden; } .sl-citymodal { position: fixed; inset: 0; z-index: 1200; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px 16px; } .sl-citymodal[hidden] { display: none; } .sl-citymodal__backdrop { position: absolute; inset: 0; background: rgba(4, 4, 4, .55); } .sl-citymodal__card { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 420px; margin-inline: auto; max-height: min(640px, 86dvh); background: #fff; border-radius: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, .25); overflow: hidden; animation: sl-citymodal-in .22s ease; } @keyframes sl-citymodal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .sl-citymodal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-block-end: 1px solid var(--sl-border, #EDEDED); } .sl-citymodal__title { color: var(--sl-ink, #040404); font-size: 17px; font-weight: 800; } .sl-citymodal__close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--sl-teal-50, #F2F8F7); color: var(--sl-ink, #040404); font-size: 22px; line-height: 1; cursor: pointer; } .sl-citymodal__close:hover { background: #E4F0EE; } .sl-citymodal__search { display: block; padding: 14px 20px 6px; } .sl-citymodal__search input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--sl-border, #EDEDED); border-radius: 12px; background: #fff; color: var(--sl-ink, #040404); font: inherit; font-size: 15px; } .sl-citymodal__search input:focus { border-color: var(--sl-teal, #00897B); box-shadow: 0 0 0 1px var(--sl-teal, #00897B); outline: none; } .sl-citymodal__list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 20px 20px; } .sl-citymodal__province { margin: 14px 0 6px; color: var(--sl-muted, #828282); font-size: 13px; font-weight: 700; } .sl-citymodal__city { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--sl-ink, #040404); font: inherit; font-size: 15px; text-align: right; cursor: pointer; } .sl-citymodal__city:hover { background: var(--sl-teal-50, #F2F8F7); } .sl-citymodal__city.is-on { background: var(--sl-teal, #00897B); color: #fff; font-weight: 700; } .sl-citymodal__city--all { margin-block-end: 4px; border: 1px dashed var(--sl-border, #EDEDED); }