/* ========================================================================== CAPTAIN FUTURE — typography.css Système typographique officiel (échelle fluide en clamp) Polices chargées via Google Fonts dans le des pages : Orbitron · Rajdhani · Exo 2 · Share Tech Mono · Special Elite ========================================================================== */ /* ── Base ───────────────────────────────────────────────────────────────── */ body { font-family: var(--cf-font-body); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); font-weight: 400; line-height: 1.65; color: var(--cf-text-primary); background-color: var(--cf-primary-bg); letter-spacing: 0.01em; } /* ── Hiérarchie des titres ──────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--cf-font-heading); line-height: 1.12; font-weight: 600; letter-spacing: 0.02em; color: var(--cf-text-primary); text-wrap: balance; } h1, .t-display { font-family: var(--cf-font-display); font-weight: 900; font-size: clamp(2.5rem, 1.6rem + 4.5vw, 7.5rem); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.02; } h2, .t-h1 { font-family: var(--cf-font-display); font-weight: 800; font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3.25rem); text-transform: uppercase; letter-spacing: 0.06em; } h3, .t-h2 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.1rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } h4, .t-h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); font-weight: 600; } h5, .t-h4 { font-size: 1.125rem; font-weight: 600; } h6, .t-h5 { font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } p { max-width: 68ch; } p + p { margin-top: var(--cf-space-4); } /* ── Titre or signature du site ─────────────────────────────────────────── */ .t-gold { background: var(--cf-gradient-gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 22px rgba(255, 184, 48, 0.35)); } .t-cyan { color: var(--cf-cyan); text-shadow: 0 0 18px rgba(0, 212, 255, 0.45); } /* Sur-titre discret (eyebrow) */ .t-eyebrow { font-family: var(--cf-font-mono); font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--cf-gold); display: inline-flex; align-items: center; gap: var(--cf-space-3); } .t-eyebrow::before, .t-eyebrow::after { content: ""; display: inline-block; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--cf-border-glow-strong), transparent); } /* ── Citation pulp (textes d'ambiance, style machine à écrire) ──────────── */ .pulp-quote { font-family: var(--cf-font-pulp); font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem); line-height: 1.8; color: var(--cf-gold-light); letter-spacing: 0.02em; position: relative; padding: var(--cf-space-6) var(--cf-space-7); border-left: 3px solid var(--cf-border-glow-strong); } .pulp-quote::before { content: "«"; position: absolute; top: -0.35em; left: var(--cf-space-3); font-family: var(--cf-font-display); font-size: 4rem; color: var(--cf-border-glow); line-height: 1; } .pulp-quote cite { display: block; margin-top: var(--cf-space-4); font-family: var(--cf-font-mono); font-size: 0.8rem; font-style: normal; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cf-text-secondary); } .pulp-quote cite::before { content: "— "; } /* ── Données techniques / HUD ───────────────────────────────────────────── */ .mono, .data { font-family: var(--cf-font-mono); font-size: 0.92em; letter-spacing: 0.06em; color: var(--cf-cyan); } .data-label { font-family: var(--cf-font-mono); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cf-text-secondary); } .data-value { font-family: var(--cf-font-display); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 800; color: var(--cf-text-primary); line-height: 1.1; } /* ── Liens de contenu ───────────────────────────────────────────────────── */ .text-link { color: var(--cf-cyan); background-image: linear-gradient(var(--cf-cyan), var(--cf-cyan)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--cf-duration-base) var(--cf-ease-out-expo), text-shadow var(--cf-duration-base) ease; } .text-link:hover { background-size: 100% 1px; text-shadow: 0 0 14px rgba(0, 212, 255, 0.6); } /* ── Divers ─────────────────────────────────────────────────────────────── */ .lead { font-size: clamp(1.1rem, 1rem + 0.55vw, 1.35rem); line-height: 1.7; color: var(--cf-text-secondary); max-width: 64ch; } .small { font-size: 0.85rem; color: var(--cf-text-secondary); } .text-secondary { color: var(--cf-text-secondary); } .text-gold { color: var(--cf-gold); } .text-danger { color: var(--cf-danger); } .text-success { color: var(--cf-success); } .uppercase { text-transform: uppercase; letter-spacing: 0.1em; }