/* ---------------------------------------------------------------- fonts -- Self-hosted so the app renders on a bad mobile connection without waiting on a third party. Both faces are SIL OFL 1.1 — see fonts/README.md. */ @font-face { font-family: 'Bricolage'; src: url('fonts/bricolage-var.woff2') format('woff2-variations'); font-weight: 200 800; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url('fonts/plexmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url('fonts/plexmono-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } /* ---------------------------------------------------------------- tokens -- */ :root { --ink: #0a0b0d; --slab: #16181d; --slab-high: #1d2027; --edge: rgba(255, 255, 255, 0.09); --edge-bright: rgba(255, 255, 255, 0.18); --text: #f4f5f7; --muted: #878d99; --faint: #575d68; --idle: #ffb340; --live: #5ef2a0; --alarm: #ff5f45; --ams: #ec0000; /* The signal colour swaps with parking state; everything accent-coloured reads from these two, so one class on re-themes the whole app. */ --signal: var(--idle); --signal-dim: rgba(255, 179, 64, 0.14); --radius: 18px; --pad: 20px; --mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --display: 'Bricolage', 'Helvetica Neue', sans-serif; --top: env(safe-area-inset-top, 0px); --bottom: env(safe-area-inset-bottom, 0px); /* The three St Andrew's crosses off Amsterdam's flag. */ --crosses: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 180'%3E%3Cg fill='%23fff'%3E%3Crect x='24.5' y='12' width='11' height='36' transform='rotate(45 30 30)'/%3E%3Crect x='24.5' y='12' width='11' height='36' transform='rotate(-45 30 30)'/%3E%3Crect x='24.5' y='72' width='11' height='36' transform='rotate(45 30 90)'/%3E%3Crect x='24.5' y='72' width='11' height='36' transform='rotate(-45 30 90)'/%3E%3Crect x='24.5' y='132' width='11' height='36' transform='rotate(45 30 150)'/%3E%3Crect x='24.5' y='132' width='11' height='36' transform='rotate(-45 30 150)'/%3E%3C/g%3E%3C/svg%3E"); } body.is-parked { --signal: var(--live); --signal-dim: rgba(94, 242, 160, 0.14); } body.is-expiring { --signal: var(--alarm); --signal-dim: rgba(255, 95, 69, 0.16); } /* ----------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--ink); -webkit-text-size-adjust: 100%; } body { min-height: 100dvh; font-family: var(--mono); color: var(--text); background: radial-gradient(120% 60% at 50% -10%, var(--signal-dim), transparent 70%), var(--ink); transition: background 600ms ease; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } /* Faint diagonal hatching, like the paint on a parking bay. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5; background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 9px ); } button, input, select { font: inherit; color: inherit; } button { border: 0; background: none; cursor: pointer; } /* ----------------------------------------------------------------- shell -- */ .shell { position: relative; z-index: 1; min-height: 100dvh; max-width: 32rem; margin: 0 auto; padding: calc(var(--top) + 14px) 16px calc(var(--bottom) + 22px); display: flex; flex-direction: column; gap: 14px; } /* --------------------------------------------------------------- top bar -- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; } .wordmark { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .wordmark .crosses { display: block; width: 13px; color: var(--ams); } .balance { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 13px; border: 1px solid var(--edge); border-radius: 999px; background: var(--slab); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .balance span { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } /* ----------------------------------------------------------------- meter -- The hero slab. Notched top edge so it reads as a torn-off parking ticket. */ .meter { position: relative; border-radius: var(--radius); border: 1px solid var(--edge); background: linear-gradient(180deg, var(--slab-high), var(--slab)); padding: 26px var(--pad) var(--pad); overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px -30px rgba(0, 0, 0, 0.9); animation: rise 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } .meter::before { content: ''; position: absolute; inset: 0 0 auto; height: 10px; background: radial-gradient(circle at 5px 0, var(--ink) 4.5px, transparent 5px) repeat-x; background-size: 14px 10px; } .meter > * { position: relative; } .label { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); } .state { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--signal); } .lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 var(--signal); } body.is-parked .lamp { animation: pulse 2.4s ease-out infinite; } /* --------------------------------------------------------------- readout -- */ .readout { margin: 14px 0 6px; } .clock { font-family: var(--display); font-variation-settings: 'opsz' 96; font-weight: 800; font-size: clamp(60px, 22vw, 92px); line-height: 0.86; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--signal); text-shadow: 0 0 44px var(--signal-dim); transition: color 400ms ease; } .clock small { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 0.06em; } body.is-expiring .clock { animation: throb 1.6s ease-in-out infinite; } /* Idle has nothing to count, so the readout steps aside for the pickers — the start button has to stay above the fold on a small phone. */ body:not(.is-parked) .readout { margin: 6px 0 0; } body:not(.is-parked) .clock { font-size: clamp(40px, 13vw, 50px); font-variation-settings: 'opsz' 40; } .plate-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } /* The yellow NL licence plate, because nothing else says "this car". */ .plate { display: inline-block; padding: 5px 11px; border-radius: 5px; background: #f6c700; color: #0a0b0d; font-weight: 600; font-size: 16px; letter-spacing: 0.09em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); } .zone { font-size: 12px; color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Receipt-style rows with dotted leaders. */ .rows { margin-top: 18px; border-top: 1px dashed var(--edge); padding-top: 4px; } .row { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; font-size: 13px; } .row + .row { border-top: 1px solid rgba(255, 255, 255, 0.045); } .row dt { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } .row .leader { flex: 1; border-bottom: 1px dotted rgba(255, 255, 255, 0.13); transform: translateY(-3px); } .row dd { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* --------------------------------------------------------------- pickers -- */ .picker { margin-top: 16px; } .picker + .picker { margin-top: 16px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; } /* Ten saved plates would be four wrapped rows. One swipeable row instead, faded at the right edge so it is obvious there is more. */ .chips.strip { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); } .chips.strip::-webkit-scrollbar { display: none; } .chips.strip .chip { flex: 0 0 auto; scroll-snap-align: start; } .chip { padding: 10px 14px; border: 1px solid var(--edge); border-radius: 11px; background: rgba(255, 255, 255, 0.025); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); transition: transform 120ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease; } .chip:active { transform: scale(0.96); } .chip[aria-pressed='true'] { border-color: var(--signal); background: var(--signal-dim); color: var(--text); } .chip .sub { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 2px; } .chip[aria-pressed='true'] .sub { color: var(--muted); } input[type='text'], input[type='time'], input[type='password'] { width: 100%; padding: 13px 15px; border: 1px solid var(--edge); border-radius: 11px; background: rgba(0, 0, 0, 0.28); /* 16px keeps iOS from zooming the viewport on focus. */ font-size: 16px; letter-spacing: 0.08em; outline: none; transition: border-color 160ms ease; } input:focus-visible { border-color: var(--signal); } input::placeholder { color: var(--faint); letter-spacing: 0.04em; } .spaced { margin-top: 9px; } .hidden { display: none !important; } /* --------------------------------------------------------------- actions -- */ .actions { display: flex; gap: 10px; margin-top: 18px; } .btn { position: relative; flex: 1; padding: 18px 16px; border-radius: 13px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: 0.05em; text-transform: uppercase; transition: transform 120ms ease, filter 160ms ease, opacity 160ms ease; } .btn:active { transform: scale(0.975); } .btn-primary { background: var(--signal); color: #0a0b0d; box-shadow: 0 12px 30px -14px var(--signal); } .btn-ghost { flex: 0 0 auto; padding: 18px 18px; border: 1px solid var(--edge-bright); background: rgba(255, 255, 255, 0.03); color: var(--text); font-size: 14px; } .btn[disabled] { opacity: 0.45; pointer-events: none; } .btn.busy { color: transparent; } .btn.busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px; border: 2px solid rgba(10, 11, 13, 0.3); border-top-color: #0a0b0d; border-radius: 50%; animation: spin 700ms linear infinite; } .btn-ghost.busy::after { border-color: rgba(255, 255, 255, 0.25); border-top-color: #fff; } /* --------------------------------------------------------------- history -- */ .history { border-radius: var(--radius); border: 1px solid var(--edge); background: var(--slab); padding: 16px var(--pad); animation: rise 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both; } .history summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .history summary::-webkit-details-marker { display: none; } .history summary .caret { transition: transform 240ms ease; color: var(--faint); } .history[open] summary .caret { transform: rotate(180deg); } .trips { margin-top: 6px; } .trip { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.045); font-size: 12.5px; } .trip time { color: var(--muted); font-variant-numeric: tabular-nums; } .trip .who { font-weight: 600; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trip .amount { font-variant-numeric: tabular-nums; color: var(--muted); } .trip.live .amount { color: var(--live); } /* ----------------------------------------------------------------- misc -- */ .footer { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; padding: 2px 6px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } .footer button { color: var(--faint); letter-spacing: inherit; font-size: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 3px; } .skeleton { color: transparent; background: linear-gradient(90deg, var(--slab-high), #262a32, var(--slab-high)); background-size: 200% 100%; border-radius: 6px; animation: sweep 1.4s ease-in-out infinite; } /* Toast: the only place the app reports what an action cost. */ .toast { position: fixed; left: 50%; bottom: calc(var(--bottom) + 22px); z-index: 20; width: min(28rem, calc(100vw - 32px)); transform: translate(-50%, 140%); padding: 14px 16px; border-radius: 13px; border: 1px solid var(--edge-bright); background: #22262e; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.95); font-size: 13px; line-height: 1.45; transition: transform 420ms cubic-bezier(0.2, 0.9, 0.25, 1); } .toast.show { transform: translate(-50%, 0); } .toast.bad { border-color: rgba(255, 95, 69, 0.5); } .toast strong { display: block; font-family: var(--display); font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 3px; } .toast.bad strong { color: var(--alarm); } /* ----------------------------------------------------------------- login -- */ .gate { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 20px; max-width: 22rem; margin: 0 auto; padding: calc(var(--top) + 32px) 22px calc(var(--bottom) + 32px); position: relative; z-index: 1; } .gate h1 { font-family: var(--display); font-variation-settings: 'opsz' 40; font-weight: 800; font-size: 34px; line-height: 1.02; letter-spacing: -0.035em; } .gate p { font-size: 12.5px; line-height: 1.6; color: var(--muted); } .gate .crosses { width: 40px; color: var(--ams); } .gate form { display: flex; flex-direction: column; gap: 10px; } .error { font-size: 12.5px; color: var(--alarm); min-height: 1.2em; } /* ------------------------------------------------------------ animations -- */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--signal-dim); } 70% { box-shadow: 0 0 0 11px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes throb { 50% { opacity: 0.6; } } @keyframes sweep { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }