@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap'); /* ========================================================= ACCESSREADLAB – 3x3 EXPERIMENT THEME Font (3) x Contrast (3) Sterowanie: klasy na -> font-* i contrast-* ========================================================= */ @font-face { font-family: 'RobotoLab'; src: url('../fonts/Roboto-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'AtkinsonLab'; src: url('../fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexicLab'; src: url('../fonts/OpenDyslexic-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } :root { --lab-bg: #ffffff; --lab-fg: #000000; --lab-font: 'Inter', 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif; --divider-color: rgba(0, 0, 0, 0.12); --lab-primary: #1976d2; --lab-secondary: #512da8; --lab-error: #d32f2f; --lab-success: #388e3c; --mud-palette-appbar-text: #000000; --lab-surface: #f4f6fb; --lab-color-dys: #10b981; --lab-color-control: #3b82f6; --lab-color-warn: #f59e0b; } body.contrast-bw { --lab-bg: #ffffff; --lab-fg: #000000; } body.contrast-gw { --lab-bg: #ffffff; --lab-fg: #707070; --mud-palette-appbar-text: #000000; } body.contrast-bc { --lab-bg: #fdf6e3; --lab-fg: #1a1a1a; } body.font-roboto { --lab-font: 'RobotoLab', 'Segoe UI', 'Noto Sans', Arial; } body.font-atkinson { --lab-font: 'AtkinsonLab', 'Segoe UI', 'Noto Sans', Arial; } body.font-opendyslexic { --lab-font: 'OpenDyslexicLab', 'AtkinsonLab', 'RobotoLab', 'Segoe UI', 'Noto Sans', Arial; } html, body { height: 100%; margin: 0; background-color: var(--lab-surface) !important; color: var(--lab-fg) !important; font-family: var(--lab-font), system-ui, -apple-system, sans-serif !important; font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0; line-height: 1.65; transition: background-color 0.3s, color 0.3s, font-family 0.2s; } .mud-main-content { background-color: var(--lab-surface) !important; } .mud-typography, .mud-button, .mud-radio, .mud-checkbox, .mud-input, .mud-select, .mud-list, .mud-table, .mud-chip { color: var(--lab-fg) !important; font-family: var(--lab-font), system-ui, sans-serif !important; } .mud-typography { letter-spacing: 0.01em; } .mud-divider { background-color: var(--divider-color) !important; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :focus-visible { outline: 2px solid var(--lab-primary); outline-offset: 2px; border-radius: 2px; } a { color: var(--lab-primary); text-decoration: none; transition: color 0.2s; } a:hover { text-decoration: underline; } a:visited { color: var(--lab-secondary); } .lab-shell { min-height: 100vh; background: var(--lab-surface); } .lab-main { padding: 48px 3cm 64px 3cm; margin: 0 auto; display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 64px); } .lab-appbar { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .lab-appbar, .lab-appbar * { color: #ffffff !important; } .lab-appbar-title { font-weight: 700; letter-spacing: -0.01em; color: #ffffff !important; } .lab-card { width: 100%; margin: 0 auto; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 16px; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08); background: var(--lab-bg); transition: box-shadow 0.2s; } .lab-card:hover { box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12); } .lab-surface { background: var(--lab-bg); border: 1px solid rgba(15, 23, 42, 0.08); } .lab-highlight { border-radius: 12px; border: 1px solid rgba(25, 118, 210, 0.15); background: linear-gradient(135deg, rgba(25, 118, 210, 0.04), rgba(81, 45, 168, 0.03)); padding: 16px; } .lab-lead { font-size: 1.1rem; line-height: 1.75; } .lab-reading { line-height: 1.9; font-size: 1.05rem; } .lab-metric { font-weight: 600; } .lab-helper { border-left: 3px solid var(--lab-primary); padding-left: 12px; } .lab-checklist .mud-list-item { padding-left: 0; gap: 12px; align-items: flex-start; } .lab-chip-muted { border-color: rgba(25, 118, 210, 0.25); } .mud-button { border-radius: 10px; text-transform: none; font-weight: 600; letter-spacing: 0.01em; transition: transform 0.2s, box-shadow 0.2s; } .mud-button:active { transform: translateY(1px); } .mud-select .mud-input-adornment svg, .mud-input-adornment svg { fill: var(--lab-fg) !important; } .mud-button.mud-button-filled.mud-primary.mud-disabled { color: rgba(255,255,255,0.7) !important; } .lab-primary-action { box-shadow: 0 4px 12px rgba(25, 118, 210, 0.25); } .lab-primary-action:hover { box-shadow: 0 6px 16px rgba(25, 118, 210, 0.35); } .lab-field .mud-select-input, .lab-field .mud-input-slot { border-radius: 10px; } .lab-finish-default, .lab-finish-default * { font-family: 'RobotoLab', system-ui, -apple-system, sans-serif !important; } body.contrast-gw .mud-button .mud-button-label { color: #707070 !important; } body.contrast-gw .mud-button.mud-disabled .mud-button-label { color: rgba(112,112,112,0.55) !important; } .admin-page { margin-inline: auto; } .admin-page-stack { max-width: 1480px; margin-inline: auto; } .admin-filter-sticky { position: sticky; top: 12px; z-index: 20; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(6px); border-radius: 12px; border: 1px solid rgba(15, 23, 42, 0.08); } .admin-page .mud-grid { align-items: stretch; } .admin-page .mud-card, .admin-page .mud-paper { transition: box-shadow 0.2s ease, transform 0.2s ease; } .admin-page .mud-card:hover, .admin-page .mud-paper:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10); } /* --- Admin texts layout fixes --- */ .admin-texts-page { --admin-texts-button-height: 40px; } .admin-texts-toolbar { gap: 12px; flex-wrap: wrap; } .admin-texts-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; } .admin-texts-page .mud-typography, .admin-texts-page .mud-button-label, .admin-texts-page .mud-input, .admin-texts-page .mud-input-label, .admin-texts-page .mud-select, .admin-texts-page .mud-select-input { font-family: var(--lab-font), system-ui, -apple-system, sans-serif !important; } .admin-texts-actions .mud-button-root, .admin-texts-form-actions .mud-button-root { min-height: var(--admin-texts-button-height); line-height: 1.2; } .admin-texts-actions .mud-button-root { padding-inline: 14px; white-space: nowrap; } .admin-texts-form-actions .mud-button-root { min-width: 120px; } .admin-texts-table-actions { flex-wrap: wrap; } @media (max-width: 768px) { .lab-main { padding: 24px 16px 40px; align-items: flex-start; min-height: calc(100vh - 48px); } .lab-card, .premium-glass-card { border-radius: 14px !important; padding: 20px 16px !important; } .lab-card .pa-6, .premium-glass-card .pa-6 { padding: 16px !important; } .mud-container { padding-left: 0 !important; padding-right: 0 !important; } } @media (max-width: 480px) { html, body { font-size: 15px; } .lab-main { padding: 12px 8px 32px; } .lab-card, .premium-glass-card { border-radius: 12px !important; padding: 16px 12px !important; } .lab-highlight { padding: 12px; } .lab-lead { font-size: 1rem; line-height: 1.65; } .lab-reading { font-size: 1rem; line-height: 1.8; } .mud-typography-h4 { font-size: 1.35rem !important; } .mud-typography-h5 { font-size: 1.15rem !important; } .mud-chip { font-size: 0.7rem; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lab-primary-action { padding: 12px !important; font-size: 0.95rem !important; } /* Prevent horizontal overflow from wide fonts (OpenDyslexic) */ .lab-card, .premium-glass-card, .mud-card, .mud-paper { overflow-x: hidden; max-width: 100vw; box-sizing: border-box; } .mud-stack { max-width: 100%; } .mud-typography, .mud-button-label, legend, fieldset { overflow-wrap: break-word; word-break: break-word; } /* Wider fonts need smaller radio/checkbox label text */ body.font-opendyslexic .mud-radio .mud-typography, body.font-opendyslexic .mud-checkbox .mud-typography, body.font-opendyslexic .lab-reading { font-size: 0.9rem !important; } body.font-opendyslexic .mud-chip { max-width: 120px; font-size: 0.65rem; } } @media print { body { background: #fff !important; color: #000 !important; } .lab-card, .lab-surface { box-shadow: none; border: 1px solid #000; } } @media (forced-colors: active) { html, body { background: Window !important; color: WindowText !important; } a { color: LinkText !important; } .lab-appbar, .lab-card, .lab-surface { background: Window !important; border: 1px solid WindowText !important; box-shadow: none !important; } .lab-highlight { border-color: WindowText !important; } .lab-primary-action { box-shadow: none !important; } } #app { min-height: 100vh; } .loading-progress { width: 96px; height: 96px; display: block; margin: 120px auto 0; } .loading-progress circle { fill: none; stroke-width: 6px; transform-origin: 50% 50%; } .loading-progress circle:first-child { stroke: rgba(0, 0, 0, 0.08); } .loading-progress circle:last-child { stroke: var(--lab-primary); stroke-dasharray: 90, 150; stroke-dashoffset: 0; animation: lab-rotate 1.5s linear infinite, lab-dash 1.5s ease-in-out infinite; } .loading-progress-text { text-align: center; margin-top: 12px; color: var(--lab-primary); font-weight: 600; } @keyframes lab-rotate { 100% { transform: rotate(360deg); } } @keyframes lab-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; } } #blazor-error-ui { display: none; position: fixed; left: 0; bottom: 0; width: 100%; background: #fbe9e7; color: #5d1f1a; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); padding: 12px 16px; font-size: 0.95rem; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 10px; } .mud-typography, .mud-text, .mud-button-label, .mud-input, .mud-input-label, .mud-select, .mud-select-input, .mud-list-item-text, .mud-chip, .mud-chip .mud-chip-content, .mud-alert, .mud-helper-text, .mud-table, .mud-radio, .mud-checkbox, .mud-input-slot, .mud-select .mud-input { color: var(--lab-fg) !important; } .mud-paper, .mud-card { background: var(--lab-bg) !important; } .mud-container { background: transparent; } /* --- Admin results visual cleanup --- */ .admin-kpi-card { border-radius: 12px; } .admin-section-title { font-weight: 700; margin-top: 8px; } .admin-group-title-dys { color: var(--lab-color-dys); font-weight: 700; } .admin-group-title-control { color: var(--lab-color-control); font-weight: 700; } .admin-stat-paper { border-radius: 10px; } .admin-chart-paper { border-radius: 10px; } .admin-chart { height: 240px; } .admin-chart-lg { height: 280px; } @media (max-width: 960px) { .admin-chart, .admin-chart-lg { height: 220px; } } /* --- Admin dashboard extended cleanup --- */ .admin-hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px; position: relative; } .admin-hero-logout { position: absolute; top: 16px; right: 16px; } .admin-hero-row { width: 100%; } .admin-hero-title { color: #fff; font-weight: 700; } .admin-hero-subtitle { color: rgba(255, 255, 255, 0.9); } .admin-hero-refresh { color: #fff; margin-top: 8px; } .admin-text-strong { font-weight: 600; } .admin-text-muted { color: #666; } .admin-text-secondary { color: #999; } .admin-text-note { color: #666; display: block; } .admin-kpi-card-base { height: 100%; border-radius: 12px; } .admin-kpi-sessions { border-left: 4px solid #667eea; } .admin-kpi-dys { border-left: 4px solid var(--lab-color-dys); } .admin-kpi-control { border-left: 4px solid var(--lab-color-control); } .admin-kpi-comprehension { border-left: 4px solid var(--lab-color-warn); } .admin-kpi-value-sessions { color: #667eea; font-weight: 700; } .admin-kpi-value-dys { color: #10b981; font-weight: 700; } .admin-kpi-value-control { color: #3b82f6; font-weight: 700; } .admin-kpi-value-comprehension { color: #f59e0b; font-weight: 700; } .admin-rounded-card { border-radius: 12px; } .admin-chart-surface { background-color: #f8f9fa; } .admin-heatmap-box-lg { width: 100%; height: 320px; position: relative; } .admin-heatmap-box-md { width: 100%; height: 300px; position: relative; } .admin-footer-note { color: #999; margin-top: 32px; } .admin-filter-select { min-width: 220px; } .admin-full-width { width: 100%; } /* --- Fix: chart tooltip must stay readable over dark bars --- */ .mud-chart-tooltip { background-color: #ffffff !important; color: #111827 !important; border: 1px solid #d1d5db !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } .mud-chart-tooltip * { color: #111827 !important; } /* MudChart tooltips/labels are SVG, so use fill for readability */ .admin-page .mud-chart-tooltip rect, .admin-page .mud-chart-tooltip polygon, .admin-page .mud-chart-tooltip path { fill: #ffffff !important; stroke: #d1d5db !important; } .admin-page .mud-chart-tooltip text, .admin-page .mud-chart-tooltip tspan { fill: #111827 !important; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* --- Admin hero final polish (override generic MudPaper background) --- */ .mud-paper.admin-hero, .mud-card.admin-hero { background: linear-gradient(135deg, #5e35b1 0%, #1e88e5 100%) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; box-shadow: 0 10px 28px rgba(30, 64, 175, 0.25) !important; overflow: hidden; } .admin-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 45%); pointer-events: none; } .admin-hero .mud-typography, .admin-hero .mud-icon-root, .admin-hero .mud-button-root { color: #ffffff !important; } .admin-hero .mud-button-root.mud-button-outlined { border-color: rgba(255, 255, 255, 0.65) !important; background: rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(3px); } .admin-hero .mud-button-root.mud-button-outlined:hover { background: rgba(255, 255, 255, 0.2) !important; } .admin-hero .mud-icon-button:hover { background: rgba(255, 255, 255, 0.16) !important; } /* --- EAA / FullScreen Report Mode --- */ body.report-fullscreen-mode { background: #ffffff !important; } body.report-fullscreen-mode .lab-appbar { display: none !important; } body.report-fullscreen-mode .lab-main { min-height: 100vh !important; padding: 6px 8px 12px 8px !important; align-items: flex-start !important; justify-content: flex-start !important; background: #ffffff !important; } body.report-fullscreen-mode .mud-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.report-fullscreen-mode .admin-page-stack, body.report-fullscreen-mode .admin-page, body.report-fullscreen-mode .admin-page .mud-grid, body.report-fullscreen-mode .mud-main-content { background: #ffffff !important; } body.report-fullscreen-mode .admin-page .mud-paper, body.report-fullscreen-mode .admin-page .mud-card, body.report-fullscreen-mode .premium-glass-card { box-shadow: none !important; border-radius: 0 !important; border-color: rgba(0, 0, 0, 0.06) !important; backdrop-filter: none !important; background: #ffffff !important; } /* --- Premium Feel UI Layer --- */ body { background: radial-gradient(circle at 14% 18%, rgba(79, 172, 254, 0.22) 0%, transparent 38%), radial-gradient(circle at 84% 16%, rgba(90, 103, 216, 0.20) 0%, transparent 42%), radial-gradient(circle at 22% 82%, rgba(56, 189, 248, 0.18) 0%, transparent 40%), radial-gradient(circle at 78% 78%, rgba(125, 211, 252, 0.17) 0%, transparent 44%), linear-gradient(145deg, #eef6ff 0%, #e7f1ff 35%, #edf7ff 65%, #f6fbff 100%) !important; background-attachment: fixed; } /* Zachowujemy wysoką czytelność panelu testu */ .lab-card, .lab-surface { background: rgba(255, 255, 255, 0.96) !important; } .premium-glass-card { background: rgba(255, 255, 255, 0.24) !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; border-radius: 18px !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 34px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.08); } .pulse-btn { transition: transform 180ms ease, box-shadow 220ms ease, filter 220ms ease; will-change: transform, box-shadow; } .pulse-btn:hover, .pulse-btn:focus-visible { transform: translateY(-1px) scale(1.02); box-shadow: 0 8px 22px rgba(37, 99, 235, 0.24); filter: saturate(1.08); } .pulse-btn:active { transform: translateY(0) scale(0.99); } .premium-soft-pulse { animation: premium-soft-pulse 1.8s ease-in-out infinite; } @keyframes premium-soft-pulse { 0%, 100% { transform: translateY(0); box-shadow: 0 12px 34px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06); opacity: 1; } 50% { transform: translateY(-1px); box-shadow: 0 14px 38px rgba(15, 23, 42, 0.16), 0 5px 14px rgba(15, 23, 42, 0.08); opacity: 0.98; } } /* Fullscreen Report Mode */ body.lab-report-fullscreen .mud-drawer, body.lab-report-fullscreen .admin-hero, body.lab-report-fullscreen .admin-filter-sticky { display: none !important; } body.lab-report-fullscreen .mud-main-content { padding-top: 0 !important; margin-left: 0 !important; } body.lab-report-fullscreen .admin-page { padding: 0 !important; max-width: 100% !important; }