/* ========================================================================== base.css · Sistema de diseno "Editorial Dark Gold" Se carga SIEMPRE la primera: define los tokens que consume el resto. Contenido, por orden: 1. Tokens 2. Reset 3. Las cuatro capas del fondo vivo 4. Pantalla de carga Nota sobre el alcance: la aplicacion React define su propia escalera de tokens en `.md-app { --fondo, --panel, --naranja, ... }`, y esa hoja vive todavia dentro de js/app.bundle.js. Los valores de alli son ahora los mismos que los de aqui: si tocas un dorado, tocalo en los dos sitios. ========================================================================== */ /* ========================================================================== 1. TOKENS Para cambiar de marca sin romper el sistema: cambia solo los tres dorados (--gold, --gold-hi, --gold-deep) y, si hace falta, la fuente display. ========================================================================== */ :root { /* --- la aplicacion es oscura, y el navegador tiene que saberlo --------- Sin esto el documento es "claro" para Chrome, y todo lo que pinta EL y no nosotros sale en blanco: la lista que se abre al pulsar un desplegable, el calendario de las fechas, el reloj de las horas, las barras de desplazamiento internas y el autorrelleno. Se ve mal de verdad: un recuadro blanco de Windows encima de una aplicacion negra, como si fuera de otro programa. Una linea lo arregla en toda la aplicacion a la vez, no solo donde se note. */ color-scheme: dark; /* --- superficies: negros calidos, ningun gris neutro puro ------------- */ --void: #0A0908; --ink: #0F0D0B; --panel: #131110; --panel-2: #1A1714; --line: rgba(217, 178, 106, .16); /* borde con tinte de acento */ --line-soft: rgba(255, 255, 255, .07); /* --- acento ----------------------------------------------------------- */ --gold: #D9B26A; --gold-hi: #F0DCB0; --gold-deep: #8C6C33; /* --- texto ------------------------------------------------------------ */ --cream: #F4F0E8; /* texto principal */ --muted: #9C9284; /* parrafos */ --dim: #6E665C; /* metadatos */ /* --- tipografia ------------------------------------------------------- */ --serif: "Fraunces", "Iowan Old Style", Georgia, serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* --- curvas ----------------------------------------------------------- */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* por defecto en TODO hover */ --ease-soft: cubic-bezier(.25, .46, .45, .94); --ease-bounce: cubic-bezier(.34, 1.4, .64, 1); /* --- medida ----------------------------------------------------------- */ --wrap: 1240px; --pad: clamp(1.25rem, 5vw, 4rem); --sec: clamp(4.25rem, 8.5vw, 7.5rem); /* --- puntero suavizado: lo escribe el bucle rAF de js/fondo.js -------- */ --mx: 50%; --my: 40%; } /* ========================================================================== 2. RESET ========================================================================== */ html, body { margin: 0; padding: 0; background: var(--void); color: var(--cream); } /* clip y no hidden: `hidden` rompe position:sticky, y el menu lateral de la aplicacion es sticky. */ body { overflow-x: clip; min-height: 100vh; } #raiz { min-height: 100vh; position: relative; } /* ========================================================================== 3. EL FONDO VIVO · cuatro capas Hijos directos de a proposito: `position:fixed` dentro de un padre con `transform` deja de ser fijo, y la aplicacion transforma contenedores. El bucle rAF solo escribe --mx y --my en :root; estas tres capas de CSS reaccionan solas. Dos custom properties moviendo tres capas: barato. ========================================================================== */ .capa { position: fixed; inset: 0; pointer-events: none; } /* -4 · aurora + particulas, dibujadas en canvas -------------------------- */ #aurora { z-index: -4; width: 100%; height: 100%; opacity: .55; } /* -3 · reticula de 72px, enmascarada con un radial en el puntero ---------- */ #reticula { z-index: -3; background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(560px circle at var(--mx) var(--my), rgba(0, 0, 0, .85), transparent 72%); mask-image: radial-gradient(560px circle at var(--mx) var(--my), rgba(0, 0, 0, .85), transparent 72%); opacity: .5; } /* -2 · vineta: oscurece los bordes y deja un halo tenue del acento -------- */ #vineta { z-index: -2; background: radial-gradient(900px circle at var(--mx) var(--my), rgba(217, 178, 106, .05), transparent 60%), radial-gradient(120% 90% at 50% 0%, transparent 35%, rgba(10, 9, 8, .55) 100%); } /* -1 · grano: feTurbulence en un SVG embebido, en overlay ----------------- */ #grano { z-index: -1; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================== 4. PANTALLA DE CARGA Monograma en display y una linea de 132px donde barre un degradado del acento. Triple red de seguridad para que nunca se quede pegada: la quita el JS al montar React, la tapa esta animacion a los 4s si el JS falla, y `pointer-events:none` desde el primer momento para que jamas bloquee. ========================================================================== */ #cargando { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 22px; background: var(--void); pointer-events: none; animation: cargandoSeguridad .01s 4s forwards; } #cargando .monograma { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 7vw, 4.2rem); letter-spacing: -.025em; line-height: 1; color: var(--cream); } #cargando .monograma em { font-style: italic; color: var(--gold); } #cargando .rotulo { font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); } #cargando .barra { width: 132px; height: 1px; background: var(--line-soft); overflow: hidden; } #cargando .barra::after { content: ""; display: block; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: cargandoBarrido 1.15s var(--ease-soft) infinite; } @keyframes cargandoBarrido { from { transform: translateX(-100%); } to { transform: translateX(330%); } } @keyframes cargandoSeguridad { to { opacity: 0; visibility: hidden; } } /* Al montar, React marca el y la carga se va con una transicion. */ .montado #cargando { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out), visibility .5s; } /* ========================================================================== 5. PANTALLA DE ACCESO La pinta js/nube.js cuando hay guardado compartido y todavia no hay sesion. Mientras esta a la vista, la aplicacion ni siquiera se ha descargado: los datos no llegan al navegador sin sesion. ========================================================================== */ #acceso { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--pad); background: var(--void); opacity: 0; transition: opacity .45s var(--ease-out); } #acceso.visible { opacity: 1; } #acceso .acceso-win { width: min(380px, 100%); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; padding: clamp(26px, 5vw, 38px); background: var(--panel); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); } #acceso .acceso-marca { font-family: var(--serif); font-weight: 300; font-size: 2.4rem; line-height: 1; letter-spacing: -.025em; color: var(--cream); } #acceso .acceso-marca em { font-style: italic; color: var(--gold); } #acceso .acceso-rotulo { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 10px 0 30px; } #acceso .acceso-lbl { font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } #acceso input { font-family: var(--sans); font-size: 15px; color: var(--cream); background: var(--ink); border: 1px solid var(--line-soft); border-radius: 8px; padding: 11px 13px; margin-bottom: 18px; transition: border-color .3s var(--ease-out); } #acceso input:hover { border-color: var(--line); } #acceso input:focus { outline: none; border-color: var(--gold); } #acceso input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } #acceso .acceso-bt { font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 6px; padding: 12px 18px; border: none; border-radius: 999px; color: #17130C; background: linear-gradient(140deg, var(--gold-hi), var(--gold) 52%, #C29B54); box-shadow: 0 10px 30px -14px rgba(217, 178, 106, .7); transition: box-shadow .32s var(--ease-out); } #acceso .acceso-bt:hover { box-shadow: 0 16px 40px -14px rgba(217, 178, 106, .7); } #acceso .acceso-bt:disabled { opacity: .6; cursor: default; box-shadow: none; } #acceso .acceso-bt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } #acceso .acceso-error { min-height: 1.2em; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #D97B6C; } #acceso .acceso-pie { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--dim); } /* ========================================================================== 6. AVISO DE VERSION NUEVA Aparece cuando el service worker ha descargado una version y espera. No recarga solo: un parte a medio rellenar no se tira sin permiso. ========================================================================== */ #hay-version { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .85); font-family: var(--sans); font-size: 13px; color: var(--cream); transform: translate(-50%, 20px); opacity: 0; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } #hay-version.visible { opacity: 1; transform: translate(-50%, 0); } #hay-version button { font: inherit; font-weight: 600; cursor: pointer; padding: 7px 16px; border: none; border-radius: 999px; color: #17130C; background: linear-gradient(140deg, var(--gold-hi), var(--gold) 52%, #C29B54); } #hay-version button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }