/* Theme Name: Silverscreen Child Theme URI: https://silverscreen.qodeinteractive.com Description: A child theme of Silverscreen Theme Author: Edge Themes Author URI: https://qodeinteractive.com Version: 1.0.0 Template: silverscreen */ /* ========================================================================== Tipografia: Ancizar Serif ========================================================================== */ /* Ancizar Serif, con licencia SIL Open Font, alojada en el propio servidor. No se enlaza desde Google Fonts: asi no se avisa a un tercero de quien visita la web -que en un sitio espanol es el problema de proteccion de datos del que veniamos huyendo- y ademas carga antes. Son fuentes VARIABLES: un solo archivo cubre todo el rango de peso, de ahi el rango en font-weight. Se declaran los dos subconjuntos por separado con su unicode-range, para que el navegador solo descargue el que necesite: con texto en espanol basta "latin" y "latin-ext" ni se pide. El eje de peso NO baja de 300, comprobado midiendo: pedirle 200 o 100 pinta exactamente lo mismo que 300. Por eso se declara 300-900 y no 100-900, para no prometerle al navegador pesos que no existen. La cursiva tambien es un archivo aparte, asi que solo se descarga en las paginas que la usan de verdad: 29 KB que no paga quien no la ve. */ @font-face { font-family: "Ancizar Serif"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fuentes/ancizar-serif-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Ancizar Serif"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("fuentes/ancizar-serif-latin-wght-italic.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Ancizar Serif"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fuentes/ancizar-serif-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Ancizar Serif"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("fuentes/ancizar-serif-latin-ext-wght-italic.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== Rejilla de talentos (Home, Actores, Actrices) ========================================================================== */ /* El tema saca las fotos con su proporcion original, asi que la rejilla queda dentada: una foto vertical mide el doble que una apaisada. Recortamos todas a cuadrado desde el navegador, sin tocar los archivos originales. object-position controla que parte de la foto se conserva al recortar. En retratos la cara suele estar en la mitad superior, asi que anclamos arriba; si alguna foto queda mal encuadrada, se ajusta ese valor. */ /* Los selectores van encadenados hasta "article" a proposito: el tema fija height:auto con esa misma profundidad y, a igualdad de peso, ganaria el. */ .edgtf-ptf-standard .edgtf-portfolio-list-holder article .edgtf-item-image-holder { position: relative; overflow: hidden; aspect-ratio: 1 / 1; } .edgtf-ptf-standard .edgtf-portfolio-list-holder article .edgtf-item-image-holder img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* La tarjeta entera lleva a la ficha del talento -------------------------------------------------------------------------- El tema solo estira el enlace a la ficha en los diseños gallery, pinterest y masonry. En "standard" ese enlace se imprime vacio y sin dimensiones, y encima de la foto coloca una lupa que abre la imagen suelta en un visor. Resultado: pinchar una tarjeta abria la foto, no el perfil. Se retira la lupa y se estira el enlace sobre toda la tarjeta. */ .edgtf-ptf-standard .edgtf-portfolio-list-holder article { position: relative; } .edgtf-ptf-standard .edgtf-portfolio-list-holder article .edgtf-portfolio-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; } .edgtf-ptf-standard .edgtf-portfolio-list-holder article .edgtf-portfolio-lightbox { display: none; } /* La lupa era la unica respuesta al pasar el raton. La sustituye el tinte de marca, mas abajo en esta hoja. */ /* ========================================================================== Logotipo de la cabecera ========================================================================== */ /* El tema imprime su logotipo como tres PNG suyos y no ofrece ningun filtro para ese marcado, asi que se ocultan y se pinta el del cliente. Ademas escribe un "height" en linea sobre el enlace, de ahi el !important. */ /* El logotipo son dos piezas: la marca (el monigote con cabeza de camara) y el texto. La marca se escala al alto del texto y va delante, separada por un hueco fijo. El texto en SVG -vectorial, nitido a cualquier tamano- y la marca en PNG con transparencia, convertida desde el JPG original, que venia con fondo gris y en la cabecera blanca habria dejado un recuadro. */ .edgtf-logo-wrapper a, .edgtf-mobile-logo-wrapper a { display: flex; align-items: center; gap: 12px; width: auto; height: 39px !important; max-height: none !important; background: none; text-indent: -9999px; overflow: hidden; transition: opacity 0.2s ease; } /* La marca. Su proporcion es 0.59, de ahi el ancho para 39px de alto. */ .edgtf-logo-wrapper a::before, .edgtf-mobile-logo-wrapper a::before { content: ""; display: block; flex: 0 0 auto; width: 23px; height: 39px; background: url("marca.png") no-repeat center; background-size: contain; } /* El texto. PRUEBA: version con mas grosor (logotipo-grueso.svg). Para volver a la de antes, basta con cambiar el nombre del archivo y el ancho a 170px. El ancho no es un capricho: los dos archivos estan dibujados en la misma rejilla -15 unidades de alto, el trazo arrancando a la misma altura-, pero el grueso mide 72 unidades de ancho frente a 66. Con "contain" la imagen se ajusta al lado que primero topa, que aqui es el ancho, asi que dejando la caja en 170px el rotulo nuevo saldria MAS PEQUENO en vez de mas grueso. 185px es lo que mantiene la letra exactamente igual de alta que antes. */ .edgtf-logo-wrapper a::after, .edgtf-mobile-logo-wrapper a::after { content: ""; display: block; flex: 0 0 auto; width: 185px; height: 39px; background: url("logotipo-grueso.svg") no-repeat left center; background-size: contain; } .edgtf-logo-wrapper a img, .edgtf-mobile-logo-wrapper a img { display: none; } .edgtf-logo-wrapper a:hover, .edgtf-mobile-logo-wrapper a:hover { opacity: 0.6; } /* En la cabecera movil el conjunto va centrado. */ .edgtf-mobile-logo-wrapper a { justify-content: center; margin: 0 auto; } /* ========================================================================== Ficha de talento ========================================================================== */ /* El curriculum venia con el espaciado invertido: cada titulo de la filmografia es un parrafo y el tema los separa 25px, mientras que los encabezados de seccion (CINE, TELEVISION, TEATRO) no tenian margen alguno. Resultado: una lista suelta y sin grupos visibles. Aqui se aprieta la lista y se separan las secciones. */ /* Red de seguridad para el ancho de la columna de texto. El tema congela ese ancho con JavaScript —info.css('width', info.width())— para que no baile cuando la columna se queda fija al hacer scroll. Si ese calculo llegara a correr antes de que el navegador haya medido la columna, congelaria un cero y el texto se partiria palabra por palabra. No se fija el ancho: eso romperia el comportamiento fijo, porque al pasar a position:fixed los porcentajes dejan de referirse a la columna. Solo se pone un minimo, que en funcionamiento normal nunca entra en juego. */ .split-screen .edgtf-portfolio-info-holder { min-width: 280px; } /* El nombre del talento, que preside la columna derecha. El tema lo saca a 22px, en mayusculas y con las letras muy separadas, con lo que pesaba menos que los encabezados del curriculum que van debajo. Aqui manda el nombre. */ .single-portfolio-item .edgtf-portfolio-title { font-size: 42px; font-weight: 700; line-height: 1.05; text-transform: none; letter-spacing: -0.01em; margin: 0 0 28px; } /* El curriculum: los apartados y sus lineas. * * Los selectores ya no pasan por .wpb_text_column. Ese contenedor lo ponia el * constructor visual cuando el curriculum se escribia en el editor; desde que * son bloques, el marcado lo genera el tema hijo y aquellas reglas dejaron de * alcanzarlo sin que se notara: las lineas se quedaron con los 25px de margen * que el tema le da a cualquier parrafo, de ahi el aire enorme entre una y * otra. */ /* Los apartados -Cine, Television...- en semibold y sin mayusculas forzadas: se ven tal y como se escriban en el panel. */ .single-portfolio-item .edgtf-portfolio-content h4 { font-size: 22px; font-weight: 600; line-height: 1.3; text-transform: none; letter-spacing: 0; margin: 26px 0 8px; } /* El primer apartado no lleva el aire de arriba. Antes bastaba con "h4:first-child" porque todo colgaba suelto del mismo padre; ahora cada apartado va en su caja, asi que hay que decir cual es la primera. */ .single-portfolio-item .edgtf-portfolio-content .st-ficha-bloque:first-child h4 { margin-top: 0; } /* Cada linea del curriculum, con 4px de separacion. */ .single-portfolio-item .edgtf-portfolio-content p { font-size: 20px; line-height: 1.35; margin: 0 0 4px; } /* Y la ultima linea del ultimo apartado no lleva el de abajo. Mismo motivo. */ .single-portfolio-item .edgtf-portfolio-content .st-ficha-bloque:last-child p:last-child { margin-bottom: 0; } /* Separacion entre el curriculum y la ficha tecnica (idiomas, altura...). */ .single-portfolio-item .edgtf-portfolio-info-item + .edgtf-portfolio-info-item { margin-top: 6px; } .single-portfolio-item .edgtf-portfolio-info-item.edgtf-content-item { margin-bottom: 30px; } /* ========================================================================== Identidad: tipografia serif y texto en negro ========================================================================== */ /* El tema viene con Open Sans para todo y Six Caps (ultracondensada) para los titulos grandes, ademas de textos en gris (#606060 el cuerpo, #303030 los titulos). Aqui se pasa a una serif y a negro. La serif es una pila del sistema, sin fuentes de Google, por dos motivos: carga instantanea y ningun aviso al servidor de Google, que en un sitio espanol evita el problema de proteccion de datos que tienen las fuentes servidas desde fuera. */ :root { --st-serif: "Ancizar Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --st-negro: #111111; --st-negro-fuerte: #000000; } body, p, li, td, input, textarea, select, button, .edgtf-main-menu > ul > li > a, .edgtf-mobile-nav a, h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .edgtf-item-title, .edgtf-portfolio-title, .edgtf-logo-wrapper a::after { font-family: var(--st-serif); } body, p, li, td { color: var(--st-negro); } h1, h2, h3, h4, h5, h6, .edgtf-item-title, .edgtf-item-title a, .edgtf-portfolio-title, .edgtf-logo-wrapper a::after { color: var(--st-negro-fuerte); } /* El menu, en negro; el acento se reserva para la seccion activa. El cuerpo y el grosor van mas abajo, en el bloque del ancho de la cabecera. */ .edgtf-main-menu > ul > li > a { color: var(--st-negro); } /* El nombre bajo cada tarjeta. El tema lo saca a 12px en mayusculas, que en una serif se queda en un renglon timido debajo de una foto grande. Lo que le faltaba era cuerpo mas que grosor: en caja baja y a 26px pesa de verdad. El tema pone las mayusculas tambien en el enlace de dentro, asi que hay que quitarselas a los dos. */ .edgtf-ptf-standard .edgtf-item-title, .edgtf-ptf-standard .edgtf-item-title a { font-size: 26px; font-weight: 700; line-height: 1.3; text-transform: none; letter-spacing: 0.01em; } /* ========================================================================== Menu: refuerzo de la seccion activa ========================================================================== */ /* Las secciones van en regular y la activa en semibold. La diferencia se nota ahora de verdad: Ancizar Serif es variable de 100 a 900, asi que ambos pesos son trazos dibujados y no aproximaciones del navegador, que es lo que pasaba con la serif del sistema que usabamos antes. Debajo del texto, una barrita de 16x4px a 4px de distancia. Toma el color por currentColor, no un valor fijo: asi lo hereda del enlace activo, que ya va con el acento, y no se queda desfasado cuando se regenere acento.css con otro color. */ /* La seccion activa NO cambia de grosor: se queda en el mismo semibold que las demas. Con el cuerpo ya en 24 la negrita encima resultaba tosca, y ademas sobra: la seccion en la que estas se distingue por el color de marca y por la barrita de debajo, que son senales suficientes y mas discretas. */ /* El tema envuelve el texto en .edgtf-item-outer con overflow:hidden, para su efecto al pasar el raton, y ese recorte se comia la barrita. Se destapa solo en la entrada activa: dentro no hay ninguna animacion que dependa de el. */ .edgtf-main-menu > ul > li.current-menu-item > a .edgtf-item-outer { overflow: visible; } .edgtf-main-menu > ul > li.current-menu-item > a .edgtf-item-text { position: relative; display: inline-block; } .edgtf-main-menu > ul > li.current-menu-item > a .edgtf-item-text::after { content: ""; position: absolute; top: calc(100% + 4px); left: 50%; width: 16px; height: 4px; margin-left: -8px; border-radius: 2px; /* la mitad del alto: extremos completamente redondos */ background-color: currentColor; } /* ========================================================================== Cabecera de tableta y movil ========================================================================== */ /* El tema ya coloca la hamburguesa a la izquierda y el logotipo centrado en la pagina -con el logotipo en un contenedor absoluto que ocupa todo el ancho-, asi que esa parte se deja como viene y no se toca la maquetacion. El "display" hay que repetirlo aqui. Mas arriba el enlace del logotipo se pone en flex para dejar la marca y el rotulo en fila, pero el tema declara `.edgtf-mobile-header .edgtf-mobile-logo-wrapper a {display:block}`, que apunta a un selector mas concreto y gana. El resultado era que en movil las dos piezas se apilaban y, como el enlace mide 39px de alto y recorta lo que sobra, solo se veia la marca: el rotulo quedaba debajo, fuera de la caja. El ancho tambien: sin el, el enlace se queda con el del rotulo -170px- y le faltan los 35 de la marca y su hueco. Y el centrado, porque el enlace es flex y por defecto alinearia a la izquierda. */ .edgtf-mobile-header .edgtf-mobile-logo-wrapper a { display: flex; justify-content: center; width: max-content; max-width: 100%; } /* ========================================================================== Noticias ========================================================================== */ /* El listado firma cada noticia con "By admin". En las notas de una agencia el autor no aporta -las firma la casa- y ese "admin" delata que la web esta a medio montar. Se retira y queda solo la fecha. */ .edgtf-blog-holder .edgtf-post-info-author, .edgtf-bmg-post-info .edgtf-post-info-author { display: none; } /* ========================================================================== Tinte de marca al pasar el raton ========================================================================== */ /* Un unico efecto para todo el sitio: la foto se tine con el color de marca en modo multiply. Sobre imagenes en blanco y negro mantiene las sombras y lleva los claros al naranja, y a diferencia de un velo plano deja ver la foto. El color sale de la variable que genera acento.css, asi que sigue al color de marca si se regenera la paleta. */ /* --- Rejillas de talento: Home, Actores y Actrices ----------------------- */ .edgtf-ptf-standard .edgtf-portfolio-list-holder article .edgtf-item-image-holder::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--st-acento); mix-blend-mode: multiply; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .edgtf-ptf-standard .edgtf-portfolio-list-holder article:hover .edgtf-item-image-holder::after { opacity: 1; } /* --- Mosaico de Noticias ------------------------------------------------- */ /* El tema tapaba aqui la foto con un velo plano al 85% de opacidad. Se retira y se pone el mismo tinte que en las rejillas, sobre la imagen y no sobre el bloque de texto, para no tenir tambien el titular. */ .edgtf-blog-holder.edgtf-blog-type-masonry-gallery article .edgtf-post-image { position: relative; } .edgtf-blog-holder.edgtf-blog-type-masonry-gallery article .edgtf-post-image::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--st-acento); mix-blend-mode: multiply; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 1; } .edgtf-blog-holder.edgtf-blog-type-masonry-gallery article:hover .edgtf-post-image::after { opacity: 1; } .edgtf-blog-holder.edgtf-blog-type-masonry-gallery article:hover .edgtf-post-text { background-color: transparent; } /* El tema apaga al pasar el raton el degradado oscuro que hay bajo el titular. Con el tinte hace mas falta que antes, asi que se mantiene. */ .edgtf-blog-holder.edgtf-blog-type-masonry-gallery article:hover .edgtf-post-text:after { opacity: 1; } /* ========================================================================== Formulario de contacto ========================================================================== */ /* A todo el ancho, un campo para un correo de treinta caracteres medía casi dos mil pixeles: el hueco no dice nada de lo que se espera dentro, y en pantalla ancha obliga a recorrer toda la linea para releer lo escrito. Se limita a 560px, que a 14px son unos 65-70 caracteres por linea, dentro del ancho de lectura comodo. Queda alineado a la izquierda con el texto de arriba, en una sola columna: los formularios a doble columna se rellenan peor porque el recorrido del ojo deja de ser vertical. */ .wpcf7 { max-width: 560px; margin-left: auto; margin-right: auto; } /* La pagina de contacto ya no lleva formulario: el ancho lo fija el propio bloque del equipo, mas abajo en esta hoja. */ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"], .wpcf7 textarea, .wpcf7 select { width: 100%; box-sizing: border-box; } /* El area de mensaje venia con una altura desproporcionada para lo que se pide: un mensaje breve. Se recorta y se deja que el visitante la estire. */ .wpcf7 textarea { height: 150px; resize: vertical; } /* Separacion entre campos, que el tema deja al aire. */ .wpcf7 label { display: block; margin-bottom: 22px; } /* ========================================================================== Menu movil a pantalla completa ========================================================================== */ /* El tema despliega el menu como una lista que empuja el contenido hacia abajo. Aqui pasa a ser un velo del color de marca que cubre la pantalla, con las secciones en vertical y centradas. El estado abierto viene de la clase que pone menu-movil.js, no del display en linea de jQuery. Y el velo no se apaga con display:none sino con visibility y opacidad: con display no hay transicion de salida posible, porque el elemento deja de existir de un fotograma al siguiente, y esa era la razon de que el cierre se sintiera de un tiron. La curva es una salida suave -rapida al principio y frenando al final-, que es como se mueven las cosas cuando uno espera que se muevan solas. */ @media only screen and (max-width: 1024px) { /* La cabecera queda por encima del velo: su hamburguesa es tambien el boton de cerrar, y en negro sobre el naranja se lee de sobra. */ .edgtf-mobile-header .edgtf-mobile-header-holder { position: relative; z-index: 2; } .edgtf-mobile-header .edgtf-mobile-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; /* descuenta las barras del navegador en movil */ z-index: 1; margin: 0; padding: 0; border: none; background-color: var(--st-acento); overflow-y: auto; overscroll-behavior: contain; /* Cerrado. Se deja en display:block -ganandole al display:none del tema- y se apaga con visibilidad, para poder animar la salida. La visibilidad cambia de golpe, pero al final de la transicion: asi el velo no intercepta pulsaciones mientras se desvanece. */ display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.5s; } .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-nav { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s; } /* Las secciones se centran en el hueco que queda DEBAJO de la cabecera, no en la pantalla entera. Centradas en la pantalla entera quedaban siempre un poco altas -la cabecera se come la parte de arriba y no cuenta para el centro-, y con poco alto llegaban a meterse por debajo del logotipo. El alto lo mide el guion del menu al abrirlo y lo deja en esa variable, porque cambia con el ancho de la pantalla. El 108 es solo el recambio por si la variable no llegara: es lo que mide hoy en un movil. */ .edgtf-mobile-header .edgtf-mobile-nav .edgtf-grid { display: flex; align-items: center; justify-content: center; min-height: 100%; width: 100%; padding-top: var(--st-cabecera-alto, 108px); } .edgtf-mobile-header .edgtf-mobile-nav ul { width: 100%; margin: 0; padding: 0; list-style: none; text-align: center; } .edgtf-mobile-header .edgtf-mobile-nav ul li { border: none; width: 100%; } /* Las secciones entran escalonadas, cada una un pelin despues de la anterior y subiendo un poco. Es lo que hace que el menu parezca que se despliega en vez de aparecer entero de una vez. Al cerrar no hay retardo: se van las cuatro a la vez y rapido, porque quien cierra ya ha decidido y esperar a una animacion cansa. */ .edgtf-mobile-header .edgtf-mobile-nav ul li a { opacity: 0; transform: translateY(12px); transition: opacity 0.26s ease-out, transform 0.26s ease-out; } .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-nav ul li a { opacity: 1; transform: none; transition: opacity 0.55s ease-out, transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1); } .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-nav ul li:nth-child(1) a { transition-delay: 0.15s; } .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-nav ul li:nth-child(2) a { transition-delay: 0.24s; } .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-nav ul li:nth-child(3) a { transition-delay: 0.33s; } .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-nav ul li:nth-child(4) a { transition-delay: 0.42s; } .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-nav ul li:nth-child(5) a { transition-delay: 0.51s; } .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-nav ul li:nth-child(6) a { transition-delay: 0.60s; } .edgtf-mobile-header .edgtf-mobile-nav ul li a { display: block; padding: 14px 20px; border: none; font-size: 26px; line-height: 1.3; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--st-negro); } /* El boton no cambia de color al pulsarlo. El tema le pone un dorado en :hover. En un movil el :hover no existe de verdad: al tocar, el navegador lo deja puesto hasta que se toca en otra parte, asi que el icono se quedaba tenido despues de abrir o cerrar el menu. Se fija el negro en los tres estados. El foco de teclado no se pierde: se marca aparte con :focus-visible, que solo salta al navegar con el tabulador y no al tocar con el dedo. Quitar la marca de foco a secas dejaria sin rastro visible a quien no usa raton y no sabria donde esta. */ .edgtf-mobile-header .edgtf-mobile-menu-opener a, .edgtf-mobile-header .edgtf-mobile-menu-opener a:hover, .edgtf-mobile-header .edgtf-mobile-menu-opener a:focus, .edgtf-mobile-header .edgtf-mobile-menu-opener a:active { color: var(--st-negro); } .edgtf-mobile-header .edgtf-mobile-menu-opener a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* El aspa se queda del mismo negro que el resto de la cabecera. Estuvo en blanco, con la idea de que al pasar del fondo blanco al velo de color pedia invertirse. Se veia velada, y no era una impresion: blanco sobre el azul de marca da 2,4:1, por debajo de cualquier minimo legible. En negro da 7,22:1, y ademas hace juego con el logotipo y los iconos de redes, que estan justo al lado y siempre fueron negros. */ /* --- El area pulsable del boton --- */ /* Medida, el enlace ocupaba 22 px de ancho por 100 de alto: se quedaba corto de ancho hasta para el minimo. Las WCAG 2.2 piden 24x24 (criterio 2.5.8, nivel AA) y 44x44 en el nivel AAA, que es ademas lo que recomienda Apple para el dedo. Queda un cuadrado de 44x44 centrado en la barra. De alto sobraba -los 100 de la barra entera-, pero un blanco pulsable que va de arriba abajo se come pulsaciones que no eran para el y deja un recuadro de foco alto y raro al navegar con teclado. Arranca pegado al canal lateral, asi que ese es el aire que queda hasta el borde de la pantalla. */ /* El aire de los lados lo ponia .edgtf-grid con un margen del 10%, o sea 37,5px en un movil de 375 pero solo 32 en uno de 320 y 43 en uno de 430: cuanto mas estrecha la pantalla, menos aire, que es justo al reves de lo que conviene. Se cambia por 24px fijos a cada lado, iguales en cualquier telefono, y el boton se apoya en ese canal en vez de salirse de el. */ /* Y 16px por arriba, para que el logotipo no quede pegado al borde de la pantalla. Menos que los 24 de los lados, y a proposito: arriba el aire lo completa el alto minimo de la fila. Va sobre la rejilla de la BARRA y no sobre .edgtf-grid a secas, que es la clase que usa tambien el velo del menu abierto: alli el aire de arriba se calcula con el alto de la cabecera y sumarle esto lo descentraria. */ .edgtf-mobile-header .edgtf-mobile-header-holder .edgtf-grid { padding-top: 16px; } .edgtf-mobile-header .edgtf-grid { /* La rejilla del tema lleva ancho fijo y se centraba con los margenes. Al quitarselos hay que darle el ancho completo, o se queda pegada a la izquierda y con ella el logotipo, que va centrado dentro. */ width: auto; max-width: none; box-sizing: border-box; margin-left: 0; margin-right: 0; padding-left: 24px; padding-right: 24px; } /* El logotipo a la izquierda y el boton a la derecha. La fila pasa a flex y el boton se empuja con un margen automatico, que lo lleva al extremo sin depender de lo que venga detras. */ .edgtf-mobile-header .edgtf-vertical-align-containers { display: flex; align-items: center; /* El tema le da height:100%. Mientras la cabecera no tiene alto fijo eso no significa nada, pero al bloquear el scroll se le pone uno en linea -para fijarla arriba- y entonces ese 100% pasa a ser el de la cabecera ENTERA, las dos filas: la primera se estiraba y el logotipo caia 20px al centro justo al abrir el menu. */ height: auto; } .edgtf-mobile-header .edgtf-mobile-menu-opener { display: flex; align-items: center; margin-left: auto; } /* El logotipo va dentro de un contenedor absoluto que ocupa todo el ancho. Lo que lo centraba no era ningun margen sino un "text-align: center" de ese contenedor, que actua sobre la caja de dentro porque va en inline-block. Cambiandolo de lado, el rotulo se va a la izquierda. Y nada mas se toca. Se probo a poner el contenedor en flex para alinear desde ahi y el logotipo se cayo a la linea de abajo: ese inline-block es tambien lo que lo centra verticalmente. */ .edgtf-mobile-header .edgtf-position-center { text-align: left; } /* La cabecera deja de tener alto fijo; si no, el tema la clava en el alto que ella decide. Al quitarselo se va tambien el aire vertical que ese alto le daba de propina, asi que la fila lleva su propio alto minimo: sin el, el logotipo queda pegado al borde de arriba. */ .edgtf-mobile-header .edgtf-mobile-header-inner, .edgtf-mobile-header .edgtf-mobile-header-holder { height: auto; } .edgtf-mobile-header .edgtf-vertical-align-containers { min-height: 68px; } .edgtf-mobile-header .edgtf-mobile-menu-opener > a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; } /* --- De hamburguesa a aspa --- */ /* El tema pinta el icono con un glifo de Font Awesome, y un glifo no se puede animar: es una letra. Asi que se apaga y se dibujan las tres barras. Las de fuera son los pseudoelementos del que envuelve al icono, y la de en medio es el . Van en elementos distintos a proposito. Colgando las tres del mismo, al desvanecer la central por opacidad se irian tambien las otras dos -la opacidad afecta a todo lo que hay dentro- y el aspa no llegaria a verse. Los tiempos vienen del pen de Bryan White que pasaste, que acierta en un detalle: las tres barras no se mueven a la vez. La de en medio se apaga deprisa -0,15s- y las otras dos giran despacio -0,45s con salida suave-, de modo que la central ya no esta cuando las otras llegan al centro. Con un tiempo unico para las tres se ve un instante de las tres amontonadas. Lo que no se copia es el como: alli las barras se mueven cambiando "top", que obliga al navegador a rehacer la maquetacion en cada fotograma. Aqui se mueven con transform, que va por la tarjeta grafica. Y en vez de "transition: all" se nombran las propiedades, para no animar sin querer cualquier cosa que se toque manana. */ /* Las barras van a 3px y no a 2. A 2 el icono quedaba fino al lado del rotulo, que ahora es bastante mas grueso, y el aspa se veia deslavazada. El alto lo marca esta caja: la barra de en medio la rellena entera. */ .edgtf-mobile-header .edgtf-mobile-menu-opener .edgtf-mobile-opener-icon-holder { position: relative; display: block; width: 22px; height: 3px; } .edgtf-mobile-header .edgtf-mobile-menu-opener .edgtf-mobile-opener-icon-holder::before, .edgtf-mobile-header .edgtf-mobile-menu-opener .edgtf-mobile-opener-icon-holder::after { content: ""; position: absolute; left: 0; width: 22px; height: 3px; background-color: currentColor; transform-origin: center; transition: transform 0.45s ease-out; } .edgtf-mobile-header .edgtf-mobile-menu-opener .edgtf-mobile-opener-icon-holder::before { top: -7px; } .edgtf-mobile-header .edgtf-mobile-menu-opener .edgtf-mobile-opener-icon-holder::after { top: 7px; } /* La barra de en medio. El glifo se apaga con font-size y se le quita su propio ::before, que es donde Font Awesome mete la letra. */ .edgtf-mobile-header .edgtf-mobile-menu-opener i { position: absolute; inset: 0; display: block; font-size: 0; background-color: currentColor; transition: opacity 0.15s ease-out; } .edgtf-mobile-header .edgtf-mobile-menu-opener i::before { content: ""; } /* Abierto: aspa. */ .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-menu-opener i { opacity: 0; } .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-menu-opener .edgtf-mobile-opener-icon-holder::before { transform: translateY(7px) rotate(45deg); } .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-menu-opener .edgtf-mobile-opener-icon-holder::after { transform: translateY(-7px) rotate(-45deg); } /* En moviles muy estrechos -de 360 para abajo- el logotipo mide 205px y, con los 60 que se lleva el boton a cada lado, se solapaba con el area pulsable por un par de pixeles: una pulsacion en ese filo acababa en el logotipo en vez de en el menu. Se aprieta el hueco y se recorta el rotulo lo justo para que cada cosa quede en su sitio. */ @media only screen and (max-width: 360px) { .edgtf-mobile-header .edgtf-mobile-logo-wrapper a { gap: 8px; } .edgtf-mobile-header .edgtf-mobile-logo-wrapper a::after { width: 150px; } } /* A quien le molesta el movimiento se le cambia el icono sin animarlo: el aspa sigue apareciendo, que es lo que informa de que el boton cierra. */ @media (prefers-reduced-motion: reduce) { .edgtf-mobile-header .edgtf-mobile-menu-opener i, .edgtf-mobile-header .edgtf-mobile-menu-opener .edgtf-mobile-opener-icon-holder::before, .edgtf-mobile-header .edgtf-mobile-menu-opener .edgtf-mobile-opener-icon-holder::after { transition: none; } /* El velo sigue apareciendo y desapareciendo, pero de golpe: sin desvanecido y sin que las secciones suban ni se escalonen. Lo que molesta es el movimiento, no el cambio. */ .edgtf-mobile-header .edgtf-mobile-nav, .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-nav { transition: opacity 0s, visibility 0s; } .edgtf-mobile-header .edgtf-mobile-nav ul li a, .edgtf-mobile-header.st-menu-abierto .edgtf-mobile-nav ul li a { transform: none; transition: none; transition-delay: 0s; } /* Red de seguridad: con movimiento reducido el guion ni siquiera pone la clase, asi que no hay nada escondido. Se deja por si algun dia se cambia como se activa. */ html.st-animar .st-entra, html.st-animar .st-entra.st-visible { opacity: 1; animation: none; transition: none; } } /* La seccion activa, en blanco y con la misma barrita del escritorio. El enlace trae un dentro, asi que la barra se ancla al texto y no al enlace, que ocupa todo el ancho. */ .edgtf-mobile-header .edgtf-mobile-nav ul li.current-menu-item > a { color: #ffffff; text-decoration: none; } .edgtf-mobile-header .edgtf-mobile-nav ul li.current-menu-item > a span { position: relative; display: inline-block; } .edgtf-mobile-header .edgtf-mobile-nav ul li.current-menu-item > a span::after { content: ""; position: absolute; top: calc(100% + 4px); left: 50%; width: 16px; height: 4px; margin-left: -8px; border-radius: 2px; background-color: currentColor; } } /* --------------------------------------------------------------------------- El menu movil en horizontal --------------------------------------------------------------------------- */ /* Girando el telefono la pantalla se queda sin alto y el menu no cabia. Las cuatro secciones en columna miden 247px y la cabecera -logotipo mas la fila de redes- ocupa los 108 de arriba. Pero la lista se centra en la pantalla ENTERA, no en el hueco que queda libre, asi que con poco alto se metia por debajo de la cabecera: medido en 740x360, empezaba en el pixel 56 y "Actores" caia justo encima de los iconos de redes. La cuenta dice cuando pasa: la lista arranca en (alto - 247) / 2, y se mete bajo la cabecera siempre que eso sea menor que 108, o sea por debajo de 463px de alto. De ahi el limite de 500, que deja margen. En fila las cuatro secciones ocupan un solo renglon y sobra sitio. Las redes se quedan a la vista, como en vertical. */ @media only screen and (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) { .edgtf-mobile-header .edgtf-mobile-nav ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } /* En columna cada seccion ocupaba todo el ancho. En fila cada una ocupa lo suyo. */ .edgtf-mobile-header .edgtf-mobile-nav ul li { width: auto; } .edgtf-mobile-header .edgtf-mobile-nav ul li a { padding: 10px 14px; font-size: 22px; } } /* ========================================================================== Menu en caja baja ========================================================================== */ /* El tema pone las secciones en mayusculas. Se dejan tal y como estan escritas en el menu de WordPress, es decir con solo la inicial en mayuscula, que con una serif se lee mejor: las mayusculas sostenidas pierden la silueta de la palabra, que es por donde se reconoce de un vistazo. */ .edgtf-main-menu > ul > li > a, .edgtf-main-menu > ul > li > a .edgtf-item-text { text-transform: none; letter-spacing: 0.02em; } /* ========================================================================== Ancho maximo de la cabecera y cuerpo del menu ========================================================================== */ /* En pantallas anchas el logotipo y el menu se iban a los extremos y quedaban a medio metro el uno del otro. Se limita la cabecera a 1440px y se centra; dentro conserva los 40px de margen interno del tema, que son el hueco a cada lado. */ .edgtf-page-header .edgtf-vertical-align-containers { max-width: 1440px; margin-left: auto; margin-right: auto; } /* El menu iba a 13px, que con una serif y en caja baja se queda corto para ser la navegacion principal. El cuerpo y el grosor se declaran AQUI y en ningun otro sitio. Estuvieron un rato tambien mas arriba, y como las dos reglas tenian la misma fuerza mandaba la ultima: cambiar la de arriba no hacia nada y costaba entender por que. */ .edgtf-main-menu > ul > li > a, .edgtf-main-menu > ul > li > a .edgtf-item-text { font-size: 24px; font-weight: 600; } /* Con ese cuerpo, la separacion entre secciones tambien crece. */ .edgtf-main-menu > ul > li { margin: 0 16px; } /* Los margenes de las secciones se quedan simetricos, tambien en la ultima. * * Llevaba "margin-right: 0" de cuando el menu iba pegado a la derecha, para * que la ultima seccion cuadrara con el borde. Con el menu centrado eso lo * descuadra: 16px de aire antes de la primera y ninguno despues de la ultima * dejaban el texto 6,5px a la derecha del centro. Los contenedores estaban * bien; lo que no lo estaba era el contenido dentro de ellos. */ /* ========================================================================== Cabecera en tres bloques: logotipo, menu centrado y redes ========================================================================== */ /* La plantilla del tema hijo anade un bloque central. Se reparte con flexbox: logotipo y redes ocupan lo que necesiten, y el centro se queda con el resto para que el menu caiga en el medio de la pagina. */ /* Una sola fila: logotipo a la izquierda, menu en el centro y redes a la derecha. El menu queda centrado en la PAGINA, no en el hueco que dejan los otros dos. El truco esta en los laterales: los dos con "flex: 1 1 0", o sea repartiendo el sobrante a partes iguales pese a medir cosas distintas -el logotipo son 205px y las redes unos 100-. Asi el centro cae siempre en la mitad exacta aunque manana cambie el logotipo o se anada una red mas. Con "flex: 1 1 auto" en los laterales, en cambio, cada uno se quedaria con su tamano de partida y el menu acabaria desplazado hacia la derecha. */ .st-cabecera { display: flex; flex-wrap: nowrap; align-items: center; gap: 24px; } .st-cabecera .edgtf-position-left { float: none; order: 1; flex: 1 1 0; min-width: 0; } /* El bloque del menu deja de ir en absoluto. * * El tema lo trae como .edgtf-position-center, colocado en absoluto de lado a * lado del contenedor: era su forma de centrarlo. Aqui estorba, porque lo saca * del reparto en tres columnas y el centrado pasa a depender de esa posicion * absoluta en vez del reparto. * * El selector lleva dos clases a proposito: la regla del tema tambien las * lleva, y con una sola perdia y el bloque volvia al absoluto sin avisar. */ .st-cabecera > .st-cabecera-menu { position: static; float: none; order: 2; flex: 0 0 auto; text-align: center; padding: 0; width: auto; max-width: none; } .st-cabecera .edgtf-position-right { float: none; order: 3; flex: 1 1 0; min-width: 0; } .st-cabecera .edgtf-position-right, .st-cabecera .edgtf-position-right-inner { display: flex; justify-content: flex-end; align-items: center; } /* El bloque del menu centra a su contenido geometricamente. Iba como inline-block dentro de un bloque con text-align:center, y asi se apoyaba en la linea base de su caja de linea -mas alta que el propio menu-, que es de donde salian 2,7px de aire arriba y ninguno abajo. */ .st-cabecera > .st-cabecera-menu { display: flex; align-items: center; justify-content: center; } .st-cabecera-menu .edgtf-main-menu { float: none; display: block; } /* El menu se centra de verdad con el logotipo y los iconos. * * Medido, el texto caia 1,6px por debajo del eje de la cabecera. No era el * bloque -ese si estaba centrado- sino el enlace dentro de el: el tema le deja * una caja de linea de 26px heredada de su cuerpo de 14, y dentro mete el * enlace con "vertical-align: middle", que no centra geometricamente sino * respecto a la linea base del texto de al lado. Con cuerpos distintos, eso * descuadra. * * Con la lista en flex el centrado es geometrico y el descuadre desaparece. */ .st-cabecera-menu .edgtf-main-menu > ul { display: flex; align-items: center; justify-content: center; line-height: 1; } .st-cabecera-menu .edgtf-main-menu > ul > li { display: flex; align-items: center; } .st-cabecera-menu .edgtf-main-menu > ul > li > a { display: flex; align-items: center; line-height: 1; padding-top: 8px; } /* El texto, dentro de su caja. * * El tema centra el texto con el truco de siempre: "top: 50%" mas un * "translateY(-50%)". Le servia cuando el enlace ocupaba todo el alto de la * cabecera. Aqui el enlace ya centra su contenido por flex, asi que ese truco * se aplica encima y sube el texto doce pixeles: la caja quedaba alineada con * el resto y las letras cuatro pixeles por encima de ella. * * Hay que anular las dos cosas. Con el "top" solo no bastaba -era el transform * el que movia-, y eso costo un intento. */ .st-cabecera-menu .edgtf-main-menu > ul > li > a > .edgtf-item-outer { top: 0; bottom: auto; transform: none; } /* La cabecera deja de tener altura fija: ahora la marca su contenido. */ .edgtf-page-header .edgtf-menu-area, .st-cabecera { height: auto; } /* El aire de la cabecera. Los laterales los pone el tema en .edgtf-vertical-align-containers, con 40px; aqui se suben a 48 para que el logotipo y los iconos de redes queden un poco mas adentro. */ .st-cabecera { padding-top: 32px; padding-bottom: 32px; padding-left: 48px; padding-right: 48px; } /* Una rayita antes de los iconos, que los separa del menu sin necesidad de dejar un hueco enorme. */ .st-cabecera .st-redes::before { content: ""; width: 1px; height: 20px; margin-right: 20px; background-color: #d9d9d9; } /* La cabecera se queda fija arriba al hacer scroll. * * La del tema no valia: aparece y desaparece por su cuenta con JavaScript y no * siempre entra. Y "position: sticky" tampoco, porque .edgtf-wrapper-inner * lleva overflow:hidden -el tema lo usa para sus animaciones- y eso convierte * al envoltorio en el marco de referencia: la cabecera se quedaria pegada a el * y no a la pantalla. * * Con position:fixed no hay ese problema. A cambio sale del flujo, asi que el * contenido necesita un hueco arriba del alto de la cabecera: 103px, que son * los 39 del logotipo mas 32 de relleno arriba y abajo. */ @media only screen and (min-width: 1025px) { .edgtf-page-header { position: fixed; top: 0; left: 0; right: 0; z-index: 110; background-color: #ffffff; } /* Con la barra de administracion de WordPress, 32px mas abajo. */ body.admin-bar .edgtf-page-header { top: 32px; } .edgtf-wrapper-inner { /* El alto de la cabecera: 39 del logotipo mas 32 de relleno arriba y otros 32 abajo. Al ir fija no ocupa sitio, asi que se le reserva aqui; sin esto el contenido arrancaria por debajo de ella. */ padding-top: 103px; } /* La cabecera fija del tema sobra: la de arriba ya no se va. */ .edgtf-sticky-header { display: none !important; } } /* La cabecera que aparece al bajar usa la misma plantilla de tres bloques que la de arriba -ver sticky-header.php en el tema hijo-, asi que hereda todo lo de aqui arriba: el reparto, el centrado y la alineacion. Lo unico suyo es que va mas compacta. El aire, declarado y no heredado de una altura fija. Estaba simetrico, pero de casualidad: el tema le daba altura fija y el texto quedaba centrado por su altura de linea, asi que cualquier cambio de cuerpo lo habria descuadrado sin que se viera de donde venia. */ .edgtf-sticky-header .edgtf-sticky-holder { height: auto; padding-top: 14px; padding-bottom: 14px; } .edgtf-sticky-header .st-cabecera { height: auto; padding-top: 0; padding-bottom: 0; } /* En una sola fila hay que repartir el ancho entre tres cosas, y por debajo de 1200px deja de haber sitio: a 1100 quedaban nueve pixeles entre el logotipo y el menu, y mas abajo se tocaban. El menu se aprieta un poco -cuerpo y hueco entre secciones- hasta que a los 1024 entra la cabecera movil y ya da igual. */ @media only screen and (min-width: 1025px) and (max-width: 1200px) { .st-cabecera-menu .edgtf-main-menu > ul > li > a, .st-cabecera-menu .edgtf-main-menu > ul > li > a .edgtf-item-text { font-size: 20px; } .st-cabecera-menu .edgtf-main-menu > ul > li { margin: 0 6px; } .st-cabecera { gap: 16px; } } /* Los enlaces del menu ya no tienen que rellenar el alto de la cabecera. */ .st-cabecera-menu .edgtf-main-menu > ul > li, .st-cabecera-menu .edgtf-main-menu > ul > li > a { height: auto; } /* --- Los iconos ---------------------------------------------------------- */ .st-redes { display: flex; align-items: center; gap: 18px; } .st-redes .st-red { display: block; color: var(--st-negro); line-height: 0; transition: color 0.2s ease; } .st-redes .st-red svg { width: 20px; height: 20px; display: block; } .st-redes .st-red:hover { color: var(--st-acento-texto); } /* ========================================================================== Tagline de la Home ========================================================================== */ /* Texto de presentacion antes de la rejilla. Va con cuerpo de titular, no de parrafo: es una declaracion de intenciones, no texto de lectura corrida, y a 14px se leeria como una nota al pie entre componentes mucho mayores. */ .st-tagline { max-width: 1180px; margin: 0 auto; /* Relleno y no margen: el margen de un parrafo se colapsa con el de su contenedor y el hueco de abajo se perdia, con lo que la rejilla -que ademas se sube 15px por su cuenta- se comia la ultima linea. */ padding: 48px 0 80px; line-height: 1.45; text-wrap: balance; /* reparte las lineas para que no quede una suelta */ /* El cuerpo, el grosor, el estilo y la alineacion NO se ponen aqui: los elige el cliente en Panel -> Texto de la Home y viajan como estilo en linea. Declararlos tambien aqui seria tener dos fuentes de la verdad para lo mismo. Ver texto-home.php. */ } /* El texto lo escribe el cliente en un editor, asi que viene envuelto en sus propios parrafos. Y hay que devolverles la herencia a mano: el tema declara `p {font-weight:300}` y una regla que apunta al elemento gana siempre a un valor heredado del padre, por floja que sea. Sin esto, el grosor elegido en el panel se pierde por el camino y el parrafo sale en 300 diga lo que diga la pantalla de ajustes. */ .st-tagline > p { font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; color: inherit; } /* El aire de arriba y de abajo lo pone el relleno del contenedor, no los parrafos; entre parrafo y parrafo si se deja la separacion del tema. */ .st-tagline > p:first-child { margin-top: 0; } .st-tagline > p:last-child { margin-bottom: 0; } /* La rejilla se sube 15px por su cuenta -es el desfase con el que el tema compensa el relleno de sus columnas-, asi que sin esto los 80px de arriba se quedarian en 65 y el numero pedido no seria el que se ve. Solo se anula arriba: el desfase lateral se conserva y las columnas siguen alineadas. */ .home .edgtf-portfolio-list-holder-outer { margin-top: 0; } /* ========================================================================== Pagina de contacto ========================================================================== */ /* Tres personas, una debajo de otra: nombre, cargo, telefono y correo, cada dato en su linea. El nombre encabeza el bloque, de ahi el peso. */ .st-contacto { max-width: 560px; margin-left: auto; margin-right: auto; text-align: center; } .st-contacto-persona + .st-contacto-persona { margin-top: 44px; } .st-contacto p { margin: 0 0 2px; line-height: 1.5; } .st-contacto-nombre { font-size: 24px; font-weight: 600; color: var(--st-negro-fuerte); margin-bottom: 4px; } /* El cargo, el telefono y el correo comparten cuerpo; el nombre manda por encima con el suyo. */ .st-contacto-cargo, .st-contacto-tel, .st-contacto-mail { font-size: 20px; } .st-contacto-cargo { color: var(--st-negro); } .st-contacto-tel a, .st-contacto-mail a { color: var(--st-acento-texto); } /* ------------------------------------------------------------------ * * Pie de pagina * * ------------------------------------------------------------------ */ /* El pie del tema se arma con widgets y opciones del panel. Este va en el codigo, sale en todas las paginas y no depende de que nadie configure nada. Ver paginas-legales.php. */ .st-pie { border-top: 1px solid #e6e6e6; padding: 34px 20px 40px; background: #ffffff; } .st-pie-interior { max-width: 1180px; margin: 0 auto; } .st-pie-legal { margin: 0; font-family: var(--st-serif); font-size: 15px; font-weight: 400; line-height: 1.9; color: #6a6a6a; text-align: center; } .st-pie-legal a { color: #6a6a6a; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } .st-pie-legal a:hover, .st-pie-legal a:focus { color: var(--st-negro-fuerte); border-bottom-color: var(--st-acento); } /* La barra que separa cada enlace. Con margenes propios en vez de espacios en el HTML: asi el hueco no cambia segun como el navegador colapse los espacios, y al partirse en dos lineas no queda una barra suelta al principio. */ .st-pie-separador { display: inline-block; margin: 0 12px; color: #c9c9c9; } @media only screen and (max-width: 600px) { .st-pie { padding: 26px 20px 32px; } .st-pie-legal { font-size: 14px; } .st-pie-separador { margin: 0 8px; } } /* ------------------------------------------------------------------ * * Paginas legales * * ------------------------------------------------------------------ */ /* Texto corrido y largo: se limita el ancho de linea, porque una linea de ciento y pico caracteres es incomoda de seguir de un renglon al siguiente. */ .st-legal { max-width: 46em; margin: 0 auto; line-height: 1.7; } /* Igual que en el tagline, hay que devolver la herencia a mano: el tema declara p{font-weight:300} y una regla que apunta al elemento gana a lo heredado. */ .st-legal p, .st-legal li { font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; text-align: inherit; } /* Los encabezados van en em y no en pixeles: asi acompanan al cuerpo que el cliente elija en el panel en vez de quedarse anclados a un tamano fijo. */ .st-legal h1 { font-size: 1.9em; line-height: 1.25; margin: 0 0 .9em; } .st-legal h2 { font-size: 1.22em; line-height: 1.35; margin: 1.9em 0 .5em; } .st-legal h3, .st-legal h4 { font-size: 1.05em; margin: 1.6em 0 .5em; } .st-legal h1:first-child, .st-legal h2:first-child, .st-legal h3:first-child { margin-top: 0; } .st-legal ul, .st-legal ol { margin: 0 0 1.2em 1.4em; } .st-legal li { margin-bottom: .4em; } /* El body mientras el menu movil esta abierto. Ver menu-movil.js: el desplazamiento negativo lo pone el guion, para que la pagina no salte al principio al fijarla. */ body.st-scroll-bloqueado { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* Y la cabecera se ancla arriba mientras dura el bloqueo. Va en position:relative, o sea que acompana al body; y como al body se le pone un desplazamiento negativo igual a lo que habia bajado el visitante, la cabecera se iba fuera de la pantalla por arriba. Con ella se iba la hamburguesa, que es tambien el boton de cerrar: el menu se abria sin forma de cerrarlo salvo recargando. El alto se lo pone el guion en linea antes de anclarla. Ver menu-movil.js. */ body.st-scroll-bloqueado .edgtf-mobile-header .edgtf-mobile-header-holder { position: fixed; top: 0; left: 0; right: 0; } /* ========================================================================== Entrada gradual del contenido ========================================================================== */ /* Lo de arriba primero y despues las tarjetas, una detras de otra. Ver entrada.js, que es quien reparte los tiempos. Todo cuelga de la clase que el guion pone en . Es a proposito: si el JavaScript no llegara a ejecutarse, la clase no se pone y no hay nada escondido que mostrar. Esconder el contenido desde el CSS a secas es como se consigue una web en blanco el dia que algo falla. */ html.st-animar .st-entra { opacity: 0; } html.st-animar .st-entra.st-visible { opacity: 1; } /* Aparecen, sin moverse. Llevaron un desplazamiento de subida y se ha quitado: en Noticias el mosaico del tema ya recoloca las tarjetas por su cuenta al montarse, y una segunda fuente de movimiento encima resultaba desconcertante. Aparecer poco a poco se entiende solo; moverse ademas, no. 1,8s es largo a proposito, y son mas de los 1,2 que llevaba con movimiento: al quitar el desplazamiento el efecto se quedo corto otra vez, porque un desvanecido a secas se percibe mas rapido que el mismo tiempo acompanado de un movimiento. Compensarlo pide subir la duracion, no volver a moverlo. Y va como ANIMACION, no como transicion. Aqui esta el motivo, que costo encontrar: las rejillas de este tema se montan con isotope y con mixitup, y las dos escriben "transition: 0.4s" EN LINEA sobre cada tarjeta para animar su colocacion. Un estilo en linea gana a cualquier hoja, asi que la duracion de aqui se perdia y el desvanecido salia siempre en 0,4s por mucho que se subiera el numero. Una animacion es otro mecanismo distinto y no se pisa con la transicion de nadie. */ @keyframes st-aparecer { from { opacity: 0; } to { opacity: 1; } } html.st-animar .st-tagline.st-entra.st-visible, html.st-animar .edgtf-portfolio-item.st-entra.st-visible, html.st-animar .edgtf-blog-holder article.st-entra.st-visible, html.st-animar .edgtf-portfolio-title.st-entra.st-visible, html.st-animar .st-ficha-bloque.st-entra.st-visible, html.st-animar .edgtf-portfolio-single-media.st-entra.st-visible { animation: st-aparecer 1.8s ease-out both; } /* La cabecera SOLO se desvanece, sin moverse. Un transform aqui la convertiria en el marco de referencia de todo lo que lleva position:fixed dentro -el velo del menu movil, y ella misma cuando se fija al bloquear el scroll-, y en vez de cubrir la pantalla se quedarian encajados dentro de la cabecera. */ html.st-animar .edgtf-page-header.st-entra, html.st-animar .edgtf-mobile-header.st-entra { transition: opacity 1s ease-out; } /*** Aire alrededor del contenido ***/ /* El contenido arrancaba pegado a la cabecera y terminaba pegado al pie, sin * respirar. Va en .edgtf-content-inner, que es la caja que envuelve lo de cada * pagina: por dentro de la cabecera y por fuera del pie, asi que el espacio * queda entre medias en todas las paginas a la vez. * * Es aparte de los 103px de mas arriba: aquellos solo compensan la altura de la * cabecera fija, que al no ocupar sitio dejaria el contenido debajo. */ .edgtf-content-inner { padding-top: 48px; padding-bottom: 48px; } /* En movil no se anade nada por arriba. Las paginas ya traen su propio aire -lo pone el maquetador en la primera fila de cada una- y sumarle este dejaba el contenido demasiado lejos de la cabecera. Abajo si se mantiene: ahi no hay nada que sume. */ @media only screen and (max-width: 1024px) { .edgtf-content-inner { padding-top: 0; } } /*** Las redes en el pie ***/ /* Solo en movil: arriba no caben ya -la cabecera se queda con el logotipo y el boton- y abajo hay sitio de sobra. En escritorio siguen en su esquina de siempre, arriba a la derecha, asi que aqui se esconden: repetirlas en las dos puntas de la pagina seria decir dos veces lo mismo. */ .st-pie-redes { display: none; } @media only screen and (max-width: 1024px) { .st-pie-redes { display: flex; justify-content: center; margin: 0 0 22px; } .st-pie-redes .st-redes { display: flex; align-items: center; gap: 26px; } .st-pie-redes .st-red { display: flex; align-items: center; justify-content: center; /* 44x44 de area pulsable, igual que el boton del menu: son enlaces que se pulsan con el dedo y el icono por si solo se queda corto. */ width: 44px; height: 44px; color: var(--st-negro); } .st-pie-redes .st-red svg { width: 22px; height: 22px; } } /*** Sin relleno propio en la portada y las rejillas ***/ /* Ni arriba ni abajo, en cualquier pantalla. Estas tres traen su propio aire -Actores y Actrices, 70px por arriba- y la suma sobraba. Las demas -Noticias, Contacto y las legales- lo conservan. Se apunta por el slug de la pagina y no por el "page-id-4151" que pone WordPress: ese numero es de la base de datos y cambia si se rehace una pagina, y el CSS dejaria de aplicar sin que nada avise. */ .st-pagina-inicio .edgtf-content-inner, .st-pagina-actores .edgtf-content-inner, .st-pagina-actrices .edgtf-content-inner { padding-top: 0; padding-bottom: 0; } /*** La ficha en una sola columna: primero el texto ***/ /* Apiladas, el curriculum quedaba detras de todas las fotos y el video: en un movil habia que bajar una pantalla entera antes de leer nada. Lo que identifica a un actor es su trayectoria, asi que va primero, y las imagenes despues. En pantalla ancha no cambia nada: las dos columnas siguen en paralelo, con las fotos a la izquierda y el curriculum a la derecha. El limite es el mismo que usa el tema para apilarlas, medido: a 1025px van en paralelo -713 y 238 pixeles- y a 1024 las dos pasan a ocupar el ancho entero. Se ordena con flex y no tocando la plantilla porque el reparto en columnas lo monta el tema padre, y una plantilla propia habria que compararla con la suya en cada actualizacion. El selector va por el contenedor de la ficha y no por el nombre de la plantilla -small-images-, para que siga valiendo si el cliente elige otra de las que trae el tema. */ @media only screen and (max-width: 1024px) { .edgtf-portfolio-single-holder .edgtf-two-columns-75-25 { display: flex; flex-direction: column; } .edgtf-portfolio-single-holder .edgtf-two-columns-75-25 .edgtf-column2 { order: 1; /* La separacion entre las dos la ponia el tema aqui, cuando el texto iba debajo. Ahora va arriba, asi que pasa a la otra columna: si no, quedaria un hueco suelto justo debajo del titulo. */ margin-top: 0; } .edgtf-portfolio-single-holder .edgtf-two-columns-75-25 .edgtf-column1 { order: 2; margin-top: 50px; } }