intermedio no rompe
* nada. El de la pagina lo emite contactInfoSec dentro de .titleBox
* .title: aqui no hay ningun selector de tag h1/h2, todo va por clase.
*
* RESPONSIVE: la maqueta tiene 7 breakpoints en skeleton.css, pero estos tres
* ids solo traen reglas propias en 5 (1501-1600, 1366-1500, 961-1365, 768-960
* y <=767). Desktop Grande (1601-2700) y el sub-rango 480-767 no tienen
* ninguna regla para estos ids en la maqueta, asi que no se genera un bloque
* @media vacio (mismo criterio ya aplicado en contact-faqs.css y
* rooms-list.css: un @media sin reglas es ruido, no documentacion).
*
* Extraido del monolito de la maqueta del 31-jul (bloque "Contact Page",
* fenix-sevilla-hotel.css lineas 2859-3179) mas las reglas de estos tres ids
* en skeleton.css. Sin cambios de valores: todo literal de la maqueta.
*/
#contactSec {
position: relative;
}
/* El 50% sustituye a un 50vh anterior y da EXACTAMENTE la misma posicion, pero
sin depender de la unidad de viewport.
Que no vuelva a cambiarse por un porcentaje "de la seccion": aqui manda
anchor-nav.js, que escribe position:fixed INLINE al entrar en el bloque. En
estado fixed el porcentaje se resuelve contra el VIEWPORT, no contra
#contactSec, asi que 50% == 50vh en el unico estado que el usuario ve
mientras lee. En el estado absolute el JS escribe ademas top:auto inline, con
lo que este valor ni se aplica.
Se intento anclarlo al contenido con 25.1502% (la posicion medida en estado
absolute) y subia el menu 191px en cuanto el JS lo ponia en fixed: el
"delta 0" de aquella medicion correspondia a un estado que solo existe con el
bloque fuera de pantalla.
El problema de accesibilidad que motivo aquel intento -al ampliar el texto al
200% el menu se quedaba clavado y pisaba la seccion siguiente- se resuelve
mas abajo, en la media query en em, retirando el menu igual que ya se hace en
los tramos estrechos. */
#contactSec .contactMenu {
width: 16rem;
position: absolute;
top: 50%;
left: 4.75rem;
transform: translateY(-50%);
z-index: 1;
}
#contactSec .contactMenu ul {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 0;
margin: 0;
list-style-type: none;
}
#contactSec .contactMenu ul > li {
font-size: 1.375rem;
color: #666666;
font-weight: 400;
line-height: 1.6875rem;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#contactSec .contactMenu ul > li > a {
position: relative;
display: block;
padding: 0 0 0 2.5rem;
color: #666666;
/* FASE 08 (E-31): entre reposo y .active solo cambian color y peso; la abreviatura
sin propiedad (= all) animaba tambien el anillo de foco. */
transition: color .25s cubic-bezier(0.645, 0.045, 0.355, 1),
font-weight .25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#contactSec .contactMenu ul > li > a.active {
color: #1A1A1A;
font-weight: 600;
text-decoration: none;
}
#contactSec .contactMenu ul > li > a:before {
content: "";
width: 2rem;
height: 0.0625rem;
background-color: #1A1A1A;
position: absolute;
top: 0.8125rem;
left: 0;
opacity: 0;
transition: .15s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#contactSec .contactMenu ul > li > a.active:before {
opacity: 1;
transition: .50s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#contactInfoSec {
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #FFFFFF;
overflow: hidden;
}
#contactInfoSec .contactInfoBox {
max-width: 65rem;
margin: 0 auto;
}
#contactInfoSec .contactInfoBox .titleBox {
margin-bottom: 4rem;
}
#contactInfoSec .contactInfoBox .titleBox .subtitle {
display: block;
margin: 0 0 2rem 0;
font-size: 1.125rem;
color: #800033;
font-weight: 600;
line-height: 1.4375rem;
letter-spacing: 0.09375rem;
text-transform: uppercase;
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#contactInfoSec .contactInfoBox .titleBox .title {
display: block;
margin: 0 0 4rem 0;
font-size: 2.3125rem;
color: #1A1A1A;
font-weight: 400;
line-height: 2.625rem;
letter-spacing: -0.09375rem;
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#contactInfoSec .contactInfoBox .titleBox p {
max-width: 53.9375rem;
margin: 0 auto;
margin-bottom: 2.1875rem;
font-size: 1.125rem;
color: #1A1A1A;
font-weight: 400;
line-height: 1.5rem;
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#contactInfoSec .contactInfoBox .titleBox p:last-child {
margin-bottom: 0;
}
#contactInfoSec .contactInfoBox ul.wayContactBox {
display: flex;
flex-wrap: wrap;
row-gap: 2.0625rem;
padding: 0;
margin: 0;
list-style-type: none;
}
#contactInfoSec .contactInfoBox ul.wayContactBox li {
position: relative;
display: flex;
flex-direction: column;
width: 50%;
padding: 2rem 2rem;
border-right: 1px solid #EAEAEA;
}
#contactInfoSec .contactInfoBox ul.wayContactBox li:nth-child(2n+2) {
border-right: 0;
}
#contactInfoSec .contactInfoBox ul.wayContactBox li::after {
content: "";
width: 100%;
height: 0.0625rem;
margin: auto;
background: #EAEAEA;
position: absolute;
bottom: -1.0625rem;
left: 0;
}
#contactInfoSec .contactInfoBox ul.wayContactBox:has(li:last-child:nth-child(odd)) li:nth-last-of-type(-n+1)::after {
display: none;
}
#contactInfoSec .contactInfoBox ul.wayContactBox:has(li:last-child:nth-child(even)) li:nth-last-of-type(-n+2)::after {
display: none;
}
#contactInfoSec .contactInfoBox ul.wayContactBox li .title {
display: block;
margin: 0 0 2.5rem 0;
font-size: 1.375rem;
color: #1A1A1A;
font-weight: 600;
line-height: 1.375rem;
letter-spacing: -0.09375rem;
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#contactInfoSec .contactInfoBox ul.wayContactBox li p {
margin: 0 0 0.75rem 0;
font-size: 1.125rem;
color: #1A1A1A;
font-weight: 400;
line-height: 1.5rem;
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#contactInfoSec .contactInfoBox ul.wayContactBox li p:last-child {
margin-bottom: 0;
}
#contactInfoSec .contactInfoBox ul.wayContactBox li p br {
display: block;
}
#contactInfoSec .contactInfoBox ul.wayContactBox li a {
color: #1A1A1A;
text-decoration: none;
/* FASE 08 (E-31): el :hover solo cambia el color. */
transition: color .25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/* WCAG 1.4.3 y 1.4.1 - el hover era el oro #F4C670 sobre blanco: 1,6:1, muy por
debajo del 4,5:1 exigido, y ademas quitaba el subrayado, con lo que el enlace
se quedaba distinguido UNICAMENTE por color.
Se sustituye por la escala de negros del tema: reposo en granate #800033
(10,7:1) y hover oscureciendo al #1A1A1A del texto (17,4:1). El subrayado se
mantiene en los dos estados, que es lo que sostiene 1.4.1 cuando el color deja
de ser el unico diferenciador.
OJO A LA ESPECIFICIDAD, que es lo que rompio esto la vez anterior: la regla de
reposo vive en accessibility.css como "...li p a" (1,2,4) y esta lleva un
:hover, que cuenta como clase, asi que suma (1,3,3) y gana. Por eso tiene que
repetir el text-decoration: si solo declarase el color, seguiria pisando el
subrayado de la otra. */
#contactInfoSec .contactInfoBox ul.wayContactBox li a:hover {
color: #1A1A1A;
text-decoration: underline;
}
#contactInfoSec .contactInfoBox ul.wayContactBox li a strong {
text-decoration: underline;
}
#contactFormSec {
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #F4C670;
overflow: hidden;
}
#contactFormSec .formBox {
max-width: 65rem;
margin: 0 auto;
}
#contactFormSec .formBox .title {
display: block;
margin: 0 0 4rem 0;
font-size: 2.8125rem;
color: #1A1A1A;
font-weight: 400;
line-height: 3.25rem;
letter-spacing: -0.09375rem;
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#contactFormSec .formBox form {
display: flex;
flex-wrap: wrap;
column-gap: 1.5rem;
row-gap: 3rem;
}
#contactFormSec .formBox .form-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
width: 100%;
}
#contactFormSec .formBox .form-group.half {
width: calc(50% - 0.75rem);
}
#contactFormSec .formBox .form-group.textBox {
gap: 1rem;
}
#contactFormSec .formBox .form-group .label {
display: block;
width: 100%;
font-size: 1.125rem;
color: #1A1A1A;
font-weight: 600;
line-height: 1.125rem;
letter-spacing: -0.0625rem;
text-transform: uppercase;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#contactFormSec .formBox .form-group .label span {
color: #800033;
}
/* INSTRUCCION DE FORMATO QUE SE REVELA AL ENFOCAR (WCAG 3.3.2).
Aparece junto a la etiqueta cuando el campo recibe el foco, con raton o con
Tab, y se desvanece al salir. La idea es dar el formato esperado en el momento
en que hace falta, sin cargar el formulario de texto permanente.
TRES DECISIONES QUE NO SON DE ADORNO, y conviene no "simplificarlas":
1. Se oculta con OPACIDAD, nunca con display:none ni visibility:hidden. Esas dos
sacan el texto del arbol de accesibilidad, y como el campo lo referencia con
aria-describedby, el lector de pantalla dejaria de anunciarlo: el usuario
ciego perderia justo la instruccion que este bloque existe para dar. Con
opacity el nodo sigue expuesto y se anuncia siempre, se vea o no.
2. Va en POSITION ABSOLUTE sobre la fila de la etiqueta. Si ocupara sitio en el
flujo, aparecer y desaparecer moverÃa el campo y los de debajo cada vez que
se tabula por el formulario. Absoluto, entra y sale sin desplazar nada.
3. El disparador es :has() sobre el contenedor y no un selector de hermano,
porque el hint va ANTES del input en el DOM -ese es su orden de lectura
correcto: nombre del campo, formato, campo- y CSS no puede seleccionar hacia
atras. :has() ya se usa en este tema (ver #innerBanner en la seccion del hero).
pointer-events:none para que un hint invisible no intercepte clics. */
/* La etiqueta y su hint comparten fila. El hint va PEGADO a la etiqueta y no
alineado al otro extremo del bloque: suelto a la derecha se lee como un texto
independiente y no como la aclaracion del campo que es.
baseline y no center: los dos textos tienen cuerpos distintos -la etiqueta es
mayor y va en mayusculas- y alinearlos por su linea base es lo que hace que se
lean como una sola linea de texto. */
#contactFormSec .formBox .label-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
}
/* La etiqueta deja de ocupar el ancho completo, o empujaria al hint fuera de la
fila. El width:100% original lo hereda ahora .label-row. */
#contactFormSec .formBox .label-row .label {
width: auto;
}
#contactFormSec .formBox .form-group .field-hint {
font-size: 0.9375rem;
color: #1A1A1A;
font-weight: 400;
line-height: 1.125rem;
opacity: 0;
transform: translateY(0.25rem);
pointer-events: none;
/* Propiedades NOMBRADAS y no `all`: con la abreviatura entraria tambien el
outline-width, y el anillo de foco del campo pasaria a dibujarse animado en vez
de aparecer al instante (antipatron A4 / E-31 del procedimiento). */
transition: opacity .28s cubic-bezier(0.22, 1, 0.36, 1), transform .28s cubic-bezier(0.22, 1, 0.36, 1);
}
#contactFormSec .formBox .form-group:has(.form-control:focus) .field-hint {
opacity: 1;
transform: translateY(0);
}
/* Con el movimiento reducido activado se mantiene la aparicion, que es informacion,
y se quita el desplazamiento, que es decoracion. */
@media (prefers-reduced-motion: reduce) {
#contactFormSec .formBox .form-group .field-hint {
transform: none;
transition: opacity .01s linear;
}
}
#contactFormSec .formBox .form-group .form-control {
height: 1.875rem;
padding: 0 0 1rem 0;
outline: 0;
border: 0;
border-bottom: 1px solid #1A1A1A;
background-color: transparent;
border-radius: 0px;
box-shadow: none;
font-size: 1.125rem;
color: #1A1A1A;
font-weight: 400;
line-height: 1.5rem;
}
/* WCAG 1.4.3: el placeholder es texto y le aplica el minimo de 4,5:1. El #666666
que traia la maqueta da aqui 3,6:1, y NO es el mismo caso que el del newsletter:
alli ese mismo gris rinde 5,74:1 porque el campo va sobre blanco, y aqui el
bloque tiene de fondo el dorado corporativo #F4C670, que deja mucho menos margen.
Medido: sobre ese dorado el umbral de 4,5:1 cae en ~#575757, asi que se adopta el
#555555, que da 4,67:1 y deja holgura por si el dorado se retoca.
Se oscurece el TEXTO y no se cambia el fondo: el dorado es identidad de marca y
viene de la maqueta. La contrapartida asumida es que el sitio pasa a tener dos
grises de placeholder -#666666 sobre blanco, #555555 sobre dorado-, cada uno el
mas claro que cumple en su fondo. */
#contactFormSec .formBox .form-group .form-control::placeholder {
color: #555555;
}
#contactFormSec .formBox .form-group textarea.form-control {
height: auto;
padding: 1rem;
border: 1px solid #1A1A1A;
border-radius: 0.25rem;
}
#contactFormSec .formBox .form-group p {
margin-bottom: 0;
}
/* Enlaces legales del formulario: el aviso de reCAPTCHA (dentro de un ) y el
"He leido y acepto la Politica de privacidad" (dentro de un label.checkbox).
El label estaba fuera de esta regla y el enlace se quedaba con el dorado global
de enlaces (#F4C670) sobre el fondo dorado del bloque: contraste medido 1:1,
o sea invisible (1.4.3). Se listan juntos porque son el mismo tipo de enlace y
deben verse igual.
El subrayado NO es decorativo: el texto que los rodea es del mismo #1A1A1A, asi
que sin el no habria forma de distinguir el enlace salvo por el color, que es
identico (1.4.1, "no depender solo del color"). */
#contactFormSec .formBox .form-group p a,
#contactFormSec .formBox .form-group label.checkbox a {
color: #1A1A1A;
text-decoration: underline;
/* FASE 08 (E-31): el :hover solo quita el subrayado y text-decoration-line es de
tipo discreto (nunca se animo). Lo unico que la abreviatura (= all) SI animaba
era el anillo de foco. Se deja color, la unica propiedad animable del enlace. */
transition: color .25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#contactFormSec .formBox .form-group p a:hover,
#contactFormSec .formBox .form-group label.checkbox a:hover {
text-decoration: none;
}
#contactFormSec .formBox .form-group label.checkbox {
position: relative;
margin: 0;
padding: 0.125rem 0;
padding-left: 2.5rem;
font-size: 0.9375rem;
color: #1A1A1A;
font-weight: 400;
line-height: 1.25rem;
user-select: none;
}
#contactFormSec .formBox .form-group label.checkbox input {
appearance: none;
width: 24px;
height: 24px;
outline: 0;
border: 1px solid #1A1A1A;
background-color: transparent;
border-radius: 0.25rem;
vertical-align: text-top;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
#contactFormSec .formBox .form-group label.checkbox input:checked:before {
content: '';
display: block;
width: 8px;
height: 13px;
border: 2px solid #1A1A1A;
border-top: 0;
border-left: 0;
transform: rotate(45deg);
position: relative;
top: 0.125rem;
left: 0.4375rem;
}
#contactFormSec .formBox .form-group .button {
width: fit-content;
}
#contactFormSec .formBox .form-group .button:hover {
border-color: #ffffff;
background-color: #ffffff;
}
@media only screen and (min-width: 1501px) and (max-width: 1600px) {
#contactSec .contactMenu { width: 14.1875rem; }
#contactInfoSec .contactInfoBox { max-width: 58.75rem; }
#contactFormSec .formBox { max-width: 58.75rem; }
}
@media only screen and (min-width: 1366px) and (max-width: 1500px) {
#contactSec .contactMenu { width: 12.5rem; left: 2rem; }
#contactSec .contactMenu ul > li { font-size: 1.125rem; line-height: 1.4375rem; }
#contactSec .contactMenu ul > li > a { padding: 0 0 0 1.875rem; }
#contactSec .contactMenu ul > li > a:before { width: 1.375rem; top: 0.625rem; }
#contactInfoSec .contactInfoBox { max-width: 53.75rem; }
#contactFormSec .formBox { max-width: 53.75rem; }
}
@media only screen and (min-width: 961px) and (max-width: 1365px) {
#contactSec .contactMenu { display: none; }
#contactInfoSec { padding-top: 4.375rem; padding-bottom: 4.375rem; }
#contactInfoSec .contactInfoBox .titleBox { margin-bottom: 3.125rem; }
#contactInfoSec .contactInfoBox .titleBox .subtitle { margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#contactInfoSec .contactInfoBox .titleBox .title { margin: 0 0 3.125rem 0; font-size: 2rem; line-height: 2.3125rem; }
#contactInfoSec .contactInfoBox .titleBox p { margin-bottom: 1.875rem; font-size: 1.125rem; line-height: 1.5rem; }
#contactInfoSec .contactInfoBox ul.wayContactBox li .title { margin: 0 0 1.875rem 0; font-size: 1.375rem; line-height: 1.375rem; }
#contactInfoSec .contactInfoBox ul.wayContactBox li p { font-size: 1.125rem; line-height: 1.5rem; }
#contactFormSec { padding-top: 4.375rem; padding-bottom: 4.375rem; }
#contactFormSec .formBox .title { margin: 0 0 3.125rem 0; font-size: 2.5rem; line-height: 2.8125rem; }
#contactFormSec .formBox form { column-gap: 1.5rem; row-gap: 2.5rem; }
#contactFormSec .formBox .form-group { gap: 1.25rem; }
}
@media only screen and (min-width: 768px) and (max-width: 960px) {
#contactSec .contactMenu { display: none; }
#contactInfoSec { padding-top: 4.375rem; padding-bottom: 4.375rem; }
#contactInfoSec .contactInfoBox .titleBox { margin-bottom: 1.875rem; }
#contactInfoSec .contactInfoBox .titleBox .subtitle { margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#contactInfoSec .contactInfoBox .titleBox .title { margin: 0 0 1.875rem 0; font-size: 1.6875rem; line-height: 2rem; }
#contactInfoSec .contactInfoBox .titleBox p { margin-bottom: 1.5625rem; font-size: 1rem; line-height: 1.375rem; }
#contactInfoSec .contactInfoBox ul.wayContactBox li { padding: 2rem 1.25rem; }
#contactInfoSec .contactInfoBox ul.wayContactBox li .title { margin: 0 0 1.875rem 0; font-size: 1.25rem; line-height: 1.25rem; }
#contactInfoSec .contactInfoBox ul.wayContactBox li p { font-size: 1rem; line-height: 1.375rem; }
#contactFormSec { padding-top: 4.375rem; padding-bottom: 4.375rem; }
#contactFormSec .formBox .title { margin: 0 0 1.875rem 0; font-size: 2rem; line-height: 2.3125rem; }
#contactFormSec .formBox form { column-gap: 1.5rem; row-gap: 1.875rem; }
#contactFormSec .formBox .form-group { gap: 0.75rem; }
#contactFormSec .formBox .form-group .label { font-size: 1rem; line-height: 1rem; }
#contactFormSec .formBox .form-group .form-control { padding: 0 0 0.75rem 0; font-size: 1rem; line-height: 1.375rem; }
#contactFormSec .formBox .form-group label.checkbox { padding: 0; padding-left: 1.875rem; }
#contactFormSec .formBox .form-group label.checkbox input { width: 20px; height: 20px; }
#contactFormSec .formBox .form-group .button { padding: 1.25rem 1.5rem; }
}
@media only screen and (max-width: 767px) {
#contactSec .contactMenu { display: none; }
#contactInfoSec { padding-top: 3.125rem; padding-bottom: 3.125rem; }
#contactInfoSec .contactInfoBox .titleBox { margin-bottom: 1.875rem; }
#contactInfoSec .contactInfoBox .titleBox .subtitle { margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#contactInfoSec .contactInfoBox .titleBox .title { margin: 0 0 1.875rem 0; font-size: 1.6875rem; line-height: 2rem; }
#contactInfoSec .contactInfoBox .titleBox p { margin-bottom: 1.5625rem; font-size: 1rem; line-height: 1.375rem; }
#contactInfoSec .contactInfoBox ul.wayContactBox { row-gap: 0px; }
#contactInfoSec .contactInfoBox ul.wayContactBox li { width: 100%; padding: 1.875rem 0; border-right: 0; border-bottom: 1px solid #EAEAEA; }
#contactInfoSec .contactInfoBox ul.wayContactBox li:first-child { padding-top: 0; }
#contactInfoSec .contactInfoBox ul.wayContactBox li:last-child { padding-bottom: 0; border-bottom: 0; }
#contactInfoSec .contactInfoBox ul.wayContactBox li:after { display: none; }
#contactInfoSec .contactInfoBox ul.wayContactBox li .title { margin: 0 0 1.5625rem 0; font-size: 1.25rem; line-height: 1.25rem; }
#contactInfoSec .contactInfoBox ul.wayContactBox li p { font-size: 1rem; line-height: 1.375rem; }
#contactInfoSec .contactInfoBox ul.wayContactBox li p br { display: block; }
#contactFormSec { padding-top: 3.125rem; padding-bottom: 3.125rem; }
#contactFormSec .formBox .title { margin: 0 0 1.875rem 0; font-size: 2rem; line-height: 2.3125rem; }
#contactFormSec .formBox form { flex-direction: column; column-gap: 1.5rem; row-gap: 1.875rem; }
#contactFormSec .formBox .form-group { gap: 0.75rem; }
#contactFormSec .formBox .form-group.half { width: 100%; }
#contactFormSec .formBox .form-group .label { font-size: 1rem; line-height: 1rem; }
#contactFormSec .formBox .form-group .form-control { padding: 0 0 0.75rem 0; font-size: 1rem; line-height: 1.375rem; }
#contactFormSec .formBox .form-group label.checkbox { padding: 0; padding-left: 1.875rem; }
#contactFormSec .formBox .form-group label.checkbox input { width: 20px; height: 20px; }
#contactFormSec .formBox .form-group .button { padding: 1.25rem 1.5rem; }
}
/* WCAG 1.4.4 - TEXTO AMPLIADO: el menu de anclas dejaba de tener sitio.
UMBRAL: mismo par que en el hero (fenix-sevilla-hotel.css, bloque del
.caption-wrapper), y por el mismo motivo. Una media query en em NO mide contra
el font-size del html (aqui 12px por la palanca del 75%) sino contra el tamano
de fuente del NAVEGADOR: 16px por defecto, 32px al ampliar el texto al 200%.
60em son por tanto 960px al 100% y 1920px al 200%. Junto a min-width:961px el
bloque es IMPOSIBLE al 100% -pide >=961px y <=960px a la vez-, asi que no
puede cambiar nada a tamano de fuente normal; solo se abre cuando la fuente
base supera los 16px, y al 200% cubre de 961px a 1920px. El 961 no es
arbitrario: es el suelo de escritorio del propio proyecto (tramo 961-1365) y
60em son esos mismos 960px medidos en anchos de texto. La segunda clausula
repite la jugada con los limites de Desktop Grande (1921px y sus 1920px de
techo inferior escritos como 120em) y cubre de 1921px a 3840px al 200%: hace
falta porque un solo par "min-width:N + max-width:Mem" no puede cubrir mas de
N a 2N sin dejar de estar vacio al 100%. Medido a 2560px con el texto al 200%,
el menu todavia pisaba 6px la caja de contenido, asi que ese tramo tambien
necesita la regla.
QUE ARREGLA: este menu es position:absolute, vive fuera del flujo y nadie le
reserva sitio. Al ampliar el texto, .contactInfoBox pasa a ocupar el ancho
util completo (medido a 1366x768 con el texto al 200%: la caja de contenido va
de x=31 a x=1321) y el menu, anclado en x=48-348, queda ENCIMA de ella: texto
sobre texto, los dos ilegibles.
POR QUE SE OCULTA EN VEZ DE DEVOLVERLO AL FLUJO: devolverlo al flujo no se
puede hacer desde CSS. anchor-nav.js (updateMenu) escribe position:fixed
INLINE en cuanto se hace scroll dentro del bloque, y ningun position: de una
hoja de estilos gana a un estilo inline sin !important. Ocultarlo si funciona,
porque display no lo toca nadie desde JS.
Ademas no es un tratamiento inventado: es EXACTAMENTE lo que ya hace el
proyecto con este menu en los tres tramos por debajo de 1366px (mas arriba en
este mismo archivo). Al ampliar el texto la pagina entra en la misma situacion
-no cabe la columna lateral- y recibe la misma respuesta. No se pierde ningun
destino: las tres secciones a las que apunta siguen en la pagina, en el mismo
orden, y el menu no es la unica via para llegar a ellas.
Al 100% no cambia nada: el bloque no llega a existir. */
@media (min-width: 961px) and (max-width: 60em),
(min-width: 1921px) and (max-width: 120em) {
#contactSec .contactMenu {
display: none;
}
}