/* SAVOX upitnik za ponudu – izgled „Nacrt Premium“ (odluke 110, 111 i 114), u identitetu savoxgroup.com. Dan: kremast arhitektonski papir sa tamnoplavim linijama. Noć: tamnoplavi nacrt sa zlatnim linijama. Oštri uglovi (2 px). Izabrano = zlatni uglovi kao oznake za sječenje na nacrtu; narandžasti gradijent samo za glavno dugme. Najmanji tekst je 11 px (pravilo sajta), a tekst nikad ne počinje potpuno providan (LCP). */ #sxu { --display: var(--font-display); --sans: var(--font-body); --mono: var(--font-mono); --amber: #f2a23c; --gold: #d7b77a; --grad: linear-gradient(103deg, #d7b77a 0%, #f2a23c 54%, #c87519 100%); --amber-grad: var(--grad); --navy: #081024; --night: #050b18; --r: 2px; --hh: 64px; --e-out: cubic-bezier(.22, 1, .36, 1); --e-io: cubic-bezier(.65, 0, .35, 1); --e-snap: cubic-bezier(.34, 1.56, .64, 1); --ease: cubic-bezier(.2, .7, .2, 1); --t1: .18s; --t2: .36s; --cn: linear-gradient(var(--amber), var(--amber)), linear-gradient(var(--amber), var(--amber)), linear-gradient(var(--amber), var(--amber)), linear-gradient(var(--amber), var(--amber)), linear-gradient(var(--amber), var(--amber)), linear-gradient(var(--amber), var(--amber)), linear-gradient(var(--amber), var(--amber)), linear-gradient(var(--amber), var(--amber)); --cnp: 3px 3px, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 5 8.6 9.5 3.7' fill='none' stroke='%23081024' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23977f5c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #sxu, :root[data-theme="day"] #sxu, :root[data-theme="light"] #sxu { --bg: #efe8dc; --sheet: #fbf7ef; --surface: #fffcf7; --surface-2: #f6efe3; --tile: #fffdf8; --card: #fffdf8; --ink: #172334; --ink-2: #384557; --muted: #5f6878; --line: #e2d7c4; --line-2: #cdbd9f; --gold-line: rgba(126, 91, 45, .22); --grid: rgba(23, 52, 92, .055); --grid-2: rgba(23, 52, 92, .09); --draw: #1f3355; --ghost: rgba(23, 35, 52, .13); --dim: #a45200; --accent-ink: #a45200; --accent: #a45200; --accent-soft: rgba(242, 162, 60, .12); --focus: #a45200; --halo: rgba(210, 132, 42, .17); --sel-bg: linear-gradient(120deg, rgba(255, 253, 247, .92) 0%, rgba(255, 245, 228, .8) 58%, rgba(242, 162, 60, .14) 100%); --sel-line: rgba(210, 132, 42, .75); --sel-ink: #7a3d00; --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4 4.8 8.9 9.8 3.4' fill='none' stroke='%237a3d00' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --foot-ink: #964a00; --sel-edge: #a45200; --danger: #9b3420; --err: #9b3420; --danger-soft: rgba(155, 52, 32, .06); --danger-line: rgba(155, 52, 32, .45); --ok: #1f6b45; --glass: rgba(250, 246, 238, .86); --topbar: rgba(250, 246, 238, .92); --lamp: rgba(255, 176, 86, .2); --lampg: rgba(176, 104, 24, .3); --stampc: #b4561c; --tip: #172334; --tip-t: #fbf7ef; --emb: #f8f1e4; --emb-hi: #fff; --emb-lo: rgba(92, 64, 28, .5); --shadow: 0 2px 6px -2px rgba(71, 50, 24, .10), 0 42px 90px -62px rgba(71, 50, 24, .5); --lift: 0 12px 26px -20px rgba(71, 50, 24, .6); --vis-bg: #ebe4d8; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .08 .2 0 0 0 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); color-scheme: light; } :root[data-theme="night"] #sxu, :root[data-theme="dark"] #sxu { --bg: #050b18; --sheet: #0a1631; --surface: #0e1a36; --surface-2: #0b1631; --tile: #0e1a36; --card: #0e1a36; --ink: #eaf0fb; --ink-2: #c9d3e6; --muted: #9da9c4; --line: #21315a; --line-2: #33477d; --gold-line: rgba(215, 183, 122, .24); --grid: rgba(150, 180, 230, .06); --grid-2: rgba(150, 180, 230, .1); --draw: #e9dcc0; --ghost: rgba(234, 240, 251, .13); --dim: #f2a23c; --accent-ink: #f2a23c; --accent: #f2a23c; --accent-soft: rgba(242, 162, 60, .12); --focus: #ffc163; --halo: rgba(242, 162, 60, .2); --sel-bg: linear-gradient(120deg, rgba(255, 251, 243, .10) 0%, rgba(242, 162, 60, .15) 55%, rgba(242, 162, 60, .07) 100%); --sel-line: rgba(242, 162, 60, .72); --sel-ink: #f5e6ce; --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4 4.8 8.9 9.8 3.4' fill='none' stroke='%23f5e6ce' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --foot-ink: #f2a23c; --sel-edge: rgba(242, 162, 60, .72); --danger: #ffa48c; --err: #ffa48c; --danger-soft: rgba(255, 164, 140, .08); --danger-line: rgba(255, 164, 140, .5); --ok: #7fd3a2; --glass: rgba(7, 14, 33, .82); --topbar: rgba(7, 14, 33, .9); --lamp: rgba(242, 162, 60, .12); --lampg: rgba(242, 178, 92, .34); --stampc: #f2a23c; --tip: #eaf0fb; --tip-t: #0a1631; --emb: #0c1936; --emb-hi: rgba(255, 255, 255, .16); --emb-lo: rgba(0, 0, 0, .8); --shadow: 0 2px 6px -2px rgba(0, 0, 0, .35), 0 42px 90px -62px rgba(0, 0, 0, .9); --lift: 0 12px 26px -20px rgba(0, 0, 0, .9); --vis-bg: #0b1631; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .86 0 0 0 0 1 .12 0 0 0 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); color-scheme: dark; } @property --sxu-lx { syntax: ""; inherits: true; initial-value: 76%; } @property --sxu-ly { syntax: ""; inherits: true; initial-value: 30%; } @property --sxu-px { syntax: ""; inherits: true; initial-value: 0; } @property --sxu-py { syntax: ""; inherits: true; initial-value: 0; } #sxu, #sxu * { box-sizing: border-box; } #sxu { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } #sxu { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); } #sxu h1, #sxu h2, #sxu h3, #sxu legend { text-wrap: balance; } /* dugačke složenice (de, nb, sv, nl): rastavi na kraju reda umjesto preliva */ #sxu h1, #sxu h2, #sxu h3, #sxu legend, #sxu .opt > span { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } #sxu a { color: var(--accent-ink); text-underline-offset: 3px; } #sxu button, #sxu input, #sxu select, #sxu textarea { font: inherit; color: inherit; } #sxu :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--halo); } #sxu [hidden] { display: none !important; } #sxu .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #sxu .nw { white-space: nowrap; } #sxu .skip { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 10px 14px; background: var(--amber); color: var(--navy); font-weight: 600; } #sxu .skip:focus { top: 12px; } #sxu .wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 16px; } @media (min-width: 768px) { #sxu .wrap { padding: 0 28px; } } #sxu .init *, #sxu .init *::before, #sxu .init *::after { transition: none !important; } #sxu .linkbtn { padding: 8px 2px; border: 0; background: none; color: var(--accent-ink); cursor: pointer; font: 500 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; } #sxu .linkbtn:hover { color: var(--ink); } /* ---------- studio traka (samo za upitnik): logo, razmjernik koraka, sačuvano, tema, jezik, pomoć, izlaz */ #sxu .studio { position: sticky; top: 0; z-index: 30; background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line); overflow-x: clip; --prog: 0; } #sxu .studio::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); } #sxu .st-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; max-width: 1440px; height: var(--hh); margin: 0 auto; padding: 2px 12px 0; } #sxu .st-l, #sxu .st-r { display: flex; align-items: center; min-width: 0; } #sxu .st-l { gap: 10px; } #sxu .st-r { gap: 2px; justify-content: flex-end; } #sxu .st-logo { position: relative; display: flex; align-items: center; width: auto; min-height: 44px; color: var(--ink); text-decoration: none; } #sxu .st-logo svg { display: block; } #sxu .st-logo .full { display: none; width: 124px; height: auto; } #sxu .st-logo .mark { width: 32px; height: 26px; } #sxu .st-rule { width: 1px; height: 28px; background: var(--line-2); } /* ime se lomi samo između riječi: jednodijelno ime (švedsko „Offertförfrågan“) nikad usred riječi; min-width pobjeđuje max-width, pa je okvir tada širok koliko i riječ (provjera 2, izgled-07) */ #sxu .st-name { min-width: min-content; max-width: 9.5em; margin: 0; color: var(--ink-2); font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: normal; hyphens: manual; } /* najuži telefoni: duga jednodijelna imena (npr. švedsko „Offertförfrågan“) staju u jedan red pored kruga */ @media (max-width: 380px) { #sxu .st-name { letter-spacing: 0; } } /* 320-359 px: srednja kolona trake je na telefonu prazna, pa razmaci oko nje i oko crte daju mjesto imenu */ @media (max-width: 359px) { #sxu .st-in { column-gap: 2px; } #sxu .st-l { gap: 8px; } } /* Natpisi dugmadi trake (provjera 2): tekst natpisa nije dio imena dugmeta (alternativni tekst "" iza kose crte; ime daje skriveni tekst ili natpis dugmeta, pristup-09); natpis se može preći mišem (providna gornja ivica od 6 px premošćuje razmak, a dok se vidi prima pokazivač) i sklanja se tasterom Escape (klasa tip-x iz app.js) (WCAG 1.4.13, pristup-10). */ #sxu .tipl[data-tip]::after, #sxu .tipr[data-tip]::after, #sxu .tipc[data-tip]::after { content: attr(data-tip); content: attr(data-tip) / ""; position: absolute; z-index: 5; top: 100%; padding: 6px 9px; border-top: 6px solid transparent; border-radius: 2px; background: var(--tip); background-clip: padding-box; color: var(--tip-t); font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateY(-3px); transition: opacity .18s, transform .18s; pointer-events: none; } #sxu .tipl[data-tip]::after { left: 0; } #sxu .tipr[data-tip]::after { right: 0; } #sxu .tipc[data-tip]::after { left: 50%; translate: -50% 0; } @media (hover: hover) { #sxu [data-tip]:hover::after { opacity: 1; transform: none; pointer-events: auto; } } #sxu [data-tip]:focus-visible::after { opacity: 1; transform: none; } #sxu [data-tip].tip-x::after { opacity: 0 !important; pointer-events: none !important; } /* razmjernik: koraci kao mjerna skala sa nacrta */ #sxu .rz { justify-self: center; width: min(100%, 460px); min-width: 0; } #sxu .rz-lab { display: flex; gap: 6px; margin: 0 0 1px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; } #sxu .rz-lab b { color: var(--accent-ink); font-weight: 500; } #sxu .rz-lab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); } #sxu .rz-bar { position: relative; display: flex; min-height: 26px; margin: 0; padding: 0; list-style: none; } #sxu .rz-bar li { position: relative; flex: 1 1 0; min-width: 0; display: flex; } #sxu .rz-s { position: relative; flex: 1; min-width: 24px; height: 26px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; } #sxu .rz-s::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 8px; border: 1px solid var(--draw); border-left: 0; background: transparent; transition: background-color .3s; } #sxu .rz-bar li:first-child .rz-s::before { border-left: 1px solid var(--draw); } #sxu .rz-bar li:nth-child(even) .rz-s::before { background-color: color-mix(in srgb, var(--draw) 7%, transparent); } #sxu .rz-s.seen::before { background-color: color-mix(in srgb, var(--draw) 34%, transparent); } #sxu .rz-s.full::before { background-color: var(--draw); } #sxu .rz-bar li:nth-child(even) .rz-s.full::before { background-color: color-mix(in srgb, var(--draw) 68%, transparent); } #sxu .rz-s:not(:disabled):hover::before { background-color: var(--amber); } #sxu .rz-s[aria-current]::before { background-color: transparent; } #sxu .rz-s .pf { position: absolute; left: 0; top: 10px; height: 6px; width: calc(100% * var(--p, 0)); background: repeating-linear-gradient(135deg, var(--amber) 0 2px, transparent 2px 4px); transition: width .5s var(--ease); } #sxu .rz-s:disabled { cursor: default; } #sxu .rz-s:focus-visible { outline-offset: 0; } #sxu .st-save { display: flex; align-items: center; gap: 6px; margin: 0 4px 0 0; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; visibility: hidden; } #sxu .st-save.on { visibility: visible; } #sxu .st-save svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #sxu .st-save path { stroke-dasharray: 24; } #sxu .mo .st-save.tick path, #sxu .st-save.tick path { animation: sxu-tick .7s var(--ease); } #sxu .st-save.tick svg { animation: sxu-pop .7s var(--ease); } #sxu .ring.tick .rf { animation: sxu-glow .7s var(--ease); } @keyframes sxu-glow { 30% { stroke-width: 4; } } @keyframes sxu-tick { from { stroke-dashoffset: 24; } } @keyframes sxu-pop { 30% { transform: scale(1.35); } } #sxu .st-save .t { display: none; } #sxu .ib { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; } #sxu .ib:hover, #sxu .ib[aria-expanded="true"] { border-color: var(--line-2); } #sxu .ib svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #sxu .ib .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :root[data-theme="night"] #sxu .ib .moon, :root[data-theme="day"] #sxu .ib .sun { display: none; } #sxu .st-tema { display: none; } #sxu .langsel { position: relative; display: none; } #sxu .lang-btn { min-width: 44px; } #sxu .lang-btn span:not(.sr) { padding: 5px 7px 4px; border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink-2); font: 500 11px/1 var(--mono); letter-spacing: .1em; } #sxu .lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; display: grid; gap: 2px; min-width: 190px; padding: 8px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sheet); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .55); } #sxu .lang-menu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); } #sxu .lang-menu a, #sxu .lang-menu button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); font: 500 15px var(--sans); text-align: left; text-decoration: none; cursor: pointer; } #sxu .lang-menu a:hover, #sxu .lang-menu button:hover { background: var(--surface-2); } #sxu .lang-menu b { display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: var(--r); color: var(--accent-ink); font: 500 11px var(--mono); letter-spacing: .08em; } #sxu .lang-menu [aria-current="true"] b, #sxu .lang-menu [aria-pressed="true"] b { border-color: transparent; background: var(--grad); color: var(--navy); } #sxu .ring { position: relative; display: block; width: 40px; height: 40px; margin-right: 2px; } #sxu .ring svg { width: 40px; height: 40px; transform: rotate(-90deg); } #sxu .ring circle { fill: none; stroke-width: 2.4; } #sxu .ring .rt { stroke: var(--line-2); } #sxu .ring .rf { stroke: var(--amber); stroke-dasharray: var(--rp, 0) 100; transition: stroke-dasharray .6s var(--ease); } #sxu .ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 500 11px/1 var(--mono); letter-spacing: .04em; } #sxu .st-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--line); } #sxu .st-line i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--prog) * 100%); background: var(--grad); transition: width .6s var(--ease); } #sxu .st-line::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--sheet) calc(10% - 1px) 10%); } @media (max-width: 759px) { #sxu { --hh: 56px; } #sxu .rz-bar { display: none; } #sxu .rz-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } @media (min-width: 760px) { #sxu .st-in { gap: 16px; padding: 2px 20px 0; } #sxu .st-logo .full { display: block; } #sxu .st-logo .mark, #sxu .ring, #sxu .st-line { display: none; } #sxu .st-tema, #sxu .langsel { display: inline-flex; } #sxu .st-name { max-width: none; white-space: nowrap; } } @media (min-width: 760px) and (max-width: 999px) { #sxu .st-name { max-width: 9.5em; white-space: normal; } } @media (min-width: 1000px) { #sxu .st-in { gap: 24px; padding: 2px 24px 0; } #sxu .st-logo .full { width: 140px; } #sxu .st-save .t { display: inline; } #sxu .ib.help .t { position: static; width: auto; height: auto; overflow: visible; clip: auto; } } @media (min-width: 1200px) { #sxu .st-logo .full { width: 150px; } #sxu .ib.exit .t { position: static; width: auto; height: auto; overflow: visible; clip: auto; } } /* pomoć */ #sxu .pop { position: fixed; z-index: 99; top: calc(var(--hh) + 8px); right: max(12px, calc((100vw - 1440px) / 2 + 24px)); width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - var(--hh) - 20px); max-height: calc(100dvh - var(--hh) - 20px); overflow: auto; padding: 24px 22px 20px; background: var(--sheet); border: 1px solid var(--line-2); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .55); color: var(--ink); } #sxu .pop::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); } #sxu .mo .pop.in { animation: sxu-drop .3s var(--ease); } @keyframes sxu-drop { from { opacity: 0; transform: translateY(-8px); } } #sxu .pop h2 { margin: 0 0 14px; font: 500 1.35rem/1.15 var(--display); } #sxu .pop h2:focus { outline: none; box-shadow: none; } #sxu .pop h3 { margin: 20px 0 8px; color: var(--accent-ink); font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; } #sxu .pop ul, #sxu .pop ol { margin: 0; padding: 0; list-style: none; } #sxu .pop-c a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; } #sxu .pop-c a:hover { color: var(--accent-ink); } #sxu .pop-c svg, #sxu .pop-n svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #sxu .pop-h { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; } #sxu .pop ol { counter-reset: k; } #sxu .pop ol li { position: relative; padding: 0 0 8px 30px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; counter-increment: k; } #sxu .pop ol li::before { content: "0" counter(k); position: absolute; left: 0; top: 2px; color: var(--accent-ink); font: 500 11px/1.4 var(--mono); } #sxu .pop-n { display: flex; gap: 10px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; line-height: 1.45; } #sxu .pop-s { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; } #sxu .pop-s .linkbtn { padding: 4px 0; min-height: 0; } #sxu .pop-t { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; } #sxu .pop-t .ib { border-color: var(--line-2); } @media (min-width: 760px) { #sxu .pop-t { display: none; } } #sxu .pop-x { position: absolute; top: 10px; right: 10px; } #sxu .pop-l { flex-wrap: wrap; } #sxu .lang-list { display: flex; flex-wrap: wrap; gap: 4px; } #sxu .lang-list a, #sxu .lang-list button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; text-decoration: none; cursor: pointer; } #sxu .lang-list b { display: grid; place-items: center; min-width: 38px; height: 30px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: var(--r); color: var(--accent-ink); font: 500 11px var(--mono); letter-spacing: .08em; } #sxu .lang-list [aria-current="true"] b, #sxu .lang-list [aria-pressed="true"] b { border-color: transparent; background: var(--grad); color: var(--navy); } #sxu .pop-l { margin-top: 4px; } /* izlaz i ostali dijalozi */ #sxu dialog { width: min(560px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sheet); color: var(--ink); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .6); } #sxu dialog::backdrop { background: rgba(5, 11, 24, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } #sxu .mo dialog[open], #sxu dialog[open] { animation: sxu-rise .4s var(--ease); } #sxu .sheetdlg { width: min(460px, calc(100vw - 32px)); max-width: none; } #sxu .dlg-in, #sxu .dlg { position: relative; padding: 30px 26px 24px; } #sxu .dlg-in::before, #sxu .dlg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); } #sxu .dlg-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border: 1px solid var(--sel-line); border-radius: 50%; color: var(--accent-ink); } #sxu .dlg-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #sxu .sheetdlg h2, #sxu .dlg h2 { margin: 0 0 6px; font: 500 1.45rem/1.15 var(--display); letter-spacing: -.01em; } #sxu .sheetdlg p, #sxu .dlg p { margin: 0 0 22px; color: var(--ink-2); } #sxu .dlg-a, #sxu .dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; } #sxu .dlg-a .btn, #sxu .dlg-actions .btn { flex: 1 1 170px; } /* dugme nikad uže od svog natpisa u jednom redu (najviše do širine reda): kada dva duža natpisa (hr „Natrag na web-stranicu“, sl, sv) ne stanu jedan pored drugog, dugmad idu jedno ispod drugog kao na telefonu, umjesto natpisa u dva reda ili prijeloma na crtici; bosanski natpisi staju, pa se kod njih ništa ne mijenja */ #sxu .dlg-a .btn, #sxu .dlg-actions .btn { min-width: fit-content; } #sxu .dlg .x { float: right; min-width: 44px; min-height: 44px; margin: -14px -14px 0 0; border: 0; background: transparent; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; } @media (max-width: 759px) { #sxu .sheetdlg { width: 100%; max-width: 100%; margin: auto 0 0; border-width: 1px 0 0; } #sxu .sheetdlg .dlg-in { padding-bottom: max(24px, env(safe-area-inset-bottom)); } #sxu .sheetdlg[open] { animation-name: sxu-up; } } @keyframes sxu-up { from { transform: translateY(40px); opacity: 0; } } #sxu #zoom-dlg { width: min(1200px, calc(100% - 24px)); } #sxu #zoom-dlg canvas.house { display: block; width: 100%; height: auto; background: var(--vis-bg); } #sxu #zoom-dlg .dlg { padding: 14px; } /* traka za izbor jezika (samostalni upitnik) i oznaka načina rada */ #sxu .langbar { border-bottom: 1px solid var(--line); background: var(--surface); } #sxu .langbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 14px; padding-bottom: 14px; } #sxu .lb-text { flex: 1 1 280px; margin: 0; color: var(--ink-2); font-size: .94rem; } #sxu .lb-text b { color: var(--ink); } #sxu .lb-langs { display: flex; flex-wrap: wrap; gap: 6px; } #sxu .lb-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 5px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--tile); color: var(--ink); font: 500 .86rem var(--sans); cursor: pointer; } #sxu .lb-pill b { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--accent-ink); font: 500 11px var(--mono); letter-spacing: .08em; } #sxu .lb-pill small { color: var(--muted); font-size: .75rem; } #sxu .lb-pill[aria-pressed="true"] { border-color: var(--sel-line); background: var(--sel-bg), var(--tile); } #sxu .lb-pill[aria-pressed="true"] b, #sxu .lb-pill.sug b { background: var(--grad); color: var(--navy); } #sxu .lb-pill.sug { border-color: var(--sel-line); } #sxu .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } #sxu .mode-banner { border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: .9rem; } #sxu .mode-banner .wrap { padding-top: 9px; padding-bottom: 9px; } #sxu .mode-banner b { color: var(--accent-ink); } /* ---------- režim pregleda (#pregled, samo samostalni upitnik) */ #sxu .review-banner { display: none; border-bottom: 1px solid var(--line); background: var(--surface); } body.review #sxu .review-banner { display: block; } #sxu .review-banner .wrap { padding-top: 16px; padding-bottom: 16px; } #sxu .review-banner h2 { margin: 0 0 6px; font: 500 1.2rem var(--display); } #sxu .review-banner p { margin: 0 0 8px; color: var(--muted); } #sxu .review-banner ul { margin: 6px 0 0; padding-left: 18px; columns: 2 340px; column-gap: 32px; } #sxu .review-banner li { margin-bottom: 4px; break-inside: avoid; } #sxu .rv { display: none; } body.review #sxu .rv { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 3px 8px; border: 1px solid var(--line-2); color: var(--muted); font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; } body.review #sxu .rv.izmj { border-color: var(--amber); color: var(--accent-ink); } body.review #sxu .rv.novo { border-color: var(--ok); color: var(--ok); } body.review #sxu .rv.gpt { border-color: #6b7fd7; color: #4d5fb8; } #sxu .rv-note { display: none; } body.review #sxu .rv-note { display: block; margin: 10px 0 0; padding: 8px 12px; border-left: 2px dashed var(--line-2); color: var(--muted); font-size: .86rem; } /* ---------- list papira */ #sxu .page { display: block; max-width: 1320px; margin: 0 auto; padding: 12px 10px 30px; } @media (min-width: 720px) { #sxu .page { padding: 26px 24px 48px; } } #sxu .page:focus { outline: none; box-shadow: none; } #sxu .sheet { --sxu-lx: 76%; --sxu-ly: 30%; position: relative; overflow: clip; background: var(--sheet) var(--grain); background-size: 180px 180px; border: 1px solid var(--line-2); box-shadow: var(--shadow); transition: --sxu-lx .5s var(--ease), --sxu-ly .5s var(--ease), --sxu-px .8s var(--ease), --sxu-py .8s var(--ease); } #sxu .sheet.slow { transition-duration: 1.8s, 1.8s, .8s, .8s; } #sxu .sheet::before { content: ""; position: absolute; z-index: 2; inset: 8px; border: 1px solid var(--line-2); pointer-events: none; } #sxu .sheet.thump { animation: sxu-thump .4s var(--ease); } @keyframes sxu-thump { 35% { translate: 0 2px; } } #sxu .gridl, #sxu .lamp { position: absolute; pointer-events: none; } #sxu .gridl { inset: -6px; translate: calc(var(--sxu-px) * -2.5px) calc(var(--sxu-py) * -2.5px); background-image: linear-gradient(var(--grid-2) 1px, transparent 1px), linear-gradient(90deg, var(--grid-2) 1px, transparent 1px), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: 5px 5px; } #sxu .gridl::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s; background-image: linear-gradient(var(--lampg) 1px, transparent 1px), linear-gradient(90deg, var(--lampg) 1px, transparent 1px); background-size: 24px 24px; background-position: 5px 5px; -webkit-mask-image: radial-gradient(230px circle at calc(var(--sxu-lx) + 6px) calc(var(--sxu-ly) + 6px), #000, transparent); mask-image: radial-gradient(230px circle at calc(var(--sxu-lx) + 6px) calc(var(--sxu-ly) + 6px), #000, transparent); } #sxu .lamp { inset: 0; opacity: 0; transition: opacity 1.6s; background: radial-gradient(620px circle at var(--sxu-lx) var(--sxu-ly), var(--lamp), transparent 62%); } #sxu .lit .lamp, #sxu .lit .gridl::after { opacity: 1; } #sxu .mo .sheet.sweep { animation: sxu-sweep 6.5s cubic-bezier(.45, 0, .25, 1) both; } @keyframes sxu-sweep { 0% { --sxu-lx: 6%; --sxu-ly: 12%; } 40% { --sxu-lx: 92%; --sxu-ly: 24%; } 70% { --sxu-lx: 30%; --sxu-ly: 40%; } 100% { --sxu-lx: 62%; --sxu-ly: 22%; } } #sxu .layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); } /* crtež je širok 600 px od 1240 px prozora; ispod toga se sužava (do 420 px kod 1024), da kolona pitanja ne padne na 254 px (provjera 2, izgled-01: polja, kartica „Ko ste vi?“ i široki izbori na 1024-1240 px) */ @media (min-width: 1024px) { #sxu .layout { grid-template-columns: minmax(0, 1fr) clamp(420px, 100vw - 640px, 600px); } } /* ---------- crtež (desno na računaru, gore na telefonu) */ #sxu .panel { position: relative; min-width: 0; padding: 18px 18px 0; } @media (min-width: 1024px) { #sxu .panel { order: 2; padding: 34px 34px 34px 0; } #sxu .panel-in { position: sticky; top: calc(var(--hh) + 20px); } /* provjera 6, RC-02: pečat „Završeno“ visi oko 19 px ispod sastavnice. Na vrhu stranice (poslije učitavanja i „Nastavite upitnik“) panel je stajao 15 px niže nego poslije „Dalje“ (stranica tada stane na 15 px), pa je donji dio pečata odsijecala ivica prozora. U koracima panel sada od početka stoji gdje stoji poslije „Dalje“ (111 px na računaru): gornji razmak 21 umjesto 34 px, a zakačen ostaje na tom istom mjestu (traka + 47 px). fitPanel (app.js) za pečat ostavlja 21 px ispod sastavnice (8 + 13 za koje je panel sada viši), pa crtež, isječak i redovi po dva ostaju tačno kakvi su bili. Samo kada ni najmanji crtež ne stane (fit-over), panel se kači više, kao ranije, da se vidi što više. Ulaz i završni list ostaju kakvi su. */ #sxu .started:not(.fin) .panel { padding-top: 21px; } #sxu .started:not(.fin) .panel-in { top: calc(var(--hh) + 47px); } #sxu .started:not(.fin) .panel.fit-over .panel-in { top: calc(var(--hh) + 20px); } /* provjera 7, R6-02: u takvom niskom prozoru (npr. 1280 × 600, laptop 14" na 150 %) panel je na vrhu stranice stajao 21 px niže nego zakačen, pa je donjih 20 px pečata bilo ispod ivice prozora dok se stranica ne pomjeri. Bez gornjeg razmaka panel je na vrhu stranice 8 px ispod mjesta gdje se kači, pa je pečat cio odmah. fitPanel računa crtež sa razmakom od 21 px (prije nego što doda fit-over), pa je crtež iste veličine kao ranije. */ #sxu .started:not(.fin) .panel.fit-over { padding-top: 0; } /* panel staje u niži prozor (app.js fitPanel, provjera 2): redovi sastavnice po dva, isječak crteža kao na telefonu, uži crtež */ #sxu .panel .dwframe { max-width: var(--sxu-dww, none); margin-inline: auto; } #sxu .panel.dw-crop .dwframe { aspect-ratio: 1536 / 740; } #sxu .panel.dw-crop .stage { top: calc(-100cqw * 90 / 1536); } #sxu .panel.tb-pair .tb > div:not(.tb-more), #sxu .panel.tb-pair .tb-more > div { min-height: 0; padding-top: 5px; padding-bottom: 5px; } #sxu .panel.tb-pair .tb > div.w:not(.tb-more) { grid-column: auto; } #sxu .panel.tb-pair .tb > div.w:nth-child(odd):not(.tb-more) { border-right: 1px solid var(--line-2); } #sxu .panel.tb-pair .tb-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } #sxu .panel.tb-pair .tb-more > div:nth-child(2) { border-top: 0; } #sxu .panel.tb-pair .tb-more > div:nth-child(odd) { border-right: 1px solid var(--line-2); } } #sxu .dwbox { position: relative; z-index: 3; } #sxu .dwframe { position: relative; container-type: inline-size; aspect-ratio: 3 / 2; overflow: hidden; } #sxu .stage { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 3 / 2; } #sxu .vis { position: absolute; inset: 0; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .5s; } #sxu .colour .vis { opacity: 1; clip-path: inset(0 0 0 0); } #sxu .colour-in .vis { transition: clip-path 1.8s cubic-bezier(.6, .05, .25, 1), opacity .5s; } #sxu .vis canvas.house, #sxu .vis .housephoto { display: block; width: 100%; height: 100%; object-fit: cover; } #sxu .vis canvas.house { opacity: 0; transition: opacity .35s; } #sxu .vis canvas.house.ready { opacity: 1; } #sxu .vis .vis-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; } #sxu .vis canvas.house.ready + .vis-wait { display: none; } #sxu .dw { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; } #sxu .dw path, #sxu .dw circle { fill: none; stroke: var(--draw); stroke-linecap: round; stroke-linejoin: round; } #sxu .dw .w1 { stroke-width: 1.6; } #sxu .dw .w2 { stroke-width: 2.6; } #sxu .dw .w3 { stroke-width: 4; } #sxu .dw .w4 { stroke-width: 5.5; } #sxu .dw .ov { opacity: .55; } #sxu .dw .cl path { stroke-dasharray: 24 10 5 10; opacity: .35; } #sxu .dw .dash { stroke-dasharray: 8 6; opacity: .75; } #sxu .dw .bnd { stroke-dasharray: 22 8 5 8; stroke: var(--dim); stroke-width: 2; } #sxu .dw .dim path { stroke: var(--dim); stroke-width: 2.2; } #sxu .dw .hatch path.w1 { opacity: .6; } #sxu .dw .nf { stroke: none; } #sxu .dw .earth { fill: url(#sxu-p-earth); opacity: .7; } #sxu .dw .eps { fill: url(#sxu-p-eps); } #sxu .dw .wood { fill: url(#sxu-p-wood); } #sxu .dw .osb { fill: var(--draw); opacity: .45; } #sxu .dw .nfill { fill: var(--draw); } #sxu .dw .wool { opacity: .8; } #sxu .dw .bld { transition: opacity .3s; } #sxu .dw .bld.dim0 { opacity: .3; } #sxu .fx .dw .cl { opacity: 0; transform: scaleX(.2); transform-origin: 50% 50%; transform-box: fill-box; transition: opacity .6s, transform .8s var(--ease); } #sxu .fx .dw .cl.on { opacity: 1; transform: none; } #sxu .mo .dw .dr :is(path, circle):not(.dash):not(.nf):not(.bnd) { stroke-dasharray: 1; transition: stroke-dashoffset .8s var(--ease) calc(var(--i, 0) * .08s), stroke .8s, opacity .4s; } #sxu .fx .dw .ent:not(.on) :is(path, circle):not(.dash):not(.nf):not(.bnd), #sxu .mo .dw .rd:not(.on) :is(path, circle):not(.dash):not(.nf):not(.bnd), #sxu .mo .dw .ly:not(.on) :is(path, circle):not(.dash):not(.nf):not(.bnd) { stroke-dashoffset: 1; } #sxu .dw .ly { opacity: 0; transition: opacity .4s; } #sxu .page:not(.started) .dw #truss { opacity: 0; } #sxu .dw .ly.on { opacity: 1; } #sxu .dw #dims { transition: opacity .4s; } #sxu .started .dw #dims { opacity: 0; } #sxu .pl { translate: calc(var(--sxu-px) * var(--d) * 3px) calc(var(--sxu-py) * var(--d) * 3px); } #sxu #north { transform-box: view-box; transform-origin: 110px 200px; transition: rotate 1.6s var(--ease); } #sxu .fx #north:not(.on) { rotate: -140deg; } #sxu #north.orient { rotate: -20deg; } /* tinta u boju: crtež se povuče, a postojeći prikaz kuće se razlije s lijeva na desno */ #sxu .colour .dw :is(#bld, #truss, #cl, #ground, #terrain, #plot, #sec, #north, #dims) { opacity: 0; transition: opacity 1.2s .6s; } #sxu .colour .dwl { opacity: 0; } #sxu .dwl { position: absolute; z-index: 2; color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transition: opacity .4s; } #sxu .dwl-n { left: 10.4%; top: 15.2%; translate: 0 -50%; } #sxu .dwl-k { left: 62.3%; top: 75.5%; translate: -50% 0; rotate: -9.9deg; } @media (max-width: 420px) { #sxu .dwl-k { translate: -50% -4px; } } #sxu .dwl-m { left: 98.6%; top: 46.6%; translate: -50% -50%; rotate: -90deg; } /* kota ±0,00 i ime mjesta ispod parcele: centrirani kao do sada, a kada bi izašli preko desne ivice crteža (telefon, duga imena), pomjere se ulijevo taman toliko da ostanu u okviru (cqw = širina okvira crteža); vrlo duga imena dobiju „…“ (provjera 2, izgled-08) */ /* provjera 5, IC-04: kota ±0,00 stoji ispod linije terena (ispod zemlje, desno), a ne iznad trokutića: tamo je linija desnog ugla kuće (x 1430-1442 od 1536) prolazila kroz natpis, na telefonu kroz sredinu, na računaru kroz „±“; desno od ugla nema mjesta za natpis */ #sxu .dwl-z { left: 96.6%; top: 65.6%; translate: min(-50%, calc(3.4cqw - 100% - 3px)) 0; } /* provjera 6, RC-01: od koraka 4 desni ugao ispod terena zauzima okvir presjeka zida (#sec), pa kota tamo leži na presjeku. Kada je crtež dovoljno širok, kota stoji uspravno (čita se odozdo nagore, kao „10–15 minuta“ na ulazu) tik iznad trokutića, u koloni desno od ugla kuće: 2 px iznad trokutića, ispod ose (crta-tačka, y 377), lijevo od ivice okvira, na koracima 2-4 uvijek na istom mjestu. Između trokutića (y 562) i ose je 183 jedinice, a natpis bez razmaka slova ima 33 px, pa staje od crteža širokog 320 px; mišem se osa pomjera za ±4,5 px (dubina .pl), pa na računaru tek od 334 px. Uži crtež (telefon uži od oko 378 px, jer je crtež 58 px uži od prozora, npr. 320, 360 i 375 px; niži prozor računara sa dugom sastavnicom) ostavlja kotu ispod terena kao do sada, a kada se pojavi presjek zida, kota se skloni (kao „10–15 minuta“ na crtežu užem od 560 px): za nju tada nigdje uz trokutić nema slobodnog mjesta (izmjereno u provjeri 7; ranije je ovdje pogrešno pisalo „do 359 px“). */ @container (min-width: 334px) { #sxu .dwl-z { top: calc(54.88% - 2px); translate: 0 -50%; transform-origin: 0 50%; rotate: -90deg; letter-spacing: 0; } } @media not all and (hover: hover) and (pointer: fine) { @container (min-width: 320px) { #sxu .dwl-z { top: calc(54.88% - 2px); translate: 0 -50%; transform-origin: 0 50%; rotate: -90deg; letter-spacing: 0; } } } @container (max-width: 319.98px) { #sxu .stage:has(#sec.on) .dwl-z { opacity: 0; } } @media (hover: hover) and (pointer: fine) { @container (max-width: 333.98px) { #sxu .stage:has(#sec.on) .dwl-z { opacity: 0; } } } #sxu .dwl-p { left: 91.15%; top: 25.4%; translate: min(-50%, calc(8.85cqw - 100% - 3px)) 0; max-width: 58cqw; overflow: hidden; text-overflow: ellipsis; } #sxu .dwl-u { left: 81%; top: 74.2%; translate: -100% 0; } #sxu .fx .dwl-n, #sxu .fx .dwl-k, #sxu .fx .dwl-m { opacity: 0; } #sxu .fx-run .dwl-n, #sxu .intro-over .dwl-n { opacity: 1; transition-delay: 1.4s; } #sxu .fx-run.intro-over .dwl-k, #sxu .fx-run.intro-over .dwl-m, #sxu .intro-over:not(.fx) .dwl-k, #sxu .intro-over:not(.fx) .dwl-m { opacity: 1; } #sxu .page.started .dwl-k, #sxu .page.started .dwl-m { opacity: 0 !important; } #sxu .dwl-z, #sxu .dwl-p, #sxu .dwl-u { opacity: 0; } #sxu .started:not([data-step="0"]) .dwl-z, #sxu .started:not([data-step="0"]) .dwl-p { opacity: 1; } #sxu .started .dwl-u:not(:empty) { opacity: 1; } #sxu .started[data-step="0"] .dwl-u, #sxu .started[data-step="1"] .dwl-u, #sxu .started[data-step="2"] .dwl-u { opacity: 0; } #sxu .colour .dwl { opacity: 0 !important; } /* pečati */ #sxu .stp { opacity: 0; transform-box: view-box; pointer-events: none; } #sxu .stp.on { opacity: .9; } :root[data-theme="day"] #sxu .stp { mix-blend-mode: multiply; } #sxu #permit { transform-origin: 285px 470px; rotate: -12deg; } #sxu #recv { transform-origin: 960px 500px; rotate: -10deg; } /* provjera 2, izgled-04: pečat dozvole pripada crtežu (koraci 3-4), ne prikazu kuće u boji; „Primljeno“ na zahvali stoji iznad krova desno (ne preko prozora i vrata). Oba pečata se pokazuju samo kada se njihov natpis vidi (okvir od 520 px): uži okvir (telefon, 1024-1194 px, niži prozor računara kada fitPanel suzi crtež) dao bi prazan krug bez natpisa */ #sxu .colour .dw #permit { visibility: hidden; transition: visibility 0s .9s; } #sxu .colour .dw #recv { translate: 330px -260px; } /* provjera 3: isječen okvir crteža (tablet do 1023 px, niži prozor računara sa dw-crop) pokazuje samo visinu 90-830, pa bi pečat „Primljeno“ izašao preko gornje ivice (768 × 1024, 1280 × 632, 1366 × 657); tu je malo manji i niži, cijeli u okviru, i dalje iznad krova desno, ne preko prozora (natpis i u okviru od 520 px ostaje 11 px) */ @media (max-width: 1023px) { #sxu .colour .dw #recv { translate: 330px -234px; transform: scale(.82); } } @media (min-width: 1024px) { #sxu .colour .panel.dw-crop .dw #recv { translate: 330px -234px; transform: scale(.82); } } /* provjera 5, IC-10: „Primljeno“ u punoj veličini (računar bez isječka) ima natpis od 40 jedinica, pa je i u okviru od 450 px natpis 11,7 px; zato se crta od 450 px, i na zahvali od 1024 do oko 1100 px širine (okvir 454-529 px, iPad položen, uži laptop). Manji pečat (.82, isječen okvir: tablet i niži laptop) i pečat dozvole (natpis 34 jedinice) i dalje traže okvir od 520 px. */ @container (max-width: 519px) { #sxu .dw #permit, #sxu .panel.dw-crop .dw #recv { display: none; } } @container (max-width: 449px) { #sxu .dw #recv { display: none; } } @media (max-width: 1023px) { @container (max-width: 519px) { #sxu .dw #recv { display: none; } } } #sxu .dw .stp circle, #sxu .dw .stp .sck { fill: none; stroke: var(--stampc); stroke-width: 5; } #sxu .dw .stp .si { stroke-width: 2.4; } #sxu .dw .stp .so { stroke-dasharray: 120 5 66 3 192 7 90 4 270 4; } #sxu .dw .stp .sck { stroke-width: 8; } #sxu .dw .stp text { fill: var(--stampc); font: 500 34px var(--mono); letter-spacing: 0; } #sxu .dw #recv text { font-size: 40px; } #sxu .dw .stp polygon { fill: var(--stampc); } #sxu .stp.land { animation: sxu-land .55s cubic-bezier(.3, 1.5, .5, 1) both; } @keyframes sxu-land { 0% { opacity: 0; scale: 1.9; } 55% { opacity: .95; scale: .95; } 100% { opacity: .9; scale: 1; } } @container (max-width: 449px) { #sxu .dw .stp text { display: none; } } /* uzak crtež (ispod 560 px): visina zida je kraća od natpisa „10–15 minuta“ (90 px prema 45-92 px), pa vertikalna kota sa natpisom ostaje samo na širem crtežu; trajanje tada stoji u listi ispod pozdrava (provjera 2, izgled-09) */ @container (max-width: 559px) { #sxu .dwl-m, #sxu .dw #dims path:nth-child(2) { display: none; } } /* traka ispod prikaza u boji: pogled, uvećanje, slika, napomena */ #sxu .vbar:empty { display: none; } #sxu .vbar { padding: 10px 0 0; } #sxu .vb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #sxu .vtabs { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; } #sxu .vtabs button { min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--ink-2); font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; } #sxu .vtabs button[aria-pressed="true"] { background: var(--grad); color: var(--navy); } /* provjera 7, R6-01: okvir .vtabs reže sve van sebe (overflow: hidden, zbog zaobljenih uglova izabranog dugmeta), pa se prsten fokusa (2 px + 3 px razmaka + 6 px oreola, :focus-visible gore) sa tastature nije vidio. Za ova dva dugmeta prsten je unutra: 2 px boje fokusa uz ivicu dugmeta i 2 px papira ispod njega, pa se vidi i na narandžastom izabranom dugmetu, danju i noću. Samo za tastaturu (:focus-visible); mišem i prstom izgled ostaje isti. */ #sxu .vtabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--sheet); } #sxu .vb-act { display: inline-flex; gap: 4px; } #sxu .vb-act .ib { border-color: var(--line-2); } #sxu .draw-note { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; } #sxu .housephoto { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } /* ---------- sastavnica */ #sxu .tb { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; margin-top: 14px; border: 1px solid var(--line-2); background: var(--sheet); font: 500 11px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; } #sxu .tb > div { position: relative; min-width: 0; min-height: 44px; padding: 7px 10px; border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); overflow-wrap: anywhere; } #sxu .tb > div:nth-child(-n+2) { border-top: 0; } #sxu .tb > div:nth-child(2n) { border-right: 0; } #sxu .tb > div.w { grid-column: 1 / -1; border-right: 0; } #sxu .tb small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .12em; } #sxu .tb b { position: relative; display: block; color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: none; } #sxu .tb b.brandcell { letter-spacing: .08em; text-transform: uppercase; overflow-wrap: normal; } /* 320-359 px: jednodijelno ime upitnika (sv) staje u svoju ćeliju bez loma usred riječi */ @media (max-width: 359px) { #sxu .tb b.brandcell { font-size: 11px; letter-spacing: .02em; } } #sxu .tb .big { display: inline-block; font: 500 20px/1 var(--display); letter-spacing: -.01em; color: var(--accent-ink); } /* završni krug prevoda (odluka 134, IC-03): duži strani naziv koraka u ćeliji „List“ (sl „Kontakt in nadaljnji koraki“) staje u jedan red sa 11 px bez razmaka slova, umjesto da sastavnicu povisi za cio red (app.js fitListCell; samo kada tako staje, bs nikad) */ #sxu .tb b.lt-fit #tb-lt { font-size: 11px; letter-spacing: 0; } #sxu .roll { animation: sxu-roll .5s var(--e-out); } @keyframes sxu-roll { from { opacity: 0; transform: translateY(55%); } } #sxu .tb .empty { color: var(--muted); } #sxu .tb .ghost { color: var(--muted); font-style: italic; } #sxu .tb-more { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 !important; } #sxu .tb-more > div { padding: 7px 10px; border-top: 1px solid var(--line-2); } #sxu .tb-more > div:first-child { border-top: 0; } #sxu .tb .dot { display: inline-block; width: 11px; height: 11px; margin: 0 6px 0 0; vertical-align: -1px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); } #sxu .stamp { position: absolute; z-index: 2; right: 14px; bottom: -15px; max-width: calc(100% - 28px); padding: 5px 9px 4px; border: 2px solid var(--accent-ink); background: var(--sheet); color: var(--accent-ink); font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: rotate(-6deg); pointer-events: none; } #sxu .stamp::after { content: ""; position: absolute; inset: 2px; border: 1px solid var(--accent-ink); opacity: .5; } /* pečat „Završeno“ ostaje gdje je bio, na donjem desnom uglu sastavnice, a posljednji red teksta mu se ne podvlači (provjera 5, IC-05): na kraju posljednjeg reda stoji nevidljiv razmak od 70 % širine pečata (--sxu-stw iz app.js, po jeziku; nagnut pečat lijevim krajem ne seže do slova), pa tekst koji bi stigao pod pečat ostavlja pečatu prazan red. Pečat ulazi u sastavnicu samo do posljednjeg reda, pa ostali redovi ostaju kakvi su. Razmak stoji i prije nego što pečat padne, pa ništa ne skače. */ #sxu .tb-more > div:last-child b::after, #sxu .tb > div.w:has(+ .tb-more[hidden]) b::after { content: ""; display: inline-block; width: calc(var(--sxu-stw, 96px) * .7); } #sxu .stamp.on { opacity: .92; } #sxu .stamp.on:not(.set) { animation: sxu-stamp .42s cubic-bezier(.3, 1.6, .5, 1) both; } @keyframes sxu-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.6); } to { opacity: .92; transform: rotate(-6deg) scale(1); } } #sxu .tw-caret { position: absolute; left: 0; top: 0; width: 2px; height: 1em; margin-left: 2px; background: var(--amber); pointer-events: none; } #sxu .tw-caret.end { animation: sxu-blink .9s steps(1) 3, sxu-out .3s 2.7s forwards; } @keyframes sxu-blink { 50% { opacity: 0; } } @keyframes sxu-out { to { opacity: 0; } } #sxu ::highlight(sxu-wait) { color: var(--ghost); } #sxu ::highlight(sxu-wait-0) { color: transparent; } /* ---------- telefon i tablet: crtež gore (ljepljiv dok se odgovara), sastavnica ispod sadržaja */ /* Redoslijed za Tab i čitač ekrana prati prikaz (provjera 2, pristup-18): u HTML-u su pitanja (.content) prije panela crteža, pa na računaru Tab ide od pitanja (lijevo) ka dugmadima crteža (desno); na završnom listu, gdje je crtež lijevo, app.js stavlja panel prije pitanja (finOrder). Na telefonu traka pogleda (Kuća/Prozori, uvećanje, slika) stoji ispod crteža, iznad pitanja: app.js je tada piše u #vbar-m, koje je u HTML-u prije pitanja; crtež je prvi (order 0). */ @media (max-width: 1023px) { #sxu .panel, #sxu .panel-in { display: contents; } #sxu .dwbox { order: 0; padding: 16px 18px 0; } #sxu .dwframe { max-width: 520px; margin: 0 auto; aspect-ratio: 1536 / 740; } #sxu .stage { top: calc(-100cqw * 90 / 1536); } #sxu .content { order: 2; } /* pogled (Kuća/Prozori), uvećanje i slika stoje odmah ispod crteža, a napomena na kraju koraka (provjera 2, izgled-05) */ #sxu .vbar { display: contents; } #sxu .vb-row { order: 1; width: min(100% - 44px, 520px); margin: 8px auto 4px; } #sxu .started:not(.fin):not([data-step="7"]):not([data-step="8"]) .vb-row { width: min(100% - 44px, 340px); } #sxu .vbar .draw-note { order: 3; margin: 0 22px; } /* završni list i zahvala: sastavnice nema, pa je napomena posljednja na listu; dobija isti razmak do dna lista kao sastavnica, da ne stoji na unutrašnjoj liniji okvira (provjera 5, IC-01) */ #sxu .fin .vbar .draw-note { margin-bottom: 34px; } #sxu .tb { order: 4; margin: 0 22px 34px; } #sxu .started:not(.fin):not([data-step="7"]):not([data-step="8"]) .dwbox { padding: 8px 18px 6px; border-bottom: 1px solid var(--line); background-color: var(--sheet); } #sxu .started:not(.fin):not([data-step="7"]):not([data-step="8"]) .dwframe { max-width: min(100%, 340px); } } /* crtež stoji zakačen iznad pitanja samo kada prozor ima bar 500 px visine: na telefonu položenom ukoso i pri uvećanju 200 % (npr. 640 × 360) pitanjima bi ostalo 85-125 px, pa crtež tada odlazi nagore sa stranicom (provjera 2, izgled-02, pristup-03) */ @media (max-width: 1023px) and (min-height: 500px) { #sxu .started:not(.fin):not([data-step="7"]):not([data-step="8"]) .dwbox { position: sticky; top: var(--hh); box-shadow: 0 14px 20px -18px rgba(0, 0, 0, .35); } /* dok se kuca (tastatura je otvorena), crtež ne stoji iznad polja */ #sxu .started .layout:has(.content :is(input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), textarea, select):focus) .dwbox { position: relative; top: auto; } } /* niski prozori (ukoso položen telefon): i crtež ulaza je uži, da se ispod njega vidi pozdrav */ @media (max-width: 1023px) and (max-height: 499px) { #sxu .dwframe { max-width: min(100%, 340px); } } @media (max-width: 759px) { #sxu .dwbox { padding: 14px 14px 0; } } /* ---------- sadržaj: ulaz i koraci */ #sxu .content { position: relative; min-width: 0; padding: 16px 22px 30px; container-type: inline-size; } @media (min-width: 720px) { #sxu .content { padding: 42px 44px 48px; } } @media (min-width: 1024px) { #sxu .content { padding: 64px 56px 56px 64px; } } /* niži ekrani računara (npr. 1024 × 768): dugme „Počnite upitnik“ ostaje u prvom pogledu */ @media (min-width: 1024px) and (max-height: 820px) { #sxu .content { padding-top: 40px; } #sxu .intro .facts { display: flex; gap: 4px 18px; } } #sxu .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--accent-ink); font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; } #sxu .eyebrow::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; } #sxu .hello { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--accent-ink); font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; } #sxu .hello svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } #sxu .hello .k0, #sxu .hello .k1, #sxu .hello .k2 { display: none; } #sxu .doba-0 .hello .k0, #sxu .doba-1 .hello .k1, #sxu .doba-2 .hello .k2 { display: inline; } #sxu .fx .hello { opacity: 0; transform: translateY(6px); transition: opacity .8s var(--ease), transform .8s var(--ease); } #sxu .fx-run .hello, #sxu .fx .intro-done .hello { opacity: 1; transform: none; } #sxu h2.tw { position: relative; margin: 0 0 18px; font: 400 clamp(2.3rem, 12cqi, 4.2rem)/1.03 var(--display); letter-spacing: -.03em; color: var(--ink); } #sxu h2.tw .acc { color: var(--accent-ink); font-weight: 560; } #sxu .fx h2.tw:not(.tw-on), #sxu .fx h2.tw:not(.tw-on) * { color: var(--ghost); } #sxu h2.tw .tw-caret { width: 3px; } #sxu .lead { max-width: 32em; margin: 0 0 18px; color: var(--ink-2); font-size: clamp(1rem, 2.5vw, 1.12rem); } #sxu .facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 22px; padding: 0; list-style: none; } #sxu .facts li { display: flex; align-items: baseline; gap: 8px; font: 500 11.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; } #sxu .facts li::before { content: ""; flex: none; width: 14px; height: 1px; transform: translateY(-4px); background: var(--dim); } @media (min-width: 720px) { #sxu .facts { display: grid; gap: 2px; margin-bottom: 26px; } #sxu .facts li { gap: 10px; font-size: 12.5px; } #sxu .facts li::before { width: 30px; box-shadow: -4px 0 0 0 var(--dim); } } /* niski telefoni (visina do 680 px): dugme ostaje u prvom pogledu i na dužim jezicima, pa lista pokazuje samo jedan red, a ostali se čuvaju za čitače ekrana. Broj koraka stoji na crtežu kao kota; trajanja na crtežu telefona nema (okvir je najviše 520 px, a kota trajanja stoji tek od 560 px, izgled-09), pa je taj red trajanje. */ @media (max-width: 759px) and (max-height: 680px) { #sxu h2.tw { margin-bottom: 14px; font-size: clamp(2rem, 11cqi, 4.2rem); } #sxu .lead { margin-bottom: 14px; } #sxu .intro .facts li:nth-child(n+2) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* vrlo niski ekrani (npr. 320 × 568): još malo zbijeniji ulaz, crtež ostaje iste veličine */ @media (max-width: 759px) and (max-height: 600px) { #sxu .page:not(.started) .dwbox { padding-top: 8px; } #sxu .page:not(.started) .content { padding-top: 8px; } #sxu h2.tw { margin-bottom: 10px; font-size: clamp(1.75rem, 10cqi, 4.2rem); } #sxu .intro .lead { margin-bottom: 10px; font-size: .94rem; line-height: 1.5; } #sxu .intro .facts { margin-bottom: 14px; } } /* najniži telefoni (npr. 320 × 480 sa trakama pregledača): dugme „Počnite upitnik“ ostaje u prvom pogledu; crtež ulaza je manji, a lista činjenica ostaje samo za čitače ekrana (provjera 2, izgled-10) */ @media (max-width: 759px) and (max-height: 520px) { #sxu .page:not(.started) .dwframe { max-width: 220px; } #sxu .hello { margin-bottom: 8px; } #sxu h2.tw { margin-bottom: 8px; font-size: clamp(1.625rem, 9.5cqi, 4.2rem); } #sxu .intro .lead { margin-bottom: 8px; } #sxu .intro .facts li { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* najuži telefoni (320-359 px): okvir ulaza je 270-300 px, pa i tu natpis kote „10 koraka“ dobija malo papira ispod sebe (bez toga je dno „10“ dodirivalo ivicu, a slovenački „10 korakov“ izlazio 3 px) */ @media (max-width: 359px) { #sxu .page:not(.started) .dwframe { aspect-ratio: 1536 / 760; } } /* niski prozori telefona i tableta (do 520 px visine: najniži telefoni, telefon položen ukoso): crtež ulaza je uži (220 ili 340 px), a natpis kote „10 koraka“ (11 px) se ne smanjuje sa crtežom, pa je izlazio 4-8,5 px ispod donje ivice okvira. Okvir ulaza tu ima malo papira više ispod kote (1536 × 780 umjesto 740), a natpis stoji 4 px bliže koti, kao na uskim telefonima */ @media (max-width: 1023px) and (max-height: 520px) { #sxu .page:not(.started) .dwframe { aspect-ratio: 1536 / 780; } #sxu .page:not(.started) .dwl-k { translate: -50% -4px; } } #sxu .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; } #sxu .go-back { display: none; } #sxu .back .go-back { display: inline; } #sxu .back .go-new { display: none; } #sxu .resume { margin: 14px 0 0; color: var(--ink-2); font-size: 14px; } /* posjetilac koji se vraća: mjesto za rečenicu „Nastavljate…“ je rezervisano od prvog iscrtavanja (bez skakanja); ista visina ostaje i kada se rečenica pojavi, jer na širokom ekranu stane u jedan red */ #sxu .back:not(.sent) .resume { min-height: 3.4em; } #sxu .back:not(.sent) .resume[hidden] { display: block !important; visibility: hidden; } #sxu .resume .linkbtn { padding: 2px 0; } #sxu .notes { display: grid; gap: 10px; margin: 30px 0 0; padding: 18px 0 0; border-top: 1px dashed var(--line-2); list-style: none; } #sxu .notes li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 14px; line-height: 1.45; } #sxu .notes svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--accent-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #sxu .notes strong { color: var(--ink); font-weight: 600; } @media (min-width: 720px) and (max-width: 1023px), (min-width: 1280px) { #sxu .notes { grid-template-columns: 1fr 1fr; gap: 12px 24px; } } #sxu .fx [data-rv] { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); } #sxu .fx [data-rv].in, #sxu .fx .intro-done [data-rv] { opacity: 1; transform: none; } #sxu .skipintro { position: absolute; right: 18px; bottom: 14px; } #sxu .intro-done .skipintro, #sxu .page:not(.fx) .skipintro { display: none; } #sxu .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 26px; border: 1px solid var(--line-2); border-radius: var(--r); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; font: 720 12px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; text-align: center; transition: transform .22s var(--ease), opacity .2s, translate .5s cubic-bezier(.2, .9, .25, 1.15), border-color .2s, background-color .2s; } #sxu .btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .22s var(--ease); } #sxu .btn:hover svg.arrow, #sxu .btn:hover > svg:last-child { transform: translateX(4px); } #sxu .btn.back:hover svg { transform: translateX(-4px); } #sxu .btn:hover { border-color: var(--sel-line); } #sxu .btn-primary { overflow: hidden; border-color: transparent; background: var(--grad); color: var(--navy); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 30px -20px rgba(164, 82, 0, .95); } #sxu .btn-primary::after { content: ""; position: absolute; inset: -2px; background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .7) 48%, rgba(255, 250, 235, .2) 56%, transparent 66%); transform: translateX(-120%); pointer-events: none; } #sxu .mo .btn-primary.shine::after, #sxu .mo .btn-primary:hover::after { animation: sxu-sheen 1.15s var(--ease); } @keyframes sxu-sheen { to { transform: translateX(120%); } } #sxu .btn-primary:hover { transform: translateY(-2px); } #sxu .btn-primary.magon { transition: transform .22s var(--ease), translate .12s linear; } #sxu .btn[disabled] { opacity: .5; cursor: progress; transform: none; } #sxu .btn[disabled]::after { display: none; } #sxu .btn-sm { min-height: 44px; padding: 0 16px; } #sxu .mag { display: inline-flex; } @media (hover: hover) and (pointer: fine) and (min-width: 720px) { #sxu .mag { margin: -20px -28px; padding: 20px 28px; } } /* stanje „upitnik“: ulaz se povuče, ostaje korak */ #sxu .qview { display: none; } #sxu .started .qview { display: block; } #sxu .started .intro > :not(h2) { display: none; } #sxu .started .intro h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #sxu .sxu-vt .panel-in { view-transition-name: sxu-nacrt; } #sxu .sxu-vt .content { view-transition-name: sxu-sadrzaj; } ::view-transition-group(sxu-nacrt) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); } ::view-transition-old(sxu-sadrzaj) { animation: sxu-vt-out .26s ease-in both; } ::view-transition-new(sxu-sadrzaj) { animation: sxu-vt-in .5s cubic-bezier(.2, .7, .2, 1) .05s both; } :root.sxu-vb::view-transition-old(sxu-sadrzaj) { animation-name: sxu-vt-out-b; } :root.sxu-vb::view-transition-new(sxu-sadrzaj) { animation-name: sxu-vt-in-b; } @keyframes sxu-vt-out { to { opacity: 0; transform: translateX(-22px); } } @keyframes sxu-vt-in { from { opacity: 0; transform: translateX(26px); } } @keyframes sxu-vt-out-b { to { opacity: 0; transform: translateX(22px); } } @keyframes sxu-vt-in-b { from { opacity: 0; transform: translateX(-26px); } } :root.sxu-tt::view-transition-old(root), :root.sxu-tt::view-transition-new(root) { animation: none; mix-blend-mode: normal; } :root.sxu-tt::view-transition-new(root) { animation: sxu-reveal .75s cubic-bezier(.65, 0, .35, 1) both; } @keyframes sxu-reveal { from { clip-path: circle(0 at var(--tx, 90%) var(--ty, 0)); } to { clip-path: circle(150vmax at var(--tx, 90%) var(--ty, 0)); } } #sxu #step.in { animation: sxu-step-in .4s var(--ease) both; } #sxu #step.in[data-dir="back"] { animation-name: sxu-step-back; } @keyframes sxu-step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } @keyframes sxu-step-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } } /* ---------- korak */ #sxu .step-head { padding-bottom: 4px; } #sxu .step-head h2, #sxu .done h2 { margin: 0 0 8px; font: 400 clamp(1.9rem, 5.4vw, 2.8rem)/1.06 var(--display); letter-spacing: -.03em; } #sxu .step-head h2:focus, #sxu .done h2:focus, #sxu .q-t:focus { outline: none; box-shadow: none; } #sxu .q-t:focus-visible { outline: 1px dashed var(--sel-line); outline-offset: 6px; box-shadow: none; } #sxu .st-intro { max-width: 36em; margin: 0 0 6px; color: var(--muted); font-size: 1.02rem; } #sxu .q { min-width: 0; margin: 30px 0 0; padding: 0; border: 0; } #sxu .q-label { display: block; margin: 0 0 6px; padding: 0; color: var(--ink); font: 500 clamp(1.12rem, 3.2vw, 1.3rem)/1.3 var(--display); letter-spacing: -.005em; } #sxu fieldset.q > legend.q-label { float: left; width: 100%; } #sxu fieldset.q > legend.q-label + * { clear: both; } #sxu .q-k { display: block; margin-bottom: 4px; color: var(--muted); font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; } #sxu .q-t { display: inline; } #sxu .q.child .q-label, #sxu .sub .q-label { font: 600 1rem/1.4 var(--sans); } #sxu .q-help { max-width: 40em; margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; } #sxu .req { color: var(--accent-ink); font-weight: 600; } #sxu .prefill { display: inline-block; margin: 0 0 8px; padding: 3px 8px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent-ink); font: 500 11px var(--mono); letter-spacing: .06em; } #sxu .rise { animation: sxu-rise .6s var(--ease) both; } #sxu .rise .opt, #sxu .rise .fld, #sxu .rise .field, #sxu .rise .local { animation: sxu-rise .5s var(--e-out) both; animation-delay: calc(var(--k, 0) * 40ms + 110ms); } @keyframes sxu-rise { from { opacity: 0; transform: translateY(14px); } } /* dodatna pitanja: jedna mirna cjelina ispod pitanja od kojeg zavise */ #sxu .sub { margin: 16px 0 0; padding: 4px 20px 20px; border-left: 1px solid var(--sel-line); background: color-mix(in srgb, var(--surface-2) 60%, transparent); } #sxu .sub > .q.child { margin-top: 18px; } #sxu .matrix .q.child { margin: 2px 0 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); } #sxu .tip { margin: 26px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-2); color: var(--muted); font-size: 13.5px; } /* ---------- izbori: izabrana kartica dobija zlatne uglove (oznake za sječenje) */ #sxu .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 480px; margin-top: 12px; } #sxu .choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 12px; } #sxu .choices.wide { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); } #sxu .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; } #sxu .opt { position: relative; display: block; min-width: 0; } /* skriveno dugme izbora pokriva cijelu karticu (ispod nje), pa je Tab pomjera u vidno polje cijelu, a ne samo njen gornji lijevi ugao (provjera 2, pristup-15); kartica (span) je nacrtana preko njega i prima klik i dodir kao i prije */ #sxu .opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; } #sxu .opt > span { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 52px; height: 100%; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r); background-color: var(--card); color: var(--ink); font-weight: 600; line-height: 1.3; cursor: pointer; --c: 0px; background-image: var(--cn); background-repeat: no-repeat; background-position: var(--cnp); background-size: var(--c) 2px, 2px var(--c), var(--c) 2px, 2px var(--c), var(--c) 2px, 2px var(--c), var(--c) 2px, 2px var(--c); transition: border-color var(--t1), background-size .42s var(--e-snap), color var(--t1), transform var(--t1) var(--e-out), box-shadow var(--t1); } #sxu .opt:active > span { transform: scale(.985); } #sxu .seg .opt > span { align-items: center; text-align: center; padding: 12px 10px; } #sxu .opt small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; font-size: 13.5px; line-height: 1.4; } #sxu .opt:hover > span { border-color: var(--sel-line); } #sxu .opt input:checked + span { --c: 14px; border-color: var(--sel-edge); color: var(--sel-ink); background-color: var(--card); box-shadow: inset 0 0 0 999px rgba(242, 162, 60, .08); } #sxu .opt input:checked + span small { color: var(--ink-2); } #sxu .opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--halo); } /* izabrano: uz zlatne uglove i mala kvačica u gornjem desnom uglu, tamna danju i svijetla noću (8 : 1 i više), pa izbor ne zavisi samo od boje (kao kvačica na lov-7); danju je i ivica izabranog odgovora tamnija (--sel-edge, 5,4 : 1; noću ista kao ranije, 7,2 : 1) (provjera 2, pristup-02). Na slici i na kružiću boje kvačica ima podlogu papira. Kvačica (10 px) stoji unutar zlatnog ugla, iznad prvog reda teksta, pa ne pada na slova ni kada red dopire do ugla (popravka grupe pristup). */ #sxu .opt > span::after { content: ""; position: absolute; z-index: 1; top: 4px; right: 6px; width: 10px; height: 10px; background: var(--tick) center / 10px 10px no-repeat; opacity: 0; transform: scale(.5); transition: opacity var(--t1), transform .42s var(--e-snap); pointer-events: none; } #sxu .opt input:checked + span::after { opacity: 1; transform: none; } #sxu .cards.pics .card-opt > span::after { top: 5px; right: 5px; width: 20px; height: 20px; border-radius: var(--r); background: var(--tick) center / 13px 13px no-repeat, var(--card); } #sxu .card-opt > span { justify-content: flex-start; gap: 10px; padding: 14px; } #sxu .card-opt .ic { display: block; width: 100%; height: 64px; border: 1px solid var(--line); background: var(--surface); } #sxu .card-opt .ic svg { display: block; width: 100%; height: 100%; } #sxu .cards.icons-sm { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } #sxu .cards.icons-sm .card-opt > span { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 16px; } #sxu .cards.icons-sm.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #sxu .cards.icons-sm .card-opt .ic { flex: none; width: 36px; height: 36px; border: 0; background: transparent; color: var(--accent-ink); } /* provjera 6: natpisi kartica sa ikonom (korak 9 „Kako želite da nastavimo?“) prelaze u novi red samo između riječi, bez rastavljanja crticom; na uskim telefonima naslov na stranim jezicima staje i kao jedna duga riječ (scripts/sync-questionnaire-module.mjs) */ #sxu .cards.icons-sm .card-opt > span { -webkit-hyphens: manual; hyphens: manual; } /* provjera 7, R6-04: riječ sa crticom u naslovu kartice („roh-bau“) ne lomi se na svojoj crtici, nego prelazi u novi red cijela („Visoki“ / „roh-bau“). Samo prikaz (app.js cardTitle): tekst ostaje isti, sa običnom crticom. Kada ni cijela ne stane u red, fitCards (app.js) je pušta (.sp) da se prelomi na crtici, kao do sada. */ #sxu .card-opt .nw { white-space: nowrap; } #sxu .card-opt .nw.sp { white-space: normal; } /* kartice sa slikom */ #sxu .cards.pics { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } #sxu .cards.pics .card-opt > span { padding: 0 0 14px; gap: 0; overflow: hidden; } #sxu .cards.pics .card-opt > span > span { padding: 12px 14px 0; } #sxu .card-opt .ic.photo { height: 124px; border: 0; border-bottom: 1px solid var(--line); overflow: hidden; background: var(--vis-bg); } #sxu .card-opt .ic.photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } #sxu .cards.pics .opt:hover .ic.photo img { transform: scale(1.04); } #sxu .card-opt .ic.photo svg { width: 100%; height: 100%; } #sxu .card-opt .ic.photo .ph { display: block; width: 100%; height: 100%; background: linear-gradient(100deg, var(--vis-bg) 30%, var(--surface) 50%, var(--vis-bg) 70%); background-size: 200% 100%; animation: sxu-shimmer 1.4s linear infinite; } @keyframes sxu-shimmer { to { background-position: -200% 0; } } #sxu .cards.pics .card-opt input:checked + span .ic.photo { border-bottom-color: var(--sel-line); } #sxu .cards.pics .card-opt .ic:not(.photo) { display: grid; place-items: center; height: 124px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--accent-ink); } #sxu .cards.pics .card-opt .ic:not(.photo) svg { width: 44px; height: 44px; } #sxu .cards.pics .card-opt input:checked + span .ic:not(.photo) { border-bottom-color: var(--sel-line); } /* boje */ #sxu .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 8px; margin-top: 12px; } #sxu .sw > span { flex-direction: row; align-items: center; justify-content: flex-start; gap: 11px; padding: 10px 12px; text-align: left; } #sxu .chip { flex: none; width: 30px; height: 30px; border: 1px solid rgba(0, 0, 0, .16); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), 0 1px 3px rgba(0, 0, 0, .14); } #sxu .chip.same { box-shadow: inset 0 0 0 3px var(--card), 0 0 0 1px var(--sel-line); } #sxu .chip.same:not([style]) { background: linear-gradient(135deg, #f1ede5 0 50%, #47494d 50% 100%); } #sxu .chip.empty { display: grid; place-items: center; border: 1px dashed var(--line-2); color: var(--muted); font-weight: 600; background: transparent; box-shadow: none; } #sxu .swatches .opt input:checked + span .chip { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--amber); } /* boje: kvačica stoji na kružiću izabrane boje (naziv boje ostaje slobodan), na krugu papira */ #sxu .sw > span::after { display: none; } #sxu .chip { position: relative; } #sxu .chip::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--tick) center / 11px 11px no-repeat, var(--card); opacity: 0; transform: scale(.5); transition: opacity var(--t1), transform .42s var(--e-snap); } #sxu .swatches .opt input:checked + span .chip::after { opacity: 1; transform: none; } #sxu .sw .nm { display: block; font-size: .92rem; line-height: 1.2; } #sxu .sw small { margin-top: 2px; font: 400 11px var(--mono); letter-spacing: .03em; } /* matrica radova */ #sxu .matrix { margin-top: 8px; } #sxu .mrow { display: grid; gap: 8px 16px; align-items: center; padding: 14px 0; border: 0; border-top: 1px solid var(--line); margin: 0; min-width: 0; } #sxu .mrow:first-child { border-top: 0; } #sxu .mrow legend { float: left; width: 100%; padding: 0; font-weight: 600; } #sxu .mrow legend + * { clear: both; } /* naziv rada nikad uži od svoje najduže riječi (prevodi, npr. sv „Fasadisolering“ u uskoj koloni pitanja na 1024 px): tada se odgovori u tom redu malo suze, umjesto da se riječ prelomi usred slova; bosanske riječi staju, pa ostaje 340 px kao do sada */ @media (min-width: 720px) { #sxu .mrow { grid-template-columns: minmax(min-content, 1fr) minmax(0, 340px); } #sxu .mrow legend { width: auto; grid-column: 1; grid-row: 1; } #sxu .mrow .seg { grid-row: 1; grid-column: 2; margin: 0; } } /* polja */ #sxu .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 12px; } #sxu .field.wide { grid-column: 1 / -1; } #sxu .field label, #sxu .fl { display: block; margin: 0 0 7px; color: var(--muted); font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; } #sxu .input { display: block; width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background-color: var(--card); color: var(--ink); font: 500 16px/1.3 var(--sans); --c: 0px; background-image: var(--cn); background-repeat: no-repeat; background-position: var(--cnp); background-size: var(--c) 2px, 2px var(--c), var(--c) 2px, 2px var(--c), var(--c) 2px, 2px var(--c), var(--c) 2px, 2px var(--c); transition: border-color var(--t1), box-shadow var(--t2) var(--e-out), background-size .42s var(--e-snap); } #sxu select.input { -webkit-appearance: none; appearance: none; padding-right: 44px; background-image: var(--chevron); background-position: right 16px center; background-size: 12px 12px; cursor: pointer; } #sxu textarea.input { min-height: 120px; resize: vertical; line-height: 1.5; } /* primjeri formata pune boje (dan 5,5 : 1, noć 7,3 : 1; ranije .8 = 3,6 : 1), i dalje svjetliji od upisanog teksta (provjera 2, pristup-21) */ #sxu .input::placeholder { color: var(--muted); opacity: 1; } #sxu .input:hover { border-color: var(--sel-line); } #sxu .input:focus { outline: none; border-color: var(--sel-line); box-shadow: 0 0 0 4px var(--halo); --c: 10px; } #sxu select.input:focus { --c: 0px; } /* fokus tastaturom: okvir 2 px u boji fokusa kao na ostatku upitnika i na lov-7 (dan 5,4 : 1, noć 10,7 : 1), pa se fokus ne može zamijeniti sa prelazom mišem; zlatni uglovi i oreol ostaju kao ukras (provjera 2, pristup-01) */ #sxu .input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } #sxu .input[aria-invalid="true"] { border-color: var(--err); } #sxu .single { max-width: 560px; margin-top: 12px; } #sxu .err { display: flex; gap: 7px; margin: 8px 0 0; color: var(--err); font-size: 14px; font-weight: 600; line-height: 1.45; } #sxu .err::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid; border-radius: 50%; font: 700 11px/1 var(--sans); } #sxu .consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); cursor: pointer; } #sxu .consent input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: #d2842a; } #sxu .docnote { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--gold-line); border-radius: var(--r); background: var(--accent-soft); font-size: .92rem; } #sxu .docnote svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-ink); } #sxu .colorrow { display: flex; align-items: center; gap: 12px; } #sxu .colorrow .input.color { width: 72px; min-height: 52px; padding: 4px; cursor: pointer; } #sxu .colorrow span { color: var(--muted); font-size: .86rem; } #sxu .q.has-err .opt > span, #sxu .q.has-err .input, #sxu .q.has-err .consent { border-color: var(--danger-line); } #sxu .q.has-err > .q-label, #sxu .q.has-err > legend.q-label { color: var(--err); } /* ---------- „Ko ste vi?“ (odluka 111) */ #sxu .who .flds { display: grid; gap: 16px; margin-top: 12px; } #sxu .who .fld { margin: 0; } #sxu .who .pair { display: grid; gap: 12px; } @media (min-width: 720px) { #sxu .who .pair { grid-template-columns: 1fr 1fr; } } /* uža kolona pitanja na računaru (1024-1279 px): telefon i e-mail jedno ispod drugog, puna širina kolone */ @media (min-width: 1024px) and (max-width: 1279px) { #sxu .who .pair { grid-template-columns: minmax(0, 1fr); } } #sxu .grp { min-width: 0; margin: 0; padding: 0; border: 0; } #sxu .grp legend { padding: 0; } #sxu .fld .box { position: relative; display: block; } #sxu .who .input { padding-right: 40px; font-size: 17px; } #sxu .hint { margin: 7px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; } #sxu .grp > .hint { margin: -2px 0 10px; } #sxu .fld.bad .input { border-color: var(--err); } #sxu .ok { position: absolute; right: 13px; top: calc(50% - 9px); width: 18px; height: 18px; pointer-events: none; fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #sxu .ok path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--t2) var(--e-out); } #sxu .good .ok path { stroke-dashoffset: 0; } #sxu .local { display: flex; gap: 10px; align-items: center; margin: 18px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; } #sxu .local svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent-ink); stroke-width: 1.5; } /* korak 9: podaci sa početka na provjeru */ #sxu .ccard { margin: 22px 0 0; padding: 16px 16px 14px; border: 1px solid var(--line-2); background: var(--card); } #sxu .cc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } #sxu .fl-q { margin: 0; font: 500 clamp(1.12rem, 3.2vw, 1.3rem)/1.3 var(--display); } #sxu .kv { margin: 0; } #sxu .kv div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 2px 14px; padding: 8px 0; border-top: 1px dashed var(--line-2); } #sxu .kv dt { color: var(--muted); font: 500 11px/1.7 var(--mono); letter-spacing: .1em; text-transform: uppercase; } #sxu .kv dd { margin: 0; min-width: 0; font-weight: 500; overflow-wrap: anywhere; } @media (max-width: 479px), (min-width: 1024px) and (max-width: 1279px) { #sxu .kv div { grid-template-columns: 1fr; gap: 0; } } /* ---------- dokumenti */ #sxu .slots { display: grid; gap: 12px; margin-top: 18px; } #sxu .slot { padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--card); transition: border-color .15s, background-color .15s; } #sxu .slot.drag { border-style: solid; border-color: var(--sel-line); background-image: var(--sel-bg); } #sxu .slot h3 { margin: 0; font: 600 1rem var(--sans); } #sxu .slot p { margin: 2px 0 0; color: var(--muted); font-size: .9rem; } #sxu .slot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; } #sxu .filebtn { position: relative; } #sxu .filebtn input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; } #sxu .filebtn input:focus-visible + .btn { outline: 2px solid var(--focus); outline-offset: 3px; } #sxu .filebtn .btn svg { width: 16px; height: 16px; } #sxu .later { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .92rem; cursor: pointer; } #sxu .later input { width: 20px; height: 20px; accent-color: #d2842a; } #sxu .files { margin: 10px 0 0; padding: 0; list-style: none; } #sxu .files li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } #sxu .files li + li { margin-top: 6px; } #sxu .files .fn { min-width: 0; overflow-wrap: anywhere; font-size: .92rem; } #sxu .files .fs { color: var(--muted); font: 400 11px var(--mono); } #sxu .files button { flex: none; min-width: 44px; min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--r); background: transparent; color: var(--ink); cursor: pointer; } #sxu .slot .err { margin-top: 8px; } /* ---------- podnožje koraka */ #sxu .step-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line-2); } #sxu .step-foot .btn .nx { font-weight: 500; opacity: .8; } @media (max-width: 559px) { #sxu .step-foot .btn-primary { order: -1; width: 100%; } #sxu .step-foot .btn .nx { display: none; } #sxu .step-foot .back { width: 100%; } #sxu .step-foot > span:empty { display: none; } } /* ---------- završni list: pregled, „Ponuda za“, potpis, suvi žig, zahvala */ @media (min-width: 1024px) { #sxu .fin .layout { grid-template-columns: minmax(0, 1fr) minmax(400px, 480px); } #sxu .fin .panel { order: 1; padding: 40px 0 40px 40px; } #sxu .fin .content { order: 2; padding: 44px 40px 44px 40px; } } #sxu .fin .tb { display: none; } #sxu .missing { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--danger-line); border-radius: var(--r); background: var(--danger-soft); } #sxu .missing p { margin: 0 0 6px; font-weight: 600; } #sxu .missing ul { margin: 0; padding-left: 18px; } #sxu .missing .linkbtn { padding: 4px 0; } #sxu .fs-who { margin: 22px 0 0; } #sxu .fs-k { margin: 0 0 2px; color: var(--accent-ink); font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; } #sxu .fs-date { margin: 0 0 12px; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; } #sxu .fs-name { position: relative; margin: 0 0 4px; font: 400 clamp(1.7rem, 5vw, 2.3rem)/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; } #sxu .sum-sec { margin-top: 18px; border: 1px solid var(--draw); background: var(--sheet); } /* traka dijela: naslov (h3, samo broj i naziv) i pored njega broj neodgovorenih i „Uredite“, izvan naslova, da naslovi i oblasti pregleda ne nose dugme (provjera 2, pristup-20); izgled isti kao kada je sve bilo u h3 */ #sxu .sum-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line-2); background: color-mix(in srgb, var(--draw) 6%, transparent); font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; } #sxu .sum-h h3 { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; } #sxu .sum-h b { color: var(--accent-ink); font-weight: 500; } #sxu .sum-h small { color: var(--muted); font: 500 11px var(--mono); letter-spacing: .08em; } #sxu .sum-h .linkbtn { padding: 6px 0; } #sxu .sum-row { display: grid; gap: 2px 18px; padding: 9px 12px; border-top: 1px solid var(--line-2); } #sxu .sum-row:first-child { border-top: 0; } @media (min-width: 720px) { #sxu .sum-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } } /* „Telefon i e-mail“: vrijednost ima svoj red ispod naziva, cijelom širinom lista (u koloni od 170 px e-mail se lomio usred riječi; provjera 5, IC-02), kao na telefonu; adresa se lomi samo iza „@“ i ispred tačke (app.js mailBreaks) */ @media (min-width: 720px) { #sxu .sum-row.sum-full { grid-template-columns: minmax(0, 1fr); } } /* e-mail adresa (app.js mailBreaks): cjelina koja prvo cijela prelazi u novi red; lomi se samo kada je duža od reda, na */ #sxu .mail { display: inline-block; max-width: 100%; } #sxu .sum-row dt { color: var(--muted); font-size: 14px; } #sxu .sum-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; } #sxu .sum-sec dl { margin: 0; } #sxu .sum-empty { margin: 0; padding: 10px 12px; color: var(--muted); font-size: 14px; } #sxu .sum-list { margin: 0; padding: 10px 12px 10px 30px; } #sxu .fs-sign { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 16px; margin: 26px 0 0; } #sxu .sig { position: relative; height: 62px; min-width: 0; } #sxu .sig-n { position: absolute; left: -6px; bottom: 5px; max-width: calc(100% + 6px); padding: 0 .4em 0 10px; color: var(--draw); font: 400 42px/1 Gabriola, "Snell Roundhand", "Dancing Script", cursive; font-feature-settings: "ss04"; white-space: nowrap; transform: rotate(-3deg); transform-origin: 0 100%; } #sxu .sig svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 14px; overflow: visible; } #sxu .sig path { fill: none; stroke: var(--draw); stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; } #sxu .sig-cap { margin: 0; padding-top: 7px; border-top: 1px solid var(--line-2); color: var(--muted); font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; } #sxu .seal { grid-column: 2; grid-row: 1 / span 2; width: 132px; height: 132px; filter: drop-shadow(-.7px -.7px 0 var(--emb-hi)) drop-shadow(.8px .9px .4px var(--emb-lo)); } #sxu .seal * { fill: var(--emb); stroke: none; } #sxu .seal .rg { fill: none; stroke: var(--emb); stroke-width: 1.6; } #sxu .seal .th { stroke-width: .8; } #sxu .seal text { font: 500 10.2px var(--mono); letter-spacing: .12em; } @media (max-width: 380px) { #sxu .seal { width: 112px; height: 112px; } #sxu .seal text { font-size: 12px; } } #sxu .mo .fsx .sig-n { -webkit-mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 260% 100% no-repeat; mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 260% 100% no-repeat; transition: -webkit-mask-position 1.25s var(--e-io), mask-position 1.25s var(--e-io); } #sxu .mo .fsx.signed .sig-n { -webkit-mask-position: 0 0; mask-position: 0 0; } /* ime od jedne riječi koje ni na 16 px ne staje (app.js fitSign, sig-cut, provjera 2, izgled-03): potpis izblijedi u zadnjoj četvrtini svog okvira i ne slika se izvan njega, i sa smanjenim kretanjem; potpisivanje se zaustavi na istom mjestu */ #sxu .sig-n.sig-cut { -webkit-mask: linear-gradient(90deg, #000 74%, transparent); mask: linear-gradient(90deg, #000 74%, transparent); } #sxu .mo .fsx.signed .sig-n.sig-cut { -webkit-mask-position: 26.875% 0; mask-position: 26.875% 0; } #sxu .mo .fsx .sig path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s var(--e-out) 1.05s; } #sxu .mo .fsx.signed .sig path { stroke-dashoffset: 0; } #sxu .mo .fsx .seal { opacity: 0; } #sxu .mo .fsx.sealed .seal { animation: sxu-emboss .75s var(--e-out) both; } @keyframes sxu-emboss { 0% { opacity: 0; transform: scale(1.14) rotate(-8deg); filter: none; } 50% { opacity: 1; transform: scale(.97); } 100% { opacity: 1; transform: none; } } #sxu .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; } #sxu .actions .btn { flex: 1 1 auto; } #sxu .actions .btn-primary { flex: 2 1 240px; } #sxu .actions-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; } #sxu .progress { margin-top: 14px; } /* za vrijeme slanja fokus stoji na poruci o slanju (dugme je tada isključeno), kao naslov koraka bez okvira (provjera 2, pristup-14) */ #sxu .progress:focus { outline: none; box-shadow: none; } #sxu .progress p { margin: 0 0 6px; font-size: .92rem; } #sxu .done .thanks { padding: 20px 18px 16px; border: 1px solid var(--sel-line); background: color-mix(in srgb, var(--amber) 7%, transparent); } #sxu .done .thanks h2 { font-size: clamp(1.6rem, 4.6vw, 2.2rem); } #sxu .done .thanks p { margin: 0 0 6px; color: var(--ink-2); } #sxu .done .thanks .q-help { margin: 8px 0 0; } #sxu .mo .done .thanks { animation: sxu-rise .6s var(--ease) .25s both; } /* broj upita (klijent ga navodi): tinta 2 umjesto blijede (na zlatnoj podlozi zahvale 4,4 : 1 -> 8,6 : 1; provjera 2, pristup-12) */ #sxu .receipt { display: inline-block; margin: 10px 0 0 !important; color: var(--ink-2) !important; font: 500 12px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; } #sxu .next { counter-reset: n; margin: 22px 0 0; padding: 0; list-style: none; } #sxu .next li { counter-increment: n; position: relative; margin: 0; padding: 4px 0 18px 46px; } #sxu .next li::before { content: counter(n); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--sel-line); border-radius: 50%; color: var(--accent-ink); font: 500 12px var(--mono); } #sxu .send-box { margin-top: 22px; padding: 18px; border: 1px solid var(--sel-line); border-radius: var(--r); background: var(--sel-bg), var(--tile); } #sxu .send-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 10px; font-weight: 600; } #sxu .send-head small { color: var(--muted); font-weight: 400; font-size: .86rem; } #sxu #summary-text { min-height: 220px; font: 400 .85rem/1.5 var(--mono); white-space: pre; overflow: auto; } #sxu .sel { user-select: all; } /* ---------- podnožje upitnika */ #sxu .sfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; max-width: 1320px; margin: 0 auto; padding: 4px 16px 32px; color: var(--muted); color: color-mix(in srgb, var(--muted) 85%, var(--ink)); font-size: 13.5px; text-align: center; } #sxu .sfoot p { margin: 0; } #sxu .sfoot b { color: var(--ink-2); font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; } /* tekst i veze podnožja malo tamniji: sjenka lista potamni podlogu ispod podnožja na računaru (rečenica 4,45-4,53 : 1 -> oko 5,2 : 1, veze danju 4,47 : 1 -> 5,2 : 1; provjera 2, pristup-12) */ #sxu .sfoot a, #sxu .sfoot .linkbtn { color: var(--foot-ink); } #sxu .sfoot .linkbtn { padding: 10px 2px; } #sxu .sfoot .linkbtn:hover { color: var(--ink); } /* ---------- poruke */ /* pointer-events: none: kratka poruka je samo tekst; na telefonu stoji preko „Dalje“ kada je dugme pri dnu ekrana, pa dodir ide na dugme, ne na poruku (provjera 2, uz tok-02: „Dopunite označena polja.“ pa izbor pa „Dalje“ u roku od 4 s) */ #sxu .toast { position: fixed; right: 24px; bottom: 24px; z-index: 99; max-width: calc(100% - 32px); padding: 12px 16px; border: 1px solid rgba(215, 183, 122, .45); border-radius: var(--r); background: #081024; color: #eaf0fb; box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .6); font-size: .92rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility 0s linear .25s; pointer-events: none; } #sxu .toast.show { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; } @media (max-width: 759px) { #sxu .toast { right: 16px; left: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); max-width: none; text-align: center; } } #print-doc { display: none; } /* ---------- telefon */ @media (max-width: 600px) { #sxu .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } #sxu .sw > span { gap: 9px; padding: 9px 10px; } #sxu .chip { width: 26px; height: 26px; } #sxu .cards.pics, #sxu .cards.icons-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #sxu .card-opt .ic.photo, #sxu .cards.pics .card-opt .ic:not(.photo) { height: 96px; } #sxu .cards.pics .card-opt > span > span { padding: 9px 10px 0; font-size: .95rem; } #sxu .cards.icons-sm .card-opt > span { padding: 14px; } #sxu .choices:not(.wide) { grid-template-columns: repeat(2, minmax(0, 1fr)); } #sxu .choices:not(.wide) .opt > span { padding: 12px; } #sxu .sub { padding: 4px 14px 18px; } #sxu .sw .nm { font-size: .88rem; } #sxu .matrix .q.child { padding: 14px; } } @media (prefers-reduced-motion: reduce) { #sxu, #sxu *, #sxu *::before, #sxu *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ---------- štampa / PDF */ @media print { @page { size: A4; margin: 15mm 14mm 17mm; } html:has(> body > #print-doc), body:has(> #print-doc) { background: #fff !important; color: #172334 !important; } body:has(> #print-doc) > *:not(#print-doc) { display: none !important; } #print-doc { display: block; font: 400 10.5pt/1.45 var(--sans); color: #172334; } #print-doc .p-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid #f2a23c; } #print-doc .p-head .logo { width: 60mm; height: auto; color: #111c33; } #print-doc .p-head div { text-align: right; font: 400 8pt var(--mono); letter-spacing: .08em; color: #5e6a7c; } #print-doc h1 { margin: 12px 0 2px; font: 500 19pt/1.1 var(--display); } #print-doc .p-sub { margin: 0 0 10px; color: #5e6a7c; } #print-doc .p-vis { display: flex; gap: 14px; align-items: center; margin: 8px 0 4px; padding: 8px; border: 1px solid #dbe0e5; color: #172334; break-inside: avoid; } #print-doc .p-vis img { width: 92mm; height: auto; } #print-doc .p-vis p { margin: 0; color: #5e6a7c; font-size: 8.5pt; } #print-doc h2 { margin: 14px 0 6px; padding: 5px 8px; background: #081024; color: #fff; font: 500 9.5pt var(--mono); letter-spacing: .14em; text-transform: uppercase; break-after: avoid; } #print-doc table { width: 100%; border-collapse: collapse; } #print-doc tr { break-inside: avoid; } #print-doc td { padding: 4px 8px; border-bottom: 1px solid #dbe0e5; vertical-align: top; } #print-doc td:first-child { width: 56%; color: #384557; } #print-doc td:last-child { font-weight: 600; } #print-doc ul { margin: 6px 0 0; padding-left: 18px; } #print-doc .p-end { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 8px; border-top: 1px solid #dbe0e5; break-inside: avoid; } #print-doc .p-foot { margin: 0; color: #5e6a7c; font-size: 8.5pt; } #print-doc .seal { flex: none; width: 26mm; height: 26mm; } #print-doc .seal * { fill: #c9b48c; stroke: none; } #print-doc .seal .rg { fill: none; stroke: #c9b48c; stroke-width: 1.6; } #print-doc .seal .th { stroke-width: .8; } #print-doc .seal text { font: 500 10px var(--mono); letter-spacing: .12em; } } /* ---------- SAVOX sajt: integracija (scripts/sync-questionnaire-module.mjs; izvor ostaje app.css modula) */ /* Elementska pravila sajta (globals.css: a, img, h1-h3, p, .eyebrow) vraćena su na vrijednosti preglednika, kao u samostalnom upitniku. :where() drži specifičnost na #sxu, pa pravila modula i dalje pobjeđuju. */ #sxu :where(a) { text-decoration: revert; } #sxu :where(img) { max-width: revert; } #sxu :where(h1, h2, h3, p) { margin-top: revert; } #sxu :where(h1, h2, h3) { font-size: revert; line-height: revert; } #sxu :where(h1, h2) { margin-bottom: revert; font-family: revert; font-weight: revert; letter-spacing: revert; } #sxu :where(h1) { max-width: revert; } #sxu :where(.eyebrow) { margin: revert; color: revert; font-size: revert; font-weight: revert; letter-spacing: revert; text-transform: revert; } /* Samo na stranici upitnika (odluka 110): zaglavlje i podnožje sajta zamjenjuju studio traka i podnožje upitnika. Ovaj fajl se učitava samo na stranicama upitnika, a pravila važe samo dok je #sxu u dokumentu. Sajtove trake ostaju u HTML-u (isti raspored kao na svim stranicama sajta), ali se ne prikazuju. Ljepljivi dijelovi računaju sa studio trakom. */ body:has(> #sxu) > :is(.site-scroll-progress, .prototype-site-header, .prototype-mini-bar, .prototype-mobile-scrim, .prototype-mobile-drawer, .site-footer) { display: none !important; } html:has(> body > #sxu) { --savox-sticky-top: 64px; } @media (max-width: 759px) { html:has(> body > #sxu) { --savox-sticky-top: 56px; } } /* Kartica privatnosti sajta (ista komponenta i izgled kao na svim stranicama) stoji fiksno pri dnu prozora. Bez podnožja sajta ispod upitnika ona bi pri prvom posjetu prekrila „Dalje“, „Nazad“ i „Počnite upitnik“ (provjera 2, tok-01, izgled-06). Dok je na ekranu, boot.js upisuje --sxu-cc (koliko kartica zauzima od dna prozora): upitnik je za toliko duži i pomjeranje do polja ga poštuje, pa svako dugme može stati iznad kartice. Bez kartice nema ni dodatnog prostora. */ #sxu { padding-bottom: var(--sxu-cc, 0px); } html:has(> body > #sxu) { scroll-padding-bottom: var(--sxu-cc, 0px); } /* Dugme „Počnite upitnik“ stoji lijevo, pa na upitniku kartica od 760 px širine stoji dolje desno (provjera 2, izgled-06): pri prvom posjetu tako ne prekriva dugme na tabletu i računaru. Ista kartica (izgled, tekst, dugmad), samo uz desnu ivicu; na telefonu je na istom mjestu kao na cijelom sajtu. Kratke poruke (toast, dolje desno) tada stoje iznad nje. */ @media (min-width: 760px) { body:has(> #sxu) #savox-analytics-panel { left: auto; right: 16px; } #sxu .toast { bottom: calc(var(--sxu-cc, 12px) + 12px); } } /* Skok na sadržaj i izbor jezika pri prvom otvaranju na sajtu daje sajt. */ #sxu .skip, #sxu #langbar { display: none !important; } /* Nazivi boja (koraci 5-7) na uskim telefonima (320-375 px): pored kružića boje tekstu ostaje 45-79 px, a najduža riječ je do 84 px („Tamnosmeđa“, „Saobraćajno“), pa je naziv izlazio preko ivice kartice. Kartica uža od 146 px (širina u kojoj red više ne staje) stavlja kružić iznad naziva, pa naziv dobija cijelu širinu kartice i prelama se između riječi. Svi jezici. */ #sxu .sw { container-type: inline-size; } #sxu .sw > span > span { min-width: 0; } #sxu .sw .nm { overflow-wrap: anywhere; } @container (max-width: 145px) { #sxu .sw > span { flex-direction: column; align-items: flex-start; gap: 7px; } } /* Strani jezici: sajt stavlja data-sxu-foreign na #sxu za svaki jezik osim bs (src/routes/company/questionnaire.tsx). Tekst kartice s ikonom (korak 9, način kontakta) prelama se unutar kartice (hr „Videosastanak“, sl „Videosestanek“). */ #sxu[data-sxu-foreign] .cards.icons-sm .card-opt > span > span { min-width: 0; overflow-wrap: anywhere; } /* Provjera 7: na stranim jezicima veličinu naslova i opisa svih kartica (sa ikonom i sa slikom) računa app.js (fitCards) iz pravih riječi: smanji se samo koliko treba da najduža riječ stane u red, najviše do 11 px, pa se red lomi samo između riječi (ili na mekoj crtici koju upiše prevodilac), bez automatskog rastavljanja. Stalni brojevi ispod (7,75 em, 7,6 em) ostaju samo za bosanski. */ #sxu[data-sxu-foreign] .card-opt > span > span { -webkit-hyphens: manual; hyphens: manual; } /* Uski telefoni (320-365 px): bs i sr nemaju rječnik za rastavljanje, pa se najduža riječ lomila usred riječi („Prizemnic|a“, „Vlaknocementn|e“, „dokumentacij|u“). Izbori u dvije kolone prelaze u jednu do 340 px; naslov koraka i naslov kartice sa slikom se smanjuju samo koliko treba da najduža riječ stane u svoj red (cqi: širina kolone teksta; 6,8 em je „dokumentaciju“, 7,75 em „Vlaknocementne“), a od 357 / 366 px ostaju kakvi su bili. */ /* Lov r2-forms-01: bs i sr su na 341-405 px i dalje lomili riječ usred riječi („Aluminijums|ki“, „Vlaknoceme|nt“, „STANDAR|D“). Izbori u dvije kolone prelaze u jednu do 356 px, a podpitanja (npr. materijal kombinovane fasade) do 411 px. */ @media (max-width: 356px) { #sxu .choices:not(.wide) { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 411px) { #sxu .q.child .choices:not(.wide) { grid-template-columns: minmax(0, 1fr); } } /* Lov r2-forms-02 (.picks dt) se ovdje ne prenosi: upitnik „Nacrt“ ne prikazuje listu izbora .picks na ekranu (picksHtml se ne poziva; izbori stoje u sastavnici pored crteža), pa pravilo nema na šta da djeluje. */ @media (max-width: 600px) { #sxu .step-head, #sxu .cards.pics .card-opt { container-type: inline-size; } #sxu .step-head h2 { font-size: min(1.9rem, 100cqi / 6.8); } #sxu:not([data-sxu-foreign]) .cards.pics .card-opt > span > span { font-size: min(.95rem, (100cqi - 22px) / 7.75); } /* Lov r2-layout-savox-06: i opis kartice sa slikom („PVC sa aluminijumskom oblogom“) drži najdužu riječ u redu (7,6 em). Strani jezici: polazna veličina opisa je ista (.83rem), a smanjuje ga app.js prema pravim riječima (provjera 7, fitCards). */ #sxu .cards.pics .card-opt > span > span small { font-size: .83rem; } #sxu:not([data-sxu-foreign]) .cards.pics .card-opt > span > span small { font-size: min(.83rem, (100cqi - 22px) / 7.6); } /* Provjera 6 je ovdje za naslov kartice s ikonom na stranim jezicima imala stalni broj 6,9 em („Videosastanak“); od provjere 7 ga računa app.js (fitCards) iz pravih riječi, pa ostaje tačan i za buduće prevode. */ } /* Ljepljivi crtež (računar) na kraju svog okvira odlazi nagore, ispod studio trake: dugme dobijeno tasterom Tab tada ostaje skriveno. scroll-margin drži ga ispod trake kada ga pregledač pomjera u vidno polje. Telefon i tablet: polja ispod zakačenog crteža (kartice prikaza .vbar-m i pitanja) drže i visinu crteža (--sxu-pin iz app.js), jer je Safari polje dobijeno sa Shift+Tab stavljao cijelo pod crtež (WCAG 2.4.11, namjera lova r3-forms-01). */ #sxu .panel :is(a[href], button, input, select, textarea, [tabindex]) { scroll-margin-top: calc(var(--hh, 64px) + 12px); } #sxu :is(.vbar-m, .content) :is(a[href], button, input, select, textarea, [tabindex]) { scroll-margin-top: calc(var(--hh, 64px) + var(--sxu-pin, 0px) + 12px); } /* Iz lova (izdanje 3) se ovdje namjerno ne prenose tri pravila starog izgleda upitnika: - r2-a11y-08 (.vtabs svijetao tekst): u „Nacrtu“ su kartice prikaza ispod crteža, na papiru, a ne preko fotografije; svijetao tekst bi tu imao premali kontrast. Neaktivna kartica već ima --ink-2 na papiru. - r3-forms-01 (scroll-padding za donju traku Nazad / Dalje i .opt input do pune visine): „Nacrt“ nema ljepljivu donju traku, a skriveno dugme izbora već pokriva cijelu karticu (.opt input { inset: 0 }). Ista namjera (fokus nikad ispod ljepljivih dijelova) ovdje je scroll-margin-top iznad: studio traka + zakačeni crtež (--sxu-pin); donji prostor za karticu privatnosti daje --sxu-cc. */ /* #print-doc je izvan #sxu (boot.js), pa mu tokeni fontova trebaju posebno. */ #print-doc { --display: var(--font-display); --sans: var(--font-body); --mono: var(--font-mono); } /* Stranica upitnika (provjera 5, IC-03): ima boju papira upitnika (--bg iz app.css), pa ispod podnožja nema drugog tona kada je prozor viši od stranice, ni danju ni noću. */ body:has(> #sxu) { background-color: #efe8dc; } :root[data-theme="night"] body:has(> #sxu), :root[data-theme="dark"] body:has(> #sxu) { background-color: #050b18; }