/** * Cabecera fija, menú desplegable y pie. * * El color del header lo decide la sección que tiene debajo: nav.js escribe * --header-ink según el data-theme de la sección visible en ese punto. */ /* --- Barra de administración ---------------------------------------------- */ /* Con la sesión iniciada WordPress fija su barra sobre el viewport y empuja el documento con un margen en . Los elementos fijos no se enteran de ese margen y quedan por debajo de la barra, así que se les descuenta su altura. Mide 32 px y 46 px en pantallas angostas. Se usan dos medidas porque no siempre coinciden: --admin-bar-h es lo que la barra le roba al documento de forma permanente —lo que hay que compensar al saltar a un ancla— y --admin-bar-offset lo que en este momento tienen que bajar los elementos fijos para no quedar debajo de ella. */ body.admin-bar { --admin-bar-h: 32px; --admin-bar-offset: var(--admin-bar-h); } @media screen and (max-width: 782px) { body.admin-bar { --admin-bar-h: 46px; } } /* Por debajo de 600 px WordPress deja de fijar la barra: se va con el scroll, así que no hay nada que compensar en los saltos. Pero mientras sigue a la vista —al principio, entera— la cabecera, que sí es fija, la taparía. Se arranca con su altura y nav.js va escribiendo lo que queda a la vista. */ @media screen and (max-width: 600px) { body.admin-bar { --admin-bar-h: 0px; --admin-bar-offset: 46px; } } /* En el diseño la cabecera es una banda clara sobre la foto del hero, no una capa transparente encima. Se mantiene fija y se retira al bajar. */ .silo-header { position: fixed; inset: var(--admin-bar-offset, 0px) 0 auto; z-index: var(--z-header); height: var(--header-h); background: var(--c-off-white); color: var(--c-black); transition: transform var(--t-slow) var(--ease), height var(--t-slow) var(--ease); } .silo-header.is-hidden { transform: translateY(-100%); } /* Al bajar del hero la banda se compacta para no comerse la pantalla. */ .silo-header.is-compact { height: var(--header-h-compact); } .silo-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: min(var(--content), 100% - 2 * var(--pad)); height: 100%; margin-inline: auto; } /* En las fichas de proyecto, entre el logotipo y el botón del menú. */ .silo-header__back { margin-left: auto; margin-right: clamp(1.5rem, 4.2vw, 5rem); font-size: var(--fs-md); font-weight: var(--fw-light); } /* El contenido arranca justo debajo de la banda. */ .silo-header + .silo-nav + main, main { padding-top: var(--header-h); } /* --- Logotipo ------------------------------------------------------------- */ .silo-logo { display: block; width: clamp(4.5rem, 5.93vw, 7.12rem); /* 114px */ } .silo-logo:hover { opacity: 1; } .silo-logo svg { width: 100%; height: auto; } /* El trazo del logotipo sigue al color del header; el punto de la "i" conserva siempre el cian de la marca. */ .silo-logo svg path { fill: currentColor; transition: fill var(--t-fast) var(--ease); } .silo-logo svg path[fill="#00ffff"] { fill: var(--c-accent); } .silo-logo__text { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: lowercase; } /* --- Botón del menú ------------------------------------------------------- */ /* Tres trazos de 70x2 px separados 20.5 px, alineados al borde derecho. */ .silo-burger { display: grid; place-items: center; width: clamp(2.75rem, 3.65vw, 4.375rem); height: clamp(2.25rem, 2.24vw, 2.6875rem); } .silo-burger__lines, .silo-burger__lines::before, .silo-burger__lines::after { display: block; width: clamp(2.75rem, 3.65vw, 4.375rem); height: 2px; background: currentColor; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); } .silo-burger__lines { position: relative; } .silo-burger__lines::before, .silo-burger__lines::after { content: ""; position: absolute; left: 0; } .silo-burger__lines::before { top: clamp(-1.0625rem, -1.07vw, -0.75rem); } .silo-burger__lines::after { top: clamp(0.75rem, 1.07vw, 1.0625rem); } .silo-burger[aria-expanded="true"] .silo-burger__lines { background: transparent; } .silo-burger[aria-expanded="true"] .silo-burger__lines::before { top: 0; transform: rotate(45deg); } .silo-burger[aria-expanded="true"] .silo-burger__lines::after { top: 0; transform: rotate(-45deg); } /* --- Menú desplegado ------------------------------------------------------ */ .silo-nav { position: fixed; inset: var(--admin-bar-offset, 0px) 0 0; z-index: var(--z-overlay); display: grid; background: var(--c-off-white); color: var(--c-black); } .silo-nav[hidden] { display: none; } .silo-nav.is-animating { animation: silo-nav-in var(--t-slow) var(--ease) both; } @keyframes silo-nav-in { from { opacity: 0; transform: translateY(-1.5rem); } } .silo-nav__inner { display: grid; grid-template-columns: 1fr auto; align-items: end; align-content: center; column-gap: var(--s-5); width: min(var(--content), 100% - 2 * var(--pad)); padding-block: var(--header-h) var(--s-6); } .silo-nav__list { display: grid; font-size: var(--fs-menu); font-weight: var(--fw-light); line-height: var(--lh-menu); } .silo-nav__list a { display: inline-block; } .silo-nav__list a:hover { opacity: 1; color: var(--c-grey-mid); } .silo-nav__social { display: flex; gap: clamp(1.5rem, 3.5vw, 4.2rem); /* 84px entre IG, FB, LI y MAIL */ align-self: end; padding-bottom: 0.6em; font-size: var(--fs-sm); letter-spacing: var(--ls-wide); } @media (max-width: 768px) { .silo-nav__inner { grid-template-columns: 1fr; align-content: center; row-gap: var(--s-6); } .silo-nav__social { gap: var(--s-4); padding-bottom: 0; } } /* --- Pie ------------------------------------------------------------------ */ .silo-footer { padding-block: var(--s-3) var(--s-4); background: var(--c-off-white); color: var(--c-black); } /* Marca centrada que abre el pie. */ .silo-footer__mark { margin-bottom: var(--s-5); text-align: center; } .silo-footer__mark a { display: inline-block; width: clamp(3rem, 3.28vw, 3.9375rem); /* 63px */ } .silo-footer__mark svg path { fill: var(--c-black); } .silo-footer__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-4); } .silo-footer__email { font-size: var(--fs-md); font-weight: var(--fw-light); } .silo-footer__location { margin-top: 0.4em; font-size: var(--fs-xxs); letter-spacing: 0.06em; text-transform: uppercase; } /* Círculos de 56 px con 28 px de separación, apoyados en el borde derecho. */ .silo-footer__social { display: flex; gap: clamp(0.75rem, 1.46vw, 1.75rem); font-size: var(--fs-sm); letter-spacing: var(--ls-wide); } .silo-footer__social a { display: grid; place-items: center; width: clamp(2.75rem, 2.92vw, 3.5rem); height: clamp(2.75rem, 2.92vw, 3.5rem); border: 1px solid var(--c-black); border-radius: 50%; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .silo-footer__social a:hover { opacity: 1; background: var(--c-black); color: var(--c-off-white); } .silo-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-5); color: var(--c-grey); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-wide); } /* Los créditos son el único enlace de la línea legal: el subrayado sólo aparece al pasar el puntero para no romper el remate limpio del diseño. */ .silo-footer__credits:hover, .silo-footer__credits:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; } @media (max-width: 600px) { .silo-footer__top, .silo-footer__legal { flex-direction: column; } }