.text-green-darkest { color: #1D4321; } .bg-green-darkest { background-color: #1D4321; } .text-neon-green { color: #B5F25B; } body { background-color: #FFFAF1; } .section-title { font-size: 1.875rem; margin-bottom: 24px; } .plans-cards-col { overflow: hidden; overflow-x: scroll; } .plans-wrapper { min-width:935px; } .plan-card { border: 2.5px solid var(--ns-green); width: 100%; max-width: 285px; } .plan-title { font-size: 1.25rem; line-height: 1.18; min-height: 30px; } .plan-desc { min-height: 70px; font-size:.875em; } .plan-card a { text-transform: none; background: transparent; margin:1em auto .25em; font-size:1.1875em; } .plan-card a:hover { background: transparent; } .plan-card.clubadv { padding-top:7.25em; } .plan-card.clubadv a{ margin-top:0; } .plan-card.clubadv .plan-title { min-height: 0; } .hiw { padding-bottom: 112px; overflow: hidden; } .hiw .row.bg-green-darkest { padding-bottom: 235px; } .hiw .step-img-wrapper { width: 50px; } .hiw .step-copy h3 { font-size: 1.25rem; line-height: 1; margin-bottom: 6px; } .hiw .food-img-wrapper { position: absolute; left: -34px; bottom: -13%; } .plans .cta-wrapper .cta-btn, .protein .cta-wrapper .cta-btn { background-color: #fff; } .plans .cta-wrapper .cta-btn:hover, .protein .cta-wrapper .cta-btn:hover { background-color: transparent; } .protein { padding: 12px 0 40px; } .protein .benefit-title { font-size: 1.5rem; line-height: 0.9; } .protein .benefit > p:last-child { line-height: 1.3; } .food-cards-col { overflow: hidden; overflow-x: scroll; } .foods .row.bg-white { padding: 24px 0 32px; } .foods .section-title { margin-bottom: 12px; } .foods .sub-header { font-size: 1.25rem; line-height: 1.3; margin-bottom: 31px; } .foods .food-cards-wrapper { min-width: 1200px; gap: 30px; } .foods .food-card { width: 100%; max-width: 270px; } .foods .cta-wrapper .view-menu-link, .testimonials .stories-link { font-size: 1.1875rem; } .foods .cta-wrapper .view-menu-link:hover, .testimonials .stories-link:hover { color: var(--ns-green); } .testimonials { padding: 32px 0; } .quote-card { margin-bottom: 18px; } .quote-card.yellow-bg { border-bottom: 4px solid #DFA500; background: #FFEDB9; color: #6F5200; } .quote-card.blue-bg { border-bottom: 4px solid #0D4054; background: #D0F2FF; color: #0D4054; } .quote-card.green-bg { border-bottom: 4px solid #006B00; background: #CEEBB8; color: #1D4321; } .quote-card .author-img-wrapper { width: 70%; } .quote-card .quote-copy { font-size: 1.375rem; line-height: 1.36; } .quote-card .stat-img-wrapper { max-width: 96px; min-width: 96px; } .quote-card .stat-copy h3 { font-size: 2.125rem; line-height: 1; } .quote-card .stat-copy p { font-size: 1.125rem; line-height: 1.3; } .testimonials .cta-wrapper { margin: 12px 0; } .mbg-closer .medal-circle { width: 43px; height: 43px; } .mbg-closer h3 { font-size: 1.375rem; line-height: 1.3; } .mbg-closer p { font-size: 1rem; line-height: 1.3; } .mbg-bottom.hide { display: none; } footer { background: #fff; } @media (max-width: 345px) { .hiw .food-img-wrapper { bottom: -6%; } } @media (min-width: 400px) { .hiw { padding-bottom: 120px; } .hiw .food-img-wrapper { bottom: -15%; } } @media (min-width: 450px) { .hiw { padding-bottom: 165px; } .hiw .food-img-wrapper { bottom: -21%; } } @media (min-width: 500px) { .hiw { padding-bottom: 215px; } .hiw .food-img-wrapper { bottom: -27%; } } @media (min-width: 545px) { .hiw { padding-bottom: 250px; } .hiw .food-img-wrapper { bottom: -35%; } } @media (min-width: 576px) { .hiw .food-img-wrapper { bottom: -32%; } .hiw .row.bg-green-darkest, .foods .row.bg-white { border-radius: 16px; } } @media (min-width: 768px) { .section-title { font-size: 2rem; } .hiw { overflow: visible; padding-bottom: 56px; } .hiw .food-img-wrapper { max-width: 476px; bottom: auto; top: 20px; left: -69px; } .hiw .row.bg-green-darkest { padding-bottom: 32px; } .quote-card .author-img-wrapper { width: 100%; max-width: 215px; min-width: 120px; } .mbg-closer .medal-circle { width: 68px; height: 68px; } .mbg-closer h3 { font-size: 2.375rem; } .mbg-closer p { font-size: 1.375rem; } } @media (min-width: 992px) { .plans-cards-col { overflow: visible; } .plans-wrapper { min-width: 900px; } .plan-card.clubadv{ max-width:none; padding-top:1em; width:720px; margin:0 auto; flex-direction: row; align-items: center; } .plan-card.clubadv .plan-desc{ min-height:auto; text-align:left; } .plan-card.clubadv a{ margin:0; } .hiw .section-title { margin-bottom: 32px; } .hiw .food-img-wrapper { transform: scale(1.2); left: 0; } .testimonials .small-quotes { gap: 24px; } .testimonials .quote-card.long-card { min-height: 543px; } .testimonials .quote-card.dt-card-ht { min-height: 199px; } .blue-card{ padding-top:37px; padding-bottom:37px; } } @media (min-width: 1200px) { .section-title { font-size: 2.875rem; margin-bottom: 40px; } .plans { padding-bottom: 56px; } .plans .cta-wrapper .cta-btn, .protein .cta-wrapper .cta-btn, .protein .benefit-title { font-size: 1.75rem; } .plan-card { max-width: 370px; } .plan-title { min-height: auto; } .plan-desc { min-height: 48px; } .hiw { padding-bottom: 100px; } .protein .benefit > p:last-child { font-size: 1.125rem; } .food-cards-col { overflow: visible; } .foods .sub-header { font-size: 1.75rem; margin-bottom: 0; } .foods .cta-wrapper .view-menu-link, .testimonials .stories-link { font-size: 1.375rem; } .foods .food-card { max-width: 258px; } .foods .food-cards-wrapper { min-width: auto; width: 100%; gap: 24px; margin: 49px 0; } .testimonials { padding: 40px 0; } .testimonials .section-title { margin-bottom: 48px; } .testimonials .small-quotes { gap: 30px; } .quote-card .quote-copy { font-size: 1.875rem; } .quote-card.yellow-bg { margin-bottom: 27px; } .quote-card.blue-bg { margin-bottom: 37px; } .testimonials .small-quotes .quote-card.blue-bg { margin-bottom: 18px; } .testimonials .quote-card.long-card { min-height: 599px; margin-bottom: 37px; } .testimonials .right-col { padding-left: 18px; } .testimonials .quote-card.dt-card-ht { min-height: auto; } .blue-card{ padding-top:30px; padding-bottom:30px; } } @media (min-width: 1440px) { .plans { padding-bottom: 80px; } .plans-wrapper { gap: 30px; } .hiw { padding-bottom: 120px; } .hiw .food-img-wrapper { transform: scale(1.3); left: 32px; } .foods .food-cards-wrapper { gap: 30px; } .blue-card{ padding-top:20px; padding-bottom:20px; } }