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.
type_plant.svg), status badges (Sale/New from Badges.svg), dark navy panel overlay on lower product image with brand/title/THC/CBD chips, weight dropdown, orange + button that opens Dutchie checkout in new tab. Filter sidebar = text rows w/ bottom dividers (NOT checkboxes) per filter_bar 2.svg; sidebar turns orange #F8A53B when filters applied. URL-synced filter state (Zustand), active-filter chip strip above grid, sort popover, skeleton loading, empty state. rembg u2net image-prep script (scripts/prep-product-images.py) generates transparent PNG-32s at public/dutchie-masked/{200,400,600}/ — kills the Dutchie white-bg issue entirely, no Photoshop roundtrip needed. v44 gradient flip superseded.
images.dutchie.com as JPEGs with pure white rgb(255,255,255) backgrounds baked in (no alpha channel). The previous card gradient 180deg #FAFAF7 → #F4F4F0 put the darker grey at the bottom, contrasting against the image's white bg and creating a visible "white box" effect. v44 flips it: 180deg #F4F4F0 → #FFFFFF — paper-grain at top, pure white at bottom. The image's white bg now blends seamlessly into the bottom of the card, eliminating the box look. Quick win per Sophie's suggestion; proper transparency pipeline (Worker R2 cache of PNG-32 with white-key masked to alpha 0) is queued as v51.
secondaryHeader adds margin: 0 auto + textAlign: center so heading + tagline both center on the viewport. secondaryBottomRow changes justifyContent from space-between → center 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.
<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).
#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.
#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.
DealsFlyer function body replaced with return null. ch12_section.background and ch13_section.background both changed #F9F6EE → #FAF7F0. No other folds touched.
~/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.
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.
#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.
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/.
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.
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.
<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.
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.
#FAF7F0 (matches strain marquee, distinct from white).
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).
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.
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.
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.
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.
.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.
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.
#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.
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.
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.
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.
#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.
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.
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.