480 lines
9.5 KiB
CSS
480 lines
9.5 KiB
CSS
@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;
|
|
}
|
|
}
|