/** * UNEI — Site motion. * * Three things, all of them cheap: copy that fades up as it arrives, colour * blocks that drift very slowly, and a lift on the photos under the cursor. * * Rules of the house: * - Only opacity, transform, filter and background-position are animated, so * nothing here can move the layout. At rest every element measures exactly * what it measured before this file existed. * - Everything hangs off .unei-motion, which motion.js puts on . If the * script never runs, none of this applies and the page stays as it is. * - The whole file switches off under prefers-reduced-motion. */ /* Reveal ------------------------------------------------------------------ * .unei-in is the hidden state and .is-in the arrival. The 10% margin in the * observer means a section starts moving just before it is fully on screen, * which reads as the page keeping up rather than reacting. */ .unei-motion .unei-in { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--unei-in-delay, 0ms), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--unei-in-delay, 0ms); will-change: opacity, transform; } .unei-motion .unei-in.is-in { opacity: 1; transform: none; will-change: auto; } /* Colour blocks ----------------------------------------------------------- * A soft light and a soft shadow laid over the flat colour, drifting across it * on a long loop. They are background layers over the block's own background * colour, so no pseudo-element and no positioning context is needed: the * element keeps its exact box. */ @keyframes unei-drift { from { background-position: 0% 50%, 100% 50%; } to { background-position: 100% 20%, 0% 80%; } } .unei-motion .unei-impacto__panel, .unei-motion .unei-servicios__salmon, .unei-motion .unei-uneiverso, .unei-motion .unei-sshero__pill, .unei-motion .unei-ssintro, .unei-motion .unei-ssmod__tint, .unei-motion .unei-prbanda__pastilla, .unei-motion .unei-ntnews { background-image: radial-gradient(42% 42% at 30% 40%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%), radial-gradient(38% 38% at 75% 65%, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0) 70%); background-repeat: no-repeat; background-size: 160% 160%, 150% 150%; animation: unei-drift 18s ease-in-out infinite alternate; } /* Out of step on purpose: blocks breathing in unison look mechanical. */ .unei-motion .unei-sshero__pill { animation-duration: 20s; animation-delay: -3s; } .unei-motion .unei-ssintro { animation-duration: 24s; animation-delay: -9s; } .unei-motion .unei-ssmod__tint { animation-duration: 21s; animation-delay: -14s; } .unei-motion .unei-prbanda__pastilla { animation-duration: 19s; animation-delay: -5s; } .unei-motion .unei-ntnews { animation-duration: 23s; animation-delay: -17s; } .unei-motion .unei-servicios__salmon { animation-duration: 22s; animation-delay: -6s; } .unei-motion .unei-uneiverso { animation-duration: 26s; animation-delay: -11s; } /* Photos ------------------------------------------------------------------ * Colour, a shadow that lifts the picture off the page, and a small step * forward. * * The video poster sits in a box that clips (.unei-clientes__stage), so it can * be zoomed properly inside its frame and takes a larger step. The rest are * absolutely positioned images carrying their own rounded shape, with nothing * to clip them: for those the scale grows the whole shape, so it stays at 2% — * enough to read as depth, small enough not to crowd the copy beside it. */ .unei-motion .unei-clientes__poster { transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } .unei-motion .unei-clientes__stage:hover .unei-clientes__poster { transform: scale(1.04); } .unei-motion .unei-impacto__photo, .unei-motion .unei-partner__photo, .unei-motion .unei-servicios__photo { transition: filter 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } /* * Partner and servicios put the copy wrapper above the photo, and that wrapper's * box spans the whole section even though the words sit on the left half — so * the cursor never reached the picture at all. * * Lifting the photo instead was wrong: in servicios the tab pills genuinely run * across it (they reach x 813, the photo starts at 682) and the photo covered * them. The pills have to win. So the wrapper stops catching the mouse and only * the pills take it back: the pointer falls through the empty half onto the * photo, and every pill stays on top and clickable. * * The cost is that the headline and the lockup inside that wrapper can no longer * be selected with the mouse. They are decorative type, and the alternative was * a picture nobody can hover. */ @media ( min-width: 901px ) { .unei-motion .unei-partner__inner, .unei-motion .unei-servicios__inner { pointer-events: none; } .unei-motion .unei-partner__tabs, .unei-motion .unei-servicios__tabs { pointer-events: auto; } } .unei-motion .unei-impacto__photo:hover, .unei-motion .unei-partner__photo:hover, .unei-motion .unei-servicios__photo:hover { filter: saturate(1.08) brightness(1.04); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); transform: scale(1.02); } /* Pictures on the inner pages ---------------------------------------------- * Same step forward as the home photos. The flow illustration is left out on * purpose: it carries the hotspots, and a picture that moves under the cursor * would fight the very thing you are trying to point at. */ .unei-motion .unei-qszz__media, .unei-motion .unei-ssmod__photo, .unei-motion .unei-shprod__media, .unei-motion .unei-ntlist__foto, .unei-motion .unei-mosaico__celda { transition: filter 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } .unei-motion .unei-qszz__media:hover, .unei-motion .unei-shprod__media:hover, .unei-motion .unei-ntlist__foto:hover, .unei-motion .unei-mosaico__celda:hover { filter: saturate(1.08) brightness(1.04); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); transform: scale(1.02); } /* * The module banner is a proper frame: it clips its overflow, and the picture * sits under a tint and a scrim that swallow the cursor. So the frame takes the * hover and the picture zooms inside it, the same way the video poster does. */ .unei-motion .unei-ssmod__banner:hover .unei-ssmod__photo { transform: scale(1.04); } /* Cards on the inner pages ------------------------------------------------- * The ones that stand alone in a grid, like the stat cards on the home: they * grow as one piece, picture and copy together. */ /* * The award logo used to take a hover of its own, on top of the card's: the * picture saturated and grew while the box lifted and grew around it, two * animations on the same 2% scale fighting each other. The box reacts; the * logo rides along, like the uneiverso cards below. */ .unei-motion .unei-ssintro__card, .unei-motion .unei-prpremios__celda, .unei-motion .unei-ctofi__ficha, .unei-motion .unei-ntlist__tarjeta { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease; } .unei-motion .unei-ssintro__card:hover, .unei-motion .unei-prpremios__celda:hover, .unei-motion .unei-ctofi__ficha:hover, .unei-motion .unei-ntlist__tarjeta:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14); } /* A card is one piece -------------------------------------------------------- * The picture used to grow on its own inside the card, which read as the photo * reacting rather than the card. Now the whole card lifts and grows together, * picture, copy and link, and nothing moves relative to anything else inside it. */ .unei-motion .unei-uneiverso__card { transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease; } /* * The track is a horizontal carousel, and `overflow-x: auto` drags the vertical * axis into clipping with it — there is no way to scroll one axis and overflow * the other. Its padding is 72px on top and ZERO at the bottom, so a card ends * one pixel from the edge and the shadow was being sliced off. * * The room is added inside the scroll box and taken straight back out with a * negative margin, so the shadow gets its space and nothing below moves. */ .unei-motion .unei-uneiverso__track { padding-bottom: 40px; margin-bottom: -40px; } .unei-motion .unei-uneiverso__card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16); } /* Coloured domes ---------------------------------------------------------- * The two shapes that bleed off the right edge drift with the scroll, half a * travel each way, so they read as a layer sitting behind the copy. * * No extra tail is needed any more, and the box is back to its original size: * the shape only ever slides DOWN from its resting place, and the section clips * its overflow, so the travel can never lift the shape off the bottom edge. */ .unei-motion .unei-servicios__salmon { transform: translate3d(0, var(--unei-shift, 0px), 0); will-change: transform; } /* Reaching the photo through the copy --------------------------------------- * Same story one level deeper, and this is the bit that left a dead strip right * under the pills. Measured on the page: `__content` runs the full 1425px, and * so do `__actions` and, in partner, `__heading` — while the words inside them * stop around x 610 and the photo starts at 682. * * So those three stop catching the mouse and their children take it straight * back. The buttons stay clickable, the body copy stays selectable, and the * pointer falls through the empty right half onto the picture. */ @media ( min-width: 901px ) { .unei-motion .unei-partner__content, .unei-motion .unei-servicios__content { pointer-events: none; } .unei-motion .unei-partner__content > *, .unei-motion .unei-servicios__content > *, .unei-motion .unei-partner__actions > *, .unei-motion .unei-servicios__actions > * { pointer-events: auto; } /* After the children rule, so these three stay out of the way. */ .unei-motion .unei-partner__heading, .unei-motion .unei-partner__actions, .unei-motion .unei-servicios__actions { pointer-events: none; } } /* Tab pills --------------------------------------------------------------- * They had no hover at all: the row only ever reacted to the click. An idle * pill now previews the colour it would take, and the live one deepens, which * is the same move the buttons make. */ .unei-motion .unei-servicios__tab:not(.is-active):hover, .unei-motion .unei-servicios__tab:not(.is-active):focus-visible { background: rgba(252, 136, 123, 0.16); /* --unei-salmon */ } .unei-motion .unei-partner__tab:not(.is-active):hover, .unei-motion .unei-partner__tab:not(.is-active):focus-visible, .unei-motion .unei-sedes__tab:not(.is-active):hover, .unei-motion .unei-sedes__tab:not(.is-active):focus-visible { background: rgba(71, 73, 73, 0.12); /* --unei-dark */ } .unei-motion .unei-servicios__tab.is-active:hover, .unei-motion .unei-servicios__tab.is-active:focus-visible { background: #f9695a; } .unei-motion .unei-partner__tab.is-active:hover, .unei-motion .unei-partner__tab.is-active:focus-visible, .unei-motion .unei-sedes__tab.is-active:hover, .unei-motion .unei-sedes__tab.is-active:focus-visible { background: var(--unei-ink, #000000); } /* Tab panels -------------------------------------------------------------- * Clicking a pill used to swap one panel for the next in a single frame. Now * the panel fades and its copy rises under it. * * The panel itself gets opacity and NOTHING else: the section's photo is an * absolutely positioned child of the panel that anchors to the section, and a * transform here would make the panel its containing block and throw the photo * across the page. The travel goes on the copy, which has no such child. * * Fill mode is `backwards`, never `both`. An animation of opacity gives its * element a stacking context for as long as it applies, and `both` keeps it * applied forever — which walled the photo inside the panel and left it below * the copy column no matter what z-index it was given, so the cursor could * never reach it. `backwards` paints the opening frame before the animation * starts and lets go the moment it ends. */ @keyframes unei-panel-in { from { opacity: 0; } to { opacity: 1; } } @keyframes unei-panel-copy-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .unei-motion .unei-partner__panel:not([hidden]), .unei-motion .unei-servicios__panel:not([hidden]), .unei-motion .unei-sedes__panel:not([hidden]) { animation: unei-panel-in 0.45s ease backwards; } .unei-motion .unei-partner__panel:not([hidden]) .unei-partner__content, .unei-motion .unei-servicios__panel:not([hidden]) .unei-servicios__content, .unei-motion .unei-sedes__panel:not([hidden]) .unei-sedes__info { animation: unei-panel-copy-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } /* Buttons ----------------------------------------------------------------- * Every block wrote its own :hover for .__btn and ignored the variant, so * inside a block the yellow button and the dark one landed on the same colour, * and from block to block that colour changed: hero, partner and servicios went * white, datos and impacto went black, sshero went white, ssmod went dark. * * One behaviour for the whole site: a button darkens ITS OWN colour. * * Getting there needs both files. A fixed colour cannot work — half of these * buttons carry their background in a style attribute (Social Health's is cyan, * not yellow) and an inline style beats any stylesheet. And a plain filter * cannot work either, because the blocks that swap the background on hover * would have their swapped colour darkened instead of their own: a yellow * button turning white and then dimming reads as a fault. * * So motion.js records each button's resting colours in two custom properties * and marks it, and the rule below puts those colours back — !important, which * is what outranks an inline style — and darkens from there. The brand yellow * #fcba24 lands on #dea420, the colour the front page was already using. * * The mark is what makes it safe: if the script never runs, no button is * marked, nothing here applies and every block keeps the hover it always had. */ .unei-motion .unei-btn-listo { transition: filter 0.25s ease, background-color 0.25s ease, color 0.25s ease; } .unei-motion .unei-btn-listo:hover, .unei-motion .unei-btn-listo:focus-visible { background: var(--unei-btn-bg) !important; color: var(--unei-btn-color) !important; filter: brightness(0.88); } /* Stat cards -------------------------------------------------------------- * They stand alone in a grid with nothing to clip them, so unlike the photos * these can genuinely grow a little under the cursor. */ .unei-motion .unei-datos__card { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease; } .unei-motion .unei-datos__card:hover { transform: scale(1.03); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14); } /* Reduced motion ---------------------------------------------------------- * Not "faster": none. The reveal has to land on its finished state or the copy * would never appear for anyone who asked the system to stop moving things. */ @media ( prefers-reduced-motion: reduce ) { .unei-motion .unei-in, .unei-motion .unei-in.is-in { opacity: 1; transform: none; transition: none; } .unei-motion .unei-impacto__panel, .unei-motion .unei-servicios__salmon, .unei-motion .unei-uneiverso, .unei-motion .unei-sshero__pill, .unei-motion .unei-ssintro, .unei-motion .unei-ssmod__tint, .unei-motion .unei-prbanda__pastilla, .unei-motion .unei-ntnews { background-image: none; animation: none; } .unei-motion .unei-clientes__poster, .unei-motion .unei-impacto__photo, .unei-motion .unei-partner__photo, .unei-motion .unei-servicios__photo, .unei-motion .unei-uneiverso__card { transition: none; } .unei-motion .unei-clientes__stage:hover .unei-clientes__poster, .unei-motion .unei-uneiverso__card:hover, .unei-motion .unei-datos__card:hover, .unei-motion .unei-qszz__media:hover, .unei-motion .unei-ssmod__photo:hover, .unei-motion .unei-shprod__media:hover, .unei-motion .unei-ntlist__foto:hover, .unei-motion .unei-mosaico__celda:hover, .unei-motion .unei-ssintro__card:hover, .unei-motion .unei-prpremios__celda:hover, .unei-motion .unei-ctofi__ficha:hover, .unei-motion .unei-ntlist__tarjeta:hover, .unei-motion .unei-impacto__photo:hover, .unei-motion .unei-partner__photo:hover, .unei-motion .unei-servicios__photo:hover { transform: none; } .unei-motion .unei-datos__card, .unei-motion .unei-btn-listo { transition: none; } .unei-motion .unei-btn-listo:hover, .unei-motion .unei-btn-listo:focus-visible { filter: none; } /* The dome goes back to sitting still. */ .unei-motion .unei-servicios__salmon { transform: none; will-change: auto; } .unei-motion .unei-partner__panel:not([hidden]), .unei-motion .unei-servicios__panel:not([hidden]), .unei-motion .unei-sedes__panel:not([hidden]), .unei-motion .unei-partner__panel:not([hidden]) .unei-partner__content, .unei-motion .unei-servicios__panel:not([hidden]) .unei-servicios__content, .unei-motion .unei-sedes__panel:not([hidden]) .unei-sedes__info { animation: none; } }