/* ===================================================================== AJUSTES VISUALES · el "panel de control" de toda la web --------------------------------------------------------------------- Tipografías, tamaños, contraste de las letras, cuadrículas... todo lo que se suele retocar está AQUÍ, por secciones. Lo que más se toca (EL NOMBRE) está lo primero, en la sección 0. Los textos (Films, Series, Commercials...), los tiempos y el color de las letras están en assets/js/ajustes.js ===================================================================== */ /* ---------- 1. TIPOGRAFÍAS ------------------------------------------- Arial viene en todos los ordenadores (no hay que cargar nada). Para usar una de Google Fonts: añade su @import aquí debajo y pon su nombre en la variable que quieras (por ejemplo en --nombre-fuente). */ @import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap"); @font-face { font-family: "Garet Heavy"; src: url("../fonts/Garet-Heavy.otf") format("opentype"); font-style: normal; font-weight: 900; font-display: swap; } @font-face { font-family: "Garet"; src: url("../fonts/Garet-Book.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "Garet"; src: url("../fonts/Garet-Heavy.otf") format("opentype"); font-style: normal; font-weight: 900; font-display: swap; } :root { --arial: Arial, "Helvetica Neue", Helvetica, sans-serif; /* ===================================================================== 0. EL NOMBRE · IDOIA ESTEBAN GALVÁN (lo primero, se toca a menudo) --------------------------------------------------------------------- TAMAÑO: 0.8rem = pequeño (como el resto) · 1rem · 1.2rem · 1.6rem… FUENTE: var(--arial) o el nombre de una fuente que hayas importado arriba, por ejemplo: "Instrument Serif", serif ESPACIO ENTRE LETRAS: 0 = normal · .08em · .12em · .3em = muy suelto ===================================================================== */ --nombre-tam: 1.15rem; --nombre-fuente: "Garet Heavy", var(--arial); --nombre-espaciado: .12em; --nombre-negrita: 900; /* Garet Heavy; inclinación en base.css */ --nombre-cursiva: italic; --nombre-transform: uppercase; --nombre-tam-movil: 1rem; /* en el móvil */ --logo-ancho: 375px; --logo-alto: 31px; --logo-ancho-movil: 212.5px; --logo-alto-movil: 18px; --logo-fondo-trazo: 0px; /* 0 = fondo negro original del SVG */ /* Las demás letras del menú (production designer, work, films, series, commercials, videoclips, contact) van todas con este tamaño */ --menu-tam: .8rem; --fuente-inicio: var(--arial); /* textos del pase del inicio */ --fuente-menu: var(--arial); /* menú (menos el nombre, que tiene la suya) */ --fuente-etiqueta: var(--arial); /* texto que sigue al ratón en las cuadrículas */ --fuente-about: var(--arial); /* página contact */ --fuente-texto: var(--arial); /* resto (botones, ficha del proyecto...) */ --fuente-titulos: "Instrument Serif", "Times New Roman", serif; /* solo laboratorio */ /* ---------- 2. INICIO (index) ---------------------------------------- El pase del inicio ya no lleva títulos: solo la imagen. Aquí se ajusta el menú que va encima de las fotos. */ --inicio-tam-nombre: var(--nombre-tam); /* nombre en el inicio */ --inicio-tam-menu: var(--menu-tam); /* production designer, work, films… */ --inicio-tam-nombre-movil: var(--nombre-tam-movil); --inicio-separacion-lineas: 1.1em; /* hueco entre nombre / production designer / work */ --inicio-separacion-columna: .55em; /* hueco entre films y series (y entre los de la derecha) */ --inicio-borde-grosor: 0; --inicio-espaciado-menu: 0.14em; /* separación entre letras del menú del inicio */ /* (solo por si algún día se vuelven a poner los títulos en el pase) */ --inicio-tam-titulo: var(--nombre-tam); --inicio-tam-titulo-movil: var(--nombre-tam-movil); --inicio-tam-datos: .66rem; --inicio-negrita-titulo: 400; /* ---------- 2b. CONTRASTE BLANCO / NEGRO ----------------------------- La capa de assets/js/diferencia.js lee la foto detrás de cada letra. En fondos claros pinta negro; en fondos oscuros pinta blanco. Blanco es el color de reserva si el navegador no permite leerla. */ --dif-letra: #FFFFFF; --dif-borde: transparent; --dif-mezcla: normal; /* ---------- 3. MENÚ EN EL RESTO DE PÁGINAS -------------------------- */ --menu-tam-nombre: var(--nombre-tam); --menu-tam-otros: var(--menu-tam); /* work, films, series, commercials, videoclips, contact */ --menu-borde-grosor: 0; --menu-mezcla: var(--dif-mezcla); --menu-color: var(--dif-letra); /* rectángulo invisible alrededor de cada enlace del menú, para poder pinchar sin dar justo en las letras (arriba/abajo e izquierda/derecha) */ --menu-zona-alto: .7em; --menu-zona-ancho: 1.6em; /* ---------- 4. CUADRÍCULAS (formato cine) ---------------------------- Formato de cada rectángulo = ancho / alto 2.39 / 1 Scope (muy alargado) 1.85 / 1 Flat (cine estándar) ← actual 16 / 9 tele (1.78) 1.5 / 1 foto Columnas = cuántos rectángulos por fila. */ --lista-formato: 1.85 / 1; /* work, films, series, commercials, videoclips */ --lista-columnas: 2; --lista-columnas-movil: 1; --proyecto-formato: 1.85 / 1; /* fotos dentro de cada proyecto */ --proyecto-columnas: 2; --proyecto-columnas-movil: 1; /* Línea entre las fotos de las parrillas (también en el gestor → pestaña Parrillas, que manda sobre esto). 0px = fotos pegadas. */ --hilo: 0px; /* grosor de la línea */ --hilo-color: #000000; /* color de la línea */ --hover-luz: .7; /* luz de las demás fotos al pasar el ratón (1 = igual) */ /* Texto que sigue al ratón (sale a las 4 del cursor): título / directed by / produced by */ --etiqueta-tam: .8rem; --etiqueta-separacion: 18px; /* distancia al cursor */ --texto-mezcla: var(--dif-mezcla); /* igual que el resto: sección 2b */ --texto-color: var(--dif-letra); /* ---------- 4b. CARTELES EN LAS REJILLAS (work, films…) --------------- El cartel ocupa todo el alto del rectángulo, a la izquierda, y todos miden lo mismo (se recortan al formato si el archivo no encaja). La portada queda detrás, apenas oscurecida; al pasar el ratón el cartel se desvanece y la portada recupera su luz, los dos a la vez y sin zoom. Qué páginas lo usan: ajustes.js → carteles. */ --cartel-formato: 70 / 100; /* cartel español 70×100 · 27 / 40 = americano */ --cartel-oscuro: .9; /* luz de la portada con el cartel encima (1 = igual) */ --t-cartel: 900ms; /* lo que tarda el cartel en irse / volver */ /* Texto encima de la portada: título / directed by … y el año abajo. Va en bloque abajo a la derecha, al ras del borde (estilo editorial). */ --cartel-texto-tam: .8rem; /* (gestor → Parrillas) */ --cartel-texto-fuente: var(--fuente-etiqueta); /* p. ej. "Instrument Serif", serif */ --cartel-texto-linea: 1.3; /* interlineado */ --cartel-texto-izq-movil: 33.33%; /* en el móvil: dónde empieza el texto (1/3 de la imagen) */ --cartel-texto-margen: .45rem; /* distancia al borde derecho y al de abajo */ --cartel-texto-abajo: var(--cartel-texto-margen); --cartel-texto-hueco: 1.3em; /* hueco entre el bloque y el año */ --cartel-texto-tam-movil: calc(var(--cartel-texto-tam) * .88); /* ---------- 4c. FRANJA DE ENLACES (final de parrillas y proyectos) --- (el gestor → pestaña Parrillas manda sobre esto) */ --franja-fondo: #000000; --franja-color: #ffffff; --franja-tam: 13px; --franja-fuente: var(--fuente-menu); /* ---------- 4d. TÍTULOS EN INICIO, PARRILLAS Y FICHAS ---------------- */ --titulo-fuente: "Garet", Arial, sans-serif; --titulo-tam: 20px; --titulo-peso: 400; --titulo-estilo: normal; --titulo-espaciado: .02em; /* ---------- 5. PÁGINA DE PROYECTO (vídeo + ficha + crew + texto) ---- */ --video-formato: 1.78; /* formato del vídeo de arriba: 1.78 = 16/9 · 1.85 = cine · 2.39 = scope */ --video-ancho: 84vw; /* ancho del tráiler centrado, con aire a los lados */ --video-inicio: clamp(112px, 15vh, 160px); --video-alto-max: calc(100svh - var(--video-inicio) - 44px); /* reproductor completo y margen negro inferior */ --proyecto-tam-titulo: 1.3rem; /* título debajo del vídeo */ --proyecto-tam-ficha: .8rem; /* directed by / produced by */ --proyecto-tam-crew: .78rem; /* lista de crew (dos columnas) */ --proyecto-tam-texto: .85rem; /* texto sobre la película */ --proyecto-ancho-texto: 620px; /* ancho de la columna de texto */ --proyecto-ancho-crew: 760px; /* ancho del bloque de crew */ /* ---------- 6. CONTACT (antes about) -------------------------------- */ --about-tam: .8rem; /* todo el texto del contact */ --about-tam-nombre: .8rem; --about-ancho: 420px; /* ancho de la columna de texto */ --about-alto-lista: 34vh; /* ---------- 7. COLORES GENERALES ------------------------------------ */ --color-fondo: #000000; --color-tinta: #f2ece2; --color-suave: #8f877c; --color-acento: #c9a36b; /* ---------- 8. TIEMPOS Y ESPACIOS ----------------------------------- */ --t-cortina: 650ms; /* fundido al cambiar de página */ --t-hover: 600ms; /* zoom/oscurecer al pasar el ratón */ --t-color: 900ms; /* reservado para cambios de color */ /* (el menú WORK y la entrada del nombre: ajustes.js → animaciones) */ --curva: cubic-bezier(.65, 0, .35, 1); --margen: clamp(16px, 2.6vw, 40px); /* (nombres antiguos, se mantienen por compatibilidad) */ --trazo-grosor: var(--inicio-borde-grosor); --trazo-color: var(--dif-borde); --inicio-tam-about: var(--menu-tam); }