Sessions Cannabis demo builds — independent versions, each at its own /vN/ path.
Pick a version to view it. Every deploy adds a new /vN/ folder; older versions stay browsable.
HomeSections.jsx swapped StrainIcon (9-color rainbow with glow) → PremiumChip (single neutral palette). TRUST_LOGOS simplified — removed the per-strain color prop entirely. TrustStrip section: bg rgba(255,255,255,0.78) → #FAF7F0 (cream), border tokens hardcoded to #F0EFEC, LogoLoop props: speed 50→28, logoHeight 36→32, gap 28→20, added fadeOut + fadeOutColor="#FAF7F0", removed scaleOnHover (was distracting on premium chips).
Hero.jsx imports React hooks (useEffect, useRef, useState), adds inline AnimatedCounter component (Intersection Observer + requestAnimationFrame easing). Secondary JSX restructured: removed secondaryText+secondarySubhead, added secondaryHeader + statRow (4 stat blocks). Style block reorganized: secondaryHeading shrunk from 48px → 28px to make room for stats; added statNum (40px hero orange) and statLabel (11px uppercase). Container maxWidth bumped 1640 → 1920 to align with header. No Featured Categories or Hero-image changes.
categories-3d/ clay PNGs with Sophie's real hand-illustrated BW SVGs delivered today as Sessions Cannabis (7) (28 SVGs: 14 categories × 2 variants). Used the BW variant — each SVG has a white circle baked in as the tile bg + black-stroke line icon inside — matches Sophie's reference exactly. All 9 app categories mapped: Flower, Edibles, Pre Rolls, Concentrates, Vaporizers, Oils & Capsules (Capsules-bw.svg), Topicals, Accessories, Merchandise (Apparel-bw.svg). Section bg changed from pure black #0D0D0B to warm chocolate #2A1812 — echoes the wooden ROOTED IN COMMUNITY medallion in the hero, premium aesthetic, distinct from hero's #F78D1E orange (no two adjacent folds are the same color now). Added "Shop By Category" title (matches Sophie's reference). Hover state: tile lifts -4px with orange drop-shadow glow + label flips to hero orange — visually ties the two folds together.
SophieHome.jsx cats[] swapped to categories-sophie/*-bw.svg (Sophie's flat-line icons). ch3_section.background: #0D0D0B → #2A1812. ch3_tileCard: cream bg + borderRadius removed (Sophie's SVG already has the white circle — wrapper not needed). Added ch3_title for "Shop By Category" heading + hover styles via inline <style> tag. No Hero changes; v20's logo-alignment fix preserved verbatim.
maxWidth:1920, padding:0 140), hero text at x=140 (leftInner pinned to section edge), secondary fold at x=596 (uses maxWidth:1640). v20 wraps leftInner in a new contentContainer styled exactly like the header's container — maxWidth:1920, margin:0 auto, display:flex, alignItems:center. At viewport 2560, hero text now starts at x=460 — aligns with logo's x=456 to within 4px. At viewport 1920 or narrower, no change vs v19 (container fills viewport, text at x=140).
S.contentContainer style + wraps S.leftInner inside it. No image, asset, or diagonal-position changes — v19's transparent collage + viewport-scaled diagonal preserved verbatim. Pure text-alignment patch.
Banner_collage_only.png from the dark Banner_left_cleared.png using Python/PIL color-distance masking (hard tolerance 20 for pure orange, soft tolerance 40 for AA edge preservation). Diagonal coords pixel-verified pre/post: identical (1071,0) → (796,599).
public/figma/sessions-assets/Banner_collage_only.png (1,314,111 bytes — 49.8% transparent, 1.4% AA edge, 48.8% opaque collage). Hero.jsx swapped BANNER_BG → BANNER_COLLAGE. S.split dropped fixed height: 600. S.bannerImg changed from native 1920×600 position:absolute right:0 to width:100% height:auto display:block — image now scales proportionally with viewport. S.contentOverlay stays position:absolute inset:0 so text grows/shrinks with the image. All text styles (60px H1, 80px "Sesh", 16px subhead, 32px gap, 140/140 padding, #E65325 SHOP NOW pill) carried forward from v18. Section bg #F78D1E unchanged (still the dark orange you explicitly requested at v17).
object-fit: cover which at viewports wider than 1920px scaled the cleaned banner up by ~1.35× and cropped roughly 107px off the top and bottom of the collage — the marigolds at the bottom edge and the monarch butterflies at the top edge were getting clipped out of frame. v18 stops scaling the image entirely: it now stays at its NATIVE 1920×600 dimensions, anchored to the right edge of the section. At viewports > 1920 the left gutter fills seamlessly with the section's #F78D1E background (the same orange as the image's left half). At viewports ≤ 1920 the image's left side clips harmlessly (it's solid orange = same as bg). Result: full collage — medallion, leaves, marigolds, monarch butterflies — visible at every viewport without cropping.
Hero.jsx two-style change. S.bannerImg switched from {position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'right center'} to {position:'absolute', right:0, top:0, width:1920, height:600, display:'block', zIndex:0} — no more responsive scaling. S.shell.background and S.split.background also pinned to #F78D1E (matching the image's baked-in orange) so the left gutter blends edge-to-edge. Cleaned banner asset itself unchanged from v17 (still Banner_left_cleared.png, 1,134,864 bytes). Text overlay padding 140/140, gap 32, "Sesh" Pacifico italic — all preserved from v17.
rgb(247, 141, 30) = #F78D1E exactly.
public/figma/sessions-assets/Banner_left_cleared.png contents replaced (1,150,498 → 1,134,864 bytes). Filename, code reference, dimensions (1920×600), and everything else unchanged. No Hero.jsx edits. Pale-strip diagonal artifact from Studio's first cleaning pass also fixed in this version (Studio narrowed 20,325 pale-orange leak pixels to 15 via per-row mask following the diagonal).
Banner_left_cleared.png — Studio (via Windows Photoshop/Python) removed the original baked-in left text and filled it with orange #FBB35D matching the diagonal. Image is 1920×600 native, dropped into Hero as full-bleed bg. React text overlay (H1 / subhead / CTA) sits on top of the orange portion. React-side clip-path orange panel removed (orange is in the image now), eliminating any visual misalignment between React polygon and image diagonal at non-1920 viewports. Result: monarch butterflies, marigolds, cannabis leaves, and the "ROOTED IN COMMUNITY • ELEVATED CANNABIS & CONNECTION" wooden medallion are all clearly visible for the first time.
BANNER_BG → Banner_left_cleared.png (1.1 MB, 1920×600, delivered from Windows → Studio → MBP via Tailscale at 03:12 EDT). React S.leftPanel with clip-path: polygon(...) replaced by simple S.contentOverlay (no clip, just centered absolute layer). Text overlay padding kept at 140/140, gap at 32, "Sesh" word still in Pacifico italic. Original Banner.png untouched on disk for any future fold that needs the unmodified version.
max-width: 1920px + margin: 0 auto on the Hero container to prevent the right-side collage from cropping at wider viewports. Side effect: on viewports > 1920px the auto-centering left a ~316px margin on each side, and the surrounding shell's #FBB35D bg wasn't reliably filling the gutter (parent constraint upstream clipped it). Visible result: white dead-zone on the left, photo overflowing on the right. v15 drops the max-width and lets the section bleed full-width like v13 did. All v14 spec wins kept (#FBB35D color, 140/140 padding, 32px gap).
Hero.jsx S.split: maxWidth: 1920 and margin: '0 auto'. Section now bleeds edge-to-edge at all viewport widths. JS readout confirms marginLeft: 0px, marginRight: 0px, width: 2166px at viewport 2174. Background still #FBB35D. Padding still 140/140. Gap still 32px. Mild collage cropping at ultra-wide viewports accepted — same trade-off as v13, but with v14's correct color and spacing.
#F78D1E (too saturated) to Sophie's official #FBB35D (her flat-gradient color). Left-panel internal padding pinned to 140px both sides. Vertical gap between H1 / subheadline / CTA pinned to 32px. Container constrained to max-width: 1920px with auto margins so the collage on the right doesn't crop at wider viewports — marigolds, butterflies, and wooden seal now all visible.
shell + split + leftPanel.background all → #FBB35D (was #F78D1E, a more saturated mid-orange). leftInner.paddingLeft / paddingRight → 140px fixed (was 6% ≈ 115px on the left + 24px on the right — both wrong). leftInner.gap → 32px (was 28px). split.maxWidth: 1920px added with margin: 0 auto so on viewports > 1920px the container centers rather than stretching and cropping the right-side collage. Hero structure + diagonal clip + Pacifico "Sesh" + copy hierarchy from v13 unchanged.
clip-path: polygon(0 0, 60% 0, 48% 100%, 0 100%) orange panel layered on top of full-width banner image, creating a diagonal edge between the two columns. Pacifico script font added to global.css for the "Sesh" word treatment (Yokoneya fallback chain). Subheadline properly demoted to <p>, H1 reserved for the real primary tagline at 60/64/Bold. SHOP NOW pill switched to darker SESH-orange #E65325 for contrast against the panel. bgScrim style removed entirely. Per-store rebind (v9), Sophie's PNG benefit icons + Map Icon (v10), fold-10 AI overlay removal + unicode escape fix (v11), and pinned 60/48/32 type scale (v12) all carry forward.
Typography.png from Sophie's PNG Assets folder and pins H1 (60px Bold), H2 (48px Bold), H3 (32px Regular), Body (16px), Caption (12px) at fixed pixel sizes. No more ad-hoc clamp(). Eight key heading style objects updated to Sophie's master scale.
--sc-h1-size: 60px, --sc-h2-size: 48px, --sc-h3-size: 32px + utility classes (.sc-h1 / .sc-h2 / .sc-h3) added to src/styles/global.css. Updated headings: Hero tagline (60/60/Bold), ch10_leftHeading "Nobody beats our freshness" (60/60/Bold), swHeading "Storewide Deals at <store>" (48/48/Bold), ch12_title "Check Out Our Everyday Deals" (48/48/Bold), ch13_handle "@startyoursesh" (48/48/Bold), ch14_title "Our Blog" (48/48/Bold), ch15_headline "48+ Stores Across Canada" (48/48/Bold), ch16_heading "A more rewarding way to shop" (48/48/Bold), swCardTitle "25% & 30% off" (32/40/Bold). Font family stack Brother 1816, Poppins, system-ui (Brother fonts gracefully fall back to Poppins). Still deferred to v13: Sophie's 9 hand-illustrated category icons (Figma /v1/images API still rate-limited 429 — retry needed).
’ escape replaced with real apostrophe. Card scrim added to the two PromoTrio white-text cards.
linear-gradient deepened from 0.45→0.0 to 0.70→0.10 on the left edge. New ch10_cardScrim style (diagonal dark gradient, 55%→25%→transparent) on the two right-column PromoTrio cards. Left freshness card scrim omitted (text is #000000 on yellow Sophie BG — scrim would hurt contrast). ’s JSX-literal escape in Instagram + Everyday-Deals sections replaced with real apostrophe. AI product overlays at /figma/8d60d4da…, /figma/9cc194e4…, /figma/dc6995ef… removed. Not fixed (needs Sophie): F-01 banner illustration vs photo, F-02 banner AR (1254×922 → 1732×600), F-04 img-1.png wide strip used as tall card, F-08 promo banner low-res.
selectedStore. Switching picker swaps brand logo, CRSA license, hours, store name, and active-deal text. (Still uses placeholder benefit icons + synthetic SVG map — fixed in v10.)
/vN/ folder. No redirects. No subdomains. One demo.sessions.ca, many folders.