.gt-cinta, .gt-pie { font-family: var(--font-sans, -apple-system, 'Helvetica Neue', Arial, sans-serif); color: #FFFFFF; font-weight: 700; letter-spacing: 0.01em; } /* Cinta azul marino con el logo y el mensaje; abajo, la franja de colores. */ .gt-cinta { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.55rem 1rem calc(0.55rem + 5px); font-size: 0.78rem; line-height: 1.25; text-align: left; background: linear-gradient(90deg, #17B5C8 0 20%, #FFC233 0 40%, #F7893B 0 60%, #7CB850 0 80%, #F28CA0 0) left bottom / 200px 5px repeat-x, #0B1B4F; } .gt-cinta-logo { display: block; flex: none; height: 1.5rem; width: auto; } .gt-cinta-txt { min-width: 0; max-width: 14rem; padding-left: 0.75rem; border-left: 1px solid rgba(255,255,255,0.32); text-wrap: balance; } .gt-pie { padding: calc(0.85rem + 5px) 1rem 0.85rem; text-align: center; font-size: 0.8rem; line-height: 1.3; background: linear-gradient(90deg, #17B5C8 0 20%, #FFC233 0 40%, #F7893B 0 60%, #7CB850 0 80%, #F28CA0 0) left top / 200px 5px repeat-x, #0B1B4F; } /* Las páginas con la barra fija de abajo (donar, sumarse) dejan su espacio. */ .fpv-con-barra ~ .gt-pie { padding-bottom: 6.35rem; } @media (min-width: 1024px) { .fpv-con-barra ~ .gt-pie { padding-bottom: 0.85rem; } } .gt-pie span { display: inline-flex; align-items: center; gap: 0.5em; } .gt-pie span::before { content: ''; flex: none; width: 1.15em; height: 0.92em; background: url("/givingtuesday/corazon-blanco.png") center / contain no-repeat; } @media (min-width: 768px) { .gt-cinta { font-size: 0.9rem; gap: 1rem; } .gt-cinta-logo { height: 1.7rem; } .gt-cinta-txt { max-width: none; padding-left: 1rem; } } /* El logo de la fundación lleva el corazón de GivingTuesday como insignia, abajo a la derecha (medidas del logo y la barra de PUBLIC_CSS). */ .gt-cinta ~ * .fpv-top .fpv-wrap::after { content: ''; position: absolute; left: 3.3rem; top: 2.85rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; pointer-events: none; background: url("/givingtuesday/corazon-blanco.png") center 58% / 64% auto no-repeat, #EB1C30; box-shadow: 0 0 0 2px #FFFFFF, 0 2px 6px rgba(11,27,79,0.25); } @media (min-width: 768px) { .gt-cinta ~ * .fpv-top .fpv-wrap::after { left: 4.45rem; top: 3.2rem; width: 1.5rem; height: 1.5rem; } } /* Corazones: solo en la página de la fundación (la portada de PublicHero), detrás del texto, la foto y los botones (.fpv-grid es su propio plano y se pinta encima). No asoman sobre la cinta ni la barra del logo y se desvanecen hacia abajo. En el celular, una sola capa. */ .gt-corazones { display: none; position: absolute; top: 0; left: 0; right: 0; height: 44rem; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0.7; -webkit-mask-image: linear-gradient(transparent 8.6rem, #000 11rem, #000 24rem, transparent); mask-image: linear-gradient(transparent 8.6rem, #000 11rem, #000 24rem, transparent); } body:has(.fpv-grid) .gt-corazones { display: block; } .gt-corazones::before, .gt-corazones::after { content: ''; position: absolute; left: 0; right: 0; top: 0; will-change: transform; } .gt-corazones::before { bottom: -260px; background: url("data:image/svg+xml,") 0 0 / 260px 260px; animation: gt-sube 40s linear infinite; } .gt-corazones::after { display: none; bottom: -380px; opacity: 0.5; background: url("data:image/svg+xml,") 0 0 / 380px 380px; animation: gt-sube-2 64s linear infinite; } @media (min-width: 640px) { .gt-corazones::after { display: block; } } @media (min-width: 900px) { .gt-corazones { -webkit-mask-image: linear-gradient(transparent 9rem, #000 12rem, #000 26rem, transparent); mask-image: linear-gradient(transparent 9rem, #000 12rem, #000 26rem, transparent); } } @keyframes gt-sube { to { transform: translateY(-260px); } } @keyframes gt-sube-2 { to { transform: translateY(-380px); } } /* Brillo amarillo 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. */ .gt-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,210,102,0.6) 50%, transparent 58%); background-size: 250% 100%; background-repeat: no-repeat; background-position: 160% 0; animation: gt-brillo 6s ease-in-out infinite; } @keyframes gt-brillo { 0%, 70% { background-position: 160% 0; } 100% { background-position: -60% 0; } } /* Página de gracias: la frase y corazoncitos de colores que salen una vez del ícono (las páginas los traen escondidos, ver THANKS_CSS). Del ancho de su texto y centrada; el corazón va dentro del texto, así queda junto a la primera palabra aunque la frase ocupe dos líneas. */ .gt-cinta ~ * .gt-gracias { 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: #E3F5F8; color: #0B1B4F; font-weight: 700; font-size: 0.9rem; line-height: 1.35; text-wrap: balance; } .gt-gracias::before { content: ''; display: inline-block; width: 1.05em; height: 0.83em; margin-right: 0.45em; vertical-align: -0.06em; background: #EB1C30; -webkit-mask: url("/givingtuesday/corazon-blanco.png") center / contain no-repeat; mask: url("/givingtuesday/corazon-blanco.png") center / contain no-repeat; } .gt-cinta ~ * .gt-estallido { display: block; position: absolute; inset: 0; pointer-events: none; } .gt-estallido i { position: absolute; left: 50%; top: 50%; width: 14px; height: 13px; margin: -7px; opacity: 0; background: var(--c); -webkit-mask: url("data:image/svg+xml,") center / contain no-repeat; mask: url("data:image/svg+xml,") center / contain no-repeat; animation: gt-estalla 1.5s cubic-bezier(.2,.7,.3,1) 0.3s both; } .gt-estallido i:nth-child(even) { width: 10px; height: 9px; margin: -5px; } @keyframes gt-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) { .gt-corazones::before, .gt-corazones::after { animation: none; } .gt-cinta ~ * :is(.fpv-cta:not(.fpv-cta-off), .fpd-cta:not(:disabled), .fpv-bar .fpv-btn) { animation: none; background-image: none; } .gt-cinta ~ * .gt-estallido { display: none; } }

Elige el diseño