/* ================================================================ ANVIL v5 — product detail page, option A: the hero IS the flavour ground. Tokens, sky, header, footer and cart live in base.css. The flavour's colours arrive as custom properties on (--ground, --glow, --edge, --ink, --btn-text, --shadow, --on-dark), written by build/build-pdp.mjs from js/flavours.js. ================================================================ */ .sky__deep--pdp{ opacity:.5; } /* --- particles (same loops as the home stage) ---------------------- */ .pt{ position:absolute; left: var(--x); top: var(--y); width: var(--s); transform: translate(-50%, -50%); animation: ptFloat var(--dur, 8s) ease-in-out var(--delay, 0s) infinite alternate; will-change: transform; } .pt img{ width:100%; height:auto; transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 20px 22px var(--shadow)); animation: ptRock var(--dur2, 11s) ease-in-out var(--delay, 0s) infinite alternate; will-change: transform; } @keyframes ptFloat{ from{ transform: translate(-50%,-50%) translate3d(0,0,0); } to{ transform: translate(-50%,-50%) translate3d(var(--dx,0px), var(--dy,0px), 0); } } @keyframes ptRock{ from{ transform: rotate(var(--r,0deg)); } to{ transform: rotate(calc(var(--r,0deg) + var(--dr,0deg))); } } /* --- hero: the flavour ground, everything in the flavour ink -------- */ /* The ground is painted once, under both the hero and the story, so the two sections share one surface. Each section only adds its own glow on top. */ .pdp-ground{ position:relative; color: var(--ink); background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 40%, var(--edge) 100%), var(--ground); } .pdp-hero{ padding-top: var(--header-h); background: radial-gradient(ellipse 58% 44% at 30% 48%, var(--glow) 0%, transparent 70%); } .pdp-hero :focus-visible{ outline-color: var(--ink); } .pdp-hero__grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 64px); min-height: calc(100dvh - var(--header-h)); align-items:center; } /* The jar stands alone in cols 1-6; col 7 is an empty gutter. */ .pdp-hero__visual{ grid-column: 1 / 7; position:relative; min-height: clamp(420px, 70vh, 760px); display:grid; place-items:center; overflow-x: clip; } .pdp-hero__jar{ position:relative; z-index:2; height: clamp(380px, 66vh, 700px); width:auto; max-width:none; filter: drop-shadow(0 40px 50px var(--shadow)); view-transition-name: jar; } /* --- buy column ----------------------------------------------------- */ .pdp-buy{ grid-column: 8 / -1; max-width: 480px; position: sticky; top: calc(var(--header-h) + 24px); align-self:start; padding: 32px 0 48px; } .pdp-buy__crumb{ display:flex; gap:10px; font-size:.82rem; color: color-mix(in srgb, var(--ink) 65%, transparent); margin-bottom: 18px; } .pdp-buy__crumb a:hover{ color: var(--ink); } .pdp-buy__title{ font-size: clamp(3.2rem, 6vw, 5.4rem); margin-bottom: 14px; } .pdp-buy__tagline{ color: color-mix(in srgb, var(--ink) 85%, transparent); margin: 0 0 26px; max-width: 42ch; } .pdp-buy__price{ display:flex; align-items:baseline; gap:14px; margin-bottom: 26px; } .pdp-buy__price > .num:first-child{ font-size: 2.4rem; font-weight:800; line-height:1; } .pdp-buy__per{ color: color-mix(in srgb, var(--ink) 68%, transparent); font-size:.9rem; } .pdp-buy__group{ border:0; padding:0; margin: 0 0 18px; display:flex; flex-wrap:wrap; gap:10px; } .pdp-buy__group legend{ width:100%; font-size:.88rem; font-weight:600; color: color-mix(in srgb, var(--ink) 70%, transparent); margin-bottom: 10px; padding:0; } .pill{ position:relative; display:grid; gap:2px; padding: 10px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ink) 32%, transparent); cursor:pointer; transition: border-color .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out); } .pill:hover{ background: color-mix(in srgb, var(--ink) 6%, transparent); } .pill input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; } .pill span{ font-weight:700; font-size:.95rem; } .pill small{ color: color-mix(in srgb, var(--ink) 72%, transparent); font-size:.78rem; } /* checked: a 2px ink ring (border + inset shadow, so the pill never resizes) */ .pill:has(input:checked){ border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); } .pill:has(input:focus-visible){ outline: 3px solid var(--ink); outline-offset: 3px; } .pdp-buy__help{ width:100%; margin: 2px 0 0; font-size:.84rem; color: color-mix(in srgb, var(--ink) 72%, transparent); } .pdp-buy__row{ display:flex; align-items:center; gap:14px; margin: 8px 0 14px; } .pdp-buy .qty{ border-color: color-mix(in srgb, var(--ink) 32%, transparent); } .pdp-buy .qty button{ width:40px; height:40px; color: inherit; } .pdp-buy .qty button:hover{ background: color-mix(in srgb, var(--ink) 10%, transparent); } .pdp-buy__add, .pdp-buy__add.is-added{ flex:1; background: var(--ink); color: var(--btn-text); } .pdp-buy__trust{ font-size:.8rem; color: color-mix(in srgb, var(--ink) 68%, transparent); margin: 0 0 22px; } .pdp-buy__scoop{ display:grid; grid-template-columns: repeat(4, 1fr); margin:0; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); } .pdp-buy__scoop dt{ font-size:.76rem; color: color-mix(in srgb, var(--ink) 68%, transparent); } .pdp-buy__scoop dd{ margin:0; font-size:1.05rem; font-weight:700; } /* --- what's in it: the hero ground keeps going, the % is the headline -- */ .pdp-story{ position:relative; overflow:hidden; background: radial-gradient(ellipse 64% 48% at 66% 42%, var(--glow) 0%, transparent 70%); padding: clamp(72px, 8vw, 110px) 0; } .pdp-story__grid{ display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 80px); align-items:end; } .pdp-story__lead{ display:flex; flex-direction:column; gap: 20px; } .pdp-story__eyebrow{ margin:0; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .pdp-story__title{ font-size: clamp(2.8rem, 6.6vw, 6.2rem); max-width: 13ch; } .pdp-story__title .nb{ white-space:nowrap; } .pdp-story__figure{ display:block; margin-bottom: .12em; font-size: clamp(7rem, 28vw, 26rem); line-height:.8; letter-spacing:-.02em; font-variant-numeric: tabular-nums; } .pdp-story__figure.is-long{ font-size: clamp(5rem, 18vw, 17rem); } .pdp-story__side{ display:flex; flex-direction:column; gap: 32px; } .pdp-story__particles{ position:relative; height: clamp(260px, 34vw, 480px); } .pdp-story__copy{ display:flex; flex-direction:column; gap:16px; } .pdp-story__copy p{ margin:0; line-height:1.6; max-width: 46ch; font-size:1.1rem; } .pdp-story__copy .pdp-story__ingredients{ font-size:.88rem; color: color-mix(in srgb, var(--ink) 74%, transparent); max-width: 52ch; } .pdp-story__ingredients strong{ color: var(--ink); } /* --- how it mixes: three alternatives, led by the amount ------------ */ .pdp-band{ padding: clamp(64px, 8vw, 110px) 0; } .pdp-mix__ways{ list-style:none; margin: 40px 0 0; padding:0; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); } .pdp-mix__ways li{ display:flex; flex-direction:column; gap:10px; padding-top: 22px; border-top: 1px solid var(--hairline); } .pdp-mix__amount{ font-family: var(--font-display); font-stretch:62%; font-weight:900; text-transform:uppercase; line-height:.9; font-size: clamp(3rem, 5vw, 4.6rem); color: var(--on-dark); } .pdp-mix__ways h3{ font-size:1.1rem; } .pdp-mix__ways p{ margin:0; color: rgba(243,234,217,0.78); line-height:1.55; max-width: 36ch; } /* --- nutrition ------------------------------------------------------- */ .pdp-band__grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 32px clamp(24px, 4vw, 64px); align-items:start; } .pdp-band__copy{ grid-column: 1 / 5; } .pdp-band__copy .section-title{ font-size: clamp(2.6rem, 4.6vw, 4rem); } .pdp-band__copy p{ color: rgba(243,234,217,0.78); line-height:1.6; max-width: 46ch; } .pdp-band__grid > :nth-child(2){ grid-column: 5 / -1; } .pdp-nutrition__table{ width:100%; border-collapse: separate; border-spacing: 0; font-size:.95rem; } .pdp-nutrition__table th, .pdp-nutrition__table td{ padding: 12px 0; border-bottom: 1px solid var(--hairline); text-align:left; } .pdp-nutrition__table thead th{ font-size:.8rem; color: var(--text-muted); font-weight:600; } .pdp-nutrition__table td, .pdp-nutrition__table thead th.num{ text-align:right; } .pdp-nutrition__table th[scope=row]{ font-weight:500; } .pdp-nutrition__table tr.is-sub th{ padding-left: 18px; color: var(--text-muted); font-weight:400; } /* protein is the number people buy isolate for: marked in the flavour colour */ .pdp-nutrition__table tr.is-key th, .pdp-nutrition__table tr.is-key td{ background: var(--ground); color: var(--ink); font-weight:800; font-size:1.05rem; padding-top: 14px; padding-bottom: 14px; border-bottom-color: transparent; } .pdp-nutrition__table tr.is-key th{ padding-left: 14px; border-radius: 10px 0 0 10px; } .pdp-nutrition__table tr.is-key td:last-child{ padding-right: 14px; border-radius: 0 10px 10px 0; } .pdp-nutrition__allergens{ font-size:.88rem; color: var(--text-muted); margin-top: 18px; } /* --- reviews --------------------------------------------------------- */ .pdp-reviews__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); margin-top: 32px; } .pdp-reviews__grid blockquote{ margin:0; padding: 24px 24px 0 0; border-top: 1px solid var(--hairline); } .pdp-reviews__grid p{ font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight:600; line-height:1.4; color: rgba(243,234,217,0.9); margin: 0 0 16px; } .reviews__name{ display:block; color: var(--color-bone); font-weight:600; font-size:.86rem; } .reviews__meta{ display:block; color: var(--text-muted); font-size:.86rem; } /* --- the other three: the range's colour columns --------------------- */ .pdp-others{ padding: clamp(64px, 8vw, 110px) 0 0; } .pdp-others__row{ list-style:none; margin: 40px 0 0; padding:0; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pdp-others__row li{ position:relative; overflow:hidden; color: var(--ink); background: radial-gradient(ellipse 80% 55% at 50% 36%, var(--glow) 0%, var(--ground) 58%, var(--edge) 100%); } .pdp-others__row a{ display:grid; grid-template-rows: 1fr auto auto; gap:10px; min-height: clamp(480px, 62vh, 580px); padding: 44px clamp(20px, 2.4vw, 36px) 32px; color: inherit; } .pdp-others__row a:focus-visible{ outline-color: var(--ink); outline-offset: -8px; } .pdp-others__row img{ justify-self:center; align-self:center; height: clamp(220px, 30vh, 320px); width:auto; filter: drop-shadow(0 24px 28px var(--shadow)); transition: transform .6s var(--ease-out); } .pdp-others__row a:hover img, .pdp-others__row a:focus-visible img{ transform: translateY(-10px) scale(1.03); } .pdp-others__row h3{ font-family: var(--font-display); font-stretch:62%; font-weight:900; text-transform:uppercase; line-height:.9; font-size: clamp(2rem, 3vw, 2.8rem); } .pdp-others__meta{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight:700; } .pdp-others__meta .textlink{ color: inherit; border-bottom: 2px solid currentColor; padding-bottom: 2px; } /* --- mobile buy bar: the flavour ink, with a ground-coloured button --- */ .buybar{ position:fixed; left:0; right:0; bottom:0; z-index:60; height:64px; display:none; align-items:center; justify-content:space-between; gap:16px; padding: 0 20px; background: var(--ink); color: var(--btn-text); transform: translateY(100%); transition: transform .35s var(--ease-out); } .buybar.is-visible{ transform: translateY(0); } .buybar__price{ font-weight:800; font-size:1.15rem; } .buybar .btn--solid{ background: var(--ground); color: var(--ink); } .buybar :focus-visible{ outline-color: var(--btn-text); } /* --- responsive ------------------------------------------------------ */ @media (max-width: 900px){ .pdp-hero__grid{ grid-template-columns: 1fr; min-height:0; } .pdp-hero__visual{ grid-column: 1 / -1; min-height: 52vh; } .pdp-hero__jar{ height: clamp(300px, 46vh, 460px); } .pdp-buy{ grid-column: 1 / -1; position:static; max-width:none; padding: 8px 0 40px; } .pdp-story__grid{ grid-template-columns: 1fr; gap: 24px; } .pdp-story__title{ font-size: clamp(2.6rem, 11vw, 4rem); } .pdp-story__figure{ font-size: clamp(7rem, 38vw, 12rem); } .pdp-story__figure.is-long{ font-size: clamp(5rem, 26vw, 9rem); } .pdp-story__particles{ height: clamp(220px, 60vw, 300px); } .pdp-mix__ways{ grid-template-columns: 1fr; gap: 28px; } .pdp-band__copy, .pdp-band__grid > :nth-child(2){ grid-column: 1 / -1; } .pdp-reviews__grid{ grid-template-columns: 1fr; gap: 24px; } .pdp-others__row{ display:flex; overflow-x:auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width:none; } .pdp-others__row::-webkit-scrollbar{ display:none; } .pdp-others__row li{ flex: 0 0 80vw; scroll-snap-align: start; } .buybar{ display:flex; } .buybar:not(.is-visible){ pointer-events:none; } } @media (max-width: 768px){ .pdp-buy__scoop{ grid-template-columns: repeat(2, 1fr); gap: 12px 0; } } /* --- reduced motion -------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .pt, .pt img{ animation: none !important; } .reveal-up{ opacity:1; transform:none; } .pdp-others__row img{ transition:none; } }