/* ========================================================= Izrada sajtova za advokate — prezentaciona (landing) stranica. NAMERNO drugačija od „§ Moj Pripravnik" aplikacije: tamna, digitalna paleta i geometrijski sans umesto pergamenta, mastila i serifa — da posetilac odmah vidi da je reč o drugoj usluzi. Učitava se samo na /izrada-sajtova (preko ), pa slobodno pipa i . ========================================================= */ :root { --pz-crna: #070A12; --pz-povrs: #0E1524; --pz-povrs-2: #141D31; --pz-ivica: #223050; --pz-ivica-jaka: #33456E; --pz-tekst: #EAF0FB; --pz-tiho: #93A3C0; --pz-akcenat: #5B8CFF; --pz-akcenat-2: #7DE2C3; --pz-greska: #FF8B7B; --pz-sans: "Inter", system-ui, "Segoe UI", Arial, sans-serif; --pz-naslov: "Space Grotesk", "Inter", system-ui, sans-serif; --pz-prelaz: linear-gradient(135deg, var(--pz-akcenat), var(--pz-akcenat-2)); --pz-maks: 1140px; } html.pz-html { color-scheme: dark; } body.pz-telo { background: var(--pz-crna); color: var(--pz-tekst); font-family: var(--pz-sans); line-height: 1.6; } /* Svetleći „aurora" oreol iza prvog ekrana. */ .pz { position: relative; overflow-x: clip; background: var(--pz-crna); color: var(--pz-tekst); font-family: var(--pz-sans); } .pz::before { content: ""; position: absolute; inset: -20rem 0 auto; height: 46rem; pointer-events: none; background: radial-gradient(48rem 26rem at 22% 38%, rgba(91, 140, 255, .20), transparent 68%), radial-gradient(38rem 22rem at 78% 20%, rgba(125, 226, 195, .13), transparent 66%); } .pz-omot { position: relative; max-width: var(--pz-maks); margin: 0 auto; padding: 0 1.5rem; } .pz h1, .pz h2, .pz h3 { font-family: var(--pz-naslov); color: var(--pz-tekst); letter-spacing: -.02em; line-height: 1.15; margin: 0; border: 0; padding: 0; } .pz h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 700; } .pz h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); font-weight: 600; } .pz h3 { font-size: 1.08rem; font-weight: 600; } .pz p { margin: 0; } .pz a { color: var(--pz-akcenat); text-decoration: none; } .pz a:hover { color: var(--pz-akcenat-2); text-decoration: none; } /* ---------- zaglavlje ---------- */ .pz-zaglavlje { position: sticky; top: 0; z-index: 50; background: rgba(7, 10, 18, .82); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(34, 48, 80, .8); } .pz-zaglavlje-red { max-width: var(--pz-maks); margin: 0 auto; padding: .85rem 1.5rem; display: flex; align-items: center; gap: 1.25rem; } .pz-znak { display: flex; align-items: center; gap: .7rem; color: var(--pz-tekst); } .pz-znak:hover { color: var(--pz-tekst); } .pz-znak-kocka { width: 2.2rem; height: 2.2rem; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--pz-prelaz); color: #07101F; font-family: var(--pz-naslov); font-weight: 700; font-size: 1.05rem; } .pz-znak-ime { font-family: var(--pz-naslov); font-weight: 600; font-size: 1.02rem; line-height: 1.15; display: block; } .pz-znak-pod { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pz-tiho); } .pz-meni { display: flex; align-items: center; gap: .35rem; margin-left: auto; } .pz-meni a { color: var(--pz-tiho); font-size: .9rem; font-weight: 500; padding: .45rem .7rem; border-radius: 8px; white-space: nowrap; } .pz-meni a:hover { color: var(--pz-tekst); background: rgba(255, 255, 255, .06); } /* ---------- dugmad ---------- Selektori su namerno `.pz .pz-dugme…`: inače opštije pravilo `.pz a` (isti broj klasa + tip) pobedi i tekst dugmeta ostane plav na plavom. */ .pz .pz-dugme { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.4rem; border-radius: 12px; border: 1px solid transparent; font-family: var(--pz-sans); font-size: .95rem; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease; } .pz .pz-dugme-glavno { background: var(--pz-prelaz); color: #06101E; box-shadow: 0 10px 26px -12px rgba(91, 140, 255, .85); } .pz .pz-dugme-glavno:hover { color: #06101E; transform: translateY(-1px); box-shadow: 0 16px 34px -14px rgba(91, 140, 255, .95); } .pz .pz-dugme-tiho { background: rgba(255, 255, 255, .04); border-color: var(--pz-ivica-jaka); color: var(--pz-tekst); } .pz .pz-dugme-tiho:hover { color: var(--pz-tekst); border-color: var(--pz-akcenat); background: rgba(91, 140, 255, .12); } .pz .pz-dugme-malo { padding: .55rem 1rem; font-size: .88rem; border-radius: 10px; } .pz .pz-dugme:disabled { opacity: .6; cursor: progress; transform: none; } .pz-dugme:focus-visible, .pz a:focus-visible, .pz input:focus-visible, .pz textarea:focus-visible, .pz select:focus-visible { outline: 2px solid var(--pz-akcenat); outline-offset: 2px; } /* ---------- sekcije ---------- */ .pz-sekcija { padding: clamp(3.5rem, 7vw, 5.5rem) 0; } .pz-sekcija-ivica { border-top: 1px solid rgba(34, 48, 80, .7); } .pz-zaglavlje-sekcije { max-width: 42rem; margin-bottom: 2.5rem; } .pz-zaglavlje-sekcije p { margin-top: .9rem; color: var(--pz-tiho); font-size: 1.02rem; } .pz-oznaka { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--pz-ivica-jaka); background: rgba(91, 140, 255, .1); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pz-akcenat-2); } .pz-oznaka::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pz-akcenat-2); } /* ---------- hero ---------- */ .pz-hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem); } .pz-hero-tekst { max-width: 44rem; } .pz-hero h1 em { font-style: normal; background: var(--pz-prelaz); -webkit-background-clip: text; background-clip: text; color: transparent; } .pz-hero-uvod { margin-top: 1.9rem; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--pz-tiho); max-width: 38rem; } .pz-hero-akcije { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; } .pz-cinjenice { display: grid; gap: 1.5rem 2rem; margin-top: 3.25rem; max-width: 46rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); } .pz-cinjenica-broj { font-family: var(--pz-naslov); font-size: 1.6rem; font-weight: 700; line-height: 1; } .pz-cinjenica-tekst { font-size: .82rem; color: var(--pz-tiho); margin-top: .3rem; } /* ---------- kartice ---------- */ .pz-mreza { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .pz-kartica { padding: 1.5rem; border-radius: 16px; background: linear-gradient(180deg, var(--pz-povrs-2), var(--pz-povrs)); border: 1px solid var(--pz-ivica); transition: border-color .16s ease, transform .16s ease; } .pz-kartica:hover { border-color: var(--pz-ivica-jaka); transform: translateY(-2px); } .pz-kartica-ikona { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: rgba(91, 140, 255, .13); border: 1px solid var(--pz-ivica-jaka); font-size: 1.2rem; margin-bottom: 1rem; } .pz-kartica p { margin-top: .55rem; color: var(--pz-tiho); font-size: .93rem; } /* ---------- paketi ---------- */ .pz-paketi { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; } .pz-paket { position: relative; display: flex; flex-direction: column; } .pz-paket-istaknut { border-color: var(--pz-akcenat); box-shadow: 0 18px 44px -26px rgba(91, 140, 255, .9); } .pz-paket-znacka { position: absolute; top: -.72rem; left: 1.5rem; padding: .2rem .7rem; border-radius: 999px; background: var(--pz-prelaz); color: #06101E; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .pz-paket-cena { margin: .9rem 0 1.2rem; font-family: var(--pz-naslov); font-size: 1.3rem; font-weight: 600; color: var(--pz-akcenat-2); } .pz-paket-cena span { display: block; font-family: var(--pz-sans); font-size: .8rem; font-weight: 400; color: var(--pz-tiho); margin-top: .2rem; } .pz-lista { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; } .pz-lista li { position: relative; padding-left: 1.6rem; font-size: .92rem; color: var(--pz-tiho); } .pz-lista li::before { content: "✓"; position: absolute; left: 0; top: -.05rem; color: var(--pz-akcenat-2); font-weight: 700; font-size: .85rem; } .pz-paket .pz-dugme { margin-top: auto; } /* ---------- proces ---------- */ .pz-koraci { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); counter-reset: pz-korak; } .pz-korak { padding-top: 1.5rem; border-top: 2px solid var(--pz-ivica); } .pz-korak::before { counter-increment: pz-korak; content: "0" counter(pz-korak); display: block; margin-bottom: .7rem; font-family: var(--pz-naslov); font-size: .95rem; font-weight: 700; color: var(--pz-akcenat); } .pz-korak p { margin-top: .45rem; color: var(--pz-tiho); font-size: .92rem; } /* ---------- kontakt ---------- */ .pz-kontakt-raspored { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } .pz-kontakt-info p { color: var(--pz-tiho); margin-top: .9rem; } .pz-kontakt-stavke { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.1rem; } .pz-kontakt-stavke li { display: flex; gap: .85rem; align-items: flex-start; } .pz-kontakt-znak { width: 2.1rem; height: 2.1rem; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(125, 226, 195, .1); border: 1px solid var(--pz-ivica-jaka); font-size: .95rem; } .pz-kontakt-oznaka { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pz-tiho); } .pz-kontakt-vrednost { font-weight: 600; } .pz-forma { padding: clamp(1.5rem, 3vw, 2.1rem); border-radius: 18px; background: var(--pz-povrs); border: 1px solid var(--pz-ivica); scroll-margin-top: 5rem; /* lepljivo zaglavlje ne sme da prekrije vrh forme */ } /* Klik na „Zatraži ponudu" uokviri formu da se vidi gde se ponuda traži (klasu dodaje i skida js/prezentacija.js). */ .pz-forma-istaknuta { animation: pz-isticanje 2.6s ease-out 1; } @keyframes pz-isticanje { 0%, 12% { border-color: var(--pz-akcenat); box-shadow: 0 0 0 4px rgba(91, 140, 255, .30); } 24% { border-color: var(--pz-ivica-jaka); box-shadow: 0 0 0 0 rgba(91, 140, 255, .12); } 36%, 78% { border-color: var(--pz-akcenat); box-shadow: 0 0 0 4px rgba(91, 140, 255, .30); } 100% { border-color: var(--pz-ivica); box-shadow: 0 0 0 0 rgba(91, 140, 255, 0); } } .pz-polja { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; } .pz-polje { display: flex; flex-direction: column; gap: .4rem; min-width: 0; } .pz-polje-sirok { grid-column: 1 / -1; } .pz-polje label { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pz-tiho); } .pz-polje label .pz-obavezno { color: var(--pz-akcenat); } /* `input:not(...)` a ne `input[type=text]` — Blazor-ov ne ispisuje atribut type, pa ga selektor po atributu ne bi uhvatio. */ .pz-forma input:not([type=checkbox]):not([type=radio]), .pz-forma select, .pz-forma textarea { width: 100%; padding: .75rem .9rem; border-radius: 10px; background: rgba(7, 10, 18, .7); border: 1px solid var(--pz-ivica-jaka); color: var(--pz-tekst); font-family: var(--pz-sans); font-size: .95rem; transition: border-color .14s ease, background-color .14s ease; } .pz-forma textarea { min-height: 7.5rem; resize: vertical; } .pz-forma select { appearance: none; padding-right: 2.4rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--pz-tiho) 50%), linear-gradient(135deg, var(--pz-tiho) 50%, transparent 50%); background-position: calc(100% - 1.2rem) 1.15rem, calc(100% - .85rem) 1.15rem; background-size: .35rem .35rem, .35rem .35rem; background-repeat: no-repeat; } .pz-forma input::placeholder, .pz-forma textarea::placeholder { color: #64738F; } /* Pregledačev „autofill" inače ubaci svetlu podlogu i crn tekst preko tamne forme. */ .pz-forma input:-webkit-autofill, .pz-forma input:-webkit-autofill:hover, .pz-forma input:-webkit-autofill:focus { -webkit-text-fill-color: var(--pz-tekst); -webkit-box-shadow: 0 0 0 100px #0B1120 inset; caret-color: var(--pz-tekst); } .pz-forma input:focus, .pz-forma select:focus, .pz-forma textarea:focus { border-color: var(--pz-akcenat); background-color: rgba(7, 10, 18, .95); outline: none; } .pz-forma select option { background: var(--pz-povrs); color: var(--pz-tekst); } .pz-forma .invalid { border-color: var(--pz-greska); } .pz-forma .validation-message { color: var(--pz-greska); font-size: .8rem; } .pz-saglasnost { grid-column: 1 / -1; display: flex; gap: .7rem; align-items: flex-start; } .pz-saglasnost input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--pz-akcenat); } .pz-saglasnost label { font-size: .84rem; line-height: 1.5; color: var(--pz-tiho); text-transform: none; letter-spacing: 0; font-weight: 400; } /* honeypot — skriveno polje koje roboti popune, a ljudi ne vide */ .pz-med { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .pz-forma-dno { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; } .pz-forma-dno .pz-sitno { font-size: .8rem; color: var(--pz-tiho); } .pz-poruka { padding: .9rem 1.1rem; border-radius: 12px; font-size: .92rem; margin-bottom: 1.2rem; } .pz-poruka-greska { background: rgba(255, 139, 123, .1); border: 1px solid rgba(255, 139, 123, .45); color: #FFC0B6; } .pz-hvala { text-align: center; padding: 1.5rem .5rem; } .pz-hvala-znak { width: 3.2rem; height: 3.2rem; margin: 0 auto 1.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--pz-prelaz); color: #06101E; font-size: 1.5rem; font-weight: 700; } .pz-hvala p { margin-top: .7rem; color: var(--pz-tiho); } /* ---------- podnožje ---------- */ .pz-podnozje { border-top: 1px solid rgba(34, 48, 80, .7); padding: 2.5rem 0 3rem; } .pz-podnozje-red { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; justify-content: space-between; } .pz-podnozje-tekst { font-size: .82rem; color: var(--pz-tiho); } .pz-podnozje-veze { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .85rem; } .pz-podnozje-veze a { color: var(--pz-tiho); } .pz-podnozje-veze a:hover { color: var(--pz-akcenat-2); } /* ---------- responsivnost ---------- */ @media (max-width: 860px) { .pz-kontakt-raspored { grid-template-columns: 1fr; gap: 1.75rem; } } @media (max-width: 720px) { .pz-meni a:not(.pz-dugme) { display: none; } .pz-zaglavlje-red { gap: .75rem; } .pz-znak-pod { display: none; } .pz-polja { grid-template-columns: 1fr; } .pz-hero-akcije .pz-dugme { flex: 1 1 100%; } .pz-cinjenice { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; margin-top: 2.5rem; } .pz-podnozje-red { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .pz-dugme, .pz-kartica { transition: none; } .pz-dugme-glavno:hover, .pz-kartica:hover { transform: none; } /* Bez pulsiranja — okvir se samo pojavi, a JS ga skine posle nekoliko sekundi. */ .pz-forma-istaknuta { animation: none; border-color: var(--pz-akcenat); box-shadow: 0 0 0 4px rgba(91, 140, 255, .30); } }