/* ══════════════════════════════════════════════════════════════════ COMPONENTES — nav, cursor, preloader, marquee, modal, toast, etc. ══════════════════════════════════════════════════════════════════ */ /* ---------- Barra de progreso de scroll ---------- */ .progress-bar { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); z-index: var(--z-progress); pointer-events: none; } /* ---------- Navegación ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); transition: transform 0.4s var(--ease), background 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(5, 8, 15, 0.82); backdrop-filter: blur(14px); border-bottom-color: var(--line); } .nav.hidden { transform: translateY(-100%); } .nav__inner { max-width: var(--container); margin-inline: auto; padding: 0.9rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nav__logo { font-size: 1.05rem; font-weight: 700; color: var(--txt-1); letter-spacing: 0.02em; transition: opacity 0.2s; } .nav__logo:hover { opacity: 0.85; } .nav__logo-bracket { color: var(--txt-3); } .nav__logo-accent { color: var(--mint); } .nav__links ul { display: flex; gap: 1.9rem; } .nav__links a { font-size: 0.92rem; color: var(--txt-2); position: relative; padding-block: 0.3rem; transition: color 0.25s; } .nav__links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s var(--ease); } .nav__links a:hover, .nav__links a.active { color: var(--txt-1); } .nav__links a:hover::after, .nav__links a.active::after { transform: scaleX(1); } .nav__actions { display: flex; align-items: center; gap: 0.9rem; } .nav__icon-btn { display: inline-flex; padding: 0.45rem; border-radius: var(--r-sm); color: var(--txt-2); transition: color 0.25s, background 0.25s, transform 0.25s; } .nav__icon-btn:hover { color: var(--mint); background: rgba(0, 229, 160, 0.08); transform: translateY(-1px); } .nav__icon-btn svg { width: 19px; height: 19px; } /* Selector de idioma ES / EN */ .lang-toggle { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.7rem; font-size: 0.8rem; border: 1px solid var(--line); border-radius: var(--r-full); background: rgba(14, 22, 38, 0.5); transition: border-color 0.25s; } .lang-toggle:hover { border-color: var(--line-strong); } .lang-toggle__sep { color: var(--txt-3); } .lang-toggle__opt { color: var(--txt-3); transition: color 0.2s; } .lang-toggle__opt.active { color: var(--mint); font-weight: 700; } /* Burger (solo móvil) */ .nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border-radius: var(--r-sm); } .nav__burger span { display: block; height: 2px; width: 100%; background: var(--txt-1); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; } .nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger.open span:nth-child(2) { opacity: 0; } .nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Overlay del menú móvil */ .nav__menu { position: fixed; inset: 0; background: rgba(5, 8, 15, 0.96); backdrop-filter: blur(18px); display: flex; flex-direction: column; align-items: center; gap: 2.75rem; /* deja libre la barra superior y permite scroll si no cabe (móvil apaisado) */ padding: 5.5rem 1.5rem 2.5rem; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s; /* justo debajo de la barra del nav: el logo y el burger quedan encima (el overlay es hijo de , no del header — ver index.html) */ z-index: calc(var(--z-nav) - 1); } .nav__menu.open { opacity: 1; visibility: visible; } /* margin auto arriba/abajo: centrado vertical cuando cabe, scroll normal desde arriba cuando no cabe */ .nav__menu ul { display: flex; flex-direction: column; gap: clamp(1rem, 3vh, 1.5rem); text-align: center; margin-top: auto; } .nav__menu a { opacity: 0; transform: translateY(14px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color 0.25s; } .nav__menu.open a { opacity: 1; transform: none; } .nav__menu a:hover { color: var(--mint); } .nav__menu ul a { font-size: clamp(1.45rem, 6vw, 1.8rem); font-weight: 600; color: var(--txt-1); display: inline-flex; align-items: baseline; gap: 0.8rem; } .nav__menu ul a:hover, .nav__menu ul a.active { color: var(--mint); } .nav__menu-num { font-size: 0.85rem; color: var(--mint); } .nav__menu-foot { display: flex; gap: 1.6rem; font-size: 0.85rem; color: var(--txt-3); margin-bottom: auto; } .nav__menu-foot a:hover { color: var(--mint); } /* Retardo escalonado de los enlaces del menú */ .nav__menu.open li:nth-child(1) a { transition-delay: 0.05s; } .nav__menu.open li:nth-child(2) a { transition-delay: 0.10s; } .nav__menu.open li:nth-child(3) a { transition-delay: 0.15s; } .nav__menu.open li:nth-child(4) a { transition-delay: 0.20s; } .nav__menu.open li:nth-child(5) a { transition-delay: 0.25s; } .nav__menu.open li:nth-child(6) a { transition-delay: 0.30s; } .nav__menu.open .nav__menu-foot a { transition-delay: 0.35s; } /* ---------- Cursor personalizado (desktop) ---------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; z-index: var(--z-cursor); opacity: 0; } .cursor-dot { width: 6px; height: 6px; background: var(--mint); transform: translate(-50%, -50%); } .cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(0, 229, 160, 0.45); transform: translate(-50%, -50%); transition: width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s, background 0.25s; } html.custom-cursor .cursor-dot, html.custom-cursor .cursor-ring { opacity: 1; } html.custom-cursor.cursor-hidden .cursor-dot, html.custom-cursor.cursor-hidden .cursor-ring { opacity: 0; } html.custom-cursor .cursor-ring.hovering { width: 52px; height: 52px; border-color: rgba(0, 229, 160, 0.9); background: rgba(0, 229, 160, 0.07); } /* Con cursor propio activo, el nativo se atenúa (no se oculta del todo para no perder usabilidad en elementos no controlados) */ html.custom-cursor, html.custom-cursor a, html.custom-cursor button { cursor: none; } /* Con un modal abierto se vuelve al cursor nativo: la top layer se pinta por encima del punto/anillo (ningún z-index compite ahí) y el cursor:none heredado dejaría al usuario "sin ratón" dentro del modal. :has() reacciona al atributo [open] en el mismo frame; cursor.js hace además lo propio desde JS (suspend/resume) para navegadores sin :has. */ html.custom-cursor:has(dialog[open]) { cursor: auto; } html.custom-cursor:has(dialog[open]) a, html.custom-cursor:has(dialog[open]) button { cursor: pointer; } html.custom-cursor:has(dialog[open]) .cursor-dot, html.custom-cursor:has(dialog[open]) .cursor-ring { opacity: 0; } /* ---------- Preloader estilo terminal ---------- */ .preloader { position: fixed; inset: 0; background: var(--bg-0); z-index: var(--z-preloader); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s var(--ease), visibility 0.5s; } .preloader.done { opacity: 0; visibility: hidden; pointer-events: none; } .preloader__box { font-family: var(--font-mono); font-size: 0.95rem; color: var(--txt-2); } .preloader__box .t-ok { color: var(--mint); } .preloader__line { opacity: 0; animation: pre-line 0.3s forwards; } .preloader__line:nth-child(2) { animation-delay: 0.28s; } .preloader__line:nth-child(3) { animation-delay: 0.55s; } @keyframes pre-line { to { opacity: 1; } } /* ---------- Marquee de tecnologías ---------- */ .marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.05rem; background: rgba(10, 16, 28, 0.4); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; align-items: center; width: max-content; animation: marquee 34s linear infinite; font-size: 0.95rem; color: var(--txt-2); letter-spacing: 0.06em; will-change: transform; } /* scrollfx.js agrupa el contenido en dos .marquee__group idénticos; el espaciado va como margin en cada span (y no como gap del track) para que translateX(-50%) caiga EXACTO al inicio de la 2ª copia. */ .marquee__group { display: flex; align-items: center; } .marquee__track span { white-space: nowrap; margin-right: 2.6rem; } .marquee__star { color: var(--mint); font-size: 0.7rem; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- Botón volver arriba ---------- */ .back-to-top { position: fixed; bottom: 1.6rem; left: 1.6rem; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: rgba(10, 16, 28, 0.8); backdrop-filter: blur(8px); color: var(--txt-2); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--ease), color 0.25s, border-color 0.25s; z-index: var(--z-chat); } .back-to-top.visible { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { color: var(--mint); border-color: rgba(0, 229, 160, 0.5); } .back-to-top svg { width: 18px; height: 18px; } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 2rem; left: 50%; transform: translate(-50%, 20px); padding: 0.7rem 1.3rem; background: var(--panel-solid); border: 1px solid rgba(0, 229, 160, 0.4); border-radius: var(--r-full); color: var(--txt-1); font-size: 0.85rem; box-shadow: var(--shadow-1); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s; z-index: var(--z-toast); pointer-events: none; } .toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* ---------- Modal de proyecto () ---------- */ .pdialog { width: min(680px, calc(100vw - 2rem)); max-height: min(82vh, 720px); background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--txt-2); padding: 0; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); /* centrado nativo del dialog */ margin: auto; } .pdialog::backdrop { background: rgba(3, 5, 10, 0.7); backdrop-filter: blur(6px); } .pdialog[open] { animation: dialog-in 0.3s var(--ease); } @keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } } .pdialog__close { position: absolute; top: 0.9rem; right: 0.9rem; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(5, 8, 15, 0.6); color: var(--txt-2); transition: color 0.2s, border-color 0.2s; z-index: 2; } .pdialog__close:hover { color: var(--mint); border-color: rgba(0, 229, 160, 0.5); } .pdialog__close svg { width: 17px; height: 17px; } .pdialog__content { overflow-y: auto; max-height: inherit; } .pdialog__cover { height: 150px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 3rem; font-weight: 700; position: relative; overflow: hidden; } .pdialog__body { padding: 1.6rem 1.8rem 2rem; } .pdialog__body h3 { font-size: 1.45rem; margin-bottom: 0.35rem; } .pdialog__status { margin-bottom: 1rem; font-size: 0.82rem; } .pdialog__status--online { color: var(--mint); } .pdialog__status--wip { color: var(--warn); } .pdialog__desc { margin-bottom: 1.3rem; } .pdialog__sub { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mint); margin-bottom: 0.6rem; } .pdialog__highlights { margin-bottom: 1.3rem; } .pdialog__highlights li { position: relative; padding-left: 1.3rem; margin-bottom: 0.4rem; } .pdialog__highlights li::before { content: '▹'; position: absolute; left: 0; color: var(--mint); } .pdialog__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .pdialog__links { display: flex; flex-wrap: wrap; gap: 0.8rem; } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--line); padding-block: 2.2rem; background: rgba(5, 8, 15, 0.6); } .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; } .footer__copy { font-size: 0.88rem; color: var(--txt-3); } .footer__stack { font-size: 0.75rem; color: var(--txt-3); letter-spacing: 0.05em; } .footer__links { display: flex; gap: 0.6rem; } .footer__links a { display: inline-flex; padding: 0.45rem; color: var(--txt-3); border-radius: var(--r-sm); transition: color 0.25s, transform 0.25s; } .footer__links a:hover { color: var(--mint); transform: translateY(-2px); } .footer__links svg { width: 18px; height: 18px; } /* ---------- Estado "menú móvil abierto" (body.menu-open, ver nav.js) ---------- Nada debe flotar por encima del overlay: el chat y "volver arriba" viven en z-index superior al nav, así que se ocultan mientras tanto. */ body.menu-open .chat, body.menu-open .back-to-top, body.menu-open .progress-bar { opacity: 0; visibility: hidden; pointer-events: none; } /* ---------- Responsive de componentes ---------- */ @media (max-width: 860px) { .nav__links { display: none; } .nav__burger { display: flex; } } /* En escritorio el overlay móvil no existe: aunque quedara abierto al redimensionar, nunca tapa la página (nav.js además lo cierra solo) */ @media (min-width: 861px) { .nav__menu { display: none; } } @media (max-width: 480px) { .lang-toggle { padding: 0.35rem 0.55rem; } .nav__icon-btn { display: none; } /* GitHub ya está en el menú móvil */ .back-to-top { bottom: 1.1rem; left: 1.1rem; width: 40px; height: 40px; } }