/* ============================================================ WayzAway Member Theme - Production Candidate Approved Browse design: V11 visual state Canonicalised from preview development versions. Contains: - V1 route/theme foundation - scoped V2 compact EventCard rules - V7 View event behaviour styling - V8 inline metadata/action styling - V9 exact corner menu styling - V10 category image positioning - V11 premium category styling Removed as obsolete: - V3 - V4 - V5 - V6 IMPORTANT: EventCard compact rules are restricted to: body.wz-member-browse body.wz-member-wall ============================================================ */ /* ========================================================== WayzAway Member Theme V1 Browse + member Wall + Event View Preview candidate. Route scoped: no public/shared/admin page styling. ========================================================== */ body.wz-member-theme { --wz-member-accent: #ec0052; --wz-member-accent-soft: rgba(236, 0, 82, 0.075); --wz-member-accent-border: rgba(236, 0, 82, 0.17); --wz-member-text: rgb(var(--v-theme-on-background)); --wz-member-muted: rgba(var(--v-theme-on-surface), 0.66); --wz-member-border: rgba(var(--v-border-color), 0.13); --wz-member-surface: rgb(var(--v-theme-surface)); --wz-member-bg: rgb(var(--v-theme-background)); --wz-member-radius: 20px; --wz-member-radius-sm: 14px; --wz-member-shadow: 0 10px 28px rgba(20, 24, 32, 0.065); --wz-member-shadow-hover: 0 14px 34px rgba(20, 24, 32, 0.11); } /* ========================================================== SHARED MEMBER SHELL ========================================================== */ body.wz-member-theme .v-main { background: radial-gradient( circle at 10% 0%, var(--wz-member-accent-soft), transparent 26rem ), var(--wz-member-bg); } body.wz-member-theme .v-main > .v-container { max-width: 1240px; } body.wz-member-theme .v-divider { opacity: 0.56; } body.wz-member-theme .v-btn { letter-spacing: 0; text-transform: none; } body.wz-member-theme .v-btn.v-btn--variant-flat { box-shadow: none; } body.wz-member-theme .v-btn.bg-primary, body.wz-member-theme .v-btn.text-primary { --v-theme-primary: 236, 0, 82; } body.wz-member-theme .v-field { border-radius: 13px; } body.wz-member-theme .v-field__outline { --v-field-border-opacity: 0.16; } body.wz-member-theme .v-field--focused .v-field__outline { --v-field-border-opacity: 0.7; } body.wz-member-theme .v-menu > .v-overlay__content > .v-list { border: 1px solid var(--wz-member-border); border-radius: 15px !important; box-shadow: 0 16px 40px rgba(20, 24, 32, 0.14) !important; overflow: hidden; } /* ========================================================== MEMBER EVENT CARDS Browse + Wall only ========================================================== */ body.wz-member-browse .event-card-sheet, body.wz-member-wall .event-card-sheet { overflow: hidden; border: 1px solid var(--wz-member-border) !important; border-radius: var(--wz-member-radius) !important; background: var(--wz-member-surface); box-shadow: var(--wz-member-shadow) !important; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } @media (hover: hover) and (pointer: fine) { body.wz-member-browse .event-card-sheet:hover, body.wz-member-wall .event-card-sheet:hover { transform: translateY(-2px); border-color: var(--wz-member-accent-border) !important; box-shadow: var(--wz-member-shadow-hover) !important; } } body.wz-member-browse .event-card-sheet > .v-img, body.wz-member-wall .event-card-sheet > .v-img { overflow: hidden; } body.wz-member-browse .event-card-sheet .v-card-text, body.wz-member-wall .event-card-sheet .v-card-text { padding: 15px 16px 16px; } body.wz-member-browse .event-card-sheet h4, body.wz-member-wall .event-card-sheet h4 { font-size: 1.02rem; line-height: 1.3; } body.wz-member-browse .event-card-sheet .text-overline, body.wz-member-wall .event-card-sheet .text-overline { letter-spacing: 0.065em !important; } body.wz-member-browse .event-card-sheet .v-chip, body.wz-member-wall .event-card-sheet .v-chip { border-radius: 10px; } body.wz-member-browse .load-more-btn, body.wz-member-wall .load-more-btn { min-height: 42px; padding-inline: 19px; border-radius: 999px !important; background: var(--wz-member-accent-soft) !important; border: 1px solid var(--wz-member-accent-border) !important; color: var(--wz-member-accent) !important; } /* ========================================================== BROWSE Discovery-led, cleaner filters and content rhythm ========================================================== */ body.wz-member-browse .v-main > .v-container { padding-top: 22px; } body.wz-member-browse .v-expansion-panels { gap: 10px; } body.wz-member-browse .v-expansion-panel { overflow: hidden; border: 1px solid var(--wz-member-border); border-radius: 16px !important; background: var(--wz-member-surface); box-shadow: none !important; } body.wz-member-browse .v-expansion-panel-title { min-height: 52px; font-weight: 700; } body.wz-member-browse .v-expansion-panel-text__wrapper { padding: 4px 14px 15px; } body.wz-member-browse .v-main > .v-container > .v-row > .v-col-lg-9 { padding-right: 18px; } body.wz-member-browse .v-main > .v-container > .v-row > .v-col-lg-3 { padding-left: 18px; } body.wz-member-browse .v-main > .v-container > .v-row > .v-col-lg-3 > div { border-radius: 18px; } body.wz-member-browse .v-infinite-scroll { gap: 3px; } /* ========================================================== MEMBER WALL Personal-history presentation ========================================================== */ body.wz-member-wall .v-main > .v-container { padding-top: 22px; } body.wz-member-wall .featured-event { overflow: hidden; border: 1px solid var(--wz-member-border); border-radius: var(--wz-member-radius) !important; box-shadow: var(--wz-member-shadow) !important; } body.wz-member-wall .featured-event .v-img { border-radius: var(--wz-member-radius) !important; } body.wz-member-wall .v-expansion-panels { gap: 10px; } body.wz-member-wall .v-expansion-panel { overflow: hidden; border: 1px solid var(--wz-member-border); border-radius: 16px !important; box-shadow: none !important; } body.wz-member-wall .v-expansion-panel-title { min-height: 50px; font-weight: 700; } body.wz-member-wall .find-events { margin-top: 2px; } body.wz-member-wall .v-main > .v-container > .v-divider.my-3 { margin-top: 19px !important; margin-bottom: 22px !important; } /* ========================================================== UPCOMING EVENTS Browse + Wall side rail ========================================================== */ body.wz-member-browse .v-col-lg-3 h4, body.wz-member-wall .v-col-lg-3 h4 { padding-left: 2px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--wz-member-muted); } body.wz-member-browse .v-col-lg-3 .v-alert, body.wz-member-wall .v-col-lg-3 .v-alert { border-radius: 14px; } body.wz-member-browse .v-col-lg-3 small, body.wz-member-wall .v-col-lg-3 small { color: var(--wz-member-muted); } /* ========================================================== EVENT VIEW Premium event-detail presentation ========================================================== */ body.wz-member-event .v-main > .v-container { max-width: 1080px; padding-top: 20px; } body.wz-member-event .v-main > .v-container > .v-row:first-child { margin-bottom: 9px; } body.wz-member-event .v-main > .v-container > .v-row:first-child h4 { font-size: 0.98rem; font-weight: 750; } body.wz-member-event .v-main > .v-container > .v-row:first-child small { color: var(--wz-member-muted); } body.wz-member-event .wz-event-detail-image { overflow: hidden; border: 1px solid var(--wz-member-border); border-radius: 22px !important; background: var(--wz-member-surface); box-shadow: var(--wz-member-shadow); } body.wz-member-event .wz-event-detail-video { border: 1px solid var(--wz-member-border) !important; border-radius: 18px !important; box-shadow: var(--wz-member-shadow); transition: transform 180ms ease, box-shadow 180ms ease; } @media (hover: hover) and (pointer: fine) { body.wz-member-event .wz-event-detail-video:hover { transform: translateY(-2px); box-shadow: var(--wz-member-shadow-hover); } } body.wz-member-event .v-main > .v-container > .v-row:nth-of-type(2) .v-col-md-8 > .v-card { overflow: hidden; border: 1px solid var(--wz-member-border); border-radius: 18px !important; box-shadow: none !important; } body.wz-member-event .rich-text-content { color: var(--wz-member-text); font-size: 0.96rem; line-height: 1.67; } body.wz-member-event .rich-text-content p { margin-bottom: 0.85em; } body.wz-member-event .rich-text-content p:last-child { margin-bottom: 0; } /* Reactions */ body.wz-member-event .v-main > .v-container .v-card .v-btn { border-radius: 12px; } /* Comments */ body.wz-member-event .v-main > .v-container h3 { margin-bottom: 4px; font-size: 1.22rem; font-weight: 800; } body.wz-member-event .v-main > .v-container .v-textarea .v-field { border: 1px solid var(--wz-member-border); border-radius: 16px !important; box-shadow: none; } body.wz-member-event .v-main > .v-container .v-list .v-card { border: 1px solid var(--wz-member-border); border-radius: 15px !important; background: rgba(var(--v-theme-surface), 0.78); box-shadow: none !important; } body.wz-member-event .mention-dropdown { overflow: hidden; border: 1px solid var(--wz-member-border); border-radius: 14px !important; box-shadow: 0 14px 34px rgba(20, 24, 32, 0.13); } body.wz-member-event .mention-link { color: var(--wz-member-accent); font-weight: 700; cursor: pointer; } /* Collection / Group modals reached from Event View */ body.wz-member-event .v-dialog .v-card { overflow: hidden; border: 1px solid var(--wz-member-border); border-radius: 20px !important; box-shadow: 0 20px 55px rgba(20, 24, 32, 0.2) !important; } /* ========================================================== MOBILE / APP ========================================================== */ @media (max-width: 959px) { body.wz-member-theme .v-main > .v-container { padding-top: 14px; } body.wz-member-browse .v-main > .v-container > .v-row > .v-col-lg-9, body.wz-member-browse .v-main > .v-container > .v-row > .v-col-lg-3 { padding-left: 12px; padding-right: 12px; } body.wz-member-wall .v-main > .v-container { padding-left: 12px; padding-right: 12px; } body.wz-member-event .v-main > .v-container { padding-left: 12px; padding-right: 12px; } body.wz-member-event .wz-event-detail-image { border-radius: 18px !important; } } @media (max-width: 640px) { body.wz-member-theme { --wz-member-radius: 17px; --wz-member-shadow: 0 7px 22px rgba(20, 24, 32, 0.055); } body.wz-member-browse .event-card-sheet, body.wz-member-wall .event-card-sheet { width: calc(100% - 10px); margin-inline: auto; border-radius: 17px !important; } body.wz-member-browse .event-card-sheet .v-card-text, body.wz-member-wall .event-card-sheet .v-card-text { padding: 13px 14px 14px; } body.wz-member-browse .v-expansion-panel, body.wz-member-wall .v-expansion-panel { border-radius: 14px !important; } body.wz-member-wall .featured-event { border-radius: 17px !important; } body.wz-member-event .wz-event-detail-image { margin-inline: 2px; border-radius: 17px !important; } body.wz-member-event .wz-event-detail-videos { gap: 10px !important; } body.wz-member-event .wz-event-detail-video { border-radius: 15px !important; } body.wz-member-event .v-main > .v-container h3 { font-size: 1.12rem; } body.wz-member-event .v-main > .v-container .v-list .v-card { border-radius: 14px !important; } } /* ========================================================== MOTION / ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion: reduce) { body.wz-member-theme *, body.wz-member-theme *::before, body.wz-member-theme *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ========================================================== WayzAway Member Theme — V2 compact event cards Smaller event text + tighter spacing below imagery Preview only ========================================================== */ /* ---------- EVENT CARD CONTENT TIGHTENING ---------- */ :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .pa-4, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .v-card-text { padding: 10px 14px 12px !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .v-chip { min-height: 28px !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .v-chip__content { font-size: 0.76rem !important; line-height: 1.1 !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet h2, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet h3, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet h4, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .text-h5, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .text-h6, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .v-card-title { margin: 4px 0 6px !important; font-size: 1.12rem !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .text-body-1, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .text-body-2, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .text-caption, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .v-card-subtitle, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet small, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet p { font-size: 0.84rem !important; line-height: 1.35 !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .mb-3 { margin-bottom: 8px !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .mb-2 { margin-bottom: 6px !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .mt-3 { margin-top: 8px !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .mt-2 { margin-top: 6px !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .d-flex.align-center { gap: 8px !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .v-btn { min-height: 34px !important; margin-top: 8px !important; padding-inline: 14px !important; font-size: 0.88rem !important; } /* ---------- MOBILE / APP ---------- */ @media (max-width: 640px) { :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .pa-4, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .v-card-text { padding: 9px 12px 10px !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .v-chip__content { font-size: 0.72rem !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet h2, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet h3, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet h4, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .text-h5, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .text-h6, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .v-card-title { margin: 3px 0 5px !important; font-size: 1.04rem !important; line-height: 1.18 !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .text-body-1, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .text-body-2, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .text-caption, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .v-card-subtitle, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet small, :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet p { font-size: 0.80rem !important; line-height: 1.32 !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .mb-3 { margin-bottom: 7px !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .mb-2 { margin-bottom: 5px !important; } :is(body.wz-member-browse, body.wz-member-wall) .event-card-sheet .v-btn { min-height: 32px !important; margin-top: 7px !important; font-size: 0.82rem !important; } } /* ========================================================== WayzAway Member Theme V7 Integrated bottom action row ========================================================== */ /* ---------------------------------------------------------- VIEW EVENT ACTION ROW ---------------------------------------------------------- */ body.wz-member-browse .event-card-sheet .wz-member-event-action, body.wz-member-wall .event-card-sheet .wz-member-event-action { display: flex !important; width: calc(100% + 28px) !important; max-width: none !important; height: 38px !important; min-height: 38px !important; margin: 9px -14px -12px !important; padding: 0 14px !important; border: 0 !important; border-top: 1px solid rgba( var(--v-border-color), 0.11 ) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #ec0052 !important; font-size: 0.82rem !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; justify-content: stretch !important; } /* Remove Vuetify's normal filled-button layers */ body.wz-member-browse .wz-member-event-action .v-btn__overlay, body.wz-member-browse .wz-member-event-action .v-btn__underlay, body.wz-member-wall .wz-member-event-action .v-btn__overlay, body.wz-member-wall .wz-member-event-action .v-btn__underlay { display: none !important; } /* Spread label + chevron across the card */ body.wz-member-browse .wz-member-event-action .v-btn__content, body.wz-member-wall .wz-member-event-action .v-btn__content { display: flex !important; width: 100% !important; align-items: center; justify-content: space-between; opacity: 1 !important; } body.wz-member-browse .wz-member-event-action-arrow, body.wz-member-wall .wz-member-event-action-arrow { display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 400; line-height: 1; transition: transform 160ms ease; } /* Subtle hover rather than button-like hover */ @media (hover: hover) and (pointer: fine) { body.wz-member-browse .wz-member-event-action:hover, body.wz-member-wall .wz-member-event-action:hover { background: rgba(236, 0, 82, 0.045) !important; filter: none !important; } body.wz-member-browse .wz-member-event-action:hover .wz-member-event-action-arrow, body.wz-member-wall .wz-member-event-action:hover .wz-member-event-action-arrow { transform: translateX(2px); } } /* ---------------------------------------------------------- MOBILE / APP ---------------------------------------------------------- */ @media (max-width: 640px) { body.wz-member-browse .event-card-sheet .wz-member-event-action, body.wz-member-wall .event-card-sheet .wz-member-event-action { width: calc(100% + 24px) !important; height: 36px !important; min-height: 36px !important; margin: 8px -12px -10px !important; padding: 0 12px !important; font-size: 0.80rem !important; } body.wz-member-browse .wz-member-event-action-arrow, body.wz-member-wall .wz-member-event-action-arrow { font-size: 1.25rem; } } /* ========================================================== WayzAway Member Theme V8 Inline View Event + exact corner menu ========================================================== */ /* ---------------------------------------------------------- CARD Keep the outer card responsible for clipping its corners. ---------------------------------------------------------- */ body.wz-member-browse .event-card-sheet.wz-member-card-v8, body.wz-member-wall .event-card-sheet.wz-member-card-v8 { overflow: hidden !important; } /* ---------------------------------------------------------- LOCATION + VIEW EVENT ---------------------------------------------------------- */ body.wz-member-browse .event-card-sheet .wz-member-meta-action-row, body.wz-member-wall .event-card-sheet .wz-member-meta-action-row { width: 100%; min-width: 0; gap: 6px; margin-bottom: 0 !important; align-items: center !important; } /* * Allow long locations to shorten gracefully rather than * colliding with View event. */ body.wz-member-browse .event-card-sheet .wz-member-meta-action-row > span, body.wz-member-wall .event-card-sheet .wz-member-meta-action-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------------------------------------------------- VIEW EVENT Compact action on the far right of the metadata row. ---------------------------------------------------------- */ body.wz-member-browse .event-card-sheet .wz-member-event-action.wz-member-event-action-inline, body.wz-member-wall .event-card-sheet .wz-member-event-action.wz-member-event-action-inline { position: static !important; display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; height: 28px !important; min-height: 28px !important; margin: 0 0 0 auto !important; padding: 0 0 0 10px !important; border: 0 !important; border-top: 0 !important; border-left: 1px solid rgba( 236, 0, 82, 0.14 ) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #ec0052 !important; font-size: 0.78rem !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; justify-content: flex-end !important; } body.wz-member-browse .wz-member-event-action-inline .v-btn__content, body.wz-member-wall .wz-member-event-action-inline .v-btn__content { width: auto !important; gap: 4px; justify-content: flex-end !important; } body.wz-member-browse .wz-member-event-action-inline .wz-member-event-action-arrow, body.wz-member-wall .wz-member-event-action-inline .wz-member-event-action-arrow { font-size: 1.15rem; line-height: 1; } @media (hover: hover) and (pointer: fine) { body.wz-member-browse .event-card-sheet .wz-member-event-action.wz-member-event-action-inline:hover, body.wz-member-wall .event-card-sheet .wz-member-event-action.wz-member-event-action-inline:hover { background: transparent !important; color: #d90049 !important; } } /* * Once View event has moved into the metadata row, * don't allow an empty former action row to create space. */ body.wz-member-browse .event-card-sheet .wz-member-original-action-row:empty, body.wz-member-wall .event-card-sheet .wz-member-original-action-row:empty { display: none !important; } /* ---------------------------------------------------------- TRUE TOP-RIGHT MENU CORNER ---------------------------------------------------------- */ /* * The outer card clips the top-right edge, so the red menu * inherits exactly the same curve as the card. * * Only its inner lower-left edge receives its own rounding. */ body.wz-member-browse .event-card-sheet > .d-flex.align-center.position-relative.clickable.pa-2 .v-btn.position-absolute.wz-member-card-menu, body.wz-member-wall .event-card-sheet > .d-flex.align-center.position-relative.clickable.pa-2 .v-btn.position-absolute.wz-member-card-menu { position: absolute !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important; inset-inline-end: 0 !important; inset-inline-start: auto !important; transform: none !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; /* * Top-right stays square here because the EVENT CARD * itself clips it to the exact card radius. */ border-radius: 0 0 0 12px !important; box-shadow: 0 2px 7px rgba(20, 24, 32, 0.16) !important; z-index: 4 !important; } /* * Fallback for a headerless card/menu configuration. */ body.wz-member-browse .event-card-sheet .v-btn.position-absolute.wz-member-card-menu, body.wz-member-wall .event-card-sheet .v-btn.position-absolute.wz-member-card-menu { top: 0 !important; right: 0 !important; inset-inline-end: 0 !important; margin: 0 !important; } /* ---------------------------------------------------------- MOBILE / APP ---------------------------------------------------------- */ @media (max-width: 640px) { body.wz-member-browse .event-card-sheet .wz-member-event-action.wz-member-event-action-inline, body.wz-member-wall .event-card-sheet .wz-member-event-action.wz-member-event-action-inline { height: 26px !important; min-height: 26px !important; padding-left: 8px !important; font-size: 0.74rem !important; } body.wz-member-browse .wz-member-event-action-inline .wz-member-event-action-arrow, body.wz-member-wall .wz-member-event-action-inline .wz-member-event-action-arrow { font-size: 1.08rem; } body.wz-member-browse .event-card-sheet > .d-flex.align-center.position-relative.clickable.pa-2 .v-btn.position-absolute.wz-member-card-menu, body.wz-member-wall .event-card-sheet > .d-flex.align-center.position-relative.clickable.pa-2 .v-btn.position-absolute.wz-member-card-menu { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; border-radius: 0 0 0 11px !important; } } /* ========================================================== WayzAway Member Theme V9 Exact event-card menu corner alignment ========================================================== */ body.wz-member-browse .event-card-sheet .wz-member-card-menu, body.wz-member-wall .event-card-sheet .wz-member-card-menu { position: absolute !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important; inset: 0 0 auto auto !important; transform: none !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border-radius: 0 18px 0 12px !important; box-shadow: 0 2px 7px rgba(20, 24, 32, 0.16) !important; z-index: 5 !important; } /* Remove Vuetify positioning offsets from the menu control */ body.wz-member-browse .event-card-sheet .wz-member-card-menu.v-btn, body.wz-member-wall .event-card-sheet .wz-member-card-menu.v-btn { --v-btn-height: 40px; } @media (max-width: 640px) { body.wz-member-browse .event-card-sheet .wz-member-card-menu, body.wz-member-wall .event-card-sheet .wz-member-card-menu { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; border-radius: 0 16px 0 11px !important; } } /* ========================================================== WayzAway Member Theme V10 Category chip overlay on event image ========================================================== */ /* Main event image becomes the positioning container */ body.wz-member-browse .event-card-sheet .wz-member-image-category-host, body.wz-member-wall .event-card-sheet .wz-member-image-category-host { position: relative !important; } /* ---------------------------------------------------------- CATEGORY CHIP Bottom-left of display image ---------------------------------------------------------- */ body.wz-member-browse .event-card-sheet .wz-member-image-category, body.wz-member-wall .event-card-sheet .wz-member-image-category { position: absolute !important; left: 12px !important; right: auto !important; bottom: 12px !important; top: auto !important; z-index: 5 !important; height: 28px !important; min-height: 28px !important; margin: 0 !important; padding: 0 11px !important; border: 1px solid rgba( 228, 0, 70, 0.12 ) !important; border-radius: 999px !important; background: rgba( 255, 238, 244, 0.95 ) !important; color: #e40046 !important; box-shadow: 0 2px 8px rgba(20, 24, 32, 0.14) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-size: 0.76rem !important; font-weight: 500 !important; letter-spacing: 0 !important; } /* Ensure Vuetify tonal layer does not muddy the overlay */ body.wz-member-browse .wz-member-image-category .v-chip__underlay, body.wz-member-wall .wz-member-image-category .v-chip__underlay { opacity: 0 !important; } /* Remove the original empty category row */ body.wz-member-browse .event-card-sheet .wz-member-category-row-empty, body.wz-member-wall .event-card-sheet .wz-member-category-row-empty { display: none !important; } /* ---------------------------------------------------------- MOBILE / APP ---------------------------------------------------------- */ @media (max-width: 640px) { body.wz-member-browse .event-card-sheet .wz-member-image-category, body.wz-member-wall .event-card-sheet .wz-member-image-category { left: 10px !important; bottom: 10px !important; height: 27px !important; min-height: 27px !important; padding: 0 10px !important; font-size: 0.74rem !important; } } /* ========================================================== WayzAway Member Theme V11 Premium glass category treatment ========================================================== */ body.wz-member-browse .event-card-sheet .wz-member-image-category, body.wz-member-wall .event-card-sheet .wz-member-image-category { height: 26px !important; min-height: 26px !important; padding: 0 10px 0 9px !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 8px !important; background: rgba(22, 24, 29, 0.72) !important; color: #ffffff !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18) !important; backdrop-filter: blur(8px) saturate(115%) !important; -webkit-backdrop-filter: blur(8px) saturate(115%) !important; font-size: 0.73rem !important; font-weight: 600 !important; letter-spacing: 0.01em !important; } /* Remove old tonal tint completely */ body.wz-member-browse .wz-member-image-category .v-chip__underlay, body.wz-member-wall .wz-member-image-category .v-chip__underlay { opacity: 0 !important; } /* Category content alignment */ body.wz-member-browse .wz-member-image-category .v-chip__content, body.wz-member-wall .wz-member-image-category .v-chip__content { display: inline-flex !important; align-items: center !important; gap: 7px !important; } /* Small WayzAway accent dot */ body.wz-member-browse .wz-member-image-category .v-chip__content::before, body.wz-member-wall .wz-member-image-category .v-chip__content::before { content: "" !important; display: inline-block !important; flex: 0 0 auto !important; width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #ec0052 !important; box-shadow: 0 0 0 2px rgba(236, 0, 82, 0.16) !important; } @media (max-width: 640px) { body.wz-member-browse .event-card-sheet .wz-member-image-category, body.wz-member-wall .event-card-sheet .wz-member-image-category { height: 25px !important; min-height: 25px !important; border-radius: 7px !important; padding: 0 9px 0 8px !important; font-size: 0.71rem !important; } } /* ========================================================= WayzAway Member Theme 2026-08 View event chevron baseline correction ========================================================= */ body.wz-member-browse .wz-member-event-action-inline .wz-member-event-action-arrow, body.wz-member-wall .wz-member-event-action-inline .wz-member-event-action-arrow { position: relative; top: 1px; } /* ========================================================= WayzAway Account UI Polish 2026-08 Profile trigger + authenticated account drawer ========================================================= */ /* ------------------------------------------------------ Closed profile control ------------------------------------------------------ */ .wz-account-trigger { min-width: 0 !important; border: 1px solid rgba(236, 0, 82, 0.12) !important; background: #ffffff !important; color: #ec0052 !important; box-shadow: 0 4px 14px rgba(28, 24, 32, 0.12) !important; padding-inline: 11px 12px !important; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important; } .wz-account-trigger:hover { border-color: rgba(236, 0, 82, 0.24) !important; box-shadow: 0 6px 18px rgba(28, 24, 32, 0.15) !important; } .wz-account-trigger:focus-visible { outline: 3px solid rgba(236, 0, 82, 0.20) !important; outline-offset: 2px !important; } .wz-account-trigger .v-btn__prepend { margin-inline-end: 9px !important; } .wz-account-trigger .v-btn__append { margin-inline-start: 9px !important; } .wz-account-trigger .v-btn__content .text-capitalize { font-size: 0.92rem !important; font-weight: 600 !important; line-height: 1.15 !important; letter-spacing: 0 !important; } .wz-account-trigger .v-btn__append .v-icon { font-size: 20px !important; } .wz-account-trigger-avatar { position: relative !important; width: 30px !important; height: 30px !important; min-width: 30px !important; overflow: hidden !important; border-radius: 50% !important; } .wz-account-trigger-img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: inherit !important; } .wz-account-trigger-avatar.wz-has-account-image > :not(.wz-account-trigger-img) { visibility: hidden !important; } /* ------------------------------------------------------ Account drawer ------------------------------------------------------ */ [data-wz-account-drawer="true"] { border-left: 1px solid rgba(25, 29, 37, 0.09) !important; background: #ffffff !important; } [data-wz-account-drawer="true"] .v-list { padding: 0 10px 10px !important; background: #ffffff !important; } .wz-account-drawer-profile { min-height: 78px !important; margin: 0 -10px 6px !important; padding: 12px 20px 11px !important; border-bottom: 0 !important; background: #ffffff !important; } .wz-account-drawer-profile .v-avatar { flex: 0 0 auto !important; box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(236, 0, 82, 0.16) !important; } .wz-account-drawer-profile small { display: block !important; margin-bottom: 2px !important; color: #747881 !important; font-size: 0.76rem !important; font-weight: 400 !important; line-height: 1.25 !important; } .wz-account-drawer-profile small + div { color: #24272d !important; font-size: 1.02rem !important; font-weight: 700 !important; line-height: 1.3 !important; } .wz-account-drawer-nav-item { min-height: 44px !important; margin: 1px 0 !important; padding: 0 14px !important; border-radius: 11px !important; color: #51545b !important; transition: background-color 150ms ease, color 150ms ease !important; } .wz-account-drawer-nav-item .v-list-item-title { font-size: 0.98rem !important; font-weight: 500 !important; line-height: 1.3 !important; } .wz-account-drawer-nav-item .v-list-item__overlay { opacity: 0 !important; } .wz-account-drawer-nav-item:hover { background: #f7f7f9 !important; color: #25282e !important; } .wz-account-drawer-nav-item.v-list-item--active, .wz-account-drawer-nav-item.wz-account-item-current { background: #fff0f5 !important; color: #ec0052 !important; } .wz-account-drawer-nav-item.v-list-item--active:hover, .wz-account-drawer-nav-item.wz-account-item-current:hover { background: #ffe7ef !important; color: #d90049 !important; } .wz-account-drawer-nav-item:focus-visible { outline: 2px solid rgba(236, 0, 82, 0.28) !important; outline-offset: -2px !important; } [data-wz-account-drawer="true"] .v-navigation-drawer__append { border-top: 1px solid rgba(25, 29, 37, 0.08) !important; background: #ffffff !important; } [data-wz-account-drawer="true"] .v-navigation-drawer__append > div { margin: 14px 16px 16px !important; } .wz-account-signout { min-height: 44px !important; border-radius: 11px !important; font-weight: 600 !important; letter-spacing: 0 !important; box-shadow: 0 4px 10px rgba(236, 0, 82, 0.18) !important; } /* ------------------------------------------------------ Mobile profile control ------------------------------------------------------ */ @media (max-width: 599px) { .wz-account-trigger { padding-inline: 9px 10px !important; } .wz-account-trigger .v-btn__prepend { margin-inline-end: 5px !important; } .wz-account-trigger .v-btn__append { margin-inline-start: 5px !important; } .wz-account-trigger-avatar { width: 29px !important; height: 29px !important; min-width: 29px !important; } .wz-account-drawer-profile { min-height: 78px !important; } } /* ========================================================== WayzAway Event Card Menu Red V1 Visual treatment only ========================================================== */ body.wz-member-browse .event-card-sheet .wz-member-card-menu, body.wz-member-wall .event-card-sheet .wz-member-card-menu { background: rgba(236, 0, 82, 0.46) !important; color: #ffffff !important; } body.wz-member-browse .event-card-sheet .wz-member-card-menu .v-icon, body.wz-member-wall .event-card-sheet .wz-member-card-menu .v-icon { color: #ffffff !important; opacity: 1 !important; } body.wz-member-browse .event-card-sheet .wz-member-card-menu .v-btn__overlay, body.wz-member-wall .event-card-sheet .wz-member-card-menu .v-btn__overlay, body.wz-member-browse .event-card-sheet .wz-member-card-menu .v-btn__underlay, body.wz-member-wall .event-card-sheet .wz-member-card-menu .v-btn__underlay { opacity: 0 !important; } body.wz-member-browse .event-card-sheet .wz-member-card-menu:hover, body.wz-member-wall .event-card-sheet .wz-member-card-menu:hover { background: rgba(236, 0, 82, 0.64) !important; color: #ffffff !important; } body.wz-member-browse .event-card-sheet .wz-member-card-menu:focus-visible, body.wz-member-wall .event-card-sheet .wz-member-card-menu:focus-visible { outline: 2px solid rgba(236, 0, 82, 0.30) !important; outline-offset: 2px !important; } /* ========================================================== WayzAway Event Card Menu Solid Small V1 Browse + Wall only ========================================================== */ body.wz-member-browse .event-card-sheet .wz-member-card-menu, body.wz-member-wall .event-card-sheet .wz-member-card-menu { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; --v-btn-height: 32px; background: #ec0052 !important; color: #ffffff !important; } body.wz-member-browse .event-card-sheet .wz-member-card-menu:hover, body.wz-member-wall .event-card-sheet .wz-member-card-menu:hover { background: #ec0052 !important; color: #ffffff !important; } @media (max-width: 640px) { body.wz-member-browse .event-card-sheet .wz-member-card-menu, body.wz-member-wall .event-card-sheet .wz-member-card-menu { width: 30.4px !important; min-width: 30.4px !important; height: 30.4px !important; min-height: 30.4px !important; --v-btn-height: 30.4px; } }