/* ══════════════════════════════════════════════════════════════ GLAMOUR NAILS BY FRANCIA · experiencia pública en el celular ────────────────────────────────────────────────────────────── TODO lo de este archivo vive dentro de @media (max-width:759px). Fuera de ahí no existe, así que la computadora no puede cambiar. /reservar ya se protege sola: flujo.css apaga #cab, #isla, #progreso y .pie con !important en body[data-ruta="/reservar"]. Aun así, cada regla de navegación de aquí lleva :not() explícito. Tanda 1 · la navegación: · fuera la barra amarilla de avance · fuera la barra inferior tipo aplicación · cabecera negra sólida, logo a la izquierda, MENÚ a la derecha · menú editorial a pantalla completa con cortina vertical ══════════════════════════════════════════════════════════════ */ @media (max-width: 759px) { /* ── 0 · EL TEMA CLARO ──────────────────────────────────────── cris, 15 de agosto: "quiero el fondo blanco y letras Times Roman". Se hace dando la vuelta a las variables SOLO aquí dentro. Ni la computadora ni /reservar las ven, así que no se rompe nada de eso. El oro se oscurece: el #e8c84a de la marca sobre blanco no se lee (queda en 1.7:1). El del logo NO se toca — el logo es el archivo. */ body:not([data-ruta="/reservar"]):not([data-ruta="/panel"]) { --negro: #ffffff; --capa-1: #fbfbfa; --capa-2: #f4f3f0; --capa-3: #eceae6; --linea: rgba(17, 16, 15, 0.12); --linea-2: rgba(17, 16, 15, 0.20); --blanco: #11100f; /* los titulares, ahora tinta */ --texto: rgba(17, 16, 15, 0.70); /* 7.07:1 · bien */ /* Era 0.45, que sobre papel blanco da 3.05:1 — por debajo del mínimo de 4.5. Son once textos de la portada: las fechas, "hoy", "Hoy ya no quedan horas libres", las bajadas de la carta y los "desde". En la calle con sol no se leen. 0.60 da 4.97:1, con holgura para que un retoque no lo vuelva a tumbar. Está calculado, no tanteado: es casi el gris más claro que pasa (0.57 = 4.49). */ --texto-2: rgba(17, 16, 15, 0.60); --oro: #7a5c22; /* legible sobre blanco */ --oro-claro: #9a7530; --oro-hondo: #5d451a; --oro-linea: rgba(122, 92, 34, 0.28); --oro-humo: rgba(122, 92, 34, 0.05); /* Times, como pidió. Con red de seguridad: Android no trae Times New Roman y cae en Tinos/Liberation, que son del mismo dibujo. */ --display: "Times New Roman", Times, Tinos, "Liberation Serif", serif; background: #ffffff; color: var(--texto); } /* EL SE QUEDA NEGRO, y esto importa más de lo que parece. El teléfono pinta con el color del la franja de arriba —la del reloj y la batería— y la zona del rebote del scroll. Si lo pongo blanco (que fue mi error), sobre la portada aparece una banda clara encima de la barra negra: justo lo que se veía feo. Negro arriba = la barra y la franja del sistema son la misma cosa. Negro abajo = el rebote coincide con el pie, que también es negro. El papel blanco vive en el , que es donde va el contenido. */ html:has(body:not([data-ruta="/reservar"]):not([data-ruta="/panel"])) { background: #000000; } /* las auras y el grano son efectos de fondo negro: sobre blanco ensucian */ body:not([data-ruta="/reservar"]):not([data-ruta="/panel"]) .aura { display: none; } /* LA PORTADA SE QUEDA NEGRA, y no es capricho: el logo lleva "by. Francia" en BLANCO. Sobre blanco desaparece — está comprobado. En la portada el logo nace grande y viaja hasta la barra, así que ahí no puede haber blanco debajo. La portada negra contra el resto blanco es la única forma de conservar el logo tal cual el archivo y no perder la animación. La otra salida sería ponerle una placa negra detrás al logo, que queda como una calcomanía pegada. Se puede cambiar en un minuto. */ body:not([data-ruta="/reservar"]):not([data-ruta="/panel"]) .escena-alta, body:not([data-ruta="/reservar"]):not([data-ruta="/panel"]) .portada { --negro: #000000; --blanco: #ffffff; --texto: rgba(255,255,255,.66); --texto-2: rgba(255,255,255,.48); --linea: rgba(255,255,255,.09); --linea-2: rgba(255,255,255,.16); --oro: #e8c84a; --oro-claro: #f6e6a8; --oro-hondo: #a9822c; --oro-linea: rgba(232,200,74,.30); background: #000000; color: var(--texto); } /* la cabecera y el menú también, por el mismo motivo del logo */ body:not([data-ruta="/reservar"]) .cab, body:not([data-ruta="/reservar"]) .menu { --blanco: #ffffff; --texto: rgba(255,255,255,.66); --texto-2: rgba(255,255,255,.48); --linea: rgba(255,255,255,.12); --oro: #e8c84a; --oro-linea: rgba(232,200,74,.30); color: var(--texto); } /* el pie también se queda negro: ahí vive el logo grande y el "by. Francia" blanco se perdería sobre el papel */ body:not([data-ruta="/reservar"]):not([data-ruta="/panel"]) .pie { --blanco: #ffffff; --texto: rgba(255,255,255,.66); --texto-2: rgba(255,255,255,.48); --linea: rgba(255,255,255,.10); --oro: #e8c84a; --oro-linea: rgba(232,200,74,.30); background: #000000; color: var(--texto); } /* ── 0b · LA PORTADA (tanda 2) ──────────────────────────────── cris eligió: B · Centro · con foto · con animación. El oro es el del archivo del logo, medido píxel a píxel: #EACC47. Da 13.2:1 sobre negro y 1.59:1 sobre blanco — por eso solo aparece donde hay negro, y sobre el papel el acento es la tinta. */ body[data-ruta="/"] .portada, body[data-ruta="/"] .escena-alta { --oro: #eacc47; --oro-linea: rgba(234,204,71,.55); } /* la foto ya no se esconde: se ve */ body[data-ruta="/"] .portada-foto img { opacity: 1; filter: none; object-position: 50% 30%; } /* el velo protege la lectura, no tapa la imagen: claro donde está la mano, oscuro abajo donde va el texto */ body[data-ruta="/"] .portada-foto::after { background: linear-gradient(to bottom, rgba(0,0,0,.74) 0, rgba(0,0,0,.60) 14%, rgba(0,0,0,.34) 27%, rgba(0,0,0,.12) 38%, rgba(0,0,0,0) 48%), linear-gradient(to top, #000 4%, rgba(0,0,0,.90) 26%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.12) 68%, transparent 82%); } /* LA CABECERA, IGUAL QUE EN LA MAQUETA B. cris: "deja todo como esta maqueta, la B, y que el fondo sea transparente cuando sube". Sobre la portada la barra NO existe visualmente: fondo transparente y sus dos contenidos apagados. El logo que se ve es el grande de la portada, centrado arriba. Cuando la portada termina, la barra aparece —negra, con el logo chico a la izquierda y las tres rayitas— y el grande ya se apagó. Nunca hay dos logos a la vez. */ body[data-ruta="/"] #cab { height: calc(76px + env(safe-area-inset-top)); /* más aire arriba */ padding-top: calc(env(safe-area-inset-top) + 10px); align-items: center; transition: background .35s var(--curva), border-color .35s var(--curva); } body[data-heroe="si"] #cab { background: transparent !important; border-bottom-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none; } /* D-06: la barra entera deja pasar el dedo (debajo vive la foto), pero el boton del menu NO — con la isla quitada es la unica navegacion de la primera pantalla, y estaba muerto: el toque caia en la foto. */ body[data-heroe="si"] #cab .cab-menu { pointer-events: auto; } /* EN EL INICIO LA BARRA NUNCA SE PINTA DE NEGRO. cris: "que el fondo que se pone negro sea transparente". La consecuencia hay que resolverla, no esquivarla: pasada la portada debajo queda el papel BLANCO, y el logo lleva "by. Francia" en blanco — ahí se borraría. Por eso en el inicio el logo de la barra no se enciende nunca: el logo de esta página es el grande de la portada. Arriba solo sobreviven las tres rayitas, que cambian de color según lo que tengan debajo. */ body[data-ruta="/"] #cab { background: transparent !important; border-bottom-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* el logo de la barra: apagado mientras vive el grande de la portada, y encendido en cuanto la portada termina — así el logo NO desaparece y nunca hay dos a la vez. (El grande vive dentro de la portada, así que al pasarla se va con ella: el relevo es este.) */ body[data-ruta="/"] #cab .cab-mid { opacity: 0; visibility: hidden; transition: opacity .35s var(--curva), visibility .35s; } /* NADA DE COLORES ARRIBA: transparente de verdad, sin sombra ni franja. cris: "que sea transparente, se ve eso ahí y un blanco también, no quiero colores". Consecuencia asumida: sobre el papel blanco el logo y las rayitas son blancos y no se leerían, así que ahí la cabecera se retira entera — no se queda a medias ni lavada. Mientras hay foto detrás, se ve. */ body[data-ruta="/"] #cab .cab-mid { opacity: 0; visibility: hidden; transition: opacity .35s var(--curva), visibility .35s; } /* OJO: el de la barra NO se enciende nunca en el inicio. Encenderlo dejaba los DOS logos encima con un pelo de desfase, y eso era lo que se veía "con mala calidad": no era el archivo, eran dos dibujos superpuestos. El logo del inicio es solo el de la portada, que aterriza justo en este hueco. */ /* Sobre el papel blanco la cabecera se retira entera. cris lo eligió después de verlo: dejar el logo ahí no era que se viera mal — es que no se veía, y encima se montaba sobre el texto de la página. El logo y las rayitas son blancos; sobre papel no hay forma sin ponerles algo detrás, y eso es lo que no queremos. Mientras hay foto detrás se ven. Para navegar desde abajo están los enlaces del pie. */ /* cris: "que el logo se quede ahí cuando haga scroll, y el menú". Sobre el papel blanco el logo lleva blanco dentro y las rayitas son blancas: para que se queden y se vean, ahí el logo va sobre una placa negra ajustada a su tamaño y las rayitas pasan a tinta. Es la única forma de tenerlos siempre sin pintar toda la barra. */ body[data-ruta="/"][data-papel="si"] #cab { background: transparent !important; border-bottom-color: transparent !important; height: calc(56px + env(safe-area-inset-top)) !important; padding-top: calc(env(safe-area-inset-top) + 6px) !important; } body[data-ruta="/"][data-papel="si"] #cab .cab-mid { opacity: 1; visibility: visible; } body[data-ruta="/"][data-papel="si"] #cab .logo-img { height: 26px; } /* D-07: el logo lleva "by. Francia" en blanco y sobre el papel no existia (1.68:1 medido). La salida que este archivo ya nombraba: la placa negra ajustada al logo — padding y margen negativo se anulan, asi el logo no se mueve ni un pixel y la placa queda pegada a su tamano. La barra sigue transparente: la placa es SOLO del logo. */ body[data-ruta="/"][data-papel="si"] #cab .marca { background: #000000; padding: 7px 11px; margin: -7px -11px; border-radius: 4px; } /* las rayitas sí pasan a tinta: son un dibujo nuestro, no el logo, y blancas sobre papel blanco el menú dejaría de existir */ body[data-ruta="/"][data-papel="si"] .cab-menu { color: #11100f !important; } body[data-ruta="/"] #cab .cab-der { opacity: 1; visibility: visible; } body[data-ruta="/"] .cab-menu { color: #fff !important; } /* el de la barra nunca se transforma: el que se mueve es el de la portada */ /* el logo de la barra: un pelo más grande y bien centrado en su franja */ body[data-ruta="/"] #cab .logo-img { transform: none !important; height: 30px; } /* EL LOGO GRANDE DE LA PORTADA: centrado arriba, y solo se encoge. Arranca con el mismo alto que el de la barra y crece con la escala, así el relevo queda clavado y la proporción no se toca. */ body[data-ruta="/"] .hero-marca { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 128px); /* más abajo, como pidió cris */ z-index: 3; display: block; text-align: center; will-change: transform, opacity; } body[data-ruta="/"] .hero-marca img { height: 26px; width: auto; display: block; margin: 0 auto; } /* el bloque arranca abajo (74svh) y sube; el JS lo lleva hasta 43svh. .portada-in tenía position:relative y se comía la referencia: el bloque medía su 74% contra ella y aterrizaba fuera de pantalla. La foto vive en z-index -2, así que .portada-in no necesita capa. */ body[data-ruta="/"] .portada-in { position: static; } body[data-ruta="/"] .hero-libro { position: absolute; left: var(--borde); right: var(--borde); top: 74svh; text-align: center; will-change: transform, opacity; } body[data-ruta="/"] .hero-libro .hl-tit { font-family: var(--display); font-size: clamp(2.05rem, 8.6vw, 2.6rem); line-height: .96; letter-spacing: -.012em; color: #fff; font-weight: 400; text-transform: none; } body[data-ruta="/"] .hero-libro .hl-hilo { display: block; width: 34px; height: 1px; background: var(--oro); margin: 20px auto; } body[data-ruta="/"] .hero-libro .hl-baja { font-family: var(--ui); font-size: .74rem; line-height: 1.7; font-weight: 300; color: rgba(255,255,255,.72); max-width: 25ch; margin: 0 auto; } /* el botón: línea de 1px del oro real, esquina casi recta, sin relleno */ body[data-ruta="/"] .hero-libro .hero-btn { margin-top: 26px; min-height: 48px; /* 46 se quedaba corto: el mínimo de dedo en móvil es 48 */ padding: 0 26px; border: 1px solid var(--oro) !important; color: var(--oro) !important; border-radius: 2px !important; background: transparent !important; box-shadow: none !important; } /* los datos fijos se quedan abajo y no se mueven con el bloque */ body[data-ruta="/"] .portada .lugar span { color: rgba(255,255,255,.55); } /* ── 1 · lo que se va ─────────────────────────────────────── */ /* el botón dorado relleno con brillo: fuera. Línea fina, esquina casi recta, sin sombra y sin glow. */ body:not([data-ruta="/reservar"]) .btn, body:not([data-ruta="/reservar"]) .btn.aro-oro, body:not([data-ruta="/reservar"]) .hero-btn { background: transparent !important; background-image: none !important; border: 1px solid var(--oro-linea) !important; border-radius: 2px !important; box-shadow: none !important; color: var(--oro) !important; min-height: 48px; /* idem: 48 es el mínimo, no 46 */ font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; animation: none !important; } body:not([data-ruta="/reservar"]) .btn::before, body:not([data-ruta="/reservar"]) .btn::after { display: none !important; } body:not([data-ruta="/reservar"]) .btn:active { background: var(--oro-humo) !important; } /* la barra amarilla de avance: lenguaje de aplicación */ #progreso { display: none !important; } /* la isla inferior: Home/Catalog/Profile es una app, no una firma. La navegación entera vive en el menú. Se anula el hueco que reservaba abajo para que el pie no quede flotando. */ body:not([data-ruta="/reservar"]) .isla { display: none !important; } body:not([data-ruta="/reservar"]) { padding-bottom: 0 !important; } /* el ES/EN sale de la barra de arriba: vive en el menú y en el pie */ .cab .idioma-cab { display: none !important; } /* ── 2 · la cabecera compacta ─────────────────────────────── */ /* Negra sólida de verdad, y el negro cubre también el safe area de arriba: nada se ve por detrás y no queda hueco muerto. */ body:not([data-ruta="/reservar"]) .cab { height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--borde) 0; background: #000; border-bottom: 1px solid var(--linea); grid-template-columns: 1fr auto; transition: transform 0.4s var(--curva); } /* el círculo del menú y el botón de volver salen del armazón: el control es la palabra MENÚ, a la derecha */ body:not([data-ruta="/reservar"]) .cab .cab-izq { display: none; } /* el logo se va a la izquierda y ocupa la primera columna */ body:not([data-ruta="/reservar"]) .cab .cab-mid { grid-column: 1; justify-content: flex-start; } body:not([data-ruta="/reservar"]) .cab .marca { padding: 0; } body:not([data-ruta="/reservar"]) .cab .logo-img { height: 26px; } body:not([data-ruta="/reservar"]) .cab .cab-der { grid-column: 2; } /* el control del menú: tres rayitas, 44px de alto real para el dedo */ .cab-menu { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 2px; background: none; border: 0; color: var(--blanco); font-family: var(--ui); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: color 0.3s var(--curva); } .cab-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; } .cab-menu:focus-visible { outline: 1px solid var(--oro); outline-offset: 4px; color: var(--oro); } .cab-menu[aria-expanded="true"] { color: var(--oro); } /* LA BARRA ES NEGRA SIEMPRE, tambien sobre la portada. Antes se volvía transparente mientras duraba el hero, y al bajar se le colaba por debajo el blanco de la sección siguiente: se veía una franja clara encima del logo. Feo y sin sentido. Ahora es el mismo negro del fondo del logo, sólido, y nada se ve por detrás. La barra NO se traslada nunca: el logo del hero se ancla a ella por getBoundingClientRect y moverla le arruinaría el aterrizaje. */ body[data-heroe="si"] .cab, body[data-heroe="si"] .cab.pegada { background: #000 !important; border-bottom-color: var(--linea) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .cab-menu { transition: color 0.3s var(--curva); } /* el "libre más cercano" era una cápsula con borde: otra barrita. Ahora es una línea de texto y ya. */ body[data-ruta="/"] .portada .vivo { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ── 3 · el menú: capa editorial a pantalla completa ──────── */ /* Cortina vertical con clip-path, no un fade genérico. Sin blur, sin glassmorphism: negro sólido. */ .menu { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; padding: calc(env(safe-area-inset-top) + 18px) var(--borde) calc(28px + env(safe-area-inset-bottom)); opacity: 1; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 0.52s var(--curva), visibility 0.52s; } .menu[data-abierto="si"] { visibility: visible; clip-path: inset(0 0 0 0); } .menu-cab { margin-bottom: 34px; } .menu-cab .logo-img { height: 22px; } .menu-lista { margin-top: 0; } .menu-lista a { grid-template-columns: auto 1fr auto; gap: 16px; padding: 20px 0; min-height: 44px; border-bottom: 1px solid var(--linea); font-size: 1.75rem; line-height: 1; letter-spacing: -0.005em; } .menu-lista a:first-child { border-top: 1px solid var(--linea); } .menu-lista a .n { font-size: 0.56rem; letter-spacing: 0.2em; color: var(--texto-2); opacity: 1; } /* el último enlace es el que importa: va en dorado */ .menu-lista a.menu-book { color: var(--oro); } .menu-lista a.menu-book .n { color: var(--oro); opacity: 0.7; } /* los secundarios no compiten con los seis grandes */ .menu-extra { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 26px; } .menu-extra a { font-family: var(--ui); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-2); min-height: 44px; display: inline-flex; align-items: center; } .menu-extra a:focus-visible { outline: 1px solid var(--oro); outline-offset: 3px; color: var(--oro); } /* ── 4 · el pie recoge el ES/EN que salió de arriba ───────── */ /* El ES/EN del pie: se ve, se toca y ya no es una píldora amarilla rellena. Dos palabras separadas por una línea fina; la activa va en el oro del logo, que aquí sí se lee porque el pie es negro. */ .pie-idioma { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); width: 100%; } .pie-idioma::before { content: "Idioma / Language"; font-family: var(--ui); font-size: .5rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.4); } .pie-idioma .idioma { border: 0; border-radius: 0; gap: 0; } .pie-idioma .idioma button { background: none !important; color: rgba(255,255,255,.5) !important; font-size: .62rem; font-weight: 400; letter-spacing: .18em; padding: 10px 10px; min-height: 44px; border-bottom: 1px solid transparent; border-radius: 0; } .pie-idioma .idioma button + button { border-left: 1px solid rgba(255,255,255,.16); } .pie-idioma .idioma button[aria-pressed="true"] { color: #eacc47 !important; border-bottom-color: #eacc47; } .pie-idioma .idioma button:focus-visible { outline: 1px solid #eacc47; outline-offset: 3px; } /* ── 5 · movimiento reducido ──────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .menu { transition: visibility 0.01s; } .menu[data-abierto="si"] { clip-path: none; } .menu-lista a { transform: none; opacity: 1; transition: none; } body[data-heroe="si"] .cab { transform: none; } } }