/* * LiveVibe theme tokens and semantic UI utilities. * Palette aligned with brandboard (navy + cyan / violet / teal aurora). * Light tokens on :root; dark overrides on .dark (class on ). */ :root { color-scheme: light; --lv-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --lv-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --lv-bg: #eef4fc; --lv-surface-1: rgba(255, 255, 255, 0.78); --lv-surface-2: rgba(248, 250, 252, 0.88); --lv-surface-3: rgba(14, 116, 144, 0.08); --lv-border: rgba(8, 145, 178, 0.28); --lv-border-muted: rgba(100, 116, 139, 0.32); --lv-text: #0c1526; --lv-text-muted: #3d4f66; --lv-text-subtle: #5a6b82; --lv-heading: #060d1a; --lv-link: #2563eb; --lv-link-hover: #1d4ed8; --lv-primary: #0891b2; --lv-primary-hover: #06b6d4; --lv-secondary: #7c3aed; --lv-secondary-hover: #6d28d9; --lv-highlight: #0d9488; --lv-accent: #2563eb; --lv-accent-hover: #1d4ed8; --lv-cta: #3a86ff; --lv-cta-hover: #2563eb; --lv-on-primary: #f8fafc; --lv-on-secondary: #f8fafc; --lv-input-bg: rgba(255, 255, 255, 0.88); --lv-nav-bg: rgba(255, 255, 255, 0.72); --lv-nav-sticky-offset: 6rem; --lv-menu-bg: #f8fafc; --lv-overlay: rgba(15, 23, 42, 0.4); --lv-shadow: rgba(15, 23, 42, 0.1); --lv-input-autofill: rgba(255, 255, 255, 0.95); --lv-icon-stroke: %230f172a; --lv-cruise-tier-selected-border: rgba(124, 58, 237, 0.5); --lv-cruise-tier-selected-bg: rgba(224, 242, 254, 0.85); --lv-cruise-tier-selected-shadow-1: rgba(34, 211, 238, 0.35); --lv-cruise-tier-selected-shadow-2: rgba(124, 58, 237, 0.18); --lv-signup-card-bg: rgba(255, 255, 255, 0.72); --lv-signup-card-checked-bg: rgba(8, 145, 178, 0.1); --lv-producer-record-bg: rgba(241, 245, 249, 0.85); --lv-producer-record-border: rgba(148, 163, 184, 0.4); --lv-producer-record-divider: rgba(203, 213, 225, 0.85); --lv-trix-toolbar-bg: rgba(255, 255, 255, 0.92); --lv-trix-group-bg: rgba(241, 245, 249, 0.95); --lv-trix-editor-bg: rgba(255, 255, 255, 0.96); --lv-trix-icon-filter: none; --lv-theme-color: #eef4fc; --lv-booking-banner-bg: rgba(13, 148, 136, 0.12); --lv-booking-banner-border: rgba(13, 148, 136, 0.38); --lv-booking-banner-text: var(--lv-text); --lv-booking-banner-muted: var(--lv-text-muted); --lv-booking-banner-accent: #0f766e; --lv-mesh-blur: 100px; --lv-mesh-a-opacity: 0.34; --lv-mesh-b-opacity: 0.28; --lv-mesh-b-blend: normal; --lv-mesh-layer-a: radial-gradient(circle at 28% 38%, rgba(56, 189, 248, 0.42) 0%, transparent 48%), radial-gradient(circle at 72% 62%, rgba(129, 140, 248, 0.3) 0%, transparent 44%); --lv-mesh-layer-b: radial-gradient(circle at 68% 28%, rgba(45, 212, 191, 0.34) 0%, transparent 42%), radial-gradient(circle at 32% 78%, rgba(99, 102, 241, 0.22) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.07) 0%, transparent 55%); } .dark { color-scheme: dark; --lv-bg: #0a1628; --lv-surface-1: rgba(15, 23, 42, 0.62); --lv-surface-2: rgba(30, 41, 59, 0.72); --lv-surface-3: rgba(255, 255, 255, 0.07); --lv-border: rgba(34, 211, 238, 0.22); --lv-border-muted: rgba(148, 163, 184, 0.32); --lv-text: #e8eef6; --lv-text-muted: #9aabc4; --lv-text-subtle: #7b8da8; --lv-heading: #f8fafc; --lv-link: #7dd3fc; --lv-link-hover: #bae6fd; --lv-primary: #22d3ee; --lv-primary-hover: #38bdf8; --lv-secondary: #a855f7; --lv-secondary-hover: #c084fc; --lv-highlight: #2dd4bf; --lv-accent: #60a5fa; --lv-accent-hover: #93c5fd; --lv-cta: #60a5fa; --lv-cta-hover: #93c5fd; --lv-on-primary: #0f172a; --lv-on-secondary: #f8fafc; --lv-input-bg: rgba(15, 23, 42, 0.72); --lv-nav-bg: rgba(10, 22, 40, 0.78); --lv-menu-bg: #0e1a30; --lv-overlay: rgba(2, 6, 23, 0.68); --lv-shadow: rgba(2, 6, 23, 0.45); --lv-input-autofill: rgba(15, 23, 42, 0.85); --lv-icon-stroke: %23f1f5f9; --lv-cruise-tier-selected-border: rgba(167, 139, 250, 0.65); --lv-cruise-tier-selected-bg: rgba(49, 46, 129, 0.38); --lv-cruise-tier-selected-shadow-1: rgba(34, 211, 238, 0.35); --lv-cruise-tier-selected-shadow-2: rgba(168, 85, 247, 0.28); --lv-signup-card-bg: rgba(15, 23, 42, 0.5); --lv-signup-card-checked-bg: rgba(34, 211, 238, 0.1); --lv-producer-record-bg: rgba(15, 23, 42, 0.42); --lv-producer-record-border: rgba(51, 65, 85, 0.55); --lv-producer-record-divider: rgba(30, 41, 59, 0.88); --lv-trix-toolbar-bg: rgba(15, 23, 42, 0.88); --lv-trix-group-bg: rgba(15, 23, 42, 0.75); --lv-trix-editor-bg: rgba(15, 23, 42, 0.82); --lv-trix-icon-filter: invert(1) brightness(1.1); --lv-theme-color: #0a1628; --lv-booking-banner-bg: rgba(20, 83, 45, 0.25); --lv-booking-banner-border: rgba(21, 128, 61, 0.5); --lv-booking-banner-text: #dcfce7; --lv-booking-banner-muted: rgba(187, 247, 208, 0.85); --lv-booking-banner-accent: #bbf7d0; --lv-mesh-a-opacity: 0.46; --lv-mesh-b-opacity: 0.38; --lv-mesh-b-blend: screen; --lv-mesh-layer-a: radial-gradient(circle at 28% 38%, rgba(34, 211, 238, 0.48) 0%, transparent 46%), radial-gradient(circle at 72% 62%, rgba(168, 85, 247, 0.36) 0%, transparent 44%); --lv-mesh-layer-b: radial-gradient(circle at 68% 28%, rgba(20, 184, 166, 0.44) 0%, transparent 42%), radial-gradient(circle at 32% 78%, rgba(99, 102, 241, 0.3) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.1) 0%, transparent 55%); } /* Subtle aurora mesh (brandboard-style), theme-aware */ html.lv-ambient { position: relative; min-height: 100%; background-color: var(--lv-bg); isolation: isolate; } html.lv-ambient { font-family: var(--lv-font-sans); font-size: 16px; line-height: 1.6; letter-spacing: -0.011em; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html.lv-ambient body { position: relative; z-index: 1; background-color: transparent !important; color: var(--lv-text); font: inherit; } html.lv-ambient h1, html.lv-ambient h2, html.lv-ambient h3, html.lv-ambient h4, html.lv-ambient h5, html.lv-ambient h6 { color: var(--lv-heading); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; } html.lv-ambient h1 { font-weight: 800; letter-spacing: -0.03em; } html.lv-ambient strong, html.lv-ambient b { font-weight: 600; color: var(--lv-heading); } html.lv-ambient code, html.lv-ambient kbd, html.lv-ambient samp { font-family: var(--lv-font-mono); font-size: 0.92em; font-weight: 500; } html.lv-ambient ::selection { background: color-mix(in srgb, var(--lv-primary) 28%, transparent); color: var(--lv-heading); } html.lv-ambient::before, html.lv-ambient::after { content: ""; position: fixed; inset: -28%; z-index: 0; pointer-events: none; filter: blur(var(--lv-mesh-blur)); will-change: transform; } html.lv-ambient::before { opacity: var(--lv-mesh-a-opacity); background: var(--lv-mesh-layer-a); animation: lv-mesh-a 28s ease-in-out infinite alternate; } html.lv-ambient::after { opacity: var(--lv-mesh-b-opacity); mix-blend-mode: var(--lv-mesh-b-blend); background: var(--lv-mesh-layer-b); animation: lv-mesh-b 34s ease-in-out infinite alternate; } @keyframes lv-mesh-a { from { transform: translate(-4%, -3%) rotate(0deg) scale(1); } to { transform: translate(7%, 6%) rotate(12deg) scale(1.08); } } @keyframes lv-mesh-b { from { transform: translate(5%, 4%) rotate(0deg) scale(1.04); } to { transform: translate(-8%, -5%) rotate(-10deg) scale(0.96); } } @media (prefers-reduced-motion: reduce) { html.lv-ambient::before, html.lv-ambient::after { animation: none; } } .lv-nav { border-bottom: 1px solid var(--lv-border); background: var(--lv-menu-bg); } .lv-nav-dropdown { border-radius: 0.625rem; border: 1px solid var(--lv-border); background: var(--lv-menu-bg); box-shadow: 0 14px 40px color-mix(in srgb, var(--lv-shadow) 85%, transparent); } .lv-dropdown-link { color: var(--lv-text); font-weight: 500; } .lv-dropdown-link:hover, .lv-dropdown-link:focus-visible { background: var(--lv-surface-3); color: var(--lv-heading); } .lv-shell { min-height: 100vh; display: flex; flex-direction: column; } .lv-container { width: min(1120px, 100% - 2rem); margin-inline: auto; } .lv-display { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--lv-heading); } .lv-lead { font-size: 1.125rem; line-height: 1.65; color: var(--lv-text-muted); } .lv-caption { font-size: 0.8125rem; line-height: 1.45; color: var(--lv-text-subtle); } .lv-kicker { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lv-text-subtle); } .lv-nav-link { color: var(--lv-text-muted); font-weight: 500; transition: color 0.2s ease; } .lv-nav-link:hover, .lv-nav-link:focus-visible { color: var(--lv-primary); } .lv-brand-link { color: var(--lv-primary); font-weight: 800; letter-spacing: -0.02em; } .lv-card { background: var(--lv-surface-1); border: 1px solid var(--lv-border); border-radius: 1rem; box-shadow: 0 10px 32px var(--lv-shadow); backdrop-filter: blur(10px); } .lv-auth-dialog { margin: auto; max-height: calc(100vh - 2rem); overflow: hidden; background: var(--lv-menu-bg); } .lv-auth-dialog--inline { position: static; margin: 0; max-height: none; width: 100%; } .lv-auth-dialog::backdrop { background: var(--lv-bg); } .lv-auth-dialog__panels { padding-inline: 0.25rem; scroll-padding-inline: 0.25rem; } .lv-cruise-tier-card.lv-cruise-tier--selected { border-color: var(--lv-cruise-tier-selected-border); background: var(--lv-cruise-tier-selected-bg); box-shadow: 0 0 0 1px var(--lv-cruise-tier-selected-shadow-1), 0 10px 28px -10px var(--lv-cruise-tier-selected-shadow-2); } .lv-cruise-tier-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem 1rem; min-width: 0; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; } .lv-cruise-tier-card__body { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; } .lv-cruise-tier-card__primary { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 auto; } .lv-cruise-tier-card__guests { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--lv-text); } .lv-cruise-tier-card__per-person { margin: 0; font-size: 0.8125rem; line-height: 1.25; color: var(--lv-text-muted); } .lv-cruise-tier-card__per-person-amount { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lv-text); } .lv-cruise-tier-card__per-person-label { font-weight: 500; } .lv-cruise-tier-card__total { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.125rem; flex: 0 1 auto; min-width: 0; max-width: 48%; padding-left: 0.5rem; border-left: 1px solid color-mix(in srgb, var(--lv-border-muted) 70%, transparent); } .lv-cruise-tier-card__total-label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; color: var(--lv-text-muted); white-space: nowrap; } .lv-cruise-tier-card__total-amount { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: clamp(1.125rem, 2.8vw, 1.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--lv-cta); } .lv-cruise-tier-card.lv-cruise-tier--selected .lv-cruise-tier-card__total-amount { color: var(--lv-cta-hover); } .lv-cruise-tier-card:hover .lv-cruise-tier-card__total-amount { color: var(--lv-cta-hover); } .lv-cruise-tier-card.lv-cruise-tier--selected .lv-cruise-tier-card__total { border-left-color: color-mix(in srgb, var(--lv-secondary) 35%, var(--lv-border-muted)); } .lv-cruise-tier-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; padding-top: 0.4rem; border-top: 1px solid color-mix(in srgb, var(--lv-border-muted) 55%, transparent); font-size: 0.75rem; color: var(--lv-text-muted); } .lv-cruise-checkout { display: flex; flex-direction: column; gap: 2rem; } .lv-cruise-checkout__tiers { display: flex; flex-direction: column; gap: 2rem; } .lv-cruise-checkout__tier-group { margin-bottom: 0; } .lv-cruise-checkout__tier-group + .lv-cruise-checkout__tier-group { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid color-mix(in srgb, var(--lv-border-muted) 55%, transparent); } .lv-cruise-checkout__tier-options { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; } @media (min-width: 640px) { .lv-cruise-checkout__tier-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lv-cruise-checkout__tier-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { .lv-cruise-checkout__tier-options { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lv-cruise-checkout__section { padding-top: 1.75rem; border-top: 1px solid color-mix(in srgb, var(--lv-border-muted) 65%, transparent); } .lv-cruise-checkout__actions { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1.75rem; border-top: 1px solid color-mix(in srgb, var(--lv-border-muted) 65%, transparent); } .lv-cruise-checkout__actions-row { display: flex; flex-direction: column; gap: 1rem; } /* Event listings grid card */ .lv-event-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .lv-event-card:hover { border-color: color-mix(in srgb, var(--lv-accent) 45%, var(--lv-border)); box-shadow: 0 12px 32px color-mix(in srgb, var(--lv-shadow) 80%, transparent); transform: translateY(-2px); } .lv-event-card__overlay { position: absolute; inset: 0; z-index: 1; border-radius: inherit; text-decoration: none; } .lv-event-card__overlay:focus-visible { outline: 2px solid var(--lv-primary); outline-offset: 3px; } .lv-event-card__media { position: relative; z-index: 0; flex-shrink: 0; } .lv-event-card__media img { display: block; width: 100%; height: 11rem; object-fit: cover; border-radius: 0.75rem 0.75rem 0 0; } .lv-event-card__body { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; gap: 0.65rem; padding: 1rem 1.1rem 1.15rem; pointer-events: none; } .lv-event-card__title { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--lv-heading); } .lv-event-card__draft { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #f87171; } .lv-event-card__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; } .lv-event-card__chip { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; } .lv-event-card__chip--date { color: var(--lv-text); background: color-mix(in srgb, var(--lv-surface-3) 90%, transparent); border: 1px solid var(--lv-border-muted); } .lv-event-card__chip--tickets { color: #0e7490; background: color-mix(in srgb, var(--lv-primary) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lv-primary) 30%, transparent); } .lv-event-card__chip--vod { color: #be123c; background: color-mix(in srgb, #f43f5e 12%, transparent); border: 1px solid color-mix(in srgb, #f43f5e 28%, transparent); } .dark .lv-event-card__chip--tickets { color: #a5f3fc; } .dark .lv-event-card__chip--vod { color: #fecdd3; } .lv-event-card__venue { margin: 0; font-size: 0.8125rem; color: var(--lv-text-muted); } .lv-event-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; pointer-events: auto; } .lv-event-card__tag { display: inline-flex; align-items: center; padding: 0.18rem 0.5rem; border-radius: 0.35rem; font-size: 0.75rem; font-weight: 500; color: var(--lv-text); background: var(--lv-surface-2); border: 1px solid var(--lv-border-muted); text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .lv-event-card__tag:hover, .lv-event-card__tag:focus-visible { background: color-mix(in srgb, var(--lv-primary) 14%, var(--lv-surface-2)); border-color: color-mix(in srgb, var(--lv-primary) 40%, transparent); color: var(--lv-primary); } .lv-event-card__tag-more { font-size: 0.75rem; font-weight: 500; color: var(--lv-text-subtle); } .lv-event-card__price { margin-top: auto; padding-top: 0.35rem; } .lv-event-card__price-amount { font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lv-cta); } .lv-event-card__price-hint { display: block; font-size: 0.75rem; color: var(--lv-text-subtle); } .lv-event-card__excerpt { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--lv-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .lv-event-card__cta { align-self: flex-start; margin-top: 0.5rem; pointer-events: auto; text-decoration: none; } @media (min-width: 640px) { .lv-cruise-checkout__actions-row { flex-direction: row; align-items: flex-end; gap: 1.25rem; } } .lv-cruise-checkout__terms-note { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--lv-border-muted) 45%, transparent); font-size: 0.75rem; line-height: 1.5; color: var(--lv-text-muted); } .lv-booking-wizard__layout { align-items: start; } .lv-booking-wizard__layout--review { width: 100%; } .lv-booking-wizard__dock { align-self: start; min-width: 0; } @media (max-width: 1023px) { main.lv-container:has(.lv-booking-wizard) { overflow-x: clip; } .lv-booking-wizard { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); box-sizing: border-box; } .lv-booking-wizard__layout, .lv-booking-wizard__main, .lv-booking-wizard__stepper-mobile { min-width: 0; max-width: 100%; } .lv-booking-wizard__stepper-mobile { overflow-x: clip; } .lv-booking-stepper--compact { max-width: 100%; min-width: 0; overflow: hidden; } .lv-booking-wizard .lv-cruise-checkout, .lv-booking-wizard .lv-cruise-checkout__tiers, .lv-booking-wizard .lv-cruise-checkout__tier-options { min-width: 0; max-width: 100%; } .lv-booking-wizard .lv-cruise-tier-card { max-width: 100%; } .lv-booking-wizard__step-panel.lv-card { border: none; box-shadow: none; background: transparent; border-radius: 0; padding: 0; } .lv-booking-room-group { border: none; background: transparent; padding: 0; gap: 0.75rem; } .lv-booking-room-group > legend { width: 100%; padding: 0 0 0.5rem; margin: 0 0 0.75rem; border-bottom: 1px solid color-mix(in srgb, var(--lv-border-muted) 55%, transparent); } .lv-booking-room-group__children { border-top: none; padding-top: 1rem; margin-top: 0.25rem; } .lv-booking-passenger-card { border: none; background: transparent; border-radius: 0; padding: 0 0 1rem; margin-bottom: 0.25rem; border-bottom: 1px solid color-mix(in srgb, var(--lv-border-muted) 45%, transparent); } .lv-booking-passenger-card:last-child, .lv-booking-room-group__children .lv-booking-passenger-card:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .lv-booking-wizard__dock { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; z-index: 40; top: auto; align-self: auto; border-top: 1px solid var(--lv-border); background: color-mix(in srgb, var(--lv-surface) 98%, transparent); backdrop-filter: blur(12px); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25); padding: 0.5rem max(1rem, env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); overflow: visible; box-sizing: border-box; } .lv-booking-wizard__dock-inner { gap: 0.5rem; } .lv-booking-wizard__dock-bar-toggle { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.5rem 0.75rem; padding: 0.35rem 0; border: none; background: transparent; color: inherit; text-align: left; cursor: pointer; min-height: 2.75rem; } .lv-booking-wizard__dock-bar-toggle:focus-visible { outline: 2px solid var(--lv-secondary); outline-offset: 2px; border-radius: 0.375rem; } .lv-booking-wizard__dock-drawer { display: none; } .lv-booking-wizard__dock--expanded .lv-booking-wizard__dock-drawer { display: block; max-height: min(45vh, 16rem); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 0.25rem; border-top: 1px solid var(--lv-border-muted); } @media (prefers-reduced-motion: no-preference) { .lv-booking-wizard__dock--expanded .lv-booking-wizard__dock-drawer { animation: lv-booking-dock-drawer-in 0.2s ease-out; } } @keyframes lv-booking-dock-drawer-in { from { opacity: 0; transform: translateY(0.35rem); } to { opacity: 1; transform: translateY(0); } } .lv-booking-wizard__dock .lv-booking-summary--dock.lv-card { border: none; background: transparent; box-shadow: none; padding: 0; gap: 0.5rem; } .lv-booking-wizard__dock .lv-booking-summary--dock .lv-booking-summary__lines { gap: 0.35rem; font-size: 0.8125rem; } .lv-booking-stepper--compact .lv-booking-stepper__list { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; padding-bottom: 0.15rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .lv-booking-stepper--compact .lv-booking-step { white-space: nowrap; font-size: 0.75rem; padding: 0.3rem 0.5rem; min-height: 2rem; } .lv-booking-stepper--compact .lv-booking-step__number { width: 1.1rem; height: 1.1rem; font-size: 0.6rem; } } @media (min-width: 1024px) { .lv-booking-wizard__dock { position: sticky; top: calc(var(--lv-nav-sticky-offset) + 0.75rem); } .lv-booking-wizard__dock-drawer { display: block; max-height: none; overflow: visible; border-top: none; padding-top: 0; } } .lv-booking-summary__lines { margin: 0; } .lv-booking-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0; } .lv-booking-summary__row dt { margin: 0; font-weight: 500; } .lv-booking-summary__row dd { margin: 0; } .lv-booking-wizard__step-panel { min-width: 0; } @media (prefers-reduced-motion: no-preference) { .lv-booking-wizard__step-panel.lv-booking-step-enter--forward, .lv-booking-wizard__step-panel.lv-booking-step-enter--back { opacity: 0; transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .lv-booking-wizard__step-panel.lv-booking-step-enter--forward { transform: translateX(1.25rem); } .lv-booking-wizard__step-panel.lv-booking-step-enter--back { transform: translateX(-1.25rem); } .lv-booking-wizard__step-panel.lv-booking-step-enter--active { opacity: 1; transform: translateX(0); } } .lv-cruise-event-booking__intro { padding-bottom: 0.25rem; } .lv-booking-wizard .lv-cruise-checkout__tier-options, .lv-cruise-event-booking .lv-cruise-checkout__tier-options { grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 640px) { .lv-booking-wizard .lv-cruise-checkout__tier-options, .lv-cruise-event-booking .lv-cruise-checkout__tier-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .lv-booking-wizard .lv-cruise-checkout__tier-options, .lv-cruise-event-booking .lv-cruise-checkout__tier-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lv-booking-stepper__list { list-style: none; padding: 0; margin: 0; } .lv-booking-step { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem; border-radius: 9999px; border: 1px solid var(--lv-border-muted); color: var(--lv-text-muted); text-decoration: none; min-height: 2.25rem; } .lv-booking-step--active { border-color: var(--lv-secondary); background: color-mix(in srgb, var(--lv-secondary) 12%, transparent); color: var(--lv-text); } .lv-booking-step--complete { border-color: var(--lv-border); color: var(--lv-text); } .lv-booking-step--complete:hover { border-color: var(--lv-secondary); } .lv-booking-step--upcoming { opacity: 0.65; } .lv-booking-step__number { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 9999px; font-size: 0.65rem; font-weight: 700; background: var(--lv-surface-3); } .lv-booking-step--active .lv-booking-step__number { background: var(--lv-secondary); color: var(--lv-on-primary, #fff); } .lv-card-muted { background: var(--lv-surface-2); border: 1px solid var(--lv-border-muted); border-radius: 1rem; backdrop-filter: blur(10px); } .lv-booking-banner { margin-bottom: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--lv-booking-banner-border); background: var(--lv-booking-banner-bg); padding: 0.75rem 1rem; color: var(--lv-booking-banner-text); } .lv-booking-banner__title { font-weight: 600; } .lv-booking-banner__hint { margin-top: 0.5rem; font-size: 0.75rem; color: var(--lv-booking-banner-muted); } .lv-booking-banner__item { font-size: 0.875rem; line-height: 1.5; color: var(--lv-booking-banner-text); } .lv-booking-banner__code { font-family: var(--lv-font-mono); letter-spacing: 0.08em; color: var(--lv-booking-banner-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lv-booking-banner-accent) 45%, transparent); } .lv-booking-banner__code:hover, .lv-booking-banner__code:focus-visible { color: var(--lv-booking-banner-text); text-decoration-color: currentColor; } .lv-booking-banner__meta { color: var(--lv-booking-banner-muted); } .lv-button-primary, .lv-button-secondary, .lv-button-pay { font-weight: 700; border-radius: 0.75rem; transition: all 0.2s ease; cursor: pointer; } .lv-button-primary { background: var(--lv-primary); color: var(--lv-on-primary); box-shadow: 0 10px 24px color-mix(in srgb, var(--lv-primary) 38%, transparent); } .lv-button-primary:hover, .lv-button-primary:focus-visible { background: var(--lv-primary-hover); } .lv-button-primary.lv-button--busy, .lv-button-primary[aria-busy="true"] { opacity: 0.72; cursor: wait; } .lv-button-pay { background: var(--lv-primary); color: var(--lv-on-primary); border: 1px solid color-mix(in srgb, var(--lv-primary) 75%, white); box-shadow: 0 10px 24px rgba(58, 134, 255, 0.42); } .lv-button-pay:hover, .lv-button-pay:focus-visible { background: var(--lv-primary-hover); } .lv-button-secondary { background: var(--lv-secondary); color: var(--lv-on-secondary); border: 1px solid color-mix(in srgb, var(--lv-secondary) 70%, white); box-shadow: 0 10px 24px rgba(168, 85, 247, 0.3); cursor: pointer; } .lv-button-secondary:hover, .lv-button-secondary:focus-visible { background: var(--lv-secondary-hover); } .lv-input { width: 100%; border-radius: 0.75rem; border: 1px solid var(--lv-border); background: var(--lv-input-bg); color: var(--lv-text); padding: 0.7rem 0.9rem; } .lv-input:focus-visible { outline: none; border-color: color-mix(in srgb, var(--lv-primary) 80%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lv-primary) 65%, white); } .lv-input:-webkit-autofill, .lv-input:-webkit-autofill:hover, .lv-input:-webkit-autofill:focus, .lv-input:-webkit-autofill:active { -webkit-text-fill-color: var(--lv-text); caret-color: var(--lv-text); border: 1px solid var(--lv-border); box-shadow: 0 0 0 1000px var(--lv-input-autofill) inset; transition: background-color 99999s ease-out 0s; } .lv-input:autofill, .lv-input:autofill:hover, .lv-input:autofill:focus { border: 1px solid var(--lv-border); box-shadow: 0 0 0 1000px var(--lv-input-autofill) inset; -webkit-text-fill-color: var(--lv-text); caret-color: var(--lv-text); } .lv-input--comfortable { font-size: 1rem; min-height: 3rem; padding: 0.85rem 1rem; } .lv-password-field { position: relative; } .lv-password-field__toggle { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border-radius: 0.5rem; color: var(--lv-text-muted); background: transparent; border: none; cursor: pointer; } .lv-password-field__toggle:hover, .lv-password-field__toggle:focus-visible { color: var(--lv-primary); outline: 2px solid color-mix(in srgb, var(--lv-primary) 75%, white); outline-offset: 1px; } .lv-password-field__icon { width: 1.35rem; height: 1.35rem; } .lv-signup-access-card { display: block; cursor: pointer; border-radius: 1rem; border: 2px solid var(--lv-border-muted); background: var(--lv-signup-card-bg); padding: 1.25rem 1.35rem; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .lv-signup-access-card:has(.lv-signup-access-card__input:checked) { border-color: var(--lv-primary); background: var(--lv-signup-card-checked-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv-primary) 45%, transparent); } .lv-signup-access-card:has(.lv-signup-access-card__input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--lv-primary) 75%, white); outline-offset: 2px; } .lv-signup-access-card--producer:has(.lv-signup-access-card__input:checked) { border-color: color-mix(in srgb, var(--lv-secondary) 75%, transparent); background: color-mix(in srgb, var(--lv-secondary) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv-secondary) 40%, transparent); } .lv-signup-access-card--promoter:has(.lv-signup-access-card__input:checked) { border-color: color-mix(in srgb, var(--lv-highlight) 75%, transparent); background: color-mix(in srgb, var(--lv-highlight) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv-highlight) 38%, transparent); } .lv-signup-access-card__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } select.lv-input { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px; padding-right: 2.75rem; } :root select.lv-input { background-image: url("data:image/svg+xml;utf8,"); } .dark select.lv-input { background-image: url("data:image/svg+xml;utf8,"); } .lv-producer-sellables select.lv-input { padding-right: 3rem; background-position: right 1.15rem center; } .cruise-dob-select { align-items: center; min-height: calc(0.7rem * 2 + 1.25rem + 2px); } .cruise-dob-select.cruise-dob-select--touch { min-height: 2.75rem; } .cruise-dob-select.cruise-dob-select--touch select.lv-input.cruise-dob-select__field { min-height: 2.75rem; } .cruise-dob-select select.lv-input.cruise-dob-select__field { width: auto; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0.7rem 2rem 0.7rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; background-position: right 0.65rem center; background-size: 10px 7px; } /* Rails 8: [year]/[month]/[day]; legacy AR forms may use (1i)/(2i)/(3i) */ .cruise-dob-select select.lv-input[name$="[year]"], .cruise-dob-select select.lv-input[name$="(1i)"] { flex: 1 1 5.5rem; min-width: 5.5rem; } .cruise-dob-select select.lv-input[name$="[month]"], .cruise-dob-select select.lv-input[name$="(2i)"] { flex: 1.5 1 calc(7rem - 20px); min-width: calc(7rem - 20px); } .cruise-dob-select select.lv-input[name$="[day]"], .cruise-dob-select select.lv-input[name$="(3i)"] { flex: 0.75 1 calc(3.5rem + 20px); min-width: calc(3.5rem + 20px); } :root input.lv-input[type="date"]::-webkit-calendar-picker-indicator, :root input.lv-input[type="datetime-local"]::-webkit-calendar-picker-indicator, :root input.lv-input[type="time"]::-webkit-calendar-picker-indicator, :root input.lv-input[type="month"]::-webkit-calendar-picker-indicator, :root input.lv-input[type="week"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml;utf8,"); } .dark input.lv-input[type="date"]::-webkit-calendar-picker-indicator, .dark input.lv-input[type="datetime-local"]::-webkit-calendar-picker-indicator, .dark input.lv-input[type="time"]::-webkit-calendar-picker-indicator, .dark input.lv-input[type="month"]::-webkit-calendar-picker-indicator, .dark input.lv-input[type="week"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml;utf8,"); } input.lv-input[type="date"]::-webkit-calendar-picker-indicator, input.lv-input[type="datetime-local"]::-webkit-calendar-picker-indicator, input.lv-input[type="time"]::-webkit-calendar-picker-indicator, input.lv-input[type="month"]::-webkit-calendar-picker-indicator, input.lv-input[type="week"]::-webkit-calendar-picker-indicator { background-repeat: no-repeat; background-position: center; background-size: 18px 18px; width: 18px; height: 18px; color: transparent; opacity: 1; cursor: pointer; } input.lv-input[type="date"]::-webkit-calendar-picker-indicator:hover, input.lv-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover, input.lv-input[type="time"]::-webkit-calendar-picker-indicator:hover, input.lv-input[type="month"]::-webkit-calendar-picker-indicator:hover, input.lv-input[type="week"]::-webkit-calendar-picker-indicator:hover { opacity: 0.85; } @keyframes lv-producer-tier-saved-ring { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 35% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .lv-producer-tier-row--saved { animation: lv-producer-tier-saved-ring 1.1s ease-out; } .lv-producer-tier-row--error { box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.55); } .lv-producer-addon-row--saved { animation: lv-producer-tier-saved-ring 1.1s ease-out; } .cruise-child-card--saved { animation: lv-producer-tier-saved-ring 1.1s ease-out; } .lv-producer-addon-row--error { box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.55); } .lv-producer-addon-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem 0; align-items: stretch; } .lv-producer-addon-grid--head { display: none; } @media (min-width: 768px) { .lv-producer-addon-grid { grid-template-columns: minmax(10rem, 1fr) 4.5rem minmax(7rem, 9rem) minmax(4.25rem, auto); gap: 0.35rem 0.65rem; align-items: center; } .lv-producer-addon-grid--head { display: grid; } } .lv-producer-addon-grid__field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .lv-producer-addon-grid__field--actions { align-items: flex-start; } @media (min-width: 768px) { .lv-producer-addon-grid__field--actions { align-items: flex-end; justify-content: center; } } .lv-producer-addon-row { padding: 0.65rem 0; } @media (min-width: 768px) { .lv-producer-addon-row { padding: 0.5rem 0; } } /* Producer cruise sellables: responsive tier layout (CSS owns breakpoints; matches Tailwind md = 768px). */ .lv-producer-cruise-tiers { width: 100%; } .lv-producer-cruise-tiers__tiergrid, .lv-producer-cruise-tiers__header { display: grid; grid-template-columns: 1fr; gap: 0.5rem 0; align-items: stretch; } .lv-producer-cruise-tiers__header { display: none; } @media (min-width: 768px) { .lv-producer-cruise-tiers__tiergrid, .lv-producer-cruise-tiers__header { grid-template-columns: minmax(4.5rem, 6.5rem) minmax(7.5rem, 11rem) 4rem minmax(7rem, 8.5rem) minmax(6rem, 7.5rem) minmax(4.25rem, auto); gap: 0.35rem 0.65rem; align-items: center; } .lv-producer-cruise-tiers__header { display: grid; } } .lv-producer-cruise-tiers__list { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 768px) { .lv-producer-cruise-tiers__list { gap: 0; } } .lv-producer-cruise-tiers__record { border-radius: 0.5rem; border: 1px solid var(--lv-producer-record-border); background: var(--lv-producer-record-bg); padding: 0.75rem 0.85rem; } @media (min-width: 768px) { .lv-producer-cruise-tiers__record { border: none; background: transparent; padding: 0.5rem 0; border-radius: 0; } .lv-producer-cruise-tiers__record + .lv-producer-cruise-tiers__record { border-top: 1px solid var(--lv-producer-record-divider); margin-top: 0.15rem; padding-top: 0.5rem; } } .lv-producer-cruise-tiers__field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .lv-link { color: var(--lv-link); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.15s ease; } .lv-link:hover, .lv-link:focus-visible { color: var(--lv-link-hover); } .lv-tour-link { color: var(--lv-highlight); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--lv-highlight) 50%, transparent); transition: color 0.15s ease, border-color 0.15s ease; } .lv-tour-link:hover, .lv-tour-link:focus-visible { color: var(--lv-primary); border-bottom-color: var(--lv-primary); } .lv-tour-link:visited { color: var(--lv-highlight); } .lv-prose { width: 100%; box-sizing: border-box; padding: 1.25rem 1.5rem; border-radius: 0.75rem; border: none; background: color-mix(in srgb, var(--lv-surface-1) 58%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--lv-text-muted); font-size: 0.875rem; line-height: 1.6; } .dark .lv-prose { background: color-mix(in srgb, var(--lv-surface-1) 48%, transparent); } .lv-prose > *:first-child { margin-top: 0; } .lv-prose > *:last-child { margin-bottom: 0; } .lv-prose p { margin: 0 0 0.85em; font-size: 0.875rem; color: var(--lv-text-muted); } .lv-prose h1, .lv-prose h2, .lv-prose h3, .lv-prose h4 { margin: 1.15em 0 0.4em; color: var(--lv-text); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; } .lv-prose h2 { font-size: 1rem; } .lv-prose h3 { font-size: 0.9375rem; } .lv-prose ul, .lv-prose ol { margin: 0 0 0.85em; padding-left: 1.25em; font-size: 0.875rem; color: var(--lv-text-muted); } .lv-prose li { margin-bottom: 0.3em; } .lv-prose li::marker { color: var(--lv-primary); } .lv-prose a { color: var(--lv-link); font-weight: 500; font-size: inherit; text-underline-offset: 2px; } .lv-prose a:visited { color: var(--lv-link); } .lv-prose a:hover { color: var(--lv-link-hover); } .lv-prose strong, .lv-prose b { color: var(--lv-text); font-weight: 600; } .lv-prose blockquote { margin: 0.85em 0; padding: 0.65em 0.85em; border: none; border-radius: 0.5rem; background: color-mix(in srgb, var(--lv-surface-3) 70%, transparent); color: var(--lv-text-muted); font-size: 0.8125rem; } .lv-prose hr { margin: 1em 0; border: none; height: 0; border-top: 1px solid color-mix(in srgb, var(--lv-border-muted) 45%, transparent); } .lv-prose .trix-content { font-size: inherit; line-height: inherit; color: inherit; } .lv-page-wrap { max-width: 54rem; margin-inline: auto; margin-top: 1.5rem; margin-bottom: 1.5rem; } .lv-scope-tab { display: inline-block; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--lv-text-muted); background: color-mix(in srgb, var(--lv-surface-2) 88%, transparent); border: 1px solid var(--lv-border-muted); transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .lv-scope-tab:hover, .lv-scope-tab:focus-visible { color: var(--lv-heading); border-color: var(--lv-border); } .lv-scope-tab--active { background: var(--lv-accent); border-color: transparent; color: #f8fafc; box-shadow: 0 6px 18px color-mix(in srgb, var(--lv-accent) 32%, transparent); } .dark .lv-scope-tab--active { color: #0f172a; } /* Homepage hero — aurora panel with light typography */ .lv-home-hero { position: relative; overflow: hidden; margin-bottom: 2.5rem; padding: clamp(2.75rem, 7vw, 4.25rem) clamp(1.25rem, 4vw, 2rem); border-radius: 1.25rem; border: 1px solid color-mix(in srgb, var(--lv-primary) 38%, transparent); text-align: center; isolation: isolate; box-shadow: 0 22px 56px color-mix(in srgb, var(--lv-shadow) 88%, transparent), inset 0 1px 0 color-mix(in srgb, var(--lv-primary) 18%, transparent); } .lv-home-hero__backdrop { position: absolute; inset: 0; z-index: 0; background: linear-gradient( 145deg, #060d1a 0%, #0a1628 32%, #0f3d56 62%, #1e1b4b 100% ); } .dark .lv-home-hero__backdrop { background: linear-gradient( 145deg, #020617 0%, #0a1628 30%, #134e4a 58%, #312e81 100% ); } .lv-home-hero__mesh { position: absolute; inset: -25%; z-index: 1; pointer-events: none; opacity: 0.58; filter: blur(52px); background: radial-gradient(circle at 22% 38%, rgba(34, 211, 238, 0.58) 0%, transparent 44%), radial-gradient(circle at 78% 58%, rgba(167, 139, 250, 0.48) 0%, transparent 46%), radial-gradient(circle at 48% 88%, rgba(45, 212, 191, 0.38) 0%, transparent 42%); } .lv-home-hero__grid { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.12; background-image: linear-gradient(rgba(148, 163, 184, 0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.4) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black 0%, transparent 82%); } .lv-home-hero__content { position: relative; z-index: 10; max-width: 42rem; margin-inline: auto; } .lv-home-hero__kicker { display: inline-block; margin: 0 0 1rem; padding: 0.35rem 0.9rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #bae6fd; background: rgba(8, 145, 178, 0.24); border: 1px solid rgba(34, 211, 238, 0.38); } .lv-home-hero h1.lv-home-hero__title { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; color: #f8fafc; text-shadow: 0 2px 28px rgba(2, 6, 23, 0.55); } .lv-home-hero__brand { display: inline-block; background: linear-gradient(108deg, #67e8f9 0%, #c4b5fd 48%, #5eead4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lv-home-hero__lead { margin: 0 auto 1.5rem; max-width: 34rem; font-size: clamp(1.0625rem, 2.5vw, 1.25rem); line-height: 1.65; color: #cbd5e1; } .lv-home-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } a.lv-home-hero__action { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1.1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; color: #f1f5f9; background: rgba(15, 23, 42, 0.45); border: 1px solid rgba(148, 163, 184, 0.45); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } a.lv-home-hero__action:hover, a.lv-home-hero__action:focus-visible { color: #ffffff; background: color-mix(in srgb, var(--lv-primary) 22%, rgba(15, 23, 42, 0.55)); border-color: color-mix(in srgb, var(--lv-primary) 55%, transparent); transform: translateY(-1px); } /* Event show — unified header card: info, banner, purchase */ .lv-event-show { --lv-event-title: color-mix(in srgb, var(--lv-primary) 55%, var(--lv-secondary) 45%); } .dark .lv-event-show { --lv-event-title: color-mix(in srgb, var(--lv-primary) 65%, #f8fafc 35%); } .lv-event-show__info { width: 100%; } .lv-event-show__info .lv-event-hero__title { margin: 0 0 0.5rem; font-size: clamp(1.875rem, 4.5vw, 3rem); font-weight: 700; letter-spacing: -0.028em; line-height: 1.12; color: var(--lv-event-title); text-shadow: none; } .lv-event-show__your-tickets { margin: 0; } .lv-event-show__info, .lv-event-show__your-tickets, .lv-event-show__below { width: 100%; max-width: 100%; } .lv-event-show__below { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 768px) { .lv-event-show:not(.lv-event-show--cruise) .lv-event-show__below { display: grid; grid-template-columns: minmax(0, 1fr) min(22rem, 40%); gap: 1.25rem; align-items: start; } } .lv-event-show__purchase { padding: 1rem; border-radius: 0.75rem; border: 1px solid var(--lv-border-muted); background: color-mix(in srgb, var(--lv-surface-2) 70%, var(--lv-bg)); } .lv-event-show--cruise .lv-event-show__purchase { padding: 0; border: none; background: transparent; } .lv-event-show__info .lv-event-hero__chip { color: var(--lv-text); background: color-mix(in srgb, var(--lv-surface-2) 88%, var(--lv-bg)); border-color: var(--lv-border-muted); backdrop-filter: none; } .lv-event-show__info a.lv-event-hero__chip:hover, .lv-event-show__info a.lv-event-hero__chip:focus-visible { color: var(--lv-secondary); background: color-mix(in srgb, var(--lv-secondary) 10%, var(--lv-surface)); border-color: color-mix(in srgb, var(--lv-secondary) 35%, transparent); } .lv-event-show__info .lv-event-hero__chip--format { color: var(--lv-secondary); background: color-mix(in srgb, var(--lv-secondary) 12%, var(--lv-surface)); border-color: color-mix(in srgb, var(--lv-secondary) 28%, transparent); } .lv-event-show__info .lv-event-hero__dates { color: var(--lv-text); background: color-mix(in srgb, var(--lv-surface-2) 92%, var(--lv-bg)); border-color: var(--lv-border-muted); box-shadow: none; backdrop-filter: none; } .lv-event-show__info .lv-event-hero__dates--muted { color: var(--lv-text-muted); } .lv-event-show__info .lv-event-hero__venue { color: var(--lv-link); border-bottom-color: color-mix(in srgb, var(--lv-link) 35%, transparent); text-shadow: none; } .lv-event-show__info .lv-event-hero__venue:hover, .lv-event-show__info .lv-event-hero__venue:focus-visible { color: var(--lv-secondary); } .lv-event-show__info .lv-event-hero__venue-link { text-shadow: none; } .lv-event-show__banner { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 0; border-radius: 1rem; overflow: hidden; background: var(--lv-surface-2); box-shadow: 0 4px 24px color-mix(in srgb, var(--lv-bg) 40%, transparent); } .lv-event-show__banner-img { display: block; width: 100%; height: auto; max-height: 10rem; object-fit: contain; object-position: center; border-radius: 0; } @media (min-width: 640px) { .lv-event-show__banner-img { max-height: 14rem; } } @media (min-width: 768px) { .lv-event-show__banner-img { max-height: 18rem; } } @media (min-width: 1024px) { .lv-event-show__banner-img { max-height: 22rem; } } .lv-event-show__banner-fallback { width: 100%; min-height: 8rem; border-radius: 0; opacity: 0.9; } @media (min-width: 640px) { .lv-event-show__banner-fallback { min-height: 10rem; } } @media (min-width: 768px) { .lv-event-show__banner-fallback { min-height: 12rem; } } /* Event show hero (legacy overlay) — light text over bottom navy scrim */ .lv-event-hero { --lv-hero-title: #ffffff; --lv-hero-meta: #e2e8f0; --lv-hero-meta-muted: #cbd5e1; --lv-hero-venue: #7dd3fc; --lv-hero-venue-hover: #bae6fd; --lv-hero-byline: #cbd5e1; --lv-hero-brand: #f8fafc; --lv-hero-chip-bg: rgba(15, 23, 42, 0.5); --lv-hero-chip-text: #f1f5f9; --lv-hero-chip-border: rgba(148, 163, 184, 0.4); } .dark .lv-event-hero { --lv-hero-title: #f8fafc; --lv-hero-title-shadow: none; --lv-hero-meta: #e2e8f0; --lv-hero-meta-muted: #cbd5e1; --lv-hero-venue: #67e8f9; --lv-hero-venue-hover: #a5f3fc; --lv-hero-byline: #cbd5e1; --lv-hero-brand: #f1f5f9; --lv-hero-chip-bg: rgba(15, 23, 42, 0.65); --lv-hero-chip-text: #e2e8f0; --lv-hero-chip-border: rgba(148, 163, 184, 0.4); } /* Bottom half only: navy fade for legibility; top 50% fully visible */ .lv-event-hero__scrim { background: linear-gradient( to top, rgba(10, 22, 40, 0.96) 0%, rgba(10, 22, 40, 0.78) 16%, rgba(10, 22, 40, 0.48) 30%, rgba(10, 22, 40, 0.16) 44%, transparent 52%, transparent 100% ); } .dark .lv-event-hero__scrim { background: linear-gradient( to top, rgba(2, 6, 23, 0.96) 0%, rgba(2, 6, 23, 0.75) 16%, rgba(2, 6, 23, 0.45) 30%, rgba(2, 6, 23, 0.14) 44%, transparent 52%, transparent 100% ); } .lv-event-hero__fallback { background: linear-gradient( 125deg, color-mix(in srgb, var(--lv-primary) 22%, var(--lv-bg)) 0%, color-mix(in srgb, var(--lv-secondary) 18%, var(--lv-bg)) 55%, var(--lv-bg) 100% ); } .lv-event-hero__content { position: relative; z-index: 10; padding: 2rem; width: 100%; max-width: 72rem; } .lv-event-hero h1.lv-event-hero__title { margin: 0 0 0.5rem; font-size: clamp(1.875rem, 4.5vw, 3rem); font-weight: 700; letter-spacing: -0.028em; line-height: 1.12; color: var(--lv-hero-title); text-shadow: 0 2px 16px rgba(2, 6, 23, 0.65), 0 0 32px rgba(2, 6, 23, 0.35); } .lv-event-hero__byline, .lv-event-hero__brand { text-shadow: 0 1px 10px rgba(2, 6, 23, 0.55), 0 0 20px rgba(2, 6, 23, 0.25); } .lv-event-hero__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; } /* Tag links crowd the info header on small screens; format chip stays visible from sm up */ @media (max-width: 639px) { .lv-event-show__info .lv-event-hero__chips a.lv-event-hero__chip { display: none; } .lv-event-show__info .lv-event-hero__chips:not(:has(.lv-event-hero__chip--format)) { display: none; margin-bottom: 0; } } .lv-event-hero__chip { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; color: var(--lv-hero-chip-text); background: var(--lv-hero-chip-bg); border: 1px solid var(--lv-hero-chip-border); backdrop-filter: blur(6px); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } a.lv-event-hero__chip:hover, a.lv-event-hero__chip:focus-visible { background: color-mix(in srgb, var(--lv-primary) 14%, var(--lv-hero-chip-bg)); border-color: color-mix(in srgb, var(--lv-primary) 40%, transparent); color: var(--lv-hero-venue-hover); } .lv-event-hero__chip--format { font-weight: 600; color: var(--lv-secondary); background: color-mix(in srgb, var(--lv-secondary) 12%, var(--lv-hero-chip-bg)); border-color: color-mix(in srgb, var(--lv-secondary) 28%, transparent); } .lv-event-hero__meta { margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .lv-event-hero__dates { display: inline-flex; align-items: center; max-width: 100%; padding: 0.4rem 0.9rem; border-radius: 0.5rem; font-size: clamp(1rem, 2.2vw, 1.1875rem); font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; color: #f8fafc; background: rgba(15, 23, 42, 0.78); border: 1px solid rgba(248, 250, 252, 0.2); box-shadow: 0 2px 14px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-shadow: none; } .lv-event-hero__dates--muted { color: #e2e8f0; font-weight: 500; } .lv-event-hero__meta-sep { color: var(--lv-hero-meta-muted); opacity: 0.65; user-select: none; } .lv-event-hero__venue-row { margin: 0.75rem 0 0; } .lv-event-hero__venue-link { display: inline-block; font-size: 0.8125rem; line-height: 1.3; text-shadow: 0 1px 8px rgba(2, 6, 23, 0.55); } .lv-event-hero__venue { color: var(--lv-hero-venue); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--lv-hero-venue) 35%, transparent); transition: color 0.15s ease, border-color 0.15s ease; } .lv-event-hero__venue:hover, .lv-event-hero__venue:focus-visible { color: var(--lv-hero-venue-hover); border-bottom-color: currentColor; } .lv-event-hero__meta-muted { color: var(--lv-hero-meta-muted); font-weight: 500; } .lv-event-hero__byline { margin: 0.35rem 0 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: var(--lv-hero-byline); } .lv-event-hero .lv-event-hero__brand { color: var(--lv-hero-brand); font-weight: 600; } .lv-learn-more__block + .lv-learn-more__block { margin-top: 0; } .lv-prose--compact p { margin-top: 0; margin-bottom: 0.5rem; } .lv-booking-hold-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0; padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid color-mix(in srgb, var(--lv-secondary) 45%, var(--lv-border-muted)); background: color-mix(in srgb, var(--lv-secondary) 12%, var(--lv-surface)); color: var(--lv-text); font-size: 0.875rem; font-weight: 600; } .lv-booking-wizard__hold-desktop .lv-booking-hold-banner { margin-bottom: 0; } .lv-booking-hold-banner--compact { padding: 0.5rem 0.75rem; font-size: 0.8125rem; border-radius: 0.375rem; } .lv-booking-hold-banner--compact .lv-booking-hold-banner__time { font-size: 1rem; } .lv-booking-hold-banner__time { font-variant-numeric: tabular-nums; font-size: 1.125rem; color: var(--lv-secondary); } .lv-booking-hold-banner--urgent { border-color: color-mix(in srgb, #f59e0b 55%, var(--lv-border-muted)); background: color-mix(in srgb, #f59e0b 14%, var(--lv-surface)); } .lv-booking-hold-banner--expired { border-color: color-mix(in srgb, #ef4444 50%, var(--lv-border-muted)); background: color-mix(in srgb, #ef4444 12%, var(--lv-surface)); } .lv-booking-hold-banner--expired .lv-booking-hold-banner__time { color: #f87171; } .lv-booking-hold-banner--renewed { border-color: color-mix(in srgb, var(--lv-secondary) 55%, var(--lv-border-muted)); background: color-mix(in srgb, var(--lv-secondary) 18%, var(--lv-surface)); } .lv-booking-hold-banner--renewed .lv-booking-hold-banner__time { color: var(--lv-accent); } .lv-event-hero__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; } .lv-event-hero__badge { display: inline-flex; align-items: center; padding: 0.28rem 0.65rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.35; border: 1px solid transparent; } .lv-event-hero__badge--upcoming { color: #b45309; background: color-mix(in srgb, #f59e0b 16%, transparent); border-color: color-mix(in srgb, #f59e0b 32%, transparent); } .lv-event-hero__badge--tickets { color: #0e7490; background: color-mix(in srgb, var(--lv-primary) 14%, transparent); border-color: color-mix(in srgb, var(--lv-primary) 32%, transparent); } .lv-event-hero__badge--vod { color: #475569; background: color-mix(in srgb, var(--lv-text-muted) 12%, transparent); border-color: color-mix(in srgb, var(--lv-text-muted) 28%, transparent); } .lv-event-hero__badge--rent { color: #be123c; background: color-mix(in srgb, #f43f5e 12%, transparent); border-color: color-mix(in srgb, #f43f5e 28%, transparent); } .lv-event-hero__badge--preview { color: #5b21b6; background: color-mix(in srgb, var(--lv-secondary) 14%, transparent); border-color: color-mix(in srgb, var(--lv-secondary) 30%, transparent); } .lv-event-hero__badge--preview-warn { color: #b45309; background: color-mix(in srgb, #f59e0b 12%, transparent); border-color: color-mix(in srgb, #f59e0b 28%, transparent); } /* Badges on hero scrim (readable on navy fade in light + dark) */ .lv-event-hero .lv-event-hero__badge--upcoming { color: #fde68a; background: color-mix(in srgb, #f59e0b 28%, transparent); border-color: color-mix(in srgb, #f59e0b 42%, transparent); } .lv-event-hero .lv-event-hero__badge--tickets { color: #a5f3fc; background: color-mix(in srgb, var(--lv-primary) 24%, transparent); border-color: color-mix(in srgb, var(--lv-primary) 40%, transparent); } .lv-event-hero .lv-event-hero__badge--vod { color: #e2e8f0; background: color-mix(in srgb, var(--lv-text-muted) 28%, transparent); border-color: color-mix(in srgb, var(--lv-text-muted) 40%, transparent); } .lv-event-hero .lv-event-hero__badge--rent { color: #fecdd3; background: color-mix(in srgb, #f43f5e 26%, transparent); border-color: color-mix(in srgb, #f43f5e 42%, transparent); } .lv-event-hero .lv-event-hero__badge--preview { color: #e9d5ff; background: color-mix(in srgb, var(--lv-secondary) 26%, transparent); border-color: color-mix(in srgb, var(--lv-secondary) 42%, transparent); } .lv-event-hero .lv-event-hero__badge--preview-warn { color: #fde68a; background: color-mix(in srgb, #f59e0b 22%, transparent); border-color: color-mix(in srgb, #f59e0b 38%, transparent); } .dark .lv-event-hero__badge--upcoming { color: #fde68a; background: color-mix(in srgb, #f59e0b 22%, transparent); border-color: color-mix(in srgb, #f59e0b 38%, transparent); } .dark .lv-event-hero__badge--tickets { color: #a5f3fc; background: color-mix(in srgb, var(--lv-primary) 20%, transparent); border-color: color-mix(in srgb, var(--lv-primary) 38%, transparent); } .dark .lv-event-hero__badge--vod { color: #cbd5e1; background: color-mix(in srgb, var(--lv-text-muted) 22%, transparent); border-color: color-mix(in srgb, var(--lv-text-muted) 35%, transparent); } .dark .lv-event-hero__badge--rent { color: #fecdd3; background: color-mix(in srgb, #f43f5e 22%, transparent); border-color: color-mix(in srgb, #f43f5e 38%, transparent); } .dark .lv-event-hero__badge--preview { color: #e9d5ff; background: color-mix(in srgb, var(--lv-secondary) 22%, transparent); border-color: color-mix(in srgb, var(--lv-secondary) 40%, transparent); } .dark .lv-event-hero__badge--preview-warn { color: #fde68a; background: color-mix(in srgb, #f59e0b 18%, transparent); border-color: color-mix(in srgb, #f59e0b 34%, transparent); } /* Stabilize Administrate form alignment for labels, fields, and hints. */ .field-unit { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: 0.75rem; align-items: start; margin-bottom: 0.55rem; } .field-unit__label { float: none; width: auto; margin-left: 0; text-align: right; padding-top: 0.35rem; } .field-unit__field { float: none; margin-left: 0; min-width: 0; } .field-unit__hint { margin-left: 0; width: auto; } .field-unit__hint--below { grid-column: 2; margin-top: 0.05rem; margin-bottom: 0; line-height: 1.35; } @media (max-width: 900px) { .field-unit { grid-template-columns: 1fr; row-gap: 0.4rem; } .field-unit__label { text-align: left; padding-top: 0; } .field-unit__hint--below { grid-column: 1; margin-top: 0.1rem; } } /* Trix / Action Text on producer event wizard (site theme; default trix = black icons on light/transparent chrome) */ .lv-producer-event-wizard .lv-producer-rich-text { max-width: 100%; } .lv-producer-event-wizard .lv-producer-rich-text trix-toolbar, .lv-producer-event-wizard .lv-producer-rich-text trix-editor { max-width: 100%; } .lv-producer-event-wizard trix-toolbar { background: var(--lv-trix-toolbar-bg); border-radius: 0.45rem 0.45rem 0 0; padding: 0.4rem 0.5rem 0; border: 1px solid var(--lv-border-muted); border-bottom: none; } .lv-producer-event-wizard trix-toolbar .trix-button-row { flex-wrap: wrap; justify-content: flex-start; gap: 0.35rem 0.45rem; overflow-x: visible; } .lv-producer-event-wizard trix-toolbar .trix-button-group-spacer { display: none; } .lv-producer-event-wizard trix-toolbar .trix-button-group { margin-bottom: 0.35rem; margin-left: 0 !important; background: var(--lv-trix-group-bg); border: 1px solid var(--lv-border-muted) !important; border-top-color: var(--lv-border-muted) !important; border-bottom-color: var(--lv-border-muted) !important; border-radius: 0.4rem; } .lv-producer-event-wizard trix-toolbar .trix-button { color: var(--lv-text-muted) !important; border-bottom: none !important; background: transparent !important; } .lv-producer-event-wizard trix-toolbar .trix-button:not(:first-child) { border-left: 1px solid rgba(148, 163, 184, 0.22) !important; } .lv-producer-event-wizard trix-toolbar .trix-button.trix-active { background: rgba(58, 134, 255, 0.22) !important; color: var(--lv-text) !important; } .lv-producer-event-wizard trix-toolbar .trix-button:not(:disabled):hover { background: rgba(168, 85, 247, 0.12) !important; color: var(--lv-text) !important; } .lv-producer-event-wizard trix-toolbar .trix-button:disabled { color: rgba(148, 163, 184, 0.35) !important; } .lv-producer-event-wizard trix-toolbar .trix-button--icon::before { filter: var(--lv-trix-icon-filter); opacity: 0.82 !important; } .lv-producer-event-wizard trix-toolbar .trix-button--icon.trix-active::before { filter: var(--lv-trix-icon-filter); opacity: 1 !important; } .lv-producer-event-wizard trix-toolbar .trix-button--icon:disabled::before { filter: var(--lv-trix-icon-filter); opacity: 0.3 !important; } .lv-producer-event-wizard trix-editor { background: var(--lv-trix-editor-bg) !important; border: 1px solid var(--lv-border-muted) !important; border-top: 1px solid rgba(148, 163, 184, 0.18) !important; border-radius: 0 0 0.45rem 0.45rem !important; color: var(--lv-text) !important; margin-top: 0; min-height: 22rem; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .lv-producer-event-wizard trix-editor.trix-content { color: var(--lv-text); } .lv-producer-event-wizard trix-editor a { color: var(--lv-primary); } .lv-producer-event-wizard trix-editor blockquote { border-left-color: rgba(168, 85, 247, 0.45) !important; color: var(--lv-text-muted); } .lv-producer-event-wizard trix-editor pre { white-space: pre-wrap; overflow-x: auto; background: rgba(0, 0, 0, 0.35) !important; color: var(--lv-highlight) !important; border-radius: 0.35rem; } .lv-producer-event-wizard trix-editor .attachment--preview .attachment__caption { color: var(--lv-text-muted) !important; } .lv-producer-event-wizard trix-editor .attachment--file { color: var(--lv-text) !important; border-color: var(--lv-border-muted) !important; background: rgba(2, 6, 23, 0.5) !important; } .lv-producer-event-wizard trix-toolbar .trix-dialog { background: rgba(18, 18, 28, 0.98) !important; border: 1px solid var(--lv-border-muted) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55); color: var(--lv-text); } .lv-producer-event-wizard trix-toolbar .trix-input--dialog { background: rgba(2, 6, 23, 0.9) !important; border: 1px solid var(--lv-border-muted) !important; color: var(--lv-text) !important; border-radius: 0.35rem; } .lv-producer-event-wizard trix-toolbar .trix-button--dialog { background: var(--lv-primary) !important; color: var(--lv-on-primary) !important; border-radius: 0.35rem !important; } .lv-producer-event-wizard trix-toolbar .trix-button--dialog:hover { background: var(--lv-primary-hover) !important; color: var(--lv-on-primary) !important; } .lv-footer-preferences { flex-shrink: 0; } .lv-theme-toggle { display: inline-flex; align-items: center; gap: 0.2rem; border-radius: 0.5rem; border: 1px solid var(--lv-border); background: var(--lv-surface-2); padding: 0.2rem; box-shadow: 0 1px 4px var(--lv-shadow); } .lv-theme-toggle__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 2.25rem; min-height: 2.25rem; padding: 0 0.45rem; border-radius: 0.35rem; border: none; background: transparent; color: var(--lv-text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .lv-theme-toggle__label { font-size: 0.7rem; font-weight: 600; line-height: 1; } .lv-theme-toggle__btn:hover, .lv-theme-toggle__btn:focus-visible { color: var(--lv-primary); outline: none; } .lv-theme-toggle__btn[aria-pressed="true"] { background: var(--lv-primary); color: var(--lv-on-primary); } .lv-theme-toggle__btn svg { width: 1.1rem; height: 1.1rem; }