/* ============================================================ IBERO AFRICAN HUNTS — Sistema de tema 3 estilos visuales conmutables (data-style en ) Bandas claras/oscuras alternadas con tokens semánticos. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Marcellus&family=Mulish:wght@300;400;500;600;700;800&display=swap'); :root{ /* ---- Constantes de marca (del logotipo) ---- */ --brand-taupe: #9e8c73; --brand-taupe-2: #b4a48c; --brand-deep: #6b5836; /* tono oliva del subtítulo */ --brand-ink: #15120d; --brand-cream: #f4efe6; --brand-sand: #e8dfcd; /* fuentes — estilo Natural fijado */ --font-display: 'Marcellus', Georgia, serif; --font-caps: 'Marcellus', Georgia, serif; --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ritmo */ --maxw: 1280px; --gutter: clamp(20px, 5vw, 72px); --radius: 3px; --shadow: 0 18px 50px -22px rgba(20,16,10,.45); --ease: cubic-bezier(.22,.61,.36,1); } /* ===================== ESTILO 1 — Lujo editorial (claro) ===================== */ html[data-style="editorial"]{ --page-bg: var(--brand-cream); --accent: #9e8c73; --accent-strong: #6b5836; --accent-contrast:#fffaf2; --bl-bg:#f6f2ea; --bl-surface:#ffffff; --bl-text:#1d180f; --bl-muted:#6f6655; --bl-line:#e3dac9; --bd-bg:#171310; --bd-surface:#211b15; --bd-text:#f3ece0; --bd-muted:#b3a991; --bd-line:#352c22; --hero-tint: linear-gradient(180deg, rgba(20,16,10,.30), rgba(20,16,10,.72)); } /* ===================== ESTILO 2 — Cinematográfico (oscuro) ===================== */ html[data-style="cinematic"]{ --page-bg:#100d0a; --accent: #c2ac8c; --accent-strong: #d8c4a3; --accent-contrast:#100d0a; --bl-bg:#1a1611; --bl-surface:#221c16; --bl-text:#f1e9db; --bl-muted:#a99c84; --bl-line:#352b21; --bd-bg:#0c0a08; --bd-surface:#15110d; --bd-text:#f6efe2; --bd-muted:#9d9079; --bd-line:#241d16; --hero-tint: linear-gradient(180deg, rgba(8,6,4,.45), rgba(8,6,4,.85)); } /* ===================== ESTILO 3 — Clásico natural (pergamino) ===================== */ html[data-style="natural"]{ --page-bg:#ece3d2; --accent: #6b5836; --accent-strong: #6b5836; --accent-contrast:#f7f1e4; --bl-bg:#efe7d7; --bl-surface:#f8f3e8; --bl-text:#2f2618; --bl-muted:#6c5d44; --bl-line:#d8cab0; --bd-bg:#2b2417; --bd-surface:#352c1c; --bd-text:#f0e7d3; --bd-muted:#bcab8c; --bd-line:#473b27; --hero-tint: linear-gradient(180deg, rgba(36,28,16,.34), rgba(36,28,16,.74)); } /* ===================== Resolución de bandas ===================== */ /* Cada .band hereda un par de tokens; .band.dark voltea a la versión oscura */ .band{ --bg: var(--bl-bg); --surface: var(--bl-surface); --text: var(--bl-text); --muted: var(--bl-muted); --line: var(--bl-line); background: var(--bg); color: var(--text); } .band.dark{ --bg: var(--bd-bg); --surface: var(--bd-surface); --text: var(--bd-text); --muted: var(--bd-muted); --line: var(--bd-line); }