/* ChargeProof smoke-test landing — "audit report on paper". Deliberate break from the dark-SaaS default: warm paper, serif display, mono data, ruled lines, stamp semantics. No external fonts/CDN. */ :root { --paper: #f3efe6; --paper-hi: #fbf9f2; --paper-dim: #ece7da; --ink: #211d12; --ink-soft: #6d6553; --ink-faint: #928a75; --line: rgba(33, 29, 18, 0.22); --line-hard: #211d12; --red: #b23a1d; --red-soft: rgba(178, 58, 29, 0.08); --green: #17663e; --green-soft: rgba(23, 102, 62, 0.08); --wrap: 1060px; --serif: "Charter", "Bitstream Charter", "Iowan Old Style", Georgia, "Times New Roman", serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 17.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } .wrap.narrow > * { max-width: 700px; } .mono { font-family: var(--mono); } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper-hi); padding: 10px 16px; z-index: 100; font-family: var(--mono); font-size: 14px; } .skip:focus { left: 0; } /* ---------- header ---------- */ .site-head { position: sticky; top: 0; z-index: 40; background: rgba(243, 239, 230, 0.92); backdrop-filter: blur(8px); border-bottom: 2px solid var(--line-hard); } .head-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; } .brand { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; } .brand-tick { color: var(--green); font-weight: 700; } .site-head .btn-sm { display: none; } @media (min-width: 720px) { .site-head .btn-sm { display: inline-flex; } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--paper-hi); background: var(--ink); border: 1px solid var(--ink); border-radius: 3px; padding: 13px 20px; cursor: pointer; text-align: center; box-shadow: 3px 3px 0 rgba(33, 29, 18, 0.22); transition: background .12s ease, transform .12s ease, box-shadow .12s ease; } /* hover = the button lifts off the paper; green stays reserved for PASS verdicts */ .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(33, 29, 18, 0.22); } .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(33, 29, 18, 0.22); } .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .btn-lg { padding: 16px 24px; font-size: 15.5px; width: 100%; } @media (min-width: 560px) { .btn-lg { width: auto; } } .btn-block { width: 100%; } .btn-sm { padding: 8px 13px; font-size: 13px; box-shadow: 2px 2px 0 rgba(33, 29, 18, 0.22); } .btn-sm:hover { box-shadow: 3px 3px 0 rgba(33, 29, 18, 0.22); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-hard); box-shadow: none; } .btn-ghost:hover { background: var(--paper-dim); color: var(--ink); border-color: var(--line-hard); transform: none; box-shadow: none; } .cta-note { margin: 12px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); } /* ---------- stamps ---------- */ .stamp { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; padding: 1px 7px; border: 1.5px solid currentColor; border-radius: 2px; white-space: nowrap; } .stamp-fail { color: var(--red); background: var(--red-soft); } .stamp-pass { color: var(--green); background: var(--green-soft); } /* stamp-in on scroll: app.js adds only when motion is allowed and IntersectionObserver exists, then .stamped as each mark enters the viewport. Without JS or with reduced motion, stamps are simply visible. */ .anim .stamp, .anim .launch-stamp { opacity: 0; } .anim .stamped { animation: stamp-in .32s cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes stamp-in { from { opacity: 0; transform: scale(2) rotate(calc(var(--stamp-rot, 0deg) - 5deg)); } 55% { opacity: 1; } to { opacity: 1; transform: scale(1) rotate(var(--stamp-rot, 0deg)); } } .verified { white-space: nowrap; font-family: var(--mono); font-size: 0.82em; font-weight: 700; letter-spacing: 0.05em; color: var(--green); background: var(--green-soft); border: 1.5px solid var(--green); border-radius: 2px; padding: 1px 7px; } /* ---------- hero ---------- */ .hero { padding: 52px 0 56px; border-bottom: 1px solid var(--line-hard); } @media (min-width: 900px) { .hero { padding: 84px 0 88px; } } .hero-grid { display: grid; gap: 44px; align-items: center; } /* one-time entrance; harmless without JS, killed by the reduced-motion override */ .hero-grid > div:first-child { animation: fade-up .4s ease both; } .hero-grid aside { animation: fade-up .45s ease .12s both; } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 56px; } } .eyebrow { margin: 0 0 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); flex: none; } h1 { margin: 0 0 20px; font-size: clamp(32px, 7vw, 54px); line-height: 1.06; letter-spacing: -0.015em; font-weight: 700; max-width: 16ch; text-wrap: balance; } h1 em { font-style: italic; color: var(--red); } .sub { margin: 0 0 22px; font-size: clamp(16.5px, 3.6vw, 19.5px); line-height: 1.58; color: var(--ink-soft); max-width: 56ch; } .sub strong { color: var(--ink); font-weight: 600; } .hero-stats { margin: 0 0 28px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); letter-spacing: 0.02em; } .hero-stats li { display: flex; align-items: center; gap: 7px; } .hero-stats li::before { content: "▪"; color: var(--red); font-size: 10px; } .hero-cta { display: flex; flex-direction: column; align-items: flex-start; } /* the sample findings sheet */ .sheet { background: var(--paper-hi); border: 1px solid var(--line-hard); border-radius: 3px; box-shadow: 5px 5px 0 rgba(33, 29, 18, 0.14); padding: 18px 18px 14px; font-family: var(--mono); font-size: 13px; } .sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--line-hard); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .sheet-head strong { color: var(--ink); } .sheet-rows { list-style: none; margin: 0; padding: 0; } .sheet-rows li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); } .sheet-rows li:last-child { border-bottom: 0; } .sheet-num { color: var(--ink-faint); flex: none; } .sheet-name { color: var(--ink); } .sheet-dots { flex: 1; min-width: 16px; border-bottom: 1.5px dotted var(--line); transform: translateY(-4px); } .sheet-foot { margin-top: 8px; padding-top: 10px; border-top: 2px solid var(--line-hard); font-size: 11.5px; color: var(--ink-soft); } /* ---------- sections ---------- */ .section { padding: 56px 0; border-bottom: 1px solid var(--line-hard); } @media (min-width: 820px) { .section { padding: 80px 0; } } .section-alt { background: var(--paper-dim); } h2 { margin: 0 0 30px; font-size: clamp(24px, 4.6vw, 34px); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; text-wrap: balance; } .kicker { display: block; margin: 0 0 10px; font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); } .lead { margin: 0; font-size: clamp(17px, 3.4vw, 19.5px); color: var(--ink-soft); line-height: 1.62; } .lead em { color: var(--ink); } .lead strong { color: var(--ink); font-weight: 600; } /* ---------- ToS clause block ---------- */ /* exhibit spread: the clause sits beside the argument instead of stacking */ .tos-grid { display: grid; gap: 22px; align-items: start; } @media (min-width: 860px) { .tos-grid { grid-template-columns: 0.95fr 1.05fr; gap: 48px; } .tos-grid .clause { margin: 0; } .tos-grid .clause blockquote { font-size: clamp(20px, 2.2vw, 26px); } } .clause { background: var(--paper-hi); border: 1px solid var(--line-hard); border-left: 4px solid var(--red); border-radius: 3px; padding: 22px 24px; margin: 0 0 22px; max-width: 700px; } .clause blockquote { margin: 0 0 12px; font-size: clamp(18px, 3.8vw, 22px); line-height: 1.45; font-style: italic; } .clause cite { display: block; font-family: var(--mono); font-style: normal; font-size: 12.5px; color: var(--ink-soft); } /* ---------- field reports ---------- */ .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } @media (min-width: 860px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 22px; } } .card { background: var(--paper-hi); border: 1px solid var(--line-hard); border-radius: 3px; padding: 20px 20px 18px; box-shadow: 3px 3px 0 rgba(33, 29, 18, 0.10); } /* pinned-to-the-desk scatter; desktop only, rotations stay under 1° */ @media (min-width: 860px) { .cards { align-items: start; } .card:nth-child(1) { transform: rotate(-0.8deg); } .card:nth-child(2) { transform: rotate(0.6deg) translateY(12px); } .card:nth-child(3) { transform: rotate(-0.4deg) translateY(4px); } } .card-tag { display: block; margin-bottom: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); } .card p { margin: 0; font-size: 16px; line-height: 1.6; font-style: italic; color: var(--ink); } .card-ref { display: block; margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--green); } .sect-note { margin: -12px 0 26px; font-size: 16.5px; color: var(--ink-soft); max-width: 64ch; } /* ---------- what we run ---------- */ .legs { display: grid; gap: 26px; margin: 0 0 8px; } @media (min-width: 860px) { .legs { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .leg { border-top: 3px double var(--line-hard); padding-top: 16px; } .leg::before { display: block; font-family: var(--mono); font-size: 42px; font-weight: 700; line-height: 1; color: rgba(33, 29, 18, 0.16); margin: 2px 0 14px; } .leg:nth-child(1)::before { content: "01"; } .leg:nth-child(2)::before { content: "02"; } .leg:nth-child(3)::before { content: "03"; } .leg h3 { margin: 0 0 10px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .leg h3 .leg-word { color: var(--red); } .leg p { margin: 0; font-size: 16px; color: var(--ink-soft); line-height: 1.6; } .leg p strong { color: var(--ink); font-weight: 600; } .flagship { margin: 34px 0 0; background: var(--paper-hi); border: 1px solid var(--line-hard); border-radius: 3px; padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; box-shadow: 3px 3px 0 rgba(33, 29, 18, 0.10); } .flagship .stamp { margin-top: 4px; flex: none; } .flagship p { margin: 0; font-size: 16.5px; line-height: 1.6; } .flagship p strong { font-weight: 700; } /* ---------- deliverable ---------- */ .deliv-grid { display: grid; gap: 36px; align-items: center; } @media (min-width: 860px) { /* card on the LEFT — alternates artifact sides with the hero sheet (right) */ .deliv-grid { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } .deliv-grid > div:last-child { order: -1; } } .deliv-list { list-style: none; margin: 0; padding: 0; } .deliv-list li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px dashed var(--line); font-size: 16.5px; color: var(--ink-soft); } .deliv-list li:last-child { border-bottom: 0; } .deliv-list li strong { color: var(--ink); font-weight: 600; } .deliv-list li::before { content: "✓"; position: absolute; left: 4px; top: 9px; font-family: var(--mono); font-weight: 700; color: var(--green); } .launch-card { background: var(--paper-hi); border: 1px solid var(--line-hard); border-radius: 4px; box-shadow: 6px 6px 0 rgba(33, 29, 18, 0.14); padding: 26px 24px 22px; font-family: var(--mono); max-width: 400px; margin: 0 auto; } .launch-card-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line); } .launch-card-app { font-size: 17px; font-weight: 700; margin: 0 0 18px; color: var(--ink); } .launch-stamp { display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); border: 2.5px solid var(--green); border-radius: 4px; padding: 8px 14px; --stamp-rot: -2.5deg; transform: rotate(var(--stamp-rot)); background: var(--green-soft); } .launch-card-foot { margin: 20px 0 0; font-size: 11.5px; color: var(--ink-faint); } /* ---------- faq (two ruled columns on desktop) ---------- */ .faq { margin: 0; display: grid; gap: 26px; } @media (min-width: 860px) { .faq { grid-template-columns: 1fr 1fr; gap: 34px 56px; } } .faq-item { border-top: 1px dashed var(--line); padding-top: 18px; } .faq dt { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; margin: 0; } .faq dd { margin: 8px 0 0; color: var(--ink-soft); line-height: 1.65; } .faq dd strong { color: var(--ink); font-weight: 600; } /* ---------- versus simulators (editorial split) ---------- */ .vs-grid { display: grid; gap: 18px; } .vs-grid h2 { margin-bottom: 0; } @media (min-width: 860px) { .vs-grid { grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; } .vs-grid .lead { border-left: 1px solid var(--line-hard); padding-left: 40px; } } /* ---------- closing ---------- */ .closing { text-align: center; border-bottom: 0; } .closing .wrap > * { margin-left: auto; margin-right: auto; } .closing h2 { margin-bottom: 12px; } .closing .lead { margin-bottom: 28px; max-width: 46ch; text-wrap: balance; } .closing .cta-note { margin-top: 14px; } /* ---------- footer ---------- */ .site-foot { padding: 26px 0 44px; border-top: 2px solid var(--line-hard); background: var(--paper-dim); } .site-foot p { margin: 0; color: var(--ink-soft); font-family: var(--mono); font-size: 12.5px; } /* ---------- sticky mobile CTA ---------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(243, 239, 230, 0.96); backdrop-filter: blur(8px); border-top: 2px solid var(--line-hard); transform: translateY(110%); transition: transform .22s ease; } .sticky-cta.on { transform: none; } .sticky-cta .btn { width: 100%; padding: 13px 16px; font-size: 14.5px; } @media (min-width: 720px) { .sticky-cta { display: none; } } body.has-sticky { padding-bottom: 74px; } @media (min-width: 720px) { body.has-sticky { padding-bottom: 0; } } /* ---------- modal ---------- */ .modal-root { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; } @media (min-width: 640px) { .modal-root { align-items: center; } } .modal-root[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(33, 29, 18, 0.5); animation: fade .16s ease; } .modal { position: relative; width: 100%; max-width: 440px; background: var(--paper-hi); border: 1px solid var(--line-hard); border-radius: 4px 4px 0 0; padding: 26px 22px calc(26px + env(safe-area-inset-bottom)); box-shadow: 6px 6px 0 rgba(33, 29, 18, 0.25); animation: rise .2s ease; } @media (min-width: 640px) { .modal { border-radius: 4px; padding: 30px 28px; margin: 20px; } } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } @keyframes rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } } .modal-x { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: var(--ink-soft); font-size: 26px; line-height: 1; padding: 11px 13px; cursor: pointer; border-radius: 3px; min-width: 44px; min-height: 44px; transition: color .12s ease, background .12s ease; } .modal-x:hover { color: var(--ink); background: var(--paper-dim); } .modal h2 { font-size: 22px; margin: 0 0 8px; } .modal-sub { margin: 0 0 20px; color: var(--ink-soft); font-size: 15.5px; } .field-label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; } #email { width: 100%; font-family: var(--mono); font-size: 16px; /* >=16px prevents iOS zoom */ color: var(--ink); background: var(--paper); border: 1px solid var(--line-hard); border-radius: 3px; padding: 14px 14px; margin-bottom: 14px; transition: border-color .15s ease, box-shadow .15s ease; } #email::placeholder { color: var(--ink-faint); } /* neutral ink focus — green stays a verdict, not a focus state */ #email:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(33, 29, 18, 0.12); } #email.invalid { border-color: var(--red); } .field-error { margin: -8px 0 12px; color: var(--red); font-family: var(--mono); font-size: 13px; } .field-error[hidden] { display: none; } .modal-fine { margin: 14px 0 0; color: var(--ink-faint); font-family: var(--mono); font-size: 12px; text-align: center; } #modal-done-view { text-align: center; padding: 10px 0 6px; } .done-mark { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%; background: var(--green-soft); border: 2px solid var(--green); display: grid; place-items: center; } .done-mark svg { width: 30px; height: 30px; } .done-mark path { fill: none; stroke: var(--green); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } /* pop + self-drawing check when the done view appears; the dashoffset hide lives inside this motion-safe block so reduced motion always sees the mark */ @media (prefers-reduced-motion: no-preference) { .done-mark { animation: pop-in .3s cubic-bezier(.2, 1.4, .4, 1) both; } .done-mark path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw-check .35s ease-out .18s forwards; } } @keyframes pop-in { from { opacity: 0; transform: scale(.5); } } @keyframes draw-check { to { stroke-dashoffset: 0; } } .done-title { font-size: 19px; line-height: 1.45; margin: 0; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }