.thank-you-linkedin {
background: #fff;
}
/* layout */
.thank-you-linkedin .thank-you-linkedin__container {
padding: 5rem 2rem;
display: flex;
gap: 5rem;
justify-content: space-between;
}
.thank-you-linkedin .thank-you-linkedin__column--flex {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
/* títulos */
.thank-you-linkedin .thank-you-linkedin__title {
font-size: 2.375rem;
font-weight: 600;
display: block;
margin-bottom: 1rem;
}
.thank-you-linkedin .thank-you-linkedin__title--secondary {
font-size: 1.5rem;
font-weight: 600;
display: block;
margin-bottom: 1rem;
}
.thank-you-linkedin .thank-you-linkedin__subtitle {
font-size: 1rem;
font-weight: 400;
margin-bottom: 24px;
color: #3A455C;
display: block;
line-height: 1.5rem;
}
/* bloque formulario */
.thank-you-linkedin .thank-you-linkedin__form {
background-color: #F4F6FD;
border-radius: .5rem;
padding: 2rem;
display: flex;
flex-direction: column;
gap: .5rem;
width: 100%;
}
.thank-you-linkedin .thank-you-linkedin__form-title {
font-size: 1.25rem;
font-weight: 500;
color: #14171F;
margin-bottom: .5rem;
max-width: 46rem;
line-height: 1.5rem;
}
.thank-you-linkedin .thank-you-linkedin__info {
font-size: 0.875rem;
color: #3C445D;
margin: 0;
display: block;
line-height: 1.25rem;
}
/* input group */
.thank-you-linkedin .thank-you-linkedin__input-group {
display: flex;
gap: 8px;
transition: opacity 0s ease, visibility 0s ease;
}
.thank-you-linkedin .thank-you-linkedin__input-group input[type="url"],
.thank-you-linkedin .thank-you-linkedin__input {
border-radius: 0.25rem;
border: 1px solid #6A7186;
padding: .75rem;
height: 3rem;
font-weight: 500;
font-size: 0.875rem;
color: #14171F;
}
.thank-you-linkedin .thank-you-linkedin__input-group.error input[type="url"] {
border-color: #C20A0A;
background: #FDF1F1;
color: #BE2424;
}
/* botón submit (con tu excepción) */
.thank-you-linkedin .thank-you-linkedin__input-group .thank-you-linkedin__submit:not(.hero-video__nav-btn) {
background-color: #2501C3;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
height: 3rem;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 96px;
}
/* botón saltar */
.thank-you-linkedin .thank-you-linkedin__skip:not(.hero-video__nav-btn) {
border: 2px solid #2501C3;
color: #2501C3;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
display: inline-flex;
margin-top: 1.5rem;
height: 3rem;
position: relative;
align-items: center;
justify-content: center;
background: transparent;
}
.thank-you-linkedin .thank-you-linkedin__skip:hover {
background-color: #2501C3;
color: #fff;
transition: background-color 0.3s, color 0.3s;
}
/* send */
.thank-you-linkedin .thank-you-linkedin__send:not(.hero-video__nav-btn) {
color: white;
background-color: #2501C3;
border: 2px solid #2501C3;
border-radius: .25rem;
padding: .75rem 1rem;
font-size: 1rem;
font-weight: 600;
height: 3rem;
display: inline-flex;
margin-top: 1.5rem;
align-items: center;
}
.thank-you-linkedin .thank-you-linkedin__send:not(.hero-video__nav-btn):hover {
background-color: white;
color: #2501C3;
transition: background-color 0.3s;
}
.thank-you-linkedin .thank-you-linkedin__send:not(.hero-video__nav-btn):hover svg path {
fill: #2501C3;
}
.thank-you-linkedin .thank-you-linkedin__send:not(.hero-video__nav-btn) svg {
margin-left: .65rem;
}
/* spinner */
.thank-you-linkedin .thank-you-linkedin__submit-spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(255,255,255,.3);
border-top-color: #fff;
border-radius: 50%;
display: none;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* estado loading (manteniendo tu patrón button.is-loading …) */
.thank-you-linkedin .thank-you-linkedin__submit.is-loading .thank-you-linkedin__submit-text {
display: none;
}
.thank-you-linkedin .thank-you-linkedin__submit.is-loading .thank-you-linkedin__submit-spinner {
display: block;
}
.thank-you-linkedin .thank-you-linkedin__submit.is-loading {
pointer-events: none;
opacity: .85;
}
/* message */
.thank-you-linkedin .thank-you-linkedin__message {
font-size: 1rem;
color: #3C445D;
font-weight: 500;
display: block;
margin-top: .5rem;
}
.thank-you-linkedin .thank-you-linkedin__message.error {
color: #D92626;
font-size: .75rem;
}
/* perfil */
.thank-you-linkedin .thank-you-linkedin__profile {
display: flex;
gap: 16px;
margin-top: 0;
padding: 20px;
border-radius: 1rem;
position: relative;
background: white;
transition: opacity 1.2s ease, visibility 1.2s ease;
}
/* ocultos (misma lógica que tenías) */
.thank-you-linkedin .thank-you-linkedin__profile.is-hidden,
.thank-you-linkedin .thank-you-linkedin__message.is-hidden,
.thank-you-linkedin .thank-you-linkedin__input-group.is-hidden,
.thank-you-linkedin .thank-you-linkedin__info.is-hidden,
.thank-you-linkedin .thank-you-linkedin__form.is-hidden,
.thank-you-linkedin .thank-you-linkedin__form-title.is-hidden,
.thank-you-linkedin .thank-you-linkedin__send.is-hidden,
.thank-you-linkedin .thank-you-linkedin__skip.is-hidden,
.thank-you-linkedin .thank-you-linkedin__title--secondary.is-hidden {
opacity: 0;
display: none;
position: absolute;
pointer-events: none;
}
/* reset */
.thank-you-linkedin .thank-you-linkedin__reset {
position: absolute;
right: 1rem;
top: 1rem;
color: #2501C3;
font-size: .875rem;
font-weight: 400;
}
.thank-you-linkedin .thank-you-linkedin__reset::after {
content: url('data:image/svg+xml,');
display: inline-block;
line-height: 0;
position: relative;
top: 3px;
}
/* info de perfil */
.thank-you-linkedin .thank-you-linkedin__profile-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: .7rem;
}
.thank-you-linkedin .thank-you-linkedin__profile-info .thank-you-linkedin__profile-name {
font-weight: 500;
font-size: 1.125rem;
color: #000029;
position: relative;
}
.thank-you-linkedin .thank-you-linkedin__profile-info .thank-you-linkedin__profile-name::after {
content: url('data:image/svg+xml,');
display: inline-block;
line-height: 0;
margin-left: .5rem;
position: relative;
top: 3px;
}
.thank-you-linkedin .thank-you-linkedin__profile-info .thank-you-linkedin__profile-role {
font-weight: 400;
font-size: 0.875rem;
color: #3C445D;
}
.thank-you-linkedin .thank-you-linkedin__profile img,
.thank-you-linkedin .thank-you-linkedin__profile-photo {
width: 56px;
height: 56px;
border-radius: 50%;
}
.thank-you-linkedin .thank-you-linkedin__profile-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: #e6e6e6;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.thank-you-linkedin .thank-you-linkedin__profile-photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.thank-you-linkedin .thank-you-linkedin__profile-initials {
font-size: 1.2rem;
font-weight: 600;
color: #555;
text-transform: uppercase;
}
/* BOTTOM BAR */
.thank-you-linkedin .bottom-bar {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.875rem;
color: #010741;
font-weight: 400;
margin-top: 2rem;
}
.thank-you-linkedin .bottom-bar__item {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
position: relative;
}
.thank-you-linkedin .bottom-bar__item + .bottom-bar__item {
padding-left: 1rem;
}
.thank-you-linkedin .bottom-bar__item + .bottom-bar__item::before {
content: "";
width: 1px;
height: 2.375rem;
background-color: #6A7186;
position: absolute;
top: 50%;
transform: translate(-1rem, -50%);
}
.thank-you-linkedin .bottom-bar__item.bottom-bar__item--complex {
flex-direction: column;
align-items: flex-start;
gap: .2rem;
}
.thank-you-linkedin .bottom-bar__item.bottom-bar__item--complex .bottom-bar__item--complex-inner {
display: flex;
align-items: center;
gap: 8px;
}
.thank-you-linkedin .bottom-bar__item a {
color: #2501C3;
text-decoration: none;
font-weight: 600;
display: block;
line-height: 1rem;
}
.thank-you-linkedin .bottom-bar__item a:hover {
text-decoration: underline;
}
.thank-you-linkedin .bottom-bar__item .icon {
display: block;
line-height: 0;
}
.thank-you-linkedin .bottom-bar__item .text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.thank-you-linkedin .bottom-bar__item small {
font-size: 11px;
color: #010741;
font-weight: 400;
}
@media screen and (max-width: 768px){
.thank-you-linkedin .thank-you-linkedin__container {
display: block;
padding: 20px;
}
.thank-you-linkedin .thank-you-linkedin__title {
font-size: 1.75rem;
}
.thank-you-linkedin .thank-you-linkedin__title--secondary {
font-size: 1.25rem;
line-height: 1.4rem;
}
.thank-you-linkedin .thank-you-linkedin__form-title {
font-size: 1rem;
}
.thank-you-linkedin .thank-you-linkedin__form {
padding: 20px;
}
.thank-you-linkedin .thank-you-linkedin__skip:not(.hero-video__nav-btn) {
width: 100%;
}
.thank-you-linkedin .bottom-bar {
flex-wrap: wrap;
margin-top: 3rem;
gap: 0;
}
.thank-you-linkedin .bottom-bar__item {
width: 50%;
margin-bottom: 1rem;
}
.thank-you-linkedin .bottom-bar__item + .bottom-bar__item {
padding-left: 0;
}
.thank-you-linkedin .bottom-bar__item + .bottom-bar__item::before {
content: none;
}
.thank-you-linkedin .thank-you-linkedin__column--image {
margin-top: 2rem;
}
.thank-you-linkedin .thank-you-linkedin__image {
height: 15.5rem;
width: 100%;
object-fit: cover;
object-position: top;
border-radius: 1rem;
}
.thank-you-linkedin .thank-you-linkedin__reset {
font-size: 0;
}
}