<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rolocode — Letterhead / Invoice</title>
<!--
  Rolocode letterhead + invoice template
  ------------------------------------------------------------------
  One template for documents, brochures, letters and invoices. Open it in a
  browser and "Print → Save as PDF" for a ready-to-send A4 document.
  - Logo is referenced from ../logo/ (keep this file inside brand/templates/).
  - Web fonts (Space Grotesk / Inter / JetBrains Mono) are pulled from Google
    Fonts; without internet it falls back to system fonts gracefully.
  - Duplicate / edit the .invoice section, or delete it to use as a plain letter.
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
  :root{
    --violet:#7C3AED; --violet-bright:#A855F7; --cyan:#22D3EE;
    --ink:#14141d; --muted:#5b5b6b; --faint:#9a9aab; --line:#e6e6ee;
    --display:"Space Grotesk",system-ui,sans-serif;
    --sans:"Inter",system-ui,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  }
  *{box-sizing:border-box}
  body{margin:0;background:#f3f3f7;color:var(--ink);font-family:var(--sans);
       font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;}
  .page{width:210mm;min-height:297mm;margin:24px auto;background:#fff;
        padding:22mm 20mm;box-shadow:0 10px 40px rgba(20,20,29,.12);}
  /* ---- header ---- */
  header{display:flex;align-items:flex-start;justify-content:space-between;
         padding-bottom:18px;border-bottom:3px solid var(--violet);}
  header img{height:42px;display:block}
  .company{text-align:right;font-size:12px;color:var(--muted);line-height:1.5}
  .company b{color:var(--ink)}
  /* ---- title ---- */
  h1{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.02em;
     margin:34px 0 2px}
  .sub{color:var(--faint);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
  /* ---- meta grid ---- */
  .meta{display:flex;gap:48px;margin:26px 0 8px}
  .meta h4{font-family:var(--mono);font-size:10px;text-transform:uppercase;
           letter-spacing:.1em;color:var(--faint);margin:0 0 4px}
  .meta div b{font-weight:600}
  /* ---- invoice table ---- */
  table{width:100%;border-collapse:collapse;margin-top:28px}
  th{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
     color:var(--faint);text-align:left;padding:0 0 10px;border-bottom:1px solid var(--line)}
  th.r,td.r{text-align:right}
  td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
  td.num{font-family:var(--mono)}
  .totals{margin-top:18px;margin-left:auto;width:46%}
  .totals tr td{border:0;padding:6px 0}
  .totals .grand td{border-top:2px solid var(--ink);padding-top:12px;
                    font-family:var(--display);font-weight:700;font-size:18px}
  .grand .r{color:var(--violet)}
  /* ---- footer ---- */
  footer{margin-top:48px;padding-top:14px;border-top:1px solid var(--line);
         display:flex;justify-content:space-between;font-size:11px;color:var(--faint)}
  .chip{display:inline-block;width:8px;height:8px;border-radius:2px;
        background:linear-gradient(110deg,var(--violet),var(--cyan));margin-right:6px}
  @media print{
    body{background:#fff}
    .page{margin:0;box-shadow:none;width:auto;min-height:auto;padding:16mm}
    @page{size:A4;margin:0}
  }
</style>
</head>
<body>
<div class="page">

  <header>
    <img src="../logo/rolocode-lockup-horizontal-on-light.svg" alt="Rolocode">
    <div class="company">
      <b>Rolocode</b><br>
      hello@rolocode.com<br>
      rolocode.com
    </div>
  </header>

  <h1>Invoice</h1>
  <div class="sub">No. RC-2026-001</div>

  <div class="meta">
    <div>
      <h4>Billed to</h4>
      <div><b>Client Name</b><br>Company S.A.<br>Address line<br>City, Country</div>
    </div>
    <div>
      <h4>Issued</h4>
      <div>2026-01-01</div>
      <h4 style="margin-top:14px">Due</h4>
      <div>2026-01-15</div>
    </div>
  </div>

  <table>
    <thead>
      <tr><th>Description</th><th class="r">Qty</th><th class="r">Unit</th><th class="r">Amount</th></tr>
    </thead>
    <tbody>
      <tr><td>Service / product description</td><td class="r num">1</td><td class="r num">1,000.00</td><td class="r num">1,000.00</td></tr>
      <tr><td>Another line item</td><td class="r num">2</td><td class="r num">250.00</td><td class="r num">500.00</td></tr>
    </tbody>
  </table>

  <table class="totals">
    <tr><td>Subtotal</td><td class="r num">1,500.00</td></tr>
    <tr><td>Tax (0%)</td><td class="r num">0.00</td></tr>
    <tr class="grand"><td>Total</td><td class="r num">USD 1,500.00</td></tr>
  </table>

  <footer>
    <div><span class="chip"></span>Thank you for working with Rolocode.</div>
    <div>rolocode.com · hello@rolocode.com</div>
  </footer>

</div>
</body>
</html>
