/* =================================================================== LIC. ZETA — SISTEMA DE TEMA (claro / oscuro) · sitio público =================================================================== Tokens SEMÁNTICOS: no redefinas --cream/--dark crudos. Mapeá cada color de tus secciones a uno de estos tokens (ver LEER-handoff.md). Mecánica: el tema se setea con . Clave de almacenamiento compartida con el portal: lz-theme =================================================================== */ /* ------------------------------------------------------------------- TEMA CLARO (por defecto) — paleta de marca actual ------------------------------------------------------------------- */ :root, [data-theme="light"]{ /* superficies */ --lz-bg: #F5F0E8; /* fondo de página (cream) */ --lz-surface: #FFFDF9; /* tarjetas / cajas (blanco cálido, NO #FFF puro) */ --lz-surface-2: #F3ECDF; /* superficie anidada / hover */ --lz-inset: #FBF7F0; /* inputs / campos hundidos */ /* franjas de sección (las que en claro son malva / cream) */ --lz-band-malva: #E4DDE8; /* manifiesto, comunidad… */ --lz-band-cream: #EBE4D6; /* patreon, bloques cálidos… */ /* texto */ --lz-text: #2B2B2B; /* cuerpo */ --lz-muted: #5E5F72; /* secundario / tenue */ --lz-heading: #1F255E; /* títulos (navy) */ --lz-heading-soft: #37429D; /* títulos en tono marca / subtítulos */ /* acentos */ --lz-accent: #37429D; /* azul principal: links, botones, activo */ --lz-accent-2: #5A66BD; /* azul soft */ --lz-accent-ink: #5A66BD; /* acento de texto (ej. itálicas del hero) */ --lz-on-accent: #FFFDF9; /* texto sobre un fondo de acento */ /* líneas / sombras */ --lz-border: #E2D8C8; /* borde cálido */ --lz-border-soft: #ECE3D4; --lz-line: rgba(31,37,94,.10); --lz-shadow: 0 8px 26px rgba(31,37,94,.10); --lz-shadow-sm: 0 1px 2px rgba(31,37,94,.06); /* ZONAS QUE SIGUEN OSCURAS EN AMBOS TEMAS (barra superior, footer) */ --lz-ink-bg: #1F255E; --lz-ink-text: #ECEAF6; --lz-ink-muted: #A6AAD0; --lz-ink-border: rgba(255,255,255,.12); color-scheme: light; } /* ------------------------------------------------------------------- TEMA OSCURO — iguala el lenguaje del portal de alumnos ------------------------------------------------------------------- */ [data-theme="dark"]{ /* superficies */ --lz-bg: #121539; /* navy profundo (= portal) */ --lz-surface: #1F254F; /* tarjetas: leve tinte violáceo, separadas del fondo */ --lz-surface-2: #29306B; /* superficie anidada / hover */ --lz-inset: #171B45; /* inputs */ /* franjas de sección: se OSCURECEN (no quedan claras) */ --lz-band-malva: #1A1B49; /* malva → violeta oscuro, sutil */ --lz-band-cream: #15173C; /* cream → casi fondo, apenas por encima */ /* texto — sin blanco puro en títulos */ --lz-text: #ECEAF6; /* off-white cálido */ --lz-muted: #A6AAD0; --lz-heading: #ECEAF6; /* títulos: off-white cálido (no #FFF crudo) */ --lz-heading-soft: #8E99F0; /* títulos en tono marca → azul brillante */ /* acentos — azul brillante para fondo oscuro */ --lz-accent: #8E99F0; --lz-accent-2: #6E7AE0; --lz-accent-ink: #A9B2FF; /* itálicas / acento de texto, más luminoso */ --lz-on-accent: #10133A; /* texto OSCURO sobre el acento brillante */ /* líneas / sombras */ --lz-border: rgba(255,255,255,.10); --lz-border-soft: rgba(255,255,255,.07); --lz-line: rgba(255,255,255,.09); --lz-shadow: 0 16px 40px rgba(0,0,0,.45); --lz-shadow-sm: 0 1px 2px rgba(0,0,0,.35); /* zonas oscuras en ambos temas: un poco MÁS oscuras que el fondo, para anclar */ --lz-ink-bg: #0D0F2C; --lz-ink-text: #ECEAF6; --lz-ink-muted: #A6AAD0; --lz-ink-border: rgba(255,255,255,.08); color-scheme: dark; } /* =================================================================== BINDINGS RECOMENDADOS Copialos a tu CSS global y adaptá los selectores a tus clases. Son ejemplos: la idea es que TODO color salga de un token. =================================================================== */ /* transición suave al cambiar de tema (respeta movimiento reducido) */ body, .lz-surface, .lz-band-malva, .lz-band-cream, .lz-ink, header, footer, section, .card{ transition: background-color .35s ease, color .25s ease, border-color .25s ease; } @media (prefers-reduced-motion: reduce){ *{ transition: none !important; } } /* base de página */ body{ background: var(--lz-bg); color: var(--lz-text); } /* títulos y cuerpo */ h1, h2, h3, h4{ color: var(--lz-heading); } .lz-heading--brand{ color: var(--lz-heading-soft); } /* título en tono marca */ .lz-muted{ color: var(--lz-muted); } em, .lz-accent-text{ color: var(--lz-accent-ink); } /* itálicas del hero, etc. */ /* enlaces */ a{ color: var(--lz-accent); } /* superficies / tarjetas — borde + sombra garantizan separación en oscuro */ .lz-surface, .card{ background: var(--lz-surface); border: 1px solid var(--lz-border); box-shadow: var(--lz-shadow-sm); } /* franjas de sección */ .lz-band-malva{ background: var(--lz-band-malva); } .lz-band-cream{ background: var(--lz-band-cream); } /* zonas oscuras siempre (barra superior + footer) */ .lz-ink{ background: var(--lz-ink-bg); color: var(--lz-ink-text); border-color: var(--lz-ink-border); } .lz-ink a{ color: var(--lz-ink-text); } .lz-ink .lz-muted{ color: var(--lz-ink-muted); } /* botones */ .lz-btn-primary{ background: var(--lz-accent); color: var(--lz-on-accent); border: none; } .lz-btn-ghost{ background: transparent; color: var(--lz-accent); border: 1.5px solid var(--lz-accent); } /* inputs */ .lz-input{ background: var(--lz-inset); color: var(--lz-text); border: 1px solid var(--lz-border); } .lz-input::placeholder{ color: var(--lz-muted); opacity: .8; } /* bordes / divisores */ .lz-border{ border-color: var(--lz-border); } hr, .lz-divider{ border: 0; height: 1px; background: var(--lz-line); } /* =================================================================== TOGGLE claro/oscuro (para el nav) — mismo lenguaje que el portal =================================================================== */ .lz-theme-toggle{ width: 56px; height: 30px; border-radius: 999px; padding: 3px; position: relative; cursor: pointer; flex: none; background: var(--lz-surface-2); border: 1px solid var(--lz-border); transition: background .25s ease, border-color .25s ease; } .lz-theme-toggle__thumb{ position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; background: var(--lz-accent); color: var(--lz-on-accent); transition: left .28s cubic-bezier(.22,.61,.36,1), background .25s ease; } [data-theme="dark"] .lz-theme-toggle__thumb{ left: 30px; } .lz-theme-toggle__thumb svg{ width: 13px; height: 13px; } .lz-theme-toggle .lz-ico-moon{ display: none; } .lz-theme-toggle .lz-ico-sun{ display: block; } [data-theme="dark"] .lz-theme-toggle .lz-ico-moon{ display: block; } [data-theme="dark"] .lz-theme-toggle .lz-ico-sun{ display: none; } .lz-theme-toggle:focus-visible{ outline: 2px solid var(--lz-accent); outline-offset: 2px; }