+
-
+
-
-
+
-
+
-
-
-
- Audio & Tech
- Available
+
+
+
Sony WH-1000XM5 Noise Canceling Headphones
@@ -246,24 +232,27 @@₩320,000
-
태그로 합쳐서 HTML로 주입 + modalDesc.innerHTML = descData.join('
'); + } else { + modalDesc.textContent = descData || ''; + } + } + + // 구매일자 처리 (경로 수정: product.specs?.purchaseDate) + const modalDate = document.getElementById('modal-date'); + const modalDateRow = document.getElementById('modal-date-row'); + + // specs 객체 안의 purchaseDate를 가져옴 + const pDate = product.specs?.purchaseDate; + + if (pDate && pDate.trim() !== '' && pDate !== 'null') { + modalDate.textContent = pDate; + modalDateRow.classList.remove('hidden'); + modalDateRow.classList.add('flex'); + } else { + modalDateRow.classList.add('hidden'); + modalDateRow.classList.remove('flex'); + } + // 텍스트 정보 주입 (ID들 맞춰주세요) document.getElementById('modal-title').textContent = product.title; document.getElementById('modal-price').textContent = `${product.currency}${product.price.toLocaleString()}`; @@ -485,52 +586,48 @@ function getCategories(products) { } function renderCategoryChips(products) { - const container = document.getElementById('filter-chips'); - if (!container) return; + const container = document.getElementById('filter-chips'); + if (!container) return; - const categories = ['All', ...new Set(products.map((p) => p.category))]; + const categories = ['All', ...new Set(products.map((p) => p.category))]; - container.innerHTML = ''; + container.innerHTML = ''; - categories.forEach((cat) => { - const isActive = activeCategories.has(cat); + categories.forEach((cat) => { + const isActive = activeCategories.has(cat); - const chip = document.createElement('button'); - chip.className = ` + const chip = document.createElement('button'); + chip.className = ` filter-chip px-4 py-2 rounded-full text-sm font-medium transition border - ${isActive - ? 'bg-primary text-white border-primary' - : 'bg-slate-50 text-slate-600 border-slate-200'} + ${isActive ? 'bg-primary text-white border-primary' : 'bg-slate-50 text-slate-600 border-slate-200'} `; - chip.textContent = cat; - chip.dataset.category = cat; + chip.textContent = cat; + chip.dataset.category = cat; - chip.onclick = () => { - toggleCategory(cat); - }; + chip.onclick = () => { + toggleCategory(cat); + }; - container.appendChild(chip); - }); + container.appendChild(chip); + }); } function toggleCategory(category) { - if (category === 'All') { - activeCategories.clear(); - activeCategories.add('All'); - } else { - activeCategories.delete('All'); - activeCategories.has(category) - ? activeCategories.delete(category) - : activeCategories.add(category); + if (category === 'All') { + activeCategories.clear(); + activeCategories.add('All'); + } else { + activeCategories.delete('All'); + activeCategories.has(category) ? activeCategories.delete(category) : activeCategories.add(category); - if (activeCategories.size === 0) { - activeCategories.add('All'); + if (activeCategories.size === 0) { + activeCategories.add('All'); + } } - } - renderCategoryChips(products); - applyFilters(); + renderCategoryChips(products); + applyFilters(); } function bindCategoryFilter(products) { @@ -563,7 +660,6 @@ function bindCategoryFilter(products) { }); } - // 카테고리 필터 renderCategoryChips(products); bindCategoryFilter(products); diff --git a/style/tailwind.css b/style/tailwind.css index a5525e2..d67cb24 100644 --- a/style/tailwind.css +++ b/style/tailwind.css @@ -9,12 +9,36 @@ "Courier New", monospace; --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); + --color-red-400: oklch(70.4% 0.191 22.216); --color-red-700: oklch(50.5% 0.213 27.518); + --color-red-900: oklch(39.6% 0.141 25.723); + --color-orange-100: oklch(95.4% 0.038 75.164); + --color-orange-400: oklch(75% 0.183 55.934); + --color-orange-700: oklch(55.3% 0.195 38.402); + --color-orange-900: oklch(40.8% 0.123 38.172); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-600: oklch(66.6% 0.179 58.318); --color-green-100: oklch(96.2% 0.044 156.743); + --color-green-400: oklch(79.2% 0.209 151.711); --color-green-700: oklch(52.7% 0.154 150.069); + --color-green-900: oklch(39.3% 0.095 152.535); + --color-blue-100: oklch(93.2% 0.032 255.585); + --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-600: oklch(54.6% 0.245 262.881); + --color-blue-700: oklch(48.8% 0.243 264.376); + --color-blue-900: oklch(37.9% 0.146 265.522); + --color-indigo-100: oklch(93% 0.034 272.788); + --color-indigo-400: oklch(67.3% 0.182 276.935); + --color-indigo-700: oklch(45.7% 0.24 277.023); + --color-indigo-900: oklch(35.9% 0.144 278.697); + --color-purple-100: oklch(94.6% 0.033 307.174); + --color-purple-400: oklch(71.4% 0.203 305.504); + --color-purple-700: oklch(49.6% 0.265 301.924); + --color-purple-900: oklch(38.1% 0.176 304.987); + --color-pink-100: oklch(94.8% 0.028 342.258); + --color-pink-400: oklch(71.8% 0.202 349.761); + --color-pink-700: oklch(52.5% 0.223 3.958); + --color-pink-900: oklch(40.8% 0.153 2.432); --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); @@ -258,6 +282,9 @@ .top-0 { top: calc(var(--spacing) * 0); } + .top-1 { + top: calc(var(--spacing) * 1); + } .top-1\/2 { top: calc(1/2 * 100%); } @@ -270,36 +297,30 @@ .right-4 { right: calc(var(--spacing) * 4); } - .bottom-4 { - bottom: calc(var(--spacing) * 4); + .bottom-2 { + bottom: calc(var(--spacing) * 2); } .bottom-6 { bottom: calc(var(--spacing) * 6); } + .left-1 { + left: calc(var(--spacing) * 1); + } .left-1\/2 { left: calc(1/2 * 100%); } .left-3 { left: calc(var(--spacing) * 3); } + .left-3\/5 { + left: calc(3/5 * 100%); + } .left-4 { left: calc(var(--spacing) * 4); } - .left-6 { - left: calc(var(--spacing) * 6); - } - .z-10 { - z-index: 10; - } .z-50 { z-index: 50; } - .z-\[60\] { - z-index: 60; - } - .z-\[70\] { - z-index: 70; - } .container { width: 100%; @media (width >= 40rem) { @@ -345,12 +366,6 @@ .ml-0 { margin-left: calc(var(--spacing) * 0); } - .ml-12 { - margin-left: calc(var(--spacing) * 12); - } - .ml-20 { - margin-left: calc(var(--spacing) * 20); - } .block { display: block; } @@ -363,16 +378,15 @@ .hidden { display: none; } + .table { + display: table; + } .aspect-\[4\/5\] { aspect-ratio: 4/5; } .aspect-square { aspect-ratio: 1 / 1; } - .size-1\.5 { - width: calc(var(--spacing) * 1.5); - height: calc(var(--spacing) * 1.5); - } .size-8 { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); @@ -392,9 +406,6 @@ .\!h-10 { height: calc(var(--spacing) * 10) !important; } - .h-1\.5 { - height: calc(var(--spacing) * 1.5); - } .h-2 { height: calc(var(--spacing) * 2); } @@ -407,14 +418,8 @@ .h-10 { height: calc(var(--spacing) * 10); } - .h-\[400px\] { - height: 400px; - } - .h-\[450px\] { - height: 450px; - } - .h-\[500px\] { - height: 500px; + .h-\[80vh\] { + height: 80vh; } .h-auto { height: auto; @@ -425,9 +430,6 @@ .h-px { height: 1px; } - .max-h-\[70\%\] { - max-height: 70%; - } .max-h-\[70vh\] { max-height: 70vh; } @@ -437,12 +439,15 @@ .max-h-full { max-height: 100%; } + .min-h-80 { + min-height: calc(var(--spacing) * 80); + } + .min-h-\[60vh\] { + min-height: 60vh; + } .min-h-screen { min-height: 100vh; } - .w-1\.5 { - width: calc(var(--spacing) * 1.5); - } .w-2 { width: calc(var(--spacing) * 2); } @@ -452,9 +457,6 @@ .w-5 { width: calc(var(--spacing) * 5); } - .w-6 { - width: calc(var(--spacing) * 6); - } .w-10 { width: calc(var(--spacing) * 10); } @@ -482,25 +484,39 @@ .min-w-40 { min-width: calc(var(--spacing) * 40); } - .min-w-full { - min-width: 100%; - } .flex-1 { flex: 1; } + .flex-shrink { + flex-shrink: 1; + } .flex-shrink-0 { flex-shrink: 0; } .shrink-0 { flex-shrink: 0; } + .flex-grow { + flex-grow: 1; + } .grow { flex-grow: 1; } + .border-collapse { + border-collapse: collapse; + } + .-translate-x-1 { + --tw-translate-x: calc(var(--spacing) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1/2 * 100%) * -1); 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-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); @@ -508,24 +524,15 @@ .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .cursor-grab { - cursor: grab; - } .cursor-pointer { cursor: pointer; } - .snap-x { - scroll-snap-type: x var(--tw-scroll-snap-strictness); - } - .snap-mandatory { - --tw-scroll-snap-strictness: mandatory; + .resize { + resize: both; } .snap-center { scroll-snap-align: center; } - .grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -581,13 +588,6 @@ margin-block-end: calc(calc(var(--spacing) * 0) * 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))); - } - } .overflow-hidden { overflow: hidden; } @@ -631,10 +631,6 @@ border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } - .border-l { - border-left-style: var(--tw-border-style); - border-left-width: 1px; - } .border-none { --tw-border-style: none; border-style: none; @@ -643,11 +639,8 @@ --tw-border-style: solid; border-style: solid; } - .border-amber-400\/20 { - border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent); - } + .border-amber-400 { + border-color: var(--color-amber-400); } .border-amber-400\/30 { border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 30%, transparent); @@ -661,23 +654,20 @@ .border-gray-200 { border-color: var(--color-gray-200); } - .border-red-200 { - border-color: var(--color-red-200); - } .border-slate-200 { border-color: var(--color-slate-200); } + .border-slate-300 { + border-color: var(--color-slate-300); + } .border-slate-300\/30 { border-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-slate-300) 30%, transparent); } } - .border-slate-400\/20 { - border-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-slate-400) 20%, transparent); - } + .border-slate-400 { + border-color: var(--color-slate-400); } .border-slate-400\/30 { border-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 30%, transparent); @@ -685,26 +675,20 @@ border-color: color-mix(in oklab, var(--color-slate-400) 30%, transparent); } } - .border-slate-900\/20 { - border-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-slate-900) 20%, transparent); - } - } .border-transparent { border-color: transparent; } + .bg-amber-400 { + background-color: var(--color-amber-400); + } .bg-amber-400\/10 { background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent); } } - .bg-black\/20 { - background-color: color-mix(in srgb, #000 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-black) 20%, transparent); - } + .bg-black { + background-color: var(--color-black); } .bg-black\/40 { background-color: color-mix(in srgb, #000 40%, transparent); @@ -712,6 +696,9 @@ background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } } + .bg-blue-100 { + background-color: var(--color-blue-100); + } .bg-gray-50 { background-color: var(--color-gray-50); } @@ -724,6 +711,18 @@ .bg-green-100 { background-color: var(--color-green-100); } + .bg-indigo-100 { + background-color: var(--color-indigo-100); + } + .bg-orange-100 { + background-color: var(--color-orange-100); + } + .bg-pink-100 { + background-color: var(--color-pink-100); + } + .bg-purple-100 { + background-color: var(--color-purple-100); + } .bg-red-100 { background-color: var(--color-red-100); } @@ -733,18 +732,27 @@ .bg-slate-100 { background-color: var(--color-slate-100); } + .bg-slate-200 { + background-color: var(--color-slate-200); + } .bg-slate-200\/10 { background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-200) 10%, transparent); } } + .bg-slate-400 { + background-color: var(--color-slate-400); + } .bg-slate-400\/10 { background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-400) 10%, transparent); } } + .bg-slate-900 { + background-color: var(--color-slate-900); + } .bg-slate-900\/10 { background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -757,12 +765,6 @@ .bg-white { background-color: var(--color-white); } - .bg-white\/50 { - background-color: color-mix(in srgb, #fff 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-white) 50%, transparent); - } - } .bg-white\/80 { background-color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -784,9 +786,6 @@ .object-contain { object-fit: contain; } - .object-cover { - object-fit: cover; - } .p-1 { padding: calc(var(--spacing) * 1); } @@ -796,12 +795,6 @@ .p-6 { padding: calc(var(--spacing) * 6); } - .p-8 { - padding: calc(var(--spacing) * 8); - } - .px-1 { - padding-inline: calc(var(--spacing) * 1); - } .px-2 { padding-inline: calc(var(--spacing) * 2); } @@ -820,15 +813,9 @@ .px-6 { padding-inline: calc(var(--spacing) * 6); } - .px-40 { - padding-inline: calc(var(--spacing) * 40); - } .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); } @@ -838,17 +825,14 @@ .py-4 { padding-block: calc(var(--spacing) * 4); } - .py-6 { - padding-block: calc(var(--spacing) * 6); - } .py-10 { padding-block: calc(var(--spacing) * 10); } .py-12 { padding-block: calc(var(--spacing) * 12); } - .pt-4 { - padding-top: calc(var(--spacing) * 4); + .py-40 { + padding-block: calc(var(--spacing) * 40); } .pt-6 { padding-top: calc(var(--spacing) * 6); @@ -856,19 +840,12 @@ .pr-1 { padding-right: calc(var(--spacing) * 1); } - .pr-2 { - padding-right: calc(var(--spacing) * 2); - } .pl-3 { padding-left: calc(var(--spacing) * 3); } .text-center { text-align: center; } - .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)); @@ -900,6 +877,9 @@ .text-\[10px\] { font-size: 10px; } + .text-\[11px\] { + font-size: 11px; + } .text-\[20px\] { font-size: 20px; } @@ -946,11 +926,17 @@ .text-nowrap { text-wrap: nowrap; } + .text-wrap { + text-wrap: wrap; + } + .break-keep { + word-break: keep-all; + } .whitespace-nowrap { white-space: nowrap; } - .whitespace-pre-line { - white-space: pre-line; + .whitespace-pre-wrap { + white-space: pre-wrap; } .text-\[\#111418\] { color: #111418; @@ -958,8 +944,8 @@ .text-amber-600 { color: var(--color-amber-600); } - .text-black { - color: var(--color-black); + .text-blue-700 { + color: var(--color-blue-700); } .text-gray-400 { color: var(--color-gray-400); @@ -979,12 +965,21 @@ .text-green-700 { color: var(--color-green-700); } + .text-indigo-700 { + color: var(--color-indigo-700); + } + .text-orange-700 { + color: var(--color-orange-700); + } + .text-pink-700 { + color: var(--color-pink-700); + } + .text-purple-700 { + color: var(--color-purple-700); + } .text-red-700 { color: var(--color-red-700); } - .text-slate-300 { - color: var(--color-slate-300); - } .text-slate-400 { color: var(--color-slate-400); } @@ -1032,28 +1027,21 @@ --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-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); } - .drop-shadow-lg { - --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15))); - --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg)); - 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,); - } - .drop-shadow-xl { - --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))); - --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl)); - 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,); + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; } .grayscale { --tw-grayscale: grayscale(100%); 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,); } + .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,); @@ -1069,6 +1057,10 @@ -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-filter { + -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)); @@ -1098,10 +1090,6 @@ --tw-duration: 200ms; transition-duration: 200ms; } - .duration-300 { - --tw-duration: 300ms; - transition-duration: 300ms; - } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; @@ -1133,16 +1121,6 @@ color: var(--color-slate-400); } } - .first\:pt-8 { - &:first-child { - padding-top: calc(var(--spacing) * 8); - } - } - .last\:pb-8 { - &:last-child { - padding-bottom: calc(var(--spacing) * 8); - } - } .hover\:bg-blue-600 { &:hover { @media (hover: hover) { @@ -1150,13 +1128,6 @@ } } } - .hover\:bg-slate-100 { - &:hover { - @media (hover: hover) { - background-color: var(--color-slate-100); - } - } - } .hover\:bg-white { &:hover { @media (hover: hover) { @@ -1200,16 +1171,6 @@ outline-width: 0px; } } - .active\:scale-\[0\.98\] { - &:active { - scale: 0.98; - } - } - .active\:cursor-grabbing { - &:active { - cursor: grabbing; - } - } .sm\:flex { @media (width >= 40rem) { display: flex; @@ -1220,22 +1181,11 @@ grid-template-columns: repeat(2, minmax(0, 1fr)); } } - .md\:ml-16 { - @media (width >= 48rem) { - margin-left: calc(var(--spacing) * 16); - } - } .md\:flex { @media (width >= 48rem) { display: flex; } } - .md\:size-20 { - @media (width >= 48rem) { - width: calc(var(--spacing) * 20); - height: calc(var(--spacing) * 20); - } - } .md\:h-full { @media (width >= 48rem) { height: 100%; @@ -1256,45 +1206,11 @@ flex-direction: row; } } - .md\:border-t-0 { - @media (width >= 48rem) { - border-top-style: var(--tw-border-style); - border-top-width: 0px; - } - } - .md\:border-r { - @media (width >= 48rem) { - border-right-style: var(--tw-border-style); - border-right-width: 1px; - } - } - .md\:border-b-0 { - @media (width >= 48rem) { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 0px; - } - } - .md\:border-l { - @media (width >= 48rem) { - border-left-style: var(--tw-border-style); - border-left-width: 1px; - } - } - .md\:p-8 { - @media (width >= 48rem) { - padding: calc(var(--spacing) * 8); - } - } .md\:p-10 { @media (width >= 48rem) { padding: calc(var(--spacing) * 10); } } - .md\:p-12 { - @media (width >= 48rem) { - padding: calc(var(--spacing) * 12); - } - } .md\:px-40 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 40); @@ -1306,26 +1222,21 @@ line-height: var(--tw-leading, var(--text-5xl--line-height)); } } + .lg\:left-\[calc\(50\%\+3rem\)\] { + @media (width >= 64rem) { + left: calc(50% + 3rem); + } + } .lg\:ml-24 { @media (width >= 64rem) { margin-left: calc(var(--spacing) * 24); } } - .lg\:ml-28 { - @media (width >= 64rem) { - margin-left: calc(var(--spacing) * 28); - } - } .lg\:flex { @media (width >= 64rem) { display: flex; } } - .lg\:hidden { - @media (width >= 64rem) { - display: none; - } - } .lg\:grid-cols-3 { @media (width >= 64rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); @@ -1336,6 +1247,16 @@ grid-template-columns: repeat(4, minmax(0, 1fr)); } } + .\32 xl\:grid-cols-5 { + @media (width >= 96rem) { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + } + .\32 xl\:grid-cols-6 { + @media (width >= 96rem) { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + } .dark\:border-gray-800 { @media (prefers-color-scheme: dark) { border-color: var(--color-gray-800); @@ -1351,6 +1272,19 @@ border-color: var(--color-slate-800); } } + .dark\:bg-\[\#111418\] { + @media (prefers-color-scheme: dark) { + background-color: #111418; + } + } + .dark\:bg-blue-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent); + } + } + } .dark\:bg-gray-700 { @media (prefers-color-scheme: dark) { background-color: var(--color-gray-700); @@ -1374,6 +1308,54 @@ background-color: var(--color-gray-900); } } + .dark\:bg-green-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent); + } + } + } + .dark\:bg-indigo-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-indigo-900) 30%, transparent); + } + } + } + .dark\:bg-orange-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-orange-900) 30%, transparent); + } + } + } + .dark\:bg-pink-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(40.8% 0.153 2.432) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-pink-900) 30%, transparent); + } + } + } + .dark\:bg-purple-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-purple-900) 30%, transparent); + } + } + } + .dark\:bg-red-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent); + } + } + } .dark\:bg-slate-700 { @media (prefers-color-scheme: dark) { background-color: var(--color-slate-700); @@ -1389,9 +1371,9 @@ background-color: var(--color-slate-900); } } - .dark\:text-black { + .dark\:text-blue-400 { @media (prefers-color-scheme: dark) { - color: var(--color-black); + color: var(--color-blue-400); } } .dark\:text-gray-300 { @@ -1409,6 +1391,36 @@ color: var(--color-gray-500); } } + .dark\:text-green-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-green-400); + } + } + .dark\:text-indigo-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-indigo-400); + } + } + .dark\:text-orange-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-orange-400); + } + } + .dark\:text-pink-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-pink-400); + } + } + .dark\:text-purple-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-purple-400); + } + } + .dark\:text-red-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-red-400); + } + } .dark\:text-slate-100 { @media (prefers-color-scheme: dark) { color: var(--color-slate-100); @@ -1455,15 +1467,6 @@ } } } - .dark\:hover\:bg-slate-800 { - @media (prefers-color-scheme: dark) { - &:hover { - @media (hover: hover) { - background-color: var(--color-slate-800); - } - } - } - } } @property --tw-translate-x { syntax: "*"; @@ -1500,11 +1503,6 @@ syntax: "*"; inherits: false; } -@property --tw-scroll-snap-strictness { - syntax: "*"; - inherits: false; - initial-value: proximity; -} @property --tw-space-y-reverse { syntax: "*"; inherits: false; @@ -1592,6 +1590,11 @@ inherits: false; initial-value: 0 0 #0000; } +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} @property --tw-blur { syntax: "*"; inherits: false; @@ -1700,11 +1703,6 @@ inherits: false; initial-value: 1; } -@property --tw-outline-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} @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 { @@ -1716,7 +1714,6 @@ --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; - --tw-scroll-snap-strictness: proximity; --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-leading: initial; @@ -1736,6 +1733,7 @@ --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; @@ -1762,7 +1760,6 @@ --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; - --tw-outline-style: solid; } } }
- Purchase Date
+
diff --git a/package-lock.json b/package-lock.json
index e580175..95ee0c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
{
- "name": "zenn-inventory",
+ "name": "zenn.inventory",
"lockfileVersion": 3,
"requires": true,
"packages": {
diff --git a/scripts/app.js b/scripts/app.js
index 1ebc43f..de543ca 100644
--- a/scripts/app.js
+++ b/scripts/app.js
@@ -1,6 +1,6 @@
import products from '/data.js';
-const ITEMS_PER_PAGE = 8;
+const ITEMS_PER_PAGE = 20;
let currentPage = 1;
let activeCategories = new Set(['All']);
let visibleProducts = products;
@@ -8,12 +8,12 @@ let searchKeyword = '';
const VISIBILITY_CONFIG = {
showUnlisted: false, // 🔥 미판매 노출 여부
- showSold: true,
+ showSold: true, // 🔥 판매완료 노출 여부
};
const STATUS_META = {
미판매: {
- selectable: false, // 기본 필터에 안 뜸
+ selectable: false,
defaultVisible: false,
soldOut: false,
},
@@ -242,7 +242,7 @@ window.openModal = (id) => {
.map(
(img) => `
+ 구매일자
October 2023
- Condition Status
-
-
- verified
- Mint (S-Grade)
+ 제품 상태
+
+
+
+
+
-
Item Description
-- Pristine condition, used for less than 2 months for office work only. No visible scratches or dents. Battery health is at 99%. Comes with original retail box, carrying case, USB-C charging cable, and 3.5mm jack. Selling as I switched to a different setup. -
+
+
제품 설명
+
@@ -271,7 +260,7 @@
chat_bubble
오픈카톡으로 문의하기
-
Secure transaction recommended. Ships within 24 hours.
+입금 확인 후, 24시간 이내 발송
- 
+
`,
)
@@ -270,11 +270,112 @@ window.openModal = (id) => {
)
.join('');
+ const customTagElement = document.getElementById('modal-custom-tag');
+ const tagText = product.customTag;
+
+ if (tagText && tagText.trim() !== '') {
+ customTagElement.textContent = tagText;
+ customTagElement.classList.remove('hidden');
+
+ // 키워드별 색상 스타일 정의
+ const tagStyles = {
+ 완전생산한정판: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
+ 특전포함: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400',
+ 미개봉: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
+ 무료배송: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+ };
+
+ // 기본 스타일 (정의되지 않은 텍스트일 경우)
+ const defaultStyle = 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400';
+
+ // 기존 스타일 클래스 초기화 후 적용
+ customTagElement.className = `px-2.5 py-1 rounded-lg text-xs font-bold uppercase tracking-wider ${tagStyles[tagText] || defaultStyle}`;
+ } else {
+ customTagElement.classList.add('hidden');
+ }
+
+ const modalCategory = document.getElementById('modal-category');
+ if (modalCategory) {
+ modalCategory.textContent = product.category;
+ }
+
+ // 2. 상태값 업데이트 (상태에 따른 디자인 변경 포함)
+ const modalStatus = document.getElementById('modal-status');
+ if (modalStatus) {
+ modalStatus.textContent = product.status;
+
+ // 상태별 스타일 정의 (배경색, 글자색)
+ const statusStyles = {
+ 판매중: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+ 판매예정: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+ 판매완료: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+ 미판매: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400',
+ };
+
+ // 기존 클래스 제거 후 해당 상태의 스타일 추가
+ modalStatus.className = 'px-2.5 py-1 rounded-lg text-xs font-bold uppercase tracking-wider ' + (statusStyles[product.status] || statusStyles['미판매']);
+ }
+
// HTML 주입
document.getElementById('modal-main-carousel').innerHTML = mainImagesHtml;
document.getElementById('modal-thumbnails').innerHTML = thumbnailsHtml;
document.getElementById('modal-dots').innerHTML = dotsHtml;
+ // 1. 제품 상태 (specs.condition) 업데이트
+ const conditionText = product.specs?.condition;
+ const isVerified = product.specs?.isVerified;
+
+ const conditionRow = document.getElementById('modal-condition-row');
+ const conditionValue = document.getElementById('modal-condition');
+ const verifiedIcon = document.getElementById('modal-verified-icon');
+
+ // 1. 그레이드(condition) 값이 있는지 체크하여 라인 노출 결정
+ if (conditionText && conditionText.trim() !== '') {
+ conditionValue.textContent = conditionText;
+ conditionRow.classList.remove('hidden');
+ conditionRow.classList.add('flex');
+
+ // 2. 인증 여부에 따라 SVG 아이콘 노출 결정
+ if (isVerified) {
+ verifiedIcon.classList.remove('hidden');
+ } else {
+ verifiedIcon.classList.add('hidden');
+ }
+ } else {
+ // 값이 없으면 라인 전체 숨김
+ conditionRow.classList.add('hidden');
+ conditionRow.classList.remove('flex');
+ }
+
+ // 2. 제품 설명 (fullDescription) 업데이트
+ const modalDesc = document.getElementById('modal-desc');
+ if (modalDesc) {
+ const descData = product.fullDescription;
+
+ if (Array.isArray(descData)) {
+ // 배열을 태그로 합쳐서 HTML로 주입 + modalDesc.innerHTML = descData.join('
'); + } else { + modalDesc.textContent = descData || ''; + } + } + + // 구매일자 처리 (경로 수정: product.specs?.purchaseDate) + const modalDate = document.getElementById('modal-date'); + const modalDateRow = document.getElementById('modal-date-row'); + + // specs 객체 안의 purchaseDate를 가져옴 + const pDate = product.specs?.purchaseDate; + + if (pDate && pDate.trim() !== '' && pDate !== 'null') { + modalDate.textContent = pDate; + modalDateRow.classList.remove('hidden'); + modalDateRow.classList.add('flex'); + } else { + modalDateRow.classList.add('hidden'); + modalDateRow.classList.remove('flex'); + } + // 텍스트 정보 주입 (ID들 맞춰주세요) document.getElementById('modal-title').textContent = product.title; document.getElementById('modal-price').textContent = `${product.currency}${product.price.toLocaleString()}`; @@ -485,52 +586,48 @@ function getCategories(products) { } function renderCategoryChips(products) { - const container = document.getElementById('filter-chips'); - if (!container) return; + const container = document.getElementById('filter-chips'); + if (!container) return; - const categories = ['All', ...new Set(products.map((p) => p.category))]; + const categories = ['All', ...new Set(products.map((p) => p.category))]; - container.innerHTML = ''; + container.innerHTML = ''; - categories.forEach((cat) => { - const isActive = activeCategories.has(cat); + categories.forEach((cat) => { + const isActive = activeCategories.has(cat); - const chip = document.createElement('button'); - chip.className = ` + const chip = document.createElement('button'); + chip.className = ` filter-chip px-4 py-2 rounded-full text-sm font-medium transition border - ${isActive - ? 'bg-primary text-white border-primary' - : 'bg-slate-50 text-slate-600 border-slate-200'} + ${isActive ? 'bg-primary text-white border-primary' : 'bg-slate-50 text-slate-600 border-slate-200'} `; - chip.textContent = cat; - chip.dataset.category = cat; + chip.textContent = cat; + chip.dataset.category = cat; - chip.onclick = () => { - toggleCategory(cat); - }; + chip.onclick = () => { + toggleCategory(cat); + }; - container.appendChild(chip); - }); + container.appendChild(chip); + }); } function toggleCategory(category) { - if (category === 'All') { - activeCategories.clear(); - activeCategories.add('All'); - } else { - activeCategories.delete('All'); - activeCategories.has(category) - ? activeCategories.delete(category) - : activeCategories.add(category); + if (category === 'All') { + activeCategories.clear(); + activeCategories.add('All'); + } else { + activeCategories.delete('All'); + activeCategories.has(category) ? activeCategories.delete(category) : activeCategories.add(category); - if (activeCategories.size === 0) { - activeCategories.add('All'); + if (activeCategories.size === 0) { + activeCategories.add('All'); + } } - } - renderCategoryChips(products); - applyFilters(); + renderCategoryChips(products); + applyFilters(); } function bindCategoryFilter(products) { @@ -563,7 +660,6 @@ function bindCategoryFilter(products) { }); } - // 카테고리 필터 renderCategoryChips(products); bindCategoryFilter(products); diff --git a/style/tailwind.css b/style/tailwind.css index a5525e2..d67cb24 100644 --- a/style/tailwind.css +++ b/style/tailwind.css @@ -9,12 +9,36 @@ "Courier New", monospace; --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); + --color-red-400: oklch(70.4% 0.191 22.216); --color-red-700: oklch(50.5% 0.213 27.518); + --color-red-900: oklch(39.6% 0.141 25.723); + --color-orange-100: oklch(95.4% 0.038 75.164); + --color-orange-400: oklch(75% 0.183 55.934); + --color-orange-700: oklch(55.3% 0.195 38.402); + --color-orange-900: oklch(40.8% 0.123 38.172); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-600: oklch(66.6% 0.179 58.318); --color-green-100: oklch(96.2% 0.044 156.743); + --color-green-400: oklch(79.2% 0.209 151.711); --color-green-700: oklch(52.7% 0.154 150.069); + --color-green-900: oklch(39.3% 0.095 152.535); + --color-blue-100: oklch(93.2% 0.032 255.585); + --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-600: oklch(54.6% 0.245 262.881); + --color-blue-700: oklch(48.8% 0.243 264.376); + --color-blue-900: oklch(37.9% 0.146 265.522); + --color-indigo-100: oklch(93% 0.034 272.788); + --color-indigo-400: oklch(67.3% 0.182 276.935); + --color-indigo-700: oklch(45.7% 0.24 277.023); + --color-indigo-900: oklch(35.9% 0.144 278.697); + --color-purple-100: oklch(94.6% 0.033 307.174); + --color-purple-400: oklch(71.4% 0.203 305.504); + --color-purple-700: oklch(49.6% 0.265 301.924); + --color-purple-900: oklch(38.1% 0.176 304.987); + --color-pink-100: oklch(94.8% 0.028 342.258); + --color-pink-400: oklch(71.8% 0.202 349.761); + --color-pink-700: oklch(52.5% 0.223 3.958); + --color-pink-900: oklch(40.8% 0.153 2.432); --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); @@ -258,6 +282,9 @@ .top-0 { top: calc(var(--spacing) * 0); } + .top-1 { + top: calc(var(--spacing) * 1); + } .top-1\/2 { top: calc(1/2 * 100%); } @@ -270,36 +297,30 @@ .right-4 { right: calc(var(--spacing) * 4); } - .bottom-4 { - bottom: calc(var(--spacing) * 4); + .bottom-2 { + bottom: calc(var(--spacing) * 2); } .bottom-6 { bottom: calc(var(--spacing) * 6); } + .left-1 { + left: calc(var(--spacing) * 1); + } .left-1\/2 { left: calc(1/2 * 100%); } .left-3 { left: calc(var(--spacing) * 3); } + .left-3\/5 { + left: calc(3/5 * 100%); + } .left-4 { left: calc(var(--spacing) * 4); } - .left-6 { - left: calc(var(--spacing) * 6); - } - .z-10 { - z-index: 10; - } .z-50 { z-index: 50; } - .z-\[60\] { - z-index: 60; - } - .z-\[70\] { - z-index: 70; - } .container { width: 100%; @media (width >= 40rem) { @@ -345,12 +366,6 @@ .ml-0 { margin-left: calc(var(--spacing) * 0); } - .ml-12 { - margin-left: calc(var(--spacing) * 12); - } - .ml-20 { - margin-left: calc(var(--spacing) * 20); - } .block { display: block; } @@ -363,16 +378,15 @@ .hidden { display: none; } + .table { + display: table; + } .aspect-\[4\/5\] { aspect-ratio: 4/5; } .aspect-square { aspect-ratio: 1 / 1; } - .size-1\.5 { - width: calc(var(--spacing) * 1.5); - height: calc(var(--spacing) * 1.5); - } .size-8 { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); @@ -392,9 +406,6 @@ .\!h-10 { height: calc(var(--spacing) * 10) !important; } - .h-1\.5 { - height: calc(var(--spacing) * 1.5); - } .h-2 { height: calc(var(--spacing) * 2); } @@ -407,14 +418,8 @@ .h-10 { height: calc(var(--spacing) * 10); } - .h-\[400px\] { - height: 400px; - } - .h-\[450px\] { - height: 450px; - } - .h-\[500px\] { - height: 500px; + .h-\[80vh\] { + height: 80vh; } .h-auto { height: auto; @@ -425,9 +430,6 @@ .h-px { height: 1px; } - .max-h-\[70\%\] { - max-height: 70%; - } .max-h-\[70vh\] { max-height: 70vh; } @@ -437,12 +439,15 @@ .max-h-full { max-height: 100%; } + .min-h-80 { + min-height: calc(var(--spacing) * 80); + } + .min-h-\[60vh\] { + min-height: 60vh; + } .min-h-screen { min-height: 100vh; } - .w-1\.5 { - width: calc(var(--spacing) * 1.5); - } .w-2 { width: calc(var(--spacing) * 2); } @@ -452,9 +457,6 @@ .w-5 { width: calc(var(--spacing) * 5); } - .w-6 { - width: calc(var(--spacing) * 6); - } .w-10 { width: calc(var(--spacing) * 10); } @@ -482,25 +484,39 @@ .min-w-40 { min-width: calc(var(--spacing) * 40); } - .min-w-full { - min-width: 100%; - } .flex-1 { flex: 1; } + .flex-shrink { + flex-shrink: 1; + } .flex-shrink-0 { flex-shrink: 0; } .shrink-0 { flex-shrink: 0; } + .flex-grow { + flex-grow: 1; + } .grow { flex-grow: 1; } + .border-collapse { + border-collapse: collapse; + } + .-translate-x-1 { + --tw-translate-x: calc(var(--spacing) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1/2 * 100%) * -1); 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-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); @@ -508,24 +524,15 @@ .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .cursor-grab { - cursor: grab; - } .cursor-pointer { cursor: pointer; } - .snap-x { - scroll-snap-type: x var(--tw-scroll-snap-strictness); - } - .snap-mandatory { - --tw-scroll-snap-strictness: mandatory; + .resize { + resize: both; } .snap-center { scroll-snap-align: center; } - .grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -581,13 +588,6 @@ margin-block-end: calc(calc(var(--spacing) * 0) * 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))); - } - } .overflow-hidden { overflow: hidden; } @@ -631,10 +631,6 @@ border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } - .border-l { - border-left-style: var(--tw-border-style); - border-left-width: 1px; - } .border-none { --tw-border-style: none; border-style: none; @@ -643,11 +639,8 @@ --tw-border-style: solid; border-style: solid; } - .border-amber-400\/20 { - border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent); - } + .border-amber-400 { + border-color: var(--color-amber-400); } .border-amber-400\/30 { border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 30%, transparent); @@ -661,23 +654,20 @@ .border-gray-200 { border-color: var(--color-gray-200); } - .border-red-200 { - border-color: var(--color-red-200); - } .border-slate-200 { border-color: var(--color-slate-200); } + .border-slate-300 { + border-color: var(--color-slate-300); + } .border-slate-300\/30 { border-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-slate-300) 30%, transparent); } } - .border-slate-400\/20 { - border-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-slate-400) 20%, transparent); - } + .border-slate-400 { + border-color: var(--color-slate-400); } .border-slate-400\/30 { border-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 30%, transparent); @@ -685,26 +675,20 @@ border-color: color-mix(in oklab, var(--color-slate-400) 30%, transparent); } } - .border-slate-900\/20 { - border-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-slate-900) 20%, transparent); - } - } .border-transparent { border-color: transparent; } + .bg-amber-400 { + background-color: var(--color-amber-400); + } .bg-amber-400\/10 { background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent); } } - .bg-black\/20 { - background-color: color-mix(in srgb, #000 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-black) 20%, transparent); - } + .bg-black { + background-color: var(--color-black); } .bg-black\/40 { background-color: color-mix(in srgb, #000 40%, transparent); @@ -712,6 +696,9 @@ background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } } + .bg-blue-100 { + background-color: var(--color-blue-100); + } .bg-gray-50 { background-color: var(--color-gray-50); } @@ -724,6 +711,18 @@ .bg-green-100 { background-color: var(--color-green-100); } + .bg-indigo-100 { + background-color: var(--color-indigo-100); + } + .bg-orange-100 { + background-color: var(--color-orange-100); + } + .bg-pink-100 { + background-color: var(--color-pink-100); + } + .bg-purple-100 { + background-color: var(--color-purple-100); + } .bg-red-100 { background-color: var(--color-red-100); } @@ -733,18 +732,27 @@ .bg-slate-100 { background-color: var(--color-slate-100); } + .bg-slate-200 { + background-color: var(--color-slate-200); + } .bg-slate-200\/10 { background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-200) 10%, transparent); } } + .bg-slate-400 { + background-color: var(--color-slate-400); + } .bg-slate-400\/10 { background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-400) 10%, transparent); } } + .bg-slate-900 { + background-color: var(--color-slate-900); + } .bg-slate-900\/10 { background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -757,12 +765,6 @@ .bg-white { background-color: var(--color-white); } - .bg-white\/50 { - background-color: color-mix(in srgb, #fff 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-white) 50%, transparent); - } - } .bg-white\/80 { background-color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -784,9 +786,6 @@ .object-contain { object-fit: contain; } - .object-cover { - object-fit: cover; - } .p-1 { padding: calc(var(--spacing) * 1); } @@ -796,12 +795,6 @@ .p-6 { padding: calc(var(--spacing) * 6); } - .p-8 { - padding: calc(var(--spacing) * 8); - } - .px-1 { - padding-inline: calc(var(--spacing) * 1); - } .px-2 { padding-inline: calc(var(--spacing) * 2); } @@ -820,15 +813,9 @@ .px-6 { padding-inline: calc(var(--spacing) * 6); } - .px-40 { - padding-inline: calc(var(--spacing) * 40); - } .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); } @@ -838,17 +825,14 @@ .py-4 { padding-block: calc(var(--spacing) * 4); } - .py-6 { - padding-block: calc(var(--spacing) * 6); - } .py-10 { padding-block: calc(var(--spacing) * 10); } .py-12 { padding-block: calc(var(--spacing) * 12); } - .pt-4 { - padding-top: calc(var(--spacing) * 4); + .py-40 { + padding-block: calc(var(--spacing) * 40); } .pt-6 { padding-top: calc(var(--spacing) * 6); @@ -856,19 +840,12 @@ .pr-1 { padding-right: calc(var(--spacing) * 1); } - .pr-2 { - padding-right: calc(var(--spacing) * 2); - } .pl-3 { padding-left: calc(var(--spacing) * 3); } .text-center { text-align: center; } - .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)); @@ -900,6 +877,9 @@ .text-\[10px\] { font-size: 10px; } + .text-\[11px\] { + font-size: 11px; + } .text-\[20px\] { font-size: 20px; } @@ -946,11 +926,17 @@ .text-nowrap { text-wrap: nowrap; } + .text-wrap { + text-wrap: wrap; + } + .break-keep { + word-break: keep-all; + } .whitespace-nowrap { white-space: nowrap; } - .whitespace-pre-line { - white-space: pre-line; + .whitespace-pre-wrap { + white-space: pre-wrap; } .text-\[\#111418\] { color: #111418; @@ -958,8 +944,8 @@ .text-amber-600 { color: var(--color-amber-600); } - .text-black { - color: var(--color-black); + .text-blue-700 { + color: var(--color-blue-700); } .text-gray-400 { color: var(--color-gray-400); @@ -979,12 +965,21 @@ .text-green-700 { color: var(--color-green-700); } + .text-indigo-700 { + color: var(--color-indigo-700); + } + .text-orange-700 { + color: var(--color-orange-700); + } + .text-pink-700 { + color: var(--color-pink-700); + } + .text-purple-700 { + color: var(--color-purple-700); + } .text-red-700 { color: var(--color-red-700); } - .text-slate-300 { - color: var(--color-slate-300); - } .text-slate-400 { color: var(--color-slate-400); } @@ -1032,28 +1027,21 @@ --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-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); } - .drop-shadow-lg { - --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15))); - --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg)); - 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,); - } - .drop-shadow-xl { - --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))); - --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl)); - 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,); + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; } .grayscale { --tw-grayscale: grayscale(100%); 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,); } + .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,); @@ -1069,6 +1057,10 @@ -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-filter { + -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)); @@ -1098,10 +1090,6 @@ --tw-duration: 200ms; transition-duration: 200ms; } - .duration-300 { - --tw-duration: 300ms; - transition-duration: 300ms; - } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; @@ -1133,16 +1121,6 @@ color: var(--color-slate-400); } } - .first\:pt-8 { - &:first-child { - padding-top: calc(var(--spacing) * 8); - } - } - .last\:pb-8 { - &:last-child { - padding-bottom: calc(var(--spacing) * 8); - } - } .hover\:bg-blue-600 { &:hover { @media (hover: hover) { @@ -1150,13 +1128,6 @@ } } } - .hover\:bg-slate-100 { - &:hover { - @media (hover: hover) { - background-color: var(--color-slate-100); - } - } - } .hover\:bg-white { &:hover { @media (hover: hover) { @@ -1200,16 +1171,6 @@ outline-width: 0px; } } - .active\:scale-\[0\.98\] { - &:active { - scale: 0.98; - } - } - .active\:cursor-grabbing { - &:active { - cursor: grabbing; - } - } .sm\:flex { @media (width >= 40rem) { display: flex; @@ -1220,22 +1181,11 @@ grid-template-columns: repeat(2, minmax(0, 1fr)); } } - .md\:ml-16 { - @media (width >= 48rem) { - margin-left: calc(var(--spacing) * 16); - } - } .md\:flex { @media (width >= 48rem) { display: flex; } } - .md\:size-20 { - @media (width >= 48rem) { - width: calc(var(--spacing) * 20); - height: calc(var(--spacing) * 20); - } - } .md\:h-full { @media (width >= 48rem) { height: 100%; @@ -1256,45 +1206,11 @@ flex-direction: row; } } - .md\:border-t-0 { - @media (width >= 48rem) { - border-top-style: var(--tw-border-style); - border-top-width: 0px; - } - } - .md\:border-r { - @media (width >= 48rem) { - border-right-style: var(--tw-border-style); - border-right-width: 1px; - } - } - .md\:border-b-0 { - @media (width >= 48rem) { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 0px; - } - } - .md\:border-l { - @media (width >= 48rem) { - border-left-style: var(--tw-border-style); - border-left-width: 1px; - } - } - .md\:p-8 { - @media (width >= 48rem) { - padding: calc(var(--spacing) * 8); - } - } .md\:p-10 { @media (width >= 48rem) { padding: calc(var(--spacing) * 10); } } - .md\:p-12 { - @media (width >= 48rem) { - padding: calc(var(--spacing) * 12); - } - } .md\:px-40 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 40); @@ -1306,26 +1222,21 @@ line-height: var(--tw-leading, var(--text-5xl--line-height)); } } + .lg\:left-\[calc\(50\%\+3rem\)\] { + @media (width >= 64rem) { + left: calc(50% + 3rem); + } + } .lg\:ml-24 { @media (width >= 64rem) { margin-left: calc(var(--spacing) * 24); } } - .lg\:ml-28 { - @media (width >= 64rem) { - margin-left: calc(var(--spacing) * 28); - } - } .lg\:flex { @media (width >= 64rem) { display: flex; } } - .lg\:hidden { - @media (width >= 64rem) { - display: none; - } - } .lg\:grid-cols-3 { @media (width >= 64rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); @@ -1336,6 +1247,16 @@ grid-template-columns: repeat(4, minmax(0, 1fr)); } } + .\32 xl\:grid-cols-5 { + @media (width >= 96rem) { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + } + .\32 xl\:grid-cols-6 { + @media (width >= 96rem) { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + } .dark\:border-gray-800 { @media (prefers-color-scheme: dark) { border-color: var(--color-gray-800); @@ -1351,6 +1272,19 @@ border-color: var(--color-slate-800); } } + .dark\:bg-\[\#111418\] { + @media (prefers-color-scheme: dark) { + background-color: #111418; + } + } + .dark\:bg-blue-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent); + } + } + } .dark\:bg-gray-700 { @media (prefers-color-scheme: dark) { background-color: var(--color-gray-700); @@ -1374,6 +1308,54 @@ background-color: var(--color-gray-900); } } + .dark\:bg-green-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent); + } + } + } + .dark\:bg-indigo-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-indigo-900) 30%, transparent); + } + } + } + .dark\:bg-orange-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-orange-900) 30%, transparent); + } + } + } + .dark\:bg-pink-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(40.8% 0.153 2.432) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-pink-900) 30%, transparent); + } + } + } + .dark\:bg-purple-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-purple-900) 30%, transparent); + } + } + } + .dark\:bg-red-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent); + } + } + } .dark\:bg-slate-700 { @media (prefers-color-scheme: dark) { background-color: var(--color-slate-700); @@ -1389,9 +1371,9 @@ background-color: var(--color-slate-900); } } - .dark\:text-black { + .dark\:text-blue-400 { @media (prefers-color-scheme: dark) { - color: var(--color-black); + color: var(--color-blue-400); } } .dark\:text-gray-300 { @@ -1409,6 +1391,36 @@ color: var(--color-gray-500); } } + .dark\:text-green-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-green-400); + } + } + .dark\:text-indigo-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-indigo-400); + } + } + .dark\:text-orange-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-orange-400); + } + } + .dark\:text-pink-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-pink-400); + } + } + .dark\:text-purple-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-purple-400); + } + } + .dark\:text-red-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-red-400); + } + } .dark\:text-slate-100 { @media (prefers-color-scheme: dark) { color: var(--color-slate-100); @@ -1455,15 +1467,6 @@ } } } - .dark\:hover\:bg-slate-800 { - @media (prefers-color-scheme: dark) { - &:hover { - @media (hover: hover) { - background-color: var(--color-slate-800); - } - } - } - } } @property --tw-translate-x { syntax: "*"; @@ -1500,11 +1503,6 @@ syntax: "*"; inherits: false; } -@property --tw-scroll-snap-strictness { - syntax: "*"; - inherits: false; - initial-value: proximity; -} @property --tw-space-y-reverse { syntax: "*"; inherits: false; @@ -1592,6 +1590,11 @@ inherits: false; initial-value: 0 0 #0000; } +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} @property --tw-blur { syntax: "*"; inherits: false; @@ -1700,11 +1703,6 @@ inherits: false; initial-value: 1; } -@property --tw-outline-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} @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 { @@ -1716,7 +1714,6 @@ --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; - --tw-scroll-snap-strictness: proximity; --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-leading: initial; @@ -1736,6 +1733,7 @@ --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; @@ -1762,7 +1760,6 @@ --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; - --tw-outline-style: solid; } } }