/* Small additions on top of the page's inline styles. */
/* Page-edge frame: the cream margin around the hero photo and the side
margins on every section below it. index.html references this via
var(--page-edge) instead of a literal 28px specifically so it can shrink
on mobile (see media query below) without touching desktop. */
:root {
--page-edge: 28px;
}
@media (max-width: 480px) {
:root {
--page-edge: 18px;
}
}
#waitlist-email::placeholder {
color: #6B7486;
}
#waitlist-email:focus-visible,
button[type="submit"]:focus-visible,
a:focus-visible,
[data-onclick]:focus-visible {
outline: 2px solid #18233A;
outline-offset: 2px;
}
button[type="submit"]:disabled {
opacity: 0.6;
cursor: default;
}
[data-form-status][data-state="success"] {
color: #18233A;
}
[data-form-status][data-state="error"] {
color: #B3261E;
}
@media (max-width: 480px) {
#waitlist-form {
flex-direction: column;
}
#waitlist-form button[type="submit"] {
width: 100%;
justify-content: center;
}
}
/* Scroll-triggered reveal animations. --i (set inline per element) staggers
entrance within a group; JS adds .is-visible via IntersectionObserver. */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.reveal-scale {
transform: translateY(24px) scale(0.97);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal {
transition: none;
opacity: 1;
transform: none;
}
}
/* Lead capture modal (opened from the hero "Get started" CTA) */
dialog.lead-modal {
border: none;
border-radius: 24px;
padding: 36px 32px 32px;
max-width: 420px;
width: calc(100% - 48px);
background: #FFF6EA;
color: #18233A;
box-shadow: 0 24px 60px rgba(24, 35, 58, 0.25);
}
dialog.lead-modal::backdrop {
background: rgba(24, 35, 58, 0.55);
}
#lead-form {
position: relative;
display: flex;
flex-direction: column;
}
.lead-modal-close {
position: absolute;
top: -10px;
right: -10px;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(24, 35, 58, 0.08);
color: #18233A;
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.lead-modal-close:hover {
background: rgba(24, 35, 58, 0.15);
}
.lead-modal-title {
margin: 0 28px 6px 0;
font-family: 'General Sans', sans-serif;
font-size: 26px;
font-weight: 600;
letter-spacing: -0.02em;
color: #18233A;
}
.lead-modal-sub {
margin: 0 0 18px;
font-size: 14.5px;
line-height: 1.5;
color: #18233A;
}
.lead-modal-label {
display: block;
font-size: 12.5px;
font-weight: 500;
color: #18233A;
margin-top: 16px;
}
.lead-modal-label:first-of-type {
margin-top: 4px;
}
.lead-modal-input {
display: block;
width: 100%;
box-sizing: border-box;
margin-top: 7px;
padding: 13px 16px;
border-radius: 12px;
border: 1px solid #E8DFD3;
background: #fff;
font-family: 'General Sans', sans-serif;
font-size: 15px;
color: #18233A;
transition: border-color 0.15s ease;
}
.lead-modal-input:focus-visible {
outline: none;
border-color: #18233A;
box-shadow: 0 0 0 3px rgba(24, 35, 58, 0.1);
}
.lead-modal-hint {
margin: 10px 0 0;
font-size: 12px;
color: #6B7486;
}
.lead-modal-status {
margin: 10px 0 0;
font-size: 13.5px;
font-weight: 500;
min-height: 1.2em;
}
.lead-modal-status[data-state="success"] {
color: #18233A;
}
.lead-modal-status[data-state="error"] {
color: #B3261E;
}
.lead-modal-submit {
display: block;
width: 100%;
box-sizing: border-box;
margin-top: 18px;
padding: 15px 20px;
border-radius: 999px;
border: none;
background: #241F1B;
color: #FFF6EA;
font-family: 'General Sans', sans-serif;
font-size: 15.5px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.lead-modal-submit:hover:not(:disabled) {
background: #18140f;
transform: translateY(-1px);
}
.lead-modal-submit:disabled {
opacity: 0.6;
cursor: default;
}
/* No layout overrides here on purpose — .lead-modal-thanks reuses the exact
same .lead-modal-title / .lead-modal-sub styling as the form view, so the
popup's look stays identical before and after submit; only the content
swaps (via data-show, toggling the native [hidden] attribute). */
/* Replayable enter animation — main.js re-adds this class (via a reflow
trick) any time a [data-show] element newly becomes visible: dashboard
tab switches, the mobile menu opening, the lead-modal view swap. */
@keyframes tabEnter {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tab-enter {
animation: tabEnter 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.tab-enter {
animation: none;
}
}
/* Base padding/font-size match the design's original inline values (padding:
0 48px 56px; font-size: clamp(17px, 1.6vw, 21px)); defined here instead so
the media query below can actually win — an inline style="" always beats
an external stylesheet rule regardless of media query, so these couldn't
stay as inline attributes and still be overridable per breakpoint. */
.hero-copy {
padding: 0 48px 56px;
}
.hero-sub {
font-size: clamp(17px, 1.6vw, 21px);
}
/* More usable width + a touch smaller type for the hero heading/subtitle on
small screens, so the subtitle has the best chance of wrapping to two
lines instead of three or more. */
@media (max-width: 480px) {
.hero-copy {
padding-left: 12px;
padding-right: 12px;
}
.hero-sub {
font-size: 13.5px;
}
}
/* Dashboard progress bars: main.js sets the target width via .style.width
(see animateFillBar in assets/js/main.js) — this transition is what
actually makes that change animate instead of jumping instantly. */
.fill-bar {
transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.fill-bar {
transition: none;
}
}
/* Dashboard mockup sidebar: fixed 196px column, matching the design's
original inline value exactly — unchanged at desktop/tablet widths. */
.dashboard-sidebar {
flex: 0 0 196px;
width: 196px;
border-right: 1px solid #E7E9EE;
}
.dash-sidebar-logo,
.dash-sidebar-footer {
display: flex;
}
.dash-nav-list {
flex-direction: column;
}
.dash-header {
align-items: center;
}
.dash-header-actions {
align-items: center;
}
/* Below 768px the 196px sidebar + content no longer fit side by side, and
reflowing the pieces independently (stacked sidebar, horizontal-scroll
nav, stacked header, forced single-column grids) made the mockup feel
like a different, worse layout on phones. Instead, leave the desktop
dashboard completely untouched and shrink the whole thing as one visual
unit via CSS transform: scale() — same approach rillet.com uses to
preview its dashboard on mobile. .dash-scale-outer/.dash-scale-inner
wrap .dashboard-panel in index.html; updateDashboardScale() in main.js
computes the scale factor and sets it as --dash-scale, and sets the
outer's height explicitly (transform doesn't affect layout, so without
this the unscaled layout height would leave a large empty gap below the
shrunk dashboard). display:contents by default so these wrappers have
zero effect at 769px and up. */
.dash-scale-outer,
.dash-scale-inner {
display: contents;
}
@media (max-width: 768px) {
.dash-scale-outer {
display: block;
overflow: hidden;
box-sizing: border-box;
padding: 10px;
border: 1px solid #E7E9EE;
border-radius: 18px;
background: #FAF5EF;
box-shadow: 0 2px 6px rgba(24,35,58,0.05), 0 14px 32px rgba(24,35,58,0.08);
}
.dash-scale-inner {
display: block;
width: 1240px;
transform-origin: top left;
/* transform itself (translateX + scale, to center the shrunk dashboard)
is set inline by updateDashboardScale() in main.js, which needs the
viewport width to compute it. */
}
}
/* Hero wrap + photo: match the design's original inline values exactly —
unchanged at desktop/tablet widths. */
.hero-wrap {
min-height: 100vh;
padding-top: var(--page-edge);
padding-bottom: var(--page-edge);
}
.hero-photo {
height: calc(100vh - 56px);
min-height: 640px;
}
/* On mobile the same near-full-viewport-height box, combined with a much
narrower width, forced object-fit:cover to blow the (landscape) photo up
and crop away most of its width to fill that tall/narrow frame — hence
barely any of the scene being visible. A shorter box needs far less
upscaling to cover, so much more of the original photo shows. */
@media (max-width: 640px) {
.hero-photo {
height: 78vh;
min-height: 480px;
}
/* The hero nav's own 36px horizontal padding reads fine on desktop but
leaves the logo looking pulled in from the edge on a narrow phone
screen — nudge it left without touching the nav's overall padding
(which also positions the language switch/hamburger on the right). */
.hero-photo nav .cactus-logo {
margin-left: -12px;
}
/* .hero-wrap must drop its own min-height:100vh too, or shrinking just
the photo above leaves 100vh - (photo + nav) of dead empty space
between the photo and the next section — the wrapper was still being
forced to fill the full viewport regardless of how tall its content
actually is. */
.hero-wrap {
min-height: 0;
/* Left/right stay at --page-edge (18px) — this is just the top/bottom
cream frame, which had noticeably more visible breathing room than
the sides once the photo itself was shortened to 78vh above. */
padding-top: 6px;
padding-bottom: 6px;
}
}
/* Closing CTA card background: was a flat #28CC95 fill (moved out of the
inline style, which was overriding this rule regardless of specificity —
see the recurring inline-vs-external-CSS note elsewhere in this file).
Three layers, top to bottom: scattered white flecks ("glitter"/mini
stars, same idea as klevrpay.com's hero), a subtle grain layer (blended
with `overlay` for texture without darkening the green), and a radial
gradient for depth instead of a flat fill. */
#waitlist {
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
radial-gradient(135% 160% at 14% -12%, #D8F7A8 0%, #28CC95 45%, #7BBC42 100%);
background-size: 420px 420px, 180px 180px, cover;
background-repeat: repeat, repeat, no-repeat;
background-blend-mode: normal, overlay, normal;
}
/* Closing CTA headline: matches the design's original inline values exactly
— unchanged at desktop/tablet widths. Widened from 1000px so it settles
at 2 lines instead of 3 on common desktop widths (1440/1920). */
.close-head {
max-width: 1150px;
font-size: clamp(40px, 6.6vw, 92px);
}
/* This headline's font floors out at 40px (clamp's minimum) on any viewport
under ~600px — the 6.6vw term never gets small enough to matter — so on
phones it keeps wrapping to 5+ lines regardless of max-width. A true
2-line fit would need shrinking it well below 28px, which starts to look
disproportionate for what's meant to read as a big closing statement;
this brings it down to a more reasonable 3 lines without going that far. */
@media (max-width: 480px) {
.close-head {
max-width: 320px;
font-size: 28px;
}
}
/* Feature showcase (#features): text scrolls on the left, the product view
on the right is pinned (position: sticky) and crossfades between features
— initFeatureShowcase() in assets/js/main.js toggles .is-active on the
step crossing the viewport's center and on its matching .feat-shot. */
.feat-scroll {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 0 72px;
margin-top: 8px;
}
/* Trailing space lets the last step reach the viewport's center while the
frame is still pinned. */
.feat-steps {
padding-bottom: 15vh;
}
.feat-step {
min-height: 70vh;
display: flex;
align-items: center;
}
.feat-text {
max-width: 460px;
padding-top: 26px;
border-top: 2px solid #241F1B;
opacity: 0.32;
transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.feat-step.is-active .feat-text {
opacity: 1;
}
.feat-num {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
color: #18233A;
margin-bottom: 18px;
}
.feat-icon {
display: block;
margin-bottom: 16px;
}
.feat-title {
margin: 0 0 12px;
font-size: clamp(22px, 2.1vw, 30px);
line-height: 1.12;
font-weight: 600;
color: #18233A;
letter-spacing: -0.02em;
}
.feat-body {
margin: 0;
font-size: 16px;
line-height: 1.55;
color: #18233A;
text-wrap: pretty;
}
.feat-media {
display: none;
}
.feat-sticky {
position: sticky;
top: 0;
align-self: start;
height: 100vh;
display: flex;
align-items: center;
}
/* Pinned visual: no container of its own, just a few light UI cards layered
like a collage — one main card on the right, two smaller stat cards
overlapping its left edge. Each .feat-shot is one feature's collage; the
pinned frame swaps between them with a quick crossfade. Brand green
#28CC95 fills bars and badges; its darker shades carry thin lines
(#1FA579, 3.1:1 on white) and small text (#17805C, 4.9:1). */
.feat-frame {
position: relative;
width: 100%;
height: clamp(440px, 60vh, 520px);
}
.feat-shot {
position: relative;
color: #18233A;
}
/* Each collage is as tall as its main card and centered in the frame; the
stat cards hang off that card's top-left and bottom-left corners. */
.feat-frame .feat-shot {
position: absolute;
left: 0;
right: 0;
top: 50%;
translate: 0 -50%;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.feat-frame .feat-shot.is-active {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.fc {
box-sizing: border-box;
background: #fff;
border: 1px solid #E7E9EE;
border-radius: 16px;
box-shadow: 0 1px 2px rgba(24,35,58,0.04), 0 12px 32px rgba(24,35,58,0.08);
}
.fc-main {
position: relative;
margin-left: 26%;
/* Left strip stays clear where the stat cards overlap it (they reach at
most ~70px past this card's left edge). */
padding: 22px 24px 22px 76px;
}
.feat-frame .fc-sub { position: absolute; }
.fc-sub {
z-index: 1;
width: clamp(170px, 34%, 240px);
padding: 16px 18px;
box-shadow: 0 1px 2px rgba(24,35,58,0.05), 0 16px 36px rgba(24,35,58,0.12);
}
.fc-sub-a { left: 0; top: -26px; }
.fc-sub-b { left: 2%; bottom: -26px; }
.fc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fc-h { font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.fc-eyebrow { font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; margin-bottom: 8px; }
.fc-value { font-size: 25px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.fc-value-sm { font-size: 19px; }
.fc-note { font-size: 11.5px; line-height: 1.45; margin-top: 5px; }
.fc-up { color: #17805C; font-weight: 500; }
.fc-text { margin: 0; font-size: 12.5px; line-height: 1.5; }
.fc-small { font-size: 11.5px; color: #4A5468; }
.fc-chart { position: relative; height: 130px; margin-top: 14px; }
.fc-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fc-months { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; font-size: 10px; font-weight: 500; text-align: center; }
.fc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.fc-track { display: block; height: 6px; margin-top: 12px; border-radius: 4px; background: #EDEFF3; overflow: hidden; }
.fc-track .fill-bar { display: block; height: 100%; background: #28CC95; }
.fc-split { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 11px; font-weight: 500; }
.fc-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #E7E9EE; }
.fc-note + .fc-row { margin-top: 10px; }
.fc-row-first { border-top: none; padding-top: 2px; }
.fc-row-main { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; }
.fc-row-sub { display: block; font-size: 11px; margin-top: 2px; }
.fc-row-amt { font-size: 13px; font-weight: 500; }
.fc-badge { padding: 4px 9px; border-radius: 6px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; }
.fc-badge-green { background: rgba(40,204,149,0.14); color: #17805C; }
.fc-mile { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12.5px; font-weight: 500; }
.fc-mile:first-of-type { margin-top: 6px; }
.fc-mile svg { flex: 0 0 auto; }
.fc-mile-todo { color: #6B7486; }
.fc-chip { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 11px 14px; border-radius: 12px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.fc-dot { width: 7px; height: 7px; border-radius: 50%; background: #28CC95; }
.fc-alert-head { margin-bottom: 8px; }
.fc-icon { width: 26px; height: 26px; border-radius: 8px; background: #FBEEDA; display: inline-flex; align-items: center; justify-content: center; }
.fc-plastic {
aspect-ratio: 1.586;
display: flex;
flex-direction: column;
justify-content: space-between;
border: none;
background: linear-gradient(150deg, #5FE0B5 0%, #28CC95 100%);
}
.fc-plastic-brand { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.fc-plastic-num { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; }
/* Stacked layout (<=900px): no pinned column. Each collage (cloned in by
cloneFeatureShots()) sits above its own text as a short stack — first
stat card, main card, second stat card — overlapping slightly so it
still reads as layered. */
@media (max-width: 900px) {
.feat-scroll { display: block; margin-top: 16px; }
.feat-sticky { display: none; }
.feat-steps { padding-bottom: 0; }
.feat-step { display: block; min-height: 0; margin-bottom: 72px; }
.feat-step:last-child { margin-bottom: 0; }
.feat-media { display: flex; flex-direction: column; margin-bottom: 44px; }
.feat-media .feat-shot { display: flex; flex-direction: column; }
.feat-media .fc { position: relative; }
.feat-media .fc-main { order: 1; width: 92%; margin-left: auto; padding: 20px; }
.feat-media .fc-sub-a { order: 0; width: min(62%, 260px); margin-bottom: -18px; }
.feat-media .fc-sub-b { order: 2; width: min(66%, 290px); margin: -18px 0 0 4%; }
.feat-media .fc-chip { width: fit-content; }
.feat-text { max-width: none; opacity: 1; }
}
@media (max-width: 480px) {
.fc-stats { grid-template-columns: 1fr 1fr; }
.fc-stats > :last-child { grid-column: 1 / -1; }
.feat-body { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
.feat-text,
.feat-frame .feat-shot {
transition: none;
}
}