diff options
Diffstat (limited to 'frontend/src/app')
| -rw-r--r-- | frontend/src/app/globals.css | 260 | ||||
| -rw-r--r-- | frontend/src/app/globals.css.backup | 679 |
2 files changed, 932 insertions, 7 deletions
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 89de65b..5210ba7 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -3,6 +3,9 @@ @custom-variant dark (&:is(.dark *)); +/* Custom responsive breakpoints */ +@custom-variant xs (&:is(@media (min-width: 475px) *)); + @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); @@ -289,16 +292,23 @@ button.nav-button-transparent:focus, /* Dropdown and navigation item transparency */ .nav-dropdown-transparent { - background: rgba(255, 255, 255, 0.98) !important; - backdrop-filter: blur(16px) saturate(180%) !important; - border: 1px solid rgba(255, 255, 255, 0.3) !important; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; + background: rgba(255, 255, 255, 0.85) !important; + backdrop-filter: blur(20px) saturate(180%) !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.12), + 0 2px 16px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; + border-radius: 0.75rem !important; } .dark .nav-dropdown-transparent { - background: rgba(23, 23, 23, 0.98) !important; - border: 1px solid rgba(82, 82, 82, 0.4) !important; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; + background: rgba(15, 15, 15, 0.85) !important; + border: 1px solid rgba(82, 82, 82, 0.3) !important; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.4), + 0 2px 16px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } .nav-dropdown-item { @@ -510,3 +520,239 @@ a.nav-button-transparent:not(:hover):not(:focus):not(:active) { background: rgba(255, 255, 255, 0.06) !important; background-color: rgba(255, 255, 255, 0.06) !important; } + +/* Enhanced Theme Toggle Transparency Effects */ +/* Theme toggle specific enhancements for better navbar integration */ +.nav-button-transparent.group { + position: relative; + overflow: hidden; + backdrop-filter: blur(8px) saturate(150%); + border-radius: 0.5rem; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Enhanced hover state for theme toggle */ +.nav-button-transparent.group:hover { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + transform: scale(1.05); + backdrop-filter: blur(12px) saturate(180%); +} + +.dark .nav-button-transparent.group:hover { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; +} + +/* Active state for theme toggle */ +.nav-button-transparent.group:active { + transform: scale(0.95); + transition: transform 0.1s ease-in-out; +} + +/* Enhanced focus state for theme toggle */ +.nav-button-transparent.group:focus-visible { + background: rgba(0, 0, 0, 0.04) !important; + background-color: rgba(0, 0, 0, 0.04) !important; + box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important; + outline: none !important; +} + +.dark .nav-button-transparent.group:focus-visible { + background: rgba(255, 255, 255, 0.03) !important; + background-color: rgba(255, 255, 255, 0.03) !important; + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important; +} + + +/* Enhanced dropdown items for theme toggle */ +.nav-dropdown-item.group\/item { + background: transparent !important; + border: none !important; + border-radius: 0.5rem !important; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; + margin: 2px !important; + padding: 0.5rem 0.75rem !important; +} + +.nav-dropdown-item.group\/item:hover { + background: rgba(0, 0, 0, 0.08) !important; + backdrop-filter: blur(8px) !important; + transform: translateX(2px) !important; +} + +.dark .nav-dropdown-item.group\/item:hover { + background: rgba(255, 255, 255, 0.08) !important; +} + +/* Smooth icon transitions for theme toggle */ +.nav-button-transparent.group svg { + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); +} + +.dark .nav-button-transparent.group svg { + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); +} + +/* Enhanced glow effect for theme toggle */ +.nav-button-transparent.group:hover svg { + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); +} + +.dark .nav-button-transparent.group:hover svg { + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); +} + +/* Ultra-smooth dropdown animations */ +@keyframes dropdown-in { + from { + opacity: 0; + transform: scale(0.95) translateY(-4px); + } + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +@keyframes dropdown-out { + from { + opacity: 1; + transform: scale(1) translateY(0); + } + to { + opacity: 0; + transform: scale(0.95) translateY(-4px); + } +} + +/* Apply dropdown animation to nav dropdowns */ +.nav-dropdown-transparent[data-state="open"] { + animation: dropdown-in 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Improved checkmark animation */ +.nav-dropdown-item span[class*="animate-in"] { + animation: checkmark-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +@keyframes checkmark-in { + from { + opacity: 0; + transform: scale(0.3) rotate(-12deg); + } + to { + opacity: 1; + transform: scale(1) rotate(0deg); + } +} + +/* Prevent any conflicting backgrounds on theme toggle */ +.nav-button-transparent.group[data-state="open"] { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + border: none !important; + transform: scale(1.05); +} + +.dark .nav-button-transparent.group[data-state="open"] { + background: rgba(255, 255, 255, 0.08) !important; + backdrop-filter: blur(8px) !important; + border-radius: 0.5rem !important; +} + +/* Mobile-friendly enhancements */ +@media (max-width: 768px) { + /* Ensure touch targets are at least 44px */ + .touch-manipulation { + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; + } + + /* Better mobile spacing for action buttons */ + .mobile-action-buttons { + gap: 0.25rem !important; + } + + /* Mobile menu improvements */ + .mobile-menu-item { + min-height: 44px; + padding: 0.75rem 1rem; + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 0.5rem; + transition: all 0.2s ease-in-out; + } + + .mobile-menu-item:active { + transform: scale(0.98); + background: rgba(0, 0, 0, 0.05); + } + + .dark .mobile-menu-item:active { + background: rgba(255, 255, 255, 0.05); + } + + /* Prevent text selection on mobile UI elements */ + .no-select { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + /* Improve mobile sheet content scrolling */ + .mobile-sheet-content { + overscroll-behavior: contain; + -webkit-overflow-scrolling: touch; + } +} + +/* Small mobile optimizations */ +@media (max-width: 475px) { + /* Tighter spacing on very small screens */ + .action-buttons-compact { + gap: 0.125rem !important; + } + + /* Slightly smaller touch targets for very small screens */ + .compact-touch-target { + min-width: 40px !important; + min-height: 40px !important; + } + + /* Reduce header height on very small screens */ + .compact-header { + height: 3.5rem !important; /* 56px */ + } +} + +/* Accessibility improvements */ +@media (prefers-reduced-motion: reduce) { + .nav-button-transparent, + .nav-dropdown-item, + .mobile-menu-item { + transition: none !important; + animation: none !important; + } +} + +/* High contrast mode support */ +@media (prefers-contrast: high) { + .nav-button-transparent { + border: 1px solid currentColor !important; + } + + .nav-dropdown-transparent { + border: 1px solid currentColor !important; + background: var(--background) !important; + } +} + +/* Focus visible for keyboard navigation */ +.nav-button-transparent:focus-visible { + outline: 2px solid var(--ring) !important; + outline-offset: 2px !important; +} diff --git a/frontend/src/app/globals.css.backup b/frontend/src/app/globals.css.backup new file mode 100644 index 0000000..d573de5 --- /dev/null +++ b/frontend/src/app/globals.css.backup @@ -0,0 +1,679 @@ +@import "tailwindcss"; +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; + --font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace; + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); +} + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} + +/* Complete override for ghost variant default styles */ +/* This targets the specific ghost variant classes from the button component */ +.nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + border: none !important; + border-color: transparent !important; + box-shadow: none !important; + --tw-bg-opacity: 0 !important; + --accent: transparent !important; + --background: transparent !important; + --tw-border-opacity: 0 !important; + --tw-shadow: none !important; + --tw-ring-shadow: none !important; + --tw-ring-offset-shadow: none !important; + cursor: pointer !important; +} + +/* Force override ghost variant styles completely */ +button[class*="nav-button-transparent"], +[data-slot="button"][class*="nav-button-transparent"], +[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; + box-shadow: none !important; +} + +/* Override ghost variant hover specifically */ +button[class*="nav-button-transparent"][class*="hover:bg-accent"], +[data-slot="button"][class*="nav-button-transparent"][class*="hover:bg-accent"], +[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="hover:bg-accent"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Dark mode ghost variant overrides */ +.dark button[class*="nav-button-transparent"][class*="dark:hover:bg-accent"], +.dark [data-slot="button"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"], +.dark [data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Remove focus rings and outlines for nav buttons */ +.nav-button-transparent:focus, +.nav-button-transparent:focus-visible { + outline: none !important; + ring: none !important; + --tw-ring-shadow: none !important; + border: none !important; + background: transparent !important; + background-color: transparent !important; +} + +/* Light mode subtle hover effects - only show on hover */ +.nav-button-transparent:hover { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + --tw-bg-opacity: 1 !important; + border: none !important; + transition: background-color 0.2s ease-in-out !important; +} + +/* Dark mode even more subtle hover effects */ +.dark .nav-button-transparent:hover { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; + transition: background-color 0.2s ease-in-out !important; +} + +/* Override NavigationMenuTrigger specific classes with maximum specificity */ +.nav-button-transparent.bg-background { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Focus states - only subtle background, no borders or rings */ +.nav-button-transparent:focus:not(:hover) { + background: rgba(0, 0, 0, 0.04) !important; + background-color: rgba(0, 0, 0, 0.04) !important; + border: none !important; + box-shadow: none !important; +} + +.dark .nav-button-transparent:focus:not(:hover) { + background: rgba(255, 255, 255, 0.03) !important; + background-color: rgba(255, 255, 255, 0.03) !important; + border: none !important; + box-shadow: none !important; +} + +/* Override open states */ +.nav-button-transparent[data-state="open"] { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + border: none !important; +} + +.dark .nav-button-transparent[data-state="open"] { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; + border: none !important; +} + +/* Ensure all shadcn/ui utility classes are overridden with high specificity */ +button.nav-button-transparent, +[data-slot="button"].nav-button-transparent, +[data-slot="navigation-menu-trigger"].nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + border: none !important; + border-color: transparent !important; + box-shadow: none !important; + cursor: pointer !important; +} + +/* Hover states for all button types */ +button.nav-button-transparent:hover, +[data-slot="button"].nav-button-transparent:hover, +[data-slot="navigation-menu-trigger"].nav-button-transparent:hover { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + border: none !important; + transition: background-color 0.2s ease-in-out !important; + cursor: pointer !important; +} + +/* Focus states for all button types */ +button.nav-button-transparent:focus, +[data-slot="button"].nav-button-transparent:focus, +[data-slot="navigation-menu-trigger"].nav-button-transparent:focus { + background: rgba(0, 0, 0, 0.04) !important; + background-color: rgba(0, 0, 0, 0.04) !important; + border: none !important; + box-shadow: none !important; + outline: none !important; + cursor: pointer !important; +} + +/* Dark mode hover and focus states */ +.dark button.nav-button-transparent:hover, +.dark [data-slot="button"].nav-button-transparent:hover, +.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:hover { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; + border: none !important; + transition: background-color 0.2s ease-in-out !important; + cursor: pointer !important; +} + +.dark button.nav-button-transparent:focus, +.dark [data-slot="button"].nav-button-transparent:focus, +.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:focus { + background: rgba(255, 255, 255, 0.03) !important; + background-color: rgba(255, 255, 255, 0.03) !important; + border: none !important; + box-shadow: none !important; + outline: none !important; + cursor: pointer !important; +} + +/* Dropdown and navigation item transparency */ +.nav-dropdown-transparent { + background: rgba(255, 255, 255, 0.85) !important; + backdrop-filter: blur(20px) saturate(180%) !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.12), + 0 2px 16px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; + border-radius: 0.75rem !important; +} + +.dark .nav-dropdown-transparent { + background: rgba(15, 15, 15, 0.85) !important; + border: 1px solid rgba(82, 82, 82, 0.3) !important; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.4), + 0 2px 16px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; +} + +.nav-dropdown-item { + background: transparent !important; + border: none !important; + transition: background-color 0.2s ease-in-out !important; +} + +.nav-dropdown-item:hover { + background: rgba(0, 0, 0, 0.08) !important; + border: none !important; +} + +.dark .nav-dropdown-item:hover { + background: rgba(255, 255, 255, 0.08) !important; + border: none !important; +} + +/* Additional overrides for complete transparency */ +/* Handle any remaining shadcn/ui styling conflicts */ +.nav-button-transparent[data-variant="ghost"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; + cursor: pointer !important; +} + +.nav-button-transparent[data-variant="ghost"]:hover { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + border: none !important; + cursor: pointer !important; +} + +.dark .nav-button-transparent[data-variant="ghost"]:hover { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; + border: none !important; + cursor: pointer !important; +} + +/* Override any remaining background utilities */ +.nav-button-transparent.bg-transparent, +.nav-button-transparent.bg-accent, +.nav-button-transparent.hover\:bg-accent, +.nav-button-transparent.focus\:bg-accent { + background: transparent !important; + background-color: transparent !important; + border: none !important; + cursor: pointer !important; +} + +/* Ensure link elements in navigation also have transparent styling */ +a.nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + border: none !important; + text-decoration: none !important; + cursor: pointer !important; +} + +a.nav-button-transparent:hover { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + border: none !important; + text-decoration: none !important; + cursor: pointer !important; +} + +.dark a.nav-button-transparent:hover { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; + border: none !important; + text-decoration: none !important; + cursor: pointer !important; +} + +/* Ultra-specific overrides to ensure transparency takes precedence */ +/* Handle all possible combinations of button classes */ +button.nav-button-transparent.hover\:bg-accent, +button.nav-button-transparent.dark\:hover\:bg-accent\/50, +button.nav-button-transparent[class*="hover:bg"], +[data-slot="button"].nav-button-transparent.hover\:bg-accent, +[data-slot="button"].nav-button-transparent.dark\:hover\:bg-accent\/50, +[data-slot="button"].nav-button-transparent[class*="hover:bg"], +[data-slot="navigation-menu-trigger"].nav-button-transparent.hover\:bg-accent, +[data-slot="navigation-menu-trigger"].nav-button-transparent.dark\:hover\:bg-accent\/50, +[data-slot="navigation-menu-trigger"].nav-button-transparent[class*="hover:bg"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Override any CSS custom properties that might affect background */ +.nav-button-transparent { + --tw-bg-accent: transparent !important; + --tw-bg-background: transparent !important; + --tw-bg-muted: transparent !important; + --tw-bg-secondary: transparent !important; +} + +/* Ensure no background on any state for nav buttons */ +.nav-button-transparent, +.nav-button-transparent:not(:hover):not(:focus):not(:active) { + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + border: none !important; +} + +/* Maximum specificity overrides - nuclear option for transparency */ +html body header button.nav-button-transparent, +html body header [data-slot="button"].nav-button-transparent, +html body header [data-slot="navigation-menu-trigger"].nav-button-transparent, +html body header div button.nav-button-transparent, +html body header div [data-slot="button"].nav-button-transparent, +html body header div [data-slot="navigation-menu-trigger"].nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + border: none !important; + border-color: transparent !important; + box-shadow: none !important; + backdrop-filter: none !important; +} + +/* Override any inline styles or computed styles */ +.nav-button-transparent[style*="background"] { + background: transparent !important; + background-color: transparent !important; +} + +/* Target specific button classes that might have background */ +.nav-button-transparent.inline-flex, +.nav-button-transparent[class*="inline-flex"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Enhanced link element transparency for Sale button and similar nav links */ +/* Apply maximum specificity for link elements in navigation */ +html body header a.nav-button-transparent, +html body header div a.nav-button-transparent, +html body header nav a.nav-button-transparent, +[data-slot="navigation-menu-link"].nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + border: none !important; + border-color: transparent !important; + box-shadow: none !important; + backdrop-filter: none !important; + cursor: pointer !important; +} + +/* Override any NavigationMenuLink default styles */ +a.nav-button-transparent[data-slot="navigation-menu-link"], +[data-slot="navigation-menu-link"].nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + border: none !important; + box-shadow: none !important; +} + +/* Ensure link hover states maintain transparency in default state */ +a.nav-button-transparent:not(:hover):not(:focus):not(:active) { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Specific overrides for NavigationMenuLink component (Sale button) */ +[data-slot="navigation-menu-link"].nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + border: none !important; + box-shadow: none !important; + cursor: pointer !important; +} + +/* Override NavigationMenuLink hover and focus states */ +[data-slot="navigation-menu-link"].nav-button-transparent.hover\:bg-accent, +[data-slot="navigation-menu-link"].nav-button-transparent.focus\:bg-accent, +[data-slot="navigation-menu-link"].nav-button-transparent[class*="hover:bg-accent"], +[data-slot="navigation-menu-link"].nav-button-transparent[class*="focus:bg-accent"], +[data-slot="navigation-menu-link"].nav-button-transparent[class*="data-[active=true]:bg-accent"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Override NavigationMenuLink data states */ +[data-slot="navigation-menu-link"].nav-button-transparent[data-active="true"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Ensure NavigationMenuLink has proper hover effect */ +[data-slot="navigation-menu-link"].nav-button-transparent:hover { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + border: none !important; + transition: background-color 0.2s ease-in-out !important; +} + +.dark [data-slot="navigation-menu-link"].nav-button-transparent:hover { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; +} + +/* Enhanced Theme Toggle Transparency Effects */ +/* Theme toggle specific enhancements for better navbar integration */ +.nav-button-transparent.group { + position: relative; + overflow: hidden; + backdrop-filter: blur(8px) saturate(150%); + border-radius: 0.5rem; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Enhanced hover state for theme toggle */ +.nav-button-transparent.group:hover { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + transform: scale(1.05); + backdrop-filter: blur(12px) saturate(180%); +} + +.dark .nav-button-transparent.group:hover { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; +} + +/* Active state for theme toggle */ +.nav-button-transparent.group:active { + transform: scale(0.95); + transition: transform 0.1s ease-in-out; +} + +/* Enhanced focus state for theme toggle */ +.nav-button-transparent.group:focus-visible { + background: rgba(0, 0, 0, 0.04) !important; + background-color: rgba(0, 0, 0, 0.04) !important; + box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important; + outline: none !important; +} + +.dark .nav-button-transparent.group:focus-visible { + background: rgba(255, 255, 255, 0.03) !important; + background-color: rgba(255, 255, 255, 0.03) !important; + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important; +} + +/* Theme toggle dropdown enhanced transparency */ +.nav-dropdown-transparent { + background: rgba(255, 255, 255, 0.98) !important; + backdrop-filter: blur(20px) saturate(200%) !important; + border: 1px solid rgba(255, 255, 255, 0.4) !important; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.1), + 0 2px 16px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; + border-radius: 0.75rem !important; +} + +.dark .nav-dropdown-transparent { + background: rgba(23, 23, 23, 0.98) !important; + border: 1px solid rgba(82, 82, 82, 0.5) !important; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.4), + 0 2px 16px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; +} + +/* Enhanced dropdown items for theme toggle */ +.nav-dropdown-item.group\/item { + background: transparent !important; + border: none !important; + border-radius: 0.5rem !important; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; + margin: 2px !important; + padding: 0.5rem 0.75rem !important; +} + +.nav-dropdown-item.group\/item:hover { + background: rgba(0, 0, 0, 0.08) !important; + backdrop-filter: blur(8px) !important; + transform: translateX(2px) !important; +} + +.dark .nav-dropdown-item.group\/item:hover { + background: rgba(255, 255, 255, 0.08) !important; +} + +/* Smooth icon transitions for theme toggle */ +.nav-button-transparent.group svg { + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); +} + +.dark .nav-button-transparent.group svg { + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); +} + +/* Enhanced glow effect for theme toggle */ +.nav-button-transparent.group:hover svg { + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); +} + +.dark .nav-button-transparent.group:hover svg { + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); +} + +/* Ultra-smooth dropdown animations */ +@keyframes dropdown-in { + from { + opacity: 0; + transform: scale(0.95) translateY(-4px); + } + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +@keyframes dropdown-out { + from { + opacity: 1; + transform: scale(1) translateY(0); + } + to { + opacity: 0; + transform: scale(0.95) translateY(-4px); + } +} + +/* Apply dropdown animation to nav dropdowns */ +.nav-dropdown-transparent[data-state="open"] { + animation: dropdown-in 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Improved checkmark animation */ +.nav-dropdown-item span[class*="animate-in"] { + animation: checkmark-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +@keyframes checkmark-in { + from { + opacity: 0; + transform: scale(0.3) rotate(-12deg); + } + to { + opacity: 1; + transform: scale(1) rotate(0deg); + } +} + +/* Prevent any conflicting backgrounds on theme toggle */ +.nav-button-transparent.group[data-state="open"] { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + border: none !important; + transform: scale(1.05); +} + +.dark .nav-button-transparent.group[data-state="open"] { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; +} |