/* =================================================================== Juliana Martínez S. — portafolio Hoja de estilos compartida por todas las páginas del sitio. =================================================================== */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', sans-serif; } img { display: block; max-width: 100%; } video { max-width: 100%; } a { text-decoration: none; } button { font-family: inherit; } /* Bilingual toggle: Spanish ships as the real, crawlable text; English is swapped in by JS (adds .lang-en to ) so search engines and non-JS agents always see full Spanish content by default. */ [data-lang="en"] { display: none; } html.lang-en [data-lang="es"] { display: none; } html.lang-en [data-lang="en"] { display: inline; } html.lang-en [data-lang="en"].block { display: block; } section[id], div[id] { scroll-margin-top: 74px; } /* ---------- Reveal on scroll (Home) ---------- */ .jm-rv { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .jm-rv.jm-in { opacity: 1; transform: none; } /* ---------- Nav (SiteNav) ---------- */ .jmnav-link { position: relative; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 6px 2px; transition: color .2s ease; color: rgba(12,13,15,0.55); } .jmnav-link.is-active { color: #0C0D0F; } .jmnav-link::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #FF0C0C; transition: width .28s cubic-bezier(.2,.8,.2,1); } .jmnav-link:hover::after { width: 100%; } .jmnav-link:hover { color: #0C0D0F; } .jmnav-cta { transition: transform .2s ease, background .2s ease; } .jmnav-cta:hover { background: #0C0D0F !important; color: #EEEBE4 !important; transform: translateY(-1px); } .jmnav-seg { transition: color .2s ease, background .2s ease; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 6px 13px; border: none; background: transparent; color: rgba(12,13,15,0.5); cursor: pointer; border-radius: 999px; } .jmnav-seg.is-active { background: #0C0D0F; color: #EEEBE4; } .jmnav-burger { display: none; } .jmnav-panel { display: none; flex-direction: column; padding: 10px 26px 24px; background: rgba(238,235,228,0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(12,13,15,0.08); } .jmnav-panel.is-open { display: flex; } .jmnav-mlink { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: #0C0D0F; padding: 14px 2px; border-bottom: 1px solid rgba(12,13,15,0.08); } @media (max-width: 860px) { .jmnav-center { display: none !important; } .jmnav-cta-desktop { display: none !important; } .jmnav-burger { display: flex !important; } } @media (min-width: 861px) { .jmnav-panel { display: none !important; } } /* ---------- Footer (SiteFooter) ---------- */ @media (max-width: 820px) { .jmfoot-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .jmfoot-actions { justify-content: flex-start !important; } } .jmfoot-link:hover { background: #ECF0EB; color: #0C0D0F; } .jmfoot-link-outline:hover { background: #0C0D0F; color: #ECF0EB; } /* ---------- Home ---------- */ body.page-home { background: #EEEBE4; } @keyframes jm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes jm-fade { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes jm-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } } @keyframes jm-swap { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes jm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .jm-gcard:hover .jm-gimg { transform: scale(1.05); } a:hover .jm-projimg { transform: scale(1.05); } .jm-hportrait { animation: jm-breathe 4.5s ease-in-out infinite; transition: filter .3s ease; } section:hover .jm-hportrait { filter: saturate(1.25) contrast(1.08); } .jm-tab { display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 13px 20px; border: 1px solid #0C0D0F; background: transparent; color: #0C0D0F; transition: all 0.2s ease; } .jm-tab.is-active { background: #FF0C0C; border-color: #FF0C0C; color: #ECF0EB; } .jm-subtab { display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 11px 18px; border: 1px solid #0C0D0F; background: transparent; color: #0C0D0F; transition: all 0.2s ease; } .jm-subtab.is-active { background: #0C0D0F; border-color: #0C0D0F; color: #ECF0EB; } .jm-navbtn { width: 42px; height: 42px; border-radius: 999px; cursor: pointer; border: 1px solid #0C0D0F; background: transparent; color: #0C0D0F; font-size: 15px; transition: all .2s ease; } .jm-navbtn:disabled { opacity: 0.28; cursor: default; } .jm-dot { min-width: 42px; height: 42px; border-radius: 999px; cursor: pointer; border: 1px solid #0C0D0F; background: transparent; color: #0C0D0F; font-family: ui-monospace, Menlo, monospace; font-size: 12px; transition: all .2s ease; } .jm-dot.is-active { background: #FF0C0C; border-color: #FF0C0C; color: #ECF0EB; font-weight: 700; } .jm-cap-row:hover, .jm-skill-row:hover { padding-left: 14px; background: rgba(255,12,12,0.06); } .jm-tool:hover { border-color: #FF0C0C; color: #FF0C0C; } .jm-social:hover { border-color: #FF0C0C; color: #FF0C0C; } .jm-seework:hover { background: #C20000; } [data-reel] video, [data-vid] video { background: #000; } @media (max-width: 1024px) { .jm-grid-4 { grid-template-columns: repeat(3,1fr) !important; } } @media (max-width: 860px) { .jm-grid-3 { grid-template-columns: repeat(2,1fr) !important; } .jm-grid-4 { grid-template-columns: repeat(2,1fr) !important; } .jm-grid-reels { grid-template-columns: repeat(2,1fr) !important; } .jm-grid-2 { grid-template-columns: 1fr !important; } .jm-about { grid-template-columns: 1fr !important; } .jm-exp-row { grid-template-columns: 1fr !important; gap: 14px !important; } } @media (max-width: 560px) { .jm-grid-3 { grid-template-columns: 1fr !important; } .jm-sec { padding-left: 18px !important; padding-right: 18px !important; } } /* ---------- Lightbox (Home + Resumen) ---------- */ .jm-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(8,9,11,0.94); display: none; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; padding: 32px; } .jm-lb.is-open { display: flex; } .jm-lb-mid { display: flex; align-items: center; width: 100%; max-width: 1100px; justify-content: center; gap: 18px; position: relative; } .jm-lb-nav { flex-shrink: 0; width: 52px; height: 52px; font-size: 22px; border-radius: 50%; border: 1px solid rgba(236,240,235,0.3); background: rgba(236,240,235,0.06); color: #ECF0EB; cursor: pointer; padding: 0; } .jm-lb-stage { flex: 1; min-width: 0; height: 72vh; background-color: #000; background-size: contain; background-position: center; background-repeat: no-repeat; } .jm-lb-thumb { width: 74px; height: 74px; flex-shrink: 0; cursor: pointer; background-color: #000; background-size: cover; background-position: center; border: 2px solid transparent; opacity: .5; } .jm-lb-thumb.is-active { border-color: #FF0C0C; opacity: 1; } @media (max-width: 600px) { .jm-lb { padding: 12px; } .jm-lb-mid { gap: 0; } .jm-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; font-size: 18px; z-index: 2; background: rgba(12,13,15,0.55) !important; } .jm-lb-prev { left: 6px; } .jm-lb-next { right: 6px; } .jm-lb-stage { height: 62vh; width: 100%; } .jm-lb-thumb { width: 52px !important; height: 52px !important; } } /* ---------- Resumen ---------- */ body.page-resumen { background: #D7D2C4; } body.page-resumen a { color: #FF0C0C; } body.page-resumen a:hover { color: #C20000; } .jm-tile { cursor: zoom-in; transition: opacity .18s; border: 0; background: none; padding: 0; text-align: left; } .jm-tile:hover { opacity: .82; } @media (max-width: 900px) { .jm-r-cols { grid-template-columns: 1fr !important; } } @media (max-width: 620px) { #resumen-page > div { padding-left: 20px !important; padding-right: 20px !important; } .jm-rh1 { font-size: 32px !important; } .jm-rportrait { width: 84px !important; height: 84px !important; } .jm-rprow { grid-template-columns: 1fr !important; gap: 16px !important; } .jm-rphil { grid-template-columns: 1fr !important; gap: 16px !important; } } @media print { body.page-resumen { background: #fff; padding: 0 !important; } .no-print { display: none !important; } #resumen-page { width: auto !important; max-width: 100% !important; box-shadow: none !important; } } /* ---------- Project pages: KA! / FIFA / Beso a Beso (shared "ka-" system) ---------- */ body.page-project { margin: 0; background: #0C0D0F; } @keyframes ka-fade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes ka-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } } @keyframes ka-imgseq { 0% { opacity: 0; transform: scale(1.08); } 10% { opacity: 1; } 24% { opacity: 1; } 32% { opacity: 0; } 100% { opacity: 0; } } @keyframes ka-word { 0% { opacity: 0; transform: translateY(14px); } 8% { opacity: 1; transform: none; } 26% { opacity: 1; } 34% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 0; } } @keyframes ka-logo { 0%, 72% { opacity: 0; transform: scale(1.12); letter-spacing: 0.2em; } 84% { opacity: 1; letter-spacing: -0.02em; } 100% { opacity: 1; transform: scale(1); letter-spacing: -0.02em; } } .ka-gimg { transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s ease; } .ka-gcard:hover .ka-gimg { transform: scale(1.05); } .ka-cta { transition: all .25s ease; } .ka-cta:hover { background: #C20000 !important; gap: 16px !important; } .ka-back { transition: color .2s ease; } .ka-back:hover { color: #FF0C0C !important; } body.page-project section { scroll-margin-top: 80px; } .ka-sn { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 12px; background: rgba(12,13,15,0.55); backdrop-filter: blur(8px); padding: 16px 14px; border-radius: 14px; border: 1px solid rgba(236,240,235,0.12); } .ka-sn a { display: flex; align-items: center; gap: 9px; font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(236,240,235,.6); text-decoration: none; transition: color .2s ease, transform .2s ease; } .ka-sn a:hover { color: #ECF0EB; transform: translateX(3px); } @media (max-width: 1240px) { .ka-sn { display: none; } } @media (max-width: 820px) { body.page-project section [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } body.page-project section [style*="grid-column:span"] { grid-column: auto !important; grid-row: auto !important; } } .ka-vidbtn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: none; background: rgba(12,13,15,0.28); cursor: pointer; transition: background .25s ease; } .ka-vidbtn .icon { width: 64px; height: 64px; border-radius: 50%; background: #FF0C0C; color: #ECF0EB; display: flex; align-items: center; justify-content: center; font-size: 19px; box-shadow: 0 8px 30px rgba(0,0,0,0.35); } /* ---------- Intro de apertura (páginas de proyecto) ---------- */ [data-intro] { position: fixed; inset: 0; z-index: 120; background: #0C0D0F; overflow: hidden; transition: opacity .9s ease; opacity: 1; } [data-intro].is-hidden { opacity: 0; } [data-intro] img { animation: ka-imgseq 4s ease forwards; } /* ---------- Bodoni: own palette variant ("bo-") ---------- */ @keyframes bo-fade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes bo-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } } @keyframes bo-imgseq { 0% { opacity: 0; transform: scale(1.08); } 10% { opacity: 1; } 24% { opacity: 1; } 32% { opacity: 0; } 100% { opacity: 0; } } @keyframes bo-word { 0% { opacity: 0; transform: translateY(14px); } 8% { opacity: 1; transform: none; } 26% { opacity: 1; } 34% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 0; } } @keyframes bo-logo { 0%, 72% { opacity: 0; transform: scale(1.14); letter-spacing: 0.12em; } 84% { opacity: 1; letter-spacing: 0.02em; } 100% { opacity: 1; transform: scale(1); letter-spacing: 0.02em; } } .bo-gimg { transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s ease; } .bo-gcard:hover .bo-gimg { transform: scale(1.05); } .bo-cta { transition: all .25s ease; } .bo-cta:hover { background: #C20000 !important; gap: 16px !important; } .bo-back { transition: color .2s ease; } .bo-back:hover { color: #FF0C0C !important; } .bo-sn { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 12px; background: rgba(12,13,15,0.6); backdrop-filter: blur(8px); padding: 16px 14px; border-radius: 14px; border: 1px solid rgba(236,240,235,0.16); } .bo-sn a { display: flex; align-items: center; gap: 9px; font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(236,240,235,.6); text-decoration: none; transition: color .2s ease, transform .2s ease; } .bo-sn a:hover { color: #ECF0EB; transform: translateX(3px); } @media (max-width: 1240px) { .bo-sn { display: none; } } /* ---------- Utility: skip-to-content (a11y) ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: #FF0C0C; color: #ECF0EB; padding: 12px 20px; z-index: 200; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; } .skip-link:focus { left: 12px; top: 12px; } /* ---------- Lazy-loaded media fade-in ---------- */ img[loading="lazy"] { background: #14161A; } /* ---------- Utility classes (dedupe of the most repeated inline styles) ---------- */ .u-cover { width: 100%; height: 100%; object-fit: cover; } .u-cover-block { width: 100%; height: 100%; object-fit: cover; display: block; } .u-card-label { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #8B9096; } .u-card-num { font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: #FF0C0C; } .u-wrap { max-width: 1400px; margin: 0 auto; } .u-mono-11-gray { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #8B9096; } .u-mono-11-red { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #FF0C0C; } .u-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; } .u-ar45 { aspect-ratio: 4/5; overflow: hidden; } .u-ar916 { aspect-ratio: 9/16; overflow: hidden; } .u-ar916-video { position: relative; aspect-ratio: 9/16; overflow: hidden; background: #000; } .u-zoom-tile { overflow: hidden; background: #0C0D0F; cursor: zoom-in; } .u-mono { font-family: ui-monospace, Menlo, monospace; } /* ---------- Keyboard focus visibility (a11y) ---------- */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid #FF0C0C; outline-offset: 2px; } /* ---------- Respect reduced-motion preference (a11y) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }