/* ========================================================================== layout.css — Fase 2: header, navegación y footer -------------------------------------------------------------------------- Depende de tokens.css, base.css y components.css (el botón). Fuentes: - Figma → medidas, color, tipografía (DISENO.md §9.1). - Original → menú móvil y comportamiento (ANIMACIONES.md §5.6 y §5.6b). El Figma no tiene diseño móvil; por debajo de 992px manda el original. ========================================================================== */ /* ========================================================================== 1. HEADER ========================================================================== */ /* Estático a propósito: ni sticky ni hide-on-scroll. Verificado contra el original en los tres breakpoints (ANIMACIONES.md §5.6b). `position: relative` está aquí porque el panel del menú móvil se ancla a él. */ .site-header { position: relative; z-index: var(--z-nav); /* El gutter lateral lo pone el padding del body. */ margin: 0 0 var(--page-gutter); padding-block: var(--space-3); background-color: var(--color-surface); border-bottom-left-radius: var(--radius-nav); border-bottom-right-radius: var(--radius-nav); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); /* 63px de alto total − 12px de padding arriba y abajo */ min-height: calc(var(--nav-height) - var(--space-3) * 2); } /* ------------------------------------------------------------------ */ /* 1.1 Logo */ /* ------------------------------------------------------------------ */ .site-logo { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); color: var(--color-text); text-decoration: none; white-space: nowrap; } /* El punto es el único uso de este color en todo el sitio. */ .site-logo__dot { color: var(--accent-logo-dot); } /* ------------------------------------------------------------------ */ /* 1.2 Navegación */ /* ------------------------------------------------------------------ */ .site-nav { display: flex; align-items: center; gap: var(--space-10); } .site-nav__list { display: flex; align-items: center; gap: var(--space-8); list-style: none; margin: 0; padding: 0; } .site-nav__link { display: inline-block; /* Figma: cada enlace lleva 7px arriba y abajo. Es lo que hace que la fila mida 39px de alto —16 × 1.2 + 14— y el nav 63px con sus 12px de padding. */ padding-block: 7px; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body); line-height: var(--lh-heading); letter-spacing: var(--ls-none); color: var(--nav-link); text-decoration: none; transition: color var(--dur-hover) var(--ease-out-quint); } /* Hover decidido en la revisión de la Fase 0: no existe ni en el Figma ni en el original, y se alinea con el del botón (#333 → #000, 200 ms). */ .site-nav__link:hover, .site-nav__link:focus-visible { color: var(--nav-link-hover); } /* Estado activo SIN JavaScript: lo decide `data-nav` en , de modo que el bloque compartido del header es idéntico byte a byte en las 9 páginas. js/nav.js añade encima el `aria-current` para lectores de pantalla. */ body[data-nav="home"] .site-nav__link[data-nav-key="home"], body[data-nav="about"] .site-nav__link[data-nav-key="about"], body[data-nav="projects"] .site-nav__link[data-nav-key="projects"] { color: var(--nav-link-active); text-decoration: underline; text-underline-offset: var(--space-1); } /* ------------------------------------------------------------------ */ /* 1.3 Botón hamburguesa */ /* ------------------------------------------------------------------ */ /* Oculto en escritorio. Se muestra a partir de 991px, donde el original lo dibuja como un cuadrado negro de 40px con esquinas de 12px. */ .nav-toggle { display: none; padding: 0; border: 0; background: none; cursor: pointer; } /* ========================================================================== 2. FOOTER ========================================================================== */ .site-footer { margin-top: var(--page-gutter); } /* ------------------------------------------------------------------ */ /* 2.0 Bloque de sección blanco */ /* ------------------------------------------------------------------ */ /* Cada sección de contenido es una caja blanca de radio 20px separada 12px de la anterior. Lo comparten Home, About y las de proyecto. */ .section-card { margin-top: var(--page-gutter); padding-block: var(--gap-section); background-color: var(--color-surface); border-radius: var(--radius-card); } .site-footer__box { background-color: var(--color-footer-bg); border-radius: var(--radius-card); padding-block: var(--gap-section) var(--space-6); } /* Ver el comentario de --footer-inner-h: el Figma deja 34px de aire bajo el botón que no salen de ningún padding, sino de un frame de altura fija. */ .site-footer__box > .container { min-height: var(--footer-inner-h); } .site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-10); padding-bottom: var(--gap-block); } .site-footer__connect { max-width: var(--measure-footer); } .site-footer__title { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); color: var(--color-footer-heading); } .site-footer__text { margin-top: var(--space-5); font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); letter-spacing: var(--ls-micro); color: var(--color-text-invert); } .site-footer__cta { margin-top: var(--space-8); } /* ------------------------------------------------------------------ */ /* 2.1 Follow Me */ /* ------------------------------------------------------------------ */ /* "Follow Me" y los iconos van en fila, no apilados. Figma: gap de 20px. */ .site-footer__social { display: flex; align-items: center; gap: var(--space-5); } .site-footer__social-title { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); line-height: var(--lh-heading); letter-spacing: var(--ls-micro); color: var(--color-text-invert); } .site-footer__social-list { display: flex; align-items: center; gap: var(--space-4); list-style: none; margin: 0; padding: 0; } .site-footer__social-link { display: block; line-height: 0; } .site-footer__social-icon { display: block; width: var(--space-6); height: var(--space-6); } /* El anillo de foco por defecto es negro; sobre la caja #333 no se ve. */ .site-footer :focus-visible { outline-color: var(--color-white); } /* ========================================================================== 3. Menú móvil — ≤ 991px -------------------------------------------------------------------------- Reconstruido a partir de `a-10` / `a-9` del original (ANIMACIONES.md §5.6). Timings y easing literales: 500 ms, linear. ========================================================================== */ @media screen and (max-width: 991px) { .nav-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; gap: var(--space-1); width: var(--space-10); height: var(--space-10); background-color: var(--color-text); border-radius: var(--space-3); overflow: hidden; } .nav-toggle__bar { width: 18px; height: 2px; background-color: var(--color-white); transition: transform var(--dur-nav-icon) var(--ease-linear); } /* Hamburguesa → X. Los desplazamientos son los del original. */ .nav-toggle[aria-expanded="true"] .nav-toggle__bar--1 { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar--2 { transform: translateX(50px); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar--3 { transform: translateY(-6px) rotate(-45deg); } /* Panel desplegable. El original usa `display: none → flex`; aquí se hace con visibility para poder animar la salida y no romper el foco. */ .site-nav { position: absolute; inset: 100% 0 auto 0; z-index: var(--z-menu); flex-direction: column; align-items: stretch; gap: var(--space-3); margin-inline: var(--container-padding); padding: var(--container-padding); background-color: var(--color-surface); border-radius: var(--radius-nav); box-shadow: var(--shadow-menu); opacity: 0; transform: translateY(30px); visibility: hidden; transition: opacity var(--dur-menu) var(--ease-linear), transform var(--dur-menu) var(--ease-linear), visibility 0s linear var(--dur-menu); } .site-nav[data-open="true"] { opacity: 1; transform: translateY(0); visibility: visible; transition-delay: 0s; } .site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-3); } /* Igual que en el original: dentro del panel el botón ocupa todo el ancho. */ .site-nav__cta { width: 100%; } /* Target táctil: 16 × 1.2 + 16 + 16 = 51px, por encima del mínimo de 44px que pide la Fase 6. Los 7px del Figma se quedan solo en escritorio. */ .site-nav__link { padding-block: var(--space-4); } /* Sin JS el panel no puede abrirse, así que se muestra siempre en su sitio. */ html:not(.js-enabled) .site-nav { position: static; margin-inline: 0; padding: var(--space-4) 0 0; background: none; box-shadow: var(--shadow-none); opacity: 1; transform: none; visibility: visible; } html:not(.js-enabled) .nav-toggle { display: none; } html:not(.js-enabled) .site-header__inner { flex-wrap: wrap; } } @media screen and (max-width: 767px) { /* El original reduce el marco del header de 12 a 10px. Ahora sale del token: --page-gutter también baja a 10px en este breakpoint. */ .site-header { margin-bottom: var(--page-gutter); padding-block: var(--page-gutter); } .site-footer__top { flex-direction: column; gap: var(--space-10); } .site-footer__title { font-size: var(--fs-h2-sm); } } /* ========================================================================== 4. Movimiento reducido ========================================================================== */ @media (prefers-reduced-motion: reduce) { .site-nav, .nav-toggle__bar, .site-nav__link { transition-duration: 1ms; } } /* ========================================================================== 5. Responsive del footer y targets táctiles ========================================================================== */ @media screen and (max-width: 991px) { /* Targets táctiles de 44px: el logo y el botón del nav son texto y se quedan cortos. Se les da altura mínima sin mover el layout. */ .site-logo { display: flex; align-items: center; min-height: 44px; } /* El original dibuja la hamburguesa de 40px. Se sube a 44 para cumplir el mínimo sin que se note. */ .nav-toggle { width: 44px; height: 44px; } /* Los iconos del footer miden 24px. Se les da área de pulsación hasta los 44px que pide la Fase 6, con margen negativo para no mover el layout. */ .site-footer__social-link { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -10px; } .site-footer__social-list { gap: var(--space-2); } /* El bloque interior del footer deja de tener alto mínimo: los 291px del Figma dejarían un hueco muerto cuando el contenido se apila. */ .site-footer__box > .container { min-height: 0; } } @media screen and (max-width: 479px) { .site-footer__social { flex-direction: column; align-items: flex-start; gap: var(--space-4); } }