:root{ --bg:#ffffff; --fg:#1f2937; --muted:#6b7280; --accent:#2563eb; --border:#e5e7eb; --surface:#f9fafb; --radius:8px; } /* Dark theme: the head script toggles .dark on (localStorage "sherlog.theme", falling back to prefers-color-scheme). */ html.dark{ --bg:#0f172a; --fg:#e2e8f0; --muted:#94a3b8; --accent:#3b82f6; --border:#293548; --surface:#16202f; } html.dark .btn:hover{ background:#2563eb; } html.dark .recent .state.done{ background:rgba(16,185,129,.12); border-color:#065f46; color:#34d399; } html.dark .recent .state.failed{ background:rgba(239,68,68,.12); border-color:#7f1d1d; color:#f87171; } /* Status text colours on the result pages need lighter shades on dark. */ html.dark .sum-chip .ok, html.dark details.summary .st-ok{ color:#4ade80; } html.dark .sum-chip .bad, html.dark details.summary .st-bad{ color:#f87171; } html.dark .sum-chip .warn, html.dark details.summary .st-warn{ color:#fbbf24; } html.dark details.summary .st-nd{ color:#94a3b8; } *{ box-sizing:border-box; } body{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--fg); background:var(--bg); margin:0; line-height:1.55; -webkit-font-smoothing:antialiased; } a{ color:var(--accent); text-decoration:none; } a:hover{ text-decoration:underline; } .nav{ display:flex; align-items:center; justify-content:space-between; max-width:880px; margin:0 auto; padding:1.1rem 1.25rem; } .brand{ display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.05rem; color:var(--fg); } .brand:hover{ text-decoration:none; } .dot{ width:1.7rem; height:1.7rem; border-radius:7px; background:var(--accent); display:inline-flex; align-items:center; justify-content:center; } .navlink{ color:var(--muted); font-size:.92rem; margin-left:1.4rem; } /* External cross-promo link: visually separated from the tool tabs. */ .navlink.ext{ border-left:1px solid var(--border); padding-left:1.4rem; } .wrap{ max-width:880px; margin:0 auto; padding:0 1.25rem; } .hero{ text-align:center; padding:3.5rem 0 2rem; } .hero h1{ font-size:2.4rem; line-height:1.15; letter-spacing:-.02em; margin:0 0 .9rem; } .hero p{ font-size:1.1rem; color:var(--muted); max-width:34rem; margin:0 auto; } .card{ border:1px solid var(--border); border-radius:12px; background:var(--bg); padding:1.75rem; box-shadow:0 1px 2px rgba(0,0,0,.04); } .drop{ border:2px dashed var(--border); border-radius:10px; padding:2.75rem 1rem; text-align:center; color:var(--muted); transition:.15s; cursor:pointer; background:var(--surface); } .drop:hover{ border-color:var(--accent); } .drop.hl{ border-color:var(--accent); background:rgba(37,99,235,.06); color:var(--accent); } .drop strong{ color:var(--fg); } ul#files{ list-style:none; padding:0; margin:1rem 0 0; font-size:.9rem; color:var(--muted); } ul#files li{ padding:.45rem .7rem; background:var(--surface); border:1px solid var(--border); border-radius:6px; margin-bottom:.4rem; } .row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.25rem; flex-wrap:wrap; } .limits{ color:var(--muted); font-size:.88rem; margin:0; } .badge{ display:inline-block; font-size:.72rem; font-weight:600; padding:.22rem .6rem; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--muted); margin:.15rem .35rem .15rem 0; } .btn{ font-size:.95rem; font-weight:600; padding:.62rem 1.5rem; border:0; border-radius:var(--radius); background:var(--accent); color:#fff; cursor:pointer; transition:.15s; } .btn:hover{ background:#1d4ed8; } .btn:disabled{ opacity:.45; cursor:not-allowed; } .btn-ghost{ background:transparent; color:var(--accent); border:1px solid var(--border); } .btn-ghost:hover{ background:var(--surface); } .center{ text-align:center; } pre{ background:var(--surface); border:1px solid var(--border); padding:1rem; border-radius:8px; overflow:auto; font-size:.85rem; } .spinner{ width:2.2rem; height:2.2rem; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; margin:1.5rem auto; } @keyframes spin{ to{ transform:rotate(360deg); } } footer{ max-width:880px; margin:3rem auto 2rem; padding:1.5rem 1.25rem 0; border-top:1px solid var(--border); color:var(--muted); font-size:.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; } .hero .cta{ margin:1.5rem 0 0; } .hero .trust{ font-size:.88rem; margin-top:.9rem; } .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; } @media (max-width:640px){ .cards{ grid-template-columns:1fr; } } .cards .card{ display:flex; flex-direction:column; } .card h2{ margin:0 0 .4rem; font-size:1.25rem; } .card .desc{ color:var(--muted); margin:0 0 1.25rem; flex:1; overflow-wrap:anywhere; } /* Screenshot bleeds to the card edges (cancels the 1.75rem card padding). */ .card .shot{ display:block; margin:-1.75rem -1.75rem 1.1rem; border-bottom:1px solid var(--border); border-radius:12px 12px 0 0; overflow:hidden; background:var(--surface); } .card .shot img{ display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; object-position:top left; } .card .when{ color:var(--fg); font-size:.9rem; font-style:italic; margin:0 0 .5rem; } /* --- Home (split hero + icon tiles) --- */ .home-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; padding:3rem 0 2.25rem; } @media (max-width:820px){ .home-hero{ grid-template-columns:1fr; gap:1.5rem; padding:1.75rem 0 1rem; } } .home-copy h1{ font-size:2.3rem; line-height:1.13; letter-spacing:-.02em; margin:0 0 .9rem; } .home-copy .lead{ font-size:1.1rem; color:var(--muted); margin:0; max-width:34rem; } .badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 0; } .badges span{ font-size:.78rem; font-weight:600; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:.2rem .65rem; } .home-copy .count{ font-size:.9rem; font-weight:600; color:var(--accent); margin:.9rem 0 0; } .home-upload .drop{ padding:2.25rem 1.25rem; line-height:1.6; } .home-upload .row{ margin-top:1rem; } .home-upload .or{ text-align:center; color:var(--muted); font-size:.9rem; margin:.8rem 0 0; } .inline{ display:inline; } .linkbtn{ background:none; border:0; color:var(--accent); cursor:pointer; font:inherit; padding:0; } .linkbtn:hover{ text-decoration:underline; } .inlineform{ display:inline; } .eyebrow{ font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 .9rem; } .tools{ margin-top:2.5rem; } .tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; } .tile{ display:flex; gap:.85rem; align-items:flex-start; padding:1.1rem; border:1px solid var(--border); border-radius:12px; background:var(--bg); color:var(--fg); transition:border-color .12s, transform .12s; } .tile:hover{ border-color:var(--accent); transform:translateY(-2px); } .tile .ic{ flex:none; width:2.3rem; height:2.3rem; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--accent); } .tile .ic svg{ width:1.3rem; height:1.3rem; } .tile h3{ margin:.1rem 0 .25rem; font-size:1.02rem; } .tile p{ margin:0; color:var(--muted); font-size:.88rem; line-height:1.45; } .stepper{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; } @media (max-width:760px){ .stepper{ grid-template-columns:1fr; } } .stepper li{ display:flex; gap:.7rem; color:var(--muted); min-width:0; } .stepper li div{ min-width:0; overflow-wrap:anywhere; line-height:1.5; } .stepper code{ overflow-wrap:anywhere; } .stepper .n{ flex:none; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; } .stepper strong{ color:var(--fg); } .explain{ margin-top:2.75rem; } .explain h2{ font-size:1.25rem; margin:0 0 .7rem; } .steps{ margin:0; padding-left:1.4rem; } .steps li{ color:var(--muted); margin-bottom:.65rem; } .steps li strong{ color:var(--fg); } ul.pick{ list-style:none; margin:0; padding:0; } ul.pick li{ color:var(--muted); padding:.45rem 0; border-bottom:1px solid var(--border); } ul.pick li:last-child{ border-bottom:0; } .cards .card .btn{ align-self:stretch; text-align:center; padding-left:.5rem; padding-right:.5rem; } .recent{ margin-top:1.25rem; } .recent h2{ margin:0 0 .5rem; font-size:1.1rem; } .recent-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; } .linkbtn.danger{ color:#dc2626; } .linkbtn.danger:hover{ text-decoration:underline; } .recent ul{ list-style:none; margin:0; padding:0; } .recent li{ display:flex; align-items:center; gap:.7rem; padding:.5rem .2rem; border-bottom:1px solid var(--border); font-size:.92rem; } .recent li:last-child{ border-bottom:0; } .recent .files{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .recent .when{ color:var(--muted); white-space:nowrap; font-size:.85rem; } .recent .state{ font-size:.72rem; font-weight:600; padding:.18rem .55rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--muted); white-space:nowrap; } .recent .state.done{ background:#ecfdf5; border-color:#a7f3d0; color:#047857; } .recent .state.failed{ background:#fef2f2; border-color:#fecaca; color:#b91c1c; } .recent .rm{ border:0; background:none; color:var(--muted); cursor:pointer; font-size:1rem; padding:.1rem .3rem; } .recent .rm:hover{ color:var(--fg); } /* About-me dialog (nav "About"), same content as on payloadkit.app. */ dialog.about{ position:relative; border:1px solid var(--border); border-radius:12px; padding:2rem; max-width:26rem; width:calc(100vw - 2.5rem); box-shadow:0 10px 40px rgba(0,0,0,.15); color:var(--fg); background:var(--bg); } dialog.about::backdrop{ background:rgba(15,23,42,.45); } .about .close{ position:absolute; top:.55rem; right:.8rem; border:0; background:none; font-size:1.35rem; line-height:1; color:var(--muted); cursor:pointer; } .about .close:hover{ color:var(--fg); } .about .head{ text-align:center; margin-bottom:1.1rem; } .about .head img{ width:6.5rem; height:6.5rem; border-radius:50%; object-fit:cover; display:block; margin:0 auto .8rem; border:1px solid var(--border); } .about h2{ margin:0; font-size:1.2rem; } .about .role{ color:var(--muted); font-size:.9rem; margin:.2rem 0 0; } .about p{ font-size:.92rem; margin:.8rem 0; } .about .links{ display:flex; justify-content:center; gap:.7rem; margin-top:1.25rem; } /* Dark-mode toggle in the nav: moon in light theme, sun in dark theme. */ button.navlink.theme{ border:0; background:none; cursor:pointer; padding:0; font:inherit; } .theme svg{ vertical-align:-2px; } .theme:hover{ color:var(--fg); } .theme .sun{ display:none; } html.dark .theme .sun{ display:inline; } html.dark .theme .moon{ display:none; }