.xm-cinta, .xm-pie { position: relative; padding: 0.5rem 1rem; text-align: center; font-family: var(--font-sans, -apple-system, 'Helvetica Neue', Arial, sans-serif); color: #FFF6E0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; background: radial-gradient(circle, rgba(233,185,73,0.5) 0 1px, transparent 1.6px) 6px 4px / 34px 22px, linear-gradient(90deg, #0F5132, #17804A 50%, #0F5132); } .xm-cinta { z-index: 4; border-bottom: 2px solid #C8102E; } .xm-pie { padding-block: 0.85rem; border-top: 2px solid #C8102E; } /* Las páginas con la barra fija de abajo (donar, sumarse) dejan su espacio. */ .fpv-con-barra ~ .xm-pie { padding-bottom: 6.35rem; } @media (min-width: 1024px) { .fpv-con-barra ~ .xm-pie { padding-bottom: 0.85rem; } } .xm-cinta-txt, .xm-pie span { display: inline-flex; align-items: center; gap: 0.5em; } .xm-cinta-txt::before, .xm-cinta-txt::after, .xm-pie span::before, .xm-gracias-navidad::before { content: ''; flex: none; width: 0.75em; height: 0.75em; background: url("data:image/svg+xml,") center / contain no-repeat; } .xm-luces { position: absolute; left: 0; right: 0; top: calc(100% + 2px); height: 20px; pointer-events: none; background: url("data:image/svg+xml,") 0 0 / 96px 20px repeat-x; } .xm-luces::before, .xm-luces::after { content: ''; position: absolute; inset: 0; animation: xm-titila 2.6s ease-in-out infinite alternate; background: url("data:image/svg+xml,") 0 0 / 96px 20px repeat-x; } .xm-luces::after { background-image: url("data:image/svg+xml,"); animation-delay: -1.3s; } @keyframes xm-titila { from { opacity: 0.15; } to { opacity: 1; } } /* La barra del logo baja para que cuelguen las luces y el logo lleva un gorro navideño puesto encima, un poco inclinado hacia la izquierda: el borde blanco cubre la parte de arriba del círculo (medidas del logo y la barra de PUBLIC_CSS). */ .xm-cinta ~ * .fpv-top .fpv-wrap { padding-top: 2rem; } .xm-cinta ~ * .fpv-top .fpv-wrap::after { content: ''; position: absolute; left: 1.13rem; top: 0.96rem; width: 2.4rem; height: 1.86rem; pointer-events: none; background: url("data:image/svg+xml,") center / contain no-repeat; transform: rotate(-14deg); filter: drop-shadow(0 2px 3px rgba(13,12,14,0.18)); } @media (min-width: 768px) { .xm-cinta { font-size: 0.9rem; } .xm-cinta ~ * .fpv-top .fpv-wrap { padding-top: 2.15rem; } .xm-cinta ~ * .fpv-top .fpv-wrap::after { left: 1.86rem; top: 0.98rem; width: 2.7rem; height: 2.09rem; } } /* Destellos: solo en la página de la fundación (la portada de PublicHero), donde quedan detrás del texto, la foto y los botones (.fpv-grid es su propio plano y se pinta encima). No asoman sobre la barra del logo y se desvanecen hacia abajo. En el celular, una sola capa. */ .xm-destellos { display: none; position: absolute; top: 0; left: 0; right: 0; height: 44rem; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent 6.5rem, #000 10rem, #000 22rem, transparent); mask-image: linear-gradient(transparent 6.5rem, #000 10rem, #000 22rem, transparent); } body:has(.fpv-grid) .xm-destellos { display: block; } .xm-destellos::before, .xm-destellos::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; will-change: transform; } .xm-destellos::before { top: -260px; background: url("data:image/svg+xml,") 0 0 / 260px 260px; animation: xm-cae 34s linear infinite; } .xm-destellos::after { display: none; top: -380px; opacity: 0.55; background: url("data:image/svg+xml,") 0 0 / 380px 380px; animation: xm-cae-2 56s linear infinite; } @media (min-width: 640px) { .xm-destellos::after { display: block; } } @media (min-width: 900px) { .xm-destellos { -webkit-mask-image: linear-gradient(transparent 8rem, #000 11.5rem, #000 24rem, transparent); mask-image: linear-gradient(transparent 8rem, #000 11.5rem, #000 24rem, transparent); } } @keyframes xm-cae { to { transform: translateY(260px); } } @keyframes xm-cae-2 { to { transform: translateY(380px); } } /* Brillo dorado que pasa cada tanto por los botones de donar (el de la portada, el de la causa y el de la barra fija del celular), por debajo del texto. Va en el fondo y no en una capa encima, para no cambiar la posición de ningún botón. */ .xm-cinta ~ * :is(.fpv-cta:not(.fpv-cta-off), .fpd-cta:not(:disabled), .fpv-bar .fpv-btn) { background-image: linear-gradient(105deg, transparent 42%, rgba(255,232,160,0.55) 50%, transparent 58%); background-size: 250% 100%; background-repeat: no-repeat; background-position: 160% 0; animation: xm-brillo 6s ease-in-out infinite; } @keyframes xm-brillo { 0%, 70% { background-position: 160% 0; } 100% { background-position: -60% 0; } } /* Página de gracias: la frase de Navidad y estrellitas que salen una vez del ícono (las páginas las traen escondidas, ver THANKS_CSS). */ /* Del ancho de su texto y centrada. La estrella va dentro del texto, así queda junto a la primera palabra aunque la frase ocupe dos líneas. */ .xm-cinta ~ * .xm-gracias-navidad { display: block; width: fit-content; max-width: 100%; margin-inline: auto; justify-self: center; padding: 0.55rem 1.1rem; border-radius: 999px; text-align: center; background: #E8F3EC; color: #0F5132; font-weight: 700; font-size: 0.9rem; line-height: 1.35; text-wrap: balance; } .xm-gracias-navidad::before { display: inline-block; vertical-align: -0.08em; margin-right: 0.45em; } .xm-cinta ~ * .xm-estallido { display: block; position: absolute; inset: 0; pointer-events: none; } .xm-estallido i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; opacity: 0; background: url("data:image/svg+xml,") center / contain no-repeat; animation: xm-estalla 1.5s cubic-bezier(.2,.7,.3,1) 0.3s both; } .xm-estallido i:nth-child(even) { width: 10px; height: 10px; margin: -5px; } @keyframes xm-estalla { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-4.5rem) scale(1); } } @media (prefers-reduced-motion: reduce) { .xm-luces::before, .xm-luces::after, .xm-destellos::before, .xm-destellos::after { animation: none; } .xm-cinta ~ * :is(.fpv-cta:not(.fpv-cta-off), .fpd-cta:not(:disabled), .fpv-bar .fpv-btn) { animation: none; background-image: none; } .xm-cinta ~ * .xm-estallido { display: none; } }

Elige el diseño