/* ========================================================================= FluxCMS Admin — design-system (genskabt fra design-handoff'en). Tokens, self-hostet font og komponent-klasser. Inline-styles fra .dc.html-prototyperne er flyttet hertil som genbrugelige klasser. --accent server-renderes på → intet farve-flash, per-site, AA-sikret. ========================================================================= */ /* ── Self-hostet Instrument Sans (woff2, IKKE Google Fonts CDN — §16/GDPR) ── */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Self-hostet Figtree (overskrifts-font, woff2 — IKKE Google CDN, §16/GDPR) ── */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/figtree-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Tokens ───────────────────────────────────────────────────────────── */ :root { /* --accent sættes server-side på (fast FluxCMS-brand, ikke per-site); fallback her. */ --accent: #2B54D6; /* Overskrifts-font (Figtree, self-hostet). Brødtekst = Instrument Sans. */ --heading-font: 'Figtree'; /* Mørkt navy chrome (rebrand) — topbar + sidebar. */ --chrome: #101D33; --chrome-edge: #1E2D45; --nav-text: #A7B4C6; --nav-label: #6F8095; --chrome-divider: rgba(255,255,255,0.10); /* Afledte accent-toner (color-mix, jf. README). */ --accent-tint: color-mix(in srgb, var(--accent) 9%, #fff); --accent-tint-6: color-mix(in srgb, var(--accent) 6%, #fff); --accent-tint-14: color-mix(in srgb, var(--accent) 14%, #fff); --accent-border: color-mix(in srgb, var(--accent) 26%, #fff); --accent-hover: color-mix(in srgb, var(--accent) 86%, #000); --accent-focus: color-mix(in srgb, var(--accent) 16%, transparent); /* Flader & neutraler. */ --canvas: #eceef1; --sidebar: #101D33; --card: #ffffff; --fill: #f8f8f7; --fill-2: #fafafa; --card-border: #e7e7e4; --input-border: #e1e2e0; --divider: #f0f0ee; --divider-2: #f4f4f2; /* Tekst. */ --ink: #16202E; --body: #2c2e2f; --muted: #55585b; --muted-2: #6c6e70; --muted-3: #7c7e80; --faint: #9a9c9d; --faint-2: #a4a6a8; --placeholder:#a9adb0; --bezel: #16171a; /* Status. */ --ok-fg:#1f7a4c; --ok-bg:#e6f3ec; --ok-bd:#cce6d8; --ok-dot:#2f9e63; --draft-fg:#8a5e1a; --draft-bg:#f6ecd6; --draft-bd:#ecdcb8; --draft-dot:#c69a3e; --plan-fg:#3f4a8a; --plan-bg:#eaecf7; --plan-bd:#d4d8ee; --plan-dot:#5566b5; --danger-fg:#b23a22; --danger-bg:#f9eae6; /* Radius / skygger. */ --r-input: 10px; --r-card: 16px; --r-pill: 999px; --shadow-card: 0 1px 2px rgba(20,22,24,.03); --shadow-modal: 0 24px 60px rgba(0,0,0,.28); --shadow-device: 0 30px 70px rgba(0,0,0,.28); /* Density (default Kompakt; overstyres via [data-density]). */ --pad: 20px; --gap: 16px; --field-gap: 15px; } [data-density="balanceret"] { --pad:24px; --gap:20px; --field-gap:16px; } [data-density="rummelig"] { --pad:29px; --gap:25px; --field-gap:18px; } /* ── Base ─────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 15px; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } input::placeholder, textarea::placeholder { color: var(--placeholder); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── App-grid (topbar + sidebar + canvas) ─────────────────────────────── */ .app { min-height: 100vh; } .topbar { position: sticky; top: 0; z-index: 30; height: 64px; display: flex; align-items: center; gap: 14px; background: var(--chrome); border-bottom: 1px solid var(--chrome-edge); padding: 0 18px 0 0; color: #fff; } .topbar .brand { width: 248px; min-width: 248px; height: 100%; display: flex; align-items: center; gap: 11px; padding-left: 22px; } .brand-tile { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -.02em; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .brand-word { font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: #fff; font-family: var(--heading-font, 'Figtree'), 'Instrument Sans', system-ui, sans-serif; } .breadcrumb { font-size: 14px; color: var(--nav-text); display: flex; gap: 7px; align-items: center; } .breadcrumb .sep { color: var(--nav-label); } .topbar .spacer { flex: 1; } .autosave { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--nav-text); } .autosave .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-dot); } .shell { display: flex; align-items: flex-start; } .sidebar { width: 248px; min-width: 248px; background: var(--sidebar); border-right: 1px solid var(--chrome-edge); position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; padding: 14px 12px; overflow-y: auto; } .nav-group-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--nav-label); padding: 14px 10px 6px; } .nav-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--nav-text); cursor: pointer; text-decoration: none; } .nav-row:hover { background: rgba(255,255,255,0.06); color: #e7edf5; } .nav-row.active { font-weight: 600; color: #fff; background: var(--accent); } .nav-row.active:hover { background: var(--accent); color: #fff; } .nav-row .ico { width: 17px; height: 17px; flex: 0 0 auto; opacity: .9; } .nav-row .count { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--nav-text); background: rgba(255,255,255,0.10); border-radius: var(--r-pill); padding: 1px 8px; } .nav-row.active .count { color: #fff; background: rgba(255,255,255,0.22); } .hub-pill { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--accent); border-radius: var(--r-pill); padding: 2px 8px; letter-spacing: .02em; } .account-card { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid var(--chrome-divider); text-decoration: none; } .account-card:hover { background: rgba(255,255,255,0.10); } .avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .account-card .nm { font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.2; } .account-card .rl { font-size: 12px; color: var(--nav-text); } /* "Drevet af FluxCMS"-logo nederst i sidebaren (på navy). */ .brand-footer { margin-top: 16px; padding: 16px 7px 4px; border-top: 1px solid var(--chrome-divider); display: flex; flex-direction: column; align-items: center; gap: 6px; } .brand-footer .powered { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #7E8DA3; } .brand-footer img { display: block; height: auto; width: 186px; max-width: 100%; } .canvas { flex: 1; min-width: 0; background: var(--canvas); padding: 30px; } .canvas-inner { max-width: 1180px; margin: 0 auto; } /* ── Typografi ────────────────────────────────────────────────────────── */ /* Overskrifter (h1/h2) = Figtree (self-hostet); brødtekst = Instrument Sans. */ h1, h2, .page-h1, .section-h2, .card-h h2 { font-family: var(--heading-font, 'Figtree'), 'Instrument Sans', system-ui, sans-serif; } .page-h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; } .page-sub { font-size: 14px; color: var(--muted-2); margin: 0 0 22px; } .section-h2 { font-size: 16.5px; font-weight: 600; margin: 0 0 14px; } .eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); } /* ── Kort ─────────────────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--pad); } .card + .card, /* Editorer wrapper ofte kort i et
; bevar samme lodrette rytme på tværs. */ .card + form, form + .card, form + form { margin-top: var(--gap); } .card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .card-h h2 { font-size: 16px; font-weight: 600; margin: 0; } .card-h .spacer { flex: 1; } .stack { display: flex; flex-direction: column; gap: var(--gap); } .row { display: flex; gap: var(--gap); align-items: flex-start; } .row > * { flex: 1; } .grid { display: grid; gap: var(--gap); } /* ── Knapper ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1; padding: 11px 16px; border-radius: var(--r-input); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 6px var(--accent-focus); } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { background: #fff; color: var(--body); border-color: var(--input-border); } .btn-ghost:hover { background: var(--fill); } .btn-subtle { background: var(--fill); color: var(--body); border-color: var(--card-border); } .btn-subtle:hover { background: #f0f0ee; } /* Neutrale knapper i den navy topbar → lys, chrome-native variant (btn-primary er allerede accent). */ .topbar .btn-ghost, .topbar .btn-subtle, .topbar .btn-muted { background: rgba(255,255,255,0.08); color: #e7edf5; border-color: rgba(255,255,255,0.20); } .topbar .btn-ghost:hover, .topbar .btn-subtle:hover, .topbar .btn-muted:hover { background: rgba(255,255,255,0.15); } .btn-danger { background: var(--danger-fg); color: #fff; } .btn-danger:hover { background: color-mix(in srgb, var(--danger-fg) 88%, #000); } .btn-sm { padding: 8px 12px; font-size: 13.5px; } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ── Felter ───────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 7px; } /* Felter side om side i en .row/.grid må ikke arve den lodrette felt-margin. */ .row > .field, .grid > .field { margin-top: 0; } /* Konsistent lodret rytme mellem alle stablede form-blokke (.field/.row/.grid) i et kort — uden ad-hoc inline-margins. */ .field + .field, .field + .row, .field + .grid, .row + .field, .row + .row, .row + .grid, .grid + .field, .grid + .row, .grid + .grid { margin-top: var(--field-gap); } .label { font-size: 13.5px; font-weight: 600; color: var(--ink); } .label .req { color: var(--danger-fg); } .help { font-size: 13px; color: var(--muted-2); } .input, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=date], input[type=search], select, textarea { font: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--input-border); border-radius: var(--r-input); padding: 11px 13px; width: 100%; outline: none; transition: border-color .15s, box-shadow .15s; } textarea { resize: vertical; min-height: 96px; } .input:focus, input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-focus); } .field-error .input, .field-error input, .field-error select, .field-error textarea { border-color: var(--danger-fg); } .error-msg { font-size: 13px; color: var(--danger-fg); } /* ── Toggle (pill-switch) ─────────────────────────────────────────────── */ .toggle { position: relative; display: inline-block; width: 48px; height: 28px; flex: 0 0 auto; cursor: pointer; } .toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .toggle .track { position: absolute; inset: 0; background: #d3d5d4; border-radius: var(--r-pill); transition: background .2s; } .toggle .knob { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; } .toggle input:checked + .track { background: var(--accent); } .toggle input:checked + .track + .knob { transform: translateX(20px); } /* ── Status-badges & pills ────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid transparent; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; } /* badge-ok = accent-tint → "Udgivet/Live" (content-status), jf. Design-token-spec. */ .badge-ok { color: var(--accent); background: var(--accent-tint); border-color: var(--accent-border); } .badge-ok .dot { background: var(--accent); } /* badge-green = semantisk SUCCES (sundhed God, sikkerhed OK, 2FA aktiv, signeret) — grøn, IKKE accent. */ .badge-green { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-bd); } .badge-green .dot { background: var(--ok-dot); } .badge-draft { color: var(--draft-fg); background: var(--draft-bg); border-color: var(--draft-bd); } .badge-draft .dot { background: var(--draft-dot); } .badge-plan { color: var(--plan-fg); background: var(--plan-bg); border-color: var(--plan-bd); } .badge-plan .dot { background: var(--plan-dot); } .badge-danger { color: var(--danger-fg); background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger-fg) 24%, #fff); } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); background: var(--fill); color: var(--muted); border: 1px solid var(--card-border); } .pill-lock { color: var(--muted-2); } /* ── Tabeller / lister ────────────────────────────────────────────────── */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--faint); padding: 16px 12px 11px; } .table td { padding: 13px 12px; border-top: 1px solid var(--divider); vertical-align: middle; } .table tr.clickable { cursor: pointer; } .table tr.clickable:hover td { background: var(--fill-2); } .list-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } /* Når en liste-toolbar (søg/handling) følger et kort (fx rolle-legenden), giv luft. */ .card + .list-toolbar { margin-top: var(--gap); } .search { position: relative; flex: 1; max-width: 360px; } .search input { padding-left: 36px; } .search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); } /* ── Segmenterede filtre ──────────────────────────────────────────────── */ .segmented { display: inline-flex; background: var(--fill); border: 1px solid var(--card-border); border-radius: var(--r-input); padding: 3px; gap: 2px; } .segmented button { font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; border: 0; padding: 6px 12px; border-radius: 7px; cursor: pointer; } .segmented button.active { background: #fff; color: var(--accent); box-shadow: var(--shadow-card); } /* ── Modaler ──────────────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(20,22,24,.4); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 60; } .modal { background: #fff; border-radius: 18px; box-shadow: var(--shadow-modal); width: 100%; max-width: 460px; padding: 26px; } .modal h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; } .modal .modal-body { font-size: 14px; color: var(--muted); } .modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; } [hidden] { display: none !important; } /* ── KPI / metrik-kort ────────────────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); } .kpi { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-card); padding: 18px; } .kpi .v { font-size: 28px; font-weight: 700; letter-spacing: -.02em; } .kpi .k { font-size: 13px; color: var(--muted-2); margin-top: 2px; } /* ── Advarsels-/info-bannere ──────────────────────────────────────────── */ .banner { display: flex; gap: 11px; padding: 13px 15px; border-radius: 12px; font-size: 13.5px; } .banner-warn { background: var(--draft-bg); border: 1px solid var(--draft-bd); color: var(--draft-fg); } .banner-info { background: var(--accent-tint); border: 1px solid var(--accent-border); color: var(--accent); } .banner-danger { background: var(--danger-bg); border: 1px solid color-mix(in srgb, var(--danger-fg) 24%, #fff); color: var(--danger-fg); } .banner-ok { background: var(--ok-bg); border: 1px solid var(--ok-bd); color: var(--ok-fg); } /* ── Billed-placeholdere (striped) ────────────────────────────────────── */ .ph-image { background: repeating-linear-gradient(135deg, #f0f0ee, #f0f0ee 9px, #e9e9e7 9px, #e9e9e7 18px); border: 1px solid var(--card-border); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 11.5px; letter-spacing: .02em; } /* ── Mediegrid ────────────────────────────────────────────────────────── */ .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; align-items: start; } /* flex-column: et