/* Content pages (Philosophy / Sustainability / Where to buy / Contact). All values design px via --u. Ribbon transforms verbatim from each frame's Figma matrices. */ .cpage section { position: relative; } .chero { position: relative; overflow: hidden; } .chero img { position: absolute; left: calc(-48 * var(--u)); top: 0; width: calc(1743 * var(--u)); max-width: none; /* asset-box width — the exports are 1743 design px wide; the global img cap otherwise leaves a bg strip at the right */ height: 100%; object-fit: cover; } .chero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,45,60,.2), rgba(0,45,60,.05) 55%); } .chero h1 { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); margin: 0; color: #fff; font-weight: 700; text-align: center; line-height: 1.05; text-transform: capitalize; /* Figma textCase TITLE on all page heroes */ } .chero .sub { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); margin: 0; color: #fff; font-weight: 700; text-align: center; text-transform: capitalize; font-size: calc(36 * var(--u)); width: calc(880 * var(--u)); } .teal-band { background: linear-gradient(180deg, #2ac2cc, #0fa9b8); } .orange-band { background: #f79650; } .photo-band { overflow: hidden; } .photo-band > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .photo-band .wash { position: absolute; inset: 0; background: rgba(0,45,60,.25); } .cpage p, .cpage h2 { margin: 0; font-weight: 700; } .abs { position: absolute; z-index: 3; } /* master ribbon per page — box + flip via vars set inline */ .cribbon { position: absolute; z-index: 2; pointer-events: none; width: calc(2094 * var(--u)); height: calc(2889 * var(--u)); } .cribbon.flip { transform: scaleX(-1); } .cribbon svg { width: 100%; height: 100%; display: block; } .cribbon .spine { stroke-dasharray: 1 1.1; stroke-dashoffset: calc(1.05 * (1 - clamp(0, (var(--p, 0) - var(--a, 0)) * var(--k, 1), 1))); } /* generator ribbon instances: sized+rotated via inline style */ .gstripes { position: absolute; z-index: 2; pointer-events: none; transform-origin: top left; } /* where-to-buy bits */ .storecard { background: #fff; border-radius: calc(22 * var(--u)); padding: calc(28 * var(--u)); color: #20b4c2; font-weight: 700; font-size: calc(32 * var(--u)); line-height: 1.5; width: calc(430 * var(--u)); box-sizing: border-box; } /* retailer row (Lee, 5 Oct): heading + wrapping logo cards, same card geometry as the design's placeholder slots */ /* keeps the frame's 865u height so the band wave below passes under the cards, not over them */ .retailers { position: relative; min-height: calc(865 * var(--u)); padding: calc(105 * var(--u)) calc(190 * var(--u)) calc(120 * var(--u)); } .retailers h2 { margin: 0 0 calc(70 * var(--u)); font-size: calc(62 * var(--u)); color: #05bac4; font-weight: 700; } .retailers__row { display: flex; flex-wrap: wrap; gap: calc(28 * var(--u)); } .logo-slot img { max-width: 78%; max-height: 62%; width: auto; height: auto; display: block; } .logo-slot { display: inline-flex; align-items: center; justify-content: center; width: calc(240 * var(--u)); height: calc(120 * var(--u)); background: #fff; box-shadow: 0 4px 18px rgba(0,45,60,.10); border: 1px solid #05bac422; border-radius: calc(16 * var(--u)); color: #05bac4; font-weight: 700; font-size: calc(32 * var(--u)); } .btn-pill { display: inline-block; background: #fff; color: #20b4c2; font-weight: 700; font-size: calc(28 * var(--u)); padding: calc(18 * var(--u)) calc(44 * var(--u)); border-radius: calc(40 * var(--u)); text-decoration: none; } /* contact blocks */ .cblock h2 { font-size: calc(44 * var(--u)); color: #fff; text-transform: capitalize; } .cblock p { font-weight: 500; font-size: calc(24 * var(--u)); color: #fff; line-height: 1.5; margin-top: calc(14 * var(--u)); } .cblock a { color: #f8d45b; text-decoration: underline; font-weight: 700; } .rowphoto { position: absolute; z-index: 1; object-fit: cover; } /* optional Sanity "Hero sub (mobile)" — phones swap it in for the full sub */ .chero .sub--mob { display: none; } /* ── MOBILE (no content-page frames exist — extrapolated: bands become padded flow blocks, desktop-coordinate art hidden, photo bands keep their crop with text repositioned to the 38u gutter) ─────────────── */ @media (max-width: 640px) { /* hero: full-bleed crop, 44u headline in the 38u gutter (product pattern) */ .chero img { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; } /* hero text flows from the bottom so any copy length fits (soda's sub is a full paragraph) */ /* height:auto lets long copy (soda's paragraph sub, sustainability's 6-line h1) GROW the band instead of climbing under the header; the 170u top pad clears the logo, min-height keeps short heroes at 600 */ /* full first screen (Lee, 8 Sep): the hero fills the initial load */ .chero { height: auto !important; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(170 * var(--u)) calc(38 * var(--u)) calc(56 * var(--u)); box-sizing: border-box; } .chero h1, .chero .sub { position: static !important; left: auto !important; top: auto !important; width: auto !important; --tx: 0%; text-align: left; z-index: 3; } .chero h1 { font-size: calc(44 * var(--u)) !important; margin: 0 0 calc(16 * var(--u)); } .chero .sub { font-size: calc(22 * var(--u)) !important; line-height: 1.35 !important; margin: 0; } /* out-ranks site.css's .chero h1.treveal { --tx:-50% } centring, and the desktop .chero .sub translateX(-50%) which beats .treveal by source order */ .chero h1.treveal, .chero .sub.treveal { --tx: 0%; } .chero h1.treveal:not(.is-in), .chero .sub.treveal:not(.is-in) { transform: translateX(calc(-28 * var(--u))); } .chero h1.treveal.is-in, .chero .sub.treveal.is-in { transform: none; } .chero h1, .chero .sub { transform: none; } .chero .sub--desk { display: none !important; } .chero .sub--mob { display: block; } /* mobile art, extrapolated per Lee (8 Sep): the master ribbon scales to the home-mobile instance (639x881 entering top-left, ~0.305 of desktop) and is drawn static like home mobile; mid-page generator stripes stay hidden except band-anchored waves (.bandwave, scaled ~0.44) */ .cpage .stripes { display: none; } /* reduced from home's 639x881 (Lee: "reducing the size of the whole ribbon so that it turns into the screen higher up") — at 0.75 the U-bend exits inside the 600u hero instead of over the band text */ .cpage .cribbon { width: calc(480 * var(--u)) !important; height: calc(660 * var(--u)) !important; left: calc(-40 * var(--u)) !important; top: calc(10 * var(--u)) !important; } /* no mirrored ribbons on mobile (Lee, 8 Sep: "should be to the left of the screen") — every page enters top-left like home */ .cpage .cribbon.flip { transform: none; left: calc(-40 * var(--u)) !important; right: auto !important; } /* spines draw on scroll like desktop (Lee, 8 Sep: mobile ribbons should animate — statics removed) */ .cpage .stripes.bandwave { display: flex; width: calc(903 * var(--u)) !important; height: calc(900 * var(--u)) !important; left: calc(120 * var(--u)) !important; top: calc(-420 * var(--u)) !important; } /* the mobile wave's transparent crest is ~140u deep — any footer overlap shallower than that shows a white slice between the last section and the wave (Lee, 8 Sep). -160u puts the crest fully over the content. */ .cpage .foot3, .catpage .foot3 { margin-top: calc(-160 * var(--u)) !important; } /* unified divider wave (Lee, 8 Sep: product wave "size is good, use this for other screens") — every second ribbon becomes the product-page 2v2 instance (557x727, ~48° matrix) riding a section boundary; only `top` (the boundary, in each instance's own positioning context) differs */ .pg-sus .gstripes, .pg-phil .gstripes { display: flex; overflow: visible; left: calc(327.4 * var(--u)) !important; top: calc(-330 * var(--u)) !important; width: calc(557 * var(--u)) !important; height: calc(727 * var(--u)) !important; transform: matrix(0.66601, 0.74594, -0.74594, 0.66601, 0, 0) !important; transform-origin: top left !important; } /* philosophy: "somewhere along the way" photo runs full-bleed — max-width:none dodges the global img cap (100% of the padded box), which was holding it at ~80% (Lee, 8 Sep) */ .orange-band .rowphoto { width: 100vw !important; max-width: none; height: auto !important; margin: calc(-56 * var(--u)) calc(-38 * var(--u)) calc(28 * var(--u)); } /* philosophy "small choices" band: full-width image, then a full-width teal block carrying the text (Lee, 8 Sep — was text over the photo). .photo-band.pb-choices out-ranks the generic .photo-band rule below, which was re-imposing the fixed 640 flex box: the centred overflow spilled ABOVE the clip (missing image + clipped first line, Lee) */ .photo-band.pb-choices { display: block; height: auto !important; background: #0fa9b8; padding: 0 0 calc(56 * var(--u)); } /* the clean export still carries the design's empty teal text panel on its left — crop to the photo (right) side on mobile */ .photo-band.pb-choices > img.bg { position: static; width: 100%; height: calc(400 * var(--u)); object-fit: cover; object-position: 100% 50%; display: block; } .photo-band.pb-choices .wash { display: none; } .photo-band.pb-choices h2.abs { padding: calc(48 * var(--u)) 0 0; margin: 0 calc(38 * var(--u)) calc(16 * var(--u)); } .photo-band.pb-choices p.abs { padding-top: calc(20 * var(--u)); margin: 0 calc(38 * var(--u)) !important; } /* inline margin:0 on the p */ /* decorative desktop colour blocks make no sense in the stacked layout */ .photo-band.pb-choices div.abs { display: none; } /* sustainability "beads" band wears its orange, not the teal default */ .pg-sus .photo-band.pb-choices { background: #f79650; } /* the beads export carries "The Man Behind The Beads" baked into the photo (desktop's live h2 sits exactly over it) — the live copy would duplicate it under the paragraph on mobile */ .pg-sus .photo-band.pb-choices h2 { display: none; } /* contact: solid Pura teal for readability (the gradient ran pale) and clear section breaks (Lee, 8 Sep) */ .pg-contact .teal-band { background: #0abcc5 !important; } .pg-contact .teal-band .wash { display: none; } .teal-band, .orange-band { height: auto !important; margin-top: 0 !important; padding: calc(56 * var(--u)) calc(38 * var(--u)); box-sizing: border-box; } /* a band that directly follows a divider-wave anchor gets extra head room: the wave's crest dips ~140u into it (Lee, 8 Sep: "The Can" overlapped) */ div[aria-hidden="true"] + .teal-band, div[aria-hidden="true"] + .orange-band { padding-top: calc(200 * var(--u)); } .teal-band .abs, .orange-band .abs { position: static !important; left: auto !important; top: auto !important; right: auto !important; width: auto !important; max-width: 100%; margin: 0 0 calc(24 * var(--u)); } .teal-band h2.abs, .orange-band h2.abs { font-size: calc(40 * var(--u)) !important; } .teal-band p.abs, .orange-band p.abs { font-size: calc(26 * var(--u)) !important; line-height: 1.45 !important; } .teal-band img.abs, .orange-band img.abs { width: calc(140 * var(--u)) !important; } /* decorative side colour blocks + product shots from the desktop grid */ .orange-band div.abs, .orange-band img.abs[src*="carousel"] { display: none; } .rowphoto { position: static !important; width: 100% !important; height: auto !important; } /* photo bands: text centred over the image (Lee, 8 Sep — was bottom) */ .photo-band { height: calc(640 * var(--u)) !important; display: flex; flex-direction: column; justify-content: center; padding: calc(38 * var(--u)); box-sizing: border-box; } .photo-band .abs { position: static !important; left: auto !important; top: auto !important; margin: 0 0 calc(16 * var(--u)); z-index: 2; } .photo-band h2.abs { width: auto !important; font-size: calc(34 * var(--u)) !important; } .photo-band p.abs { width: auto !important; font-size: calc(22 * var(--u)) !important; line-height: 1.4 !important; } /* stockists / retailers */ /* !important: the page's own