340 lines
20 KiB
HTML
340 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Chrystal Math — CI/CD Guide</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="stylesheet" href="fonts.css">
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0;}
|
||
html{scroll-behavior:smooth;}
|
||
body{
|
||
font-family:var(--font-sans);
|
||
background:var(--bg-midnight);
|
||
color:var(--ink-light);
|
||
transition:background .4s ease;
|
||
line-height:1.6;
|
||
}
|
||
body.bg-graphite{background:var(--bg-graphite);}
|
||
body.bg-aubergine{background:var(--bg-aubergine);}
|
||
|
||
a{color:var(--chaos-cyan);}
|
||
|
||
/* ---------- layout shell ---------- */
|
||
.wrap{max-width:1040px;margin:0 auto;padding:0 32px;}
|
||
nav.topnav{
|
||
position:sticky;top:0;z-index:50;
|
||
background:rgba(10,10,16,.75);
|
||
backdrop-filter:blur(10px);
|
||
border-bottom:1px solid rgba(255,255,255,.08);
|
||
}
|
||
nav.topnav .wrap{display:flex;align-items:center;gap:22px;padding:14px 32px;overflow-x:auto;white-space:nowrap;}
|
||
nav.topnav a{
|
||
font-family:var(--font-sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
|
||
color:var(--ink-muted);text-decoration:none;font-weight:600;
|
||
}
|
||
nav.topnav a:hover{color:var(--chaos-cyan);}
|
||
nav.topnav .brandmark{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink-light);margin-right:auto;letter-spacing:.02em;}
|
||
|
||
section{padding:96px 0;border-bottom:1px solid rgba(255,255,255,.06);}
|
||
section:last-of-type{border-bottom:none;}
|
||
|
||
.eyebrow{
|
||
font-family:var(--font-sans);font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
|
||
color:var(--chaos-gold);margin-bottom:18px;
|
||
}
|
||
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;}
|
||
h2{font-size:clamp(32px,4.4vw,50px);margin-bottom:20px;background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
|
||
h3{font-size:22px;margin-bottom:10px;color:var(--ink-light);font-weight:600;}
|
||
p{max-width:680px;color:var(--ink-muted);font-size:16px;}
|
||
p.lead{font-size:19px;color:var(--ink-light);max-width:640px;}
|
||
|
||
/* ---------- hero ---------- */
|
||
.hero{padding:64px 0 80px;text-align:center;}
|
||
.hero img{max-width:420px;width:70%;margin:0 auto 28px;display:block;filter:drop-shadow(0 0 60px rgba(180,68,196,.35));}
|
||
.hero .kicker{font-family:var(--font-sans);letter-spacing:.3em;text-transform:uppercase;font-size:12px;color:var(--ink-muted);margin-bottom:14px;}
|
||
.hero h1{font-size:15px;letter-spacing:.02em;color:var(--ink-muted);font-weight:400;max-width:520px;margin:0 auto;font-family:var(--font-sans);}
|
||
.hero .doctitle{font-family:var(--font-accent);font-style:italic;font-weight:600;font-size:26px;margin-top:22px;color:var(--ink-light);}
|
||
|
||
/* ---------- bg switcher ---------- */
|
||
.switcher{display:flex;gap:10px;justify-content:center;margin:36px 0 0;flex-wrap:wrap;}
|
||
.switcher button{
|
||
font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:.05em;
|
||
padding:10px 18px;border-radius:30px;border:1px solid rgba(255,255,255,.22);
|
||
background:rgba(255,255,255,.04);color:var(--ink-light);cursor:pointer;
|
||
transition:.25s;
|
||
}
|
||
.switcher button.active{background:var(--chaos-gold);color:#241708;border-color:var(--chaos-gold);}
|
||
.switcher button:hover{border-color:var(--chaos-gold);}
|
||
.switcher .hint{width:100%;text-align:center;font-size:12px;color:var(--ink-muted);margin-top:10px;}
|
||
|
||
/* ---------- color swatches ---------- */
|
||
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-top:34px;}
|
||
.swatch{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);}
|
||
.swatch .fill{height:96px;}
|
||
.swatch .meta{padding:14px 16px;}
|
||
.swatch .name{font-weight:600;font-size:14px;color:var(--ink-light);}
|
||
.swatch .hex{font-family:monospace;font-size:12.5px;color:var(--ink-muted);margin-top:3px;}
|
||
.swatch .role{font-size:12px;color:var(--ink-muted);margin-top:6px;}
|
||
|
||
.bg-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:30px;}
|
||
.bg-card{border-radius:16px;padding:26px 22px;border:2px solid rgba(255,255,255,.08);position:relative;}
|
||
.bg-card.rec{border-color:var(--chaos-gold);}
|
||
.bg-card .tag{position:absolute;top:-11px;left:20px;background:var(--chaos-gold);color:#241708;font-size:11px;font-weight:700;letter-spacing:.08em;padding:3px 10px;border-radius:20px;text-transform:uppercase;}
|
||
.bg-card h4{font-family:var(--font-display);font-size:19px;margin-bottom:4px;color:var(--ink-light);}
|
||
.bg-card .hex{font-family:monospace;font-size:12.5px;color:var(--ink-muted);margin-bottom:14px;}
|
||
.bg-card .mini{border-radius:10px;padding:22px 16px;text-align:center;}
|
||
.bg-card .mini .word{font-family:var(--font-display);font-weight:700;font-size:20px;background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
|
||
.bg-card .mini .tagline{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--chaos-gold);margin-top:4px;}
|
||
.bg-card p{font-size:13.5px;margin-top:14px;}
|
||
|
||
/* ---------- typography ---------- */
|
||
.type-block{margin-bottom:56px;}
|
||
.type-block .label-row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:6px;}
|
||
.type-block .role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--chaos-gold);font-weight:600;}
|
||
.type-block .license{font-size:11.5px;color:var(--ink-muted);background:rgba(255,255,255,.06);padding:3px 10px;border-radius:20px;}
|
||
.specimen-display{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,6vw,64px);color:var(--ink-light);line-height:1.05;margin:8px 0 10px;}
|
||
.specimen-accent{font-family:var(--font-accent);font-style:italic;font-weight:600;font-size:clamp(28px,4vw,40px);color:var(--chaos-pink);margin:8px 0 10px;}
|
||
.specimen-sans{font-family:var(--font-sans);font-weight:600;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-light);margin:8px 0 10px;}
|
||
.weights{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px;}
|
||
.weights span{font-family:var(--font-display);font-size:26px;color:var(--ink-muted);}
|
||
.weights span b{font-weight:800;color:var(--ink-light);display:block;font-size:10px;font-family:var(--font-sans);letter-spacing:.1em;margin-bottom:4px;font-weight:600;}
|
||
|
||
table.rules{width:100%;border-collapse:collapse;margin-top:20px;}
|
||
table.rules th,table.rules td{text-align:left;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px;}
|
||
table.rules th{color:var(--chaos-gold);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
|
||
table.rules td{color:var(--ink-muted);}
|
||
table.rules td b{color:var(--ink-light);}
|
||
|
||
/* ---------- do/dont ---------- */
|
||
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;}
|
||
.dodont .col{padding:22px;border-radius:14px;}
|
||
.dodont .do{background:rgba(2,175,241,.08);border:1px solid rgba(2,175,241,.3);}
|
||
.dodont .dont{background:rgba(240,58,130,.08);border:1px solid rgba(240,58,130,.3);}
|
||
.dodont h4{font-family:var(--font-sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;}
|
||
.dodont .do h4{color:var(--chaos-cyan);}
|
||
.dodont .dont h4{color:var(--chaos-pink);}
|
||
.dodont ul{padding-left:18px;font-size:14px;color:var(--ink-muted);}
|
||
.dodont li{margin-bottom:8px;}
|
||
|
||
/* ---------- applications grid ---------- */
|
||
.apps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:30px;}
|
||
.app-card{border-radius:14px;border:1px solid rgba(255,255,255,.1);padding:24px 20px;background:rgba(255,255,255,.03);}
|
||
.app-card .tag2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--chaos-gold);font-weight:700;margin-bottom:8px;}
|
||
.app-card h4{font-family:var(--font-display);font-size:19px;color:var(--ink-light);margin-bottom:8px;}
|
||
.app-card p{font-size:13.5px;}
|
||
.app-card .file{margin-top:14px;font-family:monospace;font-size:11.5px;color:var(--chaos-cyan);}
|
||
|
||
footer{padding:60px 0;text-align:center;}
|
||
footer p{margin:0 auto;font-size:12.5px;color:var(--ink-muted);}
|
||
|
||
@media(max-width:640px){
|
||
.dodont{grid-template-columns:1fr;}
|
||
section{padding:64px 0;}
|
||
}
|
||
@media print{
|
||
nav.topnav{display:none;}
|
||
body{background:var(--bg-midnight) !important;}
|
||
section{page-break-inside:avoid;border-bottom:none;}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="topnav">
|
||
<div class="wrap">
|
||
<span class="brandmark">Chrystal Math</span>
|
||
<a href="#konzept">Konzept</a>
|
||
<a href="#farben">Farben</a>
|
||
<a href="#typo">Typografie</a>
|
||
<a href="#logo">Logo</a>
|
||
<a href="#anwendung">Anwendungen</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="hero wrap">
|
||
<div class="kicker">Corporate Identity & Design Guide</div>
|
||
<img src="logo.png" alt="Chrystal Math Logo">
|
||
<div class="doctitle">Calculated Chaos — CI/CD Guide v1.0</div>
|
||
<p class="hero-p" style="max-width:560px;margin:16px auto 0;color:var(--ink-muted);font-size:15px;">
|
||
Diese Datei ist deine Referenz für Farben, Schriften und Anwendung der Marke Chrystal Math — auf Papier und im Netz.
|
||
</p>
|
||
|
||
<div class="switcher" id="switcher">
|
||
<button data-bg="" class="active">Mitternachtsblau</button>
|
||
<button data-bg="bg-graphite">Anthrazit</button>
|
||
<button data-bg="bg-aubergine">Aubergine</button>
|
||
</div>
|
||
<div class="hint">↑ Live umschalten und in Ruhe entscheiden, bevor du dich festlegst.</div>
|
||
</div>
|
||
|
||
<section id="konzept">
|
||
<div class="wrap">
|
||
<div class="eyebrow">Markenkern</div>
|
||
<h2>Präzision mit Pailletten.</h2>
|
||
<p class="lead">Chrystal Math ist Geometrie, die tanzen gelernt hat. Der Zirkel zieht exakte Kreise, die Konstruktionslinien stimmen — und mittendrin tanzt jemand bewusst aus der Reihe. Genau das ist <em>calculated chaos</em>: durchdachte Struktur, die sich einen glamourösen Wildcard-Moment erlaubt.</p>
|
||
<p style="margin-top:18px;">Für dein Design heißt das konkret: harte, saubere geometrische Grundformen (Kreise, Zirkel, Konstruktionslinien) treffen auf einen theatralischen, hochkontrastreichen Farbverlauf. Struktur zuerst, Glamour als bewusster Regelbruch obendrauf — nie umgekehrt.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="farben">
|
||
<div class="wrap">
|
||
<div class="eyebrow">Farbsystem</div>
|
||
<h2>Der Verlauf ist die Signatur.</h2>
|
||
<p class="lead">Fünf Kernfarben aus dem Original-Logo, plus Gold als sparsam eingesetzter Signal-Akzent für Linien, Icons und kleine Details (Zirkel, Sterne, Trennlinien).</p>
|
||
|
||
<div class="swatch-grid">
|
||
<div class="swatch"><div class="fill" style="background:#F03A82"></div><div class="meta"><div class="name">Chaos Pink</div><div class="hex">#F03A82</div><div class="role">Primär — Start des Verlaufs</div></div></div>
|
||
<div class="swatch"><div class="fill" style="background:#B744C4"></div><div class="meta"><div class="name">Orchid</div><div class="hex">#B744C4</div><div class="role">Übergang Pink→Blau</div></div></div>
|
||
<div class="swatch"><div class="fill" style="background:#645EE9"></div><div class="meta"><div class="name">Violet</div><div class="hex">#645EE9</div><div class="role">Übergang Mitte</div></div></div>
|
||
<div class="swatch"><div class="fill" style="background:#02AFF1"></div><div class="meta"><div class="name">Sky Cyan</div><div class="hex">#02AFF1</div><div class="role">Primär — Ende des Verlaufs</div></div></div>
|
||
<div class="swatch"><div class="fill" style="background:#6F235C"></div><div class="meta"><div class="name">Deep Wine</div><div class="hex">#6F235C</div><div class="role">Schatten/Hover von Pink</div></div></div>
|
||
<div class="swatch"><div class="fill" style="background:#096089"></div><div class="meta"><div class="name">Deep Petrol</div><div class="hex">#096089</div><div class="role">Schatten/Hover von Cyan</div></div></div>
|
||
<div class="swatch"><div class="fill" style="background:#E3B63E"></div><div class="meta"><div class="name">Calculated Gold</div><div class="hex">#E3B63E</div><div class="role">Akzent — sparsam, für Linien & Icons</div></div></div>
|
||
<div class="swatch"><div class="fill" style="background:#F5F1EA"></div><div class="meta"><div class="name">Ink Light</div><div class="hex">#F5F1EA</div><div class="role">Fließtext auf dunklem Grund</div></div></div>
|
||
</div>
|
||
|
||
<h3 style="margin-top:64px;">Hintergrund — drei Optionen zur Wahl</h3>
|
||
<p>Reines Schwarz ist raus. Alle drei Alternativen sind dunkel genug, damit der Neon-Verlauf weiter leuchtet, aber jede setzt eine andere Stimmung.</p>
|
||
<div class="bg-options">
|
||
<div class="bg-card rec">
|
||
<div class="tag">Empfehlung</div>
|
||
<h4>Mitternachtsblau</h4>
|
||
<div class="hex">#0B1330</div>
|
||
<div class="mini" style="background:#0B1330;"><div class="word">Chrystal Math</div><div class="tagline">Calculated Chaos.</div></div>
|
||
<p>Kosmisch, edel — passt zum Zirkel/Sterne-Motiv im Logo. Kühlster Unterton, größter Kontrast zu Pink und Gold.</p>
|
||
</div>
|
||
<div class="bg-card">
|
||
<h4>Anthrazit / Graphit</h4>
|
||
<div class="hex">#18171C</div>
|
||
<div class="mini" style="background:#18171C;"><div class="word">Chrystal Math</div><div class="tagline">Calculated Chaos.</div></div>
|
||
<p>Neutral, modern, leicht violetter Unterton. Wirkt am „technischsten" — gut für Web/UI-lastige Anwendungen.</p>
|
||
</div>
|
||
<div class="bg-card">
|
||
<h4>Aubergine / Plum</h4>
|
||
<div class="hex">#200C24</div>
|
||
<div class="mini" style="background:#200C24;"><div class="word">Chrystal Math</div><div class="tagline">Calculated Chaos.</div></div>
|
||
<p>Am nächsten am Lila-Ton des Verlaufs selbst — monochromer, „drag-iger", am wenigsten neutral.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="rules">
|
||
<tr><th>Regel</th><th>Bedeutung</th></tr>
|
||
<tr><td><b>60 / 30 / 10</b></td><td>60% Hintergrund, 30% Verlauf/Flächen, 10% Gold-Akzent. Der Verlauf bleibt Ausnahme, nicht Grundzustand.</td></tr>
|
||
<tr><td><b>Ein Verlauf pro Fläche</b></td><td>Nie zwei Farbverläufe gleichzeitig im selben Sichtfeld — das kippt schnell ins Unruhige.</td></tr>
|
||
<tr><td><b>Kontrast zuerst</b></td><td>Fließtext immer in Ink Light oder Ink Muted auf dunklem Grund, nie in Verlaufsfarbe direkt.</td></tr>
|
||
<tr><td><b>Gold bleibt selten</b></td><td>Gold nur für Linien, Icons, Sterne, Mikro-Details — nie als Fläche oder Fließtextfarbe.</td></tr>
|
||
</table>
|
||
|
||
<div class="dodont">
|
||
<div class="col do">
|
||
<h4>✓ So funktioniert's</h4>
|
||
<ul>
|
||
<li>Verlauf auf Headlines, Logo, große Flächen</li>
|
||
<li>Volltonfarben (einzeln) für Buttons, Icons, Tags</li>
|
||
<li>Gold als Trennlinie oder kleines Sternsymbol</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col dont">
|
||
<h4>✕ Bitte vermeiden</h4>
|
||
<ul>
|
||
<li>Verlauf auf Fließtext (schlecht lesbar)</li>
|
||
<li>Cyan-Text direkt auf Pink-Fläche (zu wenig Kontrast)</li>
|
||
<li>Gold großflächig statt als Akzent</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="typo">
|
||
<div class="wrap">
|
||
<div class="eyebrow">Typografie</div>
|
||
<h2>Zwei Stimmen, ein Akzent.</h2>
|
||
<p class="lead">Alle drei Schriften stehen bei Google Fonts unter der SIL Open Font License 1.1 — vollständig kostenlos, auch kommerziell, ohne Copyright-Risiko, selbst hostbar oder per Google-Fonts-CDN einbindbar.</p>
|
||
|
||
<div class="type-block" style="margin-top:48px;">
|
||
<div class="label-row"><span class="role">Display — Wortmarke & Headlines</span><span class="license">SIL OFL 1.1 · frei</span></div>
|
||
<div class="specimen-display">Chrystal Math</div>
|
||
<p style="font-size:13.5px;">Bodoni Moda — moderner, freier Nachbau der klassischen Bodoni-Didone-Schnitte. Trifft den hochkontrastreichen Dünn-Dick-Charakter des Original-Logos am nächsten.</p>
|
||
<div class="weights">
|
||
<span><b>Regular 400</b>Aa</span>
|
||
<span style="font-weight:600;"><b>SemiBold 600</b>Aa</span>
|
||
<span style="font-weight:800;"><b>ExtraBold 800</b>Aa</span>
|
||
<span style="font-style:italic;"><b>Italic</b>Aa</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="type-block">
|
||
<div class="label-row"><span class="role">Sans — Fließtext, UI, Taglines</span><span class="license">SIL OFL 1.1 · frei</span></div>
|
||
<div class="specimen-sans">Calculated Chaos.</div>
|
||
<p style="font-family:var(--font-sans);color:var(--ink-light);font-size:15px;max-width:640px;font-weight:400;">Poppins — geometrische Grotesk, arbeitet mit breiter Laufweite genau wie die Original-Tagline. Für Fließtext, Buttons, Navigation, Labels.</p>
|
||
<div class="weights">
|
||
<span style="font-family:var(--font-sans);font-size:16px;"><b>Regular</b>Aa</span>
|
||
<span style="font-family:var(--font-sans);font-size:16px;font-weight:600;"><b>SemiBold</b>Aa</span>
|
||
<span style="font-family:var(--font-sans);font-size:16px;font-weight:700;"><b>Bold</b>Aa</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="type-block">
|
||
<div class="label-row"><span class="role">Akzent — der „pfiffige" Moment, sehr sparsam</span><span class="license">SIL OFL 1.1 · frei</span></div>
|
||
<div class="specimen-accent">…mit einer Prise Unordnung.</div>
|
||
<p style="font-size:13.5px;">Fraunces Italic — weicher, verspielter Serifenschnitt mit Charakter. Nur für einzelne Signature-Momente: Zitate, Unterschriften, eine Zeile auf dem Briefkopf. Nie für ganze Absätze.</p>
|
||
</div>
|
||
|
||
<table class="rules">
|
||
<tr><th>Rolle</th><th>Schrift</th><th>Wann</th></tr>
|
||
<tr><td><b>Headline / Wortmarke</b></td><td>Bodoni Moda SemiBold–ExtraBold</td><td>Titel, Logo-Schriftzug, große Aussagen</td></tr>
|
||
<tr><td><b>Fließtext</b></td><td>Poppins Regular</td><td>Absätze, Beschreibungen, Web-Body</td></tr>
|
||
<tr><td><b>Labels / Tags</b></td><td>Poppins SemiBold, tracking +0.15–0.25em</td><td>Kicker, Buttons, Navigation, Kleingedrucktes</td></tr>
|
||
<tr><td><b>Signature-Moment</b></td><td>Fraunces SemiBold Italic</td><td>1 Zeile pro Anwendung, nie mehr</td></tr>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="logo">
|
||
<div class="wrap">
|
||
<div class="eyebrow">Logo & Signet</div>
|
||
<h2>Der Zirkel bleibt Zirkel.</h2>
|
||
<p class="lead">Das „A" in „MAth" ist eine Zirkel-Illustration, kein Buchstabe — sie darf nie durch reinen Text ersetzt werden. Das Logo existiert nur als Ganzes, nicht in Einzelteilen.</p>
|
||
<table class="rules">
|
||
<tr><th>Regel</th><th>Detail</th></tr>
|
||
<tr><td><b>Schutzraum</b></td><td>Mindestens die Höhe des „C" als Abstand zu Rand, Text oder anderen Elementen</td></tr>
|
||
<tr><td><b>Mindestgröße</b></td><td>Druck: 30mm Breite · Web: 160px Breite — darunter verliert der Verlauf Zeichnung</td></tr>
|
||
<tr><td><b>Erlaubte Untergründe</b></td><td>Alle drei Hintergrundfarben dieses Guides; helle Flächen nur mit dunklem Container darunter</td></tr>
|
||
<tr><td><b>Nicht erlaubt</b></td><td>Umfärben außerhalb der Palette, Verzerren/Stauchen, Freistellen einzelner Buchstaben, Platzierung auf unruhigen Fotos ohne Abdunkelung</td></tr>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="anwendung">
|
||
<div class="wrap">
|
||
<div class="eyebrow">Anwendungen</div>
|
||
<h2>Vier Beispiele, ein System.</h2>
|
||
<p class="lead">Zwei für den Druck, dazu ein Briefkopf mit Signature-Moment, und eine vollständige Web-One-Pager-Vorlage — alle aus denselben Tokens gebaut.</p>
|
||
<div class="apps-grid">
|
||
<div class="app-card"><div class="tag2">Druck</div><h4>Poster</h4><p>A2, Hochformat. Großer Verlauf als Bühne, ein Termin/Statement als Fokus.</p><div class="file">poster.pdf</div></div>
|
||
<div class="app-card"><div class="tag2">Druck</div><h4>Postkarte</h4><p>A6, beidseitig. Vorderseite Bildmotiv, Rückseite Absender + Nachrichtenfeld.</p><div class="file">postkarte.pdf</div></div>
|
||
<div class="app-card"><div class="tag2">Druck</div><h4>Briefkopf</h4><p>A4. Elegant reduziert, mit einem Fraunces-Signature-Moment als Pfiff.</p><div class="file">briefkopf.pdf</div></div>
|
||
<div class="app-card"><div class="tag2">Web</div><h4>One-Pager</h4><p>Vollständige Website-Vorlage: Header, Nav, Bio, Programm, Zitat, Kontakt, Footer.</p><div class="file">onepager.html</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="wrap">
|
||
<p>Chrystal Math — Calculated Chaos. · CI/CD Guide v1.0 · Alle verwendeten Schriften: SIL Open Font License 1.1</p>
|
||
</footer>
|
||
|
||
<script>
|
||
const buttons = document.querySelectorAll('#switcher button');
|
||
buttons.forEach(btn=>{
|
||
btn.addEventListener('click', ()=>{
|
||
document.body.className = btn.dataset.bg;
|
||
buttons.forEach(b=>b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|