/* ============================================================ * VITNE — main.css (shared by index, account, police) * Sections: * 1. Theme tokens + base * 2. Layout (app, header, footer) * 3. Recorder (viewfinder, panel, record-btn, chunk log) * 4. Modals + buttons + forms * 5. Contacts + permissions * 6. SOS * 7. Library / sessions / player * 8. Account portal * 9. Police portal * 10. Mobile overrides * ========================================================== */ /* ===== 1. THEME ===== * Default: lyst "ørken/sandstein"-tema — varm, institusjonell, offentlig-app-følelse. * Dark-modus via [data-theme="dark"] på . Brukerens valg lagres i * localStorage('vitne_theme'); en kort init-script i hver side setter attributtet * før CSS evalueres så vi unngår flash-of-wrong-theme. */ :root { /* Light / desert (default) */ --bg: #ebe2cc; --bg-elev: #f4ecd8; --bg-elev-2: #fbf5e3; --line: #cab98e; --line-bright: #a89366; --ink: #1c1814; --ink-dim: #564b34; --ink-faint: #8c7e60; --signal: #b22a1f; --signal-deep: #8a1f17; --signal-glow: rgba(178, 42, 31, 0.18); --secured: #2e6f44; --pending: #a37013; /* Surface tints used by gradients */ --bg-grad-warm: rgba(178, 42, 31, 0.05); --bg-grad-cool: rgba(46, 111, 68, 0.04); --noise-opacity: 0.025; --shadow-modal: 0 12px 48px rgba(40, 32, 16, 0.18); --shadow-record: 0 6px 18px rgba(80, 40, 20, 0.18); --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'IBM Plex Sans', system-ui, sans-serif; --display: 'Fraunces', Georgia, serif; } [data-theme="dark"] { --bg: #0a0a0a; --bg-elev: #141414; --bg-elev-2: #1c1c1c; --line: #2a2a2a; --line-bright: #3a3a3a; --ink: #f4f4f0; --ink-dim: #888880; --ink-faint: #555550; --signal: #ff3b30; --signal-deep: #b8281f; --signal-glow: rgba(255, 59, 48, 0.25); --secured: #4ade80; --pending: #fbbf24; --bg-grad-warm: rgba(255, 59, 48, 0.04); --bg-grad-cool: rgba(74, 222, 128, 0.02); --noise-opacity: 0.04; --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-record: 0 8px 24px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } html, body { overflow-x: hidden; } body { background: radial-gradient(circle at 20% 0%, var(--bg-grad-warm) 0%, transparent 40%), radial-gradient(circle at 80% 100%, var(--bg-grad-cool) 0%, transparent 40%), var(--bg); position: relative; } body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: var(--noise-opacity); pointer-events: none; z-index: 1; mix-blend-mode: multiply; } [data-theme="dark"] body::before { mix-blend-mode: normal; } .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; } /* ===== 2. LAYOUT ===== */ .app { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: 24px; min-height: 100vh; } .app.recorder { display: grid; grid-template-rows: auto 1fr auto; gap: 24px; } .app.portal { max-width: 1100px; } /* Header */ .header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--line); gap: 20px; flex-wrap: wrap; } .brand { display: flex; align-items: baseline; gap: 14px; } .brand-mark { font-family: var(--display); font-size: 32px; font-weight: 400; letter-spacing: -0.02em; font-style: italic; color: var(--ink); } .brand-mark::after { content: '·'; margin-left: 10px; color: var(--signal); } .brand-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); } .brand-tag.police { color: var(--signal); } .session-meta { display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 11px; color: var(--ink-dim); flex-wrap: wrap; } .session-meta strong { color: var(--ink); font-weight: 500; } .connection-pill { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 2px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .meta-btn { background: transparent; border: 1px solid var(--line); color: var(--ink-dim); padding: 6px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .meta-btn:hover { color: var(--ink); border-color: var(--ink-dim); } .meta-btn.active { color: var(--ink); border-color: var(--secured); } .meta-btn .meta-caret { color: var(--ink-faint); font-size: 14px; } .meta-btn strong { color: var(--ink); } .theme-toggle { background: transparent; border: 1px solid var(--line); color: var(--ink-dim); padding: 6px 10px; font-family: var(--mono); font-size: 11px; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; line-height: 1; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink-dim); } .theme-toggle::before { content: '☀'; font-size: 13px; } [data-theme="dark"] .theme-toggle::before { content: '☾'; } .theme-toggle .theme-label::after { content: 'Lys'; } [data-theme="dark"] .theme-toggle .theme-label::after { content: 'Mørk'; } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--secured); box-shadow: 0 0 8px var(--secured); animation: pulse-dot 2s infinite; display: inline-block; } .dot.offline { background: var(--signal); box-shadow: 0 0 8px var(--signal); } .dot.pending { background: var(--pending); box-shadow: 0 0 8px var(--pending); } .dot.deleted { background: var(--signal); } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Nav (portal) */ .nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .nav a { color: var(--ink-dim); text-decoration: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; border-bottom: 1px solid transparent; padding-bottom: 2px; } .nav a:hover, .nav a.active { color: var(--ink); border-color: var(--ink-dim); } .section-title { font-family: var(--display); font-style: italic; font-size: 32px; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 8px; } .section-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 32px; } main { padding: 32px 0; } /* Footer (recorder layout) */ .footer { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); flex-wrap: wrap; gap: 12px; } .footer-left { display: flex; gap: 20px; flex-wrap: wrap; } .footer a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; cursor: pointer; } .footer a:hover { border-bottom-color: var(--ink-dim); } .guarantee { font-family: var(--display); font-style: italic; text-transform: none; letter-spacing: 0.02em; font-size: 13px; color: var(--ink-dim); } /* Footer (portal layout) */ .portal-footer { margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .portal-footer a { color: var(--ink-dim); text-decoration: none; } .portal-footer a:hover { color: var(--ink); } /* ===== 3. RECORDER ===== */ .main { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: stretch; } @media (max-width: 900px) { .main { grid-template-columns: 1fr; } } .viewfinder { position: relative; background: #000; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; aspect-ratio: 16/9; width: 100%; max-width: 540px; max-height: 320px; margin: 0 auto; align-self: start; } .viewfinder.hidden { display: none; } .main:has(.viewfinder.hidden) { grid-template-columns: minmax(0, 480px); justify-content: center; } .main:has(.viewfinder.hidden) .panel { width: 100%; } #preview { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } .viewfinder-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 20px 24px; gap: 10px; } .viewfinder-empty .glyph { font-family: var(--display); font-style: italic; font-size: 40px; font-weight: 300; color: var(--ink-dim); line-height: 1; } .viewfinder-empty p { max-width: 320px; line-height: 1.6; letter-spacing: 0.05em; } .crosshair { position: absolute; inset: 0; pointer-events: none; display: none; } .crosshair.active { display: block; } .crosshair::before, .crosshair::after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.15); } .crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; } .crosshair::after { top: 50%; left: 0; right: 0; height: 1px; } .brackets { position: absolute; inset: 16px; pointer-events: none; display: none; } .brackets.active { display: block; } .brackets span { position: absolute; width: 24px; height: 24px; border-color: var(--signal); border-style: solid; border-width: 0; } .brackets span:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; } .brackets span:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; } .brackets span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; } .brackets span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; } .rec-indicator { position: absolute; top: 16px; left: 16px; display: none; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); border: 1px solid var(--signal); font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--signal); z-index: 4; } .rec-indicator.active { display: flex; } .rec-indicator .rec-dot { width: 8px; height: 8px; background: var(--signal); border-radius: 50%; animation: rec-blink 1s infinite; } @keyframes rec-blink { 0%,49%{opacity:1} 50%,100%{opacity:.2} } .timecode { position: absolute; top: 16px; right: 16px; display: none; padding: 6px 12px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); border: 1px solid var(--line-bright); font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: 0.05em; z-index: 4; } .timecode.active { display: block; } .audio-meter { position: absolute; bottom: 16px; left: 16px; right: 16px; height: 3px; background: rgba(255, 255, 255, 0.08); border-radius: 1.5px; overflow: hidden; display: none; z-index: 4; } .audio-meter.active { display: block; } .audio-meter-bar { height: 100%; background: linear-gradient(90deg, var(--secured), var(--pending), var(--signal)); width: 0%; transition: width 60ms ease-out; } .cam-tools { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 6px; z-index: 4; } .cam-btn { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--ink); cursor: pointer; padding: 7px 11px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; } .cam-btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.45); } .cam-btn.on { border-color: var(--secured); color: var(--secured); } .cam-btn:disabled { opacity: 0.35; cursor: not-allowed; } .cooloff-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 5; gap: 32px; } .cooloff-overlay.active { display: flex; } .cooloff-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--signal); text-align: center; } .cooloff-count { font-family: var(--display); font-style: italic; font-size: clamp(120px, 22vw, 200px); font-weight: 300; line-height: 1; color: var(--ink); text-shadow: 0 0 60px var(--signal-glow); } .cooloff-explainer { font-family: var(--sans); font-size: 13px; color: var(--ink-dim); max-width: 320px; text-align: center; line-height: 1.6; } .cooloff-abort { margin-top: 8px; padding: 14px 28px; background: transparent; border: 1px solid var(--ink); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; } .cooloff-abort:hover { background: var(--ink); color: var(--bg); } /* Panel */ .panel { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 4px; padding: 24px; display: flex; flex-direction: column; gap: 24px; } .panel-section h3 { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; } .panel-section h3 .count { color: var(--ink); font-weight: 600; } .action-zone { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 12px 0 8px; } .record-btn { position: relative; width: 180px; height: 180px; border-radius: 50%; border: 2px solid var(--signal); background: radial-gradient(circle, var(--signal) 0%, var(--signal-deep) 95%); color: white; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 0 0 0 var(--signal-glow), var(--shadow-record); user-select: none; -webkit-tap-highlight-color: transparent; } .record-btn::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--signal), transparent); opacity: 0; z-index: -1; animation: rotate 4s linear infinite; transition: opacity 0.3s; } @keyframes rotate { to { transform: rotate(360deg); } } .record-btn:hover { transform: scale(1.03); box-shadow: 0 0 0 8px var(--signal-glow), var(--shadow-record); } .record-btn:active { transform: scale(0.98); } .record-btn .label-main { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 28px; letter-spacing: 0.02em; text-transform: none; color: white; } .record-btn .label-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.25em; color: rgba(255, 255, 255, 0.75); margin-top: 4px; } .record-btn.recording { border-color: var(--signal); background: var(--signal); animation: rec-pulse 2s infinite; } .record-btn.recording::before { opacity: 1; } @keyframes rec-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--signal-glow), var(--shadow-record); } 50% { box-shadow: 0 0 0 16px transparent, var(--shadow-record); } } .record-btn.recording .label-main { color: white; } .record-btn.recording .label-sub { color: rgba(255,255,255,0.7); } .record-btn.holding { background: var(--signal-deep); } .record-btn.holding .label-main::after { content: ''; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: var(--hold-progress, 0%); height: 2px; background: white; transition: width 0.05s linear; } .action-helper { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-faint); text-align: center; text-transform: uppercase; min-height: 14px; } .voice-toggle { background: transparent; border: 1px solid var(--line); color: var(--ink-dim); padding: 8px 14px; margin-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 8px; } .voice-toggle:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-dim); } .voice-toggle .dot-mini { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); transition: all 0.2s; } .voice-toggle.on { color: var(--secured); border-color: var(--secured); } .voice-toggle.on .dot-mini { background: var(--secured); box-shadow: 0 0 8px var(--secured); animation: pulse-dot 2s infinite; } .voice-toggle:disabled { cursor: not-allowed; } .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .quick-btn { background: var(--bg-elev-2); border: 1px solid var(--line); color: var(--ink); padding: 12px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; } .quick-btn:hover { border-color: var(--ink-dim); background: var(--line); } .quick-btn .badge { background: var(--signal); color: white; border-radius: 10px; padding: 1px 7px; font-size: 9px; font-weight: 600; } .quick-btn .icon { font-family: var(--display); font-style: italic; font-size: 14px; } .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); } .stat { background: var(--bg-elev); padding: 14px; display: flex; flex-direction: column; gap: 4px; } .stat-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .stat-value { font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; } .stat-value.signal { color: var(--signal); } .stat-value.secured { color: var(--secured); } .chunk-log { max-height: 200px; overflow-y: auto; border: 1px solid var(--line); background: var(--bg); font-family: var(--mono); font-size: 10px; scrollbar-width: thin; scrollbar-color: var(--line-bright) transparent; } .chunk-log::-webkit-scrollbar { width: 4px; } .chunk-log::-webkit-scrollbar-track { background: transparent; } .chunk-log::-webkit-scrollbar-thumb { background: var(--line-bright); } .chunk-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; padding: 6px 12px; border-bottom: 1px solid var(--bg-elev-2); align-items: center; animation: row-in 0.3s ease-out; } @keyframes row-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } .chunk-seq { color: var(--ink-faint); font-variant-numeric: tabular-nums; } .chunk-status { width: 6px; height: 6px; border-radius: 50%; background: var(--secured); } .chunk-status.pending { background: var(--pending); } .chunk-status.failed { background: var(--signal); } .chunk-hash { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chunk-size { color: var(--ink-dim); font-variant-numeric: tabular-nums; text-align: right; } .chunk-log-empty { padding: 20px; text-align: center; color: var(--ink-faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; } /* ===== 4. MODAL / BTN / FORM ===== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; animation: backdrop-in 0.2s ease-out; } .modal-backdrop.visible { display: flex; } @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--bg-elev); border: 1px solid var(--line-bright); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; animation: modal-in 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-header { padding: 24px 28px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .modal-title { font-family: var(--display); font-style: italic; font-size: 28px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); } .modal-subtitle { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-top: 4px; } .modal-close { background: transparent; border: 1px solid var(--line); color: var(--ink-dim); width: 32px; height: 32px; font-size: 18px; cursor: pointer; transition: all 0.15s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); line-height: 1; } .modal-close:hover { color: var(--ink); border-color: var(--ink); } .modal-body { padding: 24px 28px; } .modal-footer { padding: 20px 28px; border-top: 1px solid var(--line); display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; } .btn { padding: 12px 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; border: 1px solid var(--line-bright); background: transparent; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .btn:hover:not(:disabled) { border-color: var(--ink); } .btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn.primary:hover { background: transparent; color: var(--ink); } .btn.danger { border-color: var(--signal); color: var(--signal); } .btn.danger:hover { background: var(--signal); color: white; } .btn.alert { background: var(--signal); color: white; border-color: var(--signal); } .btn.alert:hover { background: var(--signal-deep); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .form-group { margin-bottom: 18px; } .form-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; } .form-input { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-family: var(--sans); font-size: 14px; transition: border-color 0.15s; } .form-input:focus { outline: none; border-color: var(--ink-dim); } .form-input::placeholder { color: var(--ink-faint); } .help-text { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin-top: 6px; letter-spacing: 0.05em; line-height: 1.6; } .help-text a { color: var(--ink-dim); border-bottom: 1px solid var(--line-bright); } .help-text a:hover { color: var(--ink); } .alert { padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--line); background: var(--bg); font-family: var(--mono); font-size: 12px; color: var(--ink-dim); } .alert.error { border-color: var(--signal); color: var(--signal); } .alert.success { border-color: var(--secured); color: var(--secured); } .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--bg-elev); border: 1px solid var(--line-bright); padding: 14px 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink); z-index: 100; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-modal); max-width: 90vw; } .toast.visible { transform: translateX(-50%) translateY(0); } .toast.error { border-color: var(--signal); color: var(--signal); } .toast.success { border-color: var(--secured); color: var(--secured); } /* Card (portal) */ .card { background: var(--bg-elev); border: 1px solid var(--line); padding: 28px; border-radius: 4px; margin-bottom: 20px; } .card-tight { padding: 18px 24px; } .card h2 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 24px; margin-bottom: 16px; } .card h3 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 14px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } } .empty-state { padding: 60px 24px; text-align: center; border: 1px dashed var(--line); font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; } /* ===== 5. CONTACTS + PERMISSIONS ===== */ .contact-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .contact-item { background: var(--bg); border: 1px solid var(--line); padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .contact-info { min-width: 0; } .contact-name { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 4px; } .contact-name .relation { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; margin-left: 8px; } .contact-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); display: flex; gap: 12px; flex-wrap: wrap; } .channel-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--bg-elev-2); border: 1px solid var(--line); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; } .channel-tag.active { border-color: var(--secured); color: var(--secured); } .contact-actions { display: flex; gap: 6px; } .icon-btn { width: 32px; height: 32px; background: transparent; border: 1px solid var(--line); color: var(--ink-dim); cursor: pointer; font-family: var(--mono); font-size: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .icon-btn:hover { color: var(--ink); border-color: var(--ink-dim); } .icon-btn.danger:hover { color: var(--signal); border-color: var(--signal); } .contact-empty { padding: 40px 20px; text-align: center; border: 1px dashed var(--line); font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; } .channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .channel-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; transition: all 0.15s; font-family: var(--sans); font-size: 13px; user-select: none; } .channel-option:hover { border-color: var(--ink-dim); } .channel-option input { display: none; } .channel-option .check { width: 14px; height: 14px; border: 1px solid var(--line-bright); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--bg); flex-shrink: 0; } .channel-option.selected { border-color: var(--secured); background: rgba(74, 222, 128, 0.05); } .channel-option.selected .check { background: var(--secured); border-color: var(--secured); } .channel-option.selected .check::after { content: '✓'; } .perm-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; } .perm-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); } .perm-row .perm-label { font-family: var(--sans); font-size: 13px; color: var(--ink); } .perm-row .perm-sub { font-family: var(--mono); font-size: 9px; color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; } .perm-toggle { position: relative; width: 36px; height: 20px; background: var(--bg-elev-2); border: 1px solid var(--line-bright); border-radius: 10px; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .perm-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--ink-dim); border-radius: 50%; transition: all 0.2s; } .perm-toggle:has(input:checked) { background: var(--secured); border-color: var(--secured); } .perm-toggle:has(input:checked)::after { background: white; transform: translateX(16px); } .perm-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .contact-perms { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .perm-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; background: var(--bg-elev-2); border: 1px solid var(--line); font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .perm-badge.on { border-color: var(--secured); color: var(--secured); } /* ===== 6. SOS ===== */ .sos-summary { background: var(--bg); border: 1px solid var(--signal); padding: 18px; margin-bottom: 20px; } .sos-summary-title { font-family: var(--mono); font-size: 11px; color: var(--signal); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; } .sos-summary-text { font-family: var(--sans); font-size: 13px; color: var(--ink); line-height: 1.6; } .sos-summary-text strong { color: var(--signal); font-weight: 600; } .sos-progress { margin-top: 16px; } .sos-progress-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; font-family: var(--mono); font-size: 12px; } .sos-progress-row:last-child { border-bottom: none; } .sos-progress-status { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; } .sos-progress-status.pending { color: var(--pending); } .sos-progress-status.sent { color: var(--secured); } .sos-progress-status.failed { color: var(--signal); } .sos-progress-spinner { width: 12px; height: 12px; border: 1.5px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== 7. LIBRARY / SESSIONS / PLAYER ===== */ .device-id-row { display: flex; gap: 8px; align-items: center; } .device-id { flex: 1; font-family: var(--mono); font-size: 12px; background: var(--bg); border: 1px solid var(--line); padding: 12px 14px; color: var(--ink); word-break: break-all; min-width: 0; } .device-id-row .btn { padding: 12px 16px; font-size: 10px; flex-shrink: 0; } .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .lib-card { background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; } .lib-card.deleted { border-color: var(--signal); opacity: 0.85; } .lib-thumb { background: #000; aspect-ratio: 16/9; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .lib-thumb video { width: 100%; height: 100%; object-fit: cover; background: #000; } .lib-thumb-empty { font-family: var(--display); font-style: italic; font-size: 32px; color: var(--ink-faint); } .lib-meta { padding: 10px 12px; } .lib-id { font-family: var(--mono); font-size: 11px; color: var(--ink); margin-bottom: 4px; } .lib-time { font-family: var(--mono); font-size: 10px; color: var(--ink-dim); letter-spacing: 0.08em; } .lib-stats { font-family: var(--mono); font-size: 9px; color: var(--ink-faint); margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; } .lib-actions { display: flex; gap: 6px; padding: 0 12px 12px; } .lib-actions .btn { padding: 6px 10px; font-size: 9px; flex: 1; min-width: 0; justify-content: center; } .lib-deleted-banner { background: rgba(255, 59, 48, 0.1); border-top: 1px solid var(--signal); padding: 6px 12px; font-family: var(--mono); font-size: 9px; color: var(--signal); letter-spacing: 0.08em; text-transform: uppercase; display: flex; justify-content: space-between; } /* Portal session cards (account.php) */ .session-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .session-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: border-color 0.2s; } .session-card.deleted { border-color: var(--signal); opacity: 0.85; } .session-card:hover { border-color: var(--ink-dim); } .session-thumb { background: #000; aspect-ratio: 16/9; position: relative; display: flex; align-items: center; justify-content: center; } .session-thumb video { width: 100%; height: 100%; object-fit: cover; background: #000; } .session-thumb-empty { font-family: var(--display); font-style: italic; font-size: 36px; color: var(--ink-faint); opacity: 0.6; } .session-meta-card { padding: 14px 16px; } .session-id-card { font-family: var(--mono); font-size: 11px; color: var(--ink); letter-spacing: 0.05em; } .session-time-card { font-family: var(--mono); font-size: 10px; color: var(--ink-dim); letter-spacing: 0.1em; margin-top: 4px; } .session-stats { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; } .session-actions { display: flex; gap: 8px; padding: 0 16px 16px; flex-wrap: wrap; } .session-actions .btn { padding: 8px 14px; font-size: 10px; flex: 1; min-width: 0; justify-content: center; } .deleted-banner { background: rgba(255, 59, 48, 0.1); border-top: 1px solid var(--signal); padding: 8px 16px; font-family: var(--mono); font-size: 10px; color: var(--signal); letter-spacing: 0.1em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; } /* Account state block */ .account-state-block { background: var(--bg); border: 1px solid var(--line); padding: 16px; margin-bottom: 12px; } .account-state-block .form-label { margin-bottom: 4px; } .account-mini-tabs { display: flex; gap: 0; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .account-mini-tabs button { background: transparent; border: none; color: var(--ink-dim); font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; } .account-mini-tabs button.active { color: var(--ink); border-bottom-color: var(--signal); } /* ===== 9. POLICE ===== */ .police-table { width: 100%; border-collapse: collapse; background: var(--bg-elev); border: 1px solid var(--line); } .police-table th, .police-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; } .police-table th { background: var(--bg); color: var(--ink-dim); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; } .police-table tr:hover td { background: var(--bg); } .police-table td { color: var(--ink-dim); } .police-table td strong { color: var(--ink); font-weight: 500; } .police-table .col-actions { text-align: right; } .police-table .col-actions .btn { padding: 6px 12px; font-size: 9px; } .police-table .gps-link { color: var(--ink-dim); text-decoration: underline; } .police-table .gps-link:hover { color: var(--secured); } .police-filters { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .police-filters .form-input { width: auto; min-width: 220px; } .police-detail { display: grid; grid-template-columns: 320px 1fr; gap: 24px; } @media (max-width: 800px) { .police-detail { grid-template-columns: 1fr; } } .police-detail-meta dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; } .police-detail-meta dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .police-detail-meta dd { font-family: var(--mono); font-size: 12px; color: var(--ink); } .role-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--bg); border: 1px solid var(--line); font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-dim); } .role-badge.police { border-color: var(--signal); color: var(--signal); } /* ===== 11. POLICY (personvern.php) ===== * Long-form lesetekst med TOC, definition-lists, framhevede info-bokser. */ .policy-meta { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 28px; } .policy-meta strong { color: var(--ink); font-weight: 500; } .policy-meta .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); background: var(--bg-elev); } .policy-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; } @media (max-width: 900px) { .policy-layout { grid-template-columns: 1fr; gap: 0; } } .policy-toc { position: sticky; top: 24px; font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); background: var(--bg-elev); padding: 18px 18px 14px; } .policy-toc h3 { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 12px; } .policy-toc ol { list-style: none; counter-reset: toc; padding: 0; } .policy-toc li { counter-increment: toc; padding: 4px 0; border-top: 1px solid var(--line); } .policy-toc li:first-child { border-top: 0; } .policy-toc a { display: flex; gap: 10px; color: var(--ink-dim); text-decoration: none; letter-spacing: 0.04em; line-height: 1.5; } .policy-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--ink-faint); flex-shrink: 0; } .policy-toc a:hover { color: var(--ink); } @media (max-width: 900px) { .policy-toc { position: static; margin-bottom: 24px; } } .policy-article { font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--ink); max-width: 720px; } .policy-article > section { margin-bottom: 44px; scroll-margin-top: 24px; } .policy-article h2 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 28px; letter-spacing: -0.01em; margin-bottom: 6px; color: var(--ink); } .policy-article .section-marker { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; } .policy-article h3 { font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: -0.005em; margin: 22px 0 8px; color: var(--ink); } .policy-article p { margin-bottom: 14px; } .policy-article ul, .policy-article ol { margin: 0 0 14px 22px; } .policy-article li { margin-bottom: 6px; } .policy-article strong { color: var(--ink); font-weight: 600; } .policy-article a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-bright); text-underline-offset: 3px; } .policy-article a:hover { text-decoration-color: var(--signal); } .policy-article dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 14px 0 18px; font-size: 14px; } .policy-article dl.facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint); padding-top: 4px; } .policy-article dl.facts dd { margin: 0; } .policy-callout { background: var(--bg-elev); border-left: 3px solid var(--signal); padding: 16px 20px; margin: 18px 0; font-size: 14px; line-height: 1.6; } .policy-callout.info { border-left-color: var(--secured); } .policy-callout.muted { border-left-color: var(--line-bright); } .policy-callout strong { display: block; margin-bottom: 6px; } .policy-lede { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.55; color: var(--ink); margin-bottom: 24px; } .policy-plain { background: var(--bg-elev-2); border: 1px solid var(--line); padding: 28px 30px; margin-bottom: 32px; border-radius: 4px; } .policy-plain h2 { margin-bottom: 4px; } .policy-plain .plain-q { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--signal); margin: 18px 0 4px; } .policy-plain .plain-q:first-of-type { margin-top: 12px; } .rights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 14px 0 18px; } .rights-grid .right-box { background: var(--bg); border: 1px solid var(--line); padding: 12px 14px; } .rights-grid .right-box h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; } .rights-grid .right-box p { font-size: 13px; margin: 0; color: var(--ink-dim); line-height: 1.5; } /* ===== 10. MOBILE ===== */ @media (max-width: 600px) { .app { padding: 16px; gap: 16px; } .header { flex-direction: column; align-items: flex-start; } .session-meta { font-size: 10px; gap: 12px; } .panel { padding: 16px; } .record-btn { width: 160px; height: 160px; } .footer { flex-direction: column; align-items: flex-start; } .viewfinder { max-height: 220px; max-width: 100%; } .modal-header { padding: 20px; } .modal-body { padding: 20px; } .modal-footer { padding: 16px 20px; flex-direction: column-reverse; } .modal-footer .btn { width: 100%; } .police-table { font-size: 10px; } .police-table th, .police-table td { padding: 8px 6px; } }