/* Nora Berikelse — Nora CRM offisiell profilhåndbok v1.0 (4-tema-system) */ /* ═══════════ FARGE-TOKENS — 4 temaer (Sand = standard/:root) ═══════════ */ /* Tema settes via data-theme på : sand | slate | dark | warm. */ /* Eldre variabelnavn (--bg2/--card/--card2/--muted/--accent2/--green/ */ /* --yellow) bevares som ALIAS så eksisterende JS/CSS fortsatt fungerer. */ :root, [data-theme="sand"] { --bg: #F7F7F5; --surface: #FFFFFF; --surface-hover: #FAFAF8; --border: #E8E6E1; --border-light: #F0EEEA; --text: #1A1A1A; --text-secondary: #6B6B6B; --text-tertiary: #9B9B9B; --accent: #2C5F2D; --accent-light: #EEF3EE; --accent-hover: #234D24; --red: #C44536; --red-light: #FDF0EE; --orange: #B5651D; --orange-light: #FDF5EE; --blue: #2D5F8A; --blue-light: #EEF3F8; --sb-bg: #1A1A1A; --sb-text: #A0A0A0; --sb-hover: #2A2A2A; --sb-active: #333333; /* aliaser for kompatibilitet */ --bg2: #F0EEEA; --card: #FFFFFF; --card2: #FAFAF8; --muted: #6B6B6B; --accent2: #234D24; --green: #2C5F2D; --yellow: #B5651D; --radius: 12px; font-size: 13.5px; } [data-theme="slate"] { --bg: #F0F2F5; --surface: #FFFFFF; --surface-hover: #F7F8FA; --border: #DDE1E7; --border-light: #EBEEF2; --text: #1A1A1A; --text-secondary: #6B6B6B; --text-tertiary: #9B9B9B; --accent: #3B5998; --accent-light: #EEF1F8; --accent-hover: #2F477A; --red: #C44536; --red-light: #FDF0EE; --orange: #B5651D; --orange-light: #FDF5EE; --blue: #2D5F8A; --blue-light: #EEF3F8; --sb-bg: #1E293B; --sb-text: #94A3B8; --sb-hover: #283548; --sb-active: #334155; --bg2: #EBEEF2; --card: #FFFFFF; --card2: #F7F8FA; --muted: #6B6B6B; --accent2: #2F477A; --green: #3B5998; --yellow: #B5651D; } [data-theme="dark"] { --bg: #111113; --surface: #1A1A1E; --surface-hover: #222227; --border: #2A2A30; --border-light: #232328; --text: #E4E4E7; --text-secondary: #A0A0A8; --text-tertiary: #6B6B73; --accent: #6D9A6E; --accent-light: #1E2A1E; --accent-hover: #7FAE80; --red: #E0685B; --red-light: #2A1A18; --orange: #D08A45; --orange-light: #2A2018; --blue: #5B8FBF; --blue-light: #18222A; --sb-bg: #0C0C0E; --sb-text: #A0A0A0; --sb-hover: #1A1A1E; --sb-active: #26262C; --bg2: #232328; --card: #1A1A1E; --card2: #222227; --muted: #A0A0A8; --accent2: #7FAE80; --green: #6D9A6E; --yellow: #D08A45; } [data-theme="warm"] { --bg: #FAF6F1; --surface: #FFFFFF; --surface-hover: #FBF7F2; --border: #E8DFD3; --border-light: #F0E9DF; --text: #2D2016; --text-secondary: #6B5D4F; --text-tertiary: #9B8B7B; --accent: #A0522D; --accent-light: #F5EBE3; --accent-hover: #87431F; --red: #C44536; --red-light: #FBEEE9; --orange: #B5651D; --orange-light: #FBF2E7; --blue: #2D5F8A; --blue-light: #ECF1F6; --sb-bg: #2D2016; --sb-text: #B0A090; --sb-hover: #3A2C20; --sb-active: #473628; --bg2: #F0E9DF; --card: #FFFFFF; --card2: #FBF7F2; --muted: #6B5D4F; --accent2: #87431F; --green: #A0522D; --yellow: #B5651D; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 400; font-size: 14px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background .3s ease, color .2s ease; } /* Store tall/verdier bruker Source Serif 4 — ALDRI i løpende tekst, tags eller badges */ .stat-value, .cpu-big, .gauge-value, .mc-counts, .data-table td.num, .toplist-row b, .mc-metrics b, .cpu-side b, .ov-tile-val, .ov-big-live, .src-num b, .ov-card-head b, .ov-ai-num b, .vs-edge { font-family: 'Source Serif 4', Georgia, serif; } /* ---------- Login ---------- */ .login-body { display: flex; align-items: center; justify-content: center; } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 42px 46px; width: 360px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,.10); } .login-card h1 { font-size: 26px; letter-spacing: -.3px; font-weight: 600; margin-bottom: 4px; } .login-sub { color: var(--text-secondary); font-size: 13px; margin-bottom: 26px; } .login-logo-wrap { display: flex; justify-content: center; margin-bottom: 14px; } .login-card input { width: 100%; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); margin-bottom: 14px; font-size: 14px; font-family: inherit; transition: border-color .15s; } .login-card input:focus { outline: none; border-color: var(--accent); } .login-card button { width: 100%; padding: 11px; border: none; border-radius: 6px; cursor: pointer; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; font-family: inherit; transition: background .15s; } .login-card button:hover { background: var(--accent-hover); } .login-error { background: var(--red-light); border: 1px solid var(--red); color: var(--red); padding: 9px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; } /* ---------- Topbar ---------- */ .topbar { display: flex; justify-content: space-between; align-items: center; padding: 13px 28px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 50; } .brand { display: flex; align-items: center; gap: 11px; } .brand h1 { font-size: 18px; font-weight: 400; letter-spacing: -.3px; } .brand h1 strong { font-weight: 600; } /* Nora «N»-merke — accent-farget avrundet kvadrat m/ hvit N (login-hero) */ /* Følger temaets --accent; radius 8px, DM Sans 600, hvit N sentrert. */ .logo-mark { width: 44px; height: 44px; border-radius: 8px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.5px; flex-shrink: 0; } /* Kompakt variant i topbaren (32x32 per profilhåndbok) */ .brand .logo-mark { width: 32px; height: 32px; border-radius: 8px; font-size: 17px; } .topbar-right { display: flex; align-items: center; gap: 22px; } .logout { color: var(--text-secondary); text-decoration: none; font-size: 13px; padding: 4px 8px; border-radius: 6px; transition: all .15s; } .logout:hover { color: var(--accent); background: var(--accent-light); } .gauge { display: flex; align-items: center; gap: 8px; font-size: 12px; } .gauge-label { color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; font-size: 10px; } .gauge-value { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; } .gauge-bar { width: 90px; height: 6px; background: var(--bg2); border-radius: 3px; overflow: hidden; } .gauge-bar div { height: 100%; width: 0%; background: var(--accent); border-radius: 3px; transition: width .6s ease, background .6s ease; } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 4px; padding: 14px 28px 0; flex-wrap: wrap; border-bottom: 1px solid var(--border); } .tab { background: transparent; color: var(--text-secondary); border: 1px solid transparent; border-radius: 6px 6px 0 0; padding: 9px 16px; font-size: 13.5px; cursor: pointer; font-family: inherit; font-weight: 500; transition: all .15s; margin-bottom: -1px; } .tab:hover { color: var(--text); background: var(--surface-hover); } .tab.active { background: var(--surface); color: var(--accent); border-color: var(--border); border-bottom-color: var(--surface); font-weight: 600; } /* ---------- CPU-panel (Tech-scrape, 1 Hz) ---------- */ .cpu-panel { display: grid; grid-template-columns: 220px 1fr 200px; gap: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 18px; align-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.04); } @media (max-width: 900px) { .cpu-panel { grid-template-columns: 1fr; } } .cpu-big { font-size: 44px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; color: var(--accent); } .cpu-unit { font-size: 22px; margin-left: 3px; opacity: .55; } .cpu-label { color: var(--text-secondary); font-size: 12px; margin: 6px 0 10px; } .cpu-bar { height: 6px; } .cpu-spark { display: flex; align-items: flex-end; gap: 2px; height: 64px; min-width: 0; } .cpu-spark .bar { flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--accent); opacity: .85; transition: height .3s linear; } .cpu-spark .bar.warn { background: var(--orange); } .cpu-spark .bar.hot { background: var(--red); } .cpu-side { display: flex; flex-direction: column; gap: 7px; color: var(--text-secondary); font-size: 13px; } .cpu-side b { color: var(--text); font-variant-numeric: tabular-nums; font-size: 15px; } /* ---------- Sub-tabs (innenfor en tab) ---------- */ .subtabs { display: flex; gap: 6px; margin: 22px 0 4px; } .subtab { background: var(--surface); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 9px; padding: 6px 16px; font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 500; transition: all .15s; } .subtab:hover { color: var(--text); background: var(--bg); } .subtab.active { background: var(--accent-light); color: var(--accent); font-weight: 600; border-color: var(--accent); } .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); margin-left: 5px; vertical-align: middle; } .live-dot.on { background: var(--accent); box-shadow: 0 0 7px var(--accent); animation: pulse 1.6s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } main { padding: 22px 28px 60px; } .pane { display: none; } .pane.active { display: block; animation: fadein .25s ease; } @keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } } /* Widget/kort-tittel — profilhåndbok §2 */ h2 { font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; margin: 26px 0 12px; } /* ---------- Stat-kort ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .stat-grid.small { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 18px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .stat-value { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); letter-spacing: -.3px; } .stat-label { color: var(--text-secondary); font-size: 12.5px; margin-top: 4px; } .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 1100px) { .cols { grid-template-columns: 1fr; } } /* ---------- Modul-kort ---------- */ .module-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; } .module-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: border-color .3s, box-shadow .3s; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .module-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,.08); } .module-card.running { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-light), 0 2px 6px rgba(0,0,0,.08); } .mc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .mc-title { font-size: 16px; font-weight: 600; letter-spacing: -.3px; } .mc-desc { color: var(--text-secondary); font-size: 12.5px; margin-top: 5px; line-height: 1.5; max-width: 46ch; } .badge { padding: 3px 9px; border-radius: 10px; font-size: 11px; font-weight: 500; letter-spacing: .2px; text-transform: uppercase; white-space: nowrap; } .badge.running { background: var(--accent-light); color: var(--accent); } .badge.paused { background: var(--orange-light); color: var(--orange); } .badge.idle, .badge.completed { background: var(--accent-light); color: var(--accent); } .badge.stopped { background: var(--border-light); color: var(--text-secondary); } .badge.failed, .badge.dead, .badge.killed { background: var(--red-light); color: var(--red); } .mc-progress { margin: 14px 0 10px; } .progress { height: 8px; background: var(--bg2); border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; width: 0%; border-radius: 4px; background: var(--accent); transition: width .8s cubic-bezier(.4,0,.2,1); } .progress-fill.indet { width: 30% !important; animation: indet 1.6s infinite ease-in-out; } @keyframes indet { 0% { margin-left: -30%; } 100% { margin-left: 100%; } } .mc-progress-meta { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 12px; margin-top: 6px; font-variant-numeric: tabular-nums; } .mc-metrics { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-secondary); flex-wrap: wrap; align-items: center; } .mc-metrics b { color: var(--text); font-variant-numeric: tabular-nums; } .mc-lastrun { margin-left: auto; } .mc-controls { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; } .mc-controls input { width: 80px; padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit; transition: border-color .15s; } .mc-controls input:focus { outline: none; border-color: var(--accent); } /* ---------- Knapper (Nora) ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; transition: all .15s; } .btn .ic { width: 16px; height: 16px; } .btn:hover { background: var(--bg); } .btn:active { transform: translateY(1px); } .btn.start { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.start:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn.warn { background: var(--orange-light); border-color: var(--orange); color: var(--orange); } .btn.warn:hover { background: var(--orange); color: #fff; } .btn.danger { background: var(--red); border-color: var(--red); color: #fff; } .btn.danger:hover { filter: brightness(.9); } .btn.ghost { background: transparent; border-color: transparent; color: var(--text-secondary); } .btn.ghost:hover { background: var(--bg); color: var(--text); } .btn:disabled { opacity: .4; cursor: not-allowed; } /* ---------- Lister/feeds ---------- */ .running-list, .event-feed { display: flex; flex-direction: column; gap: 9px; } .running-item, .event-item { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 11px 15px; font-size: 13.5px; display: flex; gap: 12px; align-items: center; } .ev-type { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 500; letter-spacing: .2px; background: var(--blue-light); color: var(--blue); white-space: nowrap; } .event-item .ev-date { color: var(--text-secondary); font-size: 12px; white-space: nowrap; } .event-item .ev-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empty { color: var(--text-secondary); font-size: 13px; padding: 16px; text-align: center; border: 1px dashed var(--border); border-radius: 8px; } /* ---------- Topplister ---------- */ .toplist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; } .toplist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .toplist h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; color: var(--accent); margin-bottom: 10px; } .toplist-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4.5px 0; border-bottom: 1px solid var(--border-light); } .toplist-row:last-child { border-bottom: none; } .toplist-row b { font-variant-numeric: tabular-nums; color: var(--text-secondary); } /* ---------- Tabeller ---------- */ .data-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .data-table th { text-align: left; padding: 10px 12px; color: var(--text-tertiary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; border-bottom: 1px solid var(--border); background: var(--bg); } .data-table td { padding: 12px; border-bottom: 1px solid var(--border-light); font-variant-numeric: tabular-nums; } .data-table tr:last-child td { border-bottom: none; } .data-table tbody tr { cursor: pointer; } .data-table tr:hover td { background: var(--surface-hover); } .filter-bar { display: flex; gap: 9px; margin: 14px 0; flex-wrap: wrap; align-items: center; } .filter-bar input, .filter-bar select { padding: 7px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13.5px; font-family: inherit; transition: border-color .15s; } .filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--accent); } .pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0; } #sched-table input[type="text"], #sched-table select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 12.5px; font-family: inherit; } #sched-table tr.sched-off td { opacity: .55; } #sched-table tr.sched-off td:nth-child(2) { opacity: 1; } .muted { color: var(--text-secondary); font-size: 12.5px; } .log-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; font-size: 11.5px; line-height: 1.55; max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-all; color: var(--text-secondary); } /* ---------- Modal/popup ---------- */ .modal-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); z-index: 200; } .modal-overlay.show { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; width: min(880px, 94vw); max-height: 84vh; display: flex; flex-direction: column; box-shadow: 0 24px 48px rgba(0,0,0,.15); animation: fadein .2s ease; } .modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal-head h3 { font-size: 16px; font-weight: 600; letter-spacing: -.3px; } .modal-close { background: var(--bg); border: none; color: var(--text-secondary); width: 32px; height: 32px; border-radius: 6px; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: all .15s; } .modal-close:hover { background: var(--red-light); color: var(--red); } .modal-body { padding: 16px 20px 20px; overflow: auto; } /* Klikkbare rader/kort — samme fontfarge, ingen understreking */ .clickable { cursor: pointer; } .toplist-row.clickable, .toplist-row.clickable span { color: var(--text); text-decoration: none; } .toplist-row.clickable:hover { background: var(--accent-light); } .stat-card.clickable { transition: border-color .2s, transform .1s; } .stat-card.clickable:hover { border-color: var(--accent); } /* Grupper i popups (NAV-annonser per selskap, feeds) */ .company-group, .feed-group { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); margin-bottom: 11px; } .company-group { padding: 12px 15px; } .cg-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .company-group .cg-head { margin-bottom: 4px; } .job-item { border-top: 1px solid var(--border); padding: 9px 0 7px; font-size: 13.5px; } .job-title { font-weight: 600; } .job-title .badge { margin-left: 6px; } .contact { font-size: 13px; margin-top: 4px; } .feed-toggle { padding: 10px 14px; } .feed-items { padding: 0 14px 12px; } .feed-item { border-top: 1px solid var(--border); padding: 8px 0; font-size: 13.5px; } .feed-item a { color: var(--accent); text-decoration: none; } .feed-item a:hover { text-decoration: underline; color: var(--accent-hover); } .feed-sum { margin-top: 3px; font-size: 12.5px; line-height: 1.45; } .exp-arrow { color: var(--text-secondary); width: 14px; display: inline-block; flex: none; } /* ---------- Ikoner (inline SVG, stroke = tekstfarge) ---------- */ .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; flex: none; } .ic-lg { width: 17px; height: 17px; vertical-align: -3px; } /* ---------- Tema-velger (profilhåndbok 4-tema-system) ---------- */ .theme-switch { position: relative; } .theme-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; height: 36px; padding: 0 11px; cursor: pointer; line-height: 1; color: var(--text); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; font-family: inherit; transition: all .15s; } .theme-btn:hover { background: var(--bg); } .theme-btn .theme-current-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border); flex: none; background: var(--accent); } .theme-btn .ic { width: 16px; height: 16px; } .theme-menu { position: absolute; right: 0; top: calc(100% + 8px); display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; min-width: 175px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 60; } .theme-menu.show { display: block; } .theme-menu button { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; color: var(--text); padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; text-align: left; transition: background .15s; } .theme-menu button:hover { background: var(--bg); } .theme-menu button.active { background: var(--accent-light); color: var(--accent); font-weight: 600; } .theme-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border); flex: none; } .theme-dot.sand { background: #2C5F2D; } .theme-dot.slate { background: #3B5998; } .theme-dot.dark { background: #6D9A6E; } .theme-dot.warm { background: #A0522D; } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); color: var(--text); padding: 13px 18px; border-radius: 8px; font-size: 13.5px; max-width: 380px; opacity: 0; transform: translateY(12px); transition: all .3s ease; pointer-events: none; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.12); } .toast.show { opacity: 1; transform: translateY(0); } .toast.error { border-left-color: var(--red); } /* Kildevelger i RSS-tabben (Begge | RSS | NTB) */ #rss-kilde-bar .rss-kilde.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* ---------- Database-fanen ---------- */ .db-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 4px; } .db-summary .stat-value small { font-size: .42em; font-weight: 600; margin-left: 4px; color: var(--text-secondary); -webkit-text-fill-color: var(--text-secondary); } .muted-note { color: var(--text-secondary); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; } .data-table th.num, .data-table td.num { text-align: right; white-space: nowrap; } .db-table { table-layout: auto; } .db-table code { font-size: 12.5px; color: var(--text); white-space: nowrap; background: var(--bg2); padding: 2px 7px; border-radius: 5px; font-family: 'JetBrains Mono', ui-monospace, monospace; } .db-table .db-desc { color: var(--text-secondary); font-size: 12.5px; font-variant-numeric: normal; line-height: 1.45; width: 46%; } /* ═══════════════════════════════════════════════════════════════════════ */ /* OVERSIKT — investor-showcase */ /* ═══════════════════════════════════════════════════════════════════════ */ /* ---- Hero ---- */ .ov-hero { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.55fr); gap: 30px; align-items: center; background: radial-gradient(120% 140% at 0% 0%, var(--accent-light) 0%, transparent 55%), linear-gradient(135deg, var(--surface), var(--surface)); border: 1px solid var(--border); border-radius: 18px; padding: 30px 32px; margin-bottom: 26px; box-shadow: 0 4px 24px rgba(0,0,0,.05); } @media (max-width: 1000px) { .ov-hero { grid-template-columns: 1fr; gap: 22px; } } .ov-hero-kicker { display: inline-block; color: var(--accent); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 11px; } .ov-hero-title { font-size: 27px; line-height: 1.18; font-weight: 600; letter-spacing: -.6px; color: var(--text); text-transform: none; margin: 0; } .ov-hero-title span { color: var(--accent); } .ov-hero-sub { color: var(--text-secondary); font-size: 14px; margin-top: 12px; max-width: 42ch; line-height: 1.55; } .ov-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; } @media (max-width: 560px) { .ov-hero-stats { grid-template-columns: repeat(2, 1fr); } } .ov-tile { position: relative; background: var(--bg); border: 1px solid var(--border-light); border-radius: 12px; padding: 15px 16px; transition: border-color .2s, transform .15s; } .ov-tile:hover { border-color: var(--accent); transform: translateY(-2px); } .ov-tile-ic { position: absolute; top: 13px; right: 13px; width: 31px; height: 31px; border-radius: 9px; background: var(--accent-light); display: flex; align-items: center; justify-content: center; } .ov-tile-ic .ic { width: 16px; height: 16px; color: var(--accent); } .ov-tile-val { padding-right: 34px; } .ov-tile-val { font-size: 27px; font-weight: 600; color: var(--accent); letter-spacing: -.5px; line-height: 1; font-variant-numeric: tabular-nums; } .ov-tile-lab { font-size: 12.5px; color: var(--text); font-weight: 600; margin-top: 7px; } .ov-tile-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; } /* ---- Seksjonsoverskrift ---- */ .ov-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.2px; margin: 30px 0 14px; text-transform: none; } .ov-h .ic { color: var(--accent); } .ov-h-note { color: var(--text-tertiary); font-size: 12px; font-weight: 400; letter-spacing: 0; } .ov-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(196,69,54,.5); animation: ovpulse 1.8s infinite; flex: none; } @keyframes ovpulse { 0% { box-shadow: 0 0 0 0 rgba(196,69,54,.45); } 70% { box-shadow: 0 0 0 7px rgba(196,69,54,0); } 100% { box-shadow: 0 0 0 0 rgba(196,69,54,0); } } .ov-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } @media (max-width: 1000px) { .ov-cols { grid-template-columns: 1fr; } } .ov-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .ov-card-head { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--border-light); font-size: 12.5px; color: var(--text-secondary); } .ov-card-head b { color: var(--text); font-size: 16px; font-weight: 600; margin-right: 3px; } .ov-head-live { justify-content: space-between; } .ov-big-live { font-size: 30px; font-weight: 600; color: var(--accent); letter-spacing: -.6px; font-variant-numeric: tabular-nums; } .ov-big-live small { font-size: 13px; color: var(--text-secondary); font-weight: 400; margin-left: 4px; } /* ---- Datakilder (logo-vegg) ---- */ .src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; } .src-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 17px; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color .2s, box-shadow .2s, transform .15s; } .src-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-3px); } .src-top { display: flex; align-items: center; gap: 12px; } .src-logo { width: 46px; height: 46px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .3px; font-family: 'DM Sans', sans-serif; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.18); } .src-logo[data-brand="brreg"] { background: linear-gradient(140deg, #0B6FC0, #0B4E88); } .src-logo[data-brand="skatt"] { background: linear-gradient(140deg, #8A3BB0, #5C2483); } .src-logo[data-brand="nav"] { background: linear-gradient(140deg, #E11, #B00000); font-size: 13px; } .src-logo[data-brand="eu"] { background: linear-gradient(140deg, #2A50C8, #142F8C); font-size: 13px; } .src-logo[data-brand="ntb"] { background: linear-gradient(140deg, #11938F, #0B6360); font-size: 13px; } .src-logo[data-brand="nora"] { background: linear-gradient(140deg, var(--accent), var(--accent-hover)); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; } .src-id { min-width: 0; } .src-name { font-size: 14px; font-weight: 600; letter-spacing: -.2px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .src-auth { font-size: 11.5px; color: var(--text-tertiary); margin-top: 1px; } .src-num { margin: 14px 0 11px; display: flex; align-items: baseline; gap: 6px; } .src-num b { font-size: 22px; font-weight: 600; color: var(--accent); letter-spacing: -.4px; font-variant-numeric: tabular-nums; } .src-num span { font-size: 11.5px; color: var(--text-secondary); } .src-tags { display: flex; flex-wrap: wrap; gap: 5px; } .src-tags span { font-size: 11px; padding: 2.5px 8px; border-radius: 6px; background: var(--accent-light); color: var(--accent); font-weight: 500; white-space: nowrap; } /* ---- Horisontale søylediagram (tech + events) ---- */ .ov-bars { display: flex; flex-direction: column; gap: 8px; } .ov-bar { display: grid; grid-template-columns: 142px 1fr 64px; gap: 11px; align-items: center; } .ov-bar-lab { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-bar-track { height: 11px; background: var(--bg2); border-radius: 6px; overflow: hidden; } .ov-bar-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); transition: width 1s cubic-bezier(.4,0,.2,1); } .ov-bar.ev .ov-bar-fill { background: linear-gradient(90deg, var(--blue), var(--accent)); } .ov-bar-val { font-size: 12.5px; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; font-family: 'Source Serif 4', Georgia, serif; } /* ---- Aksjonær: 22 års vekst ---- */ .ov-years { display: flex; align-items: flex-end; gap: 5px; height: 150px; padding-top: 8px; } .ov-year { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; min-width: 0; } .ov-year-bar { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent), var(--accent-light)); transition: height 1s cubic-bezier(.4,0,.2,1); } .ov-year:hover .ov-year-bar { background: var(--accent-hover); } .ov-year-lab { font-size: 9.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; } /* ---- AI-panel ---- */ .ov-ai-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ov-ai-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; font-weight: 600; font-size: 12.5px; padding: 5px 12px; border-radius: 8px; } .ov-ai-badge .ic { color: #fff; fill: #fff; stroke: none; width: 15px; height: 15px; } .ov-ai-num { font-size: 13px; color: var(--text-secondary); margin: 14px 0 8px; } .ov-ai-num b { color: var(--text); font-size: 16px; font-weight: 600; } .ov-ai-track { height: 8px; background: var(--bg2); border-radius: 5px; overflow: hidden; } .ov-ai-track span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); transition: width 1s ease; } .ov-ai-sig { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .ov-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; background: var(--accent-light); color: var(--accent); padding: 4px 10px; border-radius: 7px; } .ov-chip .ic { width: 13px; height: 13px; } .ov-ai-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-light); font-size: 12px; color: var(--text-tertiary); line-height: 1.5; } /* ---- Nora vs. Vainu ---- */ .vs-table { width: 100%; border-collapse: collapse; font-size: 13px; } .vs-table th { text-align: left; padding: 7px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-tertiary); border-bottom: 1px solid var(--border); } .vs-table th:nth-child(2), .vs-table th:nth-child(3) { text-align: center; width: 96px; } .vs-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); } .vs-table td:nth-child(2), .vs-table td:nth-child(3) { text-align: center; } .vs-table tr:last-child td { border-bottom: none; } .vs-table td:nth-child(2) { background: var(--accent-light); } .vs-y { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); } .vs-y .ic { color: #fff; width: 14px; height: 14px; stroke-width: 3; } .vs-edge { display: block; font-size: 10.5px; color: var(--accent); margin-top: 3px; font-weight: 600; } .vs-p { font-size: 11px; color: var(--orange); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; } .vs-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--border-light); } .vs-n .ic { color: var(--text-tertiary); width: 13px; height: 13px; } .vs-foot { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border-light); font-size: 12px; color: var(--text-secondary); line-height: 1.5; }