/* wagen2 2.0.0: generisano iz _design (build_theme2.py), ne uređivati ručno */ /* ---- tokens.css ---- */ /* Wagen Group osnove v3 (novi početak 12.11.2026). E-shop, svijetlo, Inter, statusi u iOS sistemskim bojama. */ :root { /* marka */ --lime: #B4D82E; /* glavna radnja (Dodaj / Naruči / Pronađi) */ --lime-hover: #A6C928; --lime-soft: #F1F7DC; /* neutralne (sve iz Wagen asfalta) */ --ink: #111312; /* tekst, tamna dugmad */ --ink-hover: #2A2F2C; --muted: #5B635E; /* sekundarni tekst, 6.0:1 na bijelom */ --line: #E4E7E3; --line-strong: #C9CEC9; --bg: #FFFFFF; --bg-2: #F5F6F4; /* pozadina sekcija i slika */ /* statusi: iOS sistemske boje (svjetlosni signal) + tamna verzija za tekst */ --ok: #34C759; --ok-text: #1C7A35; --ok-bg: #E9F8EE; --warn: #FFCC00; --warn-text: #7A5C00; --warn-bg: #FFF7D6; --alert: #FF9500; --alert-text: #8A4B00;--alert-bg: #FFF1DE; --bad: #FF3B30; --bad-text: #B3261E; --bad-bg: #FFECEB; --info: #007AFF; --info-text: #0058B8; --info-bg: #E8F1FF; /* tipografija */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --t-hero: clamp(2.25rem, 4vw, 3.5rem); --t-h1: clamp(1.75rem, 3vw, 2.25rem); --t-h2: 1.5rem; --t-h3: 1.125rem; --t-body: 1rem; --t-sm: .875rem; --t-xs: .75rem; /* razmaci (8 px) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; /* zaobljenja: umjereno */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --tap: 48px; --focus: 0 0 0 3px rgba(0, 122, 255, .35); /* iOS plava za fokus tastature */ } *:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* dugmad */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s5); border-radius: var(--r-sm); border: 1px solid transparent; font: 600 var(--t-body)/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; } .btn--primary { background: var(--lime); color: var(--ink); } .btn--primary:hover { background: var(--lime-hover); } .btn--dark { background: var(--ink); color: #fff; } .btn--dark:hover { background: var(--ink-hover); } .btn--outline { background: #fff; color: var(--ink); border-color: var(--line-strong); } .btn--outline:hover { border-color: var(--ink); } .btn--sm { min-height: 40px; padding: 0 var(--s4); font-size: var(--t-sm); } /* status: tačka koja "svijetli" (statičan sjaj, bez animacije) + čitljiv tekst */ .status { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: var(--r-xs); font: 600 var(--t-xs)/1 var(--font); } .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent), 0 0 8px currentColor; } .status--ok { color: var(--ok-text); background: var(--ok-bg); } .status--ok::before { background: var(--ok); color: var(--ok); } .status--warn { color: var(--warn-text); background: var(--warn-bg); } .status--warn::before { background: var(--warn); color: var(--warn); } .status--alert { color: var(--alert-text); background: var(--alert-bg); } .status--alert::before { background: var(--alert); color: var(--alert); } .status--bad { color: var(--bad-text); background: var(--bad-bg); } .status--bad::before { background: var(--bad); color: var(--bad); } .status--info { color: var(--info-text); background: var(--info-bg); } .status--info::before { background: var(--info); color: var(--info); } /* ---- components.css ---- */ /* Zajedničke komponente (pretraga, kartica artikla, kategorija). Koriste ../tokens/tokens.css */ /* pretraga */ .search { display: flex; max-width: 640px; height: 52px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; } .search input { flex: 1; min-width: 0; border: 0; padding: 0 var(--s4); font: inherit; } .search input:focus-visible { outline: none; } .search:focus-within { border-color: var(--ink); box-shadow: var(--focus); } .search button { border: 0; padding: 0 var(--s5); background: var(--lime); font: 700 var(--t-sm)/1 var(--font); cursor: pointer; } .search button:hover { background: var(--lime-hover); } /* kartica artikla (e-shop) */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s4); } .card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: inherit; background: #fff; } .card:hover { border-color: var(--line-strong); } .card__img { aspect-ratio: 1 / 1; background: var(--bg-2); } .card__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .card__b { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; } .card__b .status { align-self: flex-start; } .card__meta { font-size: var(--t-xs); color: var(--muted); font-weight: 500; } .card__t { font-weight: 600; font-size: .95rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card__go { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); } .card__go svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .card:hover .card__go { background: var(--lime); border-color: var(--lime); } .card__f { margin-top: auto; display: flex; align-items: end; justify-content: space-between; gap: var(--s2); padding-top: var(--s2); } .card__p { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .card__p small { font-size: var(--t-xs); font-weight: 500; color: var(--muted); display: block; letter-spacing: 0; } .card__ask { font-size: var(--t-sm); font-weight: 700; } /* kategorija bez generičke ikone: prava fotografija dijela */ .cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); } .cat { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: inherit; } .cat:hover { border-color: var(--line-strong); background: var(--bg-2); } .cat img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); background: var(--bg-2); } .cat b { display: block; font-size: var(--t-sm); } .cat span { font-size: var(--t-xs); color: var(--muted); } /* ---- home.css ---- */ /* Početna (novi početak): e-shop, svijetlo. Bez animacija, bez podvlačenja na hover. */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 400 var(--t-body)/1.6 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, p { margin: 0; } ul { list-style: none; margin: 0; padding: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, select { font: inherit; color: inherit; } svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .wrap { width: min(1280px, 100% - 32px); margin-inline: auto; } .num { font-variant-numeric: tabular-nums; } .sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip:focus { position: fixed; top: 12px; left: 12px; z-index: 99; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--r-sm); } /* gornja traka */ .topbar { background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: var(--t-xs); color: var(--muted); } .topbar__in { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 36px; } .dot-sep { margin-inline: 6px; } .topbar__r { display: none; align-items: center; gap: var(--s4); font-weight: 600; color: var(--ink); } .topbar__r .status { height: 22px; } .topbar__r a:hover { color: var(--muted); } @media (min-width: 900px) { .topbar__r { display: flex; } } /* zaglavlje */ .head__in { display: grid; grid-template-columns: 1fr auto; gap: var(--s3) var(--s5); align-items: center; padding-block: var(--s4); } .logo img { height: 30px; width: auto; } .head__search { grid-column: 1 / -1; max-width: none; } .head__act { display: flex; align-items: center; gap: var(--s4); grid-row: 1; grid-column: 2; } .head__tel { display: none; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; } .head__tel small { font-size: var(--t-xs); font-weight: 500; color: var(--muted); } .head__tel:hover { color: var(--muted); } @media (min-width: 1024px) { .head__in { grid-template-columns: auto 1fr auto; padding-block: 20px; } .logo img { height: 36px; } .head__search { grid-column: auto; } .head__act { grid-row: auto; grid-column: auto; } .head__tel { display: flex; } } /* kategorije u zaglavlju (e-shop) */ .catnav { border-block: 1px solid var(--line); } .catnav__list { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; padding-block: 6px; } .catnav__list::-webkit-scrollbar { display: none; } .catnav__list a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 var(--s3); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; } .catnav__list a:hover { background: var(--bg-2); } .catnav__all { background: var(--ink); color: #fff; } .catnav__all:hover { background: var(--ink-hover) !important; } .catnav__all .num { font-size: var(--t-xs); font-weight: 600; color: var(--lime); } .catnav__sep { margin-left: auto; } /* HERO: kategorije lijevo + slajder desno */ .hero { display: grid; gap: var(--s4); margin-top: var(--s5); } .hero > * { min-width: 0; } @media (min-width: 1024px) { .hero { grid-template-columns: 300px 1fr; } } /* sve kategorije: slika + naziv + broj. Ritam: red 42 px, slika 40 px, razmak 12 px, poravnanje na 8 px mrežu */ .side { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; order: 2; } @media (min-width: 1024px) { .side { order: 0; } } .side__head { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s4) var(--s4) var(--s3); margin: 0 var(--s2); border-bottom: 1px solid var(--line); } .side__head h2 { font-size: var(--t-body); font-weight: 700; } .side__head .num { font-size: var(--t-xs); font-weight: 600; color: var(--muted); } .side__list { padding: var(--s2); display: grid; gap: 2px; } .side__list a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--s3); min-height: 42px; padding: 1px var(--s2); border-radius: var(--r-sm); font-size: .9375rem; font-weight: 500; line-height: 1.25; } .side__list a:hover { background: var(--bg-2); } .side__img { width: 40px; height: 40px; object-fit: contain; } .side__name { min-width: 0; } .side__list .num { font-size: var(--t-xs); color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; } .side__list a:hover .num { color: var(--ink); } .side__all { display: flex; justify-content: space-between; align-items: center; min-height: var(--tap); margin: auto var(--s3) var(--s3); padding: 0 var(--s4); border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: .9375rem; font-weight: 600; } .side__all:hover { background: var(--ink-hover); } .side__all svg { width: 16px; height: 16px; stroke: var(--lime); } @media (min-width: 600px) and (max-width: 1023px) { .side__list { grid-template-columns: 1fr 1fr; column-gap: var(--s3); } } /* slajder na Wagen zelenom gradijentu */ .stage { position: relative; display: grid; grid-template-rows: 1fr auto; border-radius: var(--r-md); overflow: hidden; color: var(--ink); background: #9CC21F; } .slide:not(.slide--blob) { background: radial-gradient(120% 90% at 85% 40%, #D9EE7E 0%, rgba(217, 238, 126, 0) 60%), linear-gradient(135deg, #C4E345 0%, #B4D82E 45%, #9CC21F 100%); } /* svi slajdovi u istoj ćeliji; prelaz: pretapanje + blago klizanje teksta i slike (samo pri promjeni slajda, nema hover animacija) */ .slide { grid-row: 1 / span 2; grid-column: 1; position: relative; display: grid; min-height: 476px; padding-bottom: 64px; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; } .slide.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; } .slide .slide__txt > * { transform: translateY(10px); transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .slide .slide__img img { transform: translateX(28px) scale(.98); transition: transform .8s cubic-bezier(.2, .7, .2, 1); } .slide.is-on .slide__txt > *, .slide.is-on .slide__img img { transform: none; } .slide.is-on .slide__txt > :nth-child(2) { transition-delay: .04s; } .slide.is-on .slide__txt > :nth-child(3) { transition-delay: .08s; } .slide.is-on .slide__txt > :nth-child(4) { transition-delay: .12s; } @media (prefers-reduced-motion: reduce) { .slide, .slide.is-on { transition: opacity .2s ease, visibility 0s; } .slide .slide__txt > *, .slide .slide__img img { transform: none; transition: none; } } @media (min-width: 720px) { .slide { grid-template-columns: 1fr 1.1fr; align-items: center; } } .slide__txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); padding: var(--s6) var(--s5) var(--s4); } @media (min-width: 720px) { .slide__txt { padding: var(--s7) var(--s4) var(--s6) var(--s7); } } .stage .status { background: rgba(255, 255, 255, .85); } .slide h1, .slide h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; max-width: 16ch; } .slide p { font-size: 1.0625rem; max-width: 40ch; color: #2C3410; } .slide__act { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); } .btn--light { background: #fff; color: var(--ink); } .btn--light:hover { background: rgba(255, 255, 255, .8); } .slide__img { display: flex; align-items: center; justify-content: center; padding: var(--s4) var(--s5); } .slide__img img { width: 100%; max-height: 360px; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(17, 19, 18, .22)); } .slide--blob .slide__img { align-self: stretch; padding: 0; min-height: 280px; } .slide--blob .slide__img img:not(.ship img) { position: absolute; left: -2%; top: 3%; height: 94%; width: auto; max-width: none; max-height: none; } /* slajd 2: široka slika (set dijelova), lijevo poravnata, desno odsječena */ #sl-2 .slide__img img:not(.ship img) { top: 12%; height: 76%; } @media (max-width: 719px) { .slide--blob .slide__img img:not(.ship img) { left: 4%; top: 0; height: 100%; } } .stage__bar { grid-row: 2; grid-column: 1; position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3); } .tabs { display: flex; gap: 4px; padding: 4px; background: rgba(255, 255, 255, .45); border-radius: var(--r-sm); min-width: 0; flex: 1; } @media (min-width: 720px) { .tabs { flex: 0 1 auto; } } .tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 var(--s4); border: 0; border-radius: 6px; background: none; font-size: var(--t-sm); font-weight: 600; color: #2C3410; cursor: pointer; white-space: nowrap; } .tab span { font-size: var(--t-xs); font-variant-numeric: tabular-nums; opacity: .6; } .tab:hover { background: rgba(255, 255, 255, .5); } .tab[aria-selected="true"] { background: var(--ink); color: #fff; } .tab[aria-selected="true"] span { color: var(--lime); opacity: 1; } .arrows { display: flex; gap: var(--s2); } .navbtn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: rgba(255, 255, 255, .85); cursor: pointer; } .navbtn:hover { background: #fff; } .navbtn svg { width: 16px; height: 16px; } @media (max-width: 599px) { .arrows { display: none; } .tab { padding: 0 var(--s2); } .tab span { display: none; } .slide__act .btn { flex: 1 1 auto; } } /* pretraga po vozilu */ .finder { margin-top: var(--s4); display: grid; gap: var(--s4); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-md); } .finder__head h2 { font-size: var(--t-h3); font-weight: 700; } .finder__head p { margin-top: 4px; font-size: var(--t-sm); color: var(--muted); } .finder__row { display: grid; gap: var(--s3); align-items: end; } @media (min-width: 640px) { .finder__row { grid-template-columns: 1fr 1fr; } .finder__row > .btn { grid-column: 1 / -1; } } @media (min-width: 1024px) { .finder__row { grid-template-columns: 1fr 1fr 150px 1.3fr auto; } .finder__row > .btn { grid-column: auto; height: var(--tap); padding-inline: var(--s6, 28px); } } .fld { display: flex; flex-direction: column; gap: 6px; } .fld > span { font-size: var(--t-xs); font-weight: 600; color: var(--muted); } .fld input, .fld select { height: var(--tap); width: 100%; padding: 0 var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; font-size: var(--t-body); -webkit-appearance: none; appearance: none; } .fld select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23111312' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px; padding-right: 36px; } .fld select:disabled { color: var(--muted); background-color: var(--bg-2); cursor: not-allowed; } .fld input:focus-visible, .fld select:focus-visible { border-color: var(--ink); outline: none; box-shadow: var(--focus); } .trust { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); } @media (min-width: 840px) { .trust { grid-template-columns: repeat(4, 1fr); } .trust li + li { border-left: 1px solid var(--line); } } @media (max-width: 839px) { .trust li:nth-child(even) { border-left: 1px solid var(--line); } .trust li:nth-child(n+3) { border-top: 1px solid var(--line); } } .trust li { padding: var(--s4) var(--s5); display: flex; flex-direction: column; } .trust b { font-size: var(--t-sm); } .trust span { font-size: var(--t-xs); color: var(--muted); } /* blokovi */ .block { padding-top: var(--s8); } .block__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s3); margin-bottom: var(--s5); } .block__head h2 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; } .block__head p { color: var(--muted); margin-top: 4px; } .more { display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; } .more svg { width: 16px; height: 16px; } .more:hover { border-color: var(--line-strong); background: var(--bg-2); } .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 840px) { .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } @media (min-width: 840px) { .grid { grid-template-columns: repeat(4, 1fr); gap: var(--s4); } } /* marke: logo + naziv + broj; bez logotipa ostaje naziv u istom okviru */ /* marke: top 6 kartice s modelima + zid ostalih logotipa */ .btop { display: grid; gap: var(--s3); } @media (min-width: 600px) { .btop { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .btop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } } .bcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; } .bcard:hover { border-color: var(--line-strong); } .bcard__main { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); min-height: 76px; } .bcard__main:hover .card__go { background: var(--lime); border-color: var(--lime); } .bcard__t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .bcard__mods { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s4) var(--s4); } .bcard__mods a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; } .bcard__mods a:hover { border-color: var(--ink); } .blogo { --a: 1500; flex: none; display: grid; place-items: center; width: 88px; height: 44px; } .blogo--s { --a: 900; width: 72px; height: 34px; } .blogo img { display: block; object-fit: contain; max-width: 100%; max-height: 100%; } .bwall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--line); } @media (min-width: 600px) { .bwall { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .bwall { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .bwall li { background: #fff; } .bwall__a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s4) var(--s2); min-height: 112px; justify-content: center; text-align: center; } .bwall__a:hover { background: var(--bg-2); } .bwall__a .blogo { margin-bottom: var(--s1); } .bmore { display: none; } @media (max-width: 599px) { .bwall:not(.is-open) { display: none; } .bmore:not([hidden]) { display: flex; width: 100%; min-height: 52px; margin-top: var(--s3); justify-content: center; } } .blogo img, .model__b img { filter: grayscale(1); opacity: .7; } .bcard:hover .blogo img, .bcard__main:focus-visible .blogo img, .bwall__a:hover .blogo img, .bwall__a:focus-visible .blogo img, .model:hover .model__b img, .model:focus-visible .model__b img { filter: none; opacity: 1; } @media (hover: none) { .blogo img, .model__b img { filter: none; opacity: 1; } } .brand__txt { font-size: var(--t-xs); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; padding: 6px 8px; border: 1.5px solid var(--ink); border-radius: var(--r-xs); max-width: 100%; } .brand__n { font-weight: 700; font-size: .9375rem; line-height: 1.25; } .brand__c { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; } /* promo otkup */ .promo { display: grid; background: var(--lime-soft); border-radius: var(--r-md); overflow: hidden; } @media (min-width: 840px) { .promo { grid-template-columns: 1.1fr 1fr; } } .promo__txt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s4); padding: var(--s6) var(--s5); } @media (min-width: 840px) { .promo__txt { padding: var(--s7); } } .promo h2 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; max-width: 18ch; text-wrap: balance; } .promo p { color: var(--muted); max-width: 46ch; } .promo__img { min-height: 240px; padding: var(--s4); } .promo__img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); } /* podnožje */ .foot { margin-top: var(--s8); background: var(--ink); color: rgba(255, 255, 255, .72); font-size: var(--t-sm); padding-top: var(--s7); } .foot a { color: #fff; } .foot a:hover { color: var(--lime); } .foot__top { display: grid; gap: var(--s6); padding-bottom: var(--s6); } @media (min-width: 1024px) { .foot__top { grid-template-columns: minmax(260px, 1fr) 2.6fr; gap: var(--s7); } } .foot__logo { height: 30px; width: auto; filter: brightness(0) invert(1); } .foot__lead { margin-top: var(--s4); max-width: 34ch; line-height: 1.5; } .foot__nap { display: grid; gap: 6px; margin-top: var(--s4); font-style: normal; } .foot__nap b { color: #fff; } .foot__ch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s4); max-width: 320px; } .foot__ch .btn { justify-content: center; gap: 8px; min-height: 44px; } .foot__ch .btn:hover { color: #fff; } .foot__nav { display: grid; gap: 0 var(--s5); } @media (min-width: 600px) { .foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } } @media (min-width: 1024px) { .foot__nav { grid-template-columns: 1.3fr 1fr 1fr .9fr; } } .foot__col summary { list-style: none; cursor: default; } .foot__col summary::-webkit-details-marker { display: none; } .foot__col h2 { color: #fff; font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--s3); } .foot__col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .foot__col li a { display: inline-block; padding: 4px 0; } .foot__area { padding-block: var(--s4); border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--t-xs); line-height: 1.6; } .foot__area b { color: #fff; font-weight: 600; } .foot__end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5); border-top: 1px solid rgba(255, 255, 255, .12); padding-block: var(--s4); font-size: var(--t-xs); } .foot__legal { display: flex; flex-wrap: wrap; gap: var(--s4); } /* telefon: kolone su harmonika (sadrzaj ostaje u HTML-u za pretrazivace), redovi >= 48px */ @media (max-width: 599px) { .foot__col { border-top: 1px solid rgba(255, 255, 255, .12); } .foot__col summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; } .foot__col summary::after { content: "+"; color: var(--lime); font-size: 1.25rem; font-weight: 600; } .foot__col[open] summary::after { content: "\2013"; } .foot__col h2 { margin: 0; } .foot__col ul { padding-bottom: var(--s3); } .foot__col li a { padding: 10px 0; } .foot__ch { max-width: none; } .foot__ch .btn { min-height: 52px; } .foot__legal a { padding: 10px 0; } } /* SLAJD U STILU OGLASA: tamna pozadina + organske lime mrlje (pokušaj 1, slajd 1) */ .slide--blob { color: var(--ink); background: radial-gradient(50% 72% at 70% 56%, #E6F69E 0%, #CFEA5F 26%, rgba(180, 216, 46, 0) 70%), linear-gradient(160deg, #BEE03A 0%, #B4D82E 50%, #A2C523 100%); } .slide--blob em { font-style: normal; } .slide--blob .chip { background: var(--ink); color: #fff; } .slide--blob .btn--primary { background: var(--ink); color: #fff; } .slide--blob .btn--primary:hover { background: var(--ink-hover); } .slide--blob .slide__txt, .slide--blob .slide__img { position: relative; z-index: 1; } .chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-xs); background: var(--lime); color: var(--ink); font-size: var(--t-xs); font-weight: 700; } .slide--blob p { color: #2C3410; } .btn--ghostlight { background: rgba(255, 255, 255, .55); color: var(--ink); border-color: transparent; } .btn--ghostlight:hover { background: #fff; } .slide__contact { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s2); font-size: var(--t-sm); } .slide__contact b { color: var(--ink); font-weight: 700; } .slide__contact span { color: #3A4515; } .slide--blob .slide__img { position: relative; } /* blagi sjaj iza dijela umjesto mrlja */ .slide--blob .slide__img::before { content: ""; position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 100%); filter: blur(10px); pointer-events: none; } .slide--blob .slide__img img { position: relative; z-index: 1; } .slide--blob .slide__img img { filter: drop-shadow(0 24px 22px rgba(40, 55, 5, .35)); } .stamp { position: absolute; left: 6%; top: 8%; z-index: 2; width: 92px; height: 92px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: #121510; color: #fff; font-size: 11px; line-height: 1.25; box-shadow: 0 0 0 3px var(--lime); } .stamp b { display: block; color: var(--lime); font-size: 13px; } .tag { position: absolute; right: 8%; bottom: 10%; z-index: 2; padding: 8px 12px; border-radius: var(--r-sm); background: #121510; color: #fff; font-size: var(--t-sm); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(180, 216, 46, .5); } @media (max-width: 719px) { .stamp { width: 72px; height: 72px; font-size: 10px; } } /* traka slajdera prilagođena tamnom slajdu */ .stage[data-theme="dark"] .tabs { background: rgba(255, 255, 255, .08); } .stage[data-theme="dark"] .tab { color: rgba(255, 255, 255, .7); } .stage[data-theme="dark"] .tab:hover { background: rgba(255, 255, 255, .08); } .stage[data-theme="dark"] .tab[aria-selected="true"] { background: var(--lime); color: var(--ink); } .stage[data-theme="dark"] .tab[aria-selected="true"] span { color: var(--ink); } .stage[data-theme="dark"] .navbtn { background: rgba(255, 255, 255, .1); color: #fff; } .stage[data-theme="dark"] .navbtn:hover { background: rgba(255, 255, 255, .18); } /* kartica dostave (EuroExpress) na slajdu */ .ship { position: absolute; right: 6%; bottom: 8%; z-index: 2; display: flex; align-items: center; gap: var(--s3); padding: 10px 14px; border-radius: var(--r-sm); background: #fff; color: var(--ink); box-shadow: 0 8px 24px rgba(40, 55, 5, .18); } .ship img { height: 24px !important; width: auto !important; max-width: none; max-height: none; flex: none; filter: none !important; transform: none !important; } .ship span { display: flex; flex-direction: column; white-space: nowrap; font-size: var(--t-xs); line-height: 1.3; color: var(--muted); padding-left: var(--s3); border-left: 1px solid var(--line); } .ship b { color: var(--ink); font-size: var(--t-sm); } @media (max-width: 719px) { .ship { right: 4%; bottom: 4%; padding: 8px 10px; } .ship img { height: 18px; } } .ship--text span { padding-left: 0; border-left: 0; } /* slajd 3: ilustracija novca, manje odsječena */ #sl-3 .slide__img img:not(.ship img) { top: 14%; height: 72%; left: 0; filter: drop-shadow(0 26px 22px rgba(30, 42, 4, .45)); } .ship--icon img { height: 40px !important; } /* MOBILNI RAZMACI: dodirne površine >= 44 px, najmanje 12 do 16 px između zasebnih radnji */ @media (max-width: 719px) { .wrap { width: calc(100% - 32px); } .head__in { padding-block: var(--s3) var(--s4); row-gap: var(--s4); } .hero { margin-top: var(--s4); gap: var(--s5); } .slide__txt { gap: var(--s4); padding: var(--s6) var(--s5) var(--s5); } .slide__act { gap: var(--s3); margin-top: var(--s3); width: 100%; } .slide__act .btn { flex: 1 1 0; min-height: 52px; } .slide__contact { margin-top: var(--s3); flex-direction: column; gap: var(--s1); } .stage__bar { padding: var(--s3); } .tabs { gap: var(--s1); } .tab { min-height: 44px; } .side__list { gap: 4px; padding: var(--s2) var(--s2) var(--s3); } .side__list a { min-height: 48px; } .side__all { margin: var(--s2) var(--s3) var(--s4); min-height: 52px; } .finder { gap: var(--s4); padding: var(--s5) var(--s4); margin-top: var(--s5); } .finder__row > .btn { margin-top: var(--s2); min-height: 52px; } .trust { margin-top: var(--s5); } .trust li { padding: var(--s4); } .block { padding-top: var(--s7); } .block__head { margin-bottom: var(--s4); } .grid { gap: var(--s3); } .promo__txt .slide__act .btn { flex: 1 1 0; } .logo { display: inline-flex; align-items: center; min-height: 44px; } .slide__contact a { display: inline-flex; align-items: center; min-height: 44px; } .more { height: 44px; } .head__act .btn--sm { min-height: 44px; } } /* AJAX pretraga: padajući prijedlozi (bez animacije) */ .hs { position: relative; grid-column: 1 / -1; min-width: 0; } @media (min-width: 1024px) { .hs { grid-column: auto; } } .hs .head__search { max-width: none; } .hs__panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; max-height: min(70vh, 560px); overflow: auto; padding: var(--s2); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 12px 40px rgba(17, 19, 18, .12); } .hs__h { padding: var(--s3) var(--s3) var(--s1); font-size: var(--t-xs); font-weight: 700; color: var(--muted); } .hs__opt { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--s3); min-height: 48px; padding: 4px var(--s3); border-radius: var(--r-sm); font-size: .9375rem; } .hs__opt img, .hs__ph { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; } .hs__opt img[src*="cloudfront"] { object-fit: cover; } .hs__ph { background: var(--lime-soft); } .hs__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hs__t mark { background: var(--lime-soft); color: inherit; border-radius: 2px; padding: 0 1px; } .hs__m { font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .hs__opt:hover, .hs__opt[aria-selected="true"] { background: var(--bg-2); } .hs__empty { padding: var(--s4) var(--s3) var(--s2); color: var(--muted); font-size: var(--t-sm); } .hs__all { display: flex; justify-content: space-between; align-items: center; min-height: 48px; margin-top: var(--s2); padding: 0 var(--s3); border-top: 1px solid var(--line); font-size: var(--t-sm); font-weight: 700; } .hs__all svg { width: 16px; height: 16px; } .hs__all:hover { background: var(--bg-2); border-radius: var(--r-sm); } /* najtraženiji modeli: slika auta, logo marke, model, broj dijelova */ /* traka: na telefonu listanje prstom, na desktopu samostalno sporo kretanje */ .rail__ctl { display: flex; align-items: center; gap: var(--s2); } .rail { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--s4)); padding: 2px var(--s4) var(--s2); scroll-padding-inline: var(--s4); } .rail::-webkit-scrollbar { display: none; } .models { display: flex; gap: var(--s3); width: max-content; } .models > li { flex: 0 0 auto; width: min(72vw, 260px); scroll-snap-align: start; } @media (min-width: 840px) { .models > li { width: 264px; } .models { gap: var(--s4); } } /* rub se gubi samo na strani gdje ima još kartica */ .rail.has-right { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } .rail.has-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); } .rail.has-left.has-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } /* pojavljivanje slijeva nadesno (jednom) */ .rail.is-pending .models > li { opacity: 0; transform: translateX(-16px); } .rail.is-in .models > li { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); } .rail__ctl .navbtn { width: var(--tap); height: var(--tap); } .rail__ctl .navbtn:disabled { opacity: .35; cursor: default; } .rail { scroll-behavior: smooth; } .rail__hint { margin-top: var(--s3); font-size: var(--t-xs); color: var(--muted); } @media (min-width: 840px) and (hover: hover) { .rail__hint { display: none; } } @media (min-width: 840px) { .rail { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } } @media (max-width: 599px) { .rail__ctl .more { display: none; } } .model { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .model:hover { border-color: var(--line-strong); } .model:hover .card__go { background: var(--lime); border-color: var(--lime); } .model__img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 4.2; padding: var(--s5) var(--s5) var(--s3); } .model__img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(17, 19, 18, .18)); } .model__img.is-empty img { display: none; } .model__img.is-empty::after { content: ""; width: 44%; height: 44%; background: var(--ph) center / contain no-repeat; opacity: .18; filter: grayscale(1); } .model__b { display: inline-flex; align-items: center; gap: 6px; padding: var(--s3) var(--s4) 0; font-size: var(--t-xs); font-weight: 600; color: var(--muted); } .model__b img { width: auto; height: auto; max-width: 48px; max-height: 18px; object-fit: contain; } .model__n { padding: 2px var(--s4) 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; } .model__f { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: auto; padding: var(--s3) var(--s4) var(--s4); } .model__c { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; } /* vozila na rastavljanju: dvije široke kartice, svijetli "tehnički list" s mrežom, auto odsječen desno, numerisane tačke + legenda */ .cars { display: grid; gap: var(--s4); } @media (min-width: 900px) { .cars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } } .car { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; } .car:hover { border-color: var(--line-strong); } .car__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background-color: #F4F6F1; background-image: linear-gradient(rgba(17, 19, 18, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 19, 18, .05) 1px, transparent 1px); background-size: 24px 24px; } .car__stage { position: absolute; left: 44%; top: 10%; width: 66%; } .car__stage img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 14px rgba(17, 19, 18, .22)); } .hot { position: absolute; display: grid; place-items: center; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ink); color: var(--lime); font: 800 11px/1 var(--font); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lime), 0 0 16px 4px rgba(180, 216, 46, .7); } .hot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--lime); opacity: 0; animation: hot-pulse 2.4s ease-out infinite; animation-delay: var(--d, 0s); } @keyframes hot-pulse { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hot::after { animation: none; } } .car__leg { position: absolute; left: var(--s4); top: var(--s4); display: grid; gap: 6px; } .car__leg span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 600; color: var(--ink); } .car__leg b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 10px; font-weight: 800; } .car__b { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s4); padding: var(--s4) var(--s5) var(--s5); } .car__h { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); } .car__n { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; } .car__o { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 599px) { .car__stage { left: 46%; top: 10%; width: 68%; } .car__b { padding: var(--s4); } .car__cta { width: 100%; min-height: 52px; } } /* otkup vozila: Wagen zeleni gradijent kao slajder, auto odsječen desno, 2 kartice osobina */ .otk { position: relative; display: grid; border-radius: var(--r-md); overflow: hidden; color: var(--ink); background: radial-gradient(50% 72% at 72% 56%, #E6F69E 0%, #CFEA5F 26%, rgba(180, 216, 46, 0) 70%), linear-gradient(160deg, #BEE03A 0%, #B4D82E 50%, #A2C523 100%); } @media (min-width: 840px) { .otk { grid-template-columns: 1fr 1.05fr; min-height: 440px; } } .otk__txt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); padding: var(--s6) var(--s5) var(--s4); } @media (min-width: 840px) { .otk__txt { padding: var(--s7) var(--s4) var(--s7) var(--s7); justify-content: center; } } .otk .chip { background: var(--ink); color: #fff; } .otk h2 { font-size: clamp(1.875rem, 3vw, 2.75rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; max-width: 15ch; } .otk p { font-size: 1.0625rem; max-width: 42ch; color: #2C3410; } .otk__steps { display: grid; gap: var(--s2); margin: var(--s1) 0 0; padding: 0; list-style: none; } .otk__steps li { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-sm); font-weight: 600; } .otk__steps b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .6); font-size: 12px; font-weight: 800; } .otk__act { margin-top: var(--s2); } .otk__act .btn { gap: 8px; } .otk__main { background: var(--ink); color: #fff; } .otk__main:hover { background: var(--ink-hover); } .otk__main svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ch-ico { width: 18px; height: 18px; fill: currentColor; } .otk__img { position: relative; min-height: 260px; } .otk__img::before { content: ""; position: absolute; left: 45%; top: 50%; width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); filter: blur(10px); } .otk__img > img { position: absolute; left: 4%; top: 50%; transform: translateY(-50%); width: 125%; max-width: none; filter: drop-shadow(0 24px 22px rgba(40, 55, 5, .35)); } .otk__card { right: auto; bottom: auto; } .otk__card--1 { right: 6%; top: 10%; } .otk__card--2 { right: 6%; bottom: 8%; } .otk__area { margin-top: var(--s3); font-size: var(--t-sm); color: var(--muted); } .otk__area b { color: var(--ink); font-weight: 600; } @media (max-width: 839px) { .otk__img { min-height: 240px; } .otk__img > img { left: 6%; width: 110%; } .otk__card--1 { display: none; } } .otk__card--1 span { padding-left: 0; border-left: 0; } /* WhatsApp i Viber: iste boje i ikone kao na živom sajtu (#0F8745 / #6F5CF0, puni logo 20px) */ .btn--wa { background: #0F8745; color: #fff; border-color: #0F8745; } .btn--wa:hover { background: #0C7239; border-color: #0C7239; } .btn--vb { background: #6F5CF0; color: #fff; border-color: #6F5CF0; } .btn--vb:hover { background: #5F4BDD; border-color: #5F4BDD; } .btn .ch-ico { width: 20px; height: 20px; flex: none; fill: currentColor; stroke: none; } /* otkup: glavno dugme šire, ispod WhatsApp i Viber jedno do drugog */ .otk__act { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); width: 100%; max-width: 420px; } .otk__act .btn { justify-content: center; min-height: 52px; } .otk__act .otk__main { grid-column: 1 / -1; } /* MEGA MENI (desktop): Dijelovi i Marke; otvara se bez animacije, s kasnjenjem (JS) */ .catnav { position: relative; } .catnav .caret { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .catnav__list a[aria-expanded="true"]:not(.catnav__all) { background: var(--bg-2); } .catnav__all[aria-expanded="true"] { background: var(--ink-hover); } .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 55; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px rgba(17, 19, 18, .12); } .mega[hidden] { display: none; } @media (max-width: 839px) { .mega { display: none !important; } .catnav .caret { display: none; } } .mega__in { display: grid; gap: var(--s6); padding-block: var(--s5) var(--s6); } .mega__in--d { grid-template-columns: 1fr 300px; } .mega__in--m { grid-template-columns: minmax(380px, 440px) 1fr; } .mega__h { margin-bottom: var(--s3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .mega .num { margin-left: auto; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; } .mega__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px var(--s4); } .mega__cats a, .mega__brands a, .mega__mods a { display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 4px var(--s3); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; } .mega__cats a:hover, .mega__mods a:hover, .mega__brands a:hover, .mega__brands a.is-on { background: var(--bg-2); } .mega__cats img { width: 40px; height: 40px; object-fit: contain; flex: none; } .mega__all { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s4); padding: 0 var(--s3); min-height: 44px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: var(--t-sm); font-weight: 700; } .mega__all:hover { background: var(--ink-hover); } .mega__all .num { color: var(--lime); margin-left: 0; } .mega__all svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mega__ask { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); border-radius: var(--r-md); background: var(--bg-2); align-self: start; } .mega__askh { font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; } .mega__ask p:not(.mega__askh) { font-size: var(--t-sm); color: var(--muted); } .mega__ask .btn { justify-content: center; min-height: 44px; gap: 8px; } .mega__ch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); } .mega__brands { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s2); } .mega__logo { display: grid; place-items: center; width: 32px; height: 24px; flex: none; } .mega__logo img { max-width: 32px; max-height: 24px; object-fit: contain; } .mega__panes { padding-left: var(--s6); border-left: 1px solid var(--line); } .mega__mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s4); } .mega__ch .btn { min-width: 0; padding-inline: var(--s2); } /* kartica "Ne nalazite dio?": Wagen zelena kao slajder; tri dugmeta iste visine, poravnata u mrezi 2 kolone */ .mega__ask { background: radial-gradient(80% 70% at 80% 20%, #E6F69E 0%, rgba(230, 246, 158, 0) 70%), linear-gradient(160deg, #BEE03A 0%, #B4D82E 55%, #A2C523 100%); } .mega__ask p:not(.mega__askh) { color: #2C3410; } .mega__ch { grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s1); } .mega__ch .btn { width: 100%; min-height: 48px; justify-content: center; gap: 8px; } .mega__upit { grid-column: 1 / -1; background: var(--ink); color: #fff; border-color: var(--ink); } .mega__upit:hover { background: var(--ink-hover); } /* ===== MOBILNO ZAGLAVLJE I MENI (< 840 px) ===== */ .iconbtn { display: none; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; color: var(--ink); } .iconbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 839px) { .topbar { display: none; } .catnav { display: none; } .head { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); } .head__in { padding-block: 10px 12px; row-gap: 10px; } .logo img { height: 26px; } .head__act { gap: var(--s2); } .head__upit { display: none; } .iconbtn { display: grid; } .head__menu { background: var(--ink); border-color: var(--ink); color: #fff; } .head__search input { height: 48px; font-size: 16px; } .head__search button { min-height: 48px; } } /* meni: cijeli ekran, klizi zdesna; nivoi Dijelovi/Marke klize unutar menija */ .mn { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: var(--ink); overflow: hidden; } .mn::backdrop { background: rgba(17, 19, 18, .4); } .mn[open] { animation: mn-in .26s cubic-bezier(.2, .7, .2, 1); } @keyframes mn-in { from { transform: translateX(100%); } to { transform: none; } } .mn__view { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; } .mn__view.is-in { animation: mn-sub .24s cubic-bezier(.2, .7, .2, 1); } .mn__view.is-back { animation: mn-back .24s cubic-bezier(.2, .7, .2, 1); } @keyframes mn-sub { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes mn-back { from { transform: translateX(-30%); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mn[open], .mn__view.is-in, .mn__view.is-back { animation: none; } } .mn__bar { flex: none; display: flex; align-items: center; gap: var(--s3); min-height: 68px; padding: 10px 16px; border-bottom: 1px solid var(--line); } .mn__bar .iconbtn { display: grid; margin-left: auto; } .mn__brandlogo { height: 26px; width: auto; } .mn__title { font-size: 1.0625rem; font-weight: 800; } .mn__back { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 12px 0 4px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); } .mn__back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mn__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; } .mn .num { margin-left: auto; font-size: var(--t-sm); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .mn__chev { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mn__list { margin: 0; padding: 0; list-style: none; } .mn__list li + li { border-top: 1px solid var(--line); } .mn__list a, .mn__list button { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 60px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 1.125rem; font-weight: 700; color: var(--ink); text-align: left; } .mn__list .num + .mn__chev, .mn__tag + .mn__chev { margin-left: 0; } .mn__list span:first-child { margin-right: auto; } .mn__tag { padding: 4px 8px; border-radius: var(--r-xs); background: var(--lime); font-size: var(--t-xs); font-weight: 700; } .mn__contact { display: grid; gap: var(--s3); margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-md); background: var(--bg-2); } .mn__open { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: var(--t-sm); color: var(--muted); } .mn__open .status { background: #fff; } .mn__call { justify-content: center; gap: 8px; min-height: 52px; background: var(--ink); color: #fff; border-color: var(--ink); } .mn__call svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mn__ch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); } .mn__ch .btn { justify-content: center; gap: 8px; min-height: 52px; min-width: 0; } .mn__addr { display: flex; align-items: center; min-height: 44px; font-size: var(--t-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .mn__small { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin: var(--s4) 0 0; padding: 0; list-style: none; } .mn__small a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-sm); color: var(--muted); } .mn__cats { margin: 0; padding: 0; list-style: none; } .mn__cats li + li { border-top: 1px solid var(--line); } .mn__cats a { display: flex; align-items: center; gap: var(--s3); min-height: 60px; font-weight: 600; } .mn__cats img { width: 40px; height: 40px; object-fit: contain; flex: none; } .mn__all { width: 100%; justify-content: center; gap: 8px; min-height: 52px; margin-top: var(--s4); background: var(--lime); color: var(--ink); border-color: var(--lime); } .mn__all .num { margin-left: 0; color: var(--ink); } .mn__brand { border-bottom: 1px solid var(--line); } .mn__brand summary { display: flex; align-items: center; gap: var(--s3); min-height: 60px; list-style: none; cursor: pointer; font-weight: 600; } .mn__brand summary::-webkit-details-marker { display: none; } .mn__logo { display: grid; place-items: center; width: 36px; height: 28px; flex: none; } .mn__logo img { max-width: 36px; max-height: 28px; object-fit: contain; } .mn__plus { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .mn__brand[open] .mn__plus { transform: rotate(180deg); } .mn__mods { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 0 var(--s4); } .mn__mods a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; } .mn__mods .mn__mall { width: 100%; justify-content: space-between; border-color: var(--ink); background: var(--ink); color: #fff; } .mn__mods .mn__mall .mn__chev { stroke: #fff; } html.mn-lock { overflow: hidden; } .mn__view[hidden] { display: none; } /* ===== TELEFON: prolaz kroz pocetnu ===== */ @media (max-width: 839px) { /* zaglavlje se sakrije pri listanju nadolje, vrati pri listanju nagore (vise prostora za sadrzaj) */ .head { transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .head.is-hidden { transform: translateY(-100%); } /* donja traka (.mbar): za sada NIJE na pocetnoj; stil ostaje za stranicu artikla */ .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(17, 19, 18, .08); transform: translateY(110%); transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .mbar.is-on { transform: none; } .mbar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 700; color: #fff; } .mbar svg { width: 18px; height: 18px; flex: none; } .mbar__call { background: var(--ink); } .mbar__call svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mbar__wa { background: #0F8745; } .mbar__vb { background: #6F5CF0; } .mbar .ch-ico { fill: currentColor; stroke: none; } /* kategorije u heroju: plocice 3 u redu umjesto duge liste */ .side__head { margin: 0; padding: var(--s4); } .side__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); padding: var(--s3); } .side__list a { grid-template-columns: 1fr; grid-template-rows: 48px auto auto; justify-items: center; text-align: center; gap: 4px; min-height: 112px; padding: var(--s3) var(--s1); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; } .side__img { width: 48px; height: 48px; } .side__name { font-size: 13px; line-height: 1.2; } .side__list .num { font-size: 11px; } /* najnoviji: 6 kartica na telefonu */ #cards > :nth-child(n+7) { display: none; } } @media (max-width: 839px) and (prefers-reduced-motion: reduce) { .head, .mbar { transition: none; } } @media (min-width: 840px) { .mbar { display: none; } } @media (max-width: 839px) { .slide__contact { display: none; } .slide h1, .slide h2 { font-size: 1.875rem; } .slide__img { min-height: 240px; } } /* ===== ZASTO WAGEN GROUP ===== */ .why { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; } @media (min-width: 600px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .why { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); } } .why li { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; } .why__n { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s2); border-radius: var(--r-sm); background: var(--lime); font-size: var(--t-sm); font-weight: 800; font-variant-numeric: tabular-nums; } .why h3 { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; } .why p { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; } .stats { display: grid; margin: var(--s4) 0 0; padding: 0; list-style: none; border-radius: var(--r-md); overflow: hidden; background: var(--ink); color: rgba(255, 255, 255, .72); } @media (min-width: 720px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .stats li { display: flex; flex-direction: column; gap: 4px; padding: var(--s5); } .stats li + li { border-top: 1px solid rgba(255, 255, 255, .1); } @media (min-width: 720px) { .stats li + li { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .1); } } .stats img { width: auto; height: 22px; margin-bottom: var(--s2); align-self: flex-start; background: #fff; padding: 3px 6px; border-radius: var(--r-xs); box-sizing: content-box; } .stats b { color: var(--lime); font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .stats span { font-size: var(--t-sm); } /* ===== CESTA PITANJA ===== */ .faq { display: grid; gap: var(--s5); } @media (min-width: 1024px) { .faq { grid-template-columns: minmax(280px, 1fr) 2fr; gap: var(--s7); align-items: start; } .faq__side { position: sticky; top: 24px; } } .faq__side h2 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; } .faq__side > p { margin-top: 4px; color: var(--muted); } .faq__ask { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); margin-top: var(--s5); padding: var(--s5); border-radius: var(--r-md); background: radial-gradient(80% 70% at 80% 20%, #E6F69E 0%, rgba(230, 246, 158, 0) 70%), linear-gradient(160deg, #BEE03A 0%, #B4D82E 55%, #A2C523 100%); } .faq__askh { font-size: 1.125rem; font-weight: 800; } .faq__ask p:not(.faq__askh) { font-size: var(--t-sm); color: #2C3410; } .faq__ask .btn { margin-top: var(--s2); gap: 8px; background: var(--ink); color: #fff; border-color: var(--ink); } .faq__ask .btn:hover { background: var(--ink-hover); } .faq__ask .btn svg, .find .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .faq__list { border-top: 1px solid var(--line); } .faq__q { border-bottom: 1px solid var(--line); } .faq__q summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; padding: var(--s3) 0; list-style: none; cursor: pointer; } .faq__q summary::-webkit-details-marker { display: none; } .faq__q h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; } .faq__q summary svg { flex: none; width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--bg-2); fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .faq__q[open] summary svg { transform: rotate(180deg); background: var(--lime); } .faq__q p { padding: 0 var(--s7) var(--s5) 0; color: var(--muted); line-height: 1.6; max-width: 70ch; } @media (prefers-reduced-motion: reduce) { .faq__q summary svg { transition: none; } } /* ===== KAKO DO WAGEN GROUP ===== */ .find { display: grid; gap: var(--s4); } @media (min-width: 1024px) { .find { grid-template-columns: 1fr 1.15fr; } } .find__cards { display: grid; gap: var(--s3); } .fcard { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; } .fcard__h { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .fcard__big { font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; } .fcard__tel { font-variant-numeric: tabular-nums; } .fcard__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: var(--t-sm); font-weight: 600; } .fcard__sub { font-size: var(--t-sm); color: var(--muted); } .fcard .btn { margin-top: var(--s2); gap: 8px; min-height: 44px; } .fcard__ch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); width: 100%; max-width: 360px; margin-top: var(--s2); } .fcard__ch .btn { margin: 0; justify-content: center; min-width: 0; } .fcard__link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .map { position: relative; min-height: 360px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background-color: #EEF1EA; background-image: linear-gradient(rgba(17, 19, 18, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 19, 18, .05) 1px, transparent 1px); background-size: 28px 28px; } .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .map__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--s5); text-align: center; } .map__pin { width: 22px; height: 22px; margin-bottom: var(--s3); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--lime), 0 0 28px 8px rgba(180, 216, 46, .75); } .map__t { font-size: 1.25rem; font-weight: 800; } .map__ph p:not(.map__t) { color: var(--muted); font-size: var(--t-sm); } .map__ph .btn { margin-top: var(--s4); min-height: 48px; } .map__ph small { margin-top: var(--s2); font-size: var(--t-xs); color: var(--muted); } @media (max-width: 599px) { .why li, .fcard { padding: var(--s4); } .faq__q p { padding-right: 0; } .faq__ask .btn, .fcard > .btn { width: 100%; justify-content: center; min-height: 52px; } .fcard__ch { max-width: none; } .fcard__ch .btn { min-height: 52px; } .map { min-height: 300px; } } @media (max-width: 839px) { .bcard__mods a { min-height: 44px; padding: 0 14px; } } @media (max-width: 839px) { .foot__nap a, .fcard__tel, .foot__brand > a { display: inline-flex; align-items: center; min-height: 44px; } .foot__nap { gap: 0; } } /* tablet (dodir): linkovi i kontakt u podnožju >= 44 px */ @media (max-width: 1023px) { .foot__col li a, .foot__nap a, .foot__brand > a, .logo { display: inline-flex; align-items: center; min-height: 44px; } .foot__col ul { gap: 0; } } /* pločice kategorija na telefonu: svi redovi iste visine (po najvišoj pločici), sadržaj poravnat odozgo */ @media (max-width: 839px) { .side__list { grid-auto-rows: 1fr; } .side__list li { display: flex; } .side__list a { width: 100%; height: 100%; align-content: start; } } /* otkup: slika se ne smije razvući (atribut visine 600 je davao fiksnu visinu) */ .otk__img > img { height: auto; } /* telefon: auto u punoj širini ispod teksta, kartice osobina centrirane (ne lijepe se uz rub) */ @media (max-width: 839px) { .otk__img { min-height: 0; padding: var(--s2) 0 76px; } .otk__img > img { position: relative; top: auto; left: 8%; transform: none; width: 104%; display: block; } .otk__card--1 { display: none; } .otk__card--2 { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); } } @media (max-width: 719px) { .ship { left: 50%; right: auto; transform: translateX(-50%); } .otk__card--2 { transform: translateX(-50%); } } /* ---- artikal.css ---- */ /* STRANICA ARTIKLA (prototip). Koristi tokens.css, components.css i home.css (zaglavlje, meni, podnožje, dugmad). */ /* stanje artikla: body[data-state] = narudzba | upit | prodato; elementi s data-show prikazuju se samo u svom stanju */ body:not([data-state="narudzba"]) [data-show="narudzba"], body:not([data-state="upit"]) [data-show="upit"], body:not([data-state="prodato"]) [data-show="prodato"] { display: none !important; } body[data-state="prodato"] [data-show="narudzba upit"] { display: none !important; } /* putanja */ .crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: var(--s4) 0 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--muted); } .crumbs li:not(:last-child)::after { content: "/"; margin: 0 8px; color: var(--line-strong); } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--ink); } .crumbs [aria-current] { color: var(--ink); font-weight: 600; } /* raspored: galerija lijevo, kupovina desno (ljepljivo dok se lista galerija) */ .pd { display: grid; gap: var(--s5); margin-top: var(--s4); } @media (min-width: 960px) { .pd { grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr); gap: var(--s7); align-items: start; } .buy { position: sticky; top: 24px; } } /* GALERIJA: traka sa skrol-zakačkom (prst na telefonu), strelice i sličice na desktopu */ .gal__stage { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); } .gal__track { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth; } .gal__track::-webkit-scrollbar { display: none; } .gal__slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 3; } .gal__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .gal__open img { width: 100%; height: 100%; object-fit: cover; display: block; } .gal__nav { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 4px 16px rgba(17, 19, 18, .16); } .gal__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gal__nav--p { left: 12px; } .gal__nav--n { right: 12px; } .gal__nav:disabled { opacity: 0; pointer-events: none; } .gal__count { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: var(--r-xs); background: rgba(17, 19, 18, .72); color: #fff; font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; } .gal__sold { display: none; position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: var(--r-xs); background: var(--ink); color: #fff; font-size: var(--t-sm); font-weight: 800; } body[data-state="prodato"] .gal__sold { display: block; } body[data-state="prodato"] .gal__open img { filter: grayscale(.6); opacity: .8; } .gal__thumbs { display: flex; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .gal__th { display: block; width: 88px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-2); } .gal__th img { width: 100%; height: 100%; object-fit: cover; display: block; } .gal__th.is-on { border-color: var(--ink); } .gal__note { margin-top: var(--s2); font-size: var(--t-xs); color: var(--muted); } @media (max-width: 719px) { .gal { margin-inline: -16px; } .gal__stage { border-radius: 0; } .gal__nav, .gal__thumbs { display: none; } .gal__note { padding-inline: 16px; } .gal__count { bottom: auto; top: 12px; } } /* KUPOVINA */ .buy { display: flex; flex-direction: column; gap: var(--s3); } .buy__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .buy__cond { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-xs); background: var(--bg-2); font-size: var(--t-xs); font-weight: 600; } .buy h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; } .buy__fit { font-size: var(--t-sm); color: var(--muted); } .buy__fit a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; } .buy__codes { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--t-sm); color: var(--muted); } .buy__codes b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .buy__price { padding: var(--s4) 0; border-block: 1px solid var(--line); } .price { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; } .price--ask { font-size: 1.75rem; } .price--sold { font-size: 1.75rem; color: var(--muted); } .buy__pnote { margin-top: var(--s2); font-size: var(--t-sm); color: var(--muted); } .buy__act { display: grid; gap: var(--s2); } .buy__main { width: 100%; min-height: 56px; justify-content: center; font-size: 1.0625rem; } .buy__ch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); } .buy__ch .btn { justify-content: center; gap: 8px; min-height: 48px; min-width: 0; } .buy__call { font-size: var(--t-sm); color: var(--muted); text-align: center; } .buy__call a { color: var(--ink); font-weight: 700; } .ship-opts { display: grid; gap: var(--s2); margin: var(--s2) 0 0; padding: 0; list-style: none; } .ship-opt { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; } .ship-opt > img, .ship-opt__ico { flex: none; width: 88px; height: auto; } .ship-opt__ico { display: grid; place-items: center; height: 24px; } .ship-opt__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ship-opt > span:last-child { display: flex; flex-direction: column; padding-left: var(--s3); border-left: 1px solid var(--line); font-size: var(--t-xs); line-height: 1.35; color: var(--muted); } .ship-opt b { font-size: var(--t-sm); color: var(--ink); } .buy__trust { display: grid; gap: var(--s2); margin: var(--s2) 0 0; padding: 0; list-style: none; } .buy__trust li { display: flex; gap: var(--s2); font-size: var(--t-sm); color: var(--muted); line-height: 1.45; } .buy__trust svg { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--ok-bg); fill: none; stroke: var(--ok-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .buy__trust b { color: var(--ink); } .buy__olx { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-sm); font-weight: 600; } .buy__olx svg, .pd-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* PODACI I OPIS */ .pd-more { display: grid; gap: var(--s5); margin-top: var(--s7); } @media (min-width: 960px) { .pd-more { grid-template-columns: 1.2fr 1fr; gap: var(--s7); } } .pd-more h2 { font-size: var(--t-h3); font-weight: 800; letter-spacing: -.015em; margin-bottom: var(--s3); } .pd-specs dl { margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .pd-specs dl > div { display: grid; grid-template-columns: minmax(130px, 40%) 1fr; gap: var(--s3); align-items: center; min-height: 48px; padding: var(--s2) var(--s4); } .pd-specs dl > div:nth-child(odd) { background: var(--bg-2); } .pd-specs dt { font-size: var(--t-sm); color: var(--muted); } .pd-specs dd { margin: 0; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .pd-specs dd a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; } .mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; } .copy { min-height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: #fff; font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--ink); } .copy.is-done { background: var(--ok-bg); border-color: transparent; color: var(--ok-text); } .pd-about p { color: var(--muted); line-height: 1.65; } .pd-vin { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-md); background: var(--bg-2); } .pd-vin__h { color: var(--ink) !important; font-weight: 700; margin-bottom: 4px; } /* TELEFON: traka s cijenom i glavnom radnjom */ .pbar { display: none; } @media (max-width: 959px) { .pbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: var(--s3); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(17, 19, 18, .08); transform: translateY(110%); transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .pbar.is-on { transform: none; } .pbar__p { display: flex; flex-direction: column; min-width: 0; flex: 1; } .pbar__p b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; } .pbar__p small { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pbar .btn { flex: none; min-height: 52px; padding-inline: var(--s5); } .foot { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { .pbar { transition: none; } } /* GALERIJA PREKO EKRANA */ .lb { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #0B0C0B; } .lb::backdrop { background: #0B0C0B; } .lb[open] { display: grid; place-items: center; } .lb__img { max-width: 100%; max-height: 100%; object-fit: contain; } .lb__x { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; display: grid !important; z-index: 2; } .lb__count { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; color: #fff; font-size: var(--t-sm); font-weight: 600; } /* OBRAZAC (dijalog): telefon = preko cijelog ekrana, desktop = panel 520 px */ .of { width: min(560px, 100%); max-width: none; max-height: min(92dvh, 900px); margin: auto; padding: 0; border: 0; border-radius: var(--r-md); background: #fff; color: var(--ink); box-shadow: 0 24px 64px rgba(17, 19, 18, .24); overflow: hidden; } .of::backdrop { background: rgba(17, 19, 18, .45); } .of[open] { display: flex; flex-direction: column; animation: of-in .22s cubic-bezier(.2, .7, .2, 1); } @keyframes of-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .of[open] { animation: none; } } @media (max-width: 599px) { .of { width: 100%; height: 100dvh; max-height: none; border-radius: 0; } } .of__form { display: flex; flex-direction: column; min-height: 0; flex: 1; } .of__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 64px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--line); } .of__bar .iconbtn { display: grid; } .of__h { font-size: 1.125rem; font-weight: 800; } .of__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s4) 20px; display: grid; gap: var(--s4); align-content: start; } .of__item { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-sm); background: var(--bg-2); } .of__item img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--r-xs); } .of__t { font-size: var(--t-sm); font-weight: 700; line-height: 1.3; } .of__s { font-size: var(--t-xs); color: var(--muted); } .of__p { font-size: 1.0625rem; font-variant-numeric: tabular-nums; } .of__ship { display: grid; gap: var(--s2); margin: 0; padding: 0; border: 0; } .of__ship legend { margin-bottom: var(--s2); font-size: var(--t-sm); font-weight: 700; } .opt { display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; } .opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #FAFCF3; } .opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); } .opt__b { display: flex; flex-direction: column; flex: 1; font-size: var(--t-sm); } .opt__b small { color: var(--muted); font-size: var(--t-xs); } .opt img { flex: none; width: 72px; height: auto; } .of__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .of__full { grid-column: 1 / -1; } .of__grid [data-addr]:first-of-type { grid-column: 1; } .fld textarea { width: 100%; padding: 12px var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; font-size: 16px; resize: vertical; } .of .fld input { font-size: 16px; } .fld__help { font-size: var(--t-xs); color: var(--muted); } .fld.is-bad input { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); } .fld.is-bad > span::after { content: " · obavezno"; color: var(--bad-text); font-weight: 600; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .of__legal { font-size: var(--t-xs); color: var(--muted); } .of__legal a { text-decoration: underline; } .of__foot { flex: none; display: grid; gap: var(--s2); padding: var(--s3) 20px calc(var(--s4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; } .of__sum { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-size: var(--t-sm); color: var(--muted); } .of__sum b { color: var(--ink); font-size: 1.25rem; text-align: right; } .of__sum small { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--muted); } .of__send { width: 100%; min-height: 56px; justify-content: center; font-size: 1.0625rem; } .of__err { font-size: var(--t-sm); font-weight: 600; color: var(--bad-text); text-align: center; } .of__done { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s7) var(--s5); text-align: center; } .of__done[hidden] { display: none; } .of__ok { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--lime); } .of__ok svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .of__done p:not(.of__h) { color: var(--muted); max-width: 40ch; } .of__num b { color: var(--ink); font-variant-numeric: tabular-nums; } .of__done .btn { margin-top: var(--s3); min-height: 48px; min-width: 160px; justify-content: center; } html.of-lock { overflow: hidden; } /* telefon: putanja svedena na jedan korak nazad (model vozila) */ @media (max-width: 719px) { .crumbs li { display: none; } .crumbs li:nth-last-child(2) { display: block; } .crumbs li:nth-last-child(2)::after { content: none; } .crumbs li:nth-last-child(2) a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); } .crumbs li:nth-last-child(2) a::before { content: "\2039"; margin-right: 6px; font-size: 1.25rem; } .crumbs ol { margin-top: var(--s2); } } .of [hidden] { display: none !important; } .buy__olx img { height: 18px; width: auto; } .fld__help.is-err { color: var(--bad-text); font-weight: 600; } .fld.is-bad:has(.fld__help.is-err) > span::after { content: none; } .buy__myv { padding: 10px 12px; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn-text); font-size: var(--t-sm); line-height: 1.45; } .buy__myv.is-ok { background: var(--ok-bg); color: var(--ok-text); } .buy__myv[hidden] { display: none; } /* ---- lista.css ---- */ /* LISTA DIJELOVA (kategorija / model). Putanja (.crumbs) dolazi iz artikal.css, kartice iz components.css. */ .lst__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s3) var(--s6); margin-top: var(--s3); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); } .lst__head h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .lst__lead { margin-top: var(--s2); max-width: 70ch; color: var(--muted); line-height: 1.55; } .lst__more summary { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-sm); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .lst__more p { max-width: 70ch; color: var(--muted); font-size: var(--t-sm); line-height: 1.6; } .lst__total { font-size: var(--t-sm); color: var(--muted); } .lst__total b { display: block; color: var(--ink); font-size: 2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; } .lst__body { display: grid; gap: var(--s5); margin-top: var(--s5); } @media (min-width: 1024px) { .lst__body { grid-template-columns: 280px minmax(0, 1fr); gap: var(--s6); align-items: start; } } /* FILTERI: desktop = ljepljiva kolona lijevo; telefon = isti obrazac premješten u dijalog */ .flt { display: none; } @media (min-width: 1024px) { .flt { display: block; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } } .flt__form { display: grid; gap: var(--s2); } .flt__group { margin: 0; padding: var(--s4) 0; border: 0; border-bottom: 1px solid var(--line); min-width: 0; } .flt__group:first-child { padding-top: 0; } .flt__group legend { float: left; width: 100%; margin-bottom: var(--s3); font-size: var(--t-sm); font-weight: 700; } .flt__group legend + * { clear: both; } .flt__search { position: relative; display: block; } .flt__search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; } .flt__search input { width: 100%; height: 48px; padding: 0 var(--s4) 0 42px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; font-size: 16px; } .flt__search input:focus-visible { border-color: var(--ink); outline: none; box-shadow: var(--focus); } .flt__list { display: grid; gap: 2px; } .chk { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 0 var(--s2); border-radius: var(--r-sm); cursor: pointer; font-size: var(--t-sm); } .chk:hover { background: var(--bg-2); } .chk input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); } .chk span:not(.num) { flex: 1; min-width: 0; } .chk .num { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; } .chk.is-zero { opacity: .45; } .flt__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 var(--s2); border: 0; background: none; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .flt__hint { font-size: var(--t-xs); color: var(--muted); } .flt__years { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s2); } /* REZULTATI */ .res__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); } .res__fbtn { display: inline-flex; gap: 8px; min-height: 48px; } .res__fbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .res__fcnt { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--lime); font-size: var(--t-xs); font-weight: 800; } @media (min-width: 1024px) { .res__fbtn { display: none; } } .res__count { flex: 1; font-size: var(--t-sm); color: var(--muted); } .res__count b { color: var(--ink); } .res__sort { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--muted); } .res__sort select { height: 48px; padding: 0 36px 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23111312' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink); -webkit-appearance: none; appearance: none; } @media (max-width: 599px) { .res__count { order: 3; flex-basis: 100%; } .res__sort span { display: none; } .res__fbtn, .res__sort { flex: 1; } .res__sort select { width: 100%; } } .chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); } .chips:empty { display: none; } .chip-x { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--ink); border-radius: var(--r-sm); background: #fff; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink); cursor: pointer; } .chip-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .chip-clear { min-height: 36px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--muted); text-decoration: underline; cursor: pointer; } .lst__grid { margin: var(--s4) 0 0; padding: 0; list-style: none; } @media (min-width: 1024px) { .lst__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { .lst__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lst__grid > li { display: flex; } .lst__grid .card { width: 100%; } .card__veh { font-size: var(--t-xs); font-weight: 600; color: var(--ink); } .card__oem { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; } .card__p--ask { font-size: var(--t-sm); font-weight: 700; letter-spacing: 0; } /* kartica "Ne nalazite dio?" usred liste */ .ask-card { display: flex; flex-direction: column; justify-content: center; gap: var(--s3); width: 100%; padding: var(--s5); border-radius: var(--r-md); background: radial-gradient(80% 70% at 80% 20%, #E6F69E 0%, rgba(230, 246, 158, 0) 70%), linear-gradient(160deg, #BEE03A 0%, #B4D82E 55%, #A2C523 100%); } .ask-card b { font-size: 1.125rem; font-weight: 800; } .ask-card p { font-size: var(--t-sm); color: #2C3410; } .ask-card .btn { justify-content: center; min-height: 48px; background: var(--ink); color: #fff; border-color: var(--ink); } .res__empty { margin-top: var(--s5); padding: var(--s6) var(--s5); border: 1px dashed var(--line-strong); border-radius: var(--r-md); text-align: center; } .res__empty[hidden] { display: none; } .res__emptyh { font-size: 1.125rem; font-weight: 800; } .res__empty p:not(.res__emptyh) { margin-top: var(--s2); color: var(--muted); } .res__empty div { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s4); } .res__empty .btn { min-height: 48px; } .res__more { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin-top: var(--s6); font-size: var(--t-sm); color: var(--muted); } .res__more[hidden] { display: none; } .res__more .btn { min-height: 48px; min-width: 220px; justify-content: center; } /* filteri na telefonu */ .fsheet { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: var(--ink); } .fsheet[open] { display: flex; flex-direction: column; animation: fs-in .24s cubic-bezier(.2, .7, .2, 1); } @keyframes fs-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fsheet[open] { animation: none; } } .fsheet::backdrop { background: rgba(17, 19, 18, .45); } .fsheet__bar { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--line); } .fsheet__bar .iconbtn { display: grid; } .fsheet__h { font-size: 1.125rem; font-weight: 800; } .fsheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s4) 20px; } .fsheet__foot { flex: none; display: grid; grid-template-columns: 1fr 2fr; gap: var(--s2); padding: var(--s3) 20px calc(var(--s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); } .fsheet__foot .btn { justify-content: center; min-height: 52px; } html.fs-lock { overflow: hidden; } .flt { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .flt__group > :not(legend) { clear: both; } /* oglas bez prave fotografije (samo reklamni baner): neutralno polje umjesto banera */ .card__noimg { display: grid; place-items: center; width: 100%; height: 100%; font-size: var(--t-xs); font-weight: 600; color: var(--muted); } @media (max-width: 599px) { .lst__grid .card__p { font-size: 1.125rem; } .lst__grid .card__b { padding: var(--s3); } .lst__grid .status { font-size: 11px; padding: 0 8px; } } .lst__grid .card__img { min-height: 0; overflow: hidden; } .lst__grid .card__p.card__p--ask { font-size: var(--t-sm); } @media (max-width: 599px) { .lst__total { display: none; } } @media (max-width: 1023px) { .lst__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 720px) and (max-width: 1023px) { .lst__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* kartica s linkom preko cijele površine (da dugmad "Pitaj za cijenu" mogu biti unutra bez linka u linku) */ .card--rel { position: relative; } .card__stretch { color: inherit; } .card__stretch::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; } .card__stretch:focus-visible { outline: none; } .card--rel:has(.card__stretch:focus-visible) { outline: 2px solid var(--info); outline-offset: 2px; } .card__ask { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 44px 44px; align-items: center; gap: 6px; margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: var(--t-xs); font-weight: 700; } .card__ask .btn { min-height: 44px; min-width: 0; padding: 0; justify-content: center; } .card__ask .ch-ico { width: 20px; height: 20px; } /* kategorije iz iste grupe */ .sibs { display: flex; gap: var(--s2); margin-top: var(--s4); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .sibs::-webkit-scrollbar { display: none; } .sibs__l { flex: none; align-self: center; font-size: var(--t-xs); font-weight: 700; color: var(--muted); } .sib { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; } .sib span { font-size: var(--t-xs); font-weight: 500; color: var(--muted); } .sib:hover { border-color: var(--line-strong); } .sib.is-on { background: var(--ink); border-color: var(--ink); color: #fff; } .sib.is-on span { color: var(--lime); } /* moje vozilo */ .myv { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); } .myv.is-on { background: #F6FBE6; border-color: #D9EC9C; } .myv__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; flex: none; } .myv__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .myv__t { flex: 1 1 220px; font-size: var(--t-sm); color: var(--muted); } .myv__t b { color: var(--ink); } .myv__btn { min-height: 44px; } .myv__rm, .myv__apply { min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .myv__apply { min-height: 0; padding: 0; } .vsheet { width: min(460px, 100%); max-width: none; margin: auto; padding: 0; border: 0; border-radius: var(--r-md); background: #fff; color: var(--ink); box-shadow: 0 24px 64px rgba(17, 19, 18, .24); } .vsheet::backdrop { background: rgba(17, 19, 18, .45); } .vsheet__form { display: flex; flex-direction: column; } .vsheet__body { display: grid; gap: var(--s3); padding: var(--s4) 20px; } .vsheet__lead { font-size: var(--t-sm); color: var(--muted); } .vsheet .fld select:disabled { color: var(--muted); background-color: var(--bg-2); } @media (max-width: 599px) { .vsheet { width: 100%; margin: auto 0 0; border-radius: var(--r-md) var(--r-md) 0 0; } } /* stranice */ .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--s2); } .pager:empty { display: none; } .pager a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; } .pager a:hover { border-color: var(--line-strong); } .pager a.is-on { background: var(--ink); border-color: var(--ink); color: #fff; } .res__more .btn[hidden] { display: none; } /* pitanja na dnu liste */ .lst__faq { margin-top: var(--s7); } .lst__faq h2 { font-size: var(--t-h3); font-weight: 800; margin-bottom: var(--s3); } @media (max-width: 599px) { .card__ask { grid-template-columns: 1fr 1fr; } .card__ask > span { grid-column: 1 / -1; } } .myv__ico.is-logo { background: #fff; border: 1px solid var(--line); } .myv__ico img { max-width: 26px; max-height: 26px; object-fit: contain; } .myv__apply { display: inline-flex; align-items: center; min-height: 44px; } @media (max-width: 599px) { .myv { align-items: flex-start; } .myv__t { flex-basis: calc(100% - 56px); } .myv__btn { flex: 1; justify-content: center; } } /* uske kartice na telefonu: oznaka u jednom redu ("Provjera" umjesto "Provjera dostupnosti") */ .lst__grid .status { white-space: nowrap; } @media (max-width: 599px) { .lst__grid .st-long { display: none; } } /* stranica modela: logo marke uz naslov i traka koja prati listanje */ .lst__brand { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; } .lst__brand img { max-width: 40px; max-height: 36px; object-fit: contain; } .ctx { position: fixed; left: 0; right: 0; top: 0; z-index: 40; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px rgba(17, 19, 18, .06); transition: top .25s cubic-bezier(.2, .7, .2, 1); } .ctx[hidden] { display: none; } .ctx__in { display: flex; align-items: center; gap: var(--s3); min-height: 52px; } .ctx__in img { width: 32px; height: 24px; object-fit: contain; } .ctx__t { flex: 1; min-width: 0; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx__n { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .ctx { transition: none; } } .res__fcnt[hidden] { display: none; } @media (min-width: 1024px) { body:has(.ctx:not([hidden])) .flt { top: 68px; max-height: calc(100vh - 84px); } } /* ---- otkup.css ---- */ /* OTKUP VOZILA (prototip). Putanja iz artikal.css; dugmad, polja (.fld), FAQ, .ship i .chip iz home.css. */ .otkp .crumbs ol { margin-top: var(--s4); } /* hero: isti Wagen zeleni gradijent kao slajder */ .ohero { position: relative; display: grid; margin-top: var(--s3); border-radius: var(--r-md); overflow: hidden; background: radial-gradient(50% 72% at 72% 56%, #E6F69E 0%, #CFEA5F 26%, rgba(180, 216, 46, 0) 70%), linear-gradient(160deg, #BEE03A 0%, #B4D82E 50%, #A2C523 100%); } @media (min-width: 900px) { .ohero { grid-template-columns: 1fr 1fr; min-height: 460px; } } .ohero__txt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); padding: var(--s6) var(--s5) var(--s4); } @media (min-width: 900px) { .ohero__txt { padding: var(--s7) var(--s4) var(--s7) var(--s7); justify-content: center; } } .ohero .chip { background: var(--ink); color: #fff; } .ohero h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; } .ohero__txt > p { max-width: 44ch; font-size: 1.0625rem; line-height: 1.55; color: #2C3410; } .ohero__act { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); width: 100%; max-width: 440px; } .ohero__act .btn { justify-content: center; gap: 8px; min-height: 52px; } .ohero__act svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ohero__main { background: var(--ink); color: #fff; border-color: var(--ink); } .ohero__main:hover { background: var(--ink-hover); } .ohero__trust { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); font-weight: 600; } .ohero__trust li { display: flex; align-items: center; gap: 8px; } .ohero__trust svg { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .7); fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ohero__img { position: relative; min-height: 240px; } .ohero__img > img { position: absolute; left: 4%; top: 50%; width: 122%; max-width: none; height: auto; transform: translateY(-50%); filter: drop-shadow(0 24px 22px rgba(40, 55, 5, .35)); } .ohero__img .ship { right: 6%; bottom: 8%; } @media (max-width: 899px) { .ohero__img { min-height: 0; padding: 0 0 80px; } .ohero__img > img { position: relative; top: auto; left: 8%; width: 104%; transform: none; display: block; } .ohero__img .ship { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); } } /* obrazac u 3 koraka */ .oform-wrap { margin-top: var(--s7); scroll-margin-top: 16px; } .oform__head h2 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; } .oform__head p { margin-top: 4px; max-width: 60ch; color: var(--muted); } .oform { display: grid; gap: var(--s4); margin-top: var(--s5); max-width: 860px; } .ostep { margin: 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; min-width: 0; } .ostep legend { float: left; width: 100%; display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); font-size: 1.125rem; font-weight: 800; } .ostep legend + * { clear: both; } .ostep > :not(legend) { clear: both; } .kn { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--lime); font-size: var(--t-sm); font-weight: 800; } .ostep__hint { margin-bottom: var(--s3); font-size: var(--t-sm); color: var(--muted); } .opt2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); } @media (min-width: 720px) { .opt2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .opt2 { position: relative; display: flex; min-height: 64px; padding: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; } .opt2 input { position: absolute; opacity: 0; pointer-events: none; } .opt2 span { display: flex; flex-direction: column; gap: 2px; } .opt2 b { font-size: var(--t-sm); } .opt2 small { font-size: var(--t-xs); color: var(--muted); } .opt2:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #F6FBE6; } .opt2:has(input:focus-visible) { outline: 2px solid var(--info); outline-offset: 2px; } .opt2:has(input:checked)::after { content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23111312' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; } .ostep.is-bad { border-color: var(--bad); } .ostep__err, .osend__err { margin-top: var(--s2); font-size: var(--t-sm); font-weight: 600; color: var(--bad-text); } .ostep__err[hidden], .osend__err[hidden] { display: none; } .ogrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .ogrid__full { grid-column: 1 / -1; } .ogrid [hidden] { display: none; } @media (max-width: 599px) { .ogrid { grid-template-columns: 1fr; } .ostep { padding: var(--s4); } } .oform .fld input, .oform .fld textarea { font-size: 16px; } .oform .fld textarea { width: 100%; padding: 12px var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; font-size: 16px; resize: vertical; } .oform .fld select:disabled { color: var(--muted); background-color: var(--bg-2); } .osend { display: grid; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); } .osend__main { width: 100%; min-height: 56px; justify-content: center; font-size: 1.0625rem; } .osend__or { font-size: var(--t-sm); color: var(--muted); text-align: center; } .osend__ch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); } .osend__ch .btn { justify-content: center; gap: 8px; min-height: 52px; min-width: 0; } .osend__note { padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--bg-2); font-size: var(--t-sm); color: var(--muted); line-height: 1.5; } .osend__note b { color: var(--ink); } .osend__legal { font-size: var(--t-xs); color: var(--muted); } .osend__legal a { text-decoration: underline; } /* šta se otkupljuje */ .ovrste { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; } @media (min-width: 600px) { .ovrste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .ovrste { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .ovrste li { display: flex; flex-direction: column; gap: 6px; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-md); } .ovrste b { font-size: 1.0625rem; font-weight: 800; } .ovrste span { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; } /* kako izgleda otkup */ .okoraci { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; counter-reset: none; } @media (min-width: 840px) { .okoraci { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } } .okoraci li { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border-radius: var(--r-md); background: var(--bg-2); } .okoraci .kn { margin-bottom: var(--s2); } .okoraci b { font-size: 1.125rem; font-weight: 800; } .okoraci p { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; } /* papirologija: tamna traka */ .opapiri { display: grid; gap: var(--s5); margin-top: var(--s7); padding: var(--s6) var(--s5); border-radius: var(--r-md); background: var(--ink); color: rgba(255, 255, 255, .72); } @media (min-width: 900px) { .opapiri { grid-template-columns: 1fr 1.6fr; align-items: center; padding: var(--s7); } } .opapiri h2 { color: #fff; font-size: var(--t-h2, 1.75rem); font-weight: 800; letter-spacing: -.02em; } .opapiri p { margin-top: 4px; } .opapiri ul { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; } .opapiri li { display: flex; gap: var(--s3); font-size: var(--t-sm); line-height: 1.5; } .opapiri li b { color: #fff; } .opapiri svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--lime); fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .opapiri.block { padding-top: var(--s6); } /* područje */ .ogradovi { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; } .ogradovi li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; } .ogradovi li:first-child { background: var(--ink); border-color: var(--ink); color: #fff; } /* desktop: obrazac lijevo, ljepljiva kartica "Radije porukom?" desno */ .oaside { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); padding: var(--s5); border-radius: var(--r-md); background: radial-gradient(80% 70% at 80% 20%, #E6F69E 0%, rgba(230, 246, 158, 0) 70%), linear-gradient(160deg, #BEE03A 0%, #B4D82E 55%, #A2C523 100%); } .oaside__h { font-size: 1.25rem; font-weight: 800; } .oaside p:not(.oaside__h) { font-size: var(--t-sm); color: #2C3410; } .oaside__call { justify-content: center; gap: 8px; min-height: 52px; background: var(--ink); color: #fff; border-color: var(--ink); } .oaside__call svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .oaside__s { font-size: var(--t-xs) !important; } @media (min-width: 1024px) { .oform-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--s6); align-items: start; } .oform__head { grid-column: 1 / -1; } .oform { max-width: none; } .oaside { position: sticky; top: 24px; margin-top: var(--s5); } } /* telefon: kartica bi ponovila dugmad iz koraka 3, pa se ne prikazuje */ @media (max-width: 1023px) { .oaside { display: none; } } /* ---- potvrda.css ---- */ /* POTVRDA NARUDŽBE: animacija kvačice, pa koraci "Šta slijedi" jedan za drugim. "Smanji pokrete" = sve odmah. */ .ty { padding-bottom: var(--s7); } .ty__hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); max-width: 640px; margin-top: var(--s7); } .ty__check { width: 96px; height: 96px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(180, 216, 46, .5); animation: ty-pop .5s cubic-bezier(.2, .9, .3, 1.3) both, ty-glow 1.6s .5s ease-out; } .ty__check svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; } .ty__ring { stroke: rgba(17, 19, 18, .12); stroke-width: 3; } .ty__tick { stroke-width: 7; stroke-dasharray: 60; stroke-dashoffset: 60; animation: ty-draw .45s .35s ease-out forwards; } @keyframes ty-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes ty-draw { to { stroke-dashoffset: 0; } } @keyframes ty-glow { 0% { box-shadow: 0 0 0 0 rgba(180, 216, 46, .55); } 100% { box-shadow: 0 0 0 28px rgba(180, 216, 46, 0); } } .ty__hero h1 { margin-top: var(--s2); font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .ty__hero h1:focus { outline: none; } .ty__num { font-size: var(--t-sm); color: var(--muted); } .ty__num b { color: var(--ink); font-size: 1.0625rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; } .ty__lead { max-width: 46ch; color: var(--muted); line-height: 1.55; } .ty__item { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: var(--s3); width: 100%; margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); text-align: left; } .ty__item img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--r-xs); } .ty__t { font-size: var(--t-sm); font-weight: 700; line-height: 1.3; } .ty__s { font-size: var(--t-xs); color: var(--muted); } .ty__item b { font-size: 1.125rem; font-variant-numeric: tabular-nums; } .ty__next { max-width: 640px; margin-top: var(--s7); } .ty__next h2 { font-size: var(--t-h3); font-weight: 800; letter-spacing: -.015em; margin-bottom: var(--s4); } /* koraci: linija napretka se puni odozgo, svaki korak se pojavi s kašnjenjem (--i postavlja JS) */ .steps { position: relative; margin: 0; padding: 0; list-style: none; } .steps::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--line); } .steps::after { content: ""; position: absolute; left: 23px; top: 24px; width: 2px; height: 0; background: var(--lime); animation: ty-line 1.4s 1s cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes ty-line { to { height: 48px; } } .step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--s4); padding-bottom: var(--s5); opacity: 0; transform: translateY(8px); animation: ty-in .5s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.9s + var(--i, 0) * .18s); } .step:last-child { padding-bottom: 0; } @keyframes ty-in { to { opacity: 1; transform: none; } } .step__ico { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 2px solid var(--line); } .step__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .step.is-done .step__ico { background: var(--lime); border-color: var(--lime); } .step b { display: block; padding-top: 4px; font-size: 1.0625rem; font-weight: 700; } .step p { margin-top: 2px; font-size: var(--t-sm); color: var(--muted); line-height: 1.55; } .step a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .ty__safe { max-width: 640px; margin-top: var(--s6); } .ty__safe ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; border-radius: var(--r-md); overflow: hidden; background: rgba(255, 255, 255, .12); } @media (min-width: 600px) { .ty__safe ul { grid-template-columns: repeat(3, 1fr); } } .ty__safe li { display: flex; flex-direction: column; gap: 4px; padding: var(--s4); background: var(--ink); color: rgba(255, 255, 255, .72); font-size: var(--t-sm); } .ty__safe b { color: var(--lime); font-size: 1.0625rem; } .ty__act { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); max-width: 640px; margin-top: var(--s6); } .ty__act .btn { justify-content: center; gap: 8px; min-height: 52px; } .ty__act .btn svg:not(.ch-ico) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ty__act p { grid-column: 1 / -1; text-align: center; font-size: var(--t-sm); color: var(--muted); } .ty__act p a { color: var(--ink); font-weight: 700; } @media (max-width: 599px) { .ty__act { grid-template-columns: 1fr; } .ty__hero { margin-top: var(--s5); } } @media (prefers-reduced-motion: reduce) { .ty__check, .ty__tick, .step, .steps::after { animation: none; } .ty__tick { stroke-dashoffset: 0; } .step { opacity: 1; transform: none; } .steps::after { height: 48px; } } .step[hidden] { display: none; } /* nacin: slanje (d) ili preuzimanje (p); prikazuje se samo jedan skup tekstova i koraka */ body[data-mode="dostava"] [data-m="p"], body[data-mode="preuzimanje"] [data-m="d"] { display: none !important; } /* linija ide ISPOD ikona (korak pravi svoj sloj zbog animacije, pa ga dižemo iznad linije) i puni se kroz sva 3 koraka */ .steps::before, .steps::after { z-index: 0; } .step { z-index: 1; } .step__ico { background: #fff; } @keyframes ty-line { to { height: calc(100% - 48px); } } .steps::after { animation-duration: 1.2s; animation-delay: 1.1s; } /* koraci se pale redom dok linija stigne do njih */ .step .step__ico { transition: background .3s, border-color .3s; } .step.is-lit .step__ico { background: var(--lime); border-color: var(--lime); } @media (prefers-reduced-motion: reduce) { .steps::after { height: calc(100% - 48px); } } /* KORACI v2: priča korak po korak. Sva tri koraka se odmah vide blijedo (kupac zna šta ga čeka), zatim linija glatko klizne do svakog koraka, korak se upali (ikona zeleni, tekst puna boja) i zadrži se dok se čita. */ .steps::after { animation: none; height: var(--fill, 0px); transition: height .9s cubic-bezier(.65, 0, .35, 1); } .step { animation: none; opacity: 1; transform: none; } .step > div { opacity: .38; transform: translateY(6px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); } .step .step__ico { transition: background .45s ease, border-color .45s ease, box-shadow .6s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2); } .step .step__ico svg { opacity: .45; transition: opacity .45s ease; } .step.is-lit > div { opacity: 1; transform: none; } .step.is-lit .step__ico { background: var(--lime); border-color: var(--lime); transform: scale(1.06); box-shadow: 0 0 0 6px rgba(180, 216, 46, .22); } .step.is-lit .step__ico svg { opacity: 1; } .step.is-past .step__ico { transform: none; box-shadow: none; } @media (prefers-reduced-motion: reduce) { .steps::after, .step > div, .step .step__ico, .step .step__ico svg { transition: none; } } /* način otkup (o): elementi s data-m="o" samo za otkup; "d p" = i za slanje i za preuzimanje */ body[data-mode="otkup"] [data-m="d"], body[data-mode="otkup"] [data-m="p"], body[data-mode="otkup"] [data-m="d p"], body:not([data-mode="otkup"]) [data-m="o"] { display: none !important; } .ty__item--car { grid-template-columns: 56px 1fr; } .ty__carico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lime); } .ty__carico svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .step__btn { margin-top: var(--s3); min-height: 48px; gap: 8px; justify-content: center; } @media (max-width: 599px) { .step__btn { width: 100%; } } .step { grid-template-columns: 48px minmax(0, 1fr); } .step__btn { max-width: 100%; } /* ---- wagen2: dodaci za WordPress ---- */ .pager .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-decoration: none; } .pager a.page-numbers:hover { border-color: var(--line-strong); } .pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; } .pager .page-numbers.dots { border-color: transparent; } a.chip-x, a.chip-clear { text-decoration: none; color: var(--ink); } a.chip-clear { text-decoration: underline; color: var(--muted); display: inline-flex; align-items: center; } html.is-loading .res { opacity: .55; transition: opacity .2s; pointer-events: none; } .ty__t a { color: inherit; text-decoration: none; } .gal__slide .card__noimg { aspect-ratio: 4 / 3; background: var(--bg-2, #F4F6F2); } .flt__form noscript .btn { width: 100%; margin-top: var(--s3); } .vbar { background: #F4F6F2; border-bottom: 1px solid var(--line); } .vbar[hidden] { display: none; } .vbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; font-size: var(--t-sm); } .vbar__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); } .vbar__t a { color: var(--ink); font-weight: 700; } .vbar__x { flex: none; min-height: 44px; padding: 0 4px 0 12px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: underline; } .vbar__x span { display: inline-block; font-size: 1.2em; line-height: 1; }