/* ============================================================ Advokatska kancelarija — DIZAJN 4 „Memorandum", indigo (16.9.2026) Zašto postoji: „Memorandum" (siva hartija #e8e8e4, beli listovi, serif, plavosiva #41506b) prodat je advokatu Milanu Radiću 14.9.2026 — živi na advokatmilanradic.com, a šablon je zamrznut u `advokati-tpl/dizajn-4-prodat-radic/`. Odluka vlasnika 15.9.2026: zamena je BLAGA („više kao stari"). Tretman ostaje isti — papir kao podloga cele strane, sadržaj na belim listovima, tanke vlasi, serifni slog, skoro pravi uglovi — a menja se paleta: hladniji papir sa blagim ljubičastim tonom i indigo #2f3a8f kao jedini akcenat. Jača verzija od 15.9. (bela strana, znak paragrafa, kartice) je odbačena istog dana. MARKUP JE ISTI kao kod prodatog: 1.497 advokatskih sajtova nema batch fajl (gotcha #38), pa se zamena na već generisanim sajtovima radi zakrpom (`scripts/zameni-advokatski-dizajn-4.mjs`). Usput dve popravke kojih prodati nema: • linije u mrežama — „Oblasti prava" i „Kako izgleda saradnja" u dve kolone imale su razdelnik ispod donje leve stavke a ne i ispod desne (`:last-child` hvata samo jednu); isto kao kod Radića; • potpis „Predlog: AdvoApp", koji generator ubacuje posle `.container`, stajao je uz levu ivicu. Fontovi su sistemski: za 3.275 sajtova spoljni font je zavisnost koja usporava učitavanje. ============================================================ */ :root{ --papir: #e9e9f0; /* podloga cele strane */ --papir-tam: #dcdce8; --list: #ffffff; /* beli list na papiru */ --mastilo: #212429; --mastilo-bl: #4b515a; --tiho: #767c85; --vlas: #d7d8e3; /* hairline, kao otisak */ --vlas-bl: #e6e7ef; --indigo: #2f3a8f; /* jedini akcenat */ --indigo-tam: #232c6f; --indigo-bl: #eceefa; /* Memorandum je serifni dokument: serif nosi i naslove i telo, a sans se koristi SAMO za sitne verzalne oznake (nadnaslovi, etikete polja). */ --serif: "Iowan Old Style", Georgia, "Times New Roman", "Palatino Linotype", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --maxw: 1080px; --pad: clamp(1.25rem, 5vw, 2.5rem); --r: 3px; /* skoro pravi uglovi */ --senka: 0 1px 2px rgba(33,36,41,.05), 0 12px 30px rgba(33,36,41,.06); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--serif); font-size:17px; line-height:1.72; color:var(--mastilo); background:var(--papir); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ max-width:100%; height:auto; } a{ color:inherit; } [hidden]{ display:none !important; } /* mobilni meni ostaje zatvoren — gotcha #37 */ .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); } h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:600; line-height:1.2; letter-spacing:-.012em; text-wrap:balance; } .eyebrow,.section-tag,.info-label,.hc-title,.hamburger-label,.btn,.nav,.card-num,.step-num{ font-family:var(--sans); } /* ---------- ZAGLAVLJE: traka memoranduma ---------- */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(233,233,240,.94); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--vlas); } .header-inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding:.8rem var(--pad); display:flex; align-items:center; gap:1.25rem; } /* meni se ne lomi po sredini stavke; ime sme da se prelomi, meni ne */ .header-inner{ flex-wrap:nowrap; } .brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; min-width:0; } .brand-text{ min-width:0; display:flex; flex-direction:column; line-height:1.28; } .brand-name{ overflow-wrap:anywhere; font-weight:600; font-size:1.04rem; letter-spacing:-.01em; } .nav{ flex:0 0 auto; } .brand-mark{ flex:none; width:40px; height:40px; border-radius:var(--r); background:var(--list); border:1px solid var(--vlas); color:var(--indigo); display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:1rem; } .brand-sub{ color:var(--tiho); font-family:var(--sans); font-size:.74rem; letter-spacing:.055em; text-transform:uppercase; } .nav{ display:none; gap:1.3rem; } .nav a{ color:var(--mastilo-bl); text-decoration:none; font-size:.82rem; padding-block:.35rem; transition:color .18s; } .nav a:hover, .nav a.active{ color:var(--indigo); } body .nav a.active{ text-decoration:none; } .header-phone{ display:none; align-items:center; gap:.45rem; color:var(--indigo); background:var(--list); border:1px solid var(--vlas); text-decoration:none; font-family:var(--sans); font-weight:600; font-size:.83rem; padding:.48rem .85rem; border-radius:var(--r); transition:border-color .18s, color .18s; } .header-phone:hover{ border-color:var(--indigo); } .hamburger{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; background:var(--list); color:var(--mastilo); border:1px solid var(--vlas); border-radius:var(--r); padding:.45rem .7rem; font-family:var(--sans); font-size:.8rem; font-weight:600; } .mobile-nav{ background:var(--list); border-top:1px solid var(--vlas); padding:.4rem var(--pad) 1rem; } .mobile-nav a{ display:block; padding:.7rem 0; text-decoration:none; color:var(--mastilo); font-size:.95rem; border-bottom:1px solid var(--vlas-bl); } .mobile-nav a:last-child{ border-bottom:none; } .mobile-phone{ color:var(--indigo) !important; font-weight:600; } @media (min-width:1040px){ .nav{ display:flex; } .header-phone{ display:inline-flex; } .hamburger{ display:none; } .mobile-nav{ display:none !important; } } /* ---------- LIST: zajednicki omotac svake sekcije ---------- */ .section, .hero{ padding-block:clamp(1.5rem,3.2vw,2.4rem); } .section > .container, .hero > .container{ background:var(--list); border:1px solid var(--vlas); border-radius:var(--r); box-shadow:var(--senka); padding:clamp(1.9rem,4.4vw,3.4rem) clamp(1.4rem,4vw,3.4rem); max-width:var(--maxw); } /* ---------- HERO: glava memoranduma ---------- */ .hero{ padding-top:clamp(2rem,4.5vw,3.4rem); } .hero-inner{ display:grid; gap:clamp(1.8rem,4vw,3rem); } .eyebrow{ margin:0 0 1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--vlas); color:var(--tiho); font-size:.73rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; } .hero h1{ font-size:clamp(2rem,5.4vw,3.35rem); font-weight:500; letter-spacing:-.02em; } .hero h1 span{ display:block; color:var(--indigo); } .hero-lead{ margin:1.3rem 0 0; max-width:36rem; color:var(--mastilo-bl); font-size:clamp(1.02rem,2.1vw,1.14rem); } .hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; } .btn{ display:inline-block; text-decoration:none; cursor:pointer; font-size:.85rem; font-weight:600; padding:.8rem 1.45rem; border-radius:var(--r); border:1px solid transparent; transition:background .18s, color .18s, border-color .18s; } .btn-primary{ background:var(--indigo); color:#fff; } .btn-primary:hover{ background:var(--indigo-tam); } .btn-ghost{ background:transparent; color:var(--mastilo); border-color:var(--vlas); } .btn-ghost:hover{ border-color:var(--indigo); color:var(--indigo); } .btn-block{ display:block; width:100%; text-align:center; } /* podaci kancelarije — kao blok zaglavlja na memorandumu */ .hero-card{ border-top:1px solid var(--vlas); padding-top:1.5rem; } .hc-title{ margin:0 0 1rem; color:var(--tiho); font-size:.71rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; } .hc-list{ margin:0; display:grid; gap:.9rem; } .hc-list > div{ display:grid; gap:.1rem; } .hc-list dt{ font-family:var(--sans); font-size:.71rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--tiho); } .hc-list dd{ margin:0; font-size:.95rem; } .hc-list dd a{ text-decoration:none; border-bottom:1px solid var(--indigo); } .hc-list dd a:hover{ color:var(--indigo); } .hc-note{ margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid var(--vlas-bl); font-size:.82rem; font-style:italic; color:var(--tiho); } @media (min-width:900px){ .hero-inner{ grid-template-columns:1fr minmax(16rem,19rem); align-items:start; } .hero-card{ border-top:none; border-left:1px solid var(--vlas); padding-top:0; padding-left:2.2rem; } } /* ---------- ZAGLAVLJA SEKCIJA ---------- */ .section-head{ margin-bottom:clamp(1.7rem,3.4vw,2.5rem); } .section-tag{ display:inline-block; margin-bottom:.55rem; color:var(--tiho); font-size:.71rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; } .section h2{ font-size:clamp(1.5rem,3.3vw,2.15rem); font-weight:500; } .section-head h2::after, .about-head h2::after{ content:""; display:block; width:100%; height:1px; margin-top:1rem; background:var(--vlas); } /* ---------- O KANCELARIJI ---------- */ .about-grid{ display:grid; gap:clamp(1.4rem,3.4vw,3rem); } .about-head h2{ font-size:clamp(1.5rem,3.3vw,2.15rem); font-weight:500; } .about-body p{ margin:0 0 1.05rem; color:var(--mastilo-bl); } .about-body .lede{ font-size:clamp(1.05rem,2.1vw,1.2rem); color:var(--mastilo); } .about-body .note{ margin-top:1.5rem; padding-left:1rem; border-left:2px solid var(--indigo); font-style:italic; color:var(--tiho); font-size:.9rem; } @media (min-width:900px){ .about-grid{ grid-template-columns:minmax(0,14rem) minmax(0,1fr); } } /* ---------- OBLASTI PRAVA: stavke sa brojem u margini ---------- */ .practice-grid{ display:grid; gap:0; } .practice-card{ display:grid; grid-template-columns:2.4rem 1fr; gap:.3rem .9rem; align-items:start; padding:1.35rem 0; border-bottom:1px solid var(--vlas-bl); } .practice-card:last-child{ border-bottom:none; } .card-num{ grid-row:1 / span 2; color:var(--indigo); font-size:.78rem; font-weight:600; padding-top:.3rem; font-variant-numeric:tabular-nums; } .practice-card h3{ font-size:1.06rem; font-weight:600; } .area-list{ grid-column:2; margin:.45rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.25rem .95rem; color:var(--tiho); font-size:.91rem; } .area-list li{ position:relative; padding-left:.8rem; } .area-list li::before{ content:""; position:absolute; left:0; top:.7em; width:4px; height:4px; border-radius:50%; background:var(--vlas); } @media (min-width:860px){ .practice-grid{ grid-template-columns:1fr 1fr; column-gap:3rem; } .practice-card:nth-last-child(-n+2){ border-bottom:none; } /* obe donje stavke, ne samo desna */ } /* ---------- PRISTUP RADU ---------- */ .approach-grid{ display:grid; gap:1.6rem 2.4rem; } .approach-item{ padding-top:1.1rem; border-top:2px solid var(--indigo-bl); } .approach-icon{ display:grid; place-items:center; width:36px; height:36px; margin-bottom:.8rem; border-radius:var(--r); background:var(--indigo-bl); color:var(--indigo); } .approach-item h3{ font-size:1rem; font-weight:600; margin-bottom:.4rem; } .approach-item p{ margin:0; color:var(--mastilo-bl); font-size:.92rem; } @media (min-width:620px){ .approach-grid{ grid-template-columns:1fr 1fr; } } @media (min-width:980px){ .approach-grid{ grid-template-columns:repeat(4,1fr); } } /* ---------- SARADNJA: numerisani stavovi ---------- */ .steps-grid{ display:grid; gap:0; counter-reset:korak; } .step-item{ display:grid; grid-template-columns:2.6rem 1fr; gap:1rem; align-items:start; padding:1.3rem 0; border-bottom:1px solid var(--vlas-bl); } .step-item:last-child{ border-bottom:none; } .step-num{ width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; border:1px solid var(--indigo); color:var(--indigo); font-size:.85rem; font-weight:600; font-variant-numeric:tabular-nums; } .step-item h3{ font-size:1.02rem; font-weight:600; margin:.2rem 0 .35rem; } .step-item p{ margin:0; color:var(--mastilo-bl); font-size:.93rem; } @media (min-width:1000px){ .steps-grid{ grid-template-columns:1fr 1fr; column-gap:3rem; } .step-item:nth-last-child(-n+2){ border-bottom:none; } /* isti razlog kao kod oblasti */ } /* ---------- PITANJA ---------- */ .faq-list{ display:grid; gap:0; } .faq-item{ border-bottom:1px solid var(--vlas-bl); } .faq-item:last-child{ border-bottom:none; } .faq-item summary{ list-style:none; cursor:pointer; padding:1.1rem 2.4rem 1.1rem 0; position:relative; font-size:1rem; font-weight:600; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:""; position:absolute; right:.35rem; top:1.45rem; width:8px; height:8px; border-right:1.5px solid var(--indigo); border-bottom:1.5px solid var(--indigo); transform:rotate(45deg); transition:transform .2s; } .faq-item[open] summary::after{ transform:rotate(-135deg); top:1.7rem; } .faq-item p{ margin:0 0 1.25rem; padding-right:2.4rem; color:var(--mastilo-bl); font-size:.94rem; } /* ---------- KONTAKT ---------- */ .contact-grid{ display:grid; gap:clamp(1.8rem,3.6vw,2.8rem); } .info-list{ margin:0 0 1.5rem; padding:0; list-style:none; display:grid; gap:1rem; } .info-list li{ display:grid; gap:.15rem; padding-bottom:1rem; border-bottom:1px solid var(--vlas-bl); } .info-list li:last-child{ border-bottom:none; padding-bottom:0; } .info-label{ font-size:.71rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--tiho); } .info-value{ font-size:.99rem; } .info-value a{ text-decoration:none; border-bottom:1px solid var(--indigo); } .info-value a:hover{ color:var(--indigo); } .map-wrap{ border:1px solid var(--vlas); border-radius:var(--r); overflow:hidden; background:var(--papir-tam); aspect-ratio:16/10; } .map-wrap iframe{ display:block; width:100%; height:100%; border:0; } .map-link{ display:inline-block; margin-top:.8rem; font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--indigo); text-decoration:none; border-bottom:1px solid currentColor; } .contact-form-wrap{ background:var(--papir); border:1px solid var(--vlas); border-radius:var(--r); padding:1.7rem 1.5rem; } .contact-form-wrap h3{ font-size:1.12rem; font-weight:600; margin-bottom:1.2rem; } .field{ margin-bottom:1rem; } .field label{ display:block; margin-bottom:.32rem; font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tiho); } .field input, .field textarea{ width:100%; padding:.72rem .8rem; font-family:var(--serif); font-size:.96rem; color:var(--mastilo); background:var(--list); border:1px solid var(--vlas); border-radius:var(--r); transition:border-color .18s, box-shadow .18s; } .field input:focus, .field textarea:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(47,58,143,.13); } .field textarea{ resize:vertical; min-height:6.2rem; } .form-status{ margin:.85rem 0 0; font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--indigo); opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s; } .form-status.is-visible{ opacity:1; transform:none; } /* Ishod posle povratka sa posalji.php: ?err=1 prazna polja · ?err=2 slanje nije uspelo (gotcha #122) */ .form-error{ margin:.85rem 0 0; padding:.7rem .85rem; background:#fbeeee; border-left:3px solid #a8322d; color:#5f1f1c; font-family:var(--sans); font-size:.88rem; } .form-error p{ margin:0; } .form-error a{ color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; } .form-error a[href^="tel:"]{ white-space:nowrap; } .form-disclaimer{ margin:1rem 0 0; padding-top:.95rem; border-top:1px solid var(--vlas); font-size:.79rem; font-style:italic; color:var(--tiho); line-height:1.6; } @media (min-width:900px){ .contact-grid{ grid-template-columns:1fr minmax(0,24rem); align-items:start; } } /* ---------- PODNOŽJE ---------- */ .site-footer{ margin-top:clamp(1.5rem,3vw,2.4rem); padding-block:2.4rem 2rem; border-top:1px solid var(--vlas); color:var(--mastilo-bl); } .footer-inner{ display:grid; gap:.6rem; } .footer-brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:.3rem; } .footer-name{ font-weight:600; font-size:1rem; color:var(--mastilo); } .footer-line{ margin:0; font-size:.87rem; } .footer-note{ margin:0; font-size:.83rem; font-style:italic; color:var(--tiho); } .footer-copy{ margin:.85rem 0 0; padding-top:.95rem; border-top:1px solid var(--vlas-bl); font-size:.79rem; color:var(--tiho); } /* Generator potpis ubacuje POSLE `.container`, direktno u