:root{ --bg:#f7f8fb; --card:#ffffff; --text:#0f172a; --muted:#475569; --border:#e2e8f0; --primary:#0f172a; --primaryText:#ffffff; --focus:#94a3b8; --radius:14px; --max:980px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:var(--bg); line-height:1.45; } a{color:inherit} .container{max-width:var(--max);margin:0 auto;padding:18px} header{ position:sticky;top:0;z-index:5; background:rgba(247,248,251,.85); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); } .nav{display:flex;align-items:center;gap:14px;justify-content:space-between} .brand{display:flex;align-items:center;gap:10px;text-decoration:none} .brand strong{letter-spacing:.2px} .navlinks{display:flex;gap:14px;flex-wrap:wrap} .navlinks a{text-decoration:none;color:var(--muted);padding:8px 10px;border-radius:10px} .navlinks a:hover{background:#eef2ff;color:var(--text)} .navlinks a[aria-current="page"]{background:#eef2ff;color:var(--text)} /* Desktop-only: keep header tools nav in a single row (no wrap). */ @media (min-width:1024px){ .nav{flex-wrap:nowrap} .navlinks{flex-wrap:nowrap;white-space:nowrap} .navlinks a{white-space:nowrap} } /* Header: More dropdown (desktop) */ .more-menu{position:relative;display:inline-flex;align-items:center} .nav-more{ border:0; background:transparent; color:var(--muted); padding:8px 10px; border-radius:10px; cursor:pointer; font:inherit; } .nav-more:hover{background:#eef2ff;color:var(--text)} .nav-more.is-active{background:#eef2ff;color:var(--text)} .more-panel{ position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:8px; box-shadow:0 14px 34px rgba(15,23,42,.10); display:none; z-index:20; } .more-menu[data-open="1"] .more-panel{display:block} .more-panel a{ display:block; padding:10px 10px; border-radius:10px; text-decoration:none; color:var(--muted); } .more-panel a:hover{background:#eef2ff;color:var(--text)} .more-panel a[aria-current="page"]{background:#eef2ff;color:var(--text)} main{padding:18px 0 28px} .hero{padding:18px 0 6px} .hero h1{margin:0 0 8px;font-size:clamp(26px,4vw,38px)} .hero p{margin:0;color:var(--muted);max-width:72ch} .grid{display:grid;gap:12px;grid-template-columns:repeat(1,minmax(0,1fr));margin-top:16px} @media (min-width:720px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:980px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; } .card h2{margin:0 0 6px;font-size:18px} .card p{margin:0 0 12px;color:var(--muted);font-size:14px} .card a.btn{display:inline-flex} .card-badge{display:none} .section{margin-top:16px} .section h2{margin:0 0 10px;font-size:18px} .small{font-size:13px;color:var(--muted)} .ad-slot{ background:rgba(15,23,42,.04); border:1px dashed var(--border); border-radius:12px; padding:12px; color:var(--muted); text-align:center; font-size:13px; display:none; } /* Ads are disabled by default until AdSense IDs are available. Re-enable by setting: */ html[data-ads="1"] .ad-slot{display:block} /* Android cross-promo (hidden until published) */ [data-android-promo]{display:none !important} html[data-android-promo="1"] a[data-android-promo]{display:inline-flex !important} html[data-android-promo="1"] [data-android-promo]:not(a){display:block !important} .tool-head{padding:18px 0 8px} .tool-head h1{margin:0 0 6px;font-size:clamp(24px,4vw,34px)} .tool-head p{margin:0;color:var(--muted);max-width:75ch} .dropzone{ margin-top:12px; border:2px dashed var(--border); background:#fff; border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:10px; } .dropzone.is-dragover{border-color:var(--focus);background:#f1f5f9} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} /* Form controls (aligned with QR/PDF design language) */ label{display:block;font-weight:800;font-size:13px;margin:0 0 6px} input[type=text], input[type=number], textarea, select{ width:100%; padding:11px 12px; border-radius:12px; border:1px solid var(--border); outline:none; background:#fff; color:var(--text); } textarea{min-height:140px;resize:vertical} input:focus, textarea:focus, select:focus{border-color:rgba(148,163,184,.8);box-shadow:0 0 0 4px rgba(148,163,184,.18)} .check{ display:inline-flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); user-select:none; } .check input{width:16px;height:16px} input[type=file]{display:none} .btn{ border:1px solid var(--border); background:#fff; color:var(--text); padding:10px 14px; border-radius:12px; cursor:pointer; text-decoration:none; font-weight:600; display:inline-flex; gap:8px; align-items:center; } .btn:hover{background:#f8fafc} .btn.primary{background:var(--primary);color:var(--primaryText);border-color:var(--primary)} .btn.primary:hover{filter:brightness(1.05)} .btn:disabled{opacity:.6;cursor:not-allowed} .btn:focus-visible{outline:3px solid rgba(148,163,184,.6);outline-offset:2px} .pill{font-size:12px;border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:var(--muted)} .kv{display:grid;grid-template-columns:1fr;gap:10px} @media (min-width:720px){.kv{grid-template-columns:1.2fr .8fr}} .panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px} .page-panel{margin-top:18px} .list{display:grid;gap:10px;margin-top:10px} .file-item{ border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; gap:10px; align-items:center; background:#fff; } .thumb{width:56px;height:56px;border-radius:10px;object-fit:cover;border:1px solid var(--border);background:#f1f5f9} .meta{flex:1;min-width:0} .meta strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .meta span{display:block;font-size:12px;color:var(--muted)} .actions{display:flex;gap:8px;align-items:center} .iconbtn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer} .iconbtn:hover{background:#f8fafc} .note{font-size:13px;color:var(--muted)} .hr{height:1px;background:var(--border);margin:14px 0} .faq details{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 12px} .faq details+details{margin-top:10px} .faq summary{cursor:pointer;font-weight:700} .footer{border-top:1px solid var(--border);padding:18px 0;color:var(--muted)} .footer .row{justify-content:space-between} .footer a{color:var(--muted);text-decoration:none} .footer a:hover{color:var(--text)} .status{font-size:13px;color:var(--muted)} .preview{width:100%;height:min(70vh,720px);border:1px solid var(--border);border-radius:12px;background:#fff} .preview-wrap{width:100%} .preview-shell{ width:100%; max-width:1040px; margin:0 auto; height:min(70vh,800px); overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:#fff; } .preview-shell iframe.preview, .preview-shell embed.preview, .preview-shell object.preview{ width:100%; height:100%; display:block; border:0; } .preview-canvas{width:100%;display:block;border:0;border-radius:var(--radius);background:#fff} .progress-card{ margin-top:10px; border:1px solid var(--border); background:#fff; border-radius:var(--radius); padding:12px; } .progress-bar{ margin-top:10px; height:10px; border-radius:999px; background:rgba(15,23,42,.08); overflow:hidden; } .progress-bar__fill{ height:100%; width:0%; background:var(--primary); border-radius:999px; transition:width .12s ease; } .progress-steps{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:6px; } .progress-steps li{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; min-width:0; } .progress-steps li::before{ content:''; width:10px; height:10px; border-radius:50%; border:2px solid rgba(15,23,42,.18); flex:0 0 auto; } .progress-steps li.is-active{color:var(--text);font-weight:800} .progress-steps li.is-active::before{border-color:var(--primary)} .progress-steps li.is-done{color:var(--text)} .progress-steps li.is-done::before{background:var(--primary);border-color:var(--primary)} .progress-steps li.is-hidden{display:none} html[data-busy="1"] body[data-tool="image-to-pdf"] [data-file-list]{pointer-events:none;opacity:.75} html[data-busy="1"] body[data-tool="image-to-pdf"] [data-file-list] .iconbtn{pointer-events:none} /* Mobile-first UX improvements (<= 767px) */ .tools-menu-btn{display:none} .tools-sheet{ position:fixed; inset:0; z-index:50; display:none; align-items:end; } .tools-sheet:not([hidden]){display:grid} .tools-sheet__backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.26); } .tools-sheet__panel{ position:relative; background:var(--card); border-top:1px solid var(--border); border-radius:20px 20px 0 0; padding:14px; max-height:min(72vh,520px); overflow:auto; transform:translateY(0); } .tools-sheet__header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px 10px} .tools-sheet__title{font-weight:800;letter-spacing:.2px} .tools-sheet__list{display:grid;gap:6px} .tools-sheet__list a{ text-decoration:none; padding:12px 12px; border-radius:12px; border:1px solid var(--border); background:#fff; font-weight:700; } .tools-sheet__list a[aria-current="page"]{border-color:rgba(15,23,42,.28);background:#f1f5f9} .tools-sheet__item{display:flex;align-items:center;justify-content:space-between;gap:10px} .tools-sheet__meta{font-size:12px;color:var(--muted);font-weight:700} .tools-sheet__item--disabled{ padding:12px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.75); color:var(--muted); opacity:.75; } /* Cookie consent banner */ .cookie-banner{ position:fixed; left:12px; right:12px; bottom:12px; z-index:60; } .cookie-banner__inner{ max-width:var(--max); margin:0 auto; background:rgba(15,23,42,.96); color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:12px 14px; display:flex; gap:12px; align-items:center; justify-content:space-between; box-shadow:0 10px 30px rgba(0,0,0,.18); } .cookie-banner__desc{color:rgba(255,255,255,.86)} .cookie-banner a{color:rgba(255,255,255,.92)} .cookie-banner a:hover{color:#fff} .cookie-banner__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} .cookie-banner .btn{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); color:#fff; } .cookie-banner .btn:hover{ background:rgba(255,255,255,.16); color:#fff; } /* Hard guarantee: Reject button never loses contrast on hover/focus */ .cookie-banner .btn[data-cookie-reject]{ background:rgba(255,255,255,.10); color:#fff; } .cookie-banner .btn[data-cookie-reject]:hover, .cookie-banner .btn[data-cookie-reject]:focus-visible{ background:rgba(255,255,255,.16); color:#fff; } .cookie-banner .btn.primary{ background:#fff; border-color:#fff; color:var(--primary); } .cookie-banner .btn.primary:hover{filter:brightness(.96)} @media (max-width:720px){ .cookie-banner__inner{flex-direction:column;align-items:stretch} .cookie-banner__actions{justify-content:stretch} .cookie-banner__actions .btn{width:100%;justify-content:center} } html[data-tools-open="1"], html[data-tools-open="1"] body{overflow:hidden} .dropzone-top{align-items:flex-start} .dropzone-actions{align-items:center} .range{width:100%} .range-wrap{padding:0} @media (max-width: 767px){ .container{padding:14px} main{padding:10px 0 18px} .hero{padding:10px 0 2px} .section{margin-top:12px} .card{padding:12px} .dropzone{padding:14px} /* Navigation: replace horizontal links with Tools button */ .navlinks{display:none} .tools-menu-btn{display:inline-flex} .tools-menu-btn{ width:44px; height:44px; min-width:44px; min-height:44px; padding:0; border-radius:999px; justify-content:center; align-items:center; background:var(--primary); border-color:var(--primary); color:var(--primaryText); box-shadow:0 6px 18px rgba(15,23,42,.12); -webkit-tap-highlight-color:transparent; user-select:none; touch-action:manipulation; } .tools-menu-btn::before{ content:'☰'; font-size:22px; line-height:1; font-weight:800; transform:translateY(-1px); } /* Mobile browsers can "stick" :hover after tap; keep the button dark in all states. */ .tools-menu-btn:hover, .tools-menu-btn:focus, .tools-menu-btn:focus-visible{ background:var(--primary); border-color:var(--primary); color:var(--primaryText); filter:brightness(1.03); } .tools-menu-btn:active{ background:var(--primary); border-color:var(--primary); color:var(--primaryText); filter:brightness(.96); transform:translateY(1px); } .tools-menu-btn:focus-visible{outline:3px solid rgba(148,163,184,.8);outline-offset:3px} /* Reduce tool head padding (inline styles removed in tool pages) */ .tool-head{padding:10px 0 6px} .page-panel{margin-top:10px} /* Better dropzone ergonomics */ .dropzone-top{flex-direction:column;align-items:stretch;gap:12px} .dropzone-actions{width:100%;flex-direction:column;align-items:stretch;gap:8px} /* Primary CTA: Image to PDF - Select images */ body[data-tool="image-to-pdf"] [data-dropzone] [data-pick]{ width:100%; justify-content:center; min-height:52px; height:auto; padding:14px 16px; line-height:1.15; white-space:normal; font-size:16px; background:var(--primary); color:var(--primaryText); border-color:var(--primary); } body[data-tool="image-to-pdf"] [data-dropzone] [data-clear]{ border-color:transparent; background:transparent; color:var(--muted); padding:10px 12px; } /* Selected images list: prevent horizontal overflow */ body[data-tool="image-to-pdf"] [data-file-list]{max-width:100%} body[data-tool="image-to-pdf"] .file-item{max-width:100%;min-width:0;overflow:hidden} body[data-tool="image-to-pdf"] .meta{min-width:0} body[data-tool="image-to-pdf"] .meta strong{ white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; word-break:break-word; } body[data-tool="image-to-pdf"] .meta span{overflow-wrap:anywhere;word-break:break-word} /* Result actions: mobile-first (download/share/preview) */ body[data-tool="image-to-pdf"] [data-result]{max-width:100%} body[data-tool="image-to-pdf"] [data-result] *{max-width:100%} body[data-tool="image-to-pdf"] [data-result] .small{min-width:0} body[data-tool="image-to-pdf"] [data-result-name]{ min-width:0; overflow-wrap:anywhere; word-break:break-word; } body[data-tool="image-to-pdf"] [data-result] .row{width:100%} body[data-tool="image-to-pdf"] [data-result] .row > *{min-width:0} body[data-tool="image-to-pdf"] [data-download], body[data-tool="image-to-pdf"] [data-share], body[data-tool="image-to-pdf"] [data-preview-toggle]{ width:100%; justify-content:center; min-height:52px; height:auto; padding:14px 16px; line-height:1.15; } /* Preview: avoid blank/black iframe on mobile; use canvas preview instead */ body[data-tool="image-to-pdf"] .preview-wrap{max-width:100%;overflow:hidden} body[data-tool="image-to-pdf"] iframe.preview{display:none} body[data-tool="image-to-pdf"] .preview-canvas{display:block;max-width:100%} /* Touch-friendly sliders */ .range-wrap{padding:0 6px} input[type=range]{height:32px} input[type=range]::-webkit-slider-thumb{width:28px;height:28px} input[type=range]::-moz-range-thumb{width:28px;height:28px} /* Progressive disclosure: hide reorder tips until selection exists */ .note[data-tip-reorder]{display:none} html[data-has-items="1"] .note[data-tip-reorder]{display:block} } @media (min-width: 768px){ .tools-menu-btn{display:none} .tools-sheet{display:none !important} /* Desktop preview: use canvas to avoid internal scrollbars. */ body[data-tool="image-to-pdf"] iframe.preview{display:none} body[data-tool="image-to-pdf"] .preview-canvas{display:block} body[data-tool="merge-pdf"] iframe.preview{display:none} body[data-tool="merge-pdf"] .preview-canvas{display:block} } /* Desktop polish (>= 1024px). Keep mobile behavior unchanged. */ @media (min-width: 1024px){ /* Hero: compact, product-like */ main{padding:14px 0 26px} .hero{padding:10px 0 2px} .hero h1{line-height:1.06;letter-spacing:-.2px;margin:0 0 6px} .hero p{line-height:1.35} /* Grid rhythm */ .grid{gap:14px;margin-top:14px} .section{margin-top:14px} /* Cards: consistent height + CTA alignment */ .card{display:flex;flex-direction:column;min-height:168px} .card p{margin-bottom:14px} .card a.btn{margin-top:auto} /* Hover: subtle elevation */ .card{transition:box-shadow .12s ease, transform .12s ease, border-color .12s ease} .card:hover{border-color:rgba(15,23,42,.18);box-shadow:0 10px 24px rgba(15,23,42,.08);transform:translateY(-1px)} /* CTA: more deliberate on desktop */ .btn{padding:11px 16px} .btn:not(.primary):hover{background:#f1f5f9} .btn.primary:hover{filter:brightness(1.06)} /* Primary tool emphasis */ .card.primary-card{border-color:rgba(15,23,42,.22);box-shadow:0 10px 28px rgba(15,23,42,.10)} .card.primary-card:hover{box-shadow:0 14px 34px rgba(15,23,42,.12)} .card.primary-card .card-badge{ display:inline-flex; align-self:flex-start; font-size:12px; font-weight:800; letter-spacing:.2px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(15,23,42,.04); color:var(--text); margin-bottom:8px; } }