171 lines
3.1 KiB
CSS
171 lines
3.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
height: 100dvh;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
html {
|
|
background-color: #fafaf9;
|
|
color-scheme: light;
|
|
}
|
|
|
|
html.dark {
|
|
background-color: #0a0e1a;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Smooth theme transitions (scoped to avoid map performance issues) */
|
|
body,
|
|
div,
|
|
aside,
|
|
section,
|
|
header,
|
|
nav,
|
|
button,
|
|
input,
|
|
select,
|
|
label,
|
|
span,
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
transition:
|
|
background-color 0.2s ease,
|
|
border-color 0.2s ease,
|
|
color 0.2s ease;
|
|
}
|
|
|
|
/* Hexagon background animations */
|
|
@keyframes hex-drift {
|
|
from { transform: translateX(-5vw); }
|
|
to { transform: translateX(105vw); }
|
|
}
|
|
|
|
@keyframes hex-bob {
|
|
0%, 100% { transform: translateY(var(--bob)); }
|
|
50% { transform: translateY(calc(var(--bob) * -1)); }
|
|
}
|
|
|
|
/* Fade-in animation for homepage sections */
|
|
.fade-in-section {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
transition:
|
|
opacity 0.6s ease-out,
|
|
transform 0.6s ease-out;
|
|
}
|
|
|
|
.fade-in-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Cereal aside — hover to reveal */
|
|
@keyframes cereal-wobble {
|
|
0%,
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
15% {
|
|
transform: rotate(-8deg);
|
|
}
|
|
30% {
|
|
transform: rotate(6deg);
|
|
}
|
|
45% {
|
|
transform: rotate(-4deg);
|
|
}
|
|
60% {
|
|
transform: rotate(2deg);
|
|
}
|
|
80% {
|
|
transform: rotate(-1deg);
|
|
}
|
|
}
|
|
|
|
.cereal-wobble {
|
|
transform-origin: bottom center;
|
|
}
|
|
|
|
.group:hover .cereal-wobble {
|
|
animation: cereal-wobble 0.8s ease-in-out;
|
|
}
|
|
|
|
.cereal-reveal {
|
|
display: grid;
|
|
grid-template-rows: 0fr;
|
|
transition:
|
|
grid-template-rows 0.5s ease-out,
|
|
color 0.2s ease;
|
|
}
|
|
|
|
.group:hover .cereal-reveal {
|
|
grid-template-rows: 1fr;
|
|
}
|
|
|
|
.cereal-reveal > * {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cereal-text {
|
|
opacity: 0;
|
|
transition:
|
|
opacity 0.4s ease-out,
|
|
color 0.2s ease;
|
|
}
|
|
|
|
.group:hover .cereal-text {
|
|
opacity: 1;
|
|
transition-delay: 0.2s, 0s;
|
|
}
|
|
|
|
/* Aurora gradient animation for pricing hero */
|
|
@keyframes aurora-1 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(30px, -20px) scale(1.1); }
|
|
66% { transform: translate(-20px, 15px) scale(0.9); }
|
|
}
|
|
|
|
@keyframes aurora-2 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(-40px, 20px) scale(1.15); }
|
|
66% { transform: translate(25px, -30px) scale(0.95); }
|
|
}
|
|
|
|
@keyframes aurora-3 {
|
|
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
|
|
50% { transform: translate(20px, 25px) scale(1.1) rotate(3deg); }
|
|
}
|
|
|
|
@keyframes aurora-4 {
|
|
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
|
|
40% { transform: translate(-35px, -15px) scale(1.2) rotate(-2deg); }
|
|
70% { transform: translate(15px, 20px) scale(0.9) rotate(1deg); }
|
|
}
|
|
|
|
@keyframes aurora-5 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
30% { transform: translate(25px, 30px) scale(1.15); }
|
|
60% { transform: translate(-30px, -10px) scale(0.95); }
|
|
}
|
|
|
|
/* Hide scrollbar for pill groups on mobile */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|