/* ========================================================================== story-sections.css Recorrido por secciones SIN scroll: un overlay a pantalla completa con paneles superpuestos. Se navega con botones Next / Back. 01 About · 02 Arsenal · 03 Experience · 04 Education. Fondo tenue tipo matrix (background.png). Logica en story-sections.js. Standalone overlay — NO se genera desde SASS. Cargar en index.html. ========================================================================== */ :root { --st-green: var(--cy-green, #2bf58f); --st-cyan: var(--cy-cyan, #19d9ff); --st-pink: var(--cy-pink, #ff2e88); --st-text: var(--cy-text, #e6f1f5); --st-muted: var(--cy-muted, #8499a8); --st-line: var(--cy-line, #1b2737); --st-bg: var(--cy-bg, #04070d); } /* ------------------------------------ boton "Next" del hero (abre overlay) -- */ /* reserva el hero como primera pantalla; about empieza tras el pliegue. En <=1200px el #iterm pasa al flujo y ya aporta altura -> reserva minima. */ .hero-spacer { flex-shrink: 0; pointer-events: none; height: 6em; } @media screen and (min-width: 1201px) { .hero-spacer { height: calc(100vh - 14em); } } /* ------------------------------ pagina continua, full-bleed bajo el hero -- */ .story { position: relative; z-index: 2; flex-shrink: 0; /* el es flex de altura fija: no comprimir */ width: 100vw; margin-left: calc(-50vw + 50%); /* transparente: deja ver el mismo #bg del hero en vez de tapar con negro */ background: transparent; } /* fondo tenue tipo matrix + glow, cubre todas las secciones */ .story::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1100px 700px at 85% 0%, rgba(var(--cy-green-rgb, 43, 245, 143), 0.05), transparent 55%), radial-gradient(900px 600px at 0% 100%, rgba(var(--cy-cyan-rgb, 25, 217, 255), 0.045), transparent 55%), url("../../background.png"); background-repeat: no-repeat, no-repeat, repeat; background-size: auto, auto, 650px auto; /* matrix tenue: antes 0.85 tapaba todo y se veia negro/opaco */ opacity: 0.18; } /* cada seccion ocupa una pantalla: el "Next" desliza a la siguiente */ .story-section { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 12vh clamp(1.4em, 5vw, 3em) 9vh; box-sizing: border-box; } /* centra horizontalmente cada bloque de la seccion */ .story-section > * { width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto; } .story-section > * + * { margin-top: 1.6em; } /* pie de seccion con el boton Next */ .sec-foot { margin-top: 3.4vh; text-align: center; } /* boton Next / Back-to-top (ancla deslizante) y el del hero comparten estilo. Discreto: texto tenue, borde sutil, sin relleno; se ilumina al hover. */ .story-start, .sec-next { display: inline-flex; align-items: center; gap: 0.5em; padding: 7px 16px; background: transparent; border: 1px solid var(--st-line); border-radius: 7px; color: var(--st-muted); font: inherit; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.75; cursor: pointer; transition: opacity 0.25s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .story-start:hover, .sec-next:hover { opacity: 1; color: var(--st-green); border-color: rgba(var(--cy-green-rgb, 43, 245, 143), 0.45); background: rgba(var(--cy-green-rgb, 43, 245, 143), 0.05); } .sec-next .arr, .story-start .arr { animation: cue-bounce 1.8s ease-in-out infinite; } /* el boton del hero flota abajo al centro y se desvanece al bajar */ .story-start { position: fixed; left: 50%; bottom: 2.4em; transform: translateX(-50%); z-index: 7; } body.past-hero .story-start { opacity: 0; pointer-events: none; } /* desvanecer los floaters del hero (#header / #iterm) al pasar el hero: el es el scroller, asi que esos absolutes se comportan como fixed. */ #header { transition: opacity 0.45s ease, transform 0.45s ease; } body.past-hero #header, body.past-hero #iterm { opacity: 0; pointer-events: none; transform: translateY(-14px); } /* --------------------------------------------------- encabezados -- */ .st-eyebrow { font-size: 12px; letter-spacing: 3px; color: var(--st-green); text-transform: uppercase; margin: 0 0 0.8em; display: inline-block; } .st-eyebrow::before { content: "[ "; color: var(--st-muted); } .st-eyebrow::after { content: " ]"; color: var(--st-muted); } .st-title { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; font-weight: 700; margin: 0 0 0.7em; color: var(--st-text); letter-spacing: -0.5px; } .st-title .ac { color: var(--st-green); } .st-lead { color: var(--st-muted); font-size: 1rem; line-height: 1.7; max-width: 46ch; margin: 0 0 1.2em; } .st-lead a { color: var(--st-cyan); text-decoration: none; border-bottom: 1px dashed rgba(25, 217, 255, 0.4); } .st-lead a:hover { color: #fff; } /* ============================================================ 01 ABOUT == */ .st-about { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.6em; align-items: start; } .st-about-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .st-card { position: relative; background: linear-gradient(180deg, rgba(10, 15, 24, 0.85), rgba(4, 7, 13, 0.85)); border: 1px solid var(--st-line); border-radius: 12px; padding: 16px 16px 18px; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .st-card:hover { border-color: rgba(var(--cy-green-rgb, 43, 245, 143), 0.45); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--cy-green-rgb, 43, 245, 143), 0.08); } .st-card .ic { font-size: 1.5rem; display: block; margin-bottom: 8px; } .st-card h3 { margin: 0 0 4px; font-size: 0.98rem; color: var(--st-text); font-weight: 600; } .st-card p { margin: 0; font-size: 0.82rem; line-height: 1.55; color: var(--st-muted); } /* ========================================================== 02 ARSENAL == */ .st-arsenal-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6em 2.2em; margin-top: 1.4em; } .st-group h4 { margin: 0 0 0.7em; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--st-cyan); } .st-chips { display: flex; flex-wrap: wrap; gap: 8px; } .st-chip { font-size: 0.78rem; color: var(--st-text); background: rgba(7, 11, 19, 0.7); border: 1px solid var(--st-line); border-radius: 999px; padding: 5px 11px; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; } .st-chip:hover { border-color: rgba(var(--cy-green-rgb, 43, 245, 143), 0.5); color: var(--st-green); } /* ======================================================= 03 EXPERIENCE == */ .st-exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 1.6em; } .st-exp { position: relative; background: linear-gradient(180deg, rgba(10, 15, 24, 0.8), rgba(4, 7, 13, 0.8)); border: 1px solid var(--st-line); border-left: 2px solid rgba(var(--cy-green-rgb, 43, 245, 143), 0.55); border-radius: 10px; padding: 16px 18px; transition: border-color 0.2s ease, transform 0.2s ease; } .st-exp:hover { transform: translateY(-2px); border-left-color: var(--st-green); } .st-exp h3 { margin: 0 0 6px; font-size: 0.95rem; color: var(--st-text); font-weight: 600; } .st-exp p { margin: 0; font-size: 0.82rem; line-height: 1.55; color: var(--st-muted); } /* ======================================================== 04 EDUCATION == */ .st-edu { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.8em; margin-top: 1.4em; } .st-edu-col h4 { margin: 0 0 0.9em; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--st-cyan); } .st-edu-list { list-style: none; margin: 0; padding: 0; } .st-edu-list li { position: relative; padding: 0 0 0 1.3em; margin: 0 0 0.7em; line-height: 1.5; } .st-edu-list li::before { content: "\203A"; position: absolute; left: 0; color: var(--st-green); } .st-edu-list a { color: var(--st-text); text-decoration: none; border-bottom: 1px solid transparent; font-size: 0.9rem; } .st-edu-list a:hover { color: #fff; border-bottom-color: rgba(25, 217, 255, 0.5); } /* anios de las conferencias (seccion Development) */ .st-edu-list .yrs { display: block; margin-top: 2px; font-size: 0.76rem; letter-spacing: 0.5px; color: var(--st-muted); } .st-edu-list .tag { display: inline-block; font-size: 0.66rem; letter-spacing: 1px; color: var(--st-green); border: 1px solid rgba(var(--cy-green-rgb, 43, 245, 143), 0.4); border-radius: 4px; padding: 1px 6px; margin-right: 7px; vertical-align: middle; } /* ----------------------------------------------------- cierre / CTA -- */ .st-cta { text-align: center; margin-top: 3vh; } .st-cta h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 0.6em; color: var(--st-text); } .st-cta h2 .ac { color: var(--st-green); } .st-cta-btn { display: inline-block; margin-top: 0.6em; padding: 12px 26px; border: 1px solid rgba(var(--cy-green-rgb, 43, 245, 143), 0.5); border-radius: 8px; color: var(--st-green); text-decoration: none; letter-spacing: 1px; font-size: 0.9rem; transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } .st-cta-btn:hover { background: rgba(var(--cy-green-rgb, 43, 245, 143), 0.1); box-shadow: 0 0 22px rgba(var(--cy-green-rgb, 43, 245, 143), 0.2); color: #fff; } /* ---------------------------------------------- bounce del indicador -- */ @keyframes cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } /* ----------------------------------------------------- responsive -- */ @media screen and (max-width: 880px) { .st-about { grid-template-columns: 1fr; gap: 1.8em; } } @media screen and (max-width: 560px) { .st-about-cards { grid-template-columns: 1fr; } .story-section { padding: 9vh 1.2em 7vh; } } @media (prefers-reduced-motion: reduce) { .sec-next .arr, .story-start .arr { animation: none; } }