/* ========================================================================== SAVE THE DATE — Orne y Toti MOBILE FIRST: todo está pensado para 390x844 (iPhone 14). Los @media (min-width:768px) solo agrandan; nunca rehacen el diseño. Orden: 1 variables · 2 base · 3 sobre · 4 revelados · 5 portada y frase 6 bloque fecha · 7 bloque nube · 8 desktop · 9 accesibilidad ========================================================================== */ /* --- 1 · VARIABLES -------------------------------------------------------- */ :root{ /* paleta */ --crema: #FBF2E1; --arena: #F0E2CB; --durazno: #F6E0CE; /* los dos bloques de color y su tinta */ --arco: #DEBAA2; /* bloque 2: la cupula */ --arco-tinta: #4C0004; --nube: #7B5622; /* bloque 3: el bloque de abajo */ --nube-tinta: #F1F0EC; --bordo: #7A2231; --mostaza: #E0A81E; --choco: #2A1A10; --blanco: #FFFFFF; /* el papel de la página: la textura de "Fondo Blanco", ya hecha repetible. El color es el promedio de esa textura y queda de respaldo si no carga. */ --papel-color: #F2EFEE; --papel-textura: url(../img/fondo.webp); /* los dos colores que vienen del collage del sobre */ --salvia: #DEBAA2; /* el fondo de la pantalla del sobre */ --naranja: #DB571B; /* el botón */ --naranja-osc: #C64B14; --tinta: var(--choco); --papel: var(--papel-color); /* los titulares gigantes: Fraunces Bold, con el eje optico en 144 */ --display: "Fraunces", Georgia, "Times New Roman", serif; --serif: "Newsreader", Georgia, "Times New Roman", serif; --hero: "Poppins", "Helvetica Neue", Arial, sans-serif; /* padding lateral: mínimo 20px en celular, más el notch */ --pad-x: 20px; /* una sola curva y una sola duración para todo lo que se mueve */ --curva: cubic-bezier(.22,.61,.36,1); --dur: 900ms; /* alto real de la ventana, lo calcula el JS (100vh miente en celular) */ --vh: 1vh; } /* ========================================================================== PANEL DE TIPOGRAFÍA Todo lo que hay que tocar para ajustar los textos está acá. Nada más. PESO 300 Light · 400 Regular · 500 Medium · 700 Bold (Poppins tiene los tres primeros; Fraunces está en Bold) TRACKING el número de Illustrator dividido 1000 -> 200 se escribe .2em CUERPO va con clamp(mínimo, lo que crece, máximo). El del medio en vw es un % del ancho de la pantalla: 3.2vw = 3,2% del ancho. Para un tamaño fijo, poné el mismo número en los tres. ========================================================================== */ :root{ /* --- "Orne y Toti" y "Save the date" ---------------------------------- */ --tit-peso: 700; --tit-cuerpo: 9.2cqw; /* 9,2% del ancho de la TARJETA */ --tit-max: 130px; /* tope, para que no se desmadre en monitores */ --tit-track: .025em; /* tracking 25 */ --tit-opsz: 14; /* eje de Fraunces: 14 común · 144 display */ --nube-escala: 1; /* 1 = "Save the date" igual que "Orne y Toti" */ /* --- "6 de marzo de 2027", "· AL MEDIODIA ·" y "¡NOS VEMOS EN LA PISTA!" */ --chico-peso: 300; --chico-cuerpo: clamp(11px, 3.2cqw, 16px); --chico-track: .2em; /* tracking 200 */ /* --- "Coronel Suárez" (hereda lo de arriba, solo cambia el peso) ------- */ --lugar-peso: 400; /* --- "NOS CASAMOS" (renglón 1 del hero) -------------------------------- */ --frase-peso: 300; --frase-cuerpo: clamp(11px, 3.3vw, 17px); --frase-track: .2em; /* tracking 200 */ /* --- "¡Preparate!" (renglón 2 del hero) -------------------------------- */ --frase2-peso: 500; --frase2-cuerpo: clamp(12px, 3.6vw, 19px); --frase2-track: .2em; /* tracking 200 */ /* la tinta de los dos: el mismo marrón del bloque de abajo */ --frase-tinta: #7B5622; /* --- El botón "Save the date" del sobre -------------------------------- */ --boton-peso: 400; --boton-cuerpo: clamp(11px, 3.1cqw, 20px); --boton-track: .02em; /* tracking 20 */ /* los cuatro radios en el orden: arriba-izq · arriba-der · abajo-der · abajo-izq 999px = totalmente redondeada · 0 = esquina viva */ --boton-radio: 6px; --boton-fondo: #DB571B; --boton-fondo-hover: #C24A15; --boton-tinta: #4C0004; } /* --- 2 · BASE ------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html,body{ overflow-x:hidden; /* nunca puede haber scroll horizontal */ max-width:100%; /* frena el rebote elástico del final: sin esto, al tironear hacia abajo asoma el papel por debajo del bloque naranja */ overscroll-behavior-y:none; } /* El color del rebote de abajo lo pinta el último bloque con una sombra que se extiende hacia abajo (ver .bloque-nube). Es más confiable que pintar el html: la sombra viaja con el contenido, así que se ve sí o sí al tironear. */ body{ margin:0; background:var(--papel) var(--papel-textura) repeat 0 0 / 320px auto; color:var(--tinta); font-family:var(--serif); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; } /* mientras el sobre está, la página de atrás no scrollea */ body.sin-scroll{ overflow:hidden; height:100%; } svg{ display:block; } /* tipografías reutilizables */ .gigante{ font-family:var(--display); font-weight:var(--tit-peso); font-optical-sizing:none; /* que no lo decida el navegador */ font-variation-settings:"opsz" var(--tit-opsz); font-size:min(var(--tit-cuerpo), var(--tit-max)); line-height:.92; letter-spacing:var(--tit-track); text-indent:.0125em; /* recentra: el tracking sobra al final */ margin:0; white-space:nowrap; /* "Orne y Toti" y "Save the date" en UNA línea */ } .chico{ font-family:var(--hero); font-weight:var(--chico-peso); text-transform:uppercase; letter-spacing:var(--chico-track); text-indent:.1em; /* recentra */ font-size:var(--chico-cuerpo); line-height:1.4; margin:0; } /* "Coronel Suárez" apenas más marcado que el resto */ .chico--medium{ font-weight:var(--lugar-peso); } /* --- 3 · EL SOBRE (capa de entrada) --------------------------------------- El collage real recortado en capas: se pliega la solapa, sale la foto, brota el ramito y por ultimo aparece el boton. Al tocarlo, la capa se va. */ .sobre-pantalla{ /* --vel regula TODA la animacion: 1 = como esta, 1.3 = 30% mas lento, .8 = mas rapido */ --vel:1; position:fixed; inset:0; z-index:80; overflow:hidden; display:grid; place-items:center; background:var(--salvia); height:calc(var(--vh) * 100); height:100svh; transform-origin:50% 45%; transition:opacity 700ms ease, transform 700ms var(--curva); } .sobre-pantalla.fuera{ opacity:0; transform:scale(1.08); pointer-events:none; } .sobre-pantalla.oculto{ display:none; } /* --- el sobre-collage (capas reales del diseño) --------------------------- */ .escena-sobre{ /* --sobre: ancho que ocupa el sobre en pantalla; la escena es el lienzo completo */ --sobre:min(70vw,430px,52svh); position:absolute; left:50%; top:50%; translate:-50% -47.6%; width:calc(var(--sobre) / .688); aspect-ratio:2160/3840; perspective:2000px; container-type:inline-size; } .capa-sobre{ position:absolute; display:block; } /* el sobre abierto de fondo (el forro naranja). Se recorta justo en el borde de arriba del frente, que es la pieza que va apoyada encima. */ #cs-sobre{ inset:0; width:100%; height:100%; clip-path:inset(44.974% 0 0 0); } /* el dorso de la solapa = la parte alta del sobre abierto, plegada sobre la bisagra */ #cs-dorso{ left:15.374%; top:21.510%; width:69.214%; height:23.646%; transform-origin:50% 100%; transform:rotateX(180deg); backface-visibility:hidden; } .capa-contenido{ position:absolute; inset:0; /* la mascara va incrustada (data:) y no como archivo aparte: al abrir la pagina con doble click (file://) el navegador bloquea las mascaras externas por CORS y la foto y el ramito quedaban invisibles. */ -webkit-mask:url(data:image/webp;base64,UklGRvwRAABXRUJQVlA4WAoAAAAQAAAANwQAfwcAQUxQSCsDAAABDzD/ERFy1LZtw5j/v52yeY6ICUibmLxSIHIjW5LkpnCLMAGmwDSUaWVKm9BiCxXFS+r/P0GNP6L/E8A0khRBSyGQhEAoFxr5F7OvXkT0P37Y//a//W//2//2v/1v/9v/9r/9b//b//a//W//2//2v/1v/9v/9r/9b//b//a//W///5fzW/xZcj7jz/r7feA9/du8fxfeWPJf5Ykl5DzQjJr4JnzxtJhPniPmg2eLeedZYt54SswTT4p54AkxQTRSvphayifTkfLBtKW8My0pT0wl5YEppATVCPniaiGfXEfIB9cW0rdLSN2WkLxNIXEbQnQ8Mt51y5jrI6Ovt4y6XjLyOmXEdcjQ+YjY+xbx7o+Iud8i+n6JqPsSkfcpIu5DhAAjYQkt4RGOhCFsCUUoCUlICUEICUKMgGW0gMc4AoaxBTRjCShGCUhGChAj+JYydI/SdEM5dE1ZdEUpuqQkXVCCTpghW06TDeeQNWeTFWeRJafIgpNk4gTXkobqkZpqSJuqSYuqSEWVpKQKUlAJNUTLaqJhHaJmbaJiLaJkFVGwkkisGJqlNc2jHZqhbZqmLZqiFU3SkiZowbLCDcnjNcnwDknzNknxFknykiR4QSLgUCyxKR7xUDRxUxRxUSSxKIKYFCIGwzKH4DGbYJiHoJmLIJlFEMwkEDPwljpwj9pwQz1wTd1wRV1wSS24oCacqIG23AEbboM1d4PVVyS3wIKbYOIG1pIH6pEbasgHqsgbKskLKsgFJXIiLTqQHruBhn2Amr2Bir2Agl1AYifOwgPn0Qdm6A3T9ANT9A2T9AUT9IIRPVEWHwPy+A0y/APS/A1S/AWS/AIJfoKIHxjrMBDj0BDtcCDKYUOkw4IIh4KQQyCsxwA8jwYYjwPQHhugPBZAeBSAPPLemsS95zLXxqWvtcu5Vi77Wrqsa+GS1+QSt9ZnLo1PX2qfc6l89qX0WZfCpy7JJ++sUdx5TnNlnPpKO50r5bSuhFNdkVPeWKt4CGIt1Paf/Wf/2X/2n/1n/9l/9p/9919AD/af/Wf/2X/2n/1n/9l/9p/9Z//Zf/af/Wf/2X/2318NAFZQOCCqDgAAMLoBnQEqOASABz4xGIxEoiGhEAQAIAMEtLdwu7CNoAT2Ae+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIbwAP7/94EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) center/100% 100% no-repeat; mask:url(data:image/webp;base64,UklGRvwRAABXRUJQVlA4WAoAAAAQAAAANwQAfwcAQUxQSCsDAAABDzD/ERFy1LZtw5j/v52yeY6ICUibmLxSIHIjW5LkpnCLMAGmwDSUaWVKm9BiCxXFS+r/P0GNP6L/E8A0khRBSyGQhEAoFxr5F7OvXkT0P37Y//a//W//2//2v/1v/9v/9r/9b//b//a//W//2//2v/1v/9v/9r/9b//b//a//W///5fzW/xZcj7jz/r7feA9/du8fxfeWPJf5Ykl5DzQjJr4JnzxtJhPniPmg2eLeedZYt54SswTT4p54AkxQTRSvphayifTkfLBtKW8My0pT0wl5YEppATVCPniaiGfXEfIB9cW0rdLSN2WkLxNIXEbQnQ8Mt51y5jrI6Ovt4y6XjLyOmXEdcjQ+YjY+xbx7o+Iud8i+n6JqPsSkfcpIu5DhAAjYQkt4RGOhCFsCUUoCUlICUEICUKMgGW0gMc4AoaxBTRjCShGCUhGChAj+JYydI/SdEM5dE1ZdEUpuqQkXVCCTpghW06TDeeQNWeTFWeRJafIgpNk4gTXkobqkZpqSJuqSYuqSEWVpKQKUlAJNUTLaqJhHaJmbaJiLaJkFVGwkkisGJqlNc2jHZqhbZqmLZqiFU3SkiZowbLCDcnjNcnwDknzNknxFknykiR4QSLgUCyxKR7xUDRxUxRxUSSxKIKYFCIGwzKH4DGbYJiHoJmLIJlFEMwkEDPwljpwj9pwQz1wTd1wRV1wSS24oCacqIG23AEbboM1d4PVVyS3wIKbYOIG1pIH6pEbasgHqsgbKskLKsgFJXIiLTqQHruBhn2Amr2Bir2Agl1AYifOwgPn0Qdm6A3T9ANT9A2T9AUT9IIRPVEWHwPy+A0y/APS/A1S/AWS/AIJfoKIHxjrMBDj0BDtcCDKYUOkw4IIh4KQQyCsxwA8jwYYjwPQHhugPBZAeBSAPPLemsS95zLXxqWvtcu5Vi77Wrqsa+GS1+QSt9ZnLo1PX2qfc6l89qX0WZfCpy7JJ++sUdx5TnNlnPpKO50r5bSuhFNdkVPeWKt4CGIt1Paf/Wf/2X/2n/1n/9l/9p/9919AD/af/Wf/2X/2n/1n/9l/9p/9Z//Zf/af/Wf/2X/2318NAFZQOCCqDgAAMLoBnQEqOASABz4xGIxEoiGhEAQAIAMEtLdwu7CNoAT2Ae+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIbwAP7/94EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) center/100% 100% no-repeat; } #cs-foto{ left:17.038%; top:34.934%; width:40.833%; transform-origin:0 0; transform:translateY(89%) rotate(-8.93deg); } /* el frente del sobre: una sola pieza (antes eran dos y se notaba la juntura) */ #cs-frente{ left:15.602%; top:45.156%; width:68.611%; } #cs-solapa{ left:15.093%; top:44.818%; width:69.444%; transform-origin:50% 1.401%; transform:rotateX(0deg); backface-visibility:hidden; } /* --- el ramito: un sticker apoyado ENCIMA del sobre ----------------------- */ /* Va despues del frente en el HTML, asi la boca del sobre no lo recorta. Entra creciendo desde la boca, con el origen abajo a la izquierda (el tallo). */ #cs-ramo{ left:48.702%; top:29.351%; width:44.863%; transform-origin:18% 92%; transform:translateY(9%) scale(.78) rotate(-6deg); opacity:0; } /* el boton naranja, en la posicion del diseño */ .cta-sobre{ position:absolute; left:30.373%; top:76.147%; width:39.028%; height:4.926%; min-height:42px; border:0; border-radius:var(--boton-radio); background:var(--boton-fondo); color:var(--boton-tinta); font-family:var(--hero); font-weight:var(--boton-peso); font-size:var(--boton-cuerpo); letter-spacing:var(--boton-track); text-transform:uppercase; cursor:pointer; overflow:hidden; display:grid; place-items:center; clip-path:inset(0 50% 0 50% round var(--boton-radio)); transition:background .2s ease, scale .2s ease; } .cta-sobre:hover{ background:var(--boton-fondo-hover); scale:1.03; } .cta-txt{ display:block; white-space:nowrap; } .cta-l{ display:inline-block; overflow:hidden; vertical-align:bottom; } .cta-l > i{ display:inline-block; font-style:normal; transform:translateY(115%); } .cta-sobre:focus-visible{ outline:3px solid var(--choco); outline-offset:4px; } /* --- la animacion de apertura -------------------------------------------- */ .sobre-pantalla.animar #cs-dorso { animation:sobre-dorso calc(var(--vel)*1.8s) calc(var(--vel)*.45s) cubic-bezier(.3,.45,.35,1) forwards; } .sobre-pantalla.animar #cs-solapa { animation:sobre-solapa calc(var(--vel)*1.8s) calc(var(--vel)*.45s) cubic-bezier(.3,.45,.35,1) forwards; } .sobre-pantalla.animar #cs-ramo { animation:ramo-sale calc(var(--vel)*1.6s) calc(var(--vel)*3.2s) cubic-bezier(.22,1,.36,1) forwards; } .sobre-pantalla.animar #cs-foto { animation:sobre-foto calc(var(--vel)*1.35s) calc(var(--vel)*2.05s) cubic-bezier(.22,1,.36,1) forwards; } .sobre-pantalla.animar .cta-sobre { animation:cta-abrir calc(var(--vel)*.75s) calc(var(--vel)*4.35s) cubic-bezier(.16,1,.3,1) forwards; } .sobre-pantalla.animar .cta-l > i { animation:cta-letra calc(var(--vel)*.55s) calc(var(--vel) * (4.69s + var(--i) * .035s)) cubic-bezier(.16,1,.3,1) forwards; } @keyframes sobre-solapa{ 0%{ transform:rotateX(0deg); filter:brightness(1) drop-shadow(0 0 0 rgba(74,58,34,0)); } 18%{ filter:brightness(.98) drop-shadow(0 10px 14px rgba(74,58,34,.28)); } 55%{ filter:brightness(.93) drop-shadow(0 6px 10px rgba(74,58,34,.14)); } 100%{ transform:rotateX(-180deg); filter:brightness(.90) drop-shadow(0 0 0 rgba(74,58,34,0)); } } /* el dorso llega desde atras y se ilumina al quedar de frente */ @keyframes sobre-dorso { 0%{ transform:rotateX(180deg); filter:brightness(.90); } 62%{ filter:brightness(.96); } 85%{ filter:brightness(1); } 100%{ transform:rotateX(0deg); filter:brightness(1); } } @keyframes sobre-foto { to{ transform:translateY(0) rotate(-8.93deg); } } @keyframes ramo-sale { 0%{ opacity:0; transform:translateY(9%) scale(.78) rotate(-6deg); } 28%{ opacity:1; } 100%{ opacity:1; transform:translateY(0) scale(1) rotate(0deg); } } @keyframes cta-abrir { to{ clip-path:inset(0 0 0 0 round var(--boton-radio)); } } @keyframes cta-letra { to{ transform:translateY(0); } } /* si alguien prefiere menos movimiento: se muestra el final, sin animar */ .sobre-pantalla.quieto #cs-solapa{ transform:rotateX(-180deg); } .sobre-pantalla.quieto #cs-dorso { transform:rotateX(0deg); } .sobre-pantalla.quieto #cs-foto { transform:translateY(0) rotate(-8.93deg); } .sobre-pantalla.quieto #cs-ramo { transform:none; opacity:1; } .sobre-pantalla.quieto .cta-sobre{ clip-path:inset(0 0 0 0 round var(--boton-radio)); } .sobre-pantalla.quieto .cta-l > i{ transform:none; } /* --- 4 · REVELADOS -------------------------------------------------------- */ [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity var(--dur) var(--curva), transform var(--dur) var(--curva); transition-delay:var(--d, 0ms); will-change:transform,opacity; } /* variante "arco": además escala .94 -> 1 con el origen abajo */ [data-reveal="arco"]{ transform:translateY(28px) scale(.94); transform-origin:50% 100%; } [data-reveal].visible{ opacity:1; transform:none; } /* --- 5 · PORTADA Y LA FRASE QUE VIAJA ------------------------------------- La portada es una pantalla blanca vacía: la frase no vive adentro sino en una capa fija propia, para poder viajar del centro de la pantalla hasta el borde de la cúpula naranja. */ .portada{ min-height:calc(var(--vh) * 100); min-height:100svh; /* transparente a propósito: deja ver la textura del body */ background:transparent; } /* La capa de la frase: alto 0, con el contenido centrado sobre esa línea. Tiene dos estados y NINGUNO se recalcula cuadro a cuadro: · centrada -> position:fixed, la página pasa por debajo; · apoyada -> position:absolute en una coordenada del documento, así sube con el arco sola, al mismo ritmo que todo lo demás. El JS solo decide cuál de los dos, y eso lo hace una vez por cruce. Antes la movía él en cada cuadro y siempre llegaba uno tarde: se veía a los tirones. */ .frase{ position:fixed; top:50%; left:0; right:0; height:0; z-index:5; pointer-events:none; } .frase.apoyada{ position:absolute; } /* las dos versiones, recta y curva, apoyadas en el mismo punto */ .frase-recta,.frase-curva{ position:absolute; left:50%; top:0; transform:translate(-50%,-50%); } /* los dos renglones: mismo cuerpo y tracking en la version recta y en la curva */ .fr-1, .frase-curva text.fc-1{ font-family:var(--hero); font-weight:var(--frase-peso); font-size:var(--frase-cuerpo); letter-spacing:var(--frase-track); } .fr-2, .frase-curva text.fc-2{ font-family:var(--hero); font-weight:var(--frase2-peso); font-size:var(--frase2-cuerpo); letter-spacing:var(--frase2-track); } .frase-recta{ width:100%; padding:0 calc(var(--pad-x) + env(safe-area-inset-left, 0px)); text-align:center; color:var(--frase-tinta); } .fr-1{ text-transform:uppercase; } .fr-1,.fr-2{ margin:0; line-height:1.5; text-indent:.2em; } .frase-curva{ opacity:0; overflow:visible; } .frase-curva text{ fill:var(--frase-tinta); } /* la flechita de "deslizá": se va sola con el scroll porque vive dentro de la portada. Tiene que leerse a un metro de distancia y con sol: por eso el cuerpo y el trazo son más grandes de lo que pide el dibujo. */ .flecha-scroll{ position:absolute; left:50%; bottom:9%; translate:-50% 0; width:clamp(32px,9vw,42px); color:var(--frase-tinta); pointer-events:none; will-change:transform,opacity; /* el JS la sube y la funde con el scroll */ } .flecha-scroll svg{ width:100%; height:auto; animation:flecha-rebote 1.9s ease-in-out infinite; } @keyframes flecha-rebote{ 0%,100%{ transform:translateY(0); opacity:.75; } 50% { transform:translateY(10px); opacity:1; } } /* --- 6 · LA TARJETA (arco + bloque marrón) -------------------------------- Todo lo que sigue está medido en cqw: 1cqw = 1% del ancho de LA TARJETA, no de la pantalla. En celular la tarjeta ocupa todo el ancho y cqw es lo mismo que vw; en monitores la tarjeta se achica y el diseño entero se achica con ella, en vez de estirarse. */ .tarjeta{ width:100%; margin-inline:auto; container-type:inline-size; } /* --- 6b · BLOQUE FECHA Y LUGAR -------------------------------------------- */ .bloque{ position:relative; overflow:hidden; /* ninguna forma se escapa a los costados */ padding-top:clamp(96px,24vw,170px); padding-bottom:clamp(96px,24vw,170px); } /* este bloque asoma apenas termina el hero y se mete debajo de la nube */ .bloque-fecha{ padding-top:clamp(24px,6cqw,48px); padding-bottom:0; } .arco-fecha{ width:100%; /* de borde a borde, sin márgenes */ /* 50vw de radio en los dos ejes = medio círculo exacto, no una elipse. */ border-radius:50cqw 50cqw 0 0; /* El alto no es un número al ojo: es lo que hace falta para que la nube todavía esté abajo del borde de la pantalla cuando el texto naranja llega al centro, y recién asome con un poco más de scroll. Se suma: 64vw el solape con la nube (la nube arranca ahí arriba) + 50svh media pantalla (del centro al borde de abajo) + 46vw lo que baja el texto dentro del arco - 90px la nube ya entra 170px más abajo por su propio desplazamiento */ /* 86.2vw es la distancia del tope de la cúpula al borde del bloque marrón: sale de medir la tarjeta final y es lo que fija la composición. Los 64vw son el solape con ese bloque. El max() es el piso de seguridad: en pantallas muy altas hace falta más arco para que el marrón todavía esté abajo del borde cuando la frase llega al centro. */ min-height:calc(86.2cqw + 64cqw); min-height:max(calc(86.2cqw + 64cqw), calc(24.5cqw + 40.6cqw - 90px + 50svh)); background:var(--arco); color:var(--arco-tinta); position:relative; /* para poder colgarle el sticker */ /* 35.8cqw es la distancia del tope de la cúpula al primer renglón */ padding:35.8cqw calc(clamp(22px,6vw,44px) + env(safe-area-inset-right, 0px)) clamp(76px,20vw,130px) calc(clamp(22px,6vw,44px) + env(safe-area-inset-left, 0px)); display:flex; flex-direction:column; align-items:center; text-align:center; } /* Los huecos NO son parejos: chico arriba del nombre, más grande abajo (así la fecha se agrupa con el nombre y el lugar queda suelto). Van con tope: sin él crecen con el ancho y en escritorio quedan enormes, con "Coronel Suárez" cayendo casi encima de la nube. */ .arco-fecha .gigante{ margin:4.2cqw 0 4.3cqw; } /* el segundo renglón va pegado a la fecha, como un solo bloque */ #t-fecha-medio{ margin-top:.35em; } /* --- 7 · BLOQUE SAVE THE DATE (la nube) ----------------------------------- */ /* La nube se monta sobre el cuerpo del arco naranja. El solape no es estético: la nube recién ocupa todo el ancho a los 62.5vw de su altura (ahí terminan las volutas), así que hay que subirla algo más que eso para que entre los dos bloques no asome el blanco por los costados. */ .bloque-nube{ padding-top:0; padding-bottom:0; margin-top:-64cqw; /* pinta naranja media pantalla hacia abajo SIN agregar alto al documento: es lo que se ve cuando el dedo tironea más allá del final */ /* visible: los stickers salen de la caja por arriba. El scroll horizontal igual está frenado en html,body. */ overflow:visible; position:relative; /* El color sigue media pantalla más abajo, para cuando el dedo tironea más allá del final. Va como SOMBRA y no como elemento: una sombra pinta pero no ocupa lugar. Con un div acá abajo el body sumaba media pantalla de alto y aparecía una SEGUNDA barra de scroll (la flecha doble, y el scroll que se trababa al llegar al final del documento con el body todavía a medias). El desplazamiento hacia abajo es igual al radio, así que la sombra arranca justo en el borde de abajo del bloque y no asoma por arriba. */ box-shadow:0 50svh 0 50svh var(--nube); } .nube-caja{ position:relative; width:100%; /* de borde a borde, igual que el arco */ overflow:hidden; /* para poder recortarle naranja por abajo */ /* la nube natural mide 85vw: se le sacan 17vw de base sólida para que la página termine con los tres bloques a la vista y no haya que seguir deslizando sobre naranja vacío */ height:68cqw; } /* la capa que el JS desplaza al entrar; la caja de arriba la recorta */ .nube-desliza{ position:absolute; inset:0; will-change:transform; } .nube-svg{ width:100%; height:auto; } .nube-svg path{ fill:var(--nube); } /* el color sale de la paleta */ .nube-texto{ position:absolute; left:8%; right:8%; /* La posición va atada al ANCHO, no al alto de la caja: así el texto queda siempre en el mismo lugar respecto de las volutas, aunque abajo le recortemos verde. (29.75vw y 34.85vw son exactamente el 35% / 24% de antes, cuando la nube medía 85vw de alto.) */ top:23.3cqw; height:34.85cqw; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3cqw; text-align:center; color:var(--nube-tinta); } .nube-texto .gigante{ font-size:min(calc(var(--tit-cuerpo) * var(--nube-escala)), calc(var(--tit-max) * var(--nube-escala))); } /* --- 7b · LOS STICKERS ---------------------------------------------------- Las tres piezas dibujadas de la tarjeta. Van ubicadas en vw (un % del ancho de la pantalla), que es como está medido todo el resto del diseño, y aparecen recién cuando se llega al final del scroll: entran igual que el ramito del sobre, creciendo desde su punto de apoyo. */ .sticker{ position:absolute; display:block; height:auto; pointer-events:none; z-index:3; opacity:0; transform:translateY(9%) scale(.78) rotate(-6deg); } /* Todo se mide contra --st, el ancho de la "tarjeta": en celular es la pantalla entera y en monitores se planta en 640px, así los stickers no crecen sin fin ni se comen el texto. Los coeficientes salen de medir el JPG final. */ /* la mano cuelga de la cúpula; las otras dos van pegadas al borde derecho */ #st-mano { left:.3cqw; top:12.5cqw; width:33.3cqw; transform-origin:70% 100%; } #st-ramo { left:auto; right:0; top:-30.7cqw; width:46cqw; transform-origin:18% 92%; } #st-anillos{ left:auto; right:9.4cqw; top:20cqw; width:15.6cqw; transform-origin:50% 100%; } /* el disparo lo pone el JS cuando la página llega abajo del todo */ .stickers-a-la-vista .sticker{ animation:sticker-entra 1.6s calc(var(--i) * .22s) cubic-bezier(.22,1,.36,1) forwards; } @keyframes sticker-entra{ 0%{ opacity:0; transform:translateY(9%) scale(.78) rotate(-6deg); } 28%{ opacity:1; } 100%{ opacity:1; transform:translateY(0) scale(1) rotate(0deg); } } /* --- 8 · DESKTOP: solo ajustes hacia arriba ------------------------------- */ @media (min-width:768px){ :root{ --pad-x:48px; } body{ font-size:17px; } /* La tarjeta sigue yendo a sangre. Lo único que cambia en pantalla ancha son los topes: sin ellos, los huecos y el arco crecen con el ancho y quedan enormes. Los valores son los que ya estaban afinados antes. */ .arco-fecha{ padding-top:min(35.8cqw, 326px); /* El arco no puede terminar más abajo que el bloque marrón: si sobra arco, asoma una franja rosa por debajo del final y encima el body se vuelve scrolleable de más. Como acá el solape es de 44cqw (y no de 64), el alto del arco baja esos mismos 20cqw y la composición queda igual. */ min-height:calc(58cqw + 236px + var(--vh) * 50); min-height:calc(58cqw + 236px + 50svh); } /* 44cqw alcanza: el marrón ya ocupa todo el ancho a los 41cqw (ahí termina la ola), así que no se abre papel a los costados, y el bloque —que nunca baja de 46cqw— siempre llega más abajo que el arco. */ .bloque-nube{ margin-top:-44cqw; } .arco-fecha .gigante{ margin:min(4.2cqw, 43px) 0 min(4.3cqw, 44px); } /* El bloque marrón entra justo en la pantalla: así el scroll termina con el bloque entero a la vista y no sigue sobre marrón vacío. El piso de 52cqw es para que nunca se corte la ola (mide 41cqw). */ .nube-caja{ height:clamp(46cqw, 78svh, 68cqw); } /* el texto va en % de esa caja, no en cqw, para acompañarla, y apoyado más abajo: así la cola de marrón después de la bajada queda corta */ .nube-texto{ top:38%; height:40%; } /* --- los stickers: chicos y contra los bordes ------------------------- --st es el "ancho de tarjeta" con el que se miden: se planta en 660px, así conservan entre ellos las proporciones del diseño pero dejan de crecer con la pantalla y no se comen el texto. */ .sticker{ --st:min(100cqw, 660px); } /* la mano, pegada al borde izquierdo */ #st-mano { width:calc(var(--st) * .333); top:25cqw; left:0; right:auto; } /* el ramo y los anillos bajan hasta montarse sobre el borde del bloque marrón: a esa altura el borde pasa 13cqw abajo de la cresta, así que el ramo queda mitad y mitad entre los dos bloques */ #st-ramo { width:calc(var(--st) * .46); left:auto; right:0; top:calc(13cqw - var(--st) * .357); } #st-anillos{ width:calc(var(--st) * .156); left:auto; right:calc(var(--st) * .094); top:calc(13cqw + var(--st) * .15); } .frase-recta,.frase-curva text{ letter-spacing:calc(var(--frase-track) + .04em); } .nube-texto{ left:12%; right:12%; } } /* --- 9 · ACCESIBILIDAD: sin movimiento ------------------------------------ */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } [data-reveal]{ opacity:1 !important; transform:none !important; } .sticker{ opacity:1 !important; transform:none !important; } }