/* MakeItPDF -- white paper, black ink, one action red. */
@font-face {
font-family: "Figtree";
src: url("vendor/fonts/figtree-400.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Figtree";
src: url("vendor/fonts/figtree-500.woff2") format("woff2");
font-style: normal;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Figtree";
src: url("vendor/fonts/figtree-600.woff2") format("woff2");
font-style: normal;
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: "Figtree";
src: url("vendor/fonts/figtree-700.woff2") format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
}
:root {
--bg: #ffffff;
--ink: #101113;
--muted: #6e7278;
--line: #e6e8eb;
--surface: #f7f8f9;
--accent: #f4402d;
--accent-hover: #db3524;
--radius: 14px;
--font: "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font);
font-size: 16px;
line-height: 1.55;
font-feature-settings: "tnum" 1;
-webkit-font-smoothing: antialiased;
}
h1, h2, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
/* Layout classes below set display, which would otherwise beat [hidden]. */
[hidden] { display: none !important; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
:where(a, button, input, label, [tabindex]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 6px;
}
/* ---- Logo --------------------------------------------------------------- */
/* The logo is the page heading -- there is no separate title. */
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.5rem, 1.6vw, 0.8rem);
color: var(--accent);
text-decoration: none;
}
.logo__mark {
display: block;
width: clamp(2.3rem, 7vw, 3.1rem);
height: clamp(2.3rem, 7vw, 3.1rem);
}
.logo__text {
color: var(--ink);
font-size: clamp(1.95rem, 6vw, 2.7rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.038em;
}
.logo__accent { color: var(--accent); }
/* ---- Page --------------------------------------------------------------- */
.page {
max-width: 43rem;
margin: 0 auto;
padding: clamp(3rem, 9vw, 5rem) 1.25rem 4rem;
}
.intro { text-align: center; }
.intro__sub {
margin: 0.85rem auto 0;
max-width: 27rem;
color: var(--muted);
font-size: 1.06rem;
}
.alert {
margin-top: 1.75rem;
padding: 0.8rem 1rem;
border-radius: 10px;
background: color-mix(in srgb, var(--accent) 8%, var(--bg));
color: var(--accent-hover);
font-size: 0.94rem;
font-weight: 500;
text-align: center;
}
.footnote {
margin-top: 2.5rem;
color: var(--muted);
font-size: 0.85rem;
text-align: center;
}
/* ---- Buttons ------------------------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.7rem 1.4rem;
border: 0;
border-radius: 10px;
background: var(--ink);
color: #fff;
font-family: inherit;
font-size: 0.98rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background 130ms ease, opacity 130ms ease;
}
.btn--accent { background: var(--accent); }
.btn:hover:not(:disabled) { background: #2b2d31; }
.btn--accent:hover:not(:disabled) { background: var(--accent-hover); }
.btn--lg { padding: 0.85rem 1.9rem; font-size: 1.02rem; }
.btn--block {
display: flex;
width: 100%;
margin-top: 1.75rem;
padding: 0.95rem 1.5rem;
font-size: 1.05rem;
}
.btn:disabled {
background: var(--surface);
color: var(--muted);
cursor: default;
}
.link {
padding: 0;
border: 0;
background: none;
color: var(--muted);
font-family: inherit;
font-size: 0.92rem;
font-weight: 500;
cursor: pointer;
}
.link:hover { color: var(--ink); }
.link:disabled { opacity: 0.45; cursor: default; }
/* ---- Dropzone ----------------------------------------------------------- */
/* Kept in the DOM and focusable, but the label is what you see. */
.picker {
position: absolute;
width: 1px; height: 1px;
opacity: 0;
}
.dropzone {
display: grid;
justify-items: center;
gap: 0.35rem;
margin-top: 2rem;
padding: clamp(2.5rem, 8vw, 4rem) 1.5rem;
border: 1.5px dashed var(--line);
border-radius: var(--radius);
background: var(--surface);
text-align: center;
transition: border-color 130ms ease, background 130ms ease;
}
.format-spine {
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 2.6rem;
margin-bottom: 1.05rem;
}
.format-spine span {
display: grid;
place-items: center;
width: 3.15rem;
height: 2.2rem;
margin-left: -0.35rem;
border: 1px solid var(--line);
border-radius: 5px 5px 2px 2px;
background: #fff;
color: var(--muted);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.035em;
transform: rotate(calc((var(--i, 0) - 2.5) * 2deg));
transform-origin: 50% 110%;
box-shadow: 0 3px 10px rgb(16 17 19 / 4%);
}
.format-spine span:nth-child(1) { --i: 0; }
.format-spine span:nth-child(2) { --i: 1; }
.format-spine span:nth-child(3) { --i: 2; }
.format-spine span:nth-child(4) { --i: 3; }
.format-spine span:nth-child(5) { --i: 4; }
.format-spine span:nth-child(6) { --i: 5; }
.format-spine span:nth-child(1),
.format-spine span:nth-child(4) {
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.dropzone.is-target {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 5%, var(--bg));
}
.dropzone__hint { margin-top: 0.9rem; color: var(--muted); font-size: 0.95rem; }
.dropzone__formats {
margin-top: 0.15rem;
color: var(--muted);
font-size: 0.8rem;
opacity: 0.8;
}
/* Once images are in, the dropzone steps back to a slim bar. */
.composer.has-pages .dropzone {
margin-top: 1rem;
padding: 1.15rem;
gap: 0;
}
.composer.has-pages .dropzone__hint,
.composer.has-pages .dropzone__formats,
.composer.has-pages .format-spine { display: none; }
.composer.has-pages .btn--lg { padding: 0.6rem 1.3rem; font-size: 0.95rem; }
/* ---- Tray --------------------------------------------------------------- */
.tray { margin-top: 2rem; }
.tray__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.85rem;
}
.tray__count { font-size: 1rem; font-weight: 600; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
gap: 0.9rem;
}
.card { cursor: grab; }
.card.is-lifted { opacity: 0.4; }
.card__frame {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 3 / 4;
padding: 0.5rem;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
overflow: hidden;
}
.card.is-over .card__frame { border-color: var(--accent); }
.card__img {
max-width: 100%;
max-height: 100%;
display: block;
border-radius: 2px;
}
.card__paper { display: none; }
.card__frame--document .card__paper {
position: relative;
display: grid;
place-items: end center;
width: 60%;
height: 73%;
padding-bottom: 0.9rem;
border: 1px solid #d9dde1;
border-radius: 3px;
background: #fff;
box-shadow: 0 5px 14px rgb(16 17 19 / 7%);
}
.card__frame--document .card__paper::before {
content: "";
position: absolute;
top: -1px;
right: -1px;
width: 1.25rem;
height: 1.25rem;
background: linear-gradient(225deg, var(--surface) 49%, #d9dde1 50%, #d9dde1 53%, #fff 54%);
}
.card__type {
padding: 0.14rem 0.42rem;
border-radius: 4px;
background: color-mix(in srgb, var(--accent) 9%, #fff);
color: var(--accent);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.035em;
}
.card__num {
position: absolute;
top: 0.4rem;
left: 0.4rem;
min-width: 1.35rem;
padding: 0.05rem 0.35rem;
border-radius: 99px;
background: color-mix(in srgb, var(--ink) 82%, transparent);
color: #fff;
font-size: 0.72rem;
font-weight: 600;
text-align: center;
}
.card__remove,
.card__arrow {
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 99px;
background: color-mix(in srgb, var(--ink) 82%, transparent);
color: #fff;
cursor: pointer;
transition: background 120ms ease;
}
.card__remove {
position: absolute;
top: 0.4rem;
right: 0.4rem;
width: 1.35rem;
height: 1.35rem;
}
.card__remove svg { width: 0.85rem; height: 0.85rem; }
.card__remove:hover { background: var(--accent); }
.card__move {
position: absolute;
inset-inline: 0.4rem;
bottom: 0.4rem;
display: flex;
justify-content: space-between;
opacity: 0;
transition: opacity 120ms ease;
}
.card__arrow { width: 1.35rem; height: 1.35rem; }
.card__arrow svg { width: 0.8rem; height: 0.8rem; }
.card__arrow:hover:not(:disabled) { background: var(--accent); }
.card__arrow:disabled { opacity: 0.3; cursor: default; }
.card:hover .card__move,
.card:focus-within .card__move { opacity: 1; }
/* Touch has no hover, so the reorder controls stay put. */
@media (pointer: coarse) {
.card__move { opacity: 1; }
}
.card__name {
display: block;
margin-top: 0.45rem;
color: var(--muted);
font-size: 0.78rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card__meta {
display: block;
margin-top: 0.08rem;
color: var(--muted);
font-size: 0.7rem;
opacity: 0.8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---- Progress ----------------------------------------------------------- */
.progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 100%;
background: var(--accent);
transform: scaleX(0);
transform-origin: 0 50%;
opacity: 0;
z-index: 10;
}
.progress.is-running {
opacity: 1;
animation: crawl 2.2s cubic-bezier(0.15, 0.7, 0.3, 1) infinite;
}
@keyframes crawl {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
/* ---- Done --------------------------------------------------------------- */
.done {
display: grid;
justify-items: center;
gap: 0.4rem;
margin-top: 2rem;
padding: clamp(2.25rem, 7vw, 3.25rem) 1.5rem;
border: 1px solid var(--line);
border-radius: var(--radius);
text-align: center;
}
.done__tick { width: 2.6rem; height: 2.6rem; color: var(--accent); }
.done__title { margin-top: 0.7rem; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.done__meta { color: var(--muted); font-size: 0.92rem; }
.done__notes {
max-width: 29rem;
margin-top: 0.65rem;
color: var(--muted);
font-size: 0.82rem;
line-height: 1.45;
}
.done #download, .done .btn { margin-top: 1.1rem; }
.done .link { margin-top: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
.progress.is-running { animation: none; transform: scaleX(1); opacity: 0.55; }
.btn, .dropzone, .card__move, .card__remove, .card__arrow { transition: none; }
}