Oliver/pdf-accessibility
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch to Oliver branding: Montserrat font, black/#FFC407 palette, fix dark mode contrast

Browse source 
- Font: Outfit/Figtree → Montserrat
- Accent: coral #e8553d → Oliver yellow #FFC407 with black text
- Dark mode: neutral blacks instead of blue-tinted navy
- Fix score display, stat cards, and log entries contrast in dark mode
- Replace hardcoded light-mode colors in JS with CSS variables

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-02-25 18:54:47 +00:00
parent 2441d124f9
commit 345cc1ceb2
5 changed files with 101 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
css/styles.css
View file

@ -1,7 +1,7 @@
/* Enterprise PDF Accessibility Checker — Redesigned */
/* Aesthetic: Precision Observatory — utilitarian elegance with warm accents */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Figtree:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
*, *::before, *::after {
margin: 0;
@ -9,17 +9,18 @@
box-sizing: border-box;
}
/* ── Design Tokens ── */
/* ── Design Tokens — Oliver Branding ── */
:root {
/* Typography */
--font-display: 'Outfit', sans-serif;
--font-body: 'Figtree', sans-serif;
--font-display: 'Montserrat', sans-serif;
--font-body: 'Montserrat', sans-serif;
/* Core palette */
--accent: #e8553d;
--accent-hover: #d44a33;
--accent-glow: rgba(232, 85, 61, 0.15);
--accent-subtle: rgba(232, 85, 61, 0.08);
/* Core palette — Oliver yellow + black */
--accent: #FFC407;
--accent-hover: #e6b006;
--accent-glow: rgba(255, 196, 7, 0.2);
--accent-subtle: rgba(255, 196, 7, 0.08);
--accent-text: #000000; /* text on accent backgrounds */
/* Semantic */
--success: #059669;
@ -34,27 +35,27 @@
--info-bg: rgba(37, 99, 235, 0.08);
/* Surfaces — Light */
--bg: #f5f3f0;
--bg-subtle: #eae7e2;
--bg: #f5f4f1;
--bg-subtle: #eae8e4;
--surface: #ffffff;
--surface-raised: #ffffff;
--surface-alt: #f9f8f6;
--text: #1a1a2e;
--text-light: #555566;
--text-secondary: #555566;
--text-muted: #8888a0;
--surface-alt: #faf9f7;
--text: #1a1a1a;
--text-light: #4a4a4a;
--text-secondary: #555555;
--text-muted: #888888;
--border: #e0ddd8;
--border-subtle: #eae8e4;
--divider: #d4d0ca;
--log-bg: #faf9f7;
--primary: #e8553d;
--primary-dark: #d44a33;
--black: #1a1a2e;
--primary: #FFC407;
--primary-dark: #e6b006;
--black: #1a1a1a;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.04);
--shadow-md: 0 4px 12px rgba(26, 26, 46, 0.06), 0 1px 3px rgba(26, 26, 46, 0.04);
--shadow-lg: 0 8px 32px rgba(26, 26, 46, 0.08), 0 2px 8px rgba(26, 26, 46, 0.04);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-glow: 0 0 0 1px var(--accent), 0 0 20px var(--accent-glow);
/* Geometry */
@ -70,29 +71,37 @@
/* ── Dark Mode ── */
:root[data-theme="dark"] {
--bg: #0c0e16;
--bg-subtle: #131520;
--surface: #181b28;
--surface-raised: #1e2235;
--surface-alt: #141724;
--text: #e4e2dd;
--text-light: #9d9bb0;
--text-secondary: #9d9bb0;
--text-muted: #6b697f;
--border: #2a2d40;
--border-subtle: #222538;
--divider: #252840;
--log-bg: #0f1119;
--primary: #ff6b4a;
--primary-dark: #ff8066;
--black: #e4e2dd;
--accent: #ff6b4a;
--accent-hover: #ff8066;
--accent-glow: rgba(255, 107, 74, 0.2);
--accent-subtle: rgba(255, 107, 74, 0.1);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
--bg: #0e0e0e;
--bg-subtle: #161616;
--surface: #1c1c1c;
--surface-raised: #242424;
--surface-alt: #181818;
--text: #f0f0f0;
--text-light: #b0b0b0;
--text-secondary: #aaaaaa;
--text-muted: #777777;
--border: #333333;
--border-subtle: #2a2a2a;
--divider: #303030;
--log-bg: #121212;
--primary: #FFC407;
--primary-dark: #ffd54f;
--black: #f0f0f0;
--accent: #FFC407;
--accent-hover: #ffd54f;
--accent-glow: rgba(255, 196, 7, 0.25);
--accent-subtle: rgba(255, 196, 7, 0.1);
--accent-text: #000000;
--success-bg: rgba(5, 150, 105, 0.15);
--warning-bg: rgba(217, 119, 6, 0.15);
--error-bg: rgba(239, 68, 68, 0.12);
--critical-bg: rgba(220, 38, 38, 0.12);
--info-bg: rgba(37, 99, 235, 0.12);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}
/* ── Dev Banner ── */
@ -150,13 +159,13 @@ header {
z-index: 100;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(245, 243, 240, 0.8);
background: rgba(245, 244, 241, 0.85);
box-shadow: var(--shadow-sm);
animation: slideDown 0.5s var(--ease-out);
}
:root[data-theme="dark"] header {
background: rgba(12, 14, 22, 0.8);
background: rgba(14, 14, 14, 0.85);
}
@keyframes slideDown {
@ -356,8 +365,9 @@ h1::before {
.btn-primary {
background: var(--accent);
color: #ffffff;
color: var(--accent-text);
border: none;
font-weight: 700;
}
.btn-primary:hover {
@ -429,7 +439,7 @@ h1::before {
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent) 0%, #ff8f66 100%);
background: linear-gradient(90deg, var(--accent) 0%, #ffe066 100%);
transition: width 0.4s var(--ease-out);
border-radius: 3px;
position: relative;
@ -527,7 +537,7 @@ h1::before {
align-items: center;
gap: 20px;
padding: 20px 32px;
background: var(--text);
background: #1a1a1a;
border-radius: var(--radius-md);
color: #ffffff;
margin-bottom: 24px;
@ -538,6 +548,11 @@ h1::before {
border: none;
}
:root[data-theme="dark"] .score-display {
background: #242424;
border: 1px solid #333;
}
.score-display::before {
content: '';
position: absolute;
@ -613,11 +628,23 @@ h1::before {
box-shadow: var(--shadow-md);
}
.stat-card.critical { background: var(--critical-bg); border: 1px solid rgba(220, 38, 38, 0.15); }
.stat-card.error { background: var(--error-bg); border: 1px solid rgba(239, 68, 68, 0.15); }
.stat-card.warning { background: var(--warning-bg); border: 1px solid rgba(217, 119, 6, 0.15); }
.stat-card.info { background: var(--info-bg); border: 1px solid rgba(37, 99, 235, 0.15); }
.stat-card.success { background: var(--success-bg); border: 1px solid rgba(5, 150, 105, 0.15); }
.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; }
: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);
@ -636,6 +663,10 @@ h1::before {
color: var(--text-secondary);
}
:root[data-theme="dark"] .stat-label {
color: #cccccc;
}
/* ── Issues ── */
.issues-grid {
display: grid;
@ -753,8 +784,9 @@ h1::before {
.filter-btn.active {
background: var(--accent);
color: #ffffff;
color: var(--accent-text);
border-color: var(--accent);
font-weight: 700;
}
.filter-btn:hover:not(.active) {
@ -923,6 +955,7 @@ h1::before {
.upload-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 700;
}
/* ── Responsive ── */

2
index.html
View file

@ -6,7 +6,7 @@
<title>Enterprise PDF Accessibility Checker</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<!-- MSAL config (values injected from env or kept as data attributes) -->

4
js/batch.js
View file

@ -173,10 +173,10 @@ async function startBatchUpload() {
// Poll batch status
pollBatchStatus(uploaded.map(f => f.job_id));
} else {
progressEl.innerHTML = '<div style="padding:15px;background:#fef2f2;border-radius:6px;color:var(--error);">Batch upload failed: ' + escapeHtml(result.error) + '</div>';
progressEl.innerHTML = '<div style="padding:15px;background:var(--error-bg);border-radius:6px;color:var(--error);">Batch upload failed: ' + escapeHtml(result.error) + '</div>';
}
} catch (error) {
progressEl.innerHTML = '<div style="padding:15px;background:#fef2f2;border-radius:6px;color:var(--error);">Error: ' + escapeHtml(error.message) + '</div>';
progressEl.innerHTML = '<div style="padding:15px;background:var(--error-bg);border-radius:6px;color:var(--error);">Error: ' + escapeHtml(error.message) + '</div>';
}
btn.disabled = false;

2
js/page-viewer.js
View file

@ -43,7 +43,7 @@ function loadVisualPage(pageNum) {
btn.style.fontWeight = 'normal';
});
const sel = document.getElementById(`pageBtn${pageNum}`);
if (sel) { sel.style.background = '#f0f9ff'; sel.style.fontWeight = '600'; }
if (sel) { sel.style.background = 'var(--accent-subtle)'; sel.style.fontWeight = '600'; }
const img = document.getElementById('pageImage');
img.onload = () => drawMarkers(pageNum);

16
js/results.js
View file

@ -115,7 +115,7 @@ function createIssueCard(issue, issueNumber) {
const catIcon = getCategoryIcon(issue.category);
const markerBadge = issue.coordinates && issueNumber !== undefined
? `<span onclick="loadVisualPage(${issue.page_number});setTimeout(()=>highlightMarker(${issueNumber}),100);" style="cursor:pointer;background:var(--primary);color:var(--black);padding:3px 8px;border-radius:12px;font-size:11px;font-weight:700;margin-left:8px;">&#x1F4CD; #${issueNumber}</span>`
? `<span onclick="loadVisualPage(${issue.page_number});setTimeout(()=>highlightMarker(${issueNumber}),100);" style="cursor:pointer;background:var(--accent);color:var(--accent-text);padding:3px 8px;border-radius:12px;font-size:11px;font-weight:700;margin-left:8px;">&#x1F4CD; #${issueNumber}</span>`
: '';
return `<div class="issue ${issue.severity}" id="issue-${issueNumber}">
@ -148,7 +148,7 @@ function scrollToPage(pageNum) {
const el = document.getElementById(`page-${pageNum}`);
if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
el.style.background = '#fff3cd';
el.style.background = 'var(--accent-subtle)';
setTimeout(() => { el.style.background = ''; }, 1000);
}
}
@ -169,7 +169,7 @@ function displayRemediationOptions(data) {
document.getElementById('fixableCount').textContent = data.auto_fixable_count;
const fixesList = document.getElementById('fixesList');
let html = '<div style="background:#f0fdf4;padding:12px;border-radius:6px;border-left:3px solid var(--success);">';
let html = '<div style="background:var(--success-bg);padding:12px;border-radius:6px;border-left:3px solid var(--success);">';
for (const [, fixes] of Object.entries(data.remediation_suggestions)) {
fixes.filter(f => f.auto_fixable).forEach(fix => {
@ -193,21 +193,21 @@ async function applyFixes() {
btn.disabled = true;
btn.innerHTML = '<span class="loading"></span> Applying fixes...';
resultDiv.style.display = 'block';
resultDiv.innerHTML = '<div style="padding:10px;background:#f0f9ff;border-radius:6px;">Applying automatic fixes to PDF...</div>';
resultDiv.innerHTML = '<div style="padding:10px;background:var(--info-bg);border-radius:6px;color:var(--text);">Applying automatic fixes to PDF...</div>';
try {
const result = await remediatePdf(currentJobId);
if (result.success) {
resultDiv.innerHTML = `<div style="padding:15px;background:#f0fdf4;border-radius:6px;border-left:3px solid var(--success);">
resultDiv.innerHTML = `<div style="padding:15px;background:var(--success-bg);border-radius:6px;border-left:3px solid var(--success);">
<div style="font-weight:600;margin-bottom:8px;color:var(--success);">${result.data.fixes_applied} issue(s) automatically fixed!</div>
<div style="font-size:14px;margin-bottom:12px;">Your remediated PDF is ready for download.</div>
<div style="font-size:14px;margin-bottom:12px;color:var(--text);">Your remediated PDF is ready for download.</div>
<a href="${result.data.download_url}" class="btn btn-primary" download style="text-decoration:none;display:inline-block;">Download Fixed PDF</a>
<div style="margin-top:10px;font-size:12px;color:var(--text-light);">Filename: ${result.data.original_filename.replace('.pdf', '_fixed.pdf')}</div>
</div>`;
btn.style.display = 'none';
} else {
resultDiv.innerHTML = `<div style="padding:15px;background:#fef2f2;border-radius:6px;border-left:3px solid var(--error);">
resultDiv.innerHTML = `<div style="padding:15px;background:var(--error-bg);border-radius:6px;border-left:3px solid var(--error);">
<div style="font-weight:600;color:var(--error);">Remediation failed</div>
<div style="font-size:13px;margin-top:5px;">${result.error}</div>
</div>`;
@ -215,7 +215,7 @@ async function applyFixes() {
btn.innerHTML = '<span>Retry Auto-Fix</span>';
}
} catch (error) {
resultDiv.innerHTML = `<div style="padding:15px;background:#fef2f2;border-radius:6px;border-left:3px solid var(--error);">
resultDiv.innerHTML = `<div style="padding:15px;background:var(--error-bg);border-radius:6px;border-left:3px solid var(--error);">
<div style="font-weight:600;color:var(--error);">Error</div>
<div style="font-size:13px;margin-top:5px;">${error.message}</div>
</div>`;