html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } :focus { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; -moz-appearance: none; } input[type=search] { -webkit-appearance: none; -moz-appearance: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } textarea { overflow: auto; vertical-align: top; resize: vertical; } audio, canvas, video { display: inline-block; display: inline; max-width: 100%; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } img { border: 0; -ms-interpolation-mode: bicubic; } figure { margin: 0; } form { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; vertical-align: middle; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; overflow: visible; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; height: 13px; width: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } html, button, input, select, textarea { color: #222; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } img { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } :root { --brand-primary-main: #EC6C83; --brand-primary-hover: #EA5A74; --brand-primary-light: #F3A4B2; --brand-primary-lighter: #F7C3CD; --brand-primary-pale: #FBDBE1; --brand-primary-paler: #FFF3F5; --brand-secondary-main: #253041; --brand-secondary-hover: #172232; --brand-secondary-light: #475770; --brand-secondary-lighter: #748AAA; --brand-secondary-pale: #DFE5EB; --brand-secondary-paler: #F1F5F9; --assistive-info-main: #0163F7; --assistive-info-dark: #024FC4; --assistive-info-light: #5B8CEF; --assistive-info-pale: #DAE8FF; --assistive-success-main: #17803D; --assistive-success-dark: #14532D; --assistive-success-light: #17A34A; --assistive-success-pale: #DCFCE7; --assistive-warning-main: #CA8A03; --assistive-warning-dark: #A16207; --assistive-warning-light: #EBB305; --assistive-warning-pale: #FEF9C3; --assistive-error-main: #991B1B; --assistive-error-dark: #7F1C1D; --assistive-error-light: #EF4444; --assistive-error-pale: #FEE2E1; --surface-main: #FAFAFA; --surface-dark: #F4F4F5; --surface-light: #FDFEFF; --surface-scrim: #100F0F4D; --text-main: #1E293B; --text-secondary: #334155; --text-teriary: #64758B; --text-disable: #AFBCCC; --border-main: #CBD5E1; --border-dark: #64758B; --border-light: #F1F5F9; --max-width-size: 1440px; --marginSideSize: 2rem; --marginSideSizeMobile: 0rem; } @font-face { font-family: 'Farhang'; font-style: normal; font-weight: 400; src: url(/font/elegant-wedding.woff); src: url(/font/elegant-wedding.woff) format('woff'), url(/font/elegant-wedding.eot?#iefix) format('embedded-opentype'), url(/font/elegant-wedding.ttf) format('truetype') } @font-face { font-family: 'Mulish'; src: url('/font/Mulish-Regular.ttf'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Mulish'; src: url('/font/Mulish-Medium.ttf'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Mulish'; src: url('/font/Mulish-Bold.ttf'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Mulish'; src: url('/font/Mulish-ExtraBold.ttf'); font-weight: 800; font-style: normal; } html { font-size: 16px; font-family: 'Mulish' !important; font-style: normal !important; font-weight: normal !important; line-height: normal !important; /* scroll-behavior: smooth; */ scroll-padding-top: 6rem; overflow: auto; scrollbar-width: 2rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { html { --device: mobileP; font-size: clamp(0px, 3.80952380952381vw, 16px); scrollbar-width: none; -ms-overflow-style: none; /* scroll-behavior: smooth; */ } } @media only screen and (min-width:0px) and (max-width:900px) and (orientation:landscape) and (pointer: coarse) { html { --device: mobileL; font-size: clamp(0px, 1.3vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:501px) and (max-width:2500px) and (orientation:portrait) and (pointer: coarse) { html { --device: tabletP; font-size: clamp(0px, 0.64vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:901px) and (max-width:2900px) and (orientation:landscape) and (pointer: coarse) { html { --device: tabletL; font-size: clamp(0px, 0.5517241379310345vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (pointer: fine) { html { font-size: clamp(0px, 1.11111111111vw, 16px); } @media only screen and (orientation:landscape) { html { --device: desktopL; scrollbar-width: auto; -ms-overflow-style: none; } } @media only screen and (orientation:portrait) { html { --device: desktopP; scrollbar-width: auto; -ms-overflow-style: none; } } @media only screen and (min-width:0px) and (max-width:1024px) { :root { --marginSideSize: 1rem; } } } .paddingBig { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; padding-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; box-sizing: border-box !important; } .paddingBigLeft { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; box-sizing: border-box !important; } .paddingBig2 { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; padding-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; box-sizing: border-box !important; } .marginBig { margin-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; margin-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; box-sizing: border-box !important; } .marginBig2 { margin-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; margin-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; box-sizing: border-box !important; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .paddingBig { padding-left: var(--marginSideSizeMobile) !important; padding-right: var(--marginSideSizeMobile) !important; } .paddingBig2 { padding-left: 0 !important; padding-right: 0 !important; } } * { box-sizing: border-box; } .hidden { display: none !important; } .w100 { width: 100% !important; } .w50 { width: 50% !important; } .w50rem05 { width: calc(50% - 0.5rem) !important; } .mb1 { margin-bottom: 1rem !important; } .ml1 { margin-left: 1rem !important; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .ml1m { margin-left: 1rem !important; } } .mb2 { margin-bottom: 2rem !important; } .flex1 { flex: 1 !important; } a { cursor: pointer !important; } .center { text-align: center; } .mla { margin-left: auto; } .mt6 { margin-top: 6rem; } .mt1_5 { margin-top: 1.5rem; } .mb1_5 { margin-bottom: 1.5rem; } main { padding-block: 4.75rem; display: flex; flex-direction: row; align-items: flex-start; width: 100%; flex-wrap: wrap; } main>article { width: 100%; } main>article:has(+aside) { width: 75%; } main>aside { width: calc(25% - 2rem); margin-left: 2rem; } .DH1 { font-size: 2rem; font-weight: 700; line-height: normal; } .DH2 { font-size: 1.5rem; font-weight: 800; line-height: normal; } .DH3 { font-size: 1.25rem; font-weight: 800; line-height: normal; } .DH4, .DH5, .DH6 { font-size: 1.125rem; font-weight: 700; line-height: normal; } .DB1B { font-size: 1rem; font-weight: 700; line-height: normal; } .DB1 { font-size: 1rem; font-weight: 500; line-height: 1.5rem; } .DB2B { font-size: 0.875rem; font-weight: 700; line-height: normal; } .DB2 { font-size: 0.875rem; font-weight: 500; line-height: normal; } .DB3B { font-size: 0.75rem; font-weight: 700; line-height: normal; } .DB3 { font-size: 0.75rem; font-weight: 500; line-height: normal; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { main { padding-top: 4rem; flex-direction: column; } main>article:has(+aside) { width: 100%; } main>aside { width: 100%; margin-left: unset; } .MH1 { font-size: 1.5rem; font-weight: 700; line-height: normal; } .MH3 { font-size: 1rem; font-weight: 700; line-height: normal; } .DB1 { font-size: 0.875rem; font-weight: 400; line-height: normal; } .MB1B { font-size: 0.875rem; font-weight: 700; line-height: normal; } .MB3 { font-size: 0.625rem; font-weight: 500; line-height: normal; } } main>a.back { margin-right: calc(100% - 25rem); } main>h1 { padding: 0 0 2rem 0; width: 100%; } main>section { display: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; width: 100%; } main>section:has(+article>.paginationList>div>ul>li) { display: flex; } main>article>.paginationList { display: none !important; } main>article>.paginationList:has(>div>ul>li) { display: flex !important; } main>section>.myInput { flex: 1.5; } div.filter { width: 0%; height: 0dvh; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; background: var(--surface-scrim, rgba(16, 15, 15, 0.30)); z-index: 20; /* padding-top: 4.75rem; */ box-sizing: border-box; opacity: 0; display: none; } div.filter.show { display: flex; width: 100%; height: 100dvh; opacity: 1; animation: showFilter 0.5s ease-in-out 0s 1 forwards; } @keyframes showFilter { 0% { display: flex; width: 0%; height: 0dvh; opacity: 0; } 1% { display: flex; width: 100%; height: 100dvh; opacity: 0; } 100% { display: flex; width: 100%; height: 100dvh; opacity: 1; } } div.filter>div { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; width: 22.5rem; padding: 1rem; gap: 1rem; flex-shrink: 0; border-radius: 0.25rem; background: var(--surface-light, #FDFEFF); /* hard shadow */ box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); } div.filter>div>h3 { flex: 2; color: var(--text-main, #1E293B); } div.filter>div>h4 { color: var(--text-main, #1E293B); } .filterHidden { display: none !important; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { main>h1 { padding: 0 0 2rem 1rem; } main>section { width: 100%; justify-content: flex-start; padding-inline: 1rem; box-sizing: border-box; flex-wrap: wrap; } main>section>span { display: none; } main>section>button { order: 2; } main>section>label { order: 1 !important; width: 100% !important; flex: unset !important; } } .siteHeader { display: flex; flex-direction: row; width: 100%; padding: 1rem 2rem; justify-content: space-between; align-items: center; box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); z-index: 11; position: fixed; top: 0; left: 0; background: var(--surface-light, #FDFEFF); } .siteHeader.noShadow { box-shadow: unset; } .siteHeader.onlyLogo { justify-content: center; } .siteHeader>.hamburger { display: none; z-index: 1; /* width: 2.75rem; */ } .siteHeader>.backColor { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--brand-primary-paler, #FFF3F5); } .siteHeader a { text-decoration: none; color: var(--text-teriary, #64758B); } .siteHeader .click a.title { width: 20%; margin-right: 80%; margin-bottom: 1.5rem; color: var(--text-main, #1E293B); } .siteHeader>.logo, .siteHeader>.menu>.logo2 { width: 7.1875rem; height: 2.75rem; flex-shrink: 0; order: 0; z-index: 1; } .siteHeader.onlyLogo>.logo { width: 20rem; } .siteHeader>.logo>a, .siteHeader>.menu>.logo2>a { background-image: url("/image/logo.webp"); background-size: 7.1875rem auto; background-repeat: no-repeat; background-position: center; width: 7.1875rem; height: 2.75rem; display: inline-block; position: absolute; bottom: 1rem; } .siteHeader.onlyLogo>.logo>a { width: 20rem; } .siteHeader>.menu>.logo2 { display: none; } .siteHeader>.menu { display: flex; flex-direction: row; flex-grow: 2; order: 1; margin-left: 2rem; } .siteHeader>.menu>* { display: flex; height: 2.75rem; padding: 0.25rem 1rem; align-items: center; gap: 0.5rem; color: var(--text-teriary, #64758B); position: relative; cursor: pointer; box-sizing: border-box; } .siteHeader>.menu>*::before { content: ''; width: 0; height: 2px; position: absolute; right: 1px; bottom: -2px; background-color: var(--brand-primary-main, #EC6C83); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>*:has(ul)::after { content: '\e900'; font-family: 'Farhang'; width: 1.5rem; height: 1.5rem; font-size: 1.5rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>*:hover, .siteHeader>.menu>*.active { color: var(--brand-primary-main, #EC6C83); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>*.active::after { transform: rotateX(180deg); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>*:hover::before, .siteHeader>.menu>*.active::before { width: calc(100% - 2px); right: unset; left: 1px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>div.vendors>div { display: flex; position: fixed; top: -20rem; left: 0; width: 100%; height: 16.75rem; padding: 1.5rem; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; border-radius: 0rem 0rem 0.25rem 0.25rem; border: 1px solid var(--border-main, #CBD5E1); background: var(--surface-light, #FDFEFF); box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); box-sizing: border-box; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; z-index: -1; cursor: auto; overflow: hidden; background: var(--brand-primary-paler, #FFF3F5); } .siteHeader>.menu>div.vendors.active>div { top: 4.75rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } /* .siteHeader>.menu>div.vendors>div::after { content: attr(iconcode); font-family: 'Farhang'; font-size: 10rem; color: var(--brand-primary-lighter, #F7C3CD); position: absolute; bottom: -1rem; left: max(calc(((100vw - min(100vw, var(--max-width-size))) / 2) - 10rem), 0rem); rotate: 20deg; opacity: 0; z-index: -1; } .siteHeader>.menu>div.vendors>div[iconcode]::after { opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>div.vendors>div[iconcode]:has(ul>li>a:hover):after { opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } */ .siteHeader>.menu>div.vendors>div>p { width: 100%; display: flex; height: 1.25rem; flex-direction: column; justify-content: center; color: var(--text-main, #1E293B); margin-bottom: 1.5rem; } .siteHeader>.menu>div.vendors ul.listItem { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; box-sizing: border-box; width: 37.5rem; } .siteHeader>.menu>div.vendors ul.listItem>li { width: calc(12.5rem - 1px); } .siteHeader>.menu>div.vendors ul.listItem>li:nth-child(n + 13) { display: none; } .siteHeader>.menu>div.vendors ul.otherVendors { display: flex; width: 28rem; align-items: flex-start; align-content: flex-start; gap: 0.5rem; flex-wrap: wrap; } .siteHeader>.menu>div.vendors .mainVendors ul.otherVendors>li { display: flex; height: 2.5rem; padding: 0rem 0.5rem; align-items: center; gap: 0.25rem; border-radius: 0.25rem; border: 1px solid var(--border-main, #CBD5E1); } .siteHeader>.menu>div.vendors img { display: flex; width: 13.75rem; height: 10.9375rem; padding: 0.625rem; justify-content: space-between; align-items: center; box-sizing: border-box; object-fit: contain; } .siteHeader>.menu>div.tools>div { display: flex; position: fixed; top: -20rem; padding: 1.5rem; flex-direction: column; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; border-radius: 0rem 0rem 0.25rem 0.25rem; border-top: 1px solid var(--surface-main, #FAFAFA); background: var(--surface-light, #FDFEFF); box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); box-sizing: border-box; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; z-index: -1; cursor: auto; background: var(--brand-primary-paler, #FFF3F5); } .siteHeader>.menu>div.tools.active>div { top: 4.87rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>div.tools>div>p { width: 100%; display: flex; height: 1.25rem; flex-direction: column; justify-content: center; color: var(--text-main, #1E293B); margin-bottom: 1.5rem; } .siteHeader>.menu>div.tools ul { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; box-sizing: border-box; width: 25rem; } .siteHeader>.menu>div.tools ul>li { width: 12.5rem; } .siteHeader>.user { display: none; flex-direction: row; order: 2; z-index: 1; padding: 0; justify-content: flex-end; align-items: center; gap: 1.5rem; margin-left: 1rem; } .siteHeader>.new { display: flex; flex-direction: row; /* height: 2.75rem; */ padding: 0 0 0 1rem; align-items: center; gap: 0.5rem; position: relative; box-sizing: border-box; order: 2; } .siteHeader>.new::before { content: ''; width: 0.0625rem; height: 2.625rem; background: #CBD5E1; position: absolute; left: 0; } .siteHeader>.new>p { color: var(--brand-primary-main, #EC6C83); display: flex; padding: 0.25rem 1rem; align-items: center; gap: 0.5rem; } .siteHeader>.new>a { display: flex; padding: 0.75rem 1.25rem; justify-content: center; align-items: center; border-radius: 0.25rem; background: var(--brand-secondary-main, #253041); color: var(--text-contrast, #FFFDFE); text-decoration: none; font-weight: 600; } html[userid] .siteHeader>.new { display: none; } html[userid] .siteHeader>.user { display: flex; } .siteHeader a.lang { margin-left: auto; text-transform: uppercase; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .siteHeader { padding: 0.75rem 1rem !important; height: 4.375rem; } .siteHeader>.backColor:has(~div.menu.show) { height: 100dvh; background: #00000055; } .siteHeader>.hamburger { display: flex; z-index: 10000; } .siteHeader>.menu { display: flex; flex-direction: column; margin-left: 0; } .siteHeader>.menu>.logo2 { display: initial; width: 100%; position: relative; aspect-ratio: 2 / 1; height: unset; } .siteHeader>.menu>.logo2::before { content: ''; /* background-image: url(../image/menu-header.png); */ background-color: var(--brand-primary-paler, #FFF3F5); width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; right: 0px; bottom: 0px; } .siteHeader>.user>a.bell { display: none; } .siteHeader>.new { padding: 0; } .siteHeader>.new::before { content: unset; } .siteHeader>.new>p { display: none; } .siteHeader>.new>a { display: flex; background-color: transparent; height: 2.75rem; padding: 0 1rem; align-items: center; color: var(--text-teriary, #64758B); } .siteHeader>.menu { display: none; flex-direction: column; height: 100dvh; width: 80vw; position: absolute; left: 0; top: 0; background: var(--surface-light, #FDFEFF); /* Soft shadow */ box-shadow: 0px 2px 12px 0px rgba(99, 98, 101, 0.19); z-index: 1; } .siteHeader>.menu>*::before { content: unset; } .siteHeader>.menu.show { display: flex; overflow: hidden; transform: translateX(0); animation: menuMobShow 0.5s ease 0s 1 forwards; } @keyframes menuMobShow { 0% { display: none; transform: translateX(-100vw); } 1% { display: flex; transform: translateX(-100vw); } 100% { display: flex; transform: translateX(0); } } .siteHeader>.menu> :hover, .siteHeader>.menu>.active { color: var(--text-secondary, #334155); } .siteHeader>.menu>* { justify-content: space-between; color: var(--text-secondary, #334155); font-family: Mulish; font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: normal; height: 3.5rem; padding-block: 1rem; } .siteHeader>.menu>*.vendors { height: unset; padding-top: 4rem; } .siteHeader>.menu>*:has(ul)::after { rotate: -90deg; } .siteHeader>.menu>.active::after { transform: unset; } .siteHeader>.menu>div.vendors>div { position: absolute; top: 0 !important; left: 100%; width: 100%; height: calc(100dvh - 40vw - 1.2rem); flex-direction: column; flex-wrap: nowrap; padding: 0.75rem 1rem; z-index: 1; border: 0; box-shadow: none; background-color: white; } /* .siteHeader>.menu>div.vendors.active>div { left: 0; } */ .siteHeader>.menu>div.vendors>div>p { width: 100%; box-sizing: border-box; padding: 0 1rem; margin-bottom: 1rem; } .siteHeader>.menu>div.vendors ul.listItem { width: 100%; padding: 0 1rem; box-sizing: border-box; overflow: scroll; } .siteHeader>.menu>div.vendors ul.otherVendors { /* display: flex; width: 100%; padding: 1rem; box-sizing: border-box; background: var(--surface-light, #FDFEFF); */ display: none; } /* .siteHeader>.menu>div.vendors ul.otherVendors>* { display: none; } .siteHeader>.menu>div.vendors ul.otherVendors>*:nth-last-child(1) { display: initial; width: 100%; box-sizing: border-box; } .siteHeader>.menu>div.vendors ul.otherVendors>*:nth-last-child(1)>a { width: 100%; box-sizing: border-box; } */ .siteHeader>.menu>div.vendors ul.listItem>li { width: 100%; } .siteHeader>.menu>div.vendors ul.listItem>li:nth-child(n + 13) { display: initial; } .listItem>li>a { height: 3.5rem; font-size: 1rem; } .siteHeader>.menu>div.vendors.active, .siteHeader>.menu>div.vendors.active~* { transform: translateX(-100%); margin-left: unset; } .siteHeader a.lang { margin-right: 1rem; } } .badge { display: inline-flex; padding: 0.25rem 0.5rem; justify-content: center; align-items: center; gap: 0.25rem; border-radius: 0.25rem; font-family: Mulish; font-size: 0.75rem; font-style: normal; font-weight: 500; line-height: normal; } .badge:empty { display: none; } .badge[iconcode]::before { content: attr(iconcode); font-family: 'Farhang'; font-size: 0.9rem; font-weight: normal; width: 1rem; height: 1rem; align-items: center; display: flex; justify-content: center; } .badge.info.light { color: var(--assistive-info-main, #0163F7); background: var(--assistive-info-pale, #DAE8FF); } .badge.info.dark { color: var(--text-contrast, #FFFDFE); background: var(--assistive-info-main, #0163F7); } .badge.success.light { color: var(--assistive-success-main, #17803D); background: var(--assistive-success-pale, #DCFCE7); } .badge.success.dark { color: var(--text-contrast, #FFFDFE); background: var(--assistive-success-main, #17803D); } .badge.error.light { color: var(--assistive-error-main, #991B1B); background: var(--assistive-error-pale, #FEE2E1); } .badge.error.dark { color: var(--text-contrast, #FFFDFE); background: var(--assistive-error-main, #991B1B); } .badge.warning.light { color: var(--assistive-warning-main, #CA8A03); background: var(--assistive-warning-pale, #FEF9C3); } .badge.warning.dark { color: var(--text-contrast, #FFFDFE); background: var(--assistive-warning-main, #CA8A03); } .badge.brand.light { color: var(--brand-primary-main, #EC6C83); background: var(--brand-primary-paler, #FFF3F5); } .badge.brand.dark { color: var(--text-contrast, #FFFDFE); background: var(--brand-primary-light, #F3A4B2); } .badge.neutral.light { color: var(--brand-secondary-main, #253041); background: var(--brand-secondary-paler, #F1F5F9); } .badge.neutral.dark { color: var(--text-contrast, #FFFDFE); background: var(--brand-secondary-light, #475770); } .myButton { /* width: 100%; */ display: inline-flex; justify-content: center; align-items: center; border-radius: 0.25rem; font-family: 'Mulish'; font-style: normal; line-height: normal; font-size: 1rem; font-weight: 600; gap: 0.5rem; text-decoration: none; box-sizing: border-box; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; white-space: nowrap; } .myButton.onlyIcon { height: 2.75rem; width: 2.75rem; } .myButton:hover { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myButton.large { padding: 0.75rem 1.25rem; } .myButton.large.iconLeft { padding-left: 0.75rem; } .myButton.large.iconRight { padding-right: 0.75rem; } .myButton.large.free { padding: 0.75rem; } .myButton.medium { padding: 0.75rem 1.25rem; } .myButton.medium.iconLeft { padding-left: 0.75rem; } .myButton.medium.iconRight { padding-right: 0.75rem; } .myButton.medium.free { padding: 0.75rem; } .myButton.small { padding: 0.5rem 1rem; } .myButton.small.iconLeft { padding-left: 0.5rem; } .myButton.small.iconRight { padding-right: 0.5rem; } .myButton.small.free { padding: 0.5rem; } .myButton.iconLeft::before, .myButton.iconRight::after { content: attr(iconcodeleft); font-family: 'Farhang'; font-weight: normal; display: flex; justify-content: center; align-items: center; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; color: var(--text-contrast, #FFFDFE); } .myButton.iconRight::after { content: attr(iconcoderight); } .myButton:hover::before, .myButton:hover::after { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myButton.large.iconLeft::before, .myButton.large.iconRight::after { font-size: 1.5rem; width: 1.5rem; height: 1.5rem; } .myButton.medium.iconLeft::before, .myButton.medium.iconRight::after { font-size: 1.25rem; width: 1.25rem; height: 1.25rem; } .myButton.small.iconLeft::before, .myButton.small.iconRight::after { font-size: 1.125rem; width: 1.125rem; height: 1.125rem; } .myButton.elevated { border: 0; background: var(--brand-primary-main, #EC6C83); box-shadow: 0px 2px 12px 0px rgba(99, 98, 101, 0.19); color: var(--text-contrast, #FFFDFE); } .myButton.elevated:hover { background: var(--brand-primary-hover, #EA5A74); box-shadow: 0px 2px 12px 0px rgba(99, 98, 101, 0.19); } .myButton.elevated[disabled] { background: var(--text-disable, #AFBCCC); box-shadow: 0px 2px 12px 0px rgba(99, 98, 101, 0.19); } .myButton.primary { border: 1px solid transparent; background: var(--brand-primary-main, #EC6C83); color: var(--text-contrast, #FFFDFE); } .myButton.primary:hover { border: 1px solid transparent; background: var(--brand-primary-hover, #EA5A74); color: var(--text-contrast, #FFFDFE); } .myButton.primary[disabled] { border: 1px solid transparent; background: var(--text-disable, #AFBCCC); color: var(--text-contrast, #FFFDFE); } .myButton.secondary { background: var(--brand-secondary-main, #253041); color: var(--text-contrast, #FFFDFE); border: 0; } .myButton.secondary:hover { background: var(--brand-secondary-hover, #172232); color: var(--text-contrast, #FFFDFE); } .myButton.secondary[disabled] { background: var(--text-disable, #AFBCCC); color: var(--text-contrast, #FFFDFE); } .myButton.mainOutline { background-color: transparent; border: 1px solid var(--brand-primary-main, #EC6C83); color: var(--brand-primary-main, #EC6C83); } .myButton.mainOutline:hover { background-color: transparent; border: 1px solid var(--brand-primary-hover, #EA5A74); color: var(--brand-primary-hover, #EA5A74); } .myButton.mainOutline[disabled] { background-color: transparent; border: 1px solid var(--text-disable, #AFBCCC); color: var(--text-disable, #AFBCCC); } .myButton.mainOutline.iconLeft::before, .myButton.mainOutline.iconRight::after { color: var(--brand-primary-main, #EC6C83); } .myButton.mainOutline.iconLeft:hover::before, .myButton.mainOutline.iconRight:hover::after { color: var(--brand-primary-hover, #EA5A74); } .myButton.mainOutline.iconLeft[disabled]::before, .myButton.mainOutline.iconRight[disabled]::after { color: var(--text-disable, #AFBCCC); } .myButton.grayOutline { background-color: transparent; border: 1px solid var(--border-main, #CBD5E1); color: var(--text-main, #1E293B); } .myButton.grayOutline:hover { background-color: transparent; border: 1px solid var(--border-dark, #64758B); color: var(--text-main, #1E293B); } .myButton.grayOutline[disabled] { background-color: transparent; border: 1px solid var(--text-disable, #AFBCCC); color: var(--text-disable, #AFBCCC); } .myButton.grayOutline.iconLeft::before, .myButton.grayOutline.iconRight::after { color: var(--text-main, #1E293B); } .myButton.grayOutline.iconLeft:hover::before, .myButton.grayOutline.iconRight:hover::after { color: var(--text-main, #1E293B); } .myButton.grayOutline.iconLeft[disabled]::before, .myButton.grayOutline.iconRight[disabled]::after { color: var(--text-disable, #AFBCCC); } .myButton.text { background-color: transparent; border: 1px solid transparent; color: var(--brand-primary-main, #EC6C83); } .myButton.text:hover { background-color: transparent; border: 1px solid transparent; color: var(--brand-primary-hover, #EA5A74); } .myButton.text[disabled] { background-color: transparent; border: 1px solid transparent; color: var(--text-disable, #AFBCCC); } .myButton.text.iconLeft::before, .myButton.text.iconRight::after { color: var(--brand-primary-main, #EC6C83); } .myButton.text.iconLeft:hover::before, .myButton.text.iconRight:hover::after { color: var(--brand-primary-hover, #EA5A74); } .myButton.text.iconLeft[disabled]::before, .myButton.text.iconRight[disabled]::after { color: var(--text-disable, #AFBCCC); } .myButton.wide { width: 100%; } .myButton.iconLeft[iconcodecolor]::before { color: var(--leftcolor) !important; } .myButton.iconLeft.loading::before { content: '\e946'; rotate: 360deg; animation: loadingAnimation 1s ease 0s infinite forwards; } .myButton.iconRight.loading::after { content: '\e946'; rotate: 360deg; animation: loadingAnimation 1s ease 0s infinite forwards; } @keyframes loadingAnimation { 0% { content: '\e946'; rotate: 0deg; } 80% { content: '\e946'; rotate: 360deg; } 100% { content: '\e946'; rotate: 360deg; } } .myButton.rotate180::before, .myButton.rotate180::after { transform: rotateX(180deg); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .wideMobile { width: 100%; } } /* <label class="myInput iconLeft iconRight" labeltext="abcd efgh" helpertext="qwer trew"><input type="email" placeholder="Search vendors names, locations and services"> <span iconcodeleft="&#xe913" iconcoderight="&#xe913"></span></label> */ .myInput { display: flex; flex-direction: column; position: relative; gap: 0.5rem; } .myInput[labeltext]::before { content: attr(labelText); color: var(--text-main, #1E293B); font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: 1.3; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput[helpertext]::after { content: attr(helperText); color: var(--text-secondary, #334155); font-family: Mulish; font-size: 0.75rem; font-style: normal; font-weight: 500; line-height: normal; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput>input, .myInput>textarea { display: flex; width: 100%; height: 2.75rem; padding: 0.75rem 0.5rem; align-items: center; gap: 0.5rem; border-radius: 0.25rem; border: 1px solid var(--border-main, #CBD5E1); box-sizing: border-box; color: var(--text-teriary, #64758B); font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput>textarea { height: unset; min-height: 2.75rem; scrollbar-width: thin; resize: none; line-height: 1.125rem; } /* .myInput input.disable { pointer-events: none; } */ .myInput.iconLeft>input, .myInput.iconLeft>textarea { padding-left: 2.5rem; } .myInput.iconRight>input, .myInput.iconRight>textarea { padding-right: 2.5rem; } .myInput.iconLeft>span[iconcodeleft] { position: absolute; left: 0.625rem; /* top: 0.625rem; */ width: 1.5rem; height: 1.5rem; } .myInput.iconRight>span[iconcoderight] { position: absolute; right: 0.625rem; /* top: 0.625rem; */ width: 1.5rem; height: 1.5rem; } .myInput.iconLeft>span[iconcodeleft]::before { content: attr(iconcodeleft); font-family: 'Farhang'; font-weight: normal; font-size: 1.5rem; color: var(--text-teriary, #64758B); width: 1.5rem; height: 1.5rem; display: flex; align-items: center; } .myInput.iconRight>span[iconcoderight]::before { content: attr(iconcoderight); font-family: 'Farhang'; font-weight: normal; font-size: 1.5rem; color: var(--text-teriary, #64758B); width: 1.5rem; height: 1.5rem; display: flex; align-items: center; } .myInput.iconRight.dropdown>input { cursor: pointer; } .myInput.dropdown.multiselect>input { display: none; } .myInput.iconRight.dropdown>span[iconcoderight] { cursor: pointer; transform: rotateX(0deg); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.iconRight.show.dropdown>span[iconcoderight] { transform: rotateX(180deg); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.iconRight.show.dropdown>span[iconcoderight].noRotate { transform: rotateX(0deg); } .myInput>span { bottom: 0.625rem !important; } .myInput[helpertext]>span { top: 2.3rem !important; bottom: unset !important; } .myInput>input:focus { border: 1px solid var(--border-dark, #64758B); color: var(--text-main, #1E293B); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.error[helpertext]::after { color: var(--assistive-error-main, #991B1B); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.error>input { border: 1px solid var(--assistive-error-main, #991B1B); color: var(--text-main, #1E293B); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.iconLeft.error>span::before, .myInput.iconRight.error>span::after { color: var(--assistive-error-main, #991B1B); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.success[helpertext]::after { color: var(--assistive-success-main, #17803D); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.success>input { border: 1px solid var(--assistive-success-main, #17803D); color: var(--text-main, #1E293B); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.iconLeft.success>span::before, .myInput.iconRight.success>span::after { color: var(--assistive-success-main, #17803D); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.disabled[helpertext]::after { color: var(--text-disable, #AFBCCC); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.disabled>input { border: 1px solid var(--border-main, #CBD5E1); background: var(--surface-dark, #F4F4F5); color: var(--text-disable, #AFBCCC); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.iconLeft.disabled>span::before, .myInput.iconRight.disabled>span::after { color: var(--border-main, #CBD5E1); background: var(--surface-dark, #F4F4F5); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.dropdown>div { display: flex; width: 100%; padding: 0; flex-direction: column; align-items: flex-start; border-radius: 0.25rem; border: 1px solid var(--border-main, #CBD5E1); background: var(--surface-light, #FDFEFF); box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); position: absolute; top: 100%; z-index: 3; opacity: 0; padding: 0; overflow: hidden; scrollbar-width: thin; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; max-height: 15rem; overflow: auto; } .myInput.show.dropdown>div { opacity: 1; top: calc(100% + 0.12rem); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.dropdown.multiselect>div { position: unset; max-height: 13.75rem; min-height: 13.75rem; height: 13.75rem; } .myInput[labelText].dropdown>div { top: 4.7rem; } .myInput.dropdown>div>div { display: flex; width: 100%; padding: 0.25rem 0rem; flex-direction: column; align-items: flex-start; background: var(--surface-light, #FDFEFF); z-index: -1; opacity: 0; padding: 0; /* overflow: hidden; */ scrollbar-width: thin; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; max-height: 15rem; overflow: auto; } .myInput.show.dropdown>div>div { opacity: 1; top: calc(100% + 0.12rem); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.dropdown>div>div>* { display: flex; width: 100%; box-sizing: border-box; height: 0rem; padding: 0rem 1rem; align-items: center; gap: 0.5rem; opacity: 0; color: var(--text-main, #1E293B); font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; cursor: pointer; white-space: nowrap; overflow: hidden; box-sizing: border-box; min-height: 0rem; } .myInput.show.dropdown>div>div>* { opacity: 1; height: 2.75rem; min-height: 2.75rem; padding: 0.25rem 1rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.show.dropdown>div>div>*.selected { background: var(--brand-primary-paler, #FFF3F5); color: var(--brand-primary-hover, #EA5A74); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.show.dropdown>div>div>*:hover { color: var(--brand-primary-hover, #EA5A74); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media only screen and (pointer: coarse) { .myInput.show.dropdown>div>div>*:hover { color: var(--text-main, #1E293B); -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease; } .myInput.show.dropdown>div>div>*.selected:hover { background: var(--brand-primary-paler, #FFF3F5); color: var(--brand-primary-hover, #EA5A74); -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease; } } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) {} .myInput.date>div { display: none; width: calc(20.5rem + 2px); padding: 1rem 1rem 1.5rem; flex-direction: column; align-items: center; border-radius: 0.25rem; background: var(--surface-light, #FDFEFF); box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); border: 1px solid var(--border-main, #CBD5E1); position: absolute; top: 2.9rem; right: 0; z-index: 2; opacity: 0; overflow: hidden; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: auto; box-sizing: border-box; } .myInput.date>div.showTop { top: unset; bottom: 2.9rem; } .myInput.date.double>div { width: calc(39rem + 2px); } .myInput.show.date>div { display: flex; opacity: 1; animation: showDate 0.3s ease-in-out 0s 1 forwards; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; z-index: 10000; } @keyframes showDate { 0% { opacity: 0; display: none; } 1% { opacity: 0; display: flex; } 100% { display: flex; opacity: 1; } } .myInput[labelText].date>div { top: 4.5rem; } .myInput[labelText].date>div.showTop { top: unset; bottom: 2.9rem; } .myInput.date>div>div { display: flex; padding: 0.5rem; flex-direction: row; align-items: flex-start; gap: 1rem; /* width: 100%; */ box-sizing: border-box; } .myInput.date div.daysAndName { gap: 2rem; } .myInput.date>div>div>div { display: flex; padding: 0; flex-direction: column; align-items: flex-start; gap: 1rem; width: 17.5rem; box-sizing: border-box; } .myInput.date>div>.myButton { /* width: calc(50% - 0.5rem); */ width: 8rem; margin: 0 0.5rem; } .myInput.date div.monthYear { display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center; position: relative; gap: 0; } .myInput.date div.monthYear>* { color: var(--text-main, #1E293B) !important; z-index: 1; } .myInput.date div.monthYear>*::before { color: var(--text-teriary, #64758B) !important; } .myInput.date div.monthYear>.myButton:nth-child(4)::before { rotate: 180deg; } .myInput.date div.monthYear>.myButton:nth-child(2), .myInput.date div.monthYear>.myButton:nth-child(3) { padding: 0.75rem 0.5rem !important; } .myInput.date.double div.monthYear>.myButton:nth-child(2), .myInput.date.double div.monthYear>.myButton:nth-child(3) { padding: 0.75rem 0.5rem !important; width: calc(50% - 1rem); position: absolute; left: 0; z-index: 0; } .myInput.date.double div.monthYear>.myButton:nth-child(3) { left: unset; right: 0; } /* .myInput.date>div>div.monthYear>*.free { position: absolute; left: 0; top: 0; } */ .myInput.date div.monthYear>div.monthYearDetail { width: 100%; position: absolute; top: 0; left: 0; gap: 3rem; display: none; opacity: 0; flex-direction: row; justify-content: center; align-items: center; z-index: 1; background-color: white; } .myInput.date div.monthYear>div.monthYearDetail.showDetail { display: flex; opacity: 1; animation: showDetail 0.2s ease 0s 1 forwards; } @keyframes showDetail { 0% { display: none; opacity: 0; } 1% { display: flex; opacity: 0; } 100% { display: flex; opacity: 1; } } .myInput.date>div .monthYear>div { display: none; width: 8.5rem; height: 0rem; padding: 0rem 0.25rem; flex-direction: column; align-items: flex-start; position: absolute; left: 0; top: 3.1875rem; border-radius: 0.25rem; border: 1px solid var(--border-main, #CBD5E1); background: var(--surface-main, #FAFAFA); box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); box-sizing: border-box; } .myInput.date>div .monthYear>div.yearDetail { left: unset; right: 0; } .myInput.date>div .monthYear>div.showDetail { display: flex; padding: 0.25rem; height: 10rem; animation: showDetailAnim 0.5s ease 0s 1 forwards; } @keyframes showDetailAnim { 0% { display: none; height: 0rem; padding: 0rem 0.25rem; } 1% { display: flex; height: 0rem; padding: 0rem 0.25rem; } 100% { display: flex; padding: 0.25rem 0.25rem; height: 10rem; } } .myInput.date>div .monthYear>div>div { display: flex; flex-direction: column; overflow: auto; width: 100%; height: 100%; scrollbar-width: thin; } .myInput.date>div .monthYear>div>div>Span { display: flex; height: 2.75rem; padding: 0.5rem 1rem; align-items: center; gap: 0.5rem; align-self: stretch; color: var(--text-main, #1E293B); font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; width: 96%; cursor: pointer; box-sizing: border-box; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.date>div .monthYear>div>div>Span:hover { background: var(--brand-primary-pale, #FBDBE1); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.date div.daysAndName { display: flex; flex-direction: row; align-items: flex-start; gap: 1rem; } .myInput.date div.days { display: flex; flex-direction: row; flex-wrap: wrap; } .myInput.date div.dayOfWeek { display: flex; flex-direction: row; justify-content: space-around; width: 100%; } .myInput.date div.days>span { display: flex; width: 2.5rem; height: 2rem; padding: 0.5rem; justify-content: center; align-items: center; box-sizing: border-box; color: var(--text-main, #1E293B); text-align: center; background: linear-gradient(90deg, transparent 0%, transparent 100%); /* desktop/body2 */ font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; -webkit-transition: border-radius 0s; -moz-transition: border-radius 0s; -ms-transition: border-radius 0s; -o-transition: border-radius 0s; transition: border-radius 0s; position: relative; } .myInput.date div.dayOfWeek>* { color: var(--brand-primary-main, #EC6C83); } .myInput.date div.days>* { border-radius: 0.25rem; cursor: pointer; } .myInput.date div.days>span.pre { background: transparent; color: var(--text-disable, #AFBCCC); } .myInput.date div.days>span:hover { background: linear-gradient(90deg, var(--brand-primary-pale, #FBDBE1) 0%, var(--brand-primary-pale, #FBDBE1) 100%); } .myInput.date div.days>span.selectedStart { border-radius: 0.25rem 0 0 0.25rem; background: linear-gradient(90deg, var(--brand-primary-main, #EC6C83) 0%, var(--brand-primary-main, #EC6C83) 100%) !important; color: var(--Text-contrast, #FFF); } .myInput.date div.days>span.selectedEnd { border-radius: 0 0.25rem 0.25rem 0; background: linear-gradient(90deg, var(--brand-primary-main, #EC6C83) 0%, var(--brand-primary-main, #EC6C83) 100%) !important; color: var(--Text-contrast, #FFF); } .myInput.date div.days>span.selectedEndVirtual { border-radius: 0 0.25rem 0.25rem 0; background: linear-gradient(90deg, var(--brand-primary-ligh, #F3A4B2) 0%, var(--brand-primary-ligh, #F3A4B2) 100%) !important; color: var(--Text-contrast, #FFF); } .myInput.date div.days>span.endVirtual, .myInput.date div.days>span.startVirtual { border-radius: 0; background: linear-gradient(90deg, var(--brand-primary-ligh, #F3A4B2) 0%, var(--brand-primary-ligh, #F3A4B2) 100%); color: var(--Text-contrast, #FFF); } /* khonehaye vasat */ .myInput.date div.days>span.startVirtual~span:has(~span.selectedEnd), .myInput.date div.days>span.startVirtual~span:has(~span.selectedEndVirtual), .myInput.date div.days>span.selectedStart~span:has(~span.selectedEnd), .myInput.date div.days>span.selectedStart~span:has(~span.selectedEndVirtual), .myInput.date div.days>span.selectedStart~span:has(~span.endVirtual) { border-radius: 0; background: linear-gradient(90deg, var(--brand-primary-ligh, #F3A4B2) 0%, var(--brand-primary-ligh, #F3A4B2) 100%); color: var(--Text-contrast, #FFF); } /* avali bade start */ .myInput.date div.days>span.selectedStart+span:has(~span.selectedEnd), .myInput.date div.days>span.selectedStart+span:has(~span.selectedEndVirtual), .myInput.date div.days>span.selectedStart+span:has(~span.endVirtual) { border-radius: 0; background: linear-gradient(90deg, var(--brand-primary-main, #EC6C83) 0%, var(--brand-primary-ligh, #F3A4B2) 100%); color: var(--Text-contrast, #FFF); } /* akhari ghable end */ .myInput.date div.days>span.startVirtual~span:has(+span.selectedEnd), .myInput.date div.days>span.selectedStart~span:has(+span.selectedEnd) { border-radius: 0; background: linear-gradient(270deg, var(--brand-primary-main, #EC6C83) 0%, var(--brand-primary-ligh, #F3A4B2) 100%); color: var(--Text-contrast, #FFF); } /* 3 khone */ .myInput.date div.days>span.selectedStart+span:has(+span.selectedEnd) { border-radius: 0; background: linear-gradient(90deg, var(--brand-primary-main, #EC6C83) 0%, var(--brand-primary-ligh, #F3A4B2) 50%, var(--brand-primary-main, #EC6C83) 100%); color: var(--Text-contrast, #FFF); } .myInput.date div.days>span.selectedStart.selectedEnd { border-radius: 0.25rem 0.25rem; background: linear-gradient(90deg, var(--brand-primary-main, #EC6C83) 0%, var(--brand-primary-main, #EC6C83) 100%); color: var(--Text-contrast, #FFF); } .myInput.date div.days>span.disable, .myInput.date div.days>span.disable:hover { background: linear-gradient(90deg, transparent 0%, transparent 100%) !important; cursor: auto; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .myInput.date>div { width: 100%; } .myInput.date div.daysAndName { width: 100%; } .myInput.date>div>div>div { width: 100%; } .myInput.date div.days>span { width: calc(100% / 7); } .myInput.show.date>div { justify-content: space-around; } .myInput>input, .myInput>textarea { font-size: clamp(16px, 0.875rem, 32px) !important; } } span.alaki{ flex: 2; } .breadcrumb { display: flex; flex-direction: row; color: var(--text-teriary, #64758B); text-align: center; font-family: 'Mulish'; font-size: 1rem; font-style: normal; font-weight: 500; line-height: normal; align-items: center; padding: 0.5rem 0; width: 100%; margin-top: 0.5rem; margin-bottom: 0.62rem; } .breadcrumb>li { display: flex; flex-direction: row; } .breadcrumb>li:nth-child(1)>a::before { content: '\e90f'; font-family: 'Farhang'; font-weight: normal; font-size: 1.25rem; visibility: initial; } .breadcrumb>li:nth-child(1)>a { text-decoration: none; visibility: hidden; width: 1rem; display: inline-block; box-sizing: content-box; } .breadcrumb a { padding: 0 0.25rem; color: var(--text-teriary, #64758B); } .breadcrumb>li::before { content: '/'; padding: 0 0.34rem; } .breadcrumb>li:nth-child(1)::before { content: unset; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .breadcrumb { width: 100%; box-sizing: border-box; padding: 0.5rem 1rem; overflow: scroll; } .breadcrumb>li { display: flex; flex-direction: row; text-wrap: nowrap; } .breadcrumb a { text-wrap: nowrap; } } .back { color: var(--text-main, #1E293B); border: 0; background-color: transparent; display: flex; flex-direction: row; gap: 0.25rem; align-items: center; /* width: 25rem; */ text-decoration: none; margin: 1.5rem 0; width: 100%; } .back.type2 { margin: 0; height: 3.5rem; color: var(--text-main, #1E293B); font-family: Mulish; font-size: 2rem; font-style: normal; font-weight: 700; line-height: normal; } .back::before { content: '\e911'; rotate: 180deg; font-family: 'Farhang'; font-size: 1.5rem; width: 1.5rem; height: 1.5rem; font-weight: 400; color: var(--text-teriary, #64758B); display: flex; align-items: center; } .back.type2::before{ font-size: 2rem; width: 2rem; height: 2rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .back { width: calc(100% - 1rem); margin-left: 1rem; } .back.type2 { margin: 0; height: 3.5rem; color: var(--text-main, #1E293B); /* mobile/h1 */ font-family: Mulish; font-size: 1.5rem; font-style: normal; font-weight: 700; line-height: normal; } } main>article .content:has(.hiddenContent) { max-height: calc(var(--maxHeight) * 1rem); overflow: hidden; position: relative; margin-bottom: 2rem; } main>article .content.showTotal { animation: showTotalArticle 1s ease 0s 1 forwards; max-height: max-content; margin-bottom: 1rem; } @keyframes showTotalArticle { 0% { max-height: calc(var(--maxHeight) * 1rem); margin-bottom: 2rem; } 99% { max-height: calc((var(--maxHeight) * 1rem) + 100vh); margin-bottom: 1rem; } 100% { max-height: max-content; margin-bottom: 1rem; } } main>article .content .hiddenContent { display: flex; justify-content: center; align-items: center; width: 100%; position: absolute; bottom: 0rem; left: 0; z-index: 9; max-height: 20rem; height: 20rem; align-items: flex-end; } main>article .content .hiddenContent::before { content: ''; width: 100vw; height: 20rem; position: absolute; bottom: 0; left: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 1) 100%); } main>article .content.showTotal .hiddenContent { animation: hiddenExtraBtn 1s ease 0s 1 forwards; align-items: flex-end; max-height: 0rem; overflow: hidden; } @keyframes hiddenExtraBtn { 0% { max-height: 20rem; overflow: auto; } 99% { max-height: 20rem; overflow: auto; } 100% { max-height: 0rem; overflow: hidden; } } main>article .content.showTotal .hiddenContent::before { height: 0rem; animation: hiddenExtraBtnBefore 1s ease 0s 1 forwards; } @keyframes hiddenExtraBtnBefore { 0% { height: 20rem; } 100% { height: 0rem; } } main>article .content header { display: flex; align-items: center; gap: 0.5rem; flex: 1 0 0; align-self: stretch; align-items: center; margin-bottom: 1.12rem; position: sticky; top: 4.75rem; background-color: white; padding: 0.5rem 0; /* z-index: 1; */ } main>article .content h1 { color: var(--text-main, #1E293B); font-family: Mulish; font-size: 1.5rem; font-style: normal; font-weight: 800; line-height: normal; } main>article .content h2 { color: var(--text-main, #1E293B); margin: 2rem 0 1rem 0; display: flex; flex-direction: row; align-items: center; gap: 0.5rem; font-family: Mulish; font-size: 1.25rem; font-style: normal; font-weight: 800; line-height: normal; } main>article .content h2::after { content: ''; flex: 2; height: max(0.0625rem, 1px); background: #CBD5E1; margin-top: 0.6rem; } main>article .content h3 { overflow: hidden; color: var(--text-secondary, #334155); text-overflow: ellipsis; white-space: nowrap; font-family: Mulish; font-size: 1.125rem; font-style: normal; font-weight: 700; line-height: normal; margin-block: 2rem 0rem; } main>article .content h4 { overflow: hidden; color: var(--text-secondary, #334155); text-overflow: ellipsis; white-space: nowrap; font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 1rem; } main>article .content a { color: var(--brand-primary-main, #EC6C83); text-decoration: none; border-bottom: 1px solid var(--brand-primary-main, #EC6C83); } main>article .content p { color: var(--text-secondary, #334155); font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 500; line-height: 1.5rem; } main>article .content p~p { margin-top: 1rem; } main>article .content p.description { color: var(--text-secondary, #334155); font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 700; line-height: normal; margin-top: 0; } main>article .content ul { list-style: disc; padding: 1rem 0 0 1rem; } main>article .content ol { list-style: decimal; padding: 1rem 0 0 1rem; } main>article .content ul>li, main>article .content ol>li { padding-block: 0.25rem; color: var(--text-secondary, #334155); font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 500; line-height: 1.5rem; } main>article .content li>ul, main>article .content li>ol { padding: 0.5rem 0 1rem 1rem; } main>article .content h3.services { font-size: 1rem; margin-bottom: 0.5rem; } main>article .content h3.services:empty { display: none; } main>article .content ul.serviceList>li>p { font-weight: 400; padding-bottom: 0.5rem; padding-right: 0; display: flex; flex-direction: row; gap: 0.25rem; } main>article .content ul.serviceList>li>p::before { content: '\e95f'; font-family: 'Farhang'; font-size: 1.5rem; color: var(--brand-primary-hover, #EA5A74); } main>article .content ul.serviceList { display: none; align-items: flex-start; align-content: flex-start; gap: 2rem; align-self: stretch; flex-wrap: wrap; flex-direction: row; padding: 0 !important; margin-bottom: 3rem !important; } main>article .content ul.serviceList:has(>li) { display: flex; } main>article .content ul.serviceList>li { list-style: none !important; width: calc((100% - 4rem) / 3); } h2.servicesHeader { display: none !important; } h2.servicesHeader:has(~ul.serviceList>li) { display: flex !important; } main>article .content address { margin: 1rem 0; display: flex; flex-direction: row; gap: 0.13rem; align-items: center; color: var(--text-secondary, #334155); font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 500; line-height: 1.5rem; max-height: 6rem; } main>article .content address::before { content: '\e918'; color: var(--text-teriary, #64758B); font-family: 'Farhang'; font-size: 1.25rem; width: 1.25rem; height: 1.25rem; display: flex; align-items: center; } main>article .content .packageBanner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 2rem; width: 100%; padding: 1rem; border-radius: 0.25rem; background: var(--brand-primary-background, #FFFAFA); box-sizing: border-box; } main>article .content .packageBanner>p:nth-child(1) { color: var(--text-main, #1E293B); font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 600; line-height: normal; flex: 1; } main>article .content .packageBanner>p>span { color: var(--text-main, #1E293B); font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 800; line-height: normal; } main>article .content .packageBanner>p:nth-child(2) { color: var(--brand-primary-main, #EC6C83); font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 600; line-height: normal; margin-top: 0 !important; margin-right: 1.25rem; } main>article .content figure>img { width: 100%; margin-block: 1rem; } main>article .content section.slider { margin-block: 1rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { main>article .content { padding-inline: 1rem; box-sizing: border-box; } main>article .content header { flex-wrap: wrap; margin-bottom: 0; padding-bottom: 1rem; padding-top: 1rem; top: 4.25rem; align-items: flex-start; background: var(--surface-light, #FDFEFF); } main>article .content header>h1 { order: 0; width: calc(100% - 6rem); } main>article .content header>p { order: 4; } main>article .content header>a { order: 5; } main>article .content header>span { order: 1; display: none; } main>article .content header>ul { order: 2; } main>article .content header>.myButton { order: 3; margin-right: 3rem; } main>article .content p.description { font-size: 0.875rem; } main>article .content h2 { margin: 1.5rem 0 1rem 0; } main>article .content h2::after { content: unset; } main>article .content p { /* font-size: 0.875rem; */ } main>article .content .packageBanner { flex-direction: column; margin-top: 1.5rem; } main>article .content .packageBanner>p:nth-child(1) { font-size: 0.875rem; font-weight: 400; display: flex; flex-direction: column; margin-bottom: 1rem; justify-content: center; align-items: center; order: 0; } main>article .content .packageBanner>p>span { font-size: 1.25rem; } main>article .content .packageBanner>p:nth-child(2) { order: 1; margin-right: 0; padding: 0.75rem; } main>article .content .packageBanner>.myButton { order: 2; width: 100%; } main>article .content address { gap: 0.5rem; align-items: flex-start; } main>article .content h3.services { margin-bottom: 1.5rem; } main>article .content ul.serviceList { flex-wrap: nowrap; flex-direction: column; gap: 0; margin-bottom: 2rem !important; } main>article .content ul.serviceList>li { width: 100%; } } .paginationList { --sizeli: calc((100% - var(--ligap)) / var(--numberrowchild)); display: flex; flex-direction: column; box-sizing: border-box; padding-inline: var(--divmarginside); /* width: 100%; */ } .paginationList>div:has(+ol.pagination.hidden) { margin-bottom: 2rem; } .paginationList>div>ul { --sizecard: calc(var(--sizeli)); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--ligap); } .paginationList>div>ul>li { width: var(--sizeli); } .paginationList.infinity>ol { display: none; } .paginationList .paginationHidden { display: none; } ol.pagination { display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 2rem 0; } ol.pagination>li { display: flex; width: 2.75rem; height: 2.75rem; flex-direction: column; justify-content: center; align-items: center; gap: 0.625rem; color: var(--text-secondary, #334155); text-align: center; font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 500; line-height: 1.5rem; cursor: pointer; } ol.pagination>li.free { cursor: default; } ol.pagination>li.active { color: var(--brand-primary-main, #EC6C83); border-radius: 0.25rem; background: var(--brand-primary-paler, #FFF3F5); } ol.pagination>li:nth-child(1), ol.pagination>li:nth-last-child(1) { position: relative; } ol.pagination>li:nth-child(1)::before, ol.pagination>li:nth-last-child(1)::before { content: '\e911'; font-family: 'Farhang'; font-size: 1.25rem; rotate: 180deg; display: flex; align-items: center; justify-content: center; } ol.pagination>li:nth-last-child(1)::before { rotate: 0deg; } ol.pagination>li.paginationHidden { width: 0px; opacity: 0; } ol.pagination>li.free::before { content: '...'; display: flex; align-items: center; justify-content: center; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .paginationList { --sizeli: calc((100% - (2 * var(--divmarginsidemobile)) - ((var(--numberrowchildmobile) - 1) * var(--ligapmobile))) / var(--numberrowchildmobile)); padding-inline: var(--divmarginsidemobile); } .paginationList>div>ul { --sizeCard: calc(var(--sizeli)); gap: var(--ligapmobile); } } .slider { --sizeli: calc((100% - ((var(--numberchild) - 1) * var(--ligap))) / var(--numberchild)); display: inline-flex; flex-direction: row; flex-wrap: wrap; width: 100%; align-items: center; justify-content: center; } .slider.fix { --sizeli: 100%; } .slider>h2 { width: 100%; text-align: center; color: var(--text-main, #1E293B); /* font-family: "New Peninim MT"; */ font-size: 2rem; font-style: normal; font-weight: 400; line-height: normal; margin-bottom: 0.5rem; } .slider>p { width: 100%; text-align: center; color: var(--text-teriary, #64758B); margin-bottom: 2.5rem; } .slider>div { margin: 0 calc(var(--divmarginside) * 1) calc(var(--divmarginbottom) * 1); width: calc(100% - (2 * ((var(--keysize) * 1) + (var(--divmarginside) * 1))) - 2px); overflow: hidden; box-sizing: border-box; padding-bottom: 1rem; } .slider>div>ul { list-style: none !important; --sizecard: calc(var(--sizeli)); display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; width: auto; gap: calc(var(--ligap) * 1); transform: translateX(calc((-1 * var(--slider) * (var(--sizeli) + (var(--ligap) * 1)) + (var(--ligap) * 0.5)))); padding: 0 !important; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .slider.noSide>div>ul { transform: translateX(calc((-1 * var(--slider) * (var(--sizeli) + (var(--ligap) * 1))))); } .slider>div>ul.drag { transform: translateX(calc(-1px * var(--slider2))); -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; transition: unset; } .slider>div>ul>li { width: var(--sizeli); height: 100%; padding: 0 !important; } .slider>button { display: flex; width: calc(var(--keysize) * 1); height: calc(var(--keysize) * 1); padding: 0.75rem 0.5rem; justify-content: center; align-items: center; gap: 0.625rem; border-radius: 3.5rem; border: 1px solid var(--text-teriary, #64758B); background-color: transparent; box-sizing: border-box; position: relative; } .slider>button::before { content: '\e900'; font-family: 'Farhang'; font-size: 1.5rem; color: var(--text-teriary, #64758B); width: calc(var(--keysize) * 1); height: calc(var(--keysize) * 1); position: absolute; top: -1px; left: -1px; display: flex; justify-content: center; align-items: center; } .slider>button.left::before { rotate: 90deg; } .slider>button.right::before { rotate: -90deg; } .slider>button.disable { cursor: auto; border: 1px solid var(--text-disable, #AFBCCC); } .slider>button.disable::before { color: var(--text-disable, #AFBCCC); } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .slider { margin: 0; --sizeli: calc((100% - (2 * var(--divmarginsidemobile)) - ((var(--numberchildmobile) - 1) * var(--ligapmobile))) / var(--numberchildmobile)); } .slider>h2 { font-size: 1.5rem; } .slider>p { font-size: 0.75rem; } .slider>div { margin: 0 0 var(--divmarginbottom); width: 100%; overflow: hidden; position: relative; } .slider>div::before, .slider>div::after { content: ''; width: calc(0.5 * var(--ligapmobile)); ; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.92) 50%); z-index: 3; } .slider>div::after { left: unset; background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.92) 100%); right: 0; } .slider.noSideMobile>div::before, .slider.noSideMobile>div::after { content: unset; } .slider>div>ul, .slider>div>ul.drag { padding-left: 1rem; gap: var(--ligapmobile); transform: translateX(calc((-1 * var(--slidermobile) * (var(--sizeli) + var(--ligapmobile))) + (0.5 * var(--ligapmobile)))); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .slider.noSideMobile>div>ul, .slider.noSideMobile>div>ul.drag { transform: translateX(calc((-1 * var(--slidermobile) * (var(--sizeli) + var(--ligapmobile))) + var(--divmarginsidemobile))); } .slider>button { display: none; } } @keyframes nudgeSlider { 0% { transform: translateX(0); } 80% { transform: translateX(-10rem); } 100% { transform: translateX(0); } } .dance { animation: nudgeSlider 1s ease-in-out 0.2s; } .vendorCard { display: flex; flex-direction: column; align-items: flex-start; border-radius: 0.25rem; box-shadow: 0px 2px 12px 0px rgba(99, 98, 101, 0.19); overflow: hidden; position: relative; } .vendorCard>p.badge { position: absolute; right: 0.75rem; top: 0.75rem; z-index: 1; } .vendorCard>ul { display: flex; flex-direction: row; overflow: hidden; position: relative; transform: translateX(calc(var(--index) * var(--sizecard) * -1)); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; height: var(--sizeli); } .vendorCard>ul::after { content: ''; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.30) 100%); opacity: 1; position: absolute; left: 0; top: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .vendorCard>ul:hover::after, .vendorCard>ol:hover+ul::after { opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .vendorCard>ul>li { width: var(--sizecard); aspect-ratio: 1 / 1; } .vendorCard>ul img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .vendorCard>ol>li:nth-child(1), .vendorCard>ol>li:nth-child(2) { position: absolute; top: -6rem; left: 0.5rem; width: 1.25rem; height: 1.25rem; z-index: 1; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .vendorCard>ol>li:nth-child(2) { left: unset; right: 0.5rem; } .vendorCard:hover>ol>li:nth-child(1), .vendorCard:hover>ol>li:nth-child(2) { opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .vendorCard>ol>li>button { display: flex; width: 1.25rem; height: 1.25rem; justify-content: center; align-items: center; flex-shrink: 0; border-radius: 1.5rem; background: var(--surface-light, #FDFEFF); box-shadow: 0px 2px 12px 0px rgba(99, 98, 101, 0.19); border: 0; position: absolute; left: 0; top: 0; } .vendorCard>ol>li>button::before { content: '\e926'; font-family: 'Farhang'; font-size: 0.6rem; width: 1.25rem; height: 1.25rem; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; color: var(--text-teriary, #64758B); } .vendorCard>ol>li>button.right::before { rotate: 180deg; } .vendorCard { position: relative; } .vendorCard>ol { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; width: 100%; height: 0.5rem; position: absolute; top: calc(var(--sizecard) * 0.9); z-index: 1; } .vendorCard>ol>li { width: 0.5rem; height: 0.5rem; display: flex; align-items: center; cursor: pointer; } .vendorCard>ol>li::before { content: ''; border-radius: 0.25rem; background: var(--text-contrast, #FFFDFE); width: 0.375rem; height: 0.375rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .vendorCard>ol>li.active::before { background: var(--text-main, #1E293B); width: 0.5rem; height: 0.5rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .vendorCard>a { padding: 0.75rem; width: 100%; box-sizing: border-box; text-decoration: none; display: flex; flex-direction: column; gap: 0.5rem; } .vendorCard>a>h2 { color: var(--text-main, #1E293B); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vendorCard>a>p { color: var(--brand-primary-main, #EC6C83); } .vendorCard>a>address { color: var(--text-secondary, #334155); display: flex; flex-direction: row; align-items: center; width: 100%; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vendorCard>a>address::before { content: '\e918'; font-family: 'Farhang'; font-size: 1rem; width: 1rem; height: 1rem; display: flex; align-items: center; stroke: var(--text-teriary, #64758B); margin-right: 0.25rem; } .vendorCard>a>address::after { content: '\e911'; font-family: 'Farhang'; font-size: 1rem; width: 1rem; height: 1rem; display: flex; align-items: center; stroke: var(--text-teriary, #64758B); margin-right: 1rem; opacity: 0; position: absolute; right: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .vendorCard>a:hover>address::after { margin-right: 0rem; opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .vendorCard { height: calc(var(--sizeli) + 5rem) !important; margin-bottom: 1rem; } .vendorCard>a { padding: calc(var(--sizeli) + 0.5rem) 0.5rem 0.5rem; gap: 0.25rem; position: absolute; top: 0; left: 0; } .vendorCard>ol { display: none; } .vendorCard>a>address::before { font-size: 0.75rem; width: 0.75rem; height: 0.75rem; } .vendorCard>a>address::after { content: unset; } } div.priceSlider { display: flex; flex-direction: row; flex-wrap: wrap; row-gap: 1.5rem; column-gap: 1rem; } div.priceSlider>.myInput { width: calc(50% - 0.5rem); } div.priceSlider>h4{ color: var(--text-main, #1E293B); } div.priceSlider>span { display: flex; flex-direction: row; align-items: center; gap: 1rem; width: 100%; } div.priceSlider>span::before { content: attr(start) "\00a0 " attr(unit); color: var(--text-teriary, #64758B); font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 700; line-height: normal; } div.priceSlider>span::after { content: attr(end) "\00a0 " attr(unit); color: var(--text-teriary, #64758B); font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 700; line-height: normal; } div.priceSlider>span>span { border-radius: 1rem; background: var(--surface-dark, #F4F4F5); height: 0.5rem; align-self: stretch; flex: 2; margin: auto; position: relative; } div.priceSlider>span>span::after { content: ''; width: calc((((100 / (var(--max) - var(--min))) * (var(--end) - var(--start))) * 1%) - ((((100 / (var(--max) - var(--min))) * (var(--end) - var(--start))) / 100) * 1rem)); height: 0.5rem; border-radius: 1rem; background: var(--brand-secondary-main, #253041); position: absolute; top: 0; left: calc(((((100 / (var(--max) - var(--min))) * (var(--start) - var(--min)))) * 1%) - (((((100 / (var(--max) - var(--min))) * (var(--start) - var(--min)))) / 100) * 1rem) + 0.5rem); } div.priceSlider>span>span>button { width: 1rem; height: 1rem; border-radius: 0.25rem; border: 1px solid var(--text-contrast, #FFFDFE); background: var(--text-main, #1E293B); box-shadow: 0px 2px 12px 0px rgba(99, 98, 101, 0.19); z-index: 1; position: absolute; top: -0.25rem; left: calc(((((100 / (var(--max) - var(--min))) * (var(--start) - var(--min)))) * 1%) - (((((100 / (var(--max) - var(--min))) * (var(--start) - var(--min)))) / 100) * 1rem)); } div.priceSlider>span>span>button.end { left: calc(((((100 / (var(--max) - var(--min))) * (var(--end) - var(--min)))) * 1%) - (((((100 / (var(--max) - var(--min))) * (var(--end) - var(--min)))) / 100) * 1rem)); } section.ads { /* width: 100%; */ display: flex; padding: 1.5rem 0rem; align-items: flex-start; gap: 3rem; align-self: stretch; box-sizing: border-box; flex: 1; } section.ads>a { display: flex; height: 18.5rem; padding: 0; justify-content: center; align-items: center; flex: 1 0 0; border-radius: 0.25rem; border: 1px solid var(--border-main, #CBD5E1); background: var(--brand-secondary-paler, #F1F5F9); box-sizing: border-box; text-decoration: none; color: var(--brand-secondary-light, #475770); font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 700; line-height: normal; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { section.ads { /* flex-direction: column; */ padding: 0rem 1rem; gap: 2rem; flex-wrap: wrap; } section.ads>a { width: 100%; height: 10.125rem; aspect-ratio: 16 / 9; } } .adsCard{ background-color: var(--surface-dark, #F4F4F5) !important; width: 100% !important; aspect-ratio: 1 / 1 !important; } .relatedContent { display: none; } .relatedContent:has(.slider ul>li) { display: flex; } .siteFooter { width: 100٪; box-sizing: border-box; background: var(--surface-main, #FAFAFA); } .siteFooter>div { display: flex; width: 100٪; padding: 3rem 3rem 1.5rem 3rem; flex-direction: column; align-items: flex-start; gap: 1.5rem; box-sizing: border-box; } .siteFooter .top, .siteFooter .bottom { display: flex; justify-content: space-between; align-self: stretch; } .siteFooter .top>hr { display: none; } .siteFooter .logo { display: flex; flex-direction: column; align-items: flex-start; } .siteFooter .logo>img { width: 12rem; } .siteFooter .links { display: flex; flex-direction: row; gap: 3rem; } .siteFooter .links span { display: flex; height: 2.75rem; padding: 0.25rem 0rem; align-items: center; gap: 0.5rem; color: var(--text-main, #1E293B); } .siteFooter .email { max-width: 18.5rem; } .siteFooter .email>span { margin-bottom: 2rem; display: block; } .siteFooter .email>.myInput { margin-bottom: 0.5rem; } .siteFooter .logo>p { color: var(--text-teriary, #64758B); margin-top: 0.5rem; } .siteFooter .links a { display: flex; height: 2.75rem; align-items: center; color: var(--text-secondary, #334155); text-decoration: none; } .siteFooter .bottom>p { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.81rem; color: var(--text-teriary, #64758B); } .siteFooter .bottom>p::before { content: '\e901'; font-family: 'Farhang'; } .siteFooter .social { display: flex; align-items: flex-start; gap: 1rem; flex-direction: row; flex-grow: 1; } .siteFooter .social>a { display: flex; width: 2.75rem; height: 2.75rem; padding: 0.625rem; justify-content: center; align-items: center; border-radius: 2rem; background: var(--brand-primary-paler, #FFF3F5); color: var(--brand-primary-main, #EC6C83); text-decoration: none; } .siteFooter .social>a::after { font-family: 'Farhang'; font-weight: normal; font-size: 2rem; } .siteFooter .social>a.instagram::after { content: '\e903'; } .siteFooter .social>a.facebook::after { content: '\e902'; } .siteFooter .social>a.pinterest::after { content: '\e905'; } .siteFooter .social>a.linkedin::after { content: '\e904'; } .siteFooter hr { width: 100%; height: 0.0625rem; background: var(--border-light, #F1F5F9); padding: 0; margin: 0; border: 0; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .siteFooter>div { padding: 1.5rem 1rem; gap: 1rem; } .siteFooter .top, .siteFooter .bottom { flex-direction: column; } .siteFooter .top>hr { width: 100%; height: 0.0625rem; background: var(--border-light, #F1F5F9); padding: 0; margin: 0; border: 0; display: initial; } .siteFooter .top { gap: 1rem; align-items: center; } .siteFooter .logo { width: 11.875rem; align-items: center; } .siteFooter .logo>img { width: 100%; } .siteFooter .links { gap: unset; flex-wrap: wrap; } .siteFooter .links>div { width: calc(50% - 0.5rem); } .siteFooter .links>div:nth-child(2n) { margin-right: 1rem; } .siteFooter .links>div:nth-child(1) { margin-bottom: 1rem; } .siteFooter .email { padding: 1.5rem 0; width: 100%; } .siteFooter .bottom { gap: 1rem; align-items: center; } .siteFooter .bottom>p { margin-left: 0; } } .listItem>li>a { display: flex; height: 2.75rem; padding: 0.25rem 1rem 0.25rem 0; align-items: center; gap: 0.5rem; flex-shrink: 0; box-sizing: border-box; align-items: center; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .listItem>li>a { width: 100%; } .listItem>li li>a { padding: 0.25rem 1rem 0.25rem 3.5rem; } .listItem>li>a.iconLeft::before { content: attr(iconcodeleft); font-family: 'Farhang'; font-weight: normal; font-size: 1.25rem; width: 1.25rem; height: 1.25rem; flex-shrink: 0; display: flex; align-items: center; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .listItem>li>a.iconRight::after { content: attr(iconcoderight); font-family: 'Farhang'; font-weight: normal; font-size: 1.25rem; width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .listItem>li:hover>a, .listItem>li:hover>a.iconLeft::before, .listItem>li:hover>a.iconRight::after { color: var(--brand-primary-main, #EC6C83); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .listItemP { display: flex; height: 2.75rem; padding: 0.25rem 1rem 0.25rem 0; align-items: center; gap: 0.5rem; flex-shrink: 0; box-sizing: border-box; align-items: center; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .listItemP { width: 100%; } /* .listItemP { padding: 0.25rem 1rem 0.25rem 3.5rem; } */ .listItemP.iconLeft::before { content: attr(iconcodeleft); font-family: 'Farhang'; font-weight: normal; font-size: 1.25rem; width: 1.25rem; height: 1.25rem; flex-shrink: 0; display: flex; align-items: center; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .listItemP.iconRight::after { content: attr(iconcoderight); font-family: 'Farhang'; font-weight: normal; font-size: 1.25rem; width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } /* .listItemP:hover, .listItemP.iconLeft:hover::before, .listItemP.iconRight:hover::after { color: var(--brand-primary-main, #EC6C83); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } */ .myChip { display: inline-flex; height: 2.5rem; padding: 0rem 0.5rem; align-items: center; gap: 0.25rem; flex-shrink: 0; border-radius: 0.25rem; font-family: 'Mulish'; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; text-decoration: none; cursor: default; justify-content: center; } .myChip.iconLeft::before, .myChip.iconRight::after { content: attr(iconcodeleft); font-family: 'Farhang'; font-weight: normal; font-size: 1.25rem; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myChip.iconRight::after { content: attr(iconcoderight); } .myChip.neutral { border: 1px solid var(--border-main, #CBD5E1); background-color: transparent; color: var(--text-secondary, #334155); } .myChip.neutral:hover { border: 1px solid var(--border-dark, #64758B); background-color: transparent; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myChip.neutral.selected { border: 1px solid #CBD5E100; background: var(--brand-secondary-light, #475770); color: var(--text-contrast, #FFFDFE); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myChip.brand { border: 1px solid var(--brand-primary-light, #F3A4B2); background-color: transparent; color: var(--brand-primary-light, #F3A4B2); } .myChip.brand:hover { border: 1px solid var(--brand-primary-main, #EC6C83); background-color: transparent; color: var(--brand-primary-hover, #EA5A74); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myChip.brand.selected { border: 1px solid #f3a4b300; background: var(--brand-primary-light, #F3A4B2); color: var(--text-contrast, #FFFDFE); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .blogCard { display: flex; flex-direction: column; gap: 0rem; padding: 0; box-sizing: border-box; background: var(--surface-light, #FDFEFF); backdrop-filter: blur(8px); position: relative; cursor: pointer; margin-bottom: 0.5rem; } .blogCard.type2 { border-radius: 0.25rem; border: 1px solid var(--border-light, #F1F5F9); background: var(--surface-main, #FAFAFA); } .blogCard:nth-last-child(1) { margin-right: 0; } .blogCard>a { text-decoration: none; width: 100%; } .blogCard div:nth-child(1) { overflow: hidden; width: 100%; aspect-ratio: 3 / 2; position: relative; } .blogCard div:nth-child(1)::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.30) 100%); z-index: 1; } .blogCard div>img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .blogCard:hover div>img { scale: 1.1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .blogCard div:nth-child(2) { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .blogCard .title { color: var(--brand-primary-main, #EC6C83); font-family: Mulish; font-size: 0.75rem; font-style: normal; font-weight: 500; line-height: normal; } .blogCard p { color: var(--text-main, #1E293B); font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 700; line-height: normal; height: 2.7rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .blogCard .author { color: var(--text-teriary, #64758B); font-family: Mulish; font-size: 0.75rem; font-style: normal; font-weight: 500; line-height: normal; display: flex; flex-direction: row; gap: 0.25rem; } .blogCard .author::before { content: 'By'; font-family: Mulish; font-size: 0.75rem; font-style: normal; font-weight: 500; line-height: normal; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) {} div.myNotification { display: none; flex-direction: row; padding: 0 !important; align-items: center; gap: 0.5rem; flex-shrink: 0; border-radius: 0rem 0.25rem 0.25rem 0rem; max-width: 0%; height: 0rem; min-height: 0rem; border-left: 4px solid; overflow: hidden; box-sizing: border-box; z-index: 1000; } div.myNotification.bottomleft{ position: fixed; top: unset; right: unset; left: 2rem; bottom: 2rem; } div.myNotification.bottomright{ position: fixed; top: unset; left: unset; right: 2rem; bottom: 2rem; } div.myNotification.topleft{ position: fixed; bottom: unset; right: unset; left: 2rem; top: 2rem; } div.myNotification.topright{ position: fixed; bottom: unset; left: unset; right: 2rem; top: 2rem; } div.myNotification>* { opacity: 0; } div.myNotification.neutral { border-color: var(--brand-secondary-light, #475770); background: var(--brand-secondary-paler, #F1F5F9); } div.myNotification.info { border-color: var(--assistive-info-dark, #024FC4); background: var(--assistive-info-pale, #DAE8FF); } div.myNotification.warning { border-color: var(--assistive-warning-dark, #A16207); background: var(--assistive-warning-pale, #FEF9C3); } div.myNotification.error { border-color: var(--assistive-error-dark, #7F1C1D); background: var(--assistive-error-pale, #FEE2E1); } div.myNotification.success { border-color: var(--assistive-success-dark, #14532D); background: var(--assistive-success-pale, #DCFCE7); } div.myNotification.show { display: inline-flex; max-width: 50%; padding: 0 0 0 1rem !important; min-height: 2.75rem; height: 2.75rem; animation: notifShow 1s ease 0s 1 forwards; } @keyframes notifShow { 0% { display: none; max-width: 0%; padding: 0 !important; min-height: 0rem; height: 0rem; } 1% { display: inline-flex; max-width: 0%; padding: 0 !important; min-height: 0rem; height: 0rem; } 20% { max-width: 4px; padding: 0 !important; min-height: 2.75rem; height: 2.75rem; } 100% { max-width: 50%; padding: 0 0 0 1rem !important; min-height: 2.75rem; height: 2.75rem; } } div.myNotification>span { flex: 1; display: flex; width: 21.4375rem; flex-direction: column; justify-content: center; padding: 0.5rem 0; color: var(--text-main, #1E293B); /* desktop/body2 */ font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } div.myNotification>.lastBtn::before { color: var(--text-secondary, #334155) !important; } div.myNotification>* { opacity: 0; } div.myNotification.show>* { opacity: 1; animation: notifShow2 1.3s ease 0s 1 forwards; } @keyframes notifShow2 { 0% { opacity: 0; } 85% { opacity: 0; } 100% { opacity: 1; } } div.myNotification.show.hide { opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } div.myNotification.show.hide>* { opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { div.myNotification { gap: 0rem; } div.myNotification.show { width: calc(100% - 2rem); padding: 0 0 0 1rem !important; } div.myNotification.bottomleft{ top: unset; right: unset; left: 1rem; bottom: 2rem; } div.myNotification.bottomright{ top: unset; left: unset; right: 1rem; bottom: 2rem; } div.myNotification.topleft{ bottom: unset; right: unset; left: 1rem; top: 2rem; } div.myNotification.topright{ bottom: unset; left: unset; right: 1rem; top: 2rem; } @keyframes notifShow { 0% { display: none; max-width: 0%; padding: 0 0 0 0rem !important; min-height: 0rem; height: 0rem; } 1% { display: inline-flex; max-width: 0%; padding: 0 0 0 0rem !important; min-height: 0rem; height: 0rem; } 20% { max-width: 4px; padding: 0 0 0 0rem !important; min-height: 2.75rem; height: 2.75rem; } 100% { max-width: 100%; padding: 0 0 0 1rem !important; min-height: 2.75rem; height: 2.75rem; } } }