/* ============================================================= Stimma redesign v3 — designsystem Skapad: 2026-05-06 -------------------------------------------------------------- Design-tokens, typografi och bas-stilar för den omdesignade user-vyn. Filen läses parallellt med include/css/style.css — nya klasser läggs på sidan av befintliga så ingen JS-referens bryts. Dark mode hanteras via [data-bs-theme="dark"]-overrides längst ner i denna fil. ============================================================= */ :root { /* Färger — direkt från prototypen */ --rd-bg-page: #F7F6F2; --rd-bg-surface: #FFFFFF; --rd-bg-muted: #F0EFE9; --rd-bg-info: #E6F1FB; --rd-text-primary: #1A1A19; --rd-text-secondary: #6B6B66; --rd-text-tertiary: #9C9C97; --rd-text-info: #0C447C; --rd-border: rgba(0, 0, 0, 0.08); --rd-border-strong: rgba(0, 0, 0, 0.14); --rd-accent-purple-bg: #EEEDFE; --rd-accent-purple-fg: #3C3489; --rd-accent-teal-bg: #E1F5EE; --rd-accent-teal-fg: #085041; --rd-accent-amber-bg: #FAEEDA; --rd-accent-amber-fg: #854F0B; --rd-radius-sm: 6px; --rd-radius-md: 8px; --rd-radius-lg: 12px; --rd-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --rd-font-serif: 'Fraunces', Georgia, serif; --rd-sidebar-width: 220px; } /* Dark mode-varianter — sidan får [data-bs-theme="dark"] från pre-render-scriptet i include/header.php. Bootstrap byter sina egna tokens (--bs-body-bg etc) samtidigt. */ [data-bs-theme="dark"] { --rd-bg-page: #16171A; --rd-bg-surface: #1F2024; --rd-bg-muted: #2A2C31; --rd-bg-info: #1A2C40; --rd-text-primary: #E8E8E5; --rd-text-secondary: #A8A8A2; --rd-text-tertiary: #6E6E68; --rd-text-info: #7BB3E8; --rd-border: rgba(255, 255, 255, 0.10); --rd-border-strong: rgba(255, 255, 255, 0.18); --rd-accent-purple-bg: #2A2856; --rd-accent-purple-fg: #BDB7F3; --rd-accent-teal-bg: #1A3D34; --rd-accent-teal-fg: #8DDFC6; --rd-accent-amber-bg: #3D2C12; --rd-accent-amber-fg: #E8C589; } /* ============================================================ Bas: applicera redesign-typografi och bg på Behåller befintliga klasser (.bg-light osv) men säger: när redesign-CSS är laddad, dominera typsnitt + bg-färg. ============================================================ */ body { font-family: var(--rd-font-sans); background-color: var(--rd-bg-page); } [data-bs-theme="dark"] body { background-color: var(--rd-bg-page); } /* Serif-rubriker — applicera på h1.rd-hero (ny klass i markup) */ .rd-hero { font-family: var(--rd-font-serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; } /* ============================================================ App-shell: sidebar + main ============================================================ */ .rd-shell { display: flex; min-height: 100vh; } /* Sidebar */ .rd-sidebar { width: var(--rd-sidebar-width); flex-shrink: 0; background: var(--rd-bg-surface); border-right: 0.5px solid var(--rd-border); padding: 20px 14px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 1000; } .rd-brand { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; } .rd-brand img { height: 56px; width: auto; max-width: 100%; object-fit: contain; } .rd-nav { display: flex; flex-direction: column; gap: 2px; } .rd-nav-section { font-size: 11px; color: var(--rd-text-tertiary); text-transform: uppercase; letter-spacing: 0.07em; padding: 0 10px 8px; margin-top: 20px; } .rd-nav-section:first-of-type { margin-top: 0; } /* OBS: skiljer sig från Bootstrap .nav-link genom prefix .rd-sidebar */ .rd-sidebar a.rd-nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--rd-radius-sm); font-size: 13.5px; color: var(--rd-text-secondary); text-decoration: none; transition: background 0.15s, color 0.15s; cursor: pointer; } .rd-sidebar a.rd-nav-link:hover { background: var(--rd-bg-muted); color: var(--rd-text-primary); } .rd-sidebar a.rd-nav-link.active { background: var(--rd-bg-muted); color: var(--rd-text-primary); } .rd-sidebar a.rd-nav-link svg { flex-shrink: 0; } .rd-user-card { margin-top: auto; padding: 12px 10px; border-top: 0.5px solid var(--rd-border); display: flex; flex-direction: column; gap: 10px; } .rd-user-card-row { display: flex; align-items: center; gap: 10px; min-width: 0; } .rd-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--rd-bg-info); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--rd-text-info); flex-shrink: 0; } .rd-user-name { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--rd-text-primary); } .rd-user-org { font-size: 11.5px; color: var(--rd-text-tertiary); line-height: 1.3; } .rd-user-actions { display: flex; gap: 4px; justify-content: flex-start; } /* Main */ .rd-main { flex: 1; min-width: 0; padding: 24px 36px 36px; display: flex; flex-direction: column; gap: 28px; max-width: 1100px; } /* Org-bar */ .rd-org-bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 0.5px solid var(--rd-border); gap: 12px; flex-wrap: wrap; } .rd-org-info { display: flex; align-items: center; gap: 10px; min-width: 0; } .rd-org-logo { width: 56px; height: 56px; border-radius: var(--rd-radius-md); background: #2D5F3F; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-family: var(--rd-font-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; flex-shrink: 0; overflow: hidden; } .rd-org-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 4px; } .rd-org-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .rd-org-label { font-size: 11px; color: var(--rd-text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; } .rd-org-name { font-size: 16px; font-weight: 500; color: var(--rd-text-primary); margin-top: 2px; } .rd-org-actions { display: flex; gap: 6px; } /* Page-head */ .rd-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .rd-greeting { font-size: 12.5px; color: var(--rd-text-tertiary); letter-spacing: 0.01em; } .rd-page-head h1 { font-family: var(--rd-font-serif); font-size: 28px; font-weight: 400; margin: 4px 0 0; letter-spacing: -0.02em; line-height: 1.15; color: var(--rd-text-primary); } /* Icon-button (sök/aviseringar/profil) */ .rd-icon-btn { width: 34px; height: 34px; border-radius: var(--rd-radius-sm); border: 0.5px solid var(--rd-border-strong); background: var(--rd-bg-surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--rd-text-secondary); transition: background 0.15s; text-decoration: none; } .rd-icon-btn:hover { background: var(--rd-bg-muted); color: var(--rd-text-primary); } /* Stats — 3-col */ .rd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .rd-stat { background: var(--rd-bg-muted); border-radius: var(--rd-radius-md); padding: 8px 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .rd-stat-label { font-size: 12px; color: var(--rd-text-secondary); letter-spacing: 0.02em; } .rd-stat-value { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--rd-text-primary); line-height: 1.1; } /* Section-headings */ .rd-section { display: flex; flex-direction: column; gap: 12px; } .rd-section-head { display: flex; align-items: baseline; justify-content: space-between; } .rd-section-head h2 { font-size: 12px; font-weight: 500; margin: 0; color: var(--rd-text-secondary); text-transform: uppercase; letter-spacing: 0.09em; font-family: var(--rd-font-sans); } .rd-section-meta { font-size: 12px; color: var(--rd-text-tertiary); } /* Course card (redesign) */ .rd-course { background: var(--rd-bg-surface); border: 0.5px solid var(--rd-border); border-radius: var(--rd-radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; transition: border-color 0.15s; } .rd-course:hover { border-color: var(--rd-border-strong); } .rd-course-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .rd-course-info { display: flex; gap: 14px; min-width: 0; } .rd-course-icon { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rd-course-icon.purple { background: var(--rd-accent-purple-bg); color: var(--rd-accent-purple-fg); } .rd-course-icon.teal { background: var(--rd-accent-teal-bg); color: var(--rd-accent-teal-fg); } .rd-course-icon.amber { background: var(--rd-accent-amber-bg); color: var(--rd-accent-amber-fg); } .rd-course-meta { font-size: 11px; color: var(--rd-text-tertiary); letter-spacing: 0.05em; text-transform: uppercase; } .rd-course-title { font-size: 16px; font-weight: 500; margin-top: 3px; line-height: 1.3; letter-spacing: -0.005em; color: var(--rd-text-primary); } .rd-course-next { font-size: 13px; color: var(--rd-text-secondary); margin-top: 5px; } .rd-course-percent { font-size: 11.5px; color: var(--rd-text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; } .rd-progress { height: 3px; background: var(--rd-bg-muted); border-radius: 2px; overflow: hidden; } .rd-progress-fill { height: 100%; background: var(--rd-text-primary); border-radius: 2px; } .rd-actions { display: flex; gap: 8px; flex-wrap: wrap; } .rd-btn { font-size: 12.5px; padding: 7px 14px; border-radius: var(--rd-radius-sm); border: 0.5px solid var(--rd-border-strong); background: var(--rd-bg-surface); color: var(--rd-text-primary); font-family: inherit; cursor: pointer; transition: background 0.15s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .rd-btn:hover { background: var(--rd-bg-muted); color: var(--rd-text-primary); } .rd-btn-primary { background: var(--rd-text-primary); color: var(--rd-bg-surface); border-color: var(--rd-text-primary); } .rd-btn-primary:hover { background: #000; color: var(--rd-bg-surface); } [data-bs-theme="dark"] .rd-btn-primary:hover { background: var(--rd-text-primary); opacity: 0.9; } /* Achievements preview */ .rd-achievements { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .rd-badge-card { background: var(--rd-bg-surface); border: 0.5px solid var(--rd-border); border-radius: var(--rd-radius-md); padding: 14px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; transition: border-color 0.15s; text-decoration: none; color: var(--rd-text-primary); } .rd-badge-card:hover { border-color: var(--rd-border-strong); color: var(--rd-text-primary); } .rd-badge-card.locked { opacity: 0.5; } .rd-badge-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .rd-badge-icon.amber { background: var(--rd-accent-amber-bg); color: var(--rd-accent-amber-fg); } .rd-badge-icon.teal { background: var(--rd-accent-teal-bg); color: var(--rd-accent-teal-fg); } .rd-badge-icon.purple { background: var(--rd-accent-purple-bg); color: var(--rd-accent-purple-fg); } .rd-badge-icon.muted { background: var(--rd-bg-muted); color: var(--rd-text-tertiary); } .rd-badge-name { font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--rd-text-primary); } .rd-badge-sub { font-size: 10.5px; color: var(--rd-text-tertiary); } /* ============================================================ Mobil/responsivt < 768px: sidebar blir overlay som visas via .rd-sidebar-open ============================================================ */ .rd-sidebar-toggle { display: none; } .rd-sidebar-backdrop { display: none; } @media (max-width: 768px) { .rd-shell { flex-direction: column; } .rd-sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 2px 0 12px rgba(0,0,0,0.15); } body.rd-sidebar-open .rd-sidebar { transform: translateX(0); } body.rd-sidebar-open .rd-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; } .rd-sidebar-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--rd-bg-surface); border: 0.5px solid var(--rd-border-strong); border-radius: var(--rd-radius-sm); padding: 6px 10px; cursor: pointer; color: var(--rd-text-primary); } .rd-main { padding: 16px 16px 24px; } .rd-stats { grid-template-columns: 1fr; } .rd-achievements { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-org-bar { flex-direction: column; align-items: flex-start; } } /* ============================================================ Tema-toggle och profile-button i user-card använder samma ID:n som tidigare (#stimmaThemeToggle) — JS bryts inte. ============================================================ */ .rd-sidebar #stimmaThemeToggle, .rd-sidebar [data-bs-target="#profilePanel"] { color: var(--rd-text-secondary); } /* ============================================================ Skip-link — synlig på fokus så tangentbordsanvändare kan hoppa förbi sidebaren direkt till innehållet. ============================================================ */ .rd-skip-link { position: absolute; top: -40px; left: 8px; background: var(--rd-text-primary); color: var(--rd-bg-surface); padding: 8px 14px; border-radius: var(--rd-radius-sm); z-index: 2000; text-decoration: none; font-weight: 500; } .rd-skip-link:focus { top: 8px; } /* ============================================================ Tangentbordsfokus — synlig outline på alla rd-element (Bootstrap dimper det ibland med default-stil) ============================================================ */ .rd-sidebar a:focus-visible, .rd-icon-btn:focus-visible, .rd-btn:focus-visible, .rd-badge-card:focus-visible { outline: 2px solid var(--rd-text-info); outline-offset: 2px; } /* ============================================================ Lektionspaginator — multi-page lektion Varje .lesson-page är fixed-height (calc(100vh - chrome)) med intern scroll om innehållet flödar över. Bara aktiv sida syns. ============================================================ */ .lesson-paginator { display: flex; flex-direction: column; } /* Content-slices inom content-cardet: fix-höjd, intern scroll, padding */ section.lesson-page[data-page-kind="content"] { min-height: calc(100vh - 320px); max-height: calc(100vh - 260px); overflow-y: auto; padding: 4px 8px; color: var(--rd-text-primary); } /* Alla .lesson-page (både sections och kort): default dolda om inte aktiva */ .lesson-page { display: none; } .lesson-page.active { display: block; } .lesson-page-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border: 0.5px solid var(--rd-border); border-radius: var(--rd-radius-md); background: var(--rd-bg-muted); margin-bottom: 16px; position: sticky; bottom: 16px; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } [data-bs-theme="dark"] .lesson-page-nav { box-shadow: 0 4px 16px rgba(0,0,0,0.4); } .lesson-page-indicator { font-size: 13px; color: var(--rd-text-secondary); font-variant-numeric: tabular-nums; } .lesson-page-prev, .lesson-page-next { font-size: 13.5px; padding: 8px 16px; border-radius: var(--rd-radius-sm); border: 0.5px solid var(--rd-border-strong); background: var(--rd-bg-surface); color: var(--rd-text-primary); cursor: pointer; font-family: inherit; transition: background 0.15s; display: inline-flex; align-items: center; gap: 6px; } .lesson-page-prev:hover:not(:disabled), .lesson-page-next:hover:not(:disabled) { background: var(--rd-bg-muted); } .lesson-page-prev:disabled, .lesson-page-next:disabled { opacity: 0.4; cursor: not-allowed; } .lesson-page-next.is-finish { background: var(--rd-text-primary); color: var(--rd-bg-surface); border-color: var(--rd-text-primary); font-weight: 500; } .lesson-page-next.is-finish:hover:not(:disabled) { background: #000; } [data-bs-theme="dark"] .lesson-page-next.is-finish:hover:not(:disabled) { opacity: 0.85; } /* Mobil: mindre chrome-höjd-uträkning */ @media (max-width: 768px) { section.lesson-page[data-page-kind="content"] { min-height: calc(100vh - 240px); max-height: calc(100vh - 200px); padding: 4px 6px; } .lesson-page-nav { padding: 12px 14px; } .lesson-page-indicator { font-size: 12px; } } /* TinyMCE-redigerare — visa pagebreak-markören tydligt */ .mce-content-body img.mce-pagebreak, .mce-content-body img[data-mce-resize="false"][src*="pagebreak"] { border: 2px dashed var(--rd-text-info, #0c447c); background-color: var(--rd-bg-info, #e6f1fb); width: 100%; height: 28px; margin: 12px 0; }