/* marea studio — estilos compartidos. Los estilos inline de cada pagina codifican el layout de escritorio; aca solo van los overrides responsive, los estados :hover y lo que antes hacia el JS. Se usa !important en las media queries porque compiten contra style="" inline. */ /* ---------- base ---------- Ojo: nada de `box-sizing: border-box` global. El diseño original se armo con content-box (los pocos elementos que necesitan border-box lo declaran inline) y cambiarlo altera el alto de todo lo que tenga padding. */ /* El velo de intro trae display:flex inline, que le gana al atributo [hidden] por especificidad. Sin esto, quien no tenga JS ve una pantalla negra. */ [hidden] { display: none !important; } .skip-link { position: absolute; left: 8px; top: -50px; z-index: 999; padding: 10px 16px; background: #1c1c1c; color: #f2f2f2; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: top .2s ease; } .skip-link:focus { top: 8px; color: #f2f2f2; } :focus-visible { outline: 2px solid #abac57; outline-offset: 3px; } /* ---------- tachas laterales ---------- Antes: ~40 de 1 MB clonados por un sc-for, con un setInterval de 900 ms remidiendo scrollHeight. Ahora: dos franjas con background repetido. */ [data-rails] { display: none !important; } @media (min-width: 860px) { [data-rails] { display: block !important; } [data-rails] > div { /* tacha-tile.png es una celda de 28x77 recortada de la tira que exporto la disenadora: una tacha cada 77px, para que el calce sea el que ella dibujo. */ width: 28px; background-image: url(../tacha-tile.png); background-repeat: repeat-y; background-size: 28px 77px; background-position: left top; } } /* ---------- animaciones de entrada ---------- Sin JS el contenido queda visible: la opacidad 0 solo se aplica cuando el script marca . */ .js [data-appear] { opacity: 0; transform: translateY(var(--appear-dist, 26px)); transition: opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1); } /* Sin will-change permanente: dejaba una capa de composicion viva en cada elemento y eso cambia el antialiasing del texto (y consume memoria). */ .js [data-appear="fade"] { transform: none; } .js [data-appear].is-in { opacity: 1; transform: none; } /* Las paginas de capitulo animan tambien elementos sin [data-appear]. */ .p-chapter, .p-eme { --appear-dist: 22px; } html.js .p-chapter figure, html.js .p-chapter h2, html.js .p-chapter [data-swatches] > div, html.js .p-chapter [data-quote-row] > *, html.js .p-eme figure, html.js .p-eme h2, html.js .p-eme [data-swatches] > div, html.js .p-eme [data-quote-row] > * { opacity: 0; transform: translateY(var(--appear-dist, 22px)); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); } /* [data-swatches] > div le gana por especificidad a .is-in (3 clases + 2 tipos contra 3 clases + 1 tipo), asi que las fichas de color quedaban en opacity:0 para siempre. Estas dos reglas le devuelven la prioridad al estado. */ html.js .p-chapter [data-swatches] > div.is-in, html.js .p-eme [data-swatches] > div.is-in { opacity: 1; transform: none; } html.js .p-chapter .is-in, html.js .p-eme .is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-appear] { opacity: 1 !important; transform: none !important; transition: none !important; } html { scroll-behavior: auto !important; } [data-intro] { display: none !important; } } /* ---------- menu mobile ---------- El panel trae opacity:0 y pointer-events:none inline, y un selector de clase NO le gana a eso: sin !important el menu abre "logicamente" (aria, foco) pero queda invisible. Es el mismo motivo por el que los overrides responsive de mas abajo tambien lo llevan. */ [data-menu] { opacity: 0; pointer-events: none; } [data-menu].is-open { opacity: 1 !important; pointer-events: auto !important; } body.menu-open { overflow: hidden; } /* ---------- hovers (antes se hacian con listeners JS o style-hover) ---------- */ [data-card]:hover [data-card-media] { transform: translateY(-4px); } [data-card]:hover [data-card-media] img { transform: scale(1.045); } /* Segunda pieza de cada proyecto al pasar el mouse: muestra el doble de trabajo sin sumar scroll. En touch no hay hover, asi que no molesta. */ [data-card]:hover [data-card-alt] { opacity: 1; } [data-card]:hover [data-cat] { color: #abac57; } [data-card]:hover [data-label] { color: #abac57; letter-spacing: .2em; } [data-card]:hover [data-arrow] { transform: translateX(7px); } [data-card]:hover [data-ast] { background: #abac57; transform: rotate(90deg); } [data-next]:hover [data-next-arrow] { transform: translateX(10px); } [data-next]:hover [data-next-name] { color: #abac57; } [data-svc] [data-svc-arrow] { opacity: 0; transform: translateX(-10px); } [data-svc]:hover [data-svc-name] { transform: translateX(14px); color: #abac57; } [data-svc]:hover [data-svc-arrow] { opacity: 1; transform: translateX(0); } [data-step]:hover [data-step-name] { color: #1c1c1c; transform: translateX(10px); } [data-swap]:hover [data-swap-alt] { opacity: 1; } [data-portrait] { transition: transform .6s cubic-bezier(.2,.7,.3,1); } :hover > [data-portrait] { transform: scale(1.04); } [data-tool]:hover { background: #1c1c1c !important; color: #f1d1c2 !important; border-color: #1c1c1c !important; transform: translateY(-3px); } /* ---------- chips del formulario ---------- */ [data-chip][aria-pressed="true"] { background: #000 !important; color: #f2f2f2 !important; border-color: #000 !important; } /* ---------- responsive: nav ---------- */ @media (max-width: 859px) { [data-desktop-nav] { display: none !important; } [data-burger] { display: flex !important; } /* solo kit-joseon ocultaba el selector de idioma en mobile */ .p-joseon [data-lang-btn] { display: none !important; } } /* ---------- responsive: filas genericas (data-cols-wide/narrow/bp) ---------- El valor se repite literal porque CSS no puede leer un atributo como valor. */ @media (max-width: 619px) { [data-bp="620"][data-cols-narrow="minmax(0,1fr)"] { grid-template-columns: minmax(0,1fr) !important; } [data-bp="620"][data-cols-narrow="repeat(2,minmax(0,1fr))"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } @media (max-width: 759px) { [data-bp="760"][data-cols-narrow="minmax(0,1fr)"], [data-cols-wide][data-cols-narrow="minmax(0,1fr)"]:not([data-bp]) { grid-template-columns: minmax(0,1fr) !important; } [data-bp="760"][data-cols-narrow="repeat(2,minmax(0,1fr))"], [data-cols-wide][data-cols-narrow="repeat(2,minmax(0,1fr))"]:not([data-bp]) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } [data-bp="760"][data-cols-narrow="repeat(3,minmax(0,1fr))"], [data-cols-wide][data-cols-narrow="repeat(3,minmax(0,1fr))"]:not([data-bp]) { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } [data-bp="760"][data-cols-narrow="repeat(4,minmax(0,1fr))"], [data-cols-wide][data-cols-narrow="repeat(4,minmax(0,1fr))"]:not([data-bp]) { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } } @media (max-width: 859px) { [data-bp="860"][data-cols-narrow="minmax(0,1fr)"] { grid-template-columns: minmax(0,1fr) !important; } [data-bp="860"][data-cols-narrow="repeat(2,minmax(0,1fr))"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } [data-bp="860"][data-cols-narrow="repeat(3,minmax(0,1fr))"] { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } } @media (max-width: 899px) { [data-bp="900"][data-cols-narrow="minmax(0,1fr)"] { grid-template-columns: minmax(0,1fr) !important; } [data-bp="900"][data-cols-narrow="repeat(2,minmax(0,1fr))"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } [data-bp="900"][data-cols-narrow="repeat(3,minmax(0,1fr))"] { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } } /* ---------- responsive: filas con nombre ---------- */ @media (max-width: 859px) { [data-head-row], [data-num-row], [data-band-row], [data-about-row], [data-process-row], [data-img-row], [data-die-row] { grid-template-columns: minmax(0,1fr) !important; } [data-img-row] { gap: 10px !important; } [data-tools-grid] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } [data-white-swirl] { opacity: .5 !important; } } @media (max-width: 999px) { [data-title-row] { grid-template-columns: minmax(0,1fr) !important; } } @media (max-width: 719px) { [data-next-row] { grid-template-columns: minmax(0,1fr) !important; } } @media (max-width: 699px) { [data-meta-row] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } @media (max-width: 1149px) { [data-intro-row] { grid-template-columns: minmax(0,1fr) !important; } } @media (max-width: 559px) { [data-tools-grid] { grid-template-columns: repeat(1,minmax(0,1fr)) !important; } } @media (max-width: 1139px) { [data-footer-grid] { grid-template-columns: minmax(0,1fr) !important; } } @media (max-width: 519px) { [data-footer-nav] { flex-direction: column !important; } } /* about */ @media (max-width: 719px) { [data-hero-meta] { grid-template-columns: minmax(0,1fr) !important; } [data-hero-meta] > div:nth-child(2) { text-align: left !important; } } /* eme-metal */ @media (max-width: 859px) { [data-fonts-row] { grid-template-columns: minmax(0,1fr) !important; } } @media (max-width: 639px) { [data-marks-row] { grid-template-columns: minmax(0,1fr) !important; } } @media (max-width: 559px) { [data-pal-grid] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } @media (max-width: 759px) { [data-brief-imgs] { grid-template-columns: minmax(0,1fr) !important; } } @media (max-width: 859px) { [data-quote-row] { grid-template-columns: minmax(0,1fr) !important; } } @media (max-width: 899px) { [data-sys] { grid-template-columns: minmax(0,1fr) !important; } } @media (max-width: 519px) { [data-swatches] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } @media (max-width: 699px) { [data-apps] { grid-template-columns: minmax(0,1fr) !important; } } /* paginas de proyecto con rails (ebene / contracultura / pompa-agency) */ @media (max-width: 719px) { .p-proj [data-title-row] { grid-template-columns: minmax(0,1fr) !important; } .p-proj [data-meta] { text-align: left !important; } } @media (min-width: 720px) and (max-width: 999px) { .p-proj [data-title-row] { grid-template-columns: minmax(0,1fr) auto !important; } } /* contact */ @media (max-width: 899px) { .p-contact [data-form-row] { grid-template-columns: minmax(0,1fr) !important; } } @media (max-width: 619px) { .p-contact [data-field-row] { grid-template-columns: 1fr !important; } } @media (max-width: 859px) { .p-contact [data-meta] { text-align: left !important; } .p-contact [data-footer-grid] { grid-template-columns: minmax(0,1fr) !important; } } @media (max-width: 619px) { .p-contact [data-footer-nav] { flex-direction: column !important; gap: 22px !important; } } @media (min-width: 620px) { .p-contact [data-footer-nav] { flex-direction: row !important; } } /* index: reacomodo de la grilla de trabajos en pantallas angostas */ @media (max-width: 899px) { [data-scatter] { grid-template-columns: repeat(6,minmax(0,1fr)) !important; } [data-scatter] > * { grid-row: auto !important; } [data-scatter] > :nth-child(odd) { grid-column: 1 / span 3 !important; } [data-scatter] > :nth-child(even) { grid-column: 4 / span 3 !important; margin-top: clamp(30px,7vw,68px) !important; } [data-scatter] > :nth-child(4n+1) { margin-top: 0 !important; } [data-scatter] > :nth-child(4n+3) { margin-top: clamp(14px,4vw,34px) !important; } }