/* ============================================================ Terakota DOO — Modern Refresh (lagano osvezavanje, dodatni sloj) Ne menja strukturu ni brend boju (#881629) — samo osvezava tipografiju, razmake, dugmad, senke, zaobljene ivice i hover efekte preko postojeceg style.css / responsive.css. Ucitava se POSLEDNJI u , tako da override-uje bazu. ============================================================ */ :root { --tk-brand: #881629; --tk-brand-dark: #6d1120; --tk-ink: #2b2b2b; --tk-muted: #6b6f72; --tk-surface-alt: #f8f6f5; --tk-border-soft: #ececec; --tk-radius-sm: 4px; --tk-radius-md: 10px; --tk-radius-lg: 16px; --tk-shadow-sm: 0 2px 10px rgba(20,20,20,0.07); --tk-shadow-md: 0 14px 34px rgba(20,20,20,0.12); --tk-ease: cubic-bezier(.4,0,.2,1); } /* ---------- Tipografija ---------- */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { line-height: 1.8; color: var(--tk-ink); } h1, h2, h3, h4 { letter-spacing: 0.2px; } /* ---------- Dugmad (.more) — meki radius + lift na hover umesto skoka fonta ---------- */ .more, .more[type="submit"] { border-radius: var(--tk-radius-sm); box-shadow: var(--tk-shadow-sm); transition: transform 0.25s var(--tk-ease), box-shadow 0.25s var(--tk-ease), background-color 0.25s var(--tk-ease), opacity 0.25s var(--tk-ease) !important; } .more:hover { font-size: 15px !important; transform: translateY(-2px); box-shadow: var(--tk-shadow-md); background: var(--tk-brand-dark) !important; } .more.simple { border-radius: var(--tk-radius-sm); } .more.simple:hover { transform: translateY(-2px); box-shadow: var(--tk-shadow-md); } /* ---------- Slike u galerijama i tekstu — meke ivice + suptilan zoom na hover ---------- */ .post.single img, .blog .column img, .prettyPhoto img { border-radius: var(--tk-radius-md); transition: transform 0.4s var(--tk-ease), box-shadow 0.4s var(--tk-ease); } a.prettyPhoto { display: inline-block; overflow: hidden; border-radius: var(--tk-radius-md); } a.prettyPhoto:hover img { transform: scale(1.035); } /* ---------- Forme — meki radius i fokus stanje u brend boji ---------- */ .text-input, textarea, input[type="text"], input[type="email"], .form-control { border-radius: var(--tk-radius-sm) !important; transition: border-color 0.2s var(--tk-ease), box-shadow 0.2s var(--tk-ease) !important; } .text-input:focus, textarea:focus, input[type="text"]:focus, input[type="email"]:focus { border-color: var(--tk-brand) !important; box-shadow: 0 0 0 3px rgba(136,22,41,0.12) !important; outline: none; } /* ---------- Sekcije — cistija podela sivih traka ---------- */ .row.gray { background: var(--tk-surface-alt) !important; } /* ---------- Breadcrumb — suptilniji, sa hover tranzicijom ---------- */ .bread-crumb li a { transition: color 0.2s var(--tk-ease); } .bread-crumb li a:hover { color: var(--tk-brand); } /* ---------- FAQ / h4 blokovi — malo vazduha i vizuelna separacija ---------- */ h4 { margin-top: 22px; color: var(--tk-brand-dark); } /* ---------- Kartice na blogu (.column unutar .row na blog.html) ---------- */ .blog .column h3 a { transition: color 0.2s var(--tk-ease); } .blog .column h3 a:hover { color: var(--tk-brand); } /* ---------- Footer kontakt ikonice — suptilan hover ---------- */ .social-icons li a { transition: transform 0.2s var(--tk-ease), opacity 0.2s var(--tk-ease); } .social-icons li a:hover { transform: translateY(-3px); opacity: 0.85; }