demo.sessions.ca

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.

v43May 22, 20265:18 AM EDTLATEST
Hero secondary fold — center align heading + tagline + stats + CTA User wanted "Backed by Ontario. Built for community." headline + tagline centered (was left-aligned, reads as horrible). v43 centers the entire secondary fold: secondaryHeader adds margin: 0 auto + textAlign: center so heading + tagline both center on the viewport. secondaryBottomRow changes justifyContent from space-betweencenter so stats + CTA cluster together centered (was: stats pushed left, CTA pushed right). statRow.flex changes from "2 1 600px""0 1 auto" so it sizes to content + lets the CTA sit naturally next to it instead of being pushed across the row.
v42May 22, 20265:08 AM EDTARCHIVE
Hero Sesh font reverted + RewardsFooterBanner left-aligned to match folds above Two precise corrections to v41. (1) Reverted Hero H1 "Sesh" spacing — the v41 F3 added word-spaces inside the script-font span created awkward visual gaps. Original <span>Sesh</span> between <br/> tags is restored — the line breaks already provide both visual + screen-reader semantics. (2) RewardsFooterBanner content alignment swapped from fully centered → left-aligned to MATCH the StoreMapCTA fold directly above it (which has left-aligned headline + body + CTA) and the Rewards Bento fold above that (which has left-aligned content in its dark card). The mismatch was creating a jarring fold-to-fold alignment shift. ch16_inner drops grid + place-items:center + textAlign:center. ch16_textCol gets maxWidth:760 (matches Hero text column) + alignItems:flex-start. ch16_logoSm drops margin:auto (v41 fix). ch16_benefitsRow swaps auto-fit grid → flex wrap left-justified. ch16_legal drops maxWidth:805 (column handles it). Radial gradient origin re-positioned 50% → 22% to back the new left-aligned content (v41 F16 was correct for centered layout; now needs to follow content position).
v41May 22, 20264:45 AM EDTARCHIVE
Design audit pass — 12 of 20 flaws fixed (tokens + contrast + alignment + padding) User submitted 20-flaw design audit with 5 systemic root causes. v41 addresses the highest-impact 12: (F2) Both Hero CTAs unified to #E65325 (was mixed #E65325 / #C03C15). (F3) Hero H1 "Sesh" gets proper word spaces — DOM now reads "YOUR NEXT Sesh STARTS HERE" with separators (was concat with no spaces). (F5) Featured Categories halo inset -18% → -8% so glow no longer bleeds into adjacent items at 9-col grid. (F8) Featured Carousel header maxWidth 1920 → 1640 matching other folds. (F10) ch12 title #000000 → #0D0D0B unified with text-primary token. (F11) GalleryDeals subtext #B4BBBF → rgba(13,13,11,0.65) — WCAG contrast 1.82:1 → ~5:1 (passes AA). (F12) Lime green card subtext alpha 0.78 → 0.88 for better contrast on lime bg. (F13) Review cards width 320px → clamp(280px, 24vw, 380px) responsive. (F14) Stray #F9F6EE → #FAF7F0 unified cream. (F15) StoreMapCTA padding restored: 56/0/0 → 64/0/80 (breathing room before dark fold). (F16) RewardsFooter gradient origin 30% → 50% (matches centered content — was designed for 2-col layout). (F17) RewardsFooter logo gets margin:0 auto for true center. (F18) RewardsFooter benefits grid repeat(6,1fr) → auto-fit minmax(120px,1fr) responsive. (F19) RewardsFooter padding 72/72 → 80/88 matching Storewide Deals dark fold rhythm. Plus: design token CSS variables added to global.css (sc-text-primary, sc-cream-bg, sc-orange/-mid/-deep, etc) for systemic consistency going forward.
Remaining audit items deferred: F1 hero max-width consolidation (requires more careful refactor), F4 missing width:100% on 5 sections (audit ALL sections systematically), F6 H3 semantic-vs-size (intentional design choice), F7 grid min-width guards (responsive deeper dive), F9 EverydayDealsBanner wrapper (component refactor), F20 footer link sizes (footer audit). These deferred items don\'t affect visible quality on the demo viewports we test; flagged for v42+.
v40May 22, 20264:18 AM EDTARCHIVE
Fold transition cleanup — unify StoreMapCTA cream, drop off-brand navy from RewardsFooterBanner Two color-spec violations caught from the fold-transition screenshot. (1) StoreMapCTA bg was #F9F6EE — slightly off the #FAF7F0 cream we standardized in v35 across Rewards Bento + Gallery + Instagram. Tiny visible color step where the fold met the others. (2) RewardsFooterBanner bg was #1C2B36 — the SAME off-brand navy blue we explicitly dropped from Storewide Deals back in v26. It crept into this footer fold and we never caught it. v40 fixes both: ch15 cream unified to #FAF7F0, ch16 navy replaced with #0D0D0B Sessions deep black (same as Storewide Deals — keeps the two dark folds on-palette). Also: ch15 bottom padding zeroed and ch16 top padding bumped to 72 so the fold transition sits flush + breathing room is on the dark side where it belongs. Orange radial scrim alpha softened 0.18 → 0.10 since it sits on black now, not navy.
v39May 22, 20264:02 AM EDTARCHIVE
Remove Download App image from RewardsFooterBanner — single-column centered layout User requested deletion of the "Download the Sessions app" image (Download app.png) from the dark RewardsFooterBanner section. Dropped the wrapping div + img + DOWNLOAD_APP const + the ch16_appCol and ch16_appImg style objects. Changed ch16_inner grid from two-column 1fr/1fr → single-column 1fr with justifyItems:center + textAlign:center so the text block + benefits + CTAs now center on the section. Zero changes to any other folds.
v38May 22, 20263:48 AM EDTARCHIVE
StoreMapCTA — premium Ontario map SVG with branded location pins User dropped Layer 2 (1).svg (755×313 viewBox, 131KB, 61 paths) — Sophie\'s premium Ontario province map in steel blue with orange Sessions-branded location pins clustered around the actual store geography (GTA + Hamilton + London + Niagara). Each pin uses the Sessions asterisk-circle logo as the marker. Replaces the previous generic map-icon.png. Asset is production-ready as delivered — no photoshop tweaking needed. Wired in at StoreMapCTA section: copied to public/figma/sessions-assets/ontario-stores-map.svg, src swapped, alt text refined, maxWidth bumped 640 → 720 (SVG scales crisply at any size), display:block added.
v37May 22, 20263:42 AM EDTARCHIVE
CircularGallery — tightened whitespace (no more giant cream empty space above/below cards) User audit: too much cream empty space above + below the rotating product cards. Root cause: section was 260vh tall with a 100vh sticky window — cards (420px) centered in viewport leaving ~330px empty on each side. Title was absolute-positioned at section top, sitting alone in the cream void above the cards. v37 fixes: shrunk wrap height 260vh → 150vh (still enough scroll for ~1 full rotation), replaced 100vh sticky window with fixed 640px (just bigger than card height + breathing room), moved title block from absolute-overlay into normal flow above the gallery so they frame as one tight unit. Hint margin tightened 20px → 12px above + 24px below. Section padding flipped to 56/0 so cream flows continuously from title down into gallery wrap. Net effect: section visual height drops from ~3500px to ~1200px without sacrificing the scroll-driven 3D rotation effect.
v36May 22, 20263:08 AM EDTARCHIVE
Picker upgrade — deploy timestamps with AM/PM + brighter date typography Pulled deploy timestamps from Cloudflare Pages API (46 deploys, 27 mapped to versions v9-v35) and replaced ISO-date stubs with formatted local time: "May 22, 2026 · 3:03 AM EDT". Brightened .date class from grey #666 → cream #E5DECC at weight 700 for proper contrast on the #0D0D0B dark picker bg. Added .time sub-span in hero orange #F78D1E with tabular-nums. v8 predates CF Pages logging — falls back to estimated time. Picker-only update; no /vN/ content touched.
v35May 22, 20263:03 AM EDTARCHIVE
Remove DealsFlyer + unify cream bgs for seamless fold blend User requested removal of the "Puff Puff Post / Your weekly Sessions briefing" carousel banner (figma node 27271:11499 — DealsFlyer component). Its white bg #FFFFFF broke the cream-cream-cream rhythm between the warm Rewards Bento above and the cream Gallery/Instagram folds below. v35 makes DealsFlyer return null (cleanest — no App.jsx edit, preserves slot number for future use). Also unifies ch12_section (GalleryDeals) and ch13_section (InstagramFeed) bg colors from #F9F6EE#FAF7F0 to match RewardsPromoStrip exactly. Result: continuous warm-cream band from Reviews → Rewards → Gallery → Instagram, no awkward color step.
What's new vs v34: SophieHome.jsx DealsFlyer function body replaced with return null. ch12_section.background and ch13_section.background both changed #F9F6EE → #FAF7F0. No other folds touched.
v34May 22, 20262:54 AM EDTARCHIVE
Rewards Bento — Sophie's actual PNG icons + circle illustrations (asset drop wired in) User dropped ~/Downloads/sessions asserts/ with 10 unique PNGs. Identified each by viewing: 5 standalone benefit icons at 2167×2167 (proper line-art with soft-blue gradient on cream circles — Exclusive Savings stopwatch+coin, Customized Offers ribbon+%, Annual Gift wrapped-present, Sesh Gear cap-with-S-shield, Gift Cards card-with-bow). Missing 6th benefit (Birthday Discount cake) was baked into a composite reference PNG (08-bf2fb9, 1251×1500) — cropped the cake region (col 2, row 0, 360×360 → upscaled to 2167×2167 LANCZOS for size parity). Two more PNGs identified: 06-9cc194 = freshness illustration (white line-art cannabis bud/leaves on lime-green circle, 528×528) and 10-dc6995 = delivery illustration (white line-art rider+scooter+delivery-box on magenta circle, 528×528) — these are the FINAL versions of what was previously dropped as AI placeholders in v11. Wired everything into RewardsBento: <img> tags now point to /figma/sessions-assets/rewards-benefits/sophie-v2/*.png and /figma/sessions-assets/illustrations/*.png. Hand-authored RB_SVG block + inline plant+scooter SVGs removed.
What's new vs v33: Installed 6 PNGs at public/figma/sessions-assets/rewards-benefits/sophie-v2/ (5 from drop + 1 cropped+upscaled cake). Installed 2 PNGs at public/figma/sessions-assets/illustrations/ (freshness-green, delivery-magenta). SophieHome.jsx: dropped RB_SVG (lookup map of inline hand-authored SVGs) and both inline 180×180 SVGs (plant + scooter); replaced with <img> to the real PNGs. rb_benefitIcon size 36 → 52 + objectFit:contain (Sophie's icons are detailed enough to fill the tile). Added rb_illoImg style (180×180 contain). Dark img-2.png pattern bg (04-54d363 in the drop is byte-identical, no copy needed). The full 6-icon composite reference (08-bf2fb9) is kept only as source for the cake crop.
v33May 22, 20262:38 AM EDTARCHIVE
Rewards Bento — matches Sophie's reference exactly (logo + 6 icons on orange strips + green/magenta promos) User shared Sophie's reference: 3-card bento. v33 combines the two previously separate sections (RewardsPromoStrip + FreshnessBanner) into one cohesive fold. LEFT card (60%): dark #1A1A18 with Sessions asterisk-pattern bg (img-2.png), real Sessions Rewards wordmark logo (img-1.png), "Start saving when you join our loyalty program" tagline, orange "SIGN UP" CTA, then 6 benefit icons on 2 horizontal orange strips (3 per row): Exclusive Savings / Customized Offers / Birthday Discount / Annual Gift / Sesh Gear / Gift Cards — each in a cream circle tile with white uppercase label. TOP RIGHT (40%, lime green #C5E456): "Nobody beats our freshness. Guaranteed." + "Always fresh, every sesh" + OUR PROGRAMS CTA + hand-authored inline SVG plant-in-circle line illustration. BOTTOM RIGHT (40%, magenta #DC1B7A): "Next time stay on the couch." + delivery tagline + OUR PROGRAMS CTA + hand-authored inline SVG scooter-in-circle line illustration. Old FreshnessBanner now returns null (its content lives inside RewardsBento). Section bg cream #FAF7F0 for continuity with Reviews above.
What's new vs v32: RewardsPromoStrip fully rewritten as bento. FreshnessBanner returns null. New rb_* style block (~14 styles). Two inline SVG line illustrations hand-authored (plant + scooter, each in a circle, white strokes for contrast against colored bgs). Uses existing assets: img-1.png (wordmark logo), img-2.png (dark pattern bg), 6 benefit PNGs from rewards-benefits/.
v32May 22, 20262:23 AM EDTARCHIVE
Reviews — LogoLoop marquee (verified props), refined ReviewCard, pause-on-hover Wraps the 5 testimonials in reactbits LogoLoop with the exact props verified from reactbits.dev docs you pasted. Old version used a manual scroll-snap div — user had to drag/scroll to see reviews. v32 makes them flow continuously leftward at premium pace, pausing when user hovers to read. New ReviewCard component for the cards: leading quote glyph in soft hero orange (positioned top-right, 60px Georgia serif, 20% opacity), refined typography (14/22 body, uppercase 12px name), 320×200 size, soft drop shadow. LogoLoop props: speed=50 (slower than default 120 — testimonials need readability), direction="left", gap=24, logoHeight=200, fadeOut=true with fadeOutColor="#FAF7F0" (matches section bg so fade dissolves cards into nothing at edges), hoverSpeed=0 (full pause on hover), scaleOnHover=false (cards stay clean, don't scale), ariaLabel="Customer reviews", custom renderItem for inline-block wrapper. Section bg cream #FAF7F0 for continuity with Store Locator above. Header: 11/13/400 eyebrow + 48/48/700 H2 + animated 4.7★ CountUp + Google Reviews subline + outlined CTA. Per-store binding (storeName) via useSelectedStoreRecord.
What's new vs v31: SophieHome.jsx adds ReviewCard component + REVIEW_LOGOS array. ReviewsSection fully rewritten — uses LogoLoop with verified props instead of manual scroll-snap div. New rv_* style block (~13 styles) replaces the old review* style block (still in file, harmless). Section bg now cream #FAF7F0.
v31May 22, 20262:13 AM EDTARCHIVE
Store Locator H2 — reactbits GradientText with Sessions brand warm-orange shimmer Wraps the "Visit London North" H2 in reactbits.dev <GradientText>. Props verified against the local source at src/components/reactbits/GradientText.jsx (matches canonical reactbits.dev API): colors=['#C03C15','#E65325','#F78D1E','#FBB35D','#F78D1E','#E65325','#C03C15'] (Sessions brand palette — deeper SESH → mid → pale → back, gives soft warm shimmer), animationSpeed=6 (premium pace), direction="horizontal", yoyo=true (smooth back-and-forth, not jarring loop), showBorder=false (no decorative border, pure text effect), pauseOnHover=false (lets the shimmer run continuously). Component's default styles (display:flex, margin:0 auto, max-width:fit-content, border-radius:1.25rem, cursor:pointer, backdrop-filter:blur) would have centered the H2 + broken the 48/48/700 Sophie typography — overridden with new .sl-heading-gradient class in global.css (display:inline-block, margin:0, max-width:none, font:inherit). Animation runs via Framer Motion useAnimationFrame at 60fps.
What's new vs v30: SophieHome.jsx adds SESSIONS_BRAND_GRADIENT constant + imports GradientText. StoreLocator H2 wrapped. global.css adds 8-line .sl-heading-gradient override block. Zero changes to Hero, Trust Strip, Categories, Storewide Deals, or Circular Gallery folds.
v30May 22, 20261:35 AM EDTARCHIVE
Store Locator — premium bento redesign with live OPEN status, hours table, nearby strip Old locator: H2 was rendering the raw address (data binding mismatch — used worker-shape `store_name` instead of v2 `name`), right card had 3 lonely emoji icons with no values (phone/email/hours were undefined for non-Hamilton stores), no section title, sparse white card with empty space. v30 fixes all of that and goes premium: section title row uses Sophie typography (11/13/400 eyebrow + 48/48/700 H2 + 16/24 subline + fullAddr). Bento layout: 580px Google map on left (60%), info column on right (40%) with 4 stacked sub-cards — (1) HOURS day-by-day table with today's row highlighted in orange + tabular-nums, (2) CONTACT card with phone/email/CRSA each in a hairline-bordered icon tile, (3) SERVICES badge row (In-Store / Pickup / Delivery / AGCO Licensed), (4) two CTAs (Get Directions ghost + Shop This Store orange). Live OPEN NOW pill in top-right corner — parses today's hours from v2 hours object + compares vs current time, shows green dot "OPEN NOW · CLOSES AT 11PM" or red dot "CLOSED · OPENS AT 9AM", auto-updates every 60s. Bottom row: nearby stores chip strip — same-city first (London North/South/River Bend if user picked London), falls back to any 5 others if fewer than 3 same-city. Section bg cream #FAF7F0 (matches strain marquee, distinct from white).
What's new vs v29: Added useOpenStatus hook (parses "9am - 11pm" ranges + computes open/closed every minute), parseTime12 + parseHoursRange helpers. StoreLocator function fully rewritten — uses useSelectedStoreRecord to pull v2 record (name, city, address, postal, phone, email, crsa, hours), loads full stores list lazily for nearby strip, computes fullAddr + directionsUrl + nearby array. ~30 new sl_* styles. Old locatorGrid/locatorMap/locatorInfo/locatorLine/optPill styles superseded (still in file, harmless).
v29May 22, 20261:11 AM EDTARCHIVE
CircularGallery — real ProductCards in 3D rotation, light cream bg v28's gallery tiles looked like a "gallery" not products — generic dark cards with name + price overlay. v29 rebuilds the tiles to use the actual ProductCard component from the rest of the site (white card + product photo + brand + name + size pill + stock badge + city badges + price + View Stores CTA). 3D rotation effect preserved exactly. Section bg flipped from #0D0D0B black to #F4F1E8 cream so white cards pop with proper shadow depth. Title colors flipped: eyebrow #F78D1E → #C03C15 (deeper SESH orange, pops on cream), heading #F5EFE6 → #0D0D0B (black on cream), View All button border/text inverted. Added far-back depth-of-field blur (up to 3px on tiles past 100° from front). Added hover-to-pause on the sticky window (was placeholder hint). Perspective increased 2000px → 2400px for deeper 3D feel.
What's new vs v28: CircularGallery.jsx swapped custom dark tile JSX for <ProductCard /> import + render. Added isPaused state + onMouseEnter/Leave handlers on .cgl-sticky. Tile size 260×340 → 280×420 (taller for product card content). Added per-tile blur calc for depth-of-field. CircularGallery.css: bg #0D0D0B → #F4F1E8, dropped dark .cgl-card + overlay styles, added .cgl-card-wrap that hosts the white ProductCard with shadow. SophieHome.jsx FeaturedCircularGallery: pass products directly (no more item-shape mapping), section bg + title colors flipped for light bg.
v28May 22, 202612:57 AM EDTARCHIVE
Featured section — scroll-driven 3D CircularGallery (from 21st.dev, converted to reactbits) Replaces the static 8-card ProductCarousel at the "Sessions Featured" slot with a 3D circular gallery that rotates as the user scrolls past the section. Source component from 21st.dev (ravikatiyar/circular-gallery shadcn registry), converted TSX → JSX + Tailwind → companion CSS file, dropped into src/components/reactbits/CircularGallery.jsx + .css following the existing reactbits pattern (LogoLoop, MagicRings, etc). New wrapper FeaturedCircularGallery in SophieHome.jsx maps Sessions product[] to gallery items (uses product.image or Banner.png fallback, eyebrow=price, name=product_name, subtitle=category). Section is 260vh tall with 100vh sticky stage — gallery rotates 540° as you scroll through. Idle auto-rotation when not scrolling. Tiles 260×340, 10 max, opacity+scale fade based on angle from front. Section bg deep black #0D0D0B (matches Storewide Deals fold for visual continuity). Title row uses Sophie typography (48/48/700 H2 + 11/13/400 eyebrow). Other slot (Everyday Deals) keeps the existing ProductCarousel.
What's new vs v27: Two new files: CircularGallery.jsx (3D rotor logic, scroll-handler, opacity/scale per-tile angle math) + CircularGallery.css (sticky wrapper, perspective stage, card styling, gradient overlay). SophieHome.jsx adds FeaturedCircularGallery export + 7 fcg_* styles. App.jsx imports the new component and swaps the Featured Items ProductCarousel for it.
v27May 21, 202611:46 PM EDTARCHIVE
Typography compliance pass — every H1/H2/eyebrow pinned to Sophie's Typography.png spec Audited every heading across the homepage against Sophie's pinned Typography.png spec (Header 1 = 60/60/Bold Brother XS, Header 2 = 48/48/Bold Brother XS, Header 3 = 32/32/Regular Brother 1816, Eyebrow = 11/13/Regular Brother 1816). Found 4 deviations: Trust strip H2 was 28/34/800 (way undersized), Featured Categories H2 was 36/40/800, Storewide H2 "LONDON NORTH" was 44/48/800, ProductCarousel H2 inherited from a stale .sc-h2 CSS class that used clamp(28px, 4.4vw, 48px) + weight 900. Hero H1 lineHeight was 64 not 60. All fixed to exact spec. global.css .sc-h2 rewritten to use the pinned vars; .sc-eyebrow fixed (was weight 800, spec says regular 400). Trust strip layout restructured: heading row goes full-width on its own line so 48px H2 fits cleanly; stats counters + FIND A STORE CTA share a row below.
What's new vs v26: global.css .sc-h2 and .sc-eyebrow replaced (vars instead of inline clamp + 900). SophieHome.jsx storeName 44→48/700 + ch3_title 36→48/700. Hero.jsx H1 lineHeight 64→60, secondaryHeading 28→48/700, trust strip layout: secondaryInner flex-row → flex-column, new secondaryBottomRow wraps stats + CTA. No content/asset/color changes — purely typography compliance.
v26May 21, 202611:32 PM EDTARCHIVE
Storewide Deals — bento + live-from-Dutchie theatre, black bg, drops off-brand blue Complete teardown of the static blue print collateral. New bento layout: hero deal (60% width) with massive 88px orange headline + 4-segment ticking countdown timer + Shop CTA. Right column splits stock pulse (limited-inventory counters per category, refreshes on click) + next drop card (Monday 9 AM with brand list + Set Reminder). Live header row shows store-name swap on picker change, animated pulse dot, "SYNCED Xm AGO" timestamp that ticks every 30s, clickable refresh button that spins 360° + bumps the timestamp. Section bg deep black #0D0D0B (drops #1C2B36 blue — on-brand, max drama vs cream Featured Categories above). All numbers/timestamps mocked but UI shape ready for real Dutchie API drop-in (just swap the mock data fetch). v2.json active_deals extended with expires_at + stock[] + next_drop for all 53 stores.
What's new vs v25: Added useTimeAgo + useCountdown hooks, LivePulse + RefreshButton + StockCounter + CountdownTimer sub-components. StorewideDeals function fully rewritten with bento JSX. New sw_v26 styles object (~25 keys, replaces old sw* exports). sessions-stores.v2.json patched: per-store stock + drop + expiry. React imports extended with useState + useEffect. Hero deal uses Framer Motion whileHover for soft orange-glow lift. Dutchie POS footer attribution added.
v25May 21, 20266:44 PM EDTARCHIVE
Featured Categories — premium Framer Motion hover (glow halo, spring lift, SESH-orange CTA) v24's hover was a flat CSS translateY + neutral dark shadow — didn't feel like a CTA. v25 introduces a proper Framer Motion CategoryTile component with four coordinated animations on hover: (1) tile lifts -8px + scales 1.06 with spring physics (stiffness 320, damping 22 — feels weighty, not bouncy), (2) radial-gradient orange glow halo blooms in behind the tile (opacity 0→1, scale 0.6→1.45, easeOut 450ms — like the icon is being illuminated), (3) icon rotates +3° + brightens 1.08x (subtle playful micro-motion), (4) label color flips to SESH orange #C03C15 (deeper than the hero's #F78D1E — reads as "selected/active CTA state"). Plus a whileTap press-down (scale 0.96, y -2, 120ms cubic) for tactile click feedback. The halo uses a radial-gradient rgba(247,141,30,0.55→0) with 2px blur — glows visibly behind the icon without obscuring it.
What's new vs v24: Added import { motion } from 'framer-motion'. New CategoryTile component with 4 variant configs (tile / halo / icon / label). Old static Link + CSS hover removed (and the <style> block deleted). Each tile now has 3 elements: absolute-positioned halo span (z=0), tile card with icon (z=1), label (z=1). Halo position inset: -18% with filter: blur(2px) for soft glow. Zero changes to bg color, layout, padding, icon set — purely the hover interaction.
v24May 21, 20266:36 PM EDTARCHIVE
Featured Categories — drop off-brand chocolate, single-row 9-col, colored Sophie variants User audit: v21's chocolate #2A1812 bg is off-brand (Sessions palette is orange/cream/black, not brown), and the 8-col grid orphaned Merchandise alone in row 2 ("looks like scrap"). v24: section bg cream #F4F1E8 (on-brand, distinct from trust strip's #FAF7F0 for visual differentiation without color clash), grid repeat(8,1fr) → repeat(9,1fr) — all 9 categories in a single straight row, no more orphan. Switched icons from Sophie's BW variant (*-bw.svg, white circle on chocolate) to COLORED variant (*.svg, has #F1F2F2 cream circle that has visible contrast on the cream #F4F1E8 bg). Title bumped 32px → 36px with bigger bottom margin (32 → 48px) for premium breathing room. Tile maxWidth 160 → 132 (fits 9 across cleanly), gap 16 → 24. Label color white → #0D0D0B with wider 0.08em letter-spacing. Hover state simplified: subtle lift + neutral dark shadow (was orange glow which clashed with cream). Section padding 64/72 → 80/88 for grandeur.
What's new vs v23: SophieHome.jsx ShopByCategory: cats[] tile paths *-bw.svg → *.svg (colored variants), ch3_section.background #2A1812 → #F4F1E8 + padding bump, ch3_grid 8-col → 9-col + gap 16 → 24, ch3_tileCard.maxWidth 160 → 132, ch3_title 32 → 36 + white → black, ch3_label white → black + tighter font + wider track, ch3_tile color white → black. Hover style swapped. No Hero or trust strip changes — v23's strain marquee fix preserved.
v23May 21, 20266:14 PM EDTARCHIVE
Strain marquee — premium refinement (drop rainbow + dot artifacts) Previous strain ticker reads cluttered: 9 different colored pills each with a glow box-shadow that creates a tiny dark "black dot" artifact below + colored dot inside each pill. v23 strips it to a refined single-palette chip strip: hairline 1px border at rgba(13,13,11,0.16), no glow shadows, no inner colored dot, 11px uppercase text with 0.18em letter-spacing (wider tracking = premium), slower scroll speed 50 → 28, edge fade enabled (LogoLoop fadeOut prop, color matches the new #FAF7F0 cream section bg so the fade is invisible past the edge — pills appear to gently dissolve in/out), section padding 24 → 32 for breathing room. Aesthetic now matches Aesop / Cuyana premium retail strip aesthetic instead of crypto-startup-rainbow.
What's new vs v22: 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).
v22May 21, 20266:03 PM EDTARCHIVE
Trust strip rewrite — animated counters, new copy, no more hero echo User flagged the secondary fold for repeating the hero's "Your Next Sesh Starts Here" headline and cramming all stats into one comma-separated line. v22 rewrites it as a proper trust strip: new headline "Backed by Ontario. Built for community." (distinct from the hero's brand-vibe tagline), sub-tagline emphasizing transparency + community, 4 large animated count-up counters (48+ locations, 132K+ SKUs, 4.7★ rating, 6 yrs serving Ontario) in hero orange #F78D1E to visually tie the two folds together, FIND A STORE CTA preserved. Counters use IntersectionObserver — they sit at 0 until scrolled into view, then tick up over 1.4s with easeOutCubic easing for a punchy stop. Hero H1 stays "YOUR NEXT Sesh STARTS HERE" untouched, so the two folds no longer say the same thing.
What's new vs v21: 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.
v21May 21, 20265:55 PM EDTARCHIVE
Featured Categories — Sophie's real BW SVGs + warm chocolate bg (premium contrast to hero) Replaces the AI-rendered 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.
What's new vs v20: 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.
v20May 21, 20265:36 PM EDTARCHIVE
Hero text alignment fix — text now aligns with header logo at wide viewports User audit at viewport 2560 caught three different left-anchors: header logo at x=456 (header uses 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).
What's new vs v19: Hero.jsx adds 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.
v19May 21, 20265:27 PM EDTARCHIVE
Hero proportion fix — transparent collage, CSS-driven orange panel + diagonal, viewport-scaled Fixes v18 wide-viewport regression. v18 right-anchored the 1920×600 baked image and bled section bg to fill the left gutter — but the diagonal was BAKED INTO THE IMAGE at fixed pixel offsets, so at viewports >1920px the diagonal drifted in viewport-percentage terms (50% at 2174 instead of Sophie's spec ~44%). v19 separates the concerns: the orange panel + diagonal are now CSS (section's #F78D1E bg shows through transparent area of the collage PNG), and the collage scales responsively with viewport width. Result: diagonal stays at the SAME viewport percentages at every viewport (top 55.8%, bottom 41.5%). Generated 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).
What's new vs v18: New asset 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_BGBANNER_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).
v18May 21, 20265:10 PM EDTARCHIVE
Hero in-frame fix — banner at native 1920×600, right-anchored, orange gutter left Fixes "it's not in the frame" feedback from v17. v17 was using 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.
What's new vs v17: 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.
v17May 21, 20263:29 AM EDTARCHIVE
Dark orange banner swap — #F78D1E per request Asset-only swap. Studio re-edited the cleaned banner with the deeper #F78D1E (247, 141, 30) orange instead of the pale #FBB35D, then fixed a thin pale-strip artifact at the diagonal edge with a per-row mask following the diagonal. New file delivered Windows → Studio → MBP via Tailscale at 03:23 EDT, replaces the prior cleaned banner in place. Hero code unchanged. Pixel verification at left-edge coord (100, 300): rgb(247, 141, 30) = #F78D1E exactly.
What's new vs v16: One byte swap — 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).
v16May 21, 20263:19 AM EDTARCHIVE
Hero with Studio-cleaned banner — full collage visible (butterflies + medallion + leaves) Uses 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.
What's new vs v15: BANNER_BGBanner_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.
v15May 21, 202612:33 AM EDTARCHIVE
Hero regression fix — keep v14 color/padding/gap, drop the max-width centering v14 introduced 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).
What's new vs v14: Two lines removed from 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.
v14May 21, 202612:19 AM EDTARCHIVE
Hero tightened to Sophie's exact Figma spec Pixel-perfect compliance with the side-pane spec Ravi pulled from Figma. Background switched from #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.
What's new vs v13: Four-value diff against Sophie's side-pane spec. shell + split + leftPanel.background all → #FBB35D (was #F78D1E, a more saturated mid-orange). leftInner.paddingLeft / paddingRight140px fixed (was 6% ≈ 115px on the left + 24px on the right — both wrong). leftInner.gap32px (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.
v13May 21, 202612:01 AM EDTARCHIVE
Hero rewrite — split layout, real Figma structure, "Sesh" script font All 4 front-fold audit findings fixed in one rewrite. Hero is now the actual Figma design: left 55% orange flat panel with H1 "YOUR NEXT Sesh STARTS HERE" (Pacifico script for the "Sesh" word per Sophie's Yokoneya entry), subheadline "ROOTED IN COMMUNITY…", SHOP NOW pill. Right 45% Banner.png with diagonal clip-path edge. No dark scrim — orange is opaque flat color, doesn't need one. Banner AR mismatch resolved by giving the photo its own column instead of stretching it full-width.
What's new vs v12: Hero.jsx completely rewritten. Old: single full-bleed Banner.png + 0.70→0.10 dark scrim + subheadline-as-H1 (wrong copy hierarchy). New: 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.
v12May 20, 202610:55 PM EDTARCHIVE
Sophie's Typography pinned — H1/H2/H3 at exact spec sizes Reads 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.
What's new vs v11: CSS variables --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).
v11May 20, 20269:55 PM EDTARCHIVE
Design-audit fixes — overlay scrims, dropped AI overlays, unicode escape Addresses 4 of 10 flaws from the Claude Sonnet 4.6 design audit (F-03, F-05/06/07, F-09, F-10). Hero text scrim strengthened for legibility. Three AI product-photo overlays removed from fold 10 cards (wrong asset type per design brief). Unicode escape replaced with real apostrophe. Card scrim added to the two PromoTrio white-text cards.
What's new vs v10: Hero 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.
v10May 20, 20267:20 PM EDTARCHIVE
Sophie's real assets — benefit icons, Map Icon, 9th Merchandise tile, fold-10 fixes Replaces colored-dot placeholders, synthetic SVG map, and broken fold-10 image refs with Sophie's official PNG/SVG assets from "Sessions Website PNG/SVG Assets" folders. Per-store rebind from v9 carried forward.
What's new vs v9: 6 Sophie PNG benefit icons (Exclusive Savings / Customized Offers / Birthday Discount / Annual Gift / Sesh Gear / Gift Cards) replace colored dots in folds 9 + 16. Sophie's Map Icon.png replaces the inline synthetic SVG blob in fold 15. Fold 10 PromoTrio: broken /figma/<hash>.png BG refs (3 of 6) switched to working /v10/figma/three-col/img-N.png. Fold 3: 9th Merchandise tile added (was missing). Sessions Rewards Logo no longer used as recursive BG that bled across panels.
v9May 20, 20267:01 PM EDTARCHIVE
Per-store rebind — picker drives the page Header / Hero / Footer / StorewideDeals / StoreMapCTA bind to 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.)
Superseded by v10 for the asset cleanup. Per-store rebind logic identical.
v8May 20, 2026~6:00 PM EDTARCHIVE
Sophie home page rebuild — Figma-faithful folds AI 3D claymorphism category icons · banner-bg hero · 6-benefit Rewards strip · footer with Ontario badge. CRSA #1382440 hardcoded across all stores.
Superseded by v9 for the per-store rebind. Kept browsable for design comparison.
v2Windows premiumARCHIVE
Claymorphism premium variant 3D category renders · GLB models · static mirror from the Windows build pipeline.
Sessions Cannabis · Cannabis Retailer · License per store (see the v9 footer for the current store's CRSA) · ONTARIO AUTHORIZED CANNABIS RETAILER
Deploy convention: each new version → new /vN/ folder. No redirects. No subdomains. One demo.sessions.ca, many folders.