/* ============================================================= Alm Organic — homepage prototype styles Brand locks: greens #12753a / #1fb25a, ink #231f20, warm cream (no white, no dark), 8px radius, lime-pop CTA (#aee13b). ============================================================= */ :root { --green: #12753a; --green-bright: #1fb25a; --ink: #231f20; --cream: #faf6ee; /* base canvas */ --cream-deep: #f2eadb; /* alternating sections */ --cream-card: #fffdf8; /* card surface (still not pure white) */ --cta: #23d36a; /* vivid spring green (trial) */ --cta-dark: #1cb95b; /* hover */ --cta-ink: #10401f; /* text on the lime button */ --star: #e6b34a; /* review/rating stars stay warm gold */ --line: #e6ddca; /* soft warm border */ --muted: #6f6a5f; /* secondary text */ --radius: 8px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Manrope', system-ui, sans-serif; background: var(--cream); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, .font-serif { font-family: 'Lora', Georgia, serif; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .section { padding: clamp(48px, 5.5vw, 62px) 0; position: relative; overflow: visible; } .section--cream { background: var(--cream); } .section--deep { background: var(--cream-deep); } .section--green { background: var(--green); color: #fdfbf4; } .overline { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--green-bright); } .section--green .overline { color: #aef0c6; } .h-sec { font-size: clamp(28px, 4vw, 42px); line-height: 1.18; margin: 12px 0 0; font-weight: 600; } .lead { color: var(--muted); max-width: 620px; margin: 14px auto 0; } .section--green .lead { color: #d7ecdd; } .center { text-align: center; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: var(--radius); border: 2px solid transparent; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; } .btn:active { transform: translateY(1px); } .btn-cta { background: var(--cta); color: var(--cta-ink); } .btn-cta:hover { background: var(--cta-dark); box-shadow: 0 6px 18px rgba(20,180,90,.45); } .btn-green { background: var(--green); color: #fff; } .btn-green:hover { background: #0e5f30; } .btn-outline { background: transparent; border-color: var(--green); color: var(--green); } .btn-outline:hover { background: rgba(18,117,58,.07); } .btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); } .btn-ghost-light:hover { background: rgba(255,255,255,.2); } /* ---------- announcement bar ---------- */ .announce { background: var(--green); color: #eafff1; text-align: center; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; height: 38px; display: flex; align-items: center; justify-content: center; } .announce span { transition: opacity .4s ease; } /* ---------- header ---------- */ .header { position: sticky; top: 0; z-index: 60; background: rgba(250,246,238,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .header__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 90px; width: 100%; padding: 0 32px; /* full-bleed: hug the screen edges */ } /* Smaller, more compact Shop All button in the header */ .header__left .btn-cta { padding: 9px 18px; font-size: 13.5px; } .header__left { display: flex; align-items: center; gap: 16px; justify-self: start; } .header__right { display: flex; align-items: center; gap: 20px; justify-self: end; } .header__logo { justify-self: center; } .header__logo img { height: 68px; width: auto; } .iconbtn { background: none; border: none; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: 14px; padding: 6px; } .iconbtn:hover { color: var(--green); } .burger { flex-direction: column; gap: 4px; padding: 8px; } .burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; display: block; } .cart-count { background: var(--cta); color: var(--cta-ink); font-size: 12px; font-weight: 800; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 860px) { .header__row { height: 64px; padding: 0 18px; } .header__logo img { height: 46px; } .hide-mobile { display: none !important; } } @media (min-width: 861px) { .only-mobile { display: none !important; } } /* ---------- hero ---------- */ .hero { position: relative; min-height: calc(86vh + 90px); padding-top: 90px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; } .hero__bg { /* gradient fallback behind the video (shows while it loads / if it fails) */ position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 80% at 70% 20%, rgba(31,178,90,.55), transparent 60%), linear-gradient(160deg, #0e5f30 0%, #12753a 45%, #0b4f29 100%); } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; } .hero::after { /* overlay: pushes the video back so the text + button lead; neutral black, not too dark */ content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(80% 60% at 50% 52%, rgba(0,0,0,.18), transparent 75%), linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.24) 45%, rgba(0,0,0,.38)); } .hero__inner { position: relative; z-index: 4; max-width: 760px; padding: 40px 24px; } .hero h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.1; margin: 14px 0 0; font-weight: 600; text-shadow: 0 2px 24px rgba(0,0,0,.3); } .hero .overline { color: #fff; } .hero__sub { font-size: clamp(16px, 1.6vw, 19px); margin: 18px auto 28px; max-width: 540px; color: #f1f7f2; } .hero__play { width: 64px; height: 64px; border-radius: 999px; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; margin: 30px auto 0; backdrop-filter: blur(4px); } /* ---------- generic card ---------- */ .card { background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(35,31,32,.08); } /* ---------- product card ---------- */ .pcard { display: flex; flex-direction: column; } .pcard__img { background: var(--cream-deep); aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; padding: 16px; } .pcard__img img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; } .pcard__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .pcard__cat { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--green-bright); } .pcard__name { font-family: 'Lora', serif; font-size: 18px; font-weight: 600; } .pcard__rating { display: flex; align-items: center; gap: 6px; font-size: 12.5px; } .pcard__rating .stars { color: var(--star); letter-spacing: 1px; font-size: 13px; } .pcard__rating .rval { font-weight: 800; color: var(--ink); } .pcard__rating .rcount { color: var(--muted); } .pcard__benefit { font-size: 13.5px; color: var(--muted); flex: 1; } .pcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .price { font-weight: 800; font-size: 16px; } .price s { color: var(--muted); font-weight: 500; font-size: 13px; margin-right: 6px; } .add-btn { width: 38px; height: 38px; border-radius: var(--radius); background: var(--cta); color: var(--cta-ink); border: none; cursor: pointer; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .add-btn:hover { background: var(--cta-dark); } /* ---------- marquee (UGC) ---------- */ .marquee { overflow: hidden; width: 90vw; max-width: 1340px; position: relative; left: 50%; transform: translateX(-50%); contain: content; } .marquee__track { display: flex; gap: 18px; width: max-content; animation: scroll-x 38s linear infinite; will-change: transform; transform: translateZ(0); backface-visibility: hidden; } @keyframes scroll-x { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @media (prefers-reduced-motion: reduce){ .marquee__track { animation: none; } } .ugc { width: 220px; aspect-ratio: 4/5; flex: none; border-radius: var(--radius); background: #f3ecdc; position: relative; overflow: hidden; } .ugc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } /* ---------- review slider ---------- */ .review { max-width: 640px; margin: 0 auto; text-align: center; min-height: 150px; } .review__stars { color: var(--star); font-size: 20px; letter-spacing: 2px; } .review__quote { font-family: 'Lora', serif; font-size: clamp(18px,2.2vw,23px); font-style: italic; margin: 14px 0; transition: opacity .3s ease; } .review__who { font-weight: 700; font-size: 14px; } .review__date { color: var(--muted); font-size: 13px; } .review__nav { display: flex; gap: 12px; justify-content: center; margin-top: 22px; } .review__arrow { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream-card); cursor: pointer; font-size: 18px; color: var(--green); } .review__arrow:hover { background: var(--green); color: #fff; } /* ---------- results gauges (Module 3) ---------- */ /* soft light glow behind the gauges so the green band isn't flat */ .section--green { background: radial-gradient(70% 120% at 50% -10%, rgba(35,211,106,.22), transparent 60%), var(--green); } .gauges { display: grid; grid-template-columns: repeat(4,1fr); gap: 34px 26px; margin-top: 52px; } .gauge { display: flex; flex-direction: column; align-items: center; } .gauge__ring { position: relative; width: 132px; height: 132px; } .gauge__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .gauge__track { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 9; } .gauge__fill { fill: none; stroke: var(--cta); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.5s cubic-bezier(.22,.85,.25,1); filter: drop-shadow(0 0 7px rgba(35,211,106,.55)); } .gauge__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } .gauge__icon { color: var(--cta); display: flex; } .gauge__icon svg { width: 22px; height: 22px; } .gauge .stat__num { font-family: 'Lora', serif; font-size: 30px; font-weight: 600; color: #fff; line-height: 1; } .stat__label { font-weight: 700; margin-top: 16px; } .stat__sub { color: #cfe7d6; font-size: 13.5px; margin-top: 4px; max-width: 190px; } .disclaimer { color: #bcd8c4; font-size: 12.5px; margin-top: 30px; } @media (max-width: 760px){ .gauges { grid-template-columns: repeat(2,1fr); gap: 38px 18px; } } /* ---------- Module 4: results — icon-led % cards (top) + cinematic banner (bottom) ---------- */ .rit2__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } /* the container's own .reveal is only the scroll trigger — neutralize its visual reveal so the individual cards do the (staggered) entrance instead */ .rit2__stats.reveal { opacity: 1; transform: none; } .rit2__cell { background: var(--cream-card); border: 1px solid rgba(255,255,255,.65); border-radius: 18px; padding: 32px 20px 28px; text-align: center; position: relative; opacity: 0; box-shadow: 0 2px 4px rgba(12,43,25,.10), 0 14px 26px rgba(12,43,25,.20), 0 32px 56px -16px rgba(12,43,25,.45); display: flex; flex-direction: column; align-items: center; transition: transform .28s cubic-bezier(.22,.85,.3,1), box-shadow .28s ease; } /* staggered "fall in, one by one" entrance — animation (not transition) with backwards fill, so it never locks the transform and the hover lift still works */ .rit2__stats.in .rit2__cell { opacity: 1; animation: rit2Fall .58s cubic-bezier(.22,.9,.3,1) backwards; } .rit2__stats.in .rit2__cell:nth-child(1) { animation-delay: 0s; } .rit2__stats.in .rit2__cell:nth-child(2) { animation-delay: .1s; } .rit2__stats.in .rit2__cell:nth-child(3) { animation-delay: .2s; } .rit2__stats.in .rit2__cell:nth-child(4) { animation-delay: .3s; } @keyframes rit2Fall { from { opacity: 0; transform: translateY(-26px); } 60% { opacity: 1; } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce){ .rit2__cell { opacity: 1; } .rit2__stats.in .rit2__cell { animation: none; } } .rit2__cell::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } .rit2__cell:hover { transform: translateY(-7px); box-shadow: 0 4px 8px rgba(12,43,25,.12), 0 20px 34px rgba(12,43,25,.24), 0 46px 74px -18px rgba(12,43,25,.55); } .rit2__icon { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, rgba(31,178,90,.20), rgba(35,211,106,.10)); box-shadow: inset 0 0 0 1.5px rgba(31,178,90,.22); color: var(--green); margin-bottom: 16px; } .rit2__icon svg { width: 35px; height: 35px; } .rit2__num { font-family: 'Lora', serif; font-size: clamp(40px, 4.2vw, 52px); font-weight: 600; color: var(--green); line-height: 1; letter-spacing: -.01em; } .rit2__lbl { font-weight: 800; font-size: 17px; color: var(--ink); margin-top: 11px; } .rit2__sub { color: var(--muted); font-size: 13px; margin-top: 5px; } .rit2__banner { position: relative; border-radius: 16px; overflow: hidden; height: 380px; margin-top: 30px; box-shadow: 0 24px 56px rgba(0,0,0,.28); } .rit2__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rit2__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,32,18,.85) 0%, rgba(10,32,18,.38) 52%, rgba(10,32,18,0) 100%); } .rit2__txt { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); max-width: 480px; z-index: 2; } .rit2__txt .overline { color: #bfe6cd; } .rit2__txt .h-sec { color: #fff; font-size: clamp(28px, 3.4vw, 38px); margin: 6px 0 0; } .rit2__txt .lead { color: #e7f2ea; margin: 12px 0 20px; } .rit2__disc { color: #bcd8c4; font-size: 12.5px; margin-top: 22px; text-align: center; } @media (max-width: 860px){ .rit2__stats { grid-template-columns: 1fr 1fr; gap: 16px; } .rit2__txt { left: 24px; right: 24px; max-width: none; } .rit2__overlay { background: linear-gradient(90deg, rgba(10,32,18,.82) 0%, rgba(10,32,18,.55) 100%); } .rit2__banner { height: 340px; } } /* ---------- shop by concern — directory list (icons + counts), staggered reveal ---------- */ .cdir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin-top: 44px; text-align: left; } .cdir__item { display: flex; align-items: center; gap: 13px; padding: 15px 8px; border-bottom: 1px solid var(--line); position: relative; opacity: 0; /* entrance handled by the .in animation below */ transition: padding-left .2s ease, border-color .2s ease; } .cdir.in .cdir__item { animation: cdirIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .045s); } @keyframes cdirIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .cdir__icon { width: 40px; height: 40px; border-radius: 999px; flex: none; background: rgba(31,178,90,.10); color: var(--green); display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease, transform .2s ease; } .cdir__icon svg { width: 19px; height: 19px; } .cdir__name { font-weight: 700; font-size: 15px; flex: 1; color: var(--ink); } .cdir__count { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .cdir__go { color: var(--green); font-weight: 800; margin-left: 10px; opacity: 0; transform: translateX(-5px); transition: opacity .2s ease, transform .2s ease; } .cdir__item:hover { padding-left: 15px; border-color: var(--cta); } .cdir__item:hover .cdir__icon { background: var(--green); color: #fff; transform: scale(1.06); } .cdir__item:hover .cdir__go { opacity: 1; transform: translateX(0); } .cdir__item:hover .cdir__count { display: none; } @media (prefers-reduced-motion: reduce){ .cdir__item { opacity: 1; } .cdir.in .cdir__item { animation: none; } } @media (max-width: 820px){ .cdir { grid-template-columns: repeat(2, 1fr); gap: 0 28px; } } @media (max-width: 520px){ .cdir { grid-template-columns: 1fr; } } /* body map (building up from the outline) — image base + SVG organ overlay */ .bodywrap { position: relative; display: inline-block; } .bodyfig { display: block; width: auto; height: auto; max-height: 78vh; max-width: 100%; } .bodyorgans { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .organ { fill: none; stroke: #2f6b46; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; } /* precise organ highlights (image overlays extracted from the diagram) */ .bodyhi { position: relative; display: inline-block; } .bodyfig { transition: filter .4s ease; } .organ-hi { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .35s ease; } .organ-hi.on { opacity: 1; filter: drop-shadow(0 0 2px rgba(31,178,90,.6)); } .bodyhi.skin-on .bodyfig { filter: drop-shadow(0 0 5px var(--green-bright)) drop-shadow(0 0 16px rgba(31,178,90,.5)); } .organ-fill { transition: fill .35s ease, fill-opacity .35s ease; } .organ.on .organ-fill { fill: #1fd25f; fill-opacity: .9; filter: drop-shadow(0 0 4px rgba(31,178,90,.85)) drop-shadow(0 0 12px rgba(31,178,90,.5)); } /* ============ Shop-by-concern body map v4 (left: text + all categories · right: big diagram + organ fill) ============ */ .bodymap { display: grid; grid-template-columns: minmax(290px, 400px) 1fr; gap: 50px; align-items: center; max-width: 1120px; margin: 0 auto; text-align: left; } .bm2-intro .overline { margin-bottom: 6px; } .bm2-intro .lead { margin-bottom: 0; } .bm2-cats { display: flex; flex-direction: column; gap: 8px; margin-top: 26px; align-items: flex-start; } .bm2-cat { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 700; font-size: 15px; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: 0 2px 8px rgba(35,31,32,.04); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } .bm2-cat:hover, .bm2-cat.is-active { background: var(--green); border-color: var(--green); color: #fff; transform: translateX(3px); } .bm2-cat__arrow { font-weight: 800; opacity: 0; max-width: 0; overflow: hidden; transform: translateX(-4px); transition: all .2s ease; } .bm2-cat:hover .bm2-cat__arrow, .bm2-cat.is-active .bm2-cat__arrow { opacity: 1; max-width: 16px; transform: translateX(0); } /* the diagram (anatomy image + organ-highlight overlay) — BIG */ .bm2-figure { position: relative; display: flex; justify-content: center; } .bm2-img { max-height: 920px; width: auto; height: auto; display: block; transition: filter .45s ease; } .bm2-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .bm2-organ { fill: var(--green-bright); opacity: 0; transition: opacity .35s ease; } .bm2-organ.on { opacity: .5; } .bm2-hot { fill: transparent; pointer-events: all; cursor: pointer; } .bm2-figure.skin-on .bm2-img { filter: drop-shadow(0 0 5px var(--green-bright)) drop-shadow(0 0 18px rgba(31,178,90,.55)); } /* blood cells (Energy & Iron) */ .bm2-cell { fill: #d23b3b; opacity: 0; } .bm2-overlay[data-fx="blood"] .bm2-cell { animation: bmCell 1.5s ease forwards; animation-delay: var(--d); } @keyframes bmCell { 0%{opacity:0} 45%{opacity:.92} 100%{opacity:.7} } /* veins (Heart & Circulation / Joints & Veins) */ .bm2-vein { fill: none; stroke: #4674a8; stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .4s ease; } .bm2-overlay[data-fx="veins"] .bm2-vein { opacity: .75; } @media (max-width: 860px){ .bodymap { grid-template-columns: 1fr; gap: 22px; max-width: 560px; text-align: center; } .bm2-cats { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } .bm2-img { max-height: 480px; } } /* ---------- iron tea feature ---------- */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .feature__media { background: var(--cream-deep); border-radius: var(--radius); border: 1px solid var(--line); padding: 28px; display: flex; align-items: center; justify-content: center; } .feature__media img { max-height: 440px; width: auto; mix-blend-mode: multiply; } .feature__benefits { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; } .feature__benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; } .feature__benefits svg { flex: none; margin-top: 3px; color: var(--green-bright); } .trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 24px; } .chip { font-size: 12px; font-weight: 700; color: var(--green); background: rgba(31,178,90,.1); border: 1px solid rgba(31,178,90,.25); padding: 6px 11px; border-radius: var(--radius); } /* on the green band, tint chips light so they stay legible */ .section--green .chip { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); } @media (max-width: 860px){ .feature { grid-template-columns: 1fr; gap: 28px; } .feature__media img { max-height: 320px; } } /* ---------- buy box (subscribe-first) ---------- */ .buybox { background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-top: 8px; } .buyopt { display: flex; gap: 12px; align-items: center; border: 2px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; margin-bottom: 10px; transition: border-color .15s, background .15s; } .buyopt[data-active="true"] { border-color: var(--green); background: rgba(31,178,90,.06); } .buyopt input { accent-color: var(--green); width: 18px; height: 18px; } .buyopt__title { font-weight: 700; } .buyopt__save { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--cta-ink); background: var(--cta); padding: 4px 9px; border-radius: var(--radius); } .buyopt__note { font-size: 12.5px; color: var(--muted); } /* ---------- horizontal scroll row ---------- */ .scroll-row { display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 18px; scroll-snap-type: x mandatory; } .scroll-row > * { scroll-snap-align: start; flex: 0 0 250px; } .scroll-row::-webkit-scrollbar { height: 8px; } .scroll-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } /* ============ Best-seller cards (Module 5 — Four-Sigmatic-style, big + hover reveal) ============ */ .bsc-row { gap: 26px; padding: 8px 4px 26px; } .bsc-row > .bsc { scroll-snap-align: start; flex: 0 0 clamp(300px, 31.5%, 432px); /* ~3 across + a peek of the 4th */ } .bsc { display: flex; flex-direction: column; background: transparent; } .bsc__link { display: block; color: inherit; text-decoration: none; position: relative; } .bsc__tag { position: absolute; top: 0; left: 0; z-index: 2; background: var(--green); color: #f3fff8; font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 7px 14px; border-radius: 999px; } /* media: tall by default; shrinks on hover so content lifts and the button gets room */ .bsc__media { position: relative; height: 360px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; transition: height .45s cubic-bezier(.2,.8,.2,1); } .bsc__pack { max-height: 100%; max-width: 86%; width: auto; object-fit: contain; mix-blend-mode: multiply; /* white pack bg melts into the module cream */ transition: opacity .4s ease; } .bsc__life { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); opacity: 0; transition: opacity .4s ease; } .bsc__rating { display: flex; align-items: baseline; gap: 7px; font-size: 15px; } .bsc__rating .stars { color: var(--star); letter-spacing: 1px; font-size: 15px; } .bsc__rval { font-weight: 800; color: var(--ink); } .bsc__rmax { color: var(--muted); font-weight: 600; } .bsc__name { font-family: 'Lora', serif; font-size: 23px; font-weight: 600; margin: 8px 0 14px; line-height: 1.15; } .bsc__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .bsc__benefits li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink); font-weight: 500; } .bsc__chk { width: 20px; height: 20px; flex: none; color: var(--green-bright); background: rgba(31,178,90,.13); border-radius: 999px; padding: 3.5px; box-sizing: border-box; } /* buy box (outside the link, so it doesn't navigate) */ .bsc__buy { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; } .bsc__opt { display: flex; align-items: center; gap: 11px; width: 100%; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; font: inherit; text-align: left; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease; } .bsc__opt.is-sel { border-color: var(--cta); box-shadow: 0 0 0 1px var(--cta); } .bsc__radio { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--line); flex: none; position: relative; transition: border-color .2s; } .bsc__opt.is-sel .bsc__radio { border-color: var(--cta); } .bsc__opt.is-sel .bsc__radio::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--cta); } .bsc__optlabel { font-weight: 700; font-size: 14.5px; flex: 1; display: flex; align-items: center; gap: 7px; } .bsc__save { background: var(--cta); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; letter-spacing: .02em; } .bsc__price { font-size: 14.5px; font-weight: 700; white-space: nowrap; } .bsc__price s { color: var(--muted); font-weight: 600; margin-right: 6px; } .bsc__price b { color: var(--ink); } /* Add to cart — hidden until hover, then reveals (content has already lifted) */ .bsc__add { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; background: var(--cta); color: #fff; border: none; border-radius: 12px; font: inherit; font-weight: 800; font-size: 15.5px; letter-spacing: .02em; cursor: pointer; padding: 15px; transform: translateY(6px); transition: max-height .4s cubic-bezier(.2,.8,.2,1), opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1), margin-top .4s ease; } .bsc:hover .bsc__media { height: 282px; } .bsc:hover .bsc__pack { opacity: 0; } .bsc:hover .bsc__life { opacity: 1; } .bsc:hover .bsc__add { max-height: 62px; opacity: 1; transform: translateY(0); margin-top: 6px; } .bsc__add:hover { filter: brightness(.95); } @media (max-width: 760px){ .bsc-row > .bsc { flex-basis: 82%; } .bsc__media { height: 320px; } /* touch devices have no hover — keep the Add button visible */ .bsc__add { max-height: 62px; opacity: 1; transform: none; margin-top: 8px; } } /* ---------- steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 44px; } .step { text-align: center; } .step__n { width: 56px; height: 56px; border-radius: 999px; background: rgba(31,178,90,.12); color: var(--green); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .step h3 { font-size: 20px; margin: 0 0 6px; } .step p { color: var(--muted); font-size: 14.5px; margin: 0; } @media (max-width: 720px){ .steps { grid-template-columns: 1fr; gap: 30px; } } /* ---------- welcome offer ---------- */ .offer { background: linear-gradient(135deg, #12753a, #0b4f29); color: #fff; border-radius: var(--radius); padding: 48px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; position: relative; overflow: hidden; } .offer h2 { color: #fff; } .offer .lead { color: #d7ecdd; margin-left: 0; } .offer__card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); padding: 26px; text-align: center; } .offer__price { font-family: 'Lora',serif; font-size: 44px; font-weight: 600; } @media (max-width: 820px){ .offer { grid-template-columns: 1fr; padding: 32px; } } /* ---------- FAQ ---------- */ .faq { max-width: 760px; margin: 40px auto 0; } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 16.5px; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; color: var(--ink); } .faq__q span { color: var(--green); font-size: 22px; transition: transform .2s; } .faq__item[data-open="true"] .faq__q span { transform: rotate(45deg); } .faq__a { max-height: 0; overflow: hidden; transition: max-height .28s ease; color: var(--muted); font-size: 15px; } .faq__a p { margin: 0 0 20px; } /* ---------- footer ---------- */ .footer { background: var(--ink); color: #d9d4cb; padding: 64px 0 28px; } .footer a:hover { color: #fff; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 36px; } .footer__logo { height: 40px; filter: brightness(0) invert(1); opacity: .92; margin-bottom: 14px; } .footer h4 { color: #fff; font-family: 'Manrope',sans-serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; } .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; } .footer__news input { width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid #4a463f; background: #2e2a28; color: #fff; margin: 10px 0; } .footer__pay { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .footer__pay span { font-size: 11px; font-weight: 700; background: #2e2a28; border: 1px solid #4a463f; padding: 5px 9px; border-radius: var(--radius); } .footer__bottom { border-top: 1px solid #3a3633; margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: #9b958a; } @media (max-width: 860px){ .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 520px){ .footer__grid { grid-template-columns: 1fr; } } /* ---------- overlays: mobile menu, login modal, cart drawer ---------- */ .scrim { position: fixed; inset: 0; background: rgba(35,31,32,.5); opacity: 0; visibility: hidden; transition: opacity .25s; z-index: 80; } .scrim[data-open="true"] { opacity: 1; visibility: visible; } .panel { position: fixed; top: 0; bottom: 0; width: min(420px, 88vw); background: var(--cream); z-index: 90; transition: transform .28s ease; display: flex; flex-direction: column; } .panel__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); } .panel__head h3 { margin: 0; font-size: 18px; } .panel__body { padding: 22px; overflow-y: auto; flex: 1; } .panel__close { background: none; border: none; font-size: 26px; cursor: pointer; color: var(--ink); line-height: 1; } .drawer-right { right: 0; transform: translateX(100%); } .drawer-right[data-open="true"] { transform: translateX(0); } .drawer-left { left: 0; transform: translateX(-100%); } .drawer-left[data-open="true"] { transform: translateX(0); } .menu-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .menu-list a { display: block; padding: 13px 6px; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--line); } .modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; } .modal[data-open="true"] { display: flex; } .modal__card { background: var(--cream); border-radius: var(--radius); width: min(420px,100%); padding: 30px; position: relative; } .modal__card h3 { margin: 0 0 4px; font-size: 24px; } .field { display: block; margin: 14px 0; } .field span { font-size: 13px; font-weight: 700; } .field input { width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--cream-card); margin-top: 6px; font: inherit; } .tabs { display: flex; gap: 6px; background: var(--cream-deep); border-radius: var(--radius); padding: 4px; margin-bottom: 18px; } .tabs button { flex: 1; padding: 9px; border: none; background: none; border-radius: var(--radius); cursor: pointer; font: inherit; font-weight: 700; color: var(--muted); } .tabs button[data-active="true"] { background: var(--cream-card); color: var(--green); box-shadow: 0 1px 4px rgba(0,0,0,.06); } /* free shipping nudge in cart */ .ship-bar { background: var(--cream-deep); border-radius: var(--radius); padding: 14px; font-size: 13.5px; margin-bottom: 18px; } .ship-bar__track { height: 7px; background: #e0d6c1; border-radius: 999px; margin-top: 9px; overflow: hidden; } .ship-bar__fill { height: 100%; width: 62%; background: var(--green-bright); border-radius: 999px; } .cart-empty { text-align: center; color: var(--muted); padding: 40px 0; } /* ---------- botanical accents ---------- */ .botanical { position: absolute; opacity: .07; color: var(--green); pointer-events: none; z-index: 0; } .section > .wrap { position: relative; z-index: 1; } /* ---------- ornament system — soft, inert background motifs ---------- One per section, edges/corners only, behind content, never over dense text. Opacity stays in the 0.05–0.09 range; lighter tint on the dark green band. */ .ornament { position: absolute; pointer-events: none; z-index: 0; color: var(--green); opacity: .07; } .section--green .ornament { color: #aef0c6; opacity: .08; } .section--deep .ornament { opacity: .06; } .ornament svg { width: 100%; height: 100%; display: block; } /* keep all real content above the motif */ .page-head > .wrap { position: relative; z-index: 1; } /* count-up reveal */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } /* a11y helper */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Module 2 — trust-badge strip (standalone bar under hero) ---------- */ .trustbar { padding: 84px 0; position: relative; overflow: hidden; } /* the social-proof section directly below sits flush (its top air comes from the trust strip), so the gap above the badges equals the gap below them */ .trustbar + .section { padding-top: 0; } .trustbar__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 16px; } .trustbar__item { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--ink); /* resting state = the "hovered" look Martin liked */ background: #fff; border: 1px solid var(--cta); border-radius: 999px; padding: 11px 18px; box-shadow: 0 6px 18px rgba(35,211,106,.18); opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; } /* staggered entrance when the strip scrolls into view (.trustbar gets .in via the observer) */ .trustbar.in .trustbar__item { opacity: 1; transform: translateY(0); } .trustbar.in .trustbar__item:nth-child(1){ transition-delay:.04s } .trustbar.in .trustbar__item:nth-child(2){ transition-delay:.10s } .trustbar.in .trustbar__item:nth-child(3){ transition-delay:.16s } .trustbar.in .trustbar__item:nth-child(4){ transition-delay:.22s } .trustbar.in .trustbar__item:nth-child(5){ transition-delay:.28s } .trustbar.in .trustbar__item:nth-child(6){ transition-delay:.34s } .trustbar.in .trustbar__item:nth-child(7){ transition-delay:.40s } .trustbar__item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(35,211,106,.28); } .trustbar__item svg { width: 19px; height: 19px; flex: none; color: var(--cta); transform: scale(1.08); transition: transform .25s cubic-bezier(.2,.8,.2,1); } .trustbar__item:hover svg { transform: scale(1.2) rotate(-4deg); } @media (prefers-reduced-motion: reduce){ .trustbar__item { opacity: 1; transform: none; transition: none; } } @media (max-width: 760px){ .trustbar { padding: 56px 0; } .trustbar__row { gap: 12px 12px; } .trustbar__item { font-size: 13px; padding: 9px 14px; } } /* ---- Module 2 (variant) — big proof-points band, Four-Sigmatic-style ---- */ .trustbar--stats { padding: 88px 0; } .statgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; align-items: start; text-align: center; } .statgrid__item { position: relative; opacity: 0; transform: translateY(22px) scale(.96); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); } .statgrid__item + .statgrid__item::before { content: ""; position: absolute; left: -12px; top: 14%; height: 72%; width: 1px; background: linear-gradient(180deg, transparent, rgba(35,31,32,.14), transparent); } .statgrid__num { font-family: var(--serif, 'Lora', serif); font-weight: 700; line-height: .95; letter-spacing: -.01em; color: var(--green-bright); font-size: clamp(46px, 6.4vw, 82px); } .statgrid__sym { font-size: .58em; vertical-align: .12em; margin-left: .02em; } .statgrid__sym--unit { font-size: .42em; vertical-align: .22em; letter-spacing: 0; } .statgrid__label { margin-top: 12px; color: var(--ink); font-weight: 600; font-size: clamp(14px, 1.25vw, 17px); letter-spacing: .005em; line-height: 1.35; max-width: 15ch; margin-left: auto; margin-right: auto; } .trustbar.in .statgrid__item { opacity: 1; transform: translateY(0) scale(1); } .trustbar.in .statgrid__item:nth-child(1){ transition-delay:.06s } .trustbar.in .statgrid__item:nth-child(2){ transition-delay:.16s } .trustbar.in .statgrid__item:nth-child(3){ transition-delay:.26s } .trustbar.in .statgrid__item:nth-child(4){ transition-delay:.36s } @media (prefers-reduced-motion: reduce){ .statgrid__item { opacity: 1; transform: none; transition: none; } } @media (max-width: 760px){ .trustbar--stats { padding: 52px 0; } .statgrid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; } .statgrid__item + .statgrid__item::before { display: none; } .statgrid__item:nth-child(even)::before { content: ""; display: block; position: absolute; left: -10px; top: 14%; height: 72%; width: 1px; background: linear-gradient(180deg, transparent, rgba(35,31,32,.12), transparent); } } /* ---------- Module 6 — comparison (visual grid, not a table) ---------- */ .compare2 { margin-top: 48px; } .compare2__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px 4px; } .compare2__grid { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(140px, 1fr)); min-width: 720px; max-width: 940px; margin: 0 auto; align-items: stretch; } /* base cell */ .c2 { display: flex; align-items: center; justify-content: center; padding: 18px 16px; font-size: 15px; text-align: center; border-bottom: 1px solid var(--line); } /* feature label cells (left column) */ .c2--label { justify-content: flex-start; gap: 11px; text-align: left; font-weight: 700; font-size: 14.5px; color: var(--ink); } .c2--label svg { width: 20px; height: 20px; flex: none; color: var(--green); } .c2--label.c2--head { border-bottom: none; } /* header cells for the two muted columns */ .c2--head { font-weight: 700; font-size: 13px; color: var(--muted); line-height: 1.35; border-bottom: none; } .c2--other { color: var(--muted); } /* the elevated winner column — Alm */ .c2--alm { background: var(--cream-card); border-left: 2px solid var(--cta); border-right: 2px solid var(--cta); } .c2--head.c2--alm { flex-direction: column; gap: 8px; border-top: 2px solid var(--cta); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; padding-top: 20px; box-shadow: 0 -10px 30px rgba(35,211,106,.16); } .c2__badge { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cta-ink); background: var(--cta); padding: 4px 11px; border-radius: 999px; } .c2__alm-name { font-family: 'Lora', serif; font-size: 17px; font-weight: 600; color: var(--green); } /* last data row of the alm column closes the card. Grid is 4 cols; alm cells sit at child positions 2,6,10,14,18,22,26. Position 26 is the final alm cell. */ .compare2__grid > .c2:nth-child(26) { border-bottom: 2px solid var(--cta); border-radius: 0 0 var(--radius) var(--radius); } /* whole alm column gets the soft green glow at its header */ .compare2__grid { position: relative; } .compare2 .c2--head.c2--alm { box-shadow: 0 -10px 30px rgba(35,211,106,.18); } /* marks */ .c2mk { display: inline-flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; line-height: 1; } .c2mk-no { color: #c9c0ae; } .c2mk-na { color: var(--muted); font-weight: 600; } .c2mk-soft { color: #8bbf9d; } /* animated spring-green checks in the Alm column */ .c2--alm .c2mk-yes { color: var(--cta-dark); font-size: 21px; opacity: 0; transform: scale(.6); transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1); } .compare2.in .c2--alm .c2mk-yes { opacity: 1; transform: scale(1); } /* stagger each check by row (alm data cells at nth-child 6,10,14,18,22,26) */ .compare2__grid > .c2:nth-child(6) .c2mk-yes { transition-delay: .05s; } .compare2__grid > .c2:nth-child(10) .c2mk-yes { transition-delay: .14s; } .compare2__grid > .c2:nth-child(14) .c2mk-yes { transition-delay: .23s; } .compare2__grid > .c2:nth-child(18) .c2mk-yes { transition-delay: .32s; } .compare2__grid > .c2:nth-child(22) .c2mk-yes { transition-delay: .41s; } .compare2__grid > .c2:nth-child(26) .c2mk-yes { transition-delay: .50s; } @media (prefers-reduced-motion: reduce){ .c2--alm .c2mk-yes { opacity: 1; transform: none; transition: none; } } /* ===== Why-switch — two-panel "ordinary vs Alm" contrast ===== */ .vs { display:flex; gap:18px; align-items:stretch; justify-content:center; max-width:840px; margin:46px auto 0; text-align:left; } .vs__panel { flex:1 1 0; min-width:0; border-radius:18px; padding:26px 26px 28px; position:relative; } .vs__panel--other { background:transparent; border:1px solid var(--line); } .vs__panel--alm { background:#fff; border:2px solid var(--cta); box-shadow:0 18px 44px rgba(35,211,106,.18); } .vs__title { font-family:'Lora', serif; font-size:18px; font-weight:600; color:var(--muted); margin-bottom:18px; } .vs__title--alm { color:var(--green); } .vs__badge { position:absolute; top:-13px; left:26px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--cta-ink); background:var(--cta); padding:5px 12px; border-radius:999px; } .vs__corner { position:absolute; top:20px; right:22px; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:800; line-height:1; } .vs__corner--yes { background:var(--cta); color:var(--cta-ink); box-shadow:0 4px 12px rgba(35,211,106,.35); } .vs__corner--no { background:#ece6da; color:#b0a48d; } .vs__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; } .vs__list li { display:flex; align-items:center; gap:13px; font-size:14.5px; line-height:1.3; } .vs__panel--other .vs__list li { color:var(--muted); } .vs__panel--alm .vs__list li { color:var(--ink); font-weight:600; } .vs__ic { flex:none; width:38px; height:38px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; } .vs__ic svg { width:20px; height:20px; } .vs__panel--other .vs__ic { background:#ece6da; color:#b0a48d; } .vs__panel--alm .vs__ic { background:rgba(35,211,106,.13); color:var(--green); } /* ---- entrance animation (triggered when .vs gains .in via the reveal observer) ---- */ .vs.reveal { opacity:1; transform:none; } /* container is just the trigger; panels animate themselves */ .vs__panel { opacity:0; transition:opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1); will-change:transform, opacity; } .vs__panel--alm { transform:translateX(-30px) scale(.97); } .vs__panel--other { transform:translateX(30px); transition-delay:.08s; } .vs.in .vs__panel { opacity:1; transform:none; } .vs.in .vs__panel--alm { animation:vsGlow 1.5s ease .55s 1; } @keyframes vsGlow { 0% { box-shadow:0 18px 44px rgba(35,211,106,.18); } 45% { box-shadow:0 20px 64px rgba(35,211,106,.5); } 100% { box-shadow:0 18px 44px rgba(35,211,106,.18); } } /* green Alm icons pop in, staggered */ .vs__panel--alm .vs__ic { opacity:0; transform:scale(.5); transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1); } .vs.in .vs__panel--alm .vs__ic { opacity:1; transform:scale(1); } .vs.in .vs__panel--alm li:nth-child(1) .vs__ic { transition-delay:.34s; } .vs.in .vs__panel--alm li:nth-child(2) .vs__ic { transition-delay:.41s; } .vs.in .vs__panel--alm li:nth-child(3) .vs__ic { transition-delay:.48s; } .vs.in .vs__panel--alm li:nth-child(4) .vs__ic { transition-delay:.55s; } .vs.in .vs__panel--alm li:nth-child(5) .vs__ic { transition-delay:.62s; } .vs.in .vs__panel--alm li:nth-child(6) .vs__ic { transition-delay:.69s; } /* corner verdict stamps bounce in last */ .vs__corner { opacity:0; transform:scale(0) rotate(-25deg); transition:opacity .4s ease, transform .55s cubic-bezier(.34,1.8,.64,1); transition-delay:.7s; } .vs.in .vs__corner { opacity:1; transform:scale(1) rotate(0); } @media (prefers-reduced-motion: reduce){ .vs__panel, .vs__corner, .vs__panel--alm .vs__ic { opacity:1 !important; transform:none !important; transition:none !important; } .vs.in .vs__panel--alm { animation:none !important; } } @media (max-width:620px){ .vs { flex-direction:column; gap:26px; max-width:420px; } .vs__panel--alm, .vs__panel--other { transform:translateY(22px); } .vs.in .vs__panel { transform:none; } } @media (max-width: 760px){ .compare2__grid { min-width: 640px; } .c2 { padding: 14px 10px; font-size: 14px; } .c2--label { font-size: 13px; } .c2--head { font-size: 12px; } } /* ---------- Module C — sourcing photo media (reuses .feature) ---------- */ .feature__media--photo { padding: 0; overflow: hidden; border: none; background: none; } .feature__media--photo img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius); mix-blend-mode: normal; } @media (max-width: 860px){ .feature__media--photo img { max-height: 320px; } } /* ---------- Module D — why subscribe ---------- */ .subgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 48px; text-align: left; } .subcard { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 24px 22px; } .subcard__icon { color: var(--cta); width: 30px; height: 30px; margin-bottom: 14px; } .subcard__icon svg { width: 30px; height: 30px; } .subcard__title { font-family: 'Lora', serif; font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 6px; } .subcard__sub { font-size: 13.5px; color: #d7ecdd; margin: 0; } @media (max-width: 880px){ .subgrid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 480px){ .subgrid { grid-template-columns: 1fr; } } /* ---------- Module E — closing CTA + email capture ---------- */ .closing { max-width: 860px; margin: 0 auto; text-align: center; background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 48px; box-shadow: 0 14px 40px rgba(35,31,32,.07); } .closing__divider { height: 1px; background: var(--line); margin: 36px auto 0; max-width: 460px; } .closing__hook { font-weight: 800; font-size: 16px; margin: 28px 0 14px; } .closing__capture { display: flex; gap: 10px; justify-content: center; max-width: 460px; margin: 0 auto; } .closing__capture input { flex: 1; min-width: 0; padding: 13px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--cream); color: var(--ink); font: inherit; } .closing__capture input:focus { outline: none; border-color: var(--green); } .closing__capture .btn { flex: none; } .closing__note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; } @media (max-width: 560px){ .closing { padding: 32px 22px; } .closing__capture { flex-direction: column; } .closing__capture .btn { width: 100%; justify-content: center; } } /* ---------- Module 4 — quiz CTA ---------- */ .quizcta { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 44px; box-shadow: 0 14px 40px rgba(35,31,32,.06); } .quizcta__art { position: relative; min-height: 230px; display: flex; align-items: center; justify-content: center; background: var(--cream-deep); border-radius: var(--radius); overflow: hidden; padding: 24px; } .quizcta__pouch { position: absolute; width: auto; mix-blend-mode: multiply; filter: drop-shadow(0 10px 22px rgba(35,31,32,.14)); } .quizcta__pouch--a { height: 76%; z-index: 3; transform: translateX(0) rotate(-3deg); } .quizcta__pouch--b { height: 60%; z-index: 2; transform: translateX(-86px) rotate(-10deg); opacity: .9; } .quizcta__pouch--c { height: 60%; z-index: 1; transform: translateX(86px) rotate(8deg); opacity: .9; } .quizcta__copy { text-align: left; } @media (max-width: 860px){ .quizcta { grid-template-columns: 1fr; gap: 26px; padding: 30px 26px; } .quizcta__art { min-height: 200px; } .quizcta__copy { text-align: center; } } /* ---------- Module 7 — welcome offer badge (on reframed Iron feature) ---------- */ .welcome-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .welcome-badge { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cta-ink); background: var(--cta); padding: 5px 12px; border-radius: 999px; white-space: nowrap; } /* ---------- Module 7 — Welcome Kit (build-your-own, AG1-style value card) ---------- */ .kit { align-items: stretch; } .kit__picker { display: flex; flex-direction: column; justify-content: center; } .kit__select { margin-top: 22px; } .kit__select:first-of-type { margin-top: 28px; } .kit__select-label { display: block; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--green); margin-bottom: 9px; } .kit__select-row { display: flex; align-items: center; gap: 14px; } .kit__thumb { width: 64px; height: 64px; flex: none; border-radius: var(--radius); background: var(--cream-deep); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 7px; overflow: hidden; } .kit__thumb img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; } .kit__field { position: relative; flex: 1; min-width: 0; display: block; } .kit__dropdown { width: 100%; font: inherit; font-weight: 700; font-size: 15px; color: var(--ink); border: 1.5px solid var(--line); background: var(--cream-card); border-radius: var(--radius); padding: 13px 92px 13px 14px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312753a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 17px; transition: border-color .15s ease, box-shadow .15s ease; } .kit__dropdown:hover { border-color: var(--green); } .kit__dropdown:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,178,90,.14); } /* info toggle + expanding detail */ .kit__info-btn { flex: none; width: 40px; height: 40px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); background: var(--cream-card); color: var(--green); transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; } .kit__info-btn svg { width: 19px; height: 19px; } .kit__rating { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); pointer-events: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; color: var(--ink); } .kit__rating svg { width: 15px; height: 15px; color: var(--star); } .kit__info-btn:hover { border-color: var(--green); background: rgba(31,178,90,.08); } .kit__info-btn[aria-expanded="true"] { background: var(--green); border-color: var(--green); color: #fff; } .kit__info { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; } .kit__info.open { grid-template-rows: 1fr; } .kit__info-inner { overflow: hidden; min-height: 0; } .kit__info.open .kit__info-inner { margin-top: 11px; padding: 13px 15px; background: rgba(31,178,90,.06); border: 1px solid var(--line); border-left: 3px solid var(--cta); border-radius: var(--radius); } .kit__info-cat { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--green); background: var(--cream-deep); padding: 4px 10px; border-radius: 999px; } .kit__info-benefit { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); } /* value card */ .kit__card { background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 30px 26px; box-shadow: 0 18px 48px rgba(35,31,32,.10); display: flex; flex-direction: column; } .kit__card-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .kit__card-title { font-family: 'Lora', serif; font-size: 22px; font-weight: 600; margin: 0; } .kit__included { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } .kit__included-h { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .kit__list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; } .kit__list li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; } .kit__list svg { flex: none; color: var(--green-bright); } .kit__rows { margin-top: 22px; display: grid; gap: 11px; } .kit__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--muted); } .kit__row-val { font-weight: 800; color: var(--ink); } .kit__row-val s { color: var(--muted); font-weight: 600; } .kit__price { font-family: 'Lora', serif; font-size: 30px; font-weight: 600; color: var(--green); } .kit__save-pill { font-size: 13px; font-weight: 800; color: var(--cta-ink); background: var(--cta); padding: 6px 12px; border-radius: 999px; white-space: nowrap; } .kit__bar { height: 36px; background: var(--cream-deep); border: 1px solid var(--line); border-radius: 999px; margin-top: 22px; overflow: hidden; position: relative; } .kit__bar-fill { height: 100%; width: 70%; background: linear-gradient(90deg, var(--green-bright), var(--cta)); border-radius: 999px; display: flex; align-items: center; justify-content: flex-end; padding-right: 16px; box-shadow: 0 4px 14px rgba(35,211,106,.32); } .kit__bar-tag { font-size: 12.5px; font-weight: 700; color: var(--cta-ink); white-space: nowrap; } .kit__bar-tag b { font-weight: 800; } .kit__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; } .kit__stat { text-align: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 12px; } .kit__stat--hero { background: rgba(31,178,90,.08); border-color: var(--cta); } .kit__stat-num { display: block; font-family: 'Lora', serif; font-size: 32px; font-weight: 600; line-height: 1; color: var(--ink); } .kit__stat--hero .kit__stat-num { color: var(--green); } .kit__stat-lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 6px; } .kit__cta { width: 100%; justify-content: center; margin-top: 24px; } .kit__trust { text-align: center; margin-top: 12px; } @media (max-width: 860px){ .kit__card { padding: 26px 22px 24px; } .kit__price { font-size: 26px; } } /* ---- Welcome Kit: layered scroll-reveal (triggered by .kit.in) ---- */ .kit .kit__picker, .kit .kit__card { opacity: 0; transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .kit .kit__picker { transform: translateX(-34px); } .kit .kit__card { transform: translateY(38px); transition-delay: .12s; } .kit.in .kit__picker, .kit.in .kit__card { opacity: 1; transform: none; } /* the value bar sweeps to fill once the card has settled (tag rides in with it) */ .kit .kit__bar-fill { width: 0; transition: width 1s cubic-bezier(.22,.61,.36,1) .85s; } .kit.in .kit__bar-fill { width: 70%; } /* the two headline stats pop in last, with a gentle overshoot */ .kit .kit__stat { opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1); } .kit.in .kit__stat { opacity: 1; transform: none; } .kit.in .kit__stat:nth-child(1) { transition-delay: .95s; } .kit.in .kit__stat:nth-child(2) { transition-delay: 1.08s; } @media (prefers-reduced-motion: reduce){ .kit .kit__picker, .kit .kit__card, .kit .kit__stat { opacity: 1 !important; transform: none !important; transition: none !important; } .kit .kit__bar-fill { width: 70%; transition: none; } } /* ============ Legal / policy pages ============ */ .legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 72px; } .legal h1 { font-size: clamp(30px, 4.4vw, 42px); font-weight: 600; margin: 6px 0 0; } .legal__updated { font-size: 12.5px; color: var(--muted); font-style: italic; margin: 12px 0 0; } .legal__lead { color: var(--muted); font-size: 17px; margin: 18px 0 0; } .legal h2 { font-size: 22px; font-weight: 600; margin: 38px 0 0; } .legal p { color: #4f4a40; font-size: 15.5px; margin: 12px 0 0; } .legal ul { color: #4f4a40; font-size: 15.5px; margin: 12px 0 0; padding-left: 22px; display: grid; gap: 7px; } .legal a { color: var(--green); font-weight: 600; } .legal a:hover { text-decoration: underline; } .legal__note { font-size: 13px; color: var(--muted); background: var(--cream-deep); border-radius: var(--radius); padding: 14px 16px; margin-top: 30px; } /* ---------- contact form ---------- */ .contact-form { display: grid; gap: 16px; margin-top: 26px; max-width: 560px; } .contact-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; } .contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--cream-card); color: var(--ink); font: inherit; font-weight: 500; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--green); } .contact-form textarea { resize: vertical; min-height: 130px; } .contact-form .btn { justify-self: start; } .contact-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; } /* ============ Shop All page ============ */ .page-head { background: var(--cream-deep); padding: 56px 0 44px; text-align: center; position: relative; overflow: hidden; } .page-head h1 { font-size: clamp(32px, 4.4vw, 48px); margin: 10px 0 0; font-weight: 600; } .page-head .lead { margin-top: 12px; } .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 26px; } .shop-count { font-weight: 700; font-size: 14px; color: var(--muted); } .shop-sort { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); } .shop-sort select { font: inherit; font-weight: 600; color: var(--ink); border: 1px solid var(--line); background: var(--cream-card); border-radius: var(--radius); padding: 8px 12px; cursor: pointer; } .filterbar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 28px; } .filter-chip { font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); background: var(--cream-card); color: var(--ink); padding: 9px 16px; border-radius: var(--radius); transition: all .15s ease; } .filter-chip:hover { border-color: var(--green); color: var(--green); } .filter-chip[data-active="true"] { background: var(--green); border-color: var(--green); color: #fff; } .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 980px){ .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 560px){ .shop-grid { grid-template-columns: 1fr; } } .pcard__imglink, .pcard__body a { display: block; } .pcard__name { transition: color .15s; } .pcard__body a:hover .pcard__name { color: var(--green); } /* ============ Product page ============ */ .breadcrumb { font-size: 13px; color: var(--muted); padding: 22px 0 0; } .breadcrumb a:hover { color: var(--green); } .breadcrumb span { margin: 0 6px; } .product { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; padding: 26px 0 10px; align-items: start; } @media (max-width: 900px){ .product { grid-template-columns: 1fr; gap: 30px; } } /* gallery — Four-Sigmatic-style 2-column image mosaic; buy column sticks */ .gallery--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .gallery--single { display: block; } .gtile { aspect-ratio: 1/1; background: var(--cream-deep); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .gtile img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; display: block; } .prod-info { position: sticky; top: 96px; align-self: start; } @media (max-width: 900px){ .prod-info { position: static; } .gallery--grid { gap: 10px; } } /* info column */ .prod-cat { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--green-bright); } .prod-title { font-size: clamp(30px, 4vw, 42px); margin: 8px 0 10px; font-weight: 600; } .prod-rating { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 14px; } .prod-rating .stars { color: var(--star); letter-spacing: 1px; font-size: 16px; } .prod-desc { font-size: 16px; color: #4f4a40; } .prod-benefits { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 11px; } .prod-benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; } .prod-benefits svg { flex: none; margin-top: 3px; color: var(--green-bright); } .prod-note { font-size: 13px; color: var(--muted); background: var(--cream-deep); border-radius: var(--radius); padding: 10px 14px; margin: 4px 0 0; } /* accordions */ .acc { margin-top: 24px; border-top: 1px solid var(--line); } .acc__item { border-bottom: 1px solid var(--line); } .acc__q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 15.5px; padding: 16px 0; display: flex; justify-content: space-between; gap: 16px; color: var(--ink); } .acc__q span { color: var(--green); font-size: 20px; transition: transform .2s; } .acc__item[data-open="true"] .acc__q span { transform: rotate(45deg); } .acc__a { max-height: 0; overflow: hidden; transition: max-height .28s ease; color: var(--muted); font-size: 14.5px; } .acc__a > div { padding: 0 0 18px; } .acc__a p { margin: 0 0 8px; } .acc__plan { background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; } .acc__plan b { color: var(--green); } /* product brand strip */ .brandstrip { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 8px; background: var(--cream-deep); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } .trustitem { display: flex; align-items: center; gap: 14px; padding: 24px 26px; position: relative; } .trustitem + .trustitem::before { content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: rgba(0,0,0,.08); } .trustitem__ic { width: 46px; height: 46px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--green); box-shadow: 0 5px 12px -6px rgba(12,43,25,.32); } .trustitem__ic svg { width: 25px; height: 25px; } .trustitem__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .trustitem__tx b { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.2; } .trustitem__tx small { font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.25; } @media (max-width: 760px){ .brandstrip { grid-template-columns: repeat(2,1fr); } .trustitem { padding: 18px 18px; } .trustitem + .trustitem::before { display: none; } .trustitem:nth-child(n+3) { border-top: 1px solid var(--line); } .trustitem:nth-child(even) { border-left: 1px solid var(--line); } } /* ============ Quiz page ============ */ .quiz-main { min-height: 70vh; } .quiz-shell { max-width: 860px; margin: 0 auto; background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 44px 48px; box-shadow: 0 16px 44px rgba(35,31,32,.07); } .quiz-q { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.18; margin: 12px 0 0; font-weight: 600; } /* progress */ .quiz-progress { max-width: 460px; margin: 0 auto 34px; } .quiz-progress__bar { height: 8px; background: var(--cream-deep); border-radius: 999px; overflow: hidden; } .quiz-progress__fill { height: 100%; width: 50%; background: var(--cta); border-radius: 999px; transition: width .4s cubic-bezier(.22,.85,.25,1); } .quiz-progress__label { text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 10px; } /* steps */ .quiz-step { display: none; } .quiz-step.is-active { display: block; animation: quizIn .4s ease both; } @keyframes quizIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce){ .quiz-step.is-active { animation: none; } } /* option grids */ .quiz-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 34px; } .quiz-options--wide { grid-template-columns: repeat(3,1fr); max-width: 620px; margin-left: auto; margin-right: auto; } .quiz-opt { position: relative; cursor: pointer; font: inherit; background: var(--cream); border: 2px solid var(--line); border-radius: var(--radius); padding: 20px 16px; text-align: center; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; } .quiz-opt:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(35,31,32,.07); } .quiz-opt.is-selected { border-color: var(--cta); background: rgba(35,211,106,.08); box-shadow: 0 8px 22px rgba(35,211,106,.18); } .quiz-opt__label { font-weight: 700; font-size: 14.5px; } .quiz-opt__icon { width: 30px; height: 30px; color: var(--green); } .quiz-opt.is-selected .quiz-opt__icon { color: var(--cta-dark); } .quiz-opt__tick { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 999px; background: var(--cta); color: var(--cta-ink); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s cubic-bezier(.34,1.56,.64,1); } .quiz-opt.is-selected .quiz-opt__tick { opacity: 1; transform: scale(1); } /* nav row */ .quiz-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 36px; flex-wrap: wrap; } .quiz-nav--center { justify-content: center; } .quiz-nav .btn:disabled { opacity: .45; cursor: not-allowed; } .quiz-nav .btn:disabled:hover { background: var(--cta); box-shadow: none; } /* result */ .quiz-card { display: grid; grid-template-columns: 1fr 1.2fr; gap: 34px; align-items: center; margin-top: 32px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; } .quiz-card__media { background: var(--cream-deep); border-radius: var(--radius); padding: 24px; display: flex; align-items: center; justify-content: center; aspect-ratio: 4/5; } .quiz-card__media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; } .quiz-card__name { font-family: 'Lora', serif; font-size: clamp(22px, 3vw, 28px); font-weight: 600; margin: 8px 0 8px; } .quiz-card__benefit { color: var(--muted); font-size: 15.5px; margin: 0 0 16px; } .quiz-card__cta { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 760px){ .quiz-shell { padding: 30px 22px 36px; } .quiz-options { grid-template-columns: repeat(2,1fr); } .quiz-options--wide { grid-template-columns: 1fr; } .quiz-card { grid-template-columns: 1fr; gap: 22px; text-align: center; } .quiz-card__cta { justify-content: center; } .quiz-card__media { max-width: 240px; margin: 0 auto; aspect-ratio: 1/1; } } /* ---------- Module 12: brand standard + public opinion (credibility band) ---------- */ .bstd { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 50px; align-items: start; text-align: left; } .bstd__title { font-family: 'Lora', serif; font-size: clamp(32px, 3.8vw, 50px); font-weight: 600; line-height: 1.04; color: var(--ink); margin: 6px 0 0; } .bstd__intro { color: var(--muted); margin: 16px 0 0; font-size: 15.5px; line-height: 1.55; max-width: 360px; } .bstd__art { display: block; margin-top: 30px; color: var(--green-bright); opacity: .85; } .bstd__art svg { width: 116px; height: 86px; } .bstd__stat { font-family: 'Lora', serif; font-size: clamp(46px, 5vw, 64px); font-weight: 600; color: var(--green); line-height: 1; letter-spacing: -.01em; } .bstd__stat-sub { color: var(--ink); font-size: 16.5px; font-weight: 600; margin-top: 10px; max-width: 230px; line-height: 1.35; } .bstd__rule { height: 1px; background: var(--line); margin: 26px 0; } .bstd__badge { display: inline-flex; align-items: stretch; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 16px rgba(18,117,58,.18); } .bstd__badge b { display: flex; align-items: center; background: var(--green); color: #fff; font-family: 'Lora', serif; font-size: 20px; font-weight: 600; padding: 8px 14px; } .bstd__badge span { display: flex; align-items: center; background: var(--cream-card); border: 1px solid var(--line); border-left: none; color: var(--ink); font-weight: 700; font-size: 13.5px; padding: 8px 14px; } .bstd__note { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 16px 0 0; max-width: 250px; } .bstd__qh { font-family: 'Lora', serif; font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 14px; } .bstd__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .bstd__list li { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 15px; color: var(--ink); } .bstd__list li span.bstd__ic { flex: none; width: 32px; height: 32px; border-radius: 999px; background: rgba(31,178,90,.12); color: var(--green); display: flex; align-items: center; justify-content: center; } .bstd__list li span.bstd__ic svg { width: 18px; height: 18px; } .bstd__source { font-style: italic; color: var(--muted); font-size: 13px; margin: 36px 0 0; } /* staggered rise-in for the three columns */ .bstd-rise { opacity: 0; } .bstd-rise.in { opacity: 1; animation: bstdRise .62s cubic-bezier(.22,.9,.3,1) backwards; } .bstd .bstd-rise:nth-child(1).in { animation-delay: 0s; } .bstd .bstd-rise:nth-child(2).in { animation-delay: .13s; } .bstd .bstd-rise:nth-child(3).in { animation-delay: .26s; } @keyframes bstdRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* full-family lineup band */ .bstd__lineup { margin-top: 42px; text-align: center; } .bstd__lineup--top { margin-top: 0; margin-bottom: 100px; } .bstd__lineup-cap { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .bstd__lineup-img { border-radius: 16px; overflow: hidden; box-shadow: 0 22px 50px rgba(12,43,25,.20); } .bstd__lineup-img img { width: 100%; height: auto; display: block; } .bstd__lineup.in .bstd__lineup-img { animation: bstdFloat 7s ease-in-out infinite; } @keyframes bstdFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @media (max-width: 860px){ .bstd { grid-template-columns: 1fr 1fr; gap: 36px 40px; } .bstd__head { grid-column: 1 / -1; } .bstd__art { display: none; } } @media (max-width: 540px){ .bstd { grid-template-columns: 1fr; gap: 30px; } } @media (prefers-reduced-motion: reduce){ .bstd-rise { opacity: 1; } .bstd-rise.in { animation: none; } .bstd__lineup.in .bstd__lineup-img { animation: none; } } /* ---------- Module 12 v2: refined credibility trio ---------- */ .bstd2 { text-align: center; } .bstd2__intro { max-width: 700px; margin: 0 auto; } .bstd2__title { font-family: 'Lora', serif; font-size: clamp(30px,3.6vw,46px); font-weight: 600; line-height: 1.05; color: var(--ink); margin: 6px 0 0; } .bstd2__lead { color: var(--muted); font-size: 16px; margin: 16px auto 0; line-height: 1.55; max-width: 600px; } .bstd2__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 46px; } .bstd2__card { position: relative; background: var(--cream-card); border: 1px solid var(--line); border-radius: 20px; padding: 40px 26px 34px; display: flex; flex-direction: column; align-items: center; overflow: hidden; box-shadow: 0 4px 10px rgba(12,43,25,.08), 0 22px 44px -16px rgba(12,43,25,.30); transition: transform .28s cubic-bezier(.22,.85,.3,1), box-shadow .28s ease; } .bstd2__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green-bright), var(--cta)); } .bstd2__card:hover { transform: translateY(-6px); box-shadow: 0 8px 18px rgba(12,43,25,.12), 0 34px 60px -18px rgba(12,43,25,.42); } .bstd2__ic { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(31,178,90,.12); color: var(--green); margin-bottom: 18px; } .bstd2__ic svg { width: 32px; height: 32px; } .bstd2__num { font-family: 'Lora', serif; font-size: clamp(40px,4.6vw,56px); font-weight: 600; color: var(--green); line-height: 1; letter-spacing: -.01em; } .bstd2__lbl { color: var(--ink); font-weight: 600; font-size: 15.5px; margin-top: 12px; max-width: 220px; line-height: 1.4; } .bstd2__card--accent { background: linear-gradient(158deg, #17683a, #115f31); border-color: transparent; box-shadow: 0 8px 18px rgba(18,117,58,.30), 0 26px 50px -16px rgba(18,117,58,.5); } .bstd2__card--accent::before { background: rgba(255,255,255,.45); } .bstd2__card--accent .bstd2__ic { background: rgba(255,255,255,.16); color: #fff; } .bstd2__card--accent .bstd2__num { color: #fff; } .bstd2__card--accent .bstd2__lbl { color: #dcefe1; } .bstd2__diff { margin-top: 46px; } .bstd2__diff-h { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .bstd2__diff-row { display: flex; justify-content: center; gap: 16px 42px; flex-wrap: wrap; } .bstd2__diff-item { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 15px; color: var(--ink); } .bstd2__diff-item .ic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(31,178,90,.12); color: var(--green); display: flex; align-items: center; justify-content: center; } .bstd2__diff-item .ic svg { width: 19px; height: 19px; } /* stat-card stagger reuses the bstdRise keyframe via .bstd-rise */ .bstd2__stats .bstd-rise:nth-child(1).in { animation-delay: 0s; } .bstd2__stats .bstd-rise:nth-child(2).in { animation-delay: .12s; } .bstd2__stats .bstd-rise:nth-child(3).in { animation-delay: .24s; } @media (max-width: 760px){ .bstd2__stats { grid-template-columns: 1fr; gap: 18px; } .bstd2__diff-row { flex-direction: column; align-items: flex-start; gap: 14px; max-width: 320px; margin: 0 auto; } } /* ---------- Module 11b: problem → tea → review carousel (center mode) ---------- */ .probc { margin: 16px auto 0; } .probc__stage { position: relative; } .probc__viewport { overflow-x: clip; overflow-y: visible; padding: 8px 0; } .probc__track { display: flex; gap: 26px; transition: transform .55s cubic-bezier(.22,.85,.3,1); will-change: transform; } .probc__slide { flex: 0 0 auto; width: clamp(260px, 36vw, 430px); transition: transform .45s ease, opacity .45s ease; transform: scale(.84); opacity: .42; } .probc__slide.is-active { transform: scale(1); opacity: 1; } .probc__card { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; appearance: none; font: inherit; text-align: left; position: relative; aspect-ratio: 3/2; border-radius: 20px; overflow: hidden; background: var(--cream-card); box-shadow: 0 16px 36px rgba(12,43,25,.22); } .probc__slide.is-active .probc__card { box-shadow: 0 26px 56px rgba(12,43,25,.34); } .probc__img { width: 100%; height: 100%; object-fit: cover; display: block; } .probc__tag { position: absolute; top: 14px; left: 14px; background: rgba(255,253,248,.94); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: var(--ink); font-weight: 800; font-size: 13px; padding: 7px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.18); } .probc__tea { position: absolute; right: 14px; bottom: 14px; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; background: var(--cream-card); border: 2px solid #fff; box-shadow: 0 12px 26px rgba(0,0,0,.30); display: flex; align-items: center; justify-content: center; } .probc__tea img { width: 100%; height: 100%; object-fit: cover; } .probc__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream-card); color: var(--green); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(12,43,25,.22); transition: background .15s ease, color .15s ease, transform .15s ease; z-index: 5; } .probc__arrow:hover { background: var(--green); color: #fff; transform: translateY(-50%) scale(1.06); } .probc__arrow--prev { left: 10px; } .probc__arrow--next { right: 10px; } .probc__review { max-width: 600px; margin: 26px auto 0; min-height: 104px; transition: opacity .2s ease; } .probc__review.is-fading { opacity: 0; } .probc__stars { color: var(--star); letter-spacing: 2px; font-size: 18px; } .probc__quote { font-family: 'Lora', serif; font-style: italic; font-size: clamp(17px,2vw,21px); line-height: 1.5; margin: 12px 0 10px; color: var(--ink); } .probc__who { font-size: 14px; color: var(--muted); } .probc__who b { color: var(--ink); } .probc__who a { color: var(--green); font-weight: 700; } .probc__dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; } .probc__dot { width: 9px; height: 9px; border-radius: 999px; border: none; background: var(--line); cursor: pointer; padding: 0; transition: background .2s ease, transform .2s ease; } .probc__dot.is-active { background: var(--green); transform: scale(1.3); } @media (max-width: 560px){ .probc__slide { flex-basis: 78vw; } .probc__tea { width: 70px; height: 70px; } } /* ---------- organic wave dividers on the green bands (soft module transitions) ---------- */ .section--green::before, .section--green::after { content: ""; position: absolute; left: 0; right: 0; height: 40px; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; } .section--green::before { top: -1px; } .section--green::after { bottom: -1px; transform: rotate(180deg); } /* sep-cd = cream above, deep below ; sep-dc = deep above, cream below */ .sep-cd::before, .sep-dc::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0L1440 0L1440 24C1152 48 864 0 720 24C576 48 288 0 0 24Z' fill='%23faf6ee'/%3E%3C/svg%3E"); } .sep-cd::after, .sep-dc::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0L1440 0L1440 24C1152 48 864 0 720 24C576 48 288 0 0 24Z' fill='%23f2eadb'/%3E%3C/svg%3E"); } /* ===== Toggleable wave dividers on the cream/deep boundaries ===== BACKDOOR: these render ONLY while has the `data-waves` attribute. To revert to flat boundaries, delete `data-waves` from the tag. */ body[data-waves] .wv-top::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 38px; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; } /* fill = the colour of the section ABOVE, so it dips into this one */ body[data-waves] .wv-top.wv-cream::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0L1440 0L1440 24C1152 48 864 0 720 24C576 48 288 0 0 24Z' fill='%23faf6ee'/%3E%3C/svg%3E"); } body[data-waves] .wv-top.wv-deep::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0L1440 0L1440 24C1152 48 864 0 720 24C576 48 288 0 0 24Z' fill='%23f2eadb'/%3E%3C/svg%3E"); } /* gentle variation so the curves aren't all identical */ body[data-waves] .wv-top.wv-flip::before { transform: scaleX(-1); } body[data-waves] .wv-top.wv-soft::before { height: 30px; } /* ---------- photographic botanical decorations (replacing line-art ornaments) ---------- */ .bdeco { position: absolute; z-index: 0; pointer-events: none; user-select: none; opacity: .92; filter: drop-shadow(0 12px 22px rgba(20,40,25,.14)); } .bdeco img { width: 100%; height: auto; display: block; } /* ---------- botanical decoration layer (bridges module boundaries) ---------- */ .bot-layer { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 3; pointer-events: none; } .bdeco { position: absolute; pointer-events: none; user-select: none; filter: drop-shadow(0 12px 22px rgba(20,40,25,.18)); } .bdeco img { width: 100%; height: auto; display: block; } /* ---------- transparent header over the hero (homepage top only) ---------- */ /* the hero rises under the transparent header; it's made taller (calc(86vh + 90px) + padding-top) so the video gains the header's height instead of the content feeling cramped */ .hero { margin-top: -90px; } @media (max-width: 860px){ .hero { margin-top: -64px; min-height: calc(86vh + 64px); padding-top: 64px; } } /* safety net: never allow a sideways scroll (botanicals are kept on-screen, so this shouldn't trigger — but clip guards against any stray overflow without a white gutter) */ body { overflow-x: clip; } .header { transition: background .35s ease, border-color .35s ease; } .header__logo img { transition: filter .35s ease; } .header--top { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } .header--top .iconbtn { color: #fff; } .header--top .iconbtn:hover { color: #d7ecdd; } .header--top .burger span { background: #fff; } .header--top .header__logo img { filter: brightness(0) invert(1); } /* ============================================================= PRODUCT PAGE — conversion modules (prefix: .pdp-) Appended; reuses homepage tokens, shadows, type scale. ============================================================= */ .pdp-microdisc { text-align: center; font-style: italic; color: var(--muted); font-size: 12.5px; margin: 24px 0 0; } /* ---- Module 1 — benefit deep-dive cards ---- */ .pdp-bgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 40px; } .pdp-bcard { background: var(--cream-card); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 10px rgba(12,43,25,.06), 0 18px 38px -18px rgba(12,43,25,.24); transition: transform .28s cubic-bezier(.22,.85,.3,1), box-shadow .28s ease; } .pdp-bcard:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(12,43,25,.10), 0 30px 54px -20px rgba(12,43,25,.36); } .pdp-bcard__ic { width: 56px; height: 56px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(31,178,90,.12); color: var(--green); } .pdp-bcard__txt { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.5; } /* ---- Module 2 — what's inside (herb chips) ---- */ .pdp-herbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; max-width: 860px; margin-left: auto; margin-right: auto; } .pdp-herb { display: inline-flex; align-items: center; gap: 9px; background: var(--cream-card); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px 11px 13px; font-size: 14.5px; font-weight: 700; color: var(--ink); box-shadow: 0 4px 12px rgba(12,43,25,.06); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .pdp-herb:hover { transform: translateY(-2px); border-color: var(--cta); box-shadow: 0 8px 18px rgba(35,211,106,.18); } .pdp-herb__ic { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(31,178,90,.12); color: var(--green); } .pdp-inside-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; } /* ---- Module 3 — daily ritual (plan cards + steps) ---- */ .pdp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; } .pdp-plan { position: relative; background: var(--cream-card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 26px; box-shadow: 0 4px 10px rgba(12,43,25,.06), 0 18px 38px -18px rgba(12,43,25,.22); } .pdp-plan--intensive { border-top: 3px solid var(--green); } .pdp-plan--low { border-top: 3px solid var(--cta); } .pdp-plan__tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--green); padding: 5px 12px; border-radius: 999px; } .pdp-plan__tag--alt { background: var(--cta); color: var(--cta-ink); } .pdp-plan__h { font-family: 'Lora', serif; font-size: 20px; font-weight: 600; margin: 16px 0 8px; color: var(--ink); } .pdp-plan__body { margin: 0; font-size: 15.5px; color: #4f4a40; line-height: 1.55; } .pdp-plan__foot { display: block; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--green-bright); } .pdp-ritual-note { display: flex; align-items: center; gap: 10px; justify-content: center; max-width: 620px; margin: 22px auto 0; text-align: left; background: var(--cream-deep); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; font-size: 13.5px; color: var(--muted); } .pdp-ritual-note svg { color: var(--green); flex: none; } .pdp-steps { display: flex; align-items: stretch; justify-content: center; gap: 8px; margin-top: 36px; flex-wrap: wrap; } .pdp-step { flex: 1; min-width: 200px; max-width: 280px; text-align: center; background: var(--cream-card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 4px 10px rgba(12,43,25,.05); } .pdp-step__ic { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(31,178,90,.12); color: var(--green); margin-bottom: 8px; } .pdp-step b { font-family: 'Lora', serif; font-size: 18px; font-weight: 600; } .pdp-step span:last-child { font-size: 13.5px; color: var(--muted); } .pdp-step__arrow { display: flex; align-items: center; color: var(--green-bright); font-size: 26px; font-weight: 700; } /* ---- Module 4 — results stats (reuses .rit2__*) ---- */ .pdp-stat .rit2__num { font-size: clamp(34px, 3.6vw, 46px); } .section--green .pdp-stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); } .section--green .pdp-stat .rit2__icon { background: rgba(255,255,255,.14); color: #fff; } .section--green .pdp-stat .rit2__num { color: #fff; } .section--green .pdp-stat .rit2__lbl { color: #fff; } .section--green .pdp-stat .rit2__sub { color: #cfe7d6; } .section--green .pdp-stat::before { background: rgba(255,255,255,.4); } /* ---- Module 5 — focused comparison ---- */ .pdp-compare { max-width: 880px; margin: 44px auto 0; text-align: left; background: var(--cream-card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 16px rgba(12,43,25,.07), 0 26px 50px -22px rgba(12,43,25,.30); } .pdp-compare__head, .pdp-compare__row { display: grid; grid-template-columns: 56px 1fr 1fr; align-items: stretch; } .pdp-compare__head { background: var(--cream-deep); border-bottom: 1px solid var(--line); } .pdp-compare__col { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; justify-content: center; } .pdp-compare__col--alm { background: var(--cream-card); border-left: 2px solid var(--cta); box-shadow: 0 -8px 24px rgba(35,211,106,.12) inset; } .pdp-compare__col--other { color: var(--muted); font-weight: 700; font-size: 14px; } .pdp-compare__name { font-family: 'Lora', serif; font-size: 17px; font-weight: 600; color: var(--green); } .pdp-compare__row { border-bottom: 1px solid var(--line); } .pdp-compare__row:last-child { border-bottom: none; } .pdp-compare__label { display: flex; align-items: center; justify-content: center; } .pdp-compare__lic { color: var(--green); display: flex; } .pdp-compare__cell { display: flex; align-items: center; gap: 11px; padding: 16px 20px; font-size: 14.5px; } .pdp-compare__cell--alm { background: var(--cream-card); border-left: 2px solid var(--cta); font-weight: 700; color: var(--ink); } .pdp-compare__cell--other { color: var(--muted); } .pdp-compare__txt { line-height: 1.4; } .pdp-compare .c2mk { flex: none; } .pdp-compare__cell--alm .c2mk-yes { color: var(--cta-dark); font-size: 19px; opacity: 0; transform: scale(.6); transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1); } .pdp-compare.in .pdp-compare__cell--alm .c2mk-yes { opacity: 1; transform: scale(1); } .pdp-compare__row:nth-child(2) .c2mk-yes { transition-delay: .06s; } .pdp-compare__row:nth-child(3) .c2mk-yes { transition-delay: .14s; } .pdp-compare__row:nth-child(4) .c2mk-yes { transition-delay: .22s; } .pdp-compare__row:nth-child(5) .c2mk-yes { transition-delay: .30s; } .pdp-compare__row:nth-child(6) .c2mk-yes { transition-delay: .38s; } @media (prefers-reduced-motion: reduce){ .pdp-compare__cell--alm .c2mk-yes { opacity: 1; transform: none; transition: none; } } /* ---- Module 6 — the Alm standard (green band) ---- */ .pdp-std { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 44px; } .pdp-std__item { display: inline-flex; align-items: center; gap: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 13px 22px 13px 14px; font-size: 14.5px; font-weight: 700; color: #fff; transition: transform .2s ease, background .2s ease; } .pdp-std__item:hover { transform: translateY(-3px); background: rgba(255,255,255,.12); } .pdp-std__ic { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); color: #aef0c6; } /* ---- Module 7 — subscribe value card (reuses .kit / .feature) ---- */ .pdp-sub.kit { grid-template-columns: 1fr 1fr; } .pdp-sub .kit__price { display: inline-flex; align-items: baseline; } /* ---- Module 8 — FAQ (reuses .faq) ---- */ .pdp-faq { text-align: left; } /* ---- Review module ---- */ .pdp-rev { display: grid; grid-template-columns: 280px 1fr; gap: 36px; margin-top: 44px; align-items: start; } .pdp-rev__summary { position: sticky; top: 110px; background: var(--cream-card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 26px; text-align: center; box-shadow: 0 6px 16px rgba(12,43,25,.07), 0 26px 50px -22px rgba(12,43,25,.28); } .pdp-rev__big { font-family: 'Lora', serif; font-size: 60px; font-weight: 600; line-height: 1; color: var(--green); } .rv-stars { color: var(--star); letter-spacing: 2px; font-size: 20px; display: inline-block; margin-top: 8px; } .pdp-rev__count { font-size: 13.5px; color: var(--muted); font-weight: 600; margin-top: 8px; } .pdp-rev__bars { display: grid; gap: 8px; margin-top: 22px; text-align: left; } .pdp-rev__bar { display: grid; grid-template-columns: 26px 1fr 30px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); } .pdp-rev__bar-lbl { font-weight: 700; color: var(--ink); } .pdp-rev__bar-track { height: 8px; background: var(--cream-deep); border-radius: 999px; overflow: hidden; } .pdp-rev__bar-fill { display: block; height: 100%; background: var(--star); border-radius: 999px; width: 0; transition: width .9s cubic-bezier(.22,.61,.36,1); } .pdp-rev__summary.in .pdp-rev__bar-fill { width: var(--w, 0); } @media (prefers-reduced-motion: reduce){ .pdp-rev__bar-fill { width: var(--w, 0); transition: none; } } .pdp-rev__bar-n { text-align: right; font-weight: 700; } .pdp-rev__list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .pdp-rev__card { background: var(--cream-card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 22px 20px; box-shadow: 0 4px 10px rgba(12,43,25,.05); } .pdp-rev__top { display: flex; align-items: center; gap: 12px; } .pdp-rev__avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(18,117,58,.12); color: var(--green); font-weight: 800; font-size: 15px; letter-spacing: .02em; } .pdp-rev__name { font-weight: 800; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pdp-rev__verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--green-bright); } .pdp-rev__verified svg { width: 13px; height: 13px; } .pdp-rev__meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 3px; } .pdp-rev__meta .rv-stars { font-size: 14px; margin-top: 0; } .pdp-rev__quote { margin: 14px 0 0; font-size: 14.5px; color: #4f4a40; line-height: 1.55; } /* ---- compliance disclaimer band ---- */ .pdp-disclaimer { font-size: 12px; color: var(--muted); text-align: center; max-width: 760px; margin: 0 auto; padding: 30px 0 8px; line-height: 1.5; } /* ---- responsive ---- */ @media (max-width: 900px){ .pdp-rev { grid-template-columns: 1fr; gap: 26px; } .pdp-rev__summary { position: static; } .pdp-rev__list { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px){ .pdp-plans { grid-template-columns: 1fr; } .pdp-sub.kit { grid-template-columns: 1fr; } .pdp-step__arrow { display: none; } .pdp-step { max-width: none; } .pdp-rev__list { grid-template-columns: 1fr; } .pdp-compare__head, .pdp-compare__row { grid-template-columns: 40px 1fr 1fr; } .pdp-compare__cell, .pdp-compare__col { padding: 14px 12px; font-size: 13.5px; } } /* ===== Shop-by-concern picker (7/6 category grid -> horizontal tea cards, sideways -> View button) ===== */ #shop { padding-top:clamp(38px,4vw,48px); padding-bottom:clamp(32px,3.5vw,42px); } .catpick { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:1280px; margin:24px auto 0; } .catpick__card { flex:0 0 calc(100%/7 - 11px); min-height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; background:var(--cream-deep); border:2px solid transparent; border-radius:14px; padding:15px 12px; text-align:center; cursor:pointer; font:inherit; color:var(--ink); transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; } .catpick__card:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(35,31,32,.08); } .catpick__card.on { background:#fff; border-color:var(--green); box-shadow:0 10px 22px rgba(31,178,90,.16); } .catpick__ic { display:flex; align-items:center; justify-content:center; color:var(--green); } .catpick__ic svg { width:32px; height:32px; } .catpick__card.on .catpick__ic { color:var(--green-bright); } .catpick__nm { display:block; font-weight:700; font-size:15px; line-height:1.22; } /* entrance: category cards stagger-pop when the picker scrolls into view */ .catpick.reveal { opacity:1; transform:none; } /* container is just the scroll trigger */ .catpick.reveal:not(.in) .catpick__card { opacity:0; } @keyframes catCardIn { from { opacity:0; transform:translateY(16px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } } .catpick.in .catpick__card { animation:catCardIn .5s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(var(--i,0) * .04s); } /* tea cards pop in (staggered) every time a category is (re)selected */ @keyframes cteaIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } .ctea { animation:cteaIn .45s cubic-bezier(.22,1,.36,1) backwards; } .ctea:nth-child(1){ animation-delay:.03s } .ctea:nth-child(2){ animation-delay:.09s } .ctea:nth-child(3){ animation-delay:.15s } .ctea:nth-child(4){ animation-delay:.21s } .ctea:nth-child(5){ animation-delay:.27s } @media (prefers-reduced-motion: reduce){ .catpick.in .catpick__card, .ctea { animation:none; } .catpick.reveal:not(.in) .catpick__card { opacity:1; } } /* tea cards — horizontal (image left / info right), laid out sideways in one scrolling row; arrows sit in the side gutters */ .catpick__strip { position:relative; width:min(1240px, calc(100vw - 40px)); left:50%; transform:translateX(-50%); margin:18px 0 6px; padding:0 56px; } .catpick__teas { display:flex; flex-wrap:nowrap; gap:16px; justify-content:center; align-items:stretch; overflow-x:auto; scroll-snap-type:x proximity; padding:12px 2px 18px; scrollbar-width:none; -ms-overflow-style:none; } .catpick__teas::-webkit-scrollbar { display:none; } .catpick__arrow { position:absolute; top:calc(50% - 3px); transform:translateY(-50%); z-index:4; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:25px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(35,31,32,.16); transition:background .18s ease, opacity .18s ease; } .catpick__arrow--prev { left:2px; } .catpick__arrow--next { right:2px; } .catpick__arrow:hover:not(:disabled) { background:var(--cream-deep); } .catpick__arrow:disabled { opacity:.3; cursor:default; } .catpick__arrow[hidden] { display:none; } .ctea { flex:0 0 338px; height:200px; display:flex; flex-direction:row; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--ink); scroll-snap-align:start; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .ctea:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(35,31,32,.13); border-color:var(--green); } .ctea__img { flex:0 0 138px; background:var(--cream-deep); display:flex; align-items:center; justify-content:center; padding:14px; } .ctea__img img { max-height:100%; max-width:100%; width:auto; object-fit:contain; mix-blend-mode:multiply; } .ctea__body { flex:1; min-width:0; display:flex; flex-direction:column; padding:16px 16px 15px; } .ctea__nm { flex:none; font-weight:700; font-size:15.5px; line-height:1.25; margin-bottom:0; } .ctea__benes { flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:8px; } .ctea__bene { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; } .ctea__beneic { width:40px; height:40px; border-radius:50%; flex:none; background:rgba(31,178,90,.12); color:var(--green); display:flex; align-items:center; justify-content:center; } .ctea__beneic svg { width:21px; height:21px; } .ctea__benelbl { font-size:10.5px; font-weight:700; color:var(--ink); line-height:1.12; } .ctea__meta { margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; } .ctea__rating { font-size:13.5px; font-weight:600; color:var(--ink); } .ctea__rc { color:var(--muted,#8a857c); font-weight:400; } .ctea__price { font-size:18px; font-weight:800; color:var(--ink); } .catpick__view { display:inline-block; margin-top:4px; } @media(max-width:980px){ .catpick__card{ flex-basis:calc(100%/5 - 12px) } } @media(max-width:620px){ .catpick__card{ flex-basis:calc(100%/3 - 10px); min-height:92px } .catpick__ic svg{ width:28px; height:28px } .ctea{ flex-basis:300px } .catpick__strip{ padding:0 44px } } /* ============================================================ Our Story page — timeline, count-up stats, values, range marquee, testimonial ============================================================ */ /* outlined ghost button on light backgrounds */ .btn-ghost { background:transparent; color:var(--green); border:1.5px solid rgba(18,117,58,.35); } .btn-ghost:hover { background:rgba(18,117,58,.07); border-color:var(--green); } /* hero */ .story-hero h1 { max-width:16ch; margin-left:auto; margin-right:auto; } .story-hero .lead { max-width:660px; margin-left:auto; margin-right:auto; } .story-hero__cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:26px; } /* pull quote */ .pull { font-family:'Lora',serif; font-style:italic; font-size:20px; line-height:1.5; color:var(--green); border-left:3px solid var(--cta); padding:4px 0 4px 18px; margin:22px 0; } /* feature with image on the right */ .feature--rev .feature__media { order:2; } @media (max-width:820px){ .feature--rev .feature__media { order:0; } } /* timeline */ .tl { list-style:none; max-width:680px; margin:46px auto 0; padding:0 0 0 38px; position:relative; text-align:left; } .tl::before { content:""; position:absolute; left:9px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--cta), rgba(31,178,90,.2)); } .tl__item { position:relative; padding-bottom:34px; } .tl__item:last-child { padding-bottom:0; } .tl__dot { position:absolute; left:-38px; top:3px; width:20px; height:20px; border-radius:50%; background:var(--cta); box-shadow:0 0 0 4px var(--cream-deep), 0 0 0 6px rgba(35,211,106,.25); } .tl__yr { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--green-bright); } .tl__t { font-family:'Lora',serif; font-size:19px; font-weight:600; margin:4px 0 7px; } .tl__d { color:var(--muted); font-size:15px; line-height:1.55; margin:0; } .tl__item.reveal { transform:translateX(22px); } /* slide in from the right */ .tl__item.in { transform:none; } /* count-up stats */ .sstats { display:grid; grid-template-columns:repeat(4,1fr); gap:30px 20px; max-width:920px; margin:44px auto 0; } .sstat { text-align:center; position:relative; } .sstat + .sstat::before { content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:1px; background:var(--line); } .sstat__n { font-family:'Lora',serif; font-weight:700; font-size:clamp(40px,5vw,62px); line-height:1; color:var(--green-bright); } .sstat__l { margin:10px auto 0; font-weight:600; font-size:14px; color:var(--ink); max-width:160px; } @media (max-width:620px){ .sstats { grid-template-columns:repeat(2,1fr); } .sstat:nth-child(2n+1)::before { display:none; } } /* steps icon */ .step__ic { width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(31,178,90,.12); color:var(--green); margin:0 auto 14px; } .step__ic svg { width:28px; height:28px; } /* values grid */ .vals { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1040px; margin:44px auto 0; text-align:left; } .val { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 22px; transition:transform .2s ease, box-shadow .2s ease; } .val:hover { transform:translateY(-4px); box-shadow:0 16px 32px rgba(35,31,32,.09); } .val__ic { width:46px; height:46px; border-radius:12px; background:rgba(31,178,90,.12); color:var(--green); display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .val__ic svg { width:24px; height:24px; } .val h3 { font-size:16.5px; margin:0 0 6px; } .val p { color:var(--muted); font-size:13.5px; line-height:1.5; margin:0; } @media (max-width:860px){ .vals { grid-template-columns:repeat(2,1fr); } } @media (max-width:460px){ .vals { grid-template-columns:1fr; } } /* range marquee (reuses .marquee wrapper + scroll-x keyframe) */ .rngtrack { display:flex; gap:18px; width:max-content; animation:scroll-x 42s linear infinite; } .marquee:hover .rngtrack { animation-play-state:paused; } .rng { flex:none; width:150px; height:150px; background:#fff; border:1px solid var(--line); border-radius:16px; display:flex; align-items:center; justify-content:center; padding:14px; } .rng img { max-height:100%; max-width:100%; width:auto; object-fit:contain; mix-blend-mode:multiply; } /* big testimonial */ .bigquote { font-family:'Lora',serif; font-style:italic; font-size:clamp(20px,2.4vw,27px); line-height:1.5; color:var(--ink); max-width:760px; margin:30px auto 0; } .bigquote__stars { font-style:normal; color:#f5a623; letter-spacing:3px; margin-bottom:14px; } .bigquote cite { display:block; font-style:normal; font-family:'Manrope',sans-serif; font-size:14px; font-weight:700; color:var(--muted); margin-top:18px; } /* UGC grid */ .ugcgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; max-width:920px; margin:40px auto 0; } .ugcg { aspect-ratio:1/1; border-radius:14px; overflow:hidden; } .ugcg img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; } .ugcg:hover img { transform:scale(1.06); } @media (max-width:720px){ .ugcgrid { grid-template-columns:repeat(3,1fr); } .ugcg:nth-child(4),.ugcg:nth-child(5){ display:none; } } /* ============================================================ Shop cards (Best-Sellers look) + Quick-Add modal ============================================================ */ .shopc { background:var(--cream-deep); border-radius:20px; padding:16px 16px 16px; display:flex; flex-direction:column; height:100%; } .shopc__link { display:block; color:inherit; text-decoration:none; position:relative; } .shopc__tag { position:absolute; top:0; left:0; z-index:2; background:var(--green); color:#f3fff8; font-size:12px; font-weight:700; letter-spacing:.03em; padding:7px 14px; border-radius:999px; } /* fixed image (same size on every card so image bottoms align); shrinks on hover to make room for Quick-Add */ .shopc__media { position:relative; height:290px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; border-radius:14px; overflow:hidden; transition:height .45s cubic-bezier(.2,.8,.2,1); } .shopc__pack { max-height:100%; max-width:90%; width:auto; object-fit:contain; mix-blend-mode:multiply; transition:opacity .4s ease; } .shopc__life { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:14px; opacity:0; transition:opacity .4s ease; } .shopc__rating { display:flex; align-items:baseline; gap:8px; font-size:17px; } .shopc__rating .stars { color:var(--star); letter-spacing:1px; font-size:17px; } .shopc__rval { font-weight:800; color:var(--ink); } .shopc__rc { color:var(--muted); font-weight:600; font-size:14.5px; } .shopc__rmax { color:var(--muted); font-weight:600; } /* reserved 2-line title box, vertically centred so 1-line names look balanced (not blank-bottomed) and everything below aligns across cards */ .shopc__name { font-family:'Lora',serif; font-size:22px; font-weight:600; line-height:1.12; margin:7px 0 9px; min-height:calc(2 * 1.12 * 22px); display:flex; align-items:center; overflow:hidden; } /* badges: three, always one row */ .shopc__tags { display:flex; flex-wrap:nowrap; gap:7px; margin:0; overflow:hidden; } .shopc__pill { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; white-space:nowrap; color:var(--green); background:rgba(31,178,90,.1); border:1px solid rgba(31,178,90,.22); padding:6px 10px; border-radius:999px; } .shopc__pill--soft { color:var(--muted); background:rgba(35,31,32,.05); border-color:var(--line); } .shopc__pico { width:11px; height:11px; flex:none; } .shopc__foot { padding-top:13px; } .shopc__price { font-size:20px; font-weight:800; } .shopc__price s { color:var(--muted); font-weight:600; font-size:16px; margin-right:9px; } .shopc__price b { color:var(--ink); font-weight:800; } .shopc__qadd { width:100%; box-sizing:border-box; max-height:0; opacity:0; overflow:hidden; margin-top:0; display:flex; align-items:center; justify-content:center; gap:9px; background:var(--cta); color:#fff; border:none; border-radius:12px; font:inherit; font-weight:800; font-size:15.5px; letter-spacing:.02em; cursor:pointer; padding:0 15px; transform:translateY(6px); transition:max-height .45s cubic-bezier(.2,.8,.2,1), padding .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), margin-top .45s ease, filter .2s ease; } .shopc__plus { font-size:19px; line-height:.7; font-weight:800; } .shopc:hover .shopc__media { height:214px; } .shopc:hover .shopc__pack { opacity:0; } .shopc:hover .shopc__life { opacity:1; } .shopc:hover .shopc__qadd { max-height:62px; opacity:1; transform:translateY(0); margin-top:14px; padding:15px; } .shopc__qadd:hover { filter:brightness(.96); } @media (hover:none){ .shopc__qadd { max-height:62px; opacity:1; transform:none; margin-top:14px; padding:15px; } } /* quick-add modal */ .qa { width:min(900px,100%); max-width:900px; padding:0; overflow:hidden; max-height:92vh; overflow-y:auto; } .qa__grid { display:grid; grid-template-columns:0.9fr 1fr; } .qa__media { background:var(--cream-deep); display:flex; align-items:center; justify-content:center; padding:40px; } .qa__media img { max-width:100%; max-height:440px; width:auto; object-fit:contain; mix-blend-mode:multiply; } .qa__info { padding:40px 40px 36px; text-align:left; } .qa__tag { display:inline-block; background:rgba(31,178,90,.12); color:var(--green); font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px; } .qa__name { font-family:'Lora',serif; font-size:29px; font-weight:600; margin:13px 0 8px; line-height:1.12; } .qa__rating { display:flex; align-items:baseline; gap:7px; font-size:14px; margin-bottom:14px; } .qa__rating .stars { color:var(--star); letter-spacing:1px; } .qa__rc { color:var(--muted); } .qa__desc { color:var(--muted); font-size:15px; line-height:1.55; margin:0 0 24px; } .qa__lbl { font-weight:700; font-size:13.5px; margin:20px 0 11px; display:flex; justify-content:space-between; align-items:baseline; } .qa__lblval { color:var(--green); font-weight:700; font-size:13px; } .qa__packs { display:flex; gap:11px; } .qa__pack { flex:1; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:14px 8px; cursor:pointer; font:inherit; font-weight:700; font-size:14.5px; color:var(--ink); display:flex; flex-direction:column; gap:4px; align-items:center; transition:border-color .18s, box-shadow .18s; } .qa__pack small { font-weight:500; font-size:11.5px; color:var(--muted); } .qa__pack.is-sel { border-color:var(--cta); box-shadow:0 0 0 1px var(--cta); } .qa__plans { display:flex; flex-direction:column; gap:11px; } .qa__plan { display:flex; align-items:center; gap:12px; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:16px 17px; cursor:pointer; font:inherit; text-align:left; color:var(--ink); transition:border-color .18s, box-shadow .18s; } .qa__plan.is-sel { border-color:var(--cta); box-shadow:0 0 0 1px var(--cta); } .qa__radio { width:20px; height:20px; border-radius:999px; border:2px solid var(--line); flex:none; position:relative; } .qa__plan.is-sel .qa__radio { border-color:var(--cta); } .qa__plan.is-sel .qa__radio::after { content:""; position:absolute; inset:3.5px; border-radius:999px; background:var(--cta); } .qa__pl { font-weight:700; font-size:15px; flex:1; display:flex; align-items:center; gap:8px; } .qa__save { background:var(--cta); color:#fff; font-size:11px; font-weight:800; padding:2px 8px; border-radius:6px; } .qa__pp { font-size:15px; font-weight:700; white-space:nowrap; } .qa__pp s { color:var(--muted); font-weight:600; margin-right:7px; } .qa__add { width:100%; margin-top:24px; background:var(--cta); color:#fff; border:none; border-radius:13px; font:inherit; font-weight:800; font-size:17px; padding:17px; cursor:pointer; transition:filter .2s ease; } .qa__add:hover { filter:brightness(.96); } .qa__more { display:block; text-align:center; margin-top:14px; color:var(--green); font-weight:700; font-size:14px; text-decoration:none; } .qa__more:hover { text-decoration:underline; } .qa__guar { text-align:center; margin-top:14px; font-size:12.5px; color:var(--muted); } @media (max-width:680px){ .qa { max-width:460px; } .qa__grid { grid-template-columns:1fr; } .qa__media { padding:26px; } .qa__media img { max-height:220px; } .qa__info { padding:26px; } } /* ===================================================================== PDP v2 — pack selector, frequency, benefit accordions, feature blocks, at-a-glance strip, sticky add-to-cart bar ===================================================================== */ /* ---- buybox labels ---- */ .pdp-buy__lbl { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin-bottom: 9px; } /* ---- pack selector ---- */ .pdp-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pdp-pack { display: flex; flex-direction: column; align-items: center; gap: 3px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 8px; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .16s, box-shadow .16s, background .16s; } .pdp-pack:hover { border-color: var(--green); } .pdp-pack.is-sel { border-color: var(--green); background: rgba(31,178,90,.06); box-shadow: 0 0 0 1px var(--green); } .pdp-pack-n { font-weight: 800; font-size: 15px; } .pdp-pack-s { font-size: 11.5px; color: var(--muted); font-weight: 600; } /* ---- frequency (subscribe / one-time) ---- */ .pdp-freq { display: grid; gap: 10px; } .pdp-fopt { display: flex; align-items: center; gap: 12px; text-align: left; border: 2px solid var(--line); border-radius: 12px; padding: 13px 15px; cursor: pointer; font: inherit; color: var(--ink); background: #fff; transition: border-color .16s, background .16s; } .pdp-fopt.is-sel { border-color: var(--green); background: rgba(31,178,90,.06); } .pdp-fopt__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; position: relative; } .pdp-fopt.is-sel .pdp-fopt__radio { border-color: var(--green); } .pdp-fopt.is-sel .pdp-fopt__radio::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--green); } .pdp-fopt__main { display: flex; flex-direction: column; gap: 2px; flex: 1; } .pdp-fopt__main b { font-weight: 700; font-size: 15px; } .pdp-fopt__main small { font-size: 12.5px; color: var(--muted); } .pdp-fopt__save { font-size: 11.5px; font-weight: 800; color: var(--cta-ink); background: var(--cta); padding: 4px 9px; border-radius: 999px; white-space: nowrap; } /* ---- price + add row ---- */ .pdp-buy__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; } .pdp-buy__price { font-size: 26px; font-weight: 800; color: var(--ink); display: flex; align-items: baseline; gap: 9px; } .pdp-buy__price s { font-size: 18px; color: var(--muted); font-weight: 600; } .pdp-buy__per { font-size: 13px; color: var(--muted); font-weight: 600; } .pdp-buy__add { white-space: nowrap; padding-left: 26px; padding-right: 26px; } /* ---- benefit accordions (Four-Sigmatic style) ---- */ .pdp-benacc { margin-top: 26px; border-top: 1px solid var(--line); } .pdp-benacc__h { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 4px; } .pdp-benacc__item { border-bottom: 1px solid var(--line); } .pdp-benacc__q { width: 100%; display: flex; align-items: center; gap: 14px; background: none; border: none; cursor: pointer; font: inherit; padding: 15px 0; text-align: left; color: var(--ink); } .pdp-benacc__ic { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(31,178,90,.1); color: var(--green); } .pdp-benacc__lbl { flex: 1; font-weight: 700; font-size: 16px; } .pdp-benacc__chev { color: var(--green); font-size: 22px; line-height: 1; transition: transform .2s; } .pdp-benacc__item[data-open="true"] .pdp-benacc__chev { transform: rotate(45deg); } .pdp-benacc__a { max-height: 0; overflow: hidden; transition: max-height .28s ease; } .pdp-benacc__a p { margin: 0; padding: 0 0 16px 52px; font-size: 14.5px; color: #4f4a40; line-height: 1.55; } /* ---- feature block (lifestyle image + body) — image height tracks the text column ---- */ .pdp-feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: stretch; } .pdp-feature__media { border-radius: 18px; overflow: hidden; box-shadow: 0 24px 56px -24px rgba(12,43,25,.4); } .pdp-feature__media img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; display: block; } .pdp-feature__body .h-sec { text-align: left; } .pdp-feature__list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 13px; } .pdp-feature__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: #4f4a40; line-height: 1.5; } .pdp-feature__tick { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(31,178,90,.12); color: var(--green); margin-top: 1px; } @media (max-width: 900px){ .pdp-feature__grid { grid-template-columns: 1fr; gap: 30px; } .pdp-feature__media { aspect-ratio: 16/10; } } /* ---- at-a-glance 3-col ---- */ .pdp-glance__grid { display: grid; grid-template-columns: repeat(3, 1fr); } .pdp-glance__col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 14px 24px; position: relative; } .pdp-glance__col + .pdp-glance__col::before { content: ""; position: absolute; left: 0; top: 14%; height: 72%; width: 1px; background: var(--line); } .pdp-glance__ic { color: var(--green); margin-bottom: 4px; } .pdp-glance__k { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pdp-glance__v { font-family: 'Lora', serif; font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.3; } @media (max-width: 700px){ .pdp-glance__grid { grid-template-columns: 1fr; } .pdp-glance__col + .pdp-glance__col::before { left: 14%; top: 0; width: 72%; height: 1px; } } /* ---- inside every cup (botanical image + herbs) ---- */ .pdp-inside__grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: 52px; align-items: center; } .pdp-inside__media { display: flex; align-items: center; justify-content: center; } .pdp-inside__media img { max-width: 100%; max-height: 380px; width: auto; object-fit: contain; filter: drop-shadow(0 26px 40px rgba(12,43,25,.22)); } .pdp-herbs--left { justify-content: flex-start; margin-left: 0; margin-right: 0; max-width: none; margin-top: 22px; } @media (max-width: 900px){ .pdp-inside__grid { grid-template-columns: 1fr; gap: 26px; } .pdp-inside__media img { max-height: 240px; } } /* ---- sticky add-to-cart bar ---- */ /* floating pill — detached from all edges, fully rounded (Four-Sigmatic style) */ .pdp-sticky { position: fixed; left: clamp(16px, 3vw, 40px); right: clamp(16px, 3vw, 40px); bottom: clamp(8px, 1vw, 12px); z-index: 60; background: rgba(255,253,248,.97); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 48px -14px rgba(12,43,25,.32), 0 6px 18px rgba(12,43,25,.10); transform: translateY(calc(100% + 40px)); transition: transform .38s cubic-bezier(.22,.61,.36,1); } .pdp-sticky.show { transform: translateY(0); } .pdp-sticky__inner { display: flex; align-items: center; gap: 22px; padding: 14px 22px; } .pdp-sticky__prod { display: flex; align-items: center; gap: 13px; min-width: 0; } .pdp-sticky__prod img { width: 52px; height: 52px; object-fit: contain; background: var(--cream-deep); border-radius: 10px; padding: 5px; flex: none; mix-blend-mode: multiply; } .pdp-sticky__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pdp-sticky__name { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdp-sticky__stars { font-size: 13px; color: var(--star); letter-spacing: 1px; } .pdp-sticky__stars span { color: var(--muted); letter-spacing: 0; margin-left: 4px; } .pdp-sticky__packs { display: flex; gap: 8px; margin-left: auto; } .pdp-spack { display: flex; flex-direction: column; align-items: center; gap: 1px; background: #fff; border: 1.5px solid var(--line); border-radius: 9px; padding: 7px 13px; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .16s, box-shadow .16s; } .pdp-spack:hover { border-color: var(--green); } .pdp-spack.is-sel { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); background: rgba(31,178,90,.06); } .pdp-spack-n { font-weight: 800; font-size: 13px; } .pdp-spack-s { font-size: 10px; color: var(--muted); font-weight: 600; } .pdp-sticky__buy { display: flex; align-items: center; gap: 14px; } .pdp-sticky__price { font-size: 20px; font-weight: 800; color: var(--ink); display: flex; align-items: baseline; gap: 7px; white-space: nowrap; } .pdp-sticky__price s { font-size: 14px; color: var(--muted); font-weight: 600; } .pdp-sticky__price .pdp-buy__per { font-size: 12px; } @media (max-width: 760px){ .pdp-sticky__meta { display: none; } .pdp-sticky__packs { display: none; } .pdp-sticky__inner { gap: 14px; padding: 10px 0; } .pdp-sticky__buy { margin-left: auto; flex: 1; justify-content: flex-end; } .pdp-sticky__buy .btn { flex: 1; max-width: 220px; justify-content: center; } } /* ---- product page runs full-width (overrides the 1200px .wrap cap) ---- */ .pdp-page .wrap { max-width: none; padding: 0 clamp(20px, 3.5vw, 56px); } /* ---- product-details / specifications accordion (hero) ---- */ .pdp-spec__h { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 28px 0 2px; padding-top: 22px; border-top: 1px solid var(--line); } .pdp-spec { margin-top: 4px; } .pdp-spec .acc__a { font-size: 14.5px; } .pdp-spec__micro { font-size: 12px; font-style: italic; color: var(--muted); margin: 4px 0 0; } .pdp-specrows { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .pdp-specrows li { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; } .pdp-specrows li:last-child { border-bottom: none; } .pdp-specrows li span:first-child { color: var(--muted); font-weight: 600; } .pdp-specrows li span:last-child { color: var(--ink); font-weight: 700; text-align: right; } /* ===================================================================== PDP buybox v3 — subscribe/one-time option cards + cadence dropdown ===================================================================== */ .pdp-opt { border: 2px solid var(--line); border-radius: 14px; margin-bottom: 12px; transition: border-color .16s, background .16s; } .pdp-opt.is-sel { border-color: var(--green); background: rgba(31,178,90,.05); } .pdp-opt__head { width: 100%; display: flex; align-items: center; gap: 12px; background: none; border: none; cursor: pointer; font: inherit; color: var(--ink); padding: 15px 16px; text-align: left; } .pdp-opt__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; position: relative; } .pdp-opt.is-sel .pdp-opt__radio { border-color: var(--green); } .pdp-opt.is-sel .pdp-opt__radio::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--green); } .pdp-opt__title { font-weight: 700; font-size: 16px; flex: 1; } .pdp-opt__save { font-size: 11.5px; font-weight: 800; color: var(--cta-ink); background: var(--cta); padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .pdp-opt__body { height: 0; opacity: 0; overflow: hidden; padding: 0 16px; box-sizing: border-box; transition: height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease; } .pdp-opt__lbl { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; } .pdp-opt__note { font-size: 12.5px; color: var(--muted); margin: 11px 0 0; } /* custom cadence dropdown */ .pdp-drop { position: relative; } .pdp-drop__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; color: var(--ink); transition: border-color .15s, box-shadow .15s; } .pdp-drop__btn:hover { border-color: var(--green); } .pdp-drop.open .pdp-drop__btn { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,178,90,.14); } .pdp-drop__chev { width: 18px; height: 18px; color: var(--green); transition: transform .2s; flex: none; } .pdp-drop.open .pdp-drop__chev { transform: rotate(180deg); } .pdp-drop__menu { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(12,43,25,.32); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; } .pdp-drop.open .pdp-drop__menu { opacity: 1; visibility: visible; transform: none; } .pdp-drop__opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border-radius: 9px; cursor: pointer; transition: background .14s; } .pdp-drop__opt:hover { background: var(--cream-deep); } .pdp-drop__opt.is-sel { background: rgba(31,178,90,.1); } .pdp-drop__opt-main { font-weight: 700; font-size: 14.5px; color: var(--ink); } .pdp-drop__opt-main small { display: block; font-weight: 600; font-size: 12px; color: var(--muted); margin-top: 1px; } .pdp-drop__opt-price { font-weight: 800; font-size: 15px; color: var(--green); white-space: nowrap; } /* sticky bar: segmented toggle + matching control */ .pdp-sticky__opts { display: flex; align-items: center; gap: 12px; margin-left: auto; } .pdp-seg { display: flex; background: var(--cream-deep); border-radius: 10px; padding: 3px; flex: none; } .pdp-seg__btn { border: none; background: none; font: inherit; font-weight: 700; font-size: 13px; color: var(--muted); padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .pdp-seg__btn i { font-style: normal; font-weight: 800; color: var(--green); font-size: 11px; } .pdp-sticky[data-mode="sub"] .pdp-seg__btn[data-mode-pick="sub"], .pdp-sticky[data-mode="once"] .pdp-seg__btn[data-mode-pick="once"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); } /* two controls cross-fade in the same slot when switching option */ .pdp-sticky__ctlwrap { position: relative; width: 210px; } .pdp-sticky__ctl { transition: opacity .26s ease, transform .26s ease; } .pdp-sticky__ctl--once { position: absolute; inset: 0; } .pdp-sticky[data-mode="sub"] .pdp-sticky__ctl--sub, .pdp-sticky[data-mode="once"] .pdp-sticky__ctl--once { opacity: 1; transform: none; pointer-events: auto; } .pdp-sticky[data-mode="sub"] .pdp-sticky__ctl--once, .pdp-sticky[data-mode="once"] .pdp-sticky__ctl--sub { opacity: 0; transform: translateY(5px); pointer-events: none; } .pdp-drop--sticky .pdp-drop__btn { padding: 10px 14px; font-size: 13.5px; } .pdp-drop--sticky .pdp-drop__menu { top: auto; bottom: calc(100% + 8px); transform: translateY(6px); } .pdp-drop--sticky.open .pdp-drop__menu { transform: none; } @media (max-width: 920px){ .pdp-sticky__opts { display: none; } } /* ===================================================================== PDP sales-path — Problem, How-it-works, Proof band ===================================================================== */ /* Module 3 — problem / agitate — layered editorial composition */ .pdp-agitate { background: var(--cream); padding: clamp(84px, 8.5vw, 128px) 0; overflow: hidden; } .pdp-agitate__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 3vw, 48px); align-items: center; } .pdp-agitate__h { font-family: 'Lora', serif; font-size: clamp(38px, 4.4vw, 58px); font-weight: 600; color: var(--ink); line-height: 1.04; letter-spacing: -.01em; margin: 14px 0 26px; } .pdp-agitate__bridge { font-family: 'Lora', serif; font-style: italic; font-size: 21px; line-height: 1.55; color: var(--green); margin: 0 0 34px; max-width: 440px; } .pdp-agitate__link { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; color: var(--green); } .pdp-agitate__link svg { width: 17px; height: 17px; animation: pdpNudge 2.2s ease-in-out infinite; } @keyframes pdpNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .pdp-agitate__link:hover { color: var(--green-bright); } /* stage: photo box anchors everything; pain cards straddle its left edge by a FIXED overlap (right: calc(100% - Npx)) so the composition holds at any width */ .pdp-agitate__stage { position: relative; } .pdp-agitate__pwrap { position: relative; width: min(410px, 100%); margin-left: auto; } .pdp-agitate__photo { position: relative; z-index: 2; display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 26px; box-shadow: 0 30px 70px -30px rgba(60,42,20,.45); } .pdp-agitate__blob { position: absolute; z-index: 0; top: -6%; right: -7%; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle, var(--cream-deep) 0%, rgba(242,234,219,0) 70%); } .pdp-agitate__deco { position: absolute; z-index: 1; bottom: -34px; right: -26px; width: 150px; transform: rotate(14deg); opacity: .9; } .pdp-agitate__cards { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 4; pointer-events: none; } .pdp-agitate__card { position: absolute; display: flex; gap: 13px; align-items: center; background: var(--cream-card); border: 1px solid var(--line); border-radius: 16px; padding: 13px 20px 13px 13px; width: max-content; max-width: 300px; box-shadow: 0 16px 38px -14px rgba(60,42,20,.35); } .pdp-agitate__card:nth-child(1) { top: 6%; right: calc(100% - 82px); } .pdp-agitate__card:nth-child(2) { top: 39%; right: calc(100% - 52px); } .pdp-agitate__card:nth-child(3) { top: 71%; right: calc(100% - 104px); } .pdp-agitate__ic { width: 46px; height: 46px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(176,106,42,.12); color: #b06a2a; } .pdp-agitate__tx { display: flex; flex-direction: column; gap: 1px; } .pdp-agitate__tx b { font-size: 16.5px; font-weight: 800; color: var(--ink); line-height: 1.25; } .pdp-agitate__tx small { font-size: 13px; color: var(--muted); font-weight: 600; } /* entrance: text rises, photo floats up, cards slide in from the left */ .pdp-agitate__stage.reveal { transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.9,.3,1) .1s; } .pdp-agitate__stage.reveal.in { transform: none; } .pdp-agitate__stage.in .pdp-agitate__card { animation: pdpSlide .7s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: var(--d, 0ms); } @keyframes pdpSlide { from { opacity: 0; transform: translateX(-26px); } } @media (prefers-reduced-motion: reduce){ .pdp-agitate__stage.in .pdp-agitate__card { animation: none; } .pdp-agitate__link svg { animation: none; } } @media (max-width: 900px){ .pdp-agitate__grid { grid-template-columns: 1fr; gap: 40px; } .pdp-agitate__pwrap { width: 100%; margin: 0; } .pdp-agitate__photo { aspect-ratio: 5/4; } .pdp-agitate__deco { display: none; } .pdp-agitate__cards { position: static; display: grid; gap: 12px; margin-top: 16px; pointer-events: auto; } .pdp-agitate__card { position: static; max-width: none; width: auto; } } /* Module 4 — how it works: 3 orbs on a hand-drawn dashed journey line */ .pdp-how { padding-top: clamp(70px, 7vw, 100px); padding-bottom: clamp(70px, 7vw, 104px); } .pdp-how__journey { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 64px; } .pdp-how__path { position: absolute; left: 2%; right: 2%; top: 6px; width: 96%; height: 120px; color: var(--green-bright); opacity: .55; } .pdp-how__path path { stroke-dashoffset: 0; } .pdp-how__journey.reveal .pdp-how__path path { stroke-dasharray: 1400; stroke-dashoffset: 1400; } .pdp-how__journey.reveal.in .pdp-how__path path { stroke-dasharray: 7 9; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease .2s; } .pdp-how__node { position: relative; text-align: center; padding: 0 18px; } .pdp-how__node:nth-child(3) { transform: translateY(-26px); } /* follow the line's rise/fall */ .pdp-how__node:nth-child(4) { transform: translateY(-8px); } .pdp-how__orb { position: relative; width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; background: var(--cream-card); border: 1px solid var(--line); color: var(--green); box-shadow: 0 18px 40px -16px rgba(12,43,25,.35); } .pdp-how__orb svg { width: 34px; height: 34px; } .pdp-how__num { position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%; background: var(--cta); color: var(--cta-ink); font-style: normal; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(18,117,58,.3); } .pdp-how__h { font-family: 'Lora', serif; font-size: 23px; font-weight: 600; margin: 0 0 8px; } .pdp-how__t { font-size: 15px; color: var(--muted); line-height: 1.5; margin: 0; max-width: 250px; margin-left: auto; margin-right: auto; } .pdp-how__journey.in .pdp-how__node { animation: pdpRise .7s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: var(--d, 0ms); } @media (prefers-reduced-motion: reduce){ .pdp-how__journey.in .pdp-how__node { animation: none; } .pdp-how__journey.reveal .pdp-how__path path { stroke-dasharray: 7 9; stroke-dashoffset: 0; } } @media (max-width: 820px){ .pdp-how__journey { grid-template-columns: 1fr; gap: 40px; } .pdp-how__path { display: none; } .pdp-how__node:nth-child(3), .pdp-how__node:nth-child(4) { transform: none; } } /* Module 5 — proof band (green) */ .pdp-proof__grid { display: grid; grid-template-columns: 300px 1fr; gap: 34px; margin-top: 44px; align-items: stretch; } .pdp-proof__score { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 34px 26px; text-align: center; display: flex; flex-direction: column; justify-content: center; } .pdp-proof__big { font-family: 'Lora', serif; font-size: 66px; font-weight: 600; line-height: 1; color: #fff; } .pdp-proof__stars { color: var(--star); font-size: 22px; letter-spacing: 3px; margin-top: 8px; } .pdp-proof__count { color: #fff; font-weight: 700; font-size: 15px; margin-top: 12px; } .pdp-proof__meta { color: #bfe6cd; font-size: 13px; margin-top: 8px; line-height: 1.4; } .pdp-proof__quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pdp-proof__q { background: #fff; border-radius: 16px; padding: 24px 24px 22px; display: flex; flex-direction: column; box-shadow: 0 14px 34px -18px rgba(0,0,0,.4); } .pdp-proof__qstars { color: var(--star); font-size: 16px; letter-spacing: 2px; } .pdp-proof__qtext { font-size: 15.5px; color: #3f3a30; line-height: 1.6; margin: 12px 0 16px; flex: 1; } .pdp-proof__qwho { font-weight: 800; font-size: 14px; color: var(--ink); } .pdp-proof__qwho span { color: var(--green-bright); font-weight: 700; } @media (max-width: 860px){ .pdp-proof__grid { grid-template-columns: 1fr; } .pdp-proof__quotes { grid-template-columns: 1fr; } } /* ===================================================================== PDP sales-path v2 — modules 5–13 ===================================================================== */ /* ---- M5 proof band: star-quote marquee ---- */ .pdp-proof { padding-bottom: 0 !important; } .pdp-proof__marq { margin-top: 56px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .pdp-proof__marqtrack { display: flex; gap: 56px; width: max-content; animation: pdpMarq 42s linear infinite; } @keyframes pdpMarq { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .pdp-proof__marqtrack { animation: none; } } .pdp-proof__snip { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: #d7ecdd; font-size: 14px; font-weight: 600; } .pdp-proof__snip b { color: var(--star); letter-spacing: 2px; font-weight: 400; } /* ---- M6 comparison: three columns, Alm raised ---- */ .pdp-vs2 { padding-top: clamp(74px, 7.5vw, 110px); padding-bottom: clamp(74px, 7.5vw, 110px); } .pdp-vs2__grid { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 22px; margin-top: 54px; align-items: stretch; } .pdp-vs2__col { position: relative; border-radius: 20px; padding: 30px 28px 28px; background: var(--cream-deep); border: 1px solid var(--line); } .pdp-vs2__col--alm { background: var(--cream-card); border: 2px solid var(--green); transform: translateY(-16px); box-shadow: 0 30px 60px -24px rgba(12,43,25,.35); z-index: 1; } .pdp-vs2__badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; white-space: nowrap; } .pdp-vs2__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-bottom: 20px; border-bottom: 1px dashed var(--line); margin-bottom: 18px; } .pdp-vs2__img { height: 96px; width: auto; object-fit: contain; mix-blend-mode: multiply; } .pdp-vs2__hic { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(35,31,32,.06); color: var(--muted); } .pdp-vs2__name { font-family: 'Lora', serif; font-size: 19px; font-weight: 600; margin: 0; color: var(--ink); } .pdp-vs2__col--other .pdp-vs2__name { color: var(--muted); } .pdp-vs2__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; } .pdp-vs2__rows li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 600; color: var(--ink); } .pdp-vs2__col--other .pdp-vs2__rows li { color: var(--muted); } .pdp-vs2__mk { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; } .pdp-vs2__mk svg { width: 13px; height: 13px; } .pdp-vs2__mk.is-yes { background: rgba(31,178,90,.14); color: var(--green); } .pdp-vs2__mk.is-no { background: rgba(35,31,32,.07); color: #a09a8e; } .pdp-vs2__grid.in .pdp-vs2__col { animation: pdpRise .7s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: var(--d, 0ms); } @media (prefers-reduced-motion: reduce){ .pdp-vs2__grid.in .pdp-vs2__col { animation: none; } } @media (max-width: 860px){ .pdp-vs2__grid { grid-template-columns: 1fr; gap: 26px; } .pdp-vs2__col--alm { transform: none; order: -1; } } /* ---- M7 inside every cup v2 ---- */ .pdp-inside2 { padding-top: clamp(74px, 7.5vw, 110px); padding-bottom: clamp(74px, 7.5vw, 110px); } .pdp-inside2__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(44px, 5vw, 84px); align-items: center; } .pdp-inside2__media { position: relative; } .pdp-inside2__photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 26px; display: block; box-shadow: 0 30px 70px -30px rgba(60,42,20,.4); } .pdp-inside2__badge { position: absolute; right: -18px; bottom: 34px; display: flex; align-items: center; gap: 10px; background: var(--green); color: #fff; border-radius: 18px; padding: 14px 20px; box-shadow: 0 18px 40px -14px rgba(12,43,25,.5); } .pdp-inside2__badge b { font-family: 'Lora', serif; font-size: 38px; font-weight: 600; line-height: 1; } .pdp-inside2__badge small { font-size: 12.5px; font-weight: 700; line-height: 1.25; opacity: .92; } .pdp-inside2__lead { font-size: 17px; color: #4f4a40; margin: 12px 0 26px; max-width: 460px; } .pdp-inside2__herbs { margin-top: 0; } .pdp-inside2__body.in .pdp-herb { animation: pdpRise .55s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: var(--d, 0ms); } .pdp-inside2__never { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px dashed var(--line); } .pdp-inside2__nlbl { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; } .pdp-inside2__nitem { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #a3542f; background: rgba(176,106,42,.09); border-radius: 999px; padding: 7px 14px; } .pdp-inside2__nitem svg { width: 12px; height: 12px; } @media (max-width: 900px){ .pdp-inside2__grid { grid-template-columns: 1fr; gap: 44px; } .pdp-inside2__badge { right: 12px; bottom: -18px; } } /* ---- M8 ritual ---- */ .pdp-rit { padding-top: clamp(74px, 7.5vw, 110px); padding-bottom: clamp(74px, 7.5vw, 110px); } .pdp-rit__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(44px, 5vw, 84px); align-items: center; } .pdp-rit__steps { display: flex; align-items: center; gap: 16px; margin: 30px 0 30px; } .pdp-rit__step { display: inline-flex; flex-direction: column; align-items: center; gap: 9px; font-weight: 800; font-size: 14.5px; color: var(--ink); } .pdp-rit__step i { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(31,178,90,.1); color: var(--green); } .pdp-rit__arrow { color: var(--green-bright); font-size: 22px; font-weight: 700; margin-top: -22px; } .pdp-rit__body.in .pdp-rit__step { animation: pdpRise .6s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: var(--d, 0ms); } .pdp-rit__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 560px; } .pdp-rit__plan { background: var(--cream-card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; } .pdp-rit__plan--a { border-top: 3px solid var(--green); } .pdp-rit__plan--b { border-top: 3px solid var(--cta); } .pdp-rit__tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: var(--green); padding: 4px 11px; border-radius: 999px; } .pdp-rit__tag--alt { background: var(--cta); color: var(--cta-ink); } .pdp-rit__plan p { margin: 12px 0 8px; font-size: 14px; color: #4f4a40; line-height: 1.5; } .pdp-rit__plan small { font-size: 12.5px; font-weight: 700; color: var(--green-bright); } .pdp-rit__media { position: relative; } .pdp-rit__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 26px; display: block; box-shadow: 0 30px 70px -30px rgba(60,42,20,.45); } .pdp-rit__chip { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,253,248,.94); backdrop-filter: blur(6px); color: var(--ink); font-size: 13.5px; font-weight: 700; border-radius: 999px; padding: 9px 16px; box-shadow: 0 8px 22px rgba(12,43,25,.25); } .pdp-rit__chip svg { color: var(--green); } @media (max-width: 900px){ .pdp-rit__grid { grid-template-columns: 1fr; gap: 40px; } .pdp-rit__media { order: -1; } .pdp-rit__plans { grid-template-columns: 1fr; } } /* ---- M9 value: guarantee seal + pouch in card ---- */ .pdp-guar { display: flex; align-items: center; gap: 15px; margin-top: 26px; background: rgba(31,178,90,.07); border: 1px dashed rgba(18,117,58,.35); border-radius: 16px; padding: 16px 18px; max-width: 480px; } .pdp-guar__ic { width: 52px; height: 52px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--green); color: #fff; } .pdp-guar__tx b { display: block; font-size: 15.5px; color: var(--ink); } .pdp-guar__tx small { font-size: 13px; color: var(--muted); } .pdp-sub__pouch { height: 84px; width: auto; object-fit: contain; mix-blend-mode: multiply; flex: none; } .pdp-sub .kit__card-top { align-items: center; gap: 16px; } /* ---- M12 final CTA band ---- */ .pdp-final { position: relative; overflow: hidden; min-height: 480px; display: flex; align-items: center; } .pdp-final__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; transform: scale(1.06); transition: transform 1.4s ease; } .pdp-final__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,32,18,.18) 0%, rgba(12,32,18,.52) 78%, rgba(12,32,18,.66) 100%); } .pdp-final__inner { position: relative; z-index: 2; text-align: center; padding: 90px 24px; } .pdp-final__over { color: #cdeeda; } .pdp-final__h { font-family: 'Lora', serif; font-size: clamp(36px, 4.6vw, 58px); font-weight: 600; color: #fff; margin: 12px 0 30px; text-shadow: 0 3px 26px rgba(0,0,0,.35); } .pdp-final__btn { font-size: 17px; padding: 16px 34px; } .pdp-final__trust { margin-top: 22px; color: #e8f4ec; font-size: 13.5px; font-weight: 600; } .pdp-final__inner.reveal { transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.9,.3,1); } .pdp-final__inner.reveal.in { transform: none; } /* ---- M13 all-reviews ---- */ .pdp-allrev { padding-bottom: clamp(80px, 8vw, 120px); } .pdp-allrev__top { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(26px, 4vw, 64px); align-items: center; margin: 46px 0 34px; background: var(--cream-card); border: 1px solid var(--line); border-radius: 20px; padding: 26px 30px; box-shadow: 0 14px 34px -20px rgba(12,43,25,.3); } .pdp-allrev__score { display: flex; align-items: center; gap: 16px; } .pdp-allrev__big { font-family: 'Lora', serif; font-size: 64px; font-weight: 600; line-height: 1; color: var(--green); } .pdp-allrev__count { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 5px; } .pdp-allrev__bars { max-width: 420px; } .pdp-allrev__bar { background: none; border: none; font: inherit; cursor: pointer; width: 100%; padding: 2px 6px; border-radius: 8px; transition: background .15s; } .pdp-allrev__bar:hover { background: var(--cream-deep); } .pdp-allrev__bar.is-on { background: rgba(31,178,90,.12); } .pdp-allrev__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .pdp-allrev__sort { font: inherit; font-weight: 700; font-size: 14px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px; cursor: pointer; } .pdp-allrev__sort:focus { outline: none; border-color: var(--green); } .pdp-allrev__form { background: var(--cream-card); border: 1px solid var(--line); border-radius: 20px; padding: 28px 30px; margin-bottom: 34px; box-shadow: 0 14px 34px -20px rgba(12,43,25,.3); } .pdp-allrev__form h3 { font-family: 'Lora', serif; font-size: 22px; font-weight: 600; margin: 0 0 18px; } .pdp-allrev__frow { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; } .pdp-allrev__pick { display: flex; gap: 4px; padding-bottom: 14px; } .pdp-allrev__pick button { background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: #ddd3bd; padding: 2px; transition: color .12s, transform .12s; } .pdp-allrev__pick button.is-on { color: var(--star); } .pdp-allrev__pick button:hover { transform: scale(1.15); } .pdp-allrev__fbtns { display: flex; gap: 12px; margin: 6px 0 12px; } .pdp-allrev__filterbar { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin-bottom: 18px; } .pdp-allrev__filterbar button { background: none; border: none; font: inherit; font-weight: 700; color: var(--green); cursor: pointer; } .pdp-allrev__list { grid-template-columns: 1fr 1fr 1fr; } .pdp-allrev__empty { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 30px 0; } .pdp-allrev__more { border: 1.5px solid var(--line); background: #fff; } .pdp-allrev__more:hover { border-color: var(--green); } .pdp-rev__verified--new { color: #b06a2a; } @media (max-width: 980px){ .pdp-allrev__top { grid-template-columns: 1fr; gap: 22px; } .pdp-allrev__actions { flex-direction: row; } .pdp-allrev__list { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .pdp-allrev__list { grid-template-columns: 1fr; } } /* fixes: [hidden] must beat display:flex; bar fills animate from the new container */ .pdp-allrev__filterbar[hidden], .pdp-allrev__form[hidden] { display: none !important; } .pdp-allrev__top.in .pdp-rev__bar-fill { width: var(--w, 0); } /* ---- PDP ticker — scrolling brand-chips divider (concept BQ) ---- */ .pdp-ticker { padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--cream-card); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .pdp-ticker__track { display: flex; gap: 14px; width: max-content; animation: pdpTick 32s linear infinite; } @keyframes pdpTick { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .pdp-ticker__track { animation: none; } } .pdp-ticker .chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 9px 18px; white-space: nowrap; } .pdp-ticker .chip svg { width: 16px; height: 16px; flex: none; } /* ===================================================================== PDP WINNERS — confirmed concepts BB, AH, BC, E, T, G, P (pdpw-) ===================================================================== */ /* shared crafted bits */ .pdpw-hand { font-family: 'Caveat', cursive; } .pdpw-stars { color: var(--star); letter-spacing: 2px; } .pdpw-tape { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 90px; height: 26px; background: rgba(233,161,59,.32); } .pdpw-pin { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9d76, #c0392b); box-shadow: 0 4px 8px rgba(0,0,0,.3); z-index: 4; } .pdpw-steam { stroke-dasharray: 4 7; animation: pdpwSteam 2.6s linear infinite; } @keyframes pdpwSteam { to { stroke-dashoffset: -44; } } @media (prefers-reduced-motion: reduce){ .pdpw-steam { animation: none; } } /* ---- BB · benefits split, arch photo ---- */ .pdpw-bb { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(44px, 5vw, 84px); align-items: center; } .pdpw-bb__media img { width: min(430px, 100%); aspect-ratio: 4/5; object-fit: cover; border-radius: 230px 230px 14px 14px; display: block; margin: 0 auto; box-shadow: 0 26px 56px -24px rgba(12,43,25,.35); } .pdpw-bb__list { list-style: none; padding: 0; margin: 26px 0 26px; display: grid; gap: 15px; } .pdpw-bb__list li { display: flex; gap: 13px; align-items: flex-start; font-size: 16px; color: #4f4a40; line-height: 1.5; } .pdpw-bb__tick { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--cta); color: var(--cta-ink); margin-top: 1px; } .pdpw-bb__tick svg { width: 13px; height: 13px; } @media (max-width: 900px){ .pdpw-bb { grid-template-columns: 1fr; gap: 36px; } } /* ---- AH · monoline illustrated steps ---- */ .pdpw-ah { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1000px; margin: 64px auto 0; } .pdpw-ah__cell svg { width: 150px; height: 150px; stroke: var(--green); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .pdpw-ah__cell h3 { font-family: 'Lora', serif; font-size: 21px; font-weight: 600; margin: 16px 0 6px; } .pdpw-ah__cell p { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0 auto; max-width: 240px; } @media (max-width: 820px){ .pdpw-ah { grid-template-columns: 1fr; gap: 44px; } } /* ---- BC · green proof band ---- */ .pdpw-bc__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 860px; margin: 44px auto 40px; } .pdpw-bc__stat { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 26px 20px; text-align: center; } .pdpw-bc__stat b { font-family: 'Lora', serif; font-size: 42px; font-weight: 600; color: #fff; display: block; line-height: 1; } .pdpw-bc__stat small { color: #bfe6cd; font-size: 13px; font-weight: 700; display: block; margin-top: 8px; } .pdpw-bc__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 920px; margin: 0 auto; } .pdpw-bc__card { background: var(--cream-card); border-radius: 14px; padding: 24px 26px; text-align: left; box-shadow: 0 18px 40px -16px rgba(0,0,0,.35); } .pdpw-bc__card p { font-size: 15px; color: #3f3a30; line-height: 1.6; margin: 10px 0 12px; } .pdpw-bc__card b { font-size: 14px; } .pdpw-bc__card b span { color: var(--green-bright); font-weight: 700; font-size: 12.5px; margin-left: 8px; } @media (max-width: 860px){ .pdpw-bc__stats, .pdpw-bc__cards { grid-template-columns: 1fr; } } /* ---- E · organic arches ---- */ .pdpw-e { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 44px); align-items: end; margin-top: 56px; } .pdpw-e__arch { position: relative; text-align: center; } .pdpw-e__arch img { width: 100%; aspect-ratio: 3/4.1; object-fit: cover; border-radius: 400px 400px 22px 22px; box-shadow: 0 24px 50px -22px rgba(12,43,25,.35); } .pdpw-e__arch--mid img { aspect-ratio: 3/4.7; } .pdpw-e__arch h3 { font-family: 'Lora', serif; font-size: 22px; font-weight: 600; margin: 20px 0 6px; } .pdpw-e__arch p { font-size: 14px; color: var(--muted); margin: 0 auto; max-width: 240px; line-height: 1.55; } .pdpw-e__n { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(255,253,248,.94); display: flex; align-items: center; justify-content: center; font-family: 'Lora', serif; font-size: 17px; font-weight: 600; color: var(--green); box-shadow: 0 6px 14px rgba(12,43,25,.2); } @media (max-width: 860px){ .pdpw-e { grid-template-columns: 1fr; gap: 40px; } } /* ---- T · sticker benefits ---- */ .pdpw-t { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: center; } .pdpw-t__stage { position: relative; } .pdpw-t__stage > img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 24px; box-shadow: 0 30px 66px -28px rgba(60,42,20,.45); display: block; } .pdpw-t__stk { position: absolute; display: inline-flex; align-items: center; gap: 9px; background: var(--cream-card); border-radius: 999px; padding: 11px 20px; font-weight: 800; font-size: 15px; color: var(--ink); box-shadow: 0 0 0 5px #fff, 0 18px 36px -12px rgba(60,42,20,.4); } .pdpw-t__stk svg { width: 17px; height: 17px; flex: none; color: var(--green); } .pdpw-t__stk--green { background: var(--green); color: #fff; } .pdpw-t__stk--green svg { color: #aef0c6; } .pdpw-t__stk--1 { top: 6%; left: -44px; transform: rotate(-7deg); } .pdpw-t__stk--2 { top: 34%; right: -52px; transform: rotate(5deg); } .pdpw-t__stk--3 { bottom: 26%; left: -58px; transform: rotate(4deg); } .pdpw-t__stk--4 { bottom: 6%; right: -30px; transform: rotate(-5deg); } .pdpw-t__burst { position: absolute; top: -26px; right: 8%; background: var(--star); color: #fff; font-family: 'Caveat', cursive; font-size: 23px; font-weight: 700; padding: 14px 18px; border-radius: 50% 50% 50% 6px; transform: rotate(6deg); box-shadow: 0 0 0 5px #fff, 0 16px 30px -10px rgba(60,42,20,.4); } @media (max-width: 900px){ .pdpw-t { grid-template-columns: 1fr; } .pdpw-t__stk { position: static; transform: none; margin: 8px 6px 0 0; } .pdpw-t__burst { top: -20px; right: 4%; } } /* ---- G · collage / scrapbook ---- */ .pdpw-g { overflow: hidden; } .pdpw-g__stage { position: relative; height: 560px; margin-top: 64px; } .pdpw-g__ph { position: absolute; background: #fff; padding: 12px 12px 40px; box-shadow: 0 24px 50px -18px rgba(60,42,20,.4); border-radius: 4px; } .pdpw-g__ph img { display: block; object-fit: cover; width: 100%; } .pdpw-g__ph1 { left: 2%; top: 30px; transform: rotate(-5deg); width: 300px; } .pdpw-g__ph1 img { aspect-ratio: 1/1; } .pdpw-g__ph2 { left: 30%; top: 110px; transform: rotate(2.5deg); width: 340px; z-index: 2; } .pdpw-g__ph2 img { aspect-ratio: 4/3; } .pdpw-g__ph3 { right: 4%; top: 10px; transform: rotate(4deg); width: 290px; } .pdpw-g__ph3 img { aspect-ratio: 3/4; } .pdpw-g__note1 { position: absolute; left: 36%; top: 8px; font-size: 26px; color: var(--green); transform: rotate(-3deg); } .pdpw-g__note2 { position: absolute; right: 22%; bottom: 66px; font-size: 26px; color: var(--green); transform: rotate(2deg); } .pdpw-g__sprig1 { position: absolute; width: 130px; left: 26%; top: 64px; transform: rotate(-16deg); z-index: 3; } .pdpw-g__sprig2 { position: absolute; width: 130px; right: 28%; top: 330px; transform: rotate(24deg); z-index: 3; } @media (max-width: 900px){ .pdpw-g__stage { height: auto; display: grid; gap: 22px; } .pdpw-g__ph { position: static; width: auto; transform: none !important; } .pdpw-g__note1, .pdpw-g__note2, .pdpw-g__sprig1, .pdpw-g__sprig2 { display: none; } } /* ---- P · polaroid review wall ---- */ .pdpw-p { overflow: hidden; } .pdpw-p__sub { display: block; font-size: 25px; color: var(--green); margin-top: 8px; } .pdpw-p__stage { position: relative; height: 540px; margin-top: 70px; } .pdpw-p__pol { position: absolute; background: #fff; padding: 14px 14px 18px; box-shadow: 0 22px 46px -18px rgba(60,42,20,.42); border-radius: 4px; width: 250px; } .pdpw-p__pol img { aspect-ratio: 1/1; object-fit: cover; display: block; width: 100%; } .pdpw-p__stars { display: block; font-size: 15px; margin: 12px 0 4px; } .pdpw-p__q { font-size: 21px; line-height: 1.15; display: block; color: #3d3830; } .pdpw-p__pol small { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; display: block; margin-top: 8px; } .pdpw-p__pol--1 { left: 1%; top: 40px; transform: rotate(-6deg); } .pdpw-p__pol--2 { left: 22%; top: 0; transform: rotate(3deg); z-index: 2; } .pdpw-p__pol--3 { left: 43%; top: 56px; transform: rotate(-2deg); } .pdpw-p__pol--4 { right: 20%; top: 6px; transform: rotate(5deg); } .pdpw-p__pol--5 { right: 0; top: 70px; transform: rotate(-4deg); } @media (max-width: 1100px){ .pdpw-p__pol--5 { display: none; } } @media (max-width: 900px){ .pdpw-p__stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pdpw-p__pol { position: static; width: auto; transform: none !important; } } @media (max-width: 620px){ .pdpw-p__stage { grid-template-columns: 1fr; } } /* ===================================================================== PDP INTERACTIVE WINNERS (gallery 10) — CB CC CD CE CG CI (pdpx-) ===================================================================== */ .pdpx-hand { font-family: 'Caveat', cursive; } /* CB — expanding panels */ .pdpx-cb { display: flex; gap: 12px; height: 470px; margin-top: 50px; } .pdpx-cb__panel { position: relative; flex: 1; border-radius: 18px; overflow: hidden; cursor: pointer; transition: flex .55s cubic-bezier(.4,0,.2,1); box-shadow: 0 20px 44px -20px rgba(12,43,25,.35); } .pdpx-cb__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .pdpx-cb__panel:hover { flex: 3; } .pdpx-cb__panel:hover img { transform: scale(1.04); } .pdpx-cb__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,36,22,.62)); } .pdpx-cb__lbl { position: absolute; left: 20px; bottom: 18px; color: #fff; z-index: 2; text-align: left; } .pdpx-cb__lbl b { font-family: 'Lora', serif; font-size: 20px; font-weight: 600; display: block; white-space: nowrap; } .pdpx-cb__lbl small { font-size: 12.5px; color: #d7ecdd; opacity: 0; transition: opacity .4s .15s; display: block; max-width: 260px; } .pdpx-cb__panel:hover .pdpx-cb__lbl small { opacity: 1; } @media (max-width: 900px){ .pdpx-cb { flex-direction: column; height: auto; } .pdpx-cb__panel { height: 110px; } .pdpx-cb__panel:hover { flex: 2.4; } } /* CC — brew simulator */ .pdpx-cc { display: grid; grid-template-columns: auto 1fr; gap: clamp(36px, 5vw, 70px); align-items: center; max-width: 860px; margin: 50px auto 0; background: var(--cream-card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(28px, 4vw, 48px); box-shadow: 0 24px 52px -22px rgba(12,43,25,.3); } .pdpx-cc__cupwrap { position: relative; width: 220px; } .pdpx-cc__cup { width: 100%; } .pdpx-cc__shell { stroke: var(--green); stroke-width: 2; fill: none; stroke-linecap: round; } .pdpx-cc__fill { fill: #d9a441; opacity: .85; } .pdpx-cc__steam path { stroke: var(--green); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-dasharray: 4 7; opacity: 0; transition: opacity .5s; } .pdpx-cc__steam.on path { opacity: 1; animation: pdpxSteam 2.4s linear infinite; } @keyframes pdpxSteam { to { stroke-dashoffset: -44; } } @media (prefers-reduced-motion: reduce){ .pdpx-cc__steam.on path { animation: none; } } .pdpx-cc__time { position: absolute; top: -14px; right: -24px; background: var(--green); color: #fff; font-family: 'Lora', serif; font-size: 19px; padding: 9px 16px; border-radius: 999px; box-shadow: 0 10px 22px -8px rgba(12,43,25,.4); } .pdpx-cc__body { text-align: left; } .pdpx-cc__body h3 { font-family: 'Lora', serif; font-size: 26px; font-weight: 600; margin: 0 0 8px; } .pdpx-cc__msg { font-size: 15.5px; color: var(--muted); min-height: 48px; line-height: 1.55; margin: 0 0 18px; } .pdpx-cc__bar { height: 10px; background: var(--cream-deep); border-radius: 999px; overflow: hidden; margin-bottom: 20px; } .pdpx-cc__barfill { height: 100%; width: 0; background: linear-gradient(90deg, var(--green-bright), var(--cta)); border-radius: 999px; } .pdpx-cc__hint { font-size: 12.5px; color: var(--muted); margin-top: 12px; display: block; } @media (max-width: 860px){ .pdpx-cc { grid-template-columns: 1fr; justify-items: center; } .pdpx-cc__body { text-align: center; } } /* CD — before/after drag */ .pdpx-cd { position: relative; max-width: 960px; margin: 50px auto 0; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -26px rgba(12,43,25,.4); aspect-ratio: 16/8.2; } .pdpx-cd img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pdpx-cd__after { clip-path: inset(0 0 0 50%); } .pdpx-cd__badge { position: absolute; top: 18px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; z-index: 3; } .pdpx-cd__badge--b { left: 18px; background: rgba(35,31,32,.65); color: #fff; } .pdpx-cd__badge--a { right: 18px; background: var(--cta); color: var(--cta-ink); } .pdpx-cd__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; z-index: 4; box-shadow: 0 0 18px rgba(0,0,0,.4); } .pdpx-cd__knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.35); color: var(--green); font-weight: 800; } .pdpx-cd__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 6; margin: 0; } /* CE — chat thread */ .pdpx-ce { max-width: 520px; margin: 48px auto 0; background: var(--cream-card); border: 1px solid var(--line); border-radius: 26px; padding: 26px 22px; box-shadow: 0 26px 56px -24px rgba(12,43,25,.3); } .pdpx-ce__day { text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 16px 0 10px; } .pdpx-ce__b { max-width: 78%; padding: 12px 16px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; margin-bottom: 8px; text-align: left; } .pdpx-ce__b--l { background: var(--cream-deep); color: var(--ink); border-bottom-left-radius: 6px; margin-right: auto; } .pdpx-ce__b--r { background: var(--green); color: #fff; border-bottom-right-radius: 6px; margin-left: auto; } .pdpx-ce__typing { display: inline-flex; gap: 5px; background: var(--cream-deep); border-radius: 18px; border-bottom-left-radius: 6px; padding: 15px 18px; } .pdpx-ce__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .4; animation: pdpxTyping 1.2s infinite; } .pdpx-ce__typing i:nth-child(2){ animation-delay: .2s; } .pdpx-ce__typing i:nth-child(3){ animation-delay: .4s; } @keyframes pdpxTyping { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } .pdpx-ce__foot { text-align: center; font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 18px; } /* CG — radial herb wheel */ .pdpx-cg { position: relative; width: min(520px, 92vw); height: min(520px, 92vw); margin: 50px auto 0; } .pdpx-cg__ring { position: absolute; inset: 36px; border: 1.5px dashed rgba(18,117,58,.35); border-radius: 50%; } .pdpx-cg__core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 58%; text-align: center; } .pdpx-cg__core b { font-family: 'Lora', serif; font-size: clamp(20px, 2.6vw, 27px); font-weight: 600; display: block; color: var(--ink); } .pdpx-cg__core .pdpx-hand { color: var(--green); font-size: 21px; display: block; margin-top: 2px; } .pdpx-cg__core p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 8px 0 0; } .pdpx-cg__node { position: absolute; width: 88px; height: 88px; border-radius: 50%; background: var(--cream-card); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; box-shadow: 0 12px 26px -12px rgba(12,43,25,.3); padding: 0; } .pdpx-cg__node img { width: 70%; height: 70%; object-fit: contain; } .pdpx-cg__node:hover, .pdpx-cg__node.on { transform: scale(1.12); border-color: var(--green); box-shadow: 0 16px 34px -12px rgba(12,43,25,.45); } .pdpx-cg__node--1 { top: -6px; left: 50%; transform: translateX(-50%); } .pdpx-cg__node--1:hover, .pdpx-cg__node--1.on { transform: translateX(-50%) scale(1.12); } .pdpx-cg__node--2 { top: 26%; right: -6px; } .pdpx-cg__node--3 { bottom: 8%; right: 11%; } .pdpx-cg__node--4 { bottom: 8%; left: 11%; } .pdpx-cg__node--5 { top: 26%; left: -6px; } /* CI — flip cards */ .pdpx-ci { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 52px auto 0; perspective: 1200px; } .pdpx-ci__card { position: relative; height: 280px; cursor: pointer; } .pdpx-ci__inner { position: absolute; inset: 0; transition: transform .65s cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; } .pdpx-ci__card:hover .pdpx-ci__inner { transform: rotateY(180deg); } .pdpx-ci__face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; } .pdpx-ci__front { background: var(--cream-card); border: 1px solid var(--line); box-shadow: 0 16px 36px -18px rgba(12,43,25,.3); } .pdpx-ci__front i { width: 64px; height: 64px; border-radius: 50%; background: rgba(31,178,90,.1); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-style: normal; } .pdpx-ci__front i svg { width: 28px; height: 28px; } .pdpx-ci__front b { font-family: 'Lora', serif; font-size: 21px; font-weight: 600; } .pdpx-ci__front small { color: var(--muted); font-size: 12.5px; font-weight: 700; margin-top: 8px; letter-spacing: .06em; text-transform: uppercase; } .pdpx-ci__back { background: var(--green); color: #fff; transform: rotateY(180deg); } .pdpx-ci__back p { font-size: 14.5px; line-height: 1.6; margin: 0; color: #e7f2ea; } .pdpx-ci__back b { font-family: 'Lora', serif; font-size: 19px; display: block; margin-bottom: 10px; } @media (max-width: 900px){ .pdpx-ci { grid-template-columns: 1fr; } } /* ============================================================= ALM HOMEPAGE (WordPress plugin) — additions to the prototype styles. Everything above this block is prototype/assets/css/styles.css, unchanged. ============================================================= */ /* ---- WP admin bar (logged-in users): 32px bar, 46px under 782px; absolute (scrolls away) under 600px ---- */ html.alm-has-adminbar { margin-top: 32px !important; } body.admin-bar .header { top: 32px; } body.admin-bar .panel { top: 32px; } @media screen and (max-width: 782px) { html.alm-has-adminbar { margin-top: 46px !important; } body.admin-bar .header { top: 46px; } body.admin-bar .panel { top: 46px; } } @media screen and (max-width: 600px) { body.admin-bar .header { top: 0; } } /* ---- best-seller card: "View product" fallback rendered as a link instead of a button ---- */ a.bsc__add { display: block; text-align: center; text-decoration: none; } /* add-to-cart in flight */ [data-add].is-loading { opacity: .6; cursor: progress; } /* ---- concern strip: struck-through regular price when a product is on sale ---- */ .ctea__price s { color: var(--muted); font-weight: 600; font-size: 13px; margin-right: 6px; } /* ---- cart drawer: live WooCommerce state + View cart / Checkout buttons ---- */ .alm-cart-msg { padding: 6px 0 4px; } .alm-cart-msg__head { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--green); font-size: 15px; } .alm-cart-msg__name { font-family: 'Lora', Georgia, serif; font-size: 21px; font-weight: 600; line-height: 1.2; margin-top: 12px; } .alm-cart-msg__count { color: var(--muted); font-size: 14.5px; margin: 8px 0 0; } .alm-cart-msg--err { background: #fbefe6; border: 1px solid #efd3bf; border-radius: var(--radius); padding: 14px 16px; } .alm-cart-msg--err p { margin: 0 0 8px; color: var(--ink); font-weight: 600; font-size: 14.5px; } .alm-cart-msg__link { color: var(--green); font-weight: 700; font-size: 14.5px; } .alm-cart-msg__link:hover { text-decoration: underline; } .alm-cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .alm-cart-actions .btn { justify-content: center; text-align: center; padding-left: 12px; padding-right: 12px; } .alm-cart-shop { width: 100%; justify-content: center; }