/* ============================================================ treiner — railway signalling aesthetic The red/yellow/green light system IS the brand. ============================================================ */ :root { --bg: #0e1116; /* night platform */ --bg-raise: #161b22; --bg-card: #1c232d; --ink: #ffffff; --ink-dim: #c8d4de; --ink-faint: #a0b0be; --line: #2a323d; --signal-red: #ff3b30; --signal-yellow: #ffcc00; /* NS-ish yellow — used for the brand light dots */ --signal-green: #34c759; /* yellow used as TEXT (warnings, dormant, platform). Same bright yellow on the dark theme; the light theme darkens it for readability on white. */ --warn-text: var(--signal-yellow); --accent: #ffcc00; --radius: 14px; --radius-sm: 9px; --mono: 'Outfit', 'Space Mono', ui-monospace, monospace; --disp: 'Outfit', Georgia, 'Times New Roman', serif; } /* light theme — applied when */ :root[data-theme="light"] { --bg: #f4f6f8; /* daytime platform */ --bg-raise: #ffffff; --bg-card: #ffffff; --ink: #1a2028; --ink-dim: #3d4d5c; --ink-faint: #6b7888; --line: #dce1e7; /* signals stay vivid; accent text on yellow needs to remain dark (already #1a1a1a) */ --signal-red: #e0352b; --signal-green: #2aa84a; --accent: #f5b800; /* yellow-as-text was too light on the white cards — darken to a deep amber that still reads as the signal colour but has real contrast. */ --warn-text: #a87800; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 20px; line-height: 1.5; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } body { max-width: 480px; margin: 0 auto; min-height: 100vh; background: radial-gradient(900px 400px at 80% -5%, rgba(255,204,0,.06), transparent 60%), var(--bg); padding-bottom: 78px; } .hidden { display: none !important; } /* ---------- typography ---------- */ h1, h2, h3 { font-family: var(--disp); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } h1 { font-size: 2.1rem; } h2 { font-size: 1.4rem; margin-bottom: .2rem; } .mono-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } /* ---------- view container ---------- */ .view { padding: 22px 18px 8px; animation: fade .25s ease; } .view.padded-top { padding-top: 54px; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---------- brand / logo ---------- */ .brand { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; } .brand-lights { display: flex; flex-direction: column; gap: 3px; background: #000; padding: 5px; border-radius: 20px; border: 2px solid #2a323d; } .brand-lights i { width: 9px; height: 9px; border-radius: 50%; display: block; opacity: .25; } .brand-lights i.r { background: var(--signal-red); } .brand-lights i.y { background: var(--signal-yellow); } .brand-lights i.g { background: var(--signal-green); opacity: 1; box-shadow: 0 0 9px var(--signal-green); } .brand h1 { font-size: 1.9rem; } .brand .nl { color: var(--accent); } /* ---------- signal dot (the light system) ---------- */ .signal { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; } .signal.red { background: var(--signal-red); box-shadow: 0 0 7px rgba(255,59,48,.7); } .signal.yellow { background: var(--signal-yellow); box-shadow: 0 0 7px rgba(255,204,0,.7); } .signal.green { background: var(--signal-green); box-shadow: 0 0 7px rgba(52,199,89,.7); } .signal.self { background: var(--ink-faint); } /* ---------- cards ---------- */ .card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; margin-bottom: 12px; } .card.tap { cursor: pointer; transition: border-color .15s, transform .1s; } .card.tap:active { transform: scale(.99); } .card.tap:hover { border-color: #3a444f; } .person { display: flex; align-items: center; gap: 12px; } .person .meta { flex: 1; min-width: 0; } .person .name { font-weight: 700; display: flex; align-items: center; gap: 8px; } .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .tag { font-size: .7rem; padding: 3px 9px; border-radius: 20px; background: rgba(255,204,0,.1); color: var(--accent); border: 1px solid rgba(255,204,0,.25); } .tag.shared { background: rgba(52,199,89,.14); color: var(--signal-green); border-color: rgba(52,199,89,.35); } .lfc { font-size: .68rem; color: var(--signal-green); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; } .avatar { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg,#2a323d,#1c232d); display: grid; place-items: center; font-family: var(--disp); font-size: 1.2rem; color: var(--ink-dim); flex: none; overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* ---------- presence bar ---------- */ .presence-bar { background: linear-gradient(180deg, var(--bg-raise), var(--bg-card)); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; margin-bottom: 18px; } .presence-train { font-weight: 700; display: flex; align-items: center; gap: 8px; } .presence-coupe { color: var(--ink-dim); font-size: .82rem; margin-top: 2px; } .presence-controls { display: flex; gap: 7px; margin-top: 12px; } .seg { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 3px; gap: 2px; flex: 1; } .seg button { flex: 1; border: none; background: none; color: var(--ink-dim); font-family: var(--mono); font-size: .72rem; padding: 6px 4px; border-radius: 16px; cursor: pointer; transition: .15s; } .seg button.on { background: var(--accent); color: #1a1a1a; font-weight: 700; } .lfc-toggle { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); } .switch { position: relative; width: 46px; height: 26px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 30px; transition: .2s; cursor: pointer; } .switch .slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--ink-dim); border-radius: 50%; transition: .2s; } .switch input:checked + .slider { background: rgba(52,199,89,.25); border-color: var(--signal-green); } .switch input:checked + .slider::before { transform: translateX(20px); background: var(--signal-green); } /* ---------- buttons ---------- */ .btn { font-family: var(--mono); font-weight: 700; border: none; border-radius: var(--radius-sm); padding: 13px 18px; cursor: pointer; font-size: .9rem; width: 100%; transition: transform .1s, opacity .15s; } .btn:active { transform: scale(.98); } .btn-primary { background: var(--accent); color: #1a1a1a; } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn-danger { background: rgba(255,59,48,.14); color: var(--signal-red); border: 1px solid rgba(255,59,48,.4); } .btn-green { background: rgba(52,199,89,.16); color: var(--signal-green); border: 1px solid rgba(52,199,89,.45); } .btn-row { display: flex; gap: 8px; } .btn-row .btn { width: auto; flex: 1; } .btn.sm { padding: 8px 12px; font-size: .76rem; width: auto; } /* ---------- inputs ---------- */ .field { margin-bottom: 13px; } .field label { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; } .field input, .field textarea, .field select { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; color: var(--ink); font-family: var(--mono); font-size: .92rem; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); } .field textarea { resize: vertical; min-height: 70px; } /* ---------- tabbar ---------- */ .tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; display: flex; background: rgba(14,17,22,.92); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); z-index: 50; } .tab { flex: 1; background: none; border: none; color: var(--ink-faint); font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px; cursor: pointer; } .tab-ico { font-size: .95rem; position: relative; display: inline-block; } .tab.active { color: var(--accent); } /* ---------- messages list ---------- */ .thread { display: flex; align-items: center; gap: 12px; } .thread.dormant { opacity: .55; } .thread .meta { flex: 1; min-width: 0; } .thread .preview { color: var(--ink-dim); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dormant-badge { font-size: .62rem; color: var(--warn-text); letter-spacing: .08em; text-transform: uppercase; } .reopen-badge { font-size: .62rem; color: var(--signal-green); letter-spacing: .06em; } .reopen-banner { border-color: rgba(52,199,89,.45); background: linear-gradient(180deg, rgba(52,199,89,.10), var(--bg-card)); margin-bottom: 16px; } .reopen-banner .name { color: var(--signal-green); } .reopen-banner .preview { color: var(--ink-dim); font-size: .8rem; margin-top: 3px; white-space: normal; } /* ---------- chat ---------- */ .chat-wrap { display: flex; flex-direction: column; position: fixed; inset: 0; background: var(--bg); max-width: 480px; margin: 0 auto; } .chat-head { display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px; border-bottom: 1px solid var(--line); background: var(--bg); z-index: 10; flex: none; } .chat-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .bubble { max-width: 78%; padding: 9px 13px; border-radius: 15px; font-size: .9rem; } .bubble.me { align-self: flex-end; background: var(--accent); color: #1a1a1a; border-bottom-right-radius: 4px; } .bubble.them { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .bubble .who { font-size: .64rem; opacity: .7; margin-bottom: 2px; } .bubble .time { display: block; font-size: .62rem; opacity: .6; margin-top: 3px; text-align: right; } .bubble.them .time { text-align: left; } .day-sep { align-self: center; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 10px 0 4px; } .chat-input { display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); flex: none; } .chat-input input { flex: 1; background: var(--bg-card); border: 1px solid var(--line); border-radius: 22px; padding: 11px 16px; color: var(--ink); font-family: var(--mono); } .chat-input input:focus { outline: none; border-color: var(--accent); } .chat-input button { background: var(--accent); color: #1a1a1a; border: none; border-radius: 50%; width: 44px; height: 44px; font-size: 1.1rem; cursor: pointer; flex: none; } .chat-input .btn-icon { background: var(--bg-card); border: 1px solid var(--line); color: var(--ink); font-size: 1.2rem; } .chat-img { display: block; max-width: 220px; max-height: 280px; border-radius: 10px; margin-bottom: 4px; cursor: pointer; } .bubble.me .chat-img { border-radius: 12px 12px 4px 12px; } .bubble.them .chat-img { border-radius: 12px 12px 12px 4px; } .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; display: flex; align-items: center; justify-content: center; cursor: zoom-out; } .lightbox img { max-width: 95vw; max-height: 95vh; border-radius: 6px; object-fit: contain; } .dormant-note { text-align: center; color: var(--warn-text); font-size: .78rem; padding: 10px; background: rgba(255,204,0,.07); border-radius: 10px; margin: 10px 18px; } /* ---------- request review ---------- */ .request-full { text-align: center; padding: 8px 0 4px; } .request-full .big-avatar { width: 96px; height: 96px; border-radius: 22px; margin: 0 auto 12px; } .expose-warn { background: rgba(255,204,0,.08); border: 1px solid rgba(255,204,0,.3); border-radius: 11px; padding: 12px; font-size: .8rem; color: var(--warn-text); margin-bottom: 14px; line-height: 1.45; } /* ---------- modal ---------- */ .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: grid; place-items: center; z-index: 100; padding: 24px; animation: fade .2s; overflow-y: auto; } .modal { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; max-width: 380px; width: 100%; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; } .modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--ink-dim); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 4px; } .modal h3 { margin-bottom: 10px; } .modal p { color: var(--ink-dim); font-size: .88rem; margin-bottom: 16px; line-height: 1.5; } /* keep station-search results and departures from pushing the action buttons off-screen */ #sp-station-list { max-height: 38vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } #sp-departures { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } #jr-stops { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ---------- toast ---------- */ .toast { position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-raise); border: 1px solid var(--line); color: var(--ink); padding: 11px 18px; border-radius: 24px; font-size: .82rem; opacity: 0; pointer-events: none; transition: .25s; z-index: 200; max-width: 90%; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- misc ---------- */ .section-title { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; } .empty { text-align: center; color: var(--ink-faint); padding: 36px 20px; font-size: .85rem; line-height: 1.6; } .empty .big { font-size: 2rem; display: block; margin-bottom: 8px; opacity: .5; } .divider-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 18px 0 8px; } .legend { display: flex; gap: 16px; justify-content: center; padding: 10px; font-size: .68rem; color: var(--ink-dim); } .legend span { display: flex; align-items: center; gap: 5px; } .link { color: var(--accent); cursor: pointer; text-decoration: underline; } .center { text-align: center; } .spacer { height: 8px; } /* ---------- brand row with settings button ---------- */ .brand-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .brand-row .brand { margin-bottom: 0; } .settings-btn { background: var(--bg-card); border: 1px solid var(--line); color: var(--ink-dim); width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; flex: none; display: grid; place-items: center; transition: .15s; } .settings-btn:active { transform: scale(.94); } .settings-btn:hover { border-color: var(--accent); color: var(--ink); } /* ---------- settings page ---------- */ .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); } .settings-row .label { font-weight: 700; } .setting-seg { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 3px; gap: 2px; } .setting-seg button { border: none; background: none; color: var(--ink-dim); font-family: var(--mono); font-size: .76rem; padding: 7px 14px; border-radius: 16px; cursor: pointer; transition: .15s; } .setting-seg button.on { background: var(--accent); color: #1a1a1a; font-weight: 700; } .lang-select { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; color: var(--ink); font-family: var(--mono); font-size: .88rem; } /* ---------- terms & privacy promise ---------- */ .promise { display: flex; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line); } .promise .check { color: var(--signal-green); font-size: 1.1rem; flex: none; line-height: 1.4; } .promise .ptext .pt-title { font-weight: 700; } .promise .ptext .pt-desc { color: var(--ink-dim); font-size: .82rem; margin-top: 3px; line-height: 1.45; } .terms-body { color: var(--ink-dim); font-size: .85rem; line-height: 1.6; margin-top: 10px; } /* ---- spoorboekje / departures / journey (NS integration) ---- */ .sp-status { font-family: var(--mono); font-size: .76rem; color: var(--ink-dim); margin: 8px 0; min-height: 1em; } .sp-status.err { color: var(--signal-red); } .sp-status.warn { color: var(--warn-text); } .sp-empty { color: var(--ink-faint); font-size: .85rem; padding: 8px 0; } .sp-code { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); float: right; } .dep-row { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; margin-bottom: 6px; cursor: pointer; text-align: left; color: var(--ink); transition: border-color .15s, transform .1s; } .dep-row:hover { border-color: #3a444f; } .dep-row:active { transform: scale(.99); } .dep-row.sel { border-color: var(--accent); background: rgba(255,204,0,.10); } .dep-row.cancelled { opacity: .5; text-decoration: line-through; } .dep-time { font-family: var(--mono); font-weight: 700; font-size: .9rem; min-width: 52px; } .dep-delay { color: var(--signal-red); font-size: .72rem; margin-left: 3px; } .dep-main { display: flex; flex-direction: column; flex: 1; min-width: 0; } .dep-cat { font-family: var(--mono); font-size: .74rem; color: var(--ink-dim); } .dep-dir { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dep-plat { font-family: var(--mono); font-weight: 700; font-size: .82rem; color: var(--accent); min-width: 28px; text-align: right; } .jr-stop { display: flex; align-items: center; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--line); } .jr-stop:last-child { border-bottom: none; } .jr-time { font-family: var(--mono); font-weight: 700; font-size: .85rem; min-width: 50px; } .jr-name { flex: 1; } .jr-plat { font-family: var(--mono); color: var(--accent); font-size: .8rem; } /* ---- profile photo upload ---- */ .photo-upload { display: flex; gap: 14px; align-items: center; } .photo-preview { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 12px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--line); display: grid; place-items: center; } .photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-placeholder { font-family: var(--mono); font-size: .64rem; color: var(--ink-faint); text-align: center; padding: 0 6px; } .photo-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } /* ---- presence trip time (total duration + minutes to final stop) ---- */ .presence-triptime { font-family: var(--mono); font-size: .72rem; color: var(--ink-dim); margin: 2px 0 0 22px; letter-spacing: .02em; } /* ---- chat: typing indicator ---- */ .typing-row { font-family: var(--mono); font-size: .72rem; color: var(--ink-dim); padding: 2px 14px 6px; font-style: italic; } /* ---- presence phase badge (on platform / on board) ---- */ .pb-phase { font-family: var(--mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; margin-left: 8px; vertical-align: middle; } .pb-phase.platform { background: rgba(255,204,0,.16); color: var(--warn-text); } .pb-phase.onboard { background: rgba(52,199,89,.16); color: var(--signal-green); } .pb-phase:empty { display: none; } /* ---- get-off picker: selected intermediate stop ---- */ .sp-getoff-opt.sel { border-color: var(--accent); background: rgba(255,204,0,.10); } /* ---- unread badges ---- */ .tab-badge { position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--signal-red); color: #fff; font-family: var(--mono); font-size: .6rem; line-height: 16px; text-align: center; font-weight: 700; box-sizing: border-box; } .tab-badge[hidden] { display: none; } .chat-unread { margin-left: auto; align-self: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--signal-green); color: #fff; font-family: var(--mono); font-size: .68rem; line-height: 20px; text-align: center; font-weight: 700; }