237 lines
12 KiB
HTML
237 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Chrystal Math — Calculated Chaos.</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{background:var(--bg-midnight);color:var(--ink-light);font-family:var(--font-sans);line-height:1.65;}
|
|
a{color:inherit;text-decoration:none;}
|
|
img{max-width:100%;display:block;}
|
|
.wrap{max-width:1100px;margin:0 auto;padding:0 28px;}
|
|
section{padding:110px 0;}
|
|
|
|
/* ---- NAV ---- */
|
|
header.nav{position:sticky;top:0;z-index:60;background:rgba(11,19,48,.7);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);}
|
|
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;}
|
|
header.nav .brand{font-family:var(--font-display);font-weight:700;font-size:19px;}
|
|
header.nav .brand span{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
|
|
header.nav nav{display:flex;gap:30px;}
|
|
header.nav nav a{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-muted);transition:.2s;}
|
|
header.nav nav a:hover{color:var(--chaos-cyan);}
|
|
header.nav .cta{padding:9px 18px;border-radius:30px;background:var(--chaos-gold);color:#241708;font-size:12px;font-weight:700;letter-spacing:.05em;}
|
|
|
|
/* ---- HERO ---- */
|
|
.hero{
|
|
min-height:92vh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
|
|
background:
|
|
radial-gradient(circle at 85% 15%, rgba(2,175,241,.24), transparent 45%),
|
|
radial-gradient(circle at 8% 90%, rgba(240,58,130,.20), transparent 45%),
|
|
var(--bg-midnight);
|
|
}
|
|
.hero svg.deco{position:absolute;top:-60px;right:-60px;opacity:.5;}
|
|
.hero .eyebrow{font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--chaos-gold);font-weight:600;margin-bottom:20px;}
|
|
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(48px,8vw,110px);line-height:.96;background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;max-width:780px;}
|
|
.hero .sub{margin-top:26px;font-size:18px;color:var(--ink-muted);max-width:480px;}
|
|
.hero .ctas{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap;}
|
|
.btn-primary{padding:14px 28px;border-radius:34px;background:var(--chaos-gold);color:#241708;font-weight:700;font-size:13.5px;letter-spacing:.04em;}
|
|
.btn-ghost{padding:14px 28px;border-radius:34px;border:1px solid rgba(245,241,234,.3);font-weight:600;font-size:13.5px;letter-spacing:.04em;}
|
|
.btn-ghost:hover{border-color:var(--chaos-cyan);color:var(--chaos-cyan);}
|
|
.scrolldown{position:absolute;bottom:30px;left:28px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);}
|
|
|
|
/* ---- ABOUT ---- */
|
|
#ueber{border-top:1px solid rgba(255,255,255,.06);}
|
|
.about-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:60px;align-items:center;}
|
|
.eyebrow{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--chaos-gold);font-weight:600;margin-bottom:16px;}
|
|
h2{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4vw,44px);margin-bottom:20px;color:var(--ink-light);}
|
|
.about-photo{aspect-ratio:4/5;border-radius:18px;background:
|
|
radial-gradient(circle at 30% 20%, rgba(183,68,196,.35), transparent 60%),
|
|
radial-gradient(circle at 70% 80%, rgba(2,175,241,.30), transparent 60%),
|
|
var(--bg-graphite);
|
|
display:flex;align-items:center;justify-content:center;color:var(--ink-muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(255,255,255,.08);}
|
|
.about-text p{color:var(--ink-muted);max-width:520px;margin-bottom:16px;font-size:15.5px;}
|
|
.stats{display:flex;gap:36px;margin-top:30px;}
|
|
.stats div b{display:block;font-family:var(--font-display);font-size:30px;color:var(--chaos-cyan);}
|
|
.stats div span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);}
|
|
|
|
/* ---- SHOWS / PROGRAMM ---- */
|
|
#programm{background:var(--bg-graphite);}
|
|
.show-list{margin-top:40px;border-top:1px solid rgba(255,255,255,.08);}
|
|
.show-row{display:grid;grid-template-columns:110px 1fr auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.08);transition:.2s;}
|
|
.show-row:hover{background:rgba(255,255,255,.03);}
|
|
.show-row .date b{display:block;font-family:var(--font-display);font-size:22px;}
|
|
.show-row .date span{font-size:11px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;}
|
|
.show-row .info h4{font-family:var(--font-display);font-size:19px;margin-bottom:4px;}
|
|
.show-row .info p{font-size:13.5px;color:var(--ink-muted);}
|
|
.show-row .tix{padding:9px 20px;border-radius:30px;border:1px solid var(--chaos-cyan);color:var(--chaos-cyan);font-size:12px;font-weight:600;white-space:nowrap;}
|
|
.show-row .tix:hover{background:var(--chaos-cyan);color:#04202c;}
|
|
|
|
/* ---- GALLERY ---- */
|
|
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;}
|
|
.gallery div{aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(255,255,255,.08);}
|
|
.gallery div:nth-child(1){background:radial-gradient(circle at 30% 30%, rgba(240,58,130,.35), var(--bg-graphite));}
|
|
.gallery div:nth-child(2){background:radial-gradient(circle at 70% 30%, rgba(183,68,196,.35), var(--bg-graphite));}
|
|
.gallery div:nth-child(3){background:radial-gradient(circle at 30% 70%, rgba(100,94,233,.35), var(--bg-graphite));}
|
|
.gallery div:nth-child(4){background:radial-gradient(circle at 70% 70%, rgba(2,175,241,.35), var(--bg-graphite));}
|
|
|
|
/* ---- QUOTE ---- */
|
|
.quote-section{text-align:center;}
|
|
.quote-section blockquote{font-family:var(--font-accent);font-style:italic;font-weight:600;font-size:clamp(24px,3.6vw,36px);color:var(--chaos-pink);max-width:760px;margin:0 auto;line-height:1.4;}
|
|
.quote-section cite{display:block;margin-top:24px;font-style:normal;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);}
|
|
|
|
/* ---- CONTACT ---- */
|
|
#kontakt{background:var(--bg-graphite);}
|
|
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
|
|
.contact-info a{display:block;margin-top:14px;font-size:15px;color:var(--chaos-cyan);}
|
|
.contact-info .socials{display:flex;gap:14px;margin-top:26px;}
|
|
.contact-info .socials span{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-muted);}
|
|
.form-mock{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px;background:rgba(255,255,255,.02);}
|
|
.form-mock .f{margin-bottom:16px;}
|
|
.form-mock label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);display:block;margin-bottom:6px;}
|
|
.form-mock .field{height:38px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);}
|
|
.form-mock .field.tall{height:80px;}
|
|
.form-mock .send{margin-top:6px;width:100%;padding:13px;border-radius:8px;background:var(--chaos-gold);color:#241708;font-weight:700;font-size:13px;letter-spacing:.04em;border:none;}
|
|
|
|
footer{padding:50px 0;border-top:1px solid rgba(255,255,255,.08);}
|
|
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
|
|
footer .brand{font-family:var(--font-display);font-weight:700;}
|
|
footer .brand span{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
|
|
footer p{font-size:12px;color:var(--ink-muted);}
|
|
footer nav{display:flex;gap:20px;}
|
|
footer nav a{font-size:12px;color:var(--ink-muted);}
|
|
footer nav a:hover{color:var(--chaos-cyan);}
|
|
|
|
@media(max-width:820px){
|
|
.about-grid,.contact-grid{grid-template-columns:1fr;}
|
|
.gallery{grid-template-columns:repeat(2,1fr);}
|
|
header.nav nav{display:none;}
|
|
.show-row{grid-template-columns:1fr;text-align:left;}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="nav">
|
|
<div class="wrap">
|
|
<div class="brand"><span>Chrystal Math</span></div>
|
|
<nav>
|
|
<a href="#ueber">Über mich</a>
|
|
<a href="#programm">Programm</a>
|
|
<a href="#galerie">Galerie</a>
|
|
<a href="#kontakt">Kontakt</a>
|
|
</nav>
|
|
<a class="cta" href="#kontakt">Booking anfragen</a>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<svg class="deco" width="260" height="260" viewBox="0 0 260 260">
|
|
<circle cx="130" cy="130" r="90" stroke="#E3B63E" stroke-width="0.7" fill="none" opacity="0.5"></circle>
|
|
<circle cx="130" cy="130" r="120" stroke="#E3B63E" stroke-width="0.7" fill="none" stroke-dasharray="5 5" opacity="0.3"></circle>
|
|
<circle cx="130" cy="130" r="4" fill="#E3B63E"></circle>
|
|
</svg>
|
|
<div class="wrap">
|
|
<div class="eyebrow">Drag · Performance · Calculated Chaos</div>
|
|
<h1>Chrystal<br>Math</h1>
|
|
<p class="sub">Präzision mit Pailletten. Geometrie, die tanzen gelernt hat — Shows, Auftritte und Zahlen mit Wildcard-Moment.</p>
|
|
<div class="ctas">
|
|
<a class="btn-primary" href="#programm">Nächste Show</a>
|
|
<a class="btn-ghost" href="#kontakt">Booking anfragen</a>
|
|
</div>
|
|
</div>
|
|
<div class="scrolldown wrap">↓ Scrollen</div>
|
|
</section>
|
|
|
|
<section id="ueber">
|
|
<div class="wrap about-grid">
|
|
<div class="about-photo">Foto-Platzhalter · 4:5</div>
|
|
<div class="about-text">
|
|
<div class="eyebrow">Über mich</div>
|
|
<h2>Exakt geplant,<br>wunderbar chaotisch.</h2>
|
|
<p>Chrystal Math verbindet strenge Geometrie mit theatralischem Glamour: Zirkel und Konstruktionslinien treffen auf Farbverlauf, Pailletten und einen bewussten Regelbruch mitten im Takt.</p>
|
|
<p>Seit [Jahr] auf Kölner Bühnen unterwegs — von kleinen Clubformaten bis zu größeren Bühnenshows.</p>
|
|
<div class="stats">
|
|
<div><b>40+</b><span>Auftritte</span></div>
|
|
<div><b>12</b><span>Formate</span></div>
|
|
<div><b>3</b><span>Städte</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="programm">
|
|
<div class="wrap">
|
|
<div class="eyebrow">Programm</div>
|
|
<h2>Nächste Termine</h2>
|
|
<div class="show-list">
|
|
<div class="show-row">
|
|
<div class="date"><b>27.09</b><span>2026</span></div>
|
|
<div class="info"><h4>Kleiner Freitag</h4><p>Café Bach, Köln · Einlass 20 Uhr</p></div>
|
|
<a class="tix" href="#">Tickets</a>
|
|
</div>
|
|
<div class="show-row">
|
|
<div class="date"><b>11.10</b><span>2026</span></div>
|
|
<div class="info"><h4>Calculated Chaos — Late Show</h4><p>Ort folgt · Einlass 21 Uhr</p></div>
|
|
<a class="tix" href="#">Tickets</a>
|
|
</div>
|
|
<div class="show-row">
|
|
<div class="date"><b>02.11</b><span>2026</span></div>
|
|
<div class="info"><h4>Gastauftritt</h4><p>Ort folgt · Beginn 22 Uhr</p></div>
|
|
<a class="tix" href="#">Tickets</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="galerie">
|
|
<div class="wrap">
|
|
<div class="eyebrow">Galerie</div>
|
|
<h2>Ein paar Eindrücke</h2>
|
|
<div class="gallery">
|
|
<div>Bild 1</div><div>Bild 2</div><div>Bild 3</div><div>Bild 4</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="quote-section">
|
|
<div class="wrap">
|
|
<blockquote>„Wie ein Zirkel, der plötzlich Lust auf Freestyle bekommt."</blockquote>
|
|
<cite>— Platzhalter-Zitat, z. B. aus einer Rezension</cite>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="kontakt">
|
|
<div class="wrap contact-grid">
|
|
<div class="contact-info">
|
|
<div class="eyebrow">Kontakt & Booking</div>
|
|
<h2>Lust auf calculated chaos<br>bei deinem Event?</h2>
|
|
<a href="mailto:hallo@chrystalmath.de">hallo@chrystalmath.de</a>
|
|
<a href="#">chrystalmath.de</a>
|
|
<div class="socials"><span>IG</span><span>TT</span><span>FB</span></div>
|
|
</div>
|
|
<div class="form-mock">
|
|
<div class="f"><label>Name</label><div class="field"></div></div>
|
|
<div class="f"><label>E-Mail</label><div class="field"></div></div>
|
|
<div class="f"><label>Nachricht</label><div class="field tall"></div></div>
|
|
<button class="send">Anfrage senden</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="wrap">
|
|
<div class="brand"><span>Chrystal Math</span></div>
|
|
<nav>
|
|
<a href="#ueber">Über mich</a>
|
|
<a href="#programm">Programm</a>
|
|
<a href="#kontakt">Kontakt</a>
|
|
</nav>
|
|
<p>© 2026 Chrystal Math · Calculated Chaos.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|