/* ════════════════════════════════════════════════════════════════
* CRESCENTTALES — BRAND SYSTEM v1
* Drop-in stylesheet for the entire crescenttales.com site.
*
* Load Google Fonts in BEFORE this stylesheet:
*
*
* Then:
*
* Everything is under the `.ct` wrapper class OR on :root vars.
* Use the utility classes, or reach for the tokens in your own CSS.
* ══════════════════════════════════════════════════════════════════ */
:root {
/* ─── TYPE FAMILIES ───────────────────────────────────────── */
--ct-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--ct-font-body: 'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--ct-font-arabic: 'Amiri', 'Scheherazade New', serif;
/* ─── TYPE SCALE (mobile-first) ───────────────────────────── */
--ct-fs-hero: 2.75rem; /* 44px */
--ct-fs-display: 2rem; /* 32px */
--ct-fs-title: 1.5rem; /* 24px */
--ct-fs-subtitle: 1.25rem; /* 20px */
--ct-fs-pullquote: 1.0625rem; /* 17px */
--ct-fs-lg: 0.9375rem; /* 15px */
--ct-fs-md: 0.875rem; /* 14px */
--ct-fs-sm: 0.8125rem; /* 13px */
--ct-fs-xs: 0.71875rem; /* 11.5px */
--ct-fs-label: 0.625rem; /* 10px — eyebrows */
/* Tracking */
--ct-track-hero: -0.03em;
--ct-track-title: -0.02em;
--ct-track-label: 0.25em;
/* Line heights */
--ct-lh-hero: 1.02;
--ct-lh-title: 1.15;
--ct-lh-body: 1.6;
--ct-lh-arabic: 1.75;
/* ─── COLORS — NIGHT PALETTE (default) ────────────────────── */
--ct-bg: #0a1323;
--ct-surface: #0f1b2e;
--ct-surface-2: rgba(255,255,255,0.03);
--ct-divider: rgba(255,255,255,0.08);
--ct-gold: #f0c040; /* primary accent — warm gold */
--ct-gold-soft: #f5d780; /* softer gold — Arabic, ornament */
--ct-gold-deep: #d9a828; /* darker gold — emphasis, dividers */
--ct-cream: #faf3e0; /* primary text on dark */
--ct-teal: #4ecdc4; /* secondary accent — streaks, "coming soon" */
--ct-rust: #c97640; /* tertiary — book cover, warmth */
--ct-text: #e6e9f0;
--ct-text-sec: #c8cfdd;
--ct-text-muted: #8691a8;
/* ─── SPACING ─────────────────────────────────────────────── */
--ct-space-1: 4px;
--ct-space-2: 8px;
--ct-space-3: 12px;
--ct-space-4: 16px;
--ct-space-5: 20px;
--ct-space-6: 24px;
--ct-space-8: 32px;
--ct-space-10: 40px;
--ct-space-12: 48px;
/* ─── RADII ───────────────────────────────────────────────── */
--ct-r-sm: 6px;
--ct-r-md: 8px;
--ct-r-lg: 10px;
--ct-r-xl: 14px;
--ct-r-2xl: 16px;
--ct-r-pill: 999px;
/* ─── SHADOWS ─────────────────────────────────────────────── */
--ct-shadow-card: 0 20px 40px -12px rgba(0,0,0,0.5);
--ct-shadow-book: 0 30px 50px -15px rgba(0,0,0,0.7), 0 0 0 1px rgba(240,192,64,0.25);
--ct-glow-gold: 0 0 22px -4px rgba(240,192,64,0.45);
--ct-glow-teal: 0 0 22px -4px rgba(78,205,196,0.45);
}
/* Optional light/day mode — flip palette by adding .ct-day to body */
.ct-day {
--ct-bg: #faf3e0;
--ct-surface: #ffffff;
--ct-surface-2: rgba(0,0,0,0.03);
--ct-divider: rgba(10,19,35,0.08);
--ct-cream: #0a1323;
--ct-text: #1a1a2e;
--ct-text-sec: #3a3a50;
--ct-text-muted: #6a6a80;
}
/* ═══ BASE ═══════════════════════════════════════════════════════ */
.ct, body.ct {
background: var(--ct-bg);
color: var(--ct-text);
font-family: var(--ct-font-body);
font-size: var(--ct-fs-md);
line-height: var(--ct-lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ═══ TYPOGRAPHY ═════════════════════════════════════════════════ */
.ct-hero {
font-family: var(--ct-font-display);
font-weight: 500;
font-size: var(--ct-fs-hero);
line-height: var(--ct-lh-hero);
letter-spacing: var(--ct-track-hero);
color: var(--ct-cream);
margin: 0;
}
.ct-hero em, .ct-hero-em {
font-style: italic;
font-weight: 400;
color: var(--ct-gold);
}
.ct-display {
font-family: var(--ct-font-display);
font-weight: 500;
font-size: var(--ct-fs-display);
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--ct-cream);
margin: 0;
}
.ct-title {
font-family: var(--ct-font-display);
font-weight: 500;
font-size: var(--ct-fs-title);
line-height: var(--ct-lh-title);
letter-spacing: var(--ct-track-title);
color: var(--ct-cream);
margin: 0;
}
.ct-subtitle {
font-family: var(--ct-font-display);
font-weight: 500;
font-size: var(--ct-fs-subtitle);
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ct-cream);
margin: 0;
}
.ct-pullquote {
font-family: var(--ct-font-display);
font-weight: 400;
font-style: italic;
font-size: var(--ct-fs-pullquote);
line-height: 1.5;
color: var(--ct-text-sec);
margin: 0;
}
.ct-body, .ct p {
font-family: var(--ct-font-body);
font-size: var(--ct-fs-md);
line-height: var(--ct-lh-body);
color: var(--ct-text-sec);
margin: 0;
}
.ct-body-lg { font-size: var(--ct-fs-lg); }
.ct-body-sm { font-size: var(--ct-fs-sm); }
.ct-caption { font-size: var(--ct-fs-xs); color: var(--ct-text-muted); }
.ct-label {
font-family: var(--ct-font-body);
font-weight: 800;
font-size: var(--ct-fs-label);
line-height: 1;
letter-spacing: var(--ct-track-label);
text-transform: uppercase;
color: var(--ct-gold);
margin: 0;
}
.ct-label-teal { color: var(--ct-teal); }
.ct-label-muted { color: var(--ct-text-muted); }
.ct-arabic {
font-family: var(--ct-font-arabic);
color: var(--ct-gold-soft);
direction: rtl;
line-height: var(--ct-lh-arabic);
font-size: 1.625rem; /* 26px default for verses */
margin: 0;
}
/* ═══ LAYOUT HELPERS ═════════════════════════════════════════════ */
.ct-section { padding: var(--ct-space-8) var(--ct-space-5); }
.ct-divider-hr {
height: 1px;
background: var(--ct-divider);
border: 0;
margin: var(--ct-space-6) 0;
}
.ct-divider-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--ct-gold-deep);
}
.ct-divider-ornament::before,
.ct-divider-ornament::after {
content: '';
height: 1px;
width: 40px;
background: linear-gradient(to right, transparent, var(--ct-gold-deep));
}
.ct-divider-ornament::after {
background: linear-gradient(to left, transparent, var(--ct-gold-deep));
}
/* ═══ BUTTONS ════════════════════════════════════════════════════ */
.ct-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 22px;
border-radius: var(--ct-r-lg);
border: 1px solid transparent;
font-family: var(--ct-font-body);
font-size: var(--ct-fs-md);
font-weight: 800;
letter-spacing: 0.02em;
cursor: pointer;
text-decoration: none;
transition: transform 0.08s, background 0.12s, border-color 0.12s;
}
.ct-btn:active { transform: translateY(1px); }
.ct-btn-primary {
background: var(--ct-gold);
color: #1a1a2e;
}
.ct-btn-primary:hover { background: var(--ct-gold-soft); }
.ct-btn-ghost {
background: transparent;
color: var(--ct-gold);
border-color: rgba(240,192,64,0.35);
}
.ct-btn-ghost:hover { background: rgba(240,192,64,0.08); border-color: var(--ct-gold); }
.ct-btn-quiet {
background: var(--ct-surface-2);
color: var(--ct-text-sec);
border-color: var(--ct-divider);
}
.ct-btn-quiet:hover { background: rgba(255,255,255,0.06); }
.ct-btn-teal {
background: var(--ct-teal);
color: var(--ct-bg);
}
.ct-btn-block { width: 100%; }
.ct-btn-sm { padding: 10px 14px; font-size: var(--ct-fs-sm); }
/* ═══ PILLS / BADGES ═════════════════════════════════════════════ */
.ct-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: var(--ct-r-pill);
background: rgba(240,192,64,0.1);
border: 1px solid rgba(240,192,64,0.3);
color: var(--ct-gold);
font-family: var(--ct-font-body);
font-size: var(--ct-fs-label);
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.ct-pill::before {
content: '';
width: 5px; height: 5px; border-radius: 50%;
background: var(--ct-gold);
box-shadow: 0 0 8px var(--ct-gold);
}
.ct-pill-no-dot::before { display: none; }
.ct-pill-teal {
background: rgba(78,205,196,0.1);
border-color: rgba(78,205,196,0.3);
color: var(--ct-teal);
}
.ct-pill-teal::before { background: var(--ct-teal); box-shadow: 0 0 8px var(--ct-teal); }
/* ═══ CARDS ══════════════════════════════════════════════════════ */
.ct-card {
background: var(--ct-surface);
border: 1px solid var(--ct-divider);
border-radius: var(--ct-r-2xl);
padding: var(--ct-space-5);
}
.ct-card-gold {
background: linear-gradient(180deg, rgba(240,192,64,0.12) 0%, rgba(240,192,64,0.03) 100%);
border-color: rgba(240,192,64,0.3);
}
.ct-card-teal {
background: rgba(78,205,196,0.05);
border-color: rgba(78,205,196,0.2);
}
/* ═══ INPUTS ═════════════════════════════════════════════════════ */
.ct-input {
width: 100%;
background: var(--ct-bg);
border: 1px solid var(--ct-divider);
border-radius: var(--ct-r-md);
padding: 12px 14px;
color: var(--ct-cream);
font-family: var(--ct-font-body);
font-size: var(--ct-fs-sm);
transition: border-color 0.12s, box-shadow 0.12s;
}
.ct-input:focus {
outline: none;
border-color: var(--ct-gold);
box-shadow: 0 0 0 3px rgba(240,192,64,0.12);
}
/* ═══ STARS ══════════════════════════════════════════════════════ */
.ct-stars { color: var(--ct-gold-soft); font-size: var(--ct-fs-sm); letter-spacing: 0.05em; }
/* ═══ STARFIELD BG (optional decoration) ═════════════════════════ */
.ct-starfield {
position: absolute; inset: 0; pointer-events: none;
background-image:
radial-gradient(1px 1px at 30px 80px, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 140px 140px, rgba(240,192,64,0.4), transparent),
radial-gradient(1.5px 1.5px at 220px 60px, rgba(255,255,255,0.6), transparent),
radial-gradient(1px 1px at 310px 180px, rgba(255,255,255,0.3), transparent),
radial-gradient(1px 1px at 80px 420px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 340px 340px, rgba(255,255,255,0.35), transparent),
radial-gradient(1.5px 1.5px at 200px 500px, rgba(240,192,64,0.35), transparent),
radial-gradient(1px 1px at 60px 620px, rgba(255,255,255,0.4), transparent);
background-size: 100% 700px;
background-repeat: repeat-y;
}
/* ═══ RULES (enforce these) ══════════════════════════════════════
* 1. Arabic verses/duas MUST use Amiri (--ct-font-arabic). Never a
* decorative Arabic face for Qur'anic content.
* 2. Never mix Fraunces and any other serif. Fraunces = the brand voice.
* 3. CTAs are always Nunito 800. Never Fraunces in a button.
* 4. Eyebrows/labels always: Nunito 800, 10–11px, +3px tracking, uppercase.
* 5. Body copy: Nunito 14px default. Never below 11.5px on mobile.
* 6. Pull quotes: Fraunces italic 17px — this is the brand's voice talking.
* 7. Gold (#f0c040) is the hero accent. Teal (#4ecdc4) is always secondary.
* ══════════════════════════════════════════════════════════════════ */