File: /var/www/html/wp-content/themes/thegem-elementor/404.php
<?php
/**
* The template for displaying 404 pages (Not Found)
*/
$ethnic_404_home_url = home_url( '/' );
$ethnic_404_contact_url = home_url( '/contact-us/' );
if ( function_exists( 'ethnic_consultation_route_contact_url' ) ) {
$ethnic_404_contact_url = ethnic_consultation_route_contact_url( array(), $ethnic_404_contact_url );
}
get_header();
?>
<style id="ethnic-404-page">
html,
body.error404 {
height: 100%;
max-height: 100%;
}
body.error404 {
--ethnic-404-offset: 108px;
background:
radial-gradient(circle at 12% 18%, rgba(47, 107, 255, 0.08), transparent 26%),
radial-gradient(circle at 88% 14%, rgba(231, 255, 87, 0.18), transparent 20%),
linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
overflow: hidden;
}
body.error404 #page-title,
body.error404 footer.custom-footer,
body.error404 #colophon,
body.error404 #footer-nav {
display: none !important;
}
body.error404 #page,
body.error404 #main,
body.error404 #main-content.main-content,
body.error404 .block-content,
body.error404 .fullwidth-content {
background: transparent !important;
}
body.error404 #page {
min-height: 100dvh;
overflow: hidden;
}
body.error404 #main-content.main-content {
padding: 0 !important;
}
body.error404 .scroll-top-button {
display: none !important;
}
.ethnic-404 {
display: flex;
align-items: center;
justify-content: center;
height: calc(100dvh - var(--ethnic-404-offset));
min-height: calc(100svh - var(--ethnic-404-offset));
padding: 0;
overflow: hidden;
}
.ethnic-404__shell {
position: relative;
isolation: isolate;
width: 100%;
height: 100%;
padding: clamp(24px, 3.2vw, 42px) clamp(20px, 4vw, 56px);
border-radius: 0;
background:
radial-gradient(circle at top left, rgba(47, 107, 255, 0.12), transparent 34%),
radial-gradient(circle at 88% 18%, rgba(231, 255, 87, 0.22), transparent 24%),
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
border: 0;
box-shadow: none;
display: grid;
gap: clamp(18px, 2vw, 26px);
overflow: hidden;
text-align: center;
}
.ethnic-404__shell::before,
.ethnic-404__shell::after {
content: "";
position: absolute;
border-radius: 999px;
pointer-events: none;
z-index: -1;
}
.ethnic-404__shell::before {
top: -72px;
right: -64px;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(47, 107, 255, 0.12), transparent 68%);
}
.ethnic-404__shell::after {
left: -88px;
bottom: -116px;
width: 260px;
height: 260px;
background: radial-gradient(circle, rgba(231, 255, 87, 0.18), transparent 68%);
}
.ethnic-404__visual {
position: relative;
width: min(100%, 360px);
height: clamp(128px, 22vh, 188px);
margin: 0 auto;
}
.ethnic-404__visual-code {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
font-size: clamp(74px, 15vw, 138px);
line-height: 0.88;
font-weight: 800;
letter-spacing: -0.08em;
color: #162039;
opacity: 0.16;
user-select: none;
}
.ethnic-404__orb,
.ethnic-404__node {
position: absolute;
border-radius: 50%;
}
.ethnic-404__orb {
background: linear-gradient(135deg, rgba(47, 107, 255, 0.22), rgba(14, 165, 164, 0.14));
filter: blur(0.2px);
}
.ethnic-404__orb--a {
top: 18px;
left: 14px;
width: 54px;
height: 54px;
}
.ethnic-404__orb--b {
right: 10px;
top: 26px;
width: 40px;
height: 40px;
background: linear-gradient(135deg, rgba(231, 255, 87, 0.34), rgba(47, 107, 255, 0.18));
}
.ethnic-404__orb--c {
left: 54px;
bottom: 8px;
width: 24px;
height: 24px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(47, 107, 255, 0.18));
border: 1px solid rgba(47, 107, 255, 0.16);
}
.ethnic-404__document {
position: absolute;
left: 50%;
top: 50%;
width: clamp(84px, 20vw, 118px);
height: clamp(104px, 26vw, 140px);
transform: translate(-54%, -52%) rotate(-7deg);
border-radius: 24px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 255, 0.94));
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}
.ethnic-404__document::before,
.ethnic-404__document::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
border-radius: 999px;
background: rgba(47, 107, 255, 0.12);
}
.ethnic-404__document::before {
top: 26px;
height: 12px;
}
.ethnic-404__document::after {
top: 48px;
height: 8px;
box-shadow:
0 18px 0 0 rgba(47, 107, 255, 0.12),
0 36px 0 0 rgba(47, 107, 255, 0.08);
}
.ethnic-404__magnifier {
position: absolute;
right: 46px;
bottom: 18px;
width: 78px;
height: 78px;
border-radius: 50%;
border: 10px solid rgba(22, 32, 57, 0.14);
background: rgba(255, 255, 255, 0.78);
box-shadow: inset 0 0 0 10px rgba(231, 255, 87, 0.22);
}
.ethnic-404__magnifier::after {
content: "";
position: absolute;
right: -20px;
bottom: -18px;
width: 42px;
height: 12px;
border-radius: 999px;
background: #162039;
transform: rotate(42deg);
transform-origin: center;
}
.ethnic-404__trail {
position: absolute;
left: 84px;
right: 86px;
top: 46px;
height: 2px;
background: linear-gradient(90deg, rgba(47, 107, 255, 0.14), rgba(22, 32, 57, 0.08), rgba(47, 107, 255, 0.14));
}
.ethnic-404__node {
width: 10px;
height: 10px;
background: #2f6bff;
box-shadow: 0 0 0 6px rgba(47, 107, 255, 0.08);
}
.ethnic-404__node--a {
left: 76px;
top: 41px;
}
.ethnic-404__node--b {
left: 50%;
top: 41px;
transform: translateX(-50%);
}
.ethnic-404__node--c {
right: 80px;
top: 41px;
}
.ethnic-404__code {
margin: 0;
font-size: clamp(74px, 14vw, 116px);
line-height: 0.88;
font-weight: 800;
letter-spacing: -0.08em;
color: #162039;
}
.ethnic-404__title {
margin: 0;
font-size: clamp(28px, 4vw, 38px);
line-height: 1.04;
letter-spacing: -0.04em;
color: #162039;
}
.ethnic-404__message {
max-width: 34ch;
margin: 0 auto;
font-size: clamp(16px, 1.7vw, 18px);
line-height: 1.65;
color: #53657d;
}
.ethnic-404__hint {
margin: -4px 0 0;
font-size: 14px;
line-height: 1.6;
color: #708198;
}
.ethnic-404__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
}
.ethnic-404__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.ethnic-404__button--primary {
background: #e7ff57;
color: #162039;
box-shadow: 0 18px 34px rgba(231, 255, 87, 0.28);
}
.ethnic-404__button--secondary {
background: rgba(22, 32, 57, 0.06);
border-color: rgba(22, 32, 57, 0.12);
color: #162039;
}
.ethnic-404__button:hover,
.ethnic-404__button:focus-visible {
transform: translateY(-2px);
outline: none;
}
.ethnic-404__button--secondary:hover,
.ethnic-404__button--secondary:focus-visible {
background: rgba(22, 32, 57, 0.08);
border-color: rgba(22, 32, 57, 0.2);
}
.ethnic-404__back {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 auto;
padding: 0;
border: 0;
background: transparent;
font-size: 14px;
font-weight: 600;
color: #2f6bff;
text-decoration: none;
cursor: pointer;
}
.ethnic-404__back::before {
content: "\2190";
font-size: 16px;
line-height: 1;
}
.ethnic-404__back:hover,
.ethnic-404__back:focus-visible {
text-decoration: underline;
outline: none;
}
@media (max-width: 767px) {
.ethnic-404__shell {
padding: 22px 18px;
gap: 16px;
}
.ethnic-404__visual {
height: 128px;
}
.ethnic-404__document {
border-radius: 20px;
}
.ethnic-404__magnifier {
width: 60px;
height: 60px;
right: 30px;
bottom: 16px;
border-width: 8px;
}
.ethnic-404__magnifier::after {
width: 34px;
height: 10px;
right: -17px;
bottom: -14px;
}
.ethnic-404__actions {
flex-direction: column;
gap: 10px;
}
.ethnic-404__button {
width: 100%;
min-height: 46px;
}
.ethnic-404__hint {
font-size: 13px;
}
}
@media (max-height: 760px) {
.ethnic-404__shell {
padding: 22px 24px;
gap: 14px;
}
.ethnic-404__visual {
height: 118px;
}
.ethnic-404__message {
font-size: 16px;
line-height: 1.55;
}
.ethnic-404__button {
min-height: 44px;
}
}
</style>
<div id="main-content" class="main-content">
<main class="ethnic-404" role="main" aria-labelledby="ethnic-404-title">
<div class="ethnic-404__shell">
<div class="ethnic-404__visual" aria-hidden="true">
<div class="ethnic-404__visual-code">404</div>
<span class="ethnic-404__orb ethnic-404__orb--a"></span>
<span class="ethnic-404__orb ethnic-404__orb--b"></span>
<span class="ethnic-404__orb ethnic-404__orb--c"></span>
<div class="ethnic-404__trail"></div>
<span class="ethnic-404__node ethnic-404__node--a"></span>
<span class="ethnic-404__node ethnic-404__node--b"></span>
<span class="ethnic-404__node ethnic-404__node--c"></span>
<div class="ethnic-404__document"></div>
<div class="ethnic-404__magnifier"></div>
</div>
<h1 class="ethnic-404__code">404</h1>
<h2 id="ethnic-404-title" class="ethnic-404__title">Page Not Found</h2>
<p class="ethnic-404__message">The page you’re looking for doesn’t exist or may have been moved.</p>
<p class="ethnic-404__hint">Try checking the URL or return to a known page.</p>
<div class="ethnic-404__actions">
<a class="ethnic-404__button ethnic-404__button--primary" href="<?php echo esc_url( $ethnic_404_home_url ); ?>">Go to Homepage</a>
<a class="ethnic-404__button ethnic-404__button--secondary" href="<?php echo esc_url( $ethnic_404_contact_url ); ?>">Contact Us</a>
</div>
<a class="ethnic-404__back" href="<?php echo esc_url( $ethnic_404_home_url ); ?>" data-ethnic-404-back>Back to Previous Page</a>
</div>
</main>
</div>
<script>
(function () {
function ethnic404SetViewportOffset() {
var body = document.body;
var header = document.getElementById('site-header-wrapper');
var adminBar = document.getElementById('wpadminbar');
var headerHeight = header ? header.getBoundingClientRect().height : 0;
var adminBarHeight = adminBar ? adminBar.getBoundingClientRect().height : 0;
if (body) {
body.style.setProperty('--ethnic-404-offset', (headerHeight + adminBarHeight + 2) + 'px');
}
}
function ethnic404BindBackLink() {
var backLink = document.querySelector('[data-ethnic-404-back]');
if (!backLink) {
return;
}
backLink.addEventListener('click', function (event) {
if (window.history.length > 1) {
event.preventDefault();
window.history.back();
}
});
}
ethnic404SetViewportOffset();
ethnic404BindBackLink();
window.addEventListener('load', ethnic404SetViewportOffset, { passive: true });
window.addEventListener('resize', ethnic404SetViewportOffset, { passive: true });
})();
</script>
<?php
get_footer();