/* protokoll.simplineers.se — husstil ovanpå Simplineers delade varumärkestokens. * * brand/*.css är OFÖRÄNDRADE kopior från github.com/simplineers/brand-guidelines * (commit 59a42a2, 2026-07-01). Rör dem inte här — ändra i brand-repot och kopiera om, * annars driver husstilen isär från övriga sajter (se BRANDING.md § "Undvik drift"). * * De importeras i stället för att länkas per sida: varje mall har eget , och fyra * link-taggar i sex mallar blir fyra som glöms i den sjunde. Ett link-element räcker. * * Signeringstjänsten är inte en regelverksdomän, så accenten är navets indigo (standard i * accents.css) — inget data-brand sätts. */ @import url("brand/colors.css"); @import url("brand/typography.css"); @import url("brand/accents.css"); @import url("fonts.css"); /* ---------- Semantiska husvariabler, mappade på varumärkestokens ---------- * * Kontrasterna nedan är räknade, inte gissade (WCAG 1.4.3 AA ≥ 4.5:1 för text, * 1.4.11 ≥ 3:1 för gränser/fokus). Byter du en färg: räkna om paret. */ :root { color-scheme: light dark; --bg: var(--slate-100); /* #F4F5F9 */ --card: var(--white); --fg: var(--ink); /* 16.13:1 mot --bg, 17.57:1 mot kort */ --muted: var(--slate-500); /* 5.64:1 mot --bg, 6.15:1 mot kort */ --border: var(--slate-200); /* Länkfärg ≠ knappfärg. Brand-indigo ger bara 4.26:1 mot sidbakgrunden och underkänns som text; indigo-700 ger 5.91:1. Knappen behåller brand-indigo som yta — där är vit text 4.64:1, alltså godkänt. */ --link: var(--indigo-700); --accent: var(--indigo); --accent-hover: var(--indigo-700); --btn-fg: var(--white); /* vit på --indigo = 4.64:1 */ --error: #B3261E; /* 6.54:1 mot kort — brandets --danger gav bara 4.38:1 */ --ok-fg: #17603E; /* 7.56:1 mot kort */ --ok-bg: #E7F4ED; --focus: var(--indigo-700); /* 5.91:1 mot --bg, långt över 3:1-kravet */ --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(20, 24, 43, 0.06), 0 8px 24px -12px rgba(20, 24, 43, 0.18); } @media (prefers-color-scheme: dark) { :root { --bg: var(--ink); /* #14182B */ --card: var(--slate-700); /* #2E3450 */ --fg: var(--slate-100); /* 11.19:1 mot kort */ --muted: var(--slate-300); /* 7.31:1 mot kort — slate-400 gav bara 3.84:1 */ --border: #3D446B; --link: var(--indigo-300); /* 5.86:1 mot kort, 8.45:1 mot --bg */ --accent: var(--indigo-500); --accent-hover: var(--indigo-300); --btn-fg: var(--ink); /* mörk text på --indigo-500 = 5.18:1; vit gav 3.39:1 */ --error: #F49A94; /* 5.74:1 mot kort */ --ok-fg: #7FD8A4; /* 10.26:1 mot --bg */ --ok-bg: #1C3A2C; --focus: var(--indigo-300); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6); } } * { box-sizing: border-box; } /* hidden-attributet måste vinna över våra egna display-regler. Webbläsarens [hidden] { display: none } är en attributselektor och förlorar mot varje klassregel som sätter display — t.ex. .qr-extend { display: flex }, som gjorde att erbjudandet om en ny QR-kod syntes direkt i stället för efter 25 sekunder. Regeln här gäller alla element och stänger hela felklassen, inte bara det ena fallet. */ [hidden] { display: none !important; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); padding: 1.5rem; -webkit-font-smoothing: antialiased; } /* ---------- Varumärkeshuvud ---------- */ .brandbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: 60rem; margin: 0 auto; } .brandbar img { display: block; height: 44px; width: auto; } .brandbar .logo-dark { display: none; } @media (prefers-color-scheme: dark) { .brandbar .logo-light { display: none; } .brandbar .logo-dark { display: block; } } body { align-items: stretch; justify-content: flex-start; } main { width: 100%; max-width: 60rem; margin: 0 auto; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 2rem; box-shadow: var(--shadow); text-align: left; margin-bottom: 1.25rem; } .topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .muted { color: var(--muted); } .tag { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--accent-tint); color: var(--indigo-700); } @media (prefers-color-scheme: dark) { .tag { background: #2A2F52; color: var(--indigo-300); } } /* Dagordningen. Numret är punktens position och blir punktnumreringen i protokollet — därför visas det stort och tydligt, inte som en diskret detalj. */ .agenda { list-style: none; padding: 0; margin: 0; } .agenda li { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 0.75rem; align-items: start; padding: 0.9rem 0; border-top: 1px solid var(--border); } .agenda li:first-child { border-top: 0; } .agenda .nr { font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--muted); } .agenda .rubrik { font-weight: var(--fw-semibold); } .agenda .underlag { color: var(--muted); font-size: var(--fs-sm); margin: 0.25rem 0 0; white-space: pre-wrap; } .agenda .verktyg { display: flex; gap: 0.35rem; align-items: center; } .agenda .verktyg button { padding: 0.3rem 0.55rem; font-size: var(--fs-sm); background: transparent; color: var(--link); border: 1px solid var(--border); } .agenda .verktyg button:hover { background: var(--bg); } .agenda .verktyg button.fara { color: var(--error); } .empty { color: var(--muted); padding: 1.5rem 0; } .inline-form { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; } .inline-form .field { margin: 0; flex: 1; min-width: 14rem; } table.moten { width: 100%; border-collapse: collapse; } table.moten th, table.moten td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); } table.moten th { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* ---------- BankID: autostart är den primära vägen på samma enhet ---------- */ .btn-bankid { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; font-weight: var(--fw-semibold); color: var(--btn-fg); background: var(--accent); border-radius: var(--radius-sm); padding: 0.8rem 1.2rem; margin: 0.25rem 0 0.75rem; text-decoration: none; transition: background-color 120ms ease, transform 120ms ease; } .btn-bankid:hover { background: var(--accent-hover); } .btn-bankid:active { transform: translateY(1px); } .bankid-hint { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 1rem; } /* ---------- Kopiera-länken: bevarad (WCAG 1.1.1) men infälld ---------- Den ska inte konkurrera visuellt med QR-koden och autostart-knappen, som är de vägar de flesta använder.
ger tangentbords- och skärmläsaråtkomst utan egen JS. */ .copy-details { margin: 0.25rem 0 0.5rem; text-align: left; } .copy-details > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-sm); padding: 0.35rem 0; list-style: none; } .copy-details > summary::-webkit-details-marker { display: none; } .copy-details > summary::before { content: "▸ "; } .copy-details[open] > summary::before { content: "▾ "; } .copy-details > summary:hover { color: var(--fg); } .copy-help { color: var(--muted); font-size: var(--fs-sm); margin: 0.25rem 0 0.5rem; } .copy-row { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.5rem; } .copy-row input { flex: 1; min-width: 0; font: inherit; font-family: var(--font-mono); font-size: var(--fs-xs); padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); } .copy-row button { padding: 0.45rem 0.8rem; white-space: nowrap; } /* QR-koden är ett