/* ═══════════════════════════════════════════════════════════════════════════
Piso Advisor · módulo de mockups compartido
Marcos de navegador (Chrome/Safari) y de dispositivo (iPhone/Pixel 7 Pro)
que envuelven una captura de pantalla.
AUTOCONTENIDO: no depende de tokens del host (usa var(--x, fallback)).
Los url() son relativos a ESTE fichero → funciona igual desde website,
marketing o la página del studio, sin importar dónde esté el HTML.
Uso mínimo (navegador):
(o "safari")
…chrome-ui / safari-ui…
Uso mínimo (dispositivo):
(sin is-iphone = Pixel 7 Pro)
Las capturas internas van como a secas (NUNCA .slide: el render de
marketing captura cada .slide como un PNG de IG). El módulo estiliza los
de forma genérica, así la web (que usa .slide para su carrusel JS) sigue OK.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Navegadores ─────────────────────────────────────────────────────────── */
.browser-frame {
border: 1px solid var(--line, #dfe3f2);
border-radius: 12px;
background: var(--surface, #ffffff);
box-shadow: var(--shadow-md, 0 16px 40px rgba(27, 20, 100, 0.14));
overflow: hidden;
container-type: inline-size;
transition: transform 360ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
box-shadow 360ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
/* Todo el chrome se deriva de --ui-height. Cada pieza PNG va a la altura de su
fila (height:100%) y su ancho lo fija el aspect-ratio del PNG → nunca se
estira. container-type (en .browser-frame) ata --ui-height a cqw para escalar
con el ancho del marco. */
.browser-ui {
--ui-height: 5.2cqw;
display: flex;
flex-direction: column;
width: 100%;
}
.browser-ui .mk {
height: 100%;
flex: none;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
/* Conmutación de navegador: Chrome por defecto; Safari con data-browser. */
.chrome-ui {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
}
.safari-ui {
display: none;
}
:root[data-browser="safari"] .chrome-ui {
display: none;
}
:root[data-browser="safari"] .safari-ui {
display: flex;
}
/* ── Chrome ── */
.chrome-ui .top {
height: calc(var(--ui-height) * 0.9);
display: flex;
background: #dfe1e5;
}
.chrome-ui .top .mk-tab {
aspect-ratio: 1440 / 168;
background-image: url("assets/chrome/light/tab.png");
}
.chrome-ui .bottom {
height: calc(var(--ui-height) * 0.82);
display: flex;
background: #ffffff;
}
.chrome-ui .bottom .mk-nav {
aspect-ratio: 432 / 148;
background-image: url("assets/chrome/light/bottom-left.png");
}
.chrome-ui .bottom .mk-menu {
aspect-ratio: 176 / 148;
background-image: url("assets/chrome/light/bottom-right.png");
}
.chrome-ui .bottom .address-bar {
flex: 1;
height: 80%;
margin: auto 0;
display: flex;
align-items: center;
gap: 0.5em;
padding: 0 calc(var(--ui-height) * 0.3);
border-radius: 10em;
background: #f1f3f4;
color: #202124;
overflow: hidden;
}
.chrome-ui .bottom .address-bar .lock {
width: 0.82em;
height: 0.82em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.7;
}
.chrome-ui .bottom .address-bar p {
margin: 0;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: calc(var(--ui-height) * 0.9 / 3.4);
letter-spacing: -0.02em;
white-space: nowrap;
}
/* ── Safari ── */
.safari-ui {
height: var(--ui-height);
width: 100%;
justify-content: space-between;
overflow: hidden;
background: #ffffff;
}
.safari-ui .mk-left {
aspect-ratio: 800 / 212;
background-image: url("assets/safari/light/left.png");
}
.safari-ui .mk-right {
aspect-ratio: 800 / 212;
background-image: url("assets/safari/light/right.png");
}
.safari-ui .center-div {
flex: 1;
max-width: 40%;
height: 100%;
display: flex;
align-items: center;
gap: calc(var(--ui-height) * 0.06);
}
.safari-ui .center-div .shield {
aspect-ratio: 168 / 212;
height: 100%;
flex: none;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("assets/safari/light/shield.png");
}
.safari-ui .center-div .shield.spacer {
opacity: 0;
}
.safari-ui .center-div .address-bar {
position: relative;
flex: 1;
height: 55%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 calc(var(--ui-height) * 0.5);
border-radius: 0.4em;
background: rgba(0, 0, 0, 0.05);
color: #4c4c4c;
overflow: hidden;
}
.safari-ui .center-div .address-bar .lock {
position: absolute;
right: calc(var(--ui-height) * 0.12);
top: 50%;
transform: translateY(-50%);
aspect-ratio: 96 / 112;
height: 82%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("assets/safari/light/lock.png");
}
.safari-ui .center-div .address-bar p {
margin: 0;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: calc(var(--ui-height) / 4.5);
letter-spacing: -0.02em;
white-space: nowrap;
}
/* Pantalla del navegador: relación fija; la captura la rellena. */
.browser-viewport {
position: relative;
aspect-ratio: 2360 / 1640;
overflow: hidden;
}
.browser-viewport img,
.browser-viewport video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* ── Dispositivos (iPhone / Pixel 7 Pro) ─────────────────────────────────────
Enfoque mask-free: captura detrás (.dropzone) + bisel PNG encima
(.device-asset), escalado para que su ventana transparente cuadre con la
captura. Un filter en el ancestro de un elemento con mask lo hace desaparecer
en Safari (bug WebKit) → la sombra va en el bisel, no en el contenedor. */
.phone {
/* Pixel 7 Pro por defecto */
--mk-aspect: 720 / 1560;
--device-asset-scale: 1.248;
--mk-radius: 7cqw; /* redondeo de pantalla (escala con el ancho vía cqw) */
--mk-bezel: url("assets/pixel-7-pro/obsidian.png");
position: relative;
display: grid;
place-items: center;
aspect-ratio: var(--mk-aspect);
container-type: inline-size; /* habilita cqw para --mk-radius */
transition: transform 320ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
/* Variantes de color Pixel */
.phone.is-snow {
--mk-bezel: url("assets/pixel-7-pro/snow.png");
}
.phone.is-hazel {
--mk-bezel: url("assets/pixel-7-pro/hazel.png");
}
/* iPhone 14 Pro Max (bisel 1613×3495, pantalla 1290×2796 → scale ≈ 1.25).
Calibrado visualmente; ajustar si la captura asoma o queda holgada. */
.phone.is-iphone {
--mk-aspect: 1290 / 2796;
--device-asset-scale: 1.25;
--mk-radius: 12cqw;
--mk-bezel: url("assets/iphone-14-pro-max/space-black.png");
}
.phone.is-iphone.is-silver {
--mk-bezel: url("assets/iphone-14-pro-max/silver.png");
}
.phone.is-iphone.is-gold {
--mk-bezel: url("assets/iphone-14-pro-max/gold.png");
}
.phone.is-iphone.is-deep-purple {
--mk-bezel: url("assets/iphone-14-pro-max/deep-purple.png");
}
@media (hover: hover) and (pointer: fine) {
.phone:hover {
transform: translateY(-6px);
}
}
.phone .device-asset {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
transform: scale(var(--device-asset-scale));
background: var(--mk-bezel) center / contain no-repeat;
filter: drop-shadow(0 12px 22px rgba(13, 12, 46, 0.28));
}
.phone .drop-wrapper {
width: 100%;
height: 100%;
}
.phone .dropzone {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: var(--mk-radius);
}
.phone .dropzone img,
.phone .dropzone video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* ── Tablet (iPad Pro 13) ── mismo enfoque mask-free que .phone. */
.tablet {
--device-asset-scale: 1.248;
--mk-bezel: url("assets/ipad-pro-13/space_gray.png");
position: relative;
display: grid;
place-items: center;
aspect-ratio: 2732 / 2048; /* iPad landscape 4:3 */
transition: transform 320ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.tablet.is-silver {
--mk-bezel: url("assets/ipad-pro-13/silver.png");
}
@media (hover: hover) and (pointer: fine) {
.tablet:hover {
transform: translateY(-6px);
}
}
.tablet .device-asset {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
transform: scale(var(--device-asset-scale));
background: var(--mk-bezel) center / contain no-repeat;
filter: drop-shadow(0 14px 26px rgba(13, 12, 46, 0.26));
}
.tablet .drop-wrapper {
width: 100%;
height: 100%;
}
.tablet .dropzone {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.tablet .dropzone img,
.tablet .dropzone video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* ── Dark: intercambia piezas y colores del navegador ────────────────────────
La web usa prefers-color-scheme (auto). Un override explícito .is-light /
.is-dark en gana, para render determinista en marketing/studio. */
@media (prefers-color-scheme: dark) {
:root:not(.is-light) .chrome-ui .top {
background: #202124;
}
:root:not(.is-light) .chrome-ui .top .mk-tab {
background-image: url("assets/chrome/dark/tab.png");
}
:root:not(.is-light) .chrome-ui .bottom {
background: #35363a;
}
:root:not(.is-light) .chrome-ui .bottom .mk-nav {
background-image: url("assets/chrome/dark/bottom-left.png");
}
:root:not(.is-light) .chrome-ui .bottom .mk-menu {
background-image: url("assets/chrome/dark/bottom-right.png");
}
:root:not(.is-light) .chrome-ui .bottom .address-bar {
background: #202124;
color: #ffffff;
}
:root:not(.is-light) .safari-ui {
background: #191c1f;
}
:root:not(.is-light) .safari-ui .mk-left {
background-image: url("assets/safari/dark/left.png");
}
:root:not(.is-light) .safari-ui .mk-right {
background-image: url("assets/safari/dark/right.png");
}
:root:not(.is-light) .safari-ui .center-div .shield {
background-image: url("assets/safari/dark/shield.png");
}
:root:not(.is-light) .safari-ui .center-div .address-bar {
background: #0c0f12;
color: #ffffff;
}
:root:not(.is-light) .safari-ui .center-div .address-bar .lock {
background-image: url("assets/safari/dark/lock.png");
}
}
/* Override explícito a dark (independiente del sistema) */
:root.is-dark .chrome-ui .top {
background: #202124;
}
:root.is-dark .chrome-ui .top .mk-tab {
background-image: url("assets/chrome/dark/tab.png");
}
:root.is-dark .chrome-ui .bottom {
background: #35363a;
}
:root.is-dark .chrome-ui .bottom .mk-nav {
background-image: url("assets/chrome/dark/bottom-left.png");
}
:root.is-dark .chrome-ui .bottom .mk-menu {
background-image: url("assets/chrome/dark/bottom-right.png");
}
:root.is-dark .chrome-ui .bottom .address-bar {
background: #202124;
color: #ffffff;
}
:root.is-dark .safari-ui {
background: #191c1f;
}
:root.is-dark .safari-ui .mk-left {
background-image: url("assets/safari/dark/left.png");
}
:root.is-dark .safari-ui .mk-right {
background-image: url("assets/safari/dark/right.png");
}
:root.is-dark .safari-ui .center-div .shield {
background-image: url("assets/safari/dark/shield.png");
}
:root.is-dark .safari-ui .center-div .address-bar {
background: #0c0f12;
color: #ffffff;
}
:root.is-dark .safari-ui .center-div .address-bar .lock {
background-image: url("assets/safari/dark/lock.png");
}
/* ── Helper de export (studio): margen transparente para no recortar el bisel
escalado + su sombra al hacer screenshot del elemento. ──────────────────── */
.mockup-export {
display: inline-block;
padding: 60px;
background: transparent;
}
