/** Shopify CDN: Minification failed
Line 929:0 All "@import" rules must come first
**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */
/* CSS from section stylesheet tags */
/* START_SECTION:twmp-blog (INDEX:51) */
/* ================================================================
twmp-journal — thin dark journal banner with latest article + CTA.
Source: index.html lines 2241-2285 (#journal section).
================================================================ */
.twmp-journal-root { isolation: isolate; }
.twmp-journal-root__bg {
position: relative;
overflow: hidden;
background: var(--twmp-journal-bg, #2c1810);
padding: 112px 16px 96px;
}
.twmp-journal-root__bgmedia {
position: absolute;
inset: 0;
pointer-events: none;
}
.twmp-journal-root__bgimg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.45) sepia(0.35) saturate(1.1);
}
.twmp-journal-root__inner {
position: relative;
max-width: 1280px;
margin: 0 auto;
padding: 0 0;
}
.twmp-journal-root__grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: center;
}
.twmp-journal-root__col-header { }
.twmp-journal-root__eyebrow {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--twmp-journal-eyebrow, #f8b036);
margin: 0 0 12px;
}
.twmp-journal-root__heading {
font-family: "League Spartan", sans-serif;
font-weight: 900;
font-size: 36px;
line-height: 1;
color: var(--twmp-journal-heading, #FFFFFF);
margin: 0 0 12px;
}
.twmp-journal-root__lede {
font-family: "League Spartan", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.375;
color: var(--twmp-journal-lede, rgba(255,255,255,0.7));
margin: 0;
}
.twmp-journal-root__post {
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
color: inherit;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.twmp-journal-root__post-img {
width: 112px;
height: 112px;
border-radius: 16px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 14px 34px rgba(0,0,0,0.4);
transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.twmp-journal-root__post-body {
flex: 1 1 0%;
min-width: 0;
}
.twmp-journal-root__post-meta {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(248,176,54,0.9);
margin: 0 0 8px;
}
.twmp-journal-root__post-title {
font-family: "League Spartan", sans-serif;
font-weight: 900;
font-size: 18px;
line-height: 1.1;
color: #FFFFFF;
margin: 0 0 8px;
transition: color 0.3s ease;
}
.twmp-journal-root__post-desc {
font-size: 14px;
line-height: 1.625;
color: rgba(255,255,255,0.75);
margin: 0;
}
.twmp-journal-root__cta-col { }
.twmp-journal-root__cta {
display: inline-flex;
align-items: center;
padding: 16px 28px;
border-radius: 12px;
background: var(--twmp-journal-cta-bg, #f8b036);
color: var(--twmp-journal-cta-fg, #ae373b);
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 16px;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 10px 28px rgba(248,176,54,0.45);
transition: background-color 0.3s ease;
}
.twmp-journal-root__cta:hover { background: #e09a0c; }
.twmp-journal-root__cta-icon {
margin-left: 8px;
height: 20px;
width: 20px;
position: relative;
top: -1px;
}
@media (hover: hover) {
.twmp-journal-root__post:hover { transform: translateY(-4px); }
.twmp-journal-root__post:hover .twmp-journal-root__post-img { box-shadow: 0 20px 50px rgba(44,24,16,0.18); }
.twmp-journal-root__post:hover .twmp-journal-root__post-title { color: #f8b036; }
}
@media (min-width: 640px) {
.twmp-journal-root__bg { padding-left: 24px; padding-right: 24px; }
.twmp-journal-root__eyebrow { font-size: 14px; }
.twmp-journal-root__heading { font-size: 48px; }
.twmp-journal-root__post-img { width: 128px; height: 128px; }
.twmp-journal-root__post-meta { font-size: 12px; }
.twmp-journal-root__post-title { font-size: 20px; }
}
@media (min-width: 1024px) {
.twmp-journal-root__bg { padding: 80px 32px; }
.twmp-journal-root__inner { padding: 0; }
.twmp-journal-root__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 40px;
}
.twmp-journal-root__col-header { grid-column: span 4 / span 4; }
.twmp-journal-root__post { grid-column: span 5 / span 5; gap: 24px; }
.twmp-journal-root__cta-col { grid-column: span 3 / span 3; justify-self: end; }
.twmp-journal-root__heading { font-size: 56px; }
.twmp-journal-root__lede { font-size: 18px; }
.twmp-journal-root__post-img { width: 144px; height: 144px; }
.twmp-journal-root__post-title { font-size: 24px; }
.twmp-journal-root__post-desc { font-size: 16px; }
}
@media (min-width: 1280px) {
.twmp-journal-root__grid { gap: 48px; }
.twmp-journal-root__heading { font-size: 64px; }
.twmp-journal-root__post-img { width: 160px; height: 160px; }
.twmp-journal-root__post-title { font-size: 28px; }
}
/* ================================================================
WAVE SYSTEM — same architecture as twmp-hero / twmp-stores.
================================================================ */
.twmp-journal-root.has-top-wave,
.twmp-journal-root.has-bottom-wave {
--twmp-mask-top: linear-gradient(black, black);
--twmp-mask-bot: linear-gradient(black, black);
}
.twmp-journal-root.has-top-wave { margin-top: -90px; }
.twmp-journal-root.has-top-wave .twmp-journal-root__bg { padding-top: calc(90px + 112px); }
.twmp-journal-root.has-bottom-wave .twmp-journal-root__bg { padding-bottom: calc(90px + 96px); }
@media (min-width: 1024px) {
.twmp-journal-root.has-top-wave .twmp-journal-root__bg { padding-top: calc(90px + 80px); }
.twmp-journal-root.has-bottom-wave .twmp-journal-root__bg { padding-bottom: calc(90px + 80px); }
}
.twmp-journal-root.has-top-wave .twmp-journal-root__bg,
.twmp-journal-root.has-bottom-wave .twmp-journal-root__bg {
-webkit-mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
-webkit-mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
-webkit-mask-position: 0 0, 0 90px, 0 100%;
mask-position: 0 0, 0 90px, 0 100%;
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat, no-repeat;
}
.twmp-journal-root.wave-top-1 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-journal-root.wave-bottom-1 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-journal-root.wave-top-2 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-journal-root.wave-bottom-2 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-journal-root.wave-top-3 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-journal-root.wave-bottom-3 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-journal-root.wave-top-4 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-journal-root.wave-bottom-4 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-journal-root.wave-top-5 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-journal-root.wave-bottom-5 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
/* END_SECTION:twmp-blog */
/* START_SECTION:twmp-difference (INDEX:53) */
/* ================================================================
twmp-difference — 3-card superfood explainer with blob masks.
Source: index.html lines 1090-1187. CSS ported verbatim, every
selector prefixed with .twmp-difference-root.
================================================================ */
.twmp-difference-root { isolation: isolate; }
.twmp-difference-root .sf-section{position:relative;padding:100px 28px 130px;
background:radial-gradient(circle at 85% 10%,#FFD56B 0%,transparent 45%),radial-gradient(circle at 10% 95%,#FF9DCB 0%,transparent 40%),linear-gradient(180deg,var(--twmp-diff-bg-a, #FFF4E0) 0%,var(--twmp-diff-bg-b, #FFF8E7) 100%);
overflow:visible;
color:var(--twmp-diff-text, #2B1810)}
.twmp-difference-root .sf-container{max-width:1200px;margin:0 auto;position:relative;z-index:2}
.twmp-difference-root .sf-eyebrow{display:inline-block;font-family:'League Spartan',sans-serif;font-weight:600;font-size:15px;
background:#2B1810;color:#FFE8C2;padding:10px 22px;
border-radius:30px 26px 32px 24px / 26px 32px 24px 30px;
transform:rotate(-2.5deg);margin-bottom:24px}
.twmp-difference-root .sf-section h2{font-family:'League Spartan',sans-serif;font-weight:800;font-size:clamp(44px,8vw,96px);line-height:.95;letter-spacing:-.03em;margin-bottom:18px;max-width:16ch;position:relative;z-index:10}
.twmp-difference-root .sf-section h2 .accent{display:inline-block;background:linear-gradient(120deg,var(--twmp-diff-accent, #FF6B35),#FF3D7F);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;transform:rotate(-1deg);padding-right:0.15em}
.twmp-difference-root .sf-squiggle{display:block;width:100%;max-width:180px;height:clamp(14px,1.8vw,26px);margin:8px 0 24px;color:var(--twmp-diff-accent, #FF6B35)}
.twmp-difference-root .sf-lede{font-size:clamp(22px,3vw,34px);font-weight:700;max-width:36ch;margin-bottom:72px;color:#4A2C1A}
.twmp-difference-root .sf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 36px;margin-bottom:80px;max-width:1100px}
@media(min-width:1024px){.twmp-difference-root .sf-grid{gap:48px 44px;max-width:1200px}}
.twmp-difference-root .sf-card{position:relative;padding:8px 10px 12px}
.twmp-difference-root .sf-card:nth-child(1){transform:rotate(-1.4deg)}
.twmp-difference-root .sf-card:nth-child(2){transform:rotate(1deg) translateY(24px)}
.twmp-difference-root .sf-card:nth-child(3){transform:rotate(-.6deg)}
.twmp-difference-root .sf-img-wrap{position:relative;aspect-ratio:1/1;margin-bottom:28px}
@media(min-width:1024px){.twmp-difference-root .sf-img-wrap{margin-bottom:32px}}
.twmp-difference-root .sf-blob-bg{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);z-index:0}
.twmp-difference-root .sf-card:nth-child(1) .sf-blob-bg path{fill:#FFE066}
.twmp-difference-root .sf-card:nth-child(2) .sf-blob-bg path{fill:#FFB4D8}
.twmp-difference-root .sf-card:nth-child(3) .sf-blob-bg path{fill:#A8E6A1}
.twmp-difference-root .sf-img-mask{position:relative;width:100%;height:100%;z-index:1}
.twmp-difference-root .sf-img-mask img{width:100%;height:100%;object-fit:cover;display:block}
.twmp-difference-root .sf-card:nth-child(1) .sf-img-mask img{-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.twmp-difference-root .sf-card:nth-child(2) .sf-img-mask img{-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.twmp-difference-root .sf-card:nth-child(3) .sf-img-mask img{-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.twmp-difference-root .sf-card p{font-family:'League Spartan',sans-serif;font-size:22px;line-height:1.35;font-weight:700;color:var(--twmp-diff-text, #2B1810);padding:0 8px}
@media(min-width:1024px){.twmp-difference-root .sf-card p{font-size:24px;padding:0 12px}}
.twmp-difference-root .sf-card .sf-num{position:absolute;top:-8px;left:-4px;width:48px;height:48px;background:#2B1810;color:#FFE066;display:grid;place-items:center;font-family:'League Spartan',sans-serif;font-weight:800;font-size:20px;border-radius:54% 46% 48% 52% / 48% 54% 46% 52%;z-index:3;transform:rotate(-8deg)}
.twmp-difference-root .sf-closer{text-align:center;padding-top:30px}
.twmp-difference-root .sf-closer .sf-big{font-family:'League Spartan',sans-serif;font-weight:800;font-size:clamp(42px,7vw,80px);line-height:1;letter-spacing:-.02em;margin-bottom:18px;display:inline-block;transform:rotate(-1.5deg)}
.twmp-difference-root .sf-closer .sf-wink{display:inline-block;font-family:'League Spartan',sans-serif;font-style:italic;font-weight:600;font-size:clamp(22px,3vw,32px);color:#FF3D7F;transform:rotate(2deg)}
@media (max-width:860px){
.twmp-difference-root .sf-section{padding:60px 20px 80px}
.twmp-difference-root .sf-grid{grid-template-columns:1fr;gap:54px;margin-bottom:60px}
.twmp-difference-root .sf-card:nth-child(2){transform:rotate(1deg)}
}
/* ================================================================
WAVE SYSTEM — same architecture as twmp-hero / twmp-stores.
Mask is applied to .sf-section (which holds the bg color).
================================================================ */
.twmp-difference-root.has-top-wave,
.twmp-difference-root.has-bottom-wave {
--twmp-mask-top: linear-gradient(black, black);
--twmp-mask-bot: linear-gradient(black, black);
}
.twmp-difference-root.has-top-wave { margin-top: -90px; }
.twmp-difference-root.has-top-wave .sf-section { padding-top: calc(90px + 100px); }
.twmp-difference-root.has-bottom-wave .sf-section { padding-bottom: calc(90px + 130px); }
@media (max-width: 860px) {
.twmp-difference-root.has-top-wave .sf-section { padding-top: calc(90px + 60px); }
.twmp-difference-root.has-bottom-wave .sf-section { padding-bottom: calc(90px + 80px); }
}
.twmp-difference-root.has-top-wave .sf-section,
.twmp-difference-root.has-bottom-wave .sf-section {
-webkit-mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
-webkit-mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
-webkit-mask-position: 0 0, 0 90px, 0 100%;
mask-position: 0 0, 0 90px, 0 100%;
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat, no-repeat;
}
.twmp-difference-root.wave-top-1 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-difference-root.wave-bottom-1 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-difference-root.wave-top-2 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-difference-root.wave-bottom-2 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-difference-root.wave-top-3 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-difference-root.wave-bottom-3 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-difference-root.wave-top-4 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-difference-root.wave-bottom-4 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-difference-root.wave-top-5 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-difference-root.wave-bottom-5 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
/* END_SECTION:twmp-difference */
/* START_SECTION:twmp-emailcapture (INDEX:54) */
/* ================================================================
twmp-cta-quiz — final CTA with primary/secondary buttons + email capture.
Source: index.html lines 2206-2236 (FINAL CTA section).
================================================================ */
.twmp-cta-quiz-root { isolation: isolate; }
.twmp-cta-quiz-root__bg {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, var(--twmp-cta-quiz-bg-start, #FFE8C8) 0%, #FFF4DD 30%, #FFF8E7 60%, var(--twmp-cta-quiz-bg-end, #E8F3E0) 100%);
padding: 80px 0 112px;
}
.twmp-cta-quiz-root__inner {
max-width: 896px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
.twmp-cta-quiz-root__heading {
font-family: "League Spartan", sans-serif;
font-weight: 900;
font-size: 48px;
line-height: 1.1;
margin: 0 0 24px;
color: var(--twmp-cta-quiz-heading, #ae373b);
}
.twmp-cta-quiz-root__subhead {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 18px;
margin: 0 0 16px;
color: var(--twmp-cta-quiz-subhead, #03793e);
}
.twmp-cta-quiz-root__lede {
font-size: 20px;
margin: 0 auto 48px;
max-width: 576px;
color: var(--twmp-cta-quiz-lede, #6B5E53);
}
.twmp-cta-quiz-root__ctas {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
.twmp-cta-quiz-root__primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 20px 40px;
background: var(--twmp-cta-quiz-primary-bg, #f8b036);
color: var(--twmp-cta-quiz-primary-text, #ae373b);
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 18px;
border-radius: 9999px;
text-decoration: none;
width: 100%;
box-shadow: 0 8px 30px rgba(248, 176, 54, 0.4);
transition: background-color 200ms ease;
}
.twmp-cta-quiz-root__primary:hover { background: #e09a0c; }
.twmp-cta-quiz-root__primary-icon {
margin-left: 8px;
width: 20px;
height: 20px;
display: inline-block;
}
.twmp-cta-quiz-root__secondary {
display: inline-flex;
align-items: center;
color: var(--twmp-cta-quiz-secondary, #03793e);
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 18px;
text-decoration: none;
text-underline-offset: 4px;
}
.twmp-cta-quiz-root__secondary:hover { text-decoration: underline; }
.twmp-cta-quiz-root__secondary-icon {
margin-left: 6px;
width: 16px;
height: 16px;
display: inline-block;
}
.twmp-cta-quiz-root__email {
margin: 64px auto 0;
max-width: 512px;
}
.twmp-cta-quiz-root__email-heading {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 16px;
margin: 0 0 16px;
color: var(--twmp-cta-quiz-heading, #ae373b);
}
.twmp-cta-quiz-root__form {
display: flex;
gap: 8px;
}
.twmp-cta-quiz-root__input {
flex: 1;
padding: 16px 20px;
border-radius: 12px;
border: 1px solid #F0DFC0;
font-size: 16px;
font-family: "Outfit", sans-serif;
color: #ae373b;
background: #ffffff;
outline: none;
transition: box-shadow 150ms ease, border-color 150ms ease;
min-width: 0;
}
.twmp-cta-quiz-root__input:focus {
border-color: transparent;
box-shadow: 0 0 0 2px #f8b036;
}
.twmp-cta-quiz-root__submit {
color: #ffffff;
background: var(--twmp-cta-quiz-submit-bg, #5a2a18);
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 16px;
padding: 16px 24px;
border-radius: 12px;
border: none;
cursor: pointer;
white-space: nowrap;
transition: opacity 150ms ease;
}
.twmp-cta-quiz-root__submit:hover { opacity: 0.92; }
.twmp-cta-quiz-root__disclaimer {
font-size: 12px;
margin: 8px 0 0;
color: var(--twmp-cta-quiz-lede, #6B5E53);
}
.twmp-cta-quiz-root__form-message {
font-family: "Outfit", sans-serif;
font-size: 14px;
margin: 12px 0 0;
text-align: center;
color: var(--twmp-cta-quiz-subhead, #03793e);
}
.twmp-cta-quiz-root__form-error {
font-family: "Outfit", sans-serif;
font-size: 14px;
margin: 12px 0 0;
text-align: center;
color: #ae373b;
}
@media (min-width: 640px) {
.twmp-cta-quiz-root__inner { padding: 0 32px; }
.twmp-cta-quiz-root__heading { font-size: 60px; }
.twmp-cta-quiz-root__ctas { flex-direction: row; }
.twmp-cta-quiz-root__primary { width: auto; }
}
@media (min-width: 1024px) {
.twmp-cta-quiz-root__bg { padding: 128px 0 160px; }
.twmp-cta-quiz-root__inner { padding: 0 40px; }
.twmp-cta-quiz-root__heading { font-size: 96px; }
.twmp-cta-quiz-root__subhead { font-size: 20px; }
}
/* ================================================================
WAVE SYSTEM — same architecture as twmp-hero / twmp-stores.
================================================================ */
.twmp-cta-quiz-root.has-top-wave,
.twmp-cta-quiz-root.has-bottom-wave {
--twmp-mask-top: linear-gradient(black, black);
--twmp-mask-bot: linear-gradient(black, black);
}
.twmp-cta-quiz-root.has-top-wave { margin-top: -90px; }
.twmp-cta-quiz-root.has-top-wave .twmp-cta-quiz-root__bg { padding-top: calc(90px + 80px); }
.twmp-cta-quiz-root.has-bottom-wave .twmp-cta-quiz-root__bg { padding-bottom: calc(90px + 112px); }
@media (min-width: 1024px) {
.twmp-cta-quiz-root.has-top-wave .twmp-cta-quiz-root__bg { padding-top: calc(90px + 128px); }
.twmp-cta-quiz-root.has-bottom-wave .twmp-cta-quiz-root__bg { padding-bottom: calc(90px + 160px); }
}
.twmp-cta-quiz-root.has-top-wave .twmp-cta-quiz-root__bg,
.twmp-cta-quiz-root.has-bottom-wave .twmp-cta-quiz-root__bg {
-webkit-mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
-webkit-mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
-webkit-mask-position: 0 0, 0 90px, 0 100%;
mask-position: 0 0, 0 90px, 0 100%;
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat, no-repeat;
}
.twmp-cta-quiz-root.wave-top-1 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-cta-quiz-root.wave-bottom-1 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-cta-quiz-root.wave-top-2 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-cta-quiz-root.wave-bottom-2 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-cta-quiz-root.wave-top-3 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-cta-quiz-root.wave-bottom-3 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-cta-quiz-root.wave-top-4 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-cta-quiz-root.wave-bottom-4 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-cta-quiz-root.wave-top-5 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-cta-quiz-root.wave-bottom-5 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
/* END_SECTION:twmp-emailcapture */
/* START_SECTION:twmp-faq (INDEX:55) */
/* ================================================================
twmp-faq — accordion FAQ list. Self-contained, no shared deps.
Source: index.html lines 2115-2201 (#faq section).
================================================================ */
.twmp-faq-root { isolation: isolate; }
.twmp-faq-root__bg {
position: relative;
background: var(--twmp-faq-bg, #FFF8E7);
padding: 80px 0 96px;
overflow: hidden;
}
.twmp-faq-root__inner {
max-width: 896px;
margin: 0 auto;
padding: 0 16px;
}
.twmp-faq-root__head {
text-align: center;
margin-bottom: 56px;
}
.twmp-faq-root__eyebrow {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 16px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--twmp-faq-eyebrow, #f8b036);
margin: 0 0 16px;
}
.twmp-faq-root__heading {
font-family: "League Spartan", sans-serif;
font-weight: 900;
font-size: 36px;
line-height: 1.05;
color: var(--twmp-faq-heading, #ae373b);
margin: 0;
}
.twmp-faq-root__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.twmp-faq-root__item {
border: 1px solid var(--twmp-faq-border, #F0DFC0);
border-radius: 12px;
overflow: hidden;
background: transparent;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.twmp-faq-root__item:hover { border-color: #e09a0c; }
.twmp-faq-root__item.is-open {
border-color: #f8b036;
box-shadow: 0 4px 20px rgba(248, 176, 54, 0.1);
}
.twmp-faq-root__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px;
text-align: left;
background: transparent;
border: 0;
cursor: pointer;
font: inherit;
color: inherit;
transition: background-color 150ms ease;
}
.twmp-faq-root__trigger:hover { background: #FFF8E7; }
.twmp-faq-root__question {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 18px;
color: #ae373b;
padding-right: 16px;
}
.twmp-faq-root__chevron {
width: 20px;
height: 20px;
color: #6B5E53;
flex-shrink: 0;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.twmp-faq-root__item.is-open .twmp-faq-root__chevron { transform: rotate(180deg); }
.twmp-faq-root__answer {
max-height: 0;
overflow: hidden;
padding: 0 24px;
transition: max-height 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.twmp-faq-root__item.is-open .twmp-faq-root__answer { max-height: 600px; }
.twmp-faq-root__answer-text {
color: #6B5E53;
font-size: 16px;
line-height: 1.625;
padding-bottom: 24px;
margin: 0;
}
.twmp-faq-root__answer-text > p { margin: 0 0 1em; }
.twmp-faq-root__answer-text > p:last-child { margin-bottom: 0; }
@media (min-width: 640px) {
.twmp-faq-root__inner { padding: 0 24px; }
.twmp-faq-root__heading { font-size: 60px; }
}
@media (min-width: 1024px) {
.twmp-faq-root__bg { padding: 128px 0 144px; }
.twmp-faq-root__inner { padding: 0 32px; }
.twmp-faq-root__head { margin-bottom: 80px; }
.twmp-faq-root__heading { font-size: 88px; }
.twmp-faq-root__trigger { padding: 28px; }
.twmp-faq-root__question { font-size: 20px; }
.twmp-faq-root__answer { padding: 0 28px; }
.twmp-faq-root__answer-text { font-size: 18px; padding-bottom: 28px; }
}
/* ================================================================
WAVE SYSTEM — same architecture as twmp-hero/twmp-stores. Composable
top + bottom masks via CSS variables. bottom-N is top-N traversed in
reverse so adjacent sections meet on the same curve.
================================================================ */
.twmp-faq-root.has-top-wave,
.twmp-faq-root.has-bottom-wave {
--twmp-mask-top: linear-gradient(black, black);
--twmp-mask-bot: linear-gradient(black, black);
}
.twmp-faq-root.has-top-wave { margin-top: -90px; }
.twmp-faq-root.has-top-wave .twmp-faq-root__bg { padding-top: calc(90px + 80px); }
.twmp-faq-root.has-bottom-wave .twmp-faq-root__bg { padding-bottom: calc(90px + 96px); }
@media (min-width: 1024px) {
.twmp-faq-root.has-top-wave .twmp-faq-root__bg { padding-top: calc(90px + 128px); }
.twmp-faq-root.has-bottom-wave .twmp-faq-root__bg { padding-bottom: calc(90px + 144px); }
}
.twmp-faq-root.has-top-wave .twmp-faq-root__bg,
.twmp-faq-root.has-bottom-wave .twmp-faq-root__bg {
-webkit-mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
-webkit-mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
-webkit-mask-position: 0 0, 0 90px, 0 100%;
mask-position: 0 0, 0 90px, 0 100%;
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat, no-repeat;
}
.twmp-faq-root.wave-top-1 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-faq-root.wave-bottom-1 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-faq-root.wave-top-2 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-faq-root.wave-bottom-2 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-faq-root.wave-top-3 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-faq-root.wave-bottom-3 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-faq-root.wave-top-4 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-faq-root.wave-bottom-4 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-faq-root.wave-top-5 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-faq-root.wave-bottom-5 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
/* END_SECTION:twmp-faq */
/* START_SECTION:twmp-healthy (INDEX:56) */
/* ================================================================
twmp-healthy — subscribe & save explainer.
Source: index.html lines 2041-2110.
================================================================ */
.twmp-healthy-root { isolation: isolate; }
.twmp-healthy-root__bg {
position: relative;
overflow: hidden;
background: var(--twmp-healthy-bg, #FFF4DD);
padding: 80px 0 96px;
}
.twmp-healthy-root__bg-image {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.twmp-healthy-root__bg-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
opacity: var(--twmp-healthy-bg-opacity, 0.06);
}
.twmp-healthy-root__inner {
position: relative;
z-index: 1;
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
}
.twmp-healthy-root__grid {
display: grid;
grid-template-columns: 1fr;
gap: 56px;
align-items: center;
}
/* Image side */
.twmp-healthy-root__image-wrap {
position: relative;
max-width: 420px;
margin: 0 auto;
width: 100%;
}
.twmp-healthy-root__lifestyle-frame {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 16px;
overflow: hidden;
}
.twmp-healthy-root__lifestyle {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.twmp-healthy-root__callout {
position: absolute;
bottom: -16px;
right: -16px;
background: var(--twmp-healthy-callout-bg, #f8b036);
border-radius: 16px;
padding: 20px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.twmp-healthy-root__callout-main {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 30px;
color: #ffffff;
margin: 0;
line-height: 1;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.twmp-healthy-root__callout-sub {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
margin: 4px 0 0;
line-height: 1.2;
}
/* Content side */
.twmp-healthy-root__eyebrow {
font-family: "League Spartan", sans-serif;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--twmp-healthy-eyebrow, #f8b036);
margin: 0 0 12px;
}
.twmp-healthy-root__heading {
font-family: "League Spartan", sans-serif;
font-size: 36px;
font-weight: 900;
color: var(--twmp-healthy-heading, #ae373b);
line-height: 1.05;
margin: 0 0 16px;
}
.twmp-healthy-root__subhead {
font-family: "League Spartan", sans-serif;
font-size: 24px;
font-weight: 800;
color: var(--twmp-healthy-subhead, #03793e);
margin: 0 0 24px;
line-height: 1.2;
}
.twmp-healthy-root__lede {
font-family: "Outfit", sans-serif;
font-size: 18px;
color: #6b6b6b;
line-height: 1.625;
margin: 0 0 40px;
}
/* Benefits */
.twmp-healthy-root__benefits {
margin: 0 0 48px;
display: flex;
flex-direction: column;
gap: 24px;
}
.twmp-healthy-root__benefit {
display: flex;
align-items: center;
gap: 16px;
}
.twmp-healthy-root__benefit-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.twmp-healthy-root__benefit-icon img {
width: 56px;
height: 56px;
display: block;
object-fit: contain;
}
.twmp-healthy-root__benefit-title {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 16px;
color: #ae373b;
margin: 0 0 2px;
line-height: 1.2;
}
.twmp-healthy-root__benefit-sub {
font-family: "Outfit", sans-serif;
font-size: 14px;
color: #6b6b6b;
margin: 0;
line-height: 1.4;
}
/* CTA */
.twmp-healthy-root__cta {
display: inline-flex;
align-items: center;
padding: 16px 36px;
background: var(--twmp-healthy-cta-bg, #f8b036);
color: var(--twmp-healthy-cta-text, #ae373b);
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 16.8px;
border-radius: 9999px;
min-height: 52px;
text-decoration: none;
box-shadow: 0 8px 30px rgba(248, 176, 54, 0.4);
transition: background-color 200ms ease, transform 200ms ease;
}
.twmp-healthy-root__cta:hover {
background: #e09a0c;
transform: translateY(-2px);
}
.twmp-healthy-root__cta-arrow {
margin-left: 8px;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
}
/* Tablet+ */
@media (min-width: 640px) {
.twmp-healthy-root__inner { padding: 0 24px; }
.twmp-healthy-root__heading { font-size: 60px; }
}
/* Desktop */
@media (min-width: 1024px) {
.twmp-healthy-root__bg { padding: 128px 0 144px; }
.twmp-healthy-root__inner { padding: 0 32px; }
.twmp-healthy-root__image-wrap { max-width: none; margin: 0; }
.twmp-healthy-root__grid {
grid-template-columns: 1fr 1fr;
gap: 96px;
}
.twmp-healthy-root__callout {
bottom: -24px;
right: -24px;
padding: 24px;
}
.twmp-healthy-root__callout-main { font-size: 36px; }
.twmp-healthy-root__heading { font-size: 88px; }
.twmp-healthy-root__subhead { font-size: 30px; }
.twmp-healthy-root__lede { font-size: 20px; }
.twmp-healthy-root__cta {
padding: 20px 40px;
font-size: 18px;
border-radius: 12px;
min-height: 0;
}
}
/* ================================================================
WAVE SYSTEM — same architecture as twmp-hero / twmp-stores.
================================================================ */
.twmp-healthy-root.has-top-wave,
.twmp-healthy-root.has-bottom-wave {
--twmp-mask-top: linear-gradient(black, black);
--twmp-mask-bot: linear-gradient(black, black);
}
.twmp-healthy-root.has-top-wave { margin-top: -90px; }
.twmp-healthy-root.has-top-wave .twmp-healthy-root__bg { padding-top: calc(90px + 80px); }
.twmp-healthy-root.has-bottom-wave .twmp-healthy-root__bg { padding-bottom: calc(90px + 96px); }
@media (min-width: 1024px) {
.twmp-healthy-root.has-top-wave .twmp-healthy-root__bg { padding-top: calc(90px + 128px); }
.twmp-healthy-root.has-bottom-wave .twmp-healthy-root__bg { padding-bottom: calc(90px + 144px); }
}
.twmp-healthy-root.has-top-wave .twmp-healthy-root__bg,
.twmp-healthy-root.has-bottom-wave .twmp-healthy-root__bg {
-webkit-mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
-webkit-mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
-webkit-mask-position: 0 0, 0 90px, 0 100%;
mask-position: 0 0, 0 90px, 0 100%;
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat, no-repeat;
}
.twmp-healthy-root.wave-top-1 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-healthy-root.wave-bottom-1 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-healthy-root.wave-top-2 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-healthy-root.wave-bottom-2 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-healthy-root.wave-top-3 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-healthy-root.wave-bottom-3 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-healthy-root.wave-top-4 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-healthy-root.wave-bottom-4 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-healthy-root.wave-top-5 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-healthy-root.wave-bottom-5 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
/* END_SECTION:twmp-healthy */
/* START_SECTION:twmp-hero (INDEX:57) */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@600;700;800;900&family=Outfit:wght@400;500;600;700&display=swap');
.twmp-hero-root { font-size: 16px; /* anchor rem against parent theme that may set html font-size: 62.5% */
/* JUGO palette - matched exactly to live Vercel site CSS tokens */
--orange: #f8b036; /* primary brand */
--orange-dark: #e09a0c;
--coral: #fe5a40;
--blue: #396fd8;
--green: #03793e;
--green-bright: #0ca850;
--green-dark: #025d30;
--brown-red: #ae373b; /* body text color - NEVER pure black */
--brown-deep: #5a2a18;
--cream: #FFF8E7;
--orange-light: #FFF4DD;
--white: #ffffff;
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }
/* ================================================================
HERO SHELL
================================================================ */
.twmp-hero-root .hero {
position: relative;
isolation: isolate;
min-height: 100svh;
overflow: hidden;
background: var(--orange);
padding: clamp(24px, 3vh, 48px) 0 clamp(24px, 3vh, 48px);
}
/* 5% more tint on bg to improve readability */
.twmp-hero-root .hero__bg::after {
content: "";
position: absolute;
inset: 0;
background: rgba(90, 42, 24, 0.07);
pointer-events: none;
}
/* Background ribbon illustration (nano-banana-pro generated) */
.twmp-hero-root .hero__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
animation: fade-in 800ms var(--ease-out-quint) 50ms forwards;
}
.twmp-hero-root .hero__bg picture, .twmp-hero-root .hero__bg img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
@keyframes fade-in { to { opacity: 1; } }
/* ================================================================
HERO INNER - centered single column
================================================================ */
.twmp-hero-root .hero__inner {
position: relative;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 40px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* ================================================================
EYEBROW - uppercase tracked, slight rotation (JUGO brand signature)
================================================================ */
.twmp-hero-root .eyebrow {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: clamp(12.48px, 0.95vw, 14.72px);
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.96);
text-shadow:
0 1px 2px rgba(90, 42, 24, 0.4),
0 2px 6px rgba(90, 42, 24, 0.22);
margin: 0 0 clamp(20px, 2.5vh, 28px);
transform: rotate(-1.5deg);
opacity: 0;
animation: fade-up 700ms var(--ease-out-quint) 250ms forwards;
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(12px) rotate(-1.5deg); }
to { opacity: 1; transform: translateY(0) rotate(-1.5deg); }
}
/* ================================================================
HEADLINE - League Spartan 800, ALL CAPS, BIG
================================================================ */
.twmp-hero-root .headline {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: clamp(44px, 8vw, 112px);
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--white);
margin: 0 0 clamp(16px, 2vh, 24px);
text-shadow:
0 1px 2px rgba(90, 42, 24, 0.45),
0 3px 10px rgba(90, 42, 24, 0.28),
0 6px 22px rgba(90, 42, 24, 0.18);
max-width: 16ch;
}
.twmp-hero-root .headline > span {
display: block;
opacity: 0;
transform: translateY(18px);
animation: reveal 900ms var(--ease-out-quint) forwards;
}
.twmp-hero-root .headline .l1 { animation-delay: 400ms; }
.twmp-hero-root .headline .l2 { animation-delay: 550ms; }
.twmp-hero-root .headline .accent {
color: var(--brown-deep);
text-shadow:
0 1px 2px rgba(248, 176, 54, 0.7),
0 3px 10px rgba(248, 176, 54, 0.42),
0 6px 22px rgba(248, 176, 54, 0.25);
}
@keyframes reveal {
to { opacity: 1; transform: translateY(0); }
}
/* ================================================================
COMPOSITION - 4 jars in a centered horizontal row + scattered gummies
================================================================ */
.twmp-hero-root .composition {
position: relative;
width: 100%;
max-width: 1300px;
margin: 0 auto clamp(8px, 1vh, 12.8px);
aspect-ratio: 16 / 5;
}
.twmp-hero-root .jars-row {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
gap: clamp(4px, 1vw, 12px);
}
.twmp-hero-root .jar {
position: relative;
flex: 0 0 auto;
user-select: none;
filter: drop-shadow(0 14px 22px rgba(90, 42, 24, 0.32));
will-change: transform, opacity;
opacity: 0;
transform: translateY(24px);
animation: jar-rise 900ms var(--ease-out-quint) forwards;
}
.twmp-hero-root .jar img {
width: 100%;
height: auto;
display: block;
}
@keyframes jar-rise {
to { opacity: 1; transform: translateY(0); }
}
/* Jar sizing - all 4 equal, larger per feedback (32% was 27%) */
/* Jars are STATIC - no idle animation per user feedback */
.twmp-hero-root .jar--energy { width: 32%; animation: jar-rise 900ms var(--ease-out-quint) 650ms forwards; }
.twmp-hero-root .jar--focus { width: 32%; animation: jar-rise 900ms var(--ease-out-quint) 700ms forwards; }
.twmp-hero-root .jar--beauty { width: 32%; animation: jar-rise 900ms var(--ease-out-quint) 750ms forwards; }
.twmp-hero-root .jar--kids { width: 32%; animation: jar-rise 900ms var(--ease-out-quint) 800ms forwards; }
/* ================================================================
GUMMIES - varied sizes, smart placement, some overlapping text
================================================================ */
.twmp-hero-root .gummy {
position: absolute;
user-select: none;
pointer-events: none;
filter: drop-shadow(0 8px 12px rgba(90, 42, 24, 0.32));
opacity: 0;
will-change: transform, opacity;
--tilt: 0deg;
animation:
gummy-drop 850ms var(--ease-spring) var(--enter-delay, 1100ms) forwards,
gummy-bob var(--bob-dur, 4.5s) ease-in-out var(--bob-delay, 2200ms) infinite;
}
.twmp-hero-root .gummy img { width: 100%; height: auto; display: block; }
@keyframes gummy-drop {
0% { opacity: 0; transform: translateY(-28px) rotate(calc(var(--tilt) * 1.4)) scale(0.7); }
65% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) rotate(var(--tilt)) scale(1); }
}
@keyframes gummy-bob {
0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
50% { transform: translateY(-7px) rotate(calc(var(--tilt) + 2deg)); }
}
/* In-composition gummies - scattered, asymmetric, wide size range (40px -> 128px) */
.twmp-hero-root .gummy--g1 { width: 77px; bottom: -4%; left: 2%; z-index: 5; --tilt: -28deg; --enter-delay: 1100ms; --bob-dur: 3.2s; --bob-delay: 1900ms; animation-name: gummy-drop, gum-float; }
.twmp-hero-root .gummy--g2 { width: 40px; bottom: 52%; left: 19%; z-index: 6; --tilt: 24deg; --enter-delay: 1250ms; --bob-dur: 2.9s; --bob-delay: 2100ms; animation-name: gummy-drop, gum-wobble; }
.twmp-hero-root .gummy--g3 { width: 72px; bottom: 22%; left: 46%; z-index: 7; --tilt: -12deg; --enter-delay: 1400ms; --bob-dur: 3.6s; --bob-delay: 2300ms; animation-name: gummy-drop, gum-pulse; }
.twmp-hero-root .gummy--g4 { width: 96px; bottom: 44%; right: 12%; z-index: 6; --tilt: 18deg; --enter-delay: 1550ms; --bob-dur: 3.1s; --bob-delay: 2500ms; animation-name: gummy-drop, gum-drift; }
.twmp-hero-root .gummy--g5 { width: 54px; bottom: 6%; right: 34%; z-index: 5; --tilt: -20deg; --enter-delay: 1700ms; --bob-dur: 3.4s; --bob-delay: 2700ms; animation-name: gummy-drop, gum-sway; }
/* Per-gummy idle animations - balanced middle ground (~7-8px travel) */
@keyframes gum-float { 0%,100% { transform: translateY(0) rotate(var(--tilt, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--tilt, 0deg)); } }
@keyframes gum-wobble { 0%,100% { transform: translateY(0) rotate(calc(var(--tilt, 0deg) - 3deg)); } 50% { transform: translateY(-7px) rotate(calc(var(--tilt, 0deg) + 3deg)); } }
@keyframes gum-pulse { 0%,100% { transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); } 50% { transform: translateY(-7px) rotate(var(--tilt, 0deg)) scale(1.05); } }
@keyframes gum-drift { 0%,100% { transform: translate(0,0) rotate(var(--tilt, 0deg)); } 33% { transform: translate(4px,-6px) rotate(calc(var(--tilt, 0deg) + 2deg)); } 66% { transform: translate(-4px,-7px) rotate(calc(var(--tilt, 0deg) - 2deg)); } }
@keyframes gum-sway { 0%,100% { transform: translateX(-4px) rotate(calc(var(--tilt, 0deg) - 3deg)); } 50% { transform: translateX(6px) translateY(-6px) rotate(calc(var(--tilt, 0deg) + 3deg)); } }
/* Hero-floater gummies - positioned OVER the headline for 3D depth */
.twmp-hero-root .hero__floaters {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
max-width: 1280px;
margin: 0 auto;
}
.twmp-hero-root .gummy-floater {
position: absolute;
user-select: none;
filter: drop-shadow(0 12px 14px rgba(90, 42, 24, 0.38));
opacity: 0;
--tilt: 0deg;
animation:
gummy-drop 900ms var(--ease-spring) var(--enter-delay, 1500ms) forwards,
gummy-bob var(--bob-dur, 5s) ease-in-out var(--bob-delay, 2700ms) infinite;
}
.twmp-hero-root .gummy-floater img { width: 100%; height: auto; display: block; }
/* Big one touching the headline from the left side - sized up */
.twmp-hero-root .gummy-floater--big {
width: 108px;
top: 13%;
left: 16%;
--tilt: -14deg;
--enter-delay: 1500ms;
--bob-dur: 5.2s;
}
/* Small one touching the right side of the headline - sized up */
.twmp-hero-root .gummy-floater--small {
width: 72px;
top: 8%;
right: 18%;
--tilt: 18deg;
--enter-delay: 1650ms;
--bob-dur: 4.8s;
}
/* ================================================================
CTA - green pill (matches live site exactly)
================================================================ */
.twmp-hero-root .cta {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: clamp(16.8px, 1.25vw, 20px);
letter-spacing: 0.08em;
padding: clamp(16px, 1.6vh, 20.8px) clamp(36px, 4vw, 64px);
background: var(--green);
color: var(--white);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
border: none;
border-radius: 9999px;
text-decoration: none;
cursor: pointer;
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow: 0 6px 18px rgba(2, 70, 35, 0.28);
transition: transform 220ms var(--ease-out-quint),
box-shadow 220ms var(--ease-out-quint);
margin-top: clamp(16px, 2.5vh, 32px);
margin-bottom: clamp(16px, 1.5vh, 24px);
opacity: 0;
animation: fade-up-simple 700ms var(--ease-out-quint) 950ms forwards;
}
@keyframes fade-up-simple {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.twmp-hero-root .cta .arrow { display: inline-block; transition: transform 240ms var(--ease-spring); }
.twmp-hero-root .cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(248, 176, 54, 0.45);
}
.twmp-hero-root .cta:hover .arrow { transform: translateX(4px); }
.twmp-hero-root .cta::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%);
transform: translateX(-100%);
transition: transform 650ms var(--ease-out-quint);
z-index: -1;
}
.twmp-hero-root .cta:hover::after { transform: translateX(100%); }
.twmp-hero-root .cta:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85),
0 6px 18px rgba(2, 70, 35, 0.3);
}
/* ================================================================
TRUST LINE - small, white, single line
================================================================ */
.twmp-hero-root .trust {
font-family: "Outfit", sans-serif;
font-weight: 600;
font-size: clamp(12.48px, 0.9vw, 14.08px);
letter-spacing: 0.02em;
color: var(--white);
text-shadow:
0 1px 2px rgba(90, 42, 24, 0.4),
0 2px 6px rgba(90, 42, 24, 0.22);
margin: 0;
opacity: 0;
animation: fade-up-simple 700ms var(--ease-out-quint) 1100ms forwards;
}
.twmp-hero-root .trust .dot {
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--white);
margin: 0 9.6px;
vertical-align: middle;
opacity: 0.7;
}
/* ================================================================
MOBILE - fit in one viewport, compress jar row
================================================================ */
@media (max-width: 1023px) {
.twmp-hero-root .composition { aspect-ratio: 16 / 9; max-width: 100%; }
.twmp-hero-root .jar--energy, .twmp-hero-root .jar--beauty, .twmp-hero-root .jar--kids { width: 23%; }
.twmp-hero-root .jar--focus { width: 26%; }
.twmp-hero-root .gummy--g1 { width: 50px; left: 8%; }
.twmp-hero-root .gummy--g3 { width: 58px; left: 46%; }
.twmp-hero-root .gummy--g5 { width: 48px; right: 8%; }
.twmp-hero-root .gummy-floater--big { width: 56px; top: 10%; left: 6%; }
.twmp-hero-root .gummy-floater--small { width: 34px; top: 6%; right: 8%; }
}
/* ===========================================================
MOBILE REDESIGN v5 (<= 768px) - production-grade polish
Fibonacci rhythm: 13 → 34 → 21 → 13 px.
Jars at 30% with subtle scale stagger (outer 0.92).
Gummies kept as subtle floating accents.
=========================================================== */
@media (max-width: 768px) {
.twmp-hero-root .hero {
min-height: 100svh;
padding: 16px 20px max(16px, env(safe-area-inset-bottom));
display: flex;
align-items: stretch; /* was center: let inner fill so we can push CTA to bottom */
justify-content: center;
}
.twmp-hero-root .hero__inner {
padding: 0; width: 100%; gap: 0;
min-height: 100%;
}
.twmp-hero-root .eyebrow {
font-size: 13.44px; /* +20% from 11.2px */
letter-spacing: 0.26em;
margin-bottom: 12.8px; /* 13px */
}
.twmp-hero-root .headline {
font-size: clamp(45.76px, 11.7vw, 52.8px); /* +30% from clamp(35.2px, 9vw, 40.8px) */
line-height: 0.95;
margin-bottom: 33.6px; /* 34px */
max-width: 13ch;
}
/* Mobile only: accent line switches to CTA green and is 10% larger than the white line above it */
.twmp-hero-root .headline .accent {
color: var(--green);
font-size: 1.1em;
}
/* Lemme-style floating composition */
.twmp-hero-root .composition {
height: 44vh;
max-width: 100%;
margin-bottom: 20.8px; /* 21px */
}
/* Keep desktop .jars-row (position:absolute; inset:0) as positioning context.
Disable jar-rise animation so rotation transforms stick.
Compensate for asymmetric rotation bounds by shifting the whole row left. */
.twmp-hero-root .jars-row { transform: translateX(-0.8%); }
.twmp-hero-root .jar { animation: none; opacity: 1; }
/* Lemme-style absolute positioning, matching Hero D visual jar size */
.twmp-hero-root .jar--kids, .twmp-hero-root .jar--focus, .twmp-hero-root .jar--energy, .twmp-hero-root .jar--beauty {
width: 42%;
position: absolute;
top: 50%;
margin-top: 0;
}
.twmp-hero-root .jar--kids { left: -9%; z-index: 3; transform: translateY(-50%) rotate(-12deg) translateY(-10px); }
.twmp-hero-root .jar--focus { left: 17%; z-index: 4; transform: translateY(-50%) rotate(5deg) translateY(22px); }
.twmp-hero-root .jar--beauty { left: 43%; z-index: 5; transform: translateY(-50%) rotate(-6deg) translateY(-10px); }
.twmp-hero-root .jar--energy { left: 69%; z-index: 3; transform: translateY(-50%) rotate(10deg) translateY(22px); }
/* 4 colored gummies between/around the floating jars */
.twmp-hero-root .gummy--g1 { display: block; width: 26px; position: absolute; top: 8%; left: 18%; bottom: auto; right: auto; } /* orange */
.twmp-hero-root .gummy--g2 { display: block; width: 22px; position: absolute; bottom: 14%; left: 28%; top: auto; right: auto; } /* coral */
.twmp-hero-root .gummy--g3 { display: block; width: 22px; position: absolute; bottom: 22%; right: 22%; top: auto; left: auto; } /* green - moved down below jar */
.twmp-hero-root .gummy--g4 { display: block; width: 28px; position: absolute; bottom: 8%; right: 2%; top: auto; left: auto; } /* berry - moved down so it doesn't cover the rightmost jar */
.twmp-hero-root .gummy--g5 { display: none; }
.twmp-hero-root .gummy-floater--big, .twmp-hero-root .gummy-floater--small { display: none; }
.twmp-hero-root .cta {
padding: 16px 36px; /* enlarged on mobile for proper pill shape */
font-size: 16.8px;
letter-spacing: 0.08em;
min-height: 52px;
border-radius: 9999px;
margin-top: auto; /* push CTA + trust to bottom so top content rides higher */
margin-bottom: 20.8px;
}
.twmp-hero-root .trust {
font-size: 15.04px; /* +20% from 12.48px */
letter-spacing: 0.04em;
opacity: 0.88;
}
}
@media (max-width: 639px) {
.twmp-hero-root .headline { font-size: clamp(41.6px, 11.7vw, 48px); max-width: 12ch; } /* +30% from clamp(32px, 9vw, 36.8px) */
.twmp-hero-root .composition { height: 32vh; }
}
/* ================================================================
Reduced motion
================================================================ */
/* ================================================================
WAVE SYSTEM — top + bottom masks composed via CSS variables so they
can stack on the same section. bottom-N is top-N's curve traversed
in reverse (same control points), so adjacent sections meet on the
exact same curve. Padding offsets keep content out of the wavy band.
================================================================ */
.twmp-hero-root.has-top-wave,
.twmp-hero-root.has-bottom-wave {
--twmp-mask-top: linear-gradient(black, black);
--twmp-mask-bot: linear-gradient(black, black);
}
.twmp-hero-root.has-top-wave { margin-top: -90px; }
.twmp-hero-root.has-top-wave .hero { padding-top: calc(90px + clamp(24px, 3vh, 48px)); }
.twmp-hero-root.has-bottom-wave .hero { padding-bottom: calc(90px + clamp(24px, 3vh, 48px)); }
.twmp-hero-root.has-top-wave .hero,
.twmp-hero-root.has-bottom-wave .hero {
-webkit-mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
-webkit-mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
-webkit-mask-position: 0 0, 0 90px, 0 100%;
mask-position: 0 0, 0 90px, 0 100%;
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat, no-repeat;
}
.twmp-hero-root.wave-top-1 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-hero-root.wave-bottom-1 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-hero-root.wave-top-2 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-hero-root.wave-bottom-2 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-hero-root.wave-top-3 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-hero-root.wave-bottom-3 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-hero-root.wave-top-4 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-hero-root.wave-bottom-4 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-hero-root.wave-top-5 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-hero-root.wave-bottom-5 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
/* END_SECTION:twmp-hero */
/* START_SECTION:twmp-products (INDEX:58) */
.twmp-products-root { isolation: isolate; position: relative; overflow: hidden; }
.twmp-products-root__bg {
position: relative;
background: var(--twmp-products-bg, #2c1810);
padding: 80px 0;
overflow: hidden;
}
.twmp-products-root__logo-bg {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 1;
}
.twmp-products-root__logo-bg img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.twmp-products-root__logo-bg--desktop { display: none; }
.twmp-products-root__logo-bg--mobile { display: flex; }
.twmp-products-root__inner {
position: relative;
z-index: 20;
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
margin-bottom: 32px;
}
.twmp-products-root__heading-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
}
.twmp-products-root__heading {
margin: 0;
text-align: left;
font-family: "League Spartan", sans-serif;
font-weight: 900;
font-size: 48px;
line-height: 1.05;
color: var(--twmp-products-heading, #FEF5EE);
text-shadow: 0 2px 20px rgba(0,0,0,0.4), 0 4px 40px rgba(0,0,0,0.25);
text-transform: none;
}
.twmp-products-root__arrows {
display: none;
align-items: center;
gap: 12px;
border-radius: 9999px;
padding: 12px;
flex-shrink: 0;
background: rgba(254,245,238,0.9);
}
.twmp-products-root__arrow {
position: relative;
width: 44px;
height: 44px;
border: none;
border-radius: 9999px;
background: #f8b036;
color: #ae373b;
cursor: pointer;
transition: background-color 200ms ease;
font-size: 0;
line-height: 0;
padding: 0;
margin: 0;
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
overflow: hidden;
}
.twmp-products-root__arrow:hover { background: #e09a0c; }
.twmp-products-root__arrow-img,
.twmp-products-root__arrow-svg {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
display: block;
pointer-events: none;
object-fit: contain;
transform: translate(-50%, -50%);
}
.twmp-products-root__arrow-img--flip,
.twmp-products-root__arrow-svg--flip { transform: translate(-50%, -50%) scaleX(-1); }
.twmp-products-root__scroll {
position: relative;
z-index: 20;
display: flex;
gap: 12px;
overflow-x: auto;
padding: 48px 24px 24px 24px;
margin-top: -48px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.twmp-products-root__scroll::-webkit-scrollbar { display: none; }
.twmp-products-root__card {
background: transparent;
border-radius: 16px;
flex-shrink: 0;
width: 240px;
scroll-snap-align: start;
display: block;
margin: 0;
padding: 0;
cursor: default;
transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.twmp-products-root__card-img-wrap {
position: relative;
height: 280px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.twmp-products-root__card-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
filter: drop-shadow(0 8px 30px rgba(0,0,0,0.4));
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.twmp-products-root__badge {
position: absolute;
top: 12px;
left: 12px;
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 13px;
line-height: 1;
padding: 6px 10px 5px;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 2;
}
.twmp-products-root__card-frame {
position: relative;
margin: 0 4px 4px;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
min-height: 285px;
}
.twmp-products-root__hex {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.twmp-products-root__card-content {
position: relative;
padding: 20px 24px;
}
.twmp-products-root__stars-row {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-bottom: 8px;
}
.twmp-products-root__stars {
color: #f8b036;
font-size: 14px;
letter-spacing: 1px;
line-height: 1;
}
.twmp-products-root__review-count {
color: #6b7280;
font-size: 12px;
margin-left: 4px;
}
.twmp-products-root__title {
font-family: "League Spartan", sans-serif;
font-weight: 900;
font-size: 18px;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: 0.025em;
text-align: center;
margin: 0 0 8px;
}
.twmp-products-root__tagline {
font-family: "Outfit", "Inter", sans-serif;
font-weight: 800;
font-size: 14px;
line-height: 1.3;
color: #5a2a18;
text-align: center;
margin: 0 0 12px;
}
.twmp-products-root__sub-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
gap: 8px;
}
.twmp-products-root__sub-label {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 14px;
color: #5a2a18;
text-align: left;
}
.twmp-products-root__card-sub-toggle {
position: relative;
width: 36px;
height: 18px;
border: none;
border-radius: 9999px;
flex-shrink: 0;
cursor: pointer;
padding: 0;
transition: background-color 0.2s ease;
}
.twmp-products-root__sub-knob {
position: absolute;
top: 1px;
left: 1px;
width: 16px;
height: 16px;
border-radius: 9999px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
display: block;
transition: transform 0.2s ease;
}
.twmp-products-root__price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.twmp-products-root__price-stack {
display: flex;
flex-direction: column;
line-height: 1.15;
text-align: left;
}
.twmp-products-root__price-line { white-space: nowrap; }
.twmp-products-root__price-main {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 18px;
color: #5a2a18;
}
.twmp-products-root__price-suffix {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 12px;
color: #6b7280;
margin-left: 2px;
}
.twmp-products-root__price-compare {
font-size: 12px;
color: #6b7280;
text-decoration: line-through;
}
.twmp-products-root__action-btn {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 14px;
padding: 10px 14px;
border-radius: 8px;
border: none;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.twmp-products-root__action-btn.action-btn--sub {
background-color: #03793e;
color: #ffffff;
}
.twmp-products-root__action-btn.action-btn--sub:hover {
background-color: #03793e;
box-shadow: 0 4px 16px rgba(3,121,62,0.3);
}
.twmp-products-root__action-btn.action-btn--one {
background-color: #f8b036;
color: #ae373b;
}
.twmp-products-root__action-btn.action-btn--one:hover {
background-color: #e09a0c;
}
.twmp-products-root__bundle-wrap {
position: relative;
z-index: 20;
max-width: 1280px;
margin: 40px auto 0;
padding: 0 16px;
}
.twmp-products-root__bundle {
background: rgba(254,245,238,0.9);
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 24px;
text-align: center;
animation: twmp-products-bundle-pulse 3s ease-in-out infinite;
}
@keyframes twmp-products-bundle-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(248,176,54,0.2); }
50% { box-shadow: 0 0 0 8px rgba(248,176,54,0); }
}
.twmp-products-root__bundle-heading {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 24px;
line-height: 1.15;
color: #2c1810;
margin: 0 0 8px;
}
.twmp-products-root__bundle-text {
font-family: "Outfit", "Inter", sans-serif;
font-size: 16px;
line-height: 1.4;
color: #6b7280;
margin: 0;
}
.twmp-products-root__bundle-cta-wrap {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: center;
}
.twmp-products-root__bundle-pricing {
text-align: right;
}
.twmp-products-root__bundle-eyebrow {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 2px;
}
.twmp-products-root__bundle-price {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 24px;
color: #2c1810;
}
.twmp-products-root__bundle-compare {
font-size: 14px;
color: #6b7280;
text-decoration: line-through;
margin-left: 8px;
}
.twmp-products-root__bundle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #f8b036;
color: #2c1810;
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 16px;
padding: 12px 24px;
border-radius: 12px;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 8px 30px rgba(248,176,54,0.4);
transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.twmp-products-root__bundle-btn:hover {
background-color: #e09a0c;
transform: translateY(-2px);
}
@media (min-width: 640px) {
.twmp-products-root__inner { padding: 0 24px; margin-bottom: 32px; }
.twmp-products-root__heading { font-size: 72px; white-space: nowrap; }
.twmp-products-root__arrows { display: inline-flex; }
.twmp-products-root__scroll { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
.twmp-products-root__bg { padding: 128px 0; }
.twmp-products-root__inner { padding: 0 32px; margin-bottom: 48px; }
.twmp-products-root__heading { font-size: 104px; }
.twmp-products-root__scroll {
gap: 20px;
justify-content: center;
padding-left: 32px;
padding-right: 32px;
}
.twmp-products-root__scroll.is-overflowing { justify-content: flex-start; }
.twmp-products-root__card { width: 310px; scroll-snap-align: center; }
.twmp-products-root__card-img-wrap { height: auto; aspect-ratio: 1 / 1; }
.twmp-products-root__card-content { padding: 24px 32px; }
.twmp-products-root__title { font-size: 20px; }
.twmp-products-root__action-btn { font-size: 16px; padding: 12px 20px; }
.twmp-products-root__bundle-wrap { margin-top: 56px; padding: 0 32px; }
.twmp-products-root__bundle { flex-direction: row; padding: 32px; text-align: left; }
.twmp-products-root__bundle-heading { font-size: 30px; }
.twmp-products-root__bundle-text { font-size: 18px; }
.twmp-products-root__logo-bg--desktop { display: flex; }
.twmp-products-root__logo-bg--mobile { display: none; }
}
@media (hover: hover) and (pointer: fine) {
.twmp-products-root__card { cursor: pointer; }
.twmp-products-root__card:hover { transform: translateY(-8px); }
.twmp-products-root__card:hover .twmp-products-root__card-img { transform: scale(1.06); }
}
.twmp-products-root.has-top-wave,
.twmp-products-root.has-bottom-wave {
--twmp-mask-top: linear-gradient(black, black);
--twmp-mask-bot: linear-gradient(black, black);
}
.twmp-products-root.has-top-wave { margin-top: -90px; }
.twmp-products-root.has-top-wave .twmp-products-root__bg { padding-top: calc(90px + 80px); }
.twmp-products-root.has-bottom-wave .twmp-products-root__bg { padding-bottom: calc(90px + 80px); }
@media (min-width: 1024px) {
.twmp-products-root.has-top-wave .twmp-products-root__bg { padding-top: calc(90px + 128px); }
.twmp-products-root.has-bottom-wave .twmp-products-root__bg { padding-bottom: calc(90px + 128px); }
}
.twmp-products-root.has-top-wave .twmp-products-root__bg,
.twmp-products-root.has-bottom-wave .twmp-products-root__bg {
-webkit-mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
-webkit-mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
-webkit-mask-position: 0 0, 0 90px, 0 100%;
mask-position: 0 0, 0 90px, 0 100%;
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat, no-repeat;
}
.twmp-products-root.wave-top-1 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-products-root.wave-bottom-1 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-products-root.wave-top-2 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-products-root.wave-bottom-2 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-products-root.wave-top-3 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-products-root.wave-bottom-3 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-products-root.wave-top-4 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-products-root.wave-bottom-4 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-products-root.wave-top-5 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-products-root.wave-bottom-5 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
/* END_SECTION:twmp-products */
/* START_SECTION:twmp-socialproof (INDEX:60) */
.twmp-living-root { isolation: isolate; font-size: 16px; }
.twmp-living-root *, .twmp-living-root *::before, .twmp-living-root *::after { box-sizing: border-box; }
.twmp-living-root__bg {
position: relative;
padding: 80px 0 96px;
background:
radial-gradient(circle at 88% 8%, #FFE3A1 0%, transparent 42%),
radial-gradient(circle at 6% 92%, #FFD1B8 0%, transparent 38%),
linear-gradient(180deg, var(--twmp-living-bg-start, #FFF8E7) 0%, var(--twmp-living-bg-end, #FFF4DD) 100%);
overflow: hidden;
}
@media (min-width: 1024px) { .twmp-living-root__bg { padding: 128px 0 144px; } }
.twmp-living-root__header {
max-width: 1280px;
margin: 0 auto 40px;
padding: 0 16px;
position: relative;
z-index: 10;
}
@media (min-width: 640px) { .twmp-living-root__header { padding: 0 24px; } }
@media (min-width: 1024px) { .twmp-living-root__header { padding: 0 32px; margin-bottom: 56px; } }
.twmp-living-root__header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
}
.twmp-living-root__eyebrow {
display: inline-block;
font-family: 'League Spartan', sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
background: #2c1810;
color: var(--twmp-living-accent, #f8b036);
padding: 10px 20px;
border-radius: 30px 24px 32px 22px / 24px 32px 22px 30px;
transform: rotate(-2deg);
box-shadow: 4px 4px 0 rgba(248,176,54,0.35);
margin-bottom: 20px;
}
.twmp-living-root__heading {
font-family: 'League Spartan', sans-serif;
font-weight: 900;
color: var(--twmp-living-heading, #2C2418);
line-height: 1.05;
margin: 20px 0 0;
max-width: 768px;
font-size: 48px;
}
@media (min-width: 640px) { .twmp-living-root__heading { font-size: 60px; } }
@media (min-width: 1024px) { .twmp-living-root__heading { font-size: 88px; } }
.twmp-living-root__heading-accent {
display: inline-block;
background: linear-gradient(120deg, #fe5a40, var(--twmp-living-accent, #f8b036));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-style: italic;
transform: rotate(-1deg);
}
.twmp-living-root__squiggle { display: block; width: 220px; height: 20px; color: #fe5a40; margin-top: 6px; }
.twmp-living-root__arrows {
display: none;
align-items: center;
gap: 12px;
background: #2c1810;
border-radius: 40px 36px 44px 34px / 36px 44px 34px 40px;
transform: rotate(-1deg);
padding: 12px 16px;
flex-shrink: 0;
}
@media (min-width: 1024px) { .twmp-living-root__arrows { display: inline-flex; } }
.twmp-living-root__arrow {
width: 48px;
height: 48px;
border: 0;
cursor: pointer;
background: var(--twmp-living-accent, #f8b036);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 56% 44% 48% 52% / 50% 54% 46% 50%;
transition: background 200ms ease;
padding: 0;
}
.twmp-living-root__arrow:hover { background: #e09a0c; }
.twmp-living-root__arrow svg { width: 18px; height: 18px; }
.twmp-living-root__arrow img { width: 20px; height: auto; display: block; }
.twmp-living-root__arrow.is-left img { transform: rotate(180deg); }
.twmp-living-root__viewport { overflow: hidden; -webkit-overflow-scrolling: touch; }
.twmp-living-root__scroll {
display: flex;
align-items: stretch;
gap: 12px;
padding: 0 16px 16px;
cursor: grab;
touch-action: pan-y;
will-change: transform;
}
.twmp-living-root__scroll.is-grabbing { cursor: grabbing; }
.twmp-living-root__scroll::after { content: ''; flex-shrink: 0; width: 16px; }
@media (min-width: 640px) {
.twmp-living-root__scroll { gap: 16px; padding: 0 24px 16px; }
.twmp-living-root__scroll::after { width: 24px; }
}
@media (min-width: 1024px) {
.twmp-living-root__scroll { padding: 0 32px 16px; }
.twmp-living-root__scroll::after { width: 32px; }
}
.twmp-living-root__tile { flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.twmp-living-root__tile.is-narrow { width: 220px; }
.twmp-living-root__tile.is-wide { width: 280px; }
@media (min-width: 640px) {
.twmp-living-root__tile.is-narrow { width: 280px; }
.twmp-living-root__tile.is-wide { width: 330px; }
}
@media (min-width: 1024px) {
.twmp-living-root__tile.is-narrow { width: 340px; }
.twmp-living-root__tile.is-wide { width: 390px; }
}
.twmp-living-root__tile.is-stacked { height: calc(220px * 16 / 9); }
@media (min-width: 640px) { .twmp-living-root__tile.is-stacked { height: calc(280px * 16 / 9); } }
@media (min-width: 1024px) { .twmp-living-root__tile.is-stacked { height: calc(340px * 16 / 9); } }
.twmp-living-root__tile.is-stacked > .twmp-living-root__video,
.twmp-living-root__tile.is-stacked > .twmp-living-root__image-tile {
aspect-ratio: auto;
flex: 1 1 0;
min-height: 0;
height: auto;
overflow: hidden;
}
.twmp-living-root__tile.is-stacked > .twmp-living-root__review,
.twmp-living-root__tile.is-stacked > .twmp-living-root__stat {
flex: 1 1 0;
min-height: 0;
overflow: hidden;
}
.twmp-living-root__video {
position: relative;
border-radius: 16px;
overflow: hidden;
background: #1a1a1a;
aspect-ratio: 9 / 16;
width: 100%;
cursor: pointer;
}
.twmp-living-root__video video,
.twmp-living-root__video img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.twmp-living-root__video-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
pointer-events: none;
}
.twmp-living-root__video-play {
position: absolute; top: 12px; right: 12px;
width: 32px; height: 32px;
border-radius: 9999px;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
}
.twmp-living-root__video-play svg { width: 16px; height: 16px; }
.twmp-living-root__video-caption {
position: absolute; bottom: 16px; left: 16px; right: 16px; color: #fff;
}
.twmp-living-root__video-caption p { margin: 0; font-family: 'League Spartan', sans-serif; }
.twmp-living-root__video-caption .vc-handle { font-size: 14px; font-weight: 600; color: #fff; }
.twmp-living-root__video-caption .vc-line2 { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.twmp-living-root__review {
position: relative; border-radius: 16px; padding: 24px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
flex: 1; display: flex; flex-direction: column; justify-content: space-between;
overflow: hidden; color: #fff; font-family: 'League Spartan', sans-serif;
}
.twmp-living-root__review-head {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.twmp-living-root__review-stars { color: var(--twmp-living-accent, #f8b036); font-size: 20px; letter-spacing: 0.06em; }
.twmp-living-root__review-verified {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
color: var(--twmp-living-accent, #f8b036);
background: rgba(248,176,54,0.15);
padding: 4px 8px; border-radius: 9999px;
}
.twmp-living-root__review-quote {
margin: 0 0 20px; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.55;
}
.twmp-living-root__review-accent { color: var(--twmp-living-accent, #f8b036); font-weight: 700; }
.twmp-living-root__review-foot {
display: flex; align-items: center; gap: 12px;
padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1);
}
.twmp-living-root__review-avatar {
width: 44px; height: 44px; border-radius: 9999px;
background: linear-gradient(135deg, var(--twmp-living-accent, #f8b036), #e09a0c);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
color: #2C2418; font-weight: 800; font-size: 14px; font-family: 'League Spartan', sans-serif;
}
.twmp-living-root__review-name { margin: 0; font-weight: 800; font-size: 14px; color: #fff; }
.twmp-living-root__review-product {
margin: 0; font-size: 11px; color: rgba(255,255,255,0.6);
font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}
.twmp-living-root__image-tile { border-radius: 16px; overflow: hidden; width: 100%; aspect-ratio: 9 / 16; }
.twmp-living-root__image-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.twmp-living-root__stat {
position: relative; border-radius: 16px; overflow: hidden;
color: #fff; flex: 1; display: flex; flex-direction: column; justify-content: space-between;
min-height: 220px;
}
.twmp-living-root__stat-img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; object-position: center 15%;
}
.twmp-living-root__stat-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1));
}
.twmp-living-root__stat-inner {
position: relative; padding: 20px;
display: flex; flex-direction: column; justify-content: space-between;
height: 100%; font-family: 'League Spartan', sans-serif;
}
.twmp-living-root__stat-number {
margin: 0 0 8px; font-weight: 800; font-size: 36px;
text-shadow: 0 2px 16px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.5);
}
@media (min-width: 1024px) { .twmp-living-root__stat-number { font-size: 48px; } }
.twmp-living-root__stat-label {
margin: 0; font-weight: 600; font-size: 16px;
text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.5);
}
.twmp-living-root__stat-foot {
margin: 16px 0 0; font-weight: 700; font-size: 12px; color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.6);
}
@media (max-width: 639px) {
.twmp-living-root__review { padding: 14px; }
.twmp-living-root__review-quote { font-size: 12px; line-height: 1.35; margin-bottom: 12px; }
.twmp-living-root__review-stars { font-size: 16px; }
.twmp-living-root__review-head { margin-bottom: 8px; }
}
.twmp-living-root.has-top-wave,
.twmp-living-root.has-bottom-wave {
--twmp-mask-top: linear-gradient(black, black);
--twmp-mask-bot: linear-gradient(black, black);
}
.twmp-living-root.has-top-wave { margin-top: -90px; }
.twmp-living-root.has-top-wave .twmp-living-root__bg { padding-top: calc(90px + 80px); }
.twmp-living-root.has-bottom-wave .twmp-living-root__bg { padding-bottom: calc(90px + 96px); }
@media (min-width: 1024px) {
.twmp-living-root.has-top-wave .twmp-living-root__bg { padding-top: calc(90px + 128px); }
.twmp-living-root.has-bottom-wave .twmp-living-root__bg { padding-bottom: calc(90px + 144px); }
}
.twmp-living-root.has-top-wave .twmp-living-root__bg,
.twmp-living-root.has-bottom-wave .twmp-living-root__bg {
-webkit-mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
-webkit-mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
-webkit-mask-position: 0 0, 0 90px, 0 100%;
mask-position: 0 0, 0 90px, 0 100%;
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat, no-repeat;
}
.twmp-living-root.wave-top-1 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-living-root.wave-bottom-1 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-living-root.wave-top-2 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-living-root.wave-bottom-2 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-living-root.wave-top-3 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-living-root.wave-bottom-3 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-living-root.wave-top-4 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-living-root.wave-bottom-4 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-living-root.wave-top-5 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-living-root.wave-bottom-5 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
/* END_SECTION:twmp-socialproof */
/* START_SECTION:twmp-stores (INDEX:61) */
/* ================================================================
twmp-stores — retailer logo strip. Self-contained, no shared deps.
Source: index.html lines 803-825 (#stores section).
================================================================ */
.twmp-stores-root { isolation: isolate; }
.twmp-stores-root__bg {
position: relative;
background: var(--twmp-stores-bg, #FFF8E7);
padding: 48px 0 80px;
}
.twmp-stores-root__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
}
.twmp-stores-root__heading {
text-align: center;
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 24px;
letter-spacing: 0.025em;
text-transform: uppercase;
margin: 0 0 40px;
color: var(--twmp-stores-heading, #ae373b);
}
.twmp-stores-root__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
column-gap: 24px;
row-gap: 16px;
}
.twmp-stores-root__logo {
flex-shrink: 0;
opacity: 0.7;
transition: opacity 300ms ease;
max-width: 100%;
height: var(--twmp-m-h, auto);
width: var(--twmp-m-w, auto);
object-fit: contain;
display: block;
}
.twmp-stores-root__logo:hover { opacity: 1; }
.twmp-stores-root__logo-link { display: inline-flex; }
@media (min-width: 640px) {
.twmp-stores-root__inner { padding: 0 24px; }
.twmp-stores-root__heading { font-size: 30px; }
}
@media (min-width: 1024px) {
.twmp-stores-root__bg { padding: 64px 0 96px; }
.twmp-stores-root__inner { padding: 0 32px; }
.twmp-stores-root__heading { font-size: 36px; margin-bottom: 40px; }
.twmp-stores-root__row { column-gap: 64px; row-gap: 16px; }
.twmp-stores-root__logo {
height: var(--twmp-d-h, auto);
width: var(--twmp-d-w, auto);
}
}
/* ================================================================
WAVE SYSTEM — same architecture as twmp-hero. Composable top + bottom
masks via CSS variables. bottom-N is top-N traversed in reverse so
adjacent sections meet on the same curve.
================================================================ */
.twmp-stores-root.has-top-wave,
.twmp-stores-root.has-bottom-wave {
--twmp-mask-top: linear-gradient(black, black);
--twmp-mask-bot: linear-gradient(black, black);
}
.twmp-stores-root.has-top-wave { margin-top: -90px; }
.twmp-stores-root.has-top-wave .twmp-stores-root__bg { padding-top: calc(90px + 48px); }
.twmp-stores-root.has-bottom-wave .twmp-stores-root__bg { padding-bottom: calc(90px + 80px); }
@media (min-width: 1024px) {
.twmp-stores-root.has-top-wave .twmp-stores-root__bg { padding-top: calc(90px + 64px); }
.twmp-stores-root.has-bottom-wave .twmp-stores-root__bg { padding-bottom: calc(90px + 96px); }
}
.twmp-stores-root.has-top-wave .twmp-stores-root__bg,
.twmp-stores-root.has-bottom-wave .twmp-stores-root__bg {
-webkit-mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
-webkit-mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
-webkit-mask-position: 0 0, 0 90px, 0 100%;
mask-position: 0 0, 0 90px, 0 100%;
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat, no-repeat;
}
.twmp-stores-root.wave-top-1 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-stores-root.wave-bottom-1 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-stores-root.wave-top-2 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-stores-root.wave-bottom-2 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-stores-root.wave-top-3 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-stores-root.wave-bottom-3 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-stores-root.wave-top-4 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-stores-root.wave-bottom-4 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-stores-root.wave-top-5 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-stores-root.wave-bottom-5 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
/* END_SECTION:twmp-stores */
/* START_SECTION:twmp-story (INDEX:62) */
/* ================================================================
twmp-story — "The Science / Ingredient Deep Dive". Self-contained.
Source: index.html lines 1564-1666 (#story section).
================================================================ */
.twmp-story-root {
isolation: isolate;
--twmp-story-accent: #f8b036;
}
.twmp-story-root__bg {
position: relative;
background: #2c1810;
padding-top: 80px;
padding-bottom: 96px;
overflow: hidden;
}
.twmp-story-root__bg-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.twmp-story-root__bg-layer img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.45) sepia(0.35) saturate(1.1);
}
.twmp-story-root__bg-overlay {
position: absolute;
inset: 0;
}
.twmp-story-root__container {
position: relative;
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
z-index: 1;
}
.twmp-story-root__cards-container {
position: relative;
max-width: 1440px;
margin: 0 auto;
padding: 0 16px;
z-index: 1;
}
.twmp-story-root__header {
margin-bottom: 56px;
}
.twmp-story-root__heading {
font-family: "League Spartan", sans-serif;
font-weight: 900;
font-size: 36px;
line-height: 1.05;
letter-spacing: -0.02em;
color: #ffffff;
margin: 0 0 24px;
text-wrap: balance;
}
.twmp-story-root__heading-accent {
color: var(--twmp-story-accent);
}
.twmp-story-root__lede {
font-family: "Outfit", sans-serif;
font-size: 20px;
line-height: 1.625;
color: rgba(255, 255, 255, 0.7);
max-width: 768px;
margin: 0;
}
.twmp-story-root__cards {
display: flex;
gap: 16px;
overflow-x: auto;
padding-bottom: 16px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.twmp-story-root__cards::-webkit-scrollbar { display: none; }
.twmp-story-root__card {
position: relative;
border-radius: 16px;
overflow: hidden;
flex-shrink: 0;
width: 260px;
aspect-ratio: 3 / 4;
scroll-snap-align: center;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
.twmp-story-root__card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(3, 121, 62, 0.12);
}
}
.twmp-story-root__card-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.twmp-story-root__card-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2) 50%, transparent);
}
.twmp-story-root__card-glass {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.twmp-story-root__card-name {
font-family: "League Spartan", sans-serif;
font-weight: 800;
color: #ffffff;
margin: 0 0 4px;
font-size: 16px;
line-height: 1.2;
}
.twmp-story-root__card-count {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 24px;
color: var(--twmp-story-accent);
line-height: 1;
margin: 0 0 4px;
display: inline-block;
}
.twmp-story-root__card-label {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 8px;
}
.twmp-story-root__card-desc {
font-family: "Outfit", sans-serif;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.625;
margin: 0;
}
.count-up { display: inline-block; }
.twmp-story-root__bottom {
margin-top: 48px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
}
.twmp-story-root__bottom-text {
flex: 1;
}
.twmp-story-root__bottom-pre {
font-family: "Outfit", sans-serif;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 4px;
}
.twmp-story-root__bottom-main {
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 16px;
color: #ffffff;
margin: 0;
}
.twmp-story-root__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 36px;
background: #03793e;
color: #ffffff;
font-family: "League Spartan", sans-serif;
font-weight: 800;
font-size: 16.8px;
border-radius: 9999px;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
width: 100%;
min-height: 52px;
box-shadow: 0 8px 30px rgba(3, 121, 62, 0.4);
transition: background 220ms ease;
}
.twmp-story-root__cta:hover {
background: rgba(3, 121, 62, 0.9);
}
.twmp-story-root__cta svg {
margin-left: 8px;
height: 16px;
width: 16px;
}
@media (min-width: 640px) {
.twmp-story-root__container,
.twmp-story-root__cards-container { padding: 0 24px; }
.twmp-story-root__heading { font-size: 60px; }
.twmp-story-root__card { width: 280px; }
.twmp-story-root__bottom {
flex-direction: row;
align-items: center;
text-align: left;
gap: 24px;
padding: 32px;
}
.twmp-story-root__bottom-pre { font-size: 16px; }
.twmp-story-root__bottom-main { font-size: 18px; }
.twmp-story-root__cta { width: auto; }
}
@media (min-width: 1024px) {
.twmp-story-root__bg {
padding-top: 128px;
padding-bottom: 144px;
}
.twmp-story-root__container,
.twmp-story-root__cards-container { padding: 0 32px; }
.twmp-story-root__header { margin-bottom: 80px; }
.twmp-story-root__heading { font-size: 88px; }
.twmp-story-root__lede { font-size: 24px; }
.twmp-story-root__cards {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
overflow: visible;
padding-bottom: 0;
scroll-snap-type: none;
}
.twmp-story-root__card {
width: auto;
scroll-snap-align: none;
}
.twmp-story-root__bottom {
margin-top: 64px;
padding: 40px;
}
.twmp-story-root__bottom-main { font-size: 20px; }
}
/* ================================================================
WAVE SYSTEM — same architecture as twmp-hero / twmp-stores.
================================================================ */
.twmp-story-root.has-top-wave,
.twmp-story-root.has-bottom-wave {
--twmp-mask-top: linear-gradient(black, black);
--twmp-mask-bot: linear-gradient(black, black);
}
.twmp-story-root.has-top-wave { margin-top: -90px; }
.twmp-story-root.has-top-wave .twmp-story-root__bg { padding-top: calc(90px + 80px); }
.twmp-story-root.has-bottom-wave .twmp-story-root__bg { padding-bottom: calc(90px + 96px); }
@media (min-width: 1024px) {
.twmp-story-root.has-top-wave .twmp-story-root__bg { padding-top: calc(90px + 128px); }
.twmp-story-root.has-bottom-wave .twmp-story-root__bg { padding-bottom: calc(90px + 144px); }
}
.twmp-story-root.has-top-wave .twmp-story-root__bg,
.twmp-story-root.has-bottom-wave .twmp-story-root__bg {
-webkit-mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
mask-image: var(--twmp-mask-top), linear-gradient(black, black), var(--twmp-mask-bot);
-webkit-mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
mask-size: 100% 90px, 100% calc(100% - 180px), 100% 90px;
-webkit-mask-position: 0 0, 0 90px, 0 100%;
mask-position: 0 0, 0 90px, 0 100%;
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat, no-repeat;
}
.twmp-story-root.wave-top-1 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-story-root.wave-bottom-1 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-story-root.wave-top-2 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-story-root.wave-bottom-2 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-story-root.wave-top-3 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-story-root.wave-bottom-3 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-story-root.wave-top-4 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-story-root.wave-bottom-4 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
.twmp-story-root.wave-top-5 { --twmp-mask-top: url("data:image/svg+xml;utf8,"); }
.twmp-story-root.wave-bottom-5 { --twmp-mask-bot: url("data:image/svg+xml;utf8,"); }
/* END_SECTION:twmp-story */