/* PDTHUB POS portal — same palette as the till, so the two read as one product. */ :root { --bg: #181a20; --surface: #21242c; --surface-alt: #2a2e38; --border: #3a3f4c; --text: #eceff4; --muted: #969eaf; --accent: #388ee0; --violet: #7b5bd6; --success: #2ea061; --danger: #c74646; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } /* ------------------------------------------------------------ sign in -- */ /* ------------------------------------------------------------ sign in -- */ .signin-page { min-height: 100vh; background: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px), radial-gradient(900px 600px at 0 0, rgba(56,142,224,.15), transparent 65%), var(--bg); background-size: 48px 48px, 48px 48px, auto, auto; } .signin-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr); width: 100%; max-width: none; margin: 0; padding: 0; } .signin-intro { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: clamp(38px, 5vw, 72px) clamp(38px, 7vw, 110px); overflow: hidden; border-right: 1px solid var(--border); background: radial-gradient(600px 500px at 15% 85%, rgba(123,91,214,.30), transparent 67%), radial-gradient(740px 540px at 100% 10%, rgba(56,142,224,.26), transparent 68%), linear-gradient(180deg, rgba(13,16,22,.72) 0%, rgba(13,16,22,.80) 55%, rgba(13,16,22,.93) 100%), var(--signin-photo, none) 28% center / cover no-repeat, rgba(27,30,37,.55); } /* * WHICH photograph is set per page, not here — the hospitality portal shows a * restaurant and the market one shows a shop, and the rest of the styling is * identical. Set with a custom property on so a page that has no photo * yet simply falls back to the gradients and still looks finished. */ .signin-page.has-photo .signin-intro { --signin-photo: var(--photo); } .signin-intro::after { content: ""; position: absolute; right: -150px; bottom: -150px; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.014), 0 0 0 110px rgba(255,255,255,.01); pointer-events: none; } .signin-logo { position: relative; z-index: 1; display: inline-flex; align-items: center; align-self: flex-start; gap: 13px; color: var(--text); font-size: 20px; font-weight: 700; letter-spacing: .02em; text-decoration: none; } .signin-logo:hover { text-decoration: none; } .signin-logo img { width: 47px; height: 47px; object-fit: contain; } .signin-logo b { color: #70b7f7; font-weight: 700; } .intro-copy { position: relative; z-index: 1; max-width: 650px; margin: 70px 0; } .signin-eyebrow { margin: 0 0 15px; color: #6eb4f4; font-size: 11.5px; font-weight: 700; letter-spacing: .11em; } .intro-copy h1 { max-width: 640px; margin: 0 0 22px; font-size: clamp(38px, 5vw, 64px); line-height: 1.07; letter-spacing: -.035em; } .intro-copy > p:not(.signin-eyebrow) { max-width: 590px; margin: 0; color: #a8b0bf; font-size: 18px; line-height: 1.7; } .portal-benefits { list-style: none; margin: 35px 0 0; padding: 0; } .portal-benefits li { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: #dce1e9; font-size: 14px; } .portal-benefits i { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(46,160,97,.13); } .back-home { position: relative; z-index: 1; align-self: flex-start; color: var(--muted); font-size: 13px; text-decoration: none; } .back-home:hover { color: var(--text); } .signin-panel { position: relative; display: grid; align-content: center; justify-items: center; min-width: 0; padding: 90px clamp(28px, 5vw, 78px) 50px; background: rgba(24,26,32,.72); } .signin-tools { position: absolute; top: 28px; right: 32px; } .signin-tools select { min-width: 128px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: 13px "Segoe UI", system-ui, sans-serif; cursor: pointer; } .signin { width: 100%; max-width: 430px; padding: 0; } .signin h2 { margin: 0 0 10px; color: var(--text); font-size: 34px; line-height: 1.2; letter-spacing: -.02em; text-transform: none; } .signin-subtitle { margin: 0 0 31px; color: var(--muted); font-size: 14px; line-height: 1.6; } .signin .signin-eyebrow { margin-bottom: 13px; } .signin-foot { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 430px; margin: 25px 0 0; color: #737c8d; font-size: 11px; } .signin-foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 7px; } input[type=email], input[type=password], input[type=text], input[type=date] { width: 100%; padding: 13px 14px; margin-bottom: 18px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 15px; font-family: inherit; } /* Date fields. The browser's own control ships a light-themed calendar button and a set of spin fields that ignore the surrounding colours entirely. color-scheme tells it which way round we are, which is the only way to recolour the picker itself; the rest is just making the box match every other input. */ input[type=date] { color-scheme: dark; min-height: 46px; } input[type=date]::-webkit-calendar-picker-indicator { filter: invert(0.85); cursor: pointer; opacity: .8; } input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* In a toolbar a date field sits in a flex row next to a button, so the full-width-and-18px-below treatment the form inputs get would push the Apply button onto its own line. Same colours, its own size. */ .toolbar input[type=date] { width: auto; margin-bottom: 0; padding: 9px 12px; font-size: 14px; min-height: 0; } input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56, 142, 224, .18); } button { width: 100%; padding: 14px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; } button:hover { filter: brightness(1.08); } button:disabled { opacity: .55; cursor: default; } .error { display: none; background: rgba(199, 70, 70, .14); border: 1px solid rgba(199, 70, 70, .45); color: #ffb4b4; padding: 11px 13px; border-radius: 9px; font-size: 14px; margin-bottom: 18px; } .error.show { display: block; } .hint { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); line-height: 1.6; } /* ---------------------------------------------------------- dashboard -- */ .topbar { display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--border); } /* The badge art carries its own rounded corners and transparent surround, so it is fitted rather than cropped — the mark is slightly taller than it is wide, and forcing it square is visible on the lettering. */ .topbar img { width: 34px; height: 34px; object-fit: contain; } .topbar .title { font-weight: 600; font-size: 16px; } .topbar .spacer { flex: 1; } .topbar .who { font-size: 13.5px; color: var(--muted); text-align: right; } .topbar .who b { color: var(--text); display: block; font-weight: 600; } .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .4px; } .btn-ghost { width: auto; padding: 9px 16px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); font-size: 14px; } main { padding: 26px 24px 60px; max-width: 1180px; margin: 0 auto; } h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: 32px 0 14px; font-weight: 600; } h2:first-child { margin-top: 8px; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; } .card .k { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; } .card .v { font-size: 27px; font-weight: 600; letter-spacing: -.5px; } .card .sub { font-size: 12.5px; color: var(--muted); margin-top: 6px; } table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } th, td { padding: 13px 18px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); } th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; } tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .empty { background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; padding: 26px; color: var(--muted); font-size: 14px; line-height: 1.65; } .table-wrap { overflow-x: auto; } /* --------------------------------------------------------------- nav -- */ .nav { display: flex; gap: 2px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; } .nav a { padding: 13px 18px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .nav a:hover { color: var(--text); } .nav a.on { color: var(--text); border-bottom-color: var(--accent); } /* ------------------------------------------------------------ toolbar -- */ .toolbar { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; flex-wrap: wrap; } .toolbar h1 { font-size: 21px; margin: 0; font-weight: 600; } .toolbar .spacer { flex: 1; } .btn { width: auto; padding: 10px 18px; font-size: 14px; border-radius: 8px; } .btn-sm { width: auto; padding: 7px 13px; font-size: 13px; border-radius: 7px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); } .btn-danger { background: var(--danger); border: 0; color: #fff; } input[type=search], select { padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; font-family: inherit; margin: 0; } .muted { color: var(--muted); } .right { text-align: right; } .tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border); } .tag.off { color: #ffb4b4; border-color: rgba(199,70,70,.5); } .tag.on { color: #9ae6bd; border-color: rgba(46,160,97,.5); } .swatch { display: inline-block; width: 13px; height: 13px; border-radius: 4px; vertical-align: -2px; margin-right: 7px; border: 1px solid rgba(255,255,255,.18); } /* -------------------------------------------------------------- modal -- */ .modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; place-items: center; padding: 24px; z-index: 40; } .modal-back.show { display: grid; } .modal { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 26px 28px; } .modal h3 { margin: 0 0 20px; font-size: 18px; } .modal .row { display: flex; gap: 14px; } .modal .row > * { flex: 1; } .modal label { margin-top: 4px; } .modal .actions { display: flex; gap: 12px; margin-top: 22px; } .modal .actions button { flex: 1; } .check { display: flex; align-items: center; gap: 9px; margin: 6px 0 18px; font-size: 14px; color: var(--text); } .check input { width: 17px; height: 17px; margin: 0; } /* -------------------------------------------------------------- toast -- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(24px); background: var(--success); color: #fff; padding: 13px 22px; border-radius: 9px; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.err { background: var(--danger); } /* ---------------------------------------------------------- picture picker -- A dropdown that shows the pictures rather than their file names. Names are generated from SKUs, so a list of them asks you to remember which coffee is which — the whole reason someone is choosing a picture is that they want to look at it. */ .imgpick { position: relative; } .imgpick-field { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; text-align: left; font: inherit; } .imgpick-field:hover { border-color: var(--accent); } .imgpick-thumb { width: 54px; height: 36px; flex: none; border-radius: 5px; border: 1px solid var(--border); background: var(--surface) center/contain no-repeat; } .imgpick-thumb.none { border-style: dashed; } .imgpick-name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imgpick-caret { color: var(--muted); font-size: 11px; flex: none; } /* THE ONE THAT MADE THE REST LOOK BROKEN. The markup carries a `hidden` attribute, and the browser's own rule for it is [hidden] { display: none } — the same specificity as a class, and author CSS wins a tie. So `display: grid` below quietly beat it and this list was open from the moment the dialog was drawn, every time. That is what buried the Upload button, and then the Save and Cancel row: not a layout that was too tall, a dropdown that never closed. */ .imgpick-menu[hidden] { display: none; } .imgpick-menu { /* Floating again, now that it really does close. A dropdown that takes its own space would push the buttons below it off a dialog that already scrolls, which is the shape of the second complaint. */ position: absolute; top: calc(100% + 4px); left: 0; right: 0; /* Above the modal it sits in, below the toast that reports the upload. */ z-index: 55; max-height: 320px; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); } .imgpick-opt { padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); cursor: pointer; display: block; } .imgpick-opt:hover { border-color: var(--accent); } .imgpick-opt.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .imgpick-opt i { display: block; height: 62px; border-radius: 5px; background: var(--surface) center/contain no-repeat; } .imgpick-opt.none i { border: 1px dashed var(--border); } .imgpick-opt span { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imgpick-empty { grid-column: 1 / -1; padding: 18px 6px; text-align: center; color: var(--muted); font-size: 13px; } /* ---------------------------------------------------------- responsive -- */ @media (max-width: 900px) { .signin-shell { grid-template-columns: 1fr; } .signin-intro { min-height: auto; padding: 32px 34px 38px; border-right: 0; border-bottom: 1px solid var(--border); } .intro-copy { margin: 58px 0 45px; max-width: 720px; } .intro-copy h1 { max-width: 680px; font-size: clamp(36px, 8vw, 56px); } .signin-panel { min-height: 610px; padding-top: 105px; } .topbar { flex-wrap: wrap; } .topbar .who { order: 3; width: 100%; text-align: left; } main:not(.signin-shell) { padding-left: 16px; padding-right: 16px; } } @media (max-width: 600px) { .signin-intro { padding: 23px 21px 27px; } .signin-logo { font-size: 16px; } .signin-logo img { width: 39px; height: 39px; } .intro-copy { margin: 48px 0 30px; } .intro-copy h1 { font-size: 34px; } .intro-copy > p:not(.signin-eyebrow) { font-size: 15px; line-height: 1.6; } .portal-benefits { display: none; } } /* ---------------------------------------------------- portal na telefonu -- Žarko radi na terenu i novog kupca unosi sa telefona. Sve iznad je pisano za ekran; ovdje se forme slažu jedna ispod druge i polja postaju dovoljno velika da ih prst pogodi. */ @media (max-width: 640px) { /* Dva polja jedno pored drugog na 390px daju po 170px, a tri po 110px. Na telefonu idu jedno ispod drugog — inputi ionako već nose razmak ispod sebe, pa razmak u redu pada na nulu. */ .modal .row { flex-direction: column; gap: 0; } /* Safari na iPhoneu uveća stranicu kad se dotakne polje manje od 16px, i onda korisnik mora ručno vraćati zum. Ovo je jedini razlog za 16px. */ input[type=email], input[type=password], input[type=text], input[type=date], input[type=number], input[type=tel], select, textarea { font-size: 16px; } /* Polje za datum u traci ima jaci selektor pa ga treba ponoviti, inace ostane na 14px i jedino ono i dalje zumira. */ .toolbar input[type=date] { font-size: 16px; } /* Modal preko skoro cijelog ekrana — na 390px svaki piksel sa strane oduzima se od polja. */ .modal-back { padding: 10px; align-items: start; } .modal { padding: 20px 18px; max-height: 94vh; } .modal .actions { flex-wrap: wrap; } /* Traka iznad tabele: dugme „Novi kupac" pada u svoj red umjesto da stisne pretragu. */ .toolbar { flex-wrap: wrap; } main:not(.signin-shell) { padding: 18px 12px 48px; } .nav { padding: 0 12px; } .cards { grid-template-columns: 1fr; } /* Prst je širi od kursora. */ .btn-sm { padding: 8px 12px; } table { font-size: 14px; } } /* --------------------------------------------------- traka pri dnu, telefon Vodoravna traka na vrhu skriva pola menija iza ivice koju niko ne pomisli da povuče, a vrh velikog telefona palac i ne dohvata. Ovo stoji tamo gdje je palac ionako. */ .tabbar { display: none; } .navsheet { display: none; } @media (max-width: 640px) { .nav { display: none; } .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--border); /* Traka na dnu iPhonea inace sjedi preko zadnjeg reda. */ padding-bottom: env(safe-area-inset-bottom); } .tabbar a, .tabbar button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 8px 2px; border: 0; background: none; color: var(--muted); font-family: inherit; font-size: 10.5px; font-weight: 500; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tabbar svg { width: 22px; height: 22px; } .tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabbar .on { color: var(--accent); } /* Sadrzaj mora prestati iznad trake, inace zadnji red tabele ostane ispod. */ main:not(.signin-shell) { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } /* Ostatak menija. Otvara se odozdo, jer odatle dolazi i prst. */ .navsheet { display: flex; align-items: flex-end; position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); } /* Mora doci poslije pravila iznad i biti jaci od njega: [hidden] sam po sebi gubi od svakog display-a. Na tome se vec jednom izgubilo vrijeme sa menijem za slike. */ .navsheet[hidden] { display: none; } .navsheet-panel { width: 100%; max-height: 76vh; overflow-y: auto; background: var(--surface); border-radius: 16px 16px 0 0; padding: 8px 8px calc(14px + env(safe-area-inset-bottom)); } .navsheet-grip { width: 38px; height: 4px; margin: 6px auto 10px; border-radius: 2px; background: var(--border); } .navsheet-panel a { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: 15px; } .navsheet-panel svg { width: 20px; height: 20px; flex: none; color: var(--muted); } .navsheet-panel a.on { background: var(--surface-alt); color: var(--accent); } .navsheet-panel a.on svg { color: var(--accent); } } /* --------------------------------------------- gornja traka na telefonu -- Nosi osam stvari: znak, naslov, oznaku uloge, birač prodavnice, ime, email, jezik i odjavu. Na 900px se ime i email prelome u cijeli svoj red, pa na telefonu odu dva reda na podatak koji se ne koristi. Ostaje ono po čemu se snalaziš — znak, uloga, koja prodavnica — i izlaz. */ @media (max-width: 640px) { .topbar { gap: 10px; padding: 10px 12px; } .topbar img { width: 28px; height: 28px; } /* Znak već nosi ime proizvoda. */ .topbar .title { display: none; } /* Vraća se u red umjesto u svoj: font-size 0 gasi goli tekst emaila, a ime u nosi svoju veličinu. Ostaje se znati ko je prijavljen, bez reda potrošenog na adresu koja se na telefonu ne čita. */ .topbar .who { order: 0; width: auto; font-size: 0; text-align: left; } .topbar .who b { display: inline; font-size: 12.5px; } /* Birač prodavnice je jedina stvar gore koja se stvarno dira. */ #scopePicker { flex: 1 1 auto; min-width: 0; } .topbar .lang { max-width: 88px; } .topbar .btn-ghost { padding: 8px 12px; font-size: 13px; } }