333 lines
6.3 KiB
CSS
333 lines
6.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
}
|
|
} */
|
|
|
|
body {
|
|
color: var(--foreground);
|
|
background: var(--background);
|
|
}
|
|
|
|
/* Increase specificity and use !important where necessary */
|
|
.mapboxgl-popup .mapboxgl-popup-content {
|
|
@apply rounded-xl p-4 px-5 drop-shadow-lg border border-neutral-300 max-w-xs !important;
|
|
}
|
|
|
|
/* Hide the popup tip */
|
|
.mapboxgl-popup .mapboxgl-popup-tip {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Child elements */
|
|
.mapboxgl-popup-content h3 {
|
|
@apply text-sm font-medium text-neutral-800 !important;
|
|
}
|
|
|
|
.mapboxgl-popup-content p {
|
|
@apply text-xs text-neutral-600 !important;
|
|
}
|
|
|
|
.mapboxgl-popup-content p+p {
|
|
@apply text-neutral-500 !important;
|
|
}
|
|
|
|
.icon-link {
|
|
/* default styles if needed */
|
|
}
|
|
|
|
.icon-link:hover,
|
|
.icon-link:focus {
|
|
background-color: #16424b;
|
|
}
|
|
|
|
.icon-link:hover h3,
|
|
.icon-link:focus h3,
|
|
.icon-link:hover p,
|
|
.icon-link:focus p {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.icon-link:hover h3,
|
|
.icon-link:hover p,
|
|
.icon-link:focus h3,
|
|
.icon-link:focus p {
|
|
color: #111;
|
|
/* or black */
|
|
}
|
|
|
|
/* ---- LAVA FLOOD OVERLAY ---- */
|
|
.lava-flood-overlay {
|
|
pointer-events: none;
|
|
position: fixed;
|
|
top: -100vh;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 9999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
transition: top 0.9s cubic-bezier(0.6, 0, 0.2, 1);
|
|
}
|
|
|
|
.lava-flood-overlay.lava-active {
|
|
top: 0;
|
|
transition: top 0.33s cubic-bezier(0.6, 0, 0.2, 1);
|
|
}
|
|
|
|
.lava-flood-overlay img,
|
|
.lava-gradient {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
filter: brightness(1.15) saturate(1.8) drop-shadow(0 0 80px #ff5500);
|
|
}
|
|
|
|
/* ---- INSANE SCREEN SHAKE (LinkedIn) ---- */
|
|
@keyframes supershake {
|
|
0% {
|
|
transform: translate(0, 0) rotate(0);
|
|
}
|
|
|
|
5% {
|
|
transform: translate(-20px, 5px) rotate(-2deg);
|
|
}
|
|
|
|
10% {
|
|
transform: translate(18px, -8px) rotate(2deg);
|
|
}
|
|
|
|
15% {
|
|
transform: translate(-22px, 8px) rotate(-4deg);
|
|
}
|
|
|
|
20% {
|
|
transform: translate(22px, -2px) rotate(4deg);
|
|
}
|
|
|
|
25% {
|
|
transform: translate(-18px, 12px) rotate(-2deg);
|
|
}
|
|
|
|
30% {
|
|
transform: translate(18px, -10px) rotate(2deg);
|
|
}
|
|
|
|
35% {
|
|
transform: translate(-22px, 14px) rotate(-4deg);
|
|
}
|
|
|
|
40% {
|
|
transform: translate(22px, -12px) rotate(4deg);
|
|
}
|
|
|
|
45% {
|
|
transform: translate(-18px, 8px) rotate(-2deg);
|
|
}
|
|
|
|
50% {
|
|
transform: translate(18px, -14px) rotate(4deg);
|
|
}
|
|
|
|
55% {
|
|
transform: translate(-22px, 12px) rotate(-4deg);
|
|
}
|
|
|
|
60% {
|
|
transform: translate(22px, -8px) rotate(2deg);
|
|
}
|
|
|
|
65% {
|
|
transform: translate(-18px, 10px) rotate(-2deg);
|
|
}
|
|
|
|
70% {
|
|
transform: translate(18px, -12px) rotate(2deg);
|
|
}
|
|
|
|
75% {
|
|
transform: translate(-22px, 14px) rotate(-4deg);
|
|
}
|
|
|
|
80% {
|
|
transform: translate(22px, -10px) rotate(4deg);
|
|
}
|
|
|
|
85% {
|
|
transform: translate(-18px, 8px) rotate(-2deg);
|
|
}
|
|
|
|
90% {
|
|
transform: translate(18px, -14px) rotate(2deg);
|
|
}
|
|
|
|
95% {
|
|
transform: translate(-20px, 5px) rotate(-2deg);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0, 0) rotate(0);
|
|
}
|
|
}
|
|
|
|
.shake-screen {
|
|
animation: supershake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
}
|
|
|
|
/* ---- CRACK + COLLAPSE OVERLAY (X icon) ---- */
|
|
.crack-overlay {
|
|
pointer-events: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 9999;
|
|
transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.5s;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.crack {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.crack1 {
|
|
width: 35vw;
|
|
left: 10vw;
|
|
top: 22vh;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.crack2 {
|
|
width: 32vw;
|
|
right: 12vw;
|
|
top: 42vh;
|
|
opacity: 0.7;
|
|
transform: rotate(-8deg);
|
|
}
|
|
|
|
/* Add more .crackN classes if using more cracks */
|
|
|
|
/* Collapse falling effect */
|
|
.crack-collapse {
|
|
transform: perspective(900px) rotateX(75deg) translateY(80vh) scale(0.9);
|
|
opacity: 0;
|
|
transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.6s;
|
|
}
|
|
|
|
/* --- X Logo Crack-and-Spin Easter Egg --- */
|
|
.x-logo.cracked {
|
|
/* Overlay cracks with a clip-path or filters for effect (simple grayscale/contrast for demo) */
|
|
filter: grayscale(1) brightness(0.6) contrast(2);
|
|
/* Slight shake + scale for realism */
|
|
transform: scale(1.04);
|
|
transition: filter 0.2s, transform 0.2s;
|
|
}
|
|
|
|
.x-logo.spin {
|
|
animation: xspin180 0.8s cubic-bezier(0.77, 0, 0.18, 1) forwards;
|
|
}
|
|
|
|
@keyframes xspin180 {
|
|
0% {
|
|
transform: rotate(0deg) scale(1.04);
|
|
}
|
|
|
|
80% {
|
|
transform: rotate(200deg) scale(1.04);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(180deg) scale(1.04);
|
|
}
|
|
}
|
|
|
|
.x-logo.cracked {
|
|
filter: grayscale(1) brightness(0.7) contrast(2.6);
|
|
transition: filter 0.2s, transform 0.2s;
|
|
}
|
|
|
|
.x-logo.spin {
|
|
animation: xspin180 0.8s cubic-bezier(0.77, 0, 0.18, 1) forwards;
|
|
}
|
|
|
|
.x-logo.nospin {
|
|
transform: rotate(0deg) scale(1.0);
|
|
filter: none;
|
|
transition: none;
|
|
}
|
|
|
|
.x-logo-cracks {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.x-logo-cracks img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0.55;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.footer-x-logo-wrap {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
/* === X Logo Full Page Crack-and-Spin Easter Egg === */
|
|
.body-cracked .crack-overlay,
|
|
.body-cracked .crack1,
|
|
.body-cracked .crack2 {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.body-cracked {
|
|
/* Animate the whole page spin with a transform on html/body! */
|
|
animation: bodyspin180 0.8s cubic-bezier(0.77, 0, 0.18, 1) forwards;
|
|
will-change: transform;
|
|
}
|
|
|
|
.body-spin-back {
|
|
/* Immediately resets the transform, no animation needed */
|
|
animation: none !important;
|
|
transform: rotate(0deg) !important;
|
|
}
|
|
|
|
@keyframes bodyspin180 {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
80% {
|
|
transform: rotate(200deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(180deg);
|
|
}
|
|
} |