/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ @layer properties; :root, :host { --form-py: calc(var(--spacing) * 2); --form-px: calc(var(--spacing) * 3); --form-radius: var(--radius-lg); --form-stroke: var(--color-slate-400); --form-bg: #fff; --form-color: currentcolor; --form-active-color: var(--color-primary); --select-icon: url('data:image/svg+xml,'); --select-icon-size: 1.25em; --select-icon-offset: 0.8rem; --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-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-300: oklch(90.5% 0.182 98.111); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-300: oklch(87.1% 0.15 154.449); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-800: oklch(44.8% 0.119 151.328); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-sky-600: oklch(58.8% 0.158 241.966); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-purple-300: oklch(82.7% 0.119 306.383); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-950: oklch(12.9% 0.042 264.695); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --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-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-neutral-100: oklch(97% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --breakpoint-lg: 1024px; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --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-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); --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); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --blur-sm: 8px; --aspect-video: 16 / 9; --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); --color-container-lighter: var(--color-white); --color-container: var(--color-gray-50); --color-container-darker: var(--color-gray-100); --color-primary-lighter: oklch(0.6591 0.2212 36.74); --color-primary: oklch(0.6591 0.2212 36.74); --color-primary-darker: oklch(0.6591 0.2212 36.74); --color-secondary-lighter: oklch(72% 0.2 150); --color-secondary: oklch(0.6591 0.2212 36.74); --color-secondary-darker: oklch(39% 0.1 153); --color-on-primary: #fff; --color-black-h1: #1A1918; --color-black-h2: #171715; --color-gray-h1: #F3F3F3; --color-gray-h2: #F5F5F5; --color-gray-h3: #606060; --color-gray-h4: #F5F5F5; --color-orange-h1: #FB4B02; --color-orange-h2: #FFECE4; --color-white-h1: rgba(255, 255, 255, 0.16); --font-dmsans: DM Sans, sans-serif; --font-poppins: Poppins, sans-serif; --font-bebasneue: Bebas Neue, sans-serif; --font-lato: Lato, sans-serif; --text-10px: 10px; --text-13px: 13px; --text-28px: 28px; --text-42px: 42px; --spacing-5px: 5px; --spacing-7px: 7px; --spacing-22px: 22px; --spacing-34px: 34px; --spacing-35px: 35px; --spacing-29px: 23px; --spacing-50px: 50px; --spacing-54px: 54px; --spacing-55px: 55px; --spacing-60px: 60px; --spacing-120px: 120px; --spacing-140px: 140px; --spacing-150px: 150px; --spacing-174px: 174px; --spacing-177px: 177px; --spacing-560px: 560px; --spacing-690px: 690px; --spacing-705px: 705px; --spacing-224px: 224px; --spacing-323px: 323px; --spacing-1248px: 1248px; --spacing-1400px: 1400px; --spacing-30\%: 30%; --spacing-40\%: 40%; --spacing-47\%: 47%; --spacing-50\%: 50%; --spacing-90\%: 90%; --radius-20px: 20px; --radius-100px: 100px; --color-fg: var(--color-slate-950); --color-fg-secondary: var(--color-slate-600); --color-surface: var(--color-white); } @layer base { :is( input:where(:not([type])), [type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], textarea, select, .form-input, .form-textarea, .form-select, .form-multiselect ) { appearance: none; padding-block: var(--form-py); padding-inline: var(--form-px); border-radius: var(--form-radius); border-width: 1px; border-color: var(--form-stroke); background-color: var(--form-bg); color: var(--form-color); --outline-size: 1px; --outline-offset: 0px; &:focus { border-color: var(--form-active-color); outline-color: var(--form-active-color); } } :is(select:where(:not([size]:not([size="1"]), [multiple])), .form-select) { --_icon-position: right; padding-inline-end: calc( var(--select-icon-size) + var(--select-icon-offset) + 0.5ch ); background: var(--select-icon) var(--form-bg) var(--_icon-position) var(--select-icon-offset) center/var(--select-icon-size) no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; &:dir(rtl) { --_icon-position: left; } } :is([type="checkbox"], [type="radio"], .form-checkbox, .form-radio) { appearance: none; flex-shrink: 0; display: inline-block; block-size: calc(var(--spacing) * 4); inline-size: calc(var(--spacing) * 4); padding: 0; border-width: 2px; border-color: var(--form-stroke); background-color: var(--form-bg); color: var(--form-color); background-origin: border-box; vertical-align: middle; user-select: none; print-color-adjust: exact; block-size: calc(var(--spacing) * 4.5); inline-size: calc(var(--spacing) * 4.5); &:focus { outline-color: var(--form-active-color); } &:focus, &:checked { border-color: var(--form-active-color); } } :is([type="checkbox"], .form-checkbox) { &:checked, &:indeterminate { border-color: transparent; background: var(--form-active-color, currentColor) center/contain no-repeat; } &:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E"); } &:checked { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E"); } } :is([type="radio"], .form-radio) { border-radius: 50%; &:checked { border-color: transparent; background: var(--form-active-color, currentColor) center/contain no-repeat; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E"); } } } @layer theme, base, components, utilities; @layer theme; @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } 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; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, 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; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::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; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { .pointer-events-none { pointer-events: none; } .\!visible { visibility: visible !important; } .collapse { visibility: collapse; } .invisible { visibility: hidden; } .visible { visibility: visible; } .backdrop { position: fixed; inset: 0; background-color: var(--backdrop, hsl(0 0 0 / 20%)); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } .not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip-path: none; white-space: normal; } .\!static { position: static !important; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .inset-0 { inset: calc(var(--spacing) * 0); } .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } .inset-x-4 { inset-inline: calc(var(--spacing) * 4); } .inset-x-6 { inset-inline: calc(var(--spacing) * 6); } .inset-y-0 { inset-block: calc(var(--spacing) * 0); } .-top-1\.5 { top: calc(var(--spacing) * -1.5); } .-top-2 { top: calc(var(--spacing) * -2); } .-top-3 { top: calc(var(--spacing) * -3); } .-top-7px { top: calc(var(--spacing-7px) * -1); } .-top-\[160px\] { top: calc(160px * -1); } .-top-px { top: -1px; } .top-0 { top: calc(var(--spacing) * 0); } .top-1 { top: calc(var(--spacing) * 1); } .top-1\/2 { top: calc(1/2 * 100%); } .top-2 { top: calc(var(--spacing) * 2); } .top-2\.5 { top: calc(var(--spacing) * 2.5); } .top-2\/4 { top: calc(2/4 * 100%); } .top-3 { top: calc(var(--spacing) * 3); } .top-4 { top: calc(var(--spacing) * 4); } .top-5 { top: calc(var(--spacing) * 5); } .top-6 { top: calc(var(--spacing) * 6); } .top-7 { top: calc(var(--spacing) * 7); } .top-9 { top: calc(var(--spacing) * 9); } .top-10 { top: calc(var(--spacing) * 10); } .top-12 { top: calc(var(--spacing) * 12); } .top-\[-15px\] { top: -15px; } .top-\[-45px\] { top: -45px; } .top-\[-116px\] { top: -116px; } .top-full { top: 100%; } .\!right-4 { right: calc(var(--spacing) * 4) !important; } .-right-1\.5 { right: calc(var(--spacing) * -1.5); } .-right-2 { right: calc(var(--spacing) * -2); } .-right-4 { right: calc(var(--spacing) * -4); } .right-0 { right: calc(var(--spacing) * 0); } .right-1 { right: calc(var(--spacing) * 1); } .right-1\.5 { right: calc(var(--spacing) * 1.5); } .right-2 { right: calc(var(--spacing) * 2); } .right-3 { right: calc(var(--spacing) * 3); } .right-4 { right: calc(var(--spacing) * 4); } .right-5 { right: calc(var(--spacing) * 5); } .right-6 { right: calc(var(--spacing) * 6); } .right-8 { right: calc(var(--spacing) * 8); } .right-9 { right: calc(var(--spacing) * 9); } .right-10 { right: calc(var(--spacing) * 10); } .right-\[-21px\] { right: -21px; } .right-\[0\] { right: 0; } .right-\[50\%\] { right: 50%; } .-bottom-4 { bottom: calc(var(--spacing) * -4); } .-bottom-14 { bottom: calc(var(--spacing) * -14); } .bottom-0 { bottom: calc(var(--spacing) * 0); } .bottom-1 { bottom: calc(var(--spacing) * 1); } .bottom-2 { bottom: calc(var(--spacing) * 2); } .bottom-3 { bottom: calc(var(--spacing) * 3); } .bottom-4 { bottom: calc(var(--spacing) * 4); } .bottom-6 { bottom: calc(var(--spacing) * 6); } .bottom-\[30\%\] { bottom: 30%; } .bottom-full { bottom: 100%; } .\!left-4 { left: calc(var(--spacing) * 4) !important; } .-left-2 { left: calc(var(--spacing) * -2); } .left-0 { left: calc(var(--spacing) * 0); } .left-1 { left: calc(var(--spacing) * 1); } .left-1\/2 { left: calc(1/2 * 100%); } .left-2 { left: calc(var(--spacing) * 2); } .left-2\/4 { left: calc(2/4 * 100%); } .left-4 { left: calc(var(--spacing) * 4); } .left-5 { left: calc(var(--spacing) * 5); } .left-6 { left: calc(var(--spacing) * 6); } .left-8 { left: calc(var(--spacing) * 8); } .left-10 { left: calc(var(--spacing) * 10); } .left-28 { left: calc(var(--spacing) * 28); } .left-\[50\%\] { left: 50%; } .left-full { left: 100%; } .isolate { isolation: isolate; } .-z-10 { z-index: calc(10 * -1); } .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-4 { z-index: 4; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-\[-1\] { z-index: -1; } .z-\[31\] { z-index: 31; } .z-\[100\] { z-index: 100; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-first { order: -9999; } .order-last { order: 9999; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-full { grid-column: 1 / -1; } .float-end { float: inline-end; } .float-left { float: left; } .float-none { float: none; } .clear-both { clear: both; } .container { width: 100%; @media (width >= 500px) { max-width: 500px; } @media (width >= 640px) { max-width: 640px; } @media (width >= 640px) { max-width: 640px; } @media (width >= 768px) { max-width: 768px; } @media (width >= 768px) { max-width: 768px; } @media (width >= 1024px) { max-width: 1024px; } @media (width >= 1024px) { max-width: 1024px; } @media (width >= 1280px) { max-width: 1280px; } @media (width >= 1688px) { max-width: 1688px; } } .\!m-0 { margin: calc(var(--spacing) * 0) !important; } .-m-2 { margin: calc(var(--spacing) * -2); } .-m-4 { margin: calc(var(--spacing) * -4); } .m-0 { margin: calc(var(--spacing) * 0); } .m-1 { margin: calc(var(--spacing) * 1); } .m-2 { margin: calc(var(--spacing) * 2); } .m-4 { margin: calc(var(--spacing) * 4); } .m-5 { margin: calc(var(--spacing) * 5); } .m-auto { margin: auto; } .prose { --text-flow: 1em 1rem; --separator-flow: 2.5em; --list-flow: 0.5em; --h-color: initial; --h-family: initial; --h-size: 1.125em; --h-weight: 600; --h-line: 1.1; --h1-size: 3em; --h2-size: 2em; --h3-size: 1.625em; --h4-size: 1.375em; --marker-color: var(--color-primary); --link-color: var(--color-primary); --link-weight: 500; --blockquote-color: var(--color-primary); --table-py: calc(var(--spacing) * 3); --table-px: calc(var(--spacing) * 2); --table-stroke: var(--color-gray-400); --table-bg: canvas; --table-color: canvastext; :where(h1, h2, h3, h4, h5, h6, p, dl, ul, ol, pre, hgroup) { margin-block: var(--text-flow); } :where(blockquote, figure, hr) { margin-block: var(--separator-flow); margin-inline: 0; } :where([class~="lead"]) { font-size: 1.25em; } :where(h1, h2, h3, h4, h5, h6) { color: var(--h-color); font-family: var(--h-family); font-size: var(--h-size); font-weight: var(--h-weight); line-height: var(--h-line); text-wrap: balance; } :where(h1) { --h-size: var(--h1-size); } :where(h2) { --h-size: var(--h2-size); } :where(h3) { --h-size: var(--h3-size); } :where(h4) { --h-size: var(--h4-size); } ::marker { color: var(--marker-color); } :where(ul, ol) { list-style: revert; padding-inline-start: 2em; } :where(ol[type="a"]) { list-style-type: lower-alpha; } :where(ol[type="i"]) { list-style-type: lower-roman; } :where(ol[type="1"]) { list-style-type: decimal; } :where(blockquote) { border-inline-start: 4px solid var(--blockquote-color); padding-inline-start: 1.5em; padding-block: 0.25em; } :where(:any-link) { color: var(--link-color); font-weight: var(--link-weight); &:hover { text-decoration: underline; } } :where(table) { border-collapse: separate; border-spacing: 0; border-color: var(--table-stroke); } :where(thead, tbody, tfoot, tr, th, td) { border-color: inherit; text-align: inherit; } :where(th, td) { padding-block: var(--table-py); padding-inline: var(--table-px); background: var(--table-bg); color: var(--table-color); } :where(tr + tr :is(th, td)) { border-block-start-width: 1px; } :where(thead tr:last-child :is(th, td)) { border-block-end-width: 2px; } :where(tfoot tr:first-child :is(th, td)) { border-block-start-width: 2px; } :where(table:not(:has(.table-wrapper, [class*="overflow-"]))) { word-break: break-all; } > :where(:first-child) { margin-block-start: 0; } > :where(:last-child) { margin-block-end: 0; } } .container { margin-inline: auto; padding-inline: calc(var(--spacing) * 6); } .\!mx-4 { margin-inline: calc(var(--spacing) * 4) !important; } .\!mx-auto { margin-inline: auto !important; } .-mx-1 { margin-inline: calc(var(--spacing) * -1); } .-mx-3 { margin-inline: calc(var(--spacing) * -3); } .-mx-4 { margin-inline: calc(var(--spacing) * -4); } .mx-0 { margin-inline: calc(var(--spacing) * 0); } .mx-0\.5 { margin-inline: calc(var(--spacing) * 0.5); } .mx-1 { margin-inline: calc(var(--spacing) * 1); } .mx-2 { margin-inline: calc(var(--spacing) * 2); } .mx-4 { margin-inline: calc(var(--spacing) * 4); } .mx-5px { margin-inline: var(--spacing-5px); } .mx-6 { margin-inline: calc(var(--spacing) * 6); } .mx-auto { margin-inline: auto; } .mx-px { margin-inline: 1px; } .my-0 { margin-block: calc(var(--spacing) * 0); } .my-1 { margin-block: calc(var(--spacing) * 1); } .my-2 { margin-block: calc(var(--spacing) * 2); } .my-2\.5 { margin-block: calc(var(--spacing) * 2.5); } .my-3 { margin-block: calc(var(--spacing) * 3); } .my-4 { margin-block: calc(var(--spacing) * 4); } .my-6 { margin-block: calc(var(--spacing) * 6); } .my-7 { margin-block: calc(var(--spacing) * 7); } .my-8 { margin-block: calc(var(--spacing) * 8); } .my-10 { margin-block: calc(var(--spacing) * 10); } .my-12 { margin-block: calc(var(--spacing) * 12); } .my-20 { margin-block: calc(var(--spacing) * 20); } .ms-0 { margin-inline-start: calc(var(--spacing) * 0); } .ms-7 { margin-inline-start: calc(var(--spacing) * 7); } .ms-8 { margin-inline-start: calc(var(--spacing) * 8); } .-me-4 { margin-inline-end: calc(var(--spacing) * -4); } .me-0 { margin-inline-end: calc(var(--spacing) * 0); } .me-auto { margin-inline-end: auto; } .\!mt-0 { margin-top: calc(var(--spacing) * 0) !important; } .\!mt-4 { margin-top: calc(var(--spacing) * 4) !important; } .\!mt-5 { margin-top: calc(var(--spacing) * 5) !important; } .\!mt-6 { margin-top: calc(var(--spacing) * 6) !important; } .-mt-0\.5 { margin-top: calc(var(--spacing) * -0.5); } .-mt-1 { margin-top: calc(var(--spacing) * -1); } .-mt-1\.5 { margin-top: calc(var(--spacing) * -1.5); } .-mt-2 { margin-top: calc(var(--spacing) * -2); } .-mt-2\.5 { margin-top: calc(var(--spacing) * -2.5); } .-mt-6 { margin-top: calc(var(--spacing) * -6); } .-mt-10 { margin-top: calc(var(--spacing) * -10); } .mt-0 { margin-top: calc(var(--spacing) * 0); } .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-2\.5 { margin-top: calc(var(--spacing) * 2.5); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-5 { margin-top: calc(var(--spacing) * 5); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-7 { margin-top: calc(var(--spacing) * 7); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mt-10 { margin-top: calc(var(--spacing) * 10); } .mt-12 { margin-top: calc(var(--spacing) * 12); } .mt-16 { margin-top: calc(var(--spacing) * 16); } .mt-20 { margin-top: calc(var(--spacing) * 20); } .mt-24 { margin-top: calc(var(--spacing) * 24); } .mt-28 { margin-top: calc(var(--spacing) * 28); } .mt-35px { margin-top: var(--spacing-35px); } .mt-auto { margin-top: auto; } .-mr-1 { margin-right: calc(var(--spacing) * -1); } .-mr-4 { margin-right: calc(var(--spacing) * -4); } .mr-0 { margin-right: calc(var(--spacing) * 0); } .mr-1 { margin-right: calc(var(--spacing) * 1); } .mr-2 { margin-right: calc(var(--spacing) * 2); } .mr-2\.5 { margin-right: calc(var(--spacing) * 2.5); } .mr-3 { margin-right: calc(var(--spacing) * 3); } .mr-4 { margin-right: calc(var(--spacing) * 4); } .mr-5 { margin-right: calc(var(--spacing) * 5); } .mr-7 { margin-right: calc(var(--spacing) * 7); } .mr-8 { margin-right: calc(var(--spacing) * 8); } .mr-10 { margin-right: calc(var(--spacing) * 10); } .mr-auto { margin-right: auto; } .\!mb-0 { margin-bottom: calc(var(--spacing) * 0) !important; } .\!mb-6 { margin-bottom: calc(var(--spacing) * 6) !important; } .-mb-1 { margin-bottom: calc(var(--spacing) * -1); } .-mb-4 { margin-bottom: calc(var(--spacing) * -4); } .mb-0 { margin-bottom: calc(var(--spacing) * 0); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-2\.5 { margin-bottom: calc(var(--spacing) * 2.5); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-3\.5 { margin-bottom: calc(var(--spacing) * 3.5); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .mb-7 { margin-bottom: calc(var(--spacing) * 7); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .mb-10 { margin-bottom: calc(var(--spacing) * 10); } .mb-12 { margin-bottom: calc(var(--spacing) * 12); } .mb-16 { margin-bottom: calc(var(--spacing) * 16); } .mb-20 { margin-bottom: calc(var(--spacing) * 20); } .mb-22px { margin-bottom: var(--spacing-22px); } .mb-24 { margin-bottom: calc(var(--spacing) * 24); } .mb-28 { margin-bottom: calc(var(--spacing) * 28); } .mb-29px { margin-bottom: var(--spacing-29px); } .mb-\[15px\] { margin-bottom: 15px; } .mb-\[40px\] { margin-bottom: 40px; } .mb-\[61px\] { margin-bottom: 61px; } .-ml-2 { margin-left: calc(var(--spacing) * -2); } .-ml-4 { margin-left: calc(var(--spacing) * -4); } .-ml-px { margin-left: -1px; } .ml-0\.5 { margin-left: calc(var(--spacing) * 0.5); } .ml-1 { margin-left: calc(var(--spacing) * 1); } .ml-1\.5 { margin-left: calc(var(--spacing) * 1.5); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-3 { margin-left: calc(var(--spacing) * 3); } .ml-4 { margin-left: calc(var(--spacing) * 4); } .ml-5 { margin-left: calc(var(--spacing) * 5); } .ml-6 { margin-left: calc(var(--spacing) * 6); } .ml-10 { margin-left: calc(var(--spacing) * 10); } .ml-16 { margin-left: calc(var(--spacing) * 16); } .ml-\[97px\] { margin-left: 97px; } .ml-auto { margin-left: auto; } .box-border { box-sizing: border-box; } .box-content { box-sizing: content-box; } .snap { scroll-snap-type: x var(--tw-scroll-snap-strictness); --tw-scroll-snap-strictness: mandatory; scroll-behavior: smooth; &>* { scroll-snap-align: start; } scrollbar-width: none; &::-webkit-scrollbar { display: none; } } .btn { --btn-stroke: #0000; --btn-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 10%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in srgb, var(--color-primary) 10%, #0000); } --btn-hover-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 20%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-hover-bg: color-mix(in srgb, var(--color-primary) 20%, #0000); } --btn-active-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 30%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-active-bg: color-mix(in srgb, var(--color-primary) 30%, #0000); } --btn-color: var(--color-fg); display: inline-flex; justify-content: center; align-items: center; gap: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 4); border-radius: var(--radius-lg); border-width: 2px; border-color: var(--btn-stroke); background-color: var(--btn-bg); color: var(--btn-color); font-weight: 500; user-select: none; vertical-align: middle; transition-property: color, background-color, border-color, outline-color; transition-timing-function: var(--default-transition-timing-function); transition-duration: var(--default-transition-duration); &:hover { border-color: var(--btn-hover-stroke, var(--btn-stroke)); background-color: var(--btn-hover-bg, var(--btn-bg)); color: var(--btn-hover-color, var(--btn-color)); text-decoration: none; } &:is(:active, .is-active, [aria-current="page"], [aria-current="true"]) { border-color: var(--btn-active-stroke, var(--btn-stroke)); background-color: var(--btn-active-bg, var(--btn-bg)); color: var(--btn-active-color, var(--btn-color)); } &:is(:disabled, [aria-disabled="true"]) { border-color: var(--btn-disabled-stroke, var(--color-gray-200)); background-color: var(--btn-disabled-bg, var(--color-gray-50)); color: var(--btn-disabled-color, var(--color-gray-500)); } } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .\!block { display: block !important; } .\!flex { display: flex !important; } .\!hidden { display: none !important; } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .flow-root { display: flow-root; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .list-none { &::-webkit-details-marker { display: none; } } .table { display: table; } .table-caption { display: table-caption; } .table-cell { display: table-cell; } .table-row { display: table-row; } .aspect-\[1\/1\] { aspect-ratio: 1/1; } .aspect-\[var$--gallery-ratio$\] { aspect-ratio: var(--gallery-ratio); } .aspect-square { aspect-ratio: 1 / 1; } .aspect-video { aspect-ratio: var(--aspect-video); } .size-full { width: 100%; height: 100%; } .\!h-10 { height: calc(var(--spacing) * 10) !important; } .h-0 { height: calc(var(--spacing) * 0); } .h-1 { height: calc(var(--spacing) * 1); } .h-1\.5 { height: calc(var(--spacing) * 1.5); } .h-2 { height: calc(var(--spacing) * 2); } .h-2\.5 { height: calc(var(--spacing) * 2.5); } .h-3 { height: calc(var(--spacing) * 3); } .h-3\.5 { height: calc(var(--spacing) * 3.5); } .h-4 { height: calc(var(--spacing) * 4); } .h-5 { height: calc(var(--spacing) * 5); } .h-5px { height: var(--spacing-5px); } .h-6 { height: calc(var(--spacing) * 6); } .h-7 { height: calc(var(--spacing) * 7); } .h-8 { height: calc(var(--spacing) * 8); } .h-9 { height: calc(var(--spacing) * 9); } .h-10 { height: calc(var(--spacing) * 10); } .h-11 { height: calc(var(--spacing) * 11); } .h-12 { height: calc(var(--spacing) * 12); } .h-14 { height: calc(var(--spacing) * 14); } .h-16 { height: calc(var(--spacing) * 16); } .h-20 { height: calc(var(--spacing) * 20); } .h-24 { height: calc(var(--spacing) * 24); } .h-28 { height: calc(var(--spacing) * 28); } .h-36 { height: calc(var(--spacing) * 36); } .h-44 { height: calc(var(--spacing) * 44); } .h-48 { height: calc(var(--spacing) * 48); } .h-50px { height: var(--spacing-50px); } .h-60 { height: calc(var(--spacing) * 60); } .h-80 { height: calc(var(--spacing) * 80); } .h-96 { height: calc(var(--spacing) * 96); } .h-120px { height: var(--spacing-120px); } .h-150px { height: var(--spacing-150px); } .h-174px { height: var(--spacing-174px); } .h-323px { height: var(--spacing-323px); } .h-\[2px\] { height: 2px; } .h-\[8px\] { height: 8px; } .h-\[44px\] { height: 44px; } .h-\[130px\] { height: 130px; } .h-\[150px\] { height: 150px; } .h-\[160px\] { height: 160px; } .h-\[170px\] { height: 170px; } .h-\[240px\] { height: 240px; } .h-\[300px\] { height: 300px; } .h-\[330px\] { height: 330px; } .h-\[382px\] { height: 382px; } .h-\[500px\] { height: 500px; } .h-\[calc$100\%-20px$\] { height: calc(100% - 20px); } .h-auto { height: auto; } .h-fit { height: fit-content; } .h-full { height: 100%; } .h-max { height: max-content; } .h-px { height: 1px; } .h-screen { height: 100vh; } .max-h-0 { max-height: calc(var(--spacing) * 0); } .max-h-12 { max-height: calc(var(--spacing) * 12); } .max-h-20 { max-height: calc(var(--spacing) * 20); } .max-h-48 { max-height: calc(var(--spacing) * 48); } .max-h-\[40vh\] { max-height: 40vh; } .max-h-\[44rem\] { max-height: 44rem; } .max-h-\[60px\] { max-height: 60px; } .max-h-\[75vh\] { max-height: 75vh; } .max-h-\[80vh\] { max-height: 80vh; } .max-h-\[90vh\] { max-height: 90vh; } .max-h-\[100vh\] { max-height: 100vh; } .max-h-\[500px\] { max-height: 500px; } .max-h-\[605px\] { max-height: 605px; } .max-h-\[1000px\] { max-height: 1000px; } .max-h-\[min$1024px\,\(100\%_-_2rem$\)\] { max-height: min(1024px, (100% - 2rem)); } .max-h-\[var$--ambrands-img-height$\] { max-height: var(--ambrands-img-height); } .max-h-full { max-height: 100%; } .max-h-screen { max-height: 100vh; } .\!min-h-\[37px\] { min-height: 37px !important; } .min-h-6 { min-height: calc(var(--spacing) * 6); } .min-h-10 { min-height: calc(var(--spacing) * 10); } .min-h-12 { min-height: calc(var(--spacing) * 12); } .min-h-14 { min-height: calc(var(--spacing) * 14); } .min-h-16 { min-height: calc(var(--spacing) * 16); } .min-h-20 { min-height: calc(var(--spacing) * 20); } .min-h-28 { min-height: calc(var(--spacing) * 28); } .min-h-32 { min-height: calc(var(--spacing) * 32); } .min-h-48 { min-height: calc(var(--spacing) * 48); } .min-h-64 { min-height: calc(var(--spacing) * 64); } .min-h-80 { min-height: calc(var(--spacing) * 80); } .min-h-\[20px\] { min-height: 20px; } .min-h-\[40px\] { min-height: 40px; } .min-h-\[48px\] { min-height: 48px; } .min-h-\[199px\] { min-height: 199px; } .min-h-full { min-height: 100%; } .\!w-10 { width: calc(var(--spacing) * 10) !important; } .\!w-full { width: 100% !important; } .w-0 { width: calc(var(--spacing) * 0); } .w-0\.5 { width: calc(var(--spacing) * 0.5); } .w-1 { width: calc(var(--spacing) * 1); } .w-1\.5 { width: calc(var(--spacing) * 1.5); } .w-1\/2 { width: calc(1/2 * 100%); } .w-1\/3 { width: calc(1/3 * 100%); } .w-1\/4 { width: calc(1/4 * 100%); } .w-2 { width: calc(var(--spacing) * 2); } .w-2\.5 { width: calc(var(--spacing) * 2.5); } .w-2\/5 { width: calc(2/5 * 100%); } .w-2\/12 { width: calc(2/12 * 100%); } .w-3 { width: calc(var(--spacing) * 3); } .w-3\.5 { width: calc(var(--spacing) * 3.5); } .w-3\/5 { width: calc(3/5 * 100%); } .w-3xs { width: var(--container-3xs); } .w-4 { width: calc(var(--spacing) * 4); } .w-4\/5 { width: calc(4/5 * 100%); } .w-4\/12 { width: calc(4/12 * 100%); } .w-5 { width: calc(var(--spacing) * 5); } .w-5\/12 { width: calc(5/12 * 100%); } .w-5px { width: var(--spacing-5px); } .w-6 { width: calc(var(--spacing) * 6); } .w-6\/12 { width: calc(6/12 * 100%); } .w-7 { width: calc(var(--spacing) * 7); } .w-7\/12 { width: calc(7/12 * 100%); } .w-8 { width: calc(var(--spacing) * 8); } .w-8\/12 { width: calc(8/12 * 100%); } .w-9 { width: calc(var(--spacing) * 9); } .w-10 { width: calc(var(--spacing) * 10); } .w-11 { width: calc(var(--spacing) * 11); } .w-12 { width: calc(var(--spacing) * 12); } .w-14 { width: calc(var(--spacing) * 14); } .w-16 { width: calc(var(--spacing) * 16); } .w-20 { width: calc(var(--spacing) * 20); } .w-22 { width: calc(var(--spacing) * 22); } .w-24 { width: calc(var(--spacing) * 24); } .w-28 { width: calc(var(--spacing) * 28); } .w-30\% { width: var(--spacing-30\%); } .w-32 { width: calc(var(--spacing) * 32); } .w-40 { width: calc(var(--spacing) * 40); } .w-44 { width: calc(var(--spacing) * 44); } .w-48 { width: calc(var(--spacing) * 48); } .w-56 { width: calc(var(--spacing) * 56); } .w-60 { width: calc(var(--spacing) * 60); } .w-64 { width: calc(var(--spacing) * 64); } .w-72 { width: calc(var(--spacing) * 72); } .w-90\% { width: var(--spacing-90\%); } .w-120px { width: var(--spacing-120px); } .w-140px { width: var(--spacing-140px); } .w-174px { width: var(--spacing-174px); } .w-\[25px\] { width: 25px; } .w-\[30\%\] { width: 30%; } .w-\[49\%\] { width: 49%; } .w-\[50px\] { width: 50px; } .w-\[70\%\] { width: 70%; } .w-\[70px\] { width: 70px; } .w-\[80\%\] { width: 80%; } .w-\[90\%\] { width: 90%; } .w-\[130px\] { width: 130px; } .w-\[150px\] { width: 150px; } .w-\[270px\] { width: 270px; } .w-\[480px\] { width: 480px; } .w-\[calc$\(100\%\/2$-8px\)\] { width: calc((100% / 2) - 8px); } .w-\[calc$\(100\%\/2$-12px\)\] { width: calc((100% / 2) - 12px); } .w-\[calc$\(100\%\/2$-20px\)\] { width: calc((100% / 2) - 20px); } .w-\[calc$\(100\%\/3$-12px\)\] { width: calc((100% / 3) - 12px); } .w-\[calc$\(100\%\/3$-20px\)\] { width: calc((100% / 3) - 20px); } .w-\[calc$\(100\%\/8$-16px\)\] { width: calc((100% / 8) - 16px); } .w-\[calc$100\%-288px$\] { width: calc(100% - 288px); } .w-\[var$--gallery-width$\] { width: var(--gallery-width); } .w-auto { width: auto; } .w-fit { width: fit-content; } .w-full { width: 100%; } .w-max { width: max-content; } .w-screen { width: 100vw; } .w-xl { width: var(--container-xl); } .max-w-2xl { max-width: var(--container-2xl); } .max-w-3xl { max-width: var(--container-3xl); } .max-w-4xl { max-width: var(--container-4xl); } .max-w-32 { max-width: calc(var(--spacing) * 32); } .max-w-36 { max-width: calc(var(--spacing) * 36); } .max-w-40 { max-width: calc(var(--spacing) * 40); } .max-w-560px { max-width: var(--spacing-560px); } .max-w-705px { max-width: var(--spacing-705px); } .max-w-1400px { max-width: var(--spacing-1400px); } .max-w-\[25\%\] { max-width: 25%; } .max-w-\[30\%\] { max-width: 30%; } .max-w-\[115px\] { max-width: 115px; } .max-w-\[200px\] { max-width: 200px; } .max-w-\[270px\] { max-width: 270px; } .max-w-\[318px\] { max-width: 318px; } .max-w-\[510px\] { max-width: 510px; } .max-w-\[609px\] { max-width: 609px; } .max-w-\[669px\] { max-width: 669px; } .max-w-\[848px\] { max-width: 848px; } .max-w-\[1049px\] { max-width: 1049px; } .max-w-\[1076px\] { max-width: 1076px; } .max-w-\[1400px\] { max-width: 1400px; } .max-w-\[min$1280px\,\(100\%_-_2rem$\)\] { max-width: min(1280px, (100% - 2rem)); } .max-w-\[var$--ambrands-img-width$\] { max-width: var(--ambrands-img-width); } .max-w-\[var$--ambrands-slider-max-width$\] { max-width: var(--ambrands-slider-max-width); } .max-w-fit { max-width: fit-content; } .max-w-full { max-width: 100%; } .max-w-lg { max-width: var(--container-lg); } .max-w-max { max-width: max-content; } .max-w-md { max-width: var(--container-md); } .max-w-prose { max-width: 65ch; } .max-w-screen-lg { max-width: var(--breakpoint-lg); } .max-w-sm { max-width: var(--container-sm); } .max-w-xl { max-width: var(--container-xl); } .max-w-xs { max-width: var(--container-xs); } .min-w-6 { min-width: calc(var(--spacing) * 6); } .min-w-8 { min-width: calc(var(--spacing) * 8); } .min-w-9\.5 { min-width: calc(var(--spacing) * 9.5); } .min-w-10 { min-width: calc(var(--spacing) * 10); } .min-w-16 { min-width: calc(var(--spacing) * 16); } .min-w-20 { min-width: calc(var(--spacing) * 20); } .min-w-24 { min-width: calc(var(--spacing) * 24); } .min-w-28 { min-width: calc(var(--spacing) * 28); } .min-w-32 { min-width: calc(var(--spacing) * 32); } .min-w-40 { min-width: calc(var(--spacing) * 40); } .min-w-48 { min-width: calc(var(--spacing) * 48); } .min-w-72 { min-width: calc(var(--spacing) * 72); } .min-w-177px { min-width: var(--spacing-177px); } .min-w-\[6\.75rem\] { min-width: 6.75rem; } .min-w-\[7rem\] { min-width: 7rem; } .min-w-\[25px\] { min-width: 25px; } .min-w-\[76px\] { min-width: 76px; } .min-w-\[150px\] { min-width: 150px; } .min-w-\[350px\] { min-width: 350px; } .min-w-\[550px\] { min-width: 550px; } .min-w-\[theme$spacing\.16$\] { min-width: 4rem; } .min-w-full { min-width: 100%; } .min-w-sm { min-width: var(--container-sm); } .flex-1 { flex: 1; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-shrink-0 { flex-shrink: 0; } .flex-shrink-0 { flex-shrink: 0; } .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .flex-grow { flex-grow: 1; } .grow { flex-grow: 1; } .grow-0 { flex-grow: 0; } .grow-1 { flex-grow: 1; } .basis-1\/6 { flex-basis: calc(1/6 * 100%); } .basis-2\/6 { flex-basis: calc(2/6 * 100%); } .basis-3\/6 { flex-basis: calc(3/6 * 100%); } .basis-32 { flex-basis: calc(var(--spacing) * 32); } .basis-36 { flex-basis: calc(var(--spacing) * 36); } .basis-40 { flex-basis: calc(var(--spacing) * 40); } .basis-44 { flex-basis: calc(var(--spacing) * 44); } .basis-50 { flex-basis: calc(var(--spacing) * 50); } .basis-56 { flex-basis: calc(var(--spacing) * 56); } .basis-\[35rem\] { flex-basis: 35rem; } .basis-\[43rem\] { flex-basis: 43rem; } .basis-\[55\%\] { flex-basis: 55%; } .basis-\[90\%\] { flex-basis: 90%; } .basis-auto { flex-basis: auto; } .basis-full { flex-basis: 100%; } .table-auto { table-layout: auto; } .table-fixed { table-layout: fixed; } .border-collapse { border-collapse: collapse; } .origin-bottom-left { transform-origin: 0 100%; } .origin-top-left { transform-origin: 0 0; } .origin-top-right { transform-origin: 100% 0; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-x-2\/4 { --tw-translate-x: calc(calc(2/4 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-x-5 { --tw-translate-x: calc(var(--spacing) * -5); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-0 { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-2\/4 { --tw-translate-x: calc(2/4 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-4 { --tw-translate-x: calc(var(--spacing) * 4); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-8 { --tw-translate-x: calc(var(--spacing) * 8); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-72 { --tw-translate-x: calc(var(--spacing) * 72); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-\[0\%\] { --tw-translate-x: 0%; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-\[none\] { --tw-translate-x: none; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-full { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-2\/4 { --tw-translate-y: calc(calc(2/4 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-8 { --tw-translate-y: calc(var(--spacing) * -8); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-full { --tw-translate-y: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-0 { --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-1 { --tw-translate-y: calc(var(--spacing) * 1); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-full { --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .scale-95 { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-100 { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-x-150 { --tw-scale-x: 150%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-y-100 { --tw-scale-y: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } .rotate-0 { rotate: 0deg; } .rotate-45 { rotate: 45deg; } .rotate-90 { rotate: 90deg; } .rotate-180 { rotate: 180deg; } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .animate-pulse { animation: var(--animate-pulse); } .animate-spin { animation: var(--animate-spin); } .cursor-default { cursor: default; } .cursor-help { cursor: help; } .cursor-not-allowed { cursor: not-allowed; } .cursor-pointer { cursor: pointer; } .cursor-text { cursor: text; } .resize { resize: both; } .resize-none { resize: none; } .resize-y { resize: vertical; } .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } .snap-mandatory { --tw-scroll-snap-strictness: mandatory; } .snap-start { scroll-snap-align: start; } .scroll-mt-8 { scroll-margin-top: calc(var(--spacing) * 8); } .list-disc { list-style-type: disc; } .list-none { list-style-type: none; } .appearance-none { appearance: none; } .grid-flow-row { grid-auto-flow: row; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid-cols-\[1\.5fr_1fr\] { grid-template-columns: 1.5fr 1fr; } .grid-cols-\[20\%_70\%\] { grid-template-columns: 20% 70%; } .grid-cols-\[38\%_25\%_19\%_auto\] { grid-template-columns: 38% 25% 19% auto; } .grid-cols-\[minmax$0px\,1fr$_theme$\'spacing\.72\'$\] { grid-template-columns: minmax(0px,1fr) 18rem; } .grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .\!flex-col { flex-direction: column !important; } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap { flex-wrap: wrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .place-items-center { place-items: center; } .content-center { align-content: center; } .items-baseline { align-items: baseline; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .items-stretch { align-items: stretch; } .\!justify-between { justify-content: space-between !important; } .\!justify-start { justify-content: flex-start !important; } .justify-around { justify-content: space-around; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-evenly { justify-content: space-evenly; } .justify-start { justify-content: flex-start; } .\!gap-2 { gap: calc(var(--spacing) * 2) !important; } .gap-0 { gap: calc(var(--spacing) * 0); } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-2\.5 { gap: calc(var(--spacing) * 2.5); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-3\.5 { gap: calc(var(--spacing) * 3.5); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-7 { gap: calc(var(--spacing) * 7); } .gap-8 { gap: calc(var(--spacing) * 8); } .gap-11 { gap: calc(var(--spacing) * 11); } .gap-12 { gap: calc(var(--spacing) * 12); } .gap-16 { gap: calc(var(--spacing) * 16); } .gap-\[1px\] { gap: 1px; } .space-y-2 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-3 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-4 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-6 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } .gap-x-1 { column-gap: calc(var(--spacing) * 1); } .gap-x-1\.5 { column-gap: calc(var(--spacing) * 1.5); } .gap-x-2 { column-gap: calc(var(--spacing) * 2); } .gap-x-2\.5 { column-gap: calc(var(--spacing) * 2.5); } .gap-x-3 { column-gap: calc(var(--spacing) * 3); } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } .gap-x-6 { column-gap: calc(var(--spacing) * 6); } .gap-x-7 { column-gap: calc(var(--spacing) * 7); } .gap-x-16 { column-gap: calc(var(--spacing) * 16); } .gap-x-\[31px\] { column-gap: 31px; } .space-x-1 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); } } .space-x-3 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); } } .space-x-4 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } .gap-y-0 { row-gap: calc(var(--spacing) * 0); } .gap-y-1 { row-gap: calc(var(--spacing) * 1); } .gap-y-2 { row-gap: calc(var(--spacing) * 2); } .gap-y-3 { row-gap: calc(var(--spacing) * 3); } .gap-y-3\.5 { row-gap: calc(var(--spacing) * 3.5); } .gap-y-4 { row-gap: calc(var(--spacing) * 4); } .gap-y-5 { row-gap: calc(var(--spacing) * 5); } .gap-y-8 { row-gap: calc(var(--spacing) * 8); } .gap-y-16 { row-gap: calc(var(--spacing) * 16); } .divide-y { :where(& > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } } .divide-gray-300 { :where(& > :not(:last-child)) { border-color: var(--color-gray-300); } } .self-center { align-self: center; } .self-end { align-self: flex-end; } .self-start { align-self: flex-start; } .self-stretch { align-self: stretch; } .justify-self-end { justify-self: flex-end; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-x-auto { overflow-x: auto; } .overflow-x-clip { overflow-x: clip; } .overflow-x-hidden { overflow-x: hidden; } .overflow-x-scroll { overflow-x: scroll; } .overflow-y-auto { overflow-y: auto; } .overflow-y-hidden { overflow-y: hidden; } .overflow-y-scroll { overflow-y: scroll; } .overscroll-contain { overscroll-behavior: contain; } .overscroll-x-contain { overscroll-behavior-x: contain; } .overscroll-y-contain { overscroll-behavior-y: contain; } .scroll-smooth { scroll-behavior: smooth; } .btn-primary { border-radius: var(--radius-100px); border-color: var(--color-primary); &:hover { @media (hover: hover) { border-color: var(--color-black-h1); } } --btn-stroke: var(--color-white); --btn-bg: var(--color-primary); --btn-color: var(--color-on-primary); --btn-hover-stroke: var(--color-white); --btn-hover-bg: var(--color-black-h1); --btn-hover-color: var(--color-white); --btn-active-stroke: var(--color-white); --btn-active-bg: var(--color-black-h1); --btn-active-color: var(--color-white); } .\!rounded-2xl { border-radius: var(--radius-2xl) !important; } .\!rounded-\[48px\] { border-radius: 48px !important; } .\!rounded-full { border-radius: calc(infinity * 1px) !important; } .\!rounded-xs { border-radius: var(--radius-xs) !important; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-3xl { border-radius: var(--radius-3xl); } .rounded-20px { border-radius: var(--radius-20px); } .rounded-\[3px\] { border-radius: 3px; } .rounded-\[4px\] { border-radius: 4px; } .rounded-\[12px\] { border-radius: 12px; } .rounded-\[20px\] { border-radius: 20px; } .rounded-\[26px\] { border-radius: 26px; } .rounded-\[27px\] { border-radius: 27px; } .rounded-\[28px\] { border-radius: 28px; } .rounded-\[30px\] { border-radius: 30px; } .rounded-\[33px\] { border-radius: 33px; } .rounded-\[40px\] { border-radius: 40px; } .rounded-\[44px\] { border-radius: 44px; } .rounded-\[50px\] { border-radius: 50px; } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .rounded-none { border-radius: 0; } .rounded-sm { border-radius: var(--radius-sm); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-xs { border-radius: var(--radius-xs); } .rounded-s-none { border-start-start-radius: 0; border-end-start-radius: 0; } .rounded-e-none { border-start-end-radius: 0; border-end-end-radius: 0; } .rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .rounded-t-2xl { border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl); } .rounded-t-\[30px\] { border-top-left-radius: 30px; border-top-right-radius: 30px; } .rounded-l { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .rounded-l-\[30px\] { border-top-left-radius: 30px; border-bottom-left-radius: 30px; } .rounded-l-full { border-top-left-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px); } .rounded-l-lg { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); } .rounded-l-md { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; } .rounded-tl-\[30px\] { border-top-left-radius: 30px; } .rounded-tl-lg { border-top-left-radius: var(--radius-lg); } .rounded-r { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .rounded-r-full { border-top-right-radius: calc(infinity * 1px); border-bottom-right-radius: calc(infinity * 1px); } .rounded-r-lg { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } .rounded-r-md { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; } .rounded-tr-lg { border-top-right-radius: var(--radius-lg); } .rounded-b { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .rounded-b-\[30px\] { border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; } .rounded-b-md { border-bottom-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .rounded-br-\[30px\] { border-bottom-right-radius: 30px; } .rounded-br-lg { border-bottom-right-radius: var(--radius-lg); } .rounded-bl-lg { border-bottom-left-radius: var(--radius-lg); } .\!border { border-style: var(--tw-border-style) !important; border-width: 1px !important; } .\!border-0 { border-style: var(--tw-border-style) !important; border-width: 0px !important; } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0px; } .border-1 { border-style: var(--tw-border-style); border-width: 1px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-4 { border-style: var(--tw-border-style); border-width: 4px; } .border-\[1\.2px\] { border-style: var(--tw-border-style); border-width: 1.2px; } .border-\[1\.8px\] { border-style: var(--tw-border-style); border-width: 1.8px; } .border-\[3px\] { border-style: var(--tw-border-style); border-width: 3px; } .border-x-0 { border-inline-style: var(--tw-border-style); border-inline-width: 0px; } .border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-t-0 { border-top-style: var(--tw-border-style); border-top-width: 0px; } .border-t-1 { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-t-2 { border-top-style: var(--tw-border-style); border-top-width: 2px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-r-0 { border-right-style: var(--tw-border-style); border-right-width: 0px; } .border-r-2 { border-right-style: var(--tw-border-style); border-right-width: 2px; } .\!border-b { border-bottom-style: var(--tw-border-style) !important; border-bottom-width: 1px !important; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-b-0 { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } .border-b-1 { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .border-l-0 { border-left-style: var(--tw-border-style); border-left-width: 0px; } .border-l-2 { border-left-style: var(--tw-border-style); border-left-width: 2px; } .border-l-4 { border-left-style: var(--tw-border-style); border-left-width: 4px; } .border-l-8 { border-left-style: var(--tw-border-style); border-left-width: 8px; } .border-dashed { --tw-border-style: dashed; border-style: dashed; } .border-none { --tw-border-style: none; border-style: none; } .border-solid { --tw-border-style: solid; border-style: solid; } .\!border-\[\#17171529\] { border-color: #17171529 !important; } .\!border-black { border-color: var(--color-black) !important; } .\!border-primary { border-color: var(--color-primary) !important; } .border-\[\#17171529\] { border-color: #17171529; } .border-\[\#17171552\] { border-color: #17171552; } .border-\[\#E24B3B\] { border-color: #E24B3B; } .border-\[\#E24C39\] { border-color: #E24C39; } .border-amber-500 { border-color: var(--color-amber-500); } .border-black { border-color: var(--color-black); } .border-black-h1 { border-color: var(--color-black-h1); } .border-black-h1\/10 { border-color: color-mix(in srgb, #1A1918 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black-h1) 10%, transparent); } } .border-black-h1\/15 { border-color: color-mix(in srgb, #1A1918 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black-h1) 15%, transparent); } } .border-black-h1\/16 { border-color: color-mix(in srgb, #1A1918 16%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black-h1) 16%, transparent); } } .border-black-h1\/20 { border-color: color-mix(in srgb, #1A1918 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black-h1) 20%, transparent); } } .border-black-h1\/40 { border-color: color-mix(in srgb, #1A1918 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black-h1) 40%, transparent); } } .border-black-h2 { border-color: var(--color-black-h2); } .border-black-h2\/10 { border-color: color-mix(in srgb, #171715 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black-h2) 10%, transparent); } } .border-black-h2\/20 { border-color: color-mix(in srgb, #171715 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black-h2) 20%, transparent); } } .border-black-h2\/30 { border-color: color-mix(in srgb, #171715 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black-h2) 30%, transparent); } } .border-black\/10 { border-color: color-mix(in srgb, #000 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black) 10%, transparent); } } .border-black\/12 { border-color: color-mix(in srgb, #000 12%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black) 12%, transparent); } } .border-black\/15 { border-color: color-mix(in srgb, #000 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black) 15%, transparent); } } .border-black\/16 { border-color: color-mix(in srgb, #000 16%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black) 16%, transparent); } } .border-black\/20 { border-color: color-mix(in srgb, #000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black) 20%, transparent); } } .border-black\/32 { border-color: color-mix(in srgb, #000 32%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black) 32%, transparent); } } .border-black\/60 { border-color: color-mix(in srgb, #000 60%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .border-black\/70 { border-color: color-mix(in srgb, #000 70%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black) 70%, transparent); } } .border-blue-500 { border-color: var(--color-blue-500); } .border-blue-600 { border-color: var(--color-blue-600); } .border-blue-700 { border-color: var(--color-blue-700); } .border-container { border-color: var(--color-container); } .border-container-darker { border-color: var(--color-container-darker); } .border-container-lighter { border-color: var(--color-container-lighter); } .border-current { border-color: currentcolor; } .border-gray-100 { border-color: var(--color-gray-100); } .border-gray-200 { border-color: var(--color-gray-200); } .border-gray-300 { border-color: var(--color-gray-300); } .border-gray-400 { border-color: var(--color-gray-400); } .border-gray-500 { border-color: var(--color-gray-500); } .border-gray-600 { border-color: var(--color-gray-600); } .border-gray-h3 { border-color: var(--color-gray-h3); } .border-gray-h3\/20 { border-color: color-mix(in srgb, #606060 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-gray-h3) 20%, transparent); } } .border-gray-h3\/50 { border-color: color-mix(in srgb, #606060 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-gray-h3) 50%, transparent); } } .border-gray-h4 { border-color: var(--color-gray-h4); } .border-green-400 { border-color: var(--color-green-400); } .border-orange-h1 { border-color: var(--color-orange-h1); } .border-primary { border-color: var(--color-primary); } .border-primary-lighter { border-color: var(--color-primary-lighter); } .border-primary\/20 { border-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } } .border-purple-300 { border-color: var(--color-purple-300); } .border-red-100 { border-color: var(--color-red-100); } .border-red-500 { border-color: var(--color-red-500); } .border-red-700 { border-color: var(--color-red-700); } .border-slate-100 { border-color: var(--color-slate-100); } .border-slate-200 { border-color: var(--color-slate-200); } .border-slate-200\/70 { border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 70%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-slate-200) 70%, transparent); } } .border-slate-300 { border-color: var(--color-slate-300); } .border-transparent { border-color: transparent; } .border-white { border-color: var(--color-white); } .border-white-h1 { border-color: var(--color-white-h1); } .border-white\/15 { border-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .border-white\/16 { border-color: color-mix(in srgb, #fff 16%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 16%, transparent); } } .border-white\/30 { border-color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } .\!bg-orange-h1 { background-color: var(--color-orange-h1) !important; } .\!bg-white { background-color: var(--color-white) !important; } .bg-\[\#34C759\] { background-color: #34C759; } .bg-\[\#00173D\] { background-color: #00173D; } .bg-\[\#1717150f\] { background-color: #1717150f; } .bg-\[\#D4F4FF\] { background-color: #D4F4FF; } .bg-\[\#E24B3B\] { background-color: #E24B3B; } .bg-\[\#E24C39\] { background-color: #E24C39; } .bg-\[\#EAEAEA\] { background-color: #EAEAEA; } .bg-\[\#FF3B30\] { background-color: #FF3B30; } .bg-\[\#FFC4C4\] { background-color: #FFC4C4; } .bg-\[var$--ambrands-bg-color$\] { background-color: var(--ambrands-bg-color); } .bg-black { background-color: var(--color-black); } .bg-black-h1 { background-color: var(--color-black-h1); } .bg-black-h1\/5 { background-color: color-mix(in srgb, #1A1918 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black-h1) 5%, transparent); } } .bg-black-h2\/10 { background-color: color-mix(in srgb, #171715 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black-h2) 10%, transparent); } } .bg-black\/5 { background-color: color-mix(in srgb, #000 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 5%, transparent); } } .bg-black\/6 { background-color: color-mix(in srgb, #000 6%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 6%, transparent); } } .bg-black\/10 { background-color: color-mix(in srgb, #000 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 10%, transparent); } } .bg-black\/40 { background-color: color-mix(in srgb, #000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } } .bg-black\/50 { background-color: color-mix(in srgb, #000 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .bg-black\/55 { background-color: color-mix(in srgb, #000 55%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 55%, transparent); } } .bg-blue-50 { background-color: var(--color-blue-50); } .bg-blue-100 { background-color: var(--color-blue-100); } .bg-blue-200 { background-color: var(--color-blue-200); } .bg-blue-300 { background-color: var(--color-blue-300); } .bg-blue-600 { background-color: var(--color-blue-600); } .bg-blue-700 { background-color: var(--color-blue-700); } .bg-container { background-color: var(--color-container); } .bg-container-darker { background-color: var(--color-container-darker); } .bg-container-lighter { background-color: var(--color-container-lighter); } .bg-emerald-500 { background-color: var(--color-emerald-500); } .bg-emerald-500\/15 { background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent); } } .bg-gray-50 { background-color: var(--color-gray-50); } .bg-gray-100 { background-color: var(--color-gray-100); } .bg-gray-200 { background-color: var(--color-gray-200); } .bg-gray-300 { background-color: var(--color-gray-300); } .bg-gray-500 { background-color: var(--color-gray-500); } .bg-gray-600 { background-color: var(--color-gray-600); } .bg-gray-900 { background-color: var(--color-gray-900); } .bg-gray-h1 { background-color: var(--color-gray-h1); } .bg-gray-h1\/50 { background-color: color-mix(in srgb, #F3F3F3 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-h1) 50%, transparent); } } .bg-gray-h2 { background-color: var(--color-gray-h2); } .bg-gray-h3 { background-color: var(--color-gray-h3); } .bg-gray-h3\/20 { background-color: color-mix(in srgb, #606060 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-h3) 20%, transparent); } } .bg-gray-h4 { background-color: var(--color-gray-h4); } .bg-green-200 { background-color: var(--color-green-200); } .bg-green-500 { background-color: var(--color-green-500); } .bg-green-600 { background-color: var(--color-green-600); } .bg-neutral-100 { background-color: var(--color-neutral-100); } .bg-orange-h1 { background-color: var(--color-orange-h1); } .bg-orange-h1\/5 { background-color: color-mix(in srgb, #FB4B02 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-orange-h1) 5%, transparent); } } .bg-primary { &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } } .bg-primary { background-color: var(--color-primary); } .bg-primary-lighter { background-color: var(--color-primary-lighter); } .bg-primary\/10 { background-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } } .bg-primary\/20 { background-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } } .bg-primary\/24 { background-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 24%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 24%, transparent); } } .bg-red-50 { background-color: var(--color-red-50); } .bg-red-100 { background-color: var(--color-red-100); } .bg-red-500 { background-color: var(--color-red-500); } .bg-red-600 { background-color: var(--color-red-600); } .bg-slate-50 { background-color: var(--color-slate-50); } .bg-slate-50\/70 { background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-50) 70%, transparent); } } .bg-slate-200 { background-color: var(--color-slate-200); } .bg-slate-200\/70 { background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-200) 70%, transparent); } } .bg-slate-300 { background-color: var(--color-slate-300); } .bg-slate-400 { background-color: var(--color-slate-400); } .bg-slate-800\/40 { background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-800) 40%, transparent); } } .bg-slate-900 { background-color: var(--color-slate-900); } .bg-surface { background-color: var(--color-surface); } .bg-transparent { background-color: transparent; } .bg-white { background-color: var(--color-white); } .bg-white-h1 { background-color: var(--color-white-h1); } .bg-white\/25 { background-color: color-mix(in srgb, #fff 25%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 25%, transparent); } } .bg-white\/30 { background-color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } .bg-white\/40 { background-color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .bg-white\/60 { background-color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } .bg-white\/70 { background-color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 70%, transparent); } } .bg-white\/95 { background-color: color-mix(in srgb, #fff 95%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 95%, transparent); } } .bg-yellow-200 { background-color: var(--color-yellow-200); } .bg-yellow-500 { background-color: var(--color-yellow-500); } .bg-gradient-to-l { --tw-gradient-position: to left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-t { --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-\[linear-gradient$29\.42deg\,_\#be2b5d_-16\.85\%\,_\#d8555b_73\.35\%$\] { background-image: linear-gradient(29.42deg, #be2b5d -16.85%, #d8555b 73.35%); } .bg-\[linear-gradient$180deg\,_\#FB8702_0\%\,_\#FB4B02_100\%$\] { background-image: linear-gradient(180deg, #FB8702 0%, #FB4B02 100%); } .from-black\/10 { --tw-gradient-from: color-mix(in srgb, #000 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 10%, 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)); } .from-surface { --tw-gradient-from: var(--color-surface); --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)); } .from-white { --tw-gradient-from: var(--color-white); --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)); } .\!bg-cover { background-size: cover !important; } .bg-contain { background-size: contain; } .bg-cover { background-size: cover; } .\!bg-right { background-position: right !important; } .bg-center { background-position: center; } .bg-no-repeat { background-repeat: no-repeat; } .fill-\[\#00173D\] { fill: #00173D; } .fill-black { fill: var(--color-black); } .fill-black\/20 { fill: color-mix(in srgb, #000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { fill: color-mix(in oklab, var(--color-black) 20%, transparent); } } .fill-blue-500 { fill: var(--color-blue-500); } .fill-current { fill: currentcolor; } .fill-primary { fill: var(--color-primary); } .\!stroke-primary { stroke: var(--color-primary) !important; } .\!stroke-white { stroke: var(--color-white) !important; } .stroke-\[\#2B2828\] { stroke: #2B2828; } .stroke-\[\#61A9B9\] { stroke: #61A9B9; } .stroke-\[\#00173D\] { stroke: #00173D; } .stroke-\[\#171715\] { stroke: #171715; } .stroke-\[\#de2c2d\] { stroke: #de2c2d; } .stroke-black { stroke: var(--color-black); } .stroke-current { stroke: currentcolor; } .stroke-primary { stroke: var(--color-primary); } .stroke-white { stroke: var(--color-white); } .stroke-white\/75 { stroke: color-mix(in srgb, #fff 75%, transparent); @supports (color: color-mix(in lab, red, red)) { stroke: color-mix(in oklab, var(--color-white) 75%, transparent); } } .stroke-1 { stroke-width: 1; } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .object-fill { object-fit: fill; } .object-bottom { object-position: bottom; } .object-center { object-position: center; } .\!p-0 { padding: calc(var(--spacing) * 0) !important; } .\!p-4 { padding: calc(var(--spacing) * 4) !important; } .\!p-6 { padding: calc(var(--spacing) * 6) !important; } .p-0 { padding: calc(var(--spacing) * 0); } .p-1 { padding: calc(var(--spacing) * 1); } .p-1\.5 { padding: calc(var(--spacing) * 1.5); } .p-2 { padding: calc(var(--spacing) * 2); } .p-2\.5 { padding: calc(var(--spacing) * 2.5); } .p-3 { padding: calc(var(--spacing) * 3); } .p-3\.5 { padding: calc(var(--spacing) * 3.5); } .p-4 { padding: calc(var(--spacing) * 4); } .p-5 { padding: calc(var(--spacing) * 5); } .p-6 { padding: calc(var(--spacing) * 6); } .p-8 { padding: calc(var(--spacing) * 8); } .p-10 { padding: calc(var(--spacing) * 10); } .\!px-0 { padding-inline: calc(var(--spacing) * 0) !important; } .\!px-2 { padding-inline: calc(var(--spacing) * 2) !important; } .\!px-6 { padding-inline: calc(var(--spacing) * 6) !important; } .px-0 { padding-inline: calc(var(--spacing) * 0); } .px-1 { padding-inline: calc(var(--spacing) * 1); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-3\.5 { padding-inline: calc(var(--spacing) * 3.5); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .px-5px { padding-inline: var(--spacing-5px); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-7 { padding-inline: calc(var(--spacing) * 7); } .px-8 { padding-inline: calc(var(--spacing) * 8); } .px-9 { padding-inline: calc(var(--spacing) * 9); } .px-10 { padding-inline: calc(var(--spacing) * 10); } .px-12 { padding-inline: calc(var(--spacing) * 12); } .px-\[var$--ambrands-slider-padding$\] { padding-inline: var(--ambrands-slider-padding); } .py-0 { padding-block: calc(var(--spacing) * 0); } .py-0\.5 { padding-block: calc(var(--spacing) * 0.5); } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-3\.5 { padding-block: calc(var(--spacing) * 3.5); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-5 { padding-block: calc(var(--spacing) * 5); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-7 { padding-block: calc(var(--spacing) * 7); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-9 { padding-block: calc(var(--spacing) * 9); } .py-10 { padding-block: calc(var(--spacing) * 10); } .py-12 { padding-block: calc(var(--spacing) * 12); } .py-14 { padding-block: calc(var(--spacing) * 14); } .py-20 { padding-block: calc(var(--spacing) * 20); } .py-22px { padding-block: var(--spacing-22px); } .py-\[19px\] { padding-block: 19px; } .pe-2 { padding-inline-end: calc(var(--spacing) * 2); } .pt-0 { padding-top: calc(var(--spacing) * 0); } .pt-1 { padding-top: calc(var(--spacing) * 1); } .pt-2 { padding-top: calc(var(--spacing) * 2); } .pt-2\.5 { padding-top: calc(var(--spacing) * 2.5); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-5 { padding-top: calc(var(--spacing) * 5); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-7 { padding-top: calc(var(--spacing) * 7); } .pt-8 { padding-top: calc(var(--spacing) * 8); } .pt-10 { padding-top: calc(var(--spacing) * 10); } .pt-11 { padding-top: calc(var(--spacing) * 11); } .pt-16 { padding-top: calc(var(--spacing) * 16); } .pt-20 { padding-top: calc(var(--spacing) * 20); } .pt-\[46\%\] { padding-top: 46%; } .pt-\[50\.75\%\] { padding-top: 50.75%; } .pt-\[52px\] { padding-top: 52px; } .pt-\[59\%\] { padding-top: 59%; } .pt-\[100\%\] { padding-top: 100%; } .pr-0\.5 { padding-right: calc(var(--spacing) * 0.5); } .pr-1 { padding-right: calc(var(--spacing) * 1); } .pr-2 { padding-right: calc(var(--spacing) * 2); } .pr-2\.5 { padding-right: calc(var(--spacing) * 2.5); } .pr-3 { padding-right: calc(var(--spacing) * 3); } .pr-4 { padding-right: calc(var(--spacing) * 4); } .pr-5 { padding-right: calc(var(--spacing) * 5); } .pr-6 { padding-right: calc(var(--spacing) * 6); } .pr-7 { padding-right: calc(var(--spacing) * 7); } .pr-8 { padding-right: calc(var(--spacing) * 8); } .pr-9 { padding-right: calc(var(--spacing) * 9); } .pr-10 { padding-right: calc(var(--spacing) * 10); } .pr-11 { padding-right: calc(var(--spacing) * 11); } .pr-12 { padding-right: calc(var(--spacing) * 12); } .pr-16 { padding-right: calc(var(--spacing) * 16); } .pr-50px { padding-right: var(--spacing-50px); } .pb-0 { padding-bottom: calc(var(--spacing) * 0); } .pb-0\.5 { padding-bottom: calc(var(--spacing) * 0.5); } .pb-1 { padding-bottom: calc(var(--spacing) * 1); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-2\.5 { padding-bottom: calc(var(--spacing) * 2.5); } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-5 { padding-bottom: calc(var(--spacing) * 5); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .pb-7 { padding-bottom: calc(var(--spacing) * 7); } .pb-8 { padding-bottom: calc(var(--spacing) * 8); } .pb-10 { padding-bottom: calc(var(--spacing) * 10); } .pb-12 { padding-bottom: calc(var(--spacing) * 12); } .pb-16 { padding-bottom: calc(var(--spacing) * 16); } .pb-22px { padding-bottom: var(--spacing-22px); } .pb-29px { padding-bottom: var(--spacing-29px); } .pb-48 { padding-bottom: calc(var(--spacing) * 48); } .pb-50px { padding-bottom: var(--spacing-50px); } .pb-\[3px\] { padding-bottom: 3px; } .pb-\[50px\] { padding-bottom: 50px; } .pl-0 { padding-left: calc(var(--spacing) * 0); } .pl-1 { padding-left: calc(var(--spacing) * 1); } .pl-2 { padding-left: calc(var(--spacing) * 2); } .pl-2\.5 { padding-left: calc(var(--spacing) * 2.5); } .pl-3 { padding-left: calc(var(--spacing) * 3); } .pl-3\.5 { padding-left: calc(var(--spacing) * 3.5); } .pl-4 { padding-left: calc(var(--spacing) * 4); } .pl-5 { padding-left: calc(var(--spacing) * 5); } .pl-6 { padding-left: calc(var(--spacing) * 6); } .pl-8 { padding-left: calc(var(--spacing) * 8); } .pl-10 { padding-left: calc(var(--spacing) * 10); } .pl-12 { padding-left: calc(var(--spacing) * 12); } .pl-14 { padding-left: calc(var(--spacing) * 14); } .pl-34px { padding-left: var(--spacing-34px); } .pl-54px { padding-left: var(--spacing-54px); } .text-center { text-align: center; } .text-end { text-align: end; } .text-left { text-align: left; } .text-right { text-align: right; } .text-start { text-align: start; } .align-bottom { vertical-align: bottom; } .align-middle { vertical-align: middle; } .align-top { vertical-align: top; } .\!font-sans { font-family: var(--font-sans) !important; } .font-bebasneue { font-family: var(--font-bebasneue); } .font-dmsans { font-family: var(--font-dmsans); } .font-lato { font-family: var(--font-lato); } .font-poppins { font-family: var(--font-poppins); } .font-sans { font-family: var(--font-sans); } .\!text-sm { font-size: var(--text-sm) !important; line-height: var(--tw-leading, var(--text-sm--line-height)) !important; } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } .text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .\!text-\[10px\] { font-size: 10px !important; } .text-10px { font-size: var(--text-10px); } .text-13px { font-size: var(--text-13px); } .text-28px { font-size: var(--text-28px); } .text-42px { font-size: var(--text-42px); } .text-\[8px\] { font-size: 8px; } .text-\[10px\] { font-size: 10px; } .text-\[length\:var$--ambrands-text-size$\] { font-size: var(--ambrands-text-size); } .leading-4 { --tw-leading: calc(var(--spacing) * 4); line-height: calc(var(--spacing) * 4); } .leading-5 { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } .leading-6 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .leading-7 { --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .leading-8 { --tw-leading: calc(var(--spacing) * 8); line-height: calc(var(--spacing) * 8); } .leading-10 { --tw-leading: calc(var(--spacing) * 10); line-height: calc(var(--spacing) * 10); } .leading-\[19px\] { --tw-leading: 19px; line-height: 19px; } .leading-\[22px\] { --tw-leading: 22px; line-height: 22px; } .leading-\[86px\] { --tw-leading: 86px; line-height: 86px; } .leading-\[var$--ambrands-img-width$\] { --tw-leading: var(--ambrands-img-width); line-height: var(--ambrands-img-width); } .leading-loose { --tw-leading: var(--leading-loose); line-height: var(--leading-loose); } .leading-none { --tw-leading: 1; line-height: 1; } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-black { --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-light { --tw-font-weight: var(--font-weight-light); font-weight: var(--font-weight-light); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .tracking-wider { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); } .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } .text-nowrap { text-wrap: nowrap; } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .break-keep { word-break: keep-all; } .text-ellipsis { text-overflow: ellipsis; } .hyphens-auto { -webkit-hyphens: auto; hyphens: auto; } .whitespace-normal { white-space: normal; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre-line { white-space: pre-line; } .\!text-black { color: var(--color-black) !important; } .\!text-black-h1\/50 { color: color-mix(in srgb, #1A1918 50%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black-h1) 50%, transparent) !important; } } .\!text-primary { color: var(--color-primary) !important; } .\!text-white { color: var(--color-white) !important; } .text-\[\#09458E\] { color: #09458E; } .text-\[\#D90000\] { color: #D90000; } .text-\[\#de2c2d\] { color: #de2c2d; } .text-\[color\:var$--ambrands-text-color$\] { color: var(--ambrands-text-color); } .text-amber-400 { color: var(--color-amber-400); } .text-black { color: var(--color-black); } .text-black-h1 { color: var(--color-black-h1); } .text-black-h1\/20 { color: color-mix(in srgb, #1A1918 20%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black-h1) 20%, transparent); } } .text-black-h1\/50 { color: color-mix(in srgb, #1A1918 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black-h1) 50%, transparent); } } .text-black-h1\/60 { color: color-mix(in srgb, #1A1918 60%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black-h1) 60%, transparent); } } .text-black-h1\/65 { color: color-mix(in srgb, #1A1918 65%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black-h1) 65%, transparent); } } .text-black-h1\/75 { color: color-mix(in srgb, #1A1918 75%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black-h1) 75%, transparent); } } .text-black-h2 { color: var(--color-black-h2); } .text-black-h2\/20 { color: color-mix(in srgb, #171715 20%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black-h2) 20%, transparent); } } .text-black-h2\/50 { color: color-mix(in srgb, #171715 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black-h2) 50%, transparent); } } .text-black\/40 { color: color-mix(in srgb, #000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 40%, transparent); } } .text-black\/60 { color: color-mix(in srgb, #000 60%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .text-black\/64 { color: color-mix(in srgb, #000 64%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 64%, transparent); } } .text-black\/70 { color: color-mix(in srgb, #000 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 70%, transparent); } } .text-black\/72 { color: color-mix(in srgb, #000 72%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 72%, transparent); } } .text-blue-400 { color: var(--color-blue-400); } .text-blue-500 { color: var(--color-blue-500); } .text-blue-600 { color: var(--color-blue-600); } .text-blue-700 { color: var(--color-blue-700); } .text-blue-800 { color: var(--color-blue-800); } .text-current { color: currentcolor; } .text-fg { color: var(--color-fg); } .text-fg-secondary { color: var(--color-fg-secondary); } .text-fg\/30 { color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-fg) 30%, transparent); } } .text-gray-200 { color: var(--color-gray-200); } .text-gray-300 { color: var(--color-gray-300); } .text-gray-400 { color: var(--color-gray-400); } .text-gray-500 { color: var(--color-gray-500); } .text-gray-600 { color: var(--color-gray-600); } .text-gray-700 { color: var(--color-gray-700); } .text-gray-800 { color: var(--color-gray-800); } .text-gray-900 { color: var(--color-gray-900); } .text-gray-h1 { color: var(--color-gray-h1); } .text-gray-h3 { color: var(--color-gray-h3); } .text-green-500 { color: var(--color-green-500); } .text-green-600 { color: var(--color-green-600); } .text-green-800 { color: var(--color-green-800); } .text-inherit { color: inherit; } .text-neutral-500 { color: var(--color-neutral-500); } .text-on-primary { color: var(--color-on-primary); } .text-orange-400 { color: var(--color-orange-400); } .text-orange-h1 { color: var(--color-orange-h1); } .text-primary { color: var(--color-primary); } .text-primary-darker { color: var(--color-primary-darker); } .text-primary-lighter { color: var(--color-primary-lighter); } .text-primary\/50 { color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary) 50%, transparent); } } .text-red-400 { color: var(--color-red-400); } .text-red-500 { color: var(--color-red-500); } .text-red-600 { color: var(--color-red-600); } .text-red-700 { color: var(--color-red-700); } .text-secondary { color: var(--color-secondary); } .text-secondary-darker { color: var(--color-secondary-darker); } .text-slate-400 { color: var(--color-slate-400); } .text-slate-500 { color: var(--color-slate-500); } .text-slate-600 { color: var(--color-slate-600); } .text-slate-700 { color: var(--color-slate-700); } .text-slate-800 { color: var(--color-slate-800); } .text-slate-900 { color: var(--color-slate-900); } .text-transparent { color: transparent; } .text-white { color: var(--color-white); } .text-yellow-400 { color: var(--color-yellow-400); } .capitalize { text-transform: capitalize; } .lowercase { text-transform: lowercase; } .normal-case { text-transform: none; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .not-italic { font-style: normal; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .line-through { text-decoration-line: line-through; } .no-underline { text-decoration-line: none; } .underline { text-decoration-line: underline; } .opacity-0 { opacity: 0%; } .opacity-25 { opacity: 25%; } .opacity-35 { opacity: 35%; } .opacity-50 { opacity: 50%; } .opacity-60 { opacity: 60%; } .opacity-70 { opacity: 70%; } .opacity-75 { opacity: 75%; } .opacity-80 { opacity: 80%; } .opacity-100 { opacity: 100%; } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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); } .shadow-$--box-shadow-brand$ { --tw-shadow: var(--box-shadow-brand); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_32px_1px_rgba$26\,25\,24\,0\.08$\] { --tw-shadow: 0 8px 32px 1px var(--tw-shadow-color, rgba(26,25,24,0.08)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0px_8px_32px_1px_\#1A191814\] { --tw-shadow: 0px 8px 32px 1px var(--tw-shadow-color, #1A191814); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --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); } .shadow-md { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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); } .shadow-none { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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); } .shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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); } .shadow-xs { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 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); } .ring { --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); } .ring-1 { --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); } .ring-2 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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); } .ring-3 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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); } .ring-blue-500\/50 { --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent); } } .ring-primary { --tw-ring-color: var(--color-primary); } .ring-primary\/50 { --tw-ring-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent); } } .ring-primary\/75 { --tw-ring-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 75%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-primary) 75%, transparent); } } .outline-0 { outline-style: var(--tw-outline-style); outline-width: 0px; } .-outline-offset-2 { outline-offset: calc(2px * -1); } .outline-offset-0 { outline-offset: 0px; } .outline-offset-2 { outline-offset: 2px; } .outline-primary { outline-color: var(--color-primary); } .\[filter\:brightness$0$_saturate$100\%$_invert$99\%$_sepia$1\%$_saturate$0\%$_hue-rotate$119deg$_brightness$108\%$_contrast$100\%$\] { filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(0%) hue-rotate(119deg) brightness(108%) contrast(100%); } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .backdrop-blur { --tw-backdrop-blur: blur(8px); -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,); } .backdrop-blur-sm { --tw-backdrop-blur: blur(var(--blur-sm)); -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,); } .transition { 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; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { 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)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-none { transition-property: none; } .duration-75 { --tw-duration: 75ms; transition-duration: 75ms; } .duration-100 { --tw-duration: 100ms; transition-duration: 100ms; } .duration-150 { --tw-duration: 150ms; transition-duration: 150ms; } .duration-200 { --tw-duration: 200ms; transition-duration: 200ms; } .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; } .ease-in { --tw-ease: var(--ease-in); transition-timing-function: var(--ease-in); } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } .btn-secondary { --btn-stroke: var(--color-primary-lighter); --btn-bg: var(--color-on-primary); --btn-color: var(--color-primary-darker); --btn-hover-stroke: var(--color-primary-lighter); --btn-hover-bg: var(--color-on-primary); --btn-hover-color: var(--color-primary-lighter); --btn-active-stroke: #0000; --btn-active-bg: var(--color-primary); --btn-active-color: var(--color-on-primary); } .outline-none { --tw-outline-style: none; outline-style: none; } .select-none { -webkit-user-select: none; user-select: none; } .\[--snap-cols\:1\] { --snap-cols: 1; } .\[-moz-appearance\:textfield\] { -moz-appearance: textfield; } .bg-opacity-25 { --tw-bg-opacity: 25; } .bg-opacity-50 { --tw-bg-opacity: 50; } .bg-opacity-100 { --tw-bg-opacity: 100; } .ring-opacity-50 { --tw-ring-opacity: 50; } .ring-opacity-75 { --tw-ring-opacity: 75; } .group-open\:rotate-180 { &:is(:where(.group):is([open], :popover-open, :open) *) { rotate: 180deg; } } .group-open\:text-primary { &:is(:where(.group):is([open], :popover-open, :open) *) { color: var(--color-primary); } } .group-hover\:z-\[110\] { &:is(:where(.group):hover *) { @media (hover: hover) { z-index: 110; } } } .group-hover\:scale-105 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .group-hover\:scale-110 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .group-hover\:text-orange-h1 { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-orange-h1); } } } .group-hover\:text-red-800 { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-red-800); } } } .group-hover\:text-secondary { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-secondary); } } } .group-hover\:opacity-50 { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 50%; } } } .group-focus\:border-gray-400 { &:is(:where(.group):focus *) { border-color: var(--color-gray-400); } } .group-aria-expanded\:rotate-0 { &:is(:where(.group)[aria-expanded="true"] *) { rotate: 0deg; } } .group-aria-expanded\:rotate-180 { &:is(:where(.group)[aria-expanded="true"] *) { rotate: 180deg; } } .group-aria-expanded\:text-inherit { &:is(:where(.group)[aria-expanded="true"] *) { color: inherit; } } .backdrop\:bg-black\/25 { &::backdrop { background-color: color-mix(in srgb, #000 25%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 25%, transparent); } } } .backdrop\:backdrop-blur-sm { &::backdrop { --tw-backdrop-blur: blur(var(--blur-sm)); -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,); } } .before\:absolute { &::before { content: var(--tw-content); position: absolute; } } .before\:left-0 { &::before { content: var(--tw-content); left: calc(var(--spacing) * 0); } } .before\:mr-2 { &::before { content: var(--tw-content); margin-right: calc(var(--spacing) * 2); } } .before\:block { &::before { content: var(--tw-content); display: block; } } .before\:h-0\.5 { &::before { content: var(--tw-content); height: calc(var(--spacing) * 0.5); } } .before\:h-3 { &::before { content: var(--tw-content); height: calc(var(--spacing) * 3); } } .before\:w-3 { &::before { content: var(--tw-content); width: calc(var(--spacing) * 3); } } .before\:w-full { &::before { content: var(--tw-content); width: 100%; } } .before\:shrink-0 { &::before { content: var(--tw-content); flex-shrink: 0; } } .before\:scale-y-150 { &::before { content: var(--tw-content); --tw-scale-y: 150%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .before\:rotate-45 { &::before { content: var(--tw-content); rotate: 45deg; } } .before\:rounded-full { &::before { content: var(--tw-content); border-radius: calc(infinity * 1px); } } .before\:bg-gray-300 { &::before { content: var(--tw-content); background-color: var(--color-gray-300); } } .before\:bg-green-500 { &::before { content: var(--tw-content); background-color: var(--color-green-500); } } .before\:bg-orange-500 { &::before { content: var(--tw-content); background-color: var(--color-orange-500); } } .before\:bg-red-500 { &::before { content: var(--tw-content); background-color: var(--color-red-500); } } .before\:bg-white { &::before { content: var(--tw-content); background-color: var(--color-white); } } .before\:text-base { &::before { content: var(--tw-content); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .before\:text-sm { &::before { content: var(--tw-content); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .before\:text-xl { &::before { content: var(--tw-content); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .before\:leading-4 { &::before { content: var(--tw-content); --tw-leading: calc(var(--spacing) * 4); line-height: calc(var(--spacing) * 4); } } .before\:content-\[\'\'\] { &::before { --tw-content: ''; content: var(--tw-content); } } .before\:content-\[\'\+\'\] { &::before { --tw-content: '+'; content: var(--tw-content); } } .before\:content-\[\'\<\'\] { &::before { --tw-content: '<'; content: var(--tw-content); } } .before\:content-\[\'x\'\] { &::before { --tw-content: 'x'; content: var(--tw-content); } } .after\:absolute { &::after { content: var(--tw-content); position: absolute; } } .after\:inset-x-0 { &::after { content: var(--tw-content); inset-inline: calc(var(--spacing) * 0); } } .after\:bottom-0 { &::after { content: var(--tw-content); bottom: calc(var(--spacing) * 0); } } .after\:left-0 { &::after { content: var(--tw-content); left: calc(var(--spacing) * 0); } } .after\:left-1\/2 { &::after { content: var(--tw-content); left: calc(1/2 * 100%); } } .after\:\!m-0 { &::after { content: var(--tw-content); margin: calc(var(--spacing) * 0) !important; } } .after\:h-0\.5 { &::after { content: var(--tw-content); height: calc(var(--spacing) * 0.5); } } .after\:h-1 { &::after { content: var(--tw-content); height: calc(var(--spacing) * 1); } } .after\:w-1 { &::after { content: var(--tw-content); width: calc(var(--spacing) * 1); } } .after\:w-full { &::after { content: var(--tw-content); width: 100%; } } .after\:-translate-x-1\/2 { &::after { content: var(--tw-content); --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } .after\:translate-y-1\/2 { &::after { content: var(--tw-content); --tw-translate-y: calc(1/2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } } .after\:-rotate-45 { &::after { content: var(--tw-content); rotate: calc(45deg * -1); } } .after\:rotate-45 { &::after { content: var(--tw-content); rotate: 45deg; } } .after\:border-b-2 { &::after { content: var(--tw-content); border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } } .after\:border-transparent { &::after { content: var(--tw-content); border-color: transparent; } } .after\:bg-gray-300 { &::after { content: var(--tw-content); background-color: var(--color-gray-300); } } .after\:bg-primary { &::after { content: var(--tw-content); &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } } } .after\:bg-primary { &::after { content: var(--tw-content); background-color: var(--color-primary); } } .after\:bg-white { &::after { content: var(--tw-content); background-color: var(--color-white); } } .after\:\!content-\[\'\'\] { &::after { content: var(--tw-content); --tw-content: '' !important; content: var(--tw-content) !important; } } .after\:content-\[\'\'\] { &::after { --tw-content: ''; content: var(--tw-content); } } .first\:ml-0 { &:first-child { margin-left: calc(var(--spacing) * 0); } } .first\:border-t-0 { &:first-child { border-top-style: var(--tw-border-style); border-top-width: 0px; } } .first\:pt-0 { &:first-child { padding-top: calc(var(--spacing) * 0); } } .last\:mr-0 { &:last-child { margin-right: calc(var(--spacing) * 0); } } .last\:mb-0 { &:last-child { margin-bottom: calc(var(--spacing) * 0); } } .last\:mb-6 { &:last-child { margin-bottom: calc(var(--spacing) * 6); } } .last\:border-0 { &:last-child { border-style: var(--tw-border-style); border-width: 0px; } } .last\:border-b { &:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } } .last\:border-b-0 { &:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } } .last\:pb-0 { &:last-child { padding-bottom: calc(var(--spacing) * 0); } } .odd\:bg-black-h1\/5 { &:nth-child(odd) { background-color: color-mix(in srgb, #1A1918 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black-h1) 5%, transparent); } } } .odd\:bg-black-h2\/10 { &:nth-child(odd) { background-color: color-mix(in srgb, #171715 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black-h2) 10%, transparent); } } } .odd\:bg-container-darker { &:nth-child(odd) { background-color: var(--color-container-darker); } } .odd\:bg-gray-h1 { &:nth-child(odd) { background-color: var(--color-gray-h1); } } .odd\:bg-slate-100 { &:nth-child(odd) { background-color: var(--color-slate-100); } } .even\:bg-container { &:nth-child(even) { background-color: var(--color-container); } } .even\:bg-container-darker { &:nth-child(even) { background-color: var(--color-container-darker); } } .even\:bg-gray-50 { &:nth-child(even) { background-color: var(--color-gray-50); } } .even\:bg-gray-100 { &:nth-child(even) { background-color: var(--color-gray-100); } } .open\:flex { &:is([open], :popover-open, :open) { display: flex; } } .invalid\:ring-2 { &:invalid { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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); } } .invalid\:ring-red-500 { &:invalid { --tw-ring-color: var(--color-red-500); } } .empty\:hidden { &:empty { display: none; } } .focus-within\:ring-1 { &:focus-within { --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); } } .focus-within\:outline-none { &:focus-within { --tw-outline-style: none; outline-style: none; } } .hover\:z-20 { &:hover { @media (hover: hover) { z-index: 20; } } } .hover\:scale-\[1\.02\] { &:hover { @media (hover: hover) { scale: 1.02; } } } .hover\:cursor-not-allowed { &:hover { @media (hover: hover) { cursor: not-allowed; } } } .hover\:cursor-pointer { &:hover { @media (hover: hover) { cursor: pointer; } } } .hover\:border-2 { &:hover { @media (hover: hover) { border-style: var(--tw-border-style); border-width: 2px; } } } .hover\:border-black { &:hover { @media (hover: hover) { border-color: var(--color-black); } } } .hover\:border-black-h1 { &:hover { @media (hover: hover) { border-color: var(--color-black-h1); } } } .hover\:border-blue-500 { &:hover { @media (hover: hover) { border-color: var(--color-blue-500); } } } .hover\:border-blue-600 { &:hover { @media (hover: hover) { border-color: var(--color-blue-600); } } } .hover\:border-orange-h1 { &:hover { @media (hover: hover) { border-color: var(--color-orange-h1); } } } .hover\:border-primary { &:hover { @media (hover: hover) { border-color: var(--color-primary); } } } .hover\:border-primary\/10 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } } } } .hover\:border-slate-300 { &:hover { @media (hover: hover) { border-color: var(--color-slate-300); } } } .hover\:bg-black { &:hover { @media (hover: hover) { background-color: var(--color-black); } } } .hover\:bg-blue-100 { &:hover { @media (hover: hover) { background-color: var(--color-blue-100); } } } .hover\:bg-blue-200 { &:hover { @media (hover: hover) { background-color: var(--color-blue-200); } } } .hover\:bg-blue-600 { &:hover { @media (hover: hover) { background-color: var(--color-blue-600); } } } .hover\:bg-blue-600\/20 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-blue-600) 20%, transparent); } } } } .hover\:bg-blue-700 { &:hover { @media (hover: hover) { background-color: var(--color-blue-700); } } } .hover\:bg-blue-800 { &:hover { @media (hover: hover) { background-color: var(--color-blue-800); } } } .hover\:bg-container { &:hover { @media (hover: hover) { background-color: var(--color-container); } } } .hover\:bg-container-darker { &:hover { @media (hover: hover) { background-color: var(--color-container-darker); } } } .hover\:bg-gray-100 { &:hover { @media (hover: hover) { background-color: var(--color-gray-100); } } } .hover\:bg-gray-200 { &:hover { @media (hover: hover) { background-color: var(--color-gray-200); } } } .hover\:bg-gray-200\/50 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent); } } } } .hover\:bg-gray-600 { &:hover { @media (hover: hover) { background-color: var(--color-gray-600); } } } .hover\:bg-orange-h1 { &:hover { @media (hover: hover) { background-color: var(--color-orange-h1); } } } .hover\:bg-orange-h1\/50 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #FB4B02 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-orange-h1) 50%, transparent); } } } } .hover\:bg-primary { &:hover { @media (hover: hover) { &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } } } } .hover\:bg-primary { &:hover { @media (hover: hover) { background-color: var(--color-primary); } } } .hover\:bg-primary\/10 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } } } } .hover\:bg-primary\/20 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } } } } .hover\:bg-primary\/60 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 60%, transparent); } } } } .hover\:bg-slate-100 { &:hover { @media (hover: hover) { background-color: var(--color-slate-100); } } } .hover\:bg-slate-200 { &:hover { @media (hover: hover) { background-color: var(--color-slate-200); } } } .hover\:bg-transparent { &:hover { @media (hover: hover) { background-color: transparent; } } } .hover\:bg-white { &:hover { @media (hover: hover) { background-color: var(--color-white); } } } .hover\:stroke-red-600 { &:hover { @media (hover: hover) { stroke: var(--color-red-600); } } } .hover\:font-semibold { &:hover { @media (hover: hover) { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } } } .hover\:\!text-white { &:hover { @media (hover: hover) { color: var(--color-white) !important; } } } .hover\:text-black { &:hover { @media (hover: hover) { color: var(--color-black); } } } .hover\:text-black-h1 { &:hover { @media (hover: hover) { color: var(--color-black-h1); } } } .hover\:text-blue-500 { &:hover { @media (hover: hover) { color: var(--color-blue-500); } } } .hover\:text-blue-600 { &:hover { @media (hover: hover) { color: var(--color-blue-600); } } } .hover\:text-blue-700 { &:hover { @media (hover: hover) { color: var(--color-blue-700); } } } .hover\:text-fg { &:hover { @media (hover: hover) { color: var(--color-fg); } } } .hover\:text-gray-400 { &:hover { @media (hover: hover) { color: var(--color-gray-400); } } } .hover\:text-gray-500 { &:hover { @media (hover: hover) { color: var(--color-gray-500); } } } .hover\:text-gray-600 { &:hover { @media (hover: hover) { color: var(--color-gray-600); } } } .hover\:text-orange-h1 { &:hover { @media (hover: hover) { color: var(--color-orange-h1); } } } .hover\:text-primary { &:hover { @media (hover: hover) { color: var(--color-primary); } } } .hover\:text-red-400 { &:hover { @media (hover: hover) { color: var(--color-red-400); } } } .hover\:text-red-600 { &:hover { @media (hover: hover) { color: var(--color-red-600); } } } .hover\:text-red-700 { &:hover { @media (hover: hover) { color: var(--color-red-700); } } } .hover\:text-red-800 { &:hover { @media (hover: hover) { color: var(--color-red-800); } } } .hover\:text-secondary { &:hover { @media (hover: hover) { color: var(--color-secondary); } } } .hover\:text-secondary-darker { &:hover { @media (hover: hover) { color: var(--color-secondary-darker); } } } .hover\:text-sky-600 { &:hover { @media (hover: hover) { color: var(--color-sky-600); } } } .hover\:text-slate-800 { &:hover { @media (hover: hover) { color: var(--color-slate-800); } } } .hover\:text-white { &:hover { @media (hover: hover) { color: var(--color-white); } } } .hover\:text-yellow-500 { &:hover { @media (hover: hover) { color: var(--color-yellow-500); } } } .hover\:no-underline { &:hover { @media (hover: hover) { text-decoration-line: none; } } } .hover\:underline { &:hover { @media (hover: hover) { text-decoration-line: underline; } } } .hover\:\!opacity-80 { &:hover { @media (hover: hover) { opacity: 80% !important; } } } .hover\:opacity-100 { &:hover { @media (hover: hover) { opacity: 100%; } } } .hover\:shadow { &:hover { @media (hover: hover) { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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); } } } .hover\:shadow-$--box-shadow-brandhover$ { &:hover { @media (hover: hover) { --tw-shadow: var(--box-shadow-brandhover); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-lg { &:hover { @media (hover: hover) { --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); } } } .hover\:shadow-md { &:hover { @media (hover: hover) { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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); } } } .hover\:shadow-none { &:hover { @media (hover: hover) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-sm { &:hover { @media (hover: hover) { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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); } } } .hover\:shadow-primary\/30 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 30%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:brightness-125 { &:hover { @media (hover: hover) { --tw-brightness: brightness(125%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } } } .hover\:drop-shadow-md { &:hover { @media (hover: hover) { --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12))); --tw-drop-shadow: drop-shadow(var(--drop-shadow-md)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } } } .hover\:duration-300 { &:hover { @media (hover: hover) { --tw-duration: 300ms; transition-duration: 300ms; } } } .hover\:\[-moz-appearance\:auto\] { &:hover { @media (hover: hover) { -moz-appearance: auto; } } } .hover\:before\:translate-x-\[-1px\] { &:hover { @media (hover: hover) { &::before { content: var(--tw-content); --tw-translate-x: -1px; translate: var(--tw-translate-x) var(--tw-translate-y); } } } } .focus\:not-sr-only { &:focus { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip-path: none; white-space: normal; } } .focus\:absolute { &:focus { position: absolute; } } .focus\:z-10 { &:focus { z-index: 10; } } .focus\:z-30 { &:focus { z-index: 30; } } .focus\:z-40 { &:focus { z-index: 40; } } .focus\:btn { &:focus { --btn-stroke: #0000; --btn-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 10%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in srgb, var(--color-primary) 10%, #0000); } --btn-hover-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 20%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-hover-bg: color-mix(in srgb, var(--color-primary) 20%, #0000); } --btn-active-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 30%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-active-bg: color-mix(in srgb, var(--color-primary) 30%, #0000); } --btn-color: var(--color-fg); display: inline-flex; justify-content: center; align-items: center; gap: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 4); border-radius: var(--radius-lg); border-width: 2px; border-color: var(--btn-stroke); background-color: var(--btn-bg); color: var(--btn-color); font-weight: 500; user-select: none; vertical-align: middle; transition-property: color, background-color, border-color, outline-color; transition-timing-function: var(--default-transition-timing-function); transition-duration: var(--default-transition-duration); &:hover { border-color: var(--btn-hover-stroke, var(--btn-stroke)); background-color: var(--btn-hover-bg, var(--btn-bg)); color: var(--btn-hover-color, var(--btn-color)); text-decoration: none; } &:is(:active, .is-active, [aria-current="page"], [aria-current="true"]) { border-color: var(--btn-active-stroke, var(--btn-stroke)); background-color: var(--btn-active-bg, var(--btn-bg)); color: var(--btn-active-color, var(--btn-color)); } &:is(:disabled, [aria-disabled="true"]) { border-color: var(--btn-disabled-stroke, var(--color-gray-200)); background-color: var(--btn-disabled-bg, var(--color-gray-50)); color: var(--btn-disabled-color, var(--color-gray-500)); } } } .focus\:border { &:focus { border-style: var(--tw-border-style); border-width: 1px; } } .focus\:border-0 { &:focus { border-style: var(--tw-border-style); border-width: 0px; } } .focus\:border-2 { &:focus { border-style: var(--tw-border-style); border-width: 2px; } } .focus\:border-none { &:focus { --tw-border-style: none; border-style: none; } } .focus\:border-solid { &:focus { --tw-border-style: solid; border-style: solid; } } .focus\:border-\[\#17171529\] { &:focus { border-color: #17171529; } } .focus\:border-black { &:focus { border-color: var(--color-black); } } .focus\:border-black-h2 { &:focus { border-color: var(--color-black-h2); } } .focus\:border-black\/10 { &:focus { border-color: color-mix(in srgb, #000 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black) 10%, transparent); } } } .focus\:border-black\/15 { &:focus { border-color: color-mix(in srgb, #000 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black) 15%, transparent); } } } .focus\:border-blue-300 { &:focus { border-color: var(--color-blue-300); } } .focus\:border-blue-500 { &:focus { border-color: var(--color-blue-500); } } .focus\:border-gray-300 { &:focus { border-color: var(--color-gray-300); } } .focus\:border-primary { &:focus { border-color: var(--color-primary); } } .focus\:border-primary-lighter { &:focus { border-color: var(--color-primary-lighter); } } .focus\:border-red-500 { &:focus { border-color: var(--color-red-500); } } .focus\:border-transparent { &:focus { border-color: transparent; } } .focus\:bg-white { &:focus { background-color: var(--color-white); } } .focus\:bg-none { &:focus { background-image: none; } } .focus\:p-2 { &:focus { padding: calc(var(--spacing) * 2); } } .focus\:text-gray-600 { &:focus { color: var(--color-gray-600); } } .focus\:text-primary { &:focus { color: var(--color-primary); } } .focus\:shadow-none { &:focus { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus\:ring { &:focus { --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); } } .focus\:ring-0 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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); } } .focus\:ring-1 { &:focus { --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); } } .focus\:ring-2 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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); } } .focus\:shadow-primary\/30 { &:focus { --tw-shadow-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 30%, transparent) var(--tw-shadow-alpha), transparent); } } } .focus\:ring-blue-500 { &:focus { --tw-ring-color: var(--color-blue-500); } } .focus\:ring-primary { &:focus { --tw-ring-color: var(--color-primary); } } .focus\:ring-red-500 { &:focus { --tw-ring-color: var(--color-red-500); } } .focus\:ring-offset-2 { &:focus { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } } .focus\:outline-hidden { &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } } } .focus\:outline { &:focus { outline-style: var(--tw-outline-style); outline-width: 1px; } } .focus\:outline-0 { &:focus { outline-style: var(--tw-outline-style); outline-width: 0px; } } .focus\:outline-2 { &:focus { outline-style: var(--tw-outline-style); outline-width: 2px; } } .focus\:outline-blue-500 { &:focus { outline-color: var(--color-blue-500); } } .focus\:drop-shadow-md { &:focus { --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12))); --tw-drop-shadow: drop-shadow(var(--drop-shadow-md)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } } .focus\:btn-secondary { &:focus { --btn-stroke: var(--color-primary-lighter); --btn-bg: var(--color-on-primary); --btn-color: var(--color-primary-darker); --btn-hover-stroke: var(--color-primary-lighter); --btn-hover-bg: var(--color-on-primary); --btn-hover-color: var(--color-primary-lighter); --btn-active-stroke: #0000; --btn-active-bg: var(--color-primary); --btn-active-color: var(--color-on-primary); } } .focus\:outline-none { &:focus { --tw-outline-style: none; outline-style: none; } } .focus\:ring-opacity-50 { &:focus { --tw-ring-opacity: 50; } } .active\:bg-gray-100 { &:active { background-color: var(--color-gray-100); } } .active\:text-gray-500 { &:active { color: var(--color-gray-500); } } .active\:text-gray-700 { &:active { color: var(--color-gray-700); } } .active\:opacity-70 { &:active { opacity: 70%; } } .active\:ring-0 { &:active { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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); } } .disabled\:pointer-events-none { &:disabled { pointer-events: none; } } .disabled\:invisible { &:disabled { visibility: hidden; } } .disabled\:cursor-not-allowed { &:disabled { cursor: not-allowed; } } .disabled\:border-black { &:disabled { border-color: var(--color-black); } } .disabled\:border-gray-400 { &:disabled { border-color: var(--color-gray-400); } } .disabled\:border-primary\/50 { &:disabled { border-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 50%, transparent); } } } .disabled\:bg-gray-100 { &:disabled { background-color: var(--color-gray-100); } } .disabled\:text-black { &:disabled { color: var(--color-black); } } .disabled\:text-primary { &:disabled { color: var(--color-primary); } } .disabled\:opacity-30 { &:disabled { opacity: 30%; } } .disabled\:opacity-50 { &:disabled { opacity: 50%; } } .disabled\:opacity-70 { &:disabled { opacity: 70%; } } .disabled\:opacity-75 { &:disabled { opacity: 75%; } } .disabled\:opacity-\[12\%\] { &:disabled { opacity: 12%; } } .has-\[\:focus-visible\]\:outline-2 { &:has(*:is(:focus-visible)) { outline-style: var(--tw-outline-style); outline-width: 2px; } } .has-\[input\:checked\]\:shadow-none { &:has(*:is(input:checked)) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .has-\[input\:checked\]\:outline-none { &:has(*:is(input:checked)) { --tw-outline-style: none; outline-style: none; } } .aria-expanded\:border-b-2 { &[aria-expanded="true"] { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } } .aria-expanded\:border-solid { &[aria-expanded="true"] { --tw-border-style: solid; border-style: solid; } } .aria-expanded\:border-current { &[aria-expanded="true"] { border-color: currentcolor; } } .aria-expanded\:font-medium { &[aria-expanded="true"] { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } } .aria-expanded\:\!text-primary { &[aria-expanded="true"] { color: var(--color-primary) !important; } } .aria-expanded\:text-black-h1 { &[aria-expanded="true"] { color: var(--color-black-h1); } } .aria-expanded\:text-primary { &[aria-expanded="true"] { color: var(--color-primary); } } .aria-expanded\:opacity-100 { &[aria-expanded="true"] { opacity: 100%; } } .aria-expanded\:after\:border-inherit { &[aria-expanded="true"] { &::after { content: var(--tw-content); border-color: inherit; } } } .aria-\[current\=page\]\:font-medium { &[aria-current="page"] { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } } .data-\[active\]\:border-primary { &[data-active] { border-color: var(--color-primary); } } .data-\[has-current\]\:font-medium { &[data-has-current] { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } } .motion-reduce\:duration-0 { @media (prefers-reduced-motion: reduce) { --tw-duration: 0ms; transition-duration: 0ms; } } .max-lg\:w-\[140px\] { @media (width < 1024px) { width: 140px; } } .max-lg\:text-center { @media (width < 1024px) { text-align: center; } } .max-md\:top-4 { @media (width < 768px) { top: calc(var(--spacing) * 4); } } .max-md\:order-2 { @media (width < 768px) { order: 2; } } .max-md\:order-3 { @media (width < 768px) { order: 3; } } .max-md\:my-3 { @media (width < 768px) { margin-block: calc(var(--spacing) * 3); } } .max-md\:mb-0 { @media (width < 768px) { margin-bottom: calc(var(--spacing) * 0); } } .max-md\:block { @media (width < 768px) { display: block; } } .max-md\:flex { @media (width < 768px) { display: flex; } } .max-md\:hidden { @media (width < 768px) { display: none; } } .max-md\:h-90\% { @media (width < 768px) { height: var(--spacing-90\%); } } .max-md\:w-90\% { @media (width < 768px) { width: var(--spacing-90\%); } } .max-md\:w-full { @media (width < 768px) { width: 100%; } } .max-md\:flex-1 { @media (width < 768px) { flex: 1; } } .max-md\:flex-row { @media (width < 768px) { flex-direction: row; } } .max-md\:justify-around { @media (width < 768px) { justify-content: space-around; } } .max-md\:justify-between { @media (width < 768px) { justify-content: space-between; } } .max-md\:rounded-none { @media (width < 768px) { border-radius: 0; } } .max-md\:bg-black-h1\/10 { @media (width < 768px) { background-color: color-mix(in srgb, #1A1918 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black-h1) 10%, transparent); } } } .max-md\:p-0 { @media (width < 768px) { padding: calc(var(--spacing) * 0); } } .max-md\:px-2\.5 { @media (width < 768px) { padding-inline: calc(var(--spacing) * 2.5); } } .max-md\:pb-0 { @media (width < 768px) { padding-bottom: calc(var(--spacing) * 0); } } .max-md\:pl-6 { @media (width < 768px) { padding-left: calc(var(--spacing) * 6); } } .max-md\:text-xs { @media (width < 768px) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .max-md\:text-10px { @media (width < 768px) { font-size: var(--text-10px); } } .max-md\:shadow-none { @media (width < 768px) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .max-sm\:order-2 { @media (width < 640px) { order: 2; } } .max-sm\:w-full { @media (width < 640px) { width: 100%; } } .max-sm\:flex-col { @media (width < 640px) { flex-direction: column; } } .max-sx\:order-1 { @media (width < 500px) { order: 1; } } .max-sx\:order-2 { @media (width < 500px) { order: 2; } } .max-sx\:order-3 { @media (width < 500px) { order: 3; } } .max-sx\:my-2 { @media (width < 500px) { margin-block: calc(var(--spacing) * 2); } } .max-sx\:mt-0 { @media (width < 500px) { margin-top: calc(var(--spacing) * 0); } } .max-sx\:mt-2 { @media (width < 500px) { margin-top: calc(var(--spacing) * 2); } } .max-sx\:mt-3 { @media (width < 500px) { margin-top: calc(var(--spacing) * 3); } } .max-sx\:mt-6 { @media (width < 500px) { margin-top: calc(var(--spacing) * 6); } } .max-sx\:\!mb-5 { @media (width < 500px) { margin-bottom: calc(var(--spacing) * 5) !important; } } .max-sx\:mb-10 { @media (width < 500px) { margin-bottom: calc(var(--spacing) * 10); } } .max-sx\:\!hidden { @media (width < 500px) { display: none !important; } } .max-sx\:block { @media (width < 500px) { display: block; } } .max-sx\:flex { @media (width < 500px) { display: flex; } } .max-sx\:hidden { @media (width < 500px) { display: none; } } .max-sx\:w-8 { @media (width < 500px) { width: calc(var(--spacing) * 8); } } .max-sx\:w-\[75px\] { @media (width < 500px) { width: 75px; } } .max-sx\:w-full { @media (width < 500px) { width: 100%; } } .max-sx\:flex-col { @media (width < 500px) { flex-direction: column; } } .max-sx\:flex-wrap { @media (width < 500px) { flex-wrap: wrap; } } .max-sx\:justify-between { @media (width < 500px) { justify-content: space-between; } } .max-sx\:justify-start { @media (width < 500px) { justify-content: flex-start; } } .max-sx\:gap-2 { @media (width < 500px) { gap: calc(var(--spacing) * 2); } } .max-sx\:rounded-none { @media (width < 500px) { border-radius: 0; } } .max-sx\:px-0 { @media (width < 500px) { padding-inline: calc(var(--spacing) * 0); } } .max-sx\:pl-4 { @media (width < 500px) { padding-left: calc(var(--spacing) * 4); } } .max-sx\:text-base { @media (width < 500px) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .max-sx\:text-xl { @media (width < 500px) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .max-sx\:text-xs { @media (width < 500px) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .sx\:fixed { @media (width >= 500px) { position: fixed; } } .sx\:-top-0\.5 { @media (width >= 500px) { top: calc(var(--spacing) * -0.5); } } .sx\:top-0 { @media (width >= 500px) { top: calc(var(--spacing) * 0); } } .sx\:top-2 { @media (width >= 500px) { top: calc(var(--spacing) * 2); } } .sx\:right-auto { @media (width >= 500px) { right: auto; } } .sx\:left-3 { @media (width >= 500px) { left: calc(var(--spacing) * 3); } } .sx\:z-\[99\] { @media (width >= 500px) { z-index: 99; } } .sx\:order-1 { @media (width >= 500px) { order: 1; } } .sx\:order-2 { @media (width >= 500px) { order: 2; } } .sx\:order-3 { @media (width >= 500px) { order: 3; } } .sx\:mx-auto { @media (width >= 500px) { margin-inline: auto; } } .sx\:my-2 { @media (width >= 500px) { margin-block: calc(var(--spacing) * 2); } } .sx\:my-5 { @media (width >= 500px) { margin-block: calc(var(--spacing) * 5); } } .sx\:mt-0 { @media (width >= 500px) { margin-top: calc(var(--spacing) * 0); } } .sx\:mt-2 { @media (width >= 500px) { margin-top: calc(var(--spacing) * 2); } } .sx\:mt-3 { @media (width >= 500px) { margin-top: calc(var(--spacing) * 3); } } .sx\:mt-4 { @media (width >= 500px) { margin-top: calc(var(--spacing) * 4); } } .sx\:mt-6 { @media (width >= 500px) { margin-top: calc(var(--spacing) * 6); } } .sx\:mt-8 { @media (width >= 500px) { margin-top: calc(var(--spacing) * 8); } } .sx\:mt-10 { @media (width >= 500px) { margin-top: calc(var(--spacing) * 10); } } .sx\:mt-14 { @media (width >= 500px) { margin-top: calc(var(--spacing) * 14); } } .sx\:\!mb-5 { @media (width >= 500px) { margin-bottom: calc(var(--spacing) * 5) !important; } } .sx\:mb-0 { @media (width >= 500px) { margin-bottom: calc(var(--spacing) * 0); } } .sx\:mb-10 { @media (width >= 500px) { margin-bottom: calc(var(--spacing) * 10); } } .sx\:mb-12 { @media (width >= 500px) { margin-bottom: calc(var(--spacing) * 12); } } .sx\:line-clamp-3 { @media (width >= 500px) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } } .sx\:\!block { @media (width >= 500px) { display: block !important; } } .sx\:\!hidden { @media (width >= 500px) { display: none !important; } } .sx\:block { @media (width >= 500px) { display: block; } } .sx\:flex { @media (width >= 500px) { display: flex; } } .sx\:hidden { @media (width >= 500px) { display: none; } } .sx\:h-22px { @media (width >= 500px) { height: var(--spacing-22px); } } .sx\:h-\[84\%\] { @media (width >= 500px) { height: 84%; } } .sx\:\!min-h-max { @media (width >= 500px) { min-height: max-content !important; } } .sx\:w-8 { @media (width >= 500px) { width: calc(var(--spacing) * 8); } } .sx\:w-120px { @media (width >= 500px) { width: var(--spacing-120px); } } .sx\:w-\[75px\] { @media (width >= 500px) { width: 75px; } } .sx\:w-\[86px\] { @media (width >= 500px) { width: 86px; } } .sx\:w-full { @media (width >= 500px) { width: 100%; } } .sx\:min-w-5 { @media (width >= 500px) { min-width: calc(var(--spacing) * 5); } } .sx\:min-w-\[302px\] { @media (width >= 500px) { min-width: 302px; } } .sx\:flex-none { @media (width >= 500px) { flex: none; } } .sx\:flex-col { @media (width >= 500px) { flex-direction: column; } } .sx\:flex-nowrap { @media (width >= 500px) { flex-wrap: nowrap; } } .sx\:flex-wrap { @media (width >= 500px) { flex-wrap: wrap; } } .sx\:justify-between { @media (width >= 500px) { justify-content: space-between; } } .sx\:justify-start { @media (width >= 500px) { justify-content: flex-start; } } .sx\:gap-2 { @media (width >= 500px) { gap: calc(var(--spacing) * 2); } } .sx\:overflow-auto { @media (width >= 500px) { overflow: auto; } } .sx\:rounded-none { @media (width >= 500px) { border-radius: 0; } } .sx\:border-0 { @media (width >= 500px) { border-style: var(--tw-border-style); border-width: 0px; } } .sx\:bg-white { @media (width >= 500px) { background-color: var(--color-white); } } .sx\:p-0 { @media (width >= 500px) { padding: calc(var(--spacing) * 0); } } .sx\:\!px-6 { @media (width >= 500px) { padding-inline: calc(var(--spacing) * 6) !important; } } .sx\:px-0 { @media (width >= 500px) { padding-inline: calc(var(--spacing) * 0); } } .sx\:px-4 { @media (width >= 500px) { padding-inline: calc(var(--spacing) * 4); } } .sx\:px-6 { @media (width >= 500px) { padding-inline: calc(var(--spacing) * 6); } } .sx\:py-0 { @media (width >= 500px) { padding-block: calc(var(--spacing) * 0); } } .sx\:py-6 { @media (width >= 500px) { padding-block: calc(var(--spacing) * 6); } } .sx\:pt-8 { @media (width >= 500px) { padding-top: calc(var(--spacing) * 8); } } .sx\:pr-1 { @media (width >= 500px) { padding-right: calc(var(--spacing) * 1); } } .sx\:pb-2 { @media (width >= 500px) { padding-bottom: calc(var(--spacing) * 2); } } .sx\:pb-3 { @media (width >= 500px) { padding-bottom: calc(var(--spacing) * 3); } } .sx\:pb-10 { @media (width >= 500px) { padding-bottom: calc(var(--spacing) * 10); } } .sx\:pl-4 { @media (width >= 500px) { padding-left: calc(var(--spacing) * 4); } } .sx\:text-center { @media (width >= 500px) { text-align: center; } } .sx\:text-2xl { @media (width >= 500px) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .sx\:text-base { @media (width >= 500px) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .sx\:text-sm { @media (width >= 500px) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .sx\:text-xl { @media (width >= 500px) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .sx\:text-xs { @media (width >= 500px) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .sx\:font-normal { @media (width >= 500px) { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } } .sx\:font-semibold { @media (width >= 500px) { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } } .sx\:shadow-none { @media (width >= 500px) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .sm\:static { @media (width >= 640px) { position: static; } } .sm\:top-16 { @media (width >= 640px) { top: calc(var(--spacing) * 16); } } .sm\:order-1 { @media (width >= 640px) { order: 1; } } .sm\:order-2 { @media (width >= 640px) { order: 2; } } .sm\:order-3 { @media (width >= 640px) { order: 3; } } .sm\:col-span-2 { @media (width >= 640px) { grid-column: span 2 / span 2; } } .sm\:col-span-6 { @media (width >= 640px) { grid-column: span 6 / span 6; } } .sm\:mx-2 { @media (width >= 640px) { margin-inline: calc(var(--spacing) * 2); } } .sm\:mx-2\.5 { @media (width >= 640px) { margin-inline: calc(var(--spacing) * 2.5); } } .sm\:mx-4 { @media (width >= 640px) { margin-inline: calc(var(--spacing) * 4); } } .sm\:my-0 { @media (width >= 640px) { margin-block: calc(var(--spacing) * 0); } } .sm\:mt-0 { @media (width >= 640px) { margin-top: calc(var(--spacing) * 0); } } .sm\:mt-10 { @media (width >= 640px) { margin-top: calc(var(--spacing) * 10); } } .sm\:mt-16 { @media (width >= 640px) { margin-top: calc(var(--spacing) * 16); } } .sm\:mt-auto { @media (width >= 640px) { margin-top: auto; } } .sm\:mr-0 { @media (width >= 640px) { margin-right: calc(var(--spacing) * 0); } } .sm\:mr-8 { @media (width >= 640px) { margin-right: calc(var(--spacing) * 8); } } .sm\:mb-0 { @media (width >= 640px) { margin-bottom: calc(var(--spacing) * 0); } } .sm\:mb-6 { @media (width >= 640px) { margin-bottom: calc(var(--spacing) * 6); } } .sm\:mb-10 { @media (width >= 640px) { margin-bottom: calc(var(--spacing) * 10); } } .sm\:mb-60px { @media (width >= 640px) { margin-bottom: var(--spacing-60px); } } .sm\:ml-0 { @media (width >= 640px) { margin-left: calc(var(--spacing) * 0); } } .sm\:ml-2 { @media (width >= 640px) { margin-left: calc(var(--spacing) * 2); } } .sm\:ml-2\.5 { @media (width >= 640px) { margin-left: calc(var(--spacing) * 2.5); } } .sm\:ml-3 { @media (width >= 640px) { margin-left: calc(var(--spacing) * 3); } } .sm\:ml-6 { @media (width >= 640px) { margin-left: calc(var(--spacing) * 6); } } .sm\:ml-auto { @media (width >= 640px) { margin-left: auto; } } .sm\:\!block { @media (width >= 640px) { display: block !important; } } .sm\:block { @media (width >= 640px) { display: block; } } .sm\:flex { @media (width >= 640px) { display: flex; } } .sm\:hidden { @media (width >= 640px) { display: none; } } .sm\:inline { @media (width >= 640px) { display: inline; } } .sm\:inline-flex { @media (width >= 640px) { display: inline-flex; } } .sm\:h-3 { @media (width >= 640px) { height: calc(var(--spacing) * 3); } } .sm\:h-12 { @media (width >= 640px) { height: calc(var(--spacing) * 12); } } .sm\:h-18 { @media (width >= 640px) { height: calc(var(--spacing) * 18); } } .sm\:max-h-\[50vh\] { @media (width >= 640px) { max-height: 50vh; } } .sm\:max-h-full { @media (width >= 640px) { max-height: 100%; } } .sm\:w-1\/2 { @media (width >= 640px) { width: calc(1/2 * 100%); } } .sm\:w-1\/3 { @media (width >= 640px) { width: calc(1/3 * 100%); } } .sm\:w-1\/4 { @media (width >= 640px) { width: calc(1/4 * 100%); } } .sm\:w-1\/5 { @media (width >= 640px) { width: calc(1/5 * 100%); } } .sm\:w-2\/4 { @media (width >= 640px) { width: calc(2/4 * 100%); } } .sm\:w-2\/5 { @media (width >= 640px) { width: calc(2/5 * 100%); } } .sm\:w-3 { @media (width >= 640px) { width: calc(var(--spacing) * 3); } } .sm\:w-3\/12 { @media (width >= 640px) { width: calc(3/12 * 100%); } } .sm\:w-18 { @media (width >= 640px) { width: calc(var(--spacing) * 18); } } .sm\:w-20 { @media (width >= 640px) { width: calc(var(--spacing) * 20); } } .sm\:w-48 { @media (width >= 640px) { width: calc(var(--spacing) * 48); } } .sm\:w-56 { @media (width >= 640px) { width: calc(var(--spacing) * 56); } } .sm\:w-96 { @media (width >= 640px) { width: calc(var(--spacing) * 96); } } .sm\:w-\[48\%\] { @media (width >= 640px) { width: 48%; } } .sm\:w-\[393px\] { @media (width >= 640px) { width: 393px; } } .sm\:w-auto { @media (width >= 640px) { width: auto; } } .sm\:w-fit { @media (width >= 640px) { width: fit-content; } } .sm\:w-full { @media (width >= 640px) { width: 100%; } } .sm\:min-w-\[300px\] { @media (width >= 640px) { min-width: 300px; } } .sm\:min-w-\[550px\] { @media (width >= 640px) { min-width: 550px; } } .sm\:flex-1 { @media (width >= 640px) { flex: 1; } } .sm\:table-fixed { @media (width >= 640px) { table-layout: fixed; } } .sm\:cursor-pointer { @media (width >= 640px) { cursor: pointer; } } .sm\:grid-cols-2 { @media (width >= 640px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sm\:grid-cols-4 { @media (width >= 640px) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .sm\:grid-cols-8 { @media (width >= 640px) { grid-template-columns: repeat(8, minmax(0, 1fr)); } } .sm\:flex-row { @media (width >= 640px) { flex-direction: row; } } .sm\:flex-nowrap { @media (width >= 640px) { flex-wrap: nowrap; } } .sm\:items-start { @media (width >= 640px) { align-items: flex-start; } } .sm\:justify-between { @media (width >= 640px) { justify-content: space-between; } } .sm\:gap-2 { @media (width >= 640px) { gap: calc(var(--spacing) * 2); } } .sm\:gap-3 { @media (width >= 640px) { gap: calc(var(--spacing) * 3); } } .sm\:overflow-hidden { @media (width >= 640px) { overflow: hidden; } } .sm\:border-0 { @media (width >= 640px) { border-style: var(--tw-border-style); border-width: 0px; } } .sm\:border-\[1\.2px\] { @media (width >= 640px) { border-style: var(--tw-border-style); border-width: 1.2px; } } .sm\:border-t { @media (width >= 640px) { border-top-style: var(--tw-border-style); border-top-width: 1px; } } .sm\:border-solid { @media (width >= 640px) { --tw-border-style: solid; border-style: solid; } } .sm\:\!p-10 { @media (width >= 640px) { padding: calc(var(--spacing) * 10) !important; } } .sm\:p-8 { @media (width >= 640px) { padding: calc(var(--spacing) * 8); } } .sm\:p-16 { @media (width >= 640px) { padding: calc(var(--spacing) * 16); } } .sm\:px-0 { @media (width >= 640px) { padding-inline: calc(var(--spacing) * 0); } } .sm\:px-5 { @media (width >= 640px) { padding-inline: calc(var(--spacing) * 5); } } .sm\:px-6 { @media (width >= 640px) { padding-inline: calc(var(--spacing) * 6); } } .sm\:px-12 { @media (width >= 640px) { padding-inline: calc(var(--spacing) * 12); } } .sm\:py-1 { @media (width >= 640px) { padding-block: calc(var(--spacing) * 1); } } .sm\:py-3 { @media (width >= 640px) { padding-block: calc(var(--spacing) * 3); } } .sm\:pt-0 { @media (width >= 640px) { padding-top: calc(var(--spacing) * 0); } } .sm\:pt-11 { @media (width >= 640px) { padding-top: calc(var(--spacing) * 11); } } .sm\:pt-12 { @media (width >= 640px) { padding-top: calc(var(--spacing) * 12); } } .sm\:pr-10 { @media (width >= 640px) { padding-right: calc(var(--spacing) * 10); } } .sm\:pr-12 { @media (width >= 640px) { padding-right: calc(var(--spacing) * 12); } } .sm\:pb-0 { @media (width >= 640px) { padding-bottom: calc(var(--spacing) * 0); } } .sm\:pb-3\.5 { @media (width >= 640px) { padding-bottom: calc(var(--spacing) * 3.5); } } .sm\:pb-8 { @media (width >= 640px) { padding-bottom: calc(var(--spacing) * 8); } } .sm\:pb-10 { @media (width >= 640px) { padding-bottom: calc(var(--spacing) * 10); } } .sm\:pl-12 { @media (width >= 640px) { padding-left: calc(var(--spacing) * 12); } } .sm\:text-center { @media (width >= 640px) { text-align: center; } } .sm\:text-left { @media (width >= 640px) { text-align: left; } } .sm\:text-right { @media (width >= 640px) { text-align: right; } } .sm\:text-2xl { @media (width >= 640px) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .sm\:text-5xl { @media (width >= 640px) { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } .sm\:text-base { @media (width >= 640px) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .sm\:text-xs { @media (width >= 640px) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .sm\:uppercase { @media (width >= 640px) { text-transform: uppercase; } } .sm\:duration-700 { @media (width >= 640px) { --tw-duration: 700ms; transition-duration: 700ms; } } .md\:invisible { @media (width >= 768px) { visibility: hidden; } } .md\:visible { @media (width >= 768px) { visibility: visible; } } .md\:sr-only { @media (width >= 768px) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } } .md\:absolute { @media (width >= 768px) { position: absolute; } } .md\:relative { @media (width >= 768px) { position: relative; } } .md\:static { @media (width >= 768px) { position: static; } } .md\:-top-4 { @media (width >= 768px) { top: calc(var(--spacing) * -4); } } .md\:top-0 { @media (width >= 768px) { top: calc(var(--spacing) * 0); } } .md\:top-1\/2 { @media (width >= 768px) { top: calc(1/2 * 100%); } } .md\:top-3 { @media (width >= 768px) { top: calc(var(--spacing) * 3); } } .md\:top-11 { @media (width >= 768px) { top: calc(var(--spacing) * 11); } } .md\:top-auto { @media (width >= 768px) { top: auto; } } .md\:top-full { @media (width >= 768px) { top: 100%; } } .md\:right-0 { @media (width >= 768px) { right: calc(var(--spacing) * 0); } } .md\:right-auto { @media (width >= 768px) { right: auto; } } .md\:bottom-0 { @media (width >= 768px) { bottom: calc(var(--spacing) * 0); } } .md\:bottom-6 { @media (width >= 768px) { bottom: calc(var(--spacing) * 6); } } .md\:bottom-auto { @media (width >= 768px) { bottom: auto; } } .md\:left-0 { @media (width >= 768px) { left: calc(var(--spacing) * 0); } } .md\:left-1\/2 { @media (width >= 768px) { left: calc(1/2 * 100%); } } .md\:left-\[86px\] { @media (width >= 768px) { left: 86px; } } .md\:left-auto { @media (width >= 768px) { left: auto; } } .md\:z-0 { @media (width >= 768px) { z-index: 0; } } .md\:z-auto { @media (width >= 768px) { z-index: auto; } } .md\:order-1 { @media (width >= 768px) { order: 1; } } .md\:order-2 { @media (width >= 768px) { order: 2; } } .md\:order-3 { @media (width >= 768px) { order: 3; } } .md\:order-none { @media (width >= 768px) { order: 0; } } .md\:col-span-1 { @media (width >= 768px) { grid-column: span 1 / span 1; } } .md\:col-span-3 { @media (width >= 768px) { grid-column: span 3 / span 3; } } .md\:col-span-full { @media (width >= 768px) { grid-column: 1 / -1; } } .md\:col-start-1 { @media (width >= 768px) { grid-column-start: 1; } } .md\:row-span-2 { @media (width >= 768px) { grid-row: span 2 / span 2; } } .md\:row-start-1 { @media (width >= 768px) { grid-row-start: 1; } } .md\:mx-0 { @media (width >= 768px) { margin-inline: calc(var(--spacing) * 0); } } .md\:mx-2 { @media (width >= 768px) { margin-inline: calc(var(--spacing) * 2); } } .md\:mx-3 { @media (width >= 768px) { margin-inline: calc(var(--spacing) * 3); } } .md\:mx-4 { @media (width >= 768px) { margin-inline: calc(var(--spacing) * 4); } } .md\:mx-auto { @media (width >= 768px) { margin-inline: auto; } } .md\:my-0 { @media (width >= 768px) { margin-block: calc(var(--spacing) * 0); } } .md\:my-10 { @media (width >= 768px) { margin-block: calc(var(--spacing) * 10); } } .md\:my-16 { @media (width >= 768px) { margin-block: calc(var(--spacing) * 16); } } .md\:me-0 { @media (width >= 768px) { margin-inline-end: calc(var(--spacing) * 0); } } .md\:-mt-1 { @media (width >= 768px) { margin-top: calc(var(--spacing) * -1); } } .md\:mt-0 { @media (width >= 768px) { margin-top: calc(var(--spacing) * 0); } } .md\:mt-4 { @media (width >= 768px) { margin-top: calc(var(--spacing) * 4); } } .md\:mt-5 { @media (width >= 768px) { margin-top: calc(var(--spacing) * 5); } } .md\:mt-8 { @media (width >= 768px) { margin-top: calc(var(--spacing) * 8); } } .md\:mt-10 { @media (width >= 768px) { margin-top: calc(var(--spacing) * 10); } } .md\:mt-14 { @media (width >= 768px) { margin-top: calc(var(--spacing) * 14); } } .md\:mt-20 { @media (width >= 768px) { margin-top: calc(var(--spacing) * 20); } } .md\:mt-\[15px\] { @media (width >= 768px) { margin-top: 15px; } } .md\:mt-\[86px\] { @media (width >= 768px) { margin-top: 86px; } } .md\:-mr-1 { @media (width >= 768px) { margin-right: calc(var(--spacing) * -1); } } .md\:mr-0 { @media (width >= 768px) { margin-right: calc(var(--spacing) * 0); } } .md\:mr-2\.5 { @media (width >= 768px) { margin-right: calc(var(--spacing) * 2.5); } } .md\:mr-5 { @media (width >= 768px) { margin-right: calc(var(--spacing) * 5); } } .md\:mb-0 { @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 0); } } .md\:mb-2\.5 { @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 2.5); } } .md\:mb-4 { @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 4); } } .md\:mb-5 { @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 5); } } .md\:mb-6 { @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 6); } } .md\:mb-8 { @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 8); } } .md\:mb-10 { @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 10); } } .md\:mb-12 { @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 12); } } .md\:mb-14 { @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 14); } } .md\:mb-16 { @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 16); } } .md\:mb-20 { @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 20); } } .md\:ml-0 { @media (width >= 768px) { margin-left: calc(var(--spacing) * 0); } } .md\:ml-2 { @media (width >= 768px) { margin-left: calc(var(--spacing) * 2); } } .md\:ml-auto { @media (width >= 768px) { margin-left: auto; } } .md\:\!flex { @media (width >= 768px) { display: flex !important; } } .md\:block { @media (width >= 768px) { display: block; } } .md\:flex { @media (width >= 768px) { display: flex; } } .md\:grid { @media (width >= 768px) { display: grid; } } .md\:hidden { @media (width >= 768px) { display: none; } } .md\:inline { @media (width >= 768px) { display: inline; } } .md\:inline-block { @media (width >= 768px) { display: inline-block; } } .md\:inline-flex { @media (width >= 768px) { display: inline-flex; } } .md\:h-5 { @media (width >= 768px) { height: calc(var(--spacing) * 5); } } .md\:h-6 { @media (width >= 768px) { height: calc(var(--spacing) * 6); } } .md\:h-10 { @media (width >= 768px) { height: calc(var(--spacing) * 10); } } .md\:h-20 { @media (width >= 768px) { height: calc(var(--spacing) * 20); } } .md\:h-24 { @media (width >= 768px) { height: calc(var(--spacing) * 24); } } .md\:h-36 { @media (width >= 768px) { height: calc(var(--spacing) * 36); } } .md\:h-224px { @media (width >= 768px) { height: var(--spacing-224px); } } .md\:h-\[60vh\] { @media (width >= 768px) { height: 60vh; } } .md\:h-\[80vh\] { @media (width >= 768px) { height: 80vh; } } .md\:h-\[300px\] { @media (width >= 768px) { height: 300px; } } .md\:h-\[600px\] { @media (width >= 768px) { height: 600px; } } .md\:h-auto { @media (width >= 768px) { height: auto; } } .md\:h-screen { @media (width >= 768px) { height: 100vh; } } .md\:max-h-\[85\%\] { @media (width >= 768px) { max-height: 85%; } } .md\:max-h-\[579px\] { @media (width >= 768px) { max-height: 579px; } } .md\:max-h-\[800px\] { @media (width >= 768px) { max-height: 800px; } } .md\:max-h-full { @media (width >= 768px) { max-height: 100%; } } .md\:min-h-8 { @media (width >= 768px) { min-height: calc(var(--spacing) * 8); } } .md\:min-h-12 { @media (width >= 768px) { min-height: calc(var(--spacing) * 12); } } .md\:min-h-48 { @media (width >= 768px) { min-height: calc(var(--spacing) * 48); } } .md\:min-h-\[279px\] { @media (width >= 768px) { min-height: 279px; } } .md\:\!w-28 { @media (width >= 768px) { width: calc(var(--spacing) * 28) !important; } } .md\:w-1\/2 { @media (width >= 768px) { width: calc(1/2 * 100%); } } .md\:w-1\/3 { @media (width >= 768px) { width: calc(1/3 * 100%); } } .md\:w-1\/4 { @media (width >= 768px) { width: calc(1/4 * 100%); } } .md\:w-1\/5 { @media (width >= 768px) { width: calc(1/5 * 100%); } } .md\:w-2\/3 { @media (width >= 768px) { width: calc(2/3 * 100%); } } .md\:w-2\/4 { @media (width >= 768px) { width: calc(2/4 * 100%); } } .md\:w-2\/5 { @media (width >= 768px) { width: calc(2/5 * 100%); } } .md\:w-2\/6 { @media (width >= 768px) { width: calc(2/6 * 100%); } } .md\:w-2xs { @media (width >= 768px) { width: var(--container-2xs); } } .md\:w-3\/4 { @media (width >= 768px) { width: calc(3/4 * 100%); } } .md\:w-3\/12 { @media (width >= 768px) { width: calc(3/12 * 100%); } } .md\:w-4\/4 { @media (width >= 768px) { width: calc(4/4 * 100%); } } .md\:w-4\/6 { @media (width >= 768px) { width: calc(4/6 * 100%); } } .md\:w-5 { @media (width >= 768px) { width: calc(var(--spacing) * 5); } } .md\:w-6 { @media (width >= 768px) { width: calc(var(--spacing) * 6); } } .md\:w-10 { @media (width >= 768px) { width: calc(var(--spacing) * 10); } } .md\:w-24 { @media (width >= 768px) { width: calc(var(--spacing) * 24); } } .md\:w-28 { @media (width >= 768px) { width: calc(var(--spacing) * 28); } } .md\:w-80 { @media (width >= 768px) { width: calc(var(--spacing) * 80); } } .md\:w-224px { @media (width >= 768px) { width: var(--spacing-224px); } } .md\:w-\[47\%\] { @media (width >= 768px) { width: 47%; } } .md\:w-\[144px\] { @media (width >= 768px) { width: 144px; } } .md\:w-\[640px\] { @media (width >= 768px) { width: 640px; } } .md\:w-\[calc$\(100\%\/3$-12px\)\] { @media (width >= 768px) { width: calc((100% / 3) - 12px); } } .md\:w-\[calc$\(100\%\/3$-20px\)\] { @media (width >= 768px) { width: calc((100% / 3) - 20px); } } .md\:w-auto { @media (width >= 768px) { width: auto; } } .md\:w-fit { @media (width >= 768px) { width: fit-content; } } .md\:w-full { @media (width >= 768px) { width: 100%; } } .md\:w-sm { @media (width >= 768px) { width: var(--container-sm); } } .md\:max-w-40 { @media (width >= 768px) { max-width: calc(var(--spacing) * 40); } } .md\:max-w-\[48\%\] { @media (width >= 768px) { max-width: 48%; } } .md\:max-w-\[690px\] { @media (width >= 768px) { max-width: 690px; } } .md\:max-w-\[960px\] { @media (width >= 768px) { max-width: 960px; } } .md\:min-w-\[138px\] { @media (width >= 768px) { min-width: 138px; } } .md\:min-w-\[400px\] { @media (width >= 768px) { min-width: 400px; } } .md\:min-w-\[700px\] { @media (width >= 768px) { min-width: 700px; } } .md\:min-w-fit { @media (width >= 768px) { min-width: fit-content; } } .md\:flex-1 { @media (width >= 768px) { flex: 1; } } .md\:shrink-0 { @media (width >= 768px) { flex-shrink: 0; } } .md\:grow-0 { @media (width >= 768px) { flex-grow: 0; } } .md\:-translate-x-1\/3 { @media (width >= 768px) { --tw-translate-x: calc(calc(1/3 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } .md\:-translate-x-2\/4 { @media (width >= 768px) { --tw-translate-x: calc(calc(2/4 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } .md\:translate-x-full { @media (width >= 768px) { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } } .md\:-translate-y-2\/4 { @media (width >= 768px) { --tw-translate-y: calc(calc(2/4 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } .md\:transform { @media (width >= 768px) { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } } .md\:cursor-default { @media (width >= 768px) { cursor: default; } } .md\:grid-cols-1 { @media (width >= 768px) { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .md\:grid-cols-2 { @media (width >= 768px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .md\:grid-cols-3 { @media (width >= 768px) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .md\:grid-cols-4 { @media (width >= 768px) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .md\:grid-cols-5 { @media (width >= 768px) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .md\:grid-cols-\[42\%_minmax$0\,_1fr$\] { @media (width >= 768px) { grid-template-columns: 42% minmax(0, 1fr); } } .md\:grid-cols-\[42\%_minmax$0px\,1fr$\] { @media (width >= 768px) { grid-template-columns: 42% minmax(0px,1fr); } } .md\:grid-rows-\[min-content_minmax$0\,_1fr$\] { @media (width >= 768px) { grid-template-rows: min-content minmax(0, 1fr); } } .md\:flex-col { @media (width >= 768px) { flex-direction: column; } } .md\:flex-row { @media (width >= 768px) { flex-direction: row; } } .md\:flex-nowrap { @media (width >= 768px) { flex-wrap: nowrap; } } .md\:flex-wrap { @media (width >= 768px) { flex-wrap: wrap; } } .md\:items-center { @media (width >= 768px) { align-items: center; } } .md\:items-start { @media (width >= 768px) { align-items: flex-start; } } .md\:items-stretch { @media (width >= 768px) { align-items: stretch; } } .md\:justify-between { @media (width >= 768px) { justify-content: space-between; } } .md\:justify-center { @media (width >= 768px) { justify-content: center; } } .md\:justify-end { @media (width >= 768px) { justify-content: flex-end; } } .md\:justify-start { @media (width >= 768px) { justify-content: flex-start; } } .md\:gap-0 { @media (width >= 768px) { gap: calc(var(--spacing) * 0); } } .md\:gap-1 { @media (width >= 768px) { gap: calc(var(--spacing) * 1); } } .md\:gap-2 { @media (width >= 768px) { gap: calc(var(--spacing) * 2); } } .md\:gap-3 { @media (width >= 768px) { gap: calc(var(--spacing) * 3); } } .md\:gap-4 { @media (width >= 768px) { gap: calc(var(--spacing) * 4); } } .md\:gap-5 { @media (width >= 768px) { gap: calc(var(--spacing) * 5); } } .md\:gap-6 { @media (width >= 768px) { gap: calc(var(--spacing) * 6); } } .md\:gap-8 { @media (width >= 768px) { gap: calc(var(--spacing) * 8); } } .md\:gap-10 { @media (width >= 768px) { gap: calc(var(--spacing) * 10); } } .md\:gap-11 { @media (width >= 768px) { gap: calc(var(--spacing) * 11); } } .md\:gap-x-5 { @media (width >= 768px) { column-gap: calc(var(--spacing) * 5); } } .md\:gap-x-6 { @media (width >= 768px) { column-gap: calc(var(--spacing) * 6); } } .md\:gap-y-3 { @media (width >= 768px) { row-gap: calc(var(--spacing) * 3); } } .md\:gap-y-10 { @media (width >= 768px) { row-gap: calc(var(--spacing) * 10); } } .md\:gap-y-\[29px\] { @media (width >= 768px) { row-gap: 29px; } } .md\:rounded-2xl { @media (width >= 768px) { border-radius: var(--radius-2xl); } } .md\:rounded-none { @media (width >= 768px) { border-radius: 0; } } .md\:border-0 { @media (width >= 768px) { border-style: var(--tw-border-style); border-width: 0px; } } .md\:border-t { @media (width >= 768px) { border-top-style: var(--tw-border-style); border-top-width: 1px; } } .md\:border-b { @media (width >= 768px) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } } .md\:border-none { @media (width >= 768px) { --tw-border-style: none; border-style: none; } } .md\:border-container { @media (width >= 768px) { border-color: var(--color-container); } } .md\:border-container-lighter { @media (width >= 768px) { border-color: var(--color-container-lighter); } } .md\:border-primary { @media (width >= 768px) { border-color: var(--color-primary); } } .md\:bg-black { @media (width >= 768px) { background-color: var(--color-black); } } .md\:bg-orange-h1\/5 { @media (width >= 768px) { background-color: color-mix(in srgb, #FB4B02 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-orange-h1) 5%, transparent); } } } .md\:bg-orange-h2 { @media (width >= 768px) { background-color: var(--color-orange-h2); } } .md\:bg-primary { @media (width >= 768px) { &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } } } .md\:bg-primary { @media (width >= 768px) { background-color: var(--color-primary); } } .md\:bg-primary-darker { @media (width >= 768px) { background-color: var(--color-primary-darker); } } .md\:bg-slate-100 { @media (width >= 768px) { background-color: var(--color-slate-100); } } .md\:bg-transparent { @media (width >= 768px) { background-color: transparent; } } .md\:bg-white { @media (width >= 768px) { background-color: var(--color-white); } } .md\:fill-white { @media (width >= 768px) { fill: var(--color-white); } } .md\:stroke-white { @media (width >= 768px) { stroke: var(--color-white); } } .md\:p-0 { @media (width >= 768px) { padding: calc(var(--spacing) * 0); } } .md\:p-4 { @media (width >= 768px) { padding: calc(var(--spacing) * 4); } } .md\:p-6 { @media (width >= 768px) { padding: calc(var(--spacing) * 6); } } .md\:p-8 { @media (width >= 768px) { padding: calc(var(--spacing) * 8); } } .md\:p-10 { @media (width >= 768px) { padding: calc(var(--spacing) * 10); } } .md\:\!px-6 { @media (width >= 768px) { padding-inline: calc(var(--spacing) * 6) !important; } } .md\:px-0 { @media (width >= 768px) { padding-inline: calc(var(--spacing) * 0); } } .md\:px-4 { @media (width >= 768px) { padding-inline: calc(var(--spacing) * 4); } } .md\:px-6 { @media (width >= 768px) { padding-inline: calc(var(--spacing) * 6); } } .md\:px-8 { @media (width >= 768px) { padding-inline: calc(var(--spacing) * 8); } } .md\:px-9 { @media (width >= 768px) { padding-inline: calc(var(--spacing) * 9); } } .md\:px-10 { @media (width >= 768px) { padding-inline: calc(var(--spacing) * 10); } } .md\:px-14 { @media (width >= 768px) { padding-inline: calc(var(--spacing) * 14); } } .md\:py-0 { @media (width >= 768px) { padding-block: calc(var(--spacing) * 0); } } .md\:py-3 { @media (width >= 768px) { padding-block: calc(var(--spacing) * 3); } } .md\:py-4 { @media (width >= 768px) { padding-block: calc(var(--spacing) * 4); } } .md\:py-6 { @media (width >= 768px) { padding-block: calc(var(--spacing) * 6); } } .md\:py-7 { @media (width >= 768px) { padding-block: calc(var(--spacing) * 7); } } .md\:py-10 { @media (width >= 768px) { padding-block: calc(var(--spacing) * 10); } } .md\:py-11 { @media (width >= 768px) { padding-block: calc(var(--spacing) * 11); } } .md\:py-16 { @media (width >= 768px) { padding-block: calc(var(--spacing) * 16); } } .md\:py-20 { @media (width >= 768px) { padding-block: calc(var(--spacing) * 20); } } .md\:py-24 { @media (width >= 768px) { padding-block: calc(var(--spacing) * 24); } } .md\:pt-0 { @media (width >= 768px) { padding-top: calc(var(--spacing) * 0); } } .md\:pt-3 { @media (width >= 768px) { padding-top: calc(var(--spacing) * 3); } } .md\:pt-4 { @media (width >= 768px) { padding-top: calc(var(--spacing) * 4); } } .md\:pt-7 { @media (width >= 768px) { padding-top: calc(var(--spacing) * 7); } } .md\:pt-10 { @media (width >= 768px) { padding-top: calc(var(--spacing) * 10); } } .md\:pt-12 { @media (width >= 768px) { padding-top: calc(var(--spacing) * 12); } } .md\:pt-\[26px\] { @media (width >= 768px) { padding-top: 26px; } } .md\:pt-\[100\%\] { @media (width >= 768px) { padding-top: 100%; } } .md\:pr-1 { @media (width >= 768px) { padding-right: calc(var(--spacing) * 1); } } .md\:pr-2 { @media (width >= 768px) { padding-right: calc(var(--spacing) * 2); } } .md\:pr-4 { @media (width >= 768px) { padding-right: calc(var(--spacing) * 4); } } .md\:pr-8 { @media (width >= 768px) { padding-right: calc(var(--spacing) * 8); } } .md\:pr-60px { @media (width >= 768px) { padding-right: var(--spacing-60px); } } .md\:pb-3 { @media (width >= 768px) { padding-bottom: calc(var(--spacing) * 3); } } .md\:pb-4 { @media (width >= 768px) { padding-bottom: calc(var(--spacing) * 4); } } .md\:pb-5 { @media (width >= 768px) { padding-bottom: calc(var(--spacing) * 5); } } .md\:pb-6 { @media (width >= 768px) { padding-bottom: calc(var(--spacing) * 6); } } .md\:pb-8 { @media (width >= 768px) { padding-bottom: calc(var(--spacing) * 8); } } .md\:pb-10 { @media (width >= 768px) { padding-bottom: calc(var(--spacing) * 10); } } .md\:pb-24 { @media (width >= 768px) { padding-bottom: calc(var(--spacing) * 24); } } .md\:pb-28 { @media (width >= 768px) { padding-bottom: calc(var(--spacing) * 28); } } .md\:pb-\[var$--thumb-size$\] { @media (width >= 768px) { padding-bottom: var(--thumb-size); } } .md\:\!pl-10 { @media (width >= 768px) { padding-left: calc(var(--spacing) * 10) !important; } } .md\:pl-1 { @media (width >= 768px) { padding-left: calc(var(--spacing) * 1); } } .md\:pl-4 { @media (width >= 768px) { padding-left: calc(var(--spacing) * 4); } } .md\:pl-5 { @media (width >= 768px) { padding-left: calc(var(--spacing) * 5); } } .md\:pl-6 { @media (width >= 768px) { padding-left: calc(var(--spacing) * 6); } } .md\:pl-10 { @media (width >= 768px) { padding-left: calc(var(--spacing) * 10); } } .md\:pl-12 { @media (width >= 768px) { padding-left: calc(var(--spacing) * 12); } } .md\:text-left { @media (width >= 768px) { text-align: left; } } .md\:\!text-5xl { @media (width >= 768px) { font-size: var(--text-5xl) !important; line-height: var(--tw-leading, var(--text-5xl--line-height)) !important; } } .md\:text-2xl { @media (width >= 768px) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .md\:text-3xl { @media (width >= 768px) { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } } .md\:text-4xl { @media (width >= 768px) { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } .md\:text-5xl { @media (width >= 768px) { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } .md\:text-base { @media (width >= 768px) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .md\:text-lg { @media (width >= 768px) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .md\:text-sm { @media (width >= 768px) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .md\:text-xl { @media (width >= 768px) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .md\:text-xs { @media (width >= 768px) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .md\:text-42px { @media (width >= 768px) { font-size: var(--text-42px); } } .md\:text-\[11px\] { @media (width >= 768px) { font-size: 11px; } } .md\:text-white { @media (width >= 768px) { color: var(--color-white); } } .md\:opacity-0 { @media (width >= 768px) { opacity: 0%; } } .md\:opacity-50 { @media (width >= 768px) { opacity: 50%; } } .md\:shadow { @media (width >= 768px) { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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); } } .md\:shadow-none { @media (width >= 768px) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .md\:\[--snap-cols\:2\] { @media (width >= 768px) { --snap-cols: 2; } } .md\:group-hover\:visible { @media (width >= 768px) { &:is(:where(.group):hover *) { @media (hover: hover) { visibility: visible; } } } } .md\:group-hover\:z-4 { @media (width >= 768px) { &:is(:where(.group):hover *) { @media (hover: hover) { z-index: 4; } } } } .md\:group-hover\:opacity-100 { @media (width >= 768px) { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 100%; } } } } .hover\:md\:bg-primary { &:hover { @media (hover: hover) { @media (width >= 768px) { &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } } } } } .hover\:md\:bg-primary { &:hover { @media (hover: hover) { @media (width >= 768px) { background-color: var(--color-primary); } } } } .lg\:sr-only { @media (width >= 1024px) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } } .lg\:absolute { @media (width >= 1024px) { position: absolute; } } .lg\:relative { @media (width >= 1024px) { position: relative; } } .lg\:sticky { @media (width >= 1024px) { position: sticky; } } .lg\:inset-x-0 { @media (width >= 1024px) { inset-inline: calc(var(--spacing) * 0); } } .lg\:inset-y-0 { @media (width >= 1024px) { inset-block: calc(var(--spacing) * 0); } } .lg\:inset-y-auto { @media (width >= 1024px) { inset-block: auto; } } .lg\:top-0 { @media (width >= 1024px) { top: calc(var(--spacing) * 0); } } .lg\:top-4 { @media (width >= 1024px) { top: calc(var(--spacing) * 4); } } .lg\:top-6 { @media (width >= 1024px) { top: calc(var(--spacing) * 6); } } .lg\:top-\[11px\] { @media (width >= 1024px) { top: 11px; } } .lg\:top-\[var$--msrp-block-offset$\] { @media (width >= 1024px) { top: var(--msrp-block-offset); } } .lg\:right-4 { @media (width >= 1024px) { right: calc(var(--spacing) * 4); } } .lg\:right-10 { @media (width >= 1024px) { right: calc(var(--spacing) * 10); } } .lg\:right-auto { @media (width >= 1024px) { right: auto; } } .lg\:bottom-0 { @media (width >= 1024px) { bottom: calc(var(--spacing) * 0); } } .lg\:bottom-4 { @media (width >= 1024px) { bottom: calc(var(--spacing) * 4); } } .lg\:bottom-auto { @media (width >= 1024px) { bottom: auto; } } .lg\:left-0 { @media (width >= 1024px) { left: calc(var(--spacing) * 0); } } .lg\:left-4 { @media (width >= 1024px) { left: calc(var(--spacing) * 4); } } .lg\:left-\[var$--msrp-inline-offset$\] { @media (width >= 1024px) { left: var(--msrp-inline-offset); } } .lg\:order-0 { @media (width >= 1024px) { order: 0; } } .lg\:order-1 { @media (width >= 1024px) { order: 1; } } .lg\:order-2 { @media (width >= 1024px) { order: 2; } } .lg\:order-first { @media (width >= 1024px) { order: -9999; } } .lg\:col-auto { @media (width >= 1024px) { grid-column: auto; } } .lg\:col-span-1 { @media (width >= 1024px) { grid-column: span 1 / span 1; } } .lg\:col-span-2 { @media (width >= 1024px) { grid-column: span 2 / span 2; } } .lg\:col-span-6 { @media (width >= 1024px) { grid-column: span 6 / span 6; } } .lg\:my-14 { @media (width >= 1024px) { margin-block: calc(var(--spacing) * 14); } } .lg\:my-28 { @media (width >= 1024px) { margin-block: calc(var(--spacing) * 28); } } .lg\:mt-0 { @media (width >= 1024px) { margin-top: calc(var(--spacing) * 0); } } .lg\:mt-3 { @media (width >= 1024px) { margin-top: calc(var(--spacing) * 3); } } .lg\:mt-4 { @media (width >= 1024px) { margin-top: calc(var(--spacing) * 4); } } .lg\:mt-6 { @media (width >= 1024px) { margin-top: calc(var(--spacing) * 6); } } .lg\:mt-8 { @media (width >= 1024px) { margin-top: calc(var(--spacing) * 8); } } .lg\:mt-10 { @media (width >= 1024px) { margin-top: calc(var(--spacing) * 10); } } .lg\:mt-16 { @media (width >= 1024px) { margin-top: calc(var(--spacing) * 16); } } .lg\:mt-\[54px\] { @media (width >= 1024px) { margin-top: 54px; } } .lg\:mt-\[72px\] { @media (width >= 1024px) { margin-top: 72px; } } .lg\:mr-0 { @media (width >= 1024px) { margin-right: calc(var(--spacing) * 0); } } .lg\:mr-4 { @media (width >= 1024px) { margin-right: calc(var(--spacing) * 4); } } .lg\:mr-\[3\%\] { @media (width >= 1024px) { margin-right: 3%; } } .lg\:-mb-px { @media (width >= 1024px) { margin-bottom: -1px; } } .lg\:mb-0 { @media (width >= 1024px) { margin-bottom: calc(var(--spacing) * 0); } } .lg\:mb-6 { @media (width >= 1024px) { margin-bottom: calc(var(--spacing) * 6); } } .lg\:mb-8 { @media (width >= 1024px) { margin-bottom: calc(var(--spacing) * 8); } } .lg\:mb-10 { @media (width >= 1024px) { margin-bottom: calc(var(--spacing) * 10); } } .lg\:mb-12 { @media (width >= 1024px) { margin-bottom: calc(var(--spacing) * 12); } } .lg\:mb-14 { @media (width >= 1024px) { margin-bottom: calc(var(--spacing) * 14); } } .lg\:mb-16 { @media (width >= 1024px) { margin-bottom: calc(var(--spacing) * 16); } } .lg\:mb-20 { @media (width >= 1024px) { margin-bottom: calc(var(--spacing) * 20); } } .lg\:mb-24 { @media (width >= 1024px) { margin-bottom: calc(var(--spacing) * 24); } } .lg\:mb-\[120px\] { @media (width >= 1024px) { margin-bottom: 120px; } } .lg\:ml-2 { @media (width >= 1024px) { margin-left: calc(var(--spacing) * 2); } } .lg\:ml-5 { @media (width >= 1024px) { margin-left: calc(var(--spacing) * 5); } } .lg\:ml-10 { @media (width >= 1024px) { margin-left: calc(var(--spacing) * 10); } } .lg\:line-clamp-none { @media (width >= 1024px) { overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset; } } .lg\:\!block { @media (width >= 1024px) { display: block !important; } } .lg\:block { @media (width >= 1024px) { display: block; } } .lg\:flex { @media (width >= 1024px) { display: flex; } } .lg\:grid { @media (width >= 1024px) { display: grid; } } .lg\:hidden { @media (width >= 1024px) { display: none; } } .lg\:inline { @media (width >= 1024px) { display: inline; } } .lg\:inline-block { @media (width >= 1024px) { display: inline-block; } } .lg\:list-item { @media (width >= 1024px) { display: list-item; } } .lg\:table-cell { @media (width >= 1024px) { display: table-cell; } } .lg\:table-row { @media (width >= 1024px) { display: table-row; } } .lg\:h-4 { @media (width >= 1024px) { height: calc(var(--spacing) * 4); } } .lg\:h-5 { @media (width >= 1024px) { height: calc(var(--spacing) * 5); } } .lg\:h-6 { @media (width >= 1024px) { height: calc(var(--spacing) * 6); } } .lg\:h-8 { @media (width >= 1024px) { height: calc(var(--spacing) * 8); } } .lg\:h-36 { @media (width >= 1024px) { height: calc(var(--spacing) * 36); } } .lg\:h-120px { @media (width >= 1024px) { height: var(--spacing-120px); } } .lg\:h-auto { @media (width >= 1024px) { height: auto; } } .lg\:h-fit { @media (width >= 1024px) { height: fit-content; } } .lg\:h-full { @media (width >= 1024px) { height: 100%; } } .lg\:min-h-\[181px\] { @media (width >= 1024px) { min-height: 181px; } } .lg\:w-1\/2 { @media (width >= 1024px) { width: calc(1/2 * 100%); } } .lg\:w-1\/3 { @media (width >= 1024px) { width: calc(1/3 * 100%); } } .lg\:w-1\/4 { @media (width >= 1024px) { width: calc(1/4 * 100%); } } .lg\:w-2\/3 { @media (width >= 1024px) { width: calc(2/3 * 100%); } } .lg\:w-2\/12 { @media (width >= 1024px) { width: calc(2/12 * 100%); } } .lg\:w-3xs { @media (width >= 1024px) { width: var(--container-3xs); } } .lg\:w-4 { @media (width >= 1024px) { width: calc(var(--spacing) * 4); } } .lg\:w-5 { @media (width >= 1024px) { width: calc(var(--spacing) * 5); } } .lg\:w-6 { @media (width >= 1024px) { width: calc(var(--spacing) * 6); } } .lg\:w-8 { @media (width >= 1024px) { width: calc(var(--spacing) * 8); } } .lg\:w-28 { @media (width >= 1024px) { width: calc(var(--spacing) * 28); } } .lg\:w-30\% { @media (width >= 1024px) { width: var(--spacing-30\%); } } .lg\:w-36 { @media (width >= 1024px) { width: calc(var(--spacing) * 36); } } .lg\:w-47\% { @media (width >= 1024px) { width: var(--spacing-47\%); } } .lg\:w-56 { @media (width >= 1024px) { width: calc(var(--spacing) * 56); } } .lg\:w-72 { @media (width >= 1024px) { width: calc(var(--spacing) * 72); } } .lg\:w-80 { @media (width >= 1024px) { width: calc(var(--spacing) * 80); } } .lg\:w-120px { @media (width >= 1024px) { width: var(--spacing-120px); } } .lg\:w-140px { @media (width >= 1024px) { width: var(--spacing-140px); } } .lg\:w-560px { @media (width >= 1024px) { width: var(--spacing-560px); } } .lg\:w-\[31\%\] { @media (width >= 1024px) { width: 31%; } } .lg\:w-\[467px\] { @media (width >= 1024px) { width: 467px; } } .lg\:w-\[calc$\(100\%\/3$-12px\)\] { @media (width >= 1024px) { width: calc((100% / 3) - 12px); } } .lg\:w-auto { @media (width >= 1024px) { width: auto; } } .lg\:w-full { @media (width >= 1024px) { width: 100%; } } .lg\:max-w-44 { @media (width >= 1024px) { max-width: calc(var(--spacing) * 44); } } .lg\:max-w-\[393px\] { @media (width >= 1024px) { max-width: 393px; } } .lg\:max-w-fit { @media (width >= 1024px) { max-width: fit-content; } } .lg\:max-w-md { @media (width >= 1024px) { max-width: var(--container-md); } } .lg\:max-w-xs { @media (width >= 1024px) { max-width: var(--container-xs); } } .lg\:min-w-\[190px\] { @media (width >= 1024px) { min-width: 190px; } } .lg\:min-w-\[510px\] { @media (width >= 1024px) { min-width: 510px; } } .lg\:flex-1 { @media (width >= 1024px) { flex: 1; } } .lg\:flex-none { @media (width >= 1024px) { flex: none; } } .lg\:basis-56 { @media (width >= 1024px) { flex-basis: calc(var(--spacing) * 56); } } .lg\:table-auto { @media (width >= 1024px) { table-layout: auto; } } .lg\:-translate-y-0 { @media (width >= 1024px) { --tw-translate-y: calc(var(--spacing) * -0); translate: var(--tw-translate-x) var(--tw-translate-y); } } .lg\:scroll-mt-24 { @media (width >= 1024px) { scroll-margin-top: calc(var(--spacing) * 24); } } .lg\:grid-cols-2 { @media (width >= 1024px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lg\:grid-cols-3 { @media (width >= 1024px) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lg\:grid-cols-4 { @media (width >= 1024px) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lg\:grid-cols-6 { @media (width >= 1024px) { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .lg\:grid-cols-8 { @media (width >= 1024px) { grid-template-columns: repeat(8, minmax(0, 1fr)); } } .lg\:flex-col { @media (width >= 1024px) { flex-direction: column; } } .lg\:flex-row { @media (width >= 1024px) { flex-direction: row; } } .lg\:flex-row-reverse { @media (width >= 1024px) { flex-direction: row-reverse; } } .lg\:flex-nowrap { @media (width >= 1024px) { flex-wrap: nowrap; } } .lg\:items-start { @media (width >= 1024px) { align-items: flex-start; } } .lg\:justify-center { @media (width >= 1024px) { justify-content: center; } } .lg\:justify-end { @media (width >= 1024px) { justify-content: flex-end; } } .lg\:justify-start { @media (width >= 1024px) { justify-content: flex-start; } } .lg\:gap-1 { @media (width >= 1024px) { gap: calc(var(--spacing) * 1); } } .lg\:gap-2 { @media (width >= 1024px) { gap: calc(var(--spacing) * 2); } } .lg\:gap-3 { @media (width >= 1024px) { gap: calc(var(--spacing) * 3); } } .lg\:gap-4 { @media (width >= 1024px) { gap: calc(var(--spacing) * 4); } } .lg\:gap-6 { @media (width >= 1024px) { gap: calc(var(--spacing) * 6); } } .lg\:gap-10 { @media (width >= 1024px) { gap: calc(var(--spacing) * 10); } } .lg\:gap-12 { @media (width >= 1024px) { gap: calc(var(--spacing) * 12); } } .lg\:gap-16 { @media (width >= 1024px) { gap: calc(var(--spacing) * 16); } } .lg\:gap-20 { @media (width >= 1024px) { gap: calc(var(--spacing) * 20); } } .lg\:gap-x-10 { @media (width >= 1024px) { column-gap: calc(var(--spacing) * 10); } } .lg\:gap-x-16 { @media (width >= 1024px) { column-gap: calc(var(--spacing) * 16); } } .lg\:space-x-4 { @media (width >= 1024px) { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } } .lg\:gap-y-0 { @media (width >= 1024px) { row-gap: calc(var(--spacing) * 0); } } .lg\:divide-y-0 { @media (width >= 1024px) { :where(& > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(0px * var(--tw-divide-y-reverse)); border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse))); } } } .lg\:rounded-full { @media (width >= 1024px) { border-radius: calc(infinity * 1px); } } .lg\:rounded-l-\[30px\] { @media (width >= 1024px) { border-top-left-radius: 30px; border-bottom-left-radius: 30px; } } .lg\:rounded-tl-\[30px\] { @media (width >= 1024px) { border-top-left-radius: 30px; } } .lg\:rounded-r-\[30px\] { @media (width >= 1024px) { border-top-right-radius: 30px; border-bottom-right-radius: 30px; } } .lg\:rounded-tr-none { @media (width >= 1024px) { border-top-right-radius: 0; } } .lg\:rounded-b-none { @media (width >= 1024px) { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } } .lg\:border { @media (width >= 1024px) { border-style: var(--tw-border-style); border-width: 1px; } } .lg\:border-y-0 { @media (width >= 1024px) { border-block-style: var(--tw-border-style); border-block-width: 0px; } } .lg\:border-r { @media (width >= 1024px) { border-right-style: var(--tw-border-style); border-right-width: 1px; } } .lg\:border-r-0 { @media (width >= 1024px) { border-right-style: var(--tw-border-style); border-right-width: 0px; } } .lg\:border-l-0 { @media (width >= 1024px) { border-left-style: var(--tw-border-style); border-left-width: 0px; } } .lg\:border-l-1 { @media (width >= 1024px) { border-left-style: var(--tw-border-style); border-left-width: 1px; } } .lg\:border-gray-200 { @media (width >= 1024px) { border-color: var(--color-gray-200); } } .lg\:border-transparent { @media (width >= 1024px) { border-color: transparent; } } .lg\:border-b-white { @media (width >= 1024px) { border-bottom-color: var(--color-white); } } .lg\:fill-white { @media (width >= 1024px) { fill: var(--color-white); } } .lg\:p-0 { @media (width >= 1024px) { padding: calc(var(--spacing) * 0); } } .lg\:p-4 { @media (width >= 1024px) { padding: calc(var(--spacing) * 4); } } .lg\:p-5 { @media (width >= 1024px) { padding: calc(var(--spacing) * 5); } } .lg\:p-6 { @media (width >= 1024px) { padding: calc(var(--spacing) * 6); } } .lg\:p-8 { @media (width >= 1024px) { padding: calc(var(--spacing) * 8); } } .lg\:p-10 { @media (width >= 1024px) { padding: calc(var(--spacing) * 10); } } .lg\:p-16 { @media (width >= 1024px) { padding: calc(var(--spacing) * 16); } } .lg\:px-4 { @media (width >= 1024px) { padding-inline: calc(var(--spacing) * 4); } } .lg\:px-5 { @media (width >= 1024px) { padding-inline: calc(var(--spacing) * 5); } } .lg\:px-6 { @media (width >= 1024px) { padding-inline: calc(var(--spacing) * 6); } } .lg\:px-8 { @media (width >= 1024px) { padding-inline: calc(var(--spacing) * 8); } } .lg\:px-10 { @media (width >= 1024px) { padding-inline: calc(var(--spacing) * 10); } } .lg\:py-0 { @media (width >= 1024px) { padding-block: calc(var(--spacing) * 0); } } .lg\:py-1\.5 { @media (width >= 1024px) { padding-block: calc(var(--spacing) * 1.5); } } .lg\:py-2 { @media (width >= 1024px) { padding-block: calc(var(--spacing) * 2); } } .lg\:py-4 { @media (width >= 1024px) { padding-block: calc(var(--spacing) * 4); } } .lg\:py-5 { @media (width >= 1024px) { padding-block: calc(var(--spacing) * 5); } } .lg\:py-6 { @media (width >= 1024px) { padding-block: calc(var(--spacing) * 6); } } .lg\:py-8 { @media (width >= 1024px) { padding-block: calc(var(--spacing) * 8); } } .lg\:py-20 { @media (width >= 1024px) { padding-block: calc(var(--spacing) * 20); } } .lg\:\!pt-20 { @media (width >= 1024px) { padding-top: calc(var(--spacing) * 20) !important; } } .lg\:pt-6 { @media (width >= 1024px) { padding-top: calc(var(--spacing) * 6); } } .lg\:pt-12 { @media (width >= 1024px) { padding-top: calc(var(--spacing) * 12); } } .lg\:pt-20 { @media (width >= 1024px) { padding-top: calc(var(--spacing) * 20); } } .lg\:pr-0 { @media (width >= 1024px) { padding-right: calc(var(--spacing) * 0); } } .lg\:pr-2 { @media (width >= 1024px) { padding-right: calc(var(--spacing) * 2); } } .lg\:pr-35px { @media (width >= 1024px) { padding-right: var(--spacing-35px); } } .lg\:pb-0 { @media (width >= 1024px) { padding-bottom: calc(var(--spacing) * 0); } } .lg\:pb-4 { @media (width >= 1024px) { padding-bottom: calc(var(--spacing) * 4); } } .lg\:pb-8 { @media (width >= 1024px) { padding-bottom: calc(var(--spacing) * 8); } } .lg\:pb-22px { @media (width >= 1024px) { padding-bottom: var(--spacing-22px); } } .lg\:pl-0 { @media (width >= 1024px) { padding-left: calc(var(--spacing) * 0); } } .lg\:pl-6 { @media (width >= 1024px) { padding-left: calc(var(--spacing) * 6); } } .lg\:pl-11 { @media (width >= 1024px) { padding-left: calc(var(--spacing) * 11); } } .lg\:pl-\[var$--thumb-size$\] { @media (width >= 1024px) { padding-left: var(--thumb-size); } } .lg\:text-end { @media (width >= 1024px) { text-align: end; } } .lg\:text-left { @media (width >= 1024px) { text-align: left; } } .lg\:text-start { @media (width >= 1024px) { text-align: start; } } .lg\:text-2xl { @media (width >= 1024px) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .lg\:text-4xl { @media (width >= 1024px) { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } .lg\:text-5xl { @media (width >= 1024px) { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } .lg\:text-7xl { @media (width >= 1024px) { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); } } .lg\:text-base { @media (width >= 1024px) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .lg\:text-lg { @media (width >= 1024px) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .lg\:text-sm { @media (width >= 1024px) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .lg\:text-xl { @media (width >= 1024px) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .lg\:text-xs { @media (width >= 1024px) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .lg\:whitespace-normal { @media (width >= 1024px) { white-space: normal; } } .lg\:shadow-lg { @media (width >= 1024px) { --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); } } .lg\:\[--snap-cols\:3\] { @media (width >= 1024px) { --snap-cols: 3; } } .lg\:group-hover\:block { @media (width >= 1024px) { &:is(:where(.group):hover *) { @media (hover: hover) { display: block; } } } } .lg\:empty\:table-cell { @media (width >= 1024px) { &:empty { display: table-cell; } } } .lg\:hover\:-translate-y-1 { @media (width >= 1024px) { &:hover { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } } } .lg\:hover\:-translate-y-12 { @media (width >= 1024px) { &:hover { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -12); translate: var(--tw-translate-x) var(--tw-translate-y); } } } } .lg\:hover\:border-purple-300 { @media (width >= 1024px) { &:hover { @media (hover: hover) { border-color: var(--color-purple-300); } } } } .lg\:hover\:shadow-xl { @media (width >= 1024px) { &:hover { @media (hover: hover) { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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); } } } } .xl\:absolute { @media (width >= 1280px) { position: absolute; } } .xl\:relative { @media (width >= 1280px) { position: relative; } } .xl\:top-6 { @media (width >= 1280px) { top: calc(var(--spacing) * 6); } } .xl\:right-5 { @media (width >= 1280px) { right: calc(var(--spacing) * 5); } } .xl\:right-8 { @media (width >= 1280px) { right: calc(var(--spacing) * 8); } } .xl\:right-10 { @media (width >= 1280px) { right: calc(var(--spacing) * 10); } } .xl\:bottom-8 { @media (width >= 1280px) { bottom: calc(var(--spacing) * 8); } } .xl\:left-5 { @media (width >= 1280px) { left: calc(var(--spacing) * 5); } } .xl\:left-8 { @media (width >= 1280px) { left: calc(var(--spacing) * 8); } } .xl\:col-span-2 { @media (width >= 1280px) { grid-column: span 2 / span 2; } } .xl\:-mt-3 { @media (width >= 1280px) { margin-top: calc(var(--spacing) * -3); } } .xl\:-mt-\[25px\] { @media (width >= 1280px) { margin-top: calc(25px * -1); } } .xl\:mt-0 { @media (width >= 1280px) { margin-top: calc(var(--spacing) * 0); } } .xl\:ml-8 { @media (width >= 1280px) { margin-left: calc(var(--spacing) * 8); } } .xl\:block { @media (width >= 1280px) { display: block; } } .xl\:flex { @media (width >= 1280px) { display: flex; } } .xl\:h-80 { @media (width >= 1280px) { height: calc(var(--spacing) * 80); } } .xl\:h-\[169px\] { @media (width >= 1280px) { height: 169px; } } .xl\:h-\[600px\] { @media (width >= 1280px) { height: 600px; } } .xl\:h-\[921px\] { @media (width >= 1280px) { height: 921px; } } .xl\:w-1\/2 { @media (width >= 1280px) { width: calc(1/2 * 100%); } } .xl\:w-1\/4 { @media (width >= 1280px) { width: calc(1/4 * 100%); } } .xl\:w-32 { @media (width >= 1280px) { width: calc(var(--spacing) * 32); } } .xl\:w-40\% { @media (width >= 1280px) { width: var(--spacing-40\%); } } .xl\:w-\[169px\] { @media (width >= 1280px) { width: 169px; } } .xl\:w-\[calc$\(100\%\/4$-12px\)\] { @media (width >= 1280px) { width: calc((100% / 4) - 12px); } } .xl\:w-\[calc$\(100\%\/8$-16px\)\] { @media (width >= 1280px) { width: calc((100% / 8) - 16px); } } .xl\:max-w-\[5rem\] { @media (width >= 1280px) { max-width: 5rem; } } .xl\:max-w-\[90\%\] { @media (width >= 1280px) { max-width: 90%; } } .xl\:min-w-\[22rem\] { @media (width >= 1280px) { min-width: 22rem; } } .xl\:-translate-x-32 { @media (width >= 1280px) { --tw-translate-x: calc(var(--spacing) * -32); translate: var(--tw-translate-x) var(--tw-translate-y); } } .xl\:translate-y-28 { @media (width >= 1280px) { --tw-translate-y: calc(var(--spacing) * 28); translate: var(--tw-translate-x) var(--tw-translate-y); } } .xl\:rotate-90 { @media (width >= 1280px) { rotate: 90deg; } } .xl\:grid-cols-3 { @media (width >= 1280px) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .xl\:grid-cols-4 { @media (width >= 1280px) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .xl\:grid-cols-7 { @media (width >= 1280px) { grid-template-columns: repeat(7, minmax(0, 1fr)); } } .xl\:flex-row { @media (width >= 1280px) { flex-direction: row; } } .xl\:flex-nowrap { @media (width >= 1280px) { flex-wrap: nowrap; } } .xl\:gap-4 { @media (width >= 1280px) { gap: calc(var(--spacing) * 4); } } .xl\:gap-6 { @media (width >= 1280px) { gap: calc(var(--spacing) * 6); } } .xl\:space-y-0 { @media (width >= 1280px) { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse))); } } } .xl\:gap-x-10 { @media (width >= 1280px) { column-gap: calc(var(--spacing) * 10); } } .xl\:gap-x-\[95px\] { @media (width >= 1280px) { column-gap: 95px; } } .xl\:border-none { @media (width >= 1280px) { --tw-border-style: none; border-style: none; } } .xl\:p-12 { @media (width >= 1280px) { padding: calc(var(--spacing) * 12); } } .xl\:px-0 { @media (width >= 1280px) { padding-inline: calc(var(--spacing) * 0); } } .xl\:px-6 { @media (width >= 1280px) { padding-inline: calc(var(--spacing) * 6); } } .xl\:px-12 { @media (width >= 1280px) { padding-inline: calc(var(--spacing) * 12); } } .xl\:py-1 { @media (width >= 1280px) { padding-block: calc(var(--spacing) * 1); } } .xl\:py-3\.5 { @media (width >= 1280px) { padding-block: calc(var(--spacing) * 3.5); } } .xl\:py-32 { @media (width >= 1280px) { padding-block: calc(var(--spacing) * 32); } } .xl\:pr-5 { @media (width >= 1280px) { padding-right: calc(var(--spacing) * 5); } } .xl\:pr-10 { @media (width >= 1280px) { padding-right: calc(var(--spacing) * 10); } } .xl\:pb-12 { @media (width >= 1280px) { padding-bottom: calc(var(--spacing) * 12); } } .xl\:pl-0 { @media (width >= 1280px) { padding-left: calc(var(--spacing) * 0); } } .xl\:pl-2\.5 { @media (width >= 1280px) { padding-left: calc(var(--spacing) * 2.5); } } .xl\:pl-20 { @media (width >= 1280px) { padding-left: calc(var(--spacing) * 20); } } .xl\:text-2xl { @media (width >= 1280px) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .xl\:text-6xl { @media (width >= 1280px) { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } } .xl\:text-base { @media (width >= 1280px) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .xl\:text-lg { @media (width >= 1280px) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .xl\:text-sm { @media (width >= 1280px) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .xl\:text-xl { @media (width >= 1280px) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .xl\:\[--snap-cols\:3\] { @media (width >= 1280px) { --snap-cols: 3; } } .xl\:\[--snap-cols\:4\] { @media (width >= 1280px) { --snap-cols: 4; } } .xl\:focus-within\:relative { @media (width >= 1280px) { &:focus-within { position: relative; } } } .\32 xl\:\!-right-10 { @media (width >= 1688px) { right: calc(var(--spacing) * -10) !important; } } .\32 xl\:\!-left-10 { @media (width >= 1688px) { left: calc(var(--spacing) * -10) !important; } } .\32 xl\:ml-22px { @media (width >= 1688px) { margin-left: var(--spacing-22px); } } .\32 xl\:w-96 { @media (width >= 1688px) { width: calc(var(--spacing) * 96); } } .\32 xl\:min-w-\[180px\] { @media (width >= 1688px) { min-width: 180px; } } .\32 xl\:grid-cols-5 { @media (width >= 1688px) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .\32 xl\:gap-0 { @media (width >= 1688px) { gap: calc(var(--spacing) * 0); } } .\32 xl\:\[--snap-cols\:5\] { @media (width >= 1688px) { --snap-cols: 5; } } .rtl\:-rotate-180 { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: calc(180deg * -1); } } .print\:mt-0 { @media print { margin-top: calc(var(--spacing) * 0); } } .print\:ml-5 { @media print { margin-left: calc(var(--spacing) * 5); } } .print\:flex { @media print { display: flex; } } .print\:grid-cols-2 { @media print { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .print\:text-left { @media print { text-align: left; } } .sm\:\[\&_\.label-street\.sr-only\]\:invisible { @media (width >= 640px) { & .label-street.sr-only { visibility: hidden; } } } .sm\:\[\&_\.label-street\.sr-only\]\:not-sr-only { @media (width >= 640px) { & .label-street.sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip-path: none; white-space: normal; } } } .sm\:\[\&_\.label-street\.sr-only\]\:mb-2 { @media (width >= 640px) { & .label-street.sr-only { margin-bottom: calc(var(--spacing) * 2); } } } .\[\&_\.price\]\:text-xs { & .price { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .\[\&_\.price\]\:font-normal { & .price { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } } .\[\&_\.price\]\:text-black { & .price { color: var(--color-black); } } .\[\&_\.price\]\:text-black-h2 { & .price { color: var(--color-black-h2); } } .\[\&_\>\*\]\:px-2 { & >* { padding-inline: calc(var(--spacing) * 2); } } .md\:\[\&_label\.sr-only\]\:invisible { @media (width >= 768px) { & label.sr-only { visibility: hidden; } } } .md\:\[\&_label\.sr-only\]\:not-sr-only { @media (width >= 768px) { & label.sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip-path: none; white-space: normal; } } } .md\:\[\&_label\.sr-only\]\:mb-2 { @media (width >= 768px) { & label.sr-only { margin-bottom: calc(var(--spacing) * 2); } } } .\[\&\:\:-moz-range-track\]\:h-\[8px\] { &::-moz-range-track { height: 8px; } } .\[\&\:\:-moz-range-track\]\:rounded-\[4px\] { &::-moz-range-track { border-radius: 4px; } } .\[\&\:\:-moz-range-track\]\:bg-primary\/20 { &::-moz-range-track { background-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } } } .\[\&\:\:-webkit-calendar-picker-indicator\]\:\!hidden { &::-webkit-calendar-picker-indicator { display: none !important; } } .\[\&\:\:-webkit-details-marker\]\:hidden { &::-webkit-details-marker { display: none; } } .\[\&\:\:-webkit-inner-spin-button\]\:invisible { &::-webkit-inner-spin-button { visibility: hidden; } } .\[\&\:\:-webkit-inner-spin-button\]\:hidden { &::-webkit-inner-spin-button { display: none; } } .\[\&\:\:-webkit-inner-spin-button\]\:hover\:visible { &::-webkit-inner-spin-button { &:hover { @media (hover: hover) { visibility: visible; } } } } .\[\&\:\:-webkit-list-button\]\:w-0 { &::-webkit-list-button { width: calc(var(--spacing) * 0); } } .\[\&\:\:-webkit-slider-runnable-track\]\:h-\[8px\] { &::-webkit-slider-runnable-track { height: 8px; } } .\[\&\:\:-webkit-slider-runnable-track\]\:rounded-\[4px\] { &::-webkit-slider-runnable-track { border-radius: 4px; } } .\[\&\:\:-webkit-slider-runnable-track\]\:bg-primary\/20 { &::-webkit-slider-runnable-track { background-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } } } .\[\&\:\:-webkit-slider-thumb\]\:mt-\[-8px\] { &::-webkit-slider-thumb { margin-top: -8px; } } .\[\&\:\:-webkit-slider-thumb\]\:h-\[22px\] { &::-webkit-slider-thumb { height: 22px; } } .\[\&\:\:-webkit-slider-thumb\]\:w-\[22px\] { &::-webkit-slider-thumb { width: 22px; } } .\[\&\:\:-webkit-slider-thumb\]\:cursor-pointer { &::-webkit-slider-thumb { cursor: pointer; } } .\[\&\:\:-webkit-slider-thumb\]\:appearance-none { &::-webkit-slider-thumb { appearance: none; } } .\[\&\:\:-webkit-slider-thumb\]\:rounded-full { &::-webkit-slider-thumb { border-radius: calc(infinity * 1px); } } .\[\&\:\:-webkit-slider-thumb\]\:border { &::-webkit-slider-thumb { border-style: var(--tw-border-style); border-width: 1px; } } .\[\&\:\:-webkit-slider-thumb\]\:border-\[6px\] { &::-webkit-slider-thumb { border-style: var(--tw-border-style); border-width: 6px; } } .\[\&\:\:-webkit-slider-thumb\]\:border-white { &::-webkit-slider-thumb { border-color: var(--color-white); } } .\[\&\:\:-webkit-slider-thumb\]\:shadow-\[0_0_12px_rgba$0\,0\,0\,0\.25$\] { &::-webkit-slider-thumb { --tw-shadow: 0 0 12px var(--tw-shadow-color, rgba(0,0,0,0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .\[\&\:nth-child$1n$\>\.before\]\:bg-yellow-300 { &:nth-child(1n)>.before { background-color: var(--color-yellow-300); } } .\[\&\:nth-child$2n$\>\.before\]\:bg-red-400 { &:nth-child(2n)>.before { background-color: var(--color-red-400); } } .\[\&\:nth-child$3n$\>\.before\]\:bg-green-300 { &:nth-child(3n)>.before { background-color: var(--color-green-300); } } .lg\:\[\&\:nth-child$3n\+0$\]\:mr-0 { @media (width >= 1024px) { &:nth-child(3n+0) { margin-right: calc(var(--spacing) * 0); } } } .\[\&\:nth-child$4n$\>\.before\]\:bg-blue-300 { &:nth-child(4n)>.before { background-color: var(--color-blue-300); } } .\[\&\>img\]\:\!rounded-lg { &>img { border-radius: var(--radius-lg) !important; } } .\[\@media$pointer\:coarse$\]\:hidden { @media (pointer:coarse) { display: none; } } } @layer base { :where(:focus-visible) { outline: var(--outline-size, 2px) solid var(--color-primary); outline-offset: var(--outline-offset, 2px); } :where(:active:focus-visible) { outline-offset: 0; transition: var( --outline-transition, outline-offset 150ms cubic-bezier(0.25, 0, 0.4, 1) ); } :disabled { cursor: not-allowed; } :target { scroll-margin-block: var(--anchor-offset, 6ex); } @media (prefers-reduced-motion: no-preference) { :where(html):has(:target) { scroll-behavior: smooth; } } html { block-size: 100%; scrollbar-gutter: stable; } body { min-block-size: 100%; } :where( :any-link, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex^="-"]) ) { touch-action: manipulation; } :where( :any-link, button, label[for], label:has(input:is([type="radio"], [type="checkbox"]):enabled), select:has(option:enabled), summary ) { cursor: pointer; } :where(dialog) { position: fixed; max-block-size: calc(100% - 2rem); max-inline-size: calc(100% - 2rem); background-color: var(--color-surface, canvas); color: var(--color-fg, canvastext); border-radius: 1rem; margin: auto; padding: 1.5rem; box-shadow: var(--shadow-lg); &::backdrop { background-color: var(--backdrop, hsl(0 0% 0% / 20%)); } } :where(:root:has(dialog[open]:modal)) { overflow: hidden; } address { font-style: normal; } } @media print { *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; } :is(h1, h2, h3, h4, h5, h6) { page-break-after: avoid; } :is(h2, h3, h4, h5, h6, p) { orphans: 3; widows: 3; } :is(tr, img, svg, pre, blockquote) { page-break-inside: avoid; } abbr[title]::after { content: " (" attr(title) ")"; } :is(.columns, .container) { max-width: 100% !important; } } @layer base { @view-transition { navigation: auto; } :root { scrollbar-color: var(--scrollthumb-color, var(--color-primary)) var(--scrolltrack-color, #0000); accent-color: var(--color-primary); caret-color: var(--color-primary); interpolate-size: allow-keywords; } body { background: var(--color-white); color: var(--color-black-h1); font-family: var(--font-dmsans); } } [x-cloak] { display: none !important; } @layer components { .actions-toolbar { display: flex; gap: calc(var(--spacing) * 4); flex-direction: column; margin-block-start: calc(var(--spacing) * 6); padding-block-start: calc(var(--spacing) * 4); border-block-start-width: 1px; border-block-start-color: var(--color-gray-300); @media (width >= 768px) { flex-direction: row-reverse; align-items: center; } & a.back { text-decoration-line: underline; } } } .btn-size-lg { padding-inline: calc(var(--spacing) * 10); padding-block: calc(var(--spacing) * 4); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .btn-size-sm { padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } @layer components { .card { position: relative; border-radius: var(--card-radius, var(--radius-lg)); border-width: 1px; padding-block: var(--card-py, calc(var(--spacing) * 6)); padding-inline: var(--card-px, calc(var(--spacing) * 6)); border-color: var(--card-stroke, var(--color-gray-300)); background-color: var(--card-bg, var(--color-surface)); color: var(--card-color, var(--color-fg)); transition-property: color, background-color, border-color, box-shadow, outline-color; transition-timing-function: var(--default-transition-timing-function); transition-duration: var(--default-transition-duration); } .card-interactive:is(:hover, :focus-within) { --card-stroke: #0000; box-shadow: var(--shadow-lg); } } @layer base { [type="checkbox"][role="switch"] { --switch-width: calc(var(--spacing) * 9); --switch-height: calc(var(--spacing) * 5); --switch-thumb-offset: calc(var(--switch-width) - var(--switch-height)); border-radius: calc(infinity * 1px); border-width: 2px; block-size: var(--switch-height); inline-size: var(--switch-width); &:not(:disabled) { cursor: pointer; } &::after { content: ""; display: block; aspect-ratio: 1; height: 100%; border-radius: calc(infinity * 1px); border-width: 1px; border-color: var(--form-bg); background-color: var(--form-stroke); transition: background-color 150ms, border-color 150ms, translate 150ms; } &:checked { background-image: none; &::after { background-color: var(--form-bg); translate: var(--switch-thumb-offset) 0%; } } &:dir(rtl):checked::after { translate: calc(var(--switch-thumb-offset) / -1) 0%; } } } @layer components { .form-input.qty { max-inline-size: calc(6ch + var(--form-px)); } .field { margin-top: calc(var(--spacing) * 1); &.field-reserved { --reserved-space: calc(var(--spacing) * 7); margin-block-end: var(--reserved-space); ul { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); &:last-of-type { margin-block-end: calc(var(--reserved-space) * -1); } } } &.choice { display: flex; align-items: center; label { margin-bottom: calc(var(--spacing) * 0); } input { margin-right: calc(var(--spacing) * 3); } } &.field-error .messages { color: var(--color-red-600); max-width: fit-content; } &.required > label { &::after { content: var(--tw-content); position: relative; } &::after { content: var(--tw-content); top: calc(var(--spacing) * -1); } &::after { content: var(--tw-content); --tw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 6v12M17.196 9 6.804 15M6.804 9l10.392 6'/%3E%3C/svg%3E"); --tw-icon-size: 1em; display: inline-block; width: var(--tw-icon-size); height: var(--tw-icon-size); background-color: currentcolor; mask-repeat: no-repeat; mask-size: contain; mask-image: var(--tw-icon); } &::after { content: var(--tw-content); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } &::after { content: var(--tw-content); color: var(--color-red-600); } } } } @layer utilities { .no-spinner::-webkit-outer-spin-button, .no-spinner::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .no-spinner[type='number'] { -moz-appearance: textfield; } } @layer components { .form-input-addon { appearance: none; padding-block: var(--form-py); padding-inline: var(--form-px); border-radius: var(--form-radius); border-width: 1px; border-color: var(--form-stroke); background-color: var(--form-bg); color: var(--form-color); --outline-size: 1px; --outline-offset: 0px; &:first-child { padding-inline-end: 0; border-inline-end: 0; } &:last-child { padding-inline-start: 0; border-inline-start: 0; } } .input-group { position: relative; display: flex; border-radius: var(--form-radius); vertical-align: middle; &:focus-within { --form-stroke: var(--form-active-color); outline: var(--outline-size, 1px) solid var(--form-active-color); outline-offset: var(--outline-offset, 0px); } & > * { margin: 0; border-radius: 0; outline: none; } & > :first-child { border-start-start-radius: inherit; border-end-start-radius: inherit; } & > :last-child { border-start-end-radius: inherit; border-end-end-radius: inherit; } & > :not(template, [hidden]:where(:not([hidden="until-found"]))) + :not(button, .btn) { border-inline-start-width: 0; } } } @layer components { .message { margin-bottom: calc(var(--spacing) * 2); display: flex; width: 100%; align-items: center; justify-content: space-between; border-radius: 0.25rem; background-color: var(--color-gray-100); padding: calc(var(--spacing) * 2); padding-left: calc(var(--spacing) * 5); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-black); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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); &.error { border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-red-500); background-color: var(--color-red-50); } &.success { border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-green-500); background-color: var(--color-green-50); } &.info, &.notice { border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-blue-500); background-color: var(--color-blue-50); } &.warning { border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-yellow-500); background-color: var(--color-yellow-50); } a { text-decoration-line: underline; } } } .page.messages { position: sticky; top: calc(var(--spacing) * 0); z-index: 20; .messages section#messages { width: 100%; @media (width >= 500px) { max-width: 500px; } @media (width >= 640px) { max-width: 640px; } @media (width >= 640px) { max-width: 640px; } @media (width >= 768px) { max-width: 768px; } @media (width >= 768px) { max-width: 768px; } @media (width >= 1024px) { max-width: 1024px; } @media (width >= 1024px) { max-width: 1024px; } @media (width >= 1280px) { max-width: 1280px; } @media (width >= 1688px) { max-width: 1688px; } padding-inline: calc(var(--spacing) * 6); margin-inline: auto; padding-block: calc(var(--spacing) * 3); } } @layer components { .rating-summary { display: flex; color: var(--color-primary); } } @layer components { .snap-track { --snap-cols: 1; --snap-gap: calc(var(--spacing) * 4); --snap-size: calc( (100% - var(--snap-gap) * (var(--snap-cols) - 1)) / var(--snap-cols) ); position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: var(--snap-size); gap: var(--snap-gap); padding-block: calc(var(--spacing) * 6); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth; } & > * { scroll-snap-align: start; } } .snap-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(var(--spacing) * 3); min-block-size: calc(var(--spacing) * 11); padding-block: calc(var(--spacing) * 2); } .snap-marker { flex-shrink: 0; block-size: calc(var(--spacing) * 4); inline-size: calc(var(--spacing) * 4); border-width: 1px; border-color: var(--color-slate-600); border-radius: 1rem; transition-duration: 300ms; transition-property: border-color, background-color; @media (prefers-reduced-motion: no-preference) { transition-property: inline-size, border-color, background-color; will-change: inline-size; } &[aria-current="true"] { inline-size: calc(var(--spacing) * 7); border-color: #0000; background-color: var(--color-primary); } } } @media (min-width: 768px) { .arrow-up-product-slider { position: relative; .slider-arrow-dot-section { .left-btn { position: absolute; top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 16); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .right-btn { position: absolute; top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 0); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } } } } @layer components { .swatch-attribute-options { display: flex; flex-direction: row; flex-wrap: wrap; } .swatch-option { margin: calc(var(--spacing) * 1); display: flex; justify-content: center; border-style: var(--tw-border-style); border-width: 1px; padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1); min-width: 40px; } } @layer components { :where(main:not(.product-main-full-width, .page-main-full-width)) { & .columns { width: 100%; @media (width >= 500px) { max-width: 500px; } @media (width >= 640px) { max-width: 640px; } @media (width >= 640px) { max-width: 640px; } @media (width >= 768px) { max-width: 768px; } @media (width >= 768px) { max-width: 768px; } @media (width >= 1024px) { max-width: 1024px; } @media (width >= 1024px) { max-width: 1024px; } @media (width >= 1280px) { max-width: 1280px; } @media (width >= 1688px) { max-width: 1688px; } margin-inline: auto; padding-inline: calc(var(--spacing) * 6); } } } .card-shadow { @media (width >= 768px) { --tw-shadow: 0 0 #0000 !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; } box-shadow: 0px 4px 20px 0px #00000040; } .welcome_hemag_ag { .pagebuilder-column-line { flex-direction: column; gap: calc(var(--spacing) * 4); @media (width >= 768px) { flex-direction: row; } @media (width >= 768px) { gap: calc(var(--spacing) * 10); } @media (width >= 1280px) { gap: calc(var(--spacing) * 20); } } .welcome_img { @media (width < 768px) { order: 2; } @media (width < 768px) { width: 100% !important; } @media (width >= 768px) { width: 50% !important; } img { @media (width < 768px) { width: 100% !important; } } } .welcome_text { width: 100% !important; @media (width >= 768px) { width: fit-content !important; } } } .b2b-order-quickly-easily { .pagebuilder-column-line { flex-direction: column-reverse; @media (width >= 768px) { flex-direction: row; } .order-sticky-img { rotate: calc(40deg * -1); } } } .product-item { .price-container { display: block; .price { 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-gray-h1); } .price-label { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .special-price .price-container .price-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } .special-price .price-container .price-wrapper .price { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-red-300); } .old-price .price-container { display: none; color: var(--color-gray-500); .price { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } } } .aa-LoadingIndicator { position: absolute; top: calc(var(--spacing) * 3); left: calc(var(--spacing) * 2); --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } @media (min-width: 767px) { .aa-Item { display: flex; height: 100%; width: 100%; flex-direction: column; padding: calc(var(--spacing) * 2.5); &:hover { @media (hover: hover) { background-color: var(--color-gray-100); } } } } .aa-Item { padding: calc(var(--spacing) * 2.5); } .ais-Hits-list, .list_items.grid-view .ais-InfiniteHits-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: calc(var(--spacing) * 4); @media (width >= 640px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (width >= 1024px) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .list_items.list-view .ais-InfiniteHits-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: calc(var(--spacing) * 5); @media (width >= 640px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (width >= 768px) { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .ais-InfiniteHits-list { padding-top: calc(var(--spacing) * 0); padding-bottom: calc(var(--spacing) * 10); @media (width >= 768px) { padding-bottom: calc(var(--spacing) * 20); } } .ais-InfiniteHits .ais-InfiniteHits-loadPrevious { margin-bottom: calc(var(--spacing) * 10); } .ais-InfiniteHits-item, .auc-Recommend-item { height: 100%; width: 100%; } mark { background-color: transparent; --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); } .hidden-xs, .hidden-sm { display: none; } .search.results { display: none; } .highlight * { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .ais-SearchBox-form { position: relative; display: flex; width: 425px; width: 100%; align-items: center; } .ais-SearchBox-input { height: calc(var(--spacing) * 12); width: 100%; border-radius: calc(infinity * 1px); --tw-border-style: none; border-style: none; background-color: color-mix(in srgb, #000 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 5%, transparent); } } button.ais-SearchBox-reset { position: absolute; right: calc(var(--spacing) * 0); cursor: pointer; padding-right: calc(var(--spacing) * 3); } input.ais-SearchBox-input::-webkit-search-decoration, input.ais-SearchBox-input::-webkit-search-cancel-button, input.ais-SearchBox-input::-webkit-search-results-button, input.ais-SearchBox-input::-webkit-search-results-decoration { display: none; } .ais-SearchBox-submit { display: none; } .ais-InfiniteHits-loadMore, .ais-InfiniteHits-loadPrevious { margin: auto; display: block; border-radius: calc(infinity * 1px); &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } background-color: var(--color-primary); padding-inline: calc(var(--spacing) * 4); 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-bold); font-weight: var(--font-weight-bold); color: var(--color-white); &:hover { @media (hover: hover) { &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } } } &:hover { @media (hover: hover) { background-color: var(--color-primary); } } @media (width >= 768px) { min-width: 422px; } @media (width >= 1024px) { padding-block: calc(var(--spacing) * 4); } @media (width >= 1024px) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .ais-InfiniteHits-loadMore--disabled, .ais-InfiniteHits-loadPrevious--disabled { display: none; } .ais-Pagination { display: flex; justify-content: center; } .ais-Pagination-list { display: inline-flex; background-color: var(--color-white); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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); } .ais-Pagination-list li.ais-Pagination-item a { cursor: pointer; } .ais-Pagination-list li.ais-Pagination-item--selected a { cursor: default; } .ais-Pagination-item { margin-left: -1px; display: inline-flex; align-items: center; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-300); background-color: var(--color-white); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-gray-700); 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; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 150ms; transition-duration: 150ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); &:hover { @media (hover: hover) { color: var(--color-gray-500); } } } .ais-Pagination-item--previousPage { position: relative; border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .ais-Pagination-item--nextPage { position: relative; border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .ais-Pagination-item--previousPage::after { content: '\003C'; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); } .ais-Pagination-item--nextPage::after { content: '\003E'; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); } .ais-Pagination-list .ais-Pagination-item--nextPage a { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0); color: transparent; } .ais-Pagination-list .ais-Pagination-item--previousPage a { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0); color: transparent; } .ais-Pagination-list .ais-Pagination-item--nextPage span { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0); color: transparent; } .ais-Pagination-list .ais-Pagination-item--previousPage span { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0); color: transparent; } .ais-Pagination-item--selected { background-color: var(--color-gray-200); } l.ais-Pagination-item--selected a { cursor: default; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-blue-700); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-gray-700); } .ais-Pagination-item .ais-Pagination-link { padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); } .ais-ClearRefinements-button { margin-top: calc(var(--spacing) * 3); width: 100%; border-radius: calc(infinity * 1px); background-color: var(--color-black-h1); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); color: var(--color-white); } .ais-ClearRefinements-button--disabled { display: none; } .ais-RangeSlider { margin-block: calc(var(--spacing) * 6); margin-right: calc(var(--spacing) * 5); margin-left: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 4); } .ais-HierarchicalMenu-item--selected { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .ais-HierarchicalMenu-count::before, .ais-RefinementList-count::before { content: '('; } .ais-HierarchicalMenu-count::after, .ais-RefinementList-count::after { content: ')'; } .ais-HierarchicalMenu-list .ais-HierarchicalMenu-list { margin-left: calc(var(--spacing) * 4); } .rheostat-background { height: calc(var(--spacing) * 1.5); background-color: var(--color-gray-200); } .rheostat-handle { position: absolute; top: calc(var(--spacing) * -2); left: calc(var(--spacing) * 0); z-index: 10; height: calc(var(--spacing) * 5); width: calc(var(--spacing) * 5); cursor: pointer; border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-white); &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } background-color: var(--color-primary); } .rheostat-handle .rheostat-tooltip { position: absolute; top: calc(var(--spacing) * -6); left: calc(calc(2/3 * 100%) * -1); background-color: var(--color-white); --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); color: var(--color-primary); } .rheostat-progress { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); height: calc(var(--spacing) * 1.5); &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } background-color: var(--color-primary); } .ais-CurrentRefinements-list { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); } .ais-CurrentRefinements-list li { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 1); } .ais-CurrentRefinements-item .ais-CurrentRefinements-label { display: none; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); } .ais-CurrentRefinements-item .ais-CurrentRefinements-category { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 2.5); border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-primary); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-primary); } .ais-CurrentRefinements-category { padding-bottom: calc(var(--spacing) * 1); } .ais-CurrentRefinements-category span { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); } .ais-RefinementList-searchBox .ais-SearchBox-input[disabled] { display: none; } .ais-Panel-header span .name { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; padding-bottom: calc(var(--spacing) * 4); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); @media (width >= 768px) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .ais-HierarchicalMenu { padding-top: calc(var(--spacing) * 4); } .ais-RefinementList-checkbox { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-primary); } .ais-HierarchicalMenu-link { display: flex; padding-block: calc(var(--spacing) * 1); } .ais-HierarchicalMenu-count { flex-grow: 1; text-align: right; } .ais-RefinementList-searchBox .ais-SearchBox .ais-SearchBox-form { margin-block: calc(var(--spacing) * 3); border-style: var(--tw-border-style); border-width: 1px; } .ais-SortBy .ais-SortBy-select { border-radius: var(--radius-lg) !important; border-radius: calc(infinity * 1px); border-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } background-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-black); color: var(--color-primary); filter: brightness(0) saturate(100%) invert(37%) sepia(28%) saturate(5479%) hue-rotate(358deg) brightness(96%) contrast(107%); border-radius: 100px !important; } .auc-Recommend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); @media (width >= 1024px) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .auc-Recommend-title { width: 100%; text-align: center; font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); @media (width >= 768px) { text-align: left; } } .cms-index-index { .columns { max-width: 100%; .amslider { .swiper-pagination, .swiper-button-prev, .swiper-button-next, .brand-lable { display: none; } .ambrands-swiper-brand { img { &:hover { @media (hover: hover) { --tw-grayscale: grayscale(1); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } } } } } } } .section-heading { h3 { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); @media (width >= 768px) { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } } .home-hero-banner-slider-section { .pagebuilder-slide-wrapper { min-height: 510px; } .snap-track { padding: calc(var(--spacing) * 0); } .pagebuilder-overlay { position: relative; min-height: 510px; padding-inline: calc(var(--spacing) * 5); padding-top: calc(var(--spacing) * 0); padding-bottom: calc(var(--spacing) * 0); @media (width >= 768px) { padding-inline: calc(var(--spacing) * 8); } &:after { position: absolute; inset: calc(var(--spacing) * 0); height: 100%; width: 100%; background-color: rgba(48,35,71,0.5); --tw-content: ''; content: var(--tw-content); } } .pagebuilder-poster-content { position: relative; z-index: 10; max-width: 1248px; text-align: center; @media (width >= 640px) { text-align: left; } [data-element="content"] { width: 100%; overflow: visible; @media (width >= 640px) { width: 55%; } div { &:last-child { right: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); margin-top: calc(var(--spacing) * 8); width: 100%; @media (width >= 640px) { position: absolute; } @media (width >= 640px) { top: calc(var(--spacing) * 0); } @media (width >= 640px) { margin-top: calc(var(--spacing) * 0); } @media (width >= 640px) { height: 100%; } @media (width >= 640px) { width: 45%; } img { height: 100%; width: 100%; object-fit: contain; } } } p { &:first-child { display: flex; flex-direction: column; align-items: center; gap: calc(var(--spacing) * 2); @media (width >= 640px) { display: inline-block; } img { display: inline-block; @media (width >= 768px) { margin-right: calc(var(--spacing) * 1); } } } } } h6 { margin-top: calc(var(--spacing) * 10); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); text-transform: uppercase; @media (width >= 640px) { margin-top: calc(var(--spacing) * 4); } } h2 { margin-top: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 4); font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); --tw-leading: 1; line-height: 1; @media (width >= 768px) { margin-top: calc(var(--spacing) * 4); } @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 8); } @media (width >= 768px) { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } a[target="_blank"] { margin-top: calc(var(--spacing) * 4); border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: var(--color-white); background-color: transparent; padding-inline: calc(var(--spacing) * 8); 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); 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)); @media (width >= 1024px) { margin-top: calc(var(--spacing) * 0); } &:hover { border-color: var(--color-primary); &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } background-color: var(--color-primary); color: var(--color-white); } } a { display: block; border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: transparent; background-color: var(--color-white); padding-inline: calc(var(--spacing) * 8); 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-bold); font-weight: var(--font-weight-bold); color: #302347; text-transform: uppercase; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); &:hover { @media (hover: hover) { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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); } } @media (width >= 500px) { text-align: center; } @media (width >= 1024px) { margin-right: calc(var(--spacing) * 6); } @media (width >= 1024px) { display: inline-block; } &:hover { border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: var(--color-primary); &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } background-color: var(--color-primary); color: var(--color-white); } } div { margin-top: calc(var(--spacing) * 8); @media (width >= 640px) { margin-top: calc(var(--spacing) * 12); } &:last-child { margin-top: calc(var(--spacing) * 0); } } } .pagebuilder-slide-wrapper { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 500ms; transition-duration: 500ms; &:hover { @media (hover: hover) { scale: 1.02; } } } .snap-pager { display: none; @media (width >= 1024px) { display: block; } } .snap-pager { position: absolute; right: calc(var(--spacing) * 0); bottom: 60px; left: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0); bottom: 94px; padding: 0; .snap-marker { margin-inline: calc(var(--spacing) * 1); height: calc(var(--spacing) * 2); width: calc(var(--spacing) * 2); border-style: var(--tw-border-style); border-width: 0px; background-color: var(--color-white); &[aria-current="true"] { &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } background-color: var(--color-primary); inline-size: 8px; } } } } .cms-benefits-section { .pagebuilder-column-line { flex-wrap: wrap !important; justify-content: space-between !important; gap: calc(var(--spacing) * 2.5); row-gap: 56px; @media (width >= 1024px) { flex-wrap: nowrap !important; } .pagebuilder-column { position: relative; width: 100% !important; @media (width >= 640px) { width: 47% !important; } @media (width >= 1024px) { width: 23% !important; } &:after { position: absolute; right: calc(18px * -1); height: 100%; border-right-style: var(--tw-border-style); border-right-width: 1px; border-right-color: var(--color-black-h1); @media (width >= 640px) { --tw-content: ''; content: var(--tw-content); } } &:last-child { &:after { display: none; } } flex-basis: auto; svg { &:hover { @media (hover: hover) { opacity: 80%; } } } } } } .how-it-works-cms { .pagebuilder-column-line { flex-direction: column; gap: calc(var(--spacing) * 5); @media (width >= 1024px) { flex-direction: row; } @media (width >= 1024px) { gap: 30px; } .pagebuilder-column { width: 100% !important; @media (width >= 1024px) { width: calc(1/3 * 100%) !important; } img { height: 100% !important; width: 100%; } figure { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 500ms; transition-duration: 500ms; &:hover { @media (hover: hover) { scale: 1.03; } } } } } } .image-hover-effect { figure { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 500ms; transition-duration: 500ms; &:hover { @media (hover: hover) { scale: 1.02; } } } } .border-left::before { position: absolute; top: calc(1/2 * 100%); left: calc(var(--spacing) * 0); display: block; height: 38px; width: 1px; --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); background-color: var(--color-black); --tw-content: ''; content: var(--tw-content); } .border-right::before { position: absolute; top: calc(1/2 * 100%); right: calc(var(--spacing) * 0); display: block; height: 38px; width: 1px; --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); background-color: var(--color-black); --tw-content: ''; content: var(--tw-content); } .input-arrow-remove::-webkit-outer-spin-button, .input-arrow-remove::-webkit-inner-spin-button { margin: calc(var(--spacing) * 0); -webkit-appearance: none; } .input-arrow-remove[type=number] { -moz-appearance: textfield; } .switcher-select { filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(0%) hue-rotate(119deg) brightness(108%) contrast(100%); } .swiper-dots { .swiper-pagination-bullet-active { &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ) !important; } } background-color: var(--color-primary) !important; } } .social-login-popup { max-height: -webkit-fill-available; } .catalog-product-view { .mobile-cart-count { @media (width < 500px) { display: flex; } } } .product-item { .price-container { .price { color: var(--color-black-h1); } } .special-price { .price-container { .price-wrapper { .price { color: var(--color-black-h1); } } } } } .pdp-faq-section { @media (width < 768px) { margin-left: var(--spacing-50\%); } @media (width < 768px) { width: 100vw; } @media (width < 768px) { --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .pagebuilder-column-line { gap: calc(var(--spacing) * 5); @media (width < 1024px) { flex-wrap: wrap !important; } .pagebuilder-column { @media (width < 1024px) { width: 100% !important; } &:first-child { @media (width < 1024px) { order: 2; } } &:last-child { @media (width < 1024px) { order: 1; } } &:first-child { @media (width < 768px) { padding-inline: calc(var(--spacing) * 3); } } @media (width >= 1024px) { width: calc(1/2 * 100%); } } } } .accordion-widget.accordion-item { .icon.chevron { &:after { display: inline-block; height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10); background-image: url('../images/roundeddownarrow.svg'); background-size: contain; background-repeat: no-repeat; --tw-content: ''; content: var(--tw-content); @media (width < 768px) { height: calc(var(--spacing) * 6); } @media (width < 768px) { width: calc(var(--spacing) * 6); } } } .accordion-item-header-question.active { @media (width < 768px) { background-color: color-mix(in srgb, #1A1918 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black-h1) 10%, transparent); } } .icon.chevron { &:after { margin-bottom: calc(var(--spacing) * -1.5); display: inline-block; height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10); background-image: url('../images/roundeduparrow.svg'); background-size: contain; background-repeat: no-repeat; --tw-content: ''; content: var(--tw-content); @media (width < 768px) { height: calc(var(--spacing) * 6); } @media (width < 768px) { width: calc(var(--spacing) * 6); } } } } } .catalog-category-view, .catalogsearch-result-index { .ais-SortBy-select { padding-right: calc(var(--spacing) * 8); } } .catalog-product-view { div#customer-review-list + #review-form { @media (width >= 1024px) { margin-top: 214px; } } .cart_product { display: flex !important; @media (width >= 768px) { display: none !important; } } #customer-menu, #menu-search-icon, .wishlist-links, #menu-cart-icon { display: none; @media (width >= 768px) { display: flex; } } .mb_header_details { &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ) !important; } } background-color: var(--color-primary) !important; @media (width >= 768px) { background-color: var(--color-white) !important; } } .mb_menu_link { width: fit-content !important; @media (width >= 768px) { width: 80%; } } .header-search-div { display: none; @media (width >= 768px) { display: block; } } div#header-right-mb { display: none; @media (width >= 768px) { display: flex; } } .mb_header_details { flex-direction: row-reverse; @media (width >= 768px) { flex-direction: row; } } .nav-container { height: 84%; } .mobileMenu_trigger { padding: calc(var(--spacing) * 2); color: var(--color-white) !important; @media (width >= 768px) { padding: calc(var(--spacing) * 0); } @media (width >= 768px) { color: var(--color-black) !important; } svg { path { fill: var(--color-white); } } } .mb_menu { display: none; } } .catalog-product-view.active { .mb_menu_link { #customer-menu, #menu-search-icon, #search-button, .wishlist-links, #menu-cart-icon { display: flex !important; @media (width >= 768px) { display: flex; } svg { path { stroke: var(--color-white); } } } } div#header-right-mb { display: flex !important; @media (width >= 768px) { display: flex; } } .mb_menu_link { .wishlist-links, #menu-search-icon { svg { stroke: var(--color-white); } } } .mb_menu_btn { display: none !important; } .mobileMenu_trigger { position: relative; display: flex; align-items: center; svg { display: block !important; } } .menu-cart-icon { margin-left: calc(var(--spacing) * 0) !important; } .mb_header_details { height: 71px; } &:before { position: fixed; inset-inline: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); z-index: 1; height: 16%; width: 100%; background-color: var(--color-white); --tw-content: ''; content: var(--tw-content); } } .header-search-div { width: 33%; } .page-header { @media (width >= 768px) { position: sticky; } @media (width >= 768px) { top: calc(var(--spacing) * 0); } @media (width >= 768px) { z-index: 40; } } .aa-InputWrapper .aa-Input { height: calc(var(--spacing) * 12); width: 100%; border-radius: calc(infinity * 1px); --tw-border-style: none; border-style: none; background-color: color-mix(in srgb, #000 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 5%, transparent); } padding-inline: calc(var(--spacing) * 5); } .aa-SubmitButton { position: absolute; top: calc(1/2 * 100%); right: calc(var(--spacing) * 1.5); flex-shrink: 0; --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(infinity * 1px); &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } background-color: var(--color-primary); padding: calc(var(--spacing) * 2.5); color: var(--color-white); outline-offset: 0px; } .aa-InputWrapperSuffix { display: none; } .aa-Panel.productColumn2 { position: static; top: calc(var(--spacing) * 0) !important; right: calc(var(--spacing) * 0) !important; left: auto !important; z-index: 100; display: flex; height: 100vh !important; width: 100% !important; flex-direction: column; overflow: scroll; background-color: var(--color-white); padding: calc(var(--spacing) * 4); padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 8); --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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); @media (width < 500px) { margin-top: calc(var(--spacing) * 8); } @media (width < 500px) { padding-inline: calc(var(--spacing) * 0); } @media (width < 500px) { padding-top: calc(var(--spacing) * 0); } @media (width >= 768px) { position: fixed; } @media (width >= 768px) { top: auto !important; } @media (width >= 768px) { min-width: 700px !important; } @media (width >= 1024px) { width: calc(1/2 * 100%) !important; } box-shadow: -6px 15px 25px 0px #1A19181F; } .aa-List { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); column-gap: calc(var(--spacing) * 4); row-gap: calc(var(--spacing) * 6); padding-top: calc(var(--spacing) * 6); padding-bottom: calc(var(--spacing) * 10); @media (width >= 640px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (width >= 768px) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .aa-SourceFooter { margin-top: calc(var(--spacing) * 6); } .aa-SourceHeader { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .generatecss { position: absolute; position: relative; top: calc(var(--spacing) * 2); right: calc(var(--spacing) * 2); margin-right: calc(var(--spacing) * 1); display: flex; display: inline-block; height: calc(var(--spacing) * 1.5); height: 56px; height: 100%; width: calc(var(--spacing) * 1.5); width: 56px; width: calc(100% - 56px); flex-grow: 1; flex-direction: row; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 2.5); border-radius: var(--radius-lg) !important; border-radius: calc(infinity * 1px); border-radius: var(--radius-lg); border-style: var(--tw-border-style); border-width: 0px; background-color: var(--color-gray-h2); background-color: var(--color-green-500); background-color: var(--color-red-500); background-color: var(--color-white); padding: calc(var(--spacing) * 0); padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1); font-size: 10px; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-gray-700); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); &:hover { @media (hover: hover) { background-color: var(--color-primary-lighter); } } @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 3); } @media (width >= 768px) { height: calc(var(--spacing) * 3); } @media (width >= 768px) { height: fit-content; } @media (width >= 768px) { width: calc(var(--spacing) * 3); } @media (width >= 768px) { width: auto; } @media (width >= 768px) { width: 100%; } @media (width >= 768px) { flex-direction: column; } @media (width >= 768px) { gap: calc(var(--spacing) * 0.5); } @media (width >= 768px) { padding: calc(var(--spacing) * 2); } @media (width >= 768px) { padding-top: calc(var(--spacing) * 4); } @media (width >= 768px) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } body.search-open { @media (width < 500px) { overflow: hidden; } } #algolia-panel-wrapper { .aa-Panel { .aa-List { .algoliasearch-autocomplete-hit { .thumb { @media (width < 500px) { height: 56px; } @media (width < 500px) { width: 56px; } @media (width < 500px) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } img { @media (width < 500px) { height: 56px; } @media (width < 500px) { width: 56px; } } } .info { .algoliasearch-autocomplete-category { div { @media (width < 500px) { padding-inline: calc(var(--spacing) * 0); } } } } } } } #autocomplete-0-categories-lists { margin-bottom: 100px; @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 10); } } .aa-PanelLayout.aa-Panel--scrollable { display: flex; flex-direction: column; @media (width >= 768px) { flex-direction: column; } } section.aa-Source[data-autocomplete-source-id=categories] { ul.aa-List { margin-bottom: 100px; @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 10); } } } #algolia-panel-wrapper { section.aa-Source[data-autocomplete-source-id=categories] { margin-bottom: 100px; @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 10); } .aa-SourceHeader { padding-bottom: 4px; } } } .aa-SourceHeader { padding-bottom: 4px; } .aa-Source { #autocomplete-0-querySuggestionsPlugin-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: calc(var(--spacing) * 2); .aa-Item { width: auto; .algoliasearch-autocomplete-hit { display: block; border-radius: 30px; border-style: var(--tw-border-style); border-width: 1px; border-color: color-mix(in srgb, #1A1918 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black-h1) 15%, transparent); } 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); } } } } } .header-search-div { display: none !important; @media (width >= 768px) { display: block !important; } } .search-open { .header-search-div { position: fixed; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); z-index: 50; display: block !important; height: 100vh; width: 100%; background-color: var(--color-white); padding: calc(var(--spacing) * 6); @media (width >= 768px) { display: block !important; } } .aa-Autocomplete { width: 100%; } .aa-Label { margin-bottom: calc(var(--spacing) * 0); } } .product-info { select { width: 100%; border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 0px; background-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); padding-right: calc(var(--spacing) * 10) !important; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-primary); filter: brightness(0) saturate(100%) invert(37%) sepia(28%) saturate(5479%) hue-rotate(358deg) brightness(96%) contrast(107%); } } .checkout-cart-index { #maincontent { margin-block: calc(var(--spacing) * 10); @media (width >= 1024px) { margin-block: calc(var(--spacing) * 16); } .cart-price { .price { 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); @media (width >= 768px) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } } } } div[x-ref="am-free-gift-modal"] { max-width: var(--spacing-690px); @media (width < 768px) { height: var(--spacing-90\%); } @media (width < 768px) { width: var(--spacing-90\%); } } .open-search-section { .page-header { .header-search-div { position: fixed; top: calc(var(--spacing) * 0); right: calc(var(--spacing) * 0); z-index: 100; display: block; display: flex; height: 100vh; width: 100%; flex-direction: column; background-color: var(--color-white); --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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); @media (width >= 768px) { top: auto; } @media (width >= 768px) { min-width: 700px; } @media (width >= 1024px) { width: calc(1/2 * 100%); } } } } .page-footer { .footer-flex { span, p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--spacing) * 3); @media (width >= 768px) { justify-content: flex-end; } @media (width >= 1024px) { flex-wrap: nowrap; } img { display: block; height: calc(var(--spacing) * 6); min-width: calc(var(--spacing) * 6); } } strong { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); opacity: 60%; @media (width < 640px) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } } a { &:hover { color: var(--color-primary) !important; } span, p { &:hover { color: var(--color-primary) !important; } } svg { &:hover { opacity: 70%; } } } .footer-columns-one { .pagebuilder-column-line { flex-wrap: wrap; justify-content: space-between !important; gap: calc(var(--spacing) * 5); @media (width >= 1024px) { flex-wrap: nowrap; } .pagebuilder-column { margin-bottom: calc(var(--spacing) * 8); width: 100%; @media (width >= 640px) { width: 46% !important; } @media (width >= 1024px) { margin-bottom: calc(var(--spacing) * 0); } @media (width >= 1024px) { width: calc(1/4 * 100%) !important; } } .pagebuilder-column.footer-two-col { @media (width >= 1024px) { width: calc(1/5 * 100%) !important; } } .pagebuilder-column.footer-three-col { @media (width >= 1024px) { width: calc(1/6 * 100%) !important; } } .pagebuilder-column.footer-four-col { @media (width >= 1024px) { width: calc(1/5 * 100%) !important; } } .pagebuilder-column.footer-one-col { @media (width >= 1024px) { width: calc(1/3 * 100%) !important; } } } } .footer-columns-two { .pagebuilder-column-line { flex-wrap: wrap; justify-content: space-between !important; gap: calc(var(--spacing) * 5); @media (width >= 1024px) { flex-wrap: nowrap; } .pagebuilder-column { margin-bottom: calc(var(--spacing) * 8); width: 100%; @media (width >= 768px) { width: calc(1/3 * 100%); } @media (width >= 1024px) { margin-bottom: calc(var(--spacing) * 0); } } } } } @layer base { :where(form label) { margin-bottom: calc(var(--spacing) * 2); display: block; color: var(--color-fg-secondary); } :where(form legend) { margin-bottom: calc(var(--spacing) * 3); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); & + br { display: none; } } :where(fieldset ~ fieldset) { margin-top: calc(var(--spacing) * 8); } } .price-box { & .old-price, & .special-price { display: block; & .price-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } } & .old-price { --price-font-size: 0.875em; --price-font-weight: normal; .price { text-decoration: line-through; } } & .price-excluding-tax { display: block; &::after { content: " " attr(data-label); font-size: var(--price-font-size-label, 0.875rem); font-weight: var(--price-font-weight, normal); } } & .price-tax-label { font-size: var(--price-font-size-label, 0.875rem); } } .price-including-tax + .price-excluding-tax { --price-font-size: 1rem; } .price-container.price-tier_price { display: flex; gap: calc(var(--spacing) * 1); & > .price-including-tax + .price-excluding-tax { &::before { content: "(" attr(data-label) ": "; } &::after { content: ")"; } } } @layer components { .account-nav li { & a, & strong { display: flex; justify-content: space-between; padding-block: calc(var(--spacing) * 1); color: var(--color-primary); } & a:hover { text-decoration-line: underline; color: var(--color-black-h1); } & strong { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); text-decoration-line: underline; color: var(--color-black-h1); } } #account-nav { .delimiter { border-color: var(--color-primary); } } } @media (max-width: 768px) { #account-nav { ul.nav.items { display: flex; flex-direction: row; gap: calc(var(--spacing) * 2); overflow-x: auto; white-space: nowrap; li { border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: var(--color-primary); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); a { color: var(--color-primary); } &:hover { background-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } } } li.current { background-color: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); } strong { text-decoration-line: none; } } } } } .grecaptcha-badge { visibility: hidden; } .page-wrapper { display: flex; min-height: 100vh; flex-direction: column; } .page-main { flex-grow: 1; margin-block: calc(var(--spacing) * 8); } .columns { margin-inline: auto; display: grid; max-width: var(--spacing-1248px); grid-template-columns: minmax(0px, 1fr); gap: calc(var(--spacing) * 4) calc(var(--spacing) * 8); } .container, .cms-container { margin-inline: auto; max-width: var(--spacing-1248px); padding-inline: calc(var(--spacing) * 0); } @media (min-width: 1296px) { .columns { padding-inline: calc(var(--spacing) * 0); } } @media (max-width: 1296px) { .container, .cms-container { padding-inline: calc(var(--spacing) * 6); } } @media (width >= 768px) { :is([class*="page-layout-2columns-"], .page-layout-3columns) { --sidebar-width: 240px; --main-width: minmax(0px, 1fr); --page-layout: var(--sidebar-width) var(--main-width); .columns { grid-template-columns: var(--page-layout); grid-template-rows: auto 1fr; & > .column.main { grid-row: span 2; } } } .page-layout-2columns-left { .columns > .column.main { grid-column-start: 2; } } .page-layout-2columns-right { --page-layout: var(--main-width) var(--sidebar-width); .columns > .column.main { order: -1; } } } @media (width >= 1024px) { [class*="page-layout-2columns-"], .page-layout-3columns { --sidebar-width: 320px; } } @media (width >= 1280px) { .page-layout-3columns { --sidebar-width: 240px; --page-layout: var(--sidebar-width) var(--main-width) var(--sidebar-width); } } .font-poppins { font-family: "Poppins", sans-serif; } .font-roboto { font-family: "Roboto", sans-serif; } @layer components { .cms-content { --text-flow: 1em 1rem; --separator-flow: 2.5em; --list-flow: 0.5em; --h-color: initial; --h-family: initial; --h-size: 1.125em; --h-weight: 600; --h-line: 1.1; --h1-size: 3em; --h2-size: 2em; --h3-size: 1.625em; --h4-size: 1.375em; --marker-color: var(--color-primary); --link-color: var(--color-primary); --link-weight: 500; --blockquote-color: var(--color-primary); --table-py: calc(var(--spacing) * 3); --table-px: calc(var(--spacing) * 2); --table-stroke: var(--color-gray-400); --table-bg: canvas; --table-color: canvastext; :where(h1, h2, h3, h4, h5, h6, p, dl, ul, ol, pre, hgroup) { margin-block: var(--text-flow); } :where(blockquote, figure, hr) { margin-block: var(--separator-flow); margin-inline: 0; } :where([class~="lead"]) { font-size: 1.25em; } :where(h1, h2, h3, h4, h5, h6) { color: var(--h-color); font-family: var(--h-family); font-size: var(--h-size); font-weight: var(--h-weight); line-height: var(--h-line); text-wrap: balance; } :where(h1) { --h-size: var(--h1-size); } :where(h2) { --h-size: var(--h2-size); } :where(h3) { --h-size: var(--h3-size); } :where(h4) { --h-size: var(--h4-size); } ::marker { color: var(--marker-color); } :where(ul, ol) { list-style: revert; padding-inline-start: 2em; } :where(ol[type="a"]) { list-style-type: lower-alpha; } :where(ol[type="i"]) { list-style-type: lower-roman; } :where(ol[type="1"]) { list-style-type: decimal; } :where(blockquote) { border-inline-start: 4px solid var(--blockquote-color); padding-inline-start: 1.5em; padding-block: 0.25em; } :where(:any-link) { color: var(--link-color); font-weight: var(--link-weight); &:hover { text-decoration: underline; } } :where(table) { border-collapse: separate; border-spacing: 0; border-color: var(--table-stroke); } :where(thead, tbody, tfoot, tr, th, td) { border-color: inherit; text-align: inherit; } :where(th, td) { padding-block: var(--table-py); padding-inline: var(--table-px); background: var(--table-bg); color: var(--table-color); } :where(tr + tr :is(th, td)) { border-block-start-width: 1px; } :where(thead tr:last-child :is(th, td)) { border-block-end-width: 2px; } :where(tfoot tr:first-child :is(th, td)) { border-block-start-width: 2px; } :where(table:not(:has(.table-wrapper, [class*="overflow-"]))) { word-break: break-all; } > :where(:first-child) { margin-block-start: 0; } > :where(:last-child) { margin-block-end: 0; } max-width: 100%; } .table-wrapper { overflow: auto; } } .register-login-page { input.form-input { height: var(--spacing-55px); border-radius: calc(infinity * 1px); border-style: var(--tw-border-style); border-width: 2px; --tw-border-style: solid; border-style: solid; border-color: color-mix(in srgb, #1A1918 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black-h1) 15%, transparent); } } .label { margin-bottom: calc(var(--spacing) * 3); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-black-h1); @media (width >= 768px) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } form .field.choice label, fieldset .field.choice label { font-family: var(--font-dmsans); 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); } .field.field-reserved { margin-bottom: calc(var(--spacing) * 4) !important; } .field { margin-bottom: calc(var(--spacing) * 5); } .field.required > label::after { color: var(--color-black-h1); } } .two-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #customer-login-container { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); column-gap: calc(var(--spacing) * 4); row-gap: calc(var(--spacing) * 8); padding-block: calc(var(--spacing) * 8); @media (width >= 768px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .order-links { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 4); a { text-decoration: underline; } } .account { #maincontent { @media (width >= 1024px) { padding-top: calc(var(--spacing) * 8); } } .columns { display: block; @media (width >= 1024px) { display: grid; } } } .product-item { --price-font-size: 1.25em; .price-from, .price-to { --price-font-size: 1em; } } .product-info-main { --price-font-size: clamp(1.5em, 2.5vw, 2.5em); & .old-price { --price-font-size: 1em; } .product-grouped-options, .price-from, .price-to { --price-font-size: 1.5em; } } .wishlist-widget .price-box { & .price-label, & .old-price { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } } .product-image-container { display: block; margin-inline: auto; } .catalog-category-view, .catalogsearch-result-index, .ambrand-index-index { [data-accordion="true"] { .ais-Panel { margin: calc(var(--spacing) * 0); margin-bottom: calc(var(--spacing) * 3); border-radius: 0.25rem; padding-inline: calc(var(--spacing) * 0); .ais-RefinementList-searchBox { display: none; } .ais-Panel-body { padding-top: 22px; } } .ais-Panel-header { position: relative; &::after { content: var(--tw-content); position: absolute; } &::after { content: var(--tw-content); top: calc(1/2 * 100%); } &::after { content: var(--tw-content); right: calc(var(--spacing) * 0); } &::after { content: var(--tw-content); height: 8px; } &::after { content: var(--tw-content); width: 14px; } &::after { content: var(--tw-content); --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } &::after { content: var(--tw-content); rotate: 0deg; } &::after { content: var(--tw-content); background-image: url('../images/downarrowblack.svg'); } &::after { content: var(--tw-content); background-size: cover; } &::after { content: var(--tw-content); background-position: center; } &::after { content: var(--tw-content); background-repeat: no-repeat; } &::after { --tw-content: ''; content: var(--tw-content); } } } .open-accordion { .ais-Panel-header { &::after { content: var(--tw-content); rotate: 180deg; } &::after { filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(0%) hue-rotate(119deg) brightness(108%) contrast(100%); margin-right: calc(var(--spacing) * 3); } } .ais-Panel-header { cursor: pointer; &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } background-color: var(--color-primary); color: var(--color-white); } } .ais-Panel-header { cursor: pointer; border-radius: 0.25rem; padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 2); color: var(--color-black-h1); span { .name { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; padding: calc(var(--spacing) * 0); 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); } } } .rheostat-handle.rheostat-handle-upper .rheostat-tooltip { right: calc(var(--spacing) * 0); left: auto; } } [data-content-type="row"] { &[data-appearance="contained"] { margin-inline: auto; width: 100%; max-width: var(--spacing-1248px); [data-element="inner"] { background-attachment: scroll !important; } } &[data-appearance="full-bleed"] { background-attachment: scroll !important; } &[data-appearance="full-width"] { background-attachment: scroll !important; } } @media (max-width: 1296px) { [data-content-type="row"] { &[data-appearance="contained"] { padding-inline: calc(var(--spacing) * 6); } &[data-appearance="full-width"] { > .row-full-width-inner { padding-inline: calc(var(--spacing) * 6); } } } } body:where(:not([class*="-full-width"])) { [data-content-type="row"][data-appearance="contained"] { padding-inline: calc(var(--spacing) * 0); } } [data-content-type="column-group"], [data-content-type="column-line"] { flex-wrap: wrap; @media (width >= 768px) { flex-wrap: nowrap; } } [data-content-type="column"] { width: 100%; max-width: 100%; background-attachment: scroll !important; flex-basis: 100%; @media (width >= 768px) { flex-basis: auto; } } [data-content-type="tabs"] { .tabs-navigation { margin-bottom: -1px; display: block; padding: calc(var(--spacing) * 0); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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); li.tab-header { position: relative; margin-block: calc(var(--spacing) * 0); margin-right: calc(var(--spacing) * 0); margin-left: -1px; display: inline-block; max-width: 100%; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-style: var(--tw-border-style); border-width: 1px; border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; --tw-border-style: solid; border-style: solid; border-color: var(--color-gray-300); background-color: var(--color-gray-100); overflow-wrap: break-word; &:first-child { margin-left: calc(var(--spacing) * 0); } &.active { z-index: 20; background-color: var(--color-white); border-bottom: 1px solid white; } a.tab-title { position: relative; display: block; cursor: pointer; padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 3); vertical-align: middle; 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); white-space: normal; span { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-black); } } } } .tabs-content { position: relative; z-index: 10; overflow: hidden; border-radius: var(--radius-sm); border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: solid; border-style: solid; border-color: var(--color-gray-300); background-color: var(--color-container-lighter); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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); [data-content-type="tab-item"] { padding: calc(var(--spacing) * 8); min-height: inherit; background-attachment: scroll !important; } } &.tab-align-left { .tabs-content { border-top-left-radius: 0 !important; } } &.tab-align-right { .tabs-content { border-top-right-radius: 0 !important; } } } [data-content-type="text"] { overflow-wrap: break-word; } [data-content-type="heading"] { overflow-wrap: break-word; } [data-content-type="buttons"] { max-width: 100%; [data-content-type="button-item"] { margin-right: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2); max-width: 100%; [data-element="link"], [data-element="empty_link"] { max-width: 100%; overflow-wrap: break-word; } [data-element="empty_link"] { cursor: default; } a, button, div { display: inline-block; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } a, button, div { &.pagebuilder-button-primary { --btn-stroke: #0000; --btn-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 10%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in srgb, var(--color-primary) 10%, #0000); } --btn-hover-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 20%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-hover-bg: color-mix(in srgb, var(--color-primary) 20%, #0000); } --btn-active-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 30%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-active-bg: color-mix(in srgb, var(--color-primary) 30%, #0000); } --btn-color: var(--color-fg); display: inline-flex; justify-content: center; align-items: center; gap: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 4); border-radius: var(--radius-lg); border-width: 2px; border-color: var(--btn-stroke); background-color: var(--btn-bg); color: var(--btn-color); font-weight: 500; user-select: none; vertical-align: middle; transition-property: color, background-color, border-color, outline-color; transition-timing-function: var(--default-transition-timing-function); transition-duration: var(--default-transition-duration); &:hover { border-color: var(--btn-hover-stroke, var(--btn-stroke)); background-color: var(--btn-hover-bg, var(--btn-bg)); color: var(--btn-hover-color, var(--btn-color)); text-decoration: none; } &:is(:active, .is-active, [aria-current="page"], [aria-current="true"]) { border-color: var(--btn-active-stroke, var(--btn-stroke)); background-color: var(--btn-active-bg, var(--btn-bg)); color: var(--btn-active-color, var(--btn-color)); } &:is(:disabled, [aria-disabled="true"]) { border-color: var(--btn-disabled-stroke, var(--color-gray-200)); background-color: var(--btn-disabled-bg, var(--color-gray-50)); color: var(--btn-disabled-color, var(--color-gray-500)); } border-radius: var(--radius-100px); border-color: var(--color-primary); &:hover { @media (hover: hover) { border-color: var(--color-black-h1); } } --btn-stroke: var(--color-white); --btn-bg: var(--color-primary); --btn-color: var(--color-on-primary); --btn-hover-stroke: var(--color-white); --btn-hover-bg: var(--color-black-h1); --btn-hover-color: var(--color-white); --btn-active-stroke: var(--color-white); --btn-active-bg: var(--color-black-h1); --btn-active-color: var(--color-white); padding-inline: calc(var(--spacing) * 5); } &.pagebuilder-button-secondary { --btn-stroke: #0000; --btn-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 10%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in srgb, var(--color-primary) 10%, #0000); } --btn-hover-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 20%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-hover-bg: color-mix(in srgb, var(--color-primary) 20%, #0000); } --btn-active-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 30%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-active-bg: color-mix(in srgb, var(--color-primary) 30%, #0000); } --btn-color: var(--color-fg); display: inline-flex; justify-content: center; align-items: center; gap: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 4); border-radius: var(--radius-lg); border-width: 2px; border-color: var(--btn-stroke); background-color: var(--btn-bg); color: var(--btn-color); font-weight: 500; user-select: none; vertical-align: middle; transition-property: color, background-color, border-color, outline-color; transition-timing-function: var(--default-transition-timing-function); transition-duration: var(--default-transition-duration); &:hover { border-color: var(--btn-hover-stroke, var(--btn-stroke)); background-color: var(--btn-hover-bg, var(--btn-bg)); color: var(--btn-hover-color, var(--btn-color)); text-decoration: none; } &:is(:active, .is-active, [aria-current="page"], [aria-current="true"]) { border-color: var(--btn-active-stroke, var(--btn-stroke)); background-color: var(--btn-active-bg, var(--btn-bg)); color: var(--btn-active-color, var(--btn-color)); } &:is(:disabled, [aria-disabled="true"]) { border-color: var(--btn-disabled-stroke, var(--color-gray-200)); background-color: var(--btn-disabled-bg, var(--color-gray-50)); color: var(--btn-disabled-color, var(--color-gray-500)); } --btn-stroke: var(--color-primary-lighter); --btn-bg: var(--color-on-primary); --btn-color: var(--color-primary-darker); --btn-hover-stroke: var(--color-primary-lighter); --btn-hover-bg: var(--color-on-primary); --btn-hover-color: var(--color-primary-lighter); --btn-active-stroke: #0000; --btn-active-bg: var(--color-primary); --btn-active-color: var(--color-on-primary); } } [data-content-type="divider"] hr { border-block-end: 0; border-inline: 0; } [data-content-type="html"] { overflow-wrap: break-word; } [data-content-type="image"] { > [data-element="link"], > [data-element="link"] img { border-radius: inherit; } .pagebuilder-mobile-hidden { display: none; @media (width >= 768px) { display: inline-block; } } .pagebuilder-mobile-only { display: inline-block; @media (width >= 768px) { display: none; } } figcaption { overflow-wrap: break-word; } } [data-content-type="video"] { font-size: 0; .pagebuilder-video-inner { display: inline-block; width: 100%; } .pagebuilder-video-container { position: relative; overflow: hidden; border-radius: inherit; padding-top: 56.25%; } iframe, video { position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); height: 100%; width: 100%; } } [data-content-type="banner"] { & > [data-element="link"], & > [data-element="empty_link"] { color: inherit; text-decoration: inherit; &:hover { color: inherit; text-decoration: inherit; } } .pagebuilder-banner-wrapper { overflow-wrap: break-word; background-clip: padding-box; border-radius: inherit; background-attachment: scroll !important; .pagebuilder-overlay { position: relative; padding: calc(var(--spacing) * 8); 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; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 500ms; transition-duration: 500ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); &.pagebuilder-poster-overlay { display: flex; align-items: center; justify-content: center; } &:not(.pagebuilder-poster-overlay) { max-width: none; @media (width >= 768px) { max-width: var(--container-xl); } } } &.jarallax { .video-overlay { z-index: 0; } } [data-element="content"] { overflow: auto; min-height: 50px; } .pagebuilder-banner-button { margin: calc(var(--spacing) * 0); margin-top: calc(var(--spacing) * 5); display: inline-block; max-width: 100%; overflow-wrap: break-word; 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: 500ms; transition-duration: 500ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); text-align: inherit; } .pagebuilder-poster-content { width: 100%; } } &[data-appearance="collage-centered"] { .pagebuilder-banner-wrapper { .pagebuilder-overlay { margin-inline: auto; } } } &[data-appearance="collage-left"] { .pagebuilder-banner-wrapper { .pagebuilder-overlay { margin-right: auto; } } } &[data-appearance="collage-right"] { .pagebuilder-banner-wrapper { .pagebuilder-overlay { margin-left: auto; } } } } [data-content-type="slider"] { position: relative; padding-block-end: 3rem; &:not(:has(.snap-track)) { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; padding-block: 1.5rem calc(1.5rem + 3rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth; } & > * { scroll-snap-align: start; } } [data-page-builder-slider-nav] { position: absolute; inset: auto 0 0; } } [data-content-type="slide"] { position: relative; --overlay-align: initial; .pagebuilder-slide-wrapper { border-radius: inherit; min-block-size: inherit; overflow-wrap: break-word; &.jarallax { .video-overlay { -webkit-transform: unset; z-index: 1; } .pagebuilder-overlay { position: relative; z-index: 2; } [id*="jarallax-container"] > :is(div, img, video, iframe) { margin: auto !important; transform: none !important; } } } .pagebuilder-poster-content { inline-size: 100%; } [data-element="content"] { min-height: 50px; overflow: auto; } .pagebuilder-overlay { max-inline-size: 32rem; padding: 2rem; border-radius: inherit; transition: background-color 500ms ease; &.pagebuilder-poster-overlay { display: flex; align-items: center; justify-content: center; max-inline-size: 100%; min-block-size: inherit; } } &[data-appearance="collage-centered"] .pagebuilder-overlay { margin-inline: auto; } &[data-appearance="collage-left"] .pagebuilder-overlay { margin-inline: 0 auto; } &[data-appearance="collage-right"] .pagebuilder-overlay { margin-inline: auto 0; } } [data-content-type="map"] { height: calc(var(--spacing) * 72); } [data-content-type$="block"] { .block { p:last-child { margin-top: calc(var(--spacing) * 0); margin-bottom: calc(var(--spacing) * 4); } } } [data-content-type="dynamic_block"] { [data-content-type="image"] img { display: inline; } .block-banners .banner-item-content, .block-banners-inline .banner-item-content { margin-bottom: auto; } } .glider-contain { position: relative; margin-inline: auto; margin-block: calc(var(--spacing) * 0); width: 100%; } .glider { overflow-y: hidden; &.draggable { -webkit-user-select: none; user-select: none; cursor: grab; .glider-slide img { pointer-events: none; -webkit-user-select: none; user-select: none; } } &.drag { cursor: grabbing; } &::-webkit-scrollbar { height: calc(var(--spacing) * 0); opacity: 0%; } .glider-track { z-index: 10; margin: calc(var(--spacing) * 0); display: flex; width: 100%; padding: calc(var(--spacing) * 0); } } .glider-slide { margin: calc(var(--spacing) * 2); width: 100%; align-content: center; justify-content: center; -webkit-user-select: none; user-select: none; min-width: 150px; img { max-width: 100%; } } .glider-hide { opacity: 0%; } .glider-prev, .glider-next { &.disabled { cursor: default; color: var(--color-gray-500); opacity: 25%; } } .glider-dot { margin: calc(var(--spacing) * 1); display: block; height: calc(var(--spacing) * 3); width: calc(var(--spacing) * 3); cursor: pointer; border-radius: calc(infinity * 1px); background-color: var(--color-black); opacity: 25%; --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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); &.active { opacity: 100%; } } @media (max-width: 36em) { .glider::-webkit-scrollbar { height: calc(var(--spacing) * 1); width: calc(var(--spacing) * 2); appearance: none; opacity: 100%; } .glider::-webkit-scrollbar-thumb { opacity: 100%; border-radius: 99px; background-color: rgba(156, 156, 156, 0.25); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.25); box-shadow: 0 0 1px rgba(255, 255, 255, 0.25); } } [data-show-arrows="false"] { .glider-prev, .glider-next { display: none; } } [data-show-dots="false"] { .glider-dots { display: none; } } .mobile-btn-w-full { a, button, div { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); @media (width < 768px) { width: 100%; } } } .checkout-onepage-success .block-order-details-gift-message .block-title, .sales-order-view .block-order-details-gift-message .block-title { margin-top: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 4); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; padding-bottom: calc(var(--spacing) * 2); font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .checkout-onepage-success .action.close, .sales-order-view .action.close { display: none; } .checkout-onepage-success .order-items .options .action.show, .sales-order-view .order-items .options .action.show { margin-top: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 4); display: block; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; padding-bottom: calc(var(--spacing) * 2); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .checkout-onepage-success .order-items .options, .sales-order-view .order-items .options { padding-bottom: calc(var(--spacing) * 8); padding-left: calc(var(--spacing) * 4); } .checkout-onepage-success .actions-toolbar { margin-top: calc(var(--spacing) * 6); display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; border-style: var(--tw-border-style); border-width: 0px; padding-top: calc(var(--spacing) * 4); } .checkout-onepage-success .actions-toolbar .primary a { --btn-stroke: #0000; --btn-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 10%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in srgb, var(--color-primary) 10%, #0000); } --btn-hover-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 20%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-hover-bg: color-mix(in srgb, var(--color-primary) 20%, #0000); } --btn-active-bg: color-mix(in srgb, oklch(0.6591 0.2212 36.74) 30%, #0000); @supports (color: color-mix(in lab, red, red)) { --btn-active-bg: color-mix(in srgb, var(--color-primary) 30%, #0000); } --btn-color: var(--color-fg); display: inline-flex; justify-content: center; align-items: center; gap: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 4); border-radius: var(--radius-lg); border-width: 2px; border-color: var(--btn-stroke); background-color: var(--btn-bg); color: var(--btn-color); font-weight: 500; user-select: none; vertical-align: middle; transition-property: color, background-color, border-color, outline-color; transition-timing-function: var(--default-transition-timing-function); transition-duration: var(--default-transition-duration); &:hover { border-color: var(--btn-hover-stroke, var(--btn-stroke)); background-color: var(--btn-hover-bg, var(--btn-bg)); color: var(--btn-hover-color, var(--btn-color)); text-decoration: none; } &:is(:active, .is-active, [aria-current="page"], [aria-current="true"]) { border-color: var(--btn-active-stroke, var(--btn-stroke)); background-color: var(--btn-active-bg, var(--btn-bg)); color: var(--btn-active-color, var(--btn-color)); } &:is(:disabled, [aria-disabled="true"]) { border-color: var(--btn-disabled-stroke, var(--color-gray-200)); background-color: var(--btn-disabled-bg, var(--color-gray-50)); color: var(--btn-disabled-color, var(--color-gray-500)); } border-radius: var(--radius-100px); border-color: var(--color-primary); &:hover { @media (hover: hover) { border-color: var(--color-black-h1); } } --btn-stroke: var(--color-white); --btn-bg: var(--color-primary); --btn-color: var(--color-on-primary); --btn-hover-stroke: var(--color-white); --btn-hover-bg: var(--color-black-h1); --btn-hover-color: var(--color-white); --btn-active-stroke: var(--color-white); --btn-active-bg: var(--color-black-h1); --btn-active-color: var(--color-white); } .checkout-onepage-success .order-details-items .order-title { margin-bottom: calc(var(--spacing) * 4); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; padding-bottom: calc(var(--spacing) * 2); font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } #group-fields-customer-attributes { .messages { margin-bottom: calc(var(--spacing) * 5); } .step-title { margin-top: calc(var(--spacing) * 7); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); color: var(--color-gray-800); } .admin__field.field { margin-bottom: calc(var(--spacing) * 7); .control { .select, .textarea, .input-text { border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-300); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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); min-width: 207px; &:focus { border-color: var(--color-primary-lighter); --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-primary); --tw-ring-opacity: 50; } } .textarea { min-height: 150px; } .note { margin-top: calc(var(--spacing) * 3); display: block; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--color-secondary); } .nested, .select-img-wrapper { display: flex; flex-wrap: wrap; align-items: baseline; .amorderattr_img_checkbox, .amorderattr_img_radio { padding-right: calc(var(--spacing) * 3); label input { margin-right: calc(var(--spacing) * 2); } } } .edit-container { display: flex; align-items: baseline; .download-file { margin-right: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 4); cursor: pointer; border-radius: var(--radius-lg); --tw-border-style: none; border-style: none; &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } background-color: var(--color-primary); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); 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-white); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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); &:hover { background-color: var(--color-primary-lighter); --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); } &:focus { border-color: transparent; --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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-blue-800); --tw-outline-style: none; outline-style: none; --tw-ring-opacity: 50; } } .checkbox { margin-right: calc(var(--spacing) * 2); } } .input-file { position: relative; right: calc(var(--spacing) * 1); bottom: calc(var(--spacing) * 1); padding-block: calc(var(--spacing) * 1); padding-left: calc(var(--spacing) * 1); &:focus { border-color: transparent; --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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-blue-800); --tw-outline-style: none; outline-style: none; --tw-ring-opacity: 50; box-shadow: none; } } .input-file::file-selector-button { margin-right: calc(var(--spacing) * 4); cursor: pointer; border-radius: var(--radius-lg); --tw-border-style: none; border-style: none; &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } background-color: var(--color-primary); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); 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-white); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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); &:hover { background-color: var(--color-primary-lighter); --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); } } } } } .field.required>.amcustomerattr.label:after { --tw-content: ""; position: relative; top: -.25rem; font-size: .75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(220 38 38/var(--tw-text-opacity,1)); content: var(--tw-content); --tw-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12m5.196-9L6.804 15m0-6 10.392 6'/%3E%3C/svg%3E"); --tw-icon-size: 1em; display: inline-block; width: var(--tw-icon-size); height: var(--tw-icon-size); background-color: currentcolor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: var(--tw-icon); mask-image: var(--tw-icon); } #giftcard-preview-dialog { table.main { width: auto !important; .amcard-message-body { img { width: 100%; } } } } .rating-result:before, .summ-rating:before { content: '\2605' '\2605' '\2605' '\2605' '\2605'; } .free-gift-button a { color: var(--color-blue-600); } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .cursor-pointer[disabled] { display: none; } .swiper-pagination-bullets .swiper-pagination-bullet:before { display: none; } .swiper-pagination-horizontal { text-align: center; } @layer components { .toolbar-products .modes-mode.mode-quick-order { background-image: url('data:image/svg+xml;utf8,'); } .toolbar-products .modes:has(> .modes-mode.mode-quick-order) { width: max-content; } .amqorder-price .price-box { display: grid; } } @layer components { .ambrand-info-value > a { text-decoration-line: underline; } .category-view .ambrand-info { padding-inline: calc(var(--spacing) * 6); } .page-wrapper .container:has(.ambrand-info) { @media (width >= 768px) { flex-direction: column; } } .container .ambrand-info { margin-top: calc(var(--spacing) * 8); margin-bottom: calc(var(--spacing) * 8); --tw-leading: calc(var(--spacing) * 4); line-height: calc(var(--spacing) * 4); .ambrand-info-value { margin-bottom: calc(var(--spacing) * 0); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } } .page-wrapper .ambrand-widget-brand-info .ambrand-info { margin-top: calc(var(--spacing) * 0); margin-bottom: calc(var(--spacing) * 0); } .additional-attributes .ambrand-info-block .ambrand-info { margin-top: calc(var(--spacing) * 0); margin-bottom: calc(var(--spacing) * 0); } } .ampickup-curbside-banner-img { margin-top: calc(var(--spacing) * 5); width: 100%; } @layer utilities { .amlocator-info-popup { .amlocator-name { margin-block: calc(var(--spacing) * 2); font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); color: var(--color-primary); .amlocator-map-pin { display: none; } } .amlocator-image { img { margin-bottom: calc(var(--spacing) * 2); max-width: 150px; } } } } @layer utilities { .amlocator-stores-wrapper { .amlocator-store-desc { &.active { a { color: var(--color-white); } } } .amlocator-store-information { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .amlocator-title { 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); } .amlocator-map-pin { display: none; } } } @layer utilities { .amlocator-directions-container { & table.adp-placemark { &[class*="bg-opacity-"] { background-color: oklch(0.6591 0.2212 36.74); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in srgb, var(--color-primary) calc(100% / var(--tw-bg-opacity)), #0000 ); } } background-color: var(--color-primary); vertical-align: middle; --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-white); } } } @layer utilities { .amlocator-review-popup-content { a { color: var(--color-blue-600); &:hover { @media (hover: hover) { text-decoration-line: underline; } } } } } .amxnotif-stock-gdrp-label, .amxnotif-price-gdrp label, .amxnotif-stock-gdrp label { a { text-decoration-line: underline; } } .products { &.products-grid { .rating-summary { justify-content: center; } .product-info { & > div:last-child { justify-content: flex-end; } } } } .product-slider { .rating-summary { justify-content: center; } .product-info { & > div:last-child { justify-content: flex-end; } } } .catalog-product-view { .product-info-main { section { .swatch-attribute-options { > div { margin-left: 0; } } } } } .mollie-buttons { margin-top: 10%; text-align: center; opacity: 0; animation: fadeIn 1s; animation-delay: 1s; animation-fill-mode: forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .mollie-buttons .button { display: inline-block; margin: 20px; max-width: 100%; padding: 0 16px; border: 0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .19); border-radius: 6px; background-color: #0095FF; color: #FFF; font-size: 1.8rem; font-weight: 700; line-height: 4.4rem; text-align: center; text-decoration: none; outline: none; overflow: hidden; text-overflow: ellipsis; -webkit-transition: background .15s; transition: background .15s; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mollie-buttons { opacity: 0; -webkit-transition: opacity 2s ease-in; -moz-transition: opacity 2s ease-in; -ms-transition: opacity 2s ease-in; -o-transition: opacity 2s ease-in; transition: opacity 2s ease-in; } .mollie-buttons .button:hover { background-color: #0077CB; } .mollie-loading .redirect-block { padding: 10%; text-align: center; } .checkout-payment-method #mollie_methods_ideal-form .label { height: 35px; display: inline-block; } .checkout-payment-method #mollie_methods_ideal-form .payment-icon { width: 35px; max-height: 30px; } .checkout-payment-method #mollie_methods_kbc-form .label { height: 35px; display: inline-block; } .checkout-payment-method #mollie_methods_kbc-form .payment-icon { width: 35px; max-height: 30px; } .checkout-payment-method #mollie_methods_giftcard-form .label { height: 40px; display: inline-block; } .checkout-payment-method #mollie_methods_giftcard-form .payment-icon { width: 35px; max-height: 30px; } .mollie-payment-icon { width: 25px; margin-right: 5px; vertical-align: middle; } .mollie-loading .loader { border: 16px solid #E3F0FA; border-top: 16px solid #31A8F0; border-radius: 50%; width: 50px; height: 50px; animation: spin 2s linear infinite; margin-left: auto; margin-right: auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .payment-method-content .card-container { max-width: 400px; overflow: auto; background-color: #FFF; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.1); display: block; padding: 20px; margin-bottom: 10px; } .apple-pay-button { -webkit-appearance: -apple-pay-button; } @supports (-webkit-appearance: -apple-pay-button) { .apple-pay-button-with-text { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy; } .apple-pay-button-with-text > * { visibility: hidden; } .apple-pay-button-black-with-text { -apple-pay-button-style: black; } .apple-pay-button-white-with-text { -apple-pay-button-style: white; cursor: pointer; } .apple-pay-button-white-with-line-with-text { -apple-pay-button-style: white-outline; } .apple-pay-button-color-black { -apple-pay-button-style: black; } .apple-pay-button-color-white { -apple-pay-button-style: white; } .apple-pay-button-color-white-outline { -apple-pay-button-style: white-outline; } .apple-pay-button-text-buy { -apple-pay-button-type: buy; } .apple-pay-button-text-donate { -apple-pay-button-type: donate; } .apple-pay-button-text-plain { -apple-pay-button-type: plain; } .apple-pay-button-text-book { -apple-pay-button-type: book; } .apple-pay-button-text-check-out { -apple-pay-button-type: check-out; } .apple-pay-button-text-subscribe { -apple-pay-button-type: subscribe; } .apple-pay-button-text-add-money { -apple-pay-button-type: add-money; } .apple-pay-button-text-contribute { -apple-pay-button-type: contribute; } .apple-pay-button-text-order { -apple-pay-button-type: order; } .apple-pay-button-text-reload { -apple-pay-button-type: reload; } .apple-pay-button-text-rent { -apple-pay-button-type: rent; } .apple-pay-button-text-support { -apple-pay-button-type: support; } .apple-pay-button-text-tip { -apple-pay-button-type: tip; } .apple-pay-button-text-top-up { -apple-pay-button-type: top-up; } } .mollie-applepay-button-hidden { display: none; } .mollie-applepay-minicart-button { height: 40px; } @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; } @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-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; 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-ordinal { syntax: "*"; inherits: false; } @property --tw-slashed-zero { syntax: "*"; inherits: false; } @property --tw-numeric-figure { syntax: "*"; inherits: false; } @property --tw-numeric-spacing { syntax: "*"; inherits: false; } @property --tw-numeric-fraction { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; 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 #0000; } @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: ""; 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; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: 0.5; } } @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-scroll-snap-strictness: proximity; --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-divide-y-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-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: 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: ""; } } }