form {
display:inline
}
/* === Tokens === */
:root {
--c-navy:#1E297C;
--c-yellow:#F1CF69;
--c-yellow-soft:#F6DC8A;
--c-green:#48C859;
--c-green-deep:#3FB94E;
--c-cream:#F2F2F2;
--c-white:#FFF;
--c-gray:#828A95;
--c-black:#111;
--c-text-mute:#5A5A5A;
--page-max:480px;
--radius-card:26px;
--radius-pill:999px;
/* Mobile-only design:bgs bleed full viewport,content sits in a 480px centered column.
See feedback_scrollbar_gutter_centering for --sb/--pad-l/--pad-r derivation. */
--sb:0px;
--pad-l:max(24px,calc((100vw - var(--page-max)) / 2 + var(--sb) / 2));
--pad-r:max(24px,calc((100vw - var(--page-max)) / 2 - var(--sb) / 2));
--side-padding:max(24px,calc((100vw - var(--page-max)) / 2));
--s-1:8px;
--s-2:16px;
--s-3:24px;
--s-4:32px;
--s-5:48px;
--s-6:64px
}
/* === Fonts === */
@font-face {
font-family:"Assistant";
src:url(../../../design/default/css/../Fonts/Assistant-Regular.ttf) format(truetype);
font-weight:400;
font-display:swap
}
@font-face {
font-family:"Assistant";
src:url(../../../design/default/css/../Fonts/Assistant-Bold.ttf) format(truetype);
font-weight:700;
font-display:swap
}
/* === Reset === */
*,*::before,*::after { box-sizing:border-box
}
html {
-webkit-text-size-adjust:100%;
scrollbar-gutter:stable;
scroll-behavior:smooth
}
body,h1,h2,h3,p,figure,form { margin:0
}
img { display:block;
max-width:100%;
height:auto
}
button { font:inherit;
cursor:pointer;
border:0;
background:none
}
input { font:inherit
}
a { color:inherit;
text-decoration:none
}
body {
font-family:"Assistant","Heebo","Rubik",system-ui,sans-serif;
font-size:19px;
line-height:1.5;
color:var(--c-black);
background:var(--c-cream);
-webkit-font-smoothing:antialiased
}
/* === Page === */
.page {
background:var(--c-cream);
overflow-x:hidden
}
/* === Hero === */
.hero {
position:relative;
background:var(--c-navy);
padding-block:32px 0;
padding-left:var(--pad-l);
padding-right:var(--pad-r);
padding-bottom:var(--s-3);
text-align:center;
color:var(--c-white);
box-shadow:0 0 0 9999px var(--c-navy);
clip-path:inset(0 -9999px)
}
.hero__logo {
width:172px;
height:auto;
margin:0 auto 30px
}
.hero__headline {
font-size:40px;
line-height:1.32;
margin-bottom:28px;
color:var(--c-white)
}
.hero__headline-line1 {
display:block;
font-weight:bold;
color:var(--c-white)
}
.hero__headline-pop {
display:block;
margin-top:8px;
font-weight:700;
font-size:36px;
line-height:1.2;
color:var(--c-yellow)
}
.hero__headline-line3 {
display:block;
margin-top:4px;
font-weight:700;
font-size:36px;
line-height:1.25;
color:var(--c-white)
}
.hero__grid {
display:block;
width:100%;
height:auto;
margin:0 auto
}
.hero__chevron {
position:absolute;
bottom:26px;
left:calc(50% + var(--sb) / 2);
transform:translateX(-50%);
width:64px;
z-index:5;
animation:chevron-bounce 1.8s ease-in-out infinite
}
.hero__chevron img {
width:100%;
height:auto;
filter:drop-shadow(0 8px 18px rgba(0,0,0,0.38))
}
@keyframes chevron-bounce {
0%,100% { transform:translateX(-50%) translateY(0)
}
50%      { transform:translateX(-50%) translateY(8px)
}
}
.user-scrolled .hero__chevron {
animation-play-state:paused
}
/* === Sections === */
.section {
padding-block:60px;
padding-left:var(--pad-l);
padding-right:var(--pad-r)
}
.title {
font-weight:700;
font-size:30px;
line-height:1.25;
color:var(--c-navy);
text-align:center
}
.title--center  { text-align:center
}
.title--on-navy { color:var(--c-white)
}
.title--yellow  { color:var(--c-yellow)
}
.title--underline {
position:relative;
padding-bottom:18px;
margin-bottom:28px
}
.title--underline::after {
content:"";
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:72px;
height:4px;
background:var(--c-yellow);
border-radius:2px
}
.body {
font-size:19px;
line-height:1.65;
color:var(--c-black);
text-align:center;
margin-top:20px
}
.body--center { text-align:center
}
/* === Section:Secret === */
.section--secret {
background:var(--c-cream);
padding-top:60px;
padding-bottom:44px
}
.section--secret .body {
max-width:380px;
margin-inline:auto;
color:var(--c-black)
}
.section__product {
width:92%;
max-width:380px;
margin:32px auto 0
}
/* === Section:Yellow callout === */
.section--callout {
background:var(--c-cream);
padding-block:28px 48px
}
.callout {
position:relative;
width:100%;
max-width:420px;
margin:0 auto;
aspect-ratio:1122 / 820
}
.callout__bg {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain
}
.callout__text {
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-weight:700;
font-size:27px;
line-height:1.3;
color:var(--c-black);
padding:14% 10%
}
/* === Section:Love panel === */
.section--love {
background:var(--c-white);
color:var(--c-navy);
padding-block:56px 60px;
padding-left:var(--pad-l);
padding-right:var(--pad-r);
text-align:center;
box-shadow:0 0 0 9999px var(--c-white);
clip-path:inset(0 -9999px)
}
.love__hero {
font-weight:700;
color:var(--c-navy);
font-size:26px;
line-height:1.35
}
.love__sub {
margin-top:20px;
color:var(--c-navy);
font-weight:400;
font-size:20px;
line-height:1.45
}
.love__accent {
color:var(--c-black);
font-weight:700
}
/* === Section:How it works === */
.section--how {
background:var(--c-cream);
padding-block:56px 36px
}
.section--how .title { margin-bottom:28px
}
.step {
background:var(--c-white);
border-radius:var(--radius-card);
padding:64px 22px 30px;
margin-bottom:0;
box-shadow:0 6px 18px rgba(30,41,124,0.07);
position:relative;
text-align:center;
max-width:var(--page-max);
margin-inline:auto
}
.step:first-of-type { margin-top:60px
}
.step + .step       { margin-top:80px
}
.step__badge {
position:absolute;
top:-48px;
left:50%;
transform:translateX(-50%);
width:96px;
height:96px;
margin:0;
filter:drop-shadow(0 8px 14px rgba(30,41,124,0.22))
}
.step__photo {
width:100%;
height:auto;
border-radius:16px;
margin-bottom:22px
}
.step__title {
font-weight:700;
font-size:26px;
line-height:1.3;
color:var(--c-navy);
margin-bottom:14px
}
.step__body {
font-size:18px;
line-height:1.6;
color:var(--c-black);
margin-top:10px
}
.step__body strong { font-weight:700;
color:var(--c-black)
}
.step__highlight {
margin-top:16px;
font-weight:700;
font-size:19px;
color:var(--c-navy)
}
/* === Buttons === */
.btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
background:var(--c-green);
color:var(--c-white);
font-weight:700;
font-size:21px;
padding:16px 32px;
border-radius:var(--radius-pill);
box-shadow:0 8px 20px rgba(72,200,89,0.35);
transition:transform 120ms ease,box-shadow 120ms ease
}
.btn:active { transform:translateY(1px)
}
.btn--whatsapp { background:var(--c-green)
}
.btn--whatsapp:hover { background:var(--c-green-deep)
}
.btn--yellow {
background:var(--c-yellow);
color:var(--c-navy);
box-shadow:0 8px 20px rgba(241,207,105,0.45)
}
.btn--yellow:hover { background:var(--c-yellow-soft)
}
.hero__cta { margin:0 auto 30px
}
.btn--full {
display:flex;
width:100%;
padding-block:18px;
font-size:22px
}
.btn__icon {
width:26px;
height:26px;
flex-shrink:0
}
.step .btn { margin-top:22px
}
/* === Section:Package (navy) === */
.section--package {
background:var(--c-navy);
color:var(--c-white);
padding-block:60px 48px;
padding-left:var(--pad-l);
padding-right:var(--pad-r);
text-align:center;
box-shadow:0 0 0 9999px var(--c-navy);
clip-path:inset(0 -9999px)
}
.section--package .title {
color:var(--c-yellow);
margin-bottom:16px;
font-size:32px
}
.package__sub {
font-size:20px;
line-height:1.55;
color:var(--c-white);
max-width:360px;
margin-inline:auto
}
.package__sub strong {
font-weight:700;
color:var(--c-yellow)
}
.package__sub .emoji { font-size:22px;
vertical-align:-2px
}
.package__hero {
width:92%;
max-width:400px;
margin:32px auto 40px
}
.variant { margin-top:38px;
text-align:center
}
.variant__title {
font-weight:700;
font-size:27px;
color:var(--c-yellow);
margin-bottom:12px
}
.variant__body {
font-size:19px;
line-height:1.55;
color:var(--c-white);
max-width:340px;
margin:0 auto
}
/* === Section:Recipes === */
.section--recipes {
background:var(--c-cream);
padding-block:60px 44px;
text-align:center
}
.section--recipes .body {
max-width:380px;
margin:20px auto 0;
color:var(--c-black)
}
.recipes__accent {
color:var(--c-navy);
font-weight:700
}
.recipes__tablet {
width:100%;
max-width:420px;
margin:24px auto 0
}
/* === Disclaimer === */
.disclaimer {
background:var(--c-cream);
color:var(--c-text-mute);
font-size:15px;
line-height:1.55;
padding-block:8px 48px;
padding-left:var(--pad-l);
padding-right:var(--pad-r);
text-align:center
}
/* === Footer === */
.footer {
background:var(--c-gray);
color:var(--c-white);
padding-block:48px 60px;
padding-left:var(--pad-l);
padding-right:var(--pad-r);
text-align:center;
box-shadow:0 0 0 9999px var(--c-gray);
clip-path:inset(0 -9999px)
}
.footer__title {
font-weight:700;
font-size:27px;
line-height:1.35;
margin-bottom:24px
}
.footer__form {
margin-inline:auto;
max-width:380px
}
.footer__label {
display:block;
font-size:20px;
margin-bottom:8px;
color:var(--c-white)
}
.footer__phone {
font-size:26px;
font-weight:700;
letter-spacing:0.5px;
margin:0 auto 30px;
max-width:380px;
padding-bottom:14px;
border-bottom:1.5px solid rgba(255,255,255,0.85)
}
.footer__phone a {
color:var(--c-white);
text-decoration:none
}
.footer .btn--full {
margin-inline:auto;
max-width:380px;
text-decoration:none
}
.footer__input {
display:block;
width:100%;
padding:12px 12px 14px;
border:0;
border-radius:0;
border-bottom:1.5px solid rgba(255,255,255,0.85);
background:transparent;
color:var(--c-white);
text-align:center;
font-size:26px;
font-weight:700;
letter-spacing:0.5px;
margin-bottom:30px;
outline:none
}
.footer__input::placeholder { color:rgba(255,255,255,0.85);
font-weight:700
}
.footer__input:focus { border-bottom-color:var(--c-white)
}
.footer__consent {
display:flex;
gap:10px;
align-items:flex-start;
text-align:start;
font-size:14px;
line-height:1.5;
color:var(--c-white);
margin-bottom:22px;
cursor:pointer
}
.footer__consent input[type="checkbox"] {
flex:0 0 auto;
width:18px;
height:18px;
margin-top:2px;
accent-color:var(--c-yellow,#ffd400)
}
.footer__consent a {
text-decoration:underline;
text-underline-offset:2px;
color:var(--c-white)
}
.footer__thanks {
max-width:380px;
margin-inline:auto;
padding:28px 18px;
border-radius:12px;
background:rgba(255,255,255,0.08);
text-align:center;
color:var(--c-white)
}
.footer__thanks h3 {
font-size:24px;
font-weight:700;
margin-bottom:10px
}
.footer__thanks p {
font-size:18px;
line-height:1.5
}
.footer__email {
margin-top:26px;
font-size:18px;
line-height:1.55;
color:var(--c-white)
}
.footer__email a {
text-decoration:underline;
text-underline-offset:3px
}
/* === Floating WhatsApp (visible throughout scroll) === */
.wa-float {
position:fixed;
bottom:20px;
left:max(16px,calc(50% - var(--page-max) / 2 + 16px));
z-index:60;
display:flex;
align-items:center;
justify-content:center;
width:60px;
height:60px;
background:var(--c-green);
border-radius:50%;
box-shadow:0 6px 18px rgba(72,200,89,0.45),0 2px 6px rgba(0,0,0,0.18);
transition:transform 150ms ease,background 150ms ease,opacity 220ms ease,visibility 220ms ease;
animation:wa-pulse 2.4s ease-in-out infinite
}
.wa-float img { width:34px;
height:34px
}
.wa-float:hover  { background:var(--c-green-deep);
transform:scale(1.05)
}
.wa-float:active { transform:scale(0.96)
}
/* Yield to the footer's own WhatsApp CTA when the contact section is on screen. */
.wa-float.is-hidden {
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(12px)
}
@keyframes wa-pulse {
0%,100% { box-shadow:0 6px 18px rgba(72,200,89,0.45),0 0 0 0   rgba(72,200,89,0.45)
}
50%      { box-shadow:0 6px 18px rgba(72,200,89,0.45),0 0 0 12px rgba(72,200,89,0)
}
}
@media (prefers-reduced-motion:reduce) {
.wa-float { animation:none
}
}
/* === Desktop framing === */
@media (min-width:600px) {
body { background:#d8dae0
}
}
.seoform span {
float:left;
width:100px
}
.seoform div input {
width:500px
}
.seoform div {
float:left;
width:100%;
margin-bottom:15px
}
/* css fixes */
ol {
position:relative;
right:20px
}
a{
outline:0
}
input[type="image"],
input[type="submit"],
input[type="button"],
button {
cursor:pointer
}
.ie a img {
border:0
}
.hidden {
position:absolute;
left:0;
top:-100000px
}
/*
* span {
display:inline-block
}
*/
/*
#lbuttons,
#lbuttons div,
#lbuttons a,
#lbuttons img,
.fxc #subtoolbar,
.fxc #admin_panel {
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
transform:2DValue(val) 3DValueSetToNull(0);
transform:2DValue(val);
-webkit-transform :translateZ(0);
-o-transform :translateZ(0);
-webkit-transform :translateZ(0);
transform :translateZ(0);
-webkit-transition:all 0.5s linear
}
.fxc #admin_pusher,
.fxc #sys_website {
-webkit-transition:all 0.5s linear
}
*/
body {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
min-width:100%;
min-height:100%;
padding:0;
margin:0
}
p {
padding:0;
margin:0
}
div.bs {
float:right
}