/* =========================== HOME — SprzedamByka Źródło: sb_legacy new/reset.css + new/global.css + new/module.css + new/common.css + old/index.css image_path ERB zamienione na plain paths (Propshaft URL rewriter) Ładowany przez layouts/application.html.erb i layouts/devise.html.erb (bez Tailwind) =========================== */ /* Wymuszamy jasny motyw — stylesheet nie ma wariantu dark, a auto-dark przeglądarek (np. Chrome na Androidzie) rozjeżdżał kontrast i tła. */ :root { color-scheme: only light; } html, body { background: #fff; } /* ===== RESET (new/reset.css) ===== */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} body{line-height:1;} ol,ul{list-style:none;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} table{border-collapse:collapse;border-spacing:0;} /* ===== GLOBAL (new/global.css) ===== */ html {font-size:75%; -webkit-font-smoothing:antialiased; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} body {font-family:Helvetica, Arial, sans-serif; background:url("/assets/img/bg-701b427d.jpg") 0 0 repeat #efefef; color:#373737;} html, body {height:100%; overflow-x:hidden;} h4, h5, h6, p, a, input {font-family:Helvetica, Arial, sans-serif;} h1, h2, h3 {font-family:Arial, sans-serif; font-weight:bold; color:#373737;} h1 {font-size:3.8em; margin-bottom:0.8em;} h2 {font-size:2.6em; margin-bottom:.8em; letter-spacing:-1px;} h3 {font-size:2em; margin-bottom:1em; letter-spacing:-1px;} h4 {font-size:1.8em; font-weight:bold; margin-bottom:10px;} h5 {font-size:1.4em; font-weight:bold; line-height:1.5em; margin-bottom:14px;} h6 {font-size:1.2em; font-weight:bold; color:#555; margin-bottom:5px;} p, a {font-size:1.2em; line-height:1.3em;} p {color:#555; line-height:1.5em; padding-bottom:1.1em;} strong {font-weight:bold;} em {font-style:italic;} a {font-size:1em; color:#007db7; text-decoration:none;} a:hover {color:#ffb111;} ul, ol {margin:0 0 1.8em 0; padding-left:0; line-height:1.5em; font-size:1.1em;} ul ul, ul ol, ol ol {margin-bottom:0;} ul li ul li {font-size:.9em;} ::-webkit-input-placeholder {color:#737373;} input:-moz-placeholder {color:#737373;} .fR {float:right !important;} .fL {float:left !important;} .lt {text-align:left !important;} .rt {text-align:right !important;} .cnt {text-align:center;} .disNon {display:none;} .no-bold {font-weight:normal} .hr {height:1px; width:100%; background:rgba(0,0,0,.09); float:left;} /* ===== HEADER (new/module.css) ===== */ header, .wrap, footer {width:100%; display:block;} .header {height:auto; background:url("/assets/img/hd-3a9dbff6.jpg") 0 -20px repeat-x; padding:14px 0 14px 0} .header.short {height:30px; background-position:0 -100px} .header p {color:#fff; margin:.8em 0.5em 0 0; padding:0; font-size:1.1em;} .header .btn.medium {position:relative; margin-right:1.0em; font-size:1.05em; padding:12px 18px 11px 34px; min-width:70px} .header > div, .content > div, .footer > div {max-width:980px; width:100%; margin:0 auto; box-sizing:border-box} a.logo {width:279px; height:49px; float:left} .header .phone {position:absolute; top:75px; color:#fff; font-size:1.2em; font-weight:bold; padding:8px 15px 4px 35px;} /* Header body: logo (lewo) | nav-wrap (prawo) */ .header-body {clear:both; display:flex; align-items:flex-start; padding-top:6px;} .header-body > a.logo {flex:0 0 auto; float:none; display:block;} .header-body > .nav-hamburger {display:none;} .header-nav-wrap {flex:0 0 auto; margin-left:auto; display:flex; flex-direction:column; align-items:flex-end;} .header-nav-wrap nav.mainNav {float:none;} /* Clearfix zamiast overflow:hidden (który obcinał dropdowny .sub). NIE display:flow-root — nadpisałby mobilne "nav.mainNav {display:none}" i menu hamburgera byłoby stale otwarte */ .header-nav-wrap nav.mainNav::after {content:""; display:table; clear:both} .header-stats {margin:5px 0 0; padding:0; text-align:center; white-space:nowrap; color:#fff; font-size:1.1em;} .header-stats strong {color:#fff;} nav {float:right; margin-top:-4px;} nav.mainNav { background:#3e3f40; background:-moz-linear-gradient(top, #3e3f40 0%, #2e2f31 100%); background:-webkit-linear-gradient(top, #3e3f40 0%,#2e2f31 100%); background:linear-gradient(to bottom, #3e3f40 0%,#2e2f31 100%); -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; -webkit-box-shadow:0 2px 2px rgba(0,0,0,1), inset 0 -1px 0px #444547; box-shadow:0 2px 2px rgba(0,0,0,1), inset 0 -1px 0px #444547; } nav.actionNav {height:49px;} nav a {text-decoration:none; padding:.45em .8em; color:#fff; font-family:Arial, sans-serif; font-size:1.1em; font-weight:bold; text-shadow:0 -1px #000; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } nav a:first-child {padding-left:1em} nav a.act {background-color:#242526} nav ul {margin:0; position:relative} nav.mainNav li {float:left; padding:.9em .5em; margin:3px 0 2px; background:url("/assets/img/sprite-ad04ee84.png") 0 0 no-repeat} nav li.search {position:relative; top:13px; padding:0 1em 0 0; margin:0; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } nav li:first-child, nav li.search {background:none} nav li.last, nav li.search {border:none} nav li.last, nav li.search form {margin:0} nav input[type="text"] {border:none; outline:0; color:#373737; font-size:0.9em; padding:5px 1.5em 4px .8em; width:110px; height:14px; background:-webkit-linear-gradient(top, #e1e1e1 0%,#fefefe 100%); background:linear-gradient(to bottom, #e1e1e1 0%,#fefefe 100%); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 -1px 0 #202021,inset 0 1px 0 #989898; box-shadow:0 -1px 0 #202021,inset 0 1px 0 #989898; margin:0px; } nav input[type="text"]:focus {border:0} nav input[type="submit"] {position:absolute; top:3px; right:17px; border:none; width:18px; height:18px; background:url("/assets/img/sprite-ad04ee84.png") no-repeat 3px -74px, linear-gradient(to bottom, #ffb312 0%,#ff930d 100%); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2); box-shadow:0 1px 1px rgba(0,0,0,.2); } nav input[type="submit"]:hover {cursor:pointer;} nav li:hover .sub, nav li:hover span {display:block} nav li:hover a {background-color:#2a2a2b; color:#fff} nav .sub {display:none; position:absolute; top:36px; padding-top:1em; margin-left:-10px; z-index:9999} nav a span {display:none; position:relative; width:100%; text-align:center; float:left} nav a span:after {content:" "; display:inline-block; position:absolute; bottom:-39px; margin-left:-10px; border-color:transparent transparent #fff transparent; border-style:solid; border-width:8px} nav .sub > div {background-color:#fff; float:left; padding:1.5em; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 7px 0 rgba(0,0,0,.5); box-shadow:0 1px 7px 0 rgba(0,0,0,.5); } nav li .sub ul {float:left} nav li .sub li {padding:0; display:inline; float:none} nav li .sub a {font-family:Helvetica, Arial, sans-serif; color:#007db7; font-weight:normal; text-shadow:none} nav li .sub a:first-child {padding-left:24px} nav li .sub a, nav li .sub a:hover {background-color:transparent} nav li .sub a:hover {background-color:#e9f8ff} nav li .sub .col {width:220px} nav li .sub {left:0%} nav li .sub.sOne {left:auto} /* Dropdown poradników przy "Jak to działa" — linki jeden pod drugim, pełna szerokość jako cel dotyku */ /* Klawiatura (Tab) otwiera dropdown i trzyma go otwartego przy przechodzeniu po jego linkach */ nav li:focus-within .sub {display:block} /* Ekrany dotykowe: :hover/:focus "przyklejają się" po stuknięciu i dropdown nie znika — wyłączamy dropdowny (telefony mają "Poradnik" jako osobną pozycję w menu hamburgera) */ @media (hover: none) { nav li:hover .sub, nav li:focus-within .sub, nav .sub {display:none !important} nav li:hover a span {display:none} } nav li .sub.sGuides .col {width:270px} nav li .sub.sGuides li {display:block} nav li .sub.sGuides a {display:flex; align-items:center; min-height:44px; box-sizing:border-box; padding:.3em .8em; font-size:1em} nav li .sub.sGuides a:first-child {padding-left:.8em} nav li .sub.sGuides li.sGuides-all {border-bottom:1px dashed #ddd; margin-bottom:.3em; padding-bottom:.3em} nav li .sub.sGuides li.sGuides-all a {font-weight:bold} /* ===== CONTENT ===== */ .wrap {background:url("/assets/img/cont-6ebb2e30.jpg") left top repeat-x #fff; min-height:500px} .content > div {padding:1.5em 0 2em; overflow:hidden; position:relative} .main {float:left; margin:0 0 3em 32px; width:77.3%} .main.threeCol {margin:0 32px; width:54.6%} /* ===== COL LEFT ===== */ aside {width:190px; float:left} aside h5 {margin:0 0 .2em 1em} aside .bx {padding:0} /* ===== FOOTER ===== */ .footer {background:url("/assets/img/foot-bcbe3e11.jpg") left top repeat-x; min-height:300px} .footer > div {padding:3em 0; width:930px !important} .footer h6 {margin-bottom:.5em} .footer a, .footer a:hover {color:#737373; font-size:1.1em} .footer a:hover {text-decoration:underline} .footer ul {float:left; width:25%; margin-bottom:2.5em} .footer .copy {margin-top:2.5em; width:100%; float:left;} .footer .logo {background:url("/assets/logos/logo_142x23-d67d2445.png") 0 0 no-repeat; width:142px; height:23px; float:left; text-indent:-999em; margin:0 1em 0 0} .footer .col:first-child {width:70%; margin-top:5px} .footer .col:last-child {width:30%; text-align:right} .footer p {line-height:2em; color:#8c8c8c} .footer .footer-play {margin-top:.8em} .footer .footer-play a {display:inline-block; line-height:0} .footer span {background:url("/assets/img/sprite-ad04ee84.png") 13px -234px no-repeat #85bb4b; font-size:1.5em; font-weight:bold; color:#fff; padding:5px 15px 4px 40px; margin-left:.5em; position:relative; top:9px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } .fb {background:url("/assets/img/sprite-ad04ee84.png") 11px -181px no-repeat #3079ca; display:inline-block; text-indent:-999em; text-align:left; width:30px; height:30px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } .fb:hover {background:url("/assets/img/sprite-ad04ee84.png") 11px -181px no-repeat #42a7de} /* ===== REGISTER BAR ===== */ .register {float:right; width:100%; text-align:right; margin:0 1.5em .9em 0} .register a {color:#e4ffc7; text-decoration:underline; padding:.4em 1.5em} .register a .fa-hat-cowboy, .mobile-auth-item .fa-hat-cowboy {margin-right:.4em; text-decoration:none;} .register a:hover {background-color:#5b7f35; color:#fff; text-decoration:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;} .register span {color:#fff} .register strong a {color:#ffb111;} .register .btn-account-header { display: inline-block; background-color: #5b7f35; color: #fff; text-decoration: none; padding: .3em 1.3em; border-radius: 20px; } .register .btn-account-header:hover { background-color: #305b17; color: #fff; } /* ===== GLOBAL ===== */ .clearfix:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0} .clearfix {display:inline-block} .clearfix {display:block; zoom:1} .nomargin {margin:0 !important} .margin10 {margin-bottom:1em} .margin15 {margin-bottom:1.5em} /* ===== GRID ===== */ .gRow {width:100%} .grid, .gRow {*zoom:1} .grid:before, .grid:after, .gRow:before, .gRow:after {display:table; content:""; line-height:0} .grid:after, .gRow:after {clear:both} .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {float:left; margin:0 3% 0 0} .col1:last-child, .col2:last-child, .col3:last-child, .col4:last-child, .col5:last-child, .col6:last-child, .col7:last-child, .col8:last-child, .col9:last-child, .col10:last-child, .col11:last-child, .col12 {margin:0} .col1 {width:5.5%} .col2 {width:14%} .col3 {width:22.5%} .col4 {width:31%} .col5 {width:39.5%} .col6 {width:48%;} .col7 {width:56.5%} .col8 {width:65%} .col9 {width:73.5%} .col10 {width:82%} .col11 {width:90.5%} .col12 {width:99%; margin:0} /* ===== BUTTONS ===== */ .btn {position:relative; font-weight:bold; font-size:1.5em; text-align:center; border:0; outline:0; display:inline-block; text-shadow:0 1px 0 rgba(0,0,0,0.2); padding:12px 15px 12px; box-shadow:0 1px 0 0 rgba(0,0,0,.2); color:#fff; margin:0; cursor:pointer; background:#ffb312; background:-moz-linear-gradient(top, #ffb312 0%, #ff910c 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb312), color-stop(100%,#ff910c)); background:-webkit-linear-gradient(top, #ffb312 0%,#ff910c 100%); background:-o-linear-gradient(top, #ffb312 0%,#ff910c 100%); background:-ms-linear-gradient(top, #ffb312 0%,#ff910c 100%); background:linear-gradient(to bottom, #ffb312 0%,#ff910c 100%); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } .btn:hover {color:#fff; background:#ffc13a; background:-moz-linear-gradient(top, #ffc13a 0%, #ffa435 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc13a), color-stop(100%,#ffa435)); background:-webkit-linear-gradient(top, #ffc13a 0%,#ffa435 100%); background:-o-linear-gradient(top, #ffc13a 0%,#ffa435 100%); background:-ms-linear-gradient(top, #ffc13a 0%,#ffa435 100%); background:linear-gradient(to bottom, #ffc13a 0%,#ffa435 100%); } .btn.black { background:#3e3f40; background:-moz-linear-gradient(top, #3e3f40 0%, #2e2f31 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e3f40), color-stop(100%,#2e2f31)); background:-webkit-linear-gradient(top, #3e3f40 0%,#2e2f31 100%); background:-o-linear-gradient(top, #3e3f40 0%,#2e2f31 100%); background:-ms-linear-gradient(top, #3e3f40 0%,#2e2f31 100%); background:linear-gradient(to bottom, #3e3f40 0%,#2e2f31 100%); } .btn.black:hover { background:#48494a; background:-moz-linear-gradient(top, #48494a 0%, #393a3c 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#48494a), color-stop(100%,#393a3c)); background:-webkit-linear-gradient(top, #48494a 0%,#393a3c 100%); background:-o-linear-gradient(top, #48494a 0%,#393a3c 100%); background:-ms-linear-gradient(top, #48494a 0%,#393a3c 100%); background:linear-gradient(to bottom, #48494a 0%,#393a3c 100%); } .btn.gray {color:#373737; background:#fbfbfb; background:-moz-linear-gradient(top, #fbfbfb 0%, #f2f2f2 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f2f2f2)); background:-webkit-linear-gradient(top, #fbfbfb 0%,#f2f2f2 100%); background:-o-linear-gradient(top, #fbfbfb 0%,#f2f2f2 100%); background:-ms-linear-gradient(top, #fbfbfb 0%,#f2f2f2 100%); background:linear-gradient(to bottom, #fbfbfb 0%,#f2f2f2 100%); } .btn.gray:hover { background: #f7f7f7; background: -moz-linear-gradient(top, #f7f7f7 0%, #e5e5e5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#e5e5e5)); background: -webkit-linear-gradient(top, #f7f7f7 0%,#e5e5e5 100%); background: -o-linear-gradient(top, #f7f7f7 0%,#e5e5e5 100%); background: -ms-linear-gradient(top, #f7f7f7 0%,#e5e5e5 100%); background: linear-gradient(to bottom, #f7f7f7 0%,#e5e5e5 100%); } .btn.green { background: #9ac65a; background: -moz-linear-gradient(top, #9ac65a 0%, #72b13f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ac65a), color-stop(100%,#72b13f)); background: -webkit-linear-gradient(top, #9ac65a 0%,#72b13f 100%); background: -o-linear-gradient(top, #9ac65a 0%,#72b13f 100%); background: -ms-linear-gradient(top, #9ac65a 0%,#72b13f 100%); background: linear-gradient(to bottom, #9ac65a 0%,#72b13f 100%); } .btn.green:hover { background: #acd06a; background: -moz-linear-gradient(top, #acd06a 0%, #87be49 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#acd06a), color-stop(100%,#87be49)); background: -webkit-linear-gradient(top, #acd06a 0%,#87be49 100%); background: -o-linear-gradient(top, #acd06a 0%,#87be49 100%); background: -ms-linear-gradient(top, #acd06a 0%,#87be49 100%); background: linear-gradient(to bottom, #acd06a 0%,#87be49 100%); } .btn.medium {font-size: 1.2em; padding: 8px 15px; min-width: auto} .btn.small {font-size:.9em; padding: 8px 15px; min-width: auto} .plus.btn.medium:before {left:12px} .plus.btn:before {content:"+"; display:block; position:absolute; left:12px; top:9px; font-size:1.8em; z-index:2} /* ===== BOX (.bx) ===== */ .bx header {background:url("/assets/img/line_hr-860c716b.png") 0 100% repeat-x; padding-bottom:.4em; position:relative;} .bx header, .bx .bd {padding:10px 0} .bx header h5 {margin-bottom:0px;} .bx .bd {padding-bottom:1.8em} .bx header h3 {margin:0; padding:0} .bx header h3 a, .bx header h3 a:hover {color:#373737} .bx .more {background:url("/assets/img/sprite-ad04ee84.png") -136px -94px no-repeat; position:absolute; right:0; bottom:1em; padding:0 1em} .home .bx .more {background-position:-136px -96px} .bx .partners li {min-height:75px; text-align:center; width:126px; padding-left:5px; padding-right:5px;} .bx .partners.thumbsList li img {width:125px; display:inline;} .bx .partners span {height:60px; display:table-cell; overflow:hidden; vertical-align:middle} .bx .partners a {font-size:0.7em} .box {background:#fff; margin:0 0 2.5em 2px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; -moz-box-shadow:0 1px 1px 1px rgba(0,0,0,.1); -webkit-box-shadow:0 1px 1px 1px rgba(0,0,0,.1); box-shadow:0 1px 1px 1px rgba(0,0,0,.1) } .box > div {padding:0 5px} .box ul {margin:0} .box ul ul {padding-left:22px; margin-top:-2px} .box ul ul ul {padding-left:10px;} .box li {font-size:14px; border-bottom:1px dotted #dbdbdb; padding:4px 0} .box li li {padding:0; border:none;} .box li li, .box li:last-child {border:none} .box li a {font-size:14px; display:inline-block; margin:3px 0 3px 3px; padding:3px 10px 1px 10px;} .box li span {font-size:14px; color:#999; margin-left:-2px;} .box li a:hover, .box > li:hover > a {background-color:#eaefe6; color:#007db7; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px} .box li li a {font-size:12px; padding:0} .box li li span {font-size:12px; color:#999} .box li li a:hover {color:#ffb111; background:none} .notifi {-webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px} .notifi h5 {margin-bottom:4px} .notifi p:last-child {padding:0} .notifi.error {background-color:#fff5f0} .notifi.error h5, .notifi.error p {color:#ff3600} .notifi > div {padding:1em} /* ===== TAGS ===== */ .tag {margin:0 .4em 1em .4em} .tag li {display:inline-block; margin:.4em .3em} .tag a {font-size:1em; color:#373737; background-color:#eaefe6; padding:1px 10px; margin:.3em .3em; display:inline-block; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px} .tag a:hover {color:#ffb111} .tag-sm li {margin:.15em .2em} .tag-sm a {margin:.1em .2em} /* ===== COLUMNS (col/fiveCol/threeCol) ===== */ .col, .fiveCol, .threeCol {float:left;} .col {width:50%;} .fiveCol {width:20%;} .threeCol {width:33%;} .col:last-child {margin:0;} /* ===== FROM common.css ===== */ /* [side-col / home layout] */ .home .main {margin:0 0 3em 18px; width:65%} .home aside {width:310px} .home aside .bx {padding:0 21px; margin-bottom:2.75em} aside .bx .btn {display:inline-block; position:relative} /* [cattleContainer — sekcja hero] */ .cattleContainer h4 { line-height:30px; margin-bottom:15px; white-space:nowrap } .cattleContainer h4, .cattleContainer h5 { font-size:1.5em; margin-top:30px; } .cattleContainer .cattleSlide { background: #f8faf4; border-radius: 10px; height: auto; margin: 0 0 15px 10px; padding: 2em 2.2em 1.8em; box-sizing: border-box; display:flex; flex-direction:column; } .cattleContainer .cattleSlide h1 { color: #2d5a1b; font-weight: 900; font-size: 2.7em; margin: 0 0 0.4em; padding: 0; white-space: normal; max-width: 100%; } .cattleContainer .cattleSlide p { font-size:1.35em; color:#555; padding: 0; margin: 0 0 0.8em; } .cattleContainer .cattleSlide em { background-color: #eaf5e0; color: #3d6e21; border-radius: 20px; font-style: normal; padding: 0 12px 2px; } .cattleContainer .cattleSlide .btnCon { margin-top: auto; padding: 0; display: flex; flex-wrap: wrap; gap: 1em; align-items: center; } .cattleContainer .cattleSlide .btn.add { font-size:1.6em; white-space:normal; padding:12px 30px; -webkit-border-radius:40px; -moz-border-radius:40px; border-radius:40px; } .cattleContainer .btn.add span { display:block; font-size:0.7em; font-weight:normal; } .cattleContainer .cattleSlide .cattleSlide-loginHint { color: #555; } .cattleContainer .cattleSlide .cattleSlide-loginHint a { display: inline-block; color: #2d5a1b; font-weight: 700; text-decoration: underline; padding: 10px 4px; } /* [price-list — sidebar notowań] */ .price-list a { position:relative; display:block; padding:3px 0; } .price-list span { position:absolute; right:5px; font-weight:normal; font-size:0.95em; } .price-list span em { display:inline-block; width:30px; font-size:0.8em; text-align:right; } .price-list span em.plus {color:green;} .price-list span em.minus {color:red;} /* [home buyers] */ .home .buyers {text-align:center;} .home .buyers li { width:auto; padding:0 8px; text-align:center; display:inline-block; vertical-align: middle; } .home .buyers li.pro img {width:auto; max-width:140px;} .home .buyers li img {width:45px;} /* [sprite icons] */ .sprite {background:url("/assets/img/sprite-ad04ee84.png") 0 0 no-repeat; display:block} .icons {background:url("/assets/img/icons-79b591f6.png") 0 0 no-repeat; display:inline-block} .ico-Search {background-position:0 -936px} /* [price badge] */ .price {background-color:#80b448; font-size:2em; padding:6px 12px; min-width:75px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px} .rating, .ads {background-color:#20bdff; font-size:.8em; padding:1px 0; min-width:78px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px} .rating span, .ads span {display:inline-block; width:100%; font-size:2.3em} .ads {background-color:#ffa820} .price, .rating, .ads {color:#fff; font-weight:bold; display:inline-block; text-align:center} /* [category-list] */ .category-list dt {font-size:1.2em; font-weight:bold; font-size:18px} .category-list ul {margin:0; text-align:left; font-size:1.2em} .category-list dt a:after {content:""; display:block; position:absolute; top:50%; z-index:2} .category-list dt {margin-bottom:10px} .category-list dt a {display:inline-block; padding:4px 24px 4px; font-size:1em; color:#373737; position:relative} .category-list dd {margin-bottom:20px} .category-list dd a {background:url("/assets/img/sprite-ad04ee84.png") -125px -90px no-repeat; display:block; padding:5px 0 5px 24px} /* [thumbs] */ .thumbsList li {list-style:none; display:-moz-inline-stack; display:inline-block; *display:inline; vertical-align:top; zoom:1; text-align:center; font-size:16px} .thumbsList li a, .thumbsList li img, .thumbsList li strong {display:block; font-size:.9em} .thumbsList li strong {color:#85bb4b; background:#fff; font-size:18px; width:100%; text-align:center; position:absolute; bottom:12px; left:0} .thumbsList li strong.text {font-size:15px; white-space:nowrap} .thumbsList li img {width:auto; height:auto} .rounded {-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px} .opacity a:hover img, .opacity img:hover {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter:alpha(opacity=90); -moz-opacity:.9; -moz-transform: scale(0.999); -khtml-opacity:.9; opacity:0.9} /* [offer list — thumbAdvertList] */ .home .thumbAdvertList {margin-left:-20px} .home .thumbAdvertList li {margin:0 0 15px 24px; width:138px} .thumbAdvertList li img {width:130px; height:90px} .thumb-placeholder {display:block; width:130px; height:90px; background:#f0f0f0; border-radius:8px} .thumbAdvertList {margin:0 -7px} .thumbAdvertList span.border {padding:4px; margin:0 0 8px; display:inline-block;} .thumbAdvertList li {margin:0 7px} .thumbAdvertList li {min-height:190px; _height:190px; width:155px; position:relative} .thumbAdvertList em {font-style:normal; position:relative} .thumbAdvertList span.premium {background:#ffb111} /* [video list] */ .thumbVideoList {margin-left:-6px; text-align:center;} .thumbVideoList li {margin:0 0 15px 15px; min-height:115px; height:115px; width:90px} .thumbVideoList a {position:relative} .thumbVideoList a:after {content:''; display:block; position:absolute; top:15px; left:50%; height:30px; width:30px; margin-left:-15px; background:url("/assets/img/sprite-ad04ee84.png") 0 -479px no-repeat} .thumbVideoList li img {margin:0 0 5px} /* ===== FROM old/index.css ===== */ .category-tree { background: #f6f6f6; border: 1px solid #eee; padding: 10px; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-size:90%; } .category-tree ul {padding: 1px 0 20px 10px;} .category-tree h3 {font-size:100%; font-weight: bold;} #offers a {font-size: 11px;} #offers h2 {font-size: 13px; font-weight: normal; padding: 0;} #offer-of-day, #recommended-offers {float: left; overflow: hidden; width: 205px;} #offer-of-day {margin: 0 10px 0 0;} #offers .box { -moz-border-radius: 3px; -webkit-border-radius: 3px; background: none repeat scroll 0 0 #FAFAFA; border: 1px solid #BBBBBB; height: 230px; padding: 5px; line-height: 1.2em; } #offer-of-day .img {width: 190px; height: 150px; overflow: hidden; text-align: center;} #offer-of-day p {color: #777; font-size: 11px;} #users-looking-for {clear: both;} #users-looking-for h2 {padding: 10px 0;} #users-looking-for div {font-size: 11px; text-align: justify; line-height: 1.4em;} #recommended-offers .img { border: 1px solid #eee; display: inline-block; float: left; height: 40px; margin: 0 4px 4px 0; text-align: center; width: 44px; } #recommended-offers .img img {width: 44px; height: 40px;} #recommended-offers li {clear: both;} #popular-video {padding: 15px 0 0 0;} #popular-video li {width: 130px; height: 170px; float: left; margin: 10px 10px 0 0; line-height: 1.3em;} #popular-video .video-thumb {width: 140px; height: 86px; overflow: hidden; float: left;} #popular-video .video-thumb img {padding: 2px; border: 1px solid #aaa; width: 120px; height: 80px;} #popular-video .video-description {width: 120px; float: left; padding: 0; font-size: 11px;} #popular-video .video-description a.title {font-weight: bold;} #popular-video .video-views {font-size: 11px; color: #666;} #right .right-container .box .partner {border-bottom: 1px solid #ccc; font-size: 11px; text-align: center; padding: 7px 0;} #right .right-container .box .partner-last {border-bottom: none;} #right .right-container .box .partner a {display: block} /* [premium icons] */ .premium-ico {display:inline-block; width:18px; height:inherit; position:relative;} .premium-ico em {background:url("/assets/img/icons-79b591f6.png") 0 0 no-repeat; display:block; width:20px; height:20px; top:2px;} .premium-ico.p em {background-position:0px -210px} .premium-ico.w em {background-position:0px -326px} .premium-ico.n em {background-position:0px -442px} .premium-ico.g em {background-position:0px -557px} /* ===== SITE SEARCH FORM ===== */ .tabs {overflow:hidden; margin:0; padding-bottom:4px} .tabs > div {width:100%} .tabs .tabsCont {background-color:#f7f5e9; position:relative; z-index:2; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -moz-box-shadow:0 2px 2px rgba(0,0,0,.3); -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3); box-shadow:0 2px 2px rgba(0,0,0,.3)} .tabs .tabsCont > div {padding:1.4em 2em} .tabs .tab {display:block} .searchForm form {margin-bottom:0} .searchForm ul {margin:0} .searchForm li {float:left; margin-bottom:0.9em; clear:both} .searchForm label {float:left; font-size:1.1em; color:#373737; margin:0 8px 0 0; line-height:34px} .searchForm input[type="text"], .searchForm input[type="number"], .searchForm select { float:left; margin-right:12px; color:#555; background-color:#fff; border:1px solid #bbb; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; -moz-box-shadow:inset 1px 1px 2px rgba(67,66,61,.5); -webkit-box-shadow:inset 1px 1px 2px rgba(67,66,61,.5); box-shadow:inset 1px 1px 2px rgba(67,66,61,.5); box-sizing:border-box; height:34px; padding:6px 8px; font-size:1em; } .searchForm input[type="text"]:focus, .searchForm input[type="number"]:focus { border-color:#FFB111; outline:0; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255,177,17,.6); box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255,177,17,.6); } /* layout: col10 + col2 jako flex row */ .searchForm .gRow {display:flex; align-items:center} .searchForm .col10 {float:none; flex:1; margin-right:0} .searchForm .col10 input[type="text"] {width:260px} .searchForm .col10 input[type="number"] {width:120px} .searchForm .col10 select {width:195px} /* sub-kolumny wewnątrz col10 */ .searchForm .sf-fields {overflow:hidden} .searchForm .sf-left {float:left} .searchForm .sf-right {float:left; margin-left:14px} /* przycisk: flex, wycentrowany, do prawej */ .searchForm .sf-submit {float:none; flex-shrink:0; display:flex; align-items:center; justify-content:flex-end; padding-left:1.2em} .searchForm .col2 {width:auto} .searchForm .nomargin {margin-bottom:0} .searchForm .checkPos {position:relative; top:1px; cursor:pointer; line-height:34px; font-size:1.1em; color:#373737} .searchForm .searchBx {position:relative} .searchForm .searchBx > div {position:relative; display:inline-block} .searchForm .searchBx input[type="submit"] {padding-left:34px; padding-top:12px; padding-bottom:12px} .searchForm .searchBx span {position:absolute; left:10px; top:50%; margin-top:-8px; width:16px; height:16px; pointer-events:none} /* [search results — used on homepage via categories] */ .searchResult {background-color:#eaefe6; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px} .searchResult p {font-size:1.2em; line-height:25px; padding:0; margin-right:-.4em;} /* [bull-list] */ .bull-list {margin:0; text-align:left} .bull-list a {font-size:1.2em; font-weight:bold; display:block; padding:10px 0; position:relative; color:#555} .bull-list li:last-child a {border-bottom:0} .bull-list a:hover { background:#f0f0f0; background:-moz-linear-gradient(top, #f0f0f0 0%, #eaeaea 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#eaeaea)); background:-webkit-linear-gradient(top, #f0f0f0 0%,#eaeaea 100%); background:-o-linear-gradient(top, #f0f0f0 0%,#eaeaea 100%); background:-ms-linear-gradient(top, #f0f0f0 0%,#eaeaea 100%); background:linear-gradient(to bottom, #f0f0f0 0%,#eaeaea 100%); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } /* ===== OFFER SHOW PAGE ===== */ .offerType { margin-bottom: 1.2em; overflow: hidden; } .offerType .cnt { float: left; margin-right: 12px; } .offerType .oTDesc { float: left; margin-top: -3px; } .offerType .oTDesc p { padding: 0; color: #555; } .offer-main-pic { margin-bottom: 1em; text-align: center; } .offer-main-pic img { max-width: 100%; -webkit-border-radius: 4px; border-radius: 4px; } .offer .gallery { margin: 0 -8px 1.5em; overflow: hidden; } .offer .gallery .gallery-thumb { display: inline-block; margin: 6px 8px; } .offer .gallery .gallery-thumb img { width: 130px; height: 90px; object-fit: cover; border-radius: 4px; transition: opacity .15s; } .offer .gallery .gallery-thumb:hover img { opacity: .8; } .offer-main-pic a { display: block; cursor: zoom-in; } .gslide-counter { position: absolute; bottom: 12px; right: 16px; color: rgba(255,255,255,.85); font-size: 1.2em; pointer-events: none; z-index: 99; } .gslide-title { font-size: 1.2em !important; } .offer-desc { font-size: 1.3em; line-height: 1.7em; color: #444; } .desc-toggle { font-size: 0.85em; white-space: nowrap; } .contactDial { margin-bottom: 1.5em; } .contactDial > div { background: #f7f5e9; border: 2px dotted #d4d1be; padding: 12px 14px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .contactDial h5 { margin: 0 0 .6em 0; font-size: 1.3em; } .contactDial p { padding-bottom: .9em; color: #555; } .contactDial p:last-child { padding-bottom: .5em; } .contactDial .phone { font-size: 1.8em; font-weight: bold; color: #373737; display: block; margin: .4em 0; } .similarOffer { margin-top: 0.5em; } .similarOffer h5 { margin: 0 0 .5em; } .similarOffer .item { overflow: hidden; margin-bottom: .8em; padding-bottom: .8em; background: url("/assets/img/line_hr-860c716b.png") 0 100% repeat-x; } .similarOffer .item:last-child { background: none; padding-bottom: 0; } .similarOffer .item img { width: 58px; height: 42px; object-fit: cover; float: left; margin-right: 8px; -webkit-border-radius: 3px; border-radius: 3px; } .similarOffer .item a { font-size: 1.1em; color: #373737; display: block; } .similarOffer .item a:hover { color: #007db7; } .similarOffer .item .sPrice { font-weight: bold; color: #74b12f; font-size: 1em; display: block; margin-top: 2px; } .similarOffer .item .timeAgo { color: #999; font-size: .95em; } /* ===== CATEGORY INDEX PAGE ===== */ .catList { float: left; width: 100%; min-height: 250px; } .catList ul { margin-bottom: 0; } .catList ul li { margin-bottom: 8px; } .catList ul li span { color: #999; font-size: .9em; } .catList ul li ul { margin-left: 13px; margin-top: 4px; margin-bottom: 0; } .catList ul li ul li { font-size: .8em; margin-bottom: 5px; } .catList ul h5 { margin-bottom: 12px; } .catList .threeCol { vertical-align: top; } /* ===== SEARCH NAVBAR ===== */ #search-navbar { margin: 0 0 12px; position: relative; } #search-navbar h1 { font-size: 2.3em; margin-bottom: 0.4em; } #search-navbar .breadcrumb { font-size: 1.1em; color: #737373; margin-bottom: 0.3em; } #search-navbar .breadcrumb a { font-size: 1em; color: #007db7; } .searchResult .gRow div div { padding: 10px 18px; } .searchResult .fR a { margin-left: 6px; font-size: 1em; } .searchResult .fR a:hover { color: #ffb111; } /* ===== OFFER LIST ITEMS (.poster) ===== */ .searchList .sLOffers h5 { margin: 1.0em 0 0 0; } .searchList .poster { background: url("/assets/img/line_hr-860c716b.png") 0 100% repeat-x; padding: 2px 0 3px 0; } .searchList .poster .grid { padding: 1em; margin: 0; } .searchList .poster .grid .grid { padding: 0; margin: 0; } .searchList .poster.p .grid { background-color: #fff8b9; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .searchList .poster .title { font-weight: normal; margin: 0; font-size: 1.5em; display: block; margin-bottom: 0.3em; padding-right: 130px; } .searchList .poster .title a { font-size: 1em; color: #007db7; } .searchList .poster .title a:hover { color: #007db7; } .searchList .poster p { padding: 0; } .searchList .poster .c { color: #737373; font-size: 1em; margin: 0.2em 0 .5em 0; } .searchList .poster .price { position: absolute; top: 0; right: 0; } .searchList .poster .col3 { margin: 0; } .searchList .poster .col3 img { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width: 160px; height: 110px; object-fit: cover; display: block; } .searchList .poster .col3 a { line-height: 1em; display: block; } .searchList .poster .col9 { position: relative; margin: 0 0 .2em 1em; } .offer-no-photo { width: 160px; height: 110px; background: #f0f0f0; display: table-cell; vertical-align: middle; text-align: center; color: #aaa; font-size: 1.1em; -webkit-border-radius: 2px; border-radius: 2px; } .offer-no-photo-lg { width: 100%; padding: 3em 0; background: #f5f5f5; border-radius: 4px; text-align: center; color: #bbb; font-size: 1.1em; margin-bottom: 1em; } /* ===== PAGINATION (Kaminari) ===== */ nav.pagination { float: none; margin: 2em 0 1em; } .pagination { clear: both; text-align: center; margin: 4em 0 1em; font-size: 1.25em; } .pagination span { display: inline; padding: 0; margin: 0; background: none; border: none; border-radius: 0; font-size: inherit; font-style: normal; } .pagination a { display: inline-block; padding: 3px 8px; margin: 0 2px; color: #007db7; text-decoration: none; font-weight: normal; text-shadow: none; } .pagination a:hover { color: #ffb111; text-decoration: underline; } .pagination span.current { display: inline-block; padding: 3px 8px; margin: 0 2px; color: #333; font-weight: bold; } .pagination span.gap { padding: 3px 4px; color: #999; } /* ===== HAMBURGER BUTTON (desktop: hidden) ===== */ .nav-hamburger { display: none; float: right; background: none; border: none; cursor: pointer; padding: 6px 4px; margin-top: 4px; } .nav-hamburger span { display: block; width: 25px; height: 3px; background: #fff; margin: 5px 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; } .header.nav-open .nav-hamburger span:nth-child(1) { -webkit-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); } .header.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; } .header.nav-open .nav-hamburger span:nth-child(3) { -webkit-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); } /* Mobile auth nav items — hidden on desktop */ nav.mainNav li.mobile-auth-item { display: none; } nav.mainNav li.mobile-nav-item { display: none; } nav.mainNav li.mobile-auth-sep { display: none; height: 0; border-top: 1px solid rgba(255,255,255,0.15); padding: 0; margin: 4px 0; } /* ===== RESPONSIVE ===== */ /* Padding boczny na ekranach węższych niż 980px */ @media screen and (max-width: 979px) { .header > div, .content > div, .footer > div { padding-left: 12px; padding-right: 12px; } } @media screen and (max-width: 768px) { /* Płynne kontenery — zastępują sztywne 980px */ .header > div, .content > div, .footer > div { width: 100% !important; max-width: 980px; padding: 0 12px; box-sizing: border-box; } .content > div { padding-top: 1.2em; } /* Header — auto height, position relative dla absolute dropdown */ .header { height: auto; padding-bottom: 12px; position: relative; background-position: 0 -76px; } /* Header body na mobile: logo + hamburger w jednej linii */ .header-body { flex-wrap: wrap; align-items: center; padding-top: 0; padding: 0 8px; } .header-body > a.logo { flex: 1 0 auto; width: 200px; height: 35px; } .header-body > a.logo img { width: 200px; height: 35px; } .header-body > .nav-hamburger { display: block; } .header-nav-wrap { flex: 0 0 100%; } .header-stats { display: none; } /* Hamburger widoczny; oba nav schowane domyślnie */ .nav-hamburger { display: block; } nav.mainNav, nav.actionNav { display: none; } /* Dropdown — position absolute przyklejony pod headerem */ .header.nav-open nav.mainNav { display: block; position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: #2e2f31; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.5); box-shadow: 0 6px 12px rgba(0,0,0,.5); z-index: 9999; } .header.nav-open nav.actionNav { display: none; } /* Nav items — pionowo jeden pod drugim */ nav { float: none; width: 100%; clear: both; margin-top: 0; } nav.mainNav ul { display: block; white-space: normal; } nav.mainNav li { float: none; display: block; padding: 0; margin: 0; background: none !important; border-bottom: 1px solid rgba(255,255,255,0.08); } nav.mainNav li:last-child { border-bottom: none; } nav.mainNav > ul > li > a { display: block; padding: 14px 18px; font-size: 1.2em; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } nav.mainNav > ul > li > a:hover { background-color: rgba(255,255,255,0.08); -webkit-border-radius: 0; border-radius: 0; } /* Schowaj strzałki i sub-dropdowny na mobile */ nav a span { display: none !important; } nav li:hover .sub { display: none !important; } nav .sub { display: none !important; } /* Formularz wyszukiwania — pełna szerokość w dropdown */ nav li.search { top: 0; padding: 10px 18px 12px; display: block; -webkit-border-radius: 0; border-radius: 0; } nav input[type="text"] { width: calc(100% - 50px); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /* Grid: wszystkie kolumny pełna szerokość, ustawione pionowo */ .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { width: 100% !important; float: none; margin: 0 0 1em 0 !important; } /* Sekcja hero — pełna szerokość na mobile */ .cattleContainer .cattleSlide { height: auto; margin: 0; padding: 1.6em 1.2em; box-sizing: border-box; } .cattleContainer .cattleSlide h1 { white-space: normal; font-size: 2.3em; margin: 0 0 0.4em; padding: 0; } .cattleContainer .cattleSlide p { font-size: 1.35em; font-weight: normal; padding: 0; margin: 0 0 1.2em; } .cattleContainer .cattleSlide .btnCon { padding: 0; flex-wrap: wrap; gap: 8px; } .cattleContainer .cattleSlide .btn.add { display: block; width: 100%; box-sizing: border-box; text-align: center; font-size: 1.4em; padding: 12px 20px; white-space: normal; } .cattleContainer .cattleSlide .cattleSlide-loginHint { width: 100%; text-align: center; } /* Footer: 2 kolumny zamiast 4 */ .footer ul { width: 50%; } .footer .col:first-child, .footer .col:last-child { width: 100%; text-align: left; } /* Sidebar i main wrapper */ .main { width: 100% !important; margin: 0 !important; } .home .main { width: 100% !important; margin: 0 !important; } aside { width: 100% !important; } .home aside { width: 100% !important; } /* Ukryj pasek register — linki są w hamburgerze */ .register { display: none; } /* Pokaż mobile auth items w hamburger dropdown */ nav.mainNav li.mobile-auth-item { display: block; } nav.mainNav li.mobile-nav-item { display: block; } nav.mainNav li.mobile-auth-sep { display: block; } /* Hero: układaj pionowo, hero jako pierwsza */ .cattleContainer { margin-top: 1.5em; } .cattleContainer .gRow { flex-direction: column; } .cattleContainer .col8 { order: -1; margin-bottom: 1em !important; } .cattleContainer .col4 { margin-bottom: 0 !important; } .cattleContainer .cattleSlide { margin: 0 -8px 15px; width: calc(100% + 16px); } /* Wyszukiwarka — pełna szerokość na mobile */ .tabs .tabsCont > div { padding: 1em; } .searchForm .gRow { flex-direction: column; align-items: stretch; } .searchForm .col10 { margin-right: 0; } .searchForm .sf-fields { display: flex; flex-direction: column; gap: 0; } .searchForm .sf-left, .searchForm .sf-right { float: none; margin-left: 0; width: 100%; } .searchForm li { float: none; clear: none; width: 100%; margin-bottom: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 0; border-bottom: 1px solid #eee; } .searchForm li:last-child { border-bottom: none; } .searchForm label { line-height: 1.4; margin: 0; flex-shrink: 0; } .searchForm .col10 input[type="text"], .searchForm .col10 input[type="number"], .searchForm .col10 select { width: 100%; flex: 1; min-width: 0; box-sizing: border-box; height: 44px; font-size: 1.05em; padding: 8px 10px; } .searchForm .col10 select { appearance: auto; } .searchForm .nomargin { margin-bottom: 0; } .searchForm .sf-submit { padding-left: 0; margin-top: 0.8em; justify-content: stretch; width: 100%; } .searchForm .searchBx, .searchForm .searchBx > div { width: 100%; } .searchForm .searchBx input[type="submit"] { width: 100%; padding-top: 14px; padding-bottom: 14px; font-size: 1.1em; } /* Polecane ogłoszenia — 2 kolumny na mobile */ .thumbAdvertList, .home .thumbAdvertList { display: flex; flex-wrap: wrap; margin: 0 -2px; } .home .thumbAdvertList li, .thumbAdvertList li { width: calc(50% - 12px); margin: 0 6px 16px; box-sizing: border-box; min-height: 0; } .thumbAdvertList li img, .thumbAdvertList span.border { width: 100%; height: auto; box-sizing: border-box; } .thumbAdvertList li img { aspect-ratio: 130 / 90; object-fit: cover; height: auto; border-radius: 6px; } .thumb-placeholder { display: block; width: 100%; aspect-ratio: 130 / 90; height: auto; background: #f0f0f0; border-radius: 6px; box-sizing: border-box; padding-bottom: 0; } .thumbAdvertList li strong { position: static; font-size: 14px; } } @media screen and (max-width: 480px) { /* Ciasniejszy padding na telefonach */ .header > div, .content > div, .footer > div { padding: 0 8px; } /* Breadcrumb — odstęp od headera */ #breadcrumb { margin-top: 16px; } /* Kompaktowy pasek register */ .register { margin-right: 0; } .register a { padding: .2em .5em; } /* Mniejsza czcionka w nav */ nav a { font-size: .9em; padding: .3em .4em; } nav a:first-child { padding-left: .6em; } nav input[type="text"] { width: 70px; } /* Footer: jedna kolumna */ .footer ul { width: 100%; } } /* ===== BREADCRUMB ===== */ #breadcrumb { display: block; margin: 7px 0 15px; padding: 5px 0; font-size: 1.15em; color: #555; font-weight: normal; } #breadcrumb a { color: #007db7; } #breadcrumb a:hover { color: #ffb111; } #breadcrumb a.you_are_here { color: #66BB00; } #breadcrumb a.you_are_here:hover { color: #305b17; } /* ===== FLASH MESSAGES ===== */ .flash { display: flex; align-items: center; justify-content: center; gap: .7em; padding: 14px 24px; font-size: 1.1em; font-weight: bold; text-align: center; border-top: 3px solid transparent; border-bottom: 3px solid transparent; letter-spacing: .01em; } .flash::before { font-size: 1.3em; flex-shrink: 0; line-height: 1; } .flash-notice { background: #d4f0c0; color: #1a5c00; border-color: #5aaa1e; } .flash-notice::before { content: "✓"; } .flash-alert { background: #fde8e8; color: #7b0000; border-color: #e53e3e; } .flash-alert::before { content: "✕"; } /* ===== DEVISE PAGE (bez headera/footera — logowanie i rejestracja) ===== */ .devise-page-header { background: url("/assets/img/hd-3a9dbff6.jpg") 0 -20px repeat-x; padding: 22px 0; text-align: center; } .devise-page { min-height: calc(100vh - 82px); padding: 40px 20px; box-sizing: border-box; } .devise-page-logo { display: inline-block; } .devise-page-logo img { max-width: 100%; height: auto; display: block; } .devise-page .flash { max-width: 480px; margin: 0 auto 20px; } /* ===== EKRAN POWITALNY APPKI (/farm/witaj, layout devise bez nagłówka) ===== */ /* Baner: tkanina (kafelek wycięty z hd.jpg, bez szwu) + szew z hd.jpg na dole */ .welcome-banner { background: url("/assets/img/hd-3a9dbff6.jpg") 0 100% repeat-x, #74af35 url("/assets/img/tkanina-71d58076.jpg") repeat; padding: 24px 20px 44px; color: #fff; } .welcome-banner__logo { display: block; max-width: 440px; margin: 0 auto 28px; } .welcome-banner__logo img { display: block; max-width: 100%; height: auto; } .welcome-banner h1 { font-family: Montserrat, Helvetica, Arial, sans-serif; font-size: 34px; line-height: 1.15; font-weight: 800; color: #fff; margin: 0 auto; max-width: 440px; text-shadow: 0 3px 12px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); } .devise-page.welcome-page { min-height: 0; padding: 0 0 40px; } .welcome-page .welcome-banner { margin-bottom: 24px; } .welcome-app { max-width: 480px; margin: 0 auto; padding: 0 20px; font-size: 16px; line-height: 1.5; color: #333; box-sizing: border-box; } .welcome-app__points { list-style: none; margin: 2em 0 1.4em; padding: 0; } .welcome-app__points li { position: relative; padding-left: 34px; margin-bottom: .8em; } .welcome-app__points li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: #4e8b2b; color: #fff; font-size: 13px; line-height: 22px; text-align: center; font-weight: bold; } .welcome-app__btn { display: block; min-height: 48px; padding: 13px 20px; border-radius: 40px; background: #4e8b2b; color: #fff; font-size: 1.05em; font-weight: bold; text-align: center; text-decoration: none; box-sizing: border-box; } .welcome-app__btn:hover, .welcome-app__btn:focus { background: #3f7222; color: #fff; text-decoration: none; } .welcome-app__btn--secondary, .welcome-app__btn--secondary:hover, .welcome-app__btn--secondary:focus { background: #fff; color: #2d5a1b; border: 2px solid #4e8b2b; } .welcome-app__btn--secondary:hover { background: #f1f7ec; } .welcome-app__play { margin: 2em 0 0; text-align: center; color: #555; } .welcome-app__play a { display: inline-block; margin-top: .4em; line-height: 0; } .welcome-app__login { margin: 1.6em 0 .5em; padding: 0; text-align: center; color: #555; } /* ===== DEVISE FORMS ===== */ .devise-form { max-width: 480px; margin: 0 auto; background: #fff; padding: 30px 40px 36px; border-top: 3px solid #4e8b2b; font-size: 15px; } .devise-form h2 { font-size: 1.4em; font-weight: bold; color: #373737; margin-bottom: 1.2em; padding-bottom: .6em; border-bottom: 1px solid #e8e8e8; } .devise-form .field { margin-bottom: 1em; } .devise-form label { display: block; font-size: .875em; font-weight: bold; color: #555; margin-bottom: .3em; } .devise-form input[type="email"], .devise-form input[type="password"], .devise-form input[type="text"] { width: 100%; padding: 8px 10px; border: 1px solid #ccc; font-size: 16px; color: #373737; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; } .devise-form input[type="email"]:focus, .devise-form input[type="password"]:focus, .devise-form input[type="text"]:focus { border-color: #4e8b2b; outline: 0; box-shadow: 0 0 0 2px rgba(78,139,43,.15); } .devise-form .hint { font-size: .8em; color: #888; margin-top: .2em; } .devise-form .checkbox-field { display: flex; align-items: center; gap: .5em; font-size: .9em; color: #555; margin-bottom: .5em; } .devise-form .checkbox-field input[type="checkbox"] { margin: 0; } .devise-form .checkbox-field label { display: inline; margin-bottom: 0; position: relative; top: 1px; } .devise-form .actions { margin-top: 1.5em; display: flex; align-items: center; gap: 1.2em; flex-wrap: wrap; } .devise-form .actions input[type="submit"] { background: #4e8b2b; color: #fff; font-weight: bold; font-size: 1.1em; padding: 9px 22px; border: 0; cursor: pointer; font-family: Helvetica, Arial, sans-serif; } .devise-form .actions input[type="submit"]:hover { background: #305b17; } .devise-form .links { margin-top: 1.2em; font-size: .875em; color: #666; border-top: 1px solid #f0f0f0; padding-top: .8em; } .devise-form .links a { color: #4e8b2b; text-decoration: none; } .devise-form .links a:hover { text-decoration: underline; } .devise-form .links p { margin: .25em 0; } .devise-form .oauth-buttons { display: flex; flex-direction: column; gap: .6em; margin-bottom: 1.2em; } .devise-form .oauth-buttons form { margin: 0; } .devise-form .oauth-btn { display: flex; align-items: center; justify-content: center; gap: .6em; padding: 14px 16px; font-size: 1.1em; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; cursor: pointer; box-sizing: border-box; width: 100%; border: 0; } .devise-form .oauth-btn--facebook { background: #1877f2; color: #fff; } .devise-form .oauth-btn--facebook:hover { background: #166fe5; } .devise-form .oauth-btn--google { background: #fff; color: #3c4043; border: 1px solid #dadce0; } .devise-form .oauth-btn--google:hover { background: #f8f9fa; text-decoration: none; } .sessions-table { width: 100%; border-collapse: collapse; font-size: .875em; } .sessions-table th { text-align: left; padding: .5em 1em; background: #f9f9f9; color: #666; font-weight: bold; border-bottom: 1px solid #eee; } .sessions-table td { padding: .6em 1em; border-bottom: 1px solid #f0f0f0; color: #444; vertical-align: middle; } .sessions-table tr:last-child td { border-bottom: 0; } .sessions-table__current td { background: #f6fbf2; } .session-ip { color: #999; font-size: .9em; font-family: monospace; } .session-provider { display: inline-block; padding: 2px 7px; font-size: .8em; font-weight: bold; font-family: Helvetica, Arial, sans-serif; } .session-provider--facebook { background: #1877f2; color: #fff; } .session-provider--google { background: #f1f3f4; color: #3c4043; border: 1px solid #dadce0; } .session-provider--email { background: #f0f0f0; color: #555; } .session-current-badge { display: inline-block; margin-left: .3em; padding: 1px 6px; font-size: .75em; color: #4e8b2b; border: 1px solid #4e8b2b; vertical-align: middle; } .oauth-account-badge { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: 1.2em; } .oauth-badge { display: inline-flex; align-items: center; gap: .4em; padding: 5px 10px; font-size: .825em; font-weight: bold; font-family: Helvetica, Arial, sans-serif; } .oauth-badge--facebook { background: #1877f2; color: #fff; } .oauth-badge--google { background: #f1f3f4; color: #3c4043; border: 1px solid #dadce0; } .devise-form .oauth-divider { display: flex; align-items: center; gap: .75em; margin: 0 0 1.2em; color: #999; font-size: .875em; } .devise-form .oauth-divider::before, .devise-form .oauth-divider::after { content: ""; flex: 1; border-top: 1px solid #e8e8e8; } @media screen and (max-width: 480px) { .devise-page { padding: 24px 0 40px; } .devise-form { max-width: none; padding: 24px 20px 30px; } .devise-form label { font-size: 1.0em; } } #error_explanation { background: #fff5f0; border-left: 3px solid #ff3600; padding: .8em 1em; margin-bottom: 1.2em; } #error_explanation h2 { font-size: .95em; font-weight: bold; color: #ff3600; border: none; margin-bottom: .4em; padding: 0; } #error_explanation ul { padding-left: 1.2em; } #error_explanation li { font-size: .875em; color: #cc2900; } /* Podpowiedź "masz już konto" przy rejestracji na zajęty e-mail — celowo bardzo widoczna, żeby użytkownik od razu zobaczył wyjście zamiast próbować rejestrować się w kółko tym samym adresem. */ .already-registered-hint { background: #eaf5e0; border: 2px solid #4e8b2b; border-radius: 6px; padding: 1em 1.2em; margin-bottom: 1.2em; text-align: center; } .already-registered-hint p { margin: 0 0 .7em; font-weight: bold; color: #2d5a1b; font-size: 1.05em; } .already-registered-hint__btn { display: inline-block; background: #2d5a1b; color: #fff; padding: 8px 18px; border-radius: 30px; font-weight: bold; font-size: .9em; text-decoration: none; margin: 0 .3em .3em; } .already-registered-hint__btn:hover { background: #234a15; color: #fff; text-decoration: none; } .already-registered-hint__btn--secondary { background: #fff; color: #2d5a1b; border: 2px solid #2d5a1b; padding: 6px 16px; } .already-registered-hint__btn--secondary:hover { background: #eaf5e0; color: #2d5a1b; } @media (max-width: 480px) { .already-registered-hint__btn { display: block; margin: 0 0 .5em; } } /* Baner "Moje Stado" na stronie podglądu ogłoszenia — promuje bezpłatne narzędzie do ewidencji stada wśród odwiedzających giełdę rolną. */ .offer-farm-promo { display: flex; align-items: center; gap: 1.2em; background: #eaf5e0; border: 2px solid #4e8b2b; border-radius: 8px; padding: 1.2em 1.5em; margin: 1.5em 0; } .offer-farm-promo__icon { font-size: 2.6em; line-height: 1; flex-shrink: 0; } .offer-farm-promo__text { flex: 1; min-width: 0; } .offer-farm-promo__text h3 { margin: 0 0 .3em; font-size: 1.45em; color: #2d5a1b; } .offer-farm-promo__text p { margin: 0; color: #444; font-size: 1.1em; } .offer-farm-promo__actions { display: flex; flex-direction: column; align-items: center; gap: .5em; flex-shrink: 0; } .offer-farm-promo__btn { display: inline-block; background: #2d5a1b; color: #fff; padding: 10px 22px; border-radius: 30px; font-weight: bold; font-size: 1.1em; text-decoration: none; white-space: nowrap; } .offer-farm-promo__btn:hover { background: #234a15; color: #fff; text-decoration: none; } .offer-farm-promo__link { color: #2d5a1b; font-size: 1em; font-weight: bold; text-decoration: underline; } @media (max-width: 767.98px) { .offer-farm-promo { flex-direction: column; text-align: center; } .offer-farm-promo__actions { width: 100%; } .offer-farm-promo__btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; box-sizing: border-box; text-align: center; padding: 12px 22px; } .offer-farm-promo__link { display: inline-block; padding: .4em; } } /* ===== PANEL KLIENTA ===== */ .panel-table { width: 100%; border-collapse: collapse; } .panel-table th { text-align: left; color: #555; font-weight: normal; padding: .4em 0; width: 50%; font-size: 1.05em; } .panel-table td { padding: .4em 0 .4em .5em; font-size: 1.05em; } .panel-table tr { border-bottom: 1px solid #f0f0f0; } .panel-table tr:last-child { border-bottom: none; } .offers-table { margin-top: .5em; } .offers-table thead th { font-size: .95em; color: #555; font-weight: bold; border-bottom: 2px solid #e0e0e0; padding: .4em .5em; } .offers-table tbody td { padding: .6em .5em; border-bottom: 1px solid #f0f0f0; vertical-align: middle; } .offers-table .offer-row-inactive td { opacity: .65; } .link-btn { background: none; border: none; padding: 0; cursor: pointer; color: #007db7; font-size: inherit; font-family: inherit; text-decoration: none; } .link-btn:hover { text-decoration: underline; } .link-btn-danger { color: #cc2900; } .offers-table td:last-child form { display: block; text-align: right; } .form-section { margin-bottom: 1.2em; } .form-row { margin-bottom: 1em; } .form-row label, .form-label { display: block; color: #444; font-size: .92em; font-weight: 500; margin-bottom: .3em; } .form-required { color: #c00; } .form-hint { color: #888; font-size: .88em; margin: .4em 0 0; } .form-input { width: 100%; padding: .5em .7em; border: 1px solid #ccc; border-radius: 4px; font-size: 1em; box-sizing: border-box; background: #fff; color: #333; transition: border-color .15s, box-shadow .15s; } .form-input:hover { border-color: #aaa; } .form-input:focus { border-color: #007db7; outline: none; box-shadow: 0 0 0 3px rgba(0,125,183,.12); } .form-input[disabled], .form-input[readonly] { background: #f5f5f5; color: #888; cursor: not-allowed; } textarea.form-input { resize: vertical; line-height: 1.5; } select.form-input { cursor: pointer; } .photo-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1em; } .photo-thumb-item { position: relative; display: inline-block; cursor: grab; border-radius: 4px; } .photo-thumb-item.dragging { opacity: .4; cursor: grabbing; } .photo-thumb-item.drag-over { outline: 2px dashed #3a7d00; outline-offset: 2px; } .photo-thumb-controls { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 3px; } .photo-thumb-rotate { background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; line-height: 20px; text-align: center; cursor: pointer; padding: 0; font-size: 14px; } .photo-thumb-rotate:hover { background: rgba(0,80,0,.75); } .photo-thumb-rotate:disabled { opacity: .5; cursor: default; } .photo-thumb-delete { background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; line-height: 20px; text-align: center; cursor: pointer; padding: 0; font-size: 13px; font-weight: bold; } .photo-thumb-delete:hover { background: rgba(180,0,0,.75); } .simple-form .form-field { margin-bottom:0.9em } .simple-form .form-field label { display:block; font-size:1em; color:#373737; margin-bottom:3px } .simple-form .form-field input[type="text"], .simple-form .form-field input[type="email"], .simple-form .form-field input[type="tel"], .simple-form .form-field textarea { width:100%; box-sizing:border-box; padding:6px 8px; font-size:1em; border:1px solid #bbb; border-radius:6px; color:#555; background:#fff; box-shadow:inset 1px 1px 2px rgba(67,66,61,.4); } .simple-form .form-field input:focus, .simple-form .form-field textarea:focus { border-color:#FFB111; outline:0; box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(255,177,17,.5); } /* ===== DASHBOARD ===== */ .dashboard { max-width:1100px; font-size:16px } .dashboard-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5em; padding-bottom:1em; border-bottom:2px solid #e8e3d0; } .dashboard-header h1 { font-size:1.8em; margin:0 0 .2em } .dashboard-header p { margin:0; color:#888; font-size:.95em } .dashboard-stats { display:flex; gap:1em; margin-bottom:1.8em; flex-wrap:wrap; } .stat-card { flex:1; min-width:140px; border-radius:8px; padding:1em 1.2em; border:1px solid transparent; position:relative; overflow:hidden; } .stat-card--green { background:#eef7ee; border-color:#b8ddb8 } .stat-card--gray { background:#f4f4f4; border-color:#ddd } .stat-card--blue { background:#eef2f9; border-color:#bbd0ee } .stat-card--orange { background:#fff8ec; border-color:#f5d99a } .stat-card__number { font-size:2.2em; font-weight:700; line-height:1; color:#333; margin-bottom:.2em } .stat-card--green .stat-card__number { color:#2d7a2d } .stat-card--blue .stat-card__number { color:#2a5a9a } .stat-card--orange .stat-card__number { color:#b07000 } .stat-card__label { font-size:.85em; color:#666; margin-bottom:.5em } .stat-card__link { font-size:.85em; color:#007db7; text-decoration:none; background:none; border:none; cursor:pointer; padding:0 } .stat-card__link:hover { text-decoration:underline } .dashboard-grid { display:flex; gap:1.5em; align-items:flex-start; } .dashboard-col--main { flex:2 } .dashboard-col--side { flex:1; min-width:240px } .dashboard-section { background:#fff; border:1px solid #ddd; border-radius:8px; margin-bottom:1.2em; overflow:hidden; } .dashboard-section__head { display:flex; align-items:center; justify-content:space-between; padding:.7em 1.1em; background:#f7f5e9; border-bottom:1px solid #e0dcc8; } .dashboard-section__head h2 { margin:0; font-size:1.05em; color:#444 } .dashboard-section__head a { font-size:.88em; color:#007db7; text-decoration:none } .dashboard-section__head a:hover { text-decoration:underline } .dashboard-offers-table { width:100%; border-collapse:collapse; font-size:.95em } .dashboard-offers-table th { text-align:left; padding:.55em 1em; font-size:.82em; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.04em; background:#fafafa; border-bottom:2px solid #eee; } .dashboard-offers-table td { padding:.65em 1em; border-bottom:1px solid #f0f0f0; vertical-align:middle } .dashboard-offers-table tr:last-child td { border-bottom:none } .dashboard-offers-table tr:hover td { background:#fafff8 } .dashboard-offers-table__title td, .dashboard-offers-table__title { display:flex; align-items:center; gap:.7em } .dashboard-offers-table__title div { display:flex; flex-direction:column; gap:.1em } .dashboard-offers-table__title div strong { font-size:.95em } .dashboard-offers-table__title div span { font-size:.82em; color:#999 } .dashboard-offers-table__title a { color:#333; text-decoration:none } .dashboard-offers-table__title a:hover { color:#007db7 } .dashboard-offers-table__date { color:#999; font-size:.88em; white-space:nowrap } .dashboard-offers-table__actions a { font-size:.88em; color:#007db7 } .dashboard-status { display:inline-block; padding:.2em .6em; border-radius:12px; font-size:.8em; font-weight:600; } .dashboard-status--active { background:#d4edda; color:#1a6b2a } .dashboard-status--draft { background:#e2e3e5; color:#555 } .dashboard-status--expired { background:#fdecea; color:#a02020 } .dashboard-status--removed { background:#fdecea; color:#a02020 } .dashboard-dl { margin:0; padding:.6em 1.1em 1em } .dashboard-dl dt { font-size:.82em; color:#888; margin-top:.6em; font-weight:600; text-transform:uppercase; letter-spacing:.03em } .dashboard-dl dd { margin:0; color:#333; font-size:.95em } .dashboard-profile-card { display:flex; align-items:flex-start; gap:.8em; padding:.8em 1.1em 0; } .dashboard-profile-card div { display:flex; flex-direction:column; gap:.2em } .dashboard-profile-card strong { font-size:1em } .dashboard-profile-card span { color:#777 } .dashboard-empty { padding:1.2em 1.1em; color:#888 } .dashboard-empty p { margin:0 0 .8em } @media (max-width:700px) { .dashboard-stats { flex-direction:column } .dashboard-grid { flex-direction:column } .dashboard-col--side { min-width:0 } .dashboard-header { flex-direction:column; align-items:flex-start; gap:.8em } /* Wiersz stada: nazwa + rola + statystyki, a obok "Przełącz". W poziomie na wąskim ekranie nazwa stada (white-space:nowrap) rozpychała wiersz i wypychała przycisk "Przełącz" poza widoczny obszar. Na mobile układamy pionowo — przycisk pod spodem. */ .dashboard-farm-row { flex-direction:column; align-items:stretch; gap:.5em } .dashboard-farm-row__info strong { white-space:normal } .dashboard-farm-row .btn { align-self:flex-start } } .dashboard-farm-card { padding:.6em 1.1em .8em } .dashboard-farm-card + .dashboard-farm-card { border-top:1px solid #f0f0f0; margin-top:.2em; padding-top:.8em } .dashboard-farm-card__meta { display:flex; align-items:center; gap:.6em; flex-wrap:wrap } .dashboard-farm-card__meta strong { font-size:1em; color:#333 } .dashboard-farm-role { font-size:.75em; padding:.15em .5em; border-radius:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em } .dashboard-farm-role--owner { background:#d4edda; color:#1a6b2a } .dashboard-farm-role--editor { background:#d0e8ff; color:#0d4f8a } .dashboard-farm-role--guest { background:#e2e3e5; color:#555 } .dashboard-farm-herds { margin:.5em 0 0; padding:0 0 0 1em; font-size:.88em; color:#555; list-style:disc } .dashboard-farm-herds li { margin-bottom:.15em } .dashboard-farm-herds span { color:#999 } .dashboard-section--farm { margin-bottom:1.2em } .dashboard-farm-list { display:flex; flex-wrap:wrap; gap:0; padding:.2em 0 } .dashboard-farm-list .dashboard-farm-card { flex:1 1 280px; border-right:1px solid #f0f0f0; padding:.8em 1.2em } .dashboard-farm-list .dashboard-farm-card:last-child { border-right:none } .dashboard-farm-list .dashboard-farm-card + .dashboard-farm-card { border-top:none; padding-top:.8em; margin-top:0 } .dashboard-farm-row { display:flex; align-items:center; justify-content:space-between; padding:.7em 1.1em; gap:.8em } .dashboard-farm-row + .dashboard-farm-row { border-top:1px solid #f4f4f4 } .dashboard-farm-row__info { display:flex; align-items:center; gap:.5em; flex-wrap:wrap; flex:1; min-width:0 } .dashboard-farm-row__info strong { color:#333; white-space:nowrap } .dashboard-farm-row__stats { color:#888; font-size:.88em; white-space:nowrap } /* ===================================================================== FEATURED BOX (.featured-bx) — "design language" stron publicznych. Wzorowane 1:1 na boksie "Handel bydłem" z /etap3/projekt (index.html + css/common.css) — sprite.png jest tym samym plikiem co w etap3, więc ikony pasują bez zmian. Pełny opis wzorca: PAMIEC_PROJEKTU.md → "Branding i wzorce UI (strony publiczne / site/*)". Zwykły ".bx" (patrz wyżej) NIE ma tła/obramowania — wtapia się w stronę, używany do list nawigacyjnych w boczku (kategorie, filtry). ".featured-bx" to modyfikator, który wyróżnia JEDNĄ konkretną treść jako białą, uniesioną kartę — używać oszczędnie, dla treści, którą chcemy wyróżnić (np. box promocyjny z listą kategorii + CTA), nie dla każdego boksu na stronie. ===================================================================== */ .featured-bx { background:#fff; text-align:center; padding:0 18px; margin:0 0 1.5em; border-radius:8px; box-shadow:0 1px 2px 0 rgba(0,0,0,.15); } .featured-bx header { text-align:left } .featured-bx header h3 { padding:0 } .featured-bx .bd { padding-top:0 } /* Modyfikator ".bx" dla treści innej niż lista linków (np. karta z ceną) — ta sama "uniesiona karta" co .featured-bx, ale bez centrowania tekstu i bez założeń o .bull-list wewnątrz. */ .bx--elevated { background:#fff; padding:0 18px; border-radius:8px; box-shadow:0 1px 2px 0 rgba(0,0,0,.15) } /* ===== LISTA Z ODZNAKĄ-STRZAŁKĄ PO PRAWEJ (.bull-list) ===== Używać wewnątrz .featured-bx dla wyróżnionych linków nawigacyjnych (patrz też .category-list poniżej — strzałka po LEWEJ — dla zwykłych, niewyróżnionych list w boczku). */ .bull-list { margin:0; text-align:left } .bull-list a { font-size:1.2em; font-weight:bold; display:block; padding:10px 0; position:relative; color:#555 } .bull-list li:last-child a { border-bottom:0 } .bull-list a:after { content:""; display:block; position:absolute; top:50%; right:0; margin-top:-10px; width:20px; height:20px; border-radius:10px; box-shadow:0 1px 0 0 rgba(0,0,0,.4); background-color:#9dc95b; background-image:url("/assets/img/sprite-ad04ee84.png"), linear-gradient(to bottom, #9dc95b 0%, #6faf3e 100%); background-repeat:no-repeat; background-position:6px -118px; } .bull-list a:hover { background:linear-gradient(to bottom, #f0f0f0 0%, #eaeaea 100%); border-radius:10px } .bull-list__price { display:block; font-size:.65em; font-weight:normal; color:#888; margin-top:.15em } .featured-bx .bull-list li { border-bottom:1px dotted #dbdbdb } .featured-bx .bull-list li:last-child { border:none } .featured-bx .bull-list li a { border:none; margin:3px 0; padding:7px 30px 7px 15px; position:relative; left:-14px } .featured-bx .bull-list a:after { right:15px } .featured-bx .bull-list li a:hover { background:#eaefe6; border-radius:20px } .featured-bx .btn-wrap { background:url("/assets/img/line_hr-860c716b.png") 0 0 repeat-x; padding:15px 0 5px; margin-top:.5em } /* ===== CENY BYDŁA (/ceny-bydla) ===== */ /* Boczek + treść na /ceny-bydla/:category. Desktop: bez zmian —