/* ============================================================================ Modo oscuro + transición de revelado circular. Va en un archivo aparte a propósito: assets/css/tokens/ es copia literal del design system y conviene poder re-copiarlo desde la skill sin perder nada. Aquí solo se redefine la capa SEMÁNTICA (--surface-*, --text-*, --border-*); la escala cruda --bo-* no se toca nunca, es la paleta de marca. Clase raíz: .bo-dark (no «dark» a secas, para no chocar con plugins). ========================================================================= */ /* ============================================================================ ORDEN IMPORTANTE: los valores por defecto (claro) van ANTES de .bo-dark. `:root` y `.bo-dark` empatan en especificidad (0,1,0), así que gana el que aparezca después. Si los defaults se escriben al final, el modo oscuro deja de aplicarse y el fallo es silencioso. ========================================================================= */ /* En claro el wordmark sale de la escala cruda, igual que en el design system. */ :root { /* El brillo que recorre las siluetas mientras carga el filtro del blog: un velo sobre la superficie, no un color de marca, así que no va en tokens/. Aquí y no en theme.css porque theme.css se encola DESPUÉS de esta hoja y ganaría el valor claro también en oscuro. */ --skeleton-brillo: rgba(255, 255, 255, .72); --footer-wordmark: var(--bo-ink-820); /* El filete que separa el precio de las ventajas en la tarjeta de plan de las landings. En claro es el verde casi blanco del artboard; en oscuro, sobre la tarjeta de carbón, tiene que bajar o sería una raya brillante. */ --border-plan: var(--bo-green-50); /* El mismo filete dentro del plan destacado, que es oscuro en los dos temas: un velo crema al 20 % que no se redefine en .bo-dark. */ --border-plan-oscuro: rgba(250, 249, 246, .2); /* El mismo filete en la tarjeta apagada de la portada (Oficina virtual): #DFDBD3, un escalón por debajo del filete del sistema. */ --border-plan-apagado: var(--bo-line-200); /* Las ventajas con coste aparte dentro del plan destacado de Oficina Virtual («Reenvío por correo postal: 5 €/envío»): un gris entre el secundario y el apagado de fondo oscuro. Oscuro en los dos temas, así que tampoco se redefine en .bo-dark. */ --text-extra-oscuro: var(--bo-stone-500); /* El texto corrido sobre las tarjetas y bandas de carbón: #D5D2CB, un escalón por debajo de --text-on-dark-soft. Lo usa la tarjeta «Pruébalo tú» del índice de la entrada. Esas superficies son oscuras en los dos temas, así que tampoco se redefine en .bo-dark. */ --text-on-dark-lead: var(--bo-stone-300); /* El número de orden de los puntos numerados («01», «02»…): un escalón por debajo de --text-muted, porque es decoración oculta al lector de pantalla. En oscuro baja igual respecto a su fondo. */ --text-ordinal: var(--bo-stone-600); /* La píldora de la página actual en la cabecera de cristal. En claro es el carbón al 8 % del artboard; en oscuro el cristal ya es carbón y la píldora tiene que aclarar. */ --nav-actual: rgba(17, 17, 16, .08); /* La barra que separa los idiomas del pie: crema al 28 %. El pie es oscuro en los dos temas, así que no se redefine en .bo-dark. */ --footer-barra: rgba(250, 249, 246, .28); /* Los filetes que parten el pie en el móvil: crema al 14 %. Como la barra, el pie es oscuro en los dos temas y no se redefine en .bo-dark. */ --footer-filete: rgba(250, 249, 246, .14); --icon-filter: brightness(0); --logo-filter: grayscale(1) brightness(0); /* El único asset de marca es el wordmark BLANCO. Sobre cabecera clara se invierte, que es lo que hace el design system. En tema oscuro la cabecera de cristal ya es oscura, así que ahí NO se invierte o quedaría negro sobre negro. Sobre fotografía nunca se invierte, mande el tema que mande. */ --logo-invertir: invert(1); /* El mapa de OpenStreetMap viene en color; se dessatura para que no meta color donde el sistema no lo tiene. */ --mapa-filtro: grayscale(1) contrast(1.06); /* El filete de los controles del móvil: el teléfono y la hamburguesa de la barra en cristal, y los botones de contorno del menú. #CFCBC3 en los artboards móviles, un escalón entre el filete de la rejilla y el carbón de --border-strong, que es el de escritorio. */ --border-control: var(--bo-stone-350); } /* ----------------------------------------------------- Fichas sobre foto ---- Estos DOS NO cambian con el tema, y es a propósito. La píldora de navegación sobre el hero invierte a fondo claro con tinta oscura. Si se construye con --text-on-dark de fondo y --text-primary de texto, en modo oscuro los dos son crema y el enlace desaparece: crema sobre crema. Es el mismo motivo por el que --text-on-photo es blanco fijo — lo que se apoya sobre una fotografía no tiene tema, tiene contraste. Van en :root y NO se redefinen en .bo-dark. */ :root { --surface-photo-chip: #FAF9F6; --text-photo-chip: #111110; } .bo-dark { color-scheme: dark; /* ---- Superficies ---- La escala clara solo tiene tres carbones, insuficientes para construir una jerarquía completa en oscuro. Aquí se declaran seis niveles explícitos: la página es el más oscuro y cada nivel sube. Lo que en claro era «la banda de carbón que rompe la página» pasa a ser el nivel MÁS claro, porque en oscuro el contraste se gana subiendo, no bajando. */ --surface-page: #111110; /* fondo de página */ --surface-sunken: #0C0C0B; /* campos de formulario, por debajo */ --surface-muted: #161615; /* tarjeta apagada */ --surface-card: #1A1A18; /* tarjeta, elevada */ --surface-dark: #232321; /* banda de contraste */ --surface-dark-raised: #2B2B28; /* tarjeta sobre la banda */ /* ---- Texto ---- Los tokens --text-on-* NO se tocan: siguen describiendo «texto sobre una superficie oscura», que en modo oscuro es casi todo. Ver el aviso del final del archivo. */ --text-primary: var(--bo-cream-50); --text-secondary: var(--bo-cream-300); --text-muted: var(--bo-stone-500); --text-ordinal: var(--bo-stone-700); /* #B4341F sobre #111110 da 3,3:1 y no pasa. Este rojo, aclarado, da 5,5:1. */ --text-error: #E0654E; /* ---- Bordes ---- */ --border-default: #2A2A27; --border-strong: var(--bo-cream-300); --border-dark: #33332F; --border-plan: #2A2A27; --border-plan-apagado: #2A2A27; --border-control: #45453F; /* En claro el sistema prohíbe verde sobre crema por contraste. En oscuro el fondo ya es carbón, así que el filete de foco puede usar el acento en toda la página, no solo dentro de zonas oscuras. */ --focus-ring: var(--bo-green-500); /* ---- Superposiciones ---- El cristal de la cabecera es crema en claro: dejarlo así pintaría una barra luminosa sobre una web oscura. El hover que oscurecía ahora aclara. */ --glass-header: rgba(17, 17, 16, .86); --glass-header-mobile: rgba(17, 17, 16, .92); --overlay-hover-on-light: rgba(250, 249, 246, .08); --nav-actual: rgba(250, 249, 246, .10); /* El brillo del esqueleto del blog: en claro es un velo blanco sobre crema, aquí tiene que aclarar sobre carbón o la silueta no se movería. */ --skeleton-brillo: rgba(250, 249, 246, .10); /* Los scrims y --text-on-photo no cambian: las fotos no tienen tema. */ /* ---- Iconos de amenidades ---- Los 17 SVG de la marca son negros y el diseño los normaliza con brightness(0). En oscuro eso los dejaría invisibles: hay que invertirlos. */ --icon-filter: brightness(0) invert(1); /* Los logos de clientes se pintan en gris al 55 %. Mismo problema: en oscuro hay que invertirlos o desaparecen. */ --logo-filter: grayscale(1) brightness(0) invert(1); /* ---- Wordmark del pie ---- En claro es un carbón más claro que el fondo; en oscuro el fondo ya subió, así que sube también él para seguir leyéndose como textura. */ --footer-wordmark: #2E2E2A; /* Cabecera oscura: el wordmark blanco ya contrasta, no se toca. */ --logo-invertir: none; /* Sin invertir, el mapa se queda como un rectángulo blanco brillante en mitad de una página de carbón. Se invierte y se baja el contraste para que las calles no deslumbren. */ --mapa-filtro: grayscale(1) invert(.92) contrast(.86); } /* ------------------------------------------------ Revelado circular del tema -- Tres piezas de plataforma, sin librería: startViewTransition congela un fotograma del antes y otro del después, clip-path recorta uno de los dos, y los keyframes animan el radio. */ :root { --dur-tema: .45s; } /* Sin esto, el cross-fade nativo se suma a la animación propia y queda sucio. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* Hacia oscuro: la capa NUEVA crece encima. */ [data-bo-vt="dark"]::view-transition-new(root) { animation: bo-vt-revelar var(--dur-tema) var(--ease-out) forwards; clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%)); } /* Hacia claro: la capa VIEJA se encoge y descubre lo de abajo. */ [data-bo-vt="light"]::view-transition-old(root) { animation: bo-vt-ocultar var(--dur-tema) var(--ease-out) forwards; clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%)); } /* Por defecto la capa nueva se pinta encima. Si vamos a encoger la vieja, la nueva tiene que estar debajo o no se ve nada. */ [data-bo-vt="light"]::view-transition-new(root) { z-index: -1; } /* 150% y no 100%: el radio en porcentaje se resuelve contra una diagonal normalizada, así que un clic en una esquina necesita más del 100% para alcanzar la opuesta. `forwards` evita el parpadeo del último fotograma. */ @keyframes bo-vt-revelar { to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%)); } } @keyframes bo-vt-ocultar { to { clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%)); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ============================================================================ Aviso sobre la nomenclatura. El design system nombra varios tokens por el MODO, no por el contraste: --text-on-dark, --border-on-dark, --surface-dark. En modo oscuro esos nombres dejan de significar lo que dicen: --text-on-dark y --text-primary acaban siendo el mismo crema. Se ha optado por NO renombrarlos, para que los archivos de tokens/ sigan siendo copia literal del design system y se puedan re-copiar desde la skill. La consecuencia práctica es que --surface-dark ya no es «carbón» sino «la superficie de más contraste respecto a la página», y en oscuro es la más clara. Los bloques la usan con ese significado, así que se comportan bien en los dos temas. Si algún día el dark mode deja de ser un añadido y pasa a ser un tema de primera, lo correcto es renombrarlos a algo relativo al contraste (--text-inverse, --surface-contrast) y actualizar los bloques a la vez. ========================================================================= */