.premium-nav{background:rgba(10,10,15,0.85);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid rgba(255,255,255,0.06)} .premium-nav-pills{display:flex;align-items:center;gap:6px;padding:6px;background:rgba(255,255,255,0.03);border-radius:16px;border:1px solid rgba(255,255,255,0.06)} .premium-pill{display:flex;align-items:center;gap:10px;padding:10px 20px;border-radius:12px;color:rgba(255,255,255,0.7);font-weight:500;font-size:14px;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);white-space:nowrap}.premium-pill:hover{background:rgba(255,255,255,0.08);color:#fff}.premium-pill.active{background:rgba(255,255,255,0.1);color:#fff} .pill-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all 0.25s ease}.pill-icon.purple{background:linear-gradient(135deg,rgba(139,92,246,0.2),rgba(139,92,246,0.1));color:#a78bfa}.pill-icon.pink{background:linear-gradient(135deg,rgba(236,72,153,0.2),rgba(236,72,153,0.1));color:#f472b6}.pill-icon.blue{background:linear-gradient(135deg,rgba(59,130,246,0.2),rgba(59,130,246,0.1));color:#60a5fa}.pill-icon.green{background:linear-gradient(135deg,rgba(34,197,94,0.2),rgba(34,197,94,0.1));color:#4ade80}.pill-icon.amber{background:linear-gradient(135deg,rgba(245,158,11,0.2),rgba(245,158,11,0.1));color:#fbbf24}.pill-icon.indigo{background:linear-gradient(135deg,rgba(99,102,241,0.2),rgba(99,102,241,0.1));color:#818cf8}.pill-icon.teal{background:linear-gradient(135deg,rgba(20,184,166,0.2),rgba(20,184,166,0.1));color:#2dd4bf}.premium-pill:hover .pill-icon.purple{background:linear-gradient(135deg,rgba(139,92,246,0.35),rgba(139,92,246,0.2))}.premium-pill:hover .pill-icon.pink{background:linear-gradient(135deg,rgba(236,72,153,0.35),rgba(236,72,153,0.2))}.premium-pill:hover .pill-icon.blue{background:linear-gradient(135deg,rgba(59,130,246,0.35),rgba(59,130,246,0.2))}.premium-pill:hover .pill-icon.green{background:linear-gradient(135deg,rgba(34,197,94,0.35),rgba(34,197,94,0.2))}.premium-pill:hover .pill-icon.indigo{background:linear-gradient(135deg,rgba(99,102,241,0.35),rgba(99,102,241,0.2))}.premium-pill:hover .pill-icon.teal{background:linear-gradient(135deg,rgba(20,184,166,0.35),rgba(20,184,166,0.2))} .premium-account-btn{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:14px;cursor:pointer;transition:all 0.25s ease}.premium-account-btn:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12)}.account-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#8b5cf6,#ec4899);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:14px}.account-avatar.large{width:44px;height:44px;font-size:16px}.account-info{display:flex;flex-direction:column;align-items:flex-start}.account-name{color:#fff;font-weight:500;font-size:14px;line-height:1.2}.account-role{color:rgba(139,92,246,0.8);font-size:11px;font-weight:500} .premium-dropdown{position:absolute;right:0;top:100%;padding-top:8px;width:280px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all 0.25s cubic-bezier(0.4,0,0.2,1);z-index:100}.premium-dropdown-inner{background:rgba(15,15,20,0.95);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.1);border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);overflow:hidden}.group:hover .premium-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-header{display:flex;align-items:center;gap:14px;padding:16px}.dropdown-divider{height:1px;background:rgba(255,255,255,0.08);margin:0}.dropdown-item{display:flex;align-items:center;gap:14px;padding:14px 16px;color:rgba(255,255,255,0.7);font-size:14px;font-weight:500;transition:all 0.2s ease;width:100%;text-align:left}.dropdown-item:hover{background:rgba(255,255,255,0.05);color:#fff}.dropdown-item.danger{color:#f87171}.dropdown-item.danger:hover{background:rgba(239,68,68,0.1);color:#fca5a5} .nav-mega-dropdown{position:absolute;left:50%;transform:translateX(-50%) translateY(-8px);top:100%;padding-top:10px;width:320px;opacity:0;visibility:hidden;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);z-index:100}.group\/calc:hover .nav-mega-dropdown,.group\/discover:hover .nav-mega-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.nav-mega-dropdown-inner{background:rgba(15,15,20,0.95);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,0.1);border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);overflow:hidden;padding:8px}.mega-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;color:rgba(255,255,255,0.8);transition:all 0.2s ease}.mega-item:hover{background:rgba(255,255,255,0.06);color:#fff}.mega-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.mega-icon.purple{background:linear-gradient(135deg,rgba(139,92,246,0.25),rgba(139,92,246,0.1));color:#a78bfa}.mega-icon.pink{background:linear-gradient(135deg,rgba(236,72,153,0.25),rgba(236,72,153,0.1));color:#f472b6}.mega-icon.indigo{background:linear-gradient(135deg,rgba(99,102,241,0.25),rgba(99,102,241,0.1));color:#818cf8}.mega-icon.teal{background:linear-gradient(135deg,rgba(20,184,166,0.25),rgba(20,184,166,0.1));color:#2dd4bf}.mega-icon.amber{background:linear-gradient(135deg,rgba(245,158,11,0.25),rgba(245,158,11,0.1));color:#fbbf24}.mega-text{display:flex;flex-direction:column}.mega-label{font-size:14px;font-weight:600;line-height:1.3}.mega-desc{font-size:12px;color:rgba(255,255,255,0.4);line-height:1.3} body.light-theme .nav-mega-dropdown-inner{background:rgba(255,255,255,0.98);border:1px solid rgba(0,0,0,0.08);box-shadow:0 25px 50px -12px rgba(0,0,0,0.15)}body.light-theme .mega-item{color:#374151}body.light-theme .mega-item:hover{background:rgba(139,92,246,0.06);color:#1f2937}body.light-theme .mega-desc{color:#9ca3af}body.light-theme .mega-label{color:#1f2937} .mobile-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:rgba(255,255,255,0.45);font-size:10px;font-weight:500;gap:2px;padding:6px 0;transition:color 0.2s ease}.mobile-tab.active{color:#a78bfa}.mobile-tab:hover{color:#a78bfa}body.light-theme .mobile-tab{color:rgba(0,0,0,0.55)}body.light-theme .mobile-tab i{color:inherit}body.light-theme .mobile-tab.active,body.light-theme .mobile-tab:hover{color:#7c3aed} body.light-theme .glass-nav{background:rgba(255,255,255,0.95) !important;border-top:1px solid rgba(0,0,0,0.1) !important;box-shadow:0 -2px 12px rgba(0,0,0,0.06)} body.light-theme .glass-nav .border-bg-dark{border-color:rgba(255,255,255,0.95) !important} .mobile-theme-toggle{position:fixed;top:12px;left:12px;z-index:40;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(15,15,20,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.8);cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 12px rgba(0,0,0,0.2)}.mobile-theme-toggle svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;transition:opacity 0.2s ease}.mobile-theme-toggle:hover{transform:scale(1.1)}.mobile-theme-toggle:active{transform:scale(0.95)}.mobile-theme-toggle .sun-icon{opacity:0;pointer-events:none}.mobile-theme-toggle .moon-icon{opacity:1}body.light-theme .mobile-theme-toggle{background:rgba(255,255,255,0.85);border:1px solid rgba(0,0,0,0.1);color:#374151;box-shadow:0 2px 12px rgba(0,0,0,0.08)}body.light-theme .mobile-theme-toggle .moon-icon{opacity:0;pointer-events:none}body.light-theme .mobile-theme-toggle .sun-icon{opacity:1;pointer-events:auto} @keyframes fab-pulse{0%,100%{box-shadow:0 0 20px rgba(139,92,246,0.4),0 4px 15px rgba(0,0,0,0.3)}50%{box-shadow:0 0 30px rgba(168,85,247,0.6),0 4px 20px rgba(0,0,0,0.3)}} .mobile-calc-sheet{position:fixed;bottom:64px;left:0;right:0;top:auto;z-index:50;padding:0}.mobile-calc-sheet-inner{background:rgba(15,15,20,0.97);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,0.1);border-bottom:none;border-radius:20px 20px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,0.4);overflow:hidden;padding:16px 16px 12px}.mobile-calc-sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.08);font-size:15px;font-weight:600;color:#fff}.mobile-calc-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mobile-calc-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.8);font-size:13px;font-weight:500;transition:all 0.2s ease}.mobile-calc-item:hover{background:rgba(255,255,255,0.08);color:#fff} body.light-theme .mobile-calc-sheet-inner{background:rgba(255,255,255,0.98);border:1px solid rgba(0,0,0,0.08);box-shadow:0 -8px 40px rgba(0,0,0,0.12)}body.light-theme .mobile-calc-sheet-header{color:#1f2937;border-bottom-color:rgba(0,0,0,0.08)}body.light-theme .mobile-calc-item{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.06);color:#374151}body.light-theme .mobile-calc-item:hover{background:rgba(139,92,246,0.06);color:#1f2937}body.light-theme .mobile-calc-item .mega-label{color:#1f2937} .mobile-account-dropdown{background:rgba(15,15,20,0.97);border:1px solid rgba(255,255,255,0.1);box-shadow:0 -8px 30px rgba(0,0,0,0.4)} .premium-login-btn{padding:10px 20px;color:rgba(255,255,255,0.8);font-weight:500;font-size:14px;border-radius:10px;transition:all 0.25s ease}.premium-login-btn:hover{color:#fff;background:rgba(255,255,255,0.05)}.premium-cta-btn{display:flex;align-items:center;gap:8px;padding:10px 24px;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-weight:600;font-size:14px;border-radius:10px;transition:all 0.25s ease;box-shadow:0 4px 15px rgba(139,92,246,0.3)}.premium-cta-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(139,92,246,0.4)} .theme-toggle-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:12px;cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden}.theme-toggle-btn:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15);transform:scale(1.05)}.theme-toggle-btn svg{position:absolute;color:rgba(255,255,255,0.8);transition:all 0.3s ease}.theme-toggle-btn .sun-icon{opacity:0;transform:rotate(-90deg) scale(0.5)}.theme-toggle-btn .moon-icon{opacity:1;transform:rotate(0deg) scale(1)}body.light-theme .theme-toggle-btn{background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.08)}body.light-theme .theme-toggle-btn:hover{background:rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.15)}body.light-theme .theme-toggle-btn svg{color:rgba(0,0,0,0.7)}body.light-theme .theme-toggle-btn .sun-icon{opacity:1;transform:rotate(0deg) scale(1)}body.light-theme .theme-toggle-btn .moon-icon{opacity:0;transform:rotate(90deg) scale(0.5)} body.light-theme .premium-dropdown-inner{background:rgba(255,255,255,0.98);border:1px solid rgba(0,0,0,0.08);box-shadow:0 20px 40px -12px rgba(0,0,0,0.15)}body.light-theme .dropdown-header p.text-white{color:#1f2937 !important}body.light-theme .dropdown-header p.text-gray-400{color:#6b7280 !important}body.light-theme .dropdown-divider{background:rgba(0,0,0,0.06)}body.light-theme .dropdown-item{color:#374151}body.light-theme .dropdown-item:hover{background:rgba(139,92,246,0.08);color:#7c3aed}body.light-theme .dropdown-item.danger{color:#dc2626}body.light-theme .dropdown-item.danger:hover{background:rgba(220,38,38,0.08)}</style> <!-- Mobile Theme Toggle --> <button class="show-mobile mobile-theme-toggle" id="mobile-theme-toggle" aria-label="Przełącz motyw"> <svg class="moon-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> </svg> <svg class="sun-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path> </svg> </button> <!-- Mobile Navigation (bottom) --> @auth <div x-data="{calcSheetOpen:false,contentSheetOpen:false}" class="show-mobile">{{-- Calculator Bottom Sheet --}}<div x-show="calcSheetOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full" @click.away="calcSheetOpen = false" class="mobile-calc-sheet" style="transform:translateY(0);" x-cloak> <div class="mobile-calc-sheet-inner"> <div class="mobile-calc-sheet-header"> <span>Oblicz Matrycę</span> <button @click="calcSheetOpen = false" class="text-gray-400 hover:text-white"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> </button> </div> <div class="mobile-calc-sheet-grid"> <a href="{{route('home')}}" class="mobile-calc-item" @click="calcSheetOpen = false"> <div class="mega-icon purple"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg></div> <span>Indywidualna</span> </a> <a href="{{route('matryca_partnerska.pokaz')}}" class="mobile-calc-item" @click="calcSheetOpen = false"> <div class="mega-icon pink"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg></div> <span>Partnerska</span> </a> <a href="{{route('matryca_dziecka.pokaz')}}" class="mobile-calc-item" @click="calcSheetOpen = false"> <div class="mega-icon indigo"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <span>Dziecka</span> </a> <a href="{{route('human-design.landing')}}" class="mobile-calc-item" @click="calcSheetOpen = false"> <div class="mega-icon teal"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg></div> <span>Human Design</span> </a> </div> </div> </div>{{-- Content Bottom Sheet (Odkrywaj:Blog + Wiedza) --}}<div x-show="contentSheetOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full" @click.away="contentSheetOpen = false" class="mobile-calc-sheet" style="transform:translateY(0);" x-cloak> <div class="mobile-calc-sheet-inner"> <div class="mobile-calc-sheet-header"> <span>Odkrywaj</span> <button @click="contentSheetOpen = false" class="text-gray-400 hover:text-white"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> </button> </div> <div class="mobile-calc-sheet-grid"> <a href="{{route('blog.index')}}" class="mobile-calc-item" @click="contentSheetOpen = false"> <div class="mega-icon pink"><i class="fa-solid fa-newspaper" style="font-size:20px;"></i></div> <span>Blog</span> </a> <a href="{{route('wiki.index')}}" class="mobile-calc-item" @click="contentSheetOpen = false"> <div class="mega-icon indigo"><i class="fa-solid fa-graduation-cap" style="font-size:20px;"></i></div> <span>Centrum Wiedzy</span> </a> <a href="{{route('tarot.index')}}" class="mobile-calc-item" @click="contentSheetOpen = false"> <div class="mega-icon amber"><i class="fa-solid fa-hat-wizard" style="font-size:20px;"></i></div> <span>Tarot</span> </a> <a href="{{route('support.contact')}}" class="mobile-calc-item" @click="contentSheetOpen = false"> <div class="mega-icon teal"><i class="fa-solid fa-headset" style="font-size:20px;"></i></div> <span>Kontakt</span> </a> <a href="{{route('help.index')}}" class="mobile-calc-item" @click="contentSheetOpen = false"> <div class="mega-icon purple"><i class="fa-solid fa-circle-question" style="font-size:20px;"></i></div> <span>Pomoc</span> </a> </div> </div> </div>{{-- 5-Tab Bottom Bar --}}<nav class="fixed bottom-0 left-0 right-0 glass-nav z-50 border-t border-white/10"> <div class="flex justify-around items-center h-16 px-1"> <a href="{{route('dashboard')}}" class="mobile-tab{{request()->routeIs('dashboard') || request()->routeIs('matrix.*') ? 'active':''}}"> <i class="fa-solid fa-book-open text-lg"></i> <span>Biblioteka</span> </a> <a href="{{route('oferta')}}" class="mobile-tab{{request()->routeIs('oferta') ? 'active':''}}"> <i class="fa-solid fa-bag-shopping text-lg"></i> <span>Oferta</span> </a>{{-- FAB:Oblicz --}}<div style="position:relative;top:-8px;display:flex;flex-direction:column;align-items:center;flex:1;"> <button @click="calcSheetOpen = !calcSheetOpen" style="width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8b5cf6,#a855f7,#ec4899);border:3px solid rgba(139,92,246,0.3);box-shadow:0 0 20px rgba(139,92,246,0.4),0 4px 15px rgba(0,0,0,0.3);transition:all 0.3s ease;animation:fab-pulse 2s ease-in-out infinite;"> <i class="fa-solid fa-plus text-white" style="font-size:18px;transition:transform 0.3s ease;":style="calcSheetOpen ? 'transform:rotate(45deg)':''"></i> </button> <span style="font-size:10px;font-weight:600;margin-top:2px;white-space:nowrap;":style="calcSheetOpen ? 'color:#a855f7':'color:rgba(156,163,175,0.8)'">Oblicz</span> </div> <div class="mobile-tab{{request()->routeIs('blog.*') || request()->routeIs('wiki.*') ? 'active':''}}" style="position:relative;cursor:pointer;"> <button @click="contentSheetOpen = !contentSheetOpen;calcSheetOpen = false" class="flex flex-col items-center justify-center w-full"> <i class="fa-solid fa-compass text-lg"></i> <span>Odkrywaj</span> </button> </div> <div x-data="{accountOpen:false}" class="mobile-tab{{request()->routeIs('account.*') || request()->routeIs('profiles.*') ? 'active':''}}" style="position:relative;"> <button @click="accountOpen = !accountOpen" class="flex flex-col items-center justify-center w-full"> <i class="fa-solid fa-user text-lg"></i> <span>Konto</span> </button>{{-- Account dropdown --}}<div x-show="accountOpen" x-transition @click.away="accountOpen = false" x-cloak class="mobile-account-dropdown" style="position:absolute;bottom:60px;right:0;min-width:180px;backdrop-filter:blur(20px);border-radius:12px;padding:8px 0;z-index:100;"> <a href="{{route('account.edit')}}" class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 transition-colors"> <i class="fa-solid fa-user-pen w-4"></i> Mój profil </a> <a href="{{route('profiles.index')}}" class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 transition-colors"> <i class="fa-solid fa-users w-4"></i> Moje profile </a> <a href="{{route('my-files')}}" class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 transition-colors"> <i class="fa-solid fa-folder-open w-4"></i> Pliki PDF </a> <a href="{{url('/moja-subskrypcja')}}" class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 transition-colors"> <i class="fa-solid fa-crown w-4" style="color:#fbbf24;"></i> Moja Subskrypcja </a> <div class="divider" style="height:1px;background:rgba(255,255,255,0.08);margin:4px 12px;"></div> <form method="POST" action="{{route('logout')}}"> @csrf <button type="submit" class="flex items-center gap-2 px-4 py-2.5 text-sm text-red-400 hover:text-red-300 hover:bg-white/5 transition-colors w-full text-left"> <i class="fa-solid fa-right-from-bracket w-4"></i> Wyloguj się </button> </form> </div> </div> </div> </nav> </div> @else <div x-data="{calcSheetOpen:false,contentSheetOpen:false}" class="show-mobile">{{-- Calculator Bottom Sheet --}}<div x-show="calcSheetOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full" @click.away="calcSheetOpen = false" class="mobile-calc-sheet" style="transform:translateY(0);" x-cloak> <div class="mobile-calc-sheet-inner"> <div class="mobile-calc-sheet-header"> <span>Oblicz Matrycę</span> <button @click="calcSheetOpen = false" class="text-gray-400 hover:text-white"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> </button> </div> <div class="mobile-calc-sheet-grid"> <a href="{{route('home')}}#calculator" class="mobile-calc-item" @click="calcSheetOpen = false"> <div class="mega-icon purple"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg></div> <span>Indywidualna</span> </a> <a href="{{route('matryca_partnerska.pokaz')}}" class="mobile-calc-item" @click="calcSheetOpen = false"> <div class="mega-icon pink"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg></div> <span>Partnerska</span> </a> <a href="{{route('matryca_dziecka.pokaz')}}" class="mobile-calc-item" @click="calcSheetOpen = false"> <div class="mega-icon indigo"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <span>Dziecka</span> </a> <a href="{{route('human-design.landing')}}" class="mobile-calc-item" @click="calcSheetOpen = false"> <div class="mega-icon teal"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg></div> <span>Human Design</span> </a> </div> </div> </div>{{-- Content Bottom Sheet (Odkrywaj:Blog + Wiedza) --}}<div x-show="contentSheetOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full" @click.away="contentSheetOpen = false" class="mobile-calc-sheet" style="transform:translateY(0);" x-cloak> <div class="mobile-calc-sheet-inner"> <div class="mobile-calc-sheet-header"> <span>Odkrywaj</span> <button @click="contentSheetOpen = false" class="text-gray-400 hover:text-white"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> </button> </div> <div class="mobile-calc-sheet-grid"> <a href="{{route('blog.index')}}" class="mobile-calc-item" @click="contentSheetOpen = false"> <div class="mega-icon pink"><i class="fa-solid fa-newspaper" style="font-size:20px;"></i></div> <span>Blog</span> </a> <a href="{{route('wiki.index')}}" class="mobile-calc-item" @click="contentSheetOpen = false"> <div class="mega-icon indigo"><i class="fa-solid fa-graduation-cap" style="font-size:20px;"></i></div> <span>Centrum Wiedzy</span> </a> <a href="{{route('tarot.index')}}" class="mobile-calc-item" @click="contentSheetOpen = false"> <div class="mega-icon amber"><i class="fa-solid fa-hat-wizard" style="font-size:20px;"></i></div> <span>Tarot</span> </a> <a href="{{route('support.contact')}}" class="mobile-calc-item" @click="contentSheetOpen = false"> <div class="mega-icon teal"><i class="fa-solid fa-headset" style="font-size:20px;"></i></div> <span>Kontakt</span> </a> <a href="{{route('help.index')}}" class="mobile-calc-item" @click="contentSheetOpen = false"> <div class="mega-icon purple"><i class="fa-solid fa-circle-question" style="font-size:20px;"></i></div> <span>Pomoc</span> </a> </div> </div> </div>{{-- 4-Tab Bottom Bar with FAB --}}<nav class="fixed bottom-0 left-0 right-0 glass-nav z-50 border-t border-white/10"> <div class="flex justify-around items-center h-16 px-1"> <a href="{{route('home')}}" class="mobile-tab{{request()->routeIs('home') ? 'active':''}}"> <i class="fa-solid fa-home text-lg"></i> <span>Start</span> </a> <a href="{{route('oferta')}}" class="mobile-tab{{request()->routeIs('oferta') ? 'active':''}}"> <i class="fa-solid fa-bag-shopping text-lg"></i> <span>Oferta</span> </a>{{-- FAB:Oblicz --}}<div style="position:relative;top:-8px;display:flex;flex-direction:column;align-items:center;flex:1;"> <button @click="calcSheetOpen = !calcSheetOpen" style="width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8b5cf6,#a855f7,#ec4899);border:3px solid rgba(139,92,246,0.3);box-shadow:0 0 20px rgba(139,92,246,0.4),0 4px 15px rgba(0,0,0,0.3);transition:all 0.3s ease;animation:fab-pulse 2s ease-in-out infinite;"> <i class="fa-solid fa-plus text-white" style="font-size:18px;transition:transform 0.3s ease;":style="calcSheetOpen ? 'transform:rotate(45deg)':''"></i> </button> <span style="font-size:10px;font-weight:600;margin-top:2px;white-space:nowrap;":style="calcSheetOpen ? 'color:#a855f7':'color:rgba(156,163,175,0.8)'">Oblicz</span> </div> <div class="mobile-tab{{request()->routeIs('blog.*') || request()->routeIs('wiki.*') ? 'active':''}}" style="position:relative;cursor:pointer;"> <button @click="contentSheetOpen = !contentSheetOpen;calcSheetOpen = false" class="flex flex-col items-center justify-center w-full"> <i class="fa-solid fa-compass text-lg"></i> <span>Odkrywaj</span> </button> </div> <div x-data="{guestAccountOpen:false}" class="mobile-tab" style="position:relative;"> <button @click="guestAccountOpen = !guestAccountOpen" class="flex flex-col items-center justify-center w-full"> <i class="fa-solid fa-user text-lg"></i> <span>Konto</span> </button> <div x-show="guestAccountOpen" x-transition @click.away="guestAccountOpen = false" x-cloak class="mobile-account-dropdown" style="position:absolute;bottom:60px;right:0;min-width:180px;backdrop-filter:blur(20px);border-radius:12px;padding:8px 0;z-index:100;"> <a href="{{route('login')}}" class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-white/5 transition-colors"> <i class="fa-solid fa-right-to-bracket w-4"></i> Zaloguj się </a> <a href="{{route('register')}}" class="flex items-center gap-2 px-4 py-2.5 text-sm transition-colors" style="color:#a78bfa;"> <i class="fa-solid fa-user-plus w-4"></i> Załóż konto </a> </div> </div> </div> </nav> </div> @endauth <!-- Main Content --> <main class="relative z-10 pb-24 md:pb-8"> @yield('content'){{$slot ?? ''}}</main> <!-- Footer --> <footer class="mt-12 py-12 border-t border-white/10 mb-16 md:mb-0 relative z-[1]"> <div class="container max-w-6xl mx-auto px-4"> <div class="grid md:grid-cols-4 gap-8 mb-8"> <!-- Logo i opis --> <div class="md:col-span-1"> <a href="{{route('home')}}" class="flex items-center gap-2 mb-4"> <img src="{{asset('images/logo.png')}}" alt="Tajemnica Daty" class="h-8 w-8" width="32" height="32"> <span class="text-2xl font-bold">TAJEMNICA<span class="text-gradient">DATY</span><span class="text-gray-500 text-sm">.PL</span></span> </a> <p class="text-gray-400 text-sm"> Odkryj swoją Matrycę Losu i poznaj tajemnice swojego przeznaczenia dzięki Metodzie Natalii Ladini. </p> </div> <!-- Produkty --> <div> <h4 class="text-white font-semibold mb-4">Produkty</h4> <ul class="space-y-2 text-sm"> <li><a href="{{route('home')}}#calculator" class="text-gray-400 hover:text-white transition">Matryca Indywidualna</a></li> <li><a href="{{route('matryca_partnerska.pokaz')}}" class="text-gray-400 hover:text-white transition">Matryca Partnerska</a></li> <li><a href="{{route('matryca_dziecka.pokaz')}}" class="text-gray-400 hover:text-white transition">Matryca Dziecka</a></li> <li><a href="{{route('human-design.landing')}}" class="text-gray-400 hover:text-white transition">Human Design</a></li> <li><a href="{{route('blog.index')}}" class="text-gray-400 hover:text-white transition">Blog</a></li> <li><a href="{{route('home')}}#pricing" class="text-gray-400 hover:text-white transition">Cennik</a></li> </ul> </div> <!-- Informacje --> <div> <h4 class="text-white font-semibold mb-4">Informacje</h4> <ul class="space-y-2 text-sm"> <li><a href="{{route('o-nas')}}" class="text-gray-400 hover:text-white transition">O nas</a></li> <li><a href="{{route('legal.privacy')}}" class="text-gray-400 hover:text-white transition">Polityka prywatności</a></li> <li><a href="{{route('cookie.policy')}}" class="text-gray-400 hover:text-white transition">Polityka cookies</a></li> <li><a href="{{route('legal.regulamin')}}" class="text-gray-400 hover:text-white transition">Regulamin</a></li> <li><a href="{{route('help.index')}}" class="text-gray-400 hover:text-white transition">Centrum Pomocy</a></li> <li><a href="{{route('support.contact')}}" class="text-gray-400 hover:text-white transition">Kontakt</a></li> </ul> </div> <!-- Konto --> <div> <h4 class="text-white font-semibold mb-4">Konto</h4> <ul class="space-y-2 text-sm"> @auth <li><a href="{{route('my-files')}}" class="text-gray-400 hover:text-white transition">Moje Pliki</a></li> <li><a href="{{route('dashboard')}}" class="text-gray-400 hover:text-white transition">Biblioteka</a></li> <li><a href="{{route('profiles.index')}}" class="text-gray-400 hover:text-white transition">Profile</a></li> <li><a href="{{route('account.edit')}}" class="text-gray-400 hover:text-white transition">Ustawienia</a></li> @else <li><a href="{{route('login')}}" class="text-gray-400 hover:text-white transition">Zaloguj się</a></li> <li><a href="{{route('register')}}" class="text-gray-400 hover:text-white transition">Zarejestruj się</a></li> @endauth </ul> </div> </div> <!-- Separator --> <div class="border-t border-white/10 pt-8"> <div class="flex flex-col md:flex-row justify-between items-center gap-4"> <p class="text-gray-500 text-sm"> &copy;{{date('Y')}}Tajemnica Daty. Wszelkie prawa zastrzeżone. </p> <!-- Social Media --> <div class="flex gap-4"> <a href="https://www.facebook.com/61578482626418" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition" aria-label="Facebook"> <i class="fa-brands fa-facebook text-xl"></i> </a> <a href="https://www.instagram.com/tajemnicadaty" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition" aria-label="Instagram"> <i class="fa-brands fa-instagram text-xl"></i> </a> <a href="https://www.tiktok.com/@tajemnicadaty" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition" aria-label="TikTok"> <i class="fa-brands fa-tiktok text-xl"></i> </a> </div> </div> </div> </div> </footer> <style> @media (min-width:769px){.show-mobile{display:none !important}}@media (max-width:768px){.hide-mobile{display:none !important}.show-mobile{display:block !important}} @media (min-width:769px){.show-mobile{display:none !important}}@media (max-width:768px){.hide-mobile{display:none !important}.show-mobile{display:block !important}}