/* ========================================================================== TPL — oblici sekcija (kockice tpl-*), zaglavlje, podnožje Postolar-Ilić · prototip v2 · TPL Ovaj list se u E5 veže KAO ZADNJI SLOJ, iza style.css i media_queries.css. Ne mijenjati .wrapper ni lanac kontejnera jezgre. ========================================================================== */ /* E5: style.css postavlja font izravno na span — naslov nasljeđuje sve */ /* zrno kože i papira */ /* ---------- ZAGLAVLJE ---------- */ .zaglavlje{position:sticky;top:0;z-index:60;background:var(--bordo);transition:background .35s,box-shadow .35s,backdrop-filter .35s} .zaglavlje.skrol{background:rgba(38,9,8,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px -18px rgba(0,0,0,.7)} .zg-in{max-width:var(--sirina);margin:0 auto;padding:10px 26px;display:flex;align-items:center;justify-content:space-between;gap:24px} .logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--papir);min-height:56px} .logo img{height:58px;width:auto} .logo .logo-txt{display:none;font-family:var(--f-disp);font-size:24px;letter-spacing:-.01em} .logo.nema .logo-txt{display:block} .logo.nema .logo-txt b{color:var(--mesing);font-weight:500;font-style:italic} /* jezgra ispisuje ul.mega-menu, ne ul.menu_slick — izmjereno 08.10.2026. na testu */ .nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap;min-width:0} .nav ul li{margin:0} .nav a{display:block;padding:10px 14px;color:rgba(244,235,223,.82);text-decoration:none;font:500 14px/1 var(--f-ui);letter-spacing:.02em;border-radius:999px;transition:color .2s,background .2s} .nav a:hover,.nav a.aktivan{color:var(--papir);background:rgba(244,235,223,.08)} .nav li:last-child a{color:var(--mesing)} .burger{display:none;background:none;border:1px solid var(--linija-svj);color:var(--papir);width:46px;height:46px;border-radius:12px;cursor:pointer} .burger span{display:block;width:20px;height:2px;margin:4px auto;background:currentColor;transition:transform .25s,opacity .25s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .sav{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;pointer-events:none} .sav i{display:block;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:repeating-linear-gradient(90deg,var(--mesing) 0 9px,transparent 9px 15px)} @supports (animation-timeline:scroll()){ .sav i{animation:sav linear both;animation-timeline:scroll(root)} } @keyframes sav{to{transform:scaleX(1)}} /* ---------- SEGMENT: zajednička glava ---------- */ .seg{padding:clamp(72px,9vw,128px) 26px} .seg>*{max-width:var(--sirina);margin-left:auto;margin-right:auto} .seg>article{display:flex;flex-direction:column;max-width:var(--sirina)} article:is(:has(>h1),:has(>h2))>em{order:-1;font:500 12px/1 var(--f-mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--konjak);display:flex;align-items:center;gap:12px;margin-bottom:22px} article:is(:has(>h1),:has(>h2))>em::before{content:"";width:34px;height:0;border-top:2px dashed currentColor} .mod-tamna article:is(:has(>h1),:has(>h2))>em{color:var(--mesing)} article:is(:has(>h1),:has(>h2)) h2{font-size:clamp(34px,4.6vw,62px);max-width:16ch;margin-bottom:22px} article:is(:has(>h1),:has(>h2))>p{max-width:60ch;color:var(--tekst-2);font-size:18px} /* gumbi */ /* foto okvir i fallback */ /* reveal */ /* ---------- HERO ---------- */ .tpl-hero{padding-top:clamp(40px,5vw,72px);padding-bottom:0;overflow:hidden} .tpl-hero>article{display:grid;grid-template-columns:1.02fr .98fr;column-gap:56px;align-items:center;min-height:min(78vh,760px);position:relative} .tpl-hero>article>em{grid-column:1;grid-row:1;align-self:end;order:0;font:500 13px/1 var(--f-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--mesing);display:flex;align-items:center;gap:12px;margin-bottom:26px} .tpl-hero>article>em::before{content:"";width:34px;border-top:2px dashed currentColor} .tpl-hero h1{grid-column:1;grid-row:2;font-size:clamp(48px,7.4vw,108px);line-height:.96;font-weight:400;letter-spacing:-.03em;margin-bottom:28px} .tpl-hero h1 b{display:block;font-weight:300} .tpl-hero .uvodni{grid-column:1;grid-row:3;font-size:19px;color:rgba(244,235,223,.76);max-width:46ch} .tpl-hero .uvodni b{color:var(--papir);font-weight:600} .tpl-hero .gumbi{grid-column:1;grid-row:4;margin-top:10px} .tpl-hero .radno{grid-column:1;grid-row:5;align-self:start;margin-top:30px} .tpl-hero>article>:is(figure,.slika){grid-column:2;grid-row:1 / span 5;position:relative;height:100%;min-height:560px;display:flex;align-items:center;justify-content:center} .tpl-hero :is(figure,.slika)::before{content:"";position:absolute;width:118%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(217,145,79,.34),rgba(184,101,47,.12) 55%,transparent 72%);left:50%;top:52%;transform:translate(-50%,-50%);z-index:0} .tpl-hero :is(figure,.slika) .godina{position:absolute;right:-2%;top:2%;font:300 clamp(120px,17vw,250px)/.8 var(--f-disp);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(205,165,107,.28);z-index:0;user-select:none} .tpl-hero :is(figure,.slika) img.cipela{position:relative;z-index:2;height:min(640px,72vh);width:auto;object-fit:contain;transform:rotate(-14deg) translateY(10px);filter:drop-shadow(0 40px 38px rgba(0,0,0,.55));animation:lebdi 7s ease-in-out infinite} @keyframes lebdi{50%{transform:rotate(-12deg) translateY(-6px)}} .tpl-hero :is(figure,.slika).nema{min-height:420px} .tpl-hero :is(figure,.slika).nema::after{content:"FOTO · par cipela";position:absolute;inset:20% 18%;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(244,235,223,.3);border-radius:50%;font:500 11px var(--f-mono);letter-spacing:.14em;color:rgba(244,235,223,.6)} .pecat{position:absolute;left:0;bottom:12%;width:170px;height:170px;z-index:3;color:var(--papir)} .pecat svg{width:100%;height:100%;animation:vrti 36s linear infinite} .pecat b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:400 34px/1 var(--f-disp);color:var(--mesing)} .pecat b small{font:500 10px/1 var(--f-mono);letter-spacing:.18em;color:var(--papir);margin-bottom:6px} @keyframes vrti{to{transform:rotate(360deg)}} .traka{margin-top:clamp(40px,5vw,70px);border-top:1px solid var(--linija-svj);overflow:hidden;max-width:none!important;margin-left:-26px!important;margin-right:-26px!important} .traka div{display:flex;width:max-content;animation:traka 38s linear infinite} .traka p{margin:0;display:flex;white-space:nowrap} .traka span{font:500 13px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,235,223,.6);padding:22px 28px;display:flex;align-items:center;gap:28px} .traka span::after{content:"✦";color:var(--konjak-svj);font-size:11px} @keyframes traka{to{transform:translateX(-50%)}} /* ---------- OBAVIJEST ---------- */ .seg-obavijest{padding:0 26px;background:var(--pijesak)} .seg-obavijest>article{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:22px;padding:20px 0} .seg-obavijest h2{font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bordo);display:flex;align-items:center;gap:10px;margin:0} .seg-obavijest h2::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--konjak);box-shadow:0 0 0 4px rgba(184,101,47,.2)} .seg-obavijest>article>em{font-style:normal;color:var(--tekst);font-size:15px;line-height:1.5} .seg-obavijest .zatvori{background:none;border:0;width:36px;height:36px;border-radius:50%;cursor:pointer;color:var(--tekst-2);font-size:20px} .seg-obavijest .zatvori:hover{background:rgba(27,14,11,.07)} /* ---------- BROJKE ---------- */ .tpl-brojke{padding-top:0;padding-bottom:0;background:var(--bordo)} .tpl-brojke{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-left:max(26px,calc((100% - 1220px)/2));padding-right:max(26px,calc((100% - 1220px)/2))} .tpl-brojke>article{max-width:none;margin:0;padding:clamp(34px,4vw,54px) 28px;border-left:1px solid var(--linija-svj);border-top:1px solid var(--linija-svj)} .tpl-brojke>article:last-child{border-right:1px solid var(--linija-svj)} .tpl-brojke .broj{font:300 clamp(44px,5vw,74px)/1 var(--f-disp);letter-spacing:-.03em;color:var(--papir);margin-bottom:12px;font-variant-numeric:tabular-nums} .tpl-brojke .broj b{font-size:.45em;color:var(--konjak-svj);vertical-align:top;margin-left:2px;font-style:italic} .tpl-brojke p{margin:0;font:500 12px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(244,235,223,.6);max-width:26ch} /* ---------- POPRAVCI + ANATOMIJA (potpisni element) ---------- */ .seg-popravci{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,5vw,80px);align-items:start;padding-left:max(26px,calc((100% - 1220px)/2));padding-right:max(26px,calc((100% - 1220px)/2))} .seg-popravci>*{max-width:none;margin:0} .seg-popravci>article:is(:has(>h1),:has(>h2)){position:sticky;top:120px} .seg-popravci article:is(:has(>h1),:has(>h2)) h2{max-width:11ch} .znacke{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 26px;padding:0;list-style:none} .znacke b{font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:1px dashed rgba(27,14,11,.3);border-radius:8px;color:var(--bordo)} .t-don{left:65%;top:83%} .t-gornjiste{left:30%;top:63%} .t-vrh{left:87%;top:68%} .t-vezice{left:52%;top:31%} .t-podstava{left:24%;top:45%} /* ---------- KVALITETA ---------- */ .tpl-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-left:max(26px,calc((100% - 1220px)/2));padding-right:max(26px,calc((100% - 1220px)/2))} .tpl-grid-4>*{max-width:none;margin:0} .tpl-grid-4>article:is(:has(>h1),:has(>h2)){grid-column:span 4;display:grid;grid-template-columns:1fr 1fr;column-gap:60px;align-items:end;margin-bottom:34px} .tpl-grid-4>article:is(:has(>h1),:has(>h2))>em{grid-column:1} .tpl-grid-4>article:is(:has(>h1),:has(>h2)) h2{grid-column:1;margin:0;max-width:14ch} .tpl-grid-4>article:is(:has(>h1),:has(>h2))>p{grid-column:2;grid-row:2;margin:0} .kartica-k{position:relative;background:#fff;border:1px solid var(--linija);border-radius:var(--r);padding:30px 26px 28px;overflow:hidden;transition:transform .35s,box-shadow .35s} .kartica-k::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--konjak);transform:scaleY(0);transform-origin:top;transition:transform .45s} .kartica-k:hover{transform:translateY(-6px);box-shadow:var(--sjena)} .kartica-k:hover::before{transform:scaleY(1)} .kartica-k .ikona{width:54px;height:54px;border-radius:50%;background:var(--papir);display:grid;place-items:center;margin-bottom:26px;color:var(--bordo)} .kartica-k .ikona svg{width:28px;height:28px} .kartica-k .oznaka{position:absolute;right:22px;top:26px;font:500 12px var(--f-mono);color:var(--tekst-2);letter-spacing:.1em} .kartica-k h3{font-size:24px;margin-bottom:12px} .kartica-k p{margin:0;color:var(--tekst-2);font-size:15px} .kartica-k.istaknuta{background:var(--bordo);color:var(--papir);border-color:var(--bordo)} .kartica-k.istaknuta p,.kartica-k.istaknuta .oznaka{color:rgba(244,235,223,.7)} .kartica-k.istaknuta .ikona{background:rgba(205,165,107,.16);color:var(--mesing)} /* ---------- CJENIK ---------- */ .tpl-cjenik{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);column-gap:clamp(28px,4vw,64px);align-items:start;padding-left:max(26px,calc((100% - 1220px)/2));padding-right:max(26px,calc((100% - 1220px)/2))} .tpl-cjenik>*{max-width:none;margin:0;grid-column:2} .tpl-cjenik>article:is(:has(>h1),:has(>h2)){grid-column:1 / span 2;display:grid;grid-template-columns:1fr 1fr;column-gap:60px;align-items:end;margin-bottom:46px} .tpl-cjenik>article:is(:has(>h1),:has(>h2))>em{grid-column:1} .tpl-cjenik>article:is(:has(>h1),:has(>h2)) h2{grid-column:1;margin:0} .tpl-cjenik>article:is(:has(>h1),:has(>h2))>p{grid-column:2;grid-row:2;margin:0} /* ---------- REMENJE ---------- */ .seg-remenje{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,80px);align-items:center;padding-left:max(26px,calc((100% - 1220px)/2));padding-right:max(26px,calc((100% - 1220px)/2));background:var(--tinta)} .seg-remenje>*{max-width:none;margin:0} .seg-remenje article:is(:has(>h1),:has(>h2)) h2{max-width:13ch} .seg-remenje .gumbi{margin-top:24px} /* ---------- O NAMA ---------- */ .seg-onama{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,90px);align-items:center;padding-left:max(26px,calc((100% - 1220px)/2));padding-right:max(26px,calc((100% - 1220px)/2))} .seg-onama>*{max-width:none;margin:0} .seg-onama article:is(:has(>h1),:has(>h2)) h2{max-width:12ch} .seg-onama blockquote{margin:10px 0 26px;padding:6px 0 6px 22px;border-left:3px solid var(--konjak);font:italic 300 22px/1.45 var(--f-disp);color:var(--tekst);max-width:34ch} .seg-onama blockquote .potpis{display:block;margin-top:10px;font:500 12px/1 var(--f-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-2)} .onama-medij{position:relative;padding:0 0 70px 0} .onama-medij .foto{aspect-ratio:16/9;box-shadow:var(--sjena)} .onama-medij .foto img{filter:sepia(.12) contrast(1.04)} .onama-medij figcaption{position:absolute;left:18px;top:18px;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;background:rgba(27,14,11,.72);color:var(--papir);padding:8px 10px;border-radius:6px} .onama-medij .priznanje{position:absolute;right:-10px;bottom:0;width:38%;aspect-ratio:1;border-radius:10px;border:8px solid #fff;box-shadow:var(--sjena);transform:rotate(4deg);background:#eee} .onama-medij .priznanje{overflow:visible} .onama-medij .priznanje img{object-fit:cover;object-position:50% 20%;border-radius:3px} .onama-medij .priznanje.nema::after{border-radius:3px} .onama-medij .priznanje span{position:absolute;left:-12px;top:-14px;background:var(--mesing);color:var(--tinta);font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;border-radius:6px;transform:rotate(-6deg);z-index:2} /* ---------- VREMEPLOV (tri generacije) ---------- */ .tpl-vremeplov{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:18px;padding-left:max(26px,calc((100% - 1220px)/2));padding-right:max(26px,calc((100% - 1220px)/2));position:relative} .tpl-vremeplov>*{max-width:none;margin:0} .tpl-vremeplov>article:is(:has(>h1),:has(>h2)){grid-column:span 6;margin-bottom:56px;display:grid;grid-template-columns:1fr 1fr;column-gap:60px;align-items:end} .tpl-vremeplov>article:is(:has(>h1),:has(>h2))>em{grid-column:1} .tpl-vremeplov>article:is(:has(>h1),:has(>h2)) h2{grid-column:1;margin:0} .tpl-vremeplov>article:is(:has(>h1),:has(>h2))>p{grid-column:2;grid-row:2;margin:0} .tpl-vremeplov>article:has(>h3){position:relative;padding-top:44px} .tpl-vremeplov>article:has(>h3)::before{content:"";position:absolute;left:0;right:-18px;top:9px;border-top:2px dashed rgba(205,165,107,.45);transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)} .tpl-vremeplov>article:has(>h3):last-child::before{right:0} .tpl-vremeplov>article:has(>h3)::after{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--bordo);border:2px solid var(--mesing)} .tpl-vremeplov>article:has(>h3).in::before{transform:scaleX(1)} .tpl-vremeplov>article:has(>h3) h3{font:300 clamp(34px,3.2vw,48px)/1 var(--f-disp);color:var(--mesing);letter-spacing:-.02em;margin-bottom:12px} .tpl-vremeplov>article:has(>h3) p{font-size:15px;color:rgba(244,235,223,.75);margin:0} .tpl-vremeplov>article:has(>h3) :is(figure,.slika){margin-top:18px;aspect-ratio:4/3;border-radius:10px} .tpl-vremeplov>article:has(>h3) :is(figure,.slika) img{filter:sepia(.25) saturate(.85)} .tpl-vremeplov>article:has(>h3):hover :is(figure,.slika) img{filter:none} .tpl-vremeplov>article:has(>h3).danas::after{background:var(--konjak-svj);border-color:var(--konjak-svj);box-shadow:0 0 0 6px rgba(217,145,79,.2)} /* ---------- KONTAKT ---------- */ .tpl-kontakt{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;padding-left:max(26px,calc((100% - 1220px)/2));padding-right:max(26px,calc((100% - 1220px)/2))} .tpl-kontakt>*{max-width:none;margin:0} .tpl-kontakt>article:is(:has(>h1),:has(>h2)){grid-column:span 2;margin-bottom:28px} .tpl-kontakt>article:is(:has(>h1),:has(>h2)) h2{max-width:none} .kontakt-kartica{background:var(--bordo);color:var(--papir);border-radius:22px;padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden} .kontakt-kartica::before{content:"";position:absolute;inset:12px;border:1.5px dashed rgba(205,165,107,.28);border-radius:14px;pointer-events:none} .kontakt-kartica h3{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mesing);margin-bottom:10px} .kontakt-kartica p{margin:0} .kontakt-kartica .velik{font:400 clamp(24px,2.4vw,32px)/1.2 var(--f-disp)} .kontakt-kartica a{text-decoration:none} .kontakt-kartica a:hover{color:var(--mesing)} .kontakt-kartica ul{list-style:none;margin:0;padding:0} .kontakt-kartica li{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 16px;padding:10px 0;border-bottom:1px solid var(--linija-svj);font-size:15px} .kontakt-kartica li span:last-child{font-family:var(--f-mono);font-size:13px;white-space:nowrap} .kontakt-kartica li.danas{color:var(--mesing)} .kontakt-kartica li.danas span:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:9px;transform:translateY(-2px)} .kontakt-kartica .status{align-self:flex-start;background:rgba(0,0,0,.2)} .kontakt-medij{position:relative;border-radius:22px;overflow:hidden;min-height:460px} .kontakt-medij .foto{position:absolute;inset:0;border-radius:0} .kontakt-medij .foto img{object-position:50% 40%} .kontakt-medij .preko{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;background:rgba(252,248,242,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:16px;padding:16px 18px} .kontakt-medij .preko p{margin:0;font:500 14px/1.4 var(--f-ui)} .kontakt-medij .preko p span{display:block;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-2);margin-bottom:5px} /* ---------- ZAVRŠNI POZIV ---------- */ .tpl-cta{text-align:center;background:var(--bordo-2);overflow:hidden} .tpl-cta>article{display:flex;flex-direction:column;align-items:center} .tpl-cta>article>em{order:-1;font:italic 300 22px/1 var(--f-disp);color:var(--mesing);margin-bottom:22px} .tpl-cta h2{font-size:clamp(40px,6vw,84px);font-weight:400;max-width:15ch;margin-bottom:22px} .tpl-cta p{color:rgba(244,235,223,.75);font-size:18px;max-width:46ch} .tpl-cta .gumbi{justify-content:center;margin-top:16px} .tpl-cta>:is(figure,.slika).pozadina{position:absolute;inset:0;max-width:none;margin:0;z-index:-2;border-radius:0} .tpl-cta>:is(figure,.slika).pozadina img{width:100%;height:100%;object-fit:cover;opacity:.26;filter:sepia(.5) saturate(.8)} .tpl-cta>:is(figure,.slika).pozadina::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(74,21,17,.35),rgba(49,9,9,.92) 70%);z-index:1} .tpl-cta .ukras{position:absolute;inset:auto 0 -40px 0;height:150px;opacity:.14;pointer-events:none;z-index:-1} /* ---------- PODNOŽJE ---------- Pisano preko STVARNOG ispisa tokena, izmjereno 08.10.2026. na testu: footer.podnozje > div.pd-in > div.pd-red (pd-logo + pd-kontakt + pd-social) + div.pd-dno. pd-kontakt puni {%master_data%}; dok je prazan, ne smije ostaviti rupu u rasporedu. */ .podnozje{background:var(--tinta);color:rgba(244,235,223,.7);padding:clamp(44px,5vw,68px) 26px 26px;font-size:14px} .podnozje .pd-in{max-width:var(--sirina);margin:0 auto} .podnozje .pd-red{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between; gap:clamp(24px,4vw,56px);padding-bottom:30px;border-bottom:1px solid var(--linija-svj)} .podnozje .pd-logo{flex:0 0 auto} .podnozje .pd-logo img{height:68px;width:auto;display:block} .podnozje .pd-logo.nema::before{content:"Postolar Ilić";display:block;font:400 26px var(--f-disp);color:var(--papir)} .podnozje .pd-kontakt{flex:1 1 320px;min-width:0} .podnozje .pd-kontakt > p:empty{display:none} .podnozje .pd-kontakt p{margin:0 0 5px;line-height:1.6} .podnozje .pd-kontakt a{text-decoration:none} .podnozje .pd-kontakt a:hover{color:var(--papir)} /* društvene mreže: ikona je PNG iz jezgre — ne diramo je, stavljamo je u naš krug */ .podnozje .pd-social{flex:0 0 auto} .podnozje .pd-social ul{list-style:none;margin:0;padding:0;display:flex;gap:10px} .podnozje .pd-social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%; border:1px solid var(--linija-svj);transition:border-color .25s,background .25s} .podnozje .pd-social a:hover{border-color:var(--mesing);background:rgba(205,165,107,.12)} .podnozje .pd-social img{width:19px;height:19px;filter:brightness(0) invert(1);opacity:.72;transition:opacity .25s} .podnozje .pd-social a:hover img{opacity:1} .podnozje .pd-dno{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between; gap:10px 24px;padding-top:22px;font-size:12.5px;line-height:1.7;color:rgba(244,235,223,.5)} .podnozje .pd-dno a{color:rgba(244,235,223,.72);text-decoration:none; border-bottom:1px solid rgba(244,235,223,.2);padding-bottom:1px;white-space:nowrap;margin-left:18px} .podnozje .pd-dno a:hover{color:var(--papir);border-color:var(--mesing)} /* ---------- MOBILNA TRAKA ---------- */ .mob-traka{display:none} /* ---------- LIGHTBOX ---------- */ /* ---------- PRIJELOMI ---------- */ @media (max-width:1040px){ .tpl-hero>article{grid-template-columns:1fr;column-gap:0} .tpl-hero>article>:is(figure,.slika){grid-column:1;grid-row:6;min-height:440px;margin-top:10px} .tpl-hero :is(figure,.slika) img.cipela{height:440px} .seg-popravci,.seg-remenje,.seg-onama,.tpl-kontakt{grid-template-columns:1fr} .seg-popravci>article:is(:has(>h1),:has(>h2)){position:static} .onama-medij .priznanje{right:10px} .tpl-kontakt>article:is(:has(>h1),:has(>h2)){grid-column:auto} .tpl-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .tpl-grid-4>article:is(:has(>h1),:has(>h2)){grid-column:span 2} .tpl-vremeplov{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px} .tpl-vremeplov>article:is(:has(>h1),:has(>h2)){grid-column:span 3} .tpl-vremeplov>article:has(>h3):nth-child(3n+1)::before{right:0} .tpl-cjenik{grid-template-columns:minmax(0,1fr)} .tpl-cjenik>*{grid-column:1} .tpl-cjenik>article:is(:has(>h1),:has(>h2)){grid-column:1} } @media (max-width:900px){ .nav{position:absolute;left:0;right:0;top:100%;background:rgba(38,9,8,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px 16px 18px;display:none} .nav.otvoren{display:block} .nav ul{flex-direction:column} .nav a{padding:15px 12px;font-size:17px;border-radius:10px} .burger{display:block} .tpl-brojke{grid-template-columns:repeat(2,minmax(0,1fr))} .pd-red{grid-template-columns:1fr 1fr} .pd-red>div:first-child{grid-column:span 2} } @media (max-width:720px){ .seg{padding-left:18px;padding-right:18px} .seg-popravci,.seg-remenje,.seg-onama,.tpl-kontakt,.tpl-grid-4,.tpl-cjenik,.tpl-vremeplov,.tpl-brojke{padding-left:18px;padding-right:18px} .zg-in{padding:8px 18px} .logo img{height:48px} article:is(:has(>h1),:has(>h2))>p,.tpl-hero .uvodni{font-size:17px} .tpl-hero>article{min-height:0} .tpl-hero>article>:is(figure,.slika){min-height:360px} .tpl-hero :is(figure,.slika) img.cipela{height:360px} .pecat{width:120px;height:120px;bottom:4%} .pecat b{font-size:24px} .traka{margin-left:-18px!important;margin-right:-18px!important} .gumbi .gumb{flex:1 1 auto;justify-content:center} .seg-obavijest{padding:0 18px} .seg-obavijest>article{grid-template-columns:1fr auto;gap:8px 12px;padding:16px 0} .seg-obavijest>article>em{grid-column:span 2;grid-row:2} .seg-obavijest .poveznica{grid-row:3} .seg-obavijest .zatvori{grid-column:2;grid-row:1} .tpl-brojke>article{padding:28px 18px} .tpl-grid-4{grid-template-columns:minmax(0,1fr)} .tpl-grid-4>article:is(:has(>h1),:has(>h2)),.tpl-cjenik>article:is(:has(>h1),:has(>h2)),.tpl-vremeplov>article:is(:has(>h1),:has(>h2)){grid-column:auto;grid-template-columns:1fr;row-gap:0} .tpl-grid-4>article:is(:has(>h1),:has(>h2))>p,.tpl-cjenik>article:is(:has(>h1),:has(>h2))>p,.tpl-vremeplov>article:is(:has(>h1),:has(>h2))>p{grid-column:1;grid-row:auto;margin-top:18px} .tpl-vremeplov{grid-template-columns:minmax(0,1fr);row-gap:0} .tpl-vremeplov>article:has(>h3){padding:0 0 34px 34px} .tpl-vremeplov>article:has(>h3)::before{left:7px;right:auto;top:18px;bottom:0;border-top:0;border-left:2px dashed rgba(205,165,107,.45);transform-origin:top;transform:scaleY(0)} .tpl-vremeplov>article:has(>h3).in::before{transform:scaleY(1)} .tpl-vremeplov>article:has(>h3):last-child::before{display:none} .tpl-vremeplov>article:has(>h3)::after{top:4px} .tpl-vremeplov>article:has(>h3) :is(figure,.slika){max-width:300px;aspect-ratio:4/3} .onama-medij .priznanje{width:44%;right:0} .kontakt-medij{min-height:380px} .podnozje{padding-left:18px;padding-right:18px} .podnozje .pd-red{gap:24px} .podnozje .pd-logo img{height:56px} .podnozje .pd-dno a{margin-left:0;margin-right:16px} .mob-traka{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;height:66px;background:var(--tinta);border-top:1px solid var(--linija-svj)} .mob-traka a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--papir);text-decoration:none;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;border-right:1px solid var(--linija-svj)} .mob-traka a svg{width:20px;height:20px} .mob-traka a:last-child{background:var(--konjak);border:0} } @media (prefers-reduced-motion:reduce){ .tpl-vremeplov>article:has(>h3)::before{transform:none!important} .sav{display:none} } /* ========================================================================== NOVE KOCKICE za unutarnje predloške (osnovna, kontakt, gdpr). Idu u biblioteku kockica, ne u jednokratni CSS. Vidi kockice.md. ========================================================================== */ /* ---------- tpl-naslov · zaglavlje stranice (zona 2 osnovne i kontakta) ---------- Isti jezik kao uvod naslovnice: bordo podloga sa zrnom, mono nadnaslov s crtkanom crtom, i veliki obris riječi u pozadini kao što hero ima godinu. */ .tpl-naslov{background:var(--bordo);color:var(--papir);position:relative;overflow:hidden; padding-top:clamp(52px,6.5vw,96px);padding-bottom:clamp(48px,5.5vw,84px)} .tpl-naslov>article:is(:has(>h1),:has(>h2)){position:relative;z-index:2} .tpl-naslov>article:is(:has(>h1),:has(>h2))>em{color:var(--mesing)} .tpl-naslov h1{font-size:clamp(38px,5.4vw,76px);font-weight:400;letter-spacing:-.025em;max-width:20ch;margin-bottom:20px} .tpl-naslov>article:is(:has(>h1),:has(>h2))>p{color:rgba(244,235,223,.75);max-width:62ch;font-size:18px;margin:0} .tpl-naslov .putokaz{order:-2;margin:0 0 20px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px; font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,235,223,.55)} .tpl-naslov .putokaz li+li::before{content:"/";margin-right:8px;color:var(--konjak)} .tpl-naslov .putokaz a{text-decoration:none} .tpl-naslov .putokaz a:hover{color:var(--papir)} /* obris riječi u pozadini — iz data-obris na sekciji, ne iz sadržaja */ .tpl-naslov::after{content:attr(data-obris);position:absolute;right:-.04em;bottom:-.28em;z-index:0; font:300 clamp(120px,20vw,300px)/.8 var(--f-disp);letter-spacing:-.05em;color:transparent; -webkit-text-stroke:1px rgba(205,165,107,.16);pointer-events:none;user-select:none;white-space:nowrap} /* donji rub koji vodi u sljedeću sekciju */ .tpl-naslov::before{box-shadow:inset 0 -2px 0 0 rgba(205,165,107,.28)} /* ---------- tpl-clanak · tekst stranice (zona 3) ---------- Kartica slijedi redoslijed ispisa E5-a: naslov → em → :is(figure,.slika) → sadržaj. Na širokom je dvostupčana (slika desno, tekst lijevo) — raspored se radi PO VRSTI ELEMENTA, nikad po rednom broju kartice. */ .tpl-clanak>article{max-width:var(--sirina);margin-left:auto;margin-right:auto} .tpl-clanak>article:is(:has(>h1),:has(>h2)){margin-bottom:34px} .tpl-clanak>article:has(>h3){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr); column-gap:clamp(28px,4vw,64px);align-items:start; padding:clamp(26px,3vw,44px) 0;border-top:1.5px dashed var(--linija)} .tpl-clanak>article:has(>h3)>h3{grid-column:1;font-size:clamp(26px,3vw,40px);margin:0 0 10px} .tpl-clanak>article:has(>h3)>em{grid-column:1;font:500 12px/1 var(--f-mono);font-style:normal; letter-spacing:.16em;text-transform:uppercase;color:var(--konjak); display:flex;align-items:center;gap:12px;margin-bottom:18px;order:-1} .tpl-clanak>article:has(>h3)>em::before{content:"";width:28px;height:0;border-top:2px dashed currentColor} .tpl-clanak>article:has(>h3)>:is(figure,.slika){grid-column:2;grid-row:1 / span 4;margin:0;border-radius:var(--r); overflow:hidden;aspect-ratio:4/3;position:sticky;top:110px} .tpl-clanak>article:has(>h3)>:is(figure,.slika) img{width:100%;height:100%;object-fit:cover} .tpl-clanak>article:has(>h3)>:is(figure,.slika) figcaption{position:absolute;left:0;right:0;bottom:0; padding:22px 16px 12px;font:500 11px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase; color:var(--papir);background:linear-gradient(transparent,rgba(27,14,11,.82))} .tpl-clanak>article:has(>h3)>:is(p,ul,ol,blockquote,div.izdavatelj){grid-column:1;max-width:60ch;font-size:17.5px} .tpl-clanak >*:first-child{margin-top:0} .tpl-clanak >*:last-child{margin-bottom:0} .tpl-clanak h3{font-size:clamp(20px,2.1vw,25px);margin:30px 0 10px} .tpl-clanak ul,.tpl-clanak ol{margin:0 0 1.2em;padding-left:1.3em} .tpl-clanak li{margin-bottom:.5em} .tpl-clanak blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--konjak); font:italic 300 clamp(19px,2vw,23px)/1.45 var(--f-disp);color:var(--tekst)} .tpl-clanak blockquote cite{display:block;margin-top:10px;font:500 12px/1 var(--f-mono); font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-2)} /* ---------- tpl-prazno · zona bez sadržaja se ne vidi ---------- */ .seg:empty,.seg>article:empty{display:none} .tpl-prazno{padding:0} /* ---------- tpl-obrazac · kontakt forma (modul online-forms, zona 4) ---------- */ /* Stvarni razredi polja dolaze iz modula i mjere se na testu — ovdje ciljamo elemente, ne razrede, da CSS preživi bilo kakav omotač modula. */ .tpl-obrazac{background:var(--kost)} .tpl-obrazac>article:is(:has(>h1),:has(>h2)){margin-bottom:28px} .tpl-obrazac form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:780px} .tpl-obrazac label{display:block;font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-2);margin-bottom:8px} .tpl-obrazac input[type=text],.tpl-obrazac input[type=email],.tpl-obrazac input[type=tel],.tpl-obrazac select,.tpl-obrazac textarea{width:100%;padding:14px 16px;border:1px solid var(--linija);border-radius:12px;background:#fff;font:400 16px/1.4 var(--f-ui);color:var(--tekst)} .tpl-obrazac textarea{min-height:170px;resize:vertical} .tpl-obrazac input:focus,.tpl-obrazac textarea:focus,.tpl-obrazac select:focus{outline:2px solid var(--konjak);outline-offset:1px;border-color:var(--konjak)} .tpl-obrazac .polje-sire,.tpl-obrazac textarea,.tpl-obrazac .privola{grid-column:span 2} .tpl-obrazac .privola{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--tekst-2)} .tpl-obrazac .privola input[type=checkbox]{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--konjak)} .tpl-obrazac .privola a{color:var(--konjak)} /* jedini dopušteni !important u ovom paketu: gumb obrasca koji jezgra stilizira */ .tpl-obrazac button[type=submit],.tpl-obrazac input[type=submit]{grid-column:span 2;justify-self:start;width:auto!important;padding:15px 28px!important;border-radius:999px!important;border:0!important;background:var(--konjak)!important;color:#fff!important;font:600 15px/1 var(--f-ui)!important;cursor:pointer} .tpl-obrazac button[type=submit]:hover,.tpl-obrazac input[type=submit]:hover{background:var(--konjak-svj)!important} .tpl-obrazac .poruka{grid-column:span 2;padding:16px 18px;border-radius:12px;border:1.5px dashed rgba(184,101,47,.5);background:rgba(184,101,47,.07);margin:0} /* ---------- tpl-pravni · GDPR i pravni tekstovi (predložak gdpr, zona 2) ---------- Pravni dokument, ne članak: čitljiv stupac + bočna traka s podacima izdavatelja. */ .tpl-pravni{background:var(--kost)} .tpl-pravni>article:is(:has(>h1),:has(>h2)){max-width:var(--sirina);margin-bottom:34px;padding-bottom:26px; border-bottom:1.5px dashed var(--linija)} .tpl-pravni>article:is(:has(>h1),:has(>h2)) h1{font-size:clamp(30px,3.6vw,48px);font-weight:400;max-width:26ch;margin-bottom:14px} .tpl-pravni>article:is(:has(>h1),:has(>h2))>em{font:500 12px/1 var(--f-mono);font-style:normal;letter-spacing:.16em; text-transform:uppercase;color:var(--konjak);order:-1;display:block;margin-bottom:16px} .tpl-pravni>article:has(>h3){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px); column-gap:clamp(28px,4vw,56px);align-items:start;max-width:none} .tpl-pravni {grid-column:1;max-width:74ch;font-size:16.5px} .tpl-pravni >*:first-child{margin-top:0} .tpl-pravni h2{font-size:clamp(21px,2.3vw,28px);margin:40px 0 12px;padding-top:18px; border-top:1px solid var(--linija)} .tpl-pravni h2:first-of-type{border-top:0;padding-top:0} .tpl-pravni h3{font-size:18px;margin:26px 0 8px} .tpl-pravni ul{margin:0 0 1.2em;padding-left:1.3em} .tpl-pravni li{margin-bottom:.4em} /* bočna traka: tko obrađuje podatke — iz tokena postavki, ne iz teksta */ .tpl-pravni .izdavatelj{grid-column:2;position:sticky;top:110px;padding:22px 24px;border-radius:16px; background:#fff;border:1px solid var(--linija);font-size:14.5px;color:var(--tekst-2)} .tpl-pravni .izdavatelj h3{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase; color:var(--konjak);margin:0 0 12px} .tpl-pravni .izdavatelj p{margin:0 0 .5em} .tpl-pravni .izdavatelj a{color:var(--konjak)} .tpl-pravni .privole{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;grid-column:1;max-width:74ch} .tpl-pravni .privole li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:18px 20px; border:1px solid var(--linija);border-radius:14px;background:#fff} .tpl-pravni .privole input[type=checkbox]{width:20px;height:20px;margin:2px 0 0;accent-color:var(--konjak)} .tpl-pravni .privole b{font:500 16px/1.3 var(--f-ui)} .tpl-pravni .privole span{grid-column:2;color:var(--tekst-2);font-size:14.5px} /* ---------- produkcijska bilješka — vidljivo nije sadržaj klijenta ---------- */ [data-provjeri]{grid-column:1;margin:22px 0 0;padding:14px 18px;border-radius:12px; border-left:3px solid var(--konjak);background:rgba(184,101,47,.07); font:400 14.5px/1.55 var(--f-ui);color:var(--tekst-2)} [data-provjeri] b:first-child{display:inline-block;font:600 10.5px/1 var(--f-mono);letter-spacing:.12em; color:#fff;background:var(--konjak);padding:5px 8px;border-radius:5px;margin-right:9px; vertical-align:1px;text-transform:uppercase} .mod-tamna [data-provjeri]{background:rgba(205,165,107,.1);color:rgba(244,235,223,.8)} @media (max-width:1040px){ .tpl-clanak>article:has(>h3){grid-template-columns:minmax(0,1fr)} .tpl-clanak>article:has(>h3)>h3,.tpl-clanak>article:has(>h3)>em, .tpl-clanak>article:has(>h3)>:is(figure,.slika),.tpl-clanak>article:has(>h3)>:is(p,ul,ol,blockquote,div.izdavatelj){grid-column:1} .tpl-clanak>article:has(>h3)>:is(figure,.slika){grid-row:auto;position:static;margin:0 0 24px;max-width:560px} .tpl-pravni>article:has(>h3){grid-template-columns:minmax(0,1fr)} .tpl-pravni .izdavatelj{grid-column:1;position:static;margin-top:30px;max-width:420px} .tpl-naslov::after{font-size:clamp(100px,26vw,200px)} } @media (max-width:720px){ .tpl-naslov h1{font-size:clamp(32px,8vw,44px)} .tpl-clanak ,.tpl-pravni {font-size:16.5px} .tpl-clanak>article:has(>h3){padding:26px 0} .tpl-clanak>article:has(>h3)>h2{font-size:clamp(24px,6.4vw,30px)} .tpl-naslov::after{display:none} [data-provjeri]{padding:13px 15px;font-size:14px} .tpl-obrazac form{grid-template-columns:1fr} .tpl-obrazac .polje-sire,.tpl-obrazac textarea,.tpl-obrazac .privola, .tpl-obrazac button[type=submit],.tpl-obrazac input[type=submit],.tpl-obrazac .poruka{grid-column:span 1} } /* ---------- tpl-karta · karta koja se učitava na klik (odluka O13) ---------- */ .tpl-karta>article{max-width:none} .tpl-karta>article:is(:has(>h1),:has(>h2)){margin-bottom:28px;max-width:var(--sirina)} .karta-okvir{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--linija);background:var(--pijesak);min-height:420px;display:grid;place-items:center} .karta-privola{max-width:46ch;text-align:center;padding:34px 26px} .karta-privola h3{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--konjak);margin-bottom:14px} .karta-privola p{color:var(--tekst-2);font-size:15.5px} .karta-privola .gumbi{justify-content:center;margin-top:20px} .karta-okvir.ima-kartu{display:block;background:var(--tinta)} .karta-okvir iframe{display:block;width:100%;height:480px;border:0} @media (max-width:720px){ .karta-okvir{min-height:340px} .karta-okvir iframe{height:360px} } /* aside.izdavatelj je dijete kartice pravnog predloška — isti položaj kao .izdavatelj */ .tpl-pravni>article:has(>h3)>aside.izdavatelj{grid-column:2} @media (max-width:1040px){ .tpl-pravni>article:has(>h3)>aside.izdavatelj{grid-column:1} } /* ========================================================================== SADRŽAJ IZ CMS-a — pisano preko STVARNOG ispisa blokova, izmjereno 08.10.2026. Jezgra blok ispisuje kao goli
, redom: naslov → →
→ sadržaj → poveznice. Razreda na
nema, pa se blokovi razlikuju po naslovu: blok-glava ima >h2 (ili >h1), kartica ima >h3. Unutar sadržaja prežive samo: element, div[class], a[class] — i class na

/

    / briše CKEditorov filtar kad klijent spremi blok. ========================================================================== */ .seg article>em{display:block;font:500 12px/1 var(--f-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--konjak);margin-bottom:14px} .mod-tamna .seg article>em,.mod-tamna article>em{color:var(--mesing)} /* kartica = blok s h3 */ .seg article:has(>h3){display:flex;flex-direction:column;gap:10px;min-width:0} .seg article:has(>h3)>h3{font:400 clamp(19px,1.5vw,23px)/1.25 var(--f-disp);letter-spacing:-.01em;margin:0;order:1} .seg article:has(>h3)>em{order:0;margin:0;font-size:11px;opacity:.8} .seg article:has(>h3)>p{margin:0;order:2;font-size:15.5px;line-height:1.65;color:var(--tekst-2)} .mod-tamna article:has(>h3)>p{color:rgba(244,235,223,.72)} .seg article:has(>h3)>.veza{order:3;margin-top:2px} /* sitna poveznica u kartici */ a.gumb-sitni{display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:none;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--konjak);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;transition:color .2s,gap .2s} a.gumb-sitni::after{content:"→"} a.gumb-sitni:hover{gap:12px;color:var(--bordo)} .mod-tamna a.gumb-sitni{color:var(--mesing)} .mod-tamna a.gumb-sitni:hover{color:var(--konjak-svj)} /* POPRAVCI: glava lijevo (ljepljiva), kartice desno u dva stupca */ .seg-popravci>article:is(:has(>h1),:has(>h2)){grid-column:1;grid-row:1} .seg-popravci>article:has(>h3){grid-column:2;align-self:start;padding:22px 0 24px;border-top:1px dashed rgba(27,14,11,.22)} .seg-popravci{grid-auto-rows:min-content} @media (min-width:1041px){ .seg-popravci{grid-template-columns:.8fr repeat(2,minmax(0,.6fr));column-gap:clamp(24px,3vw,46px)} .seg-popravci>article:is(:has(>h1),:has(>h2)){grid-row:1 / span 4} .seg-popravci>article:has(>h3){grid-column:auto} } /* KVALITETA: četiri kartice u mreži, glava preko cijele širine */ .tpl-grid-4>article:has(>h3){padding:24px 0 0;border-top:2px solid var(--konjak)} /* GENERACIJE / DODATAK: vremeplov — kartica je korak */ .seg-dodatak{padding:clamp(72px,9vw,128px) 26px;background:var(--tinta);color:var(--papir)} .seg-dodatak{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:40px;padding-left:max(26px,calc((100% - 1220px)/2));padding-right:max(26px,calc((100% - 1220px)/2))} .seg-dodatak>*{max-width:none;margin:0} .seg-dodatak>article:is(:has(>h1),:has(>h2)){grid-column:span 3} .seg-dodatak>article:is(:has(>h1),:has(>h2)) h2{color:var(--papir)} .seg-dodatak>article:has(>h3){padding-top:26px;border-top:2px dashed rgba(205,165,107,.45)} .seg-dodatak>article:has(>h3)>h3{color:var(--mesing);font-size:clamp(28px,2.6vw,40px);font-weight:300} .seg-dodatak>article:has(>h3)>p{color:rgba(244,235,223,.75)} /* KONTAKT: glava preko širine, tri kartice podataka */ .tpl-kontakt>article:has(>h3){padding:24px;background:rgba(255,255,255,.55);border:1px solid rgba(27,14,11,.1);border-radius:14px} .tpl-kontakt>article:has(>h3)>h3{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-2)} .tpl-kontakt a.tel,.tpl-kontakt a.posta,article a.tel,article a.posta{color:var(--bordo);text-decoration:none;border-bottom:1px solid rgba(123,30,27,.35)} .tpl-kontakt a.tel{font:400 22px/1.2 var(--f-disp);border:0} ul.radno{list-style:none;margin:0;padding:0;display:grid;gap:8px} ul.radno li{display:flex;justify-content:space-between;gap:16px;font-size:15px;border-bottom:1px dashed rgba(27,14,11,.18);padding-bottom:6px} ul.radno li b{font-weight:500;color:var(--tekst)} /* ZNAČKE (popis pod uvodom) */ .znacke{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 24px} .znacke b{font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:1px dashed rgba(27,14,11,.3);border-radius:8px;color:var(--bordo);font-weight:500} .mod-tamna .znacke b{border-color:var(--linija-svj);color:var(--mesing)} /* CITAT */ article blockquote{margin:14px 0 20px;padding:6px 0 6px 22px;border-left:3px solid var(--konjak)} article blockquote p{font:italic 300 21px/1.45 var(--f-disp);color:var(--tekst);margin:0;max-width:34ch} article blockquote .potpis{font:500 12px/1 var(--f-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-2);margin-top:10px} .mod-tamna article blockquote p{color:var(--papir)} /* SLIKA IZ SADRŽAJA */ .slika{margin:0} .slika img{display:block;width:100%;height:auto} /* BILJEŠKA */ .biljeska{margin-top:14px;color:var(--tekst-2)} /* PRAVNI TEKST: h2 unutar sadržaja nisu naslovi sekcije */ .tpl-pravni article>h2{font:500 13px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bordo);margin:34px 0 10px;max-width:none} .tpl-pravni article>p,.tpl-pravni article>ul{max-width:68ch} .tpl-pravni article>ul{padding-left:20px} .tpl-pravni .izdavatelj{margin-top:34px;padding:22px;border:1px solid rgba(27,14,11,.12);border-radius:14px;background:rgba(255,255,255,.5)} .tpl-pravni .izdavatelj p{margin:0 0 6px} /* KARTA (slobodan kod) */ .karta h2{margin-bottom:10px} .karta-privola{margin-top:22px;padding:26px;border:1px dashed rgba(27,14,11,.3);border-radius:14px;background:rgba(255,255,255,.5);text-align:center} .karta-privola p{margin:0 0 10px;color:var(--tekst-2)} .karta iframe{width:100%;height:clamp(320px,46vh,520px);border:0;border-radius:14px;margin-top:22px} /* redoslijed u kartici: jezgra ispisuje naslov pa , a mi ih crtamo obrnuto */ .seg article:has(>h3)>*{order:2} .seg article:has(>h3)>em{order:0} .seg article:has(>h3)>h3{order:1} .seg article:has(>h3)>.veza{order:3} /* split sekcija bez slike ne ostavlja prazan stupac */ .seg-remenje:not(:has(:is(figure,.slika))),.seg-onama:not(:has(:is(figure,.slika))){grid-template-columns:minmax(0,1fr)} .seg-remenje:not(:has(:is(figure,.slika))) article,.seg-onama:not(:has(:is(figure,.slika))) article{max-width:72ch} /* kartica u članku bez slike: tekst ne ostavlja prazan desni stupac */ .tpl-clanak>article:has(>h3):not(:has(:is(figure,.slika))){grid-template-columns:minmax(0,1fr)} .tpl-clanak>article:has(>h3):not(:has(:is(figure,.slika)))>:is(p,ul,ol,blockquote,div.izdavatelj){max-width:68ch} /* galerija u sadržaju bloka */ .galerija{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:22px 0 0} .galerija img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px} /* dok slike nisu na serveru, prazan okvir ne ostavlja rupu (pi-prerender.js miče koji se ne učita) */ .slika:empty,.galerija:empty{display:none} /* ========================================================================== CJENIK NA STRANICI POPRAVCI — popis, ne tablica Dvije tablice u istoj zoni ruše stranicu (simple_html_dom), zato
    • . Sidrena cijena je zakonski obvezna i nikad se ne skriva. ========================================================================== */ .cjenik-popis{list-style:none;margin:26px 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:0 clamp(28px,4vw,56px)} .cjenik-popis li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 14px; padding:13px 0;border-bottom:1px dashed rgba(27,14,11,.18)} .cjenik-popis li>b{font-weight:500;font-size:15.5px;color:var(--tekst);min-width:0} /* početna cijena */ .cjenik-popis li>small:first-of-type{grid-column:2;justify-self:end;white-space:nowrap; font:500 15px/1 var(--f-mono);color:var(--bordo);font-variant-numeric:tabular-nums} /* sidrena cijena — nikad skrivena, samo tiša */ .cjenik-popis li>small:last-of-type{grid-column:1 / -1;font-size:11.5px;line-height:1.4; color:var(--tekst-2);opacity:.85} .mod-tamna .cjenik-popis li{border-color:var(--linija-svj)} .mod-tamna .cjenik-popis li>b{color:var(--papir)} .mod-tamna .cjenik-popis li>small:first-of-type{color:var(--mesing)} .mod-tamna .cjenik-popis li>small:last-of-type{color:rgba(244,235,223,.6)} @media (max-width:560px){ .cjenik-popis{grid-template-columns:1fr} .cjenik-popis li>small:first-of-type{font-size:14px} } /* POPRAVCI na naslovnici: interaktivni vodič (blok tipa 4, article.anatomija) desno, glava lijevo. Kad ovo stigne na test,