skills/hype-design-production/assets/promotion-certificate.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hype Events Promotion Certificate</title>
  <style>
    :root {
      --navy: #0a2146;
      --orange: #cc7f30;
      --ink: #17233a;
      --paper: #ffffff;
      --page-w: 1100px;
      --page-h: 850px;
    }

    * { box-sizing: border-box; }

    html,
    body {
      margin: 0;
      width: 100%;
      min-height: 100%;
      background: var(--paper);
      color: var(--ink);
      font-family: Georgia, "Times New Roman", serif;
    }

    body {
      display: grid;
      place-items: center;
    }

    .certificate {
      position: relative;
      width: var(--page-w);
      height: var(--page-h);
      overflow: hidden;
      background: transparent;
    }

    /* The pre-printed border remains untouched outside this safe area. */
    .safe-area {
      position: absolute;
      inset: 105px 120px 95px;
      display: grid;
      grid-template-rows: 130px 68px 120px 94px 70px 1fr;
      justify-items: center;
      text-align: center;
    }

    .masthead {
      display: grid;
      grid-template-columns: 160px 1fr;
      align-items: center;
      gap: 28px;
      width: 100%;
      border-bottom: 2px solid var(--navy);
      padding: 0 22px 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      height: 106px;
    }

    .brand img {
      display: block;
      width: 136px;
      height: 100px;
      object-fit: contain;
      filter: contrast(1.14) brightness(1.05) saturate(1.04);
    }

    .heading {
      text-align: left;
    }

    .eyebrow {
      margin: 0 0 10px;
      color: var(--orange);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 6px;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      color: var(--navy);
      font-size: 44px;
      font-weight: 700;
      letter-spacing: 3px;
      line-height: .96;
      text-transform: uppercase;
    }

    .intro {
      max-width: 740px;
      margin: 0;
      align-self: center;
      font-size: 19px;
      font-style: italic;
      line-height: 1.4;
    }

    .recipient-wrap {
      width: 88%;
      align-self: center;
    }

    .recipient {
      display: block;
      width: 100%;
      color: var(--navy);
      font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
      font-size: 72px;
      font-weight: 800;
      letter-spacing: 3px;
      line-height: .94;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .name-rule {
      display: grid;
      grid-template-columns: 1fr 80px 1fr;
      align-items: center;
      gap: 16px;
      width: 100%;
      margin-top: 14px;
    }

    .name-rule::before,
    .name-rule::after {
      content: "";
      height: 2px;
      background: var(--navy);
    }

    .name-rule span {
      height: 4px;
      background: var(--orange);
    }

    .promotion {
      align-self: center;
    }

    .promotion-copy {
      margin: 0 0 10px;
      color: #354159;
      font-size: 18px;
      font-style: italic;
    }

    .role {
      margin: 0;
      color: var(--navy);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 38px;
      font-weight: 850;
      letter-spacing: 7px;
      line-height: 1;
      text-transform: uppercase;
    }

    .award-date {
      align-self: center;
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--navy);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .award-date::before,
    .award-date::after {
      content: "";
      width: 70px;
      height: 3px;
      background: var(--orange);
    }

    /* Deliberately leave the lower-left area empty for physical use. */
    .signature {
      position: absolute;
      right: 18px;
      bottom: 0;
      width: 310px;
      display: grid;
      gap: 7px;
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
    }

    .signature-line {
      height: 42px;
      border-bottom: 2px solid var(--navy);
    }

    .signature-label {
      color: #455168;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 3px;
      text-transform: uppercase;
    }

    @media print {
      @page { size: 11in 8.5in; margin: 0; }
      html,
      body {
        width: 11in;
        height: 8.5in;
        background: #fff;
      }
      .certificate {
        width: 11in;
        height: 8.5in;
      }
    }
  </style>
</head>
<body>
  <main class="certificate" aria-label="Hype Events promotion certificate">
    <section class="safe-area">
      <header class="masthead">
        <div class="brand">
          <img src="hype.png" alt="Hype Events logo">
        </div>
        <section class="heading">
          <p class="eyebrow">Hype Events proudly presents</p>
          <h1>Certificate of Promotion</h1>
        </section>
      </header>

      <p class="intro">
        In recognition of exceptional growth, leadership, and commitment,
        this certificate is proudly presented to
      </p>

      <section class="recipient-wrap" aria-label="Certificate recipient">
        <span class="recipient" data-fit data-min="42" data-max="72">Employee Name</span>
        <div class="name-rule" aria-hidden="true"><span></span></div>
      </section>

      <section class="promotion">
        <p class="promotion-copy">upon their promotion to the position of</p>
        <p class="role">Corporate Trainer</p>
      </section>

      <div class="award-date">Awarded Month DD, YYYY</div>

      <footer class="signature" aria-label="Authorized signature area">
        <span class="signature-line"></span>
        <span class="signature-label">Authorized Signature</span>
      </footer>
    </section>
  </main>

  <script>
    function fitText(element) {
      const min = Number(element.dataset.min);
      let size = Number(element.dataset.max);
      element.style.fontSize = `${size}px`;
      while (size > min && element.scrollWidth > element.parentElement.clientWidth) {
        size -= 1;
        element.style.fontSize = `${size}px`;
      }
    }

    function fitAll() {
      document.querySelectorAll('[data-fit]').forEach(fitText);
    }

    document.fonts.ready.then(fitAll);
    window.addEventListener('resize', fitAll);
  </script>
</body>
</html>