/* ============================================================ CROMAT — Sistema de tema claro / oscuro Incluir en todas las páginas: Requiere: script de init en + botón .theme-btn en el header. ============================================================ */ [data-theme="light"]{ --carbon: #f0e8da; --carbon-2: #e5dace; --hueso: #18120d; --hueso-2: #7a6655; --linea: color-mix(in oklab, #18120d 10%, transparent); } [data-theme="light"] .grain{ mix-blend-mode: multiply; opacity: .045; } body, .site-head, footer{ transition: background-color .45s cubic-bezier(.16,1,.3,1), color .45s cubic-bezier(.16,1,.3,1); } /* ---- botón tema ---- */ @keyframes theme-btn-glow{ 0%,100%{ box-shadow: 0 0 0 0 color-mix(in oklab,var(--ocre) 0%,transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in oklab,var(--ocre) 30%,transparent), 0 0 14px 3px color-mix(in oklab,var(--ocre) 18%,transparent); } } .theme-btn{ display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: none; border: 1px solid var(--linea); color: var(--hueso-2); cursor: pointer; transition: background .3s, color .3s, border-color .3s, box-shadow .3s; animation: theme-btn-glow 1.8s ease-in-out 1.2s 4; } .theme-btn:hover{ background: color-mix(in oklab, var(--hueso) 10%, transparent); color: var(--hueso); border-color: color-mix(in oklab, var(--hueso) 25%, transparent); box-shadow: 0 0 10px 2px color-mix(in oklab,var(--ocre) 22%,transparent); } .theme-btn svg{ width: 13px; height: 13px; pointer-events: none; } .theme-btn .icon-sun{ display: none; } .theme-btn .icon-moon{ display: block; } [data-theme="light"] .theme-btn .icon-sun{ display: block; } [data-theme="light"] .theme-btn .icon-moon{ display: none; } /* ---- cursor en tema claro: oscuro sin blend mode ---- */ [data-theme="light"] .cursor{ mix-blend-mode: normal; } [data-theme="light"] .cursor-ring{ mix-blend-mode: normal; border-color: color-mix(in oklab, var(--hueso) 45%, transparent); } [data-theme="light"] .cursor-ring.is-hover{ border-color: var(--hueso); } /* ---- logo CROMAT · wordmark monolineal aditivo (SVG sobre negro) ---- */ .site-head .logo{ display:inline-flex; align-items:center; } .site-head .logo-svg{ display:block; height:30px; width:auto; } @media (max-width:600px){ .site-head .logo-svg{ height:26px; } } /* tema claro: sin fondo oscuro la suma aditiva se lavaría → mezcla normal y el cuerpo (capa superior) en negro, con almagre/sage como franja cromática */ [data-theme="light"] .logo-svg use, [data-theme="light"] .hero-wordmark use{ mix-blend-mode: normal !important; } [data-theme="light"] .logo-svg use:last-of-type, [data-theme="light"] .hero-wordmark use:last-of-type{ stroke: #18120d; } /* ---- head-right (reloj + botón) ---- */ .head-right{ display: flex; align-items: center; gap: .75rem; } /* móvil: logo izq · botón tema centro · hamburguesa dcha */ @media (max-width: 860px){ .head-right{ position: absolute; left: 50%; transform: translateX(-50%); pointer-events: auto; } }