andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Add video

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-05 22:15:29 +01:00
parent 589de0c5ac
commit 7c36cbfdd4
18 changed files with 2292 additions and 333 deletions
Download patch file Download diff file Expand all files Collapse all files

183
frontend/src/index.css
View file

@ -23,6 +23,11 @@ html.dark {
color-scheme: dark;
}
.home-page-scroll,
.dark .home-page-scroll {
background: linear-gradient(180deg, #080d19 0%, #080d19 50%, #16a34a 50%, #16a34a 100%);
}
/* Smooth theme transitions (scoped to avoid map performance issues) */
body,
div,
@ -65,6 +70,50 @@ h3 {
}
}
.home-content-surface {
isolation: isolate;
background: linear-gradient(180deg, #f3efe8 0%, #fafaf9 36%, #eef7f3 100%);
}
.home-content-surface::before {
content: '';
position: absolute;
inset: -120vh -120vw;
z-index: 0;
pointer-events: none;
background:
linear-gradient(rgba(20, 184, 166, 0.11) 1px, transparent 1px),
linear-gradient(90deg, rgba(20, 184, 166, 0.11) 1px, transparent 1px);
background-size:
56px 56px,
56px 56px;
transform: skew(20deg, -15deg);
transform-origin: center;
}
.home-content-surface::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
}
.dark .home-content-surface {
background: linear-gradient(180deg, #121827 0%, #0a0e1a 42%, #10211f 100%);
}
.dark .home-content-surface::before {
background:
linear-gradient(rgba(45, 212, 191, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(45, 212, 191, 0.1) 1px, transparent 1px);
}
.dark .home-content-surface::after {
background: linear-gradient(180deg, rgba(10, 14, 26, 0.22), rgba(10, 14, 26, 0));
}
/* Fade-in animation for homepage sections */
.fade-in-section {
opacity: 0;
@ -91,76 +140,92 @@ h3 {
.showcase-progress {
animation-name: showcase-progress;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
@keyframes scout-export-click {
0%,
52%,
100% {
transform: translateY(0) scale(1);
box-shadow: 0 10px 18px rgba(15, 118, 110, 0.18);
}
58% {
transform: translateY(2px) scale(0.985);
box-shadow: 0 4px 8px rgba(15, 118, 110, 0.18);
}
66% {
transform: translateY(0) scale(1.02);
box-shadow: 0 14px 24px rgba(15, 118, 110, 0.24);
}
}
@keyframes scout-export-ripple {
0%,
54%,
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.25);
}
60% {
opacity: 0.28;
transform: translate(-50%, -50%) scale(0.8);
}
78% {
opacity: 0;
transform: translate(-50%, -50%) scale(2.4);
}
}
@keyframes scout-export-check {
0%,
62%,
100% {
opacity: 0;
transform: scale(0.65);
}
70%,
90% {
opacity: 1;
transform: scale(1);
}
}
.scout-export-action {
animation: scout-export-click 3.2s ease-in-out infinite;
}
.scout-export-ripple {
position: absolute;
left: 50%;
top: 50%;
width: 7rem;
height: 7rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.55);
animation: scout-export-ripple 3.2s ease-out infinite;
}
.scout-export-check {
animation: scout-export-check 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.showcase-progress {
animation: none !important;
transform: scaleX(1);
}
}
/* Aurora gradient animation for pricing hero */
@keyframes aurora-1 {
0%,
100% {
transform: translate(0, 0) scale(1);
.scout-export-action,
.scout-export-ripple,
.scout-export-check {
animation: none !important;
}
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);
.scout-export-check {
opacity: 1;
transform: scale(1);
}
}