@layer theme, base, components, utilities; @layer properties; :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-300: oklch(80.8% 0.114 19.571); --color-red-500: oklch(63.7% 0.237 25.331); --color-orange-500: oklch(70.5% 0.213 47.604); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-500: oklch(72.3% 0.219 149.579); --color-teal-500: oklch(70.4% 0.14 182.503); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-500: oklch(62.3% 0.214 259.815); --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-500: oklch(62.7% 0.265 303.9); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.25; --leading-snug: 1.375; --radius-lg: 0.5rem; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --blur-sm: 8px; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --text-2xs: 10px; --text-2xs--line-height: 16px; --text-17: 17px; --text-17--line-height: 24px; --text-18: 18px; --text-18--line-height: 100%; --text-19: 19px; --text-19--line-height: 100%; --text-22: 22px; --text-22--line-height: 100%; --text-26: 26px; --text-26--line-height: 100%; --text-28: 28px; --text-28--line-height: 36px; --text-30: 30px; --text-30--line-height: 95%; --text-34: 34px; --text-34--line-height: 44px; --text-42: 42px; --text-42--line-height: 64px; --text-43: 43px; --text-43--line-height: 52px; --text-46: 46px; --text-46--line-height: 100%; --text-50: 50px; --text-50--line-height: 100%; --text-95: 95px; --text-95--line-height: 100%; --color-main-bg: #F1F1F1; --color-light-primary: #0D5336; --color-primary: #042E1D; --color-main-green-dark: #032014; --color-main-green-dark-2: #0D5034; --color-try-it-out: #27B960; --color-error: #E23636; --color-web-link: #007AFF; --color-for-sale-1: #FB5151; --color-for-sale-2: #FF6E6E; --color-border-line-white: #E0E6E5; --color-main-green: #DAF7E2; --color-main-light-green: #0D5034; --color-main-black-5: #F5F6F5; --color-main-black-15: #E1E3E2; --color-main-black-40: #AEB5B2; --color-main-black-60: #81988B; --color-main-black-80: #5C6A65; --color-main-black-100: #35463F; --color-main-white-60: #989899; --color-main-dark-80: #1F2422CC; --color-main-dark: #1F2422; --font-bounded: Bounded; --font-inter: Inter; --icon-size-xs: 12px; --icon-size-sm: 14px; --icon-size-base: 18px; --icon-size-md: 20px; --icon-size-xl: 24px; --icon-size-27: 27px; --icon-size-33: 33px; --icon-size-2xl: 35px; --icon-size-3xl: 42px; --circle-size-8: 8px; --circle-size-40: 40px; --circle-size-48: 48px; --circle-size-54: 54px; --circle-size-75: 75px; --circle-size-82: 82px; } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } } @layer base { html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } html { overflow: hidden; } html, body { height: 100%; overflow-x: hidden; } html hr, body hr { height: 0; color: inherit; border-top-width: 1px; } html abbr:where([title]), body abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } html h1, html h2, html h3, html h4, html h5, html h6, body h1, body h2, body h3, body h4, body h5, body h6 { font-size: inherit; font-weight: inherit; } html a, body a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } html b, html strong, body b, body strong { font-weight: bolder; } html code, html kbd, html samp, html pre, body code, body kbd, body samp, body pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } html small, body small { font-size: 80%; } html sub, html sup, body sub, body sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } html sub, body sub { bottom: -0.25em; } html sup, body sup { top: -0.5em; } html table, body table { text-indent: 0; border-color: inherit; border-collapse: collapse; } html :-moz-focusring, body :-moz-focusring { outline: auto; } html progress, body progress { vertical-align: baseline; } html summary, body summary { display: list-item; } html ol, html ul, html menu, body ol, body ul, body menu { list-style: none; } html img, html svg, html video, html canvas, html audio, html iframe, html embed, html object, body img, body svg, body video, body canvas, body audio, body iframe, body embed, body object { display: block; vertical-align: middle; } html img, html video, body img, body video { max-width: 100%; height: auto; } html button, html input, html select, html optgroup, html textarea, html ::file-selector-button, body button, body input, body select, body optgroup, body textarea, body ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } html :where(select:is([multiple], [size])) optgroup, body :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } html :where(select:is([multiple], [size])) optgroup option, body :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } html ::file-selector-button, body ::file-selector-button { margin-inline-end: 4px; } html ::placeholder, body ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { html ::placeholder, body ::placeholder { color: currentcolor; } @supports (color: color-mix(in lab, red, red)) { html ::placeholder, body ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } html textarea, body textarea { resize: vertical; } html ::-webkit-search-decoration, body ::-webkit-search-decoration { -webkit-appearance: none; } html ::-webkit-date-and-time-value, body ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } html ::-webkit-datetime-edit, body ::-webkit-datetime-edit { display: inline-flex; } html ::-webkit-datetime-edit-fields-wrapper, body ::-webkit-datetime-edit-fields-wrapper { padding: 0; } html ::-webkit-datetime-edit, html ::-webkit-datetime-edit-year-field, html ::-webkit-datetime-edit-month-field, html ::-webkit-datetime-edit-day-field, html ::-webkit-datetime-edit-hour-field, html ::-webkit-datetime-edit-minute-field, html ::-webkit-datetime-edit-second-field, html ::-webkit-datetime-edit-millisecond-field, html ::-webkit-datetime-edit-meridiem-field, body ::-webkit-datetime-edit, body ::-webkit-datetime-edit-year-field, body ::-webkit-datetime-edit-month-field, body ::-webkit-datetime-edit-day-field, body ::-webkit-datetime-edit-hour-field, body ::-webkit-datetime-edit-minute-field, body ::-webkit-datetime-edit-second-field, body ::-webkit-datetime-edit-millisecond-field, body ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } html ::-webkit-calendar-picker-indicator, body ::-webkit-calendar-picker-indicator { line-height: 1; } html :-moz-ui-invalid, body :-moz-ui-invalid { box-shadow: none; } html button, html input:where([type=button], [type=reset], [type=submit]), html ::file-selector-button, body button, body input:where([type=button], [type=reset], [type=submit]), body ::file-selector-button { appearance: button; } html ::-webkit-inner-spin-button, html ::-webkit-outer-spin-button, body ::-webkit-inner-spin-button, body ::-webkit-outer-spin-button { height: auto; } html [hidden]:where(:not([hidden=until-found])), body [hidden]:where(:not([hidden=until-found])) { display: none !important; } @layer base { main { margin-inline: auto !important; max-width: 1920px; padding-top: 60px !important; padding-bottom: calc(var(--spacing) * 5); } @media (width < 64rem) { main { margin-top: 40px !important; } } :where(main > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(60px * var(--tw-space-y-reverse)) !important; margin-block-end: calc(60px * (1 - var(--tw-space-y-reverse))) !important; } } } @layer utilities { .relative { position: relative; } .cursor-pointer { cursor: pointer; } .hidden { display: none; } .text-nowrap { white-space: nowrap; } .font-bounded { font-family: var(--font-bounded); } .text-main-green { color: var(--color-main-green); } .bg-primary { background-color: var(--color-primary); } .icon-main-lc { width: 25px; height: 33px; } .full-size-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .pointer-events-auto { pointer-events: auto; } .font-inter { font-family: var(--font-inter); } .container-badges { display: inline-flex; flex-wrap: wrap; gap: calc(var(--spacing) * 1); } @media (width >= 40rem) { .container-badges { gap: calc(var(--spacing) * 2); } } @media (width < 64rem) { .container-badges { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 3 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 3 * (1 - var(--tw-space-y-reverse))); } } .icon-2xl { height: var(--icon-size-2xl); width: var(--icon-size-2xl); } .icon-3xl { height: var(--icon-size-3xl); width: var(--icon-size-3xl); } .icon-33 { height: var(--icon-size-33); width: var(--icon-size-33); } .icon-base { height: var(--icon-size-base); width: var(--icon-size-base); } .icon-md { height: var(--icon-size-md); width: var(--icon-size-md); } .icon-sm { height: var(--icon-size-sm); width: var(--icon-size-sm); } .icon-xl { height: var(--icon-size-xl); width: var(--icon-size-xl); } .size-full { width: 100%; height: 100%; } @media (width >= 40rem) { .sm\:col-span-2 { grid-column: span 2/span 2; } } } .dot { height: calc(var(--spacing) * 2); width: calc(var(--spacing) * 2); cursor: pointer; border-radius: calc(infinity * 1px); background-color: color-mix(in oklab, var(--color-white) 20%, transparent); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); --tw-duration: 300ms; transition-duration: 300ms; pointer-events: auto; } .dot.active { background-color: var(--color-white) !important; --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hero-badge1 { font-family: var(--font-inter); color: var(--color-main-black-100); pointer-events: none; box-sizing: border-box; margin: 0; border: 0 solid; position: relative; border-radius: calc(infinity * 1px); background-color: rgba(0, 0, 0, 0.0117647059); padding: 1px; } .hero-badge1-con { position: relative; z-index: 2; border-radius: calc(infinity * 1px); background-color: rgba(0, 0, 0, 0.0117647059); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-white); --tw-backdrop-blur: blur(100px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .hero-badge2 { border-radius: calc(infinity * 1px); background-color: var(--color-primary); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-white); } @font-face { font-family: Bounded; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/bounded/bounded-variable.ttf") format("truetype"); } @font-face { font-family: Bounded; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/bounded/bounded-black.ttf") format("truetype"); } @font-face { font-family: Inter; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: Inter; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: Inter; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter-var; src: url("/assets/fonts/inter/Inter-Medium.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; font-style: normal; } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-content: ""; } } } @property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: rgba(0, 0, 0, 0); } @property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: rgba(0, 0, 0, 0); } @property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: rgba(0, 0, 0, 0); } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 rgba(0, 0, 0, 0); } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 rgba(0, 0, 0, 0); } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 rgba(0, 0, 0, 0); } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 rgba(0, 0, 0, 0); } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 rgba(0, 0, 0, 0); } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @property --tw-content { syntax: "*"; initial-value: ""; inherits: false; } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @layer base { html, body { height: 100%; overflow-x: hidden; } body { background-color: var(--color-main-bg); font-family: var(--font-inter); color: var(--color-main-black-100); } html::-webkit-scrollbar-button, body::-webkit-scrollbar-button { display: none; width: 0; height: 0; background-color: transparent !important; } button { cursor: pointer; } } .btn-sm { position: relative; z-index: 1; width: 100%; cursor: pointer; border-radius: 8px; padding-block: calc(var(--spacing) * 2); font-family: var(--font-bounded); font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); } @media (width >= 40rem) { .btn-sm { border-radius: 12px; } } @media (width >= 40rem) { .btn-sm { padding-block: 9px; } } @media (width >= 40rem) { .btn-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } :where(.\!space-y-7 > :not(:last-child)) { --tw-space-y-reverse: 0 !important; margin-block-start: calc(var(--spacing) * 7 * var(--tw-space-y-reverse)) !important; margin-block-end: calc(var(--spacing) * 7 * (1 - var(--tw-space-y-reverse))) !important; } /* Converted Tailwind-like classes to normal CSS */ /* Container and Layout Classes */ .payment-methods-container { margin-inline: auto; max-width: 1920px; } @media (width >= 40rem) { .payment-methods-section { padding-inline: calc(var(--spacing) * 6); } } @media (width >= 64rem) { .payment-methods-section { background-color: var(--color-white); border-radius: 24px; padding-inline: 64px; padding-block: 94px; overflow-x: hidden; } } .payment-methods-section > * + * { margin-top: calc(var(--spacing) * 6); } @media (width >= 64rem) { .payment-methods-section > * + * { margin-top: 60px; } } /* Title */ .payment-title { font-family: var(--font-bounded); font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); color: var(--color-main-black-100); } @media (width >= 64rem) { .payment-title { font-size: var(--text-42); line-height: var(--tw-leading, var(--text-42--line-height)); } } /* Grid Layout */ .payment-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: calc(var(--spacing) * 2); } @media (width >= 40rem) { .payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 301px 1fr; } } @media (width >= 64rem) { .payment-grid { grid-template-rows: 1fr 1fr; gap: 50px; } } /* Card Styles */ .payment-card { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; border-radius: 24px; padding: calc(var(--spacing) * 4); overflow: hidden; } @media (max-width: 39.9375rem) { .payment-card { height: 301px; } } /* Mortgage Card */ .mortgage-card { order: 1; background-color: var(--color-primary); } @media (width >= 64rem) { .mortgage-card { padding-top: 46px; padding-inline: 48px; padding-bottom: calc(var(--spacing) * 6); } } .mortgage-card-content { display: flex; flex-direction: column; gap: calc(var(--spacing) * 0.5); } @media (width >= 64rem) { .mortgage-card-content { gap: calc(var(--spacing) * 2); } } .mortgage-card-title { font-family: var(--font-bounded); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); color: var(--color-white); } @media (width >= 64rem) { .mortgage-card-title { font-size: var(--text-28); line-height: var(--tw-leading, var(--text-28--line-height)); } } .mortgage-card-description { font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); color: var(--color-main-white-60); } @media (width >= 64rem) { .mortgage-card-description { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); width: 40%; } } /* Button Styles */ .card-button { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--color-white); display: grid; place-items: center; cursor: pointer; background-color: transparent; } .card-button-icon { height: var(--icon-size-base); width: var(--icon-size-base); } /* Calculate Badge */ .calculate-badge { bottom: 60px; right: 50px; position: absolute; z-index: -1; border-radius: calc(infinity * 1px); background-color: color-mix(in oklab, var(--color-black) 1%, transparent); padding-inline: calc(var(--spacing) * 6); padding-block: 18px; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--color-white); --tw-backdrop-blur: blur(50px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } @media (width >= 64rem) { .calculate-badge { font-size: var(--text-18); line-height: var(--tw-leading, var(--text-18--line-height)); } } /* Gradient Background */ .gradient-bg { position: absolute; right: calc(var(--spacing) * 15); bottom: calc(var(--spacing) * 8); left: calc(var(--spacing) * 0); z-index: -3; height: 166px; --tw-gradient-position: 269deg in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: #185139; --tw-gradient-to: #042C1B00; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } /* Calculator Image */ .calculator-image-wrapper { position: absolute; z-index: -2; right: calc(var(--spacing) * -15); bottom: calc(var(--spacing) * -12); } @media (width >= 64rem) { .calculator-image-wrapper { bottom: calc(var(--spacing) * -18); } } .calculator-image { width: 267px; height: 225px; object-fit: contain; transform: scale(1.7); } @media (width >= 64rem) { .calculator-image { width: 397px; height: 335px; transform: scale(1.5); } } /* Installment Card */ .installment-card { order: 2; background-color: #FCFCFD; } @media (width >= 40rem) { .installment-card { order: 3; } } @media (max-width: 39.9375rem) { .installment-card { height: 166px; } } @media (width >= 64rem) { .installment-card { background-color: #F1F1F1; padding-left: 46px; padding-top: 46px; padding-bottom: calc(var(--spacing) * 6); } } .installment-card-title { font-family: var(--font-bounded); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); color: var(--color-main-black-100); } @media (width >= 64rem) { .installment-card-title { font-size: var(--text-28); line-height: var(--tw-leading, var(--text-28--line-height)); } } .installment-card-description { font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); color: var(--color-main-black-60); } @media (width >= 64rem) { .installment-card-description { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .installment-button { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--color-border-line-white); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); display: grid; place-items: center; cursor: pointer; background-color: transparent; } .installment-button-icon { height: 16px; width: 16px; } .percent-image-wrapper { position: absolute; z-index: -1; right: calc(var(--spacing) * -10); bottom: calc(var(--spacing) * -1); max-width: 188px; max-height: 155px; } @media (width >= 64rem) { .percent-image-wrapper { max-width: 407px; max-height: 335px; } } .percent-image { width: 100%; height: 100%; transform: scale(1.25); } @media (width >= 64rem) { .percent-image { transform: scale(1); } } /* Online Booking Card */ .booking-card { order: 3; padding: calc(var(--spacing) * 4); background-color: #FCFCFD; border-radius: 24px; overflow: hidden; } @media (width >= 40rem) { .booking-card { order: 2; grid-row: span 2/span 2; } } @media (width >= 64rem) { .booking-card { background-color: #F1F1F1; padding: 46px; } } .booking-card > * + * { margin-top: calc(var(--spacing) * 4); } @media (width >= 64rem) { .booking-card > * + * { margin-top: 22px; } } .booking-card-header > * + * { margin-top: calc(var(--spacing) * 0.5); } .booking-card-header { margin-bottom: 16px; } @media (max-width: 39.9375rem) { .booking-card-header > * + * { margin-top: 2px; } } @media (width >= 64rem) { .booking-card-header > * + * { margin-top: calc(var(--spacing) * 2); } } .booking-card-title { font-family: var(--font-bounded); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); color: var(--color-main-black-100); } @media (width >= 64rem) { .booking-card-title { font-size: var(--text-28); line-height: var(--tw-leading, var(--text-28--line-height)); } } .booking-card-description { font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); color: var(--color-main-black-60); } @media (width >= 40rem) { .booking-card-description { display: none; } } @media (width >= 64rem) { .booking-card-description { display: block; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); width: 80%; } } /* Apartment Preview Container */ .apartment-preview-container { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 4 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 4 * (1 - var(--tw-space-y-reverse))); position: relative; z-index: 1; height: 400px; place-items: center; overflow: hidden; border-radius: 24px; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); background-color: var(--color-white); padding-top: calc(var(--spacing) * 25); } @media (max-width: 63.9375rem) { .apartment-preview-container { padding-top: calc(var(--spacing) * 25); } } @media (width >= 64rem) { .apartment-preview-container { place-content: end; height: 454px; } } /* Apartment Card */ .apartment-card { position: relative; z-index: 1; width: 198px; border-style: var(--tw-border-style); border-width: 0.52px; border-color: var(--color-border-line-white); background-color: var(--color-white); padding-inline: 14px; padding-block: 10px; --tw-shadow: -11.73px 19.55px 50.17px 0 var(--tw-shadow-color, rgba(43, 43, 49, 0.14)), -45.61px 78.18px 90.56px 0px var(--tw-shadow-color, rgba(43, 43, 49, 0.12)), -102.94px 176.56px 122.49px 0px var(--tw-shadow-color, rgba(43, 43, 49, 0.07)), -183.73px 314.04px 145.29px 0px var(--tw-shadow-color, rgba(43, 43, 49, 0.02)), -286.67px 489.95px 158.97px 0px var(--tw-shadow-color, rgba(43, 43, 49, 0)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-radius: 12px; } @media (max-width: 63.9375rem) { .apartment-card { border-radius: 12px; } } @media (width >= 64rem) { .apartment-card { border-bottom-style: var(--tw-border-style) !important; border-bottom-width: 0px !important; border-style: var(--tw-border-style); border-width: 0.8px; border-top-left-radius: 12px; border-top-right-radius: 12px; max-width: 304px; width: 100%; width: auto; min-width: 290px; padding-top: 17px; padding-inline: 22px; } } .apartment-card > * + * { margin-bottom: 14px; } @media (width >= 64rem) { .apartment-card > * + * { margin-bottom: calc(var(--spacing) * 4); } } /* Top Rate Badge */ .top-rate-badge { position: absolute; top: calc(var(--spacing) * -5); right: -12%; display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 1.5); border-radius: calc(infinity * 1px); background-color: var(--color-for-sale-1); color: var(--color-white); font-size: 16px; font-weight: var(--font-weight-medium); } .top-rate-badge img { height: var(--icon-size-base); width: var(--icon-size-base); } /* Apartment Details */ .apartment-details-section > * + * { margin-top: 11px; } @media (width >= 64rem) { .apartment-details-section > * + * { margin-top: calc(var(--spacing) * 5); } } .apartment-name { font-family: var(--font-bounded); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } @media (width >= 64rem) { .apartment-name { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .apartment-image-container { width: 107px; height: 114px; overflow: hidden; place-self: center; } @media (width >= 64rem) { .apartment-image-container { height: 175px; width: auto; aspect-ratio: auto; } } .apartment-image { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.45); } .apartment-info { display: flex; justify-content: space-between; font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); } @media (width >= 64rem) { .apartment-info { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .apartment-price { color: var(--color-try-it-out); } /* Background Text */ .background-text { position: absolute; top: 5%; left: calc(var(--spacing) * 1.5); right: calc(var(--spacing) * 1.5); text-align: center; color: var(--color-main-black-60); opacity: 0.3; font-family: var(--font-bounded); font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } @media (width >= 64rem) { .background-text { top: 10%; font-size: var(--text-46); line-height: var(--tw-leading, var(--text-46--line-height)); line-height: calc(var(--spacing) * 11); } } /* Info Bullets */ .info-bullet-left { position: absolute; z-index: 0; bottom: calc(var(--spacing) * 13); left: calc(var(--spacing) * 5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); text-wrap: wrap; display: flex; gap: 9px; } @media (width >= 64rem) { .info-bullet-left { bottom: calc(var(--spacing) * 25); left: calc(var(--spacing) * 10); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .info-bullet-left::before { content: ""; width: 9px; height: 9px; background-color: var(--color-main-black-100); margin-top: calc(var(--spacing) * 1); } .info-bullet-left span { max-width: 107px; } .info-bullet-right { position: absolute; z-index: 0; bottom: calc(var(--spacing) * 3); right: calc(var(--spacing) * 5); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); text-wrap: wrap; display: flex; gap: 9px; text-align: right; } @media (width >= 64rem) { .info-bullet-right { right: calc(var(--spacing) * 10); bottom: calc(var(--spacing) * 15); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .info-bullet-right::after { content: ""; width: 9px; height: 9px; background-color: var(--color-main-black-100); margin-top: calc(var(--spacing) * 1); } .info-bullet-right span { max-width: 107px; } /* Select Apartment Button */ .select-apartment-button { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 4); border-radius: 12px; background-color: var(--color-main-green); color: var(--color-main-black-100); font-family: var(--font-inter); font-size: var(--text-base); font-weight: var(--font-weight-medium); cursor: pointer; border: none; width: 100%; transition: background-color 0.3s ease; } .select-apartment-button:hover { background-color: var(--color-main-green-dark); color: var(--color-white); } /* About Company Section - Desktop */ .about-company-desktop { display: none; } @media (width >= 64rem) { .about-company-desktop { display: block; } } .about-hero-container { position: relative; max-height: 900px; height: 100vh; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; font-size: 55px; font-family: var(--font-bounded); } .about-hero-text { display: flex; gap: calc(var(--spacing) * 2); align-items: center; font-weight: 500; } .about-since-badge { background-color: #0D5034; color: #FCFCFD; font-size: 34px; white-space: nowrap; text-align: center; padding-block: calc(var(--spacing) * 2); border-radius: 22px; box-shadow: 0 4px 4px -4px rgba(33, 127, 87, 0.05), 0 16px 16px -8px rgba(33, 127, 87, 0.31); transform: rotate(-6deg); width: 0; transform: scale(0); transition: all 0.6s ease-out; } .about-hero-container:hover .about-since-badge { width: 310px; transform: scale(1) rotate(-6deg); } .about-more-button { position: relative; z-index: 10; border: 1px solid #E0E6E5; border-radius: 12px; font-size: 16px; margin-top: calc(var(--spacing) * 10); padding-block: calc(var(--spacing) * 4); padding-inline: calc(var(--spacing) * 6); background-color: transparent; cursor: pointer; transition: background-color 0.3s ease-in-out; } .about-more-button:hover { background-color: var(--color-gray-100); } .about-images-top { position: absolute; z-index: 5; top: 0; right: calc(var(--spacing) * 30); left: 0; display: flex; justify-content: space-between; align-items: flex-start; } .about-image-1 { border-radius: 12px; overflow: hidden; } .about-image-1 img { width: 220px; height: 240px; object-fit: cover; object-position: center; } .about-image-2 { border-radius: 12px; overflow: hidden; } .about-image-2 img { width: 218px; height: 150px; object-fit: cover; object-position: center; } .about-images-bottom { position: absolute; z-index: 5; bottom: calc(var(--spacing) * 0); right: -6%; left: calc(var(--spacing) * 15); display: flex; justify-content: space-between; align-items: flex-end; } .about-image-3 { border-radius: 12px; overflow: hidden; transform: translateX(-12%); } .about-image-3 img { width: 500px; height: 170px; object-fit: cover; object-position: center; } .about-image-4 { border-radius: 12px; overflow: hidden; } .about-image-4 img { height: 340px; width: 250px; object-fit: cover; object-position: center; } /* About Company Content */ .about-content-container { display: flex; margin-top: calc(var(--spacing) * 20); margin-bottom: calc(var(--spacing) * 30); } .about-description { flex-basis: 50%; font-size: 18px; font-weight: normal; font-family: var(--font-inter); } .about-stats-container { display: flex; align-items: flex-start; justify-content: center; width: 100%; font-size: 50px; } .about-stat-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .about-stat-number { font-family: var(--font-bounded); } .about-stat-label { font-size: 18px; } /* About Company Section - Mobile */ .about-company-mobile { display: flex; flex-direction: column; gap: 80px; margin-top: 46px; } @media (width >= 64rem) { .about-company-mobile { display: none; } } .about-cards-scroll { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 23px; margin-inline: calc(var(--spacing) * -4); padding-inline: calc(var(--spacing) * 4); } @media (width >= 40rem) { .about-cards-scroll { margin-inline: calc(var(--spacing) * -6); padding-inline: calc(var(--spacing) * 6); } } .about-card-mobile { flex-shrink: 0; background-color: var(--color-white); border-radius: 24px; padding: calc(var(--spacing) * 2); padding-bottom: 23px; width: 251px; } @media (width >= 40rem) { .about-card-mobile { width: 340px; } } .about-card-mobile > * + * { margin-top: calc(var(--spacing) * 2); } .about-card-image { height: 194px; border-radius: 17px; overflow: hidden; background-color: #D9D9D9; } .about-card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .about-card-content { padding-inline: 10px; } .about-card-number { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); font-family: var(--font-bounded); font-weight: var(--font-weight-medium); } @media (width >= 40rem) { .about-card-number { font-size: var(--text-34); line-height: var(--tw-leading, var(--text-34--line-height)); } } .about-card-label { font-weight: var(--font-weight-medium); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } /* About Mobile Info Section */ .about-mobile-info { position: relative; z-index: 1; } .about-mobile-info > * + * { margin-top: calc(var(--spacing) * 8); } .about-since-badge-mobile { left: calc(var(--spacing) * 13); --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 8 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 8 * (1 - var(--tw-space-y-reverse))); position: absolute; z-index: -1; rotate: -8deg; border-radius: calc(infinity * 1px); background-color: var(--color-main-green-dark-2); padding-inline: 24px; padding-block: calc(var(--spacing) * 2.5); --tw-shadow: 0 4px 4px -4px var(--tw-shadow-color, rgba(33, 127, 87, 0.05)), 0 16px 16px -8px var(--tw-shadow-color, rgba(33, 127, 87, 0.31)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); top: calc(var(--spacing) * -12); } @media (width >= 40rem) { .about-since-badge-mobile { top: calc(var(--spacing) * -3); } } @media (max-width: 640px) { .about-since-badge-mobile { top: -14px; } } .about-since-badge-mobile span { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); color: var(--color-white); font-family: var(--font-bounded); } .about-mobile-text-section > * + * { margin-top: calc(var(--spacing) * 4); } .about-mobile-title { font-size: var(--text-19); line-height: var(--tw-leading, var(--text-19--line-height)); font-family: var(--font-bounded); text-align: center; line-height: calc(var(--spacing) * 6); } @media (width >= 40rem) { .about-mobile-title { font-size: var(--text-34); line-height: var(--tw-leading, var(--text-34--line-height)); line-height: calc(var(--spacing) * 9); } } .about-mobile-description { font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); } @media (width >= 40rem) { .about-mobile-description { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); font-weight: var(--font-weight-medium); } } .about-mobile-button { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 6); border-radius: 12px; background-color: var(--color-white); border: 1px solid var(--color-border-line-white); color: var(--color-main-black-100); font-family: var(--font-inter); font-size: var(--text-base); font-weight: var(--font-weight-medium); cursor: pointer; width: 100%; } /* News Section */ .news-section { margin-top: calc(var(--spacing) * 6); } @media (width >= 64rem) { .news-section { margin-top: 0; } } .news-section > * + * { margin-top: 15px; } @media (width >= 64rem) { .news-section > * + * { margin-top: calc(var(--spacing) * 8); } } .news-title { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); color: #35463F; letter-spacing: -1%; font-family: var(--font-bounded); } @media (width >= 64rem) { .news-title { font-size: 42px; } } .news-content > * + * { margin-top: calc(var(--spacing) * 4); } .news-grid { margin-inline: calc(var(--spacing) * -4); padding-inline: calc(var(--spacing) * 4); display: flex; flex-wrap: nowrap; overflow-x: auto; gap: calc(var(--spacing) * 5); } @media (width >= 40rem) { .news-grid { padding-inline: calc(var(--spacing) * 6); margin-inline: calc(var(--spacing) * -6); } } @media (width >= 64rem) { .news-grid { margin-inline: 0; padding-inline: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* News Card */ .news-card { position: relative; display: flex; flex-direction: column; background-color: var(--color-white); border-radius: 24px; padding: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 2); padding-bottom: calc(var(--spacing) * 4); height: auto; width: 251px; flex-shrink: 0; overflow: hidden; } @media (width >= 40rem) { .news-card { width: 290px; } } @media (width >= 64rem) { .news-card { width: auto; background-color: var(--color-main-bg); padding-bottom: calc(var(--spacing) * 6); height: 465px; } } .news-card-image-wrapper { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 4px 4px -4px rgba(119, 63, 74, 0.02), 0 16px 32px -4px rgba(119, 63, 74, 0.4); } .news-card-image { width: 100%; height: 272px; object-fit: cover; object-position: center; box-shadow: 0 4px 4px -4px rgba(119, 63, 74, 0.02), 0 16px 32px -4px rgba(119, 63, 74, 0.4); transition: all 0.8s ease-in-out; } @media (width >= 64rem) { .news-card-image { height: 344px; } .news-card:hover .news-card-image { height: 280px; } } .news-badge { position: absolute; top: calc(var(--spacing) * 2); left: calc(var(--spacing) * 3); display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); border-radius: 12px; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); font-size: var(--text-xs); font-weight: var(--font-weight-medium); } .news-card-title-wrapper { position: relative; z-index: 1; margin-top: calc(var(--spacing) * 5); padding-inline: calc(var(--spacing) * 2); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); font-family: var(--font-bounded); } @media (width >= 64rem) { .news-card-title-wrapper { margin-top: calc(var(--spacing) * 4); font-size: 24px; max-width: 430px; } } .news-card-title-short { position: relative; opacity: 1; transition: all 0.8s ease-in-out; } @media (width >= 64rem) { .news-card-title-short { position: absolute; inset: 0; padding-inline: calc(var(--spacing) * 2); } .news-card:hover .news-card-title-short { opacity: 0; } } .news-card-title-full { position: absolute; inset: 0; font-family: var(--font-inter); padding-inline: calc(var(--spacing) * 2); opacity: 0; transition: all 0.8s ease-in-out; } @media (width >= 64rem) { .news-card:hover .news-card-title-full { opacity: 1; } } .news-card-description { position: relative; display: none; } @media (width >= 64rem) { .news-card-description { display: block; } } .news-card-description p { position: absolute; top: 0; left: 0; padding-inline: calc(var(--spacing) * 2); font-family: var(--font-inter); color: #5A6C66; font-size: 14px; max-width: 430px; opacity: 0; transform: translateY(calc(var(--spacing) * 4)); transition: all 0.8s ease-in-out; } @media (width >= 64rem) { .news-card:hover .news-card-description p { opacity: 1; transform: translateY(0); } } .news-card-arrow { position: absolute; bottom: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); border: 1px solid #E0E6E5; border-radius: 8px; padding-block: 9px; padding-inline: 12px; cursor: pointer; transition: border-color 0.3s; display: none; } @media (width >= 64rem) { .news-card-arrow { display: block; } } .news-card-arrow:hover { border-color: rgba(129, 152, 139, 0.6); } /* All News Button */ .all-news-button { display: flex; align-items: center; justify-content: space-between; background-color: var(--color-white); border-radius: 24px; padding: calc(var(--spacing) * 6); gap: 10px; } @media (width >= 64rem) { .all-news-button { background-color: #F1F1F1; padding-inline: calc(var(--spacing) * 8); padding-block: calc(var(--spacing) * 4); } } .all-news-text-wrapper > * + * { margin-top: 0; } .all-news-title { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); font-family: var(--font-bounded); } @media (width >= 64rem) { .all-news-title { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .all-news-description { color: var(--color-main-black-80); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } @media (width >= 64rem) { .all-news-description { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .all-news-arrow { border: 1px solid #E0E6E5; border-radius: 8px; padding-block: 9px; padding-inline: 12px; cursor: pointer; } /* Hide Scrollbar */ .hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .hide-scrollbar::-webkit-scrollbar { display: none; } .width { width: 100% !important; } .filters-buttons-div-mb { border-color: var(--color-border-line-white); padding: calc(var(--spacing) * 4); display: flex; flex-direction: column; gap: 8px; } .filters-buttons-big-div-mb { list-style: none; display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .filters-options-text { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 3 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 3 * (1 - var(--tw-space-y-reverse))); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-main-black-60); } @layer components { .filters-deadlines-mb { display: flex; height: 100%; align-content: center; align-items: center; justify-content: center; text-align: center; border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); background-color: var(--color-main-black-5); padding-inline: calc(var(--spacing) * 7); transition-property: all; transition-duration: 300ms; transition-timing-function: var(--ease-in-out); } @media (hover: hover) { .filters-deadlines-mb:hover { border-color: #AEB5B2; } } input[type=checkbox]:checked + .filters-deadlines-mb, .peer:checked ~ .filters-deadlines-mb { color: var(--color-main-green); border-color: var(--color-primary); background-color: var(--color-primary); } } .filters-property-text-mb { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 3 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 3 * (1 - var(--tw-space-y-reverse))); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-main-black-60); } .filters-range-mb { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); position: absolute; width: 1rem; height: 1rem; background-color: var(--color-primary); border: 1px solid var(--color-white); border-radius: calc(infinity * 1px); cursor: pointer; transform: translateY(-50%); top: 0.125rem; left: calc(100% - 8px); } .filters-range-fill-mb { position: absolute; height: 3px; background-color: var(--color-primary); border-radius: calc(infinity * 1px); left: 0%; width: 1%; } .filters-range-track-mb { inset-inline: calc(var(--spacing) * 5); position: absolute; left: calc(var(--spacing) * 5); right: calc(var(--spacing) * 5); bottom: -0.125rem; height: 3px; background-color: transparent; border-radius: calc(infinity * 1px); } .filters-track-min-text-mb { color: var(--color-main-black-100); font-family: Inter-var; } .track-border-mb { flex: 1; border-left-style: var(--tw-border-style); border-left-width: 1px; border-color: var(--color-border-line-white); padding-left: calc(var(--spacing) * 4); } .track-flex { flex: 1; } .track-between { display: flex; justify-content: space-between; color: #81988B; } .track-slider { border-radius: 12px; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); position: relative; width: 100%; background-color: var(--color-main-bg); padding: 15px; } @layer components { .filters-list { display: flex; gap: calc(var(--spacing) * 3); height: 60px; text-align: center; } } @layer components { .filters-options-mb { display: flex; height: 32px; align-content: center; align-items: center; justify-content: center; text-align: center; border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); background-color: var(--color-main-black-5); padding-inline: calc(var(--spacing) * 5); transition-property: all; transition-duration: 300ms; transition-timing-function: var(--ease-in-out); } @media (hover: hover) { .filters-options-mb:hover { border-color: #AEB5B2; } } input[type=checkbox]:checked + .filters-options-mb, .peer:checked ~ .filters-options-mb { color: var(--color-main-green); border-color: var(--color-primary); background-color: var(--color-primary); } } @layer components { .filters-checkbox { display: none; } } .toggle-language-gap-mb { display: flex; height: 30px; gap: calc(var(--spacing) * 1); font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); } .language-text { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .language-div { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 4 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 4 * (1 - var(--tw-space-y-reverse))); display: flex; align-items: center; justify-content: space-between; border-radius: calc(infinity * 1px); background-color: var(--color-main-bg); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); } .icon-text-mb { font-size: inherit; font-weight: inherit; padding-inline: 3px; } .icon-size-mb { --tw-space-y-reverse: 0; margin-block-start: calc(5px * var(--tw-space-y-reverse)); margin-block-end: calc(5px * (1 - var(--tw-space-y-reverse))); width: 56px; height: 56px; place-content: center; place-items: center; border-radius: 8px; background-color: var(--color-main-bg); } .icon-div-mb { width: 56px; text-align: center; } .icon-container-mb { --tw-space-y-reverse: 0; margin-block-start: calc(18px * var(--tw-space-y-reverse)); margin-block-end: calc(18px * (1 - var(--tw-space-y-reverse))); margin-inline: calc(var(--spacing) * -4); display: flex; flex-wrap: nowrap; gap: 14px; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-border-line-white); padding-inline: calc(var(--spacing) * 4); padding-bottom: calc(var(--spacing) * 3); font-size: var(--text-2xs); --tw-leading: calc(var(--spacing) * 3); line-height: calc(var(--spacing) * 3); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); text-transform: capitalize; overflow-x: auto; } .icon-container-mb::-webkit-scrollbar { -webkit-appearance: none; appearance: none; } .slider-container-mb { display: flex; height: 100%; max-height: 100%; flex-direction: column; justify-content: space-between; gap: calc(var(--spacing) * 8); overflow-y: auto; padding-inline: calc(var(--spacing) * 4); padding-bottom: 60px; } .slider-container-center-mb { margin-top: 17px; margin-bottom: calc(var(--spacing) * 5); height: 3px; width: 100px; place-self: center; border-radius: calc(infinity * 1px); background-color: var(--color-border-line-white); } .slider-big-container { transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); transition-property: all; transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); height: calc(-83px + 100vh); } @layer components { .slider-back-mb { height: 100%; overflow: hidden; border-top-left-radius: 24px; border-top-right-radius: 24px; background-color: var(--color-white); } @media (width >= 40rem) { .slider-back-mb { height: auto; border-radius: 24px; } } } .slider-mb-1 { position: absolute; inset: calc(var(--spacing) * 0); z-index: -1; transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); background-color: color-mix(in oklab, var(--color-black) 50%, transparent); transition-property: opacity; --tw-duration: 250ms; transition-duration: 250ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); opacity: 1; } .slider-mb-2 { position: absolute; inset: calc(var(--spacing) * 0); z-index: 99; place-content: end; padding-top: 83px; } @layer components { .toggle-language-mb { padding-inline: calc(var(--spacing) * 4); border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); color: var(--color-main-black-100); transition-property: color, background-color, border-color; transition-timing-function: var(--ease-in-out); transition-duration: 300ms; } @media (hover: hover) { .toggle-language-mb:hover { border-color: #AEB5B2; } } .toggle-language-mb.active { color: var(--color-main-green); border-color: var(--color-primary); background-color: var(--color-primary); } } /* Filter Sidebar Mobile Styles */ .filter-sidebar-container { position: fixed; inset: 0; z-index: 99; } .filter-sidebar-bg { position: absolute; inset: 0; z-index: -1; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 250ms ease-in-out; } .filter-sidebar-panel { position: absolute; bottom: 0; left: 0; right: 0; background-color: white; border-top-left-radius: 24px; border-top-right-radius: 24px; /*overflow: hidden;*/ transition: all 300ms ease-in-out; height: 0; display: flex; flex-direction: column; } .filter-sidebar-inner { height: 100%; display: flex; flex-direction: column; overflow: hidden; } .filter-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--color-border-line-white); } .filter-sidebar-title { font-size: 24px; font-family: var(--font-bounded); } .filter-close-btn { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--color-border-line-white); display: grid; place-items: center; place-content: center; transition: background-color 300ms ease-in-out; } .filter-close-btn:hover { background-color: var(--color-main-black-5); } .filter-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 16px; min-height: 0; } .filter-content > * + * { margin-top: 24px; } .filter-section-title { font-size: 14px; color: var(--color-main-black-60); font-weight: 500; } .filter-selected-options { display: flex; flex-wrap: wrap; gap: 8px; } .filters-property-text-mb { font-size: 14px; color: var(--color-main-black-60); font-weight: 500; margin-bottom: 12px; } .filters-list { display: flex; gap: 12px; height: 60px; text-align: center; font-size: 18px; overflow: auto; } .filters-list::-webkit-scrollbar { opacity: 0; } .filters-list li { display: flex; } .filters-list label { cursor: pointer; display: flex; } .filters-deadlines-mb { text-align: center; display: flex; align-items: center; justify-content: center; padding-left: 25.5px; padding-right: 25.5px; height: 83%; border: 1px solid var(--color-border-line-white); background-color: var(--color-main-black-5); border-radius: 9999px; transition: all 300ms ease-in-out; } .filters-list input[type=checkbox]:checked + .filters-deadlines-mb { color: #FCFCFD; border-color: var(--color-primary); background-color: var(--color-primary); } .filters-list input[type=checkbox]:checked + .filters-deadlines-mb span { color: #FCFCFD; } .filters-list .filters-deadlines-mb:hover { border-color: var(--color-gray-400); } .range-slider { margin-top: 12px; } .track-slider { display: flex; flex-direction: column; gap: 12px; } .track-between { display: flex; justify-content: space-between; align-items: center; } .track-flex { display: flex; align-items: center; gap: 4px; } .track-border-mb { display: flex; align-items: center; gap: 4px; } .filters-track-min-text-mb { font-weight: 500; } .filters-range-track-mb { position: relative; height: 4px; background-color: var(--color-border-line-white); border-radius: 9999px; } .filters-range-fill-mb { position: absolute; height: 100%; background-color: var(--color-primary); border-radius: 9999px; } .filters-range-mb { position: absolute; width: 16px; height: 16px; background-color: var(--color-primary); border: 2px solid white; border-radius: 9999px; cursor: pointer; top: 50%; transform: translateY(-50%); } .filters-options-text { font-size: 14px; color: var(--color-main-black-60); font-weight: 500; margin-bottom: 12px; } .filters-buttons-big-div-mb { display: flex; flex-direction: column; gap: 12px; } .filters-buttons-big-div-mb li { display: flex; } .filters-buttons-big-div-mb label { cursor: pointer; width: 100%; } .filters-options-mb { display: flex; align-items: center; justify-content: center; padding: 16px; border: 1px solid var(--color-border-line-white); background-color: var(--color-main-black-5); border-radius: 9999px; transition: all 300ms ease-in-out; width: 100%; } .filters-buttons-big-div-mb input[type=checkbox]:checked + .filters-options-mb { color: #FCFCFD; border-color: var(--color-primary); background-color: var(--color-primary); } .filters-buttons-big-div-mb input[type=checkbox]:checked + .filters-options-mb span { color: #FCFCFD; } .filters-options-mb:hover { border-color: var(--color-gray-400); } .filters-buttons-div-mb { padding: 16px; border-top: 1px solid var(--color-border-line-white); display: flex; flex-direction: column; gap: 12px; } .btn-default { text-align: center; transition: all 300ms ease-in-out; cursor: pointer; border: 1px solid transparent; } .btn-default.width { width: 100%; } .btn-default[data-btn-color=green] { background-color: var(--color-primary); color: white; } .btn-default[data-btn-color=green]:hover { background-color: var(--color-main-green-dark); } .btn-default[data-btn-color=white] { background-color: white; color: var(--color-main-black-100); border-color: var(--color-border-line-white); } .btn-default[data-btn-color=white]:hover { background-color: var(--color-main-black-5); } .btn-default[data-btn-color=gray] { background-color: #F5F5F7 !important; color: #8E8E93 !important; border-color: transparent !important; cursor: default !important; pointer-events: none !important; } .btn-default[data-btn-color=gray]:hover { background-color: #F5F5F7 !important; } .icon-16 { width: 16px; height: 16px; } /* Hide checkbox inputs */ .filter-room-checkbox, .filter-delivery-checkbox, .filters-checkbox, .filter-feature-checkbox, .filter-layout-checkbox, .filter-finishing-checkbox, .filter-queue-checkbox, .filter-parking-checkbox { position: absolute; opacity: 0; pointer-events: none; } /* Large screen hide */ @media (min-width: 1024px) { .filter-sidebar-container.lg-hide { display: none !important; } } .mob-filters-cat { display: flex; flex-direction: column; gap: 20px; } .mob-filters-cat:not(:last-child) { padding-bottom: 30px; border-bottom: 1px solid #E0E6E5; } .mob-filters-cat-title { font-size: 24px; font-family: var(--font-bounded); } .mob-filters-cat-filt { display: flex; flex-direction: column; gap: 30px; } /* ============================================ ASTANA DISTRICTS FILTER (MOBILE) ============================================ */ .district-filter-container { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 16px; background: #F5F5F7; border-radius: 16px; } .district-selected-items { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; } .district-selected-item { display: inline-flex; align-items: center; gap: 20px; padding: 10px 16px; background-color: var(--color-primary); border-radius: 100px; color: #FCFCFD; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; transition: all 0.2s ease; } .district-selected-item:hover { background-color: var(--color-main-green-dark); } .district-remove-btn { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; background: none; border: none; cursor: pointer; color: #FCFCFD; transition: transform 0.2s ease; } .district-remove-btn:hover { transform: scale(1.1); } .district-remove-btn svg { width: 12px; height: 12px; } .district-dropdown-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; /*background: #FFFFFF;*/ border: none; border-radius: 100px; color: #707074; font-size: 14px; font-weight: 500; line-height: 20px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; flex-shrink: 0; } .district-dropdown-toggle:hover { background: #F5F5F7; } .district-dropdown-toggle svg { width: 14px; height: 8px; transition: transform 0.3s ease; color: #8E8E93; } .district-dropdown-toggle.active svg { transform: rotate(180deg); } /* ============================================ DISTRICT FILTER STYLES (MOBILE) ============================================ */ /* District Filter Wrapper */ .district-filter-wrapper { position: relative; width: 100%; } /* District Filter Container - The clickable area */ .district-filter-container { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 13px 17px; background: #FFFFFF; border: 1px solid #E5E5EA; border-radius: 16px; cursor: pointer; transition: all 0.2s ease; min-height: 48px; } .district-filter-container:hover { border-color: #C7C7CC; } /* Selected Items Container */ .district-selected-items { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; align-items: center; } /* Placeholder Text */ .district-placeholder { color: #8E8E93; font-size: 14px; font-weight: 400; line-height: 20px; } /* Selected District Badge */ .district-selected-badge { display: flex; align-items: center; gap: 20px; padding: 10px 14px; background-color: var(--color-primary); border-radius: 30px; color: #FCFCFD; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; } .district-selected-badge span { color: #FCFCFD; } /* Remove Button in Badge */ .district-remove-btn { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; background: transparent; border: none; cursor: pointer; color: #FCFCFD; transition: opacity 0.2s ease; } .district-remove-btn:hover { opacity: 0.7; } .district-remove-btn svg { width: 14px; height: 14px; } /* Overflow Badge */ .district-overflow-badge { padding: 6px 12px; background: #F5F5F7; border-radius: 12px; color: #35463F; font-size: 16px; font-weight: 500; line-height: 20px; white-space: nowrap; } .district-overflow-badge.hidden { display: none; } /* Dropdown Toggle Button */ .district-dropdown-toggle { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: transparent; border: none; cursor: pointer; color: #35463F; transition: transform 0.3s ease; flex-shrink: 0; } .district-dropdown-toggle svg { width: 14px; height: 8px; } /* Rotate arrow when dropdown is open */ .district-filter-wrapper:has(.district-dropdown-menu:not(.hidden)) .district-dropdown-toggle { transform: rotate(180deg); } .district-dropdown-menu { border: 1px solid #E0E6E5; border-radius: 10px; margin-top: 5px; } .district-list { display: flex; flex-direction: column; } .district-item { font-size: 18px; } .district-item label { display: flex; flex-direction: row-reverse; justify-content: space-between; border-top: 1px solid #E0E6E5; border-bottom: 1px solid #E0E6E5; padding: 15px 10px; cursor: pointer; transition: all 0.3s ease; } .district-item label:hover { background-color: #ededed; } .district-item label input { width: 22px; width: 22px; accent-color: var(--color-main-green-dark-2); } .district-item label input:checked { background-color: var(--color-main-green-dark-2); } .district-item label input:checked:hover { background-color: var(--color-main-green-dark-2); } /* === ========================================= PROJECT CLASS FILTER STYLES (MOBILE) ============================================ */ /* Project Class Tabs */ .project-class-tabs { margin-bottom: 16px; } .project-class-tabs-container { display: inline-grid; height: 39px; width: 100% !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-content: center; gap: 6px; border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); background-color: var(--color-main-black-5); padding-inline: 1px; font-family: var(--font-inter); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-main-black-60); position: relative; } .project-class-tab-btn { z-index: 20; display: inline-flex; height: 100%; width: 100% !important; cursor: pointer; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); white-space: nowrap; color: var(--color-main-black-100); transition-property: all; --tw-duration: 250ms; transition-duration: 250ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); position: relative; background: transparent; border: none; } .project-class-tab-btn.project-class-tab-active { color: var(--color-main-black-100); } .project-class-tab-marker { position: absolute; z-index: 10; height: 100% !important; width: 33.3333333333% !important; padding-block: 1px; padding-right: 4px; --tw-duration: 600ms; transition-duration: 600ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); left: 0; } .project-class-tab-marker .toggle-box-mb { height: 100% !important; width: 100% !important; border-radius: calc(infinity * 1px); background-color: #fff; --tw-shadow: 0 1px 4px 0 var(--tw-shadow-color, #0C0C0D0D), 0 1px 4px 0 var(--tw-shadow-color, #0C0C0D1A); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } /* Project Selector Subtitle */ .project-selector-subtitle { color: #8E8E93; font-size: 14px; font-weight: 400; line-height: 20px; margin-bottom: 12px; } /* Project Filter Wrapper */ .project-filter-wrapper { position: relative; width: 100%; } /* Project Filter Container - The clickable area */ .project-filter-container { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 12px 16px; background: #FFFFFF; border: 1px solid #E5E5EA; border-radius: 16px; cursor: pointer; transition: all 0.2s ease; min-height: 48px; } .project-filter-container:hover { border-color: #C7C7CC; } /* Selected Items Container */ .project-selected-items { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; align-items: center; } /* Placeholder Text */ .project-placeholder { color: #8E8E93; font-size: 14px; font-weight: 400; line-height: 20px; } /* Selected Project Badge */ .project-selected-badge { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--color-primary); border-radius: 12px; color: #FCFCFD; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; } .project-selected-badge span { color: #FCFCFD; } /* Remove Button in Badge */ .project-remove-btn { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; background: transparent; border: none; cursor: pointer; color: #FCFCFD; transition: opacity 0.2s ease; } .project-remove-btn:hover { opacity: 0.7; } .project-remove-btn svg { width: 14px; height: 14px; } /* Overflow Badge */ .project-overflow-badge { padding: 6px 12px; background: #F5F5F7; border-radius: 12px; color: #35463F; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; } .project-overflow-badge.hidden { display: none; } /* Dropdown Toggle Button */ .project-dropdown-toggle { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: transparent; border: none; cursor: pointer; color: #35463F; transition: transform 0.3s ease; flex-shrink: 0; } .project-dropdown-toggle svg { width: 14px; height: 8px; } /* Rotate arrow when dropdown is open */ .project-filter-wrapper:has(.project-dropdown-menu:not(.hidden)) .project-dropdown-toggle { transform: rotate(180deg); } /* Dropdown Menu Styles */ .project-dropdown-menu { position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; padding: 16px; background: #FFFFFF; border: 1px solid #E5E5EA; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); z-index: 1000; opacity: 1; transform: translateY(0); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .project-dropdown-menu.hidden { opacity: 0; transform: translateY(-10px); pointer-events: none; visibility: hidden; } .project-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .project-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-radius: 12px; transition: background 0.2s ease; user-select: none; } .project-item:hover { background: #F5F5F7; } .project-item label { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; } .project-item input[type=checkbox] { width: 20px; height: 20px; border: 2px solid #C7C7CC; border-radius: 6px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; transition: all 0.2s ease; flex-shrink: 0; } .project-item input[type=checkbox]:checked { background: var(--color-main-green-dark-2); } .project-item input[type=checkbox]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #FCFCFD; border-width: 0 2px 2px 0; transform: rotate(45deg); } .project-item span { color: #35463F; font-size: 14px; font-weight: 500; line-height: 20px; flex: 1; } /* Animation classes */ .project-dropdown-menu.opening { opacity: 0; transform: translateY(-10px); visibility: visible; pointer-events: auto; } .project-dropdown-menu.open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; } .project-dropdown-menu.closing { opacity: 0; transform: translateY(-10px); pointer-events: none; } .filters-list-con { display: flex; flex-direction: column; gap: 12px; } /* Reels Section Styles */ .reels-section { padding-left: 60px; padding-right: 60px; display: none; } .reels-section.main-container { margin-inline: auto; max-width: 1920px; } .reels-section.space-y-12 > :not(:last-child) { margin-bottom: 3rem; } @media (width >= 64rem) { .reels-section.main-container { margin-top: calc(var(--spacing) * 25); display: block; } .reels-section.lg-mt-25 { margin-top: 6.25rem; } } .reels-title { font-size: 42px; font-family: var(--font-bounded); --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 12 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 12 * (1 - var(--tw-space-y-reverse))); } .reels-container { margin-inline: -95px; } .reels-swiper { position: relative; width: 100%; max-height: 614px !important; } .reels-swiper.space-y-7 > :not(:last-child) { margin-bottom: 1.75rem !important; } .swiper-wrapper-reels { width: 100%; height: 514px !important; } .reel-slide { border-radius: 24px; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; } .reel-slide-inner { position: absolute; inset: 0; } .reel-image-default { position: relative; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 600ms ease-in-out; } .reel-slide:hover .reel-image-default { opacity: 0; } .reel-image-hover { position: absolute; z-index: 1; inset: 0; opacity: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 600ms ease-in-out; } .reel-slide:hover .reel-image-hover { opacity: 1; } .reel-button-container { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; } .reel-play-button { width: var(--circle-size-82); height: var(--circle-size-82); flex-shrink: 0; border-radius: calc(infinity * 1px); } .reel-play-icon { height: var(--icon-size-33); width: var(--icon-size-33); } .reels-scrollbar-container { padding-inline: 90px !important; } /* Before Footer Section Styles */ .main-container { margin-bottom: 60px; } .contact-wrapper { display: flex; flex-direction: column; gap: 0.5rem; } .contact-card { position: relative; overflow: hidden; z-index: 1; border-radius: 24px; padding: 1rem; height: 165px; background-color: var(--color-primary); display: flex; flex-direction: column; justify-content: space-between; } .contact-card-content h2 { font-size: var(--text-xl); color: var(--color-white); font-family: var(--font-bounded); } .contact-card-content p { font-weight: var(--font-weight-medium); color: var(--color-main-black-60); font-size: var(--text-xs); width: 60%; } .contact-card-button { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--color-white); display: grid; place-items: center; } .contact-card-image { z-index: -1; position: absolute; width: 100%; height: 100%; object-fit: contain; top: 25%; right: -45%; } .contact-card-gradient { position: absolute; inset-inline: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); z-index: -2; height: 75%; --tw-gradient-position: 263deg in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: #185139; --tw-gradient-to: #042C1B00; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); opacity: 80%; } @media (width < 64rem) { .contact-card-gradient { display: none; } } .form-card { background-color: var(--color-white); border-radius: 24px; padding: 1rem; } .form-card-content { display: flex; flex-direction: column; gap: 18px; } .form-card-header h2 { font-size: var(--text-xl); font-family: var(--font-bounded); } .form-card-header p { font-size: var(--text-xs); color: var(--color-main-black-60); font-weight: var(--font-weight-medium); } .form-inputs { display: flex; flex-direction: column; gap: 0.7rem; } .form-inputs button, .form-inputs input { height: 48px; } @media (min-width: 640px) { .form-inputs .input-wrapper input:not(:focus) + label { top: 13px !important; } } .input-wrapper { position: relative; font-size: var(--text-sm); font-weight: var(--font-weight-medium); } .input-wrapper input { width: 100%; outline: none; padding: 0.75rem 1rem; border: 1px solid var(--color-border-line-white); border-radius: 12px; } .input-wrapper input::placeholder { opacity: 0; } .input-wrapper input:focus::placeholder { color: var(--color-gray-400); } .input-wrapper label { position: absolute; left: 1rem; transition: all 0.2s; color: var(--color-gray-500); top: 0.625rem; font-size: var(--text-base); } .input-wrapper input:focus ~ label, .input-wrapper input:not(:placeholder-shown) ~ label { top: 0; font-size: var(--text-xs); } .btn-default { /* Button styles - assuming this is defined elsewhere */ } /* Responsive Styles */ @media (width >= 40rem) { .contact-wrapper { flex-direction: row; gap: calc(var(--spacing) * 2); } .contact-card { order: 2; flex: 1; height: auto; } .contact-card-content h2 { font-size: var(--text-34); } .contact-card-content p { font-size: var(--text-sm); width: 65%; } .contact-card-image { top: 20%; transform: scale(1.4); } .form-card { order: 1; flex: 1; } .form-card-header p { font-size: var(--text-sm); } .input-wrapper { font-size: var(--text-base); } .input-wrapper label { top: 1rem; } .input-wrapper input:focus ~ label, .input-wrapper input:not(:placeholder-shown) ~ label { top: 0.125rem; } } @media (width >= 64rem) { .contact-card { padding: 42px 42px 25px 42px; width: 238px; } .contact-card-content p { width: 40%; } .contact-card-image { top: 25%; right: -40%; transform: scale(1.8); } .contact-card-gradient { display: block; } .form-card { padding: 36px 42px 25px 42px; } .form-card-header { display: flex; flex-direction: column; gap: 0.5rem; } .form-card-header h2 { font-size: var(--text-34); } .form-card-header p { width: 65%; } .form-inputs { flex-direction: row; gap: 1rem; } .input-wrapper { width: 100%; } .input-wrapper input { padding: 0 1rem; height: 100%; } } /* Scale utilities for images */ @media (width < 40rem) { .max-sm\:scale-180 { transform: scale(1.8); } } @media (width >= 40rem) { .sm\:scale-140 { transform: scale(1.4); } } @media (width >= 64rem) { .lg\:scale-180 { transform: scale(1.8); } } /* Hidden utilities */ @media (width < 64rem) { .max-lg\:hidden { display: none; } } /* Icon size */ .icon-sm { height: var(--icon-size-sm); width: var(--icon-size-sm); } /* Project Menu Modal Styles */ .project-menu-modal { position: fixed; inset: 0; z-index: 200; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: flex-start; opacity: 1; transition: opacity 0.3s ease, background-color 0.3s ease; pointer-events: auto; } .project-menu-modal.hidden { opacity: 0; pointer-events: none; background-color: rgba(0, 0, 0, 0); } @media (min-width: 64rem) { .project-menu-modal { padding-top: 116.4px; padding-left: 1.5rem; padding-right: 1.5rem; } } .menu-container { display: flex; gap: 0.5rem; width: 100%; max-width: 1750px; opacity: 1; transform: translateY(0); transition: opacity 0.3s ease-out, transform 0.3s ease-out; } .project-menu-modal.hidden .menu-container { opacity: 0; transform: translateY(-10px); } .menu-main-content { flex-basis: 100%; background-color: white; padding: 1rem; border: 2px solid var(--color-border-line-white); border-radius: 24px; display: flex; gap: 27px; } .menu-sidebar { flex-basis: calc(var(--spacing) * 200); min-width: 360px; } .menu-sidebar > * + * { margin-top: 10px; } .menu-tabs-container { font-family: var(--font-inter); font-weight: bold; font-size: 1rem; color: var(--color-main-black-60); position: relative; display: inline-grid; align-items: center; justify-content: center; width: 100%; height: 39px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 1px; background-color: var(--color-main-black-5); border-radius: 9999px; border: 1px solid var(--color-border-line-white); } .menu-tab-button { position: relative; z-index: 20; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 9999px; white-space: nowrap; } .menu-tab-button.active { color: var(--color-main-black-100); cursor: default; } .menu-tab-button:not(.active):hover { background-color: rgba(0, 0, 0, 0.04); cursor: pointer; } .menu-tab-marker { position: absolute; left: 0; z-index: 10; padding-top: 1px; padding-right: 4px; width: 25%; height: 100%; transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1); } .menu-sections > * + * { margin-top: 9px; } .menu-all-apartments { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-radius: 22px; background-color: var(--color-main-black-5); } .menu-all-apartments-content { display: flex; gap: 0.75rem; align-items: center; font-weight: 500; font-size: 1rem; } .menu-all-apartments-content img { width: var(--icon-size-base); height: var(--icon-size-base); } .menu-all-apartments button img { width: var(--icon-size-sm); height: var(--icon-size-sm); } .menu-tab-content { margin-bottom: -1rem; margin-right: -0.5rem; padding-bottom: 1rem; padding-right: 0.5rem; height: 310px; overflow-y: auto; position: relative; display: flex; flex-direction: column; gap: 9px; } .menu-tab-content::-webkit-scrollbar { width: 0.25rem; } .menu-tab-content::-webkit-scrollbar-track { background: transparent; } .menu-tab-content::-webkit-scrollbar-thumb { border-radius: 9999px; background-color: #d1d5db; } .menu-apartment-item { display: flex; gap: 23px; align-items: center; width: 100%; padding-bottom: 9px; border-bottom: 1px solid var(--color-border-line-white); } .menu-apartment-item img { width: 96px; height: 96px; object-fit: cover; object-position: center; border-radius: 24px; transition: all 450ms cubic-bezier(0.4, 0, 0.2, 1); } .menu-apartment-item:hover img { width: 126px; } .menu-apartment-info { width: 100%; } .menu-apartment-info > * + * { margin-top: 0.375rem; } .menu-apartment-header { display: flex; justify-content: space-between; text-align: center; gap: 1rem; font-weight: 500; font-size: 1rem; } .menu-apartment-header h5 { font-family: Bounded; font-size: 1.25rem; } .menu-apartment-details { display: flex; justify-content: space-between; text-align: center; gap: 1rem; font-weight: 500; font-size: 0.875rem; color: var(--color-main-black-60); } .menu-grid-section { margin-top: -0.25rem; margin-bottom: -0.25rem; margin-right: -0.25rem; flex-basis: 100%; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 15px; grid-template-columns: minmax(auto, 300px) 1fr; } .menu-grid-card { z-index: 1; place-content: end; overflow: hidden; border-radius: 16px; background-color: #D9D9D9; position: relative; } .menu-grid-card.span-2 { grid-row: span 2/span 2; } .menu-grid-card img { width: 100%; height: 100%; position: absolute; z-index: -1; inset: 0; object-position: center; object-fit: cover; } .menu-grid-card img.scale-120 { transform: scale(1.2); } .menu-grid-card img.scale-180 { transform: scale(1.8); } .menu-grid-card img.pos-50-17 { object-position: 50% 17%; } .menu-grid-card img.pos-0-88 { object-position: 0% 88%; } .menu-grid-card-content { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; gap: 0.5rem; overflow: hidden; backdrop-filter: blur(8px); } .menu-grid-card-content h3 { color: #FCFCFD; font-size: 1.25rem; line-height: 1.5rem; text-wrap: balance; font-weight: bold; text-align: left; } .menu-grid-card-content button { width: 38px; height: 38px; border-radius: 8px; display: grid; place-content: center; place-items: center; background-color: rgba(31, 36, 34, 0.8); backdrop-filter: blur(50px); border: 1px solid var(--color-border-line-white); } .menu-grid-card-content button img { width: 9px; height: 16px; position: static; } .menu-right-card { background: linear-gradient(133deg, rgba(230, 235, 229, 0.3294117647), rgba(255, 255, 255, 0)); padding: 2px; flex-basis: calc(var(--spacing) * 175); border-radius: 24px; } .menu-right-card-inner { position: relative; z-index: 1; overflow: hidden; width: 100%; height: 100%; border-radius: 24px; display: grid; place-content: end; } .menu-right-card-inner img { width: 100%; height: 100%; position: absolute; inset: 0; z-index: -1; object-position: 100% 50%; object-fit: cover; } .menu-right-card-inner img.scale-180 { transform: scale(1.8); } .menu-right-card-content { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 2); background-color: rgba(0, 0, 0, 0.0117647059); padding: calc(var(--spacing) * 8); font-size: var(--text-30); line-height: var(--tw-leading, var(--text-30--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); text-wrap: balance; color: var(--color-white); --tw-backdrop-blur: blur(8px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .menu-right-card-content h3 { text-align: left; } .menu-right-card-button-wrapper { border-radius: 12px; padding: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); } .menu-right-card-button { padding: 9px 1.5rem; border-radius: 12px; font-family: Bounded; background-color: white; font-size: 0.875rem; color: var(--color-primary); transition: background-color 0.2s; } .menu-right-card-button:hover { background-color: var(--color-green-100); } .image-location { display: block; vertical-align: middle; max-width: 100%; position: absolute; inset: calc(var(--spacing) * 0); z-index: -1; width: 100%; height: 100%; --tw-scale-x: 180%; --tw-scale-y: 180%; --tw-scale-z: 180%; scale: var(--tw-scale-x) var(--tw-scale-y); object-fit: cover; object-position: 100% 50%; } .image-menu-modal { display: block; vertical-align: middle; max-width: 100%; position: absolute; inset: calc(var(--spacing) * 0); z-index: -1; width: 100%; height: 100%; --tw-scale-x: 120%; --tw-scale-y: 120%; --tw-scale-z: 120%; scale: var(--tw-scale-x) var(--tw-scale-y); object-fit: cover; object-position: 50% 17%; } .mortage-modal { position: fixed; inset: calc(var(--spacing) * 0); display: flex; z-index: 200; pointer-events: all; transition: all 0.4s ease; align-items: flex-start; justify-content: center; inset: calc(var(--spacing) * 0); background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } .mortage-modal.hidden { opacity: 0; pointer-events: none; } .actual-mortage { display: flex; opacity: 1; pointer-events: all; transform: translateY(0px); transition: all 0.3s ease; max-width: 1540px; padding-inline: calc(var(--spacing) * 6); gap: calc(var(--spacing) * 2); width: 100%; } .mortage-modal.hidden .actual-mortage { opacity: 0; pointer-events: none; transform: translateY(-20px); } .mortage-con { font-family: var(--font-inter); color: var(--color-main-black-100); box-sizing: border-box; margin: 0; border: 0 solid; position: relative; z-index: 1; flex-basis: calc(var(--spacing) * 185); border-radius: 24px; background-color: var(--color-primary); padding: 3px; } .mortage-bg-left { position: absolute; inset: calc(var(--spacing) * 0); z-index: 2; border-radius: 24px; --tw-gradient-position: 133deg in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: #E6EBE554; --tw-gradient-to: #FFFFFF00; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .mortage-left { position: relative; z-index: 3; width: 100%; height: 100%; place-content: end; overflow: hidden; border-radius: 21px; background-color: var(--color-primary); } .mortage-left-bottom { display: flex; align-items: flex-end; justify-content: space-between; padding-inline: calc(var(--spacing) * 8); padding-top: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 7); --tw-backdrop-blur: blur(8px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .mortage-title { font-weight: inherit; font-family: var(--font-bounded); font-size: var(--text-30); line-height: var(--tw-leading, var(--text-30--line-height)); color: var(--color-white); } .mortage-m-btn { position: relative; z-index: 1; cursor: pointer; font-family: var(--font-bounded); border-radius: 12px; padding-block: 9px; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); background-color: var(--color-white); fill: var(--color-main-black-100); color: var(--color-main-black-100); width: auto !important; padding-inline: calc(var(--spacing) * 6) !important; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .mortage-m-btn:hover { background-color: var(--color-main-green) !important; } .mortage-gradient { position: absolute; right: calc(var(--spacing) * 15); bottom: calc(var(--spacing) * 20); left: calc(var(--spacing) * 0); z-index: -4; height: 276px; --tw-gradient-position: 269deg in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: #185139; --tw-gradient-to: #042C1B00; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .mortage-calculator-img { position: absolute; right: calc(var(--spacing) * -60); bottom: calc(var(--spacing) * -40); z-index: -2; } .mortage-calculator-img img { display: block; vertical-align: middle; max-width: 100%; height: auto; --tw-scale-x: 70%; --tw-scale-y: 70%; --tw-scale-z: 70%; scale: var(--tw-scale-x) var(--tw-scale-y); object-fit: contain; } .mortage-options-grid { display: grid; flex-basis: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--spacing) * 3); border-radius: 24px; border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-border-line-white); background-color: #F1F1F1; padding: calc(var(--spacing) * 3); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); flex-shrink: 1; } .mortage-option { display: flex; height: 212px; cursor: pointer; flex-direction: column; justify-content: space-between; border-radius: 16px; background-color: var(--color-white); padding-inline: calc(var(--spacing) * 5); padding-top: 21px; padding-bottom: 18px; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); fill: #35463F; } .mortage-option:hover { color: var(--color-main-green); background-color: var(--color-primary); } @media (width >= 64rem) { .mortage-modal { padding-top: 116.4px; } } /* Location Sales Department Modal Styles */ /* Modal container */ .location-modal { position: fixed; inset: 0; z-index: 200; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; } .location-modal.hidden { display: none; } /* Modal content wrapper */ .location-modal-content { display: flex; gap: 20px; width: auto; background-color: #fff; height: 436px; border: 2px solid #E0E6E5; border-radius: 24px; padding: 12px 12px 20px 20px; } /* Left sidebar */ .location-sidebar { width: 298px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 19px; } /* Sidebar top section with spacing */ .location-sidebar-top > *:not(:last-child) { margin-bottom: 32px; } /* Modal title */ .location-modal-title { font-family: Bounded, sans-serif; font-size: 1.25rem; line-height: 1.75rem; } /* Navigation list with spacing */ .location-nav-list { font-size: 1rem; line-height: 1.5rem; } .location-nav-list > *:not(:last-child) { margin-bottom: 12px; } .location-nav-item { cursor: pointer; transition: all 400ms ease-in-out; } .location-nav-item:hover { color: #AEB5B2; transform: translateY(6px); } /* Sidebar bottom section with spacing */ .location-sidebar-bottom { width: 100%; } .location-sidebar-bottom > *:not(:last-child) { margin-bottom: 17px; } .location-address { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: #5C6A65; } /* Map container */ .location-map-container { position: relative; z-index: 1; width: 752px; height: 100%; background-color: #80C9F5; margin-bottom: -8px; border-radius: 12px; overflow: hidden; } .location-map-iframe { width: 100%; height: 100%; } /* Responsive adjustments */ @media (width >= 64rem) { .location-modal { padding-top: 116.4px; } } .project-modal-btn { cursor: pointer; position: relative; z-index: 1; display: flex; width: 100%; min-width: 250px; align-items: center; justify-content: center; border-radius: 12px; padding-block: 13px; font-family: var(--font-bounded); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-gradient-position: 180deg in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: color-mix(in oklab, var(--color-white) 20%, transparent); --tw-gradient-to: color-mix(in oklab, var(--color-white) 0%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); fill: var(--color-main-green); color: var(--color-main-green); } @media (width > 64rem) { .project-modal-btn { min-width: 280px; height: 52px; font-size: 1rem; } } /* Similar Project Card Styles */ /* Similar Project Container */ .similar-project-container { display: flex; flex-direction: column; } .similar-project-container > * + * { margin-top: 14px; } .similar-project-container.col-span-1 { grid-column: span 1; } .similar-project-container.col-span-2 { grid-column: span 2; } /* Card for Content */ .card-for-content { position: relative; z-index: 1; border-radius: 24px; overflow: hidden; } .card-for-content.height-large { height: 432px; } .card-for-content.height-small { height: 432px; } @media (min-width: 1024px) { .card-for-content.height-large { height: 690px; } .card-for-content.height-small { height: 494px; } } /* Swiper Container */ .similar-project-swiper-wrapper { position: absolute; z-index: -1; inset: 0; } .similar-project-swiper { width: 100%; height: 100%; } .similar-project-swiper .swiper-wrapper { width: 100%; height: 100%; } .similar-project-swiper .swiper-slide { height: 100%; } /* Pagination */ .similar-project-pagination-container { position: absolute; z-index: 1; bottom: 12px; right: 16px; } @media (max-width: 639px) { .similar-project-pagination-container { display: none; } } @media (min-width: 640px) and (max-width: 1023px) { .similar-project-pagination-container { bottom: 8px; left: 12px; } } @media (min-width: 1024px) { .similar-project-pagination-container { bottom: 12px; right: 16px; } } .pagination-wrapper { position: relative; z-index: -2; padding: 1px; border-radius: 9999px; background: rgba(255, 255, 255, 0.012); backdrop-filter: blur(100px); width: auto; } @media (width < 64rem) { .pagination-wrapper { max-width: 45px; } } .pagination-wrapper::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 9999px; background: linear-gradient(171deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0)); } .similar-project-pagination { height: 100%; backdrop-filter: blur(100px); border-radius: 9999px; display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.012); padding: 6px; } /* Card Content */ .similar-project-content { width: 100%; height: 100%; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; pointer-events: none; } @media (min-width: 1024px) { .similar-project-content { padding: 16px; } } .similar-project-content .container-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; } @media (min-width: 640px) { .similar-project-content .container-badges { gap: 8px; } } .similar-project-content .info-cards-wrapper { align-self: flex-end; } @media (min-width: 1024px) { .similar-project-content .info-cards-wrapper { align-self: auto; } } /* Mobile Info Section */ .similar-project-mobile-info { position: relative; z-index: 1; padding: 8px; display: flex; align-items: flex-start; justify-content: space-between; } @media (min-width: 1024px) { .similar-project-mobile-info { display: none; } } .similar-project-mobile-details { display: flex; flex-direction: column; } .similar-project-mobile-details > * + * { margin-top: 5px; } .similar-project-mobile-title { font-size: 28px; font-family: var(--font-bounded); } .similar-project-mobile-location { display: flex; align-items: center; gap: 14px; color: var(--color-main-black-60); font-size: 12px; font-weight: 500; } .similar-project-mobile-landmark { display: flex; align-items: center; gap: 6px; } .similar-project-mobile-btn { padding-top: 4px; padding-bottom: 4px; } .similar-project-wrapper { display: flex; align-items: flex-end; gap: 1rem; } @media (max-width: 1023px) { .similar-project-wrapper { display: none; } } .similar-project-card { position: relative; background-color: var(--color-white); border-radius: 12px; padding: 1.75rem; pointer-events: auto; } /* Mini Modal - Desktop */ .similar-project-mini-modal { position: absolute; z-index: 3; top: -7.5rem; font-size: var(--text-base); font-weight: var(--font-weight-medium); background-color: rgba(252, 252, 253, 0.8980392157); box-shadow: 0px 0px 8px 0px rgba(20, 21, 23, 0.06), 0px 2px 16px 0px rgba(20, 21, 23, 0.08); border-radius: 24px; backdrop-filter: blur(50px); padding-top: 0.5rem; padding-bottom: 0.5rem; width: 300px; pointer-events: none; } @media (min-width: 1024px) { .similar-project-mini-modal { top: -8.75rem; right: -13.75rem; } } /* Mini Modal - Mobile (separate modal for mobile button) */ .similar-project-mobile-mini-modal { position: absolute; z-index: 50; font-size: var(--text-base); font-weight: var(--font-weight-medium); background-color: rgba(252, 252, 253, 0.8980392157); box-shadow: 0px 0px 8px 0px rgba(20, 21, 23, 0.06), 0px 2px 16px 0px rgba(20, 21, 23, 0.08); border-radius: 24px; backdrop-filter: blur(50px); padding-top: 0.5rem; padding-bottom: 0.5rem; width: 250px; pointer-events: none; bottom: 4.5rem; right: 0; } /* Hide mobile modal on desktop */ @media (min-width: 1024px) { .similar-project-mobile-mini-modal { display: none !important; } } /* Adjust width for larger mobile screens */ @media (min-width: 640px) and (max-width: 1023px) { .similar-project-mobile-mini-modal { width: 300px; } } .similar-project-mini-modal-item { padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: background-color 0.3s ease-in-out; pointer-events: auto; } .similar-project-mini-modal-item:hover { background-color: rgba(0, 0, 0, 0.04) !important; } /* Header Section */ .similar-project-header { display: flex; justify-content: space-between; align-items: flex-start; } .similar-project-info { display: flex; flex-direction: column; gap: 0.5rem; } .similar-project-title-section > * + * { margin-top: 0.5rem; } .similar-project-title { font-family: var(--font-bounded); font-size: var(--text-34); line-height: var(--text-34--line-height); } .similar-project-location { display: flex; align-items: center; gap: 14px; color: var(--color-main-black-60); font-size: var(--text-sm); font-weight: var(--font-weight-medium); } .similar-project-landmark { display: flex; align-items: center; gap: 6px; } /* Additional Information Container */ .additional-information-container { margin-top: 0; margin-bottom: 0; max-height: 0; overflow: hidden; transition: all 0.3s ease-in-out; } .additional-information-container > * + * { margin-top: 0.75rem; } .similar-project-banks { display: flex; gap: 0.5rem; } .similar-project-bank-item { border-radius: 8px; background-color: var(--color-main-black-15); padding: 6px 0.5rem; display: flex; gap: 0.25rem; align-items: center; font-weight: var(--font-weight-medium); } .similar-project-bank-item span { font-size: var(--text-base); } .similar-project-apartments { display: flex; flex-direction: column; gap: 0.25rem; } .similar-project-apartment-item { display: flex; font-weight: var(--font-weight-medium); justify-content: space-between; align-items: center; } .similar-project-apartment-rooms { font-size: var(--text-base); color: var(--color-main-black-60); cursor: pointer; } .similar-project-apartment-price { font-size: var(--text-18); } /* Footer Section */ .similar-project-footer { margin-top: 20px; display: flex; align-items: flex-end; justify-content: space-between; transition: all 0.3s ease-in-out; } .similar-project-price { font-size: var(--text-22); font-weight: 500; } .additional-information-btn { pointer-events: auto; color: var(--color-web-link); font-family: var(--font-bounded); font-size: var(--text-sm); cursor: pointer; z-index: 12; position: relative; } .features-card { background-color: #fff; border-radius: 12px; padding: 21px 16px; width: 362px; pointer-events: auto; display: flex; flex-direction: column; align-items: flex-start; } /* Space between feature buttons (similar to gap-y-6) */ .features-card > .feature-button:not(:last-child) { margin-bottom: 24px; /* 6 * 4px = 24px */ } .feature-button { display: flex; justify-content: flex-start; text-align: left; align-items: center; gap: 25px; cursor: pointer; background: none; border: none; padding: 0; width: 100%; } .feature-text { font-size: 14px; font-weight: 500; flex: 1; line-height: 1.4; } .mobile-info-card { background-color: #fff; border-radius: 16px; overflow: hidden; pointer-events: auto; } @media (width >= 64rem) { .mobile-info-card { display: none; } } .mobile-info-header { padding: 10px 14px; font-size: 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; } .mobile-info-toggle-btn { color: #007AFF; background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 500; } .mobile-additional-info { opacity: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out; } .mobile-additional-info-content { padding: 0 14px 0px 14px; } /* Space between children (similar to space-y-3) */ .mobile-additional-info-content > *:not(:last-child) { margin-bottom: 12px; /* 3 * 4px = 12px */ } .mini-bank { border-radius: 8px; background-color: #E1E3E2; display: flex; gap: 4px; align-items: center; font-weight: 500; padding: 6px 8px; font-size: 16px; } .mini-bank img { width: 24px; height: 24px; } .flats-inf-l-mini { list-style: none; padding: 0; margin: 0; } /* Space between list items (similar to space-y-1) */ .flats-inf-l-mini > li:not(:last-child) { margin-bottom: 4px; /* 1 * 4px = 4px */ } .flats-inf-l-mini li { display: flex; font-weight: 500; justify-content: space-between; align-items: center; font-size: 10px; } /* Mobile Info Container */ .similar-project-mobile-info { position: relative; } .acc { width: 80%; flex-wrap: wrap; } .acc-con { display: flex; gap: 40px; } .acch { width: 80%; /* padding-left: 10px; */ flex-wrap: wrap; gap: calc(var(--spacing) * 28); } @layer components { .header-default { position: fixed !important; inset-inline: calc(var(--spacing) * 0); top: calc(var(--spacing) * 0); z-index: 100; padding: calc(var(--spacing) * 4); } @media (width >= 40rem) { .header-default { padding-block: calc(var(--spacing) * 6); } } @media (width >= 64rem) { .header-default { padding-inline: 50px; } } .header-container { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; border-radius: 25px; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); background-color: var(--color-white); padding: calc(var(--spacing) * 4); --tw-shadow: 0 1px 4px 0 var(--tw-shadow-color, rgba(12, 12, 13, 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } @media (width >= 40rem) { .header-container { padding-inline: calc(var(--spacing) * 7); } } @media (width >= 40rem) { .header-container { padding-block: calc(var(--spacing) * 4); } } @media (width >= 64rem) { .header-container { gap: 100px; } } @media (width < 64rem) { .header-container { -tw-space-y-reverse: 0; margin-block-start: calc(5px * var(--tw-space-y-reverse)); margin-block-end: calc(5px * (1 - var(--tw-space-y-reverse))); } } .header-default .left-side { position: relative; display: flex; align-items: center; gap: calc(var(--spacing) * 4); } @media (width >= 64rem) { .header-default .left-side { gap: 41px; } } .header-default .navigation { position: relative; display: none; font-family: var(--font-inter); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } @media (width >= 40rem) { .header-default .navigation { display: flex; } } @media (width >= 40rem) { .header-default .navigation { flex-wrap: wrap; } } @media (width >= 40rem) { .header-default .navigation { align-items: center; } } @media (width >= 40rem) { .header-default .navigation { column-gap: calc(var(--spacing) * 4); } } @media (width >= 64rem) { .header-default .navigation { column-gap: 38px; } } @media (width >= 64rem) { .header-default .navigation { row-gap: calc(var(--spacing) * 3); } } @media (width >= 64rem) { .header-default .navigation { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .header-default .navigation li { cursor: pointer; } .header-default .navigation li:not(:nth-child(4), :nth-child(6)) { display: none; } @media (width >= 64rem) { .header-default .navigation li:not(:nth-child(4), :nth-child(6)) { display: inline; } } .header-default .navigation li:nth-child(4) { display: flex; align-items: center; gap: calc(var(--spacing) * 1); } .header-default .navigation li:nth-child(4)::before { width: 5px; height: 5px; border-radius: calc(infinity * 1px); background-color: var(--color-error); --tw-content: ""; content: var(--tw-content); } .header-default .navigation li:not(.active) { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 250ms; transition-duration: 250ms; --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } @media (hover: hover) { .header-default .navigation li:not(.active):hover { --tw-translate-y: calc(var(--spacing) * 1); translate: var(--tw-translate-x) var(--tw-translate-y); } } .header-default .navigation li:not(.active) span { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 250ms; transition-duration: 250ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } @media (hover: hover) { .header-default .navigation li:not(.active) span:is(:where(.group):hover *) { opacity: 60%; } } .header-default .logo { height: 25px; width: 74px; object-fit: cover; object-position: center; } @media (width >= 64rem) { .header-default .logo { height: 40px; } } @media (width >= 64rem) { .header-default .logo { width: 119px; } } .header-default .phone-number-txt { cursor: pointer; font-family: var(--font-inter); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); text-wrap: nowrap; display: flex; align-items: center; gap: 8px; margin-left: 10px; } @media (width >= 64rem) { .header-default .phone-number-txt { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .header-default .phone-number-txt.hidden { display: none; } .header-default .right-side { display: flex; align-items: center; gap: 19px; } @media (width >= 64rem) { .header-default .right-side { gap: calc(var(--spacing) * 3); } } .favorite-btn { display: none !important; } @media (width >= 64rem) { .favorite-btn { display: inline-flex; } } .favorite-btn img { height: var(--icon-size-base); width: var(--icon-size-base); } .hamburger-btn { position: relative; z-index: 10; } @media (width >= 64rem) { .hamburger-btn { display: none; } } .hamburger-btn img { height: var(--icon-size-base); width: var(--icon-size-base); } @media (width >= 40rem) { .hamburger-btn img { height: var(--icon-size-md); width: var(--icon-size-md); } } .cancel-ham-btn { height: var(--icon-size-md); width: var(--icon-size-md); position: absolute; inset: calc(var(--spacing) * 0); z-index: 10; transition-property: all; --tw-duration: 450ms; transition-duration: 450ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); opacity: 0; transform: scale(0); } .profile-btn { display: none !important; } @media (width >= 64rem) { .profile-btn { display: inline !important; } } .profile-btn .btn-sm { padding-inline: 33.5px; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 350ms; transition-duration: 350ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } @media (hover: hover) { .profile-btn .btn-sm:hover { background-color: color-mix(in srgb, #000 4%, transparent) !important; } @supports (color: color-mix(in lab, red, red)) { .profile-btn .btn-sm:hover { background-color: color-mix(in oklab, var(--color-black) 4%, transparent) !important; } } } .header-default .sale-figure img { width: 160px; height: 160px; } .header-default.sale .sale-figure { position: absolute; right: -24%; --tw-scale-x: 90%; --tw-scale-y: 90%; --tw-scale-z: 90%; scale: var(--tw-scale-x) var(--tw-scale-y); transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 450ms; transition-duration: 450ms; --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } @media (hover: hover) { .header-default.sale .sale-figure:hover { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } } @media (hover: hover) { .header-default.sale .sale-figure:hover { rotate: 5deg; } } @media (width < 1441px) { .header-default.sale .sale-figure { right: calc(var(--spacing) * -30); } } @media (width < 1441px) { .header-default.sale .sale-figure { bottom: calc(var(--spacing) * 0); } } @media (width >= 64rem) { .header-default.sale .sale-figure { display: block !important; } } .header-default:not(.sale) .sale-figure-for-mobile { display: none; opacity: 0; } .sale-figure-for-mobile-con { display: flex; align-items: center; overflow: hidden; border-radius: calc(infinity * 1px); background-color: var(--color-primary); padding: 5px; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--color-try-it-out); position: relative; } .left-shadow { position: absolute; inset-block: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); z-index: 10; width: 50px; --tw-gradient-position: to left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: #042C1B00; --tw-gradient-from-position: 30%; --tw-gradient-to: var(--color-primary); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-to-position: 75%; } .mobile-sale-btn { border-radius: calc(infinity * 1px); background-color: var(--color-white); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); font-family: var(--font-bounded); font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); color: var(--color-primary); } .dropdown-for-languages .selected-languages { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .dropdown-for-languages img { max-width: 100%; height: var(--icon-size-xs); width: var(--icon-size-xs); transition-property: all; --tw-duration: 150ms; transition-duration: 150ms; --tw-ease: var(--ease-in); transition-timing-function: var(--ease-in); transform: rotate(0deg); } .header-default .sale-figure { position: absolute; top: calc(var(--spacing) * -14); display: none; } @media (width < 1440px) { .header-default .sale-figure { top: calc(var(--spacing) * -10); } } .header-default .sale-figure .sale-txt { position: absolute; top: calc(var(--spacing) * 12.4); left: calc(var(--spacing) * 10.3); width: 63px; rotate: -15deg; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: 93%; line-height: 100%; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-white); } .header-default .sale-figure img { width: 160px; height: 160px; } .dropdown-for-languages .selected-languages { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .dropdown-for-languages img { height: var(--icon-size-xs); width: var(--icon-size-xs); } .marquee-container { overflow: hidden; } .marquee-content { display: inline-flex; white-space: nowrap; will-change: transform; } .marquee-content span { margin: 0 8px; font-size: 12px; font-weight: 500; } .marquee-content.animated { animation: marquee linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(var(--marquee-distance)); } } .mobile-navigation { position: fixed; inset-inline: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); z-index: 90; --tw-translate-y: calc(var(--spacing) * 1); translate: var(--tw-translate-x) var(--tw-translate-y); background-color: #131314; } @media (width >= 64rem) { .mobile-navigation { display: none; } } .mobile-navigation ul { display: flex; align-items: flex-end; justify-content: space-between; gap: 22.75px; padding-inline: 27px; padding-block: calc(var(--spacing) * 4); font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); color: var(--color-main-white-60); } @media (width >= 40rem) { .mobile-navigation ul { padding-inline: 44px; } } .mobile-navigation li { place-items: center; } :where(.mobile-navigation li > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(3px * var(--tw-space-y-reverse)); margin-block-end: calc(3px * (1 - var(--tw-space-y-reverse))); } .mobile-navigation li img { height: var(--icon-size-27); width: var(--icon-size-27); } .mobile-navigation .chat-list-container { position: absolute; right: calc(var(--spacing) * 4); bottom: calc(var(--spacing) * 24); } @media (width >= 64rem) { .mobile-navigation .chat-list-container > button { display: none !important; } } .mobile-navigation .chat-list-container > button > img { height: var(--icon-size-base); width: var(--icon-size-base); } .mobile-navigation:not(.chat-on) .chat-list-container { display: none; } .simulation-on-bottom-of-phone { pointer-events: none; position: absolute; inset-inline: calc(var(--spacing) * 0); top: calc(var(--spacing) * -6.5); z-index: 1; display: flex; justify-content: space-between; } .simulation-on-bottom-of-phone img { height: var(--icon-size-27); width: var(--icon-size-27); } .chats-circle { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-primary); z-index: 2; width: var(--circle-size-54); height: var(--circle-size-54); flex-shrink: 0; border-radius: calc(infinity * 1px); position: relative; } .chats-circles { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-primary); width: var(--circle-size-54); height: var(--circle-size-54); flex-shrink: 0; border-radius: calc(infinity * 1px); } .container-for-chats { z-index: -1; display: flex; --tw-translate-y: calc(var(--spacing) * 12); translate: var(--tw-translate-x) var(--tw-translate-y); flex-direction: column; gap: calc(var(--spacing) * 3); overflow: hidden; transition-property: all; --tw-duration: 650ms; transition-duration: 650ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); position: relative; max-height: 300px; padding-bottom: 60px; transform: translateY(0px); opacity: 1; } footer { position: relative; background-color: #131314; padding-top: 74px; padding-bottom: calc(var(--spacing) * 20); color: #989899; } @media (width >= 64rem) { footer { padding-top: 90px; } } footer .simulation--mobile-bottom-edge { position: absolute; top: calc(var(--spacing) * -12); right: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); } footer .simulation--mobile-bottom-edge:first-child { z-index: 1; height: calc(var(--spacing) * 10); --tw-translate-y: calc(var(--spacing) * 6); translate: var(--tw-translate-x) var(--tw-translate-y); border-bottom-right-radius: 24px; border-bottom-left-radius: 24px; background-color: #F1F1F1; } footer .simulation--mobile-bottom-edge:last-child { z-index: 0; height: calc(var(--spacing) * 20); background-color: #131314; } footer .layer-up { margin-inline: auto; max-width: 1920px; padding-inline: calc(var(--spacing) * 3); } @media (width >= 40rem) { footer .layer-up { padding-inline: calc(var(--spacing) * 9); } } @media (width >= 64rem) { footer .layer-up { padding-inline: 95px; } } footer .layer-up .container-footer { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: #35463F; padding-bottom: calc(var(--spacing) * 12); } @media (width >= 40rem) { footer .layer-up .container-footer { padding-inline: calc(var(--spacing) * 2); } } @media (width >= 40rem) { footer .layer-up .container-footer { padding-bottom: 49px; } } @media (width >= 64rem) { footer .layer-up .container-footer { display: flex; } } @media (width >= 64rem) { footer .layer-up .container-footer { align-items: flex-start; } } @media (width >= 64rem) { footer .layer-up .container-footer { justify-content: space-between; } } @media (width >= 64rem) { footer .layer-up .container-footer { gap: calc(var(--spacing) * 10); } } @media (width >= 64rem) { footer .layer-up .container-footer { padding-bottom: 25px; } } footer .logo { height: 71px; max-width: 189px; } footer .new-promotion-newsletter-container { margin-top: calc(var(--spacing) * 6); } :where(footer .new-promotion-newsletter-container > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 4 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 4 * (1 - var(--tw-space-y-reverse))); } @media (width >= 40rem) { footer .new-promotion-newsletter-container { margin-top: calc(var(--spacing) * 8); } } :where(.new-promotion-newsletter-container > div:first-child > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 2 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 2 * (1 - var(--tw-space-y-reverse))); } footer .new-promotion-newsletter-container h2 { font-family: var(--font-bounded); font-size: var(--text-26); line-height: var(--tw-leading, var(--text-26--line-height)); color: var(--color-white); } @media (width >= 64rem) { footer .new-promotion-newsletter-container h2 { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } footer .new-promotion-newsletter-container p { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } @media (width >= 40rem) { footer .new-promotion-newsletter-container p { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } @media (width >= 64rem) { footer .new-promotion-newsletter-container p { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } footer .sending-phone-number-container { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: calc(var(--spacing) * 2); } @media (width >= 40rem) { footer .sending-phone-number-container { gap: calc(var(--spacing) * 3); } } @media (width >= 64rem) { footer .sending-phone-number-container { grid-template-columns: 300px 1fr; } } footer .sending-phone-number-container > .input-container { position: relative; } @media (width >= 64rem) { footer .sending-phone-number-container > .input-container { max-width: 367px; } } footer .sending-phone-number-container input { box-sizing: border-box; width: 100%; border-radius: 12px; border-style: var(--tw-border-style); border-width: 1px; border-color: #454F4D; background-color: #1F2322; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2.5); font-family: var(--font-inter); color: #FCFCFD; } footer .sending-phone-number-container input:focus { border-color: #FCFCFD; } footer .sending-phone-number-container input:focus { --tw-outline-style: none; outline-style: none; } @media (width >= 64rem) { footer .sending-phone-number-container input { padding-block: 17.5px; } } @media (width >= 64rem) { footer .sending-phone-number-container input { font-size: 16px; } } footer .sending-phone-number-container label { position: absolute; top: 50%; left: calc(var(--spacing) * 3); --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); font-family: var(--font-inter); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: #FCFCFD; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } footer .sending-phone-number-container label:is(:where(.peer):focus ~ *) { --tw-translate-y: calc(var(--spacing) * -6); translate: var(--tw-translate-x) var(--tw-translate-y); } footer .sending-phone-number-container label:is(:where(.peer):focus ~ *) { background-color: #1F2322; } footer .sending-phone-number-container label:is(:where(.peer):focus ~ *) { padding-inline: calc(var(--spacing) * 0); } footer .sending-phone-number-container label:is(:where(.peer):focus ~ *) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } footer .sending-phone-number-container label:is(:where(.peer):focus ~ *) { color: #FCFCFD; } footer .sending-phone-number-container label:is(:where(.peer):not(:placeholder-shown) ~ *) { --tw-translate-y: calc(var(--spacing) * -6); translate: var(--tw-translate-x) var(--tw-translate-y); } footer .sending-phone-number-container label:is(:where(.peer):not(:placeholder-shown) ~ *) { background-color: #1F2322; } footer .sending-phone-number-container label:is(:where(.peer):not(:placeholder-shown) ~ *) { padding-inline: calc(var(--spacing) * 0); } footer .sending-phone-number-container label:is(:where(.peer):not(:placeholder-shown) ~ *) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } footer .sending-phone-number-container label:is(:where(.peer):not(:placeholder-shown) ~ *) { color: #FCFCFD; } footer .method-communication-list-container { margin: calc(var(--spacing) * 0); } @media (width >= 40rem) { footer .method-communication-list-container { margin-top: 64px; } } @media (width >= 40rem) { footer .method-communication-list-container { margin-bottom: 50px; } } @media (width >= 40rem) { footer .method-communication-list-container { display: flex; } } @media (width >= 40rem) { footer .method-communication-list-container { align-items: center; } } @media (width >= 40rem) { footer .method-communication-list-container { justify-content: space-between; } } @media (width >= 64rem) { footer .method-communication-list-container { flex-direction: column; } } @media (width >= 64rem) { footer .method-communication-list-container { align-items: flex-start; } } @media (width >= 64rem) { footer .method-communication-list-container { justify-content: flex-start; } } @media (width >= 64rem) { footer .method-communication-list-container { gap: calc(var(--spacing) * 15); } } footer .method-communication-list-container .phone-number-container { margin-block: calc(var(--spacing) * 12); display: flex; align-items: center; gap: calc(var(--spacing) * 4); } @media (width >= 40rem) { footer .method-communication-list-container .phone-number-container { margin: calc(var(--spacing) * 0); } } @media (width >= 64rem) { footer .method-communication-list-container .phone-number-container { gap: calc(var(--spacing) * 8); } } footer .method-communication-list-container span { font-family: var(--font-bounded); font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); color: var(--color-white); } @media (width >= 64rem) { footer .method-communication-list-container span { font-size: var(--text-43); line-height: var(--tw-leading, var(--text-43--line-height)); } } footer .map-site-container { margin-top: calc(var(--spacing) * 10); display: grid; gap: calc(var(--spacing) * 8); } @media (width < 64rem) { footer .map-site-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width < 40rem) { footer .map-site-container { grid-template-columns: repeat(1, minmax(0, 1fr)); } } @media (width >= 40rem) { footer .map-site-container { gap: calc(var(--spacing) * 6); } } @media (width >= 64rem) { footer .map-site-container { margin: calc(var(--spacing) * 0); } } @media (width >= 64rem) { footer .map-site-container { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (width >= 64rem) { footer .map-site-container { align-items: flex-start; } } @media (width >= 64rem) { footer .map-site-container { gap: calc(var(--spacing) * 10); } } :where(footer .map-site-container .map-site > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 4 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 4 * (1 - var(--tw-space-y-reverse))); } @media (width >= 40rem) { :where(footer .map-site-container .map-site > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 6 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 6 * (1 - var(--tw-space-y-reverse))); } } @media (width >= 64rem) { footer .map-site-container .map-site:first-child { grid-row: span 2/span 2; } } @media (width >= 64rem) { footer .map-site-container .map-site:nth-child(3) { order: 4; } } @media (width >= 64rem) { footer .map-site-container .map-site:last-child { order: 3; } } @media (width >= 64rem) { footer .map-site-container .map-site:last-child { grid-row: span 2/span 2; } } footer .map-site-container h3 { font-family: var(--font-bounded); font-size: 24px; --tw-leading: 32px; line-height: 32px; color: var(--color-white); } :where(footer .map-site-container ul > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 2 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 2 * (1 - var(--tw-space-y-reverse))); } footer .map-site-container ul { font-family: var(--font-inter); font-size: 16px; --tw-leading: 24px; line-height: 24px; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } @media (width >= 40rem) { :where(footer .map-site-container ul > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 3 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 3 * (1 - var(--tw-space-y-reverse))); } } footer .map-site-container ul li:has(.badge-xs) { display: flex; align-items: center; gap: calc(var(--spacing) * 4); } footer .map-site-container ul li:has([class*=circle-]) { display: flex; align-items: center; gap: 6px; } footer .map-site-container .map-site:nth-child(4) ul li { display: flex; max-width: 239px; justify-content: space-between; } footer .layer-down { margin-inline: auto; max-width: 1920px; padding-inline: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 6); } @media (width >= 40rem) { footer .layer-down { padding-inline: calc(var(--spacing) * 12); } } @media (width >= 64rem) { footer .layer-down { display: flex; } } @media (width >= 64rem) { footer .layer-down { width: 100%; } } @media (width >= 64rem) { footer .layer-down { align-items: flex-end; } } @media (width >= 64rem) { footer .layer-down { justify-content: space-between; } } @media (width >= 64rem) { footer .layer-down { gap: calc(var(--spacing) * 20); } } @media (width >= 64rem) { footer .layer-down { padding-inline: calc(var(--spacing) * 25); } } @media (width >= 64rem) { footer .layer-down { padding-top: 30px; } } footer .layer-down p { text-align: justify; font-family: var(--font-inter); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); text-wrap: wrap; } footer .layer-down ul { margin-top: calc(var(--spacing) * 6); } :where(footer .layer-down ul > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 1 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 1 * (1 - var(--tw-space-y-reverse))); } footer .layer-down ul { font-family: var(--font-inter); --tw-leading: 24px; line-height: 24px; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } @media (width >= 40rem) { :where(footer .layer-down ul > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(6px * var(--tw-space-y-reverse)); margin-block-end: calc(6px * (1 - var(--tw-space-y-reverse))); } } @media (width >= 64rem) { :where(footer .layer-down ul > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 2 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 2 * (1 - var(--tw-space-y-reverse))); } } } .dropdown-for-languages { position: relative; display: none; } @media (width >= 64rem) { .dropdown-for-languages { display: inline-flex; } .pay-m-title { font-size: var(--text-42); line-height: var(--tw-leading, var(--text-42--line-height)); } .overlay-con { display: flex; align-items: flex-end; } .gradient-overlay { --tw-gradient-position: to bottom in oklab !important; background-image: linear-gradient(var(--tw-gradient-stops)) !important; } .title-badges { max-width: calc(100% - 650px); padding-inline: 95px; padding-top: calc(var(--spacing) * 0); padding-bottom: 70px; } } @media (width >= 40rem) { .title-badges { padding-top: 125px; padding-inline: calc(var(--spacing) * 6); } } .current-selected-lang { border-radius: 0; background-color: transparent; opacity: 1; appearance: button; display: inline-flex; cursor: pointer; align-items: center; gap: calc(var(--spacing) * 2); } .lang-dropdown-list { position: absolute; top: calc(var(--spacing) * 10); left: calc(var(--spacing) * 0); z-index: 1; overflow: hidden; border-radius: 22px; background-color: rgba(252, 252, 253, 0.8980392157); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); --tw-shadow: 0 0 8px 0 var(--tw-shadow-color, rgba(20, 21, 23, 0.1)), 0 4px 16px 0 var(--tw-shadow-color, rgba(38, 40, 47, 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-backdrop-blur: blur(50px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .lang-option { cursor: pointer; padding-inline: calc(var(--spacing) * 6); padding-top: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 2); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; --tw-duration: 250ms; transition-duration: 250ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .lang-option:hover { background-color: color-mix(in srgb, #000 5%, transparent); } .arrows-hero-sec { display: block; vertical-align: middle; height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6); color: var(--color-white); } /* Residential Complex Header Styles */ .rc-header-card { flex-direction: column; gap: 20px; position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: space-between; padding: calc(var(--spacing) * 4); margin-bottom: 15px; border-radius: 20px; overflow: hidden; } .rc-header-card-mt { margin-top: 40px; } .rc-header-bg { position: absolute; inset: 0; z-index: -1; } .rc-header-overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4); } .rc-header-content { position: relative; width: 100%; height: 100%; padding: 16px; display: flex; align-items: center; justify-content: space-between; } .rc-header-left { display: flex; flex-direction: column; gap: 8px; } .rc-header-title { color: white; font-family: var(--font-bounded); font-size: 24px; } .rc-header-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rc-header-info { display: flex; align-items: center; gap: 16px; color: white; font-size: 12px; } .rc-header-location { display: flex; align-items: center; gap: 6px; } .rc-header-price { font-weight: 500; } /* Desktop styles */ @media (min-width: 1024px) { .rc-header-card { height: 160px; } .rc-header-content { padding: 24px; } .rc-header-left { gap: 12px; } .rc-header-info { gap: 24px; font-size: 14px; } } /* ============================================ */ /* PHONE NUMBER COPY NOTIFICATION */ /* ============================================ */ .phone-number-txt { position: relative; } .phone-number-txt.cursor-pointer { cursor: pointer; } .copy-notification { position: absolute; top: calc(200% + 8px); left: 10%; z-index: 10000; background: linear-gradient(135deg, #1a3a2e 0%, #2d5a45 100%); color: #ffffff; padding: 12px 16px; width: 350px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; } .selected-filter { display: flex; align-items: center; gap: calc(var(--spacing) * 2); border-radius: calc(infinity * 1px); background-color: var(--color-main-black-5); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .copy-notification.show { opacity: 1; pointer-events: auto; animation: slideDown 0.3s ease-out; } .copy-notification.hide { animation: slideUp 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } } .copy-notification-icon { width: 24px; height: 24px; background: #4ade80; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .copy-notification-icon svg { width: 14px; height: 14px; fill: #1a3a2e; } .copy-notification-close { width: 20px; height: 20px; background: transparent; border: none; cursor: pointer; padding: 0; margin-left: auto; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s; flex-shrink: 0; position: relative; z-index: 10001; } .copy-notification-close:hover { opacity: 1; } .copy-notification-close svg { width: 16px; height: 16px; stroke: #ffffff; stroke-width: 2; } .mobile-project-info-card { width: 172px; } .addinf-flat, .min-flat-price { font-weight: 500; font-size: 12px; } .addinf-flat { font-weight: 500; cursor: pointer; } .min-flat-price { color: var(--color-main-black-60); } .mini-banks { width: calc(100% + 20px); display: flex; flex-direction: row; justify-content: left; overflow-x: scroll; padding-right: 20px; } .mini-banks::-webkit-scrollbar { display: none; } .mini-bank { margin-right: 6px; width: auto; min-width: 90px; width: fit-content; padding: 2px 4px; overflow: hidden; } .mini-bank:nth-last-child { margin-right: 0px; } .mini-bank span { white-space: nowrap; font-size: 10px; } .flats-inf-l-mini { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .filters { display: flex; align-items: center; justify-content: space-between; gap: 31px; flex-wrap: wrap; } /* Range slider container styles */ .filters .range-slider .flex { display: flex; } .filters .range-slider .justify-between { justify-content: space-between; } .filters .range-slider .text-\[\#81988B\] { color: #81988B; } .filters .range-slider .flex-1 { flex: 1; } .filters .range-slider .border-l { border-left-width: 1px; border-left-style: solid; } .filters .range-slider .border-border-line-white { border-color: var(--color-border-line-white); } .filters .range-slider .pl-4 { padding-left: calc(var(--spacing) * 4); } .filters .range-slider .text-main-black-100 { color: var(--color-main-black-100); } .filters .range-slider .inter-var { font-family: var(--font-inter); } /* Range track styles */ .range-track { position: absolute; left: calc(var(--spacing) * 5); right: calc(var(--spacing) * 5); bottom: -0.125rem; height: 3px; background-color: transparent; border-radius: calc(infinity * 1px); } .range-fill { position: absolute; height: 3px; background-color: var(--color-primary); border-radius: calc(infinity * 1px); } .range-thumb { position: absolute; width: 1rem; height: 1rem; background-color: var(--color-primary); border: 1px solid var(--color-white); border-radius: calc(infinity * 1px); cursor: pointer; transform: translateY(-50%); top: 0.125rem; } /* Rooms and deadline sections */ .filters .flex-none { flex: none; } .filters .space-y-3 > :not(:last-child) { margin-bottom: calc(var(--spacing) * 3); } .filters .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .filters .text-main-black-60 { color: var(--color-main-black-60); } .filters .font-medium { font-weight: var(--font-weight-medium); } .filters ul.flex { display: flex; } .filters ul.gap-3 { gap: calc(var(--spacing) * 3); } .filters ul.h-\[60px\] { height: 60px; } .filters ul.text-center { text-align: center; } .filters ul.text-18 { font-size: var(--text-18); line-height: var(--tw-leading, var(--text-18--line-height)); } .filters .cursor-pointer { cursor: pointer; } .filters .peer { /* Peer selector for checkbox states */ } .filters .hidden { display: none; } .mobile-btn { width: 32px; height: 32px; place-content: center; place-items: center; border-radius: 8px; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); --tw-backdrop-blur: blur(50px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .small-text-div-mb { font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); } .small-text-mb { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-main-black-60); } .big-text-mb { font-weight: inherit; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); font-family: var(--font-bounded); } .icon-small-mb { width: 40px; height: 40px; place-content: center; place-items: center; border-radius: 8px; background-color: var(--color-white); } .icon-text-div-mb { display: flex; align-items: center; gap: 14px; } .small-div-mb { --tw-space-y-reverse: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; gap: calc(var(--spacing) * 1); } .big-div-mb { border-radius: 16px; background-color: var(--color-main-bg); padding: calc(var(--spacing) * 3); display: flex; flex-direction: column; gap: 12px; } .gap-mb { display: flex; justify-content: space-between; gap: calc(var(--spacing) * 2); font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-main-black-60); text-align: center; } .gap-2-mb { display: flex; justify-content: space-between; gap: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); text-align: center; } .gap-full-mb { width: 100%; } .image-size-mb { display: block; vertical-align: middle; max-width: 100%; width: 54px; height: 54px; border-radius: 10px; object-fit: cover; object-position: center; } .div-list-mb { display: flex; width: 100%; align-items: center; gap: calc(var(--spacing) * 2); } @layer components { .div-big-mb { display: flex; max-height: 330px; flex-direction: column; gap: calc(var(--spacing) * 3) !important; overflow-y: auto; border-radius: 16px; background-color: var(--color-main-bg); padding: 6px; padding-right: calc(var(--spacing) * 2); } .div-big-mb::-webkit-scrollbar { -webkit-appearance: none; appearance: none; } } .toggle-box-mb { height: 100% !important; width: 100% !important; border-radius: calc(infinity * 1px); background-color: #fff; --tw-shadow: 0 1px 4px 0 var(--tw-shadow-color, #0C0C0D0D), 0 1px 4px 0 var(--tw-shadow-color, #0C0C0D1A); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .toggle-big-box-mb { position: absolute; z-index: 10; height: 100% !important; width: 33.3333333333% !important; padding-block: 1px; padding-right: 4px; --tw-duration: 600ms; transition-duration: 600ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); left: 195px; } .toggle-button-mb { z-index: 20; display: inline-flex; height: 100%; width: 100% !important; cursor: default; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); white-space: nowrap; color: var(--color-main-black-100); transition-property: all; --tw-duration: 250ms; transition-duration: 250ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); position: relative; } .div-toggle-mb { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 2 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 2 * (1 - var(--tw-space-y-reverse))); display: inline-grid; height: 39px; width: 100% !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-content: center; gap: 6px; border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); background-color: var(--color-main-black-5); padding-inline: 1px; font-family: var(--font-inter); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-main-black-60); position: relative; --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 2 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 2 * (1 - var(--tw-space-y-reverse))); } /* Room amount buttons */ .rooms-amount-b { display: flex; align-items: center; justify-content: center; text-align: center; width: 60px; height: 60px; border-radius: calc(infinity * 1px); background-color: var(--color-main-black-5); box-shadow: 0 0 0 1px var(--color-border-line-white); transition: all 0.3s ease-in-out; } .rooms-amount-b:hover { box-shadow: 0 0 0 1px var(--color-gray-400); } .filters input[type=checkbox]:checked + .rooms-amount-b { color: var(--color-main-green); box-shadow: 0 0 0 1px var(--color-primary); background-color: var(--color-primary); } /* Deadline option buttons */ .deadline-option { display: inline-flex; align-items: center; justify-content: center; padding: calc(var(--spacing) * 3) calc(var(--spacing) * 7); border-radius: calc(infinity * 1px); background-color: var(--color-main-black-5); box-shadow: 0 0 0 1px var(--color-border-line-white); transition: all 0.3s ease-in-out; } .deadline-option:hover { box-shadow: 0 0 0 1px var(--color-gray-400); } .filters input[type=checkbox]:checked + .deadline-option { color: var(--color-main-green); box-shadow: 0 0 0 1px var(--color-primary); background-color: var(--color-primary); } /* Filter buttons section */ .filter-buttons { display: flex; width: 100%; } .filter-buttons .grow { flex-grow: 1; } .filter-buttons .flex { display: flex; } .filter-buttons .gap-3 { gap: calc(var(--spacing) * 3); } .filter-buttons .flex-1 { flex: 1; } .filter-buttons .px-4 { padding-left: calc(var(--spacing) * 4); padding-right: calc(var(--spacing) * 4); } .filter-buttons .text-nowrap { white-space: nowrap; } .range-con { min-width: 300px; max-width: 400px; width: 100%; } @media (min-width: 1200px) and (max-width: 1600px) { .range-con { min-width: 240px; max-width: 330px; } } .range-text { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-main-black-60); margin-bottom: 10px; } #input-1::placeholder { opacity: 0; } .favorite-btn { display: inline-flex; align-items: center; justify-content: center; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); width: var(--circle-size-40); height: var(--circle-size-40); flex-shrink: 0; border-radius: calc(infinity * 1px); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; --tw-duration: 350ms; transition-duration: 350ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .favorite-btn:hover { background-color: color-mix(in srgb, #000 4%, transparent); } /* Profile Dropdown Styles */ .profile-btn { position: relative; } .profile-dropdown { transform: translateY(-10px); pointer-events: none; } .profile-btn:hover .profile-dropdown, .profile-dropdown:hover { opacity: 1 !important; visibility: visible !important; transform: translateY(0); pointer-events: auto; } /* Smooth animation for dropdown appearance */ .profile-btn:hover .profile-dropdown { animation: dropdownFadeIn 0.3s ease-out forwards; } @keyframes dropdownFadeIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } /* Bridge area to keep dropdown visible when moving mouse */ .profile-btn::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: 8px; background: transparent; pointer-events: auto; } /* Badge counter styles */ .profile-dropdown .min-w-\[24px\] { min-width: 24px; } /* ======================================== Profile Dropdown Styles ======================================== */ .profile-btn { position: relative; } .profile-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 280px; background: rgba(252, 252, 253, 0.8980392157); border: 1px solid var(--color-border-line-white); border-radius: 24px; box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08); backdrop-filter: blur(50px); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease-in-out; z-index: 50; overflow: hidden; pointer-events: none; } .profile-btn:hover .profile-dropdown, .profile-dropdown:hover { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Bridge area to keep dropdown visible when moving mouse */ .profile-btn::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: 8px; background: transparent; } /* Dropdown menu items */ .profile-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 12px 24px; font-size: 16px; font-weight: 500; color: var(--color-main-black-100); text-decoration: none; transition: background-color 0.2s ease; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; } .profile-dropdown-item.first { padding: 6px 8px; } .profile-dropdown-item:hover { background-color: var(--color-main-black-5); } .profile-dropdown-item span:first-of-type { flex: 1; } /* Badge counter */ .profile-dropdown-badge { display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; background-color: var(--color-main-black-15); border-radius: 50px; font-size: 12px; font-weight: 500; color: var(--color-main-black-100); } /* Divider */ .profile-dropdown-divider { height: 1px; background-color: var(--color-border-line-white); margin: 8px 0; } /* Logout button */ .profile-dropdown-logout span { color: var(--color-error); } /* Ma rquee Animation for Mobile Sale Banner */ .marquee-container { overflow: hidden; white-space: nowrap; position: relative; flex: 1; } .marquee-content { display: inline-block; padding-left: 100%; animation: marquee 15s linear infinite; } .marquee-content span { display: inline-block; padding-right: 50px; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Show sale banner only on devices less than 745px */ .sale-figure-for-mobile { display: none; transition: all 0.3s ease; } @media (max-width: 745px) { .sale-figure-for-mobile { display: flex; opacity: 1; } .sale-figure-for-mobile.closed { opacity: 0; } } .business-class-badge { background-color: var(--color-main-green-dark) !important; color: var(--color-main-green) !important; } /* Lazy loading styles */ img[loading=lazy] { opacity: 0; transition: opacity 0.3s ease-in-out; } img[loading=lazy].loaded { opacity: 1; } /* Placeholder for images while loading */ .img-placeholder { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .notice-badge { display: flex; align-items: center; gap: 12px; border-radius: 25px; padding: 7px 15px; font-size: 16px; font-weight: 500; color: var(--color-main-black-100); background-color: #fff; text-decoration: none; transition: background-color 0.2s ease; cursor: pointer; border: 1px solid rgba(204, 204, 204, 0.7568627451); width: 100%; text-align: left; } @layer utilities { .icon-base { height: var(--icon-size-base); width: var(--icon-size-base); } .icon-sm { height: var(--icon-size-sm); width: var(--icon-size-sm); } } .overlay-con { z-index: 10; min-height: 100vh; position: relative; } .gradient-overlay { position: absolute; inset: calc(var(--spacing) * 0); z-index: -10; --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: transparent; --tw-gradient-to: #20201D; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .hero-background-img { position: absolute; inset: calc(var(--spacing) * 0); z-index: -20; overflow: hidden; } .slide-bg-img { position: absolute; --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); --tw-duration: 700ms; transition-duration: 700ms; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); inset: calc(var(--spacing) * 0); background-size: cover; background-position: center; } .content-wrap { width: 100%; pointer-events: none; } .title-badges { padding-inline: calc(var(--spacing) * 4); padding-top: 115px; } .title-badges-con { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); } .rc-title { font-family: var(--font-bounded); font-size: 2rem; color: var(--color-white); --tw-leading: var(--leading-tight); line-height: var(--leading-tight); font-size: 42px; order: 1; } .badges-container { order: 2; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: calc(var(--spacing) * 1); transition: opacity 0.3s ease-in-out; opacity: 1; } .hero-sale-banner { position: absolute; padding: 1px; background-color: rgba(0, 0, 0, 0.0117647059); border-radius: 24px; width: 161px; bottom: calc(var(--spacing) * 35); --tw-backdrop-blur: blur(50px); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); right: 24px; } .hero-sale-banner::before { content: ""; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-position: 116deg in oklab; position: absolute; z-index: 1; border-radius: 24px; inset: calc(var(--spacing) * 0); } .hero-sale-banner-con { z-index: 2; display: flex; height: 100%; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: calc(var(--spacing) * 8); border-radius: 24px; background-color: rgba(0, 0, 0, 0.0117647059); padding: calc(var(--spacing) * 3); font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); color: var(--color-white); --tw-backdrop-blur: blur(50px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); position: relative; } .h-sale-text { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); font-family: var(--font-bounded); } .font-bounded { font-family: var(--font-bounded); } .discount { position: absolute; top: calc(var(--spacing) * 2); right: calc(var(--spacing) * 1); z-index: 1; height: 32px; width: 55px; align-content: center; border-radius: calc(infinity * 1px); background-color: var(--color-primary); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-main-green); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); text-align: center; } .inner-side-controls { pointer-events: auto; display: flex; flex-direction: column; gap: 33px; padding-inline: calc(var(--spacing) * 4); position: absolute; bottom: calc(var(--spacing) * -20); z-index: -10; } .control-bar { display: flex; align-items: center; justify-content: space-between; } .prev-btn-mobile, .next-btn-mobile { display: flex; width: 73px; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); background-color: color-mix(in oklab, var(--color-white) 10%, transparent); padding-block: 7px; --tw-backdrop-blur: blur(var(--blur-sm)); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .pagination { z-index: 1; display: flex; gap: 6px; border-radius: calc(infinity * 1px); background-color: rgba(255, 255, 255, 0.0117647059); padding: 6px; --tw-backdrop-blur: blur(100px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); position: relative; } .hero-desktop-controls { border-radius: calc(infinity * 1px); background-color: rgba(255, 255, 255, 0.0117647059); padding: 1px; position: relative; } .hero-desktop-controls::before { content: ""; --tw-gradient-to: #FFFFFF00; --tw-gradient-stops: var(--tw-gradient-via-stops); --tw-gradient-from: #FFFFFF17; --tw-gradient-stops: var(--tw-gradient-via-stops); background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-position: 171deg in oklab; border-radius: calc(infinity * 1px); z-index: 1; inset: 0px; position: absolute; } .desktop-controls-con { z-index: 2; display: flex; flex-direction: column; gap: 6px; border-radius: calc(infinity * 1px); background-color: rgba(255, 255, 255, 0.0117647059); padding: calc(var(--spacing) * 3); --tw-backdrop-blur: blur(100px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); position: relative; } .desktop-next-btn { cursor: pointer; rotate: 180deg; border-radius: calc(infinity * 1px); padding-inline: 7px; padding-block: calc(var(--spacing) * 7); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .desktop-next-btn:hover, .desktop-prev-btn:hover { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } .desktop-prev-btn { cursor: pointer; border-radius: calc(infinity * 1px); padding-inline: 7px; padding-block: calc(var(--spacing) * 7); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .inner-slide-con { display: flex; overflow: visible; position: relative; gap: calc(var(--spacing) * 4); } .slide { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); --tw-duration: 500ms; transition-duration: 500ms; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .reels-progress { background-color: var(--color-white); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); height: 4px; width: 18.9789%; } .reels-progress-bottom { position: absolute; right: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); background-color: color-mix(in oklab, var(--color-white) 20%, transparent); } .reels-next { display: block; vertical-align: middle; height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6); color: var(--color-white); transform: rotate(-90deg); } .circle-48 { width: var(--circle-size-48); height: var(--circle-size-48); flex-shrink: 0; border-radius: calc(infinity * 1px); } .reels-next-r-btn { --tw-gradient-position: 116deg in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: color-mix(in oklab, var(--color-white) 30%, transparent); --tw-gradient-to: color-mix(in oklab, var(--color-white) 0%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); position: absolute; top: 50%; right: calc(var(--spacing) * 4); width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); --tw-duration: 300ms; transition-duration: 300ms; display: flex; align-items: center; justify-content: center; opacity: 0; } .reels-next-l-btn { --tw-gradient-position: 116deg in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: color-mix(in oklab, var(--color-white) 30%, transparent); --tw-gradient-to: color-mix(in oklab, var(--color-white) 0%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); position: absolute; top: 50%; left: calc(var(--spacing) * 4); --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); --tw-duration: 300ms; transition-duration: 300ms; display: flex; align-items: center; justify-content: center; width: var(--circle-size-48); height: var(--circle-size-48); flex-shrink: 0; border-radius: calc(infinity * 1px); opacity: 0; } .reels-pause { display: inline-flex; align-items: center; justify-content: center; position: relative; --tw-gradient-position: 116deg in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: color-mix(in oklab, var(--color-white) 30%, transparent); --tw-gradient-to: color-mix(in oklab, var(--color-white) 0%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); pointer-events: auto; width: var(--circle-size-82); height: var(--circle-size-82); flex-shrink: 0; border-radius: calc(infinity * 1px); } .reels-play-pause { pointer-events: none; position: absolute; inset: calc(var(--spacing) * 0); display: flex; align-items: center; justify-content: center; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); --tw-duration: 300ms; transition-duration: 300ms; opacity: 0; } .reels-video-container { height: 100%; width: 100%; overflow: hidden; border-radius: 24px; background-color: var(--color-black); position: relative; } .reels-video-container video { height: 100% !important; } .reels-container { display: flex; height: 100%; align-items: center; justify-content: center; max-height: 90vh; width: auto; position: relative; } .reels-close { position: absolute; top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); z-index: 10; width: 48px; height: 48px; place-content: center; place-items: center; border-radius: calc(infinity * 1px); background-color: color-mix(in oklab, var(--color-white) 10%, transparent); --tw-backdrop-blur: blur(50px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .reels-modal { position: fixed; inset: calc(var(--spacing) * 0); z-index: 200; display: flex; align-items: center; justify-content: center; background-color: var(--color-black); } .reels-modal.hidden { display: none; } @layer components { .main-container { max-width: 1920px; padding-inline: calc(var(--spacing) * 4); } @media (width >= 40rem) { .main-container { padding-inline: calc(var(--spacing) * 6); } } @media (width >= 64rem) { .main-container { padding-inline: 20px; } } @media (max-width: 1025px) { .main-container { margin-top: 35px; } } .lc-info-width { max-width: 600px !important; min-width: 400px; } .large { width: 400px; } @media (width > 64rem) { .large { width: 561px; } } .calculate { bottom: 60px; right: 50px; } .acces-bottom { bottom: calc(var(--spacing) * 4); } .acces-left { left: calc(var(--spacing) * 20); } .infrosB { right: -80px; position: absolute !important; top: 10px; } /* Quiz Modal Styles */ .quiz-modal-container { max-height: 90vh; max-width: 750px; width: 100%; overflow: hidden; border-radius: 24px; background-color: var(--color-white); position: relative; } .quiz-all { position: fixed; inset: calc(var(--spacing) * 0); z-index: 200; display: flex; align-items: center; justify-content: center; background-color: color-mix(in oklab, var(--color-black) 60%, transparent); padding: calc(var(--spacing) * 4); } .quiz-image-container { height: 300px; width: 100%; overflow: hidden; object-fit: cover; } .quiz-image-container img { width: 100%; height: 100%; object-fit: cover; } .quiz-steps-wrapper { position: relative; } .step-3-text { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-main-black-60); } .quiz-buttons { display: flex; align-items: center; justify-content: right; gap: 10px; width: 40%; margin-top: 20px; margin-bottom: 15px; justify-self: flex-end; } .quiz-buttons button { padding: 6px 60px; } .quiz-options { margin-top: 15px; display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); } @media (max-width: 640px) { .quiz-steps-wrapper { padding: 24px; } } .quiz-step { display: none; animation: fadeIn 0.4s ease-in-out; } .quiz-step.active { display: block; } .step-1 { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .quiz-option-btn { padding: 12px 25px; border-radius: 9999px; background-color: var(--color-main-black-5); border: 1px solid var(--color-border-line-white); font-size: 14px; font-weight: 500; color: var(--color-main-black-100); cursor: pointer; transition: all 0.3s ease; display: inline-block; text-align: center; } .quiz-submit-btn { padding: 10px 0 !important; position: relative; z-index: 1; display: flex; width: 100%; align-items: center; justify-content: center; border-radius: 12px; font-family: var(--font-bounded); padding-block: 18.5px; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-gradient-position: 180deg in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: color-mix(in oklab, var(--color-white) 20%, transparent); --tw-gradient-to: color-mix(in oklab, var(--color-white) 0%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); fill: var(--color-main-green); color: var(--color-main-green); } .quiz-option-btn.number { padding: 10px 16px; border-radius: 50%; background-color: var(--color-main-black-5); border: 1px solid var(--color-border-line-white); font-size: 14px; font-weight: 500; color: var(--color-main-black-100); cursor: pointer; transition: all 0.3s ease; display: inline-block; text-align: center; } .quiz-space { font-family: var(--font-inter); color: var(--color-main-black-100); } .quiz-box { font-family: var(--font-inter); color: var(--color-main-black-100); box-sizing: border-box; padding: calc(var(--spacing) * 6); } .quiz-next-btn { position: relative; z-index: 1; display: flex; width: 100%; align-items: center; justify-content: center; border-radius: 12px; font-family: var(--font-bounded); padding-block: 18.5px; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); padding: 6px 60px; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); background-color: var(--color-white); fill: var(--color-main-black-100); color: var(--color-main-black-100); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .quiz-skip-btn { padding: 6px 60px; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .quiz-close-btn { position: absolute; top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); z-index: 10; width: 32px; height: 32px; place-content: center; place-items: center; border-radius: 8px; background-color: var(--color-main-dark-80); --tw-backdrop-blur: blur(50px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .quiz-option-btn:hover { background-color: var(--color-main-black-15); border-color: var(--color-main-black-40); } .quiz-option-btn.selected { background-color: var(--color-primary); color: var(--color-main-green); border-color: var(--color-primary); } .quiz-progress-bar { height: 4px; background-color: var(--color-main-black-15); border-radius: 9999px; overflow: hidden; } .quiz-progress-fill { height: 100%; background-color: var(--color-primary); transition: width 0.3s ease; } .btn-sm { position: relative; z-index: 1; width: 100%; cursor: pointer; border-radius: 8px; padding-block: calc(var(--spacing) * 2); font-family: var(--font-bounded); font-size: var(--text-2xs); line-height: var(--tw-leading, var(--text-2xs--line-height)); } @media (width >= 40rem) { .btn-sm { border-radius: 12px; } } @media (width >= 40rem) { .btn-sm { padding-block: 9px; } } @media (width >= 40rem) { .btn-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .btn-default { position: relative; z-index: 1; display: flex; width: 100%; align-items: center; justify-content: center; border-radius: 12px; padding-block: 13px; font-family: var(--font-bounded); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } @media (width >= 64rem) { .btn-default { padding-block: 18.5px; } } @media (width >= 64rem) { .btn-default { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .btn-lg-rounded-full { position: relative; z-index: 10; width: 100%; border-radius: calc(infinity * 1px); padding-block: calc(var(--spacing) * 3); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } @media (width >= 40rem) { .btn-lg-rounded-full { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } @media (width >= 64rem) { .btn-lg-rounded-full { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .btn-sm::before { position: absolute; inset: 1px; z-index: -1; border-radius: 7px; --tw-content: ""; content: var(--tw-content); } @media (width >= 40rem) { .btn-sm::before { border-radius: 11px; } } .btn-default::before { position: absolute; inset: 1px; z-index: -1; border-radius: 11px; --tw-content: ""; content: var(--tw-content); } .btn-default:has(img) { display: flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2); } .btn-default img { z-index: 2; height: var(--icon-size-base); width: var(--icon-size-base); } .live-complex-btn { background-color: #fff; padding: 7px 30px; font-size: 19px; border-radius: 10px; } .lc-card-con { flex-direction: column; gap: 20px; } .lc-title { text-align: center; font-size: 24px; } .p-ph { padding: 15px; } @media (min-width: 1400px) { .p-ph { padding: 18px; } } @media (min-width: 640px) { .since2008 { left: 200px !important; } } @media (min-width: 510px) { .live-complex-btn { position: absolute; bottom: 20px; right: 20px; } .lc-card-con { flex-direction: row; } .lc-title { text-align: unset; } } @media (max-width: 510px) { .rc-header-content { flex-direction: column; gap: 10px; padding: 4px !important; } } .flat-cards { display: flex; align-self: center; gap: 20px; flex-wrap: wrap; } .badge-border { /*border: 1px solid rgba(128, 128, 128, 0.716);*/ } .btn-lg-rounded-full[data-btn-color=white], .btn-sm[data-btn-color=white], .btn-default[data-btn-color=white] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); background-color: var(--color-white); fill: var(--color-main-black-100); color: var(--color-main-black-100); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } @media (hover: hover) { .btn-lg-rounded-full[data-btn-color=white]:hover, .btn-sm[data-btn-color=white]:hover, .btn-default[data-btn-color=white]:hover { background-color: var(--color-gray-100); } } .btn-sm[data-btn-color=green], .btn-default[data-btn-color=green] { --tw-gradient-position: 180deg; } @supports (background-image: linear-gradient(in lab, red, red)) { .btn-sm[data-btn-color=green], .btn-default[data-btn-color=green] { --tw-gradient-position: 180deg in oklab; } } .btn-sm[data-btn-color=green], .btn-default[data-btn-color=green] { background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: color-mix(in oklab, var(--color-white) 20%, transparent); --tw-gradient-to: color-mix(in oklab, var(--color-white) 0%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); fill: var(--color-main-green); color: var(--color-main-green); } .btn-sm[data-btn-color=green]::before, .btn-default[data-btn-color=green]::before { content: var(--tw-content); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .btn-sm[data-btn-color=green]::before, .btn-default[data-btn-color=green]::before { content: var(--tw-content); --tw-duration: 300ms; transition-duration: 300ms; } .btn-sm[data-btn-color=green]::before, .btn-default[data-btn-color=green]::before { content: var(--tw-content); --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } @media (hover: hover) { .btn-sm[data-btn-color=green]:hover::before, .btn-default[data-btn-color=green]:hover::before { content: var(--tw-content); background-color: var(--color-light-primary) !important; } } .btn-sm[data-btn-color=green]::before, .btn-default[data-btn-color=green]::before { background-color: var(--color-primary); } .btn-lg-rounded-full[data-btn-color=clear-white], .btn-sm[data-btn-color=clear-white], .btn-default[data-btn-color=clear-white] { background-color: var(--color-white); color: var(--color-main-black-100); } @media (width >= 40rem) { .btn-lg-rounded-full[data-btn-color=clear-white], .btn-sm[data-btn-color=clear-white], .btn-default[data-btn-color=clear-white] { color: var(--color-primary); } } .btn-lg-rounded-full[data-btn-color=only-white-border], .btn-sm[data-btn-color=only-white-border], .btn-default[data-btn-color=only-white-border] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-white); color: var(--color-white); } .news-c::-webkit-scrollbar { display: none; } .btn-lg-rounded-full[data-btn-color=white-with-border], .btn-sm[data-btn-color=white-with-border], .btn-default[data-btn-color=white-with-border] { --tw-gradient-position: 180deg; } @supports (background-image: linear-gradient(in lab, red, red)) { .btn-lg-rounded-full[data-btn-color=white-with-border], .btn-sm[data-btn-color=white-with-border], .btn-default[data-btn-color=white-with-border] { --tw-gradient-position: 180deg in oklab; } } .btn-lg-rounded-full[data-btn-color=white-with-border], .btn-sm[data-btn-color=white-with-border], .btn-default[data-btn-color=white-with-border] { background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: color-mix(in oklab, var(--color-white) 20%, transparent); --tw-gradient-to: color-mix(in oklab, var(--color-white) 0%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); color: var(--color-primary); } .btn-lg-rounded-full[data-btn-color=white-with-border]::before, .btn-sm[data-btn-color=white-with-border]::before, .btn-default[data-btn-color=white-with-border]::before { background-color: var(--color-white); } .btn-lg-rounded-full[data-btn-color=light-green], .btn-sm[data-btn-color=light-green], .btn-default[data-btn-color=light-green] { --tw-gradient-position: 180deg; } @supports (background-image: linear-gradient(in lab, red, red)) { .btn-lg-rounded-full[data-btn-color=light-green], .btn-sm[data-btn-color=light-green], .btn-default[data-btn-color=light-green] { --tw-gradient-position: 180deg in oklab; } } .btn-lg-rounded-full[data-btn-color=light-green], .btn-sm[data-btn-color=light-green], .btn-default[data-btn-color=light-green] { background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: color-mix(in oklab, var(--color-white) 40%, transparent); --tw-gradient-to: color-mix(in oklab, var(--color-white) 0%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); fill: var(--color-main-green); color: var(--color-main-green); } .btn-lg-rounded-full[data-btn-color=light-green], .btn-sm[data-btn-color=light-green]::before, .btn-default[data-btn-color=light-green]::before { background-color: var(--color-main-light-green); } .badge-xs { position: relative; z-index: 1; display: inline-flex; border-radius: calc(infinity * 1px); padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1); font-family: var(--font-inter); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } @media (width >= 64rem) { .badge-xs { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } } .badge-sm { position: relative; z-index: 1; display: inline-flex; border-radius: calc(infinity * 1px); padding-inline: calc(var(--spacing) * 4); padding-block: 6px; font-family: var(--font-inter); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } @media (width >= 64rem) { .badge-sm { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } @media (width >= 64rem) { .badge-sm { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } } .badge-default { position: relative; z-index: 1; display: inline-flex; border-radius: calc(infinity * 1px); padding-inline: 22px; padding-block: calc(var(--spacing) * 2); font-family: var(--font-inter); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } @media (width >= 64rem) { .badge-default { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } @media (width >= 64rem) { .badge-default { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } } .badge-md { position: relative; z-index: 1; display: inline-flex; border-radius: calc(infinity * 1px); padding-inline: calc(var(--spacing) * 4); padding-block: 6px; font-family: var(--font-inter); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } @media (width >= 40rem) { .badge-md { padding-inline: 22px; } } @media (width >= 40rem) { .badge-md { padding-block: calc(var(--spacing) * 3); } } @media (width >= 40rem) { .badge-md { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } @media (width >= 40rem) { .badge-md { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } } @media (width >= 64rem) { .badge-md { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .badge-10-16 { position: relative; z-index: 1; display: inline-flex; border-radius: calc(infinity * 1px); padding-inline: calc(var(--spacing) * 4); padding-block: 10px; font-family: var(--font-inter); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } @media (width >= 64rem) { .badge-10-16 { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .badge-sm:has(img + span), .badge-md:has(img + span), .badge-default:has(img + span) { align-items: center; gap: calc(var(--spacing) * 1); } .badge-sm:has(span + img), .badge-md:has(span + img), .badge-default:has(span + img) { align-items: center; gap: calc(var(--spacing) * 4); } .badge-sm:has(span + [class*=icon-]), .badge-md:has(span + svg), .badge-default:has(span + svg) { align-items: center; gap: calc(var(--spacing) * 4) !important; } .badge-sm::before, .badge-md::before, .badge-default::before { position: absolute; inset: 1px; z-index: -1; border-radius: calc(infinity * 1px); --tw-content: ""; content: var(--tw-content); } .badge-sm[data-badge-color=full-blur], .badge-md[data-badge-color=full-blur], .badge-default[data-badge-color=full-blur] { --tw-gradient-position: to bottom right; } @supports (background-image: linear-gradient(in lab, red, red)) { .badge-sm[data-badge-color=full-blur], .badge-md[data-badge-color=full-blur], .badge-default[data-badge-color=full-blur] { --tw-gradient-position: to bottom right in oklab; } } .badge-sm[data-badge-color=full-blur], .badge-md[data-badge-color=full-blur], .badge-default[data-badge-color=full-blur] { background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: #FFFFFF1A; --tw-gradient-to: #FFFFFF00; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); color: var(--color-white); } .badge-sm[data-badge-color=full-blur]::before, .badge-md[data-badge-color=full-blur]::before, .badge-default[data-badge-color=full-blur]::before { background-color: rgba(0, 0, 0, 0.0117647059); --tw-backdrop-blur: blur(100px); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .badge-sm[data-badge-color=gray], .badge-xs[data-badge-color=gray], .badge-md[data-badge-color=gray], .badge-default[data-badge-color=gray] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); color: var(--color-main-black-100); } .badge-sm[data-badge-color=clear-gray], .badge-xs[data-badge-color=clear-gray], .badge-md[data-badge-color=clear-gray], .badge-default[data-badge-color=clear-gray] { background-color: var(--color-main-black-15); color: var(--color-main-black-100); } .badge-xs[data-badge-color=white], .badge-md[data-badge-color=white], .badge-default[data-badge-color=white] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); background-color: var(--color-white); fill: var(--color-main-black-100); } .badge-10-16[data-badge-color=clear-white] { background-color: var(--color-white); fill: var(--color-main-black-100); color: var(--color-main-black-100); } .badge-xs[data-badge-color=for-sale], .badge-sm[data-badge-color=for-sale], .badge-md[data-badge-color=for-sale], .badge-default[data-badge-color=for-sale] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); --tw-gradient-position: 143deg; } @supports (background-image: linear-gradient(in lab, red, red)) { .badge-xs[data-badge-color=for-sale], .badge-sm[data-badge-color=for-sale], .badge-md[data-badge-color=for-sale], .badge-default[data-badge-color=for-sale] { --tw-gradient-position: 143deg in oklab; } } .badge-xs[data-badge-color=for-sale], .badge-sm[data-badge-color=for-sale], .badge-md[data-badge-color=for-sale], .badge-default[data-badge-color=for-sale] { background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: var(--color-for-sale-1); --tw-gradient-to: var(--color-for-sale-2); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); color: var(--color-white); } .badge-sm[data-badge-color=for-sale-rev], .badge-xs[data-badge-color=for-sale-rev], .badge-md[data-badge-color=for-sale-rev], .badge-default[data-badge-color=for-sale-rev] { background-color: var(--color-white); } .badge-sm[data-badge-color=for-sale-rev] span, .badge-xs[data-badge-color=for-sale-rev] span, .badge-md[data-badge-color=for-sale-rev] span, .badge-default[data-badge-color=for-sale-rev] span { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: var(--color-for-sale-1); --tw-gradient-to: var(--color-for-sale-2); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); background-clip: text; color: transparent; } .badge-xs[data-badge-color=primary], .badge-md[data-badge-color=primary], .badge-default[data-badge-color=primary] { background-color: var(--color-primary); color: var(--color-main-green); } .badge-xs[data-badge-color=white-with-shadow] { background-color: var(--color-white); color: var(--color-main-black-100); --tw-shadow: 0 4px 14px 0 var(--tw-shadow-color, rgba(255, 255, 255, 0.24)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .badge-sm[data-badge-color=green-dark-2], .badge-md[data-badge-color=green-dark-2], .badge-default[data-badge-color=green-dark-2] { background-color: #0D5034; color: var(--color-try-it-out); } .badge-sm[data-badge-color=green-light], .badge-md[data-badge-color=green-light], .badge-default[data-badge-color=green-light] { background-color: var(--color-try-it-out); color: var(--color-primary); } [class*=circle-]:has(img) { display: inline-flex; align-items: center; justify-content: center; } [class*=rectangle-][data-circle-color=white], [class*=circle-][data-circle-color=white] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); } [class*=rectangle-][data-circle-color=dark], [class*=circle-][data-circle-color=dark] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-main-black-100); } [class*=rectangle-][data-circle-color=green], [class*=circle-][data-circle-color=green] { background-color: var(--color-primary); } [class*=rectangle-][data-circle-color=green-dark], [class*=circle-][data-circle-color=green-dark] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); background-color: var(--color-main-black-100); } [class*=rectangle-][data-circle-color=no-border-white], [class*=circle-][data-circle-color=no-border-white] { background-color: var(--color-white); } [class*=rectangle-][data-circle-color=white-10], [class*=circle-][data-circle-color=white-10] { background-color: color-mix(in srgb, #fff 10%, transparent); } @supports (color: color-mix(in lab, red, red)) { [class*=rectangle-][data-circle-color=white-10], [class*=circle-][data-circle-color=white-10] { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } [class*=rectangle-][data-circle-color=clear-white], [class*=circle-][data-circle-color=clear-white] { background-color: var(--color-white); } [class*=rectangle-][data-circle-color=red], [class*=circle-][data-circle-color=red] { background-color: var(--color-error); } [class*=rectangle-][data-circle-color=full-blur], [class*=circle-][data-circle-color=full-blur] { position: relative; --tw-gradient-position: 116deg; } @supports (background-image: linear-gradient(in lab, red, red)) { [class*=rectangle-][data-circle-color=full-blur], [class*=circle-][data-circle-color=full-blur] { --tw-gradient-position: 116deg in oklab; } } [class*=rectangle-][data-circle-color=full-blur], [class*=circle-][data-circle-color=full-blur] { background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: color-mix(in oklab, var(--color-white) 30%, transparent); --tw-gradient-to: color-mix(in oklab, var(--color-white) 0%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } [class*=rectangle-][data-circle-color=full-blur]::before, [class*=circle-][data-circle-color=full-blur]::before { content: var(--tw-content); position: absolute; } [class*=rectangle-][data-circle-color=full-blur]::before, [class*=circle-][data-circle-color=full-blur]::before { content: var(--tw-content); inset: 1px; } [class*=rectangle-][data-circle-color=full-blur]::before, [class*=circle-][data-circle-color=full-blur]::before { content: var(--tw-content); z-index: -1; } [class*=rectangle-][data-circle-color=full-blur]::before, [class*=circle-][data-circle-color=full-blur]::before { content: var(--tw-content); border-radius: calc(infinity * 1px); } [class*=rectangle-][data-circle-color=full-blur]::before, [class*=circle-][data-circle-color=full-blur]::before { content: var(--tw-content); background-color: rgba(27, 26, 28, 0.0117647059); } [class*=rectangle-][data-circle-color=full-blur]::before, [class*=circle-][data-circle-color=full-blur]::before { content: var(--tw-content); --tw-backdrop-blur: blur(50px); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } [class*=rectangle-][data-circle-color=full-blur]::before, [class*=circle-][data-circle-color=full-blur]::before { --tw-content: ""; content: var(--tw-content); } [class*=rectangle-]:has(img) { display: flex; align-items: center; justify-content: center; } [class*=rectangle-]:has(span + img) { gap: calc(var(--spacing) * 3); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } @media (width >= 64rem) { [class*=rectangle-]:has(span + img) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } } @layer components { .card { border-radius: 24px; background-color: var(--color-white); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 6); } @media (width >= 40rem) { .card { padding-inline: 15px; } } @media (width >= 64rem) { .card { padding-inline: 50px; } } .desc-fp-top { --tw-space-y-reverse: 0; margin-block-start: calc(41px * var(--tw-space-y-reverse)); margin-block-end: calc(41px * (1 - var(--tw-space-y-reverse))); } @media (width >= 64rem) { .desc-fp-top { --tw-space-y-reverse: 0; margin-block-start: calc(43px * var(--tw-space-y-reverse)); margin-block-end: calc(43px * (1 - var(--tw-space-y-reverse))); } } .card-for-content { position: relative; z-index: 1; overflow: hidden; border-radius: 24px; background-color: var(--color-white); } .swiper-scrollbar { position: relative !important; z-index: 1 !important; height: 14px !important; width: 100%; overflow: hidden; border-radius: calc(infinity * 1px); background-color: var(--color-gray-300) !important; padding: 2px !important; } .swiper-scrollbar-drag { border-radius: calc(infinity * 1px); background-color: #FCFCFD !important; } } .projects-flats-title { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 4 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 4 * (1 - var(--tw-space-y-reverse))); font-family: var(--font-bounded); font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .large-text { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } @layer utilities { .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } } .show-flt-con { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; } .range-slider { border-radius: 12px; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); position: relative; width: 100%; background-color: var(--color-main-bg); padding: 15px; } .range-slider:hover { border-color: var(--color-gray-400); } .filters-container { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } /* Range slider section */ .range-section { min-width: 350px; max-width: 400px; width: 100%; } @media (min-width: 1200px) and (max-width: 1600px) { .range-section { min-width: 240px; max-width: 330px; } } .range-label { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); font-weight: var(--font-weight-medium); color: var(--color-main-black-60); margin-bottom: 10px; } .range-values { display: flex; justify-content: space-between; color: #81988B; } .range-value-item { flex: 1; } .range-value-divider { border-left: 1px solid var(--color-border-line-white); padding-left: calc(var(--spacing) * 4); flex: 1; } .range-value-number { color: var(--color-main-black-100); font-family: var(--font-inter); } /* Rooms section */ .rooms-section { flex: none; } .section-spacing { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); } .section-label { font-size: var(--text-base); color: var(--color-main-black-60); font-weight: var(--font-weight-medium); } .rooms-list { display: flex; gap: calc(var(--spacing) * 3); height: 60px; text-align: center; font-size: var(--text-18); line-height: var(--tw-leading, var(--text-18--line-height)); } .room-option { cursor: pointer; } .room-checkbox { display: none; } /* Deadline section */ .deadline-list { display: flex; gap: calc(var(--spacing) * 3); height: 60px; text-align: center; } /* Filter buttons */ .filter-actions { flex-grow: 1; max-width: 320px; margin-top: 12px; } .button-group { display: flex; gap: calc(var(--spacing) * 3); } @media (min-width: 1300px) and (max-width: 1600px) { .button-group { height: 50px; font-size: 15px; } } .button-full { flex: 1; } .button-with-icon { display: flex; align-items: center; gap: calc(var(--spacing) * 2); } .button-text-nowrap { white-space: nowrap; } @media (width >= 64rem) { .dropdown-for-languages { display: inline-flex; } .show-flt-con { display: none; } .overlay-con { display: flex; align-items: flex-end; } .gradient-overlay { --tw-gradient-position: to bottom in oklab !important; background-image: linear-gradient(var(--tw-gradient-stops)) !important; } .title-badges { max-width: calc(100% - 650px); padding-inline: 95px !important; padding-top: calc(var(--spacing) * 0) !important; padding-bottom: 70px; } .rc-title { font-size: 100px; order: 2; } .control-bar { gap: 7px; } .badges-container { order: 1; gap: calc(var(--spacing) * 2); } .hero-sale-banner { display: none; } .inner-side-controls { right: 50px; flex-direction: row; gap: 11px; bottom: calc(var(--spacing) * 10); } .prev-btn-mobile, .next-btn-mobile { display: none; } .pagination { flex-direction: column; } .projects-flats-title { font-size: var(--text-42); line-height: var(--tw-leading, var(--text-42--line-height)); } } @media (width < 64rem) { .inner-side-controls { inset-inline: calc(var(--spacing) * 0); padding-inline: calc(var(--spacing) * 6); } .clear-filters-des { display: none !important; } .hero-desktop-controls { display: none; } .inner-slide-con { width: 100%; } .filters { display: none; } } @media (width >= 40rem) { .title-badges { padding-top: 125px; padding-inline: calc(var(--spacing) * 6); } .rc-title { font-size: 70px; } .discount { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .inner-side-controls { padding-inline: calc(var(--spacing) * 6); } } @media (min-width: 1401px) { .rc-title { font-size: 100px !important; } .filter-buttons { max-width: 500px; } .hero-sale-banner { right: 24px; } } @media (width < 40rem) { .hero-sale-banner { left: calc(var(--spacing) * 4); } } /* ====== ====================================== */ /* TO REGULAR CLASSES SECTION */ /* ============================================ */ /* Main container */ .filter-options-container { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 1024px) { .filter-options-container { gap: 33px; } } /* Additional options wrapper */ .additional-options-wrapper { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; } @media (max-width: 1023px) { .additional-options-wrapper { display: none; } } /* Additional options section */ .additional-options-section { display: flex; flex-direction: column; gap: 8px; } .additional-options-label { font-size: 16px; font-weight: 500; color: var(--color-main-black-60); } .additional-options-list { display: flex; gap: 12px; height: 32px; text-align: center; font-size: 16px; list-style: none; padding: 0; margin: 0; } /* Checkbox option button */ .checkbox-option-btn { text-align: center; align-content: center; padding: 0 20px; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-line-white); background: var(--color-main-black-5); border-radius: 9999px; transition: all 0.3s ease-in-out; cursor: pointer; } .checkbox-option-btn:hover { border-color: var(--color-gray-400); } .checkbox-option-input { display: none; } .checkbox-option-input:checked + .checkbox-option-btn { color: var(--color-main-green); border-color: var(--color-primary); background: var(--color-primary); } /* Clear filters button */ .clear-filters-btn { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--color-main-black-5); border: 1px solid var(--color-border-line-white); border-radius: 9999px; fill: var(--color-main-black-100); transition: all 0.3s ease-in-out; cursor: pointer; } .clear-filters-btn:hover { border-color: var(--color-gray-400); } .clear-filters-btn:active { fill: var(--color-main-green); background: var(--color-primary) !important; color: var(--color-main-green); } @media (max-width: 1023px) { .clear-filters-btn { display: none; } } /* Tab switcher */ .tab-switcher-wrapper { pointer-events: auto; position: relative; z-index: 1; border-radius: 9999px; color: #989899; font-weight: bold; font-size: 12px; text-align: center; } @media (min-width: 1024px) { .tab-switcher-wrapper { max-width: 272px; width: 100%; font-size: 16px; } } .tab-switcher-buttons { font-family: var(--font-inter); font-weight: bold; font-size: 12px; color: var(--color-main-black-60); position: relative; display: inline-grid; align-items: center; justify-content: center; width: 100% !important; height: 35px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: var(--color-main-black-5); border-radius: 9999px; border: 1px solid var(--color-border-line-white) !important; } @media (min-width: 1024px) { .tab-switcher-buttons { font-size: 16px; height: 60px; } } @media (max-width: 615px) { .container-badges { gap: 12px !important; } .devel-com-badge { margin-right: 50%; } } .tab-switcher-btn { position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; width: 100% !important; height: 100%; transition: all 0.25s ease-in-out; border-radius: 9999px; white-space: nowrap; background: transparent; border: none; cursor: pointer; } .tab-switcher-btn:hover { background: rgba(0, 0, 0, 0.04); } .tab-switcher-btn.active { color: var(--color-main-black-100); cursor: default; } .tab-marker { position: absolute; left: 0; z-index: 10; padding: 1px; width: 50%; height: 100%; transition: all 0.6s ease-in-out; } .tab-marker-inner { width: 100% !important; height: 100% !important; background: white; border-radius: 9999px; box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.05), 0 1px 4px 0 rgba(12, 12, 13, 0.1); } /* Projects grid */ .projects-grid-wrapper { display: flex; flex-direction: column; gap: 32px; transition: all 0.5s ease-in-out; } @media (min-width: 640px) { .projects-grid-wrapper { gap: 32px; } } @media (min-width: 640px) { .form-inputs .input-wrapper input:not(:focus) + label { top: 13px !important; } } .projects-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 38px; } @media (min-width: 640px) { .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } } @media (min-width: 1024px) { .projects-grid { gap: 50px; } } .project-card-wrapper { display: flex; flex-direction: column; gap: 14px; } @media (min-width: 640px) { .project-card-wrapper.featured { grid-column: span 2/span 2; } } .project-card { position: relative; z-index: 1; border-radius: 24px; overflow: hidden; height: 432px; } @media (min-width: 1024px) { .project-card.featured { height: 690px; } .project-card.regular { height: 494px; } } /* No Results State */ .no-results-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; } .no-results-image { width: 100%; max-width: 400px; height: auto; margin-bottom: 32px; } .no-results-title { font-size: 24px; font-weight: 600; color: #35463F; margin-bottom: 16px; line-height: 1.3; } .no-results-description { font-size: 16px; color: #81988B; margin-bottom: 32px; max-width: 500px; line-height: 1.5; } .no-results-button { display: inline-flex; align-items: center; gap: 12px; padding: 14px 32px; background-color: #FFFFFF; border: 1px solid #E0E6E5; border-radius: 50px; font-size: 16px; font-weight: 500; color: #35463F; cursor: pointer; transition: all 0.3s ease; } .no-results-button:hover { background-color: #F5F5F5; border-color: #81988B; } .no-results-button svg { width: 20px; height: 20px; } .quiz-title { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 1 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 1 * (1 - var(--tw-space-y-reverse))); font-family: var(--font-bounded); font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .pay-m-title { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 6 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 6 * (1 - var(--tw-space-y-reverse))); font-family: var(--font-bounded); font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } /* Responsive adjustments */ @media (max-width: 768px) { .no-results-container { padding: 40px 16px; } .flat-cards { margin-top: 15px; } .no-results-image { max-width: 280px; margin-bottom: 24px; } .no-results-title { font-size: 20px; margin-bottom: 12px; } .no-results-description { font-size: 14px; margin-bottom: 24px; } .no-results-button { padding: 12px 24px; font-size: 14px; } } /* Flats Control Buttons */ .flats-control-buttons { display: flex; align-items: center; justify-content: center; gap: 12px; width: 650px; margin: 0 auto; margin-top: 24px; margin-bottom: 24px; } .flats-control-buttons button { padding: 14px 0 !important; } .flat-card-hidden { display: none !important; opacity: 0; transform: translateY(-20px); } .flat-card-visible { opacity: 1; transform: translateY(0); animation: fadeInSlideDown 0.6s ease forwards; } .flat-card-hiding { animation: fadeOutSlideUp 0.6s ease forwards; } @keyframes fadeInSlideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOutSlideUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } } .hide-flats-btn { transition: all 0.6s ease; } .show-more-flats-btn { transition: all 0.6s ease; width: 100%; height: 48px; font-size: 18px; justify-self: center; margin-top: 20px; } .rest-desk-filters { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 4 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 4 * (1 - var(--tw-space-y-reverse))); } .extra-options-text { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 2 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 2 * (1 - var(--tw-space-y-reverse))); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-main-black-60); } .extra-options-list { display: flex; height: 32px; gap: calc(var(--spacing) * 3); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); text-align: center; } @layer components { .extra-options-item { display: flex; height: 100%; transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); align-content: center; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); background-color: var(--color-main-black-5); padding-inline: calc(var(--spacing) * 5); --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--color-border-line-white); transition-property: all; --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); text-align: center; } .extra-options-item:hover { --tw-ring-color: var(--color-gray-400); } .checked { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-main-green); } } .clear-filters-des { appearance: button; position: relative; z-index: 1; border-radius: calc(infinity * 1px); padding-inline: calc(var(--spacing) * 4); padding-block: 6px; font-family: var(--font-inter); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); gap: calc(var(--spacing) * 4) !important; align-items: center !important; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-border-line-white); background-color: var(--color-main-black-5) !important; fill: var(--color-main-black-100); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); display: flex; pointer-events: auto; opacity: 1; max-width: fit-content; } .clear-filters-des:hover { border-color: var(--color-gray-400); } .clear-filters-des:active { fill: var(--color-main-green); background-color: var(--color-primary) !important; color: var(--color-main-green); } .pf-switch { pointer-events: auto; z-index: 1; border-radius: calc(infinity * 1px); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: #989899; position: relative; text-align: center; } .pf-switch-buttons { display: inline-grid; height: 35px; width: 100% !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-content: center; gap: 6px; border-radius: calc(infinity * 1px); border-style: var(--tw-border-style) !important; border-width: 1px !important; border-color: var(--color-border-line-white); background-color: var(--color-main-black-5); font-family: var(--font-inter); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-main-black-60); position: relative; } .pf-switch-button { appearance: button; z-index: 20; display: inline-flex; height: 100%; width: 100% !important; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); white-space: nowrap; color: var(--color-main-black-100); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; --tw-duration: 250ms; transition-duration: 250ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); position: relative; cursor: pointer; } .pf-switch-button:hover { background-color: color-mix(in oklab, var(--color-black) 4%, transparent); } .pf-switch-button.pf-switch-active { font-weight: 500; } .additional-details-similar-project-btn { border-radius: 0; background-color: transparent; opacity: 1; appearance: button; cursor: pointer; pointer-events: auto; } .pf-switch-marker { position: absolute; z-index: 10; height: 100% !important; padding-block: 1px; padding-bottom: 1px; --tw-duration: 600ms; transition-duration: 600ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); width: 293px; left: 299px; } .marker-div { height: 100% !important; width: 100% !important; border-radius: calc(infinity * 1px); background-color: var(--color-white); --tw-shadow: 0 1px 4px 0 var(--tw-shadow-color, #0C0C0D0D), 0 1px 4px 0 var(--tw-shadow-color, #0C0C0D1A); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .projects { transition-property: all; --tw-duration: 500ms; transition-duration: 500ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); position: relative; opacity: 1; transform: translateY(0px); pointer-events: auto; } .projects-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 38px; } .flats { transition-property: all; --tw-duration: 500ms; transition-duration: 500ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } /* Responsive adjustments */ @media (max-width: 768px) { .flats-control-buttons { flex-direction: column; gap: 8px; width: 100%; } .flats-control-buttons .btn-default { width: 100%; } } @media (width >= 64rem) { .dropdown-for-languages { display: inline-flex; } .show-flt-con { display: none; } .overlay-con { display: flex; align-items: flex-end; } .gradient-overlay { --tw-gradient-position: to bottom in oklab !important; background-image: linear-gradient(var(--tw-gradient-stops)) !important; } .title-badges { max-width: calc(100% - 650px); padding-inline: 95px !important; padding-top: calc(var(--spacing) * 0) !important; padding-bottom: 70px; } .rc-title { font-size: 100px; order: 2; } .control-bar { gap: 7px; } .badges-container { order: 1; gap: calc(var(--spacing) * 2); } .hero-sale-banner { display: none; } .inner-side-controls { right: 50px; flex-direction: row; gap: 11px; bottom: calc(var(--spacing) * 10); } .prev-btn-mobile, .next-btn-mobile { display: none; } .pagination { flex-direction: column; } .projects-flats-title { font-size: var(--text-42); line-height: var(--tw-leading, var(--text-42--line-height)); } .desc-fp-bottom { --tw-space-y-reverse: 0; margin-block-start: calc(43px * var(--tw-space-y-reverse)); margin-block-end: calc(43px * (1 - var(--tw-space-y-reverse))); } .rest-desk-filters { display: flex; gap: calc(var(--spacing) * 6); justify-content: space-between; flex-wrap: wrap; align-items: flex-end; --tw-space-y-reverse: 0; margin-block-start: calc(33px * var(--tw-space-y-reverse)); margin-block-end: calc(33px * (1 - var(--tw-space-y-reverse))); } .pf-switch { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); max-width: 272px; width: 100%; } .pf-switch-buttons { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); height: 60px; } .all-flats-p { display: none !important; } } @media (width < 64rem) { .inner-side-controls { inset-inline: calc(var(--spacing) * 0); padding-inline: calc(var(--spacing) * 6); } .greenZ-badge { display: none !important; } .title-imt { display: none; } .clear-filters-des { display: none !important; } .hero-desktop-controls { display: none; } .inner-slide-con { width: 100%; } .filters { display: none; } .extra-options { display: none; } .projects-grid { gap: 50px; } :where(.com-title-con > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 3 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 3 * (1 - var(--tw-space-y-reverse))); } .mob-com-img { place-self: center; } .infrosB { display: none !important; } .acces-badge { display: none; } .greenZ-badge2 { display: none; } } @media (width >= 40rem) { .title-badges { padding-top: 125px; padding-inline: calc(var(--spacing) * 6); } .rc-title { font-size: 70px; } .discount { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .inner-side-controls { padding-inline: calc(var(--spacing) * 6); } .projects { gap: calc(var(--spacing) * 8); flex-direction: column; display: flex; } .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 8); } .com-title-con { gap: 19px; justify-content: center; display: flex; font-size: var(--text-50); line-height: var(--tw-leading, var(--text-50--line-height)); } .title-badge-d { display: none !important; } .rc-compare-des { width: 364px; } .devel-com-badge { display: none; } } @media (min-width: 1401px) { .rc-title { font-size: 100px !important; } .filter-buttons { max-width: 500px; } #compareRc { padding: 35px !important; } .hero-sale-banner { right: 24px; } .flats { gap: calc(var(--spacing) * 8); flex-direction: column; display: flex; } } @media (width < 40rem) { .hero-sale-banner { left: calc(var(--spacing) * 4); } .all-flats-p { display: none !important; } .title-end { place-self: end; } .kd-badge { display: none !important; } } /* Here section styles */ .here-card { position: relative; width: 100%; padding: 14px; border-radius: 16px; background-color: var(--color-white); border: 4px solid var(--color-white); overflow: hidden; box-shadow: 0 -1.72px 20.57px 0 rgba(12, 12, 13, 0.4); } .here-content { display: flex; justify-content: space-between; gap: calc(var(--spacing) * 1); } .here-text-section { flex: none; display: flex; flex-direction: column; gap: 10px; } .here-title { font-size: var(--text-xl); font-family: var(--font-bounded); line-height: var(--text-xl--line-height); } .here-subtitle-wrapper { display: flex; align-items: center; gap: calc(var(--spacing) * 1); font-size: var(--text-2xs); line-height: var(--text-2xs--line-height); } .here-dot { width: 2px; height: 2px; border-radius: calc(infinity * 1px); background-color: var(--color-gray-400); } .here-button { width: auto; padding-inline: calc(var(--spacing) * 4); } .here-image-section { width: 100px; flex-grow: 1; position: relative; overflow: hidden; margin-block: -14px; margin-right: -14px; } .here-image-wrapper { position: absolute; inset-block: 0; right: 0; transform: translateX(calc(var(--spacing) * 3)); } .here-svg { width: 100%; height: 100%; transform: scale(1.3); } /* Responsive styles for larger screens */ @media (width >= 64rem) { .here-card { width: auto; padding: 25px; } .here-text-section { gap: 25px; } .here-title { font-size: var(--text-28); line-height: var(--text-28--line-height); } .here-subtitle-wrapper { font-size: var(--text-base); line-height: var(--text-base--line-height); } .here-button { padding-inline: 42px; } .here-image-section { margin-block: -25px; margin-right: -25px; } .here-image-wrapper { transform: translateX(0); } .here-svg { transform: scale(1.5); } } /* Responsive styles for small screens */ @media (width >= 40rem) { .here-image-wrapper { transform: translateX(calc(var(--spacing) * 5)); } .here-svg { transform: scale(1.5); } } .mobile-project-info-card { width: 175px; } .addinf-flat, .min-flat-price { font-weight: 500; font-size: 12px; } .addinf-flat { font-weight: 500; } .min-flat-price { color: var(--color-main-black-60); } /* ============================================ PROJECT MENU MODAL TAB STYLES ============================================ */ /* Tab button base styles */ .menu-tab-button { position: relative; z-index: 20; transition: color 0.3s ease; color: rgba(53, 70, 63, 0.5); /* Default inactive color */ } .menu-tab-button.active { color: #35463F !important; /* Active color - dark text */ cursor: default; } .menu-tab-button:not(.active) { cursor: pointer; } .menu-tab-button:not(.active):hover { background-color: rgba(0, 0, 0, 0.04); color: rgba(53, 70, 63, 0.7); } /* Tab marker styles */ .menu-tab-marker { position: absolute; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } /* Tab content styles */ .menu-tab-content { display: none; opacity: 0; transition: opacity 0.3s ease; } .menu-tab-content.active { display: block; opacity: 1; } /* ============================================ MOBILE SIDEBAR TAB STYLES ============================================ */ /* Mobile tab button styles */ .toggle-button-mb { transition: all 0.3s ease; color: rgba(53, 70, 63, 0.5); /* Default inactive color */ } .toggle-button-mb.mobile-tab-active { color: #35463F !important; /* Active color - dark text */ cursor: default; } .toggle-button-mb:not(.mobile-tab-active) { cursor: pointer; } .toggle-button-mb:not(.mobile-tab-active):hover { background-color: rgba(0, 0, 0, 0.04); color: rgba(53, 70, 63, 0.7); } /* Mobile tab marker */ .toggle-big-box-mb { position: absolute; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } /* Mobile tab content */ .mobile-tab-content { display: none; opacity: 0; transition: opacity 0.3s ease; } .mobile-tab-content.active { display: block; opacity: 1; } /* Fix fo r marker background to prevent text blur */ .menu-tab-marker .toggle-box-mb { width: 100%; height: 100%; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0px 0px 8px 0px rgba(20, 21, 23, 0.06), 0px 2px 16px 0px rgba(20, 21, 23, 0.08); } /* Ensure text is always above marker with proper rendering */ .menu-tab-button { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Mobile marker background */ .toggle-big-box-mb .toggle-box-mb { width: 100%; height: 100%; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0px 0px 8px 0px rgba(20, 21, 23, 0.06), 0px 2px 16px 0px rgba(20, 21, 23, 0.08); } .toggle-button-mb { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /*Flats */ /* Flat C ards Styles */ .flat-card { background: #F5F6F5; border-radius: 24px; padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 12px; width: 350px; max-height: 1200px; margin: 0 auto; } .flat-card-header { display: flex; justify-content: space-between; align-items: flex-start; } .flat-info { display: flex; flex-direction: column; } .flat-rooms { font-size: 20px; color: #81988B; font-weight: 500; } .flat-area { font-size: 23px; font-weight: 600; color: #45463f; margin-top: -3px; } .flat-actions { display: flex; gap: 8px; } .flat-action-btn { width: 40px; height: 40px; border-radius: 50%; background: #ffffff; border: 1px solid #E0E6E5; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s ease; } .flat-action-btn:hover { background: #E8E8E9; } .flat-image-container { position: relative; border-radius: 16px; overflow: hidden; background: #F5F5F6; aspect-ratio: 1; height: 350px; } .flat-swiper { width: 100%; height: 100%; } .flat-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; } .flat-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.5); opacity: 1; border-radius: 50%; transition: background 0.3s ease; } .flat-pagination .swiper-pagination-bullet-active { background: #FFFFFF; } .flat-status { position: absolute; bottom: 0; left: 0; right: 0; background: #1A3A2E; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #FFFFFF; font-size: 14px; font-weight: 600; } .flat-price-section { display: flex; flex-direction: column; gap: 4px; } .flat-price { font-size: 28px; font-weight: 600; color: #35463F; } .flat-mortgage { font-size: 14px; color: #989899; } .flat-details { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #686868; flex-wrap: wrap; } .show-more-flats { max-width: 600px; height: 48px; font-size: 18px; font-weight: bold; justify-self: center; margin-top: 20px; padding: 0 10px; } .text-center { text-align: center; } .news-card-title-wrapper { margin-bottom: 10px; /* Add space between title and description */ } .news-card-description { margin-top: 60px; /* Additional spacing for description */ } .news-card-description p { width: 90%; } /* Flat Cards Styles */ .flat-card { background: #F5F6F5; border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .flat-card-header { display: flex; justify-content: space-between; align-items: flex-start; } .flat-actions { display: flex; gap: 8px; } .flat-action-btn:hover { background: #E8E8E9; } .flat-action-btn img { width: 18px; height: 18px; } .flat-badge { display: inline-flex; padding: 8px 16px; background: #E9E9EA; border-radius: 12px; font-size: 16px; color: #131314; font-weight: 400; width: fit-content; margin-bottom: 10px; } .flat-swiper { width: 100%; height: 100%; } .flat-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; background: #FFFFFF; } .flat-swiper .swiper-slide img { width: 100%; height: 100%; padding-bottom: 30px; } .flat-pagination { position: absolute; bottom: 45px !important; left: 50% !important; transform: translateX(-50%); z-index: 10; display: flex; width: unset !important; pointer-events: none; gap: 3px; } .flat-pagination .swiper-pagination-bullet { width: 7px; height: 7px; background: #C4C4C4; opacity: 1; border-radius: 50%; transition: background 0.3s ease; margin: 0 !important; cursor: pointer; pointer-events: auto; } .flat-pagination .swiper-pagination-bullet-active { background: #1A3A2E; } .flat-status { position: absolute; bottom: 0; left: 0; right: 0; background: #1A3A2E; padding: 7px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #FFFFFF; font-size: 14px; font-weight: 600; border-radius: 0 0 30px 30px; z-index: 40; } .flat-status::before, .flat-status::after { content: ""; position: absolute; top: -16px; width: 17px; height: 22px; background: #1A3A2E; } .flat-status::before { right: 0; background: radial-gradient(circle at 0 0, transparent 16px, #1A3A2E 16px); } .flat-status::after { left: 0; background: radial-gradient(circle at 100% 0, transparent 16px, #1A3A2E 16px); } .flat-status img { width: 16px; height: 16px; } .flat-price-section { display: flex; flex-direction: column; gap: 4px; } .flat-mortgage { font-size: 13px; color: #989899; font-weight: 400; } .flat-mortgage span { font-weight: 600; color: #35463F; } .flat-details span { white-space: nowrap; } /* Grid for flat cards - 4 in a row */ .flats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* ===== COMPARE RC SECTION - NEW LAYOUT ===== */ @media (width >=40rem) { .main-container { padding-inline: calc(var(--spacing) * 6); } } @media (width >=64rem) { .main-container { padding-inline: 20px; } } @media (max-width: 1025px) { .main-container { margin-top: 35px; } } /* Main compare container */ .compare-rc { display: flex; width: 100%; flex-direction: column; gap: 24px; border-radius: 44px; background-color: var(--color-primary); position: relative; padding: 20px; } @media (min-width: 740px) { .compare-rc { padding: 25px; } } @media (min-width: 1401px) { .compare-rc { padding: 28px; gap: 12px; padding-right: 40px; } } /* Tabs */ .compare-rc-tabs { display: inline-grid; height: 43px; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-content: center; gap: 6px; border-radius: 20px; border: 1px solid var(--color-light-primary); background-color: var(--color-main-green-dark); padding: 2px; font-size: var(--text-xs); line-height: var(--text-xs--line-height); font-weight: var(--font-weight-bold); color: var(--color-main-black-60); user-select: none; text-align: center; } @media (width >= 64rem) { .compare-rc-tabs { position: absolute; left: 34.5%; font-size: var(--text-17); line-height: var(--text-17--line-height); place-self: center; max-width: 290px; width: 100%; height: 52px; } } @media (min-width: 1024px) and (max-width: 1600px) { .compare-rc-tabs { left: 38%; } } .compare-rc-tab-btn { appearance: button; z-index: 20; display: inline-flex; height: 100%; width: 100%; align-items: center; justify-content: center; border-radius: 18px; white-space: nowrap; transition: all 0.3s ease; position: relative; cursor: pointer; border: none; background: transparent; } .compare-rc-tab-marker { position: absolute; left: 0; z-index: 10; width: 50%; height: 100%; transition: all 0.6s ease-in-out; pointer-events: none; } .com-marker-div { height: 100%; width: 100%; border-radius: 18px; background-color: var(--color-light-primary); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); } .compare-rc-tab-active { color: var(--color-main-green); cursor: default; } .compare-rc-tab-inactive { cursor: pointer; color: var(--color-main-black-60); } .compare-rc-tab-inactive:hover { background-color: rgba(19, 19, 20, 0.8); } /* Content wrapper */ .compare-rc-content-wrapper { position: relative; width: 100%; } /* Content panes */ .respublika-content { transition: all 500ms ease-in-out; position: absolute; width: 100%; opacity: 0; transform: translateY(-20px); pointer-events: none; } .respublika-content:first-child { position: relative; opacity: 1; transform: translateY(0); pointer-events: auto; } /* Layout - Image on left, content on right */ .compare-rc-layout { display: flex; flex-direction: column; gap: 24px; width: 100%; } @media (width >=64rem) { .compare-rc-layout { flex-direction: row; gap: 40px; align-items: center; } } /* Image side */ .compare-rc-image-side { width: 100%; flex-shrink: 0; } @media (width >=64rem) { .compare-rc-image-side { width: 35%; max-width: 500px; height: -webkit-fill-available; } } .compare-rc-main-image { width: 100%; height: auto; border-radius: 20px; object-fit: cover; display: block; } @media (width >=64rem) { .compare-rc-main-image { height: -webkit-fill-available; } } /* Text side */ .compare-rc-text-side { display: flex; flex-direction: column; gap: 20px; flex: 1; } @media (width >=64rem) { .compare-rc-text-side { gap: 24px; padding-bottom: 30px; padding-top: 60px; } } /* Badges */ .compare-rc-badges-top, .compare-rc-badges-bottom { display: flex; flex-wrap: wrap; gap: 12px; } @media (width >=64rem) { .compare-rc-badges-top, .compare-rc-badges-bottom { gap: 16px; } } /* Title */ .compare-rc-title { font-family: var(--font-bounded); font-size: var(--text-34); line-height: 1.2; color: var(--color-main-green); margin: 0; } @media (width >=40rem) { .compare-rc-title { font-size: var(--text-50); } } @media (width >=64rem) { .compare-rc-title { font-size: 65px; } } @media (width >=1515px) { .compare-rc-title { font-size: 75px; } } @media (width >=1650px) { .compare-rc-title { font-size: 85px; } } /* Description */ .compare-rc-description { font-family: var(--font-inter); font-size: var(--text-2xs); line-height: var(--text-2xs--line-height); font-weight: var(--font-weight-medium); color: var(--color-main-black-60); margin: 0; } @media (width >=64rem) { .compare-rc-description { font-size: var(--text-base); line-height: var(--text-base--line-height); width: 100%; } } /* Button */ .rccom-mbtn { width: 100%; margin-top: auto; } @media (width >=64rem) { .rccom-mbtn { max-width: 100%; align-self: center; margin-top: 10px; } } /* Badge component */ .badge-sm { position: relative; z-index: 1; display: inline-flex; border-radius: 999px; padding: 6px 16px; font-family: var(--font-inter); font-size: var(--text-xs); line-height: var(--text-xs--line-height); font-weight: var(--font-weight-medium); } @media (width >=64rem) { .badge-sm { font-size: var(--text-base); line-height: var(--text-base--line-height); font-weight: var(--font-weight-bold); } } .badge-sm::before { position: absolute; inset: 1px; z-index: -1; border-radius: 999px; content: ""; } .badge-sm[data-badge-color="green-dark-2"] { background-color: #0d5034; color: var(--color-try-it-out); } .badge-sm[data-badge-color="green-light"] { background-color: var(--color-try-it-out); color: var(--color-primary); } /* Button component */ .btn-default { position: relative; z-index: 1; display: flex; width: 100%; align-items: center; justify-content: center; border-radius: 12px; padding: 13px 16px; font-family: var(--font-bounded); font-size: var(--text-xs); line-height: var(--text-xs--line-height); text-align: center; transition: all 300ms ease-in-out; cursor: pointer; border: 1px solid transparent; } @media (width >=64rem) { .btn-default { padding: 18.5px 16px; font-size: var(--text-base); line-height: var(--text-base--line-height); } } .btn-default::before { position: absolute; inset: 1px; z-index: -1; border-radius: 11px; content: ""; } .btn-default[data-btn-color="light-green"] { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); fill: var(--color-main-green); color: var(--color-main-green); } .btn-default[data-btn-color="light-green"]::before { background-color: var(--color-main-light-green); } .btn-default[data-btn-color="light-green"]:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13, 80, 52, 0.2); } /* Utility classes */ .text-nowrap { white-space: nowrap; } .text-main-green { color: var(--color-main-green); } /* ===== FLOATING BADGES POSITIONING - DESKTOP ONLY ===== */ @media (width >=64rem) { .compare-rc-text-side { position: relative; padding-top: 60px; } /* Top badges - absolute positioning */ .compare-rc-badges-top { position: absolute; top: 0; left: 0; right: 0; display: flex !important; justify-content: space-between; z-index: 2; } .compare-rc-badges-top .badge-sm:nth-child(1) { position: absolute; top: 0; right: 0; } .compare-rc-badges-top .badge-sm:nth-child(2) { /* Комплексное развитие - top right */ position: absolute; top: 56px; right: 50%; } /* Bottom badges - absolute positioning */ .compare-rc-badges-bottom { position: absolute; top: 50px; left: 0; right: 0; display: flex !important; justify-content: space-between; z-index: 2; } .compare-rc-badges-bottom .badge-sm:nth-child(1) { position: absolute; top: -25px; left: 55%; } .compare-rc-badges-bottom .badge-sm:nth-child(2) { position: absolute; top: 25px; right: -10px; } /* Add spacing to title for floating badges */ .compare-rc-title { position: relative; z-index: 1; padding-top: 20px; padding-bottom: 5px; } } .rights-div { display: flex; align-items: flex-end; gap: calc(var(--spacing) * 10); } .develop-div { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-main-black-60); } @media (max-width: 1025px) { .develop-div { margin-top: 10px; margin-bottom: 20px; } footer .layer-down p { text-align: unset; } } @media (max-width: 640px) { .rights-div { flex-direction: column; align-items: unset; gap: calc(var(--spacing) * 5); } } .develop-gap { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * 2 * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * 2 * (1 - var(--tw-space-y-reverse))); } .communication-list { list-style: none; display: flex; align-items: center; gap: calc(var(--spacing) * 4); } .phone-icon { display: block; vertical-align: middle; max-width: 100%; height: var(--icon-size-2xl); width: var(--icon-size-2xl); } .phone-circle { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-white); width: var(--circle-size-75); height: var(--circle-size-75); flex-shrink: 0; border-radius: calc(infinity * 1px); } .circle-red { width: var(--circle-size-8); height: var(--circle-size-8); flex-shrink: 0; border-radius: calc(infinity * 1px); } @media (width >= 64rem) { .subscribe-btn { padding-inline: 33px; } } /* Map Modal Styles */ .map-modal { position: fixed; inset: 0; z-index: 200; background-color: rgba(0, 0, 0, 0.6); padding-top: 43px; } .map-modal.hidden { display: none; } .map-modal-container { background-color: #fff; border-radius: 24px 24px 0 0; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 11px; overflow: hidden; } .map-section { position: relative; z-index: 1; height: 461px; padding: 24px; } .map-iframe-wrapper { position: absolute; z-index: -1; inset: 0; } .map-iframe { width: 100%; height: 100%; } .map-header { display: flex; align-items: flex-start; justify-content: space-between; } .map-thumbnail { overflow: hidden; width: 81px; height: 94px; border: 2px solid #E0E6E5; background-color: #D9D9D9; border-radius: 17px; } .map-thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .map-close-btn { position: absolute; z-index: 1; top: 20px; right: 20px; width: 38px; height: 38px; display: grid; place-content: center; place-items: center; border-radius: 8px; border: 1px solid rgba(224, 230, 229, 0.3); background-color: rgba(31, 36, 34, 0.8); backdrop-filter: blur(50px); transition: background-color 0.3s ease-in-out; } .map-close-btn:hover { background-color: #1F2422; } .map-close-btn img { width: 16px; height: 16px; } .map-content { padding: 0 12px; } .map-info-row { display: flex; flex-direction: column; gap: 12px; } .map-title-section { margin-bottom: 4px; } .map-title { font-size: 20px; font-family: Bounded, sans-serif; margin-bottom: 4px; } .map-address-row { display: flex; align-items: center; gap: 14px; white-space: nowrap; font-size: 12px; font-weight: 500; color: #81988B; } .map-address-item { display: flex; align-items: center; gap: 6px; } .map-address-item img { width: 14px; height: 14px; } .map-queue-wrapper { width: 100%; } .map-queue-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 180px; padding-bottom: 76px; } .map-queue-item input { display: none; } .map-queue-label { display: flex; justify-content: space-between; align-items: center; gap: 16px; fill: #AEB5B2; border: 1px solid #E0E6E5; border-radius: 9999px; font-size: 12px; padding: 8px 16px; cursor: pointer; transition: all 0.3s ease; } .map-queue-item input:checked + .map-queue-label { fill: #DAF7E2; border-color: #042E1D; background-color: #042E1D; color: #DAF7E2; } .map-queue-label-text-desktop { display: none; } .map-queue-label-text-mobile .queue-label-prefix { color: #81988B; } .map-queue-label svg { width: 14px; height: 14px; } .map-button-container { position: absolute; bottom: 0; left: 8px; right: 8px; padding-bottom: 23px; background-color: #fff; } .map-gradient-overlay { pointer-events: none; position: absolute; z-index: 1; left: 0; right: 0; top: -22px; background: linear-gradient(180deg, rgba(252, 252, 253, 0) 10%, rgb(252, 252, 253) 45%); height: 30px; } @media (min-width: 640px) { .map-modal { padding: 16px; display: grid; place-content: center; } .map-modal-container { border-radius: 24px; gap: 7px; height: auto; } .map-section { height: 365px; padding: 16px; } .map-thumbnail { width: 112px; height: 129px; } .map-content { padding: 0 24px 27px; } .map-title { font-size: 24px; } .map-address-row { font-size: 10px; } .map-queue-list { flex-direction: row; flex-wrap: wrap; gap: 8px; column-gap: 29px; overflow-y: visible; max-height: none; padding-bottom: 0; } .map-queue-label { fill: #35463F; font-size: 10px; } .map-queue-label-text-desktop { display: inline; } .map-queue-label-text-mobile { display: none; } .map-button-container { position: relative; left: 0; right: 0; padding-bottom: 0; } .map-gradient-overlay { display: none; } } @media (min-width: 1024px) { .map-modal { place-items: center; } .map-modal-container { max-width: 1124px; gap: 43px; } .map-section { height: 499px; padding: 24px; } .map-thumbnail { width: 161px; height: 186px; } .map-content { padding: 0 30px 30px; } .map-content > div:first-child { margin-bottom: 33px; } .map-info-row { flex-direction: row; gap: 90px; justify-content: space-between; align-items: center; } .map-title { font-size: 34px; } .map-address-row { font-size: 14px; } .map-address-item .queue-label-prefix { color: #81988B; } .map-queue-list { gap: 4px; column-gap: 34px; } .map-queue-label { font-size: 14px; } }