/* theme.css */ :root{ --bg: #F4F1EC; --card: #EFEAE3; --text: #2E2E2E; --muted: #6E6E6E; --accent: #6B8E6E; /* se ajustará por acto */ --border: rgba(46,46,46,0.10); --radius: 14px; --pad: 18px; --maxw: 820px; --nav-h: 64px; --nav-bg: rgba(244,241,236,0.78); --shadow-soft: 0 14px 40px rgba(46,46,46,0.12); --ease-out: cubic-bezier(.2,.8,.2,1); --ring: 0 0 0 4px rgba(107,142,110,0.18); /* --- NAV Tolkien extras --- */ --nav-parchment: rgba(245, 239, 227, 0.92); --nav-border: rgba(80, 70, 52, 0.14); --nav-active-bg: rgba(107, 142, 110, 0.22); --nav-active-border: rgba(107, 142, 110, 0.35); --ink-strong: rgba(34, 27, 16, 0.92); --ink-soft: rgba(34, 27, 16, 0.62); --nav-indicator-bg1: rgba(245, 239, 227, 0.95); --nav-indicator-bg2: rgba(107, 142, 110, 0.18); /* ===== THEMES POR ACTO (cambios visuales) ===== Se aplican con clases en : act-1 / act-2 / act-3 / act-4 / act-epilogo 5 actos para que el cambio sea más notable y "Mordor" sea el más oscuro. */ body.act-1{ /* La Comarca (luz, hogar) */ --bg: #f0f6ee; --card: #ffffff; --text: #2b2b2b; --muted: #6a6a6a; --accent: #6b8e6e; --border: rgba(46,46,46,0.10); --nav-bg: rgba(244,241,236,0.80); --shadow-soft: 0 14px 40px rgba(46,46,46,0.10); } body.act-2{ /* Eriador (más tierra, más contraste) */ --bg: #e6ddd0; --card: #f4efe6; --text: #25221d; --muted: #5a544c; --accent: #8a7b5a; --border: rgba(46,46,46,0.18); --nav-bg: rgba(242,236,227,0.78); --shadow-soft: 0 16px 44px rgba(46,46,46,0.14); } body.act-3{ /* Rivendel y Montañas (frío, serio, aún no oscuro) */ --bg: #d9e0e2; --card: #f2f5f5; --text: #1f2426; --muted: #516064; --accent: #5f7f86; --border: rgba(31,36,38,0.18); --nav-bg: rgba(242,244,244,0.78); --shadow-soft: 0 16px 44px rgba(46,46,46,0.12); } body.act-4{ /* Camino final (Hacia Mordor, tensión) */ --bg: #2b2c30; --card: #34363b; --text: #e9e6df; --muted: #bdb7ad; --accent: #7f8f84; --border: rgba(255,255,255,0.14); --nav-bg: rgba(52,54,59,0.72); --nav-parchment: rgba(52,54,59,0.90); --nav-border: rgba(255,255,255,0.12); --ink-strong: rgba(233,230,223,0.95); --ink-soft: rgba(233,230,223,0.72); --shadow-soft: 0 18px 46px rgba(0,0,0,0.35); --ring: 0 0 0 4px rgba(127,143,132,0.22); } body.act-epilogo{ /* Regreso (cálido, pergamino) */ --bg: #f6efe4; --card: #fffaf2; --text: #2a2621; --muted: #6a5f55; --accent: #bfa66b; --border: rgba(80,70,52,0.16); --nav-bg: rgba(245,239,227,0.82); --nav-parchment: rgba(255,250,242,0.92); --nav-border: rgba(80,70,52,0.16); --ink-strong: rgba(34, 27, 16, 0.92); --ink-soft: rgba(34, 27, 16, 0.62); --shadow-soft: 0 14px 40px rgba(46,46,46,0.10); } } body{ background: var(--bg); color: var(--text); font-family: ui-serif, Georgia, "Times New Roman", serif; line-height: 1.5; } .small{color:var(--muted); font-size: 0.9rem} .h1{font-size:1.7rem; margin: 6px 0 0} .h2{font-size:1.1rem; margin: 0} /* Fondo y tipografía en epílogo */ body.epilogo{ background: var(--bg); color: var(--text); } body.epilogo .card{ background: var(--card); border-color: var(--border); } body.epilogo #textoLargo{ max-width: 640px; margin: 0 auto; font-size: 1.05rem; line-height: 1.75; opacity: 0; animation: epilogoFade 2s ease forwards; } @keyframes epilogoFade{ to{ opacity:1; } } /* Mordor: un punto más oscuro que el Acto 4 */ body[data-mordor="1"]{ --bg: #141518; --card: #1e1f23; --border: rgba(255,255,255,0.10); --nav-bg: rgba(30,31,35,0.70); --nav-parchment: rgba(30,31,35,0.90); --shadow-soft: 0 20px 54px rgba(0,0,0,0.42); }