/* ============================================================================ GOpdf — Phase 1 Rebrand Stylesheet ---------------------------------------------------------------------------- Drop-in CSS that reskins the existing GOpdf HTML/JS to PDFMind's warm-paper aesthetic. Designed to load AFTER Bootstrap and AFTER your current /css/styles.css, so its tokens and primitives win the cascade. Load order in : 1. Bootstrap 2. Bootstrap Icons 3. Syncfusion (material-dark — will be neutralised in a later phase) 4. /css/styles.css ← your existing file, kept for structure 5. /css/styles.gopdf-rebrand.css ← THIS FILE, added last What this file touches: - CSS variables (both themes) - Body, scrollbars, global ambience (grain + glow) - Typography (Playfair Display + Lato) - Navbar + brand mark - Hero search bar + filter pills - Tab row (.nav-pills, .tabs-scroll, #featureTabs, #toolTabs) - Tool panel card shell + inner primitives - Drop zones, file lists, progress bars, action buttons - Form controls (inputs, selects, ranges, colour pickers, textareas) - Output-type toggle buttons - Compression level cards, compare results, diff panels - Toast-style result card - Search overlay (#searchOverlay) + backdrop - Footer What this file does NOT touch: - Logic (app.js stays untouched) - API endpoints or routing - Syncfusion viewer internals (out of scope for Phase 1) All variables cascade through `:root` (light) and `:root[data-bs-theme="dark"]`. Phase 2 will pull inline styles out of index.html so these rules can breathe. ============================================================================ */ /* ── Fonts ────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Lato:wght@300;400;500;700&display=swap'); /* ── Design tokens (LIGHT — warm paper) ───────────────────────────────────── */ :root { /* Surfaces */ --bg: #f5f2ec; --bg2: #ede9e1; --bg3: #e4dfd5; --surface: #ffffff; --surface2: #f5f2ec; --surface-raised: #ffffff; /* Text */ --text: #1a1814; --text2: #3d3a34; --text3: #7a766e; --text4: #a8a39a; /* Borders */ --border: #e4dfd5; --border-strong: #d4cfc4; /* Accents */ --gold: #9a7d4a; --gold-light: #c9a96e; --gold-dim: rgba(154, 125, 74, 0.10); --gold-glow: rgba(154, 125, 74, 0.00); --teal: #3d7068; --teal-light: #5a9e93; --teal-dim: rgba(61, 112, 104, 0.10); /* Status (muted for paper palette) */ --success: #4a7c59; /* muted evergreen instead of BS green */ --success-dim: rgba(74, 124, 89, 0.12); --warning: #b57f2a; /* warm amber */ --warning-dim: rgba(181, 127, 42, 0.12); --danger: #8b4a42; /* dusty rose-brick */ --danger-dim: rgba(139, 74, 66, 0.12); --info: #4a6a7c; /* soft slate-blue */ --info-dim: rgba(74, 106, 124, 0.12); /* Button tokens */ --btn-primary-bg: #1a1814; --btn-primary-text: #f5f2ec; --btn-primary-hover: #3d3a34; /* Shadows */ --shadow-sm: 0 1px 3px rgba(26, 24, 20, 0.08), 0 1px 2px rgba(26, 24, 20, 0.04); --shadow-md: 0 4px 16px rgba(26, 24, 20, 0.10), 0 2px 6px rgba(26, 24, 20, 0.06); --shadow-lg: 0 16px 48px rgba(26, 24, 20, 0.14), 0 4px 12px rgba(26, 24, 20, 0.08); /* Ambient effects */ --grain-opacity: 0.04; --ambient-opacity: 0; /* Radii */ --radius: 14px; --radius-sm: 10px; --radius-xs: 6px; /* Back-compat aliases for your existing styles.css / app.js colour lookups */ --bg-primary: var(--bg); --bg-secondary: var(--bg2); --bg-card: var(--surface); --text-primary: var(--text); --text-secondary: var(--text3); --border-color: var(--border); --accent: var(--gold); --accent-light: var(--gold-dim); --accent-border: color-mix(in srgb, var(--gold) 35%, transparent); --shadow: var(--shadow-md); } /* ── Design tokens (DARK — warm dark) ─────────────────────────────────────── */ :root[data-bs-theme="dark"] { --bg: #15130f; --bg2: #1f1c16; --bg3: #2a2620; --surface: #1f1c16; --surface2: #15130f; --surface-raised: #2a2620; --text: #ece5d4; --text2: #b8b0a0; --text3: #827b6e; --text4: #5a5449; --border: rgba(236, 229, 212, 0.08); --border-strong: rgba(236, 229, 212, 0.14); --gold: #d4a861; --gold-light: #e8c485; --gold-dim: rgba(212, 168, 97, 0.14); --gold-glow: rgba(212, 168, 97, 0.22); --teal: #6fb3a5; --teal-light: #8fc9bc; --teal-dim: rgba(111, 179, 165, 0.14); --success: #7fa98b; --success-dim: rgba(127, 169, 139, 0.16); --warning: #d4a861; --warning-dim: rgba(212, 168, 97, 0.16); --danger: #c97a6e; --danger-dim: rgba(201, 122, 110, 0.16); --info: #7fa0b3; --info-dim: rgba(127, 160, 179, 0.16); --btn-primary-bg: #d4a861; --btn-primary-text: #15130f; --btn-primary-hover: #e8c485; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.40); --grain-opacity: 0.08; --ambient-opacity: 0.06; --accent-border: color-mix(in srgb, var(--gold) 35%, transparent); } /* Also honour PDFMind's own data-theme attribute for forward-compat */ :root[data-theme="dark"] { color-scheme: dark; } /* ── Base + body ──────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 400; background: var(--bg) !important; color: var(--text) !important; letter-spacing: 0.005em; transition: background-color 0.35s ease, color 0.35s ease; } /* Ambient grain — subtle paper texture overlay */ 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.6'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9997; opacity: var(--grain-opacity); transition: opacity 0.35s ease; mix-blend-mode: multiply; } :root[data-bs-theme="dark"] body::before { mix-blend-mode: screen; } /* Ambient glow — barely-there lamp in the corner, dark mode only */ body::after { content: ''; position: fixed; top: -200px; left: -200px; width: 700px; height: 700px; background: radial-gradient(circle, var(--gold) 0%, transparent 60%); pointer-events: none; z-index: 0; opacity: var(--ambient-opacity); transition: opacity 0.35s ease; } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text4); } /* Selection */ ::selection { background: var(--gold-dim); color: var(--text); } /* ── Typography resets ────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 500; color: var(--text); letter-spacing: -0.01em; } h1 { font-weight: 400; } h2, h3 { font-weight: 500; } h5 { font-size: 1.1rem; } h6 { font-family: 'Lato', sans-serif !important; font-weight: 600; letter-spacing: 0.04em; } em { font-style: italic; color: var(--gold); } code { font-family: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace !important; background: var(--bg2); color: var(--text2); padding: 1px 6px; border-radius: 4px; font-size: 0.85em; } hr { border-color: var(--border) !important; opacity: 1; } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-light); } /* ── Bootstrap utility overrides (text-* used for tool icons) ─────────────── */ .text-primary { color: var(--gold) !important; } .text-success { color: var(--success) !important; } .text-warning { color: var(--warning) !important; } .text-danger { color: var(--danger) !important; } .text-info { color: var(--info) !important; } .text-secondary { color: var(--text3) !important; } .text-muted { color: var(--text3) !important; } .bg-primary { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .bg-light { background: var(--surface2) !important; } .bg-secondary { background: var(--bg2) !important; color: var(--text) !important; } .badge.bg-primary { background: var(--gold) !important; color: var(--btn-primary-text) !important; } .badge.bg-secondary { background: var(--bg3) !important; color: var(--text2) !important; } /* ── Navbar + brand ───────────────────────────────────────────────────────── */ .navbar { background: color-mix(in srgb, var(--bg) 92%, transparent) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); height: 64px; min-height: 64px; position: sticky; top: 0; z-index: 100; transition: background-color 0.35s, border-color 0.35s; } .navbar-brand { font-family: 'Playfair Display', serif !important; font-size: 1.1rem; color: var(--text) !important; font-weight: 400 !important; letter-spacing: -0.3px; } /* The red square logo — recolour its fill to gold via SVG override. We select the navbar's first and recolour it + the strokes. */ .navbar-brand svg rect[fill="#c53030"] { fill: var(--gold); } .navbar-brand svg path[stroke="#c53030"] { stroke: var(--gold); } .navbar-brand svg path[fill="white"] { fill: var(--surface); } /* "Go" + "PDF" in brand — the inline is caught by this rule since colour:#c53030 doesn't win over an !important var. */ .navbar-brand span[style*="#c53030"] { color: var(--gold) !important; } .navbar-brand span[style*="AI TOOLKIT"], .navbar-brand > span > span:last-child > span:last-child { color: var(--text3) !important; } /* ── Theme toggle (#themeToggle) — circular sun/moon button ───────────────── */ .theme-toggle { width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50% !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text2) !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; font-size: 0 !important; /* hides the word "Dark"/"Light" */ transition: all 0.3s ease; flex-shrink: 0; } .theme-toggle i { font-size: 16px; transition: transform 0.4s ease, color 0.2s ease; } .theme-toggle:hover { border-color: var(--gold) !important; color: var(--gold) !important; transform: rotate(15deg); } /* ── Hero section ─────────────────────────────────────────────────────────── */ .hero { position: relative; z-index: 1; padding: 48px 24px 24px !important; } .hero h1 { font-family: 'Playfair Display', serif !important; font-size: 2.4rem !important; font-weight: 400 !important; letter-spacing: -0.5px !important; color: var(--text) !important; margin-bottom: 10px !important; } .hero h1 span[style*="#c53030"] { color: var(--gold) !important; font-style: italic; font-weight: 400; } .hero p { font-size: 14px !important; color: var(--text3) !important; margin-bottom: 28px !important; font-weight: 300; letter-spacing: 0.01em; } /* Hero search bar (#pdfSearchInput + wrapping button) */ #pdfSearchInput { background: var(--surface) !important; border: 1.5px solid var(--border-strong) !important; color: var(--text) !important; font-family: 'Lato', sans-serif !important; font-weight: 300 !important; font-size: 15px !important; height: 50px !important; border-radius: 28px !important; padding-left: 48px !important; padding-right: 130px !important; box-shadow: var(--shadow-md); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.35s; } #pdfSearchInput::placeholder { color: var(--text4) !important; } #pdfSearchInput:focus { border-color: var(--gold) !important; box-shadow: var(--shadow-lg), 0 0 0 3px var(--gold-glow) !important; outline: none !important; } /* The "Go Search" button inside the search bar */ #pdfSearchInput + button, .hero button[onclick*="openOverlay"] { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; font-family: 'Lato', sans-serif !important; font-weight: 500 !important; border-radius: 22px !important; height: 38px !important; letter-spacing: 0.01em; transition: all 0.18s; } .hero button[onclick*="openOverlay"]:hover { background: var(--btn-primary-hover) !important; transform: translateY(-50%) scale(1.02) !important; } /* Search icon inside hero */ .hero svg[viewBox="0 0 24 24"] { color: var(--text3) !important; } /* Hero filter pills (the onclick="setPdfFilter" chips) */ .hero [onclick^="setPdfFilter"] { font-family: 'Lato', sans-serif !important; font-size: 11.5px !important; padding: 5px 13px !important; border-radius: 20px !important; border: 1px solid var(--border-strong) !important; background: var(--surface) !important; color: var(--text3) !important; font-weight: 400 !important; transition: all 0.18s; box-shadow: var(--shadow-sm); } .hero [onclick^="setPdfFilter"]:hover { border-color: var(--gold) !important; color: var(--gold) !important; } /* The "active" pill carries inline red styles — override with !important */ .hero [onclick^="setPdfFilter"][style*="fff0f0"], .hero [onclick^="setPdfFilter"][style*="#fff0f0"] { background: var(--gold-dim) !important; border-color: var(--gold) !important; color: var(--gold) !important; font-weight: 500 !important; } /* ── Tab rows (nav-pills / #featureTabs / #toolTabs) ──────────────────────── */ .tabs-scroll { flex-wrap: wrap !important; justify-content: center; padding: 4px 2px 12px; gap: 6px; row-gap: 8px; } /* #featureTabs has only 2 items — keep tighter spacing between its row and toolTabs */ #featureTabs.tabs-scroll { margin-bottom: 0 !important; } .nav-pills .nav-link { background: transparent !important; color: var(--text3) !important; border: 1px solid transparent !important; font-family: 'Lato', sans-serif !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.01em; padding: 8px 16px !important; border-radius: 10px !important; white-space: nowrap; transition: all 0.18s; box-shadow: none !important; } .nav-pills .nav-link i { margin-right: 6px; color: var(--text4); transition: color 0.18s; } .nav-pills .nav-link:hover { background: var(--bg2) !important; color: var(--text) !important; border-color: var(--border) !important; } .nav-pills .nav-link:hover i { color: var(--gold); } .nav-pills .nav-link.active { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border-strong) !important; box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--gold) !important; } .nav-pills .nav-link.active i { color: var(--gold) !important; } /* Go-AI tabs sit visually apart — give them a gold border treatment */ .nav-pills .nav-link.go-ai-tab { border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent) !important; background: var(--gold-dim) !important; color: var(--gold) !important; padding: 10px 24px !important; font-size: 14px !important; border-radius: 12px !important; } .nav-pills .nav-link.go-ai-tab i { color: var(--gold) !important; } .nav-pills .nav-link.go-ai-tab:hover { background: var(--gold) !important; color: var(--btn-primary-text) !important; border-color: var(--gold) !important; } .nav-pills .nav-link.go-ai-tab:hover i { color: var(--btn-primary-text) !important; } .nav-pills .nav-link.go-ai-tab.active { background: var(--gold) !important; color: var(--btn-primary-text) !important; border-color: var(--gold) !important; box-shadow: var(--shadow-md), 0 0 20px var(--gold-glow) !important; } .nav-pills .nav-link.go-ai-tab.active i { color: var(--btn-primary-text) !important; } /* Inner tab pattern (#aiInnerTabs — nav-tabs) */ .nav-tabs { border-bottom: 1px solid var(--border) !important; } .nav-tabs .nav-link { background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; color: var(--text3) !important; font-family: 'Lato', sans-serif !important; font-weight: 500 !important; font-size: 13px !important; padding: 10px 18px !important; border-radius: 0 !important; transition: all 0.18s; } .nav-tabs .nav-link:hover { color: var(--text) !important; border-bottom-color: var(--border-strong) !important; } .nav-tabs .nav-link.active { color: var(--gold) !important; border-bottom-color: var(--gold) !important; background: transparent !important; } /* ── Main layout cards ────────────────────────────────────────────────────── */ .card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm); transition: background-color 0.35s, border-color 0.35s; } .card.border-0 { border: 1px solid var(--border) !important; } .card-body { color: var(--text); } /* ── Drop zones ───────────────────────────────────────────────────────────── */ .drop-zone { position: relative; border: 2px dashed var(--border-strong) !important; border-radius: var(--radius) !important; background: var(--surface2) !important; padding: 36px 20px !important; text-align: center; cursor: pointer; transition: all 0.2s; overflow: hidden; } .drop-zone::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--gold-dim) 0%, transparent 60%); opacity: 0; transition: opacity 0.25s; pointer-events: none; } .drop-zone:hover { border-color: var(--gold) !important; background: var(--surface) !important; } .drop-zone:hover::before { opacity: 0.6; } .drop-zone.dragover { border-color: var(--gold) !important; background: var(--gold-dim) !important; transform: scale(1.01); } .drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .drop-zone-icon { font-size: 36px !important; color: var(--text4) !important; margin-bottom: 10px; transition: color 0.2s; } .drop-zone:hover .drop-zone-icon { color: var(--gold) !important; } .drop-zone-text { font-family: 'Lato', sans-serif; font-size: 13.5px !important; color: var(--text2) !important; line-height: 1.6; } .drop-zone-text strong { color: var(--text) !important; font-weight: 600; } .drop-zone-text span { color: var(--text3) !important; font-size: 12px; } /* ── File list items ──────────────────────────────────────────────────────── */ .file-item, .merge-file-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px !important; background: var(--surface2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; margin-bottom: 6px !important; transition: all 0.18s; } .file-item:hover, .merge-file-item:hover { border-color: var(--border-strong) !important; background: var(--surface) !important; } .file-item-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--bg2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; } .file-item-icon .text-danger { color: var(--danger) !important; } .file-item-icon .text-success { color: var(--success) !important; } .file-item-icon .text-warning { color: var(--warning) !important; } .file-item-info { flex: 1; min-width: 0; } .file-item-name { font-size: 13px !important; font-weight: 500 !important; color: var(--text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-item-size { font-size: 11px !important; color: var(--text3) !important; } .file-item-remove { background: transparent; border: none; color: var(--text4); font-size: 16px; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; } .file-item-remove:hover { background: var(--danger-dim); color: var(--danger); } /* Merge file list specifics */ .merge-file-item { flex-direction: column; align-items: stretch; cursor: grab; } .merge-file-item:active { cursor: grabbing; } .merge-file-item.dragging { opacity: 0.5; } .merge-file-item.drag-over { border-color: var(--gold) !important; background: var(--gold-dim) !important; } .merge-file-header { display: flex; align-items: center; gap: 12px; width: 100%; } .merge-file-order { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--btn-primary-text); font-weight: 600; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .merge-file-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .merge-file-size { font-size: 11px; color: var(--text3); } .merge-file-controls { display: flex; gap: 4px; } .reorder-btn { width: 28px; height: 28px; border: 1px solid var(--border); background: var(--surface); color: var(--text3); border-radius: 6px; cursor: pointer; font-size: 12px; transition: all 0.15s; } .reorder-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); } .reorder-btn:disabled { opacity: 0.35; cursor: not-allowed; } .page-range-input { width: 100%; margin-top: 8px; padding: 7px 11px; background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 8px; font-family: 'Lato', sans-serif; font-size: 12px; color: var(--text); transition: all 0.15s; } .page-range-input:focus { border-color: var(--gold) !important; outline: none; box-shadow: 0 0 0 3px var(--gold-glow); } .page-range-input::placeholder { color: var(--text4); } /* ── Action button (shared across tool panels) ────────────────────────────── */ .btn-action { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px !important; background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; border: none !important; border-radius: var(--radius-sm) !important; font-family: 'Lato', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.01em; cursor: pointer; margin-top: 16px; transition: all 0.2s; position: relative; } .btn-action:hover { background: var(--btn-primary-hover) !important; box-shadow: 0 0 24px var(--gold-glow); transform: translateY(-1px); } .btn-action:active { transform: translateY(0); } /* Tools use inline styles like style="background:var(--success)" — let those win but ensure text stays legible on the paper-palette versions. */ .btn-action[style*="--success"] { color: #ffffff !important; } .btn-action[style*="--warning"] { color: #ffffff !important; } .btn-action[style*="--info"] { color: #ffffff !important; } .btn-action[style*="--danger"] { color: #ffffff !important; } /* ── Output-type toggle buttons (splitSeparate, posCenter, fmtJpg, etc.) ──── */ .output-type-btn { background: var(--surface) !important; color: var(--text3) !important; border: 1px solid var(--border) !important; font-family: 'Lato', sans-serif !important; font-weight: 500 !important; font-size: 12.5px !important; padding: 8px 14px !important; border-radius: 8px !important; transition: all 0.18s; } .output-type-btn:hover { border-color: var(--gold) !important; color: var(--gold) !important; background: var(--gold-dim) !important; } .output-type-btn.active { background: var(--gold-dim) !important; border-color: var(--gold) !important; color: var(--gold) !important; font-weight: 600 !important; box-shadow: inset 0 0 0 1px var(--gold); } /* ── Compression level cards ──────────────────────────────────────────────── */ .compress-level-card { padding: 14px 16px !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; margin-bottom: 8px !important; background: var(--surface2) !important; cursor: pointer; transition: all 0.18s; } .compress-level-card:hover { border-color: var(--border-strong) !important; background: var(--surface) !important; } .compress-level-card.active { border-color: var(--gold) !important; background: var(--gold-dim) !important; box-shadow: inset 0 0 0 1px var(--gold); } .compress-level-header { display: flex; align-items: center; gap: 12px; } .compress-level-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex-shrink: 0; transition: all 0.18s; position: relative; } .compress-level-radio.active { border-color: var(--gold); background: var(--gold); } .compress-level-radio.active::after { content: ''; position: absolute; inset: 4px; background: var(--surface); border-radius: 50%; } .compress-level-info { flex: 1; display: flex; flex-direction: column; } .compress-level-name { font-size: 13px; font-weight: 600; color: var(--text); } .compress-level-desc { font-size: 11.5px; color: var(--text3); margin-top: 2px; } .compress-level-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text2); } /* ── Form controls (Bootstrap .form-control, .form-select, .form-range) ───── */ .form-control, .form-select { background: var(--bg) !important; border: 1px solid var(--border) !important; color: var(--text) !important; font-family: 'Lato', sans-serif !important; font-size: 13.5px !important; border-radius: 8px !important; padding: 9px 12px !important; transition: all 0.15s; } .form-control::placeholder { color: var(--text4) !important; } .form-control:focus, .form-select:focus { border-color: var(--gold) !important; background: var(--surface) !important; outline: none !important; box-shadow: 0 0 0 3px var(--gold-glow) !important; } .form-control.form-control-color { padding: 3px !important; border-radius: 6px !important; cursor: pointer; } .form-label { font-family: 'Lato', sans-serif !important; color: var(--text3) !important; letter-spacing: 0.04em; } .form-label.small.fw-bold { font-size: 10.5px !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold) !important; font-weight: 600 !important; } /* Range slider */ .form-range { --bs-primary: var(--gold); height: 1.4rem; } .form-range::-webkit-slider-thumb { background: var(--gold) !important; box-shadow: 0 0 0 3px var(--gold-glow); } .form-range::-moz-range-thumb { background: var(--gold) !important; } .form-range::-webkit-slider-runnable-track { background: var(--bg2) !important; height: 4px; border-radius: 2px; } .form-range::-moz-range-track { background: var(--bg2) !important; height: 4px; border-radius: 2px; } /* Checkboxes + radios */ .form-check-input, input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); } /* ── Progress bar ─────────────────────────────────────────────────────────── */ .progress-container { display: none; margin-top: 14px; } .progress-container.show { display: block; } .progress { height: 5px !important; background: var(--bg2) !important; border-radius: 3px !important; overflow: hidden; } .progress-bar { background: linear-gradient(90deg, var(--gold), var(--gold-light)) !important; transition: width 0.3s ease; } .progress-text { font-size: 11.5px; color: var(--text3); margin-top: 6px; text-align: center; letter-spacing: 0.02em; } /* Spinner */ .spinner-border { border-color: var(--gold); border-right-color: transparent; } .text-primary.spinner-border { border-color: var(--gold) var(--gold) transparent var(--gold); } /* ── Result section (toast-style success/error card) ──────────────────────── */ .result-section { display: none; margin-top: 16px; } .result-section.show { display: block; animation: resultFadeIn 0.3s ease; } @keyframes resultFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .result-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-left-width: 3px !important; border-radius: var(--radius-sm) !important; padding: 14px 18px; color: var(--text); } .result-card.success { border-left-color: var(--success) !important; } .result-card.error { border-left-color: var(--danger) !important; } .download-btn { display: inline-flex !important; align-items: center; gap: 8px; padding: 9px 16px !important; background: var(--gold) !important; color: var(--btn-primary-text) !important; border: none !important; border-radius: 8px !important; font-family: 'Lato', sans-serif !important; font-weight: 500 !important; font-size: 13px !important; text-decoration: none !important; margin-top: 10px; margin-right: 8px; transition: all 0.18s; } :root:not([data-bs-theme="dark"]) .download-btn { color: #ffffff !important; } .download-btn:hover { background: var(--gold-light) !important; box-shadow: 0 0 16px var(--gold-glow); transform: translateY(-1px); } /* ── Bootstrap .btn variants used around the UI ───────────────────────────── */ .btn-primary { background: var(--btn-primary-bg) !important; border-color: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; font-family: 'Lato', sans-serif !important; font-weight: 500 !important; border-radius: 8px !important; transition: all 0.18s; } .btn-primary:hover { background: var(--btn-primary-hover) !important; border-color: var(--btn-primary-hover) !important; } .btn-outline-primary { color: var(--gold) !important; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent) !important; background: transparent !important; font-family: 'Lato', sans-serif !important; font-weight: 500 !important; border-radius: 8px !important; transition: all 0.18s; } .btn-outline-primary:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--btn-primary-text) !important; } .btn-outline-secondary { color: var(--text3) !important; border: 1px solid var(--border-strong) !important; background: transparent !important; border-radius: 8px !important; } .btn-outline-secondary:hover { color: var(--text) !important; border-color: var(--text3) !important; background: var(--bg2) !important; } .btn-outline-danger { color: var(--danger) !important; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent) !important; background: transparent !important; border-radius: 8px !important; } .btn-outline-danger:hover { background: var(--danger) !important; color: #ffffff !important; border-color: var(--danger) !important; } .btn-success { background: var(--success) !important; border-color: var(--success) !important; color: #ffffff !important; } /* Template suggestion chips */ .template-suggestion { font-size: 12px !important; padding: 6px 13px !important; border-radius: 20px !important; } /* ── Supported formats badges (fmt-word, fmt-ppt, etc.) ───────────────────── */ .fmt-badge { font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 500; padding: 4px 11px; border-radius: 12px; background: var(--bg2); color: var(--text2); border: 1px solid var(--border); letter-spacing: 0.01em; } .fmt-badge.fmt-word { color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); background: var(--info-dim); } .fmt-badge.fmt-ppt { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); background: var(--warning-dim); } .fmt-badge.fmt-excel { color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); background: var(--success-dim); } .fmt-badge.fmt-txt { color: var(--text3); } .fmt-badge.fmt-html { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 30%, transparent); background: var(--gold-dim); } /* ── Preview panel (right column) ─────────────────────────────────────────── */ .preview-panel .card, .preview-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 20px; } .preview-title { font-family: 'Playfair Display', serif !important; font-size: 1.05rem; font-weight: 500; color: var(--text); padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .preview-title i { color: var(--gold); } .preview-empty { text-align: center; padding: 48px 16px; color: var(--text4); } .preview-empty-icon { font-size: 48px; color: var(--text4); opacity: 0.4; margin-bottom: 12px; } .preview-file-info { display: flex; flex-direction: column; gap: 10px; } .preview-thumbnail { background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 8px; padding: 10px; display: flex; align-items: center; justify-content: center; min-height: 140px; box-shadow: var(--shadow-sm); } .preview-thumbnail-icon { font-size: 56px; color: var(--text4); opacity: 0.6; } .info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 12.5px; } .info-row:last-child { border-bottom: none; } .info-label { color: var(--text3); letter-spacing: 0.04em; font-size: 11px; text-transform: uppercase; } .info-value { color: var(--text); font-weight: 500; } /* ── Alert (used for error messages) ──────────────────────────────────────── */ .alert-danger { background: var(--danger-dim) !important; border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent) !important; color: var(--danger) !important; border-radius: var(--radius-sm) !important; font-size: 13px; } /* ── Chat bubbles (AI panel) ──────────────────────────────────────────────── */ #chatThread { background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; color: var(--text); } #chatThread .bg-primary { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; border-radius: 14px 4px 14px 14px !important; } #chatThread .bg-white.border { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 4px 14px 14px 14px !important; box-shadow: var(--shadow-sm); } .input-group .form-control { border-radius: 8px 0 0 8px !important; } .input-group .btn-primary { border-radius: 0 8px 8px 0 !important; } /* ── Diff panels (compare tool) ───────────────────────────────────────────── */ .similarity-score { background: var(--surface2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm); padding: 18px; display: flex; align-items: center; gap: 20px; margin-bottom: 18px; } .similarity-circle { width: 84px; height: 84px; border-radius: 50%; background: var(--gold) !important; color: var(--btn-primary-text); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-weight: 500; flex-shrink: 0; box-shadow: var(--shadow-md); } .similarity-circle span:first-child { font-size: 20px; } .similarity-label { font-family: 'Lato', sans-serif; font-size: 10px !important; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; } .similarity-stats { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; } .stat-item { display: flex; flex-direction: column; } .stat-value { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 500; color: var(--text); } .stat-label { font-size: 10.5px; color: var(--text3); letter-spacing: 0.08em; text-transform: uppercase; } .stat-item.removed .stat-value { color: var(--danger); } .stat-item.added .stat-value { color: var(--success); } .diff-header { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; } .diff-header-item { padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px 6px 0 0; font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 6px; } .diff-header-item.removed { border-top: 2px solid var(--danger); color: var(--danger); } .diff-header-item.added { border-top: 2px solid var(--success); color: var(--success); } .diff-container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 420px; } .diff-panel { background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 0 0 6px 6px; padding: 10px; overflow-y: auto; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; } .diff-line { padding: 2px 6px; border-radius: 3px; white-space: pre-wrap; word-break: break-all; color: var(--text2); } .diff-line.added { background: var(--success-dim); color: var(--success); } .diff-line.removed { background: var(--danger-dim); color: var(--danger); } .diff-line.common { color: var(--text3); opacity: 0.85; } /* ── Search overlay (#searchOverlay + #searchBackdrop) ────────────────────── */ #searchOverlay { background: var(--bg) !important; box-shadow: 0 16px 64px rgba(0, 0, 0, 0.25) !important; border-bottom: 1px solid var(--border); } #overlaySearchInput { background: var(--surface) !important; border: 1.5px solid var(--border-strong) !important; color: var(--text) !important; font-family: 'Lato', sans-serif !important; font-weight: 300 !important; font-size: 14px !important; border-radius: 22px !important; padding-left: 40px !important; } #overlaySearchInput::placeholder { color: var(--text4) !important; } #overlaySearchInput:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px var(--gold-glow) !important; } #overlaySearchInput + button { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; border-radius: 18px !important; font-family: 'Lato', sans-serif !important; font-weight: 500 !important; } /* Overlay close button */ #searchOverlay button[onclick="closeOverlay()"] { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text3) !important; border-radius: 10px !important; transition: all 0.15s; } #searchOverlay button[onclick="closeOverlay()"]:hover { border-color: var(--gold) !important; color: var(--gold) !important; background: var(--gold-dim) !important; } /* Overlay filter pills (.ovf-pill) — inherit from existing selector but retune */ .ovf-pill { font-family: 'Lato', sans-serif !important; font-size: 11.5px !important; padding: 5px 13px !important; background: var(--surface) !important; border: 1px solid var(--border-strong) !important; color: var(--text3) !important; border-radius: 20px !important; transition: all 0.18s; } .ovf-pill:hover { border-color: var(--gold) !important; color: var(--gold) !important; } .ovf-pill.active { background: var(--gold-dim) !important; border-color: var(--gold) !important; color: var(--gold) !important; font-weight: 600 !important; } /* Overlay result cards (.ov-card) */ .ov-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm); transition: all 0.18s; } .ov-card:hover { border-color: var(--border-strong) !important; box-shadow: var(--shadow-md) !important; transform: translateY(-1px); } .ov-card .ov-title { font-family: 'Playfair Display', serif !important; color: var(--text) !important; font-size: 1.02rem !important; line-height: 1.35; } .ov-card .ov-title:hover { color: var(--gold) !important; } .ov-card .ov-url { font-family: 'Lato', sans-serif; color: var(--teal) !important; font-size: 11px !important; } .ov-card .ov-snippet { font-family: 'Lato', sans-serif; color: var(--text3) !important; font-size: 12.5px !important; line-height: 1.6; } /* The red PDF icon tile inside each ov-card — recolour via attribute override */ .ov-card div[style*="#2a1010"] { background: var(--gold-dim) !important; border-color: color-mix(in srgb, var(--gold) 35%, transparent) !important; color: var(--gold) !important; } /* Overlay action buttons */ .ov-act-btn { font-family: 'Lato', sans-serif !important; font-weight: 500 !important; font-size: 12px !important; padding: 7px 14px !important; border-radius: 8px !important; transition: all 0.18s; } .ov-btn-primary { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; box-shadow: none !important; } .ov-btn-primary:hover { background: var(--btn-primary-hover) !important; } .ov-btn-ghost { background: var(--surface2) !important; color: var(--text2) !important; border: 1px solid var(--border) !important; } .ov-btn-ghost:hover { border-color: var(--gold) !important; color: var(--gold) !important; background: var(--gold-dim) !important; } .ov-select-btn { font-family: 'Lato', sans-serif !important; font-weight: 500 !important; font-size: 11.5px !important; padding: 5px 13px !important; background: transparent !important; border: 1px solid var(--border-strong) !important; color: var(--text3) !important; border-radius: 8px !important; transition: all 0.18s; } .ov-select-btn:hover { border-color: var(--gold) !important; color: var(--gold) !important; background: var(--gold-dim) !important; } .ov-select-btn.selected { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--btn-primary-text) !important; } /* Overlay skeleton */ .ov-skel { background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%) !important; background-size: 200% 100% !important; } /* Overlay pagination */ .pg-btn { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text2) !important; font-family: 'Lato', sans-serif !important; border-radius: 8px !important; transition: all 0.15s; } .pg-btn:hover { border-color: var(--gold) !important; color: var(--gold) !important; background: var(--gold-dim) !important; } .pg-btn.active { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--btn-primary-text) !important; } /* ── Footer ───────────────────────────────────────────────────────────────── */ footer { background: var(--surface2) !important; border-top: 1px solid var(--border) !important; color: var(--text3); transition: background-color 0.35s, border-color 0.35s; } footer h6 { color: var(--text3) !important; } footer p, footer span, footer li { color: var(--text3) !important; } footer span[style*="font-weight:600"], footer span[style*="color:var(--text-primary)"] { color: var(--text) !important; } footer li { transition: color 0.15s; cursor: pointer; } footer li:hover { color: var(--text) !important; } /* Footer logo SVG — recolour red to gold */ footer svg rect[fill="#c53030"] { fill: var(--gold); } footer svg path[stroke="#c53030"] { stroke: var(--gold); } /* ── Annotate overlay (kept intact; just theme its chrome) ────────────────── */ .annotate-topbar { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; } .annotate-topbar h5 { font-family: 'Playfair Display', serif !important; color: var(--text); } .annotate-status { font-family: 'Lato', sans-serif; color: var(--text3); font-size: 12.5px; } .annotate-open-label { background: var(--btn-primary-bg); color: var(--btn-primary-text); padding: 8px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.18s; } .annotate-open-label:hover { background: var(--btn-primary-hover); } .annotate-close-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text3); padding: 8px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; margin-left: 8px; transition: all 0.15s; } .annotate-close-btn:hover { border-color: var(--danger); color: var(--danger); } /* ── Responsive tweaks ────────────────────────────────────────────────────── */ @media (max-width: 768px) { .hero h1 { font-size: 1.8rem !important; } .hero p { font-size: 13px !important; } #pdfSearchInput { font-size: 14px !important; height: 44px !important; padding-right: 110px !important; } .nav-pills .nav-link { font-size: 12px !important; padding: 6px 12px !important; } } /* ── End ─────────────────────────────────────────────────────────────────── */