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

More FE changes

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-09 09:43:41 +01:00
parent f114ada255
commit a48eb945e0
48 changed files with 4127 additions and 1751 deletions
Download patch file Download diff file Expand all files Collapse all files

72
frontend/src/index.css
View file

@ -66,6 +66,10 @@ h3 {
}
.home-content-surface {
--home-hex-pattern: url("/home-hex-pattern.svg");
--home-pointer-active: 0;
--home-pointer-x: 50%;
--home-pointer-y: 50%;
isolation: isolate;
background: linear-gradient(180deg, #f3efe8 0%, #fafaf9 36%, #eef7f3 100%);
}
@ -82,17 +86,14 @@ h3 {
.home-content-surface::before {
content: '';
position: absolute;
inset: -120vh -120vw;
inset: 0;
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;
background-image: var(--home-hex-pattern);
background-position: center calc(var(--home-scroll-y, 0px) * 0.14);
background-size: 138px 159px;
opacity: 0.14;
will-change: background-position;
}
.home-content-surface::after {
@ -101,21 +102,52 @@ h3 {
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
background-image: var(--home-hex-pattern);
background-position: center calc(var(--home-scroll-y, 0px) * 0.14);
background-size: 138px 159px;
filter: drop-shadow(0 0 6px rgba(20, 184, 166, 0.3));
opacity: calc(var(--home-pointer-active, 0) * 0.58);
transition: opacity 0.16s ease;
-webkit-mask-image: radial-gradient(
circle 260px at var(--home-pointer-x) var(--home-pointer-y),
#000 0%,
rgba(0, 0, 0, 0.75) 36%,
transparent 72%
);
mask-image: radial-gradient(
circle 260px at var(--home-pointer-x) var(--home-pointer-y),
#000 0%,
rgba(0, 0, 0, 0.75) 36%,
transparent 72%
);
will-change: background-position, opacity;
}
.dark .home-content-surface {
--home-hex-pattern: url("/home-hex-pattern-dark.svg");
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);
opacity: 0.11;
}
.dark .home-content-surface::after {
background: linear-gradient(180deg, rgba(10, 14, 26, 0.22), rgba(10, 14, 26, 0));
filter: drop-shadow(0 0 7px rgba(45, 212, 191, 0.36));
opacity: calc(var(--home-pointer-active, 0) * 0.5);
}
@media (prefers-reduced-motion: reduce) {
.home-hero-hex-parallax {
transform: none;
will-change: auto;
}
.home-content-surface::before,
.home-content-surface::after {
background-position: center top;
will-change: auto;
}
}
/* Fade-in animation for homepage sections */
@ -175,12 +207,12 @@ h3 {
max-width: 42rem;
}
.home-hero-showcase {
.product-showcase {
max-width: none;
justify-self: stretch;
}
.home-hero-showcase-frame {
.product-showcase-frame {
height: 40rem;
}
}
@ -195,12 +227,12 @@ h3 {
max-width: 45rem;
}
.home-hero-showcase-frame {
.product-showcase-frame {
height: 40rem;
}
}
@media (min-width: 1024px) and (min-height: 900px) {
@media (min-width: 1200px) and (min-height: 900px) {
.hero-roomy-lift {
transform: translateY(-2.5rem);
}
@ -328,6 +360,10 @@ h3 {
background-color: rgba(28, 25, 23, 0.5);
}
.map-has-mobile-bottom-sheet .maplibregl-ctrl-bottom-left {
bottom: calc(var(--map-mobile-bottom-inset, 0px) + 0.25rem) !important;
}
/* Hide scrollbar for pill groups on mobile */
.scrollbar-hide {
-ms-overflow-style: none;