/* FanZone.pl — motyw v2: pełne przeniesienie wyglądu nowej strony głównej (wariant B) na podstrony SOTESHOP. Barwy marki: zieleń #6EB440 + czerń/szarość/biel. Ładowany na końcu przez theme/responsive/base.html. Wdrożenie 2026-09-02. Kopia: C:\Klaudia\Projekty\fanzone\nowy-wyglad\ */ /* ═══ 1. TYPOGRAFIA ═══ */ body{font-family:Tahoma,"Segoe UI",Verdana,Arial,sans-serif;color:#222;font-size:14px} h1,h2,h3,.index-title,.product-name h1{font-family:"Arial Black","Segoe UI Black",Arial,sans-serif;letter-spacing:-.3px;color:#222} a{color:#417A22} a:hover,a:focus{color:#2F5A17} /* ═══ 2. PASEK GÓRNY (fz-utility) ═══ */ #fz-utility{background:#222;color:#ddd;font-size:12.5px;padding:6px 0} #fz-utility .container{display:flex;justify-content:flex-end} #fz-utility a{color:#ddd} #fz-utility a:hover{color:#fff;text-decoration:underline} /* ═══ 3. BIAŁY PASEK: logo + szukajka + konto/koszyk ═══ */ #header{display:flex !important;align-items:center;gap:36px;padding:16px 0;float:none} #logo{position:static !important;width:auto !important;float:none !important} #logo img{display:block;height:52px;width:auto} .fz-szukaj{flex:1;display:flex;max-width:560px;margin:0} .fz-szukaj input{flex:1;border:2px solid #6EB440;border-right:none;border-radius:8px 0 0 8px; padding:11px 16px;font-size:15px;outline-offset:-2px} .fz-szukaj button{border:none;background:#6EB440;color:#fff;font-weight:700; padding:0 22px;border-radius:0 8px 8px 0;cursor:pointer;font-size:16px} .fz-szukaj button:hover{background:#5A9A32} #fz-akcje{margin-left:auto;display:flex;gap:22px;text-align:center} #fz-akcje a{display:block;color:#222;font-size:12px;text-decoration:none} #fz-akcje a:hover{color:#417A22} #fz-akcje .glyphicon,#fz-akcje .fz-ikona{display:block;font-size:20px;margin-bottom:3px;font-style:normal} .fz-szukaj button{font-size:17px;line-height:1} /* ═══ 4. ZIELONY PASEK MENU ═══ */ #header-navbar,#header-navbar-outer{background:#6EB440} #header-navbar{border:none;border-radius:0} #nav-menu .navbar-nav > li > a{font-weight:700;font-size:14px;color:#fff} #nav-menu .navbar-nav > li > a:hover, #nav-menu .navbar-nav > li.active > a, #nav-menu .navbar-nav > li.dropdown > a:hover, #nav-menu .navbar-nav > li.open > a{background:#5A9A32;color:#fff} .btn-navbar,.btn-navbar:active,.btn-navbar:hover,.btn-navbar:focus{background:#6EB440;border:none} .btn-navbar:hover{background:#5A9A32} .more.open .dropdown-toggle .icon-bar, #nav-button-menu.collapsed:hover .icon-bar, #nav-button-menu .icon-bar{background-color:#fff} .navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background:#5A9A32} /* na komputerze duża szukajka i linki zastępują przyciski-ikony (na mobile zostają) */ @media (min-width:768px){ #nav-button-search,#nav-button-shopping-cart,#nav-button-user{display:none !important} } /* menu rozwijane */ .dropdown-menu{border-radius:0 0 8px 8px;border-color:#ddd} .dropdown-menu a:hover, .horizontal-categories > li > a:hover, .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus{background:#5A9A32;color:#fff} /* ═══ 5. PRZYCISKI ═══ */ .btn{border-radius:8px} .btn-primary, .btn-shopping-cart, .information .btn-shopping-cart{background:#6EB440;border-color:#5A9A32;color:#fff;font-weight:700} .btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active, .btn-shopping-cart:hover,.btn-shopping-cart:focus,.btn-shopping-cart:active, .information .btn-shopping-cart:hover, .open .dropdown-toggle.btn-primary{background:#5A9A32;border-color:#417A22;color:#fff} a.primary{color:#417A22} a.primary:hover,a.primary:active,a.primary:focus,a.primary.active{color:#2F5A17} /* ═══ 6. LISTA PRODUKTÓW — karty jak na stronie głównej ═══ */ .product{padding:8px} .product > div,.product .product-container{border:1px solid #ddd;border-radius:12px;background:#fff; transition:box-shadow .15s;overflow:hidden;height:100%} .product > div:hover{box-shadow:0 4px 18px rgba(0,0,0,.08)} .product .product-name,.product .name{font-weight:700;font-size:14px} .product .product-name a,.product .name a{color:#222} .product .product-name a:hover,.product .name a:hover{color:#417A22} .card .prices, .price{color:#417A22;font-family:"Arial Black",Arial,sans-serif} .old_price{color:#666;font-family:Tahoma,Arial,sans-serif} .text-danger{color:#B01F1E} .product-shopping-cart .btn-shopping-cart{border-radius:8px;font-size:13px} /* ═══ 7. OKRUSZKI, PAGINACJA, PANELE, FORMULARZE ═══ */ .breadcrumb{background:#F5F5F5;border-radius:8px;font-size:12.5px} .breadcrumb a{color:#417A22} .pagination > li > a,.pagination > li > span{color:#417A22} .pagination > li > a:focus,.pagination > li > span:focus, .pagination > .active > a,.pagination > .active > span, .pagination > .active > a:hover,.pagination > .active > span:hover{background:#6EB440;border-color:#5A9A32;color:#fff} .panel{border-radius:12px} .panel-primary{border-color:#5A9A32} .panel-primary > .panel-heading{background:#6EB440;border-color:#5A9A32} .form-control{border-radius:8px} .form-control:focus{border-color:#6EB440;box-shadow:0 0 0 2px rgba(110,180,64,.25)} .label-primary,.badge{background-color:#6EB440} div.star-rating-on a{color:#6EB440} .product_group .other_group a:before{color:#6EB440} #toTop,#phone-call{background:#6EB440;border-radius:8px} a:focus,button:focus,input:focus,select:focus,textarea:focus,[tabindex]:focus{outline-color:#417A22 !important} /* ═══ 8. STOPKA (fz-stopka) ═══ */ footer{margin-top:40px} footer .navbar.navbar-default{background:none;border:none;margin:0;min-height:0} #fz-stopka{background:#fff;border-top:1px solid #ddd;padding:34px 0 20px;font-size:13.5px;color:#666} #fz-stopka h4{font-family:"Arial Black",Arial,sans-serif;color:#222;font-size:12px; letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px} #fz-stopka p{margin:0 0 8px} #fz-stopka ul{list-style:none;margin:0 0 18px;padding:0} #fz-stopka li{margin:0 0 7px} #fz-stopka a{color:#666;text-decoration:none} #fz-stopka a:hover{color:#417A22;text-decoration:underline} .fz-stopka-dol{border-top:1px solid #ddd;margin-top:14px;padding-top:14px;font-size:12px;color:#888} /* ═══ 9. DROBNE SPRZĄTANIE STAREGO SZABLONU ═══ */ #header-navbar-outer{box-shadow:0 2px 8px rgba(0,0,0,.12)} .navbar-fixed-top{box-shadow:0 2px 12px rgba(0,0,0,.2)}