/* Atelier Numen ยท cabecera unica * --------------------------------------------------------------------------- * Una sola cabecera para todo el sitio (10 sep 2026). Sustituye a las cinco que * habia (home, catalogo, La Casa, fichas "Collections", fichas "Unique") y al * parche mobile-nav.js, que reordenaba el DOM y rompio el header el 9 de sep. * * Tres zonas, siempre iguales: navegacion a la izquierda, logotipo en el centro, * utilidades pegadas al borde derecho. El selector de mercado es la ultima pieza * de la fila, nunca algo intercalado entre enlaces. * * AUTOCONTENIDA A PROPOSITO: las fichas de producto definen sus propias * variables (--paper es beige en unique.css, --serif es Newsreader, --ink casi * negro). Si la cabecera usara esas variables cambiaria de aspecto segun la * pagina, que es justo lo que se quiere evitar. Por eso todo cuelga de tokens * propios --h-*, declarados aqui y en ningun otro sitio. * * Se carga al final del , despues del CSS de cada pagina, para ganar a las * reglas viejas de .site-header con la misma especificidad. Donde la pagina usa * selectores mas especificos (`.site-header nav:first-child`) aqui se escribe * `.site-header .site-menu .site-nav` y se gana sin recurrir a !important. * --------------------------------------------------------------------------- */ :root { --an-header-h: 88px; } .site-header { --h-ink: #171715; --h-muted: #6b6963; --h-line: #d8d7d1; --h-paper: #fcfcfa; --h-soft: #f4f3ef; --h-serif: "Cormorant Garamond", Georgia, serif; --h-sans: "DM Sans", Arial, Helvetica, sans-serif; --h-pad: clamp(1.25rem, 4.6vw, 5rem); position: sticky; top: 0; right: auto; bottom: auto; left: auto; z-index: 200; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; height: auto; min-height: 88px; padding: 0 var(--h-pad); margin: 0; color: var(--h-ink); font-family: var(--h-sans); border: 0; border-bottom: 1px solid var(--h-line); background: rgba(252, 252, 250, .93); -webkit-backdrop-filter: saturate(1.15) blur(10px); backdrop-filter: saturate(1.15) blur(10px); transition: min-height .25s ease; } .site-header * { box-sizing: border-box; } .site-header .site-menu { display: contents; } .site-header .site-menu .site-nav { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: clamp(1.1rem, 2.1vw, 2rem); font-family: var(--h-sans); font-size: .68rem; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; } .site-header .site-menu .site-nav a { position: relative; padding: .3rem 0; color: inherit; text-decoration: none; white-space: nowrap; opacity: 1; } .site-header .site-menu .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .28s ease; } .site-header .site-menu .site-nav a:hover::after, .site-header .site-menu .site-nav a[aria-current]::after { transform: scaleX(1); } /* Los capitulos de una ficha larga solo aparecen dentro del panel estrecho: la barra visible es identica en todas las paginas. */ .site-header .site-menu .site-chapters { display: none; } .site-header .brand-lockup { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: .7rem; justify-self: center; color: inherit; text-decoration: none; } .site-header .brand-lockup img { width: 56px; height: 56px; display: block; object-fit: contain; transition: width .25s ease, height .25s ease; } .site-header .wordmark { font-family: var(--h-serif); font-size: 2.05rem; font-weight: 400; line-height: .8; letter-spacing: -.04em; text-transform: none; transition: font-size .25s ease; } .site-header .site-menu .site-utils { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: clamp(.9rem, 1.6vw, 1.5rem); } .site-header .site-menu .util-link { color: inherit; text-decoration: none; font-family: var(--h-sans); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid transparent; padding-bottom: .15rem; } .site-header .site-menu .util-link:hover { border-bottom-color: currentColor; } /* Cabecera condensada al bajar: el logotipo cede altura y el menu sigue a mano. */ .site-header[data-condensed="true"] { min-height: 62px; } .site-header[data-condensed="true"] .brand-lockup img { width: 36px; height: 36px; } .site-header[data-condensed="true"] .wordmark { font-size: 1.42rem; } /* Anclajes: que el destino no quede debajo de la cabecera fija. */ [id] { scroll-margin-top: 6.5rem; } /* --- Selector de mercado --------------------------------------------------- * Banderas solas no valen: aqui cambia la moneda, el impuesto y el destino de * envio, y eso no se lee en un emoji. El control dice pais Y moneda. Los cuatro * rotulos viajan en el HTML y el activo lo elige el CSS con data-locale (lo pone * el Worker), asi que no hay parpadeo ni dependencia de JS. * ------------------------------------------------------------------------- */ .site-header .market { position: relative; } .site-header .market-toggle { display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .8rem; border: 1px solid var(--h-line); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font-family: var(--h-sans); font-size: .63rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1; } .site-header .market-toggle:hover { border-color: var(--h-ink); opacity: 1; } .site-header .market-toggle::after { content: ""; width: 5px; height: 5px; margin-left: .1rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; transition: transform .2s ease; } .site-header .market-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); } .site-header .market-toggle .m-cur { color: var(--h-muted); } .site-header .market-toggle .m-flag { font-size: .95rem; line-height: 1; } .site-header .market-toggle > span[data-loc] { display: inline-flex; align-items: center; gap: .45rem; } /* Solo se ve el rotulo del mercado servido. */ html[data-locale] .site-header .market-toggle > span[data-loc] { display: none; } html[data-locale="es"] .site-header .market-toggle > span[data-loc="es"], html[data-locale="eu"] .site-header .market-toggle > span[data-loc="eu"], html[data-locale="uk"] .site-header .market-toggle > span[data-loc="uk"], html[data-locale="us"] .site-header .market-toggle > span[data-loc="us"] { display: inline-flex; } .site-header .market-menu { position: absolute; top: calc(100% + .55rem); right: 0; z-index: 10; min-width: 20rem; padding: .8rem; background: var(--h-paper); border: 1px solid var(--h-line); box-shadow: 0 18px 46px rgba(23, 23, 21, .14); font-family: var(--h-sans); color: var(--h-ink); text-align: left; } .site-header .market-menu-head { margin: 0 0 .5rem; padding: 0 .6rem; color: var(--h-muted); font-size: .57rem; letter-spacing: .17em; text-transform: uppercase; } .site-header .market-menu a { display: grid; grid-template-columns: 1.4rem 1fr; gap: .12rem .7rem; padding: .5rem .6rem; color: inherit; text-decoration: none; font-size: 1rem; letter-spacing: normal; text-transform: none; } .site-header .market-menu a:hover { background: var(--h-soft); opacity: 1; } .site-header .market-menu a .m-flag { grid-row: span 2; align-self: center; font-size: 1.05rem; } .site-header .market-menu a .m-name { font-size: .84rem; } .site-header .market-menu a .m-note { color: var(--h-muted); font-size: .68rem; line-height: 1.35; } .site-header .market-menu a[aria-current="true"] { background: var(--h-soft); box-shadow: inset 2px 0 0 var(--h-ink); } /* --- Boton de menu (solo en pantallas estrechas) --------------------------- */ .site-header .nav-toggle { display: none; grid-column: 1; grid-row: 1; justify-self: start; width: 42px; height: 42px; margin: 0 0 0 -10px; padding: 0; align-items: center; justify-content: center; background: none; border: 0; color: inherit; cursor: pointer; } .site-header .nav-toggle i { position: relative; display: block; width: 20px; height: 1px; margin: 0; background: currentColor; transition: background .2s ease; } .site-header .nav-toggle i::before, .site-header .nav-toggle i::after { content: ""; position: absolute; left: 0; width: 20px; height: 1px; background: currentColor; transition: transform .25s ease; } .site-header .nav-toggle i::before { top: -6px; } .site-header .nav-toggle i::after { top: 6px; } .site-header[data-menu-open="true"] .nav-toggle i { background: transparent; } .site-header[data-menu-open="true"] .nav-toggle i::before { transform: translateY(6px) rotate(45deg); } .site-header[data-menu-open="true"] .nav-toggle i::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1024px) { :root { --an-header-h: 68px; } .site-header { grid-template-columns: 1fr auto 1fr; min-height: 68px; } .site-header .nav-toggle { display: flex; } .site-header .brand-lockup img { width: 42px; height: 42px; } .site-header .wordmark { font-size: 1.65rem; } .site-header[data-condensed="true"] { min-height: 68px; } .site-header[data-condensed="true"] .brand-lockup img { width: 42px; height: 42px; } .site-header[data-condensed="true"] .wordmark { font-size: 1.65rem; } .site-header .site-menu { display: block; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100svh - 68px); overflow-y: auto; padding: .3rem var(--h-pad) 1.4rem; background: var(--h-paper); border-bottom: 1px solid var(--h-line); box-shadow: 0 22px 42px rgba(23, 23, 21, .11); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .site-header[data-menu-open="true"] .site-menu { opacity: 1; visibility: visible; transform: none; } .site-header .site-menu .site-nav { display: block; font-size: .74rem; } .site-header .site-menu .site-nav a { display: block; padding: 1rem 0; border-bottom: 1px solid var(--h-line); } .site-header .site-menu .site-nav a::after { display: none; } .site-header .site-menu .site-nav a[aria-current] { color: var(--h-muted); } .site-header .site-menu .site-chapters { display: block; margin-top: 1.1rem; } .site-header .site-menu .site-chapters .site-chapters-head { margin: 0 0 .2rem; color: var(--h-muted); font-size: .57rem; letter-spacing: .17em; text-transform: uppercase; } .site-header .site-menu .site-chapters a { font-size: .72rem; padding: .8rem 0; } .site-header .site-menu .site-utils { display: block; margin-top: 1.15rem; } .site-header .site-menu .util-link { display: inline-block; margin-bottom: 1.1rem; font-size: .74rem; } .site-header .market { position: static; } .site-header .market-toggle { width: 100%; justify-content: space-between; border-radius: 0; padding: .75rem .9rem; } .site-header .market-menu { position: static; margin-top: .5rem; min-width: 0; box-shadow: none; } } /* --- Franja de aviso sobre la cabecera ------------------------------------- * Hoy solo la usan las tres fichas "Unique Jewelry" (.topline). Alli iba en * absoluto sobre el heroe oscuro; con la cabecera fija pasa a ser una franja * normal que se va al bajar, y se pinta clara para que se lea sobre papel. * ------------------------------------------------------------------------- */ .topline { position: relative; inset: auto; z-index: 1; height: auto; min-height: 34px; padding: .5rem 1rem; color: #6b6963; background: #f4f3ef; border-bottom: 1px solid #d8d7d1; -webkit-backdrop-filter: none; backdrop-filter: none; } .topline p { font-family: "DM Sans", Arial, Helvetica, sans-serif; font-size: .58rem; letter-spacing: .17em; text-transform: uppercase; text-align: center; }