/* ========================================================================== ALCASA NUEVO HOGAR — HOJA DE ESTILOS (css/styles.css) ========================================================================== QUÉ ES ESTE ARCHIVO Es la hoja de estilos de toda la web: decide cómo se VE cada cosa (colores, letras, tamaños, huecos, posiciones y movimientos). El HTML de cada página dice QUÉ hay (un título, una foto, un botón); este archivo dice CÓMO se presenta. Lo cargan las cinco páginas: index.html (el home), proyectos.html, quienes-somos.html, contacto.html y aviso-legal.html. Los guiones de la carpeta js/ (main.js, paso.js, visor.js, contacto.js) casi siempre se limitan a poner y quitar clases o variables (alguna vez escriben directamente una posición, una medida o un desplazamiento que calculan en el momento); el aspecto de cada estado se decide aquí. NOTA PRÁCTICA Para cambiar un color de toda la web, cambia su variable en :root; no escribas colores nuevos fuera de la paleta. Lo mismo con medidas y tiempos: sus variables están también en :root (sección 1), y cambiándolas allí cambian en todas partes. CÓMO ESTÁ ORGANIZADO (en el orden en que aparece en el archivo) 1 Variables (paleta, medidas, movimiento) 2 Tipografías 3 Base 4 Cabecera y menú 5 Portada (hero) y secuencia de entrada 6 Section 2 7 Section 3 (con el viaje de la fotografía y el paso del hero a Section 2) 8 Pie 9 Proyectos (cuadrícula) 10 Página de contacto 11 Visor de proyecto 12 Adaptación a pantallas estrechas 13 Paso de una página a otra 14 Sección 4 (cierre del home con muestras de material) 15 Formulario de contacto 16 Aparición al bajar 17 Quiénes somos (y, a continuación, la versión de móvil «app») 18 Pantalla completa (fotos sobre fondo negro y botón de ampliar) Cada sección empieza con un título que lleva su número y su nombre: para ir a una, busca ese título en el archivo. «Section 2», «Section 3» y «Sección 4» son los bloques del home que van después de la portada, en ese orden. -------------------------------------------------------------------------- GLOSARIO: CÓMO LEER CSS SIN SABER NADA -------------------------------------------------------------------------- Comentario Todo lo que va entre los signos barra-asterisco y asterisco-barra (como este texto) es una nota para personas. El navegador lo ignora. Regla Un bloque con esta forma: .boton { color: red; } Lo de antes de la llave es el SELECTOR (a qué elementos afecta) y lo de dentro, las DECLARACIONES (qué se les hace). Cada declaración acaba en punto y coma. Propiedad y valor En «color: red;», color es la PROPIEDAD (qué se cambia) y red el VALOR (cómo queda). Las propiedades que empiezan por -webkit- son versiones para navegadores concretos (Safari, Chrome) de algo que aún no todos entienden igual. Selector Dice a qué elementos de la página se aplica una regla: body la etiqueta : todo lo que se ve de la página. a, img todas las etiquetas (enlaces) o (imágenes). .logo todo lo que lleve class="logo" en el HTML. El punto quiere decir «clase». Una CLASE es un nombre que se le pone a un elemento en el HTML para poder darle estilo desde aquí. #hero el elemento con id="hero" (un id es único en cada página). * cualquier elemento. .a .b un .b que esté DENTRO de un .a, a cualquier profundidad. .a.b (sin espacio) un elemento que lleve LAS DOS clases a la vez. .a > .b un .b que sea hijo directo de .a. .a, .b la coma junta selectores: la misma regla para los dos. [x="y"] elementos que tengan el atributo x con el valor y, por ejemplo [aria-expanded="true"]. :not(.x) que NO lleve la clase .x. Los nombres de clase siguen un patrón: .bloque__pieza--variante. Así, .hero__slide--1 es la pieza «slide» del bloque «hero», versión 1. Las clases que empiezan por is- (.is-transparente, .is-open…) o que nombran un estado (.en-vuelo, .se-ve…) las pone y las quita JavaScript mientras se usa la página. No están escritas en el HTML, salvo .is-transparente, que index.html ya trae puesta desde el principio. :root La raíz de la página (la etiqueta ). Aquí se guardan las variables para que valgan en toda la página. Pseudo-clases (con un solo signo de dos puntos) Estados de un elemento: :hover el ratón está encima. :focus está seleccionado (para escribir en él o pulsarlo). :focus-visible está seleccionado con el teclado (tecla Tab). Sirve para dibujar el recuadro de foco solo a quien navega con teclado, y no a quien hace clic con el ratón. :first-child, :last-child, :nth-child(2) es el primero, el último o el segundo de sus hermanos. Pseudo-elementos (con dos signos de dos puntos) ::before y ::after crean una pieza extra, que no está en el HTML, al principio o al final de un elemento. Se usan para dibujar adornos (un filete, un velo, una sombra). Solo existen si llevan content: "". Colores #3C1621 color en código hexadecimal (cantidad de rojo, verde y azul). rgba(60, 22, 33, .5) el mismo color con transparencia: los tres primeros números son rojo, verde y azul (0 a 255) y el cuarto va de 0 (invisible) a 1 (opaco). transparent sin color. currentColor el color del texto del elemento. Variables --x y var() «--principal: #3C1621;» guarda un valor con un nombre. En cualquier otro sitio, var(--principal) lo usa. Si se cambia la variable, cambia en todos los sitios a la vez. var(--x, 0) lleva un valor de reserva (0) que se usa si --x no existe. Algunas variables no se escriben en este archivo: las pone JavaScript mientras se usa la página (por ejemplo --avance, --avance3 o --alto-pie). Unidades px píxel: medida fija de pantalla. rem múltiplo del tamaño de letra base del navegador (normalmente 16 px): 1rem = 16 px, 2rem = 32 px, .5rem = 8 px. Si la persona agranda la letra en su navegador, lo medido en rem crece con ella. em múltiplo del tamaño de letra del propio elemento. En letter-spacing, .1em = una décima del tamaño de su letra. % porcentaje de algo: del ancho de la caja que lo contiene, del propio elemento (dentro de transform) o del tiempo (en @keyframes). vw 1 % del ancho de la ventana (100vw = todo el ancho). vh 1 % del alto de la ventana (100vh = todo el alto). svh como vh, pero tomando el alto más pequeño que puede tener la ventana en el móvil (con las barras del navegador a la vista), para que nada quede tapado por ellas. deg grados de giro: 45deg = un octavo de vuelta; 180deg = media vuelta. ms, s milisegundos y segundos: 1000ms = 1s; .45s = 0,45 segundos. Un número sin unidad es una proporción: line-height: 1.6 = 1,6 veces el tamaño de la letra; opacity: .5 = a medias. Un número que empieza por punto es decimal: .5 = 0,5. Funciones de cálculo calc(a + b) hace una cuenta, aunque mezcle unidades: calc(100% - 2rem) = todo el ancho menos 32 px. min(a, b) usa el menor de los dos: min(72rem, 100%) = 72rem, salvo que la caja sea más estrecha. max(a, b) usa el mayor de los dos. clamp(mínimo, ideal, máximo) usa el valor ideal sin bajar del mínimo ni pasar del máximo. clamp(1rem, 4vw, 3rem) crece con la ventana (4 % de su ancho) pero se queda entre 16 y 48 px. @media (condición) { … } Reglas que solo valen mientras se cumple la condición: (max-width: 900px) ventana de 900 px de ancho o menos (móviles y tabletas). (hover: hover) aparato con ratón (no táctil). (prefers-reduced-motion: reduce) la persona ha pedido en su sistema menos animaciones. @supports (algo) { … } Reglas que solo valen si el navegador entiende ese «algo». Sirve para usar una novedad sin romper la web en los navegadores que no la tienen. @font-face Da de alta una tipografía: su nombre y el archivo donde está. @keyframes nombre y animation @keyframes describe un movimiento por fotogramas clave: cómo está al principio (from, o 0%), al final (to, o 100%) y, si hace falta, en medio. animation lo pone en marcha sobre un elemento. En su forma corta: animation: surgir .9s cubic-bezier(.22, .61, .36, 1) .3s both; = qué movimiento, cuánto dura, con qué curva de velocidad, cuánto espera antes de empezar y «both» (mientras espera ya se ve como en el primer fotograma y, al acabar, se queda como en el último). infinite = se repite sin parar. transition Suaviza un cambio de estado: en vez de saltar de golpe (por ejemplo, de un color a otro al pasar el ratón), el cambio se hace poco a poco en el tiempo indicado. «transition: opacity .45s ease» = la transparencia cambia en 0,45 s. Si hay varias, van separadas por comas. Curvas de velocidad Dicen cómo se reparte un movimiento en el tiempo: linear (siempre igual), ease (arranca y frena suave), ease-in (arranca despacio), ease-out (frena despacio), ease-in-out (las dos cosas). cubic-bezier(a, b, c, d) es una curva a medida, definida por cuatro números; linear(…) es una curva dibujada punto a punto. transform Mueve, gira o cambia de tamaño un elemento sin que los de alrededor se recoloquen: translateX(…) / translateY(…) / translate(x, y) lo desplaza. rotate(45deg) lo gira. scale(1.05) lo agranda un 5 %; scaleX(0) lo aplasta en horizontal hasta que no se ve. none sin ninguna transformación. transform-origin fija el punto desde el que gira o crece. position static lo normal: el elemento va en el flujo de la página. relative en su sitio, pero sirve de referencia para colocar dentro piezas en absolute. absolute libre, encima de lo demás, medido desde los bordes de la caja madre que tenga position (relative, absolute, fixed, sticky). fixed clavado a la ventana: no se mueve al bajar por la página. sticky baja con la página hasta tocar un borde y allí se queda quieto. top, right, bottom, left dicen a qué distancia de cada borde se coloca; inset: 0 lo pega a los cuatro bordes a la vez. z-index Orden de apilado cuando dos elementos se solapan: el número más alto queda encima. Solo funciona en elementos con position (distinto de static). opacity Transparencia del elemento entero, con todo lo que tiene dentro: 1 = se ve del todo; 0 = invisible (aunque sigue ocupando su sitio). display Cómo se coloca un elemento: block (ocupa su propio renglón), inline-block (va dentro de la línea de texto pero admite medidas), flex (coloca a sus hijos en fila o en columna; gap es el hueco entre ellos), grid (en rejilla), none (no se muestra ni ocupa sitio). Cajas Cada elemento es una caja: el contenido, el relleno por dentro (padding), el borde (border) y la separación por fuera (margin). padding-inline = relleno a izquierda y derecha; padding-block = arriba y abajo. Con varios valores: dos = «arriba y abajo» y «lados»; tres = arriba, lados, abajo; cuatro = arriba, derecha, abajo, izquierda (como las agujas del reloj). !important Añadido al final de una declaración, la hace ganar a cualquier otra. Esta hoja no lo usa: el orden y la precisión de los selectores bastan. CÓMO SE DECIDE QUÉ REGLA GANA Si varias reglas dan valores distintos a la misma propiedad del mismo elemento: 1. Gana la que lleve !important. 2. Si no, gana la más PRECISA: un id (#x) pesa más que una clase (.x), un atributo ([x]) o una pseudo-clase (:hover), y estos más que una etiqueta (a, img). Varias clases juntas pesan más que una sola, así que «.site-header.is-transparente .nav__link» gana a «.nav__link». 3. A igualdad, gana la que aparece MÁS ABAJO en el archivo. Dentro de una misma regla pasa igual: si una propiedad se escribe dos veces, vale la segunda. Se usa para dar primero una versión de reserva y después la moderna: el navegador que no entiende la segunda la ignora y se queda con la primera. Estar dentro de un @media no da más peso: solo hace que la regla valga o no valga según la pantalla. Algunos valores pasan de padres a hijos (el color y el tipo de letra): inherit pide expresamente el del padre. Un estilo que JavaScript pone directamente en un elemento gana a lo que dice este archivo. ========================================================================== */ /* ========================================================================== 1 · VARIABLES (paleta, medidas, movimiento) -------------------------------------------------------------------------- Los valores que se repiten por la web se guardan aquí con nombre, dentro de :root (la raíz de la página), para que valgan en todas partes. Cambiando uno aquí, cambia en toda la web. Varias de estas variables las leen también los guiones de js/, que no llevan sus propios valores. ========================================================================== */ :root { /* abre la lista de variables de toda la web */ /* Paleta de marca: los cinco colores de la web. */ --principal: #3C1621; /* burdeos: color del texto y de los fondos de acento */ --secundario: #A59B92; /* gris topo (piedra): texto secundario y filetes */ --contraste-1: #B98E5D; /* caramelo: acentos y estados activos (ratón encima, seleccionado) */ --contraste-2: #D1B594; /* arena: acentos suaves sobre fondo oscuro */ --claro: #E5E2DF; /* crema: fondo general de la página */ /* Tipografías (familias de letra) --display: SOLO para titulares (h1 y h2). --texto: todo lo demás: párrafos, menú, botones, cifras, pies. Cada una es una lista de reserva: el navegador usa la primera que tenga y, si le falta, pasa a la siguiente. Las dos primeras (Playfair Display y Montserrat) van incluidas en la web, en la carpeta fuentes/, así que todo visitante las ve; las de detrás solo entran si fallara la descarga. */ --display: "Playfair Display", Georgia, "Times New Roman", serif; /* letra con remates, de titular */ /* Letra sin remates; detrás, las del sistema de Apple y de Windows y, al final, cualquiera sin remates. */ --texto: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Medidas */ --header-h: 88px; /* alto de la cabecera (76 px en pantallas estrechas) */ --margen: clamp(1.25rem, 4vw, 3.5rem); /* margen lateral: 4 % del ancho, entre 20 y 56 px */ /* Aire (espacio vacío) de las secciones del home: el de arriba y abajo de cada sección, y el que queda entre Section 2 y Section 3, que va más apretado. */ --aire-seccion: clamp(4.5rem, 10vw, 9rem); /* 10 % del ancho, entre 72 y 144 px */ --aire-entre: clamp(2rem, 4.5vw, 4rem); /* 4,5 % del ancho, entre 32 y 64 px */ /* Pase de imágenes de la portada (hero): duración total y retraso entre la salida de una imagen y la de la siguiente. Cada imagen se mueve durante --pase menos dos veces --desfase, es decir, 1,6 s. La segunda imagen sale un 25 % más tarde que el paso normal (a los 0,25 s); la tercera mantiene sus 0,4 s (dos veces --desfase) para que el conjunto siga durando 2 s. */ --pase: 2s; /* lo que dura el pase entero */ --desfase: .2s; /* retraso base entre una imagen y la siguiente */ --desfase-2: .25s; /* retraso propio de la segunda imagen */ /* Paso de Section 2 a Section 3: la fotografía da media vuelta sobre su eje vertical mientras baja y cruza a la izquierda; gira como una página que se pasa, no como una persiana. Son 180deg justos porque es lo que tarda la cara de detrás en quedar de frente. */ --giro: 180deg; /* media vuelta */ /* Ritmo del movimiento ------------------------------------------------- De aquí sale todo lo que se mueve al pulsar algo: el paso a Proyectos, la formación de la cuadrícula, la apertura y el cierre del visor y la transición lateral entre páginas. Ningún elemento se desplaza durante más de --mov, y los escalonamientos (piezas que arrancan una detrás de otra) van por DENTRO de ese tiempo, no detrás. Es el único sitio donde se toca el ritmo: js/paso.js y js/visor.js leen estos valores de aquí en lugar de llevar los suyos, así que no hay dos relojes que puedan descuadrarse. Subiendo o bajando --mov, toda la web se vuelve más pausada o más ágil sin tocar ninguna otra línea. El pase del hero (--pase) y el giro de Section 2 quedan fuera: aquel es ambiente de fondo y este lo manda el scroll, no un clic. Si el visitante pide menos movimiento, la sección 12 deja estos tiempos casi en cero. */ --mov: 600ms; /* duración máxima de un movimiento tras un clic (0,6 s) */ --mov-breve: 400ms; /* versión corta, para piezas pequeñas del visor (0,4 s) */ /* Apagado del home al pulsar «Ver Proyectos». Va aparte y es corto a propósito: mientras dura, la foto está quieta y no se mueve nada. Es tiempo de espera, no animación, así que no debe crecer con --mov: lo justo para que el cambio de página no se lea como un corte. */ --mov-salida: 100ms; /* 0,1 s */ /* Salida lateral: la página que se va se retira de lado antes de que cargue la siguiente. Es movimiento de verdad, así que dura algo más que el apagado anterior, pero poco: la página se retira de un gesto y la que llega hace el recorrido largo (--mov). */ --mov-salida-lado: 200ms; /* 0,2 s */ /* Curva de velocidad de esos movimientos. Va emparejada con la duración: esta arranca con calma y frena largo (hace el 50 % del camino en el 31 % del tiempo), que es lo que da el aire de la casa a 600 ms. OJO: si algún día se baja --mov por debajo de 400 ms, hay que volver a cubic-bezier(.32, .72, 0, 1), que sale disparada (78 % del camino en el primer 25 % del tiempo); con la de ahora, a esa velocidad, el movimiento parece arrancar tarde. Y al revés: aquella, a 600 ms, se lee como un tirón seco seguido de medio segundo de deriva. */ --mov-curva: cubic-bezier(.4, 0, .1, 1); /* arranque suave y frenada larga */ /* Colores del pie de página. No son fijos: copian los de la página sobre la que se apoya, para que el pie nunca se lea como una banda pegada al final. Todas las páginas terminan en fondo claro (el home también), así que hoy no hay ninguna excepción. */ --fondo-pie: var(--claro); /* fondo del pie: crema */ --tinta-pie: var(--principal); /* texto del pie: burdeos */ /* Aparición al bajar --------------------------------------------------- Cómo se mueve un bloque cuando asoma por abajo al bajar por la página (sección 16). Va aparte de --mov porque aquello lo dispara un clic y esto lo manda el scroll: aquí conviene ir más despacio y más largo, para que se lea como algo que se posa y no como algo que salta. js/main.js lee --revela y --revela-paso de aquí, igual que paso.js lee --mov, para que no haya dos relojes que puedan descuadrarse. */ --revela: 900ms; /* lo que tarda cada pieza en llegar (0,9 s) */ --revela-paso: 70ms; /* retraso entre una pieza y la siguiente */ --revela-salto: 2rem; /* desde cuánto más abajo sube (32 px) */ --revela-curva: cubic-bezier(.22, .61, .36, 1); /* sale rápida y se posa suave */ /* Retraso entre un texto y el siguiente (título, párrafo, botón) dentro de un mismo bloque. Es mucho mayor que --revela-paso a propósito: aquí no se busca una onda casi simultánea sino que se vea entrar cada pieza por orden. Con 280 ms, cuando arranca el párrafo el título ya ha hecho unas dos terceras partes de su subida: se solapan, pero poco. */ --entrada-paso: 280ms; /* 0,28 s entre texto y texto */ /* Tinta suave para etiquetas y pies de foto --------------------------- El gris topo sobre el crema solo llega a un contraste de 2,1:1 (la proporción de luz entre texto y fondo) y no se lee: está por debajo de lo que pide cualquier texto pequeño. Esto es el burdeos de la marca al 68 %, que sube a 5,0:1 y mantiene el tono apagado que se buscaba. No es un color de fuera de la paleta: es uno de dentro con el fondo asomando por debajo, igual que los filetes y las sombras de toda la hoja. --secundario se queda para lo que va sobre fondo oscuro, donde sí se lee (por ejemplo, en el visor de fotografías). */ --tinta-suave: rgba(60, 22, 33, .68); /* burdeos de la marca con un 68 % de opacidad */ } /* fin de :root (variables) */ /* ========================================================================== 2 · TIPOGRAFÍAS -------------------------------------------------------------------------- Los archivos de letra van dentro del proyecto (carpeta fuentes/): no los sirve nadie de fuera. Así la página no abre conexión con ningún tercero al cargar y ningún dato del visitante (su IP, su navegador) sale hacia otro servidor, que es lo que exige el RGPD (en varios países ya se ha sancionado usar Google Fonts desde sus servidores). Son las dos familias de la web en su versión «variable»: un solo archivo cubre todos los grosores que se usan. Llevan solo los caracteres latinos, que incluyen todas las tildes, la eñe y los signos de apertura. ========================================================================== */ /* Letra de titulares: Playfair Display. */ @font-face { /* da de alta una tipografía */ font-family: "Playfair Display"; /* nombre con el que se la llama */ font-style: normal; /* versión recta, no cursiva */ font-weight: 400 500; /* cubre los grosores 400 (normal) a 500 */ font-display: swap; /* mientras carga, el texto sale con otra letra */ src: url("../fuentes/playfair-latin.woff2") format("woff2"); /* archivo (../ = subir desde css/) */ /* Caracteres que trae el archivo, por su código Unicode (el número de cada letra o signo): letras latinas con tildes, comillas, guiones, euro… */ 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; } /* fin de Playfair Display */ /* Letra de texto: Montserrat. */ @font-face { /* da de alta una tipografía */ font-family: "Montserrat"; /* nombre con el que se la llama */ font-style: normal; /* versión recta, no cursiva */ font-weight: 300 500; /* cubre los grosores 300 (fino) a 500 */ font-display: swap; /* mientras carga, el texto sale con otra letra */ src: url("../fuentes/montserrat-latin.woff2") format("woff2"); /* archivo de la letra */ /* Mismos caracteres que la anterior. */ 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; } /* fin de Montserrat */ /* ========================================================================== 3 · BASE -------------------------------------------------------------------------- Ajustes generales que valen para todas las páginas: cómo se miden las cajas, color y letra de la página, imágenes, enlaces, el hueco del pie, el recuadro de foco para quien navega con teclado y dos ayudas de accesibilidad (el enlace de salto y el texto solo para lectores de pantalla, los programas que leen la página en voz alta). ========================================================================== */ /* Todos los elementos, y sus piezas ::before y ::after: el ancho y el alto que se les da incluyen ya el relleno y el borde. Así una caja de 40 px mide 40 px de verdad, lleve el relleno que lleve. */ *, *::before, *::after { box-sizing: border-box; } /* La página entera (etiqueta ). */ html { -webkit-text-size-adjust: 100%; /* impide que el móvil agrande el texto por su cuenta al girarlo */ /* El hueco de la barra de desplazamiento se reserva siempre. Sin esto, cada vez que algo bloquea el scroll (el visor, el menú móvil) la barra desaparece, la página se ensancha unos 15 px y todo pega un salto lateral al abrir y otro al cerrar. */ scrollbar-gutter: stable; } /* fin de html */ /* El cuerpo de la página: todo lo que se ve. */ body { margin: 0; /* quita el margen que el navegador pone alrededor */ background: var(--claro); /* fondo crema */ color: var(--principal); /* texto burdeos (lo heredan todos los elementos) */ font-family: var(--texto); /* letra de texto para todo, salvo los titulares */ font-weight: 400; /* grosor normal */ line-height: 1.6; /* alto de renglón: 1,6 veces la letra, para leer con aire */ -webkit-font-smoothing: antialiased; /* en Mac, dibuja la letra más fina y suave */ } /* fin de body */ /* Imágenes: cada una en su propio renglón (sin el hueco que deja debajo una imagen metida en una línea de texto), nunca más anchas que su caja y con el alto proporcional, para que no se deformen. */ img { display: block; max-width: 100%; height: auto; } /* Hueco reservado al pie al final de cada página. El pie va fijo y solo sube al llegar al final, así que sin este hueco taparía el último trozo de página. Se pinta del mismo color que el pie para que no se vea una franja de otro color mientras el pie aún no ha subido. El alto lo mide js/main.js y lo guarda en --alto-pie. */ body::after { content: ""; /* crea la pieza (vacía) */ display: block; /* ocupa su propio renglón, a todo el ancho */ height: var(--alto-pie, 0px); /* tan alta como el pie; 0 mientras main.js no lo mida */ background: var(--fondo-pie); /* del color del fondo del pie */ } /* fin de body::after */ a { color: inherit; text-decoration: none; } /* enlaces: del color del texto que los rodea, sin subrayar */ /* Recuadro que marca lo que está seleccionado cuando se navega con el teclado (tecla Tab). Con el ratón no aparece. */ :focus-visible { outline: 2px solid var(--contraste-1); /* línea caramelo de 2 px alrededor */ outline-offset: 4px; /* separada 4 px del elemento */ } /* Enlace «Saltar al contenido», el primero de cada página. Está escondido fuera de la pantalla y aparece arriba a la izquierda al llegar a él con el tabulador, para que quien navega con teclado o con lector de pantalla pueda saltarse la cabecera. */ .skip-link { position: absolute; /* libre, fuera del flujo de la página */ left: -9999px; /* muy lejos por la izquierda: fuera de la vista */ top: 0; /* pegado arriba */ z-index: 100; /* por encima de todo, también de la cabecera (50) */ padding: .75rem 1.25rem; /* relleno: 12 px arriba y abajo, 20 px a los lados */ background: var(--principal); /* fondo burdeos */ color: var(--claro); /* texto crema */ font-size: .8rem; /* letra pequeña (unos 13 px) */ letter-spacing: .1em; /* letras algo separadas */ text-transform: uppercase; /* en mayúsculas */ } /* fin de .skip-link */ .skip-link:focus { left: 0; } /* al llegar con el teclado, entra en pantalla por la izquierda */ /* Texto para lectores de pantalla y buscadores, invisible en la página. Se reduce a un punto de 1 px recortado en vez de ocultarlo con display: none, porque lo oculto así tampoco lo leen los lectores. */ .solo-lectores { position: absolute; /* fuera del flujo: no empuja nada */ width: 1px; /* 1 px de ancho */ height: 1px; /* 1 px de alto */ margin: -1px; /* retirado ese píxel, para que no ocupe sitio */ padding: 0; /* sin relleno */ border: 0; /* sin borde */ overflow: hidden; /* lo que no cabe en ese píxel no se ve */ clip-path: inset(50%); /* recorta la caja por los cuatro lados hasta dejarla en nada */ white-space: nowrap; /* el texto en un solo renglón, sin partirse */ } /* fin de .solo-lectores */ /* ========================================================================== 4 · CABECERA Y MENÚ -------------------------------------------------------------------------- La franja fija de arriba de todas las páginas: el logotipo a la izquierda y, a la derecha, el menú (Proyectos, Quiénes Somos, Contacto), el icono de Instagram y, en pantallas estrechas, el botón que abre el menú. En el home la cabecera flota sobre la foto de portada: arranca transparente, con el logotipo y la letra en claro (clase .is-transparente, que ya viene escrita en el HTML de index.html), y en cuanto se baja un poco (más de 24 px) main.js le quita esa clase y la cabecera toma fondo crema con letra burdeos. También se la quita mientras el menú del móvil está abierto. Las demás páginas no llevan esa clase: su cabecera tiene fondo claro siempre. Aquí están también los estados del menú (ratón encima, seleccionado con el teclado) con su subrayado caramelo, y la X en que se convierte el botón de menú al abrirlo. El menú desplegable del móvil está en la sección 12. Sin JavaScript la cabecera no puede reaccionar al scroll, así que index.html la deja sólida desde el principio (en su bloque