commit 2d70a9074e40de9b5a175b968eb9391e21ac92d3 Author: Nick Goodall Date: Mon Feb 9 15:22:08 2026 +0000 styling works diff --git a/assets/fonts/cormorant-garamond-400.ttf b/assets/fonts/cormorant-garamond-400.ttf new file mode 100644 index 0000000..3fab5e0 Binary files /dev/null and b/assets/fonts/cormorant-garamond-400.ttf differ diff --git a/assets/fonts/cormorant-garamond-500.ttf b/assets/fonts/cormorant-garamond-500.ttf new file mode 100644 index 0000000..f0ec232 Binary files /dev/null and b/assets/fonts/cormorant-garamond-500.ttf differ diff --git a/assets/fonts/cormorant-garamond-700.ttf b/assets/fonts/cormorant-garamond-700.ttf new file mode 100644 index 0000000..a3a6e21 Binary files /dev/null and b/assets/fonts/cormorant-garamond-700.ttf differ diff --git a/assets/fonts/pdf-cormorant-bold-cards.ttf b/assets/fonts/pdf-cormorant-bold-cards.ttf new file mode 100644 index 0000000..d1f1953 Binary files /dev/null and b/assets/fonts/pdf-cormorant-bold-cards.ttf differ diff --git a/assets/fonts/pdf-cormorant-bold.ttf b/assets/fonts/pdf-cormorant-bold.ttf new file mode 100644 index 0000000..43b138d Binary files /dev/null and b/assets/fonts/pdf-cormorant-bold.ttf differ diff --git a/assets/fonts/pdf-cormorant-regular-cards.ttf b/assets/fonts/pdf-cormorant-regular-cards.ttf new file mode 100644 index 0000000..f4c042b Binary files /dev/null and b/assets/fonts/pdf-cormorant-regular-cards.ttf differ diff --git a/assets/fonts/pdf-cormorant-regular.ttf b/assets/fonts/pdf-cormorant-regular.ttf new file mode 100644 index 0000000..7c759c1 Binary files /dev/null and b/assets/fonts/pdf-cormorant-regular.ttf differ diff --git a/assets/fonts/pdf-embedded/124-AAAAAA+CormorantGaramond-Bold.ttf b/assets/fonts/pdf-embedded/124-AAAAAA+CormorantGaramond-Bold.ttf new file mode 100644 index 0000000..023c207 Binary files /dev/null and b/assets/fonts/pdf-embedded/124-AAAAAA+CormorantGaramond-Bold.ttf differ diff --git a/assets/fonts/pdf-embedded/125-CAAAAA+CormorantGaramond-Regular.ttf b/assets/fonts/pdf-embedded/125-CAAAAA+CormorantGaramond-Regular.ttf new file mode 100644 index 0000000..f4c042b Binary files /dev/null and b/assets/fonts/pdf-embedded/125-CAAAAA+CormorantGaramond-Regular.ttf differ diff --git a/assets/fonts/pdf-embedded/134-AAAAAA+CormorantGaramond-Bold.ttf b/assets/fonts/pdf-embedded/134-AAAAAA+CormorantGaramond-Bold.ttf new file mode 100644 index 0000000..d1f1953 Binary files /dev/null and b/assets/fonts/pdf-embedded/134-AAAAAA+CormorantGaramond-Bold.ttf differ diff --git a/assets/fonts/pdf-embedded/135-BAAAAA+Raleway-Regular.ttf b/assets/fonts/pdf-embedded/135-BAAAAA+Raleway-Regular.ttf new file mode 100644 index 0000000..dda302c Binary files /dev/null and b/assets/fonts/pdf-embedded/135-BAAAAA+Raleway-Regular.ttf differ diff --git a/assets/fonts/pdf-embedded/136-DAAAAA+Raleway-Medium.ttf b/assets/fonts/pdf-embedded/136-DAAAAA+Raleway-Medium.ttf new file mode 100644 index 0000000..b4de940 Binary files /dev/null and b/assets/fonts/pdf-embedded/136-DAAAAA+Raleway-Medium.ttf differ diff --git a/assets/fonts/pdf-embedded/137-EAAAAA+Raleway-MediumItalic.ttf b/assets/fonts/pdf-embedded/137-EAAAAA+Raleway-MediumItalic.ttf new file mode 100644 index 0000000..b2c2a84 Binary files /dev/null and b/assets/fonts/pdf-embedded/137-EAAAAA+Raleway-MediumItalic.ttf differ diff --git a/assets/fonts/pdf-embedded/83-AAAAAA+CormorantGaramond-Bold.ttf b/assets/fonts/pdf-embedded/83-AAAAAA+CormorantGaramond-Bold.ttf new file mode 100644 index 0000000..43b138d Binary files /dev/null and b/assets/fonts/pdf-embedded/83-AAAAAA+CormorantGaramond-Bold.ttf differ diff --git a/assets/fonts/pdf-embedded/84-BAAAAA+CormorantGaramond-Regular.ttf b/assets/fonts/pdf-embedded/84-BAAAAA+CormorantGaramond-Regular.ttf new file mode 100644 index 0000000..7c759c1 Binary files /dev/null and b/assets/fonts/pdf-embedded/84-BAAAAA+CormorantGaramond-Regular.ttf differ diff --git a/assets/fonts/pdf-raleway-medium-italic.ttf b/assets/fonts/pdf-raleway-medium-italic.ttf new file mode 100644 index 0000000..b2c2a84 Binary files /dev/null and b/assets/fonts/pdf-raleway-medium-italic.ttf differ diff --git a/assets/fonts/pdf-raleway-medium.ttf b/assets/fonts/pdf-raleway-medium.ttf new file mode 100644 index 0000000..b4de940 Binary files /dev/null and b/assets/fonts/pdf-raleway-medium.ttf differ diff --git a/assets/fonts/pdf-raleway-regular.ttf b/assets/fonts/pdf-raleway-regular.ttf new file mode 100644 index 0000000..dda302c Binary files /dev/null and b/assets/fonts/pdf-raleway-regular.ttf differ diff --git a/assets/fonts/raleway-400.ttf b/assets/fonts/raleway-400.ttf new file mode 100644 index 0000000..467d416 Binary files /dev/null and b/assets/fonts/raleway-400.ttf differ diff --git a/assets/fonts/raleway-500-italic.ttf b/assets/fonts/raleway-500-italic.ttf new file mode 100644 index 0000000..038ff50 Binary files /dev/null and b/assets/fonts/raleway-500-italic.ttf differ diff --git a/assets/fonts/raleway-500.ttf b/assets/fonts/raleway-500.ttf new file mode 100644 index 0000000..7d275b4 Binary files /dev/null and b/assets/fonts/raleway-500.ttf differ diff --git a/assets/images/mansion-sketch.png b/assets/images/mansion-sketch.png new file mode 100644 index 0000000..277ed97 Binary files /dev/null and b/assets/images/mansion-sketch.png differ diff --git a/assets/images/portrait-frame.png b/assets/images/portrait-frame.png new file mode 100644 index 0000000..0e1f0e6 Binary files /dev/null and b/assets/images/portrait-frame.png differ diff --git a/assets/images/sheet-border.png b/assets/images/sheet-border.png new file mode 100644 index 0000000..106a697 Binary files /dev/null and b/assets/images/sheet-border.png differ diff --git a/assets/pdf/extract-000.png b/assets/pdf/extract-000.png new file mode 100644 index 0000000..277ed97 Binary files /dev/null and b/assets/pdf/extract-000.png differ diff --git a/assets/pdf/extract-001.png b/assets/pdf/extract-001.png new file mode 100644 index 0000000..866df62 Binary files /dev/null and b/assets/pdf/extract-001.png differ diff --git a/assets/pdf/extract-002.png b/assets/pdf/extract-002.png new file mode 100644 index 0000000..4c322c3 Binary files /dev/null and b/assets/pdf/extract-002.png differ diff --git a/assets/pdf/extract-003.png b/assets/pdf/extract-003.png new file mode 100644 index 0000000..7d210c5 Binary files /dev/null and b/assets/pdf/extract-003.png differ diff --git a/assets/pdf/extract-004.png b/assets/pdf/extract-004.png new file mode 100644 index 0000000..36cc5fc Binary files /dev/null and b/assets/pdf/extract-004.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..182ffd4 --- /dev/null +++ b/index.html @@ -0,0 +1,87 @@ + + + + + + Murder Mystery Character Card Template + + + +
+
+ +

+ THE ADMIRAL'S + RECKONING +

+ +
+
+

Lady Juliana Talbot invites you to Talbot
House for an evening of merriment to
celebrate her birthday .

+

Your character: CHARLOTTE
TALBOT. The flighty and romantic
youngest daughter of Lord and Lady
Talbot.

+

DO NOT OPEN AND READ THIS
CARD UNTIL YOU ARE READY TO
BEGIN THE GAME.

+
+ +
+ Sketch of Talbot House + +
+
+
+ +
+ + +
+
+

CHARLOTTE TALBOT

+

Younger daughter of Lord and Lady Talbot

+
+ +
+
+

Key information

+

You are the youngest daughter of Lord and Lady Talbot. You are beautiful, flighty, and romantic - some lesser souls call you selfish or spoiled.

+

You read sensational novels, write terrible poetry, and imagine yourself the heroine of a great romance.

+

Your father adores you, and would do anything for you.

+
+ +
+

Secret

+

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.

+

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?

+
+ +
+

Goals

+
    +
  • Make something dramatic happen. Maybe fall in love with someone?
    • +
  • Catch the murderer.
    • +
+
+ +
+

Items

+
    +
  • A diamond necklace, worth around £200
    • +
  • Several amateurish oil paintings, by you, of the house and grounds
    • +
+
+ +
+

Clues

+

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.)

+
+ +
+

Did you kill Juliana Talbot?

+

Of course not! She's your mother.

+
+
+ + +
+
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..8de0edd --- /dev/null +++ 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; + } +}