/* ============================================================ events.css — Events page layout + full EventCard variant Page structure: - EventsHero: full-viewport title section - EventsCardList: single-column list of full EventCards - FocusOverlay: dark backdrop for focus mode (hidden by default) Full EventCard extends the compact variant from upcoming-events.css with: workshop image, description, token-row availability indicator. Background: --color-surface-warm throughout (no texture images). ============================================================ */ /* ============================================================ Page-level body override Events page uses warm background instead of page white. Applied via . ============================================================ */ .page--events { background-color: var(--color-surface-warm); } /* ============================================================ Events Hero Full viewport height, vertically centered content. Placeholder section — final design TBD. ============================================================ */ .events-hero { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-layout-2xl); box-sizing: border-box; overflow: hidden; /* clip bg cover overflow */ } /* Background image — sits behind all hero content. */ .events-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .events-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Lift the text content above the bg. */ .events-hero__content, .events-hero__scroll-hint { position: relative; z-index: 1; } .events-hero__content { text-align: center; max-width: 700px; } .events-hero__heading { font-family: var(--type-family-display); letter-spacing: 0.03em; font-size: var(--type-size-display); font-weight: var(--type-weight-regular); line-height: 1.1; color: var(--color-surface-warm); margin-bottom: var(--space-component-xl); } .events-hero__subtext { font-family: var(--type-family-body); font-size: var(--type-size-h2); font-weight: var(--type-weight-regular); line-height: 1.4; color: var(--color-surface-warm); } /* Scroll hint — subtle animated chevron at bottom of hero */ .events-hero__scroll-hint { position: absolute; bottom: var(--space-component-2xl); left: 50%; transform: translateX(-50%); font-family: var(--type-family-body); font-size: var(--type-size-h2); color: var(--color-surface-warm); opacity: 0.4; animation: events-hero-bounce 2s ease-in-out infinite; } @keyframes events-hero-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } /* ============================================================ Events Card List Single column, centered, vertical stack of full EventCards. Gap uses space-component-2xl: 80px desktop / 44px mobile. ============================================================ */ .events-card-list { display: flex; flex-direction: column; align-items: center; gap: var(--space-component-2xl); padding: var(--space-layout-2xl) var(--space-layout-xl); padding-bottom: var(--space-layout-3xl); box-sizing: border-box; } /* ============================================================ Event Card — Full Variant (Desktop ≥ 1360px default) Extends .event-card base from upcoming-events.css. Layout on desktop: flex-ROW — image on left, right-section (content + CTA) on right. Tablet & mobile restore column. ============================================================ */ .event-card.event-card--full { width: 100%; max-width: 1109px; flex-direction: row; /* image left, content right */ align-items: center; justify-content: center; gap: 0; /* image has padding; no card gap */ padding-bottom: 0; /* padding is on right-section */ overflow: visible; /* let PNG shadow extend outside */ filter: none; /* no filter on card itself */ } /* Drop-shadows live on the IMAGES, not on the card or button containers. The PNG tiles (card bg + button bg) have their own organic rounded alpha channels. filter: drop-shadow() on each img traces its own alpha, producing a shadow that follows the hand-drawn shape. The card img and button img are SIBLINGS (both absolutely positioned inside their own .event-card__bg / .event-card__cta-bg containers), NOT parent/child. Two independent filter contexts — they can't feed into each other's silhouette input, so no interference artifacts. */ .event-card--full .event-card__bg img { filter: drop-shadow(var(--shadow-card)); } /* ============================================================ RightSection — wraps ContentArea + CTAButton on desktop Stacked vertically inside the card's right column. ============================================================ */ .event-card__right-section { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-component-xl); /* 44px */ padding: var(--space-component-xl); /* 44px */ box-sizing: border-box; } /* ContentArea: no padding on full variant — right-section handles it */ .event-card--full .event-card__content-area { padding: 0; gap: var(--space-component-xl); /* 44px — Title/Info/Availability */ width: 100%; } /* Info: EventDetails + Description side-by-side, 24px gap */ .event-card--full .event-card__info { flex-direction: row; gap: var(--space-component-lg); /* 24px (was 100px in prior layout) */ align-items: flex-start; justify-content: center; } /* EventDetails: MetaArea + SpecsArea stacked (items flex-start). Horizontally centered within Info via margin-inline: auto so the fixed-width details block sits in the center of its flex column/row. */ .event-card--full .event-card__details { flex-shrink: 0; gap: var(--space-component-md); /* 16px between MetaArea + SpecsArea */ margin-inline: auto; } /* MetaArea: date / time / location stacked */ .event-card--full .event-card__meta { gap: var(--space-component-md); /* 16px */ } /* SpecsArea: single PriceInfo row */ .event-card--full .event-card__specs { gap: 0; } /* PriceInfo: desktop (≥1360px) stacks to column per Figma 422:1533. Tablet/mobile keep the inherited row layout with separator dot. */ .event-card--full .event-card__price-info { gap: var(--space-component-sm); /* 8px between rows/items */ align-items: flex-start; } /* Tablet + Desktop (≥768px): PriceInfo stacks column with separator hidden. Mobile (<768px) keeps the row layout with separator dot. */ @media (min-width: 768px) { .event-card--full .event-card__price-info { flex-direction: column; /* stack: "€65 per person" / "All inclusive" */ gap: var(--space-component-md); /* 16px */ } .event-card--full .event-card__price-sep { display: none; /* separator dot not used in column layout */ } } /* ============================================================ Event Card — Image Container (full variant only) Desktop: flex-1, max-width 400px, 44px padding on top/bottom and left only (no right padding — image flows into content). ============================================================ */ .event-card__image { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; max-width: 450px; align-self: stretch; /* fill card height */ padding: var(--space-component-xl) 0 var(--space-component-xl) var(--space-component-xl); border-radius: var(--radius-card-xl); /* 32px */ overflow: hidden; box-sizing: border-box; display: flex; } .event-card__image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card-xl); /* 32px — image itself also rounded */ display: block; } /* ============================================================ Event Card — Description (full variant only) Desktop: flex-1 in Info row, fixed height 288px, right-aligned. Tablet/mobile: flows below EventDetails (via Info column). ============================================================ */ .event-card__description { font-family: var(--type-family-body); font-size: var(--type-size-body-md); font-weight: var(--type-weight-regular); line-height: 1.5; color: var(--color-text-default); flex: 1 1 0; /* fill remaining space in Info row */ min-width: 0; /* allow text wrapping in flex child */ height: 288px; /* Figma spec (desktop) */ text-align: left; } .event-card__description p { margin: 0; } /* ============================================================ Availability Indicator — Full (Token Row) Horizontal row of circular ceramic token images. Each token fills proportionally (flex: 1) with 4px gap. Filled tokens: coloured ceramic photos with baked shadow. Empty tokens: flat greyscale printed-on appearance. ============================================================ */ .availability-indicator--full { display: flex; flex-direction: column; gap: var(--space-component-sm); /* 8px */ align-items: flex-start; /* text left-aligned per Figma */ width: 100%; padding: 0 var(--space-component-3xl); /* 0 top/bottom, 100px sides (desktop) */ box-sizing: border-box; } .availability-indicator__tokens { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--space-component-xs); width: 100%; overflow: hidden; } .availability-indicator__token { flex: 1 1 0; /* grow equally, basis 0 so all start same size */ min-width: 0; /* allow shrinking below intrinsic image size */ width: 0; /* flex-basis override for images */ aspect-ratio: 1 / 1; object-fit: contain; display: block; max-width: 48px; /* cap individual token size */ } .availability-indicator__text { font-family: var(--type-family-nav); font-size: var(--type-size-caption); font-weight: var(--type-weight-regular); line-height: normal; color: var(--color-text-default); margin: 0; } /* ============================================================ Sold Out State — full EventCard variant CMS: the backend toggles `event-card--sold-out` on the card root based on availability. It greys out the title/meta/description and the workshop image, replaces the price-info block with a bolder "Sold out" label, and swaps the CTA into its greyed variant. Title/meta opacity is already defined in upcoming-events.css (shared with the compact variant). The rules below only add the full-variant specifics: description fade, image fade, and the price-info → sold-out-label swap inside event-card__specs. ============================================================ */ /* Fade additional text only on the full card (description). */ .event-card--full.event-card--sold-out .event-card__description { opacity: 0.4; } /* Workshop image at 50% opacity. */ .event-card--full.event-card--sold-out .event-card__image img { opacity: 0.5; } /* event-card__specs: swap price-info for the sold-out label. */ .event-card__sold-out-label { display: none; /* hidden by default */ margin: 0; font-family: var(--type-family-body); font-size: var(--type-size-h3); font-weight: var(--type-weight-bold); color: var(--color-text-default); } .event-card--full.event-card--sold-out .event-card__price-info { display: none; /* hide price block */ } .event-card--full.event-card--sold-out .event-card__sold-out-label { display: block; /* show the replacement */ opacity: 1; /* never greyed */ } /* ============================================================ Sold Out State — CTA button CTA greyed out with no interaction. Availability text and tokens remain visible (all tokens filled). ============================================================ */ .event-card__cta--sold-out { pointer-events: none; } .event-card__cta--sold-out .event-card__cta-bg img { filter: grayscale(80%) opacity(0.5); } .event-card__cta--sold-out .event-card__cta-label { opacity: 0.6; } /* ============================================================ Focus Mode Overlay Semi-transparent dark backdrop for card isolation. Hidden by default. Activated via JS class toggle. ============================================================ */ .focus-overlay { position: fixed; inset: 0; z-index: 100; background-color: rgba(74, 48, 32, 0.6); /* warm dark terracotta, 60% opacity */ opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .focus-overlay--active { opacity: 1; pointer-events: auto; } /* ============================================================ Focus Close Button Fixed top-right, visible only when focus mode is active. ============================================================ */ .focus-close-btn { position: fixed; top: var(--space-component-xl); right: var(--space-component-xl); z-index: 103; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; /* Hidden state: parked off to the right of the viewport, slides in when --visible is added. Uses steps(4) for a stepped stop-motion feel (~6.7fps over 0.6s) matching the site's handmade aesthetic. */ transform: translateX(calc(100% + var(--space-component-xl) + 10px)); pointer-events: none; transition: transform 0.6s steps(4); } .focus-close-btn__icon { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.15s ease; } .focus-close-btn--visible { transform: translateX(0); pointer-events: auto; } .focus-close-btn:hover .focus-close-btn__icon { transform: scale(0.95); } /* ============================================================ Event Card — Focus Mode State Card pops above the overlay via z-index and scales up 5%. Stays in document flow (no position change needed). Other cards remain behind the overlay. ============================================================ */ .event-card--focused { position: relative; z-index: 101; /* transform is driven by JS (stop-motion stepped scale-up + rotation jitter) */ } /* Other cards during focus: quick fade (stop-motion later) */ .event-card--dimmed { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } /* ============================================================ Responsive — Tablet (768px – 1359px) ============================================================ */ @media (max-width: 1359px) and (min-width: 768px) { .events-card-list { padding-left: var(--space-layout-lg); padding-right: var(--space-layout-lg); } /* Tablet: card reverts to column with 44px gap between Image / RightSection (per Figma 539:919). Bottom inset is applied on right-section instead. */ .event-card.event-card--full { max-width: 815px; flex-direction: column; gap: var(--space-component-lg); /* 24px between image / content / button */ padding-bottom: 0; } /* Tablet: right-section collapses to natural flow inside card column. 80px horizontal padding matches Figma ContentArea px-80. Bottom padding moved here from the card itself. */ .event-card__right-section { width: 100%; flex: 0 0 auto; padding: 0 var(--space-component-2xl) var(--space-component-xl); } /* Tablet: ContentArea is inside right-section but with no extra padding */ .event-card--full .event-card__content-area { padding: 0; } /* Tablet: image container — 44px top + horizontal padding, no bottom (per Figma 539:921). Image inset from card edge with rounded corners. */ .event-card__image { flex: 0 0 auto; width: 100%; max-width: none; align-self: auto; padding: var(--space-component-xl) var(--space-component-xl) 0; } .event-card__image img { aspect-ratio: 727 / 344; /* per Figma inner image 727×344 */ height: auto; border-radius: var(--radius-card-xl); /* 32px — image is rounded inside padded container */ } /* Tablet: Info is ROW with 44px gap (per Figma 539:926) — EventDetails left, Description right */ .event-card--full .event-card__info { flex-direction: row; gap: var(--space-component-xl); /* 44px */ align-items: flex-start; } /* Tablet: Description fills remaining space, height hugs content */ .event-card__description { height: fit-content; text-align: left; } /* Tablet: narrower AvailabilityIndicator padding (per Figma px-24) */ .availability-indicator--full { padding-left: var(--space-component-lg); /* 24px */ padding-right: var(--space-component-lg); } } /* ============================================================ Responsive — Narrow tablet (768px – 850px) At the lower end of the tablet range the row-layout Info gets cramped — drop the description down to body (16px) so it has room to breathe alongside EventDetails. ============================================================ */ @media (min-width: 768px) and (max-width: 850px) { .event-card--full .event-card__description { font-size: var(--type-size-body); /* 16px */ } } /* ============================================================ Responsive — Mobile (< 768px) Token overrides handle type-size and spacing changes. Card goes full-width with reduced side padding. Description switches to centered text. Info stacks vertically (column). ============================================================ */ @media (max-width: 767px) { .events-card-list { padding-left: var(--space-layout-md); padding-right: var(--space-layout-md); } /* Mobile: card is column, full-width. Bottom inset moved to right-section. */ .event-card.event-card--full { max-width: none; width: 100%; flex-direction: column; padding-bottom: 0; } /* Mobile: right-section collapses to natural flow. Bottom padding moved here from the card itself. */ .event-card__right-section { width: 100%; flex: 0 0 auto; padding: 0 var(--space-component-lg) var(--space-component-xl); } /* Mobile: ContentArea has no extra padding */ .event-card--full .event-card__content-area { padding: 0; } /* Mobile: image container has 24px padding all around (per Figma 539:973); image itself is rounded with --radius-card-xl (32px). */ .event-card__image { flex: 0 0 auto; width: 100%; max-width: none; align-self: auto; padding: var(--space-component-lg); /* 24px all sides */ } .event-card__image img { aspect-ratio: 2 / 1; height: auto; border-radius: var(--radius-card-lg); /* 16px — image rounded inside padded container */ } /* Mobile: Info stacks to column */ .event-card--full .event-card__info { flex-direction: column; gap: var(--space-component-lg); /* 24px */ } /* Mobile: EventDetails fills container width with a left padding offset */ .event-card--full .event-card__details { width: 100%; margin-inline: 0; padding-left: var(--space-component-lg); /* 24px */ } .event-card__description { height: auto; text-align: left; padding-top: var(--space-component-md); /* 12px top only (mobile) */ } /* Mobile: minimal AvailabilityIndicator padding */ .availability-indicator--full { padding-left: var(--space-component-xs); /* 4px */ padding-right: var(--space-component-xs); } .focus-close-btn { top: var(--space-component-lg); right: var(--space-component-lg); } }