/* ============================================================ FurnStream customer portal — "Mijn omgeving" The portal skin over the token base of glass-ui.css. Calm and neutral: white/dark surfaces with hairline borders, plenty of white, bordeaux reserved for the primary action per screen. Liquid glass only in the navigation (header pill + bottom tab bar) and modals. Load order: glass-ui.css, then this file. The theme sits as data-gp-theme="light|dark" on , set before first paint (see index.tpl). ============================================================ */ /* ---------- Sora, self-hosted (no CDN) ---------- Sora is a variable font: one latin-subset file covers the entire weight range the portal uses (400/500/600/700), so four separate statics are unnecessary. If the file is missing the portal falls back to the system sans and the layout stays fully intact. Licence: SIL OFL 1.1, see assets/client/fonts/OFL.txt. */ @font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/sora/sora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } * { box-sizing: border-box; } :root, [data-gp-theme="light"] { --pt-bg: #F3F4F6; --pt-bg2: #ECEEF2; --pt-surface: #FFFFFF; --pt-glow: .08; --pt-sheen: inset 0 1px 0 rgba(255,255,255,.75); --pt-glass-a: rgba(255,255,255,.6); --pt-glass-b: rgba(255,255,255,.28); --pt-spec: rgba(255,255,255,.9); --pt-glass-shadow: 0 12px 34px rgba(50,60,90,.12), inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.2); --pt-primary: #BE0F34; --pt-primary-hover: #9C0C2A; --pt-ok: #0E7A4E; --pt-warn: #96691A; --pt-err: #B3372F; --gp-ink: #191A1E; --gp-ink-40: rgba(25,26,30,.42); --gp-ink-45: rgba(25,26,30,.46); --gp-ink-50: rgba(25,26,30,.52); --gp-ink-55: rgba(25,26,30,.58); --gp-ink-60: rgba(25,26,30,.62); --gp-ink-65: rgba(25,26,30,.68); --gp-ink-70: rgba(25,26,30,.74); --gp-ink-85: rgba(25,26,30,.88); --gp-f055: #F6F7F9; --gp-f06: #F3F4F7; --gp-f07: #F3F4F7; --gp-f08: #EEF0F4; --gp-f09: #EEF0F4; --gp-f10: #EAECF1; --gp-f14: #E6E8EE; --gp-f16: #E2E5EB; --gp-f18: #DFE2E9; --gp-f20: #DCDFE7; --gp-ln1: #E8EAEF; --gp-ln2: #DEE1E8; --gp-ln3: #C8CCD6; --gp-solid: #1E2025; --gp-solid-ink: #FFFFFF; --gp-solid-hover: #2A2D33; --gp-accent: var(--pt-primary); --gp-accent-strong: var(--pt-primary); --gp-accent-glow: rgba(190,15,52,.18); --gp-accent-soft: rgba(190,15,52,.07); --gp-accent-line: rgba(190,15,52,.28); --gp-accent-dot: var(--pt-primary); --gp-backdrop: rgba(22,24,28,.36); --gp-ov-blur: blur(6px); --pt-shadow: 0 1px 2px rgba(22,26,34,.04), 0 10px 28px rgba(22,26,34,.05); --pt-shadow-lg: 0 24px 60px rgba(22,26,34,.16); --pt-font: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } [data-gp-theme="dark"] { --pt-bg: #101114; --pt-bg2: #16171C; --pt-surface: #1A1B21; --pt-glow: .12; --pt-sheen: inset 0 1px 0 rgba(255,255,255,.07); --pt-glass-a: rgba(42,46,54,.55); --pt-glass-b: rgba(16,18,22,.42); --pt-spec: rgba(255,255,255,.08); --pt-glass-shadow: 0 12px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04); --pt-primary: #D94560; --pt-primary-hover: #E25D75; --pt-ok: #4CCE9A; --pt-warn: #E0B25F; --pt-err: #EF7A73; --gp-ink: #F2F3F5; --gp-ink-40: rgba(242,243,245,.42); --gp-ink-45: rgba(242,243,245,.46); --gp-ink-50: rgba(242,243,245,.52); --gp-ink-55: rgba(242,243,245,.58); --gp-ink-60: rgba(242,243,245,.62); --gp-ink-65: rgba(242,243,245,.68); --gp-ink-70: rgba(242,243,245,.74); --gp-ink-85: rgba(242,243,245,.88); --gp-f055: rgba(255,255,255,.045); --gp-f06: rgba(255,255,255,.05); --gp-f07: rgba(255,255,255,.055); --gp-f08: rgba(255,255,255,.07); --gp-f09: rgba(255,255,255,.08); --gp-f10: rgba(255,255,255,.09); --gp-f14: rgba(255,255,255,.11); --gp-f16: rgba(255,255,255,.13); --gp-f18: rgba(255,255,255,.15); --gp-f20: rgba(255,255,255,.17); --gp-ln1: rgba(255,255,255,.09); --gp-ln2: rgba(255,255,255,.13); --gp-ln3: rgba(255,255,255,.24); --gp-solid: #F2F3F5; --gp-solid-ink: #131418; --gp-solid-hover: #FFFFFF; --gp-accent: var(--pt-primary); --gp-accent-strong: var(--pt-primary); --gp-accent-glow: rgba(217,69,96,.2); --gp-accent-soft: rgba(217,69,96,.1); --gp-accent-line: rgba(217,69,96,.32); --gp-accent-dot: var(--pt-primary); --gp-backdrop: rgba(8,9,12,.5); --gp-ov-blur: blur(6px); --pt-shadow: 0 1px 2px rgba(0,0,0,.25), 0 12px 30px rgba(0,0,0,.3); --pt-shadow-lg: 0 24px 60px rgba(0,0,0,.5); } /* ---------- Canvas + soft glow (always purple, never red) ---------- */ .gp-app { min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--pt-font); background: linear-gradient(170deg, var(--pt-bg) 0%, var(--pt-bg2) 100%); color: var(--gp-ink); } .gp-glows i:nth-child(1) { opacity: var(--pt-glow); background: radial-gradient(circle, #6658DD, transparent 70%); } .gp-glows i:nth-child(2) { opacity: calc(var(--pt-glow) * .8); background: radial-gradient(circle, #4F43B8, transparent 70%); } .gp-glows i:nth-child(3) { opacity: calc(var(--pt-glow) * .5); background: radial-gradient(circle, #8F83EA, transparent 70%); } /* ---------- Surfaces ---------- */ .gp-card, .gp-panel { background: color-mix(in srgb, var(--pt-surface) 78%, transparent); border: 1px solid var(--gp-ln1); border-radius: 16px; box-shadow: var(--pt-shadow), var(--pt-sheen); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); } .gp-card:hover { border-color: var(--gp-ln2); } .gp-modal { background: radial-gradient(140% 80% at 25% 0%, var(--pt-spec), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--pt-surface) 82%, transparent), color-mix(in srgb, var(--pt-surface) 62%, transparent)); border: 1px solid var(--gp-ln1); border-radius: 18px; box-shadow: var(--pt-shadow-lg), var(--pt-glass-shadow); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); color: var(--gp-ink); font-family: var(--pt-font); } .pt-card { padding: 16px; } .pt-card-lg { padding: 20px 18px; } /* ---------- Button system ---------- Four sizes, deliberately kept apart (the kit mixed 34/38/48/54px): .gp-btn normal button, 46px, neutral .gp-btn-cta flow CTA, 52px, full width, bordeaux — at most one per screen .gp-btn-row row action in a list card, 44px, dark gp-solid .gp-key icon key, 44px round All heights are min-height, so longer DE labels do not clip. */ .gp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; height: auto; padding: 11px 20px; border-radius: 12px; border: 1px solid transparent; background: var(--gp-f08); color: var(--gp-ink); font: 600 14px/1.3 var(--pt-font); text-align: center; text-decoration: none; box-shadow: none; cursor: pointer; transition: background .12s ease; } .gp-btn:hover { background: var(--gp-f14); transform: none; color: var(--gp-ink); } .gp-btn-cta { min-height: 52px; width: 100%; padding: 13px 24px; background: var(--pt-primary); border-color: transparent; color: #fff; font-size: 15px; box-shadow: 0 6px 18px var(--gp-accent-glow); } .gp-btn-cta:hover { background: var(--pt-primary-hover); color: #fff; } .gp-btn-row { min-height: 44px; padding: 10px 16px; font-size: 13px; background: var(--gp-solid); color: var(--gp-solid-ink); border-color: transparent; } .gp-btn-row:hover { background: var(--gp-solid-hover); color: var(--gp-solid-ink); } /* Anchor buttons: glass-ui pins `a.gp-btn` to the ink colour with higher specificity, which would put dark text on the accent CTA and on the dark row button — restate their own text colours above it. White-on-accent matches the mail buttons ('solid' style), which make the same assumption. */ .gp-app a.gp-btn-cta, .gp-app a.gp-btn-cta:hover { color: #fff; } .gp-app a.gp-btn-row, .gp-app a.gp-btn-row:hover { color: var(--gp-solid-ink); } .gp-btn-quiet { background: transparent; border-color: var(--gp-ln2); } .gp-btn-quiet:hover { background: var(--gp-f08); } .gp-btn-danger { color: var(--pt-err); } /* Real disabled state (the kit did this with inline opacity + pointer-events). */ .gp-btn[disabled], .gp-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .gp-btn[disabled]:hover { background: var(--gp-f08); } .gp-btn-cta[disabled]:hover { background: var(--pt-primary); } .gp-key { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--gp-ln1); color: var(--gp-ink-60); box-shadow: none; cursor: pointer; } .gp-key:hover { background: var(--gp-f08); color: var(--gp-ink); } .gp-key.active { background: var(--gp-f10); color: var(--gp-ink); } /* ---------- Keyboard focus (the kit had none) ---------- */ .gp-app a:focus-visible, .gp-btn:focus-visible, .gp-key:focus-visible, .gp-chip:focus-visible, .pt-navlink:focus-visible, .pt-tabbar a:focus-visible, .gp-segment .gp-seg:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--pt-primary); outline-offset: 2px; border-radius: 10px; } /* ---------- Choice chips ---------- */ .gp-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--pt-surface); border: 1px solid var(--gp-ln2); color: var(--gp-ink-65); font: 600 13px/1.2 var(--pt-font); box-shadow: none; cursor: pointer; transition: border-color .12s ease; } .gp-chip:hover { transform: none; border-color: var(--gp-ln3); } .gp-chip.active { background: var(--gp-solid); color: var(--gp-solid-ink); border-color: transparent; } .pt-chip-row { display: flex; flex-wrap: wrap; gap: 7px; } /* ---------- Status chips (a read cue, not an action) ---------- */ .pt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font: 600 11.5px/1.4 var(--pt-font); white-space: nowrap; } .pt-ok { color: var(--pt-ok); background: color-mix(in srgb, var(--pt-ok) 9%, transparent); border: 1px solid color-mix(in srgb, var(--pt-ok) 22%, transparent); } .pt-warn { color: var(--pt-warn); background: color-mix(in srgb, var(--pt-warn) 9%, transparent); border: 1px solid color-mix(in srgb, var(--pt-warn) 22%, transparent); } .pt-err { color: var(--pt-err); background: color-mix(in srgb, var(--pt-err) 9%, transparent); border: 1px solid color-mix(in srgb, var(--pt-err) 22%, transparent); } .pt-neutral { color: var(--gp-ink-60); background: var(--gp-f08); border: 1px solid var(--gp-ln1); } .pt-acc { color: var(--gp-ink-70); background: var(--gp-f08); border: 1px solid var(--gp-ln2); } /* ---------- Column layout (website feel) ---------- */ .pt-content { width: 100%; max-width: 720px; margin: 0 auto; padding: 26px 16px 112px; position: relative; display: flex; flex-direction: column; gap: 14px; } @media (min-width: 640px) { .pt-content { padding: 34px 32px 112px; } } @media (min-width: 820px) { .pt-content { padding-bottom: 80px; } } .pt-content--bare { padding-bottom: 64px; } .pt-h1 { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; margin: 0; } @media (min-width: 640px) { .pt-h1 { font-size: 28px; } } .pt-sub { font-size: 13.5px; color: var(--gp-ink-55); margin-top: 5px; line-height: 1.55; text-wrap: pretty; } .pt-section { font: 600 11.5px var(--pt-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--gp-ink-45); } .pt-section-spaced { display: block; margin-bottom: 12px; } .pt-back { display: inline-block; font: 500 12.5px var(--pt-font); color: var(--gp-ink-55); text-decoration: none; min-height: 44px; line-height: 44px; } .pt-muted { color: var(--gp-ink-50); } .pt-hint { font: 400 11.5px/1.5 var(--pt-font); color: var(--gp-ink-45); text-align: center; } .pt-full { width: 100%; } .pt-stack { display: flex; flex-direction: column; gap: 10px; } .pt-spread { display: flex; align-items: center; gap: 12px; } .pt-spread-top { align-items: flex-start; } .pt-spread-grow { flex: 1; min-width: 0; } .pt-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .pt-actions-spacer { flex: 1; } .pt-title { font: 600 15px/1.35 var(--pt-font); } .pt-meta { font: 400 12.5px/1.5 var(--pt-font); color: var(--gp-ink-50); margin-top: 3px; } .pt-amount { font: 700 15px var(--pt-font); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------- Label/value and lines ---------- */ .pt-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px) { .pt-grid { grid-template-columns: 1fr 1fr; } } .pt-label { font: 600 10.5px var(--pt-font); letter-spacing: 1.1px; text-transform: uppercase; color: var(--gp-ink-45); margin-bottom: 4px; } .pt-value { font: 500 15px/1.45 var(--pt-font); overflow-wrap: anywhere; } .pt-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gp-ln1); } .pt-line:first-child { border-top: none; padding-top: 0; } .pt-line-total { border-top: 1px solid var(--gp-ln2); } .pt-line-grow { flex: 1; min-width: 0; } .pt-line-name { font: 500 14px/1.4 var(--pt-font); } .pt-line-sub { font: 400 12px/1.45 var(--pt-font); color: var(--gp-ink-50); margin-top: 2px; } .pt-line-amount { font: 600 14px var(--pt-font); font-variant-numeric: tabular-nums; white-space: nowrap; } .pt-line-status { margin-top: 6px; } .pt-total-label { font: 600 14px var(--pt-font); } .pt-total-amount { font: 700 17px var(--pt-font); font-variant-numeric: tabular-nums; } /* ---------- Phase bar (bordeaux) ---------- */ .pt-fase { display: flex; gap: 5px; } .pt-fase i { flex: 1; height: 6px; border-radius: 3px; background: var(--gp-f10); } .pt-fase i.on { background: var(--pt-primary); } .pt-fase-label { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font: 400 12.5px var(--pt-font); color: var(--gp-ink-50); } .pt-fase-label b { font-weight: 600; color: var(--gp-ink); } /* ---------- Forms ---------- */ .pt-field { margin-bottom: 14px; } .pt-input { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 12px; background: var(--gp-f055); border: 1px solid var(--gp-ln2); } .pt-input input, .pt-input select { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--gp-ink); font: 400 16px var(--pt-font); } .pt-input input::placeholder { color: var(--gp-ink-45); } .pt-area { width: 100%; min-height: 88px; border-radius: 12px; border: 1px solid var(--gp-ln2); background: var(--gp-f055); color: var(--gp-ink); font: 400 16px/1.5 var(--pt-font); padding: 12px 16px; outline: none; resize: vertical; } .pt-input:focus-within, .pt-area:focus { border-color: var(--pt-primary); box-shadow: 0 0 0 3px var(--gp-accent-soft); } .pt-file { font: 400 14px var(--pt-font); color: var(--gp-ink-65); } /* ---------- Form feedback (meriad form.js) ---------- form.js marks the [data-meriad-entity="form-field"] element .is-invalid and fills the matching feedback list with .invalid-feedback, showing and hiding it inline. The library's own form.css is deliberately not loaded (see libraries.php): it dresses both for a Bootstrap input, and the portal carries no Bootstrap. So the glass surfaces keep their shape here and only their border turns red. */ [data-meriad-entity="form-feedback"], [data-meriad-entity="form-field-feedback"] { display: none; margin: 0; padding: 0; list-style: none; } [data-meriad-entity="form-feedback"] li, [data-meriad-entity="form-field-feedback"] li { list-style: none; } /* Een weigering die niet bij één veld hoort krijgt hetzelfde getinte blok als de pt-err chip: kale rode tekst onder een lange kaart leest als een crash, een omkaderde melding als een antwoord. */ [data-meriad-entity="form-feedback"].invalid-feedback { margin-top: 12px; padding: 10px 14px; border-radius: 12px; font: 500 13px/1.5 var(--pt-font); color: var(--pt-err); background: color-mix(in srgb, var(--pt-err) 9%, transparent); border: 1px solid color-mix(in srgb, var(--pt-err) 22%, transparent); } /* Per-field feedback under the field itself; the negative top margin eats part of the .pt-field gap so the message visually hangs at its own field. */ [data-meriad-entity="form-field-feedback"].invalid-feedback { margin: -8px 0 14px; font: 500 12px/1.5 var(--pt-font); color: var(--pt-err); } .pt-input.is-invalid, .pt-area.is-invalid, .pt-canvas.is-invalid { border-color: var(--pt-err); } .pt-consent.is-invalid span { color: var(--pt-err); } .pt-notice { margin-top: 10px; font: 400 13px/1.55 var(--pt-font); color: var(--gp-ink-65); } .pt-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; cursor: pointer; padding: 10px 0; } .pt-consent input { width: 19px; height: 19px; margin-top: 1px; accent-color: var(--pt-primary); flex-shrink: 0; } .pt-consent span { font: 400 13px/1.55 var(--pt-font); color: var(--gp-ink-65); } /* ---------- Segmented control ---------- */ .gp-segment { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--gp-f06); border: 1px solid var(--gp-ln1); } .gp-segment .gp-seg { min-height: 36px; padding: 8px 18px; border: none; border-radius: 999px; background: transparent; color: var(--gp-ink-60); font: 600 12px/1 var(--pt-font); cursor: pointer; } .gp-segment .gp-seg.active { background: var(--gp-solid); color: var(--gp-solid-ink); } /* ---------- Navigation: floating glass header pill ---------- */ .pt-head { position: sticky; top: 10px; z-index: 45; width: calc(100% - 24px); max-width: 720px; margin: 12px auto 0; border-radius: 999px; background: radial-gradient(130% 100% at 18% 0%, var(--pt-spec), transparent 55%), linear-gradient(165deg, var(--pt-glass-a), var(--pt-glass-b)); backdrop-filter: blur(30px) saturate(1.9); -webkit-backdrop-filter: blur(30px) saturate(1.9); border: 1px solid var(--gp-ln1); box-shadow: var(--pt-glass-shadow); } .pt-head-in { padding: 0 8px 0 16px; display: flex; align-items: center; gap: 6px; min-height: 60px; } .pt-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--gp-ink); margin-right: 4px; min-width: 0; } .pt-brand-name { font: 700 14px var(--pt-font); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-head-spacer { flex: 1; } .pt-head-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } /* Desktop navigation only appears at 820px, so the pill never has to clip. */ .pt-nav-desktop { display: none; } .pt-navlink { text-decoration: none; font: 500 12.5px/1 var(--pt-font); color: var(--gp-ink-55); padding: 10px 9px; border-radius: 8px; white-space: nowrap; } .pt-navlink:hover { color: var(--gp-ink); } .pt-navlink.active { color: var(--gp-ink); font-weight: 600; } /* Bottom tab bar (up to 819px) */ .pt-tabbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 46; border-radius: 999px; background: radial-gradient(130% 120% at 20% 0%, var(--pt-spec), transparent 55%), linear-gradient(165deg, var(--pt-glass-a), var(--pt-glass-b)); backdrop-filter: blur(30px) saturate(1.9); -webkit-backdrop-filter: blur(30px) saturate(1.9); border: 1px solid var(--gp-ln1); box-shadow: 0 18px 44px rgba(10,14,22,.22), var(--pt-glass-shadow); display: flex; gap: 2px; padding: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); } .pt-tabbar a { flex: 1 1 0; min-width: 0; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; border-radius: 999px; text-decoration: none; color: var(--gp-ink-50); font: 600 9.5px var(--pt-font); } .pt-tabbar a.active { color: var(--pt-primary); } /* "Bestellingen" does not fit at 360px and DE labels are longer still. */ .pt-tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 380px) { .pt-tabbar a span { font-size: 8.5px; } } /* The nav swaps purely via CSS — the server renders both variants. */ @media (min-width: 820px) { .pt-nav-desktop { display: flex; gap: 1px; flex: 1; min-width: 0; } .pt-tabbar { display: none; } } /* ---------- Dashboard tiles ---------- */ .pt-tiles { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 640px) { .pt-tiles { grid-template-columns: 1fr 1fr; } } .pt-tile { display: flex; flex-direction: column; gap: 10px; min-height: 132px; padding: 18px 16px; text-decoration: none; color: var(--gp-ink); } .pt-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pt-tile-body { margin-top: auto; } .pt-tile-chip { margin-top: 9px; } /* ---------- List cards ---------- */ .pt-row-card { display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none; color: var(--gp-ink); } .pt-row-chevron { color: var(--gp-ink-40); flex-shrink: 0; display: inline-flex; } /* ---------- Signature box ---------- */ .pt-canvas { border: 1px dashed var(--gp-ln3); border-radius: 12px; background: var(--gp-f055); overflow: hidden; } .pt-canvas canvas { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; } /* ---------- Photos and signature evidence ---------- */ .pt-photos { display: flex; flex-wrap: wrap; gap: 8px; } .pt-photo { width: 88px; height: 88px; border-radius: 12px; overflow: hidden; border: 1px solid var(--gp-ln1); background: var(--gp-f08); display: block; } .pt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .pt-signature { max-width: 260px; border: 1px solid var(--gp-ln1); border-radius: 12px; background: #fff; padding: 8px; } .pt-signature img { width: 100%; display: block; } /* ---------- Empty state ---------- */ .pt-empty { padding: 22px 16px; text-align: center; font: 400 13.5px/1.6 var(--pt-font); color: var(--gp-ink-55); } /* ---------- Searchable dropdown (service order picker, vanilla JS) ---------- */ .pt-picker-list { margin-top: 8px; max-height: 260px; overflow-y: auto; border: 1px solid var(--gp-ln2); border-radius: 12px; } .pt-picker-option { display: block; width: 100%; text-align: left; padding: 12px 16px; min-height: 46px; background: transparent; border: none; border-bottom: 1px solid var(--gp-ln1); color: var(--gp-ink); font: 500 14px/1.4 var(--pt-font); cursor: pointer; } .pt-picker-option:last-child { border-bottom: none; } .pt-picker-option:hover, .pt-picker-option.active { background: var(--gp-f08); } .pt-picker-option span { display: block; font: 400 12px var(--pt-font); color: var(--gp-ink-50); margin-top: 2px; } /* ---------- Language choice below the login card ---------- */ .pt-languages { display: flex; justify-content: center; gap: 4px; margin-top: 14px; } .pt-languages a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; font: 500 12px var(--pt-font); color: var(--gp-ink-50); text-decoration: none; } .pt-languages a.active { color: var(--gp-ink); font-weight: 600; } /* ---------- Login screen ---------- */ .pt-login { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px; position: relative; } .pt-login-inner { position: relative; width: 100%; max-width: 400px; } .pt-login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; } .pt-login-brand span { font: 700 17px var(--pt-font); letter-spacing: -0.01em; color: var(--gp-ink); } .pt-login-card { padding: 26px 24px; } .pt-login-title { font: 600 18px var(--pt-font); } .pt-login-intro { font: 400 13px/1.55 var(--pt-font); color: var(--gp-ink-55); margin: 4px 0 18px; } /* Portal-uit-melding: centered, and the closing paragraph must not stack its own bottom margin on top of the card padding. */ .pt-login-notice { text-align: center; } .pt-login-intro:last-child { margin-bottom: 0; } .pt-linkbutton { background: none; border: none; color: var(--gp-ink-55); font: 500 13px var(--pt-font); margin: 14px auto; display: block; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .pt-login-foot { text-align: center; font: 400 11px/1.6 var(--pt-font); color: var(--gp-ink-40); margin-top: 14px; } /* ---------- Confirmation state ---------- */ .pt-confirm { padding: 30px 24px; text-align: center; } .pt-confirm-icon { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gp-solid); color: var(--gp-solid-ink); box-shadow: 0 8px 28px var(--gp-accent-glow); } .pt-confirm-title { font: 600 16px var(--pt-font); } .pt-confirm-text { font: 400 13px/1.6 var(--pt-font); color: var(--gp-ink-55); margin-top: 6px; } .pt-hidden { display: none !important; } /* ---------- Microinteractions ---------- */ @keyframes pt-pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } .pt-pop { animation: pt-pop .22s ease; } /* Calm rendering: no drift, no pop, and a lighter blur on the orbs — three animated blur(90px) surfaces are heavy on cheap phones. */ @media (prefers-reduced-motion: reduce) { .gp-glows i { animation: none !important; filter: blur(60px); } .gp-app *, .gp-app *::before, .gp-app *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ---------- SweetAlert2 (meriad popup.js / toast.js) ---------- The framework reports every server error and confirmation through SweetAlert. popup.js hands it Bootstrap button classes (buttonsStyling false) and the portal ships no Bootstrap, so the surface and its buttons are dressed here instead: gp-modal glass, Sora and gp-btn pills. The tokens live on :root, so they reach the swal container even though it is appended outside .gp-app. The library CSS is prepended into by index.tpl, which puts this file after it in the cascade. */ .swal2-container.swal2-backdrop-show { background: var(--gp-backdrop); backdrop-filter: var(--gp-ov-blur); -webkit-backdrop-filter: var(--gp-ov-blur); } .swal2-popup { border-radius: 28px; border: 1px solid var(--gp-ln2); background: radial-gradient(140% 60% at 30% 0%, var(--gp-spec2), transparent 55%), linear-gradient(165deg, var(--gp-mod-a), var(--gp-mod-b)); backdrop-filter: var(--gp-blur); -webkit-backdrop-filter: var(--gp-blur); box-shadow: var(--gp-card-shadow-big); color: var(--gp-ink); font-family: var(--pt-font); } .swal2-title { color: var(--gp-ink); font: 600 20px/1.3 var(--pt-font); letter-spacing: -0.02em; } .swal2-html-container { color: var(--gp-ink-65); font: 400 14px/1.5 var(--pt-font); } .swal2-timer-progress-bar { background: var(--gp-ink-40); } .swal2-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--gp-f07); border: 1px solid var(--gp-ln1); color: var(--gp-ink); font: 600 14px/1 var(--pt-font); box-shadow: var(--gp-btn-shadow); transition: transform .12s ease, background .12s ease; } .swal2-actions .btn:hover { background: var(--gp-f16); color: var(--gp-ink); transform: translateY(-1px); } /* Confirm/OK buttons (btn-primary / btn-success) become the solid CTA */ .swal2-actions .btn-primary, .swal2-actions .btn-success { background: var(--gp-solid); border-color: transparent; color: var(--gp-solid-ink); box-shadow: 0 6px 24px var(--gp-accent-glow), inset 0 1px 0 rgba(255,255,255,.8); } .swal2-actions .btn-primary:hover, .swal2-actions .btn-success:hover { background: var(--gp-solid-hover); color: var(--gp-solid-ink); transform: none; } /* Cancel button (btn-danger) stays a ghost pill with a red tint */ .swal2-actions .btn-danger { border-color: color-mix(in srgb, var(--pt-err) 45%, transparent); background: color-mix(in srgb, var(--pt-err) 14%, transparent); color: var(--gp-ink); } .swal2-actions .btn-danger:hover { background: color-mix(in srgb, var(--pt-err) 24%, transparent); color: var(--gp-ink); } .swal2-icon.swal2-warning { border-color: color-mix(in srgb, var(--pt-warn) 55%, transparent); color: var(--pt-warn); } .swal2-icon.swal2-info, .swal2-icon.swal2-question { border-color: var(--gp-ln3); color: var(--gp-ink-60); } .swal2-icon.swal2-error { border-color: color-mix(in srgb, var(--pt-err) 55%, transparent); } .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--pt-err); } .swal2-icon.swal2-success { border-color: color-mix(in srgb, var(--pt-ok) 55%, transparent); color: var(--pt-ok); } .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--pt-ok); } .swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--pt-ok) 40%, transparent); } /* The success icon's masking shapes default to white — an invisible mask on glass */ .swal2-icon.swal2-success .swal2-success-fix, .swal2-icon.swal2-success [class^='swal2-success-circular-line'] { background: transparent; } /* Toasts (meriad toast.js — swal2 toast mode): toast.css resolves --theme-* tokens with swal fallbacks by design, so feed it the glass values, scoped to the toast so nothing else picks up the UBold token namespace. The background shorthand also overrides toast.css's white background-color. */ .swal2-container .swal2-popup.swal2-toast { --theme-border-color: var(--gp-ln2); --theme-border-radius: 18px; --theme-secondary-color: var(--gp-ink-60); --theme-font-weight-medium: 600; --theme-success: var(--pt-ok); --theme-danger: var(--pt-err); --theme-warning: var(--pt-warn); --theme-info: var(--gp-ink-60); background: linear-gradient(180deg, var(--gp-spec), transparent 45%), linear-gradient(165deg, var(--gp-mod-a), var(--gp-mod-b)); backdrop-filter: var(--gp-blur); -webkit-backdrop-filter: var(--gp-blur); color: var(--gp-ink); } .swal2-container .swal2-popup.swal2-toast .swal2-actions .btn { min-height: 34px; padding: 9px 16px; font-size: 12px; } /* Icon source: the portal ships no icon font — everything else on these pages is inline SVG. toast.js however renders its glyphs as Tabler icon-font classes (), so the four glyphs it uses are drawn here as SVG masks in currentColor. The shared toast.js copy stays untouched. */ .swal2-icon .ti { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .swal2-icon .ti.ti-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E"); } .swal2-icon .ti.ti-x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E"); } .swal2-icon .ti.ti-exclamation-mark { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19v.01'/%3E%3Cpath d='M12 15v-10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19v.01'/%3E%3Cpath d='M12 15v-10'/%3E%3C/svg%3E"); } .swal2-icon .ti.ti-info-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E"); }