*,::after,::before{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul,ul[role=list]{list-style:none; padding: 0}body{line-height:1.5}button,h1,h2,h3,h4,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}button,input,select,textarea{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}
:root {
--orange1: #F86A3A;
--orange2: #F87E3B;
--orange3: #F88B3A;
--orange4: #F89A3B;
--orange5: #F8A73B;
--orange6: #F8B53A;
--orange7: #F8B53A;
--green1: #3C98AD;
--green2: #3CA3A0;
--green3: #3CAD91;
--green4: #3CB282;
--green5: #3CB271;
--green6: #3CB260;
--purple1: #AA55EE;
--purple2: #8941B7;
--featureGradient1: #FF6421;
--featureGradient2: #FF6A1D;
--featureGradient3: #FF7118;
--featureGradient4: #FF7813;
--featureGradient5: #FF7E0E;
--featureGradient6: #FF850A;
--featureGradient7: #FF8C05;
--featureGradient8: #FF9200;
--featureGradient9: #FF9900;
--featureGradient10: #FFA000;
--featureGradient11: #FFA700;
--featureGradient12: #FFAD00;
--featureGradient13: #FFB400;
--featureGradient14: #FFBB00;
--featureGradient15: #FFC100;
}
@supports (color: color(display-p3 0 0 0)) {
:root {
--orange1: color(display-p3 0.9725 0.4234 0.2277);
--orange2: color(display-p3 0.9728 0.4941 0.2320);
--orange3: color(display-p3 0.9731 0.5454 0.2283);
--orange4: color(display-p3 0.9720 0.5994 0.2307);
--orange5: color(display-p3 0.9721 0.6543 0.2310);
--orange6: color(display-p3 0.9722 0.7092 0.2270);
--orange7: color(display-p3 0.9722 0.7092 0.2270);
--green1: color(display-p3 0.2356 0.5964 0.6787);
--green2: color(display-p3 0.2347 0.6387 0.6270);
--green3: color(display-p3 0.2350 0.6780 0.5679);
--green4: color(display-p3 0.2349 0.6977 0.5096);
--green5: color(display-p3 0.2355 0.6981 0.4431);
--green6: color(display-p3 0.2347 0.6976 0.3761);
--purple1: color(display-p3 0.6663 0.3323 0.9347);
--purple2: color(display-p3 0.539 0.2549 0.7173);
--featureGradient1: color(display-p3 0.9725 0.4354 0.2272);
--featureGradient2: color(display-p3 0.9716 0.4575 0.2218);
--featureGradient3: color(display-p3 0.9708 0.4801 0.2179);
--featureGradient4: color(display-p3 0.9702 0.5030 0.2155);
--featureGradient5: color(display-p3 0.9697 0.5262 0.2147);
--featureGradient6: color(display-p3 0.9693 0.5497 0.2154);
--featureGradient7: color(display-p3 0.9691 0.5734 0.2168);
--featureGradient8: color(display-p3 0.9690 0.5973 0.2186);
--featureGradient9: color(display-p3 0.9690 0.6213 0.2208);
--featureGradient10: color(display-p3 0.9692 0.6456 0.2233);
--featureGradient11: color(display-p3 0.9696 0.6700 0.2256);
--featureGradient12: color(display-p3 0.9701 0.6945 0.2273);
--featureGradient13: color(display-p3 0.9708 0.7191 0.2281);
--featureGradient14: color(display-p3 0.9716 0.7438 0.2281);
--featureGradient15: color(display-p3 0.9726 0.7686 0.2273);
}
}
html { overflow-x: hidden }
body { width: 100vw; max-width: 800px; margin: 0 auto; background: url(/images/texture.png) repeat #fff; color: #444; font-size: 18px; line-height: 21px; padding: 60px 24px 0; overflow-x: clip }
.bungee { font-family: 'Bungee Regular', sans-serif }
.fira { font-family: 'Fira Sans', sans-serif }
.firaCode { font-family: 'Fira Code', sans-serif }
strong { font-weight: 800 }
h2 { position: relative; margin-bottom: 32px; max-width: 300px }
h2:before { content: ''; display: block; margin-bottom: 16px; width: 96px; height: 16px; border-radius: 2px }
#reviews h2 { color: #F2A400; color: color(display-p3 0.9465 0.6418 0) }
#reviews h2:before { background: #F2A400; background: color(display-p3 0.9465 0.6418 0) }
#connected h2 { color: #3685D6; color: color(display-p3 0.2124 0.5217 0.8396) }
#connected h2:before { background: #3685D6; background: color(display-p3 0.2124 0.5217 0.8396) }
#join h2 { color: #444; mix-blend-mode: multiply }
#features h2 { color: #F86F3A; color: color(display-p3 0.9728 0.4356 0.2277); margin-bottom: 16px }
#features h2:before { background: #F86F3A; background: color(display-p3 0.9728 0.4356 0.2277) }
#private h2 { color: #C175F4; color: color(display-p3 0.757 0.4593 0.9575); margin: 0 0 16px 0; max-width: none; background: url(/images/privacyLock.png) right 54px no-repeat; padding-right: 100px; background-size: 88px }
#private h2:before { background: #C175F4; background: color(display-p3 0.757 0.4593 0.9575) }
#science h2 { color: #3589D6; color: color(display-p3 0.2083 0.5372 0.8393); margin-bottom: 16px }
#science h2:before { background: #3589D6; background: color(display-p3 0.2083 0.5372 0.8393) }
#forYou h2 { color: #f1f1f1; color: color(display-p3 0.235 0.6975 0.3562); margin-bottom: 16px }
#forYou h2:before { background: #3CB25B; background: color(display-p3 0.235 0.6975 0.3562) }
#startHere h2 { color: #444; mix-blend-mode: multiply }
#logo { background: url(/images/BuenaVidaLogoMobile.png); background-repeat: no-repeat; background-size: contain; width: 100%; height: auto; aspect-ratio: 1063/537; margin-bottom: 24px }
#tagline { font-weight: 600; margin-bottom: 32px }
.button { display: block; position: relative; width: 100%; height: 48px; border-radius: 4px; text-decoration: none; -webkit-tap-highlight-color: transparent; color: #444;
background: radial-gradient(100.63% 113.33% at 72.92% 35.42%, rgba(246, 201, 81, 0.60) 0%, rgba(245, 208, 79, 0.60) 51%, rgba(251, 172, 87, 0.60) 100%), linear-gradient(180deg, #F7C452 0%, #F8CE58 100%);
background: radial-gradient(100.63% 113.33% at 72.92% 35.42%, color(display-p3 0.9373 0.794 0.4 / 0.60) 0%, color(display-p3 0.9373 0.8208 0.4 / 0.60) 51%, color(display-p3 0.9373 0.6865 0.4 / 0.60) 100%), linear-gradient(180deg, color(display-p3 0.9373 0.7765 0.4) 0%, color(display-p3 0.9451 0.8157 0.4235) 100%);
box-shadow: -0.5px -1px 0 0 rgba(255, 255, 255, 0.20) inset, 0 4px 0 0 #B57633, 0.5px 4px 2px 1px rgba(0, 0, 0, 0.20), 2px 8px 12px 0 rgba(0, 0, 0, 0.10), 0 4px 0 0.5px rgba(0, 0, 0, 0.30);
box-shadow: -0.5px -1px 0 0 color(display-p3 1 1 1 / 0.20) inset, 0 4px 0 0 color(display-p3 0.6739 0.4748 0.2517), 0.5px 4px 2px 1px color(display-p3 0 0 0 / 0.20), 2px 8px 12px 0 color(display-p3 0 0 0 / 0.10), 0 4px 0 0.5px color(display-p3 0 0 0 / 0.30);
transition: 100ms;
}
.button:active {
top: 4px; color: #444;
box-shadow:
-0.5px -1px 0 0 rgba(255, 255, 255, 0.20) inset,
0 4px 0 0 #B57633, 0.5px 4px 2px 1px rgba(0, 0, 0, 0.20),
2px 8px 12px 0 rgba(0, 0, 0, 0.10),
0 4px 0 0.5px rgba(0, 0, 0, 0.30);
box-shadow:
-0.5px -1px 0 0 color(display-p3 1 1 1 / 0.20) inset,
0 0.5px 0 0 color(display-p3 0.6739 0.4748 0.2517),
0.5px 0.5px 2px 1px color(display-p3 0 0 0 / 0.20),
0.5px 0.5px 2px 0 color(display-p3 0 0 0 / 0.10),
0 0.5px 0 0.5px color(display-p3 0 0 0 / 0.30);
}
.button-texture { width: 100%; height: 100%; background: url(/images/texture.png) repeat }
.button-content { mix-blend-mode: multiply; height: 100%; text-align: center; display: flex; justify-content: center; align-items: center; gap: 8px }
.button.main { max-width: 500px }
#appStoreBadge { display: flex; flex-direction: row; align-items: center; gap: 16px; margin-top: 12px; margin-bottom: 48px }
#appStoreBadge p { color: #79857D; font-size: 15px; line-height: 16px }
#appStoreBadge img { height: 40px; width: auto }
#overview { margin: 0 -24px 56px -24px; position: relative; overflow-x: clip }
#overview-bullets { background: #111; padding: 24px; padding-right: 160px }
#overview-bullets li { margin-bottom: 16px }
#overview p { font-size: 12.5px; line-height: 16px; color: #999; font-weight: normal; padding-top: 16px; padding-right: 10px }
#overview p strong { color: #bbb }
#overview-screenshot .main1 { position: absolute; top: -32px; right: -84px; width: 264px; z-index: 2 }
#overview-screenshot .main2 { display: none }
#asSeen { margin-bottom: 40px }
#asSeen h3 { font-size: 18px; margin-bottom: 16px }
#asSeen img { height: 36px; margin-bottom: 4px }
#asSeen .quote { font-size: 21px; line-height: 24px; font-weight: 400; font-style: italic; color: var(--purple1); margin-bottom: 8px }
#asSeen .byline { font-size: 12.5px; line-height: 16px; font-weight: 500; letter-spacing: -0.5px; color: var(--purple2) }
#reviews { margin-bottom: 40px }
#reviews img.main { margin: 0 -24px -8px; max-width: calc(100% + 48px) }
#reviews .review { margin-bottom: 32px }
#reviews .review .rating { display: flex; flex-direction: row; align-items: center; gap: 1px; margin-bottom: 4px }
#reviews .review .rating .reviewer { margin: 2px 0 -2px 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold; color: #9A937A; color: color(display-p3 0.6027 0.5765 0.477) }
#connected { margin-bottom: 48px }
#connected img.main { margin: 0 -24px -8px; max-width: calc(100% + 48px) }
#connected p { font-size: 18px; line-height: 24px; font-weight: bold; margin-bottom: 8px }
#join { background: #3CB25B; background: color(display-p3 0.235 0.6975 0.3562); border-radius: 8px; padding: 24px 16px 32px; margin-bottom: 64px }
#join-texture { background: url(/images/texture.png) repeat; margin: -24px -16px -32px; border-radius: 8px; }
#join-content { padding: 0 16px 24px }
#join .join-offers { display: flex; flex-direction: row; margin-bottom: 16px }
#join .offer { flex-grow: 1; max-width: 50%; background: #73E090; background: color(display-p3 0.4515 0.8797 0.5641); border-radius: 4px; padding: 24px 16px 32px }
#join .offer:first-child { margin-right: 4px; background: #80ED9D; background: color(display-p3 0.5033 0.9287 0.6156) }
#join .offer-price { font-size: 31px; line-height: 40px; white-space: nowrap }
#join .offer-price sup.currency { font-size: 15px }
#join .offer-price sup.digit { font-size: 21.5px; position: relative; top: 4px; margin-left: 1px }
#join .offer-price .offer-period { font-size: 12.5px; font-weight: bold; position: relative; bottom: 7px }
#join .offer .offer-description { font-size: 12.5px; line-height: 16px }
#join .join-try { font-size: 15px; line-height: 20px; mix-blend-mode: multiply; margin-bottom: 24px }
#join .button { margin-bottom: 8px }
#features { margin-bottom: 48px }
#features img.main { margin: 0 -24px -8px; max-width: calc(100% + 48px) }
#features .subhead { font-weight: 600; font-size: 15px; line-height: 20px; margin-bottom: 24px }
#feature-preload { display: none }
.feature-list { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 18px; font-weight: bold; max-width: calc(100% + 48px); margin: 0 -8px 16px; scrollbar-width: none; -ms-overflow-style: none; }
.feature-list::-webkit-scrollbar { display: none }
.feature-list .feature { display: flex; flex-direction: row; gap: 8px; padding: 8px; transition: 100ms ease-in-out; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.feature-list .feature.active { background: #444; color: #f1f1f1 padding: 8px 16px; border-radius: 2px }
.feature-list .feature .icon { display: block; height: 20px; width: 20px; max-width: none; margin-top: -2px }
.feature-content { display: flex; flex-direction: row; gap: 24px; overflow-x: hidden; margin-right: -30px; position: relative; min-height: 460px; }
.feature-text { font-size: 15px; line-height: 20px; margin-top: 48px; opacity: 1; transform: translateX(0px); transition: opacity 200ms ease, transform 200ms ease; }
.feature-text.exiting-left { opacity: 0; transform: translateX(8px); }
.feature-text.exiting-right { opacity: 0; transform: translateX(-8px); }
.feature-text.entering-left { opacity: 0; transform: translateX(-8px); }
.feature-text.entering-right { opacity: 0; transform: translateX(8px); }
.feature-text p { margin-bottom: 8px }
.feature-screenshot { width: 240px; min-width: 240px; height: 460px; margin-right: -54px; opacity: 1; transform: translateX(0px); transition: opacity 200ms ease, transform 200ms ease; background-position: -4px 0; background-repeat: no-repeat; background-size: contain }
.feature-screenshot.exiting-left { opacity: 0; transform: translateX(-16px); }
.feature-screenshot.exiting-right { opacity: 0; transform: translateX(16px); }
.feature-screenshot.entering-left { opacity: 0; transform: translateX(-16px); }
.feature-screenshot.entering-right { opacity: 0; transform: translateX(16px); }
#private { margin-bottom: 56px; color: #3E105D; color: color(display-p3 0.2432 0.0637 0.3641) }
#private img.main { margin: 0 -24px -8px; max-width: calc(100% + 48px) }
#science { margin-bottom: 56px; color: #0E2A43; color: color(display-p3 0.0534 0.1637 0.2648) }
#science img.main { margin: 0 -24px -8px; max-width: calc(100% + 48px) }
#private p, #science p { font-size: 15px; line-height: 20px; margin-bottom: 8px; margin-right: 72px }
#private li { font-size: 15px; line-height: 20px; font-weight: bold }
#forYou { margin-bottom: 56px }
#forYou img.main { margin: 0 -24px -8px; max-width: calc(100% + 48px) }
#forYou li { font-size: 15px; line-height: 21px; font-weight: bold; padding-left: 36px; background: url(/images/forYou1.png) 0% 50% no-repeat; background-size: 28px 34px; margin-bottom: 16px }
#startHere { background: #3CB25B; background: color(display-p3 0.235 0.6975 0.3562); border-radius: 8px; padding: 24px 16px 32px; margin-bottom: 80px }
#startHere-texture { background: url(/images/texture.png) repeat; margin: -24px -16px -32px; border-radius: 8px; }
#startHere-content { padding: 0 16px 24px }
#startHere p { font-size: 18px; line-height: 24px; font-weight: 500 }
#startHere li { font-size: 15px; line-height: 21px; font-weight: 500 }
#startHere p { margin-bottom: 8px; mix-blend-mode: multiply }
#startHere li { font-weight: 700; mix-blend-mode: multiply }
#startHere .button { margin-top: 32px; margin-bottom: 16px }
footer { background: #111111; background: #000; color: #f1f1f1; margin: 0 -24px }
footer #footer-texture { background: url(/images/texture.png) repeat }
footer #footer-content { padding: 32px 24px 40px }
footer img.main { margin: -32px -24px 48px; max-width: calc(100% + 48px) }
footer img { margin-bottom: 32px }
footer p { text-transform: uppercase; font-size: 15px; line-height: 16px; margin-bottom: 24px }
footer p:last-child { font-size: 12.5px; color: #999 }
footer p.links { font-size: 12.5px; padding: 8px 0 }
footer p.links a { margin-right: 16px }
@media (prefers-color-scheme: dark) {
body { background: url(/images/textureDark.png) repeat #111; color: #f1f1f1 }
#join, #join h2, #startHere, .button { color: #333 }
#private, #science { color: #f1f1f1 }
footer { background: #000 }
footer #footer-texture { background-image: url(/images/textureDark.png) }
#appStoreBadge img { filter: invert(1) }
#logo { background-image: url(/images/BuenaVidaLogoMobileDark.png) }
}
@media (prefers-color-scheme: dark) and (min-width: 600px) {
#logo { background-image: url(/images/BuenaVidaLogoDesktopDark.png) !important }
}
@media (min-width: 330px) {
#private h2 { background-position-y: 50% !important }
}
@media (min-width: 600px) {
body { max-width: none; padding-inline: 0 }
#logo { aspect-ratio: 655/142; background-image: url(/images/BuenaVidaLogoDesktop.png); background-position-x: 40%; max-width: 1500px; margin-inline: auto }
#tagline { text-align: center }
a.button.main { margin-inline: auto }
#appStoreBadge { justify-content: center }
#overview-bullets ul, #overview-bullets p { max-width: 600px; margin-inline: auto; padding-inline: 24px }
#overview-bullets ul { font-size: 21px }
#asSeen { max-width: 735px; margin-inline: auto; padding-inline: 24px }
h2 { max-width: none }
h2:before { width: 50% }
#connected { padding-inline: 24px }
#connected img.main { max-width: 800px }
#connected h2, #connected p { max-width: 735px; margin-inline: auto }
#private h2 { background-position-y: 50% !important; max-width: 735px; margin-inline: auto; }
#reviews { max-width: 735px; margin-inline: auto; padding-inline: 24px }
#join { max-width: 735px; margin-inline: auto; padding-inline: 24px }
#join #join-texture { margin: -24px -24px -32px }
#join-content { padding: 0 32px 24px }
#join h2 { text-align: center }
#join .join-offers { gap: 24px }
#join .offer-content { text-align: center }
#join .button { max-width: 500px; margin-inline: auto }
#join .join-try { text-align: center; margin-top: 32px }
#join .join-try strong { font-size: 18px; line-height: 24px }
.feature-list { flex-direction: row; gap: 0px; margin: 0 -24px 16px; justify-content: start }
.feature-list .feature { display: flex; flex-direction: column; gap: 16px; height: 120px; padding: 14px 16px }
.feature-list .feature .icon { height: 28px; width: 28px }
#features h2,
#features .subhead,
#features .feature-content { max-width: 735px; margin-inline: auto; padding-inline: 24px; overflow-x: visible }
#features .feature-list .feature { max-width: 140px }
#features .feature-list .feature:first-child { margin-left: 8vw !important }
#features .subhead { font-size: 21px; margin-bottom: 32px }
#features .feature-text { font-size: 18px; line-height: 24px }
#features #featureScreenshot { transform: scale(1.4); transform-origin: top left; }
#private { padding-inline: 24px }
#private img.main { border-radius: 8px; max-width: 900px; margin-inline: auto }
#private h2 { max-width: 735px; margin-inline: auto; background-position-y: 100% !important }
#private p, #private li { max-width: 735px; margin-inline: auto; font-size: 18px; line-height: 24px }
#science { padding-inline: 24px }
#science h2 { max-width: 735px; margin-inline: auto }
#science img.main { border-radius: 8px; max-width: 100%; max-width: 900px; margin-inline: auto }
#science p { font-size: 18px; line-height: 24px; max-width: 735px; margin-inline: auto }
#forYou h2,
#forYou ul { max-width: 735px; margin-inline: auto; padding-inline: 24px }
#forYou li { font-size: 18px; line-height: 24px; margin-bottom: 24px }
#startHere { max-width: 735px; margin-inline: auto; padding-inline: 24px }
#startHere .button { max-width: 500px; margin-inline: auto }
#startHere #startHere-content { padding-inline: 32px }
#startHere ul { margin-bottom: 32px }
#startHere li { font-size: 18px; line-height: 24px; max-width: 500px; letter-spacing: -0.5px }
footer #footer-content { max-width: 735px; margin-inline: auto; margin-top: 24px; margin-inline: auto; text-align: center }
footer img.main { border-radius: 8px; margin-inline: 0; margin-top: 24px; max-width: 100% }
}
@media (min-width: 750px) {
#features .feature-list { justify-content: center }
}
@media (min-width: 800px) {
#connected img.main { margin-inline: auto; border-radius: 8px; width: 100% }
}
@media (min-width: 900px) {
#overview-screenshot .main1 { top: -82px; right: 5vw; width: 360px; }
#overview p { padding-right: 170px; }
#reviews .review { padding-right: 150px }
#features img.main { margin: 0 auto -8px; max-width: 900px; border-radius: 8px; }
#startHere h2 { font-size: 32px }
}
@media (min-width: 1150px) {
h2 { font-size: 32px; line-height: 40px }
#overview-screenshot .main1 { top: -82px; right: auto; left: calc(-100px + 8vw); width: 24vw }
#overview-screenshot .main2 { display: block; position: absolute; top: -78px; right: 3vw; width: 36vw; max-width: 530px; }
#overview-bullets li { font-size: 24px; line-height: 28px }
#asSeen img { height: 48px; margin-bottom: 8px }
#asSeen .quote { font-size: 24px; line-height: 28px }
#reviews { margin-top: 120px }
#reviews .review { padding-right: 100px }
#private, #science { margin-bottom: 120px }
#forYou { margin-bottom: 80px }
#forYou img.main { max-width: 1100px; border-radius: 8px; margin-inline: auto }
}