.thank-you-page{ background: var(--black) }
.thank-you-page .bg-wrapper{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.thank-you-page .bg-wrapper .bg{ width: 1644px; height: 1718px; background: url(//redesfiepa.org.br/wp-content/themes/fieparedes_theme/css/redes-theme/img/thank-you/background.html); background-size: cover; background-repeat: no-repeat; background-position: center center; position: absolute; top: -800px; left: 50%; margin-left: -340px; opacity: .5; }
.thank-you-page .thank-you-wrapper{ color: var(--white); padding: 400px 0 250px; position: relative; z-index: 10; }
.thank-you-page .thank-you-wrapper h1{ font-weight: 600; font-size: 90px; margin-bottom: 15px; }
.thank-you-page .thank-you-wrapper p{ line-height: 1.8; font-size: 20px; }
.thank-you-page .thank-you-wrapper p strong{ font-weight: 600; } .error404 { background: var(--black); }
.error404 .page-not-found-wrapper { overflow: hidden; position: relative; min-height: 100vh; }
.error404 .main-footer { padding-top: 0; margin-top: 0; } .error404 .gradient-circle {
width: 3000px;
height: 1800px;
position: absolute;
background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.15) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 70%);
left: 50%;
transform: translateX(-50%);
top: -400px;
pointer-events: none;
}
.error404 .error-code-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: clamp(200px, 40vw, 500px);
font-weight: 700;
color: rgba(255, 255, 255, 0.03);
line-height: 1;
pointer-events: none;
user-select: none;
z-index: 1;
} .error404 .center-message {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: var(--white);
padding: 200px 0 100px;
z-index: 10;
position: relative;
}
.error404 .center-message .content {
max-width: 680px;
margin: 0 auto;
}
.error404 .center-message .label {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
color: var(--skyblue);
}
.error404 .center-message h1 {
font-weight: 600;
letter-spacing: -1px;
font-size: clamp(36px, 5vw, 62px);
margin-bottom: 25px;
line-height: 1.2;
}
.error404 .center-message .description {
font-size: 18px;
font-weight: 300;
line-height: 1.7;
color: #a1a1aa;
margin-bottom: 40px;
} .error404 .center-message .actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.error404 .center-message .actions .button {
display: inline-flex;
align-items: center;
gap: 8px;
} .error404 .useful-links {
margin-top: 80px;
width: 100%;
}
.error404 .center-message .ctas {
display: flex;
width: 100%;
max-width: 1024px;
justify-content: center;
gap: 40px;
margin: 0 auto;
padding: 0 20px;
}
.error404 .center-message .ctas li {
width: 100%;
max-width: 300px;
text-align: left;
}
.error404 .center-message .ctas li a {
color: var(--white);
text-decoration: none;
display: block;
transition: var(--transition);
}
.error404 .center-message .ctas li a:hover {
transform: translateY(-5px);
}
.error404 .center-message .ctas li a figure {
width: 100%;
height: 160px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border-radius: 12px;
margin-bottom: 20px;
overflow: hidden;
position: relative;
}
.error404 .center-message .ctas li a figure::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
opacity: 0;
transition: var(--transition);
}
.error404 .center-message .ctas li a:hover figure::before {
opacity: 1;
}
.error404 .center-message .ctas li a figure img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.error404 .center-message .ctas li a:hover figure img {
transform: scale(1.05);
}
.error404 .center-message .ctas li a .title {
font-size: 16px;
margin-bottom: 8px;
font-weight: 600;
color: var(--white);
}
.error404 .center-message .ctas li a .link-description {
font-weight: 300;
font-size: 14px;
color: #a1a1aa;
line-height: 1.5;
}
@media screen and (max-width: 1280px) { .error404 .center-message {
padding: 180px 0 80px;
}
.error404 .center-message .ctas {
gap: 30px;
}
}
@media screen and (max-width: 1024px) { .thank-you-page .bg-wrapper .bg {
width: 1200px;
height: 1254px;
top: -580px;
margin-left: -430px;
}
.thank-you-page .thank-you-wrapper {
padding: 300px 0 100px;
}
.thank-you-page .thank-you-wrapper h1 {
font-size: 60px;
}
.thank-you-page .thank-you-wrapper p {
font-size: 15px;
} .error404 .center-message {
padding: 160px 0 60px;
}
.error404 .center-message .ctas {
flex-direction: column;
align-items: center;
gap: 30px;
}
.error404 .center-message .ctas li {
width: 100%;
max-width: 400px;
}
.error404 .center-message .ctas li a figure {
height: 180px;
}
.error404 .center-message .description {
font-size: 16px;
}
.error404 .useful-links {
margin-top: 60px;
}
}
@media screen and (max-width: 767px) { .error404 .center-message {
padding: 140px 0 40px;
}
.error404 .center-message .content {
padding: 0 20px;
}
.error404 .center-message h1 {
font-size: 32px;
}
.error404 .center-message .description {
font-size: 15px;
}
.error404 .center-message .actions {
flex-direction: column;
width: 100%;
padding: 0 20px;
}
.error404 .center-message .actions .button {
width: 100%;
justify-content: center;
}
.error404 .center-message .ctas li a figure {
height: 140px;
}
.error404 .useful-links {
margin-top: 50px;
}
.error404 .error-code-bg {
font-size: 150px;
}
}