74 lines
3.1 KiB
HTML
74 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="fonts.css">
|
|
<style>
|
|
@page{ size: 420mm 594mm; margin:0; }
|
|
*{box-sizing:border-box;margin:0;padding:0;}
|
|
html,body{width:420mm;height:594mm;background:var(--bg-midnight);overflow:hidden;}
|
|
.sheet{
|
|
width:420mm;height:594mm;position:relative;
|
|
background:
|
|
radial-gradient(circle at 82% 8%, rgba(2,175,241,.28), transparent 40%),
|
|
radial-gradient(circle at 12% 92%, rgba(240,58,130,.24), transparent 42%),
|
|
var(--bg-midnight);
|
|
color:var(--ink-light);
|
|
font-family:var(--font-sans);
|
|
padding:26mm;
|
|
display:flex;flex-direction:column;
|
|
}
|
|
/* geometric construction lines, echoing the logo's compass motif */
|
|
.construction{position:absolute;inset:0;pointer-events:none;}
|
|
.construction circle, .construction line{stroke:var(--chaos-gold);stroke-width:.6;fill:none;opacity:.5;}
|
|
.construction .dashed{stroke-dasharray:4 4;opacity:.35;}
|
|
|
|
.eyebrow{font-size:15px;letter-spacing:.35em;text-transform:uppercase;color:var(--chaos-gold);font-weight:600;margin-top:14mm;}
|
|
|
|
.wordmark{
|
|
font-family:var(--font-display);font-weight:800;
|
|
font-size:118px;line-height:.95;margin-top:18mm;
|
|
background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;
|
|
}
|
|
.tagline{
|
|
font-size:20px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-light);
|
|
margin-top:10mm;font-weight:600;
|
|
}
|
|
|
|
.rule{height:1px;background:linear-gradient(90deg, var(--chaos-gold), transparent);margin:16mm 0;width:60%;}
|
|
|
|
.details{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;}
|
|
.details .block b{display:block;font-family:var(--font-display);font-size:30px;color:var(--ink-light);font-weight:700;margin-bottom:3mm;}
|
|
.details .block span{font-size:13px;color:var(--ink-muted);letter-spacing:.08em;text-transform:uppercase;}
|
|
.details .block{margin-right:16mm;}
|
|
|
|
.placeholder-note{
|
|
position:absolute;bottom:10mm;right:26mm;font-family:monospace;font-size:9px;color:rgba(245,241,234,.35);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sheet">
|
|
<svg class="construction" width="100%" height="100%" viewBox="0 0 420 594">
|
|
<circle cx="360" cy="60" r="46"></circle>
|
|
<circle class="dashed" cx="360" cy="60" r="70"></circle>
|
|
<line x1="360" y1="0" x2="360" y2="594"></line>
|
|
<line class="dashed" x1="60" y1="500" x2="220" y2="380"></line>
|
|
<circle cx="60" cy="500" r="3" fill="#E3B63E" stroke="none"></circle>
|
|
</svg>
|
|
|
|
<div class="eyebrow">Calculated Chaos presents</div>
|
|
<div class="wordmark">Chrystal<br>Math</div>
|
|
<div class="tagline">Precision with sequins.</div>
|
|
|
|
<div class="rule"></div>
|
|
|
|
<div class="details">
|
|
<div class="block"><b>27. September</b><span>Einlass 20 Uhr · Beginn 21 Uhr</span></div>
|
|
<div class="block"><b>Café Bach</b><span>Köln</span></div>
|
|
<div class="block" style="margin-right:0;"><b>Tickets ab 12€</b><span>Link in Bio</span></div>
|
|
</div>
|
|
<div class="placeholder-note">Platzhalter — Datum/Ort/Preis vor Druck ersetzen</div>
|
|
</div>
|
|
</body>
|
|
</html>
|