/* Cutout: visual language A light, paper-and-ink editorial look rather than a dark dashboard: a cool grey "lightbox" background, black ink text, hairline rules instead of bordered cards, and one muted accent (a grease-pencil red, the mark an editor uses on a contact sheet to flag a select) spent only on the primary action and the progress fill. One serif family carries the headlines; the system sans stack carries body copy and UI. No external font requests, in keeping with the rest of the site. */ :root { --paper: #eceef0; --surface: #ffffff; --ink: #15171b; --ink-soft: #2c2f34; --ink-muted: #62666e; --rule: #d7dade; --accent: #a63a2c; --accent-hover: #8f3125; --accent-tint: #fbf3f1; --accent-ink: #fff9f6; --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --content-w: 640px; } /* Dark theme: applied when the visitor's system prefers dark and they haven't explicitly chosen light, or when they've explicitly chosen dark via the toggle (data-theme is set by theme.js, read from localStorage, and applied before paint by an inline snippet in each page's to avoid a flash of the wrong theme). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #18191c; --surface: #212327; --ink: #eceef0; --ink-soft: #d7d9dc; --ink-muted: #9a9ea6; --rule: #34373c; --accent: #c2503c; --accent-hover: #d66650; --accent-tint: #2b211f; --accent-ink: #fff9f6; } } :root[data-theme="dark"] { --paper: #18191c; --surface: #212327; --ink: #eceef0; --ink-soft: #d7d9dc; --ink-muted: #9a9ea6; --rule: #34373c; --accent: #c2503c; --accent-hover: #d66650; --accent-tint: #2b211f; --accent-ink: #fff9f6; } * { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color 150ms ease, color 150ms ease; } a { color: inherit; } img { max-width: 100%; display: block; } button { font-family: inherit; } .wrap { max-width: var(--content-w); margin: 0 auto; padding: 0 24px; } hr.rule { border: none; border-top: 1px solid var(--rule); margin: 0; } /* ---------- Header ---------- */ .site-header { padding: 32px 0 24px; display: flex; align-items: center; justify-content: space-between; } .wordmark { display: inline-block; text-decoration: none; color: var(--ink); font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.01em; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: 3px; background: transparent; color: var(--ink-muted); cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .theme-toggle:hover { background: var(--rule); color: var(--ink); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { width: 16px; height: 16px; } .theme-icon-moon { display: none; } :root[data-theme="dark"] .theme-icon-sun { display: none; } :root[data-theme="dark"] .theme-icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-icon-sun { display: none; } :root:not([data-theme="light"]) .theme-icon-moon { display: block; } } /* ---------- Hero ---------- */ .hero { padding: 12px 0 40px; } .hero h1 { margin: 0 0 18px; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.18; letter-spacing: -0.01em; max-width: 16ch; } .lede { margin: 0; max-width: 46ch; color: var(--ink-muted); font-size: 1.05rem; } /* ---------- Tool ---------- */ .tool { padding-bottom: 8px; } .dropzone { position: relative; border: 1.5px dashed var(--rule); border-radius: 3px; background: var(--surface); padding: 48px 28px; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); } .dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .dropzone.is-dragover { background: var(--accent-tint); border-color: var(--accent); border-style: solid; } .dz-title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 600; } .dz-sub { margin: 0 0 10px; color: var(--ink-muted); } .link-btn { background: none; border: none; padding: 0; color: var(--accent); font-weight: 600; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .dz-hint { margin: 0; font-size: 0.88rem; color: var(--ink-muted); } /* ---------- Status ---------- */ .status { border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); padding: 28px; } .status-bar { height: 3px; background: var(--rule); overflow: hidden; margin: 0 0 14px; } .status-fill { height: 100%; width: 4%; background: var(--accent); transition: width 200ms ease; } .status-text { margin: 0; font-weight: 600; } /* ---------- Result ---------- */ .result-frame { border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; background: var(--surface); } .checker { --sq: 18px; background-image: linear-gradient(45deg, #e4e6ea 25%, transparent 25%), linear-gradient(-45deg, #e4e6ea 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e4e6ea 75%), linear-gradient(-45deg, transparent 75%, #e4e6ea 75%); background-size: var(--sq) var(--sq); background-position: 0 0, 0 calc(var(--sq) / 2), calc(var(--sq) / 2) calc(var(--sq) / -2), calc(var(--sq) / -2) 0; background-color: #ffffff; display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 20px; } .checker img { max-height: 56vh; } .result-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .btn { border-radius: 3px; padding: 11px 20px; font-size: 0.95rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); } .btn-ghost:hover { border-color: var(--ink-muted); } /* ---------- Error ---------- */ .error { border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 3px; background: var(--surface); padding: 24px 28px; } .error-text { color: var(--ink); margin: 0 0 16px; } /* ---------- How it works ---------- */ .how { padding-top: 44px; } .how h2 { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; margin: 0 0 4px; } .how-list { margin-top: 20px; } .how-item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--rule); } .how-item:last-child { border-bottom: 1px solid var(--rule); } .how-num { font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink-muted); line-height: 1.4; } .how-item h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; } .how-item p { margin: 0; color: var(--ink-muted); font-size: 0.95rem; max-width: 52ch; } /* ---------- Footer ---------- */ .site-footer { padding: 24px 0 56px; border-top: 1px solid var(--rule); margin-top: 48px; } .site-footer p { margin: 0; color: var(--ink-muted); font-size: 0.9rem; } .footer-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .footer-cache { margin-top: 10px !important; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .link-btn-muted { color: var(--ink-muted); font-weight: 400; font-size: 0.88rem; } .link-btn-muted:hover { color: var(--ink); } .footer-cache-msg { font-size: 0.85rem; color: var(--accent); } .footer-nav { display: flex; gap: 18px; } .footer-nav a { color: var(--ink-muted); text-decoration: none; font-size: 0.9rem; } .footer-nav a:hover { color: var(--ink); } /* ---------- Legal pages ---------- */ .legal { max-width: var(--content-w); margin: 0 auto; padding: 12px 24px 80px; } .legal h1 { font-family: var(--font-serif); font-weight: 600; font-size: 1.9rem; margin-bottom: 6px; } .legal .updated { color: var(--ink-muted); font-size: 0.9rem; margin-top: 0; margin-bottom: 36px; } .legal h2 { font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem; margin-top: 34px; margin-bottom: 10px; } .legal p, .legal li { color: var(--ink-soft); font-size: 0.98rem; } .legal ul { padding-left: 1.2em; } .legal a.back { display: inline-block; margin-bottom: 20px; color: var(--accent); text-decoration: none; font-size: 0.9rem; } .legal a.back:hover { text-decoration: underline; } /* ---------- Responsive ---------- */ @media (max-width: 560px) { .dropzone { padding: 36px 18px; } .how-item { grid-template-columns: 32px 1fr; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .status-fill { transition: none; } }