@font-face { font-family: "GSans"; src: url("/fonts/GSansVar.ttf") format("truetype-variations"); font-weight: 100 700; font-style: normal; font-display: swap; } @font-face { font-family: "GSans"; src: url("/fonts/GSansVar-Italic.ttf") format("truetype-variations"); font-weight: 100 700; font-style: italic; font-display: swap; } :root { --bg: #0b1220; --panel: #111a2e; --panel-light: #16223c; --accent: #3b82f6; --accent-soft: #60a5fa; --text: #e6edf6; --text-dim: #9fb0cc; --border: #22304f; --success: #22c55e; --shadow: 0 10px 30px rgba(0,0,0,.35); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; background: var(--bg); color: var(--text); font-family: "GSans", "Segoe UI", Arial, sans-serif; } body { overflow-x: hidden; } .container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 40px; } .container h1 { margin: 24px 0 8px; } .hint { color: var(--muted); line-height: 1.45; } .section { margin-top: 18px; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); } .hidden { display: none; } /* Generic helper used by every page's file so we avoid the `hidden` HTML attribute being toggled by JS and instead control visibility via CSS only. CSP-safe (no inline styles). */ .file-input-hidden { display: none; } /* ────────────────────────────────────────────────────────────── * Server-paywall visibility helpers. * * premium-check.js adds `pdf-pay-paid` or `pdf-pay-guest` to * after the entitlement check resolves. Pages can use these * helper classes to gate UI on payPDF without inline styles: * * .pdf-paywall-notice — visible only to guests / non-paid users. * .pdf-paywall-only — visible only to paid users. * * The matching server-side check is in pdf-suite/_paywall.php; the * UI hiding is purely cosmetic — server is the source of truth. * ──────────────────────────────────────────────────────────── */ .pdf-paywall-notice { display: none; margin-top: 4px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 8px; background: rgba(59, 130, 246, .08); color: var(--text); } body.pdf-pay-guest .pdf-paywall-notice { display: block; } .pdf-paywall-only { display: none; } body.pdf-pay-paid .pdf-paywall-only { display: initial; } /* The convert button is enabled for everyone now: short documents convert for free, longer ones surface the subscription modal at submit time. */ .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt30 { margin-top: 30px; } /* ────────────────────────────────────────────────────────────── * Modal dialog used by the converter for: subscription upsell * (longer-than-10-pages free-user case) and the language-pack * picker for browser-side Tesseract OCR. * CSP-safe: visibility toggled via classes only, no inline styles. * ──────────────────────────────────────────────────────────── */ .pdf-modal { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; } .pdf-modal.pdf-modal-open { display: flex; } .pdf-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); } .pdf-modal-dialog { position: relative; max-width: 480px; width: calc(100% - 32px); padding: 24px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); } .pdf-modal-dialog h2 { margin: 0 0 12px; font-size: 1.15rem; } .pdf-modal-actions { margin-top: 18px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .pdf-modal-primary, .pdf-modal-secondary { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-light); color: var(--text); text-decoration: none; cursor: pointer; font: inherit; } .pdf-modal-primary { background: var(--accent); border-color: var(--accent); } .pdf-langpack-list { list-style: none; margin: 12px 0 0; padding: 0; max-height: 280px; overflow-y: auto; } .pdf-langpack-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); } .pdf-langpack-list li:last-child { border-bottom: 0; } .pdf-langpack-status { margin-left: auto; font-size: .85rem; color: var(--muted); } #convertProgressWrap { margin-top: 12px; } #convertProgress { width: 100%; } /* ────────────────────────────────────────────────────────────── * Shared page-level layout primitives (hero, badge, structured * SEO/FAQ/credits sections). Mirrors the layout used by the * sibling tool pages (see example.php) so the suite presents a * consistent look across all user-reachable entry points. * CSP-safe: no inline styles, class-based only. * ──────────────────────────────────────────────────────────── */ .hero { text-align: left; } .hero h1 { margin: 0 0 8px; line-height: 1.2; } .hero .hint { margin: 0 0 14px; max-width: 70ch; } .privacy-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--accent); border-radius: 999px; background: rgba(59, 130, 246, .10); color: var(--text); font-size: .92rem; line-height: 1.2; } .section.seo, .section.faq, .section.credits { line-height: 1.55; } .section.seo h2, .section.faq h2, .section.credits h2 { margin: 0 0 10px; font-size: 1.15rem; } .section.seo h3, .section.faq h3, .section.credits h3 { margin: 14px 0 6px; font-size: 1rem; color: var(--text); } .section.seo p, .section.faq p, .section.credits p { margin: 0 0 10px; color: var(--muted); } .section.seo ul, .section.credits ul { margin: 6px 0 12px; padding-left: 20px; color: var(--muted); } .section.credits a { color: var(--accent); text-decoration: none; word-break: break-word; } .section.credits a:hover, .section.credits a:focus { text-decoration: underline; } /* FOOTER */ .footer { margin-top: 40px; padding: 20px; background: var(--panel); border-top: 1px solid var(--border); color: var(--text-dim); font-size: 13px; text-align: center; } /* COOKIE BANNER */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(17, 26, 46, 0.98); border-top: 1px solid var(--border); padding: 16px; z-index: 9999; backdrop-filter: blur(8px); display:none; } .cookie-banner.cookie-banner-visible { display: block; } .cookie-wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between; } .cookie-text { flex: 1; min-width: 260px; color: var(--text-dim); font-size: 13px; } /* toggles */ .cookie-options { display: flex; flex-direction: column; gap: 6px; min-width: 200px; } .cookie-option { display: flex; justify-content: space-between; font-size: 13px; color: var(--text); background: var(--panel-light); padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); } .cookie-option input { transform: scale(1.1); } /* buttons */ .cookie-actions { display: flex; gap: 10px; align-items: center; } .cookie-btn { padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; font-size: 13px; background: var(--panel-light); color: var(--text); } .cookie-accept { background: var(--accent); border-color: var(--accent); color: white; } .cookie-reject { background: transparent; } .footer { margin-top: 40px; padding: 24px 20px; background: var(--panel); border-top: 1px solid var(--border); color: var(--text-dim); font-size: 13px; } /* layout */ .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; text-align: left; } .footer h4 { margin-bottom: 8px; font-size: 13px; color: var(--text); } /* links */ .footer a { display: block; color: var(--text-dim); text-decoration: none; margin: 3px 0; } .footer a:hover { color: var(--accent-soft); } /* message form */ .msg-box { margin-top: 8px; display: flex; gap: 6px; } .msg-box input { flex: 1; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-light); color: var(--text); font-size: 12px; } .msg-box button { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: white; cursor: pointer; font-size: 12px; } .msg-status { font-size: 11px; margin-top: 4px; color: var(--text-dim); } /* bottom line */ .footer-bottom { margin-top: 16px; text-align: center; font-size: 12px; border-top: 1px solid var(--border); padding-top: 10px; } .msg-status-ok { color: #9fb0cc; } .msg-status-error { color: #f87171; } /* ============================================================ Disabled button state ============================================================ */ .is-disabled { opacity: 0.7; cursor: wait; pointer-events: none; } .hidden { display: none; } /* ============================================================ COOKIE PAGE (CLEAN INTEGRATION WITH GLOBAL THEME) ============================================================ */ /* page wrapper */ .page-container { max-width: 900px; margin: 0 auto; padding: 30px; } /* top navigation (cookie page version) */ .page-nav { display: flex; gap: 8px; margin-bottom: 20px; } .page-nav a { padding: 8px 16px; background: var(--panel); color: var(--text-dim); text-decoration: none; border-radius: 8px; border: 1px solid var(--border); transition: 0.15s; } .page-nav a:hover { color: var(--text); background: var(--panel-light); } .page-nav a.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* content section override (reuses global section style) */ .page-section { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; } /* cookie info boxes */ .cookie-box { padding: 14px; background: var(--panel-light); border: 1px solid var(--border); border-radius: 10px; } /* headings */ .page-section h1, .page-section h3 { margin-top: 0; color: #fff; } /* text */ .page-section p { color: var(--text-dim); line-height: 1.6; } .nav a, .page-nav a { padding: 8px 16px; background: var(--panel); color: var(--text-dim); text-decoration: none; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; } .nav a.active, .page-nav a.active { background: var(--accent); color: #fff; } /* Sections */ .section, .page-section { margin-bottom: 20px; padding: 18px; background: var(--panel); border-radius: 12px; border: 1px solid var(--border); } /* Typography */ h1, h3 { margin-top: 0; } /* Cookie boxes */ .cookie-box { padding: 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-light); } .cookie-box strong { display: block; margin-bottom: 6px; color: var(--text); } .cookie-box p { margin: 0; color: var(--text-dim); } /* ────────────────────────────────────────────────────────────── * Mobile compatibility & visual-bug fixes. * * Issues addressed: * • convert.php toolbar overflows horizontally on small screens * because of many selects/labels in a single flex row. * • `.zoom-controls { margin-left: auto }` strands the zoom group * against the right edge on narrow screens, leaving an awkward * gap when the previous group wraps. * • `.nav` could scroll off-screen when icons are dense. * • `h1` is too large for phones and pushes the hint off the fold. * • The main `.container` side-padding (16px via the calc) is * a little tight on phones — keep, but stop sections clipping. * • The page-list thumb (edit.php) plus actions wrap awkwardly * at very small widths. * ──────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .container { width: min(1180px, calc(100% - 20px)); padding: 16px 0 32px; } .container h1 { font-size: 1.5rem; margin: 16px 0 6px; } .hero .hint { font-size: .95rem; } .nav { gap: 6px; margin-bottom: 14px; } .nav a { padding: 8px 10px; font-size: .92rem; } #toolbar { gap: 8px; } .toolbar-group { flex-wrap: wrap; gap: 8px; } .zoom-controls { margin-left: 0; width: 100%; justify-content: flex-start; } .file-button, button { padding: 9px 14px; } .section { padding: 14px; } .task-grid a { min-height: 88px; padding: 16px; } .pdf-modal-dialog { padding: 18px; } } @media (max-width: 420px) { .container h1 { font-size: 1.3rem; } .nav a { padding: 7px 9px; font-size: .88rem; } #zoomValue { min-width: 40px; } }