/* ========================================================= TOVEDO KONFIGURATOR — "Radionica za tisak" Vizualni jezik izveden iz DTF/screen-print produkcije: registracijske oznake, spot-color uzorci, tehnička mreža. ========================================================= */ :root { /* Boje */ --ink: #242320; --ink-soft: #302F28; --ink-line: rgba(237, 234, 224, 0.14); --canvas: #E4E1D6; --canvas-soft: #EDEBE3; --paper: #FAF9F6; --cobalt: #1F3FA6; --cobalt-light: #4A6CE0; --cobalt-hover: #16307F; --signal: #C81E3A; --ink-green: #1F7A4D; --text-on-ink: #EDEAE0; --text-on-ink-muted: #A29D8E; --text-on-canvas: #23221E; --text-muted: #706C60; /* Tipografija */ --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif; --font-body: 'IBM Plex Sans', -apple-system, sans-serif; /* Radijusi - namjerno gotovo oštri, kao rezna oštrica, ne "SaaS card" zaobljenja */ --radius-sm: 2px; --radius-md: 5px; /* Visine mobilnih traka. Ovo su samo polazne vrijednosti - stvarne upisuje script.js, jer tab bar na iPhoneu naraste za safe-area, a ploča za uređivanje postoji samo dok je element odabran. */ --tabbar-h: 58px; --edit-sheet-h: 0px; } * { box-sizing: border-box; } body { font-family: var(--font-body); margin: 0; background-color: var(--canvas); color: var(--text-on-canvas); -webkit-font-smoothing: antialiased; /* Stranica se skrola SAMO zato da se ispod konfiguratora dođe do sadržaja (kako funkcionira, cijene, pitanja). Sam konfigurator je točno visine ekrana i njegovi stupci skrolaju svaki za sebe. clip (a ne hidden) da vodoravno ništa ne viri, a da body ne postane vlastiti skrol-spremnik. */ overflow-x: clip; } /* Dok je otvoren upit ili ploča "Pomakni", stranica ispod miruje */ html.scroll-zakljucan, html.scroll-zakljucan body { overflow: hidden; } .app-container { display: flex; /* svh = visina ekrana S prikazanom trakom adrese. Za razliku od dvh ne mijenja se dok se stranica skrola (traka se sakrije/pokaže), pa se majica ne preračunava i stranica ne "skače" pod prstom. */ height: 100svh; max-height: 100svh; overflow: hidden; position: relative; } /* Rezerva za preglednike bez podrške za svh */ @supports not (height: 100svh) { .app-container { height: 100vh; max-height: 100vh; } } /* ========================================================= SIDEBAR — tamni kontrolni panel ========================================================= */ .sidebar { width: 320px; flex-shrink: 0; min-height: 0; /* dopušta skrolanje unutar flex stupca */ background: var(--ink); color: var(--text-on-ink); padding: 28px 24px; overflow-y: auto; overscroll-behavior: contain; /* skrol ne "propada" na stranicu ispod */ border-right: 1px solid var(--ink-line); } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-thumb { background: var(--ink-line); border-radius: 4px; } .brand { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 26px; } .brand-mark { color: var(--cobalt); flex-shrink: 0; margin-top: 14px; /* u visini krupnog dijela naslova */ } /* Znak i natpis "Tovedo" su poveznice na tovedo.hr */ .brand-home { display: block; flex-shrink: 0; margin-top: 14px; /* isto kao znak prije - u visini krupnog naslova */ line-height: 0; border-radius: 50%; transition: opacity 0.15s ease; } .brand-home .brand-mark { display: block; margin-top: 0; } .brand-home:hover { opacity: 0.75; } .brand-home:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; } .brand-name a { color: inherit; text-decoration: none; transition: color 0.15s ease; } .brand-name a:hover { color: var(--text-on-ink); } /* Putanja (breadcrumb) iznad naslova: "Tovedo.hr › Tisak na majice". Sitno i prigušeno kao natpis "TOVEDO", da ne odvlači od koraka. */ .mrvice ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; line-height: 1.2; color: var(--text-on-ink-muted); } .mrvice li + li::before { content: "›"; margin-right: 6px; opacity: 0.6; } .mrvice a { color: inherit; text-decoration: none; transition: color 0.15s ease; } .mrvice a:hover { color: var(--text-on-ink); } .mrvice [aria-current] { color: var(--text-on-ink); } @media (max-width: 840px) { .mrvice { display: none; } } /* Marka + naslov stranice. "Tovedo" je sitna oznaka iznad, a h1 ("Tisak na majice - ...") je glavni naslov: prvi dio krupno, nastavak sitnije u drugom redu. Za Google je to jedan h1 s cijelim tekstom. */ .brand-text { min-width: 0; } .brand-name { margin: 0 0 3px; font-size: 10.5px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--text-on-ink-muted); line-height: 1; } .brand-h1 { font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: 0.5px; margin: 0; line-height: 1; color: var(--text-on-ink); } .brand-h1-sep { display: none; } .brand-h1-sub { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1.35; color: var(--text-on-ink); } .tagline { margin: 3px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--text-on-ink-muted); } .input-group { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--ink-line); } .input-group:last-of-type { border-bottom: none; } .input-group label { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; margin-bottom: 10px; color: var(--text-on-ink); } .sub-label { display: block; font-weight: 600; font-size: 13px; margin: 16px 0 8px; color: var(--text-on-ink); } /* Brojčane oznake koraka - konfigurator JEST sekvencijalni proces (proizvod -> boja -> logo -> tekst -> količina), pa numeriranje ovdje ima stvarnu informacijsku ulogu, ne dekorativnu. */ .step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; font-family: var(--font-display); font-size: 15px; letter-spacing: 0; color: var(--paper); background: var(--cobalt-light); border-radius: 50%; } .file-status { font-size: 12.5px; margin: 8px 0 0; color: var(--text-on-ink-muted); } .file-status strong { color: var(--text-on-ink); } .file-status-formati { margin-top: 6px; font-size: 11.5px; } .file-status-tip { font-size: 11.5px; line-height: 1.4; color: #d99a4e; background: rgba(217, 154, 78, 0.12); border-left: 2px solid #d99a4e; padding: 6px 8px; margin: 6px 0 0; } /* --- KARTICE ZA ODABIR MODELA --- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .model-cards { display: grid; gap: 8px; } /* --- MARKE (logotipi iznad kartica modela) --- Logo je CSS maska: boja dolazi iz background-color, pa sve marke izgledaju ujednačeno bez obzira na boju izvorne datoteke. Svaki logo stane u istu kutiju (mask-size: contain), neovisno o omjeru. */ .brand-tabs { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; } .brand-tabs::-webkit-scrollbar { display: none; } .brand-tab { /* Tabovi dijele širinu stupca, da sve marke stanu bez skrolanja */ flex: 1 1 0; min-width: 0; width: auto; margin: 0; display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .brand-tab:hover { background: var(--ink-soft); border-color: var(--text-on-ink-muted); } .brand-tab.active { border-color: var(--cobalt-light); box-shadow: inset 0 0 0 1px var(--cobalt-light); } .brand-tab:focus-visible { outline: 2px solid var(--cobalt-light); outline-offset: 2px; } .brand-logo { display: block; width: 100%; max-width: 92px; height: 20px; /* široki logotipi (Stedman) ograničeni su širinom, uži (SOL'S) visinom */ background-color: var(--text-on-ink-muted); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: background-color 0.15s ease; -webkit-mask-image: var(--brand-logo); mask-image: var(--brand-logo); } .brand-tab:hover .brand-logo, .brand-tab.active .brand-logo { background-color: var(--text-on-ink); } /* Logotipi marki, ugrađeni kao data URI (izvor: slike/marke/*.png). Ugrađeni su da logo radi i kad se na server prenesu samo izmijenjene datoteke, bez nove mape sa slikama. Maska gleda samo prozirnost. */ .brand-logo--stedman { --brand-logo: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAABOCAQAAAAH3e5qAAAeTUlEQVR42u2deZgXxZnHP1XVMwMMA3KIiHIkQrzxQCKCF0TkkHCJ0Rh0Y4LHRsV7XV3jEeNq1EQFdReVVYMSWc1GotwCGoOiCKgQ7xNUDg9AQBimu2r/6J4fc/z67p7BONXP44M8P6qrq+p93+97C4PPEEg0BpB0ozc92ZfOtKM1pTSnkh1sZgOf8QFv8BpvsNH7dxYaTdNIOiyMt+9N4zs8hM8NkBgMcAijOIFDKQ+cxWYdS/g7c/gHBlCYGsQpMPyEfdmGzPVbDGU8zGoEBoHhVH6Qwzs1ZaxiCqIG8QgMbTgXg0YkmHEbG1nPatawyfs7BYnJ8wy6UFnvuw0lfMWkzEheAB34JXbRLypnHi8gE7BoiaY7p/ONz8kZJIZJbKp1Atnsz0buRUDkeQWG0/k+233WqinnL7yeaB9M/UcYZTCYkWau2TlsYxvHaKO9/9dGG8c4xjZO4TfavGAuNXsZDEYZ4c2nDGahaZjR33ufNJjncnvLKwYjCt/nvm2/1LNq86mZb243Q027ws4JQ4zH/fUrEfYn/aMM5saAN/3GYKyE894WuldjjEgwu7s/SwPmPTvW/giDeT5kpecm2werKMdyOJL/ZIAnDSUCgSrCMUWBukEDiqM4imuYykTeBhSO94uN2Oh6c2QrLwWGyhp/k887HSQbiqKGTZTX2JO48kcg6EQnBnAZa5nHY8yjqtYeRh0bfL7bpoSLWZiJzBQ4tGMcNqaItLBRbEk8bylDA0/ORjGKJxIrTH7746C4kdl8EkvCbQhYq4Nke1KNpj5ZKn7NVZSiMagipFsc1ihPeBvacD5n8t/czIYC3FBYOLkTZm2yyOudquicAgvLW0Xyb3D3vCNncAZLmcQjHhjXsdZX/LslhqH0ZkkiaFX3HTZj6YhT9H4YrIQqhMShDwcUFRk7fyM4kQ6sTwhm/fZH4bAHt/LTWGsPvmUq6X2QdabRdGQW11GKg0xwqSUKg0MFV7CMn6S8qN85jR+FhcBgo+nFfbzEqeiM5L7AYHFpRvKyOeclxgfBYwQEogSBpj0nFEFx6Vmuw2mMzlmExCZMhcMPmM9AbEyKpQmPOLsxjauKQp2mEbaDlqdSHMxjPE5nH8kU/7QNI9gv9ZlIDKPZDyfjsxU4NGN4PYFRzDByci0DY3YrMNxO28YXKLIWiOjKDA7Axkq9LIGiyuN8TTIz6dkoNJoxLGGMp+unPRVNcy5KrWVqFBfmdBv70T3Uti0R9KcTOnOmL9F8jxtymDkhYUoM5fyZ7tiZ8GbX/LyV/41hfG4axc5H4rAHj3MNGpGaNCWG0+ma6uIpDAP4YU6XdxSEEqbAoQ2DcmH6CodfcUxjw1lZQ4T/nl6ZkaVrrljCx4imcIPUV0WjuZH7IDVpCjStOCfVlTYILvW8xVkD2ZYMDQWy1asYnRPTF0jupbRx4awscIlhnJshWbpjepOGmdEpCWzO5iHvz2m1qHHskSgUohrs9WFgLjBScCzfi7QyieA4uuQitSUOB3FN48JZ6XHRZtwSkVNF5aqKSuY2AdkMzUFVnMEdOMlN8AXC6sAvUrHM81G5yBPDiAhAtlq6VjA0JwuGxOHfODRz41ZMwpQYfs6BmS7DAEt5swnIZjhKsBnPeOyU5yQwnEurRDJTYujOiAhkbWKvyqE1J8UQDy6YzeN+CQRlTMzACJoKPmjKOD9jDmiAp1M5XZpGccPEH+if0jAh0XTlzEQyU2A4n5YRiLp57G8THMdekQGkRNCXfXJSliQOR/OrxjMBuQEBJ3BQpA80ONiFx/ENszYobGY3AdnMOTko7qNtYg1xJ3ldQPPYswg0nTgzEhMvjc3K40lAgUN5bmDWZV/Xs09jaZoSA5wWwVnroL3IlOpHIRE4OPXITwOv8ToidpxnQw6DTvSYRmQ3Cpvu3JRSTkg0+zIm9iyu0tM20mU1MUneoS0nxrZzjM5NWXIzhn7fWLZZC4cKBoSGN7lBYet4k1VswkHSmj3pzl6UeWQramypAWbiYBWSghzs0A0MAw3BaVBuELuJtfUi0aWGkkR77fiuTnhPVDg7jim8kCC8vbbsvYRpVMUk59acm8tVlTgMYM9Y8kkCR9KDd1LtRPBOj+Cn/Cmn+UMIEw6jU8hmGySzuJ9n6+RVlNGD3gzmBNp6crLa/aKZVQuWtM7AERPlyOIAqM2sT0BiDs1Zn/Cgg4eNjPCNArC4hf7oxBmJLpEdxhCmx7h0As3pdMlF7zK4oQXxGKtDc4Zze46qg+EPLGB9BmH/CQjziIJE9Ick45lYQ+mu1gkqWclKHqQjI/gFP/QkJ0je4JXCv9XAzfwpMGlZ04xbaePLIDSS6TxOScAGGUp5M6KWYmPxR8bTsmiibzh3jwvVDIIpvEp5ndUZStiNzhxIdyzcRCERSuCaYxjKU6k4uQHGM91DGtHIsoxf5aLTSTS7MzA2kBXASO5IxaLCTrojt3BWw+uZFtAz8JppFFczEYXAqaOLCq8AyVomMYnhXMHRQCWlzKaqcG0MMC/CWq4NIcyXeTTylSMScWo2N5C+aBBMZXYAsR3OEM5kH+9bw7/wKmakupAKzfH0Z2FE8pY4DOagXIwhAvgRu8eWxRLozX78w7OV5ANnf840Zjc0nJUIugRwQY1iObeh0Nj1Pt6gsdEILOCvHMtZrKIMwYx6H2gFPCVYtAkFu+VYNAucJ57fyQWFItGTZLTGoqzeihUKicMSfsNhXMFmZKgUV2j6cGxKE5BBcmlERiYwSC4jHzu7AU5OxGodShlJnokSAphARUMbgSSl7B5ImDANO4QzG2xPh3qIXjzAxyyuAylruln8nrAj1xnMUX/lyZ5kxp9iK3ZwPO1csZnbOYIXsEK5s0FwdkoyURgG0yuSDJRo+nN0LlUoJJqO9A8AsiKQbEZgpXQfhSGFHlzf0G4TSRmtAj5dAisiAiYHg+ILzmYQ22nyYcYbGgeBxTucyNOhwEkCQ2JaMYu90+LyGBqpyCloHE6knWefKDZWs9V3HwyH0TNXeSbRjKdPwwYbSEppEciXoTLGcTgIBG83EWVCSGej2MoYnkUFGrHcxKchKUGcwjCaA0MhsURzCENyiuQywOiAGwXXs8zXqKexGAk5yjO38sPdDZtvIgNN9K7zdu9YWpVpyihJNRwUlZzGqlATveHHqXGJQykXhF44AYwPtIink0d7c5wPaRkkO5hdTzWqvbbhlAbI22xMQL24vCHhrMQJ1Wd+ionJmZsC19OS5jrOD9lFgaAP7VJqVwrDz+gWeOXc2NpTcmK4AhjEbj6EZRC8zmc86ysTJYaDOSxnaSZxuCrjRI+QF+7wxe/uwWkG8QtsTGPG2n8HSfNpnvQ8pkEmk8NTgjiBpoJ/DbzWbjZKRU4GlmCLrAFmAC+zxhdBaCSjcwWzLvtoyR0ZlHeJQZhfBwIigeEBbmI3r4aoaiLPBhmCm9gReNkM0CcTDerntPclO4GmA7/M6eJLNN3oFyAPHWYAX7DQ95YKYBhl2LneTIXDQH7RUCYgyQ4+DyFMgeBqlnM13dA4GK+K27edQGWITzStnzTN0AiW8UxoGkDvTEijA+f4AlWJ4Sw65KTDSeAkWvnMrhG8wwokglkBcxgO4IfkXfZNYriFvRtG05QYVoeaENxilDfxGv/LaXTw6p4a1Ldafn6DzfYIvtE0ftLkAE8gQiKdBNCd5qlJRmA4zydxWqAp5+zcNDgNjPTdVTdmbDsKw7NsRPn80sG16+Z7FwWadtzhnU3OwwJeDf0k4RWEasUpnMKXPM8zPMdbXoRKmgY4jSctoR+X0CKGoUrTgkd5JydvXv1LaVjIF7T3JQoBdGJ3VqVckcShM2O5t4j3VOIwOresRImmB31rZSbV/cKZnuT8hBcZ4hPg4Mrdq9mW89lIHMYwir/kH6BnAS9DBNwskV43q3aMZCRVvMl85rDI61Lx7Wq/5xJmv9j/biXvBJpkspQlkjW8ygm+0TYCQ2v2YlUG9WYNF/Mw39S72BqLi8krWESiGUYLH71NI/mEF3EDQ21mMCQA9/WgH8/kfDYCgeEunmNj3uxZAq/xIdFcHAKFxODgUEJPLmE2b3Afg2iOjY6UtrTrDB0TxlZSxY4GNf/AklAg2DUzyTWmXgCBG7R3eG7toDSSUYHGrQV8XWgJOd8DtX5gdlSDMHRNZ/4zfz1ToviGp2PxRIHyOmDaGDpzNrNZynX0QH+riDO+8aekwTXqlaG/2DMz6Dyekjr6qhuIl6e8/AG9A/HaUx6DchC8zau+AkQBQynPNcxgJ5wdx4C8rbMuET2IE1s0C2ShAY5hf65nBVPpm1kLnKZhgHchJKVp90yMHgrD4QyrZZtVaPrxo9xKqklgBM18wKdB8SV/L5CixDALf5eJphvH+Wqrcfc9GM4q7qRlviENEgfFcqYlRucCC4HGoYyfsogpdN0VuiX9k4wv2RJy/BUZsoGLalXQMcAlvm79MDbeKvTeOEiGB8L0RawtsCUDzMHxBbMaw8hM6jGFiSiJw8H8W75wVuKa5q8NMEZHhcQGB8NYXuYnTaSZEalsDQn/CCeA6DJTcwzHFeSj6x08yde/GV5nIfz6HxgCZGewM/BAA8t425dsFIKhCavl1tZWt4fOINFcQa8E1S9iEaZG8j6XeRUK0nAat8pBB6ZxbeqK4U0DYEeouakklg4YnFUrubzGxTecR7OiF90AHzIDAgu9hJu2hlMSAGS/YX6tNyiqmIN/MLtmLwakBLMG+C1rQySvAJoxgZL8PJrS4xIW/8OdERJ0o3Fehxu4tUlqNghhlsWccY5v83GJYTC90SjP+jjWR146wLSAjI8oTNxBBdQe0MArvF+vOOUsTx/OC8xqFC/xm9CimBKHvlyQX0lzWdhqxWX8GYuq1ChdIqniCi7DbiLNXWrYCB5lAaYoAxZolOe1FMA42vgAQ4XDQ7RPha6gJ4cRFIE7sw7M1cBiPvGVUQrB4NTFsKED/8XKkHxYF87eQFc250uYbpGt05lKCaSWmwILh1sZ1JhtWf4pRmloQc7K2GDtbl8A5naKPgiNpg3jfOyODoK5vE15SsIcifLR0txK/nPrSGSDZLMvW3EZyx6cmNoyawHnh1ZCFBgquMEXf2REmG4I2A5+xo0IlFeHJs3GCyQP0aEpbTpnwqwinrukNbN4z8fW6paovBAwjPXt2CzQ/CGVdrXTIit9Nb0VvF4PKrvB7P6EVx15mw7z2cDfuDs0UV1hGMtIyAMXylrbIRBcy2Be87QMJ5Wd1qYjNzYVGUklVcoDKzIBfB1z1hJgoq80kBhOpQslXBggL//OQl+5FfXLetPTl2lrql0j9bXIhWz09ewqYGCK3p81Z7rBl33V/A6VCjdEJExXairm0IezWe7lXjqJA9QVmn/hwMbvZ/8tHu1oGbL7cXUcDUzhowCZ2ZqxHEsPX3kpmJhS2XFr2/l7zhWGuUXXLljH8/hbZh3aMii04UcUOLuBy4li7zYNQZjVZqDtPMBRjGI6273WQXYC6ekCo3Gwi7pN3JjfeE9Dyn8B9CCskevnMS+HATZwn68/UGI4l1t85KVG8g9mpLr4AocSRgQAWcGHPjZf5dUsDtqRUamkeTWcVUxnaoQsEtFQhOmCFUUlTzKSg7mSF7CxPOkZLyNRAqOoaIAIxmQXRMV6SlEJ2wklHweF/mJNolOfzHofQCgQdOEIH03OABPYlrI/JxzJ/r5A1sEwj21F3SIawzNs8wWzEujP3hmEy2kEV7C2sVovW76yRCAxvMet3MZBDGUQR3qFLk3k4AGJoQuH81wDpUrF2XbJAqbGqvxmKOMVGq7UmCGsQoEEPk4wcwnruY9rfD3NfpUONZJVPJZBe8VRCGyf2ycRzPYxLmkEH7CEY30ist2+1IOYnPrGGRRruIoHG+fmWoFAz/VJ2qxgBb+jK8fRnx/R2Wt/E8UapVH05bldTlpqJEuZnJhg8h8SzZ4cir+nzyDYxKcJVmQQ3M+FtArQI4v/O8n9fO3JsqQyyaGMH/t+l0ayjr/5wlHXkXJs4BtGMzkD9qlRPMSpDG6MUBkZujjbyyOBj/kjZ3EAw5jEZ4XUr/BxyC5qWGkeoRdKY9X8cYmjP+0D1AADfBZbx9wp+R6KmVGkkXzOAwgPKCbz4CkE/egeYJE1PMtXvmBVA7PQvvE/EjiGbhm46QwGwXg2N1DNiliE6S5wJ3lKtjCD8ziAM1mICAUMrgFD5thbIg1HtGM/psHI0mD4Wajkfs9HF4siMyeyJVaXLIPgYdYW7Lk7El/4kQFgWIT4Kl0f50qCLLMVGbWA10je5fqG744ZpyThzs5eCsUmpjCAgbwYwW7Vloomb2bsczEczgmhsZhLUpg23ufxGKYNg2Qr99WQzyIRw3EoZ7ivGmRQgdE97i+qijpT6uqwWRCTRjKRxaEBeo1ImDV1T8crYPkMx/Ng4KJdJ3lLaMo0ib3P/0FpSP8SWJzqHXewPbLM1Aj+wrsppYdEcDRdfRGUBl5gdSh4nBlwdyXQl30yiTkzCKr4FVWZZHomJEwRS37aaCx2MI5lIYdVGjsD4rs+FA7DGBlYC0IjWRvQbCeKLFjBUxEli3tB78yAvRpGh6x5DsFmRQ28zIe+Kxc4tOCkjISBW0jg1oaWmbKWVhO3KIiNhebeEPNDeLxn06hLlntwTwibNBgW82WKXsoCwV0R5YpGMpelKQGiwKEVQ/APLQjOudz5q60sCDE9npyZB1IjuZk3GpY0ZQEUWUziEBxULACgEbwUUPDB5TlOE7XFIssyHqNLaCijKJSqSioLBIuYG8krKYC7UssgieBYOvt+mVul4C2i2JlnBiA8CRwREMIQH85uZTy6IeHsTsLswTks4FQcdKzaA4ZvQkosVMZOTfquDjddrpwnOD4kYc6g2BBQnCrq++D3EcjNQfI88zNw2htGBchDA8wOcIXU/N3zfO6LFgQOzflxZpYNB8V8JjekzJSF/45E05bHuJ+9vN7QIuLhtg1o6WmAbWylqb90+EkoDDY/YC7DQl3arjdvTUpTjINgPosiOb0mxHR5FW+30JbBAWYbhQ7oUVIbXH5eo4Je8TE6Q0LSSK5idcM5TiTVZR5GILHRjGMZl1DuEWcYFFAY+oeg+U2xU5MaUkYlfZKA1GIhC8rbZY1DBZfzCn0jVH4QGO7PQCJINLeGzOMgeIsZMXW28nrMWALH+mZ5umpRUO3YumQ/M/C7DIdwUGbZwAbBl1yWcaiBwPKSRASqdviK9A75EA73CNGhA3/gFS6grZcu7bYOEvUmlZRQRSfOD/h8t2xTVQoTRX7DADYm4RN/bMKmsl7IguMpD725luXcRgU6IFByJ7RczN8yMG9oBDNYFqhnCgR3xw5kMD4mGX/spIF5VGJFTLZ6hi2+a3Izm0aQnZtOo3ic/8uwa4mLkBxPd3UTRAo41fK45kgsL6jYDbTbj4n8O4/xZxYXFrJTUlRfTk0PptI1xEyxkl3Ti2khaZmoBKHEYVtsbe50DqC8DikZStiNLhzIPl4EcpRK9gK4GZ3BJTEoHO5giu8JaSSreYT6BWdEzB1waM/AgH+nILLWrBF8xBL6B3oSRnBzZiUm3QC9izie3TLIMBYYHFozkCP5PqXYrGYZ8/jUo0csBDYlDK+xYW5vL8NeXMYlvM4cFrOcT+pkI5ZyKKM4L2SZ6Z3geRElnMngRGlcmjJWcBJ2DGAjgDM4I/A3NjKSu8pB8TwzM4ttETzO1eznc44ayf1sKsIEqmIzs/7sEZDRIljttRCKJm9sZtM/EMwezKEsyUwv1Cg+4SompWaHEo3kIsbTrdbfb2AyN7ERibaQOPSmJ7Wduq7Wo7E4lEOBLazmQ9axBQdJBR3pwfe8BnwygMtIvuLlXdT0U5GiivnniUwtJlDTtSLN4gLwf8fJCFQZFJXczT1Fr69B8RWTi7KgHTHfA2NCzCvPFWUA/sB3Njf6slY3HXskSzJEaxrFA5yasnOJQNOeqQysw5Yd2nA5gxjDO0hX4SyeHSe9PksaSUv2Z/8iPD7YPKSRvJjadpifjmkSH0+SAO5sUoccLCbxQoa6jkbwKFcW9S+6qU+fFX2biHkZ92RAgEVWIHg65qrfZCWH+4oGt6T0DTEle9iN0VzEi7RInIotEJTzF46mis2edUZSQgssDDYHM4d+fCaxA7PjqnNKDBqnlslCYyKkQQkeYVeNkxXIhI9otC9ysHiPqzPNqzdINnFPEalokGxjUga2SAkMoH1AjKzkS56Nha2kFyVkAsDs/hyRaVFmjWIlv0shaiSa6zgaG8FwenAA+7E/PRnIZAQWO+jGBIQEjmLfULOyQNYy97tG3rCPkHwUUki/acSFgw7nBGQrJpeZDxVx2DsInuSdDNhANZANauq+iHWxL/zMQFVKozLvmqlR/J6lCRGLxKE7F3iW901sYC3rWcP7PMM4zvNCTE7mBLcVGrkEzRkEd7I5VbOiplHX7HMpCzNvNG6QrOe+OgRoUOgMAvFcKbE3xwUC2eCMET8tcxnvBbANAQyjWaY1pwyGbVzEjkSWEwGcTDNvxSUIduNPzOW/2QPJJBYjcTD8THpx+NkXmHRbFU1urGJG/4SjCosJTMDKYUcNgv9iA8LzqhkvI3IWL2VQr0kAA2njSyBuruf8mNjKbTw0LwTM7ssPM77fGsUi7kkUV2SAvjXWayjhRAZyLhejkSzytNCjJMfTI4dq6QaN4PKYOfJNw38/bUqYwiWoXIpoaiSf8khBgxZe39MJmVgIwi2ysJwPEjHx4GKWDoKTM7dyaCTX8V4C0tQIutWxUbi050r+lt7/7y05HZ0DB3aweJAnMwdd383hGtru5+fen/MhfcFdrGMLX7OZzWxkGwt4JgPEI9F04+gQuTUjQSdyDbzIJwGaqQROohw7U9I0CDZzEXEt+277vla1GNYWzmMcg5mMoYLBnrW3xGIQMvMGnDYWL3H+Luom+TZqlvBrfuu5r/IifnifPpR5gNNQwjp0JhZZzWBaBYQWSGxmE99IaJBs5FnGBoLZfejLvIwLqDooZvJHzozl0TRAJVtq/f82pnkr7cxthSg6W3IGq7GwMyQhG4s3OJltNOWUpCcXjWIdp+RMltUc/SPe5j3e5V3e402+yuQEtQcng+TPSt5IxAIEgpkhYJbAt6f5qitZF1NVk2hWFXbVlaDnMhaJ4RhOwfbm+0wymyP5K5ZnDcpCF7J4laF82iQvUx+9Gzn7BL15Ais3EFtbAtX21wZfsqhX8fscFZLoMIcdiawRBsPCQPeRBIbk0A3AIFnLZTGhvgBeLBCmQtKa3zGF4Rim8kcsL0LgZYliDSM4h1WFFkJpBLzAYjrH83HD1xX7JzP1aCSKFZzGKaz27SSZh4Te+ZjAC1YZkTBdLc8/m1NEzML0M8OsZVEADHa7ARyXumtmcTj7KE/FsqMY4M/sQAGGzWg28yWau+mE5l9ZjgIEj0gcBIL7OYwbWY9CYhLUTzVe8tI3XMkoNu1yLRG+LQTpJv+4NQiXcg5HMg25i+5mlPwagUYwKuA+uWEoS0kahiKAp0IIyASuIM15wcVsiiE1NZI3eQBJFRa38zAP0hHJXvyVh5lApae9zra86RVfcS33chZnsh+Wd0miBJ+ZQs4mPM2veRWR0JLneNmRfpqCTjBfHlJbo4sQisHGhhQRlKLQPm4t83iMeVRBAru2/3c7kGkon+0DEB2qQ1YEmn3oVeNv6lskFPPZkth+b4AFbKY5Vb4lvjQDqWCzB3iD7oUTsbtA9U1QfMB13OnJwGKzFQtzvIZjOJgqflzjb3vRy/vzF1yItmqAUMVabmYCJ3AqA2lfCGrXnglXFK6dodpQrLzLpJnFBOYCVkJdVdIuIL9CAS1jzrhbxHyNuEMB7epdSIvWqS/6Gt5iOQt4iS+9N+kE17WN73croHlm+9ASy+dNCrzdkGjGBWbxKIJrEUSRQe+zkqMC39CZU/gfz+rRJuSetYj1dsU9nOrzdgU0K2Lq2sAwpnOo1+HAjTi30SgUnzGaD5BWLf4nUGxlOtNpx1EMoA8H0LoIHxI1JMPXLGceT/IPj+8n1YW2cSUVvv4mTTkLY/B7A9zrNWzLHsCU8HktgjHAOq7ywiriX61tbGQ9q1nDphpHGp8oXYZ4F12o9MmtjLeLQWt2O4hs9XlPC5YX0NQKfs12X2kmIYM1XcMxPmtxxU45awvvuNN3f9yVv0R0W7QbIfVLTuGbIjNqyotkmLqdY47lN5xd6EctvDT5J7iCj1A4wtQnOlmAHZJO9GR/9qcLe7AbLSmljG3s4Gu+YDVv8Tov85H3W9GkV2YwLEwD2F+bRnYjiZvHld0HcQb9+B7lbONTljCV56uVl/8HMy4gBskgcxYAAAAASUVORK5CYII="); } .brand-logo--sols { --brand-logo: url("data:image/png;base64,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"); } /* Next Level: logo u dva reda, pa mu treba malo više visine da se čita */ .brand-logo--nextlevel { height: 24px; --brand-logo: url("data:image/png;base64,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"); } .model-card[hidden] { display: none; } .model-card { width: 100%; margin-top: 0; display: block; text-align: left; background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--radius-md); padding: 11px 13px; font-weight: 400; } .model-card:hover { border-color: var(--text-on-ink-muted); background: var(--ink-soft); } .model-card.active { border: 2px solid var(--cobalt-light); padding: 10px 12px; } .model-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .model-name { font-size: 14px; font-weight: 600; color: var(--text-on-ink); } .model-price { font-size: 13.5px; font-weight: 600; color: var(--text-on-ink); white-space: nowrap; } .model-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 5px; } .model-badge { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: rgba(237, 234, 224, 0.08); color: var(--text-on-ink-muted); } .model-badge--weight { background: rgba(74, 108, 224, 0.22); color: #c3d0f7; } .model-blurb { display: block; font-size: 11.5px; line-height: 1.45; color: var(--text-on-ink-muted); } .info-btn { width: 21px; height: 21px; padding: 0; margin: 0 0 0 auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; /* Ispunjen krug, bez obruba - s tankim obrubom i sitnim slovom izgledao je kao tipka za paljenje, a ne kao oznaka za informaciju */ border: none; background: rgba(74, 108, 224, 0.18); color: var(--cobalt-light); font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1; cursor: pointer; } .info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--paper); background: var(--cobalt-light); } .info-popover { background: var(--ink-soft); border: 1px solid var(--ink-line); border-left: 3px solid var(--cobalt-light); border-radius: var(--radius-sm); padding: 10px 12px; margin: -2px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-on-ink-muted); } .info-popover strong { color: var(--text-on-ink); } .info-popover[hidden] { display: none; } /* ========================================================= POLJA I KONTROLE ========================================================= */ .input-group input:not([type="checkbox"]), .input-group select { width: 100%; padding: 10px 11px; box-sizing: border-box; font-family: var(--font-body); font-size: 14px; background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--radius-sm); color: var(--text-on-ink); } .input-group input::placeholder { color: var(--text-on-ink-muted); } .input-group input:focus-visible, .input-group select:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; border-color: var(--cobalt); } .input-group select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-on-ink-muted) 50%), linear-gradient(135deg, var(--text-on-ink-muted) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } input[type="file"] { color: var(--text-on-ink-muted); font-size: 13px; } input[type="file"]::file-selector-button { font-family: var(--font-body); font-weight: 600; padding: 8px 14px; margin-right: 10px; background: var(--ink-soft); color: var(--text-on-ink); border: 1px solid var(--ink-line); border-radius: var(--radius-sm); cursor: pointer; } input[type="file"]::file-selector-button:hover { background: #333228; } /* ========================================================= GUMBI ========================================================= */ button { width: 100%; padding: 12px; font-family: var(--font-body); background-color: var(--ink-soft); color: var(--text-on-ink); border: 1px solid var(--ink-line); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 14px; } button:hover { background-color: #333228; } button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; } .btn-primary { background-color: var(--cobalt); color: var(--paper); border: none; margin-top: 6px; padding: 13px; font-size: 15px; } .btn-primary:hover { background-color: var(--cobalt-hover); } .btn-ghost { margin-top: 14px; background: transparent; border: 1px dashed var(--text-on-ink-muted); color: var(--text-on-ink-muted); font-size: 13px; padding: 9px; } .btn-ghost:hover { border-color: var(--text-on-ink); color: var(--text-on-ink); background: transparent; } /* --- SLOBODAN IZBOR BOJE --- */ .color-picker-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; } .color-input-wrap { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; } .color-picker-row input[type="color"] { width: 34px; height: 34px; padding: 2px; border: 1px solid var(--ink-line); border-radius: var(--radius-sm); background: var(--ink-soft); cursor: pointer; } .color-input-label { font-size: 12.5px; color: var(--text-on-ink); font-weight: 600; } .color-current { margin-left: auto; font-size: 11.5px; letter-spacing: 0.03em; color: var(--text-on-ink-muted); } .color-hint { font-size: 10.5px; line-height: 1.45; color: var(--text-on-ink-muted); margin: 9px 0 0; } .color-hint strong { color: var(--text-on-ink); } /* --- BRZI IZBOR BOJE --- */ .color-swatches { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; } .swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px var(--ink-line); transition: transform 0.15s ease; border: 2px solid transparent; } .swatch--outline { box-shadow: 0 0 0 1px rgba(237, 234, 224, 0.4); } .swatch:hover { transform: scale(1.12); } .swatch.active { border: 2px solid var(--cobalt); box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px var(--cobalt); } /* --- ALAT ZA DODAVANJE TEKSTA --- */ .text-tool-row { display: flex; gap: 8px; } .text-tool-row input { flex-grow: 1; } .text-tool-row button { width: auto; margin-top: 0; padding: 8px 14px; font-size: 13px; white-space: nowrap; } /* --- IZBOR FONTA --- */ .font-row { display: flex; gap: 6px; margin-top: 8px; } .font-picker { position: relative; flex: 1; min-width: 0; } .font-picker-btn { width: 100%; margin-top: 0; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 400; text-align: left; } .font-picker-current { font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .font-picker-arrow { width: 0; height: 0; flex-shrink: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text-on-ink-muted); } .font-picker-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--radius-md); box-shadow: 0 10px 26px rgba(0,0,0,0.4); } .font-picker-list[hidden] { display: none; } .font-picker-item { padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 16px; line-height: 1.25; color: var(--text-on-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .font-picker-item:hover { background: rgba(237, 234, 224, 0.08); } .font-picker-item.active { background: rgba(74, 108, 224, 0.22); } .font-style-btn { width: 34px; flex-shrink: 0; margin-top: 0; padding: 0; font-size: 14px; } .font-style-btn.active { background: var(--cobalt); color: var(--paper); border-color: var(--cobalt); } .font-hint { font-size: 10.5px; line-height: 1.4; color: var(--text-on-ink-muted); margin: 6px 0 0; } /* ========================================================= SLOJEVI (LAYERS) I UNDO/REDO ========================================================= */ .layers-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } /* ========================================================= PLUTAJUĆI TOOLBAR (undo/redo, zoom) IZNAD CANVASA ========================================================= */ .canvas-toolbar { display: flex; align-items: center; gap: 4px; background: var(--paper); border-radius: 999px; padding: 6px 10px; box-shadow: 0 6px 18px rgba(35, 34, 30, 0.16); } .toolbar-btn { width: 34px; height: 34px; padding: 0; margin: 0; border-radius: 50%; border: none; background: transparent; color: var(--text-on-canvas); font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; } .toolbar-btn:hover { background: var(--canvas-soft); } .toolbar-btn:disabled { opacity: 0.3; cursor: not-allowed; background: transparent; } .toolbar-btn--small { width: 26px; height: 26px; font-size: 14px; } .toolbar-divider { width: 1px; height: 20px; background: rgba(35, 34, 30, 0.15); margin: 0 4px; } .zoom-control { display: flex; align-items: center; gap: 2px; } .zoom-value { font-size: 12.5px; font-weight: 600; color: var(--text-muted); min-width: 40px; text-align: center; } .canvas-frame { position: relative; flex-shrink: 0; /* bez ovoga flex stisne okvir umjesto da se skrola */ } /* Kad zumirani sadržaj ne stane, poravnaj ga prema vrhu umjesto da se centrira - inače vrh majice izađe izvan vidljivog dijela i ne može mu se doskrolati. */ .preview-area > * { flex-shrink: 0; } /* ========================================================= PRAZNO STANJE PLATNA (kartice za dodavanje elementa) ========================================================= */ .canvas-empty-state { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; padding: 0 12px; /* Poluprozirno da se ispod nazire majica; kartice ostaju pune pa su čitljive */ background: rgba(250, 249, 246, 0.45); text-align: center; color: var(--text-muted); } .canvas-empty-state p { color: var(--text-on-canvas); font-weight: 500; font-size: 11px; line-height: 1.3; margin: 0 0 3px; } .empty-state-card { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; background: var(--paper); border: 1px dashed rgba(35, 34, 30, 0.25); border-radius: var(--radius-md); color: var(--text-on-canvas); font-size: 11px; font-weight: 600; } .empty-state-card:hover { border-color: var(--cobalt); color: var(--cobalt); background: var(--paper); } .empty-state-card svg { flex-shrink: 0; color: inherit; opacity: 1; } /* Vrlo male zone (npr. rukav): kartice ne stanu unutar okvira, pa im dopuštamo da vire izvan njega i centriramo ih na okvir. */ .print-area-container.tiny-area .canvas-empty-state { width: 150px; left: 50%; right: auto; transform: translateX(-50%); background: rgba(250, 249, 246, 0.97); border-radius: var(--radius-md); padding: 8px; gap: 5px; } .print-area-container.tiny-area .canvas-empty-state p { font-size: 10px; margin: 0 0 3px; } .print-area-container.tiny-area .empty-state-card { padding: 6px 5px; font-size: 10px; } /* Rukav: dodatno smanjenje unutar mockupa */ .tshirt-mockup.side-sleeve .canvas-empty-state { gap: 5px; padding: 0 8px; } .tshirt-mockup.side-sleeve .canvas-empty-state p { font-size: 9.5px; line-height: 1.25; margin: 0 0 2px; } .tshirt-mockup.side-sleeve .empty-state-card { padding: 6px 4px; font-size: 9px; gap: 4px; } .tshirt-mockup.side-sleeve .empty-state-card svg { width: 12px; height: 12px; } .layers-list { border: 1px solid var(--ink-line); border-radius: var(--radius-sm); max-height: 220px; overflow-y: auto; background: var(--ink-soft); } .layers-empty { font-size: 12.5px; color: var(--text-on-ink-muted); padding: 14px; margin: 0; text-align: center; } .layer-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-bottom: 1px solid var(--ink-line); cursor: pointer; } .layer-row:last-child { border-bottom: none; } .layer-row:hover { background-color: rgba(237, 234, 224, 0.05); } .layer-row.active { background-color: rgba(31, 63, 166, 0.25); } .layer-thumb { width: 30px; height: 30px; object-fit: contain; background-image: linear-gradient(45deg, #3a392f 25%, transparent 25%), linear-gradient(-45deg, #3a392f 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #3a392f 75%), linear-gradient(-45deg, transparent 75%, #3a392f 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; background-color: var(--ink); border: 1px solid var(--ink-line); border-radius: var(--radius-sm); flex-shrink: 0; } .layer-name { flex-grow: 1; font-size: 12.5px; color: var(--text-on-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .layer-actions { display: flex; gap: 3px; } .layer-actions button { width: auto; margin-top: 0; padding: 3px 6px; font-size: 11px; background: transparent; border: none; color: var(--text-on-ink-muted); } .layer-actions button:hover { color: var(--text-on-ink); background: transparent; } /* --- PORAVNANJE ODABRANOG ELEMENTA --- */ .align-toolbar { display: flex; gap: 4px; margin-top: 8px; } .align-btn { flex: 1; width: auto; margin-top: 0; padding: 8px 4px; display: flex; align-items: center; justify-content: center; } .align-btn svg { width: 16px; height: 16px; } /* --- RUČNI UNOS VELIČINE (mm) --- */ .size-manual-row { display: flex; align-items: flex-end; gap: 6px; margin-top: 8px; } .size-manual-field { flex: 1; display: flex; flex-direction: column; gap: 4px; } .size-manual-field label { font-size: 10.5px; font-weight: 600; color: var(--text-on-ink-muted); letter-spacing: 0.02em; margin: 0; } .size-manual-field input { width: 100%; padding: 8px 8px; text-align: center; } .size-manual-field input:disabled { opacity: 0.4; cursor: not-allowed; } .aspect-lock-btn { width: 32px; height: 32px; padding: 0; margin: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-on-ink-muted); } .aspect-lock-btn svg { width: 14px; height: 14px; } .aspect-lock-btn.active { color: var(--cobalt-light); border-color: var(--cobalt-light); } /* --- GOTOVE POZICIJE --- */ .preset-size-toggle { display: flex; gap: 4px; margin-bottom: 8px; } .preset-size-btn { flex: 1; width: auto; margin-top: 0; padding: 8px 4px; font-size: 11.5px; } .preset-size-btn.active { background: var(--cobalt); color: var(--paper); border-color: var(--cobalt); } .preset-position-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; } .preset-pos-btn { width: auto; margin-top: 0; padding: 9px 6px; font-size: 12px; } .preset-pos-btn.active { background: var(--cobalt-light); color: var(--ink); border-color: var(--cobalt-light); font-weight: 700; } #freehand-btn.active { border-color: var(--ink-green); color: var(--ink-green); } .preset-note { font-size: 11px; line-height: 1.4; color: var(--text-on-ink-muted); margin: 8px 0 0; } /* ========================================================= KOLIČINA PO VELIČINAMA ========================================================= */ .size-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .size-note { font-size: 10.5px; line-height: 1.4; color: var(--text-on-ink-muted); margin: 8px 0 0; } .size-row { display: flex; flex-direction: column; align-items: center; gap: 5px; } .size-row label { font-weight: 600; font-size: 11.5px; margin-bottom: 0; color: var(--text-on-ink-muted); letter-spacing: 0.03em; } .size-input { width: 100%; padding: 7px 2px; text-align: center; /* Strelice number inputa jedu širinu pa se broj odreže - skrivamo ih */ -moz-appearance: textfield; appearance: textfield; } .size-input::-webkit-outer-spin-button, .size-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .size-row--disabled label { opacity: 0.35; } .size-input:disabled { opacity: 0.35; cursor: not-allowed; } .quantity-total { margin-top: 12px; margin-bottom: 0; font-size: 13px; color: var(--text-on-ink-muted); } .quantity-total strong { color: var(--text-on-ink); } .quantity-total.invalid { color: var(--signal); } .quantity-total.invalid strong { color: var(--signal); } /* --- PROCJENA CIJENE --- */ .price-box { background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--radius-md); padding: 14px 16px; } .price-main { display: flex; align-items: baseline; gap: 6px; } .price-per-unit { font-family: var(--font-display); font-size: 30px; letter-spacing: 0.3px; color: var(--cobalt-light); line-height: 1; } .price-per-unit-label { font-size: 12.5px; color: var(--text-on-ink-muted); } .price-total { font-size: 13px; color: var(--text-on-ink); margin-top: 4px; } .price-hint { font-size: 11.5px; line-height: 1.45; color: #d9c07e; background: rgba(217, 192, 126, 0.12); border-left: 2px solid #d9c07e; padding: 7px 9px; margin: 10px 0 0; } .price-box--partial .price-per-unit { color: var(--text-on-ink-muted); } .price-breakdown-row--muted { opacity: 0.55; font-style: italic; } .price-breakdown { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ink-line); font-size: 11.5px; color: var(--text-on-ink-muted); line-height: 1.6; } .price-breakdown-row { display: flex; justify-content: space-between; } /* PDV na kraju procjene: bez PDV-a, PDV, pa istaknut iznos s PDV-om */ .price-vat { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ink-line); font-size: 11.5px; color: var(--text-on-ink-muted); line-height: 1.6; } .price-vat:empty { display: none; } .price-vat-row { display: flex; justify-content: space-between; } .price-vat-row--total { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--text-on-ink); } .price-disclaimer { font-size: 10.5px; line-height: 1.4; color: var(--text-on-ink-muted); margin: 10px 0 0; } /* --- CHECKBOX RED --- */ .checkbox-row { display: flex; align-items: center; gap: 10px; } .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--cobalt); } .checkbox-row label { margin: 0; font-weight: 500; font-size: 13.5px; cursor: pointer; } /* --- DTF UPOZORENJE --- */ .dtf-warning { display: none; background: rgba(200, 30, 58, 0.14); border: 1px solid var(--signal); border-radius: var(--radius-sm); color: #F3B7C0; font-size: 12.5px; font-weight: 600; padding: 10px 12px; margin: -6px 0 16px; } /* ========================================================= STUPAC NARUDŽBE — koliko i pošto Lijevo je dizajn, u sredini pregled, desno narudžba. Količine skrolaju, a cijena i gumb su prikovani na dno stupca: cijena se mijenja uživo dok kupac slaže dizajn, pa je nema smisla držati na mjestu do kojeg se mora skrolati. ========================================================= */ .order-col { width: 288px; flex-shrink: 0; min-height: 0; display: flex; flex-direction: column; background: var(--ink); color: var(--text-on-ink); border-left: 1px solid var(--ink-line); } .order-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px 20px 0; } .order-scroll::-webkit-scrollbar { width: 8px; } .order-scroll::-webkit-scrollbar-thumb { background: var(--ink-line); border-radius: 4px; } .order-summary { flex-shrink: 0; padding: 16px 20px 20px; border-top: 1px solid var(--ink-line); background: var(--ink); } .order-summary .price-box { margin-bottom: 14px; padding-bottom: 14px; } .order-summary .btn-primary { margin-top: 0; } .order-summary .dtf-warning { margin: 0 0 12px; } /* Na užim ekranima stupci se stisnu da majica ostane čitljiva */ @media (max-width: 1240px) { .sidebar { width: 288px; padding: 24px 18px; } .order-col { width: 248px; } .order-scroll { padding: 20px 14px 0; } .order-summary { padding: 14px 14px 18px; } } /* ========================================================= DESNI STUPAC — RADNA POVRŠINA ========================================================= */ .preview-area { flex-grow: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; /* safe center: centrira dok sadržaj stane, a kad preraste stupac poravna ga prema vrhu - inače se gornji dio ne može doskrolati */ justify-content: safe center; align-items: safe center; gap: 18px; position: relative; /* Zumiran prikaz može biti viši od stupca - tada se skrola OVDJE, umjesto da gura cijelu stranicu */ overflow: auto; overscroll-behavior: contain; padding: 16px 0; /* Suptilna tehnička mreža - kao rezna podloga (cutting mat) */ background-image: linear-gradient(rgba(35, 34, 30, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(35, 34, 30, 0.05) 1px, transparent 1px); background-size: 24px 24px; } .side-tabs { display: flex; gap: 8px; } .side-tab { width: auto; margin-top: 0; padding: 9px 20px; background-color: var(--canvas-soft); color: var(--text-muted); font-weight: 600; font-size: 13.5px; border: 1px solid rgba(35, 34, 30, 0.12); border-radius: 20px; position: relative; } .side-tab:hover { color: var(--text-on-canvas); } .side-tab.active { background-color: var(--ink); color: var(--text-on-ink); border-color: var(--ink); } .side-tab.has-content::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--ink-green); margin-left: 7px; vertical-align: middle; } .tshirt-mockup { width: 400px; height: 500px; background-image: url('majica-bijela-prednja.jpg'); background-size: cover; background-position: center; background-color: var(--canvas-soft); position: relative; border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(35, 34, 30, 0.18); } /* --- OKVIR ZA PRINT --- */ .print-area-container { position: absolute; top: 90px; left: 50%; margin-left: -105px; width: 210px; height: 297px; border: 1.5px dashed var(--cobalt); background-image: linear-gradient(to right, rgba(31, 63, 166, 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(31, 63, 166, 0.12) 1px, transparent 1px); background-size: 20px 20px; background-color: rgba(250, 249, 246, 0.35); z-index: 10; } .print-area-container.hide-grid { border: none !important; background-image: none !important; background-color: transparent !important; } .canvas-container { margin: 0 !important; padding: 0 !important; position: absolute !important; top: 0 !important; left: 0 !important; } /* Napomena: pozicija/veličina print-area po strani (prednja/stražnja/rukav) i po proizvodu sad se postavlja dinamički u JS - vidi PRINT_AREA_LAYOUT i applySideLayout() u script.js. */ /* ========================================================= MODAL ========================================================= */ .modal-overlay { display: none; position: fixed; inset: 0; background-color: rgba(27, 27, 24, 0.72); /* Mora biti iznad mobilnih traka: edit-sheet 140, cijena 150, tab bar 200 */ z-index: 1000; justify-content: center; /* Overlay sam skrola ako je forma viša od ekrana (mobitel, otvorena tipkovnica, rasklopljen tekst o privatnosti). body ima overflow:hidden pa bez ovoga donji dio forme ostane nedostupan. */ align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 12px; } .modal-content { background-color: var(--paper); padding: 32px; border-radius: var(--radius-md); width: 400px; max-width: 100%; /* margin:auto centrira kad forma stane, a kad ne stane poravna je na vrh umjesto da joj odreže gornji dio (što radi align-items:center) */ margin: auto; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.3); color: var(--text-on-canvas); } .modal-content h2 { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.3px; margin-top: 0; margin-bottom: 6px; } .modal-content p { color: var(--text-muted); font-size: 14px; margin-top: 0; } .modal-content .input-group { border-bottom: none; padding-bottom: 0; margin-bottom: 16px; } .modal-content .input-group label { color: var(--text-on-canvas); font-size: 13.5px; } .modal-content input { width: 100%; padding: 10px 11px; font-family: var(--font-body); font-size: 14px; background: var(--paper); border: 1px solid rgba(35, 34, 30, 0.2); border-radius: var(--radius-sm); color: var(--text-on-canvas); } .modal-content input:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; border-color: var(--cobalt); } .modal-content textarea { width: 100%; padding: 10px 11px; font-family: var(--font-body); font-size: 14px; background: var(--paper); border: 1px solid rgba(35, 34, 30, 0.2); border-radius: var(--radius-sm); color: var(--text-on-canvas); min-height: 80px; resize: vertical; } .modal-content textarea:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; border-color: var(--cobalt); } .close-btn { position: absolute; top: 16px; right: 20px; font-size: 24px; line-height: 1; cursor: pointer; color: var(--text-muted); } .close-btn:hover { color: var(--text-on-canvas); } /* ========================================================= TOUCH Pinch-zoom stranice preko platna je isključen, ali skrol nije: dodir po praznom dijelu platna smije skrolati. Kad prst pogodi element ili ručku, fabric sam zaustavi skrol (preventDefault) - vidi "SKROLANJE PREKO PRAZNOG DIJELA PLATNA" u script.js. ========================================================= */ #tshirt-canvas, .canvas-container { touch-action: pan-x pan-y; } /* Sloj s ručkama selekcije - širi od zone tiska, da gumbi u kutovima ne budu odrezani kad je element uz rub. Ne prima dodire; dio ručke izvan platna hvata script.js (vidi "RUČKE SELEKCIJE SMIJU VIRITI"). */ .selection-overlay { position: absolute; pointer-events: none; z-index: 5; } /* ========================================================= MOBILNI TAB BAR (skriven na desktopu) ========================================================= */ .mobile-tabbar { display: none; } .mobile-tab { width: auto; margin-top: 0; background: transparent; border: none; border-radius: 0; color: var(--text-on-ink-muted); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 8px 0 6px; } .mobile-tab.active { color: var(--cobalt-light); } .mobile-tab:hover { background: transparent; } /* ========================================================= OKOMITA TRAKA UZ PLATNO — radnje nad odabranim elementom Stoji uz desni rub radne površine i pojavljuje se tek kad je element odabran. Pozicija je fixed, a script.js je poravnava s desnim rubom stupca: tako ostaje na mjestu i kad se zumirani prikaz skrola. ========================================================= */ .obj-rail { position: fixed; z-index: 60; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; background: var(--paper); border: 1px solid rgba(35, 34, 30, 0.12); border-radius: 999px; box-shadow: 0 6px 18px rgba(35, 34, 30, 0.16); } .obj-rail[hidden] { display: none; } .rail-btn { width: 38px; height: 38px; padding: 0; margin: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-on-canvas); display: flex; align-items: center; justify-content: center; } .rail-btn svg { width: 18px; height: 18px; } /* Prednji pravokutnik u ikoni "dupliciraj" mora biti ispunjen pozadinom trake, da se preklapanje vidi. Na mobitelu je traka tamna, pa se boja mijenja tamo (vidi mobilni blok). */ .rail-icon-bg { fill: var(--paper); } .rail-btn:hover { background: var(--canvas-soft); } .rail-btn--danger:hover { background: rgba(200, 30, 58, 0.12); color: var(--signal); } /* Omot je proziran, da tipke ostanu u istom nizu kao ostale u traci */ .rail-group { display: contents; } .rail-group[hidden] { display: none; } /* Veličina printa: dvije riječi jedna ispod druge. "S" i "L" su tražile da korisnik pogodi što znače; ovako piše što i u sidebaru. */ .rail-size-pair { display: flex; flex-direction: column; gap: 3px; width: 100%; } .rail-btn--size { width: 100%; height: 26px; font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; border-radius: 999px; } /* Ikone majice s označenom zonom tiska trebaju malo više prostora */ .rail-btn--pos svg { width: 22px; height: 22px; } .rail-btn--type { font-family: var(--font-body); font-size: 16px; line-height: 1; } .rail-btn.active { background: var(--cobalt); color: var(--paper); } .rail-btn.active:hover { background: var(--cobalt-hover); } .rail-divider { width: 20px; height: 1px; background: rgba(35, 34, 30, 0.15); margin: 3px 0; } .rail-color-dot { width: 20px; height: 20px; border-radius: 50%; background: #000000; /* Obrub iznutra, da se bijela boja vidi na bijeloj traci */ box-shadow: inset 0 0 0 1px rgba(35, 34, 30, 0.3); } /* Traka s gotovim pozicijama stoji s LIJEVE strane majice. Izgled dijeli s desnom (.obj-rail), razlikuje se samo strana na koju je script.js poravnava. */ .obj-rail--left .rail-popover { right: auto; left: calc(100% + 10px); } /* Paleta se otvara lijevo od trake, prema majici */ .rail-popover { position: absolute; right: calc(100% + 10px); top: 2px; width: 196px; padding: 11px; background: var(--paper); border: 1px solid rgba(35, 34, 30, 0.12); border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(35, 34, 30, 0.22); } .rail-popover[hidden] { display: none; } .rail-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; } .rail-swatch { width: 24px; height: 24px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid rgba(35, 34, 30, 0.18); cursor: pointer; } .rail-swatch:hover { border-color: var(--text-on-canvas); } .rail-swatch.active { outline: 2px solid var(--cobalt); outline-offset: 2px; } .rail-custom { display: flex; align-items: center; gap: 9px; margin: 11px 0 0; font-size: 12.5px; color: var(--text-muted); cursor: pointer; } .rail-custom input[type="color"] { width: 28px; height: 28px; padding: 0; border: none; background: none; cursor: pointer; flex-shrink: 0; } /* ========================================================= HARMONIKA (POSTAVKE) I PLOČA ZA UREĐIVANJE (DIZAJN) Oboje postoji samo na mobitelu. Na desktopu su omoti prozirni (display: contents), pa svi elementi stoje točno tamo gdje su i prije stajali - u sidebaru. Zato nema dvije verzije istog HTML-a: script.js samo premješta postojeće elemente kad se prijeđe granica od 840px. ========================================================= */ .acc-sum, .acc-chev { display: none; } .acc-body { display: contents; } .edit-sheet, .edit-sheet-quick, .edit-sheet-body { display: contents; } .edit-sheet-head { display: none; } /* ========================================================= MOBILNI PRIKAZ (uski ekrani) — tabovi Dizajn / Postavke ========================================================= */ @media (max-width: 840px) { .app-container { flex-direction: column; padding-bottom: var(--tabbar-h); /* stvarnu visinu mjeri script.js */ } .sidebar { width: 100%; height: 100%; border-right: none; } .preview-area { width: 100%; /* flex umjesto height:100% - iznad je traka s naslovom (h1) */ flex: 1 1 auto; height: auto; min-height: 0; padding: 12px 0; overflow-y: auto; overscroll-behavior: contain; } /* Prikazuje se samo jedan "tab" odjednom. U "Dizajnu" od sidebara ostaje samo tanka traka s naslovom (h1) - sve ostalo se skriva. */ body.mobile-view-design .sidebar { flex: none; height: auto; overflow: visible; padding: 9px 16px 8px; border-bottom: 1px solid var(--ink-line); } body.mobile-view-design .sidebar > :not(.brand) { display: none; } body.mobile-view-settings .preview-area { display: none; } /* --- NARUDŽBA NA MOBITELU --- Stupac se ovdje raspada na dvoje: količine idu u tab "Postavke" i skrolaju zajedno s ostalim postavkama, a cijena i gumb postaju tanka fiksna traka iznad tab bara - vidljiva i dok kupac crta. Zato display:contents: dijelovi izlaze iz stupca u tok stranice. */ .order-col { display: contents; } .order-scroll { width: 100%; overflow: visible; padding: 0 24px; background: var(--ink); /* Bez ovoga ga flex stisne na visinu paddinga, jer je stupac viši od ekrana pa flex počne skraćivati stavke. */ flex-shrink: 0; /* Prostor za fiksnu traku s cijenom i za tab bar. Margina, a ne padding na spremniku: skrolabilni flex spremnik zna "pojesti" donji padding, pa zadnji red završi ispod trake. */ margin-bottom: calc(var(--tabbar-h) + var(--order-summary-h, 76px)); } body.mobile-view-design .order-scroll { display: none; } /* U "Postavke" tabu sidebar i količine skrolaju kao jedan stupac, umjesto da svaki ima svoj skrol */ body.mobile-view-settings .app-container { overflow-y: auto; padding-bottom: 0; /* Sidebar je viši od svog sadržaja tek kad su sekcije sklopljene, pa bi ispod zadnje virio svijetli --canvas iz body-ja. U "Dizajnu" pozadina mora ostati svijetla (tamni pill aktivnog taba). */ background: var(--ink); } body.mobile-view-settings .sidebar { height: auto; overflow: visible; } /* Na mobitelu popis slojeva nema vlastiti skrol: skrol unutar skrola se na iPhoneu "zalijepi" - potez pomakne samo popis, a postavke stoje. Slojeva je malo, pa popis jednostavno naraste. */ .layers-list { max-height: none; overflow: visible; } /* Majica ne smije završiti ispod fiksne trake ni ispod ploče za uređivanje. --edit-sheet-h je 0 dok ništa nije odabrano. */ body.mobile-view-design .preview-area { padding-bottom: calc(var(--order-summary-h, 76px) + var(--edit-sheet-h, 0px)); } .order-summary { position: fixed; left: 0; right: 0; bottom: var(--tabbar-h); /* točno iznad tab bara, sa safe-area */ z-index: 150; padding: 10px 16px; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3); } /* Na traci ostaje samo ono bitno: cijena po komadu, ukupno i gumb. Raspis stavki i disclaimer se vide u punom prikazu cijene. */ .order-summary-main { display: flex; align-items: center; gap: 12px; } .order-summary .price-box { flex: 1; min-width: 0; margin: 0; padding: 0; background: none; border: none; } .order-summary .price-box > .sub-label, .order-summary .price-breakdown, .order-summary .price-vat, .order-summary .price-disclaimer { display: none; } .order-summary .price-per-unit { font-size: 26px; } .order-summary .price-total { font-size: 12px; margin-top: 1px; } .order-summary .price-hint { margin: 5px 0 0; padding: 4px 8px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .order-summary .dtf-warning { margin: 0 0 8px; font-size: 11.5px; padding: 7px 9px; } .order-summary .btn-primary { width: auto; flex-shrink: 0; margin: 0; padding: 12px 16px; font-size: 14px; } .mobile-tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--ink); border-top: 1px solid var(--ink-line); padding-bottom: env(safe-area-inset-bottom, 0); } .mobile-tab { flex: 1; } /* Veći dodirni ciljevi na touch ekranima. 44px je donja granica ispod koje promašaji prstom postaju česti. */ .toolbar-btn { width: 40px; height: 40px; } .toolbar-btn--small { width: 32px; height: 32px; } .align-btn { min-height: 44px; padding: 12px 6px; } .layer-actions button { min-height: 34px; padding: 10px 6px; } .preset-pos-btn, .preset-size-btn { min-height: 44px; } .size-input { min-height: 42px; } .swatch { width: 40px; height: 40px; } /* Tri taba strana moraju stati u širinu ekrana */ .side-tabs { max-width: 100%; } .side-tab { padding: 10px 14px; font-size: 13px; } /* Alatna traka u jedan red: skupina s veličinom u mm se skriva, jer iste vrijednosti stoje kao polja Širina/Visina u ploči za uređivanje. Bez nje traka više ne treba prelamanje. */ .canvas-toolbar { flex-wrap: nowrap !important; } .canvas-toolbar .zoom-control--size { display: none; } /* --- HARMONIKA: svaki numerirani korak se sklapa --- Zaglavlje je postojeći