/* ========================================================== DESKTOP VS MOBILE RESPONSIVE RULES FOR BRAND TABS Desktop: Luxurious, full-height tabs with subtitles & chevrons Mobile: Ultra-compact, single-row tabs (< 50px) ========================================================== */ /* Default Desktop (> 768px) */ #brandView .brand-tab-btn { border-radius: 12px !important; padding: 1rem 1.25rem !important; min-height: 84px !important; cursor: pointer; } #brandView .tab-badge { border-radius: 6px !important; font-size: 8.5px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; padding: 1.5px 6px !important; border-width: 1px !important; border-style: solid !important; display: inline-block !important; max-width: 100% !important; } #brandView .tab-brand-name { font-size: 18px !important; line-height: 1.25 !important; font-weight: 900 !important; letter-spacing: -0.02em !important; } #brandView .tab-sub-text { display: block !important; font-size: 12px !important; line-height: 1.4 !important; margin-top: 4px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #brandView .tab-chevron { display: block !important; width: 20px !important; height: 20px !important; margin-left: 8px !important; } /* Mobile Screen Adaptations (< 768px) */ @media (max-width: 767px) { #brandView .brand-tab-btn { border-radius: 12px !important; padding: 6px 8px !important; min-height: 46px !important; } #brandView .tab-badge { border-radius: 4px !important; font-size: 6px !important; font-weight: 700 !important; letter-spacing: 0.01em !important; padding: 1px 4px !important; line-height: 1.2 !important; } #brandView .tab-brand-name { font-size: 12px !important; line-height: 1.2 !important; } #brandView .tab-sub-text { display: none !important; } #brandView .tab-chevron { display: none !important; } } /* ========================================================== BULLETPROOF BORDER SYSTEM & EFFECTS FOR #brandView Guarantees all borders, card outlines, dividers & hover states render ========================================================== */ #brandView, #brandView *, #brandView *::before, #brandView *::after { box-sizing: border-box; border-style: solid; border-width: 0; border-color: #E2E8F0; } /* Border Widths */ #brandView .border { border-width: 1px !important; border-style: solid !important; } #brandView .border-2 { border-width: 2px !important; border-style: solid !important; } #brandView .border-4 { border-width: 4px !important; border-style: solid !important; } #brandView .border-t { border-top-width: 1px !important; border-top-style: solid !important; } #brandView .border-b { border-bottom-width: 1px !important; border-bottom-style: solid !important; } #brandView .border-l { border-left-width: 1px !important; border-left-style: solid !important; } #brandView .border-r { border-right-width: 1px !important; border-right-style: solid !important; } #brandView .border-l-2 { border-left-width: 2px !important; border-left-style: solid !important; } #brandView .border-dashed { border-style: dashed !important; } #brandView .border-none { border-width: 0 !important; border-style: none !important; } /* Border Colors - Slate & Neutrals */ #brandView .border-slate-100 { border-color: #F1F5F9 !important; } #brandView .border-slate-200 { border-color: #E2E8F0 !important; } #brandView .border-slate-300 { border-color: #CBD5E1 !important; } #brandView .border-slate-400 { border-color: #94A3B8 !important; } #brandView .border-slate-600 { border-color: #475569 !important; } #brandView .border-slate-700 { border-color: #334155 !important; } #brandView .border-slate-800 { border-color: #1E293B !important; } #brandView .border-slate-900 { border-color: #0F172A !important; } /* Border Colors - Brand Emerald / Green (ACROPASS) */ #brandView .border-emerald-100 { border-color: #D1FAE5 !important; } #brandView .border-emerald-200 { border-color: #A7F3D0 !important; } #brandView .border-emerald-300 { border-color: #6EE7B7 !important; } #brandView .border-emerald-400 { border-color: #34D399 !important; } #brandView .border-emerald-500 { border-color: #10B981 !important; } #brandView .border-emerald-600 { border-color: #059669 !important; } #brandView .border-emerald-700 { border-color: #047857 !important; } /* Border Colors - Brand Indigo / Lavender (DEWYCEL) */ #brandView .border-indigo-100 { border-color: #E0E7FF !important; } #brandView .border-indigo-200 { border-color: #C7D2FE !important; } #brandView .border-indigo-300 { border-color: #A5B4FC !important; } #brandView .border-indigo-400 { border-color: #818CF8 !important; } #brandView .border-indigo-500 { border-color: #6366F1 !important; } #brandView .border-indigo-600 { border-color: #4F46E5 !important; } #brandView .border-indigo-700 { border-color: #4338CA !important; } /* Border Colors - Brand Amber / Gold (VEROBENE) */ #brandView .border-amber-100 { border-color: #FEF3C7 !important; } #brandView .border-amber-200 { border-color: #FDE68A !important; } #brandView .border-amber-300 { border-color: #FCD34D !important; } #brandView .border-amber-400 { border-color: #FBBF24 !important; } #brandView .border-amber-500 { border-color: #F59E0B !important; } #brandView .border-amber-600 { border-color: #D97706 !important; } #brandView .border-amber-700 { border-color: #B45309 !important; } /* Border Colors - Teal Accent */ #brandView .border-teal-200 { border-color: #99F6E4 !important; } #brandView .border-teal-300 { border-color: #5EEAD4 !important; } #brandView .border-teal-400 { border-color: #2DD4BF !important; } #brandView .border-teal-500 { border-color: #14B8A6 !important; } #brandView .border-teal-500\/40 { border-color: rgba(20, 184, 166, 0.4) !important; } #brandView .border-teal-600 { border-color: #0D9488 !important; } #brandView .border-teal-700 { border-color: #0F766E !important; } /* Border Colors - Red / Alert */ #brandView .border-red-200 { border-color: #FECACA !important; } #brandView .border-red-300 { border-color: #FCA5A5 !important; } #brandView .border-red-500 { border-color: #EF4444 !important; } /* Hover Border Effects */ #brandView .hover\:border-emerald-500:hover { border-color: #10B981 !important; } #brandView .hover\:border-emerald-600:hover { border-color: #059669 !important; } #brandView .hover\:border-indigo-500:hover { border-color: #6366F1 !important; } #brandView .hover\:border-indigo-600:hover { border-color: #4F46E5 !important; } #brandView .hover\:border-amber-500:hover { border-color: #F59E0B !important; } #brandView .hover\:border-amber-600:hover { border-color: #D97706 !important; } #brandView .hover\:border-slate-300:hover { border-color: #CBD5E1 !important; } #brandView .hover\:border-slate-400:hover { border-color: #94A3B8 !important; } #brandView .hover\:border-teal-500:hover { border-color: #14B8A6 !important; } /* Card & Interactive Transitions */ #brandView .tech-card-step { border: 1px solid #E2E8F0 !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } #brandView .tech-card-step:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important; border-color: #059669 !important; } /* Product card hover border glow */ #brandView .product-card, #brandView [class*="hover:border-"] { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important; } #brandView [class*="hover:border-indigo-600"]:hover { box-shadow: 0 8px 20px rgba(79, 70, 229, 0.12) !important; } #brandView [class*="hover:border-amber-600"]:hover { box-shadow: 0 8px 20px rgba(217, 119, 6, 0.12) !important; } #brandView [class*="hover:border-emerald-600"]:hover { box-shadow: 0 8px 20px rgba(5, 150, 105, 0.12) !important; } /* Comparison visual cards in ACROPASS */ #brandView .border-2.border-emerald-500 { border: 2px solid #10B981 !important; } #brandView .border-2.border-slate-200 { border: 2px solid #E2E8F0 !important; } /* Verobene Double Mechanism Columns */ #brandView .border-2.border-amber-600 { border: 2px solid #D97706 !important; } #brandView .border-2.border-teal-600 { border: 2px solid #0D9488 !important; } #brandView .border-2.border-indigo-600 { border: 2px solid #4F46E5 !important; } /* Sticky tabs controller box */ #brandView .border-2.border-slate-200 { border: 2px solid #E2E8F0 !important; } /* ========================================================== K-BEAUTY B2B WHOLESALE - EXCLUSIVE STRATEGIC BRANDS SHOWCASE Integrated Visual Brand Profiles (ACROPASS, DEWYCEL, VEROBENE) ========================================================== */ /* ========================================================== K-BEAUTY B2B WHOLESALE - STRATEGIC BRAND VIEW ENCAPSULATED ========================================================== */ #brandView { width: 100%; max-width: 100% !important; padding: 0 !important; margin: 0 auto !important; } #brandView, #brandView * { box-sizing: border-box; } #brandView { --tw-border-spacing-x:0; --tw-border-spacing-y:0; --tw-translate-x:0; --tw-translate-y:0; --tw-rotate:0; --tw-skew-x:0; --tw-skew-y:0; --tw-scale-x:1; --tw-scale-y:1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness:proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width:0px; --tw-ring-offset-color:#fff; --tw-ring-color:rgb(59 130 246 / 0.5); --tw-ring-offset-shadow:0 0 #0000; --tw-ring-shadow:0 0 #0000; --tw-shadow:0 0 #0000; --tw-shadow-colored:0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: }::backdrop{--tw-border-spacing-x:0; --tw-border-spacing-y:0; --tw-translate-x:0; --tw-translate-y:0; --tw-rotate:0; --tw-skew-x:0; --tw-skew-y:0; --tw-scale-x:1; --tw-scale-y:1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness:proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width:0px; --tw-ring-offset-color:#fff; --tw-ring-color:rgb(59 130 246 / 0.5); --tw-ring-offset-shadow:0 0 #0000; --tw-ring-shadow:0 0 #0000; --tw-shadow:0 0 #0000; --tw-shadow-colored:0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; } #brandView .absolute { position:absolute } #brandView .relative { position:relative } #brandView .sticky { position:sticky } #brandView .left-2 { left:0.5rem } #brandView .top-0 { top:0px } #brandView .top-16 { top:4rem } #brandView .top-2 { top:0.5rem } #brandView .z-10 { z-index:10 } #brandView .z-40 { z-index:40 } #brandView .z-50 { z-index:50 } #brandView .mx-auto { margin-left:auto;margin-right:auto } #brandView .-mt-3 { margin-top:-0.75rem } #brandView .mb-0\.5 { margin-bottom:0.125rem } #brandView .mb-1 { margin-bottom:0.25rem } #brandView .mb-10 { margin-bottom:2.5rem } #brandView .mb-2 { margin-bottom:0.5rem } #brandView .mb-3 { margin-bottom:0.75rem } #brandView .mb-4 { margin-bottom:1rem } #brandView .mb-8 { margin-bottom:2rem } #brandView .ml-1 { margin-left:0.25rem } #brandView .mt-0\.5 { margin-top:0.125rem } #brandView .mt-1 { margin-top:0.25rem } #brandView .mt-2 { margin-top:0.5rem } #brandView .mt-8 { margin-top:2rem } #brandView .line-clamp-2 { overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2 } #brandView .block { display:block } #brandView .flex { display:flex } #brandView .inline-flex { display:inline-flex } #brandView .grid { display:grid } #brandView .hidden { display:none } #brandView .aspect-\[4\/3\] { aspect-ratio:4/3 } #brandView .h-16 { height:4rem } #brandView .h-3\.5 { height:0.875rem } #brandView .h-4 { height:1rem } #brandView .h-48 { height:12rem } #brandView .h-5 { height:1.25rem } #brandView .h-6 { height:1.5rem } #brandView .h-72 { height:18rem } #brandView .h-full { height:100% } #brandView .max-h-44 { max-height:11rem } #brandView .min-h-screen { min-height:100vh } #brandView .w-3\.5 { width:0.875rem } #brandView .w-4 { width:1rem } #brandView .w-5 { width:1.25rem } #brandView .w-6 { width:1.5rem } #brandView .w-full { width:100% } #brandView .min-w-0 { min-width:0px } #brandView .max-w-2xl { max-width:42rem } #brandView .max-w-3xl { max-width:48rem } #brandView .max-w-7xl { max-width:80rem } #brandView .max-w-full { max-width:100% } #brandView .shrink-0 { flex-shrink:0 } #brandView .grid-cols-1 { grid-template-columns:repeat(1, minmax(0, 1fr)) } #brandView .grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)) } #brandView .grid-cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)) } #brandView .flex-col { flex-direction:column } #brandView .flex-wrap { flex-wrap:wrap } #brandView .items-start { align-items:flex-start } #brandView .items-center { align-items:center } #brandView .items-stretch { align-items:stretch } #brandView .justify-center { justify-content:center } #brandView .justify-between { justify-content:space-between } #brandView .gap-1 { gap:0.25rem } #brandView .gap-1\.5 { gap:0.375rem } #brandView .gap-2 { gap:0.5rem } #brandView .gap-3 { gap:0.75rem } #brandView .gap-4 { gap:1rem } #brandView .gap-6 { gap:1.5rem } #brandView .gap-8 { gap:2rem } #brandView .space-y-12 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse:0;margin-top:calc(3rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem * var(--tw-space-y-reverse)) } #brandView .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse)) } #brandView .space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse)) } #brandView .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse)) } #brandView .space-y-5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse)) } #brandView .space-y-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse)) } #brandView .overflow-hidden { overflow:hidden } #brandView .truncate { overflow:hidden;text-overflow:ellipsis;white-space:nowrap } #brandView .rounded-none { border-radius: 8px } #brandView .border { border-width:1px } #brandView .border-2 { border-width:2px } #brandView .border-b { border-bottom-width:1px } #brandView .border-l-2 { border-left-width:2px } #brandView .border-t { border-top-width:1px } #brandView .border-amber-200 { --tw-border-opacity:1;border-color:rgb(253 230 138 / var(--tw-border-opacity, 1)) } #brandView .border-amber-300 { --tw-border-opacity:1;border-color:rgb(252 211 77 / var(--tw-border-opacity, 1)) } #brandView .border-amber-500 { --tw-border-opacity:1;border-color:rgb(245 158 11 / var(--tw-border-opacity, 1)) } #brandView .border-amber-600 { --tw-border-opacity:1;border-color:rgb(217 119 6 / var(--tw-border-opacity, 1)) } #brandView .border-emerald-200 { --tw-border-opacity:1;border-color:rgb(167 243 208 / var(--tw-border-opacity, 1)) } #brandView .border-emerald-300 { --tw-border-opacity:1;border-color:rgb(110 231 183 / var(--tw-border-opacity, 1)) } #brandView .border-emerald-500 { --tw-border-opacity:1;border-color:rgb(16 185 129 / var(--tw-border-opacity, 1)) } #brandView .border-emerald-600 { --tw-border-opacity:1;border-color:rgb(5 150 105 / var(--tw-border-opacity, 1)) } #brandView .border-indigo-200 { --tw-border-opacity:1;border-color:rgb(199 210 254 / var(--tw-border-opacity, 1)) } #brandView .border-indigo-300 { --tw-border-opacity:1;border-color:rgb(165 180 252 / var(--tw-border-opacity, 1)) } #brandView .border-indigo-500 { --tw-border-opacity:1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1)) } #brandView .border-indigo-600 { --tw-border-opacity:1;border-color:rgb(79 70 229 / var(--tw-border-opacity, 1)) } #brandView .border-red-200 { --tw-border-opacity:1;border-color:rgb(254 202 202 / var(--tw-border-opacity, 1)) } #brandView .border-slate-200 { --tw-border-opacity:1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1)) } #brandView .border-slate-300 { --tw-border-opacity:1;border-color:rgb(203 213 225 / var(--tw-border-opacity, 1)) } #brandView .border-slate-700 { --tw-border-opacity:1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1)) } #brandView .border-slate-800 { --tw-border-opacity:1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1)) } #brandView .border-teal-200 { --tw-border-opacity:1;border-color:rgb(153 246 228 / var(--tw-border-opacity, 1)) } #brandView .border-teal-500 { --tw-border-opacity:1;border-color:rgb(20 184 166 / var(--tw-border-opacity, 1)) } #brandView .border-teal-500\/40 { border-color:rgb(20 184 166 / 0.4) } #brandView .border-teal-600 { --tw-border-opacity:1;border-color:rgb(13 148 136 / var(--tw-border-opacity, 1)) } #brandView .bg-amber-100 { --tw-bg-opacity:1;background-color:rgb(254 243 199 / var(--tw-bg-opacity, 1)) } #brandView .bg-amber-200\/80 { background-color:rgb(253 230 138 / 0.8) } #brandView .bg-amber-50\/20 { background-color:rgb(255 251 235 / 0.2) } #brandView .bg-amber-600 { --tw-bg-opacity:1;background-color:rgb(217 119 6 / var(--tw-bg-opacity, 1)) } #brandView .bg-amber-700 { --tw-bg-opacity:1;background-color:rgb(180 83 9 / var(--tw-bg-opacity, 1)) } #brandView .bg-emerald-100 { --tw-bg-opacity:1;background-color:rgb(209 250 229 / var(--tw-bg-opacity, 1)) } #brandView .bg-emerald-200\/80 { background-color:rgb(167 243 208 / 0.8) } #brandView .bg-emerald-50 { --tw-bg-opacity:1;background-color:rgb(236 253 245 / var(--tw-bg-opacity, 1)) } #brandView .bg-emerald-50\/40 { background-color:rgb(236 253 245 / 0.4) } #brandView .bg-emerald-50\/50 { background-color:rgb(236 253 245 / 0.5) } #brandView .bg-emerald-700 { --tw-bg-opacity:1;background-color:rgb(4 120 87 / var(--tw-bg-opacity, 1)) } #brandView .bg-indigo-100 { --tw-bg-opacity:1;background-color:rgb(224 231 255 / var(--tw-bg-opacity, 1)) } #brandView .bg-indigo-200\/80 { background-color:rgb(199 210 254 / 0.8) } #brandView .bg-indigo-50 { --tw-bg-opacity:1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1)) } #brandView .bg-red-200 { --tw-bg-opacity:1;background-color:rgb(254 202 202 / var(--tw-bg-opacity, 1)) } #brandView .bg-red-50\/40 { background-color:rgb(254 242 242 / 0.4) } #brandView .bg-slate-100 { --tw-bg-opacity:1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1)) } #brandView .bg-slate-50 { --tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1)) } #brandView .bg-slate-800 { --tw-bg-opacity:1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1)) } #brandView .bg-slate-900 { --tw-bg-opacity:1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1)) } #brandView .bg-slate-950 { --tw-bg-opacity:1;background-color:rgb(2 6 23 / var(--tw-bg-opacity, 1)) } #brandView .bg-teal-100 { --tw-bg-opacity:1;background-color:rgb(204 251 241 / var(--tw-bg-opacity, 1)) } #brandView .bg-teal-50 { --tw-bg-opacity:1;background-color:rgb(240 253 250 / var(--tw-bg-opacity, 1)) } #brandView .bg-teal-50\/20 { background-color:rgb(240 253 250 / 0.2) } #brandView .bg-teal-600 { --tw-bg-opacity:1;background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1)) } #brandView .bg-teal-700 { --tw-bg-opacity:1;background-color:rgb(15 118 110 / var(--tw-bg-opacity, 1)) } #brandView .bg-teal-900 { --tw-bg-opacity:1;background-color:rgb(19 78 74 / var(--tw-bg-opacity, 1)) } #brandView .bg-teal-900\/60 { background-color:rgb(19 78 74 / 0.6) } #brandView .bg-white { --tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1)) } #brandView .bg-white\/95 { background-color:rgb(255 255 255 / 0.95) } #brandView .object-contain { object-fit:contain } #brandView .object-cover { object-fit:cover } #brandView .object-center { object-position:center } #brandView .p-1\.5 { padding:0.375rem } #brandView .p-2 { padding:0.5rem } #brandView .p-3 { padding:0.75rem } #brandView .p-4 { padding:1rem } #brandView .p-5 { padding:1.25rem } #brandView .p-6 { padding:1.5rem } #brandView .p-8 { padding:2rem } #brandView .px-1 { padding-left:0.25rem;padding-right:0.25rem } #brandView .px-2 { padding-left:0.5rem;padding-right:0.5rem } #brandView .px-2\.5 { padding-left:0.625rem;padding-right:0.625rem } #brandView .px-3 { padding-left:0.75rem;padding-right:0.75rem } #brandView .px-4 { padding-left:1rem;padding-right:1rem } #brandView .px-6 { padding-left:1.5rem;padding-right:1.5rem } #brandView .py-0\.5 { padding-top:0.125rem;padding-bottom:0.125rem } #brandView .py-1 { padding-top:0.25rem;padding-bottom:0.25rem } #brandView .py-1\.5 { padding-top:0.375rem;padding-bottom:0.375rem } #brandView .py-10 { padding-top:2.5rem;padding-bottom:2.5rem } #brandView .py-3\.5 { padding-top:0.875rem;padding-bottom:0.875rem } #brandView .py-8 { padding-top:2rem;padding-bottom:2rem } #brandView .pb-3 { padding-bottom:0.75rem } #brandView .pb-4 { padding-bottom:1rem } #brandView .pl-3 { padding-left:0.75rem } #brandView .pt-2 { padding-top:0.5rem } #brandView .pt-3 { padding-top:0.75rem } #brandView .pt-8 { padding-top:2rem } #brandView .text-left { text-align:left } #brandView .text-center { text-align:center } #brandView .text-2xl { font-size:1.5rem;line-height:2rem } #brandView .text-\[10px\] { font-size:10px } #brandView .text-\[11px\] { font-size:11px } #brandView .text-\[7\.5px\] { font-size:7.5px } #brandView .text-\[8\.5px\] { font-size:8.5px } #brandView .text-base { font-size:1rem;line-height:1.5rem } #brandView .text-sm { font-size:0.875rem;line-height:1.25rem } #brandView .text-xl { font-size:1.25rem;line-height:1.75rem } #brandView .text-xs { font-size:0.75rem;line-height:1rem } #brandView .font-black { font-weight:900 } #brandView .font-bold { font-weight:700 } #brandView .font-extrabold { font-weight:800 } #brandView .font-medium { font-weight:500 } #brandView .font-semibold { font-weight:600 } #brandView .uppercase { text-transform:uppercase } #brandView .leading-relaxed { line-height:1.625 } #brandView .leading-snug { line-height:1.375 } #brandView .leading-tight { line-height:1.25 } #brandView .tracking-tight { letter-spacing:-0.025em } #brandView .tracking-wider { letter-spacing:0.05em } #brandView .tracking-widest { letter-spacing:0.1em } #brandView .text-amber-400 { --tw-text-opacity:1;color:rgb(251 191 36 / var(--tw-text-opacity, 1)) } #brandView .text-amber-600 { --tw-text-opacity:1;color:rgb(217 119 6 / var(--tw-text-opacity, 1)) } #brandView .text-amber-700 { --tw-text-opacity:1;color:rgb(180 83 9 / var(--tw-text-opacity, 1)) } #brandView .text-amber-800 { --tw-text-opacity:1;color:rgb(146 64 14 / var(--tw-text-opacity, 1)) } #brandView .text-amber-900 { --tw-text-opacity:1;color:rgb(120 53 15 / var(--tw-text-opacity, 1)) } #brandView .text-blue-700 { --tw-text-opacity:1;color:rgb(29 78 216 / var(--tw-text-opacity, 1)) } #brandView .text-emerald-400 { --tw-text-opacity:1;color:rgb(52 211 153 / var(--tw-text-opacity, 1)) } #brandView .text-emerald-600 { --tw-text-opacity:1;color:rgb(5 150 105 / var(--tw-text-opacity, 1)) } #brandView .text-emerald-700 { --tw-text-opacity:1;color:rgb(4 120 87 / var(--tw-text-opacity, 1)) } #brandView .text-emerald-800 { --tw-text-opacity:1;color:rgb(6 95 70 / var(--tw-text-opacity, 1)) } #brandView .text-emerald-900 { --tw-text-opacity:1;color:rgb(6 78 59 / var(--tw-text-opacity, 1)) } #brandView .text-indigo-700 { --tw-text-opacity:1;color:rgb(67 56 202 / var(--tw-text-opacity, 1)) } #brandView .text-indigo-800 { --tw-text-opacity:1;color:rgb(55 48 163 / var(--tw-text-opacity, 1)) } #brandView .text-indigo-900 { --tw-text-opacity:1;color:rgb(49 46 129 / var(--tw-text-opacity, 1)) } #brandView .text-purple-700 { --tw-text-opacity:1;color:rgb(126 34 206 / var(--tw-text-opacity, 1)) } #brandView .text-red-500 { --tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity, 1)) } #brandView .text-red-700 { --tw-text-opacity:1;color:rgb(185 28 28 / var(--tw-text-opacity, 1)) } #brandView .text-red-800 { --tw-text-opacity:1;color:rgb(153 27 27 / var(--tw-text-opacity, 1)) } #brandView .text-slate-200 { --tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity, 1)) } #brandView .text-slate-300 { --tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity, 1)) } #brandView .text-slate-400 { --tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1)) } #brandView .text-slate-500 { --tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1)) } #brandView .text-slate-600 { --tw-text-opacity:1;color:rgb(71 85 105 / var(--tw-text-opacity, 1)) } #brandView .text-slate-700 { --tw-text-opacity:1;color:rgb(51 65 85 / var(--tw-text-opacity, 1)) } #brandView .text-slate-800 { --tw-text-opacity:1;color:rgb(30 41 59 / var(--tw-text-opacity, 1)) } #brandView .text-slate-900 { --tw-text-opacity:1;color:rgb(15 23 42 / var(--tw-text-opacity, 1)) } #brandView .text-teal-300 { --tw-text-opacity:1;color:rgb(94 234 212 / var(--tw-text-opacity, 1)) } #brandView .text-teal-400 { --tw-text-opacity:1;color:rgb(45 212 191 / var(--tw-text-opacity, 1)) } #brandView .text-teal-600 { --tw-text-opacity:1;color:rgb(13 148 136 / var(--tw-text-opacity, 1)) } #brandView .text-teal-700 { --tw-text-opacity:1;color:rgb(15 118 110 / var(--tw-text-opacity, 1)) } #brandView .text-teal-800 { --tw-text-opacity:1;color:rgb(17 94 89 / var(--tw-text-opacity, 1)) } #brandView .text-white { --tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1)) } #brandView .shadow-lg { --tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } #brandView .shadow-md { --tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } #brandView .shadow-sm { --tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } #brandView .shadow-xl { --tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } #brandView .backdrop-blur-md { --tw-backdrop-blur:blur(12px);-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) } #brandView .transition { transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms } #brandView .transition-all { transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms } #brandView .duration-200 { transition-duration:200ms } #brandView .duration-300 { transition-duration:300ms } #brandView .hover\:scale-105:hover { --tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } #brandView .hover\:border-amber-600:hover { --tw-border-opacity:1;border-color:rgb(217 119 6 / var(--tw-border-opacity, 1)) } #brandView .hover\:border-emerald-600:hover { --tw-border-opacity:1;border-color:rgb(5 150 105 / var(--tw-border-opacity, 1)) } #brandView .hover\:border-indigo-600:hover { --tw-border-opacity:1;border-color:rgb(79 70 229 / var(--tw-border-opacity, 1)) } #brandView .hover\:bg-slate-50:hover { --tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1)) } #brandView .hover\:bg-slate-700:hover { --tw-bg-opacity:1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1)) } #brandView .hover\:bg-teal-500:hover { --tw-bg-opacity:1;background-color:rgb(20 184 166 / var(--tw-bg-opacity, 1)) } #brandView .hover\:text-teal-700:hover { --tw-text-opacity:1;color:rgb(15 118 110 / var(--tw-text-opacity, 1)) } #brandView .group:hover .group-hover\:translate-x-1 { --tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } @media (min-width: 640px) { #brandView .sm\:-mt-6 { margin-top:-1.5rem } #brandView .sm\:mb-1 { margin-bottom:0.25rem } #brandView .sm\:block { display:block } #brandView .sm\:flex { display:flex } #brandView .sm\:grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)) } #brandView .sm\:grid-cols-4 { grid-template-columns:repeat(4, minmax(0, 1fr)) } #brandView .sm\:flex-row { flex-direction:row } #brandView .sm\:items-end { align-items:flex-end } #brandView .sm\:gap-2\.5 { gap:0.625rem } #brandView .sm\:p-10 { padding:2.5rem } #brandView .sm\:p-12 { padding:3rem } #brandView .sm\:p-2\.5 { padding:0.625rem } #brandView .sm\:p-3\.5 { padding:0.875rem } #brandView .sm\:px-2 { padding-left:0.5rem;padding-right:0.5rem } #brandView .sm\:px-6 { padding-left:1.5rem;padding-right:1.5rem } #brandView .sm\:py-14 { padding-top:3.5rem;padding-bottom:3.5rem } #brandView .sm\:text-3xl { font-size:1.875rem;line-height:2.25rem } #brandView .sm\:text-4xl { font-size:2.25rem;line-height:2.5rem } #brandView .sm\:text-\[10px\] { font-size:10px } #brandView .sm\:text-base { font-size:1rem;line-height:1.5rem } #brandView .sm\:text-sm { font-size:0.875rem;line-height:1.25rem } #brandView .sm\:text-xs { font-size:0.75rem;line-height:1rem } } @media (min-width: 768px) { #brandView .md\:block { display:block } #brandView .md\:inline-flex { display:inline-flex } #brandView .md\:h-5 { height:1.25rem } #brandView .md\:w-5 { width:1.25rem } #brandView .md\:grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)) } #brandView .md\:grid-cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)) } #brandView .md\:p-4 { padding:1rem } #brandView .md\:text-lg { font-size:1.125rem;line-height:1.75rem } } @media (min-width: 1024px) { #brandView .lg\:col-span-5 { grid-column:span 5 / span 5 } #brandView .lg\:col-span-6 { grid-column:span 6 / span 6 } #brandView .lg\:col-span-7 { grid-column:span 7 / span 7 } #brandView .lg\:grid-cols-12 { grid-template-columns:repeat(12, minmax(0, 1fr)) } #brandView .lg\:grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)) } #brandView .lg\:grid-cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)) } #brandView .lg\:grid-cols-4 { grid-template-columns:repeat(4, minmax(0, 1fr)) } #brandView .lg\:flex-row { flex-direction:row } #brandView .lg\:items-center { align-items:center } #brandView .lg\:px-8 { padding-left:2rem;padding-right:2rem } } #brandView *:not(.brand-hero-frame):not(.brand-hero-frame img):not(.acropass-corporate-visual):not(.acropass-corporate-visual img):not(.technology-image):not(.technology-image img):not(.comparison-visual):not(.comparison-visual img):not(.mechanism-visual):not(.mechanism-visual img):not(.treatment-visual):not(.treatment-visual img) { font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; } #brandView .brand-hero-frame, #brandView .brand-hero-frame img { border-radius: 14px !important; font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; } #brandView .acropass-corporate-visual, #brandView .acropass-corporate-visual img { border-radius: 16px !important; font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; } #brandView /* ================= Brand Tabs Styling ================= */ /* Inactive States: Distinct soft pale brand pastel tints */ .brand-tab-btn.tab-btn-acropass:not(.active-acropass) { background-color: #ECFDF5 !important; /* Soft Pale Emerald */ border-color: #A7F3D0 !important; /* Emerald 200 */ } #brandView .brand-tab-btn.tab-btn-acropass:not(.active-acropass):hover { background-color: #D1FAE5 !important; border-color: #6EE7B7 !important; } #brandView .brand-tab-btn.tab-btn-acropass:not(.active-acropass) .tab-brand-name { color: #064E3B !important; /* Deep Emerald 900 */ } #brandView .brand-tab-btn.tab-btn-acropass:not(.active-acropass) .tab-sub-text { color: #047857 !important; /* Emerald 700 */ } #brandView .brand-tab-btn.tab-btn-acropass:not(.active-acropass) .tab-chevron { color: #059669 !important; } #brandView .brand-tab-btn.tab-btn-dewycel:not(.active-dewycel) { background-color: #EEF2FF !important; /* Soft Pale Indigo/Lavender */ border-color: #C7D2FE !important; /* Indigo 200 */ } #brandView .brand-tab-btn.tab-btn-dewycel:not(.active-dewycel):hover { background-color: #E0E7FF !important; border-color: #A5B4FC !important; } #brandView .brand-tab-btn.tab-btn-dewycel:not(.active-dewycel) .tab-brand-name { color: #312E81 !important; /* Deep Indigo 900 */ } #brandView .brand-tab-btn.tab-btn-dewycel:not(.active-dewycel) .tab-sub-text { color: #4338CA !important; /* Indigo 700 */ } #brandView .brand-tab-btn.tab-btn-dewycel:not(.active-dewycel) .tab-chevron { color: #6366F1 !important; } #brandView .brand-tab-btn.tab-btn-verobene:not(.active-verobene) { background-color: #FFFBEB !important; /* Soft Pale Amber/Warm Gold */ border-color: #FDE68A !important; /* Amber 200 */ } #brandView .brand-tab-btn.tab-btn-verobene:not(.active-verobene):hover { background-color: #FEF3C7 !important; border-color: #FCD34D !important; } #brandView .brand-tab-btn.tab-btn-verobene:not(.active-verobene) .tab-brand-name { color: #78350F !important; /* Deep Amber 900 */ } #brandView .brand-tab-btn.tab-btn-verobene:not(.active-verobene) .tab-sub-text { color: #B45309 !important; /* Amber 700 */ } #brandView .brand-tab-btn.tab-btn-verobene:not(.active-verobene) .tab-chevron { color: #D97706 !important; } #brandView /* Active Brand Tab Base (Rich solid brand colors) */ .brand-tab-btn.active-acropass { background: #047857 !important; /* Solid Emerald 700 */ border-color: #047857 !important; } #brandView .brand-tab-btn.active-dewycel { background: #4338CA !important; /* Solid Indigo 700 */ border-color: #4338CA !important; } #brandView .brand-tab-btn.active-verobene { background: #B45309 !important; /* Solid Amber 700 */ border-color: #B45309 !important; } #brandView /* Force ALL text elements inside ANY active tab to become WHITE */ .brand-tab-btn[class*="active-"] * { color: #FFFFFF !important; } #brandView .brand-tab-btn[class*="active-"] .tab-brand-name, #brandView .brand-tab-btn[class*="active-"] .tab-sub-text, #brandView .brand-tab-btn[class*="active-"] .text-slate-900, #brandView .brand-tab-btn[class*="active-"] .text-slate-600, #brandView .brand-tab-btn[class*="active-"] .text-slate-500, #brandView .brand-tab-btn[class*="active-"] .text-slate-400, #brandView .brand-tab-btn[class*="active-"] .text-indigo-800, #brandView .brand-tab-btn[class*="active-"] .text-amber-800, #brandView .brand-tab-btn[class*="active-"] .text-emerald-800 { color: #FFFFFF !important; } #brandView .brand-tab-btn[class*="active-"] .tab-sub-text, #brandView .brand-tab-btn[class*="active-"] [data-i18n$="Sub"] { color: rgba(255, 255, 255, 0.95) !important; } #brandView .brand-tab-btn[class*="active-"] .tab-badge, #brandView .brand-tab-btn[class*="active-"] span[class*="bg-"] { background-color: rgba(255, 255, 255, 0.22) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; } #brandView .brand-tab-btn[class*="active-"] .tab-chevron, #brandView .brand-tab-btn[class*="active-"] svg { stroke: #FFFFFF !important; color: #FFFFFF !important; opacity: 0.95 !important; } #brandView .brand-pane { display: none; } #brandView .brand-pane.active { display: block; animation: fadeIn 0.3s ease-out; } #brandView @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } #brandView to { opacity: 1; transform: translateY(0); } #brandView } .tech-card-step { transition: all 0.2s ease; } #brandView .tech-card-step:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); } #brandView /* Product card image frame styling */ .product-image-frame { aspect-ratio: 1 / 1; background: #FFFFFF; overflow: hidden; display: flex; align-items: center; justify-content: center; } #brandView .product-image-frame img { width: 82%; height: 82%; object-fit: contain; object-position: center; display: block; } #brandView /* Product card image styling */ .product-image { width: 100%; overflow: hidden; background-color: #ffffff; } #brandView .product-image img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; mix-blend-mode: normal; } #brandView /* Technology image styling */ .technology-image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #f8faf9; } #brandView .technology-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } #brandView /* Mechanism, #brandView Comparison, #brandView Treatment Visual Classes */ .comparison-visual, #brandView .mechanism-visual, #brandView .treatment-visual { width: 100%; overflow: hidden; border-radius: 10px; background: #ffffff; } #brandView .comparison-visual { aspect-ratio: 4 / 3; } #brandView .mechanism-visual { aspect-ratio: 4 / 3; } #brandView .treatment-visual { aspect-ratio: 4 / 3; } #brandView .comparison-visual img, #brandView .mechanism-visual img, #brandView .treatment-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* ACROPASS Corporate Scale Visual - 4:3 Ratio */ #brandView .acropass-corporate-visual { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px !important; border: 1px solid rgba(5, 150, 105, 0.35); background: #ffffff; box-shadow: 0 12px 30px rgba(6, 78, 59, 0.12); transition: all 0.3s ease; } #brandView .acropass-corporate-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 16px !important; transition: transform 0.35s ease; } #brandView .acropass-corporate-visual:hover img { transform: scale(1.02); } @media (max-width: 640px) { #brandView .acropass-corporate-visual { border-radius: 14px !important; } #brandView .acropass-corporate-visual img { border-radius: 14px !important; object-fit: contain; background: #FFFFFF; } } /* Legacy & Component Helper Rules */ /* ========================================================== K-BEAUTY B2B WHOLESALE - EXCLUSIVE BRANDS SHOWCASE ========================================================== */ .brand-tabs-nav { display: flex; gap: 0.5rem; overflow-x: auto; border-bottom: 2px solid #E2E8F0; padding-bottom: 0.5rem; } .brand-tab-btn { background: #F8FAFC; border: 1px solid #E2E8F0; padding: 0.75rem 1.5rem; font-size: 13px; font-weight: 800; color: #475569; cursor: pointer; white-space: nowrap; transition: all 0.15s; } .brand-tab-btn:hover, .brand-tab-btn.active { background: #0F766E; color: #FFFFFF; border-color: #0F766E; } .brand-overview-box { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } .brand-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; } @media (min-width: 768px) { .brand-stat-grid { grid-template-columns: repeat(4, 1fr); } } .brand-stat-card { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 1.25rem 1rem; text-align: center; } .brand-stat-val { font-size: 1.5rem; font-weight: 900; color: #0F766E; margin-bottom: 0.25rem; } .brand-stat-lbl { font-size: 11.5px; color: #64748B; font-weight: 600; } .compare-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 1rem; } .compare-table th, .compare-table td { border: 1px solid #E2E8F0; padding: 0.85rem 1rem; line-height: 1.6; } .compare-table th { background: #F8FAFC; font-weight: 800; color: #0F172A; } .compare-table th.highlight-col, .compare-table td.highlight-col { background: #F0FDFA; border-color: #CCFBF1; color: #0F766E; } .brand-feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { .brand-feature-grid { grid-template-columns: repeat(2, 1fr); } } .brand-feature-card { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; } .brand-feature-tag { font-size: 10.5px; font-weight: 800; color: #0F766E; background: #CCFBF1; padding: 0.2rem 0.5rem; border-radius: 6px; display: inline-block; margin-bottom: 0.5rem; } .brand-feature-title { font-size: 15px; font-weight: 800; color: #0F172A; margin-bottom: 0.5rem; } .brand-feature-desc { font-size: 12.5px; color: #64748B; line-height: 1.65; margin-bottom: 1rem; } .brand-feature-stats-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .brand-feature-stat-pill { font-size: 11px; font-weight: 700; color: #047857; background: #DCFCE7; padding: 0.2rem 0.6rem; border-radius: 9999px; } /* ========================================================== STICKY BRAND TABS NAVIGATION CONTROLLER Ensures brand switcher tabs stick seamlessly beneath the header on scroll ========================================================== */ #brand-sticky-nav { position: -webkit-sticky !important; position: sticky !important; top: var(--site-header-height, 105px) !important; z-index: 90 !important; transition: background-color 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease; } @media (min-width: 1024px) { #brand-sticky-nav { top: var(--site-header-height, 128px) !important; } } #brand-sticky-nav.is-stuck { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); padding-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(226, 232, 240, 0.8); } #brand-sticky-nav.is-stuck #brand-sticky-inner { margin-top: 0 !important; } /* ========================================================== GLOBAL ROUNDED CORNERS (BO GÓC) SYSTEM FOR #brandView ========================================================== */ /* 1. Floating Sticky Brand Selector Container & Buttons */ #brand-sticky-inner > div { border-radius: 16px !important; } #brand-sticky-nav button.tab-item, #brand-sticky-nav button { border-radius: 10px !important; } /* 2. Main Content Sections & Panels */ #brandView main > div > section, #brandView .brand-pane > section, #brandView section.bg-white, #brandView section.bg-slate-900:not(.border-b), #brandView section.bg-slate-950, #brandView .company-card, #brandView .brand-pane { border-radius: 20px !important; overflow: hidden !important; } /* 3. Hero Visual Frames, Images, and Sliders */ #brandView .brand-hero-frame, #brandView [class*="col-span"] > .overflow-hidden.shadow-lg, #brandView .mechanism-visual, #brandView .comparison-visual, #brandView .treatment-visual, #brandView .technology-image, #brandView .acropass-corporate-visual, #brandView .dewycel-corporate-visual, #brandView .verobene-corporate-visual, #brandView .product-image-frame, #brandView .product-image, #brandView .h-48.bg-white.border { border-radius: 16px !important; overflow: hidden !important; } #brandView .brand-hero-frame img, #brandView .mechanism-visual img, #brandView .comparison-visual img, #brandView .treatment-visual img, #brandView .technology-image img, #brandView .acropass-corporate-visual img, #brandView .dewycel-corporate-visual img, #brandView .verobene-corporate-visual img, #brandView .product-image-frame img, #brandView .product-card img, #brandView .product-image img, #brandView .product-grid img { border-radius: 12px !important; } /* 4. Sub-cards, Technology Steps, Comparison Cards, Feature Boxes */ #brandView .tech-card-step, #brandView div.border-2.border-red-200, #brandView div.border-2.border-emerald-600, #brandView div.border-2.border-amber-600, #brandView div.border-2.border-teal-600, #brandView div.border-2.border-indigo-600, #brandView div.border.border-slate-200.p-4, #brandView div.border.border-slate-200.p-5, #brandView div.border.border-slate-200.p-6, #brandView .product-grid > div, #brandView .product-card, #brandView .bg-slate-50.border:not(.p-3), #brandView .bg-white.border:not(section):not(table) { border-radius: 16px !important; } /* 5. Stat Metric Boxes & Mini Panels */ #brandView .bg-slate-50.border.border-slate-200.p-3, #brandView .border.border-slate-800.bg-slate-950.p-3, #brandView [class*="grid-cols-2"] > div.border, #brandView [class*="grid-cols-4"] > div.border { border-radius: 12px !important; } /* 6. Badges, Tags, Chips, and Number Indicators */ #brandView .tab-badge, #brandView .section-tag, #brandView span[class*="px-2"], #brandView span[class*="px-3"], #brandView div[class*="px-2"], #brandView div[class*="px-3"], #brandView .badge, #brandView .chip, #brandView .w-6.h-6, #brandView .w-7.h-7, #brandView .w-8.h-8 { border-radius: 6px !important; } /* 7. Pill-Shaped Badges */ #brandView .heroBadge, #brandView .inline-flex.items-center.gap-2.bg-teal-900\/60, #brandView span.rounded-full, #brandView div.rounded-full, #brandView .brand-feature-stat-pill, #brandView .rounded-full { border-radius: 9999px !important; } /* 8. Call To Action (CTA) & Interaction Buttons */ #brandView button:not(.tab-chevron), #brandView a.cta-button-teal, #brandView a.cta-button-outline, #brandView a[class*="cta-button"], #brandView .btn, #brandView a[href*="zalo"], #brandView a[href*="tel"], #brandView a[href*="docs.google.com"], #brandView a.inline-flex.items-center.justify-center { border-radius: 10px !important; } /* 9. Data Tables & Scrollable Wrappers */ #brandView table, #brandView .table-container, #brandView .overflow-x-auto { border-radius: 14px !important; }