styling works

2026-02-09 15:22:08 +00:00
commit 2d70a9074e
31 changed files with 566 additions and 0 deletions
--- a/assets/fonts/cormorant-garamond-400.ttf
+++ b/assets/fonts/cormorant-garamond-400.ttf
--- a/assets/fonts/cormorant-garamond-500.ttf
+++ b/assets/fonts/cormorant-garamond-500.ttf
--- a/assets/fonts/cormorant-garamond-700.ttf
+++ b/assets/fonts/cormorant-garamond-700.ttf
--- a/assets/fonts/pdf-cormorant-bold-cards.ttf
+++ b/assets/fonts/pdf-cormorant-bold-cards.ttf
--- a/assets/fonts/pdf-cormorant-bold.ttf
+++ b/assets/fonts/pdf-cormorant-bold.ttf
--- a/assets/fonts/pdf-cormorant-regular-cards.ttf
+++ b/assets/fonts/pdf-cormorant-regular-cards.ttf
--- a/assets/fonts/pdf-cormorant-regular.ttf
+++ b/assets/fonts/pdf-cormorant-regular.ttf
--- a/assets/fonts/pdf-embedded/124-AAAAAA+CormorantGaramond-Bold.ttf
+++ b/assets/fonts/pdf-embedded/124-AAAAAA+CormorantGaramond-Bold.ttf
--- a/assets/fonts/pdf-embedded/125-CAAAAA+CormorantGaramond-Regular.ttf
+++ b/assets/fonts/pdf-embedded/125-CAAAAA+CormorantGaramond-Regular.ttf
--- a/assets/fonts/pdf-embedded/134-AAAAAA+CormorantGaramond-Bold.ttf
+++ b/assets/fonts/pdf-embedded/134-AAAAAA+CormorantGaramond-Bold.ttf
--- a/assets/fonts/pdf-embedded/135-BAAAAA+Raleway-Regular.ttf
+++ b/assets/fonts/pdf-embedded/135-BAAAAA+Raleway-Regular.ttf
--- a/assets/fonts/pdf-embedded/136-DAAAAA+Raleway-Medium.ttf
+++ b/assets/fonts/pdf-embedded/136-DAAAAA+Raleway-Medium.ttf
--- a/assets/fonts/pdf-embedded/137-EAAAAA+Raleway-MediumItalic.ttf
+++ b/assets/fonts/pdf-embedded/137-EAAAAA+Raleway-MediumItalic.ttf
--- a/assets/fonts/pdf-embedded/83-AAAAAA+CormorantGaramond-Bold.ttf
+++ b/assets/fonts/pdf-embedded/83-AAAAAA+CormorantGaramond-Bold.ttf
--- a/assets/fonts/pdf-embedded/84-BAAAAA+CormorantGaramond-Regular.ttf
+++ b/assets/fonts/pdf-embedded/84-BAAAAA+CormorantGaramond-Regular.ttf
--- a/assets/fonts/pdf-raleway-medium-italic.ttf
+++ b/assets/fonts/pdf-raleway-medium-italic.ttf
--- a/assets/fonts/pdf-raleway-medium.ttf
+++ b/assets/fonts/pdf-raleway-medium.ttf
--- a/assets/fonts/pdf-raleway-regular.ttf
+++ b/assets/fonts/pdf-raleway-regular.ttf
--- a/assets/fonts/raleway-400.ttf
+++ b/assets/fonts/raleway-400.ttf
--- a/assets/fonts/raleway-500-italic.ttf
+++ b/assets/fonts/raleway-500-italic.ttf
--- a/assets/fonts/raleway-500.ttf
+++ b/assets/fonts/raleway-500.ttf
--- a/assets/images/mansion-sketch.png
+++ b/assets/images/mansion-sketch.png
--- a/assets/images/portrait-frame.png
+++ b/assets/images/portrait-frame.png
--- a/assets/images/sheet-border.png
+++ b/assets/images/sheet-border.png
--- a/assets/pdf/extract-000.png
+++ b/assets/pdf/extract-000.png
--- a/assets/pdf/extract-001.png
+++ b/assets/pdf/extract-001.png
--- a/assets/pdf/extract-002.png
+++ b/assets/pdf/extract-002.png
--- a/assets/pdf/extract-003.png
+++ b/assets/pdf/extract-003.png
--- a/assets/pdf/extract-004.png
+++ b/assets/pdf/extract-004.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Murder Mystery Character Card Template</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <main class="template-stack">
+    <section class="sheet cover-page" aria-label="Murder mystery invitation cover card">
+      <div class="cover-rule" aria-hidden="true"></div>
+      <h1 class="cover-title">
+        <span class="line-1">THE ADMIRAL'S</span>
+        <span class="line-2">RECKONING</span>
+      </h1>
+
+      <div class="cover-main">
+        <div class="cover-copy">
+          <p class="intro">Lady Juliana Talbot invites you to Talbot<br>House for an evening of merriment to<br>celebrate her birthday .</p>
+          <p class="character">Your character: <strong>CHARLOTTE</strong><br><strong>TALBOT.</strong> The flighty and romantic<br>youngest daughter of Lord and Lady<br>Talbot.</p>
+          <p class="warning">DO NOT OPEN AND READ THIS<br>CARD UNTIL YOU ARE READY TO<br>BEGIN THE GAME.</p>
+        </div>
+
+        <figure class="cover-portrait">
+          <img class="cover-portrait-art" src="assets/images/mansion-sketch.png" alt="Sketch of Talbot House">
+          <img class="cover-portrait-frame" src="assets/images/portrait-frame.png" alt="" aria-hidden="true">
+        </figure>
+      </div>
+    </section>
+
+    <section class="sheet character-page" aria-label="Character briefing sheet">
+      <img class="sheet-border" src="assets/images/sheet-border.png" alt="" aria-hidden="true">
+
+      <div class="character-content">
+        <header class="character-header">
+          <h2>CHARLOTTE TALBOT</h2>
+          <p>Younger daughter of Lord and Lady Talbot</p>
+        </header>
+
+        <div class="cards-grid">
+          <article class="ornate-card tall">
+            <h3>Key information</h3>
+            <p>You are the youngest daughter of Lord and Lady Talbot. You are beautiful, flighty, and romantic - some lesser souls call you selfish or spoiled.</p>
+            <p>You read sensational novels, write terrible poetry, and imagine yourself the heroine of a great romance.</p>
+            <p>Your father adores you, and would do anything for you.</p>
+          </article>
+
+          <article class="ornate-card tall">
+            <h3>Secret</h3>
+            <p>You are beginning to have romantic feelings for the handsome French naval officer, Henri Levesque. You caught him poking around your father's study this afternoon, and you had a frisson of sexual tension - you're sure he felt it too.</p>
+            <p>He left without taking anything; he seemed surprised and disappointed to have run into you there. It's a shame he's married... but does that really count, if he's French?</p>
+          </article>
+
+          <article class="ornate-card medium">
+            <h3>Goals</h3>
+            <ul>
+              <li>Make something dramatic happen. Maybe fall in love with someone?</li>
+              <li>Catch the murderer.</li>
+            </ul>
+          </article>
+
+          <article class="ornate-card medium">
+            <h3>Items</h3>
+            <ul>
+              <li>A diamond necklace, worth around &pound;200</li>
+              <li>Several amateurish oil paintings, by you, of the house and grounds</li>
+            </ul>
+          </article>
+
+          <article class="ornate-card short">
+            <h3>Clues</h3>
+            <p>You borrowed a paint set from Marie-Claire Levesque. She was running very low on green paint. And now, she's running low on everything! (You produced some masterpieces.)</p>
+          </article>
+
+          <article class="ornate-card short">
+            <h3>Did you kill Juliana Talbot?</h3>
+            <p>Of course not! She's your <em>mother</em>.</p>
+          </article>
+        </div>
+
+        <div class="footer-flourish" aria-hidden="true">&#10086;</div>
+      </div>
+    </section>
+  </main>
+</body>
+</html>
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,479 @@
+@font-face {
+  font-family: "CGCoverRegular";
+  src: url("assets/fonts/cormorant-garamond-400.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "CGCoverBold";
+  src: url("assets/fonts/cormorant-garamond-700.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "CGCardsRegular";
+  src: url("assets/fonts/cormorant-garamond-400.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "CGCardsBold";
+  src: url("assets/fonts/cormorant-garamond-700.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "RalewayPDF";
+  src: url("assets/fonts/raleway-400.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "RalewayPDF";
+  src: url("assets/fonts/raleway-500.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "RalewayPDF";
+  src: url("assets/fonts/raleway-500-italic.ttf") format("truetype");
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+}
+
+:root {
+  --paper: #eddcc9;
+  --ink-strong: #2f4762;
+  --ink-body: #3e3d3c;
+  --card-border: #b3a188;
+  --page-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, 0.26);
+  --font-display: "CGCardsBold", "Times New Roman", serif;
+  --font-body: "RalewayPDF", "Arial", sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  padding: 2rem 1rem 3rem;
+  background: linear-gradient(180deg, #c2b39d 0%, #ac9d86 100%);
+}
+
+.template-stack {
+  width: min(100%, 56rem);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
+.sheet {
+  position: relative;
+  width: min(874px, 100%);
+  aspect-ratio: 874 / 1241;
+  overflow: hidden;
+  background: var(--paper);
+  box-shadow: var(--page-shadow);
+  container-type: inline-size;
+}
+
+@supports not (aspect-ratio: 1 / 1) {
+  .sheet {
+    width: 874px;
+    height: 1241px;
+    max-width: 100%;
+  }
+}
+
+.cover-rule {
+  position: absolute;
+  left: 34%;
+  top: 49.72%;
+  width: 31.92%;
+  border-top: 4px solid #070707;
+  border-top: 0.62cqi solid #070707;
+}
+
+.cover-title {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: -0.05cqi;
+  color: var(--ink-strong);
+  font-family: "CGCoverBold", "Times New Roman", serif;
+  font-weight: 700;
+  font-size: 74px;
+  font-size: 8.58cqi;
+  line-height: 0.89;
+}
+
+.cover-title span {
+  position: absolute;
+  display: block;
+  white-space: nowrap;
+  width: max-content;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.cover-title .line-1 {
+  top: 52.81%;
+}
+
+.cover-title .line-2 {
+  top: 58.2%;
+}
+
+.cover-main {
+  position: absolute;
+  inset: 0;
+}
+
+.cover-copy {
+  position: absolute;
+  left: 9.84%;
+  top: 0;
+  width: 40.61%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.cover-copy p {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  color: var(--ink-strong);
+  font-family: "CGCoverRegular", "Times New Roman", serif;
+  font-size: 22px;
+  font-size: 2.52cqi;
+  font-weight: 400;
+  line-height: 0.95;
+  letter-spacing: -0.012em;
+}
+
+.cover-copy strong {
+  font-family: "CGCoverBold", "Times New Roman", serif;
+  font-weight: 700;
+}
+
+.cover-copy .intro {
+  top: 68.53%;
+  font-family: "CGCoverBold", "Times New Roman", serif;
+  font-weight: 700;
+}
+
+.cover-copy .character {
+  top: 76.04%;
+}
+
+.cover-copy .warning {
+  top: 85.33%;
+  text-transform: uppercase;
+}
+
+.cover-portrait {
+  position: absolute;
+  left: 53.66%;
+  top: 67.24%;
+  width: 41.53%;
+  margin: 0;
+  aspect-ratio: 261 / 218;
+}
+
+.cover-portrait::before {
+  content: "";
+  position: absolute;
+  left: 7.3%;
+  top: 16.5%;
+  width: 92.7%;
+  height: 73.9%;
+  background: #e8dbc8;
+}
+
+.cover-portrait-art {
+  position: absolute;
+  left: 7.3%;
+  top: 16.5%;
+  width: 92.7%;
+  height: 73.9%;
+  object-fit: cover;
+  filter: sepia(0.16) saturate(0.62) brightness(0.99);
+}
+
+.cover-portrait-frame {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.character-page {
+  background: var(--paper);
+}
+
+.sheet-border {
+  position: absolute;
+  left: -3.82%;
+  top: -1.12%;
+  width: 108.5%;
+  height: 108.1%;
+  max-width: none;
+  object-fit: fill;
+  pointer-events: none;
+  user-select: none;
+}
+
+.character-content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  padding: 16.4% 9% 4.2% 8.5%;
+  display: flex;
+  flex-direction: column;
+}
+
+.character-header {
+  text-align: center;
+}
+
+.character-header h2 {
+  margin: 0;
+  color: var(--ink-strong);
+  text-transform: uppercase;
+  letter-spacing: -0.04cqi;
+  line-height: 0.96;
+  font-family: "CGCardsBold", "Times New Roman", serif;
+  font-size: 42px;
+  font-size: 4.8cqi;
+  font-weight: 700;
+}
+
+.character-header p {
+  margin: 0.9cqi 0 0;
+  color: var(--ink-strong);
+  font-family: "CGCardsRegular", "Times New Roman", serif;
+  font-size: 26px;
+  font-size: 3.02cqi;
+  line-height: 1;
+}
+
+.cards-grid {
+  margin-top: 4.25cqi;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3.9cqi 6.5cqi;
+}
+
+.ornate-card {
+  --corner-cut: 2.3cqi;
+  --bw: 0.18cqi;
+  --join-overlap: calc(var(--bw) * 0.32);
+  position: relative;
+  border: 0;
+  border-radius: 0;
+  background:
+    linear-gradient(var(--card-border), var(--card-border)) calc(var(--corner-cut) - var(--join-overlap)) 0 / calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) var(--bw) no-repeat,
+    linear-gradient(var(--card-border), var(--card-border)) calc(var(--corner-cut) - var(--join-overlap)) 100% / calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) var(--bw) no-repeat,
+    linear-gradient(var(--card-border), var(--card-border)) 0 calc(var(--corner-cut) - var(--join-overlap)) / var(--bw) calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) no-repeat,
+    linear-gradient(var(--card-border), var(--card-border)) 100% calc(var(--corner-cut) - var(--join-overlap)) / var(--bw) calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) no-repeat,
+    radial-gradient(
+      circle at top left,
+      var(--paper) 0 calc(var(--corner-cut) - var(--bw)),
+      var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut),
+      transparent var(--corner-cut)
+    ) top left / var(--corner-cut) var(--corner-cut) no-repeat,
+    radial-gradient(
+      circle at top right,
+      var(--paper) 0 calc(var(--corner-cut) - var(--bw)),
+      var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut),
+      transparent var(--corner-cut)
+    ) top right / var(--corner-cut) var(--corner-cut) no-repeat,
+    radial-gradient(
+      circle at bottom left,
+      var(--paper) 0 calc(var(--corner-cut) - var(--bw)),
+      var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut),
+      transparent var(--corner-cut)
+    ) bottom left / var(--corner-cut) var(--corner-cut) no-repeat,
+    radial-gradient(
+      circle at bottom right,
+      var(--paper) 0 calc(var(--corner-cut) - var(--bw)),
+      var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut),
+      transparent var(--corner-cut)
+    ) bottom right / var(--corner-cut) var(--corner-cut) no-repeat,
+    rgba(233, 220, 202, 0.88);
+  padding: 2.35cqi 2.8cqi 2.45cqi;
+}
+
+.ornate-card::before {
+  content: none;
+}
+
+.ornate-card::after {
+  content: none;
+}
+
+.ornate-card.tall {
+  min-height: 40cqi;
+}
+
+.ornate-card.medium {
+  min-height: 21.2cqi;
+}
+
+.ornate-card.short {
+  min-height: 19.6cqi;
+}
+
+.ornate-card h3 {
+  margin: 0 0 1.1cqi;
+  text-align: center;
+  color: #1d1e22;
+  font-family: "CGCardsBold", "Times New Roman", serif;
+  font-size: 26px;
+  font-size: 3.02cqi;
+  line-height: 0.97;
+  font-weight: 700;
+}
+
+.ornate-card p,
+.ornate-card li {
+  margin: 0 0 1.3cqi;
+  color: var(--ink-body);
+  font-family: "RalewayPDF", "Arial", sans-serif;
+  font-size: 14px;
+  font-size: 1.6cqi;
+  line-height: 1.58;
+  font-weight: 400;
+}
+
+.ornate-card p:last-child,
+.ornate-card li:last-child {
+  margin-bottom: 0;
+}
+
+.ornate-card ul {
+  margin: 0;
+  padding: 0 0 0 2.2cqi;
+}
+
+.footer-flourish {
+  position: relative;
+  margin-top: 5.2cqi;
+  align-self: center;
+  width: 175px;
+  width: 20cqi;
+  text-align: center;
+  color: #4f5563;
+  font-family: "RalewayPDF", "Arial", sans-serif;
+  font-size: 36px;
+  font-size: 4.1cqi;
+  line-height: 1;
+}
+
+.ornate-card em {
+  font-family: "RalewayPDF", "Arial", sans-serif;
+  font-style: italic;
+  font-weight: 500;
+}
+
+.footer-flourish::before,
+.footer-flourish::after {
+  content: "";
+  position: absolute;
+  top: 53%;
+  width: 66px;
+  width: 7.5cqi;
+  height: 2px;
+  height: 0.2cqi;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.7;
+}
+
+.footer-flourish::before {
+  left: 0;
+}
+
+.footer-flourish::after {
+  right: 0;
+}
+
+@media (max-width: 680px) {
+  body {
+    padding: 0.9rem 0.35rem 1.2rem;
+  }
+
+  .template-stack {
+    gap: 1rem;
+  }
+
+  .sheet {
+    box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.2);
+  }
+
+  .cards-grid {
+    gap: 3.6cqi;
+    grid-template-columns: 1fr;
+  }
+
+  .ornate-card.tall,
+  .ornate-card.medium,
+  .ornate-card.short {
+    min-height: auto;
+  }
+}
+
+@media print {
+  @page {
+    size: 419.25pt 595.5pt;
+    margin: 0;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    background: #fff;
+  }
+
+  .template-stack {
+    width: auto;
+    margin: 0;
+    gap: 0;
+  }
+
+  .sheet {
+    width: 419.25pt;
+    height: 595.5pt;
+    box-shadow: none;
+    break-after: page;
+    page-break-after: always;
+  }
+
+  .sheet:last-child {
+    break-after: auto;
+    page-break-after: auto;
+  }
+}