86 lines
6.1 KiB
CSS
86 lines
6.1 KiB
CSS
/* Chrystal Math Design Tokens and Components
|
|
Fonts: GFS Didot + Dosis (SIL OFL 1.1)
|
|
For production in Germany, self-host WOFF2 files where practical. */
|
|
|
|
@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600;700&family=GFS+Didot&display=swap");
|
|
|
|
:root {
|
|
--cm-bg: #140B24;
|
|
--cm-bg-2: #21143A;
|
|
--cm-bg-3: #2A1A44;
|
|
--cm-light: #FFF7FB;
|
|
--cm-text-on-dark: #F8F4FA;
|
|
--cm-muted-on-dark: #CFC5D8;
|
|
--cm-ink: #24172E;
|
|
--cm-muted-ink: #62516D;
|
|
--cm-magenta: #F740A7;
|
|
--cm-cyan: #08D4F3;
|
|
--cm-violet: #A146EE;
|
|
--cm-blue: #568DF9;
|
|
--cm-lime: #B7D92A;
|
|
--cm-gold: #D6C65B;
|
|
--cm-display: "GFS Didot", Didot, "Bodoni MT", serif;
|
|
--cm-body: "Dosis", "Arial Narrow", sans-serif;
|
|
--cm-radius-sm: .75rem;
|
|
--cm-radius-md: 1.25rem;
|
|
--cm-radius-lg: 2rem;
|
|
--cm-shadow: 0 1.5rem 4rem rgba(9, 2, 18, .32);
|
|
--cm-content: 75rem;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { color-scheme: dark; scroll-behavior: smooth; }
|
|
body { margin: 0; font-family: var(--cm-body); font-size: 1.125rem; line-height: 1.55; background: var(--cm-bg); color: var(--cm-text-on-dark); }
|
|
a { color: var(--cm-cyan); text-decoration-thickness: .08em; text-underline-offset: .18em; }
|
|
a:hover { color: var(--cm-light); }
|
|
.container { width: min(calc(100% - 2rem), var(--cm-content)); margin-inline: auto; }
|
|
.eyebrow { color: var(--cm-magenta); font-size: .83rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
|
|
h1, h2 { font-family: var(--cm-display); font-weight: 400; line-height: .96; margin: 0; text-wrap: balance; }
|
|
h1 { font-size: clamp(3.7rem, 10vw, 7.8rem); }
|
|
h2 { font-size: clamp(2.7rem, 6vw, 5rem); }
|
|
h3 { font-size: 1.45rem; line-height: 1.15; margin: 0; }
|
|
.gradient-text { background: linear-gradient(110deg, var(--cm-magenta), #f5d9ff 43%, var(--cm-violet) 65%, var(--cm-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
|
|
|
|
.hero { min-height: 92vh; display: grid; align-items: center; position: relative; overflow: hidden; isolation: isolate; padding-block: 5rem; background: radial-gradient(circle at 15% 20%, rgba(247,64,167,.18), transparent 32%), radial-gradient(circle at 87% 14%, rgba(8,212,243,.15), transparent 31%), var(--cm-bg); }
|
|
.hero::after { content: ""; position: absolute; inset: 10% -8% auto auto; width: 28rem; aspect-ratio: 1; border: 1px dashed rgba(183,217,42,.38); border-radius: 50%; z-index: -1; }
|
|
.hero__grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); align-items: center; }
|
|
.hero p { max-width: 42rem; color: var(--cm-muted-on-dark); font-size: clamp(1.1rem, 2.3vw, 1.4rem); }
|
|
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
|
|
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.25rem; border-radius: 999px; border: 1px solid transparent; font-weight: 700; letter-spacing: .02em; text-decoration: none; transition: transform .18s ease, background .18s ease, color .18s ease; }
|
|
.button:hover { transform: translateY(-2px); }
|
|
.button--primary { background: var(--cm-magenta); color: var(--cm-bg); }
|
|
.button--secondary { border-color: var(--cm-cyan); color: var(--cm-cyan); }
|
|
.button--secondary:hover { background: var(--cm-cyan); color: var(--cm-bg); }
|
|
|
|
.orbit-card { position: relative; min-height: 24rem; border-radius: var(--cm-radius-lg); background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.13); box-shadow: var(--cm-shadow); }
|
|
.orbit-card::before, .orbit-card::after { content: ""; position: absolute; border-radius: 50%; }
|
|
.orbit-card::before { width: 12rem; aspect-ratio: 1; border: 2px solid var(--cm-violet); left: 14%; top: 18%; }
|
|
.orbit-card::after { width: 1rem; aspect-ratio: 1; background: var(--cm-lime); box-shadow: 0 0 1.8rem .4rem rgba(183,217,42,.55); right: 18%; top: 24%; }
|
|
.node { position: absolute; width: 1.1rem; aspect-ratio: 1; border-radius: 50%; background: var(--cm-bg); border: 3px solid var(--cm-cyan); }
|
|
.node:nth-child(1) { left: 18%; top: 65%; } .node:nth-child(2) { left: 52%; top: 49%; border-color: var(--cm-magenta); } .node:nth-child(3) { right: 12%; bottom: 18%; border-color: var(--cm-lime); }
|
|
.node-line { position: absolute; height: 2px; background: linear-gradient(90deg, var(--cm-cyan), var(--cm-violet), var(--cm-lime)); width: 63%; left: 21%; top: 59%; transform: rotate(-9deg); transform-origin: left; }
|
|
|
|
.events { background: var(--cm-light); color: var(--cm-ink); padding-block: 6rem; }
|
|
.events .eyebrow { color: var(--cm-violet); }
|
|
.events__header { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2rem; }
|
|
.events__header p { color: var(--cm-muted-ink); margin: 0; }
|
|
.event-card { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1.5rem; align-items: center; padding: 1.3rem; background: #fff; border: 1px solid #eadfea; border-radius: var(--cm-radius-md); box-shadow: 0 1.2rem 3rem rgba(36,23,46,.08); }
|
|
.event-date { min-height: 8rem; display: grid; place-content: center; text-align: center; border-radius: 1rem; background: var(--cm-magenta); color: var(--cm-light); }
|
|
.event-date strong { font-family: var(--cm-display); font-size: 3.6rem; line-height: .8; font-weight: 400; }
|
|
.event-date span { margin-top: .55rem; font-weight: 700; font-size: .75rem; letter-spacing: .13em; }
|
|
.event-card h3 { font-family: var(--cm-display); font-size: 2rem; font-weight: 400; }
|
|
.event-card p { margin: .45rem 0 0; color: var(--cm-muted-ink); }
|
|
.event-card .button { color: var(--cm-ink); border-color: var(--cm-ink); }
|
|
|
|
.swatches { display: flex; height: .55rem; } .swatches span { flex: 1; }
|
|
footer { padding: 2rem; background: var(--cm-bg); color: var(--cm-muted-on-dark); font-size: .9rem; text-align: center; }
|
|
|
|
@media (max-width: 760px) {
|
|
.hero__grid, .events__header { grid-template-columns: 1fr; }
|
|
.orbit-card { min-height: 18rem; }
|
|
.event-card { grid-template-columns: 6.5rem 1fr; }
|
|
.event-card > .button { grid-column: 1 / -1; }
|
|
.event-date { min-height: 6.5rem; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
|