@charset "UTF-8"; @keyframes MoveUpInitial { to { transform: translateY(-105%); } } @keyframes MoveUpEnd { from { transform: translateY(105%); } to { transform: translateY(0); } } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes scoopAnimation { 0% { background-position: -12px -12px, 0% 0%, 0 0; } 100% { background-position: -12px -12px, 200% 0%, 0 0; } } @keyframes animationBg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Category Animation on Load */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes section2BgAnim { 0% { background-position: 85% 30%, 15% 90%, center; } 33% { background-position: 60% 10%, 40% 70%, center; } 66% { background-position: 10% 40%, 90% 20%, center; } 100% { background-position: 85% 30%, 15% 90%, center; } } @keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(4); opacity: 0; } } @keyframes floatUpDown { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes borderGrowShadow { 0% { box-shadow: 0 0 0 0 rgba(255, 109, 79, 0.25); } 50% { box-shadow: 0 0 0 24px rgba(255, 109, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 109, 79, 0); } } @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-6px); opacity: 1; } } /* ═══════════════════════════════════════════════════════════════ Checkout v6 — modal-based ticket purchase flow. All selectors prefixed `.ck-` to avoid colliding with the legacy tmv2 / rc-* / pmv4 / pmv5 work. Lives at global scope (not nested under any wrapper) because the modal is injected at level. Phase 1 scope: shell + header + identity strip + summary card + CTA button. Step body content + interactions land in later phases. ═══════════════════════════════════════════════════════════════ */ /* ── Backdrop + lock the page behind the modal ─────────────── */ .ck-modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 15, 35, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; } /* Scroll-lock is applied by JS (_lockBodyScroll/_unlockBodyScroll) * via inline `position: fixed; top: -px` on . * This is the only technique that reliably blocks desktop wheel * AND iOS touch-momentum scrolling. The class is kept solely as * a hook for other modal-aware styles. */ body.ck-modal-open { /* Defensive — iOS Safari sometimes still leaks touch when * position:fixed alone is set. touch-action stops that. */ touch-action: none; } /* Phase 23 — Free-cart confirmation notice (replaces the card UI * on Step 4 when the cart total is 0). */ .ck-free-cart-notice { display: flex; align-items: center; gap: 14px; padding: 18px 20px; margin: 8px 0 16px; border: 1.5px solid #bbf7d0; background: #f0fdf4; border-radius: 12px; color: #166534; font-size: 14px; font-weight: 600; line-height: 1.5; } .ck-free-cart-notice .ck-free-cart-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 18px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .ck-free-cart-notice .ck-free-cart-text { flex: 1; } /* Phase 42 — `.ck-pay-processing-notice` SCSS removed. The notice * is now rendered with inline Tailwind utilities (amber-50 box) by * _showPayProcessingNotice() in checkout.js, and the spinner is the * global `#ripLoader` overlay shown via show_loader(). */ /* ── Inner card ─────────────────────────────────────────────── */ /* Phase 33 — inner is a flex column with max-height 85vh so only the * .ck-modal-body scrolls (header + identity stay pinned at top). The * old per-card padding is moved into .ck-modal-chrome + .ck-modal-body * so each section can independently control its own padding. */ .ck-modal-inner { width: 100%; max-width: 976px; margin: auto; background: #ffffff; border-radius: 12px; box-shadow: 0px 4px 30px 5px rgba(0, 0, 0, 0.08); padding: 0; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; transform: scale(0.95); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; } @media (max-width: 640px) { .ck-modal-inner { border-radius: 14px; max-height: 92vh; } } .ck-modal-chrome { flex-shrink: 0; } /* Phase 45 — Step 5 ("Purchase Confirmed") narrower modal modifier. * The shell adds this class when the controller passes * shell_modifier=ck-modal-inner--narrow. Shrinks the inner card * from the wide shopping layout (976px) used by Steps 1–4 down to * a tighter receipt-style width. */ .ck-modal-inner--narrow { max-width: 640px; } .ck-modal-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 20px 24px 24px; -webkit-overflow-scrolling: touch; } @media (min-width: 768px) { .ck-modal-body { padding: 24px 28px 28px; } } @media (max-width: 640px) { .ck-modal-body { padding: 16px 18px 18px; } } .ck-summary-card .gradient-divider { margin: 26px 0 20px 0; border: 0; } .ck-summary-gradient-divider { margin: 12px 0; border: 0; height: 1px; } .ck-summary-gradient-divider[hidden] { display: none !important; } .ck-date-card.is-selected { border-color: var(--color-coral, #ff6d4f); background-color: rgb(254, 246, 243); } .ck-date-card.is-hidden { display: none; } /* Brand indigo for the "N left" metric — matches legacy .rc-tickets-left * and stays in sync if the brand purple is retuned in app.scss. */ .ck-date-list.is-show-all .ck-date-card.is-hidden { display: flex; } /* Show-all chevron flips when the list is expanded. JS toggles * .is-open on the button alongside .is-show-all on #ck-date-list. */ .ck-show-all-btn .ck-show-all-caret { transition: transform 0.25s ease; } .ck-show-all-btn.is-open .ck-show-all-caret { transform: rotate(180deg); } .ck-ticket-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .ck-addons-section { margin-top: 24px; } .ck-addons-heading { font-size: 16px; font-weight: 600; text-transform: uppercase; color: #111; margin: 0 0 12px; } .ck-ticket-card { --ck-band-color: var(--color-coral, #ff6d4f); --ck-notch-r: 8px; position: relative; display: flex; flex-direction: column; gap: 22px; padding: 12px 26px 11px 12px; background: #ffffff; border: 1px solid #d9d9d9; border-right: none; border-radius: 12px; transition: border-color 0.2s; background-image: url("../../public/themes/advanced/images/ticket-card.png"); background-size: contain; background-position: right; background-repeat: repeat-y; } .ck-ticket-band { position: absolute; left: 12px; top: 12px; height: 44px; width: 8px; border-radius: 25px; background: var(--ck-band-color); } /* Kind-driven band color. Defined AFTER `.ck-ticket-card` so the * per-kind `--ck-band-color` wins the cascade (equal specificity → * later wins). Used by `.ck-ticket-band` for the small pill next * to the ticket name — NOT the card outline. */ .ck-ticket-card--free { --ck-band-color: var(--color-success, #34a853); } .ck-ticket-card--paid { --ck-band-color: #f59e0b; } .ck-ticket-card--donation { --ck-band-color: #1877f2; } .ck-ticket-card--addon { --ck-band-color: #f59e0b; } .ck-ticket-card[data-has-qty="1"] { border-color: var(--color-coral, #ff6d4f); background-image: url("../../public/themes/advanced/images/ticket-card-active.png"); background-color: #fef6f3; } .ck-ticket-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .ck-ticket-id { display: flex; flex-direction: column; padding-left: 14px; flex: 1; gap: 6px; min-width: 0; } .ck-ticket-name { font-size: 16px; font-weight: 600; color: #111; margin: 0; } .ck-ticket-pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ck-ticket-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; line-height: 1; color: #fff; background: var(--ck-band-color); } .ck-ticket-pill--free { background: var(--color-success, #34a853); } .ck-ticket-pill--paid { background: #ff6d4f; } .ck-ticket-pill--donation { background: #1877f2; } .ck-ticket-pill--addon { background: #ff6d4f; } .ck-ticket-money { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; text-align: right; } .ck-ticket-price { font-size: 18px; font-weight: 700; color: #111; } .ck-ticket-price--donation { font-size: 14px; font-weight: 500; color: black; } .ck-ticket-left { font-size: 14px; font-weight: 500; color: #696969; } .ck-ticket-left strong { color: #696969; font-weight: 500; } .ck-ticket-end-sale { font-size: 12px; color: #696969; text-wrap: nowrap; } .ck-ticket-end-sale strong { color: #111; font-weight: 500; } /* ── Card row 2 — bottom: description vs actions ──────── */ .ck-ticket-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .ck-ticket-desc { font-size: 12px; color: #343434; font-style: italic; margin: 0; flex: 1; min-width: 0; } .ck-ticket-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; position: relative; z-index: 1; } /* Trash (RED square) — sits to the LEFT of the stepper. * Phase 49 — switched from coral to pure red (#EF4444) per * reference; the disabled (inactive-card) state shows a faded * light-pink wash so the button stays visible but reads as muted. */ .ck-ticket-delete { width: 24px; height: 24px; border: 0; border-radius: 4px; background: #fee2e2; color: #fff; cursor: not-allowed; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, opacity 0.15s ease; pointer-events: none; } .ck-ticket-delete img { filter: brightness(0) invert(1); width: 14px; height: 14px; opacity: 0.6; } .ck-ticket-card[data-has-qty="1"] .ck-ticket-delete { background: var(--color-danger); cursor: pointer; pointer-events: auto; } .ck-ticket-card[data-has-qty="1"] .ck-ticket-delete img { opacity: 1; } .ck-ticket-card[data-has-qty="1"] .ck-ticket-delete:hover { background: var(--color-danger); } /* Stepper — INDIGO solid circular buttons. Disabled state shows * a light-indigo wash (not full opacity drop) so it stays visible * the same way the reference does. */ .ck-ticket-stepper { display: inline-flex; align-items: center; gap: 10px; } .ck-stepper-btn { width: 32px; height: 32px; border: 0; border-radius: 9999px; background: var(--color-indigo, #7b7ee7); color: #fff; font-weight: 400; font-size: 26px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.15s, background-color 0.15s, filter 0.15s; } .ck-stepper-btn:hover:not(:disabled) { filter: brightness(1.06); } .ck-stepper-btn:disabled { background: var(--color-indigo-light, #e7e8fb); color: #fff; cursor: not-allowed; } .ck-stepper-value { min-width: 24px; text-align: center; font-weight: 700; font-size: 20px; color: #111; } .ck-ticket-group-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; background: #f3f4f6; color: #6b7280; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; } /* Donation amount input */ .ck-donation-input { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 10px; } .ck-donation-input .ck-donation-currency { font-size: 14px; font-weight: 500; color: black; } .ck-donation-input input { width: 90px; background: transparent; border: 0; outline: none; font-size: 14px; font-weight: 500; color: #111; } .ck-donation-input input::placeholder { font-weight: 400; color: #9ca3af; } .ck-donation-input input { /* Hide native number-input spinner arrows. * Scoped to .ck-donation-input so other number inputs * across the app are untouched. */ } .ck-donation-input input[type=number] { -moz-appearance: textfield; appearance: textfield; } .ck-donation-input input[type=number]::-webkit-outer-spin-button, .ck-donation-input input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .ck-summary-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .ck-summary-empty { list-style: none; color: black; font-size: 14px; font-style: italic; padding: 4px 0; } .ck-summary-row { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 4px 12px; font-size: 14px; color: #111; position: relative; /* Small colored bar on the left — color comes via inline * `style="--ck-row-band:"` set by the JS renderer. */ } .ck-summary-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0px; width: 4px; border-radius: 6px; background: var(--ck-row-band, var(--color-coral, #ff6d4f)); } .ck-summary-row-name { color: #111; } .ck-summary-row-amount { font-weight: 600; color: #111; flex-shrink: 0; } .ck-summary-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: #696969; padding: 2px 0; } .ck-summary-line-amount { font-weight: 600; color: #111; } .ck-summary-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 2px; } .ck-summary-total-label { font-size: 18px; font-weight: 700; color: #111; } .ck-summary-total-amount { font-size: 18px; font-weight: 700; color: var(--color-coral, #ff6d4f); } /* Step 4 only — "N tickets • buyer@email.com" line inside the cart * card, beneath the items list. */ .ck-summary-meta { font-size: 14px; color: #696969; margin: 14px 0 0; padding: 0; } /* Phase 43 — both elements use Tailwind utilities (`flex`, etc.) * inline on the view, which beats the browser-default * `[hidden] { display: none }` rule and was leaking the SSL note * onto Step 2 / Step 3. Force-hide via attribute selector. */ #ck-summary-ssl[hidden], #ck-summary-meta[hidden] { display: none !important; } /* Phase 44 — chevron-down (rotated -90°) lives inside the CTA so it * can be a real rather than a CSS glyph. Hide by default; show * only when the CTA host carries `.is-step3` (the "Your Details" * step). Matches both the original and the inlined the * site-wide svg-icon inliner produces from it. */ #ck-summary-cta .ck-cta-chevron { display: none; } #ck-summary-cta.is-step3 .ck-cta-chevron { display: inline-block; } /* The standalone close X sits relative to the modal body content * since the standard header is hidden on this view. Keep its z-index * above the lock badge so it's always tappable. */ .ck-gate-close { z-index: 2; } /* Strip form-card chrome from the form (same trick used in Step 3 * + Step 4 forms — `fields-section` only contributes spacing). */ .ck-gate-form { padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; } .ck-step3-form { padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; } .ck-field-row { display: grid; grid-template-columns: 1fr; gap: 22px; align-self: stretch; margin-bottom: 30px; } @media (min-width: 640px) { .ck-field-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 650px) { .ck-field-row { margin-bottom: 20px; } } .ck-field-row .field-group:not(:last-child) { margin-bottom: 0; } /* Email icon adornment */ .ck-input-icon-wrap { position: relative; display: block; } .ck-input-icon { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; } .ck-select-input { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 36px !important; background-image: none; box-shadow: none !important; } /* Helper text under an input — matches the muted style used in the * Figma reference ("Tickets will be sent to this email"). */ .ck-field-helper { font-size: 14px; color: #696969; margin: 6px 0 0; } /* ── Step 4 — Payment (Phase 35) ─────────────────────────── */ .ck-step4-form { padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; } .ck-stripe-field { min-height: 42px; padding: 11.5px 14px !important; display: flex; align-items: center; background: #fff; cursor: text; } .ck-stripe-field > * { width: 100%; } .ck-stripe-field.StripeElement--focus { border-color: var(--color-input-focus, #ff6d4f) !important; outline: none; } .ck-stripe-field.StripeElement--invalid { border-color: var(--color-danger, #dc2626) !important; } .ck-input.is-invalid { border-color: var(--color-danger); } .ck-stripe-field { min-height: 44px; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ck-stripe-field.StripeElement--focus { border-color: var(--color-coral, #ff6d4f); } .ck-stripe-field.StripeElement--invalid { border-color: var(--color-danger); } .ck-summary-cta.is-busy { opacity: 0.85; cursor: wait; } /* ── Phase 10 polish ──────────────────────────────────────── */ /* .ck-ticket-meta / .ck-ticket-meta-item — Phase 28 converted to Tailwind utility classes inline on _step2_tickets.php. */ .ck-ticket-required-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; background: #fee2e2; color: var(--color-danger); font-size: 12px; font-weight: 500; text-transform: uppercase; } .ck-ticket-card.is-missing-required { border-color: var(--color-danger) !important; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15); background: #fef2f2; } .ck-inline-error { margin: 0 0 14px; padding: 12px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; color: var(--color-danger); font-size: 14px; font-weight: 400; } .ck-seatsio-chart { position: relative; width: 100%; height: 418px; min-height: 418px; border: 1px solid #e5e7eb; border-radius: 12px; background: #f9fafb; overflow: hidden; } @media (max-width: 640px) { .ck-seatsio-chart { height: 418px; } } .ck-seatsio-loading { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: -418px; height: 418px; color: #6b7280; font-weight: 600; pointer-events: none; } .ck-seatsio-spinner { width: 18px; height: 18px; border: 2.5px solid #e5e7eb; border-top-color: var(--color-coral, #ff6d4f); border-radius: 50%; animation: ckSpin 0.8s linear infinite; } @keyframes ckSpin { to { transform: rotate(360deg); } } .ck-promo-feedback { margin: 6px 0 0; font-size: 14px; } .ck-promo-feedback.is-err { color: var(--color-danger); } .ck-promo-feedback.is-ok { color: var(--color-success); } .ck-summary-divider { height: 1px; margin: 4px 0 6px; background: linear-gradient(90deg, transparent 0%, #ff7f6e 30%, #f97316 70%, transparent 100%); } .spinner-box { position: relative; width: 180px; height: 180px; } .spinner-bar { position: absolute; width: 41.24px; height: 2px; border-radius: 4px; left: 20.2px; top: 99px; transform-origin: 79.8px 50%; } .dark-pipe { background: #4c5863; } .blue-pipe { background: var(--color-indigo); } .pink-pipe { background: var(--color-coral); } /* ── DARK keyframes ─────────────────────────────────── */ @keyframes d1 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.672, 0.13, 0.833, 1); transform: rotate(450deg); } 100% { transform: rotate(450deg); } } @keyframes d2 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.672, 0.13, 0.833, 1); transform: rotate(390deg); } 100% { transform: rotate(450deg); } } @keyframes d3 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.672, 0.065, 0.833, 1); transform: rotate(330deg); } 100% { transform: rotate(450deg); } } @keyframes d4 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.672, 0.043, 0.833, 1); transform: rotate(270deg); } 100% { transform: rotate(450deg); } } @keyframes d5 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.672, 0.032, 0.833, 1); transform: rotate(210deg); } 100% { transform: rotate(450deg); } } @keyframes d6 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.672, 0.026, 0.833, 1); transform: rotate(150deg); } 100% { transform: rotate(450deg); } } /* ── BLUE keyframes ─────────────────────────────────── */ @keyframes b1 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.449, 0.061, 0.833, 1); transform: rotate(450deg); } 100% { transform: rotate(450deg); } } @keyframes b2 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.449, 0.061, 0.833, 1); transform: rotate(390deg); } 100% { transform: rotate(450deg); } } @keyframes b3 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.449, 0.031, 0.833, 1); transform: rotate(330deg); } 100% { transform: rotate(450deg); } } @keyframes b4 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.449, 0.02, 0.833, 1); transform: rotate(270deg); } 100% { transform: rotate(450deg); } } @keyframes b5 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.449, 0.015, 0.833, 1); transform: rotate(210deg); } 100% { transform: rotate(450deg); } } @keyframes b6 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.449, 0.012, 0.833, 1); transform: rotate(150deg); } 100% { transform: rotate(450deg); } } /* ── PINK keyframes ─────────────────────────────────── */ @keyframes p1 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.757, 0.294, 0.833, 1); transform: rotate(450deg); } 100% { transform: rotate(450deg); } } @keyframes p2 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.757, 0.294, 0.833, 1); transform: rotate(390deg); } 100% { transform: rotate(450deg); } } @keyframes p3 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.757, 0.147, 0.833, 1); transform: rotate(330deg); } 100% { transform: rotate(450deg); } } @keyframes p4 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.757, 0.098, 0.833, 1); transform: rotate(270deg); } 100% { transform: rotate(450deg); } } @keyframes p5 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.757, 0.073, 0.833, 1); transform: rotate(210deg); } 100% { transform: rotate(450deg); } } @keyframes p6 { 0% { animation-timing-function: cubic-bezier(0.333, 0, 0.833, 1); transform: rotate(90deg); } 52.11% { animation-timing-function: cubic-bezier(0.757, 0.059, 0.833, 1); transform: rotate(150deg); } 100% { transform: rotate(450deg); } } /* ── Assign animations (duration = 71/24 = 2.9583s) ── */ .d1 { animation: d1 2.9583s infinite; } .d2 { animation: d2 2.9583s infinite; } .d3 { animation: d3 2.9583s infinite; } .d4 { animation: d4 2.9583s infinite; } .d5 { animation: d5 2.9583s infinite; } .d6 { animation: d6 2.9583s infinite; } .b1 { animation: b1 2.9583s infinite; } .b2 { animation: b2 2.9583s infinite; } .b3 { animation: b3 2.9583s infinite; } .b4 { animation: b4 2.9583s infinite; } .b5 { animation: b5 2.9583s infinite; } .b6 { animation: b6 2.9583s infinite; } .p1 { animation: p1 2.9583s infinite; } .p2 { animation: p2 2.9583s infinite; } .p3 { animation: p3 2.9583s infinite; } .p4 { animation: p4 2.9583s infinite; } .p5 { animation: p5 2.9583s infinite; } .p6 { animation: p6 2.9583s infinite; } .scene { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem 2rem; user-select: none; } .anim-wrap { position: relative; width: 200px; height: 200px; } /* Ripple rings */ .ring-rip { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(209, 209, 209, 0.85); animation: ripple 2s cubic-bezier(0.2, 0, 0.4, 1) infinite; opacity: 0; } .ring-rip:nth-child(1) { animation-delay: 0s; } .ring-rip:nth-child(2) { animation-delay: 0.32s; } .ring-rip:nth-child(3) { animation-delay: 0.65s; } .ring-rip:nth-child(4) { animation-delay: 0.97s; } .ring-rip:nth-child(5) { animation-delay: 1.29s; } .ring-rip:nth-child(6) { animation-delay: 1.61s; } @keyframes ripple { 0% { transform: scale(0.18); opacity: 0; } 28% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } /* Magnifying glass orbit wrapper */ .glass-wrap { position: absolute; inset: 0; animation: orbit 3.95s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @keyframes orbit { 0% { transform: translate(0px, -15px); } 32% { transform: translate(15px, 0px); } 50% { transform: translate(0px, 15px); } 68% { transform: translate(-15px, 0px); } 100% { transform: translate(0px, -15px); } } /* Magnifying glass centered inside wrapper */ .glass-svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .sidebar-wrapper { width: 195px; position: absolute; top: 0; left: 96px; border-radius: var(--radius-lrg); background: rgba(255, 255, 255, 0.9); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 20px; gap: 3px; } @media (max-width: 1024px) { .sidebar-wrapper { left: 24px; } } @media (max-width: 768px) { .sidebar-wrapper { /* Switch to horizontal scrollable top bar */ position: static; width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 12px 16px; gap: 6px; border-radius: var(--radius-lrg); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 20px; } .sidebar-wrapper::-webkit-scrollbar { display: none; } } :lang(fr) .sidebar-wrapper { width: 210px; left: 86px; } @media (max-width: 1024px) { :lang(fr) .sidebar-wrapper { left: 20px; } } @media (max-width: 768px) { :lang(fr) .sidebar-wrapper { width: auto; } } .sidebar-step { width: 100%; max-width: 156px; border: none; border-radius: var(--radius-lrg); cursor: pointer; text-align: left; transition: opacity 0.2s, border-color 0.2s; } .sidebar-step-active { padding: 12px 18px; background: linear-gradient(90deg, #ff6d4f 0%, #7b7ee7 100%); } .sidebar-step-active:hover { opacity: 0.9; } @media (max-width: 768px) { .sidebar-step-active { padding: 8px 14px; } } .sidebar-step-inactive { padding: 12px 18px; background: #fff; border: 1px solid var(--color-disabled) !important; } @media (max-width: 768px) { .sidebar-step-inactive { padding: 8px 14px; } } .sidebar-step-inactive:hover { border-color: #b3b3b3 !important; } .sidebar-step-completed { padding: 12px 18px; background: #fff; border: 1px solid var(--color-success) !important; font-weight: 500; } @media (max-width: 768px) { .sidebar-step-completed { padding: 8px 14px; } } .sidebar-step-incomplete { padding: 12px 18px; background: #fff; border: 1px solid var(--color-danger) !important; font-weight: 500; } @media (max-width: 768px) { .sidebar-step-incomplete { padding: 8px 14px; } } @media (max-width: 768px) { .sidebar-step { width: auto; max-width: none; flex-shrink: 0; scroll-snap-align: start; white-space: nowrap; } } :lang(fr) .sidebar-step { max-width: 170px; } .content-area { align-self: stretch; position: relative; z-index: 9; flex-shrink: 0; padding-bottom: 170px; } @media (max-width: 768px) { .content-area { padding-bottom: 80px; } } .main-content { display: flex; flex-direction: column; align-items: flex-end; gap: 30px; padding-left: 335px; padding-right: 6rem; padding-top: 0; text-align: left; font-size: 14px; color: #000; } @media (max-width: 1024px) { .main-content { padding-left: 240px; padding-right: 24px; } } @media (max-width: 768px) { .main-content { padding-left: 0; padding-right: 0; gap: 16px; align-items: stretch; } } .form-card { align-self: stretch; border-radius: var(--radius-lrg); background: rgba(255, 255, 255, 0.9); overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 24px 42px 3rem; } @media (max-width: 768px) { .form-card { padding: 20px 20px 2rem; } } @media (max-width: 650px) { .form-card { padding: 18px 18px 1.5rem; } } .form-title { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 32px; } @media (max-width: 650px) { .form-title { gap: 0.875rem; margin-bottom: 2rem; } } .form-title .title-text { margin: 0; font-size: 22px; font-weight: 600; color: #000000; } @media (max-width: 650px) { .form-title .title-text { font-size: 1.5rem; } } .form-title .title-brief { align-self: stretch; margin: 0; font-size: 1rem; line-height: 1.5rem; color: #474747; text-align: center; } .form-input { align-self: stretch; width: 100%; border-radius: 8px !important; background: #fff; border: 1px solid var(--color-dim-gray); padding: 11.5px 14px !important; color: black; font-size: 14px !important; transition: border-color 0.2s, box-shadow 0.2s; } .form-input::placeholder { color: var(--color-dim-gray); opacity: 0.7; } .form-input:hover:not(:focus) { border-color: black !important; } .form-input:focus { border-color: var(--color-input-focus) !important; outline: none; } .form-input.is-error { border-color: var(--color-danger) !important; } .form-textarea { align-self: stretch; width: 100%; border-radius: 8px !important; background: #fff; border: 1px solid var(--color-dim-gray); padding: 17px 14px !important; color: black; font-size: 14px !important; min-height: 110px; resize: vertical; transition: border-color 0.2s, box-shadow 0.2s; } .form-textarea::placeholder { color: var(--color-dim-gray); opacity: 0.7; } .form-textarea:hover:not(:focus) { border-color: black !important; } .form-textarea:focus { border-color: var(--color-coral) !important; outline: none; } .form-textarea.is-error { border-color: var(--color-danger) !important; } .form-radio-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; border-radius: 0.5rem; border: 1px solid var(--color-pink); background-color: rgba(255, 22, 111, 0.08); cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--color-pink); transition: all 0.2s ease-in-out; } .form-radio-btn > span:first-of-type { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--color-pink); background-color: white; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease-in-out; background-image: url("../../public/themes/advanced/svgs/tick.svg"); background-size: 10px 10px; background-repeat: no-repeat; background-position: center; } .form-radio-btn > span:first-of-type.active { background-color: var(--color-pink); } .form-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; background-color: #f9f9f9; border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 1rem 1.25rem; } .form-toggle-content { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 0.375rem; } .form-toggle-title { margin: 0; font-size: 16px; font-weight: 500; color: #000; } .form-toggle-desc { margin: 0; font-size: 14px; color: var(--color-dim-gray); } .form-toggle-label { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; } .form-toggle-label input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .form-toggle-label .toggle-track { width: 41px; height: 21px; border-radius: 100px; background: var(--color-disabled); position: relative; transition: background 0.25s ease; overflow: hidden; } .form-toggle-label .toggle-thiumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; position: absolute; top: 3px; left: 3px; transition: transform 0.25s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transform: translateX(0); } .form-toggle-label .toggle-thiumb::before { content: "|"; position: absolute; top: 0; left: -20px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 500; color: #fff; } .form-toggle-label .toggle-thiumb::after { content: "o"; position: absolute; top: 0; left: 20px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: #b2b2b2; } .form-toggle-label input:checked + .toggle-track { background: #1acd1a; } .form-toggle-label input:checked + .toggle-track .toggle-thiumb { transform: translateX(20px); } .form-toggle-label input:focus-visible + .toggle-track { outline: 2px solid var(--color-coral); outline-offset: 2px; } .form-toggle-label input:disabled + .toggle-track { background: #d1d5db; } .form-toggle-label input:disabled + .toggle-track .toggle-thiumb { background: #f3f3f3; box-shadow: none; } .form-toggle-label:has(input:disabled) { cursor: not-allowed; opacity: 0.6; } .form-toggle-label:has(input:disabled):hover .toggle-track { background: #d1d5db; } .form-toggle-label:hover:not(:has(input:disabled)) .toggle-track { filter: brightness(0.97); } .form-radio-label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 0.5rem; border: 1px solid var(--color-pink); background: rgba(255, 22, 111, 0.08); cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--color-pink); transition: all 0.2s ease-in-out; user-select: none; } @media (max-width: 768px) { .form-radio-label { font-size: 14px; padding: 8px 10px; } } .form-radio-label input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .form-radio-label .form-radio-dot { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--color-pink); background-color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease-in-out; background-image: url("../../public/themes/advanced/svgs/tick.svg"); background-size: 10px 10px; background-repeat: no-repeat; background-position: center; } .form-radio-label input[type=radio]:checked ~ .form-radio-dot { background-color: var(--color-pink); } .form-radio-label:has(input[type=radio]:checked) { border-color: var(--color-pink); background-color: rgba(255, 22, 111, 0.15); } .form-radio-label:has(input[type=radio]:focus-visible) { outline: 1px solid var(--color-pink); outline-offset: 2px; } .form-radio-label:hover { background-color: rgba(255, 22, 111, 0.12); } .form-radio-label:has(input[type=radio]:disabled) { cursor: not-allowed; } .fields-section { width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; } .fields-section:not(:last-child) { margin-bottom: 30px; } @media (max-width: 650px) { .fields-section:not(:last-child) { margin-bottom: 20px; } } .field-group { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; } .field-group > *:nth-child(2) { margin-top: 10px; } .field-group:not(:last-child) { margin-bottom: 30px; } @media (max-width: 650px) { .field-group > *:nth-child(2) { margin-top: 8px; } .field-group:not(:last-child) { margin-bottom: 20px; } } .field-error { color: var(--color-danger); font-size: 14px; margin: 0; } .highlight-btn { cursor: pointer; border: 1px solid var(--color-disabled); padding: 16.5px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 13.3px; display: flex; gap: 7px; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; min-width: 100px; min-height: 76px; width: 110px; transition: border-color 0.2s, background-color 0.2s; } @media (max-width: 650px) { .highlight-btn { min-width: 80px; width: calc(33.33% - 14px); padding: 12px 6px; } } .highlight-btn:hover { border-color: var(--color-indigo) !important; } .highlight-btn-active, .highlight-btn[aria-pressed=true] { border-color: var(--color-indigo) !important; background-color: var(--color-indigo-light) !important; color: var(--color-indigo) !important; } .venue-type-card-active, .venue-type-card[aria-pressed=true] { border-color: var(--color-coral) !important; background-color: var(--color-coral-light) !important; } .category-btn { cursor: pointer; border: 1px solid var(--color-disabled); padding: 16.5px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 13.3px; display: flex; gap: 7px; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; min-width: 100px; width: 110px; transition: border-color 0.2s, background-color 0.2s; } @media (max-width: 650px) { .category-btn { min-width: 80px; width: calc(33.33% - 14px); padding: 12px 6px; } } .category-btn:hover { border-color: var(--color-coral) !important; } .category-btn-active, .category-btn[aria-pressed=true] { border-color: var(--color-coral) !important; background-color: var(--color-coral-light) !important; color: var(--color-coral) !important; } .subcategory-btn { cursor: pointer; border: 1px solid var(--color-disabled); padding: 16.5px 24.9px; background: rgba(255, 255, 255, 0.8); border-radius: 13.3px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; min-width: 83px; width: 110px; transition: border-color 0.2s, background-color 0.2s; } @media (max-width: 650px) { .subcategory-btn { min-width: 70px; width: calc(33.33% - 14px); padding: 12px 8px; } } .subcategory-btn:hover { border-color: var(--color-indigo) !important; } .subcategory-btn-active, .subcategory-btn[aria-pressed=true] { border-color: var(--color-indigo) !important; background-color: var(--color-indigo-light) !important; } .input-select { appearance: none; -webkit-appearance: none; width: 100%; background: #fff; cursor: pointer; border: 1px solid var(--color-dim-gray); border-radius: 8px; padding: 13px 42px 13px 13px; font-family: inherit; font-size: 14px !important; color: black; transition: border-color 0.2s, box-shadow 0.2s; } .input-select:hover:not(:focus) { border-color: black; } .input-select:focus { border-color: var(--color-coral); outline: none; box-shadow: none; } .input-select.is-error { border-color: var(--color-danger) !important; box-shadow: 0 0 0 2px rgba(255, 27, 51, 0.15); } @media (max-width: 768px) { .recurrence-card { min-width: 80px; padding: 14px 12px; } } .recurrence-card-active { border-color: var(--color-coral) !important; background: rgba(253, 236, 230, 0.6) !important; } .recurrence-radio-active { background-color: var(--color-coral); } .recurrence-label-active { color: var(--color-coral) !important; font-weight: 500 !important; } .recurrence-label-white { color: #fff !important; font-weight: 500 !important; } .dt-picker-input { width: 100%; background: #fff; cursor: pointer; border: 1px solid var(--color-dim-gray); border-radius: 8px; padding: 11.5px 42px 11.5px 14px !important; font-family: inherit; font-size: 14px; color: var(--color-dim-gray); transition: border-color 0.2s, box-shadow 0.2s; } .dt-picker-input::placeholder { color: var(--color-dim-gray); opacity: 0.7; } .dt-picker-input:hover:not(:focus) { border-color: black; } .dt-picker-input:focus { border-color: var(--color-coral) !important; outline: none; } .dt-picker-input.is-error { border-color: var(--color-danger) !important; } .flatpickr-wrapper { display: block; width: 100%; } .flatpickr-calendar { border-radius: 12px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04); border: 1px solid #e8e8ef; background: #ffffff; font-family: inherit; font-size: 13.5px; padding: 0; overflow: hidden; } .flatpickr-calendar::before, .flatpickr-calendar::after { border-bottom-color: #e8e8ef; } .flatpickr-calendar .flatpickr-months { background: linear-gradient(135deg, #e1386f 0%, rgb(208.7327510917, 31.4672489083, 89.1572052402) 100%); border-bottom: none; align-items: center; height: 50px; padding: 0; } .flatpickr-calendar .flatpickr-months .flatpickr-month { background: transparent; height: 50px; display: flex; align-items: center; } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month, .flatpickr-calendar .flatpickr-months .flatpickr-next-month { color: #fff; fill: #fff; padding: 10px 14px; display: flex; align-items: center; height: 50px; transition: background 0.2s ease; } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg, .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; fill: #fff; } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover { background: rgba(255, 255, 255, 0.15); } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg { fill: #fff; } .flatpickr-calendar .flatpickr-months .flatpickr-current-month { color: #fff; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; padding-top: 0; height: 50px; display: flex; align-items: center; justify-content: center; } .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper input { color: #fff; font-weight: 600; } .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span.arrowUp::after { border-bottom-color: rgba(255, 255, 255, 0.7); } .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: rgba(255, 255, 255, 0.7); } .flatpickr-calendar .flatpickr-months .flatpickr-current-month select.flatpickr-monthDropdown-months { color: #fff; background: transparent; font-weight: 600; -webkit-appearance: none; } .flatpickr-calendar .flatpickr-months .flatpickr-current-month select.flatpickr-monthDropdown-months option { color: #2d2d3a; background: #ffffff; } .flatpickr-calendar .flatpickr-weekdays { background: #fafafe; height: 32px; display: flex; align-items: center; padding: 0; } .flatpickr-calendar .flatpickr-weekdays .flatpickr-weekdaycontainer { display: flex; align-items: center; } .flatpickr-calendar .flatpickr-weekdays .flatpickr-weekday { color: #8a8a9a; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 32px; } .flatpickr-calendar .flatpickr-innerContainer { padding: 0; } .flatpickr-calendar .dayContainer { padding: 0; min-width: auto; max-width: none; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; } .flatpickr-calendar .flatpickr-day { box-sizing: border-box; border-radius: 8px; color: #2d2d3a; font-weight: 500; font-size: 13px; height: 36px; line-height: 36px; max-width: 40px; flex-basis: 14.285%; margin: 1px 0; border: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; text-align: center; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .flatpickr-calendar .flatpickr-day.today { border-color: #29abe2; color: #29abe2; background: rgba(41, 171, 226, 0.08); font-weight: 600; } .flatpickr-calendar .flatpickr-day.today:hover { background: #29abe2; border-color: #29abe2; color: #fff; } .flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.endRange { background: #e1386f; border-color: #e1386f; color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(225, 56, 111, 0.3); } .flatpickr-calendar .flatpickr-day.selected:hover, .flatpickr-calendar .flatpickr-day.startRange:hover, .flatpickr-calendar .flatpickr-day.endRange:hover { background: rgb(217.5965065502, 32.8034934498, 92.943231441); border-color: rgb(217.5965065502, 32.8034934498, 92.943231441); } .flatpickr-calendar .flatpickr-day.inRange { background: rgba(225, 56, 111, 0.08); border-color: transparent; box-shadow: -5px 0 0 rgba(225, 56, 111, 0.08), 5px 0 0 rgba(225, 56, 111, 0.08); color: #e1386f; } .flatpickr-calendar .flatpickr-day:hover:not(.selected):not(.startRange):not(.endRange):not(.today):not(.disabled) { background: rgba(225, 56, 111, 0.08); border-color: rgba(225, 56, 111, 0.15); color: #e1386f; } .flatpickr-calendar .flatpickr-day.flatpickr-disabled, .flatpickr-calendar .flatpickr-day.prevMonthDay, .flatpickr-calendar .flatpickr-day.nextMonthDay { color: rgb(207.9384615385, 207.9384615385, 222.2615384615); } .flatpickr-calendar .flatpickr-day.flatpickr-disabled { text-decoration: none; } .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover { background: transparent; border-color: transparent; cursor: not-allowed; } .flatpickr-time { border-top: 1px solid #e8e8ef; padding: 0; } .flatpickr-time input.flatpickr-hour, .flatpickr-time input.flatpickr-minute { color: #2d2d3a; font-family: inherit; font-weight: 500; font-size: 14px; } .flatpickr-time input.flatpickr-hour:hover, .flatpickr-time input.flatpickr-minute:hover { background: rgba(225, 56, 111, 0.08); } .flatpickr-time input.flatpickr-hour:focus, .flatpickr-time input.flatpickr-minute:focus { background: rgba(225, 56, 111, 0.08); outline: none; } .flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: #8a8a9a; } .flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: #8a8a9a; } .flatpickr-time .numInputWrapper span:hover::after { border-bottom-color: #e1386f; border-top-color: #e1386f; } .flatpickr-time .flatpickr-time-separator { color: #8a8a9a; font-weight: 600; } .flatpickr-time .flatpickr-am-pm { color: #2d2d3a; font-weight: 600; font-size: 12px; } .flatpickr-time .flatpickr-am-pm:hover { background: rgba(225, 56, 111, 0.08); color: #e1386f; } @media (max-width: 768px) { .dt-row { flex-direction: column; gap: 16px; } } .dt-custom-row, .sio-cat-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; position: relative; } .dt-custom-row .dt-custom-action, .sio-cat-row .dt-custom-action { position: absolute; right: -42px; bottom: 0px; } @media (max-width: 1280px) { .dt-custom-row .dt-custom-action, .sio-cat-row .dt-custom-action { position: static; grid-column: 1; grid-row: auto; justify-self: start; } } @media (max-width: 1280px) { .dt-custom-row, .sio-cat-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .dt-custom-row .dt-custom-col:first-child, .sio-cat-row .dt-custom-col:first-child { grid-column: 1/-1; } } @media (max-width: 650px) { .dt-custom-row, .sio-cat-row { grid-template-columns: 1fr; } .dt-custom-row .dt-custom-col:first-child, .sio-cat-row .dt-custom-col:first-child { grid-column: 1; } } .dt-single-date-col { max-width: calc(50% - 15px); } @media (max-width: 650px) { .venue-card { min-width: 80px !important; width: calc(33.33% - 6px) !important; padding: 12px 6px !important; } } .venue-card-active { border-color: var(--color-coral) !important; background: rgba(253, 236, 230, 0.6) !important; } .venue-map .leaflet-marker-icon { height: 24px !important; width: 24px !important; background-image: url("../../public/themes/advanced/svgs/location.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .venue-map .map-pulse { display: none; } .tk-layout-select-with-unselect { padding-right: 110px !important; } @media (max-width: 650px) { .tk-layout-select-with-unselect { padding-right: 60px !important; } } .tk-unselect-btn { position: absolute; right: 74px; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: auto; } @media (max-width: 650px) { .tk-unselect-btn { right: 50px; } } .tk-unselect-btn:hover { opacity: 0.7; } .tk-type-btn { width: 100%; font-size: 18px; font-weight: 600; cursor: pointer; white-space: nowrap; border-radius: var(--radius-mid); gap: 12px; } @media (max-width: 1024px) { .tk-type-btn { font-size: 16px; gap: 8px; } } @media (max-width: 768px) { .tk-type-btn { font-size: 14px; } } @media (max-width: 650px) { .tk-type-btn { gap: 4px; font-size: 13px; } } .tk-type-btn.tk-type-free { background: rgba(52, 168, 83, 0.08); color: var(--color-success); border: 1px solid var(--color-success); } .tk-type-btn.tk-type-free:hover { background: rgba(52, 168, 83, 0.16); } .tk-type-btn.tk-type-paid { background: var(--color-coral-light); color: var(--color-coral); border: 1px solid var(--color-coral); } .tk-type-btn.tk-type-paid:hover { background: var(--color-coral-light-hover); } .tk-type-btn.tk-type-donation { color: var(--color-indigo); border: 1px solid var(--color-indigo); background: var(--color-indigo-light); } .tk-type-btn.tk-type-donation:hover { background: var(--color-indigo-light-hover); } @media (max-width: 768px) { .tk-service-fee-btn, .tk-fee-pref-btn { font-size: 12px; padding: 8px 10px; } } @media (max-width: 768px) { :lang(fr) .tk-type-icon { display: none; } } .recurring-radio-label { min-height: 62px; background-color: white; border-color: var(--color-disabled); border-radius: 14px; justify-content: center; color: black; } .recurring-radio-label input[type=radio]:checked ~ .recurring-radio-dot { background-color: var(--color-coral); } .recurring-radio-label:has(input[type=radio]:checked) { border-color: var(--color-coral); background-color: var(--color-coral-light); color: var(--color-coral); } .recurring-radio-label:has(input[type=radio]:focus-visible) { outline: 1px solid var(--color-coral); outline-offset: 2px; } .recurring-radio-label:hover { background-color: var(--color-coral-light-hover); border-color: var(--color-coral-light); } .recurring-radio-dot { height: 20px !important; width: 20px !important; border-color: var(--color-coral) !important; background-size: 12px 10px !important; } .auth-left-bg { background-size: cover; background-position: center; } .auth-left-bg::before { content: ""; position: absolute; inset: 0; background-color: #000; background: linear-gradient(180deg, #f7f7f7 -58.27%, #000000 50.39%); backdrop-filter: blur(500px); opacity: 0.6; z-index: 1; } .auth-left-bg::after { content: ""; position: absolute; inset: 0; background-color: #000; backdrop-filter: blur(500px); opacity: 0.5; z-index: 2; } .login-bg { background-image: url("../../public/themes/advanced/images/login-bg.png"); } .signup-bg { background-image: url("../../public/themes/advanced/images/signup-bg.png"); } .forgot-password-bg { background-image: url("../../public/themes/advanced/images/forgot-password-bg.png"); } .auth-modal-box { min-height: 380px; } @media (max-width: 768px) { .auth-modal-box { flex-direction: column; max-height: 95vh; overflow-y: auto; } } .auth-input-wrapper { position: relative; border: 1px solid black; box-shadow: none !important; } .auth-input-wrapper input { border: none; outline: none; background: transparent; line-height: 20px !important; } .auth-input-wrapper input:focus + label, .auth-input-wrapper input:not(:placeholder-shown) + label { transform: translateY(-150%); opacity: 0; } .auth-input-wrapper input:-webkit-autofill, .auth-input-wrapper input:-webkit-autofill:hover, .auth-input-wrapper input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px white inset !important; box-shadow: 0 0 0px 1000px white inset !important; -webkit-text-fill-color: #000 !important; transition: background-color 9999s ease-in-out 0s; } .auth-input-wrapper:focus-within { border-color: var(--color-input-focus); } .auth-input-wrapper.border-danger { border-color: var(--color-danger); } .auth-input-wrapper label { position: absolute; left: 50px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #696969; pointer-events: none; transition: all 0.3s ease; } .auth-input-wrapper label span { color: var(--color-danger); } .auth-social-icon { height: 36px; width: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background-color: #f7f7f7; transition: all ease-in 0.2s; } .auth-social-icon img { transition: all ease-in 0.2s; } .auth-social-icon:hover img { filter: invert(1) brightness(100) !important; } /* Reset-password security-requirements bullets. Default = empty grey ring. `.is-met` = filled green check. */ #reset-pw-requirements .rule-bullet { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 109, 79, 0.2); flex-shrink: 0; transition: background 0.15s ease, border-color 0.15s ease; } #reset-pw-requirements .rule-row.is-met .rule-bullet { background: #1FB85B; border-color: #1FB85B; } #reset-pw-requirements .rule-row.is-met .rule-bullet::after { content: ""; display: block; width: 7px; height: 4px; border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(-45deg) translate(0px, -1px); } #reset-pw-requirements .rule-text { line-height: 1.2; text-transform: capitalize; } .event-details-wrapper { background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; height: auto; width: 100%; position: relative; } .event-details-wrapper::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 68.74%); pointer-events: none; } @media (max-width: 768px) { .event-details-wrapper::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.9) 85%); } } @media (max-width: 1024px) { .event-details-wrapper { background-position: center; } } @media (max-height: 700px) { .event-details-hero-section { min-height: 768px !important; } } .event-details-gradient-title { font-weight: 600; font-size: 58px; letter-spacing: 0; font-style: italic; background: linear-gradient(90deg, var(--color-coral) 10%, var(--color-indigo) 50%, var(--color-coral) 90%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientFlow 10s linear infinite; } @media (max-width: 1024px) { .event-details-gradient-title { font-size: 36px !important; } } @media (max-width: 768px) { .event-details-gradient-title { font-size: 28px !important; line-height: 1.2; } } @media (max-width: 650px) { .event-details-gradient-title { font-size: 24px !important; } } .event-details-subheading { display: flex; align-items: center; gap: 8px; font-size: 20px; text-transform: uppercase; font-weight: 700; margin-bottom: 28px; } .event-details-subheading::before { content: ""; width: 3px; height: 20px; background: var(--color-coral); } .event-details-faq-item:not(:last-child)::after { content: ""; position: absolute; bottom: -20px; left: 50%; transform: translate(-50%); width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #bdbdbd, #bdbdbd, transparent); } .event-details-heightlight-card { border-radius: 14px; border: 1px solid var(--color-disabled); transition: all 0.3s ease; } .event-details-heightlight-card:hover { background-color: rgba(255, 255, 255, 0.5); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .event-details-map .map-pulse { background-image: url("../../public/themes/advanced/svgs/location-point.svg"); background-repeat: no-repeat; background-size: 14px 14px; background-position: center; } .event-details-map .map-pulse::before, .event-details-map .map-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: inherit; animation: pulse 2s infinite; opacity: 0.6; } .event-details-map .map-pulse::after { animation-delay: 1s; } .event-details-map-overlay { backdrop-filter: blur(1px); background: linear-gradient(180.49deg, rgba(0, 0, 0, 0) 14.65%, rgba(0, 0, 0, 0.9) 105.23%); } .dotted-divider { background-image: url("../../public/themes/advanced/images/divider.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } .vertical-dotted-divider { background-image: url("../../public/themes/advanced/images/vertical-divider.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } .dotted-divider-wide { background-image: url("../../public/themes/advanced/images/ticket-horizontal.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } .calendar-bg { background-image: url("../../public/themes/advanced/svgs/day.svg"); background-repeat: no-repeat; background-position: center; background-size: 56px; } @media (max-width: 768px) { .calendar-bg { background-size: 46px; } } .avatar-ring { display: block; width: 82px; height: 82px; border-radius: 50%; background: linear-gradient(135deg, #ff6b57, #7a6cf6); padding: 2px; } .avatar-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: white; } .view-toggle { width: 90px; height: 48px; display: flex; align-items: center; justify-content: center; position: relative; } .view-toggle .view-btn { width: 40px; height: 48px; z-index: 2; border-radius: 6.86px; display: flex; align-items: center; justify-content: center; color: #6d6d78; transition: color 0.3s ease; background: transparent; border: none; cursor: pointer; } .view-toggle .view-btn.active { color: white; } .view-toggle .toggle-glider { position: absolute; top: 7px; left: 8px; width: 32px; height: 32px; background: var(--color-coral); border-radius: 6.86px; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } .view-toggle.list-active .toggle-glider { transform: translateX(40px); } #filterBackdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } #filterBackdrop.is-open { opacity: 1; pointer-events: all; } #filterPanel { transition: transform 0.3s ease; } @media (max-width: 1023px) { #filterPanel { position: fixed; top: 0; left: 0; height: 100%; width: 280px; z-index: 9999; overflow-y: auto; transform: translateX(-100%); } } #filterPanel.is-open { transform: translateX(0); } body.drawer-open { overflow: hidden; } .list-view-event-card .left-section { background: rgba(255, 255, 255, 0.8); } .list-view-event-card .right-section { background: rgba(255, 255, 255, 0.8); } .active-filter-chip { transition: opacity 0.15s ease; } .active-filter-chip:hover { opacity: 0.85; } .me-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; background-color: #FFFFFF; height: 36px; border-radius: 10px; transition: all 0.2s ease; } .icon-dimGray { color: var(--color-dim-gray); } .icon-dimGray:hover { background-color: var(--color-dim-gray); color: white; } .icon-indigo { color: var(--color-indigo); } .icon-indigo:hover { background-color: var(--color-indigo); color: white; } .icon-coral { color: var(--color-coral); } .icon-coral:hover { background-color: var(--color-coral); color: white; } .icon-pink { color: var(--color-pink); } .icon-pink:hover { background-color: var(--color-pink); } .icon-pink:hover svg path { stroke: white; fill: white; } .icon-danger { color: var(--color-danger); } .icon-danger:hover { background-color: var(--color-danger); color: white; } .icon-success { color: var(--color-success); } .icon-success:hover { background-color: var(--color-success); color: white; } .icon-dark { color: black; } .icon-dark:hover { background-color: black; color: white; } .icon-dark-red { color: #C60101; } .icon-dark-red:hover { background-color: #C60101; color: white; } .me-tab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 16px; border-radius: 8px; height: 32px; width: 166px; border: 1px solid; background: white; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; border-color: var(--color-success); color: var(--color-success); } @media (max-width: 650px) { .me-tab-btn { width: 140px; } } .me-tab-btn .me-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0; border-radius: 50%; font-size: 10px; font-weight: 700; background: var(--color-success); color: white; } .me-tab-btn.active { background: var(--color-success); border-color: var(--color-success); color: white; font-weight: 600; } .me-tab-btn.active .me-tab-count { background: white; color: var(--color-success); } .me-tab-btn--draft { border-color: #F59E0B; color: #F59E0B; } .me-tab-btn--draft .me-tab-count { background: #F59E0B; } .me-tab-btn--draft.active { background: #F59E0B; border-color: #F59E0B; font-weight: 600; } .me-tab-btn--draft.active .me-tab-count { background: white; color: #F59E0B; } .me-tab-btn--completed { border-color: var(--color-indigo); color: var(--color-indigo); } .me-tab-btn--completed .me-tab-count { background: var(--color-indigo); } .me-tab-btn--completed.active { background: var(--color-indigo); border-color: var(--color-indigo); font-weight: 600; } .me-tab-btn--completed.active .me-tab-count { background: white; color: var(--color-indigo); } .me-tab-btn--cancelled { border-color: var(--color-dim-gray); color: var(--color-dim-gray); } .me-tab-btn--cancelled .me-tab-count { background: var(--color-dim-gray); } .me-tab-btn--cancelled.active { background: var(--color-dim-gray); border-color: var(--color-dim-gray); } .me-tab-btn--cancelled.active .me-tab-count { background: white; color: var(--color-dim-gray); } .me-tab-btn--review { border-color: #0077B5; color: #0077B5; } .me-tab-btn--review .me-tab-count { background: #0077B5; } .me-tab-btn--review.active { background: #0077B5; border-color: #0077B5; } .me-tab-btn--review.active .me-tab-count { background: white; color: #0077B5; } .me-tab-btn--rejected { border-color: var(--color-danger); color: var(--color-danger); } .me-tab-btn--rejected .me-tab-count { background: var(--color-danger); } .me-tab-btn--rejected.active { background: var(--color-danger); border-color: var(--color-danger); } .me-tab-btn--rejected.active .me-tab-count { background: white; color: var(--color-danger); } @media (max-width: 640px) { .me-tab-btn { padding: 5px 11px; font-size: 12px; gap: 6px; } .me-tab-btn .me-tab-count { min-width: 18px; height: 18px; font-size: 10px; } } @media (max-width: 400px) { .me-tab-btn { padding: 5px 8px; font-size: 11px; } } :lang(fr) .me-tab-btn { width: 194px; } @media (max-width: 650px) { :lang(fr) .me-tab-btn { width: 154px; } } .me-tab-panel { display: none; } .me-tab-panel.active { display: block; } .me-badge { display: inline-block; padding: 4px 18px; border-radius: 8px; font-size: 14px; white-space: nowrap; color: white; } .me-badge--active { background: var(--color-success); } .me-badge--draft { background: #F59E0B; } .me-badge--completed { background: var(--color-indigo); } .me-badge--cancelled { background: var(--color-dim-gray); } .me-badge--review { background: #0077B5; } .me-badge--rejected { background: var(--color-danger); } .me-progress-bar { height: 8px; background: #E9E9E9; border-radius: 10px; overflow: hidden; } .me-progress-fill { height: 100%; border-radius: 10px; background: linear-gradient(to right, #ff6b57, #7a6cf6); transition: width 0.4s ease; } .me-event-row { transition: all 0.2s ease; } .me-earning-status { display: inline-block; padding: 6px 14px; border-radius: 6px; font-size: 14px; white-space: nowrap; } .me-earning-status--withdraw { color: var(--color-success); background: #DEF1EC; } .me-earning-status--pending { color: var(--color-danger); background: transparent; } .me-earning-status--due { color: #F59E0B; background: rgba(245, 158, 11, 0.1); } .me-earning-status--paid { color: var(--color-success); background: #DEF1EC; } .me-earning-status--cancelled { color: var(--color-dim-gray); background: rgba(100, 100, 100, 0.1); } .ed-sidebar-card { background: #fff; border: 1px solid var(--color-disabled); border-radius: 12px; padding: 18px 28px 18px 18px; display: flex; flex-direction: column; gap: 8px; } @media (max-width: 768px) { .ed-sidebar-card { flex-direction: row; overflow-x: auto; align-items: flex-start; padding: 12px 14px; gap: 10px; border-radius: 8px; scrollbar-width: none; } .ed-sidebar-card::-webkit-scrollbar { display: none; } } .ed-sidebar-active-row { position: relative; width: 100%; display: flex; align-items: center; } .ed-sidebar-step { width: 100%; border: 1px solid var(--color-disabled); border-radius: 8px; cursor: pointer; text-align: left; transition: border-color 0.2s ease, opacity 0.2s ease; text-decoration: none; display: flex; align-items: center; gap: 8px; height: 42px; padding: 11px 16px; font-size: 14px; font-weight: 500; color: var(--color-dim-gray); background: #fff; } .ed-sidebar-step:hover { border-color: #b3b3b3; } .ed-sidebar-step svg, .ed-sidebar-step img { flex-shrink: 0; } .ed-sidebar-step-active { background: linear-gradient(90deg, #FF6D4F 0%, #7B7EE7 100%); border: none; color: #fff; font-weight: 600; width: 100%; } .ed-sidebar-step-active:hover { opacity: 0.9; border-color: transparent; } .ed-sidebar-step-active svg { opacity: 1 !important; stroke: #fff; } .ed-sidebar-parent .ed-sidebar-chevron { margin-left: auto; transition: transform 0.25s ease; flex-shrink: 0; } .ed-sidebar-submenu { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; opacity: 0; gap: 0; } .ed-sidebar-submenu.open { max-height: 400px; opacity: 1; gap: 8px; overflow: visible; } .ed-sidebar-group:has(.ed-sidebar-submenu.open) > .ed-sidebar-parent .ed-sidebar-chevron { transform: rotate(180deg); } .ed-tabs-container { position: relative; display: flex; align-items: center; width: 100%; max-width: 100%; overflow-x: auto; background-color: white; padding: 6px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; scrollbar-width: none; } .ed-tabs-container::-webkit-scrollbar { display: none; } .ed-tabs-container::before { content: ""; position: absolute; top: 6px; width: var(--indicator-width, 0px); left: calc(var(--indicator-left, 0px) + 10px); height: calc(100% - 12px); background-color: #111; border-radius: 12px; transition: left 0.3s ease, width 0.3s ease; z-index: 0; pointer-events: none; } @media (max-width: 768px) { .ed-tabs-container { width: 100%; } } .ed-tab { position: relative; z-index: 1; flex: 1; flex-shrink: 0; padding: 11px 16px; font-size: 14px; font-family: inherit; font-weight: 500; white-space: nowrap; text-align: center; background: #f7f7f7; border: none; border-radius: 12px; margin-right: 10px; margin-left: 10px; cursor: pointer; transition: color 0.3s ease, background-color 0.2s ease; } .ed-tab::after { content: ""; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); height: 55%; border-right: 1px solid #8e8e93; } .ed-tab:last-child::after { border-right: none; } .ed-tab:has(+ .ed-tab.active)::after { border-right: none; } .ed-tab.active { color: #fff !important; background-color: transparent !important; border: transparent !important; } .ed-tab.active::after { border-right: none; } .ed-tab:hover:not(.active) { background-color: rgba(0, 0, 0, 0.15); } .ed-tab-panel { display: none; } .ed-tab-panel.active { display: block; } .ed-date-filter-row { display: none; gap: 10px; align-items: center; } .ed-date-filter-row.visible { display: flex; } .ed-breakdown-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f1f1; } .ed-breakdown-row:last-child { border-bottom: none; } .ed-breakdown-name { flex: 1; min-width: 0; } .ed-breakdown-name span { display: block; font-size: 14px; font-weight: 500; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ed-breakdown-name p { font-size: 12px; color: #999; margin: 2px 0 0; } .ed-breakdown-amount { font-size: 14px; font-weight: 600; color: var(--color-coral); white-space: nowrap; } .ed-order-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-coral); border: 1px solid var(--color-coral); font-size: 15px; font-weight: 600; flex-shrink: 0; } .ed-morris-chart { min-height: 320px; width: 100%; } .ed-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding-top: 16px; margin-top: 8px; } .ed-pagination a, .ed-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #333; text-decoration: none; transition: all 0.15s ease; } .ed-pagination a:hover, .ed-pagination span:hover { background-color: #f5f5f5; } .ed-pagination .active, .ed-pagination strong { background-color: #111; color: #fff; } .ed-pagination .active:hover, .ed-pagination strong:hover { background-color: #333; } .cof-field-table { background-color: white; padding: 11px 12px; border-radius: 8px !important; } .cof-field-table th { padding: 8px 9px !important; } .cof-field-table th:first-child { text-align: left !important; font-size: 14px; font-weight: 700 !important; color: #111; border-radius: 6px 0 0 6px; width: 220px; } .cof-field-table th:last-child { border-radius: 0 6px 6px 0; } .cof-field-table th:not(:first-child) { font-weight: 400 !important; } .cof-field-table th:nth-last-child(1), .cof-field-table th:nth-last-child(2) { width: 24%; } .cof-field-table td { padding: 8px 9px !important; font-weight: 400 !important; } .cof-field-table td:not(:first-child) { text-align: center; } .cof-field-table td:nth-last-child(1), .cof-field-table td:nth-last-child(2) { width: 24%; } .cof-field-table .cof-checkbox { appearance: none; -webkit-appearance: none; border-radius: 4.5px !important; background-color: #ffffff !important; border: 1px solid var(--color-coral) !important; position: relative; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease; } .cof-field-table .cof-checkbox::after { content: ""; position: absolute; inset: 0; background-image: url("../../public/themes/advanced/svgs/tick.svg"); background-repeat: no-repeat; background-position: center; background-size: 10px 9px; opacity: 0; transition: opacity 0.2s ease; } .cof-field-table .cof-checkbox:disabled { opacity: 0.5; cursor: not-allowed; } .cof-field-table .cof-checkbox:checked { background-color: var(--color-coral) !important; border-color: var(--color-coral) !important; } .cof-field-table .cof-checkbox:checked::after { opacity: 1; } .inv-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; } .inv-status-badge::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; background-image: url("../../public/themes/advanced/svgs/tick.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .inv-status-badge-scheduled { color: #f59e0b; border: 1px solid #f59e0b; } .inv-status-badge-scheduled::before { background-image: url("../../public/themes/advanced/svgs/scheduled.svg"); } .inv-status-badge-sent { color: var(--color-success); border: 1px solid var(--color-success); } .inv-status-badge-sent::before { background-image: url("../../public/themes/advanced/svgs/check-circle.svg"); } .inv-status-badge-draft { color: #6d6d78; border: 1px solid #6d6d78; } .inv-status-badge-draft::before { background-image: url("../../public/themes/advanced/svgs/draft.svg"); } .inv-schedule-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 0.5rem; border: 1px solid var(--color-pink); background: rgba(255, 22, 111, 0.08); cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--color-pink); transition: all 0.2s ease-in-out; user-select: none; } @media (max-width: 768px) { .inv-schedule-pill { font-size: 14px; padding: 8px 10px; justify-content: flex-start; } } .inv-schedule-pill-dot { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--color-pink); background-color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease-in-out; background-image: url("../../public/themes/advanced/svgs/tick.svg"); background-size: 10px 10px; background-repeat: no-repeat; background-position: center; } .inv-schedule-pill-active { border-color: var(--color-pink); background-color: rgba(255, 22, 111, 0.15); } .inv-schedule-pill-active .inv-schedule-pill-dot { background-color: var(--color-pink); } .inv-schedule-pill:hover { background-color: rgba(255, 22, 111, 0.12); } .dark-radio-btn.inv-schedule-pill { border-color: #000; background: white; color: #000; } .dark-radio-btn.inv-schedule-pill .inv-schedule-pill-dot { border-color: #000; background-color: #fff; } .dark-radio-btn.inv-schedule-pill.inv-schedule-pill-active { border-color: #000; background-color: white; } .dark-radio-btn.inv-schedule-pill.inv-schedule-pill-active .inv-schedule-pill-dot { background-color: #000; } .dark-radio-btn.inv-schedule-pill:hover { background-color: rgba(0, 0, 0, 0.12); } .my-inbox-layout { min-height: 500px; } .my-inbox-sidebar { max-height: 600px; overflow-y: auto; } @media (max-width: 767px) { .my-inbox-sidebar { max-height: 350px; } } .my-inbox-card { display: block; background: #fff; border: 1px solid var(--color-disabled); border-radius: 12px; padding: 16px; transition: border-color 0.2s ease, box-shadow 0.2s ease; text-decoration: none !important; } .my-inbox-card:hover { border-color: var(--color-coral); box-shadow: 0 2px 8px rgba(255, 109, 79, 0.1); } .my-inbox-card--active { border-color: var(--color-coral); border-width: 1px; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18); } .my-inbox-card--unread { background: #fff8f6; } .my-inbox-card p { margin: 0; line-height: 1.5 !important; } .my-inbox-avatar { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; background-color: var(--color-coral-light); border: 1px solid var(--color-coral); color: var(--color-coral); font-weight: 600; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .my-inbox-avatar--me { background-color: var(--color-coral-light); border: 1px solid var(--color-coral); color: var(--color-coral); } .my-inbox-chat { max-height: 600px; display: flex; flex-direction: column; gap: 24px; } @media (max-width: 768px) { .my-inbox-chat { gap: 20px; } } .my-inbox-bubble-row { display: flex; align-items: flex-start; gap: 12px; } .my-inbox-bubble-row--me { justify-content: flex-end; align-items: flex-end; } .my-inbox-bubble-row--other { justify-content: flex-start; } .my-inbox-bubble-content { max-width: 65%; display: flex; flex-direction: column; align-items: end; gap: 8px; } @media (max-width: 767px) { .my-inbox-bubble-content { max-width: 80%; } } .my-inbox-bubble { padding: 10px 15px; border-radius: 20px; font-size: 14px; line-height: 1.55 !important; word-break: break-word; } .my-inbox-bubble--other { background-color: #F0F0F0; color: black; border-bottom-left-radius: 3px; } .my-inbox-bubble--me { background-color: var(--color-indigo); color: #fff; border-bottom-right-radius: 3px; } .my-inbox-bubble-time { font-size: 12px; color: var(--color-dim-gray); padding: 0 4px; } .my-account-content-area { align-self: stretch; position: relative; z-index: 9; flex-shrink: 0; padding-bottom: 80px; } @media (max-width: 1024px) { .my-account-content-area { padding-bottom: 40px; } } .my-account-sidebar-wrapper { width: 250px; position: absolute; top: 0; left: 96px; border-radius: 12px; background: #fff; border: 1px solid var(--color-disabled); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 28px 18px 18px; gap: 18px; } @media (max-width: 1024px) { .my-account-sidebar-wrapper { position: static; width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 12px 16px; gap: 16px; border-radius: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 20px; } .my-account-sidebar-wrapper::-webkit-scrollbar { display: none; } } :lang(fr) .my-account-sidebar-wrapper { width: 280px; left: 76px; } @media (max-width: 1024px) { :lang(fr) .my-account-sidebar-wrapper { width: 100%; } } .my-account-sidebar-step { width: 100%; border: none; border-radius: 8px; cursor: pointer; text-align: left; transition: opacity 0.2s, border-color 0.2s; } .my-account-sidebar-step-active { padding: 12px 18px; background: linear-gradient(90deg, #FF6D4F 0%, #7B7EE7 100%); } .my-account-sidebar-step-active:hover { opacity: 0.9; } @media (max-width: 1024px) { .my-account-sidebar-step-active { padding: 8px 14px; } } .my-account-sidebar-step-inactive { padding: 12px 18px; background: #fff; border: 1px solid var(--color-disabled) !important; } @media (max-width: 1024px) { .my-account-sidebar-step-inactive { padding: 8px 14px; } } .my-account-sidebar-step-inactive:hover { border-color: #b3b3b3 !important; } .my-account-sidebar-step-danger { padding: 12px 18px; background: rgba(255, 27, 51, 0.1); } @media (max-width: 1024px) { .my-account-sidebar-step-danger { padding: 8px 14px; } } .my-account-sidebar-step-danger:hover { opacity: 0.8; } @media (max-width: 1024px) { .my-account-sidebar-step { width: auto; max-width: none; flex-shrink: 0; scroll-snap-align: start; white-space: nowrap; } } .my-account-main-content { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; padding-left: 390px; padding-right: 6rem; padding-top: 0; text-align: left; font-size: 14px; color: #000; } @media (max-width: 1024px) { .my-account-main-content { padding-left: 0; padding-right: 0; gap: 16px; align-items: stretch; } } /* ================= Common styles ================= */ /* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ""; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: "Albert Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role=button] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; background-color: var(--color-disabled) !important; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden=until-found])) { display: none; } input, textarea { box-shadow: none !important; padding: 0 !important; } .custom-checkbox, .custom-checkbox-success, .custom-checkbox-indigo { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 14px; } .custom-checkbox input[type=checkbox], .custom-checkbox-success input[type=checkbox], .custom-checkbox-indigo input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 6px; background-color: #ffffff; border: 1px solid var(--color-coral); position: relative; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease; } .custom-checkbox input[type=checkbox]::after, .custom-checkbox-success input[type=checkbox]::after, .custom-checkbox-indigo input[type=checkbox]::after { content: ""; position: absolute; inset: 0; background-image: url("../../public/themes/advanced/svgs/tick.svg"); background-repeat: no-repeat; background-position: center; background-size: 12px 9px; opacity: 0; transition: opacity 0.2s ease; } .custom-checkbox input[type=checkbox]:checked, .custom-checkbox-success input[type=checkbox]:checked, .custom-checkbox-indigo input[type=checkbox]:checked { background-color: var(--color-coral) !important; border-color: var(--color-coral) !important; } .custom-checkbox input[type=checkbox]:checked::after, .custom-checkbox-success input[type=checkbox]:checked::after, .custom-checkbox-indigo input[type=checkbox]:checked::after { opacity: 1; } .custom-checkbox-indigo input[type=checkbox] { border-color: var(--color-indigo) !important; } .custom-checkbox-indigo input[type=checkbox]:checked { background-color: var(--color-indigo) !important; border-color: var(--color-indigo) !important; } .custom-checkbox-indigo input[type=checkbox]:checked::after { opacity: 1; } .custom-checkbox-success input[type=checkbox] { border-color: var(--color-success) !important; } .custom-checkbox-success input[type=checkbox]:checked { background-color: var(--color-success) !important; border-color: var(--color-success) !important; } .custom-checkbox-success input[type=checkbox]:checked::after { opacity: 1; } .circle-checkbox-indigo, .circle-checkbox-pink, .circle-checkbox-success, .circle-checkbox-coral { height: 32px; border-radius: 10px; padding: 4px 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--color-indigo); background-color: var(--color-indigo-light); border: 1px solid var(--color-indigo); } .circle-checkbox-indigo input[type=checkbox], .circle-checkbox-pink input[type=checkbox], .circle-checkbox-success input[type=checkbox], .circle-checkbox-coral input[type=checkbox] { border-color: var(--color-indigo); border-radius: 50%; height: 16px; width: 16px; cursor: pointer; } .circle-checkbox-indigo input[type=checkbox]:checked, .circle-checkbox-pink input[type=checkbox]:checked, .circle-checkbox-success input[type=checkbox]:checked, .circle-checkbox-coral input[type=checkbox]:checked { background-color: var(--color-indigo); border-color: var(--color-indigo); } .circle-checkbox-indigo input[type=checkbox]:checked::after, .circle-checkbox-pink input[type=checkbox]:checked::after, .circle-checkbox-success input[type=checkbox]:checked::after, .circle-checkbox-coral input[type=checkbox]:checked::after { opacity: 1; } @media (max-width: 768px) { .circle-checkbox-indigo, .circle-checkbox-pink, .circle-checkbox-success, .circle-checkbox-coral { height: 30px; } } .circle-checkbox-coral { color: var(--color-coral); background-color: var(--color-coral-light); border: 1px solid var(--color-coral); } .circle-checkbox-coral input[type=checkbox] { border-color: var(--color-coral); } .circle-checkbox-coral input[type=checkbox]:checked { background-color: var(--color-coral); border-color: var(--color-coral); } .circle-checkbox-success { color: var(--color-success); background-color: rgba(16, 185, 129, 0.08); border: 1px solid var(--color-success); } .circle-checkbox-success input[type=checkbox] { border-color: var(--color-success); } .circle-checkbox-success input[type=checkbox]:checked { background-color: var(--color-success); border-color: var(--color-success); } .circle-checkbox-pink { color: var(--color-pink); background-color: rgba(255, 22, 111, 0.08); border: 1px solid var(--color-pink); } .circle-checkbox-pink input[type=checkbox] { border-color: var(--color-pink); } .circle-checkbox-pink input[type=checkbox]:checked { background-color: var(--color-pink); border-color: var(--color-pink); } .slider-card { --clr-low: var(--color-coral); --clr-mid: var(--color-indigo); --clr-high: #eeeeee; --thumb-size: 20px; --track-h: 8px; /* Track container */ } .slider-card .slider-track-wrap { position: relative; height: var(--thumb-size); display: flex; align-items: center; /* Gradient filled track */ } .slider-card .slider-track-wrap .slider-track { position: absolute; left: 0; right: 0; height: var(--track-h); border-radius: 999px; background: linear-gradient(to right, var(--clr-low) 0%, var(--clr-mid) var(--fill-pct, 70%), var(--clr-high) var(--fill-pct, 70%)); pointer-events: none; } .slider-card .slider-track-wrap { /* Native range input */ } .slider-card .slider-track-wrap input[type=range] { -webkit-appearance: none; appearance: none; position: absolute; left: 0; right: 0; width: 100%; background: transparent; margin: 0; cursor: pointer; z-index: 2; /* WebKit thumb */ } .slider-card .slider-track-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb-size); height: var(--thumb-size); border-radius: 50%; background: #ffffff; border: 3px solid var(--clr-mid); transition: transform 0.15s ease; } .slider-card .slider-track-wrap input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); } .slider-card .slider-track-wrap input[type=range] { /* Firefox thumb */ } .slider-card .slider-track-wrap input[type=range]::-moz-range-thumb { width: var(--thumb-size); height: var(--thumb-size); border-radius: 50%; background: #ffffff; border: 2.5px solid var(--clr-mid); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); cursor: grab; transition: transform 0.15s ease; } .slider-card .slider-track-wrap input[type=range]::-moz-range-thumb:hover { transform: scale(1.15); } .slider-card .slider-track-wrap input[type=range] { /* Hide native tracks */ } .slider-card .slider-track-wrap input[type=range]::-webkit-slider-runnable-track { background: transparent; } .slider-card .slider-track-wrap input[type=range]::-moz-range-track { background: transparent; } .slider-card .slider-track-wrap input[type=range] { /* Focus ring */ } .slider-card .slider-track-wrap input[type=range]:focus-visible { outline: none; } .slider-card .slider-track-wrap input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.35); } .slider-card { /* Min / Max labels */ } .slider-card .slider-labels { display: flex; justify-content: space-between; } .slider-card .slider-labels span { font-size: 14px; color: var(--color-dim-gray); } .slider-card { /* Live value badge */ } .slider-card .slider-value-badge { position: absolute; top: -2.2rem; transform: translateX(-50%); background: #111827; color: #fff; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; } .slider-card .slider-value-badge::after { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #111827; border-bottom: 0; } .slider-card .slider-track-wrap:hover .slider-value-badge, .slider-card input[type=range]:focus ~ .slider-value-badge { opacity: 1; } .flex-col-center { display: flex; align-items: center; justify-content: center; flex-direction: column; } .lh-36 { line-height: 36px !important; } .lh-22 { line-height: 22px !important; } .lh-24 { line-height: 24px !important; } .lh-28 { line-height: 28px !important; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .gradient-title, .page-heading { font-weight: 600; font-size: 128px; letter-spacing: 8px !important; background: linear-gradient(90deg, var(--color-coral) 10%, var(--color-indigo) 50%, var(--color-coral) 90%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-transform: uppercase; animation: gradientFlow 10s linear infinite; } @media (max-width: 1440px) { .gradient-title, .page-heading { font-size: 84px; } } @media (max-width: 1024px) { .gradient-title, .page-heading { font-size: 60px; font-weight: 600; letter-spacing: 4px !important; } } @media (max-width: 768px) { .gradient-title, .page-heading { font-size: 50px; } } .page-heading { font-size: 84px; letter-spacing: 0 !important; text-transform: none !important; } @media (max-width: 768px) { .page-heading { font-size: 48px; } } @media (max-width: 650px) { .page-heading { font-size: 40px; } } .bg-pattern { position: relative; } .bg-pattern::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 680px; width: 100%; background-image: url("../../public/themes/advanced/images/bg-pattern.png"); background-size: contain; background-position: center; background-repeat: no-repeat; pointer-events: none; } @media (max-width: 1280px) { .bg-pattern::before { height: 520px; background-size: cover; } } .stroke-title span, .page-stroke-heading span { position: relative; display: inline-block; color: transparent; background: linear-gradient(90deg, var(--color-coral) 10%, var(--color-indigo) 50%, var(--color-coral) 90%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientFlow 10s linear infinite; font-size: 128px; font-weight: 300; letter-spacing: 8px !important; text-transform: uppercase; } @media (max-width: 1440px) { .stroke-title span, .page-stroke-heading span { font-size: 84px; } } @media (max-width: 1024px) { .stroke-title span, .page-stroke-heading span { font-size: 60px; letter-spacing: 4px !important; } } @media (max-width: 768px) { .stroke-title span, .page-stroke-heading span { font-size: 50px; } } .stroke-title span::before, .page-stroke-heading span::before { content: attr(data-text); position: absolute; inset: 0; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.9); transform: translate(-2px, -2px); } @media (max-width: 768px) { .stroke-title span::before, .page-stroke-heading span::before { stroke-width: 0.5px; } } .stroke-title span::after, .page-stroke-heading span::after { content: attr(data-text); position: absolute; inset: 0; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.9); transform: translate(2px, 2px); } @media (max-width: 768px) { .stroke-title span::after, .page-stroke-heading span::after { stroke-width: 0.5px; } } .page-stroke-heading span { font-size: 84px; letter-spacing: 0 !important; text-transform: none !important; } .page-stroke-heading span::before { content: attr(data-text); -webkit-text-stroke: 1px rgba(0, 0, 0, 0.9); transform: translate(-1.5px, -1.5px); } .page-stroke-heading span::after { -webkit-text-stroke: 1px rgba(0, 0, 0, 0.9); transform: translate(1.5px, 1.5px); } @media (max-width: 768px) { .page-stroke-heading span { font-size: 48px; } } @media (max-width: 650px) { .page-stroke-heading span { font-size: 40px !important; } } :where(:lang(fr)) .gradient-title, :where(:lang(fr)) .page-heading { font-size: 128px; } @media (max-width: 1900px) { :where(:lang(fr)) .gradient-title, :where(:lang(fr)) .page-heading { font-size: 94px; } } @media (max-width: 1440px) { :where(:lang(fr)) .gradient-title, :where(:lang(fr)) .page-heading { font-size: 64px; } } @media (max-width: 1024px) { :where(:lang(fr)) .gradient-title, :where(:lang(fr)) .page-heading { font-size: 46px; } } @media (max-width: 499px) { :where(:lang(fr)) .gradient-title, :where(:lang(fr)) .page-heading { font-size: 40px; } } :where(:lang(fr)) .stroke-title span, :where(:lang(fr)) .page-stroke-heading span { font-size: 128px; } @media (max-width: 1900px) { :where(:lang(fr)) .stroke-title span, :where(:lang(fr)) .page-stroke-heading span { font-size: 94px; } } @media (max-width: 1440px) { :where(:lang(fr)) .stroke-title span, :where(:lang(fr)) .page-stroke-heading span { font-size: 64px; } } @media (max-width: 1024px) { :where(:lang(fr)) .stroke-title span, :where(:lang(fr)) .page-stroke-heading span { font-size: 46px; } } @media (max-width: 499px) { :where(:lang(fr)) .stroke-title span, :where(:lang(fr)) .page-stroke-heading span { font-size: 40px; } } :where(:lang(fr)) .page-heading { font-size: 80px; } @media (max-width: 768px) { :where(:lang(fr)) .page-heading { font-size: 42px; } } @media (max-width: 650px) { :where(:lang(fr)) .page-heading { font-size: 38px; } } :where(:lang(fr)) .page-stroke-heading span { font-size: 80px; } @media (max-width: 768px) { :where(:lang(fr)) .page-stroke-heading span { font-size: 42px; } } @media (max-width: 650px) { :where(:lang(fr)) .page-stroke-heading span { font-size: 38px !important; } } .gradient-divider { display: inline-block; margin: 40px 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-coral), var(--color-indigo), transparent); } .vertical-separator { display: flex; width: 2px; background: linear-gradient(to bottom, #ff5b4d 0%, #ff7a6b 30%, #c96cff 70%, #7a5cff 100%); clip-path: polygon(50% 0%, 65% 15%, 75% 50%, 65% 85%, 50% 100%, 35% 85%, 25% 50%, 35% 15%); } .animated-gradient-bg { background: radial-gradient(at 20% 30%, var(--color-coral-light-hover) 0%, transparent 50%), radial-gradient(at 80% 20%, var(--color-indigo-light-hover) 0%, transparent 50%), radial-gradient(at 50% 80%, var(--color-indigo-light-hover) 0%, transparent 50%), radial-gradient(at 90% 70%, var(--color-coral-light-hover) 0%, transparent 50%), #ffffff; background-size: 200% 200%; animation: animationBg 12s ease-in-out infinite; } .horizontal-text-saperator { display: flex; align-items: center; gap: 10px; justify-content: center; } .horizontal-text-saperator::before, .horizontal-text-saperator::after { content: ""; display: inline-flex; flex: 1; height: 1px; background: linear-gradient(to right, transparent, #ee2a7b); } .horizontal-text-saperator::after { background: linear-gradient(to left, transparent, #ee2a7b); } .hover-underline { width: max-content; background: linear-gradient(currentColor 0 0) var(--p, 0) 100%/var(--d, 0) 1px no-repeat; transition: 0.3s, background-position 0s 0.3s; } .hover-underline:hover { --d: 100%; --p: 100%; } .social-icon { height: 24px; width: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background-color: #f7f7f7; transition: all ease-in 0.2s; } .social-icon img { transition: all ease-in 0.2s; } .social-icon:hover img { filter: invert(1) brightness(100) !important; } .instagram-icon:hover { background-color: #ee2a7b !important; cursor: pointer; } .facebook-icon:hover { background-color: #1877f2 !important; cursor: pointer; } .x-icon:hover { background-color: black !important; cursor: pointer; } .linkedin-icon:hover { background-color: #0077b5 !important; cursor: pointer; } .google-icon:hover { background: linear-gradient(180deg, #ea4335, #fbbc05, #34a853, #4285f4); cursor: pointer; } .google-icon:hover img { filter: none !important; } .primary-btn, .primary-icon-btn { width: 154px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 6px; text-wrap: nowrap; padding: 8px; font-size: 18px; transition: border-radius 0.3s ease; overflow: hidden; position: relative; cursor: pointer; } @media (max-width: 768px) { .primary-btn, .primary-icon-btn { height: 42px; font-size: 16px; padding: 6px; } } .primary-btn:hover, .primary-icon-btn:hover { border-radius: 0; } .primary-btn:disabled, .primary-icon-btn:disabled { background-color: var(--color-disabled) !important; color: black; cursor: not-allowed; } .primary-icon-btn { width: auto; padding: 8px; line-height: normal !important; } @media (max-width: 768px) { .primary-icon-btn { padding: 12px; } .primary-icon-btn img { height: 16px; width: 16px; } } .primary-icon-btn img { height: 20px; width: 20px; flex-shrink: 0; } .primary-icon-btn svg { flex-shrink: 0; } .primary-btn > span { display: block; position: relative; transition: transform 0.3s; transform: translateY(0px); overflow: hidden; } .primary-btn > span > span { display: block; line-height: normal !important; } .primary-btn:hover > span { transform: translateY(0px); } .primary-btn:hover > span > span { animation: MoveUpInitial 0.15s forwards, MoveUpEnd 0.15s forwards 0.15s; } .gradient-button { background: linear-gradient(90deg, #ff6b6b 0%, #c44569 50%, #6b8eff 100%); } .coral-btn { background-color: var(--color-coral); color: white; } .dark-btn { color: white; background-color: black; } .indigo-btn { color: white; background-color: var(--color-indigo); } .light-indigo-btn { color: var(--color-indigo); background-color: var(--color-indigo-light-hover); } .lime-neon-btn { color: black; background-color: var(--color-lime-neon); } .pink-btn { color: white; background-color: var(--color-pink); } .dim-gray-btn { color: white; background-color: #696969; } .white-btn { color: black; background-color: white; } .success-btn { background-color: var(--color-success); color: white; } .animated-border { background: linear-gradient(90deg, var(--color-coral) 10%, var(--color-indigo) 50%, var(--color-coral) 90%); background-size: 200% 100%; animation: gradientFlow 3s linear infinite; } .scoop-badge { display: inline-block; background: unset; border: unset; padding: unset; appearance: unset; text-decoration: none; --bg-color: transparent; color: #fff; } .scoop-badge-inner { display: flex; align-items: center; justify-content: center; text-align: center; position: relative; background: var(--bg-color); --mask: radial-gradient( calc(8px - 1.8px) at 8px 8px, #0000 98%, #000 ) -8px -8px; -webkit-mask: var(--mask); mask: var(--mask); } .scoop-badge-inner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-clip: padding-box; } .scoop-badge-animated .scoop-badge-inner::before { background: radial-gradient(8px at 8px 8px, rgba(0, 0, 0, 0) calc(98% - 1.8px), #b1fa63 calc(100% - 1.8px) 98%, rgba(0, 0, 0, 0)) -8px -8px, linear-gradient(90deg, #b1fa63, #fff, #b1fa63) 50%/200% 100%, var(--bg-color); --mask: radial-gradient( 8px at 8px 8px, #0000 calc(98% - 1.8px), #000 calc(100% - 1.8px) 98%, #0000 ) -8px -8px, linear-gradient(90deg, #000 1.8px, #0000 0 calc(100% - 1.8px), #000 0) 50% / 100% calc(100% - 20px + 8px) no-repeat, linear-gradient(#000 1.8px, #0000 0 calc(100% - 1.8px), #000 0) 50% / calc(100% - 20px + 8px) 100% no-repeat; -webkit-mask: var(--mask); mask: var(--mask); animation: scoopAnimation 2s linear infinite; } .scoop-badge-static .scoop-badge-inner::before { background: radial-gradient(8px at 8px 8px, rgba(0, 0, 0, 0) calc(98% - 1.8px), #b1fa63 calc(100% - 1.8px) 98%, rgba(0, 0, 0, 0)) -8px -8px, linear-gradient(#b1fa63 0 0); --mask: radial-gradient( 8px at 8px 8px, #0000 calc(98% - 1.8px), #000 calc(100% - 1.8px) 98%, #0000 ) -8px -8px, linear-gradient(90deg, #000 1.8px, #0000 0 calc(100% - 1.8px), #000 0) 50% / 100% calc(100% - 20px + 8px) no-repeat, linear-gradient(#000 1.8px, #0000 0 calc(100% - 1.8px), #000 0) 50% / calc(100% - 20px + 8px) 100% no-repeat; -webkit-mask: var(--mask); mask: var(--mask); } .svg-stroke path { stroke: currentColor; } .svg-fill path { fill: currentColor; } .tooltip-info { position: relative; cursor: pointer; flex-shrink: 0; } .tooltip-info::before, .tooltip-info::after { position: absolute; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 50; } .tooltip-info::after { content: attr(data-info); background: #333; color: #fff; font-size: 12px; font-weight: 400; padding: 6px 10px; border-radius: 6px; max-width: 210px; width: max-content; white-space: normal; word-break: normal; overflow-wrap: break-word; white-space: normal; line-height: 1.4; } .tooltip-info::before { content: ""; border-style: solid; } .tooltip-info:hover::before, .tooltip-info:hover::after { opacity: 1; visibility: visible; } .tooltip-info::after, .tooltip-info[data-info-pos=top]::after { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); } .tooltip-info::before, .tooltip-info[data-info-pos=top]::before { bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border-width: 6px 6px 0; border-color: #333 transparent transparent; } .tooltip-info[data-info-pos=top-right]::after { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); } .tooltip-info[data-info-pos=top-right]::before { bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border-width: 6px 6px 0; border-color: #333 transparent transparent; } @media (max-width: 650px) { .tooltip-info[data-info-pos=top-right]::after { left: auto; right: -22px; transform: translateX(0); } .tooltip-info[data-info-pos=top-right]::before { left: auto; right: 2px; transform: translateX(0); } } .tooltip-info[data-info-pos=top-right-full]::after { bottom: calc(100% + 8px); left: auto; right: -22px; transform: translateX(0); } .tooltip-info[data-info-pos=top-right-full]::before { bottom: calc(100% + 2px); left: auto; right: 2px; transform: translateX(0); border-width: 6px 6px 0; border-color: #333 transparent transparent; } .tooltip-info[data-info-pos=bottom]::after { top: calc(100% + 10px); bottom: unset; left: 50%; transform: translateX(-50%); min-width: max-content !important; } .tooltip-info[data-info-pos=bottom]::before { top: calc(100% + 4px); bottom: unset; left: 50%; transform: translateX(-50%); border-width: 0 6px 6px; border-color: transparent transparent #333; } .tooltip-info[data-info-pos=right]::after { left: calc(100% + 8px); bottom: unset; top: 50%; transform: translateY(-50%); } .tooltip-info[data-info-pos=right]::before { left: calc(100% + 2px); bottom: unset; top: 50%; transform: translateY(-50%); border-width: 6px 6px 6px 0; border-color: transparent #333 transparent transparent; } .tooltip-info[data-info-pos=left]::after { right: calc(100% + 8px); left: unset; bottom: unset; top: 50%; transform: translateY(-50%); } .tooltip-info[data-info-pos=left]::before { right: calc(100% + 2px); left: unset; bottom: unset; top: 50%; transform: translateY(-50%); border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #333; } .tooltip-wrapper { position: relative; flex-shrink: 0; cursor: pointer; } .tooltip-wrapper:hover .tooltip-text { opacity: 1; visibility: visible; } .tooltip-text { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); background: #333; color: #fff; font-size: 12px; font-weight: 400; padding: 6px 10px; border-radius: 6px; width: 210px; line-height: 1.4 !important; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 99999; } @media (max-width: 768px) { .tooltip-text { width: 210px; } } .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-style: solid; border-width: 6px 6px 0; border-color: #333 transparent transparent; } .swiper { cursor: grab; } .swiper:active { cursor: grabbing; } .legend-bars { display: flex; justify-content: center; align-items: flex-end; gap: 8px; width: 100%; } @media (max-width: 650px) { .legend-bars { gap: 4px; } } .legend-bars span { height: 18px; width: 1.5px; background: #111; border-radius: 2px; transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s ease; } @media (max-width: 650px) { .legend-bars span { height: 12px; width: 1px; } } .legend-bars span:nth-child(5n) { width: 2.5px; } @media (max-width: 650px) { .legend-bars span:nth-child(5n) { width: 1.5px; } } .legend-bars span.is-active, .legend-bars span.is-l1 { height: 38px; } @media (max-width: 650px) { .legend-bars span.is-active, .legend-bars span.is-l1 { height: 24px; } } .legend-bars span.is-l2 { height: 36px; } @media (max-width: 650px) { .legend-bars span.is-l2 { height: 22px; } } .legend-bars span.is-l3 { height: 34px; } @media (max-width: 650px) { .legend-bars span.is-l3 { height: 21px; } } .legend-bars span.is-l4 { height: 32px; } @media (max-width: 650px) { .legend-bars span.is-l4 { height: 20px; } } .legend-bars span.is-l5 { height: 30px; opacity: 1; } @media (max-width: 650px) { .legend-bars span.is-l5 { height: 19px; } } .legend-bars span.is-l6 { height: 28px; } @media (max-width: 650px) { .legend-bars span.is-l6 { height: 17px; } } .legend-bars span.is-l7 { height: 26px; } @media (max-width: 650px) { .legend-bars span.is-l7 { height: 15px; } } .legend-bars span.is-far { height: 22px; } @media (max-width: 650px) { .legend-bars span.is-far { height: 12px; } } .animate-float { animation: floatUpDown 1.5s ease-in-out infinite; } .animate-float-delay { animation-delay: 0.75s; } .animate-border-grow { animation: borderGrowShadow 1.5s ease-out infinite; } .backdrop-blur-sm { backdrop-filter: blur(4px); } .box-shadow-dual { box-shadow: 0px 4px 30px 5px rgba(123, 126, 231, 0.3); box-shadow: 4px 0px 30px 5px rgba(255, 109, 79, 0.3); } .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.05); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 20px; } @media (max-width: 650px) { .modal-backdrop { padding: 12px; } } /* ================= HEADER styles ================= */ /* ================= HEADER styles ================= */ .header-right-section::before { content: ""; position: absolute; top: -80px; bottom: 0; left: 0; width: 106%; height: 144%; background-image: url("../../public/themes/advanced/images/header-bg.png"); background-size: cover; background-position: center; pointer-events: none; } @media (max-width: 768px) { .header-right-section::before { display: none; } } .header-wrapper { width: 576px; max-width: calc(100% - 24px); overflow: hidden; transition: width 0.45s ease; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 999; } .header-wrapper.expanding { width: 1026px; } .header-wrapper.expanded { max-height: 2000px; } @media (max-width: 768px) { .header-wrapper.expanded { max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } } .header-wrapper.expanded .header-nav-items-wrapper { opacity: 1; transform: translateY(0); margin-top: 15px; overflow: visible; } .header-wrapper.expanded .header-email-icon { width: auto; gap: 10px; margin-right: 190px; } @media (max-width: 768px) { .header-wrapper.expanded .header-email-icon { margin-right: 0; } } .header-wrapper.expanded .header-email-icon-text { display: flex; } .header-nav-items-wrapper { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-8px); transition: max-height 0.5s ease, opacity 0.3s ease, transform 0.3s ease; } @media (max-width: 768px) { .header-nav-items-wrapper { flex-direction: column; gap: 0; } } @media (max-width: 768px) { .header-nav-items-wrapper .header-right-section { order: -1; } .header-nav-items-wrapper .header-nav-col { order: 1; } } .header-email-icon { width: 28px; text-wrap: nowrap; overflow: hidden; gap: 0; cursor: pointer; transition: margin-right ease-in 0.2s; } .header-email-icon-text { display: none; } @media (max-width: 768px) { .header-nav-col { width: 100% !important; margin-top: 8px !important; } .header-nav-items-wrapper ul { font-size: 15px !important; padding-left: 16px !important; padding-right: 16px !important; } .header-nav-items-wrapper li { padding-top: 10px !important; padding-bottom: 10px !important; } .header-socials-block { margin-top: 12px !important; } .header-right-section { width: 100% !important; margin-top: 8px !important; padding-bottom: 16px; } .header-right-section > .flex.items-center.justify-center.gap-5 { justify-content: flex-start !important; gap: 12px !important; } .header-right-section .header-cta-block { margin-top: 20px !important; align-items: flex-start !important; } .header-right-section .header-cta-block p { font-size: 20px !important; margin-bottom: 16px !important; text-align: left !important; } .header-right-section > .flex.items-center.justify-between.gap-5 > p { font-size: 18px !important; } .header-right-section .mb-0.\!text-coral { font-size: 16px !important; } .header-right-section .primary-icon-btn { font-size: 14px !important; height: 40px !important; } .header-nav-items-wrapper .primary-btn { width: 120px !important; height: 38px !important; font-size: 14px !important; } } .list-link, .discover-category.active .discover-category-label { position: relative; cursor: pointer; } .list-link::after, .discover-category.active .discover-category-label::after { content: ""; display: inline-block; height: 16px; width: 0; margin-right: 0; background-color: var(--color-coral); mask-image: url("../../public/themes/advanced/svgs/arrow-right.svg"); mask-position: center; mask-size: 16px; mask-repeat: no-repeat; -webkit-mask-image: url("../../public/themes/advanced/svgs/arrow-right.svg"); -webkit-mask-position: center; -webkit-mask-size: 16px; -webkit-mask-repeat: no-repeat; vertical-align: middle; overflow: hidden; transition: width 0.3s ease, margin-left 0.3s ease; } .list-link:hover::after, .discover-category.active .discover-category-label:hover::after { width: 16px; margin-left: 6px; } .list-link-icon { display: flex; align-items: center; justify-content: center; height: 20px; width: 20px; } .list-link-icon img { height: 18px; width: auto; object-fit: contain; } .hamburger { width: 20px; height: 20px; position: relative; } @media (max-width: 768px) { .hamburger { height: 18px; width: 18px; } } .hamburger span { position: absolute; width: 100%; height: 2px; background-color: #000; left: 0; transition: transform 0.4s ease, top 0.4s ease; border-radius: 4px !important; } .hamburger span:nth-child(1) { top: 4px; } .hamburger span:nth-child(2) { top: 12px; } .hamburger.active span:nth-child(1) { top: 8px; transform: rotate(45deg); } .hamburger.active span:nth-child(2) { top: 8px; transform: rotate(-45deg); } .logout-btn { background-color: #000; height: 28px; width: 28px; border-radius: 4px; transition: all ease-in 0.2s; border: 1px solid transparent; cursor: pointer; } .logout-btn img { height: 15px; width: 15px; transition: all ease-in 0.2s; } .logout-btn:hover { background-color: white; border: 1px solid black; } .logout-btn:hover img { filter: invert(1) brightness(0); } .profile-img-wrapper { height: 42px; width: 42px; border-radius: 50%; } .profile-img-wrapper img { height: 100%; width: 100%; border-radius: 50%; object-fit: cover; } /* ================= Footer styles ================= */ .qr-wrapper { display: flex; flex-direction: column; align-items: center; background: url("../../public/themes/advanced/svgs/qr-bg.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; gap: 16px; width: 196px; height: 202px; } .qr-placeholder { width: 92px; height: 92px; background: #ffffff; border-radius: 16px; } .footer-links li { width: max-content; background: linear-gradient(white 0 0) var(--p, 0) 100%/var(--d, 0) 1px no-repeat; transition: 0.3s, background-position 0s 0.3s; } .footer-links li:hover { --d: 100%; --p: 100%; cursor: pointer; } .footer-links li a { display: block; color: inherit; text-decoration: none; } .language-switcher-wrapper { background-image: url("../../public/themes/advanced/svgs/language-swich.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; color: white; } .footer-bg { position: relative; } .footer-bg::before { content: ""; position: absolute; bottom: 0; right: 0; width: 700px; height: 550px; background-image: url("../../public/themes/advanced/images/header-bg.png"); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 2; pointer-events: none; } @media (max-width: 768px) { .footer-bg::before { display: none; } } /* ================= Homepage styles ================= */ .hero-section { position: relative; height: 100vh; margin: 0; padding: 0; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; } .hero-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0, 0, 0); z-index: 1; opacity: 0.3; backdrop-filter: blur(500px); -webkit-backdrop-filter: blur(500px); } .hero-section--image::before { background: linear-gradient(90deg, var(--color-coral) 10%, var(--color-indigo) 50%, var(--color-coral) 90%); animation: gradientFlow 10s linear infinite; opacity: 0.25; backdrop-filter: none; -webkit-backdrop-filter: none; } .hero-section-title { font-size: 110px; line-height: 1.1 !important; text-align: center; background: linear-gradient(90deg, var(--color-coral) 10%, var(--color-indigo) 50%, var(--color-coral) 90%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientFlow 10s linear infinite; } @media (max-width: 1440px) { .hero-section-title { font-size: 90px; } } @media (max-width: 1280px) { .hero-section-title { font-size: 72px; } } @media (max-width: 768px) { .hero-section-title { font-size: 56px; line-height: 50px !important; } } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 3; } .hero-overlay--image { background-image: url("../../public/themes/advanced/images/bnw-overlay.png"); } .hero-content { position: relative; z-index: 4; } .spotlight-search-wrapper { box-shadow: 0px 4px 30px 5px rgba(123, 126, 231, 0.3), 4px 0px 30px 5px rgba(255, 109, 79, 0.3); } .location-suggestion-box { height: 86px; width: 86px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 14px; gap: 14px; border-radius: 10px; background-color: #f7f7f7; flex-shrink: 0; } .faq-item { transition: all 0.3s ease; position: relative; } .faq-item:not(:first-child)::after { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%); width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-coral), var(--color-indigo), transparent); } .faq-item.active .faq-answer { max-height: 400px; padding: 0 32px 24px 32px; } .faq-item.active .faq-icon::before { background: #e91e63; } .faq-item.active .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 24px 32px; cursor: pointer; text-align: left; background: transparent; border: 0; transition: all 0.3s ease; } .faq-question h3 { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0; padding-right: 20px; } .faq-icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; transition: transform 0.3s ease; } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #ee2a7b; transition: all 0.3s ease; } .faq-icon::before { width: 20px; height: 1.5px; } .faq-icon::after { width: 1.5px; height: 20px; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; } .faq-answer p { color: black; font-size: 16px; line-height: 26px; margin: 0; } .faqs-bottom-section { position: relative; overflow: hidden; background: radial-gradient(circle at 50% -30%, rgba(123, 126, 231, 0.25) 0%, rgba(123, 126, 231, 0.25) 6%, rgba(123, 126, 231, 0.15) 10%, transparent 14%), linear-gradient(180deg, rgba(123, 126, 231, 0.95) 0%, #1a1b22 50%, #111217 100%); } .faqs-bottom-section::before { position: absolute; left: 0; bottom: 0; content: ""; height: 100%; width: 100%; background-image: url("../../public/themes/advanced/images/faq-bg.png"); background-repeat: no-repeat; background-size: contain; background-position: left bottom; pointer-events: none; } .faqs-bottom-section > * { position: relative; z-index: 1; } .text-lime-neon { color: var(--color-lime-neon); } @media (max-width: 768px) { .faq-question { padding: 20px 24px; } .faq-question h3 { font-size: 16px; } .faq-item.active .faq-answer { padding: 0 24px 20px 24px; } .faq-answer p { font-size: 14px; } } .discover-category-label { color: #000; transition: all 0.3s ease; } .discover-category-label::after { content: ""; width: 0; transition: all 0.3s ease; } .discover-categories:has(.discover-category.active) .discover-category:not(.active) .discover-category-label { color: #fff; } .discover-categories:has(.discover-category.active) .discover-icon-circle { background-color: #fff; } .discover-category { opacity: 0; animation: fadeInUp 0.6s ease-out forwards; transition: all 0.3s ease; } .discover-category.active .discover-category-label { color: var(--color-lime-neon); transition: all 0.3s ease; } .discover-category.active .discover-category-label::after { width: 16px; height: 14px; margin-left: 8px; background-color: var(--color-lime-neon); } .discover-icon-circle { box-shadow: 0px 6px 4px 0px rgba(0, 0, 0, 0.15) inset; transition: background-color 0.3s ease; } .event-card-wrapper { height: 100%; } .event-card-wrapper .event-card { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; transform-origin: center center; box-shadow: 0 5.47px 21.88px 0 rgba(102, 102, 102, 0.1); } .event-card-wrapper .event-card:hover { transform: translateY(-15px) !important; z-index: 10; } .event-card-wrapper .event-card::after { content: ""; position: absolute; height: 100%; width: 100%; inset: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 74.38%); box-shadow: 0px 5.47px 21.88px 0px rgba(102, 102, 102, 0.1); pointer-events: none; } .event-card-wrapper .event-card::before { content: ""; position: absolute; height: 18px; left: 0; width: 100%; bottom: -17px; pointer-events: none; background-image: url("../../public/themes/advanced/images/ticket-cuts.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } .populer-events-swiper { padding: 18px 0 !important; margin: -30px 0 0 0; } .populer-events-swiper .swiper-slide { height: auto; width: 270px; display: flex; overflow: visible !important; } /* ── Page Loader (matches Default Theme bar-style loader) ────────────────── */ .rip_loader { display: none; position: fixed; background: rgba(219, 219, 221, 0.74); backdrop-filter: blur(3px); top: 0; left: 0; bottom: 0; right: 0; justify-content: center; align-items: center; z-index: 99998; } .rip_loader.is-visible { display: flex; } .rip_loader-line { width: 7px; height: 40px; margin: 0 5px; border: none; border-radius: 20px; animation: rip_loader_size 1s infinite linear; } @keyframes rip_loader_size { 0% { height: 40px; } 25% { height: 60px; } 50% { height: 90px; } 75% { height: 60px; } 100% { height: 40px; } } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: translateX(0); } } @keyframes toastSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(110%); } } .toast-container { position: fixed; top: 24px; right: 24px; z-index: 99998; display: flex; flex-direction: column; gap: 12px; pointer-events: none; } @media (max-width: 768px) { .toast-container { top: 16px; right: 16px; left: 16px; } } .toast { display: flex; align-items: flex-start; gap: 12px; min-width: 300px; max-width: 420px; padding: 14px 16px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); pointer-events: all; animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; backdrop-filter: blur(8px); border: 1px solid transparent; position: relative; overflow: hidden; } @media (max-width: 768px) { .toast { min-width: unset; max-width: 100%; width: 100%; } } .toast::before { content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; border-radius: 0 0 12px 12px; animation: toastProgress 5s linear forwards; transform-origin: left; } .toast.is-hiding { animation: toastSlideOut 0.3s ease forwards; } .toast__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; } .toast__body { flex: 1; } .toast__body p { font-size: 14px; line-height: 1.5 !important; margin: 0; font-weight: 500; } .toast__body small { font-size: 12px; opacity: 0.75; display: block; margin-top: 2px; } .toast__close { flex-shrink: 0; width: 20px; height: 20px; position: absolute; top: 2px; right: 5px; border-radius: 50%; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.5; transition: opacity 0.2s; font-size: 20px; line-height: 1; padding: 0; color: inherit; } .toast__close:hover { opacity: 1; } .toast--success { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-color: #bbf7d0; color: #14532d; } .toast--success::before { background: #22c55e; } .toast--success .toast__icon { color: #16a34a; } .toast--danger { background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%); border-color: #fecdd3; color: #881337; } .toast--danger::before { background: #ef4444; } .toast--danger .toast__icon { color: #dc2626; } .toast--warning { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-color: #fde68a; color: #78350f; } .toast--warning::before { background: #f59e0b; } .toast--warning .toast__icon { color: #d97706; } .toast--info { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-color: #bfdbfe; color: #1e3a5f; } .toast--info::before { background: #3b82f6; } .toast--info .toast__icon { color: #2563eb; } @keyframes toastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } } .alert-success, .alert-danger, .alert-warning, .alert-info { position: fixed !important; top: 24px !important; right: 24px !important; z-index: 99998 !important; min-width: 300px; max-width: 420px; border-radius: 12px !important; border: 1px solid transparent !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important; padding: 14px 18px !important; font-size: 14px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; gap: 10px !important; animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important; } @media (max-width: 768px) { .alert-success, .alert-danger, .alert-warning, .alert-info { left: 16px !important; right: 16px !important; min-width: unset !important; max-width: unset !important; } } .alert-success { background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important; border-color: #bbf7d0 !important; color: #14532d !important; } .alert-danger { background: linear-gradient(135deg, #fff1f2, #ffe4e6) !important; border-color: #fecdd3 !important; color: #881337 !important; } .alert-warning { background: linear-gradient(135deg, #fffbeb, #fef3c7) !important; border-color: #fde68a !important; color: #78350f !important; } .alert-info { background: linear-gradient(135deg, #eff6ff, #dbeafe) !important; border-color: #bfdbfe !important; color: #1e3a5f !important; } table { width: 100%; border-collapse: separate; border-spacing: 0 10px; } table * { box-shadow: none !important; border: none; outline: none !important; } table th { font-weight: 600 !important; background-color: #f5f5f5 !important; color: black !important; font-size: 14px; padding: 14px !important; vertical-align: middle !important; position: relative; } table th::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 55%; border-right: 1px solid #d7d7d8; } table th:first-child { border-radius: 8px 0 0 8px; } table th:last-child { border-radius: 0 8px 8px 0; border-right: none; } table th:last-child::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 55%; border-right: none; } @media (max-width: 1280px) { table th { padding: 14px !important; } } @media (max-width: 768px) { table th { font-size: 12px; padding: 12px !important; } } table td { font-size: 14px; background-color: #f9f9f9 !important; color: black !important; vertical-align: middle !important; padding: 10px 14px !important; } @media (max-width: 768px) { table td { font-size: 12px; } } table td:first-child { border-radius: 8px 0 0 8px; } table td:last-child { border-radius: 0 8px 8px 0; } table tr:has(> td:only-child) > td { border-radius: 8px !important; } .earning-status { display: inline-block; font-size: 13px; font-weight: 500; white-space: nowrap; } .earning-status--withdraw { color: #ff6d4f; border: 1px solid #ff6d4f; border-radius: 6px; padding: 3px 10px; } .earning-status--pending { color: #ff6d4f; } .earning-status--due { color: #e6a817; } .earning-status--paid { color: #22c55e; } .earning-status--cancelled { color: #ef4444; } .modal-input-field { padding: 6.5px 7px !important; } .modal-subheading { display: flex; align-items: center; gap: 8px; font-size: 18px; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; } .modal-subheading::before { content: ""; width: 3px; height: 20px; background: var(--color-coral); } .cards-hov { transition: all 0.3s ease; } .cards-hov:hover { background-color: rgba(255, 255, 255, 0.5); transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .view-order-bg { background: url("../../public/themes/advanced/images/view-order-bg.png"); background-position: center; background-repeat: no-repeat; background-size: contain; height: 110px; } .ticket-confirm-bg { background: url("../../public/themes/advanced/images/confirm-ticket-bg.png"); background-position: center; background-repeat: no-repeat; background-size: contain; height: 100px; } .auth-error-msg { display: none; background: linear-gradient(135deg, #fff1f2); color: var(--color-danger); border-radius: 8px; border: 1px solid var(--color-danger); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); padding: 10px 14px; font-size: 14px; font-weight: 500; } .redactor_organizer-description-input-box { min-height: 20px !important; height: 80px !important; } .redactor_box { width: 100% !important; } .back-btn { border: 1px solid black; border-radius: 6px; height: 28px !important; padding: 4px 8px !important; gap: 6px; background-color: transparent; flex-shrink: 0; transition: all 0.3s ease; } .back-btn svg path { transition: all 0.3s ease; } .back-btn:hover { background: black; color: white; } .back-btn:hover svg path { fill: white !important; } .processing-overlay { display: none; position: fixed; inset: 0; align-items: center; justify-content: center; z-index: 99999; } .processing-overlay.is-visible { display: flex; } .processing-box { margin-top: 300px; border: 1px solid var(--color-indigo); border-radius: 10px; padding: 18px 24px; text-align: center; min-width: 320px; } .processing-title { font-size: 20px; font-weight: 600; color: black; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; } .processing-text { font-size: 14px; color: black; } .typing-dots { display: inline-flex; align-items: center; gap: 4px; } .typing-dots span { width: 6px; height: 6px; background: black; border-radius: 50%; display: inline-block; animation: bounce 1.4s infinite ease-in-out; } .typing-dots span:nth-child(1) { animation-delay: 0s; } .typing-dots span:nth-child(2) { animation-delay: 0.2s; } .typing-dots span:nth-child(3) { animation-delay: 0.4s; } .passcode-eye-toggle { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); } /* ================= Captcha refresh button — spinner state ============= */ .captcha-refresh-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; } .captcha-refresh-btn.is-loading .captcha-refresh-icon { display: none; } .captcha-refresh-btn:not(.is-loading) .captcha-refresh-spinner { display: none; } .captcha-refresh-btn[data-busy=true] { pointer-events: none; opacity: 0.6; cursor: wait; } .captcha-refresh-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; display: inline-block; animation: captcha-refresh-spin 0.7s linear infinite; } @keyframes captcha-refresh-spin { to { transform: rotate(360deg); } } /* ─────────────────────────────────────────────────────────────── Ticket Selection Modal — v2 (reference-match) Scoped under `.tmv2`. The view uses Tailwind utilities for most of the layout / typography / colors; this block only carries the few rules that Tailwind cannot express cleanly: - table→div display rules (block layout on legacy cells) - card grid-template-areas - colored left band injected via per-row CSS variable - progress-bar gradient - cart-divider gradient - hidden underlying
` in their header. ───────────────────────────────────────────────────────────── */ .rc-progress-track { height: 8px; border-radius: 9999px; background: #efefef; overflow: hidden; } .rc-progress-fill { height: 100%; background: linear-gradient(90deg, #ff6d4f 0%, #7b7ee7 100%); border-radius: 9999px; } .tmv2 { /* Hide the legacy date line in event_detail (the new header carries date + time as pills). */ } .tmv2 .event_detail-table > .text-center.text-sm.text-darkGray { display: none; } .tmv2 { /* Progress-bar gradient — coral → indigo, matches the recurring_event_list_view.php pattern so Step 1 and Step 2 share a consistent brand fill across modals. */ } .tmv2 .tmv2-progress__bar { background: linear-gradient(90deg, #ff6d4f 0%, #7b7ee7 100%); } .tmv2 { /* Modal subheading: shrink the legacy coral-bar style */ } .tmv2 .modal-subheading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b6b6b; margin: 4px 0 10px; } .tmv2 .modal-subheading::before { display: none; } .tmv2 { /* Table → div flow: existing markup uses `.event_view_list` (formerly ), `.ticket-list` (formerly ), `.ticket-row` (formerly ), `.ticket-cell` (formerly
). Keep them as block-flow vertical lists. */ } .tmv2 .event_view_list, .tmv2 .ticket-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 8px; border: 0; background: transparent; } .tmv2 { /* Group header row — quiet pill style */ } .tmv2 .ticket-row.group-tr { background: #fafafa; border: 1px solid #ececec; border-radius: 12px; padding: 10px 14px; margin: 14px 0 6px; } .tmv2 .ticket-row.group-tr h4 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #2b2b2b; } .tmv2 { /* Ticket card layout — the LEFT column (ticket name cell, which already contains title + pill + description) spans all 3 rows; the RIGHT column stacks price / "N left" / quantity stepper top-to-bottom. */ } .tmv2 .ticket-row:not(.group-tr) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 16px; padding: 14px 16px 14px 22px; margin: 0 0 14px; background: #fff7f5; border: 1px solid #f7e1dc; border-radius: 14px; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; /* Colored left band — comes from per-row CSS variable injected by the JS decorator (defaults to coral). */ } .tmv2 .ticket-row:not(.group-tr)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--tmv2-band, #ff5a5f); border-top-left-radius: 14px; border-bottom-left-radius: 14px; } .tmv2 .ticket-row:not(.group-tr):hover { border-color: #f3c8c0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); } .tmv2 { /* LEFT side: title cell already wraps title + pill + description (the description div lives inside this cell in the original PHP). Span all 3 rows. */ } .tmv2 .event_view_table_td_ticket_name { grid-column: 1; grid-row: 1/span 3; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 17px; font-weight: 700; color: #111; line-height: 1.25; min-width: 0; /* Description div */ } .tmv2 .event_view_table_td_ticket_name > div[id^=desc_] { font-size: 13px; font-weight: 400; color: #5b5b5b; font-style: italic; line-height: 1.4; margin-top: 2px; } .tmv2 .event_view_table_td_ticket_name > a { font-size: 12px; font-weight: 600; color: var(--color-indigo, #6366f1); text-decoration: underline; } .tmv2 { /* RIGHT column: price → available → qty stacked vertically */ } .tmv2 .event_view_table_td_price { grid-column: 2; grid-row: 1; justify-self: end; font-size: 20px; font-weight: 800; color: #111; line-height: 1.1; text-align: right; } .tmv2 .event_view_table_td_sales_ends { grid-column: 2; grid-row: 2; justify-self: end; font-size: 12px; color: #6b6b6b; text-align: right; } .tmv2 .event_view_table_td_available { grid-column: 2; grid-row: 2; justify-self: end; font-size: 13px; font-weight: 500; color: #6b6b6b; text-align: right; } .tmv2 .event_view_table_td_available::after { content: " left"; } .tmv2 .event_view_table_td_quantity { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; display: flex; align-items: center; margin-top: 8px; } .tmv2 { /* Sales-ended / disabled status — pill style */ } .tmv2 .link-sales-end, .tmv2 .link-status-disabled { font-size: 12px; padding: 4px 10px; background: #f3f4f6; border-radius: 999px; font-weight: 600; color: #9ca3af !important; } .tmv2 { /* Hide the underlying qty — pushed off-screen so it doesn't appear in stepper. */ } .tmv2 .tmv2-stepper-hosted ~ a.tool_tip_class, .tmv2 .tmv2-stepper-hosted + .clear, .tmv2 .event_view_table_td_quantity > .posrel > a.tool_tip_class { display: none !important; } .tmv2 { /* ── Description displayed inline (no View More toggle) ──── */ } .tmv2 .event_view_table_td_ticket_name > a[onclick*=desc_] { display: none !important; } .tmv2 .event_view_table_td_ticket_name > div[id^=desc_] { display: block !important; font-size: 13px; font-weight: 400; font-style: italic; color: #5b5b5b; line-height: 1.4; margin-top: 4px; } .tmv2 { /* ── Hide the sales-end date cell (date already shown in the header pills above the card grid). ─────────────── */ } .tmv2 .event_view_table_td_sales_ends { display: none !important; } .tmv2 { /* ── Hide the legacy purple "Buy Tickets" button + label; the lime "Continue with N Tickets" in the right column is the only buy CTA in v2. ─────────────────────────── */ } .tmv2 .buy-btn-wrapper { display: none !important; } .tmv2 .promo-code-wrapper label { display: none !important; } .tmv2 { /* ── Cart count pill stays inline with the title ─────────── */ } .tmv2 #tmv2CartCount { white-space: nowrap; } .tmv2 { /* ── Cart line item (Tailwind-purge-proof: pure SCSS) ───── */ } .tmv2 .tmv2-cart__line { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 14px; } .tmv2 .tmv2-cart__line-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #1f2937; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tmv2 .tmv2-cart__line-price { flex-shrink: 0; font-size: 14px; font-weight: 700; color: #111; white-space: nowrap; } .tmv2 { /* ── Promo / Access-code card ─────────────────────────────── Shown when the event has any promo or access code (the view template gates on getAllPromotionalCode($eid)). Carries the soft pink glow shadow + houses the scalloped coral badge and the gradient-pill Apply button. */ } .tmv2 .tmv2-promo-card { box-shadow: 0 4px 18px -8px rgba(255, 109, 79, 0.35); } .tmv2 .tmv2-promo-badge { /* Sized by the inner SVG (40x40); the SVG itself draws the scalloped silhouette and the % glyph. text color drives the silhouette fill via `currentColor`. */ color: #ff6d4f; line-height: 0; filter: drop-shadow(0 2px 6px rgba(255, 109, 79, 0.25)); } .tmv2 { /* Coral gradient pill — used by the Apply button when JS moves the existing #promo input + button into the card. */ } .tmv2 .tmv2-promo-apply { background: linear-gradient(90deg, #ff8a6e 0%, #ff6d4f 50%, #f0573a 100%); transition: filter 0.15s ease, transform 0.05s ease; } .tmv2 .tmv2-promo-apply:hover { filter: brightness(1.05); } .tmv2 .tmv2-promo-apply:active { transform: translateY(1px); } .tmv2 { /* Cart line — colored left bar driven by --tmv2-band */ } .tmv2 .tmv2-cart__line::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 999px; background: var(--tmv2-band, #ccc); } .tmv2 { /* Gradient divider used inside the cart, just above Total */ } .tmv2 .tmv2-divider { background: linear-gradient(90deg, transparent 0%, #ff7f6e 30%, #f97316 70%, transparent 100%); } .tmv2 { /* Empty-state visual: dim the standalone Continue button */ } .tmv2 .tmv2-cart.is-empty ~ #tmv2ContinueBtn, .tmv2 #tmv2Cart.is-empty + #tmv2ContinueBtn { opacity: 0.55; pointer-events: none; } .tmv2 { /* Sticky right column on desktop */ } @media (min-width: 1024px) { .tmv2 .tmv2-aside { position: sticky; top: 12px; } } .tmv2 { /* Mobile fine-tuning: stack cells vertically inside each card */ } @media (max-width: 1023px) { .tmv2 .ticket-row:not(.group-tr) { grid-template-columns: 1fr; } .tmv2 .event_view_table_td_ticket_name { grid-column: 1; grid-row: auto; } .tmv2 .event_view_table_td_price, .tmv2 .event_view_table_td_quantity, .tmv2 .event_view_table_td_available, .tmv2 .event_view_table_td_sales_ends { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; } } :root { /* Colors */ /* store RGB values */ --color-coral-rgb: 255, 109, 79; --color-indigo-rgb: 123, 126, 231; /* main colors */ --color-coral: rgb(var(--color-coral-rgb)); --color-indigo: rgb(var(--color-indigo-rgb)); /* auto light variants */ --color-coral-light: rgba(var(--color-coral-rgb), 0.1); --color-coral-light-hover: rgba(var(--color-coral-rgb), 0.16); --color-indigo-light: rgba(var(--color-indigo-rgb), 0.1); --color-indigo-light-hover: rgba(var(--color-indigo-rgb), 0.16); --color-lime-neon: #b1fa63; --color-off-white: #f7f7f7; --color-snow-white: #fafafa; --color-pink: #ff166f; --color-dim-gray: #696969; --color-light-gray: #f1f1f1; --color-dark-gray: #474747; --color-very-light-gray: #f9f9f9; --color-input-focus: #ff6d4f; --color-disabled: #dddddd; --color-success: #34a853; --color-danger: #ff1b33; /* Radius */ --radius-base: 4px; --radius-mid: 10px; --radius-lrg: 12px; } [x-cloak] { display: none !important; } body { font-family: "Albert Sans", sans-serif; } *, body { box-sizing: border-box !important; line-height: 100% !important; letter-spacing: 0; scroll-behavior: smooth; } body.modal-open { overflow: hidden; padding-inline-end: 4px; } *::-webkit-scrollbar { width: 4px; height: 4px; } *::-webkit-scrollbar-thumb { background-color: #e1e1e1; } *::-webkit-scrollbar-track { background: transparent; }