/* PDFwerk — restrained, professional palette (brand blue + warm neutrals). The accent family is sampled from the client's logo (static/img/brand-*.png): #358fc6 mid-blue and #0c4d8f deep blue are exact; #2079c8 is the working primary, with #f4781d (--brand-orange, theme.css) as the secondary ink. */ /* UI typeface: Atkinson Hyperlegible, the face used across the PDF tool the client benchmarks us against. It is free (SIL OFL) — vendored under static/fonts so it ships with the app and needs no network. */ @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); } @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); } /* True italics, so slanted text uses the real face instead of a synthesised oblique (client: "use that font for all text whole site means replce with it" — nothing may fall back to another family). */ @font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2"); } @font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2"); } :root { --accent: #2079c8; --accent-2: #358fc6; --accent-dark: #0c4d8f; --accent-soft: #e8f3fb; --accent-line: #c6e2f3; --ink: #1b2129; --muted: #6b7280; --line: #e6e9ea; --line-strong: #ced5d7; --bg: #f4f8fb; --white: #ffffff; --canvas: #e9ecec; --red: #b3261e; --red-bg: #fbeceb; --red-line: #f3c9c5; --amber-bg: #fdf6e7; --amber-line: #f0dcae; --amber-ink: #8a5a00; --radius: 14px; --radius-sm: 9px; --shadow-sm: 0 1px 2px rgba(20, 30, 35, .06); --shadow: 0 8px 24px rgba(20, 30, 35, .08); --shadow-lg: 0 18px 44px rgba(20, 30, 35, .14); /* .header-inner is 64px, and the masthead wears no bottom rule, so the bar is exactly 64px. The editor shell subtracts this from 100dvh, so getting it wrong leaves the last pixel of the page below the fold. */ --header-h: 64px; /* aliases used by the editor stylesheet */ --green: var(--accent); --green-2: var(--accent-2); --green-dark: var(--accent-dark); --green-soft: var(--accent-soft); --teal: var(--accent-2); } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } html { color-scheme: light; } body { font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-text-size-adjust: 100%; } a { color: var(--accent-dark); text-decoration: none; } /* Client: "remove underline from all across the site" — hover keeps the colour change, never an underline. This used to be the site-wide a:hover underline (the hero's "or choose one of our tools" link showed it in their shot). */ a:hover, a:focus { text-decoration: none; } h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.01em; } h1 { font-size: 2rem; } h2 { font-size: 1.4rem; margin-top: 1.8em; } p { margin: 0 0 1em; } img, canvas { max-width: 100%; } .container { max-width: 1160px; margin: 0 auto; padding: 0 22px; } .muted { color: var(--muted); } .small { font-size: .85rem; } .lead { font-size: 1.1rem; color: var(--muted); max-width: 720px; margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------------ header */ .site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 12px; } .header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.18rem; color: var(--ink); letter-spacing: -.01em; } .brand:hover { text-decoration: none; } .brand-mark { background: var(--accent); color: #fff; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; letter-spacing: .02em; } .nav { display: flex; align-items: center; gap: 2px; } .nav-toggle { display: none; width: 44px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; /* Only visible once the bar collapses to the hamburger; auto pushes it to the far right of the header instead of leaving it glued to the wordmark. */ margin-left: auto; } .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); transition: .2s; } .nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav-link { background: none; border: none; font: inherit; font-size: .95rem; font-weight: 600; color: var(--ink); padding: 9px 13px; border-radius: var(--radius-sm); cursor: pointer; } .nav-link:hover { background: var(--accent-soft); color: var(--accent-dark); text-decoration: none; } .nav-dropdown { position: relative; } .dropdown-panel { display: none; position: absolute; right: 0; top: 48px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px; width: min(820px, 92vw); grid-template-columns: repeat(3, 1fr); gap: 20px; z-index: 60; } .nav-dropdown:hover .dropdown-panel, .nav-dropdown:focus-within .dropdown-panel { display: grid; } .dropdown-panel h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-dark); margin-bottom: .6em; } .dropdown-panel ul { list-style: none; margin: 0; padding: 0; } .dropdown-panel li { margin: 1px 0; } .dropdown-panel a { color: var(--ink); font-size: .9rem; display: block; padding: 5px 8px; border-radius: 7px; } .dropdown-panel a:hover { background: var(--bg); color: var(--accent-dark); text-decoration: none; } /* ----------------------------------------------------------------- buttons */ .btn { display: inline-block; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 18px; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; background: var(--white); color: var(--ink); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn:hover { text-decoration: none; background: var(--bg); border-color: var(--accent); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; } .btn-ghost { background: transparent; border-color: var(--line-strong); } .btn-sm { padding: 7px 13px; font-size: .87rem; border-radius: 7px; } .btn-lg { padding: 13px 26px; font-size: 1.02rem; border-radius: 10px; } /* ------------------------------------------------------------------- hero */ .hero { text-align: center; padding: 64px 0 24px; } .hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -.025em; } .hero h1 .grad { color: var(--accent); } .hero .lead { margin-top: 8px; } .dropzone { background: var(--white); border: 2px dashed var(--brand-line); border-radius: var(--radius); padding: 50px 22px; margin: 30px auto 16px; max-width: 720px; transition: .15s; box-shadow: var(--shadow-sm); } .dropzone:hover { border-color: var(--accent); } .dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); } .dropzone.invalid { border-color: var(--red); background: var(--red-bg); animation: shake .3s; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; } /* The landing page's drop zone: centred under the hero, the same box the tool pages use so it reads as the same product. */ .home-drop { max-width: 720px; margin: 28px auto 6px; } .trust-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; } .trust-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--white); border: 1px solid var(--line); color: var(--muted); font-size: .82rem; font-weight: 600; padding: 7px 13px; border-radius: 999px; } .trust-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .file-list { list-style: none; margin: 16px 0 0; padding: 0; text-align: left; } .file-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; margin: 6px 0; font-size: .9rem; } /* The Compress screen's size inspector (ours — Sejda has no size readout): uploaded size, and the size the current settings MEASURE at. */ .size-inspector { margin: 16px auto 0; max-width: 720px; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 16px 12px; } .si-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 5px 0; font-size: .92rem; } .si-label { color: var(--muted); font-weight: 600; } .si-value { font-weight: 800; color: var(--ink); } .si-value.si-saved { color: var(--accent-dark); } .si-params { color: var(--muted); font-weight: 500; } .si-note { margin: 6px 0 0; font-size: .78rem; color: var(--muted); } /* ---------------------------------------------------------- sections/grid */ .section { padding: 14px 0; } .section h2 { display: flex; align-items: center; gap: 12px; font-size: 1.28rem; } .section h2::before { content: ""; width: 5px; height: 22px; border-radius: 3px; background: var(--accent); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; margin-top: 14px; } .card { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); text-decoration: none; } .card h3 { font-size: 1.04rem; margin: .5em 0 .3em; } .card p { color: var(--muted); font-size: .89rem; margin: 0; } .card-cat { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-dark); font-weight: 700; } .card-icon { width: 44px; height: 44px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: var(--card-accent, var(--accent)); font-size: 1.05rem; } [data-cat="organize"] { --card-accent: #1f7a6d; } [data-cat="edit-sign"] { --card-accent: #2f5d8a; } [data-cat="format-style"] { --card-accent: #6d4b8a; } [data-cat="optimize-repair"] { --card-accent: #a9761f; } [data-cat="security"] { --card-accent: #a94b3f; } [data-cat="convert-from-pdf"] { --card-accent: #3b6ea5; } [data-cat="convert-to-pdf"] { --card-accent: #2f7d6b; } [data-cat="scans"] { --card-accent: #4a5b8a; } [data-cat="automate"] { --card-accent: #8a5a3c; } /* -------------------------------------------------------------- tool page */ .tool-page { max-width: 840px; margin: 0 auto; padding: 44px 0; } /* The branded head: the tool's own mark in the FA face the cards wear, the name in the wordmark navy with a blue→orange tick under it, the sentence in muted ink. (Client: "redesgin inside it the background the colors the headers".) The mark itself is dressed in theme.css (loaded last, on every page). */ .tool-head { text-align: center; margin-bottom: 26px; } .tool-head h1 { color: var(--brand-navy); letter-spacing: -.02em; } .tool-head h1::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 3px; margin: 14px auto 0; background: linear-gradient(90deg, var(--ocean-blue, var(--brand)), var(--sky-blue, var(--brand))); } .tool-head .lead { color: var(--muted); } .pill { display: inline-block; background: var(--accent-soft); color: var(--accent-dark); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 13px; border-radius: 999px; margin-bottom: 12px; } .tool-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); } .options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: .84rem; font-weight: 700; } .field input[type=text], .field input[type=number], .field input[type=password], .field select, .field textarea { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 11px 13px; font: inherit; background: var(--white); color: var(--ink); width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .field textarea { resize: vertical; } .field-inline { flex-direction: row; align-items: center; } /* Modal shell. These rules used to live only in editor.css, so the confirm dialog on the page tools ("Delete 3 pages?") and every other popup outside the editor rendered inline at the bottom of the document instead of over it. Anything that uses .modal/.modal-box now gets the same behaviour everywhere; editor.css still loads its own copy, which is identical. */ .modal { position: fixed; inset: 0; background: rgba(15,23,30,.5); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 12px; } .modal-box { position: relative; background: var(--white); border-radius: 5px; padding: 22px; width: min(520px, 92vw); box-shadow: var(--shadow); max-height: calc(100dvh - 24px); overflow-y: auto; } .modal-box h3 { margin: 0 0 18px; font-size: 17px; font-weight: 500; color: #333; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } /* Form furniture for the feedback popup (#feedback-modal, templates/_feedback.html) and the API page's key application dialog (#keyapply-modal, templates/api.html + static/js/keyapply.js). editor.css styles its own feedback copy; this is the tool-page twin, id-scoped so no other dialog's fields change. */ #feedback-modal label, #keyapply-modal label { display: block; margin: 0 0 6px; font-size: .9rem; font-weight: 500; } #feedback-modal input[type=email], #feedback-modal input[type=text], #feedback-modal textarea, #keyapply-modal input[type=email], #keyapply-modal input[type=text], #keyapply-modal textarea { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font: inherit; width: 100%; margin-bottom: 12px; background: var(--white); color: var(--ink); } #feedback-modal textarea, #keyapply-modal textarea { resize: vertical; } #feedback-modal .sign-close, #keyapply-modal .sign-close { position: absolute; top: 12px; right: 14px; padding: 0 4px; font-size: 24px; line-height: 1; background: none; border: 0; cursor: pointer; color: #8b9298; } #feedback-modal .sign-close:hover, #keyapply-modal .sign-close:hover { color: #333; } .field .help { font-size: .78rem; color: var(--muted); margin: 0; } .field-checkbox label, .check { display: flex; align-items: center; gap: 8px; font-weight: 500; } .switch { position: relative; display: inline-block; } .switch input { position: absolute; opacity: 0; } .switch span { display: block; width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); transition: background .15s; position: relative; } .switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; } .switch input:checked + span { background: var(--accent); } .switch input:checked + span::after { transform: translateX(18px); } .notice { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); padding: 12px 15px; border-radius: var(--radius-sm); } .privacy-note { text-align: center; margin-top: 18px; } .progress { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 20px; } .progress .bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; } .progress.indeterminate .bar { width: 35% !important; animation: slide 1.1s ease-in-out infinite; } @keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } } /* ------------------------------------------------------- processing screen Sejda's "Your task is processing" screen, and it is a takeover, not a card: the whole viewport, white, with the spinner, the heading and the auto-download offer centred on it. An earlier version drew the same content as a panel in the page flow below the Run button — which is what the client saw and rejected: the form and the how-to text were still on screen around it, which is not the screen they sent. Fixed rather than a routed page because every tool shell can show it without a navigation, and because the run already holds the visitor's uploaded files in memory — leaving the page would lose them. app.js drives it and locks the background scroll while it is up. */ .processing { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 22px; text-align: center; background: var(--white); overflow-y: auto; } .processing[hidden] { display: none; } .processing-inner { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; } .processing h2 { margin: 26px 0 6px; font-size: clamp(1.5rem, 4vw, 2.15rem); font-weight: 700; letter-spacing: -.02em; } .processing-sub { margin: 0; color: var(--muted); font-size: 1.15rem; } .processing-spin { width: 54px; height: 54px; border-radius: 50%; border: 5px solid var(--line); border-top-color: var(--accent); animation: processing-spin .9s linear infinite; } @keyframes processing-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .processing-spin { animation-duration: 2.4s; } } /* Sejda's banner is blue whatever the site's own accent is: it is an information notice about the download, not a call to action, and the theme's accent (a red, on this site) made it read as a warning. */ .processing-auto { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 26px auto 0; padding: 13px 18px; max-width: 640px; background: #e8f2fd; border-radius: 8px; color: #4a5a6a; font-size: .92rem; line-height: 1.5; } .processing-auto-text .las { color: #1a73e8; margin-right: 2px; } .processing-auto-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: #1a73e8; text-decoration: none; cursor: pointer; } .processing-auto-btn:hover { color: #1558b0; } .processing-auto-btn.is-on { text-decoration: none; } /* Upload progress, inside the takeover. Sejda has none because they upload before their screen exists; ours can be a 60MB file on a phone, and a still screen with no bar reads as stuck. */ .processing-bar { width: min(420px, 76vw); height: 6px; margin: 28px auto 0; background: var(--line); border-radius: 999px; overflow: hidden; } .processing-bar[hidden] { display: none; } .processing-bar .bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; } .processing-bar.indeterminate .bar { width: 35% !important; animation: slide 1.1s ease-in-out infinite; } /* The share row from their screen. */ .processing-share { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 56px; } .processing-share a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-size: 1.2rem; text-decoration: none; } .processing-share .ps-fb { background: #3b5998; } .processing-share .ps-tw { background: #1d9bf0; } .processing-share .ps-mail { background: #e9b949; } .processing-share a:hover { filter: brightness(1.08); } /* Nothing behind the takeover is reachable, so the page must not scroll under it. */ body.is-processing { overflow: hidden; } .error { background: var(--red-bg); border: 1px solid var(--red-line); color: var(--red); padding: 13px 15px; border-radius: var(--radius-sm); margin-top: 18px; } .results { margin-top: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); } .results-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .results-head .check-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; } .results-head h3 { margin: 0; font-size: 1.12rem; } .results-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .result-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); } .result-row:last-child { border-bottom: none; } .result-name { display: flex; align-items: center; gap: 10px; min-width: 0; } .result-name .file-icon { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-dark); border-radius: 6px; padding: 4px 7px; flex-shrink: 0; } .result-name b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .result-name .muted { flex-shrink: 0; } /* ---------------------------------------------------------------- badges */ .badge { font-size: .7rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .badge.on { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-line); } .badge.off { background: var(--bg); color: var(--muted); } /* --------------------------------------------------------------- footer */ /* The footer is styled entirely by theme-werkplaats.css (.foot-cta/.foot-main/ .foot-index/.foot-bottom). Only the gap above it is kept here so the orange signal rule does not butt up against the last section. */ .site-footer { margin-top: 70px; } /* --------------------------------------------------------------- toasts */ .toast-host { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-lg); max-width: 90vw; animation: toastin .2s ease; } .toast.ok { background: var(--accent-dark); } .toast.err { background: var(--red); } @keyframes toastin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { /* The label is the real tap target for a checkbox; give it finger height. */ .field-checkbox label, .check { min-height: 40px; } .options { grid-template-columns: 1fr; } .container { padding: 0 16px; } .hero { padding: 40px 0 14px; } .dropzone { padding: 34px 16px; } .tool-page { padding: 26px 0; } .tool-form { padding: 20px; } .grid { grid-template-columns: 1fr; } .result-row { flex-direction: column; align-items: flex-start; gap: 8px; } .result-name b { white-space: normal; } } /* Compact desktop: keep the horizontal nav instead of collapsing to the hamburger, so the app stays in desktop mode in narrow panels and split-screen editors. */ @media (max-width: 1020px) { .header-inner { gap: 8px; } .nav { gap: 0; } .nav-link { padding: 8px 9px; font-size: .92rem; } .brand-name { font-size: 1.08rem; } } /* Only fall back to the hamburger when there is genuinely no room. */ @media (max-width: 620px) { .nav-toggle { display: flex; } .nav { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; gap: 2px; background: var(--white); border-bottom: 1px solid var(--line); padding: 12px 16px 18px; box-shadow: var(--shadow); max-height: calc(100vh - 64px); overflow-y: auto; } .nav.open { display: flex; } .nav-link { width: 100%; text-align: left; padding: 12px; } .nav .btn { width: 100%; text-align: center; margin-top: 8px; } .nav-dropdown { position: static; } .dropdown-panel { position: static; display: none; width: auto; box-shadow: none; border: none; padding: 6px 0 10px 10px; grid-template-columns: 1fr; } .nav-dropdown:hover .dropdown-panel { display: none; } .nav-dropdown.open .dropdown-panel { display: grid; } } /* generic tool steps */ .tool-steps { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0 auto 16px; width: 100%; } /* ------------------------------------------------ dedicated tool screen Every tool page is one screen dedicated to its job, the way Sejda's tool screens are: base.html stops rendering the footer and the how-to guide when `dedicated` is set, and the plain tool shell fills the window instead of trailing off into marketing text. The numbered 1·2·3 chips are hidden — they were chrome around what is one action: pick a file, press the button. */ .tool-shell .tool-steps { display: none; } /* The canvas tools (Merge, Organize, Alternate & Mix, Extract images, the page tools) opt out of the 1160px reading column: main becomes the window, and each block inside brings its own gutter so the grey workspace can run edge to edge the way theirs does. The client's words: "they have lot of working place. but we dont". The page template sets this with {% block main_class %}. */ main.tool-wide { --tool-gutter: clamp(16px, 2vw, 30px); max-width: none; padding: 0; } main.tool-wide .page-back { padding-inline: var(--tool-gutter); } /* The header is a nameplate, not a billboard: the workspace sits right under it (client: "wen u upload a pdf.. shift it upward.. taking too much space"). */ .tool-shell .tool-page-dedicated { max-width: 900px; padding: 16px 0 70px; display: flex; flex-direction: column; min-height: calc(100dvh - 170px); } .tool-shell .tool-page-dedicated .tool-head { margin-bottom: 14px; } .tool-shell .tool-page-dedicated .tool-head h1 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; line-height: 1.15; margin: 4px 0 4px; } .tool-shell .tool-page-dedicated .tool-head .lead { font-size: .95rem; line-height: 1.45; max-width: 40em; margin: 6px auto 0; } /* The upload is the one thing on the screen, so give it room. */ .tool-shell .tool-page-dedicated .dropzone { padding: 64px 24px; max-width: 760px; } /* Nothing below the tool now, so the privacy line sits at the foot of the screen rather than floating in the middle of it. */ .tool-shell .tool-page-dedicated .privacy-note { margin-top: auto; padding-top: 30px; } @media (max-width: 640px) { .tool-shell .tool-page-dedicated { min-height: 0; padding: 18px 0 40px; } .tool-shell .tool-page-dedicated .dropzone { padding: 40px 16px; } } .tool-steps span { display: inline-flex; align-items: center; gap: 7px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: .82rem; font-weight: 600; color: var(--muted); } .tool-steps b { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; } .tool-hint { display: inline-block; background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent-line); border-radius: 999px; padding: 6px 14px; font-size: .85rem; margin: 2px 0 4px; } /* Divider above every tool's "Step by step" guide. History: straight hairline was invisible ("add color") → solid blue looked like an extra line ("bend and curvy the line … blend color well") → client "make it for all": the arc now also crowns the editor-family guides (.ed-guide on /pdf-editor, /pdf-forms, /sign-pdf). A gentle full-bleed arc whose blue fades to transparent at both ends, so it reads as part of the page, not a hard rule. */ .files-guide::before, .ed-guide::before { content: ""; display: block; width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 20px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%232079c8' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23358fc6' stop-opacity='.2'/%3E%3Cstop offset='.5' stop-color='%232079c8' stop-opacity='.4'/%3E%3Cstop offset='.75' stop-color='%23358fc6' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%232079c8' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 6 C 480 32 960 32 1440 6' fill='none' stroke='url(%23w)' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } /* ------------------------------------------------- long-form tool walkthrough Sejda and iLovePDF both run a detailed guide under the tool; ours is the same story in our own palette: a kicker pill, the tool name in the accent colour, step CARDS with solid numbered badges, and a picture in every step — a live mock of that stage (drop zone, the tool's own controls ringed in amber, progress → download), framed like a little window. */ .howto { max-width: 880px; margin: 64px auto 0; padding: 48px 22px 76px; border-top: 1px solid var(--line); } /* The editor's "What Each Tool Does" boxes (client plan: "add more tools info on edit pdf" → "its mess use box type for each tool" → "i mean with photo but each one with box"): the bar photo, then ONE CARD per tool — Icons8 mark, name, one-line description. The markup shipped without any of these styles, so the