269 lines
10 KiB
CSS
269 lines
10 KiB
CSS
/* ==========================================================================
|
|
CHRYSTAL MATH — GENERAL-PURPOSE STYLESHEET
|
|
"Calculated Chaos." brand system v1.1
|
|
Drop this file (+ the /fonts folder next to it) into any project.
|
|
All fonts: SIL Open Font License 1.1 — free for commercial use.
|
|
========================================================================== */
|
|
|
|
/* --------------------------------------------------------------------------
|
|
1. FONTS (self-hosted, no external requests)
|
|
-------------------------------------------------------------------------- */
|
|
@font-face{
|
|
font-family:'Bodoni Moda'; font-weight:400; font-style:normal; font-display:swap;
|
|
src:url('fonts/BodoniModa-Regular.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Bodoni Moda'; font-weight:500; font-style:normal; font-display:swap;
|
|
src:url('fonts/BodoniModa-Medium.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Bodoni Moda'; font-weight:600; font-style:normal; font-display:swap;
|
|
src:url('fonts/BodoniModa-SemiBold.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Bodoni Moda'; font-weight:700; font-style:normal; font-display:swap;
|
|
src:url('fonts/BodoniModa-Bold.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Bodoni Moda'; font-weight:800; font-style:normal; font-display:swap;
|
|
src:url('fonts/BodoniModa-ExtraBold.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Bodoni Moda'; font-weight:400; font-style:italic; font-display:swap;
|
|
src:url('fonts/BodoniModa-Italic.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Bodoni Moda'; font-weight:600; font-style:italic; font-display:swap;
|
|
src:url('fonts/BodoniModa-SemiBoldItalic.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap;
|
|
src:url('fonts/Poppins-Regular.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap;
|
|
src:url('fonts/Poppins-Medium.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap;
|
|
src:url('fonts/Poppins-SemiBold.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap;
|
|
src:url('fonts/Poppins-Bold.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Fraunces'; font-weight:400; font-style:normal; font-display:swap;
|
|
src:url('fonts/Fraunces-Regular.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Fraunces'; font-weight:600; font-style:normal; font-display:swap;
|
|
src:url('fonts/Fraunces-SemiBold.woff2') format('woff2');
|
|
}
|
|
@font-face{
|
|
font-family:'Fraunces'; font-weight:600; font-style:italic; font-display:swap;
|
|
src:url('fonts/Fraunces-SemiBoldItalic.woff2') format('woff2');
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
2. DESIGN TOKENS
|
|
-------------------------------------------------------------------------- */
|
|
:root{
|
|
/* core gradient colors, fixed — from the logo, same in both themes */
|
|
--chaos-pink: #F03A82;
|
|
--chaos-pink-deep: #6F235C;
|
|
--chaos-orchid: #B744C4;
|
|
--chaos-violet: #645EE9;
|
|
--chaos-cyan: #02AFF1;
|
|
--chaos-cyan-deep: #096089;
|
|
--chaos-gold: #E3B63E;
|
|
|
|
/* reference backgrounds, kept for other applications (print etc.) */
|
|
--bg-midnight: #070C1F;
|
|
--bg-aubergine: #200C24;
|
|
|
|
/* fonts */
|
|
--font-display: 'Bodoni Moda', 'Times New Roman', serif;
|
|
--font-sans: 'Poppins', 'Helvetica Neue', sans-serif;
|
|
--font-accent: 'Fraunces', 'Georgia', serif;
|
|
|
|
/* spacing scale */
|
|
--space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
|
|
--space-5: 40px; --space-6: 64px; --space-7: 96px;
|
|
|
|
--radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px;
|
|
|
|
/* ---- THEME: DARK (default) — Orchid-Anthrazit, Stufe 4 ---- */
|
|
--bg: #070307;
|
|
--bg-raised: #140914;
|
|
--ink: #F5F1EA;
|
|
--ink-muted: #ACA7C0;
|
|
--line: rgba(245,241,234,.12);
|
|
--line-strong: rgba(245,241,234,.22);
|
|
|
|
/* semantic accent text — safe-contrast variants per theme */
|
|
--accent-gold: var(--chaos-gold);
|
|
--accent-pink: var(--chaos-pink);
|
|
--accent-cyan: var(--chaos-cyan);
|
|
|
|
--grad-main: linear-gradient(100deg, var(--chaos-pink) 0%, var(--chaos-orchid) 45%, var(--chaos-violet) 60%, var(--chaos-cyan) 100%);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* ---- THEME: LIGHT ---- */
|
|
:root[data-theme="light"]{
|
|
--bg: #F6F4FB;
|
|
--bg-raised: #FFFFFF;
|
|
--ink: #1E1A2E;
|
|
--ink-muted: #6B6580;
|
|
--line: rgba(30,26,46,.10);
|
|
--line-strong: rgba(30,26,46,.18);
|
|
|
|
/* deepened variants — the bright brand colors drop below AA contrast on light backgrounds */
|
|
--accent-gold: #7E6112;
|
|
--accent-pink: var(--chaos-pink-deep);
|
|
--accent-cyan: var(--chaos-cyan-deep);
|
|
|
|
/* deepened gradient stops for legible large headlines on light backgrounds */
|
|
--grad-main: linear-gradient(100deg, #C70F58 0%, #862E90 45%, #241CCF 60%, #017EAE 100%);
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
3. RESET & BASE
|
|
-------------------------------------------------------------------------- */
|
|
*, *::before, *::after{ box-sizing:border-box; }
|
|
html{ scroll-behavior:smooth; }
|
|
body{
|
|
margin:0;
|
|
background:var(--bg);
|
|
color:var(--ink);
|
|
font-family:var(--font-sans);
|
|
font-size:16px;
|
|
line-height:1.65;
|
|
-webkit-font-smoothing:antialiased;
|
|
transition:background .3s ease, color .3s ease;
|
|
}
|
|
img, svg{ max-width:100%; display:block; }
|
|
a{ color:var(--accent-cyan); text-decoration:none; }
|
|
a:hover{ color:var(--accent-pink); }
|
|
|
|
h1,h2,h3,h4{
|
|
font-family:var(--font-display);
|
|
font-weight:700;
|
|
line-height:1.08;
|
|
margin:0 0 var(--space-3);
|
|
color:var(--ink);
|
|
}
|
|
h1{ font-size:clamp(40px,6vw,72px); font-weight:800; }
|
|
h2{ font-size:clamp(30px,4.4vw,46px); font-weight:600; font-style:normal; }
|
|
h3{ font-size:22px; font-weight:600; }
|
|
h4{ font-size:17px; font-weight:600; }
|
|
|
|
p{ margin:0 0 var(--space-3); color:var(--ink-muted); max-width:65ch; }
|
|
p.lead{ font-size:1.15em; color:var(--ink); }
|
|
|
|
blockquote{
|
|
font-family:var(--font-accent); font-style:italic; font-weight:600;
|
|
color:var(--chaos-pink); font-size:1.4em; line-height:1.4; margin:0;
|
|
}
|
|
|
|
::selection{ background:var(--chaos-gold); color:#241708; }
|
|
|
|
/* --------------------------------------------------------------------------
|
|
4. TEXT UTILITIES
|
|
-------------------------------------------------------------------------- */
|
|
.text-gradient{
|
|
background:var(--grad-main);
|
|
-webkit-background-clip:text; background-clip:text; color:transparent;
|
|
}
|
|
.eyebrow{
|
|
font-family:var(--font-sans); font-weight:600; font-size:.78em;
|
|
letter-spacing:.22em; text-transform:uppercase; color:var(--accent-gold);
|
|
margin-bottom:var(--space-2); display:block;
|
|
}
|
|
.text-muted{ color:var(--ink-muted); }
|
|
.text-pink{ color:var(--accent-pink); }
|
|
.text-cyan{ color:var(--accent-cyan); }
|
|
.text-gold{ color:var(--accent-gold); }
|
|
.font-accent{ font-family:var(--font-accent); font-style:italic; font-weight:600; }
|
|
|
|
/* --------------------------------------------------------------------------
|
|
5. LAYOUT HELPERS
|
|
-------------------------------------------------------------------------- */
|
|
.wrap{ max-width:1100px; margin:0 auto; padding:0 28px; }
|
|
.section{ padding:var(--space-7) 0; }
|
|
.card{
|
|
background:var(--bg-raised);
|
|
border:1px solid var(--line);
|
|
border-radius:var(--radius-md);
|
|
padding:var(--space-4);
|
|
}
|
|
.divider{ height:1px; background:linear-gradient(90deg, var(--chaos-gold), transparent 70%); margin:var(--space-4) 0; border:none; }
|
|
.grid{ display:grid; gap:var(--space-3); }
|
|
.grid-2{ grid-template-columns:repeat(2,1fr); }
|
|
.grid-3{ grid-template-columns:repeat(3,1fr); }
|
|
.grid-4{ grid-template-columns:repeat(4,1fr); }
|
|
@media(max-width:820px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }
|
|
|
|
/* --------------------------------------------------------------------------
|
|
6. BUTTONS
|
|
-------------------------------------------------------------------------- */
|
|
.btn{
|
|
display:inline-block; font-family:var(--font-sans); font-weight:700; font-size:13.5px;
|
|
letter-spacing:.04em; padding:14px 28px; border-radius:var(--radius-pill);
|
|
border:1px solid transparent; cursor:pointer; transition:.2s ease;
|
|
}
|
|
.btn-primary{ background:var(--chaos-gold); color:#241708; }
|
|
.btn-primary:hover{ background:#f0c85a; color:#241708; }
|
|
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
|
|
.btn-ghost:hover{ border-color:var(--chaos-cyan); color:var(--chaos-cyan); }
|
|
|
|
/* --------------------------------------------------------------------------
|
|
7. TAGS / LABELS / SWATCHES
|
|
-------------------------------------------------------------------------- */
|
|
.tag{
|
|
display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em;
|
|
text-transform:uppercase; padding:3px 10px; border-radius:var(--radius-pill);
|
|
background:var(--chaos-gold); color:#241708;
|
|
}
|
|
.swatch{
|
|
border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); background:var(--bg-raised);
|
|
}
|
|
.swatch .fill{ height:96px; }
|
|
.swatch .meta{ padding:14px 16px; }
|
|
.swatch .name{ font-weight:600; font-size:14px; color:var(--ink); }
|
|
.swatch .hex{ font-family:monospace; font-size:12.5px; color:var(--ink-muted); }
|
|
|
|
/* --------------------------------------------------------------------------
|
|
8. NAV (optional, for one-pagers / sites)
|
|
-------------------------------------------------------------------------- */
|
|
.nav{
|
|
position:sticky; top:0; z-index:50;
|
|
background:color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter:blur(10px);
|
|
border-bottom:1px solid var(--line);
|
|
}
|
|
.nav .wrap{ display:flex; align-items:center; gap:24px; padding:16px 28px; }
|
|
.nav .brand{ font-family:var(--font-display); font-weight:700; font-size:19px; margin-right:auto; }
|
|
.nav a{
|
|
font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-muted);
|
|
}
|
|
.nav a:hover{ color:var(--accent-cyan); }
|
|
|
|
/* theme toggle button */
|
|
.theme-toggle{
|
|
display:inline-flex; align-items:center; gap:8px;
|
|
padding:8px 14px; border-radius:var(--radius-pill);
|
|
border:1px solid var(--line-strong); background:var(--bg-raised);
|
|
color:var(--ink); font-family:var(--font-sans); font-size:12px; font-weight:600;
|
|
cursor:pointer;
|
|
}
|
|
.theme-toggle:hover{ border-color:var(--chaos-gold); }
|
|
|
|
/* --------------------------------------------------------------------------
|
|
9. PRINT SUPPORT
|
|
-------------------------------------------------------------------------- */
|
|
@media print{
|
|
.nav{ display:none; }
|
|
body{ background:var(--bg) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
|
|
}
|