Event page polish

.claude/rules/features/homepage-sections.md

@@ -16,4 +16,4 @@ paths:
 - Event page layouts (Marquee, Flyer, Story, Invite) are rows of traits in `constants/eventLayouts.ts`; CSS keys off the traits (`data-rail`, `data-poster`, `data-width`, `data-centered`), never layout names. A new layout is a new row, a designer sketch in `LayoutPicker/LayoutPreview.tsx`, and a backend `HomepageLayout` case. `DEFAULT_EVENT_LAYOUT` applies to every event without a saved layout.
 - Sections render in columns from ~350px (phones, Flyer on tablet) to ~690px, so their responsive rules use container queries (`hp.narrow`, `hp.compact`) on the section, never viewport media queries. Dialogs portal to `main` and keep viewport rules.
 - Status labels ("This event has ended", "Happening now") come from the server's `lifecycle_status`, never the client clock, so SSR and hydration agree. An ended event renders no Tickets block and no ticket rail; Marquee drops to the medium width.
-- The intro always offers Get directions. It shows venue name and city when the Location section is on (the section carries the full address), and the full address when it is off.
+- The intro always shows the venue's full address with Get directions, even when the Location section repeats it lower down.

frontend/src/components/layouts/EventHomepage/EventHomepage.module.scss

@@ -6,10 +6,6 @@
   position: relative;
   padding: 24px 20px 8px;
 
-  &[data-has-cover] {
-    @include hp.lip;
-  }
-
   @include hp.tablet-up {
     --section-bleed: 40px;
     padding: 36px 40px 16px;
@@ -230,7 +226,7 @@ a.host:hover {
   height: 48px;
   overflow: hidden;
   border: 1px solid var(--hp-border);
-  border-radius: 14px;
+  border-radius: 12px;
   background: var(--hp-surface);
   color: var(--hp-text);
 
@@ -405,7 +401,7 @@ a.host:hover {
     .hi-product-widget-container {
       --widget-card-bg-color: var(--hp-surface);
       --widget-border-color: var(--hp-border);
-      --widget-radius: 16px;
+      --widget-radius: 12px;
       --widget-accent-text-color: var(--hp-accent-ink);
       padding: 0;
       background: transparent;
@@ -420,13 +416,21 @@ a.host:hover {
     .hi-product-title h3 {
       font-family: hp.$font;
     }
+
+    .hi-product-widget-container .hi-footer-row .hi-continue-button {
+      &:disabled, &[data-disabled] {
+        background: var(--hp-fill-strong);
+        color: var(--hp-muted);
+        opacity: 1;
+      }
+    }
   }
 
   .body[data-rail] & {
     @include hp.wide {
       padding: 20px;
       border: 1px solid var(--hp-border);
-      border-radius: 24px;
+      border-radius: 18px;
       background: var(--hp-surface);
       box-shadow: var(--hp-shadow-md);
     }
@@ -439,7 +443,7 @@ a.host:hover {
   gap: 16px;
   padding: 20px;
   border: 1px solid var(--hp-border);
-  border-radius: 18px;
+  border-radius: 14px;
 }
 
 .locationText {
@@ -470,7 +474,7 @@ a.host:hover {
   gap: 14px;
   padding: 20px;
   border: 1px solid var(--hp-border);
-  border-radius: 18px;
+  border-radius: 14px;
 }
 
 .hostCardTop {
@@ -498,7 +502,7 @@ a.host:hover {
   flex-shrink: 0;
   width: 48px;
   height: 48px;
-  border-radius: 14px;
+  border-radius: 12px;
   object-fit: cover;
 
   &[data-placeholder] {

frontend/src/components/layouts/EventHomepage/EventIntro.tsx

@@ -36,7 +36,6 @@ interface EventIntroProps extends EventHostProps {
     lastOccurrenceDate: string | null;
     status: IntroStatus | null;
     location: EventLocationDisplay | null;
-    locationDetailsBelow: boolean;
     variedLocationLabel: string | null;
 }
 
@@ -89,7 +88,6 @@ export const EventIntro = ({
                                lastOccurrenceDate,
                                status,
                                location,
-                               locationDetailsBelow,
                                variedLocationLabel,
                                ...hostProps
                            }: EventIntroProps) => {
@@ -129,10 +127,8 @@ export const EventIntro = ({
                 {location && !location.isOnline && (location.venueName || location.full) && (
                     <Fact
                         tile={<span className={classes.factTile}><IconMapPin/></span>}
-                        title={locationDetailsBelow ? location.venueName || location.short || location.full : location.venueName || location.full}
-                        detail={locationDetailsBelow
-                            ? (location.venueName ? location.city : null)
-                            : (location.venueName ? location.full : null)}
+                        title={location.venueName || location.full}
+                        detail={location.venueName ? location.full : null}
                         extra={location.mapsUrl && (
                             <a href={location.mapsUrl} target="_blank" rel="nofollow ugc noopener noreferrer" className={classes.factLink}>
                                 {t`Get directions`}

frontend/src/components/layouts/EventHomepage/index.tsx

@@ -249,7 +249,6 @@ const EventHomepage = ({...loaderData}: EventHomepageProps) => {
             lastOccurrenceDate={event.type === EventType.RECURRING ? lastOccurrenceDate : null}
             status={status}
             location={location}
-            locationDetailsBelow={hasVenue && homepageSections.some(section => section.type === 'LOCATION')}
             variedLocationLabel={variedLocationLabel}
         />
     );
@@ -311,7 +310,6 @@ const EventHomepage = ({...loaderData}: EventHomepageProps) => {
                 <div
                     ref={layout.poster ? undefined : setContentNode}
                     className={classes.body}
-                    data-has-cover={!layout.poster && cover ? '' : undefined}
                     data-rail={ticketRail || undefined}
                     data-poster={layout.poster || undefined}
                     style={ticketRail ? {'--main-rows': mainRowCount} as CSSProperties : undefined}

frontend/src/components/layouts/HomepageFrame/HomepageFrame.module.scss

@@ -15,8 +15,8 @@
   --hp-accent-fill: color-mix(in srgb, var(--hp-accent) 10%, var(--hp-surface));
   --hp-accent-ink: var(--event-accent-ink);
   --hp-shadow-sm: 0 1px 2px rgba(15, 15, 20, 0.04), 0 2px 8px -2px rgba(15, 15, 20, 0.06);
-  --hp-shadow-md: 0 1px 2px rgba(15, 15, 20, 0.04), 0 12px 32px -12px rgba(15, 15, 20, 0.16);
-  --hp-shadow-lg: 0 1px 2px rgba(15, 15, 20, 0.03), 0 24px 64px -24px rgba(15, 15, 20, 0.22);
+  --hp-shadow-md: 0 1px 2px rgba(15, 15, 20, 0.05), 0 8px 20px -10px rgba(15, 15, 20, 0.18);
+  --hp-shadow-lg: 0 1px 2px rgba(15, 15, 20, 0.05), 0 16px 40px -20px rgba(15, 15, 20, 0.24);
   --hp-glass: color-mix(in srgb, var(--hp-surface) 82%, transparent);
   --hp-live-fill: color-mix(in srgb, #ef4444 12%, var(--hp-surface));
   --hp-live-ink: #b91c1c;
@@ -127,25 +127,20 @@
     max-height: min(68svh, 560px);
   }
 
-  @include hp.mobile {
-    box-sizing: content-box;
-    padding-bottom: hp.$lip;
-  }
-
   @include hp.tablet-up {
-    width: calc(100% - 20px);
-    margin: 10px 10px 0;
-    border-radius: hp.$sheet-radius - 10px;
+    width: calc(100% - 16px);
+    margin: 8px 8px 0;
+    border-radius: hp.$sheet-radius - 8px;
 
     &[data-sized] {
       max-height: min(480px, 56vh);
     }
   }
 
   @include hp.wide {
-    width: calc(100% - 24px);
-    margin: 12px 12px 0;
-    border-radius: hp.$sheet-radius - 12px;
+    width: calc(100% - 16px);
+    margin: 8px 8px 0;
+    border-radius: hp.$sheet-radius - 8px;
   }
 
   &[data-variant="banner"][data-sized] {
@@ -159,8 +154,6 @@
   &[data-variant="poster"] {
     width: 100%;
     margin: 0;
-    padding-bottom: 0;
-    box-sizing: border-box;
     border-radius: 20px;
     box-shadow: var(--hp-shadow-md);
 

frontend/src/components/layouts/HomepageFrame/_homepage.scss

@@ -3,8 +3,7 @@
 $font: var(--theme-font-family, 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
 $ease: cubic-bezier(0.22, 1, 0.36, 1);
 $wide: 1080px;
-$sheet-radius: 32px;
-$lip: 22px;
+$sheet-radius: 24px;
 
 @mixin wide {
   @media (min-width: $wide) {
@@ -45,23 +44,13 @@ $compact-container: 520px;
   }
 }
 
-@mixin lip {
-  @include mobile {
-    position: relative;
-    z-index: 1;
-    margin-top: -$lip;
-    border-radius: $lip $lip 0 0;
-    background: var(--hp-surface);
-  }
-}
-
 @mixin section-title {
   margin: 0;
   font-family: $font;
-  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
+  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
   font-weight: 700;
-  line-height: 1.25;
-  letter-spacing: -0.015em;
+  line-height: 1.2;
+  letter-spacing: -0.025em;
   color: var(--hp-text);
   text-wrap: balance;
 }
@@ -121,9 +110,9 @@ $compact-container: 520px;
 }
 
 @mixin rich-text {
-  color: var(--hp-muted);
+  color: color-mix(in srgb, var(--hp-text) 84%, var(--hp-surface));
   font-size: 1.0625rem;
-  line-height: 1.7;
+  line-height: 1.6;
   overflow-wrap: anywhere;
 
   @include mobile {

frontend/src/components/layouts/OrganizerHomepage/OrganizerHomepage.module.scss

@@ -6,10 +6,6 @@
   position: relative;
   padding: 24px 20px 8px;
 
-  &[data-has-cover] {
-    @include hp.lip;
-  }
-
   @include hp.tablet-up {
     --section-bleed: 40px;
     padding: 32px 40px 16px;

frontend/src/components/layouts/OrganizerHomepage/index.tsx

@@ -272,7 +272,7 @@ export const OrganizerHomepage = ({
             >
                 {cover && <CoverMedia image={cover} alt={organizer.name} variant="banner"/>}
 
-                <div className={classes.body} data-has-cover={cover ? '' : undefined}>
+                <div className={classes.body}>
                     <header className={classes.profile}>
                         {logo
                             ? <img src={sizedImageUrl(logo.url, 240)} alt="" className={classes.avatar}/>

frontend/src/utilites/effectiveLocation.ts

@@ -8,7 +8,6 @@ export const resolveEventLocation = (event: Event, occurrence?: EventOccurrence
 export interface EventLocationDisplay {
     isOnline: boolean;
     venueName: string | null;
-    city: string | null;
     short: string | null;
     full: string | null;
     mapsUrl: string | null;
@@ -86,7 +85,7 @@ export const buildEventLocationDisplay = (
     }
 
     if (eventLocation.type === LocationType.Online) {
-        return {isOnline: true, venueName: null, city: null, short: null, full: null, mapsUrl: null};
+        return {isOnline: true, venueName: null, short: null, full: null, mapsUrl: null};
     }
 
     const address = eventLocation.location?.structured_address ?? null;
@@ -101,7 +100,6 @@ export const buildEventLocationDisplay = (
     return {
         isOnline: false,
         venueName,
-        city: address?.city?.trim() || null,
         short: short ?? venueName,
         full,
         mapsUrl: buildMapsUrl(event, allowCustomMapsUrl, eventLocation, full ? address : null),