/* Enterprise PDF Accessibility Checker — Oliver Dark Command Center */ /* Dark is the default. Light theme activates via html[data-theme="light"]. */ /* Anti-FOUC: this inline script must be in before any CSS (see index.html) */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;0,700;0,800;0,900;1,700&family=Figtree:wght@300;400;500;600&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap'); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── Design Tokens — Oliver Dark (default) ── */ :root { color-scheme: dark; /* Typography */ --font-display: 'Montserrat', system-ui, sans-serif; --font-body: 'Figtree', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Accent — Oliver amber (dark: amber-400) */ --accent: #fbbf24; --accent-hover: #f59e0b; --accent-glow: rgba(251,191,36,.25); --accent-subtle: rgba(251,191,36,.10); --accent-text: #1c1917; /* text ON amber fill — same in both themes */ --on-accent: #1c1917; /* Semantic status */ --success: #4ade80; --success-bg: rgba(74,222,128,.10); --warning: #fbbf24; --warning-bg: rgba(251,191,36,.10); --error: #f87171; --error-bg: rgba(248,113,113,.10); --critical: #f87171; --critical-bg: rgba(248,113,113,.10); --info: #60a5fa; --info-bg: rgba(96,165,250,.10); /* Surfaces — Oliver dark "command center" */ --bg: #0c0a09; --bg-subtle: #161412; --surface: #161412; --surface-raised: #1c1917; --surface-alt: #1c1917; --text: #f0edea; --text-light: #b8b2ac; --text-secondary: #b8b2ac; --text-muted: #8e8880; /* 5.0:1 on surface-raised, 5.6:1 on bg — AA ✓ */ --border: rgba(255,255,255,.14); --border-subtle: rgba(255,255,255,.09); --divider: rgba(255,255,255,.09); --log-bg: #0c0a09; --primary: #fbbf24; /* legacy alias → use --accent */ --primary-dark: #f59e0b; --black: #f0edea; /* inverted in dark: used for "near-white" */ /* [M-52] Surface aliases — prevent undefined variable fallbacks */ --surface-2: var(--surface-raised, #1c1917); --surface-3: var(--surface-alt, #1c1917); /* Shadows */ --shadow-sm: 0 1px 4px rgba(0,0,0,.50); --shadow-md: 0 4px 20px rgba(0,0,0,.60), 0 2px 6px rgba(0,0,0,.40); --shadow-lg: 0 8px 32px rgba(0,0,0,.70), 0 2px 8px rgba(0,0,0,.50); --shadow-glow: 0 0 0 1px var(--accent), 0 0 20px var(--accent-glow); /* Geometry */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── Light Mode ("Warm Stone") ── */ html[data-theme="light"] { color-scheme: light; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; --bg: #faf8f5; --bg-subtle: #f0ede8; --surface: #ffffff; --surface-raised: #f5f2ee; --surface-alt: #f5f2ee; --text: #1c1a17; --text-light: #4a433d; --text-secondary: #524d47; --text-muted: #524d47; /* 8.4:1 on white, 7.5:1 on surface-raised — AA ✓ */ --border: rgba(0,0,0,.12); --border-subtle: rgba(0,0,0,.07); --divider: rgba(0,0,0,.07); --log-bg: #faf8f5; --primary: #d97706; --primary-dark: #b45309; --black: #1c1a17; /* Accent — amber-600 (WCAG AA for large text / UI elements on light bg) */ --accent: #d97706; --accent-hover: #b45309; --accent-glow: rgba(217,119,6,.20); --accent-subtle: rgba(217,119,6,.08); --accent-text: #ffffff; /* white text on amber-600 fill */ --on-accent: #ffffff; --success: #16a34a; --success-bg: rgba(22,163,74,.08); --warning: #d97706; --warning-bg: rgba(217,119,6,.08); --error: #dc2626; --error-bg: rgba(220,38,38,.08); --critical: #dc2626; --critical-bg: rgba(220,38,38,.08); --info: #2563eb; --info-bg: rgba(37,99,235,.08); --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06); --shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06); /* [M-52] Surface aliases — light mode overrides */ --surface-2: #f8f8f8; --surface-3: #f0f0f0; } /* ── Dev Banner ── */ .dev-banner { background: #dc2626; color: #ffffff; text-align: center; padding: 6px 16px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; position: sticky; top: 0; z-index: 200; } /* ── Skip Navigation Link ── */ .skip-link { position: absolute; top: -100%; left: 16px; background: var(--accent); color: var(--accent-text); font-family: var(--font-display); font-size: 14px; font-weight: 700; padding: 10px 20px; border-radius: var(--radius-sm); text-decoration: none; z-index: 9999; transition: top 0.15s; } .skip-link:focus { top: 16px; outline: 3px solid var(--accent-text); outline-offset: 2px; } /* ── Base ── */ body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; overflow-x: hidden; } /* Subtle noise texture */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 24px; position: relative; z-index: 1; } /* ── Header ── */ header { border-bottom: 1px solid var(--border); padding: 0; margin-bottom: 32px; background: var(--bg); box-shadow: var(--shadow-sm); } :root[data-theme="dark"] header { background: rgba(14, 14, 14, 0.85); } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .header-inner { display: flex; justify-content: space-between; align-items: center; min-height: 64px; } h1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.03em; margin-bottom: 0; } h1::before { content: ''; display: inline-block; width: 4px; height: 20px; background: var(--accent); border-radius: 2px; margin-right: 12px; vertical-align: middle; } .subtitle { font-family: var(--font-body); font-size: 14px; color: var(--text-muted); font-weight: 400; margin-top: 2px; letter-spacing: 0.01em; } .header-actions { display: flex; gap: 8px; align-items: center; } .header-actions button { font-family: var(--font-body); background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-secondary); padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s var(--ease-out); } .header-actions button:hover { border-color: var(--accent); color: var(--text); /* readable in both themes */ background: var(--accent-subtle); } /* In dark mode amber text on dark-subtle bg is fine; keep it for dark only */ :root:not([data-theme="light"]) .header-actions button:hover { color: var(--accent); } #themeToggle { padding: 8px 16px; font-size: 14px; border-radius: var(--radius-md); font-weight: 600; font-family: var(--font-mono); letter-spacing: 0.04em; } .user-info { color: var(--text-muted); font-size: 14px; font-weight: 500; } /* ── Cards ── */ .card { background: var(--surface); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 20px; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); animation: fadeUp 0.5s var(--ease-out) backwards; } .card:nth-child(1) { animation-delay: 0.05s; } .card:nth-child(2) { animation-delay: 0.1s; } .card:nth-child(3) { animation-delay: 0.15s; } .card:nth-child(4) { animation-delay: 0.2s; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .card h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 20px; color: var(--text); letter-spacing: -0.02em; } /* ── Upload Area ── */ .upload-area { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 64px 40px; text-align: center; transition: all 0.3s var(--ease-out); cursor: pointer; position: relative; overflow: hidden; background: var(--surface-alt); } .upload-area::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s; } .upload-area:hover { border-color: var(--accent); box-shadow: var(--shadow-glow); } .upload-area:hover::after { opacity: 1; } .upload-area.dragover { border-color: var(--accent); background: var(--accent-subtle); box-shadow: var(--shadow-glow); transform: scale(1.01); } .upload-area.dragover::after { opacity: 1; } .upload-area input[type="file"] { display: none; } .upload-icon { font-size: 48px; margin-bottom: 16px; position: relative; z-index: 1; filter: grayscale(0.2); color: var(--text); } :root[data-theme="dark"] .upload-icon { color: var(--accent); } .upload-text { font-family: var(--font-display); font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--text); position: relative; z-index: 1; } .upload-hint { font-size: 14px; color: var(--text-muted); position: relative; z-index: 1; } /* ── Buttons ── */ .btn { font-family: var(--font-display); display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s var(--ease-out); text-decoration: none; letter-spacing: -0.01em; } .btn-primary { background: var(--accent); color: var(--accent-text); border: none; font-weight: 700; } .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 16px var(--accent-glow); transform: translateY(-1px); } .btn-secondary { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--accent); color: var(--text); /* use --text so both themes pass contrast */ background: var(--accent-subtle); } :root:not([data-theme="light"]) .btn-secondary:hover { color: var(--accent); /* amber text is fine on dark surfaces */ } .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* ── Progress ── */ .progress-container { display: none; padding: 24px; background: var(--surface-alt); border-radius: var(--radius-md); margin-top: 24px; border: 1px solid var(--border-subtle); animation: fadeUp 0.4s var(--ease-out); } .progress-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .progress-text { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text); } .progress-percent { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--accent); letter-spacing: -0.03em; } .progress-bar { height: 6px; background: var(--bg-subtle); border-radius: 3px; overflow: hidden; margin-bottom: 20px; position: relative; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent) 0%, #ffe066 100%); transition: width 0.4s var(--ease-out); border-radius: 3px; position: relative; } .progress-fill::after { content: ''; position: absolute; right: 0; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); animation: pulse-dot 1.5s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } } /* Processing log */ .progress-log { background: var(--log-bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .log-header { background: var(--text); color: var(--bg); padding: 10px 16px; font-family: var(--font-display); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; } /* [L-14] Replace hardcoded #242424 with CSS variable */ :root[data-theme="dark"] .log-header { background: var(--surface-raised); color: var(--text); } .log-content { padding: 12px; max-height: 240px; overflow-y: auto; font-size: 12px; line-height: 1.6; } .log-content::-webkit-scrollbar { width: 4px; } .log-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .log-entry { padding: 6px 10px; margin-bottom: 4px; border-radius: var(--radius-sm); background: var(--surface-alt); border: 1px solid var(--border); font-family: var(--font-body); animation: logSlide 0.3s var(--ease-out); } .log-entry.success { background: var(--success-bg); border-color: rgba(22,163,74,.25); color: #065f46; } .log-entry.warning { background: var(--warning-bg); border-color: rgba(217,119,6,.25); color: #92400e; } .log-entry.error { background: var(--error-bg); border-color: rgba(220,38,38,.25); color: #991b1b; } .log-entry.info { background: var(--info-bg); border-color: rgba(37,99,235,.25); color: #1e40af; } :root[data-theme="dark"] .log-entry.success { color: #6ee7b7; } :root[data-theme="dark"] .log-entry.warning { color: #fcd34d; } :root[data-theme="dark"] .log-entry.error { color: #fca5a5; } :root[data-theme="dark"] .log-entry.info { color: #93c5fd; } @keyframes logSlide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } /* ── Results ── */ .results { display: none; } .score-display { display: inline-flex; align-items: center; gap: 20px; padding: 20px 32px; background: #1a1a1a; border-radius: var(--radius-md); color: #ffffff; margin-bottom: 24px; position: relative; overflow: visible; animation: scoreReveal 0.6s var(--ease-out) backwards; animation-delay: 0.2s; border: none; } :root[data-theme="dark"] .score-display { background: #242424; border: 1px solid #333; } .score-display::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); } .score-display::after { content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 100%; background: linear-gradient(90deg, transparent, var(--accent-glow)); opacity: 0.5; } @keyframes scoreReveal { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .score-number { font-family: var(--font-display); font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; position: relative; z-index: 1; } .score-label { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .55); /* card is always dark #1a1a1a — use fixed light value; ~6.4:1 on dark bg */ text-align: left; text-transform: uppercase; letter-spacing: 0.06em; position: relative; z-index: 1; } /* Stats grid */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; } .stat-card { padding: 16px; border-radius: var(--radius-md); text-align: center; transition: transform 0.2s var(--ease-out), box-shadow 0.2s; animation: fadeUp 0.4s var(--ease-out) backwards; } .stat-card:nth-child(1) { animation-delay: 0.3s; } .stat-card:nth-child(2) { animation-delay: 0.35s; } .stat-card:nth-child(3) { animation-delay: 0.4s; } .stat-card:nth-child(4) { animation-delay: 0.45s; } .stat-card:nth-child(5) { animation-delay: 0.5s; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-card.critical { background: var(--critical-bg); border: 1px solid rgba(220, 38, 38, 0.2); } .stat-card.error { background: var(--error-bg); border: 1px solid rgba(239, 68, 68, 0.2); } .stat-card.warning { background: var(--warning-bg); border: 1px solid rgba(217, 119, 6, 0.2); } .stat-card.info { background: var(--info-bg); border: 1px solid rgba(37, 99, 235, 0.2); } .stat-card.success { background: var(--success-bg); border: 1px solid rgba(5, 150, 105, 0.2); } .stat-card.critical .stat-number { color: #dc2626; } .stat-card.error .stat-number { color: #ef4444; } .stat-card.warning .stat-number { color: #d97706; } .stat-card.info .stat-number { color: #3b82f6; } .stat-card.success .stat-number { color: #059669; } /* Light theme: amber and blue on tinted white bg fall below 3:1 for large text — darken */ html[data-theme="light"] .stat-card.warning .stat-number { color: #92400e; } html[data-theme="light"] .stat-card.info .stat-number { color: #1d4ed8; } :root[data-theme="dark"] .stat-card.critical .stat-number { color: #fca5a5; } :root[data-theme="dark"] .stat-card.error .stat-number { color: #fca5a5; } :root[data-theme="dark"] .stat-card.warning .stat-number { color: #fcd34d; } :root[data-theme="dark"] .stat-card.info .stat-number { color: #93c5fd; } :root[data-theme="dark"] .stat-card.success .stat-number { color: #6ee7b7; } .stat-number { font-family: var(--font-display); font-size: 32px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.03em; } .stat-label { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--text-secondary); } :root[data-theme="dark"] .stat-label { color: var(--text-secondary); /* use token — #8e8880 = 5.6:1 on dark bg */ } /* ── Issues ── */ .issues-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; } .issue { padding: 14px 16px; margin-bottom: 0; border-radius: var(--radius-md); border: 1.5px solid var(--border); transition: box-shadow 0.15s; } .issue:hover { box-shadow: var(--shadow-sm); } /* Full border with semantic color — side-stripe (border-left > 1px) causes contrast issues in light theme */ .issue.CRITICAL { background: var(--critical-bg); border-color: rgba(220, 38, 38, .35); } .issue.ERROR { background: var(--error-bg); border-color: rgba(220, 38, 38, .25); } .issue.WARNING { background: var(--warning-bg); border-color: rgba(217, 119, 6, .35); } .issue.INFO { background: var(--info-bg); border-color: rgba(37, 99, 235, .30); } .issue.SUCCESS { background: var(--success-bg); border-color: rgba(5, 150, 105, .30); } .issue-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .issue-category { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text); } .issue-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-family: var(--font-display); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .issue-badge.CRITICAL { background: var(--critical); color: white; } .issue-badge.ERROR { background: var(--error); color: white; } /* [M-41] WARNING badge: amber bg needs dark text for WCAG AA contrast (~1.9:1 white fails) */ .issue-badge.WARNING { background: var(--warning); color: #1c1917; } .issue-badge.INFO { background: var(--info); color: white; } .issue-badge.SUCCESS { background: var(--success); color: white; } .issue-description { color: var(--text); margin-bottom: 6px; line-height: 1.5; font-size: 14px; } .issue-meta { display: flex; gap: 12px; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; font-weight: 500; } .wcag-link { color: var(--info); text-decoration: none; font-weight: 600; border-bottom: 1px dotted var(--info); transition: color 0.15s, border-color 0.15s; } .wcag-link:hover { color: var(--accent); border-bottom-color: var(--accent); } .issue-recommendation { background: var(--success-bg); padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(22, 163, 74, .30); font-size: 12px; color: var(--text); margin-top: 8px; line-height: 1.5; } .issue-recommendation strong { /* #15803d on light success-bg = 4.9:1 AA ✓; dark theme overridden below */ color: #15803d; font-weight: 600; } :root[data-theme="dark"] .issue-recommendation strong { color: var(--success); /* #4ade80 on dark bg */ } /* ── Filters ── */ .filters { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; } .filter-btn { font-family: var(--font-display); padding: 7px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s var(--ease-out); color: var(--text-secondary); } .filter-btn.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; } .filter-btn:hover:not(.active) { border-color: var(--accent); color: var(--text); } :root:not([data-theme="light"]) .filter-btn:hover:not(.active) { color: var(--accent); } /* ── Loading Spinner ── */ /* [L-15] Use currentColor so spinner inherits text color in both themes */ .loading { display: inline-block; width: 18px; height: 18px; border: 2px solid transparent; border-radius: 50%; border-top-color: currentColor; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* [M-53] Indeterminate progress bar animation — applied when analysis is running */ @keyframes progress-indeterminate { 0% { left: -30%; } 100% { left: 100%; } } .progress-bar-indeterminate { position: relative; overflow: hidden; } .progress-bar-indeterminate .progress-fill { /* Hide the static fill when indeterminate is active */ display: none; } .progress-bar-indeterminate::after { content: ''; position: absolute; top: 0; height: 100%; width: 30%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: progress-indeterminate 1.5s ease-in-out infinite; } /* ── Config / Form ── */ .api-config { margin-top: 24px; padding: 20px; background: var(--surface-alt); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); } .form-group { margin-bottom: 16px; } .form-group label { display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text); } .form-group input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; background: var(--surface); color: var(--text); transition: border-color 0.2s, box-shadow 0.2s; } .form-group input:focus { outline: 2px solid var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .help-text { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; } /* ── Auth Overlay ── */ .auth-overlay { display: none; position: fixed; inset: 0; background: rgba(12, 14, 22, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1000; justify-content: center; align-items: center; } .auth-overlay.active { display: flex; } .auth-card { background: var(--surface); border-radius: var(--radius-xl); padding: 48px; text-align: center; max-width: 420px; width: 90%; box-shadow: var(--shadow-lg); border: 1px solid var(--border-subtle); animation: scaleIn 0.4s var(--ease-spring); } @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .auth-card h2 { font-family: var(--font-display); color: var(--text); margin-bottom: 8px; font-size: 22px; } .auth-card p { color: var(--text-muted); margin-bottom: 28px; font-size: 14px; } .btn-microsoft { background: var(--text); color: var(--bg); border: none; padding: 14px 28px; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; transition: all 0.2s var(--ease-out); } .btn-microsoft:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } :root[data-theme="dark"] .btn-microsoft { background: #ffffff; color: #1a1a2e; } /* ── Upload Mode Tabs ── */ .upload-mode-tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 1px solid var(--border); } .upload-tab { font-family: var(--font-display); padding: 10px 20px; border: none; background: none; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; letter-spacing: -0.01em; } .upload-tab:hover { color: var(--text); } .upload-tab.active { /* amber border = visual indicator; text stays readable in both themes */ color: var(--text); border-bottom: 3px solid var(--accent); font-weight: 700; } /* In light mode, use the slightly-darker text-secondary to boost contrast */ html[data-theme="light"] .upload-tab.active { color: var(--text); } /* ── Responsive ── */ @media (max-width: 768px) { .container { padding: 12px; } h1 { font-size: 18px; } h1::before { height: 16px; margin-right: 8px; } .card { padding: 20px; border-radius: var(--radius-md); } .stats-grid { grid-template-columns: 1fr 1fr; } .issues-grid { grid-template-columns: 1fr; } .header-inner { flex-direction: column; gap: 10px; align-items: flex-start; } .upload-area { padding: 40px 20px; } .score-display { padding: 16px 20px; gap: 14px; } .score-number { font-size: 36px; } .page-viewer-layout { flex-direction: column !important; } .page-selector-wrap { flex-shrink: unset !important; min-width: unset !important; } #pageSelector { flex-direction: row !important; overflow-x: auto; } } /* [M-46] Export buttons — full-width on small screens */ @media (max-width: 600px) { .export-buttons { width: 100%; } .export-buttons .btn { flex: 1 1 auto; justify-content: center; min-width: 120px; } } /* [M-49] History table — hide non-critical columns and reduce padding on mobile */ @media (max-width: 640px) { .history-table th, .history-table td { padding: 8px 8px; } /* Hide date columns that are less critical on small screens */ .history-table .col-created, .history-table .col-expires { display: none; } .history-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ── Utility ── */ .hidden { display: none !important; } /* ── Selection & Focus ── */ ::selection { background: var(--accent); color: white; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Custom scrollbar ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ── Start-Ready State ── */ .upload-ready { display: none; padding: 24px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-top: 20px; animation: fadeUp 0.4s var(--ease-out); } .upload-ready .ready-filename { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .upload-ready .ready-filesize { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; } .btn-start { background: var(--accent); color: var(--accent-text); border: none; font-weight: 700; padding: 14px 32px; font-size: 16px; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-display); transition: all 0.2s var(--ease-out); display: inline-flex; align-items: center; gap: 10px; } .btn-start:hover { background: var(--accent-hover); box-shadow: 0 4px 20px var(--accent-glow); transform: translateY(-1px); } .btn-remove { background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; padding: 4px 8px; margin-left: 16px; text-decoration: underline; font-family: var(--font-body); } .btn-remove:hover { color: var(--error); } /* ── Score Breakdown ── */ .score-breakdown { margin-top: 16px; padding: 14px 18px; background: var(--surface-alt); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); font-size: 13px; } .score-breakdown summary { cursor: pointer; font-weight: 600; color: var(--text); font-family: var(--font-display); list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; } .score-breakdown summary::before { content: '▶'; font-size: 10px; transition: transform 0.2s; } .score-breakdown[open] summary::before { transform: rotate(90deg); } .score-breakdown-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; } .score-breakdown-table th { text-align: left; padding: 6px 10px; background: var(--bg-subtle); color: var(--text-secondary); font-weight: 600; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; } .score-breakdown-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text); } /* ── Dismiss Feature ── */ .issue.dismissed { opacity: 0.45; filter: grayscale(0.6); position: relative; } .issue.dismissed .issue-description { text-decoration: line-through; text-decoration-color: var(--text-muted); } .btn-dismiss { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; cursor: pointer; padding: 4px 10px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; transition: all 0.15s; margin-left: 8px; white-space: nowrap; } .btn-dismiss:hover { border-color: var(--error); color: var(--error); background: var(--error-bg); } /* ── Issue Group Cards (table grouping) ── */ .issue-group-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; overflow: hidden; } .issue-group-card.dismissed { opacity: 0.5; } .issue-group-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--surface-alt); cursor: pointer; user-select: none; } .issue-group-header:hover { background: var(--accent-subtle); } .issue-group-details { padding: 8px; display: block; } .btn-undismiss { background: none; border: 1px solid var(--border); color: var(--text-secondary); font-size: 11px; cursor: pointer; padding: 3px 8px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; transition: all 0.15s; margin-left: 8px; } .btn-undismiss:hover { border-color: var(--success); color: var(--success); } /* Mark as Passed button */ .btn-mark-passed { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; cursor: pointer; padding: 4px 10px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; transition: all 0.15s; margin-left: 8px; white-space: nowrap; } .btn-mark-passed:hover { border-color: var(--success); color: var(--success); background: var(--success-bg); } /* Undo override button */ .btn-unoverride { background: none; border: 1px solid var(--border); color: var(--text-secondary); font-size: 11px; cursor: pointer; padding: 3px 8px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; transition: all 0.15s; margin-left: 8px; } .btn-unoverride:hover { border-color: var(--warning); color: var(--warning); } /* Manual pass label in check breakdown table */ .check-manual-pass { color: var(--success); font-weight: 700; font-style: italic; } /* Recalculate Score button */ .btn-recheck { background: var(--accent); border: none; color: var(--accent-text); font-family: var(--font-display); font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s; margin-top: 8px; } .btn-recheck:hover { background: var(--accent-hover); } /* Adjusted score badge */ .score-adjusted-label { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-subtle); border: 1px solid var(--accent-glow); border-radius: var(--radius-sm); padding: 2px 8px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; } .dismiss-toggle-bar { margin-bottom: 12px; font-size: 13px; color: var(--text-muted); } .dismiss-toggle-bar button { background: none; border: none; color: var(--info); cursor: pointer; text-decoration: underline; font-size: 13px; font-family: var(--font-body); padding: 0; } /* ── Page Overview Grid — Semantic severity classes ── */ /* [M-42] Use these classes instead of hardcoded inline hex colors. TODO: js/results.js should apply these classes to page overview cells. */ .page-cell--critical { background: var(--severity-critical, #ef4444); color: white; } .page-cell--error { background: var(--severity-error, #f97316); color: white; } .page-cell--warning { background: var(--severity-warning, #f59e0b); color: #1c1917; } .page-cell--ok { background: var(--severity-ok, #22c55e); color: white; } /* ── Matterhorn Legend & Section Description ── */ /* [M-55] Introductory text and legend badges before the Matterhorn table */ .section-description { font-size: 13px; color: var(--text-secondary); margin: 8px 0 12px; line-height: 1.6; } .matterhorn-legend { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 16px; } .legend-m { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--info-bg); color: var(--info); border-radius: 3px; font-size: 11px; font-weight: 700; font-family: var(--font-display); border: 1px solid var(--info); } .legend-h { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--warning-bg); /* [M-41] warning-bg with amber text: use dark color for WCAG AA */ color: #92400e; border-radius: 3px; font-size: 11px; font-weight: 700; font-family: var(--font-display); border: 1px solid var(--warning); } :root[data-theme="dark"] .legend-h { color: var(--warning); } /* ── Matterhorn Table ── */ #matterhornCard table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; } #matterhornCard th { text-align: left; padding: 8px 12px; background: var(--bg-subtle); color: var(--text-secondary); font-weight: 700; font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid var(--border); } #matterhornCard td { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text); vertical-align: top; } #matterhornCard tr.section-header td { background: var(--surface-alt); font-weight: 700; font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); padding: 10px 12px 6px; } .matterhorn-banner { padding: 14px 20px; border-radius: var(--radius-md); font-weight: 700; font-family: var(--font-display); font-size: 15px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; } .matterhorn-banner.pass { background: var(--success-bg); color: var(--success); border: 1px solid rgba(5, 150, 105, 0.3); } .matterhorn-banner.fail { background: var(--error-bg); color: var(--error); border: 1px solid rgba(239, 68, 68, 0.3); } :root[data-theme="dark"] .matterhorn-banner.pass { color: #6ee7b7; } :root[data-theme="dark"] .matterhorn-banner.fail { color: #fca5a5; } .badge-m, .badge-h { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; font-family: var(--font-display); } .badge-m { background: var(--info-bg); color: var(--info); } .badge-h { background: var(--warning-bg); color: var(--warning); } /* Light theme: small badges (10px) need 4.5:1 — darken colors */ html[data-theme="light"] .badge-m { color: #1d4ed8; } html[data-theme="light"] .badge-h { color: #92400e; } .mh-pass { color: var(--success); font-weight: 700; } .mh-fail { color: var(--error); font-weight: 700; } .mh-not-tested { color: var(--text-muted); } :root[data-theme="dark"] .mh-pass { color: #6ee7b7; } :root[data-theme="dark"] .mh-fail { color: #fca5a5; } /* ── WCAG Compliance Badges ── */ .wcag-compliance-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 8px; } .wcag-badge { display: inline-flex; flex-direction: column; align-items: center; padding: 10px 20px; border-radius: var(--radius-md); border: 2px solid transparent; min-width: 120px; gap: 2px; } .wcag-badge.pass { background: var(--success-bg); border-color: var(--success); color: var(--success); } .wcag-badge.fail { background: var(--error-bg); border-color: var(--error); color: var(--error); } /* Light theme: semantic colors on tinted bg fail at 13-15px normal text — use darker shades */ html[data-theme="light"] .wcag-badge.pass { color: #15803d; border-color: #15803d; } html[data-theme="light"] .wcag-badge.fail { color: #b91c1c; border-color: #b91c1c; } .wcag-badge-level { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; } .wcag-badge-status { font-size: 15px; font-weight: 800; } .compliance-failures { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .compliance-note { font-size: 11px; color: var(--text-muted); margin-top: 10px; padding: 8px 12px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); line-height: 1.5; } /* WCAG Level pill on issue cards */ .wcag-level-badge { display: inline-block; font-size: 10px; font-weight: 700; font-family: var(--font-display); padding: 1px 6px; border-radius: var(--radius-sm); letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; } .wcag-level-A { background: var(--error-bg); color: var(--error); border: 1px solid var(--error); } .wcag-level-AA { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning); } .wcag-level-AAA { background: var(--info-bg); color: var(--info); border: 1px solid var(--info); } /* ── Next Steps Card ── */ .next-step-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); } .next-step-item:last-child { border-bottom: none; } .next-step-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-family: var(--font-display); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .next-step-body { flex: 1; } .next-step-action { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 5px; } .next-step-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* ── Document History Table ── */ .history-table { width: 100%; border-collapse: collapse; font-size: 14px; } .history-table th { text-align: left; padding: 10px 14px; background: var(--surface-alt); color: var(--text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid var(--border); } .history-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); } .history-table tbody tr:hover { background: var(--surface-alt); } .history-filename { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .history-score { font-family: var(--font-display); font-weight: 800; font-size: 18px; } .history-score small { font-size: 11px; font-weight: 400; color: var(--text-muted); } .history-score-a { color: var(--success); } .history-score-b { color: var(--warning); } .history-score-f { color: var(--error); } .history-grade { display: inline-block; margin-left: 6px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text-muted); } .history-badge-done { display: inline-block; padding: 3px 10px; background: rgba(5, 150, 105, 0.12); color: var(--success); border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; } .history-badge-pending { display: inline-block; padding: 3px 10px; background: var(--surface-alt); color: var(--text-muted); border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; } .history-crit { display: inline-block; padding: 2px 8px; background: rgba(220, 38, 38, 0.1); color: var(--critical); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; margin-right: 4px; } .history-err { display: inline-block; padding: 2px 8px; background: rgba(239, 68, 68, 0.1); color: var(--error); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; } .history-actions { white-space: nowrap; display: flex; gap: 6px; flex-wrap: wrap; } .history-action-btn { display: inline-block; padding: 5px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 12px; font-weight: 600; font-family: var(--font-display); cursor: pointer; text-decoration: none; transition: border-color 0.15s, color 0.15s; } .history-action-btn:hover { border-color: var(--accent); color: var(--text); } :root:not([data-theme="light"]) .history-action-btn:hover { color: var(--accent); } .history-action-delete:hover { border-color: var(--error); color: var(--error); } /* ── H-25: Collapsible headings keyboard accessibility ── */ /* [H-25] results.js generates h3[onclick] and .issue-group-header[onclick] without tabindex/role/keydown. CSS can add :focus styles but JS in results.js must add: tabindex="0" role="button" onkeydown="if(event.key==='Enter'||event.key===' ')this.click()" The rules below ensure these elements are at least visibly focusable if tabindex is added. */ .issue-group-header[onclick], h3[onclick] { /* Ensure cursor indicates interactivity */ cursor: pointer; } .issue-group-header[onclick]:focus, h3[onclick]:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }