/* ===================================================================== EVORA design system (v34) Brand: indigo primary + cyan accent on a cool neutral canvas. All colors below are tokens; components reference tokens, not hex. Text/surface pairs meet WCAG AA (4.5:1) — muted text #5b6474 on white 6.1:1. ===================================================================== */ :root { /* Brand */ --evora-primary: #4f46e5; /* indigo-600 — actions, links, active states (6.3:1 on white) */ --evora-primary-dark: #4338ca; /* hover / pressed */ --evora-primary-light: #818cf8; --evora-primary-soft: #eef2ff; /* tinted backgrounds */ --evora-accent: #06b6d4; /* cyan — highlights, brand mark */ --evora-accent-text: #0e7490; /* cyan when used as text */ /* Neutrals */ --evora-bg: #f5f7fb; /* app canvas */ --evora-surface: #ffffff; /* cards */ --evora-surface-2: #f8f9fc; /* table heads, subtle fills */ --evora-border: #e6e8f0; --evora-border-strong: #d6d9e4; --evora-text: #1f2937; /* body */ --evora-heading: #111827; /* titles */ --evora-text-muted: #5b6474; /* secondary text */ /* Status (reserved meaning — always paired with a label) */ --evora-success: #15803d; --evora-success-bg: #dcfce7; --evora-success-text: #166534; --evora-warning: #d97706; --evora-warning-bg: #fef3c7; --evora-warning-text: #92400e; --evora-danger: #dc2626; --evora-danger-bg: #fee2e2; --evora-danger-text: #991b1b; --evora-info: #0284c7; --evora-info-bg: #e0f2fe; --evora-info-text: #075985; --evora-neutral: #64748b; --evora-neutral-bg: #f1f5f9; --evora-neutral-text: #334155; /* Typography scale */ --evora-font: 'Inter', "Segoe UI", Roboto, -apple-system, sans-serif; --evora-fs-page: 1.125rem; /* page title (top bar) */ --evora-fs-section: 1rem; /* section / card title */ --evora-fs-body: .9375rem; /* body text */ --evora-fs-small: .8125rem; /* helper text */ --evora-fs-label: .72rem; /* uppercase labels */ /* Bootstrap bridge: every Bootstrap "primary" (links, .btn-primary, .text-primary, .bg-primary, pagination, checks) becomes EVORA indigo. */ --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229; --bs-primary-text-emphasis: #3730a3; --bs-primary-bg-subtle: #eef2ff; --bs-primary-border-subtle: #c7d2fe; --bs-link-color: #4f46e5; --bs-link-color-rgb: 79, 70, 229; --bs-link-hover-color: #3730a3; --bs-link-hover-color-rgb: 55, 48, 163; --bs-success: #15803d; --bs-success-rgb: 21, 128, 61; --bs-danger: #dc2626; --bs-danger-rgb: 220, 38, 38; --bs-body-font-family: var(--evora-font); --bs-body-color: #1f2937; --bs-body-bg: #f5f7fb; --bs-secondary-color: #5b6474; --bs-border-color: #e6e8f0; --bs-focus-ring-color: rgba(79, 70, 229, .25); --evora-sidebar-bg: #1e1b4b; --evora-sidebar-hover: #312e81; --sidebar-width: 250px; --sidebar-collapsed-width: 76px; --evora-radius: 1rem; --evora-radius-sm: .65rem; --evora-shadow-sm: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06); --evora-shadow-md: 0 4px 12px rgba(17,24,39,.06), 0 2px 4px rgba(17,24,39,.04); --evora-shadow-lg: 0 12px 32px rgba(30,27,75,.12), 0 4px 10px rgba(30,27,75,.06); --evora-gradient-primary: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #4338ca 100%); --evora-gradient-sidebar: linear-gradient(180deg, #201c52 0%, #1e1b4b 45%, #171438 100%); } * { scrollbar-width: thin; scrollbar-color: #c7d2fe transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #c7c4f5; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: #a5b4fc; } html { scroll-behavior: smooth; } body { background-color: var(--evora-bg); font-family: 'Inter', "Segoe UI", Roboto, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; color: #1f2937; } h1, h2, h3, h4, h5, h6 { font-family: 'Inter', "Segoe UI", Roboto, -apple-system, sans-serif; letter-spacing: -.01em; } a { transition: color .15s ease; } /* --------------------------------------------------------------------- Sidebar --------------------------------------------------------------------- */ .evora-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--evora-gradient-sidebar); color: #e0e7ff; overflow-y: auto; overflow-x: hidden; z-index: 1030; transition: width .2s ease-in-out; box-shadow: 2px 0 24px rgba(23,20,56,.18); } .evora-sidebar::-webkit-scrollbar-thumb { background: rgba(199,210,254,.25); } .evora-sidebar .brand { padding: 1.4rem 1.25rem; font-weight: 800; font-size: 1.4rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; overflow: hidden; } .evora-sidebar .brand .accent { color: var(--evora-accent); } .evora-sidebar .brand .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: .6rem; background: linear-gradient(135deg, var(--evora-accent), #22d3ee); color: #0e1547; flex-shrink: 0; margin-right: .6rem; box-shadow: 0 4px 14px rgba(6,182,212,.35); } .evora-sidebar .nav-link { color: #c7d2fe; padding: 0.65rem 1.25rem; margin: .1rem .6rem; border-radius: .6rem; font-size: 0.925rem; font-weight: 500; white-space: nowrap; overflow: hidden; transition: background .15s ease, color .15s ease, transform .15s ease; } .evora-sidebar .nav-link i { transition: transform .15s ease; } .evora-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; } .evora-sidebar .nav-link.active { background: linear-gradient(90deg, rgba(99,102,241,.35), rgba(99,102,241,.08)); color: #fff; box-shadow: inset 3px 0 0 var(--evora-accent); } .evora-sidebar .nav-link.active i { color: var(--evora-accent); } /* Desktop collapsed sidebar: icons only, labels hidden */ .evora-sidebar.collapsed { width: var(--sidebar-collapsed-width); } .evora-sidebar.collapsed .brand-full, .evora-sidebar.collapsed .nav-section-title, .evora-sidebar.collapsed .nav-label { display: none; } .evora-sidebar.collapsed .nav-link { justify-content: center; padding: .65rem; margin: .1rem .5rem; } .evora-sidebar.collapsed .nav-link i { margin-right: 0 !important; font-size: 1.15rem; } .evora-main.collapsed { margin-left: var(--sidebar-collapsed-width); } .evora-sidebar .nav-section-title { color: #818cf8; text-transform: uppercase; font-weight: 700; font-size: 0.68rem; letter-spacing: .08em; padding: 1.1rem 1.25rem 0.4rem; } /* --------------------------------------------------------------------- Main layout / topbar --------------------------------------------------------------------- */ .evora-main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .2s ease-in-out; } .evora-topbar { background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid #eef0f7; padding: 0.85rem 1.75rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1020; } .evora-topbar h5 { font-weight: 700; color: #111827; } .evora-content { padding: 1.5rem; flex: 1; animation: evora-fade-up .35s ease both; } @keyframes evora-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .evora-content { animation: none; } } /* --------------------------------------------------------------------- Stat cards --------------------------------------------------------------------- */ .stat-card { background: #fff; border-radius: var(--evora-radius); padding: 1.15rem; box-shadow: var(--evora-shadow-sm); border: 1px solid #eef0f7; height: 100%; transition: transform .18s ease, box-shadow .18s ease; position: relative; overflow: hidden; } /* Only clickable stat cards lift on hover (a static number should not look like a button). */ a .stat-card:hover, a.stat-card:hover { transform: translateY(-2px); box-shadow: var(--evora-shadow-md); } .stat-card > i:first-child { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .7rem; background: rgba(79,70,229,.1); color: var(--evora-primary) !important; font-size: 1.1rem !important; margin-bottom: .6rem; } .stat-card.accent-success > i:first-child { background: rgba(22,163,74,.1); color: var(--evora-success) !important; } .stat-card.accent-warning > i:first-child { background: rgba(217,119,6,.1); color: var(--evora-warning) !important; } .stat-card.accent-danger > i:first-child { background: rgba(220,38,38,.1); color: var(--evora-danger) !important; } .stat-card.accent-info > i:first-child { background: rgba(6,182,212,.1); color: var(--evora-accent) !important; } .stat-card .stat-value { font-size: 1.6rem; font-weight: 800; color: #111827; line-height: 1.15; white-space: nowrap; } .stat-card .stat-label { color: var(--evora-text-muted); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: .15rem; } .stat-card .stat-desc { font-size: .78rem; color: var(--evora-text-muted); margin-top: .4rem; } .trend-up { color: var(--evora-success); font-weight: 600; } .trend-down { color: var(--evora-danger); font-weight: 600; } .trend-flat { color: var(--evora-text-muted); } /* --------------------------------------------------------------------- Generic cards --------------------------------------------------------------------- */ .card-evora { background: #fff; border-radius: var(--evora-radius); border: 1px solid #eef0f7; box-shadow: var(--evora-shadow-sm); transition: box-shadow .18s ease; } .event-type-card { background: #fff; border-radius: var(--evora-radius); border: 1px solid #eef0f7; box-shadow: var(--evora-shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .event-type-card:hover { border-color: var(--evora-primary, #4f46e5); transform: translateY(-2px); box-shadow: var(--evora-shadow-md); } .event-type-card.active { border-color: var(--evora-primary, #4f46e5); border-width: 2px; box-shadow: 0 4px 16px rgba(79,70,229,.18); } /* --------------------------------------------------------------------- Badges --------------------------------------------------------------------- */ .badge-status-pending, .badge-status-pending_approval, .badge-status-archived, .badge-status-approved, .badge-status-active, .badge-status-rejected, .badge-status-suspended, .badge-status-inactive, .badge-status-draft, .badge-status-open, .badge-status-closed, .badge-status-ongoing, .badge-status-completed, .badge-status-cancelled, .badge-status-failed, .badge-status-refunded, .badge-status-removed { border-radius: 50rem !important; padding: .38em .85em !important; font-weight: 700 !important; font-size: .74rem !important; letter-spacing: .01em; } .badge-status-pending { background: #fef3c7; color: #92400e; } .badge-status-pending_approval { background: #fef3c7; color: #92400e; } .badge-status-archived { background: #e5e7eb; color: #374151; } .badge-status-approved { background: #dcfce7; color: #166534; } .badge-status-active { background: #dcfce7; color: #166534; } .badge-status-rejected { background: #fee2e2; color: #991b1b; } .badge-status-suspended { background: #fee2e2; color: #991b1b; } .badge-status-inactive { background: #f3f4f6; color: #4b5563; } .badge-status-draft { background: #f3f4f6; color: #4b5563; } .badge-status-open { background: #dbeafe; color: #1e40af; } .badge-status-closed { background: #f3f4f6; color: #4b5563; } .badge-status-ongoing { background: #fef3c7; color: #92400e; } .badge-status-completed { background: #dcfce7; color: #166534; } .badge-status-cancelled { background: #fee2e2; color: #991b1b; } .badge-status-failed { background: #fee2e2; color: #991b1b; } .badge-status-refunded { background: #e5e7eb; color: #374151; } .badge-status-removed { background: #fee2e2; color: #991b1b; } /* --------------------------------------------------------------------- Buttons --------------------------------------------------------------------- */ .btn-evora-primary { background: var(--evora-gradient-primary); border-color: var(--evora-primary); color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,.28); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .btn-evora-primary:hover { background: var(--evora-gradient-primary); border-color: var(--evora-primary-dark); color: #fff; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79,70,229,.35); } .btn-evora-primary:active { transform: translateY(0); } .btn, .form-control, .form-select { border-radius: .6rem; } .btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(79,70,229,.18) !important; } /* --------------------------------------------------------------------- Empty states --------------------------------------------------------------------- */ .empty-state { text-align: center; padding: 2.75rem 1rem; color: var(--evora-text-muted); } .empty-state i { font-size: 1.75rem; color: var(--evora-primary); display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(79,70,229,.08); margin-bottom: 1rem; } .empty-state p { margin-bottom: 0; font-size: .9rem; } /* --------------------------------------------------------------------- Tables --------------------------------------------------------------------- */ .card-evora table thead th { background: #f8f9fc; border-bottom: 2px solid #eef0f5; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--evora-text-muted); } .card-evora table tbody tr { transition: background .12s ease; } .card-evora table tbody tr:hover { background: #f7f8ff; } /* DataTables x Bootstrap spacing tweaks */ .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid #d1d5db; border-radius: .5rem; padding: .3rem .6rem; } .dataTables_wrapper .dt-buttons .btn { border-radius: .5rem; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--evora-gradient-primary) !important; border-color: var(--evora-primary) !important; color: #fff !important; border-radius: .5rem; } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: .5rem; } .report-launcher-card { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; } .report-launcher-card:hover { transform: translateY(-3px); box-shadow: var(--evora-shadow-lg); } .report-launcher-card.active { border: 2px solid var(--evora-primary); } /* --------------------------------------------------------------------- Auth shell (login / register) --------------------------------------------------------------------- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--evora-gradient-sidebar); position: relative; /* .auth-shell is the : only clip the decorative glows sideways so long forms (e.g. Apply as Organizer) can still scroll vertically. */ overflow-x: hidden; overflow-y: auto; padding: 2rem 1rem; } .auth-shell::before, .auth-shell::after { content: ""; position: fixed; /* fixed glows never widen the page (absolute ones made phones zoom out) */ pointer-events: none; border-radius: 50%; filter: blur(10px); opacity: .35; } .auth-shell::before { width: 420px; height: 420px; background: radial-gradient(circle, var(--evora-accent), transparent 70%); top: -140px; right: -120px; } .auth-shell::after { width: 380px; height: 380px; background: radial-gradient(circle, var(--evora-primary-light), transparent 70%); bottom: -140px; left: -110px; } .auth-card { background: #fff; border-radius: 1.25rem; padding: 2.5rem; max-width: 460px; width: 100%; box-shadow: 0 25px 60px rgba(0,0,0,.3); position: relative; z-index: 1; } @media (max-width: 991.98px) { .evora-sidebar { transform: translateX(-100%); transition: transform .2s ease-in-out; } .evora-sidebar.show { transform: translateX(0); } .evora-main { margin-left: 0; } } /* ---- Notification center (bell dropdown + page) ---- */ .notif-dropdown { width: min(380px, calc(100vw - 24px)); } .notif-dropdown-list { max-height: 420px; overflow-y: auto; } .notif-item .min-w-0, .notif-row .min-w-0 { min-width: 0; } .notif-message { white-space: normal; overflow-wrap: anywhere; } .notif-unread { background: #f3f6ff; } .notif-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: .35rem; border-radius: 50%; background: #dc3545; } /* ---- Evaluation prompt (floating card) and star rating ---- */ .evaluation-prompt { position: fixed; right: 16px; bottom: 16px; width: min(340px, calc(100vw - 32px)); z-index: 1045; background: #fff; } .evaluation-prompt-stars a { font-size: 1.6rem; line-height: 1; color: #d1d5db; text-decoration: none; } .evaluation-prompt-stars:hover a { color: #f59e0b; } .evaluation-prompt-stars a:hover ~ a { color: #d1d5db; } /* Radio stars rendered 5..1 and reversed, so "checked and all before it" light up. */ .star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; } .star-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; } .star-rating label { font-size: 2rem; line-height: 1; color: #d1d5db; cursor: pointer; } .star-rating.star-rating-sm label { font-size: 1.6rem; } .star-rating input:checked ~ label, .star-rating label:hover, .star-rating label:hover ~ label { color: #f59e0b; } .star-rating input:focus-visible + label { outline: 2px solid #4f46e5; outline-offset: 2px; border-radius: 4px; } /* ---- ⭐ Rate EVORA button (beside the notification bell) ---- */ .rate-evora-btn { position: relative; color: #f59e0b; line-height: 1; } .rate-evora-btn:hover { color: #d97706; } .rate-evora-btn .rate-evora-check { position: absolute; right: -9px; bottom: -4px; font-size: .8rem; color: #16a34a; -webkit-text-stroke: .5px #16a34a; } /* ---- v33 Account Center: dropdown + pages ---- */ .account-menu { width: min(300px, calc(100vw - 24px)); border: 1px solid #eef0f7; border-radius: 14px; overflow: hidden; } .account-menu-header { background: linear-gradient(135deg, #eef2ff, #f8fafc); } .account-menu-item { display: flex; align-items: center; gap: .65rem; padding: .55rem 1rem; font-size: .9rem; transition: background .15s ease, padding-left .15s ease; } .account-menu-item i { width: 1.1rem; text-align: center; color: #6366f1; } .account-menu-item.text-danger i { color: inherit; } .account-menu-item:hover, .account-menu-item:focus { background: #f3f4ff; padding-left: 1.15rem; } .account-avatar-initials { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #4f46e5, #06b6d4); color: #fff; font-weight: 700; } .account-avatar-sm { width: 30px; height: 30px; font-size: .85rem; } .account-avatar-md { width: 42px; height: 42px; font-size: 1.05rem; flex: 0 0 42px; } .account-avatar-lg { width: 96px; height: 96px; font-size: 2.2rem; object-fit: cover; } .account-menu .min-w-0 { min-width: 0; } .account-tabs { gap: .35rem; border-bottom: 1px solid #e5e7eb; } .account-tabs .nav-link { color: #4b5563; border-bottom: 2px solid transparent; border-radius: 0; padding: .6rem .85rem; font-size: .9rem; } .account-tabs .nav-link:hover { color: #4f46e5; } .account-tabs .nav-link.active { color: #4f46e5; border-bottom-color: #4f46e5; font-weight: 600; } .account-dl dt { font-weight: 500; color: #6b7280; font-size: .875rem; } .account-dl dd { font-size: .9rem; margin-bottom: .6rem; } .account-toggle { cursor: pointer; } .account-toggle .form-check-input { width: 2.4em; height: 1.25em; cursor: pointer; } /* ===================================================================== v34 component layer — consistent buttons, cards, badges, tables, forms, navigation, accessibility and mobile behavior. (Later in the file on purpose: refines the rules above.) ===================================================================== */ /* ---- Base & typography ---- */ body { background-color: var(--evora-bg); color: var(--evora-text); font-size: var(--evora-fs-body); line-height: 1.55; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h5, .h6 { color: var(--evora-heading); } .text-muted { color: var(--evora-text-muted) !important; } .small, small { font-size: var(--evora-fs-small); } .evora-topbar h5 { font-size: var(--evora-fs-page); letter-spacing: -.015em; } .card-evora > h6, .card-evora .card-title, .card-evora h6.fw-semibold { font-size: var(--evora-fs-section); font-weight: 650 !important; color: var(--evora-heading); letter-spacing: -.005em; } .stat-card .stat-value, .table td, .currency, .font-tabular { font-variant-numeric: tabular-nums; } a { color: var(--evora-primary); text-underline-offset: 2px; } a:hover { color: var(--evora-primary-dark); } ::selection { background: #c7d2fe; color: #111827; } /* ---- Accessibility ---- */ .skip-link { position: absolute; left: .75rem; top: -3rem; z-index: 2000; padding: .55rem .9rem; border-radius: .5rem; background: var(--evora-primary); color: #fff !important; font-weight: 600; text-decoration: none; transition: top .15s ease; } .skip-link:focus { top: .75rem; } :focus-visible { outline: 2px solid var(--evora-primary); outline-offset: 2px; } .evora-sidebar .nav-link:focus-visible, .evora-sidebar button:focus-visible { outline: 2px solid var(--evora-accent); outline-offset: -2px; } .btn:focus-visible { outline: 2px solid var(--evora-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ---- Cards ---- */ .card-evora, .stat-card { border-color: var(--evora-border); } .card-evora { background: var(--evora-surface); } .stat-card { transition: box-shadow .18s ease, transform .18s ease; } .stat-card .stat-label { color: var(--evora-text-muted); font-size: var(--evora-fs-label); letter-spacing: .05em; } .stat-card .stat-desc { color: var(--evora-text-muted); } .section-title { font-size: var(--evora-fs-section); font-weight: 650; color: var(--evora-heading); margin-bottom: .75rem; } /* Quick action tiles (dashboards) */ .quick-action { display: flex; align-items: center; gap: .8rem; height: 100%; padding: .9rem 1rem; border-radius: var(--evora-radius-sm); border: 1px solid var(--evora-border); background: var(--evora-surface); color: var(--evora-heading); text-decoration: none; font-weight: 600; font-size: .9rem; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .quick-action:hover, .quick-action:focus-visible { border-color: #c7d2fe; background: var(--evora-primary-soft); color: var(--evora-primary-dark); box-shadow: var(--evora-shadow-sm); } .quick-action .qa-icon { flex: 0 0 2.4rem; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .65rem; background: var(--evora-primary-soft); color: var(--evora-primary); font-size: 1.15rem; } .quick-action .qa-sub { display: block; font-weight: 400; font-size: .78rem; color: var(--evora-text-muted); } .quick-action.qa-primary { background: var(--evora-primary); border-color: var(--evora-primary); color: #fff; } .quick-action.qa-primary .qa-icon { background: rgba(255,255,255,.18); color: #fff; } .quick-action.qa-primary .qa-sub { color: rgba(255,255,255,.85); } .quick-action.qa-primary:hover, .quick-action.qa-primary:focus-visible { background: var(--evora-primary-dark); color: #fff; } /* Pending-action rows (admin) */ .pending-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .25rem; border-bottom: 1px solid #eef0f5; color: var(--evora-text); text-decoration: none; } .pending-row:last-child { border-bottom: 0; } .pending-row:hover { color: var(--evora-primary-dark); } .pending-row .pending-count { min-width: 2rem; text-align: center; font-weight: 700; border-radius: 50rem; padding: .1rem .55rem; background: var(--evora-neutral-bg); color: var(--evora-neutral-text); font-variant-numeric: tabular-nums; } .pending-row .pending-count.has-items { background: var(--evora-warning-bg); color: var(--evora-warning-text); } /* ---- Buttons ---- */ .btn { font-weight: 550; letter-spacing: .005em; } .btn-primary { --bs-btn-bg: var(--evora-primary); --bs-btn-border-color: var(--evora-primary); --bs-btn-hover-bg: var(--evora-primary-dark); --bs-btn-hover-border-color: var(--evora-primary-dark); --bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3; --bs-btn-disabled-bg: var(--evora-primary); --bs-btn-disabled-border-color: var(--evora-primary); } .btn-outline-primary { --bs-btn-color: var(--evora-primary); --bs-btn-border-color: #c7d2fe; --bs-btn-hover-bg: var(--evora-primary); --bs-btn-hover-border-color: var(--evora-primary); --bs-btn-active-bg: var(--evora-primary-dark); --bs-btn-active-border-color: var(--evora-primary-dark); } .btn-outline-secondary { --bs-btn-color: #374151; --bs-btn-border-color: var(--evora-border-strong); --bs-btn-hover-color: #111827; --bs-btn-hover-bg: #f3f4f6; --bs-btn-hover-border-color: #c9cdd8; --bs-btn-active-color: #111827; --bs-btn-active-bg: #e5e7eb; } .btn-success { --bs-btn-bg: var(--evora-success); --bs-btn-border-color: var(--evora-success); --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534; } .btn-danger { --bs-btn-bg: var(--evora-danger); --bs-btn-border-color: var(--evora-danger); --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c; } .btn-evora-primary, .btn-evora-primary:hover { transform: none; } /* calmer: no jumping buttons */ .btn-evora-primary:hover { box-shadow: 0 4px 12px rgba(79,70,229,.3); } /* ---- Badges: one soft, readable style for every status ---- */ .badge { font-weight: 650; letter-spacing: .01em; } /* Status badges from Bootstrap classes (finance, refunds, payouts, accounts...): tinted with dark text for contrast. Solid pills (counters) are left alone. */ .badge.bg-success:not(.rounded-pill) { background: var(--evora-success-bg) !important; color: var(--evora-success-text) !important; } .badge.bg-warning:not(.rounded-pill) { background: var(--evora-warning-bg) !important; color: var(--evora-warning-text) !important; } .badge.bg-danger:not(.rounded-pill) { background: var(--evora-danger-bg) !important; color: var(--evora-danger-text) !important; } .badge.bg-info:not(.rounded-pill) { background: var(--evora-info-bg) !important; color: var(--evora-info-text) !important; } .badge.bg-primary:not(.rounded-pill) { background: var(--evora-primary-soft) !important; color: #3730a3 !important; } .badge.bg-secondary:not(.rounded-pill), .badge.bg-dark:not(.rounded-pill) { background: var(--evora-neutral-bg) !important; color: var(--evora-neutral-text) !important; } .badge.bg-success:not(.rounded-pill), .badge.bg-warning:not(.rounded-pill), .badge.bg-danger:not(.rounded-pill), .badge.bg-info:not(.rounded-pill), .badge.bg-primary:not(.rounded-pill), .badge.bg-secondary:not(.rounded-pill), .badge.bg-dark:not(.rounded-pill) { border-radius: 50rem; padding: .36em .75em; font-size: .74rem; } /* Status dot: color is never the only signal - the label is always there. */ .badge[class*="badge-status-"]::before, .badge.bg-success:not(.rounded-pill)::before, .badge.bg-warning:not(.rounded-pill)::before, .badge.bg-danger:not(.rounded-pill)::before, .badge.bg-info:not(.rounded-pill)::before { content: ""; display: inline-block; width: .45em; height: .45em; margin-right: .4em; border-radius: 50%; background: currentColor; vertical-align: .12em; } .badge-status-approved, .badge-status-active, .badge-status-completed { background: var(--evora-success-bg); color: var(--evora-success-text); } .badge-status-pending, .badge-status-pending_approval, .badge-status-ongoing { background: var(--evora-warning-bg); color: var(--evora-warning-text); } .badge-status-rejected, .badge-status-suspended, .badge-status-cancelled, .badge-status-failed, .badge-status-removed { background: var(--evora-danger-bg); color: var(--evora-danger-text); } .badge-status-open { background: var(--evora-info-bg); color: var(--evora-info-text); } .badge-status-refunded { background: #ede9fe; color: #5b21b6; } .badge-status-draft, .badge-status-closed, .badge-status-inactive, .badge-status-archived { background: var(--evora-neutral-bg); color: var(--evora-neutral-text); } /* ---- Tables ---- */ .table { --bs-table-hover-bg: #f7f8ff; color: var(--evora-text); margin-bottom: 0; } .table > :not(caption) > * > * { padding: .7rem .75rem; border-bottom-color: #eef0f5; } .table-sm > :not(caption) > * > * { padding: .5rem .6rem; } .card-evora table thead th, .table thead th { background: var(--evora-surface-2); color: var(--evora-text-muted); font-size: var(--evora-fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; border-bottom: 1px solid var(--evora-border); } .table-responsive { -webkit-overflow-scrolling: touch; border-radius: var(--evora-radius-sm); } .dataTables_wrapper .dataTables_filter input { min-width: 220px; padding: .4rem .75rem .4rem 2rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%235b6474' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat .7rem center; border-color: var(--evora-border-strong); } .dataTables_wrapper .dataTables_info { color: var(--evora-text-muted); font-size: var(--evora-fs-small); } .pagination { --bs-pagination-color: var(--evora-primary); --bs-pagination-active-bg: var(--evora-primary); --bs-pagination-active-border-color: var(--evora-primary); --bs-pagination-hover-color: var(--evora-primary-dark); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(79,70,229,.2); } /* ---- Forms ---- */ .form-label { font-weight: 550; color: #374151; margin-bottom: .35rem; } .form-control, .form-select { border-color: var(--evora-border-strong); min-height: 2.5rem; } .form-control-sm, .form-select-sm { min-height: 2.1rem; } textarea.form-control { min-height: auto; } .form-control::placeholder { color: #8b93a1; } .form-control:focus, .form-select:focus { border-color: var(--evora-primary-light); } .form-check-input:checked { background-color: var(--evora-primary); border-color: var(--evora-primary); } .form-check-input:focus { border-color: var(--evora-primary-light); box-shadow: 0 0 0 .2rem rgba(79,70,229,.2); } .form-text { color: var(--evora-text-muted); } .invalid-feedback { color: var(--evora-danger-text); } .was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--evora-danger); } /* ---- Navigation, dropdowns, tabs, modals, alerts ---- */ .dropdown-menu { border-color: var(--evora-border); border-radius: .75rem; box-shadow: var(--evora-shadow-lg); --bs-dropdown-link-active-bg: var(--evora-primary); } .dropdown-item { padding: .45rem 1rem; } .nav-tabs { --bs-nav-tabs-link-active-color: var(--evora-primary); border-bottom-color: var(--evora-border); } .nav-tabs .nav-link { color: var(--evora-text-muted); font-weight: 550; } .nav-tabs .nav-link.active { color: var(--evora-primary); } .progress { --bs-progress-bar-bg: var(--evora-primary); --bs-progress-bg: #eef0f5; } .list-group { --bs-list-group-border-color: var(--evora-border); --bs-list-group-active-bg: var(--evora-primary); --bs-list-group-active-border-color: var(--evora-primary); } .modal-content { border: 0; border-radius: 1rem; box-shadow: var(--evora-shadow-lg); } .modal-header, .modal-footer { border-color: var(--evora-border); } .alert { border-radius: .75rem; border-width: 1px; } .alert-success { --bs-alert-bg: var(--evora-success-bg); --bs-alert-color: var(--evora-success-text); --bs-alert-border-color: #bbf7d0; } .alert-warning { --bs-alert-bg: var(--evora-warning-bg); --bs-alert-color: var(--evora-warning-text); --bs-alert-border-color: #fde68a; } .alert-danger { --bs-alert-bg: var(--evora-danger-bg); --bs-alert-color: var(--evora-danger-text); --bs-alert-border-color: #fecaca; } .alert-info { --bs-alert-bg: var(--evora-info-bg); --bs-alert-color: var(--evora-info-text); --bs-alert-border-color: #bae6fd; } .alert-light { --bs-alert-bg: #fff; --bs-alert-border-color: var(--evora-border); } /* ---- Alerts & notices (evoraAlert() in core/helpers.php) ---- Persistence rules live in app.js: nothing hides unless it has data-autohide. */ .evora-alert { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; } .evora-alert .evora-alert-icon { flex: 0 0 auto; font-size: 1.05em; line-height: 1; } .evora-alert .evora-alert-body { flex: 1 1 16rem; min-width: 0; } .evora-alert .evora-alert-actions { display: flex; flex-wrap: wrap; gap: .5rem; flex: 0 0 auto; } .evora-alert .evora-alert-body a:not(.btn) { color: inherit; font-weight: 600; text-decoration: underline; } /* Action required: stronger edge so it reads as "do something", not as a passing message. */ .evora-alert--action { border-left: 4px solid var(--evora-warning); } .evora-alert--action.alert-danger, .evora-alert--error { border-left: 4px solid var(--evora-danger); } @media (max-width: 575.98px) { .evora-alert .evora-alert-actions { flex-basis: 100%; } } .breadcrumb { --bs-breadcrumb-divider-color: #9aa1ae; --bs-breadcrumb-item-active-color: var(--evora-text-muted); } .breadcrumb a { text-decoration: none; font-weight: 550; } .tooltip { --bs-tooltip-bg: #111827; --bs-tooltip-font-size: .8rem; } /* ---- Empty states ---- */ .empty-state .empty-state-title { font-weight: 650; color: var(--evora-heading); margin-bottom: .25rem; } .empty-state .btn { margin-top: 1rem; } /* ---- Top bar ---- */ .evora-topbar { border-bottom-color: var(--evora-border); } .evora-topbar > .d-flex:first-child { min-width: 0; } .evora-topbar h5 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Mobile sidebar: overlay + backdrop ---- */ .sidebar-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, .45); z-index: 1029; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } @media (max-width: 991.98px) { .sidebar-backdrop.show { opacity: 1; visibility: visible; } body.sidebar-open { overflow: hidden; } .evora-sidebar { width: min(280px, 84vw); } } /* ---- Responsive refinements ---- */ @media (max-width: 767.98px) { .evora-content { padding: 1rem .85rem; } .evora-topbar { padding: .65rem .85rem; } .evora-topbar .gap-3 { gap: .65rem !important; } .card-evora.p-4 { padding: 1.1rem !important; } .stat-card { padding: .9rem; } .stat-card .stat-value { font-size: 1.3rem; } .stat-card > i:first-child { width: 2rem; height: 2rem; font-size: 1rem !important; margin-bottom: .4rem; } .stat-card .stat-desc { display: none; } /* keep mobile stat tiles compact */ .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; } .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dt-buttons { text-align: left !important; } .quick-action { padding: .75rem .8rem; } .modal-dialog { margin: .75rem; } } @media (pointer: coarse) { .btn, .form-control, .form-select { min-height: 2.75rem; } /* ~44px touch targets */ .btn-sm { min-height: 2.25rem; } .evora-sidebar .nav-link { padding-top: .75rem; padding-bottom: .75rem; } } /* ---- Print: hide app chrome ---- */ @media print { .evora-sidebar, .evora-topbar, .evaluation-prompt, .sidebar-backdrop { display: none !important; } .evora-main { margin-left: 0 !important; } } /* ===================================================================== v34.1 page-level polish — built only on the v34 tokens above. ===================================================================== */ /* ---- Contrast-safe text utilities (Bootstrap's defaults are too light on white) ---- */ .text-success { color: var(--evora-success) !important; } /* #15803d 5.0:1 */ .text-warning { color: #b45309 !important; } /* amber-700 5.0:1 */ .text-danger { color: #b91c1c !important; } /* red-700 6.5:1 */ .text-info { color: #0369a1 !important; } /* sky-700 5.9:1 */ .text-primary { color: var(--evora-primary) !important; } .rating-stars { color: #f59e0b; letter-spacing: .05em; } /* decorative; the number is always shown */ /* Outline buttons in the same families (yellow/cyan text failed contrast) */ .btn-outline-warning { --bs-btn-color: #b45309; --bs-btn-border-color: #fcd34d; --bs-btn-hover-color: #92400e; --bs-btn-hover-bg: var(--evora-warning-bg); --bs-btn-hover-border-color: #f59e0b; --bs-btn-active-color: #92400e; --bs-btn-active-bg: #fde68a; --bs-btn-active-border-color: #f59e0b; } .btn-outline-info { --bs-btn-color: #0369a1; --bs-btn-border-color: #7dd3fc; --bs-btn-hover-color: #075985; --bs-btn-hover-bg: var(--evora-info-bg); --bs-btn-hover-border-color: #38bdf8; --bs-btn-active-color: #075985; --bs-btn-active-bg: #bae6fd; --bs-btn-active-border-color: #38bdf8; } .btn-outline-success { --bs-btn-color: var(--evora-success); --bs-btn-border-color: #86efac; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--evora-success); --bs-btn-hover-border-color: var(--evora-success); } .btn-outline-danger { --bs-btn-color: #b91c1c; --bs-btn-border-color: #fca5a5; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--evora-danger); --bs-btn-hover-border-color: var(--evora-danger); } .btn-warning { --bs-btn-color: #451a03; --bs-btn-bg: #fbbf24; --bs-btn-border-color: #fbbf24; --bs-btn-hover-color: #451a03; --bs-btn-hover-bg: #f59e0b; --bs-btn-hover-border-color: #f59e0b; } .btn-info { --bs-btn-color: #fff; --bs-btn-bg: var(--evora-info); --bs-btn-border-color: var(--evora-info); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0369a1; --bs-btn-hover-border-color: #0369a1; } /* Bootstrap "subtle" badges follow the same status palette */ .badge.bg-success-subtle { background: var(--evora-success-bg) !important; color: var(--evora-success-text) !important; } .badge.bg-warning-subtle { background: var(--evora-warning-bg) !important; color: var(--evora-warning-text) !important; } .badge.bg-danger-subtle { background: var(--evora-danger-bg) !important; color: var(--evora-danger-text) !important; } .badge.bg-info-subtle { background: var(--evora-info-bg) !important; color: var(--evora-info-text) !important; } .badge.bg-primary-subtle { background: var(--evora-primary-soft) !important; color: #3730a3 !important; } .badge.bg-secondary-subtle { background: var(--evora-neutral-bg) !important; color: var(--evora-neutral-text) !important; } /* ---- Page header (description + context + primary action) ---- */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1.1rem; } .page-header .page-header-text { min-width: 0; flex: 1 1 280px; } .page-header .page-description { color: var(--evora-text-muted); font-size: var(--evora-fs-body); margin: 0; max-width: 68ch; } .page-header .page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } /* ---- Action groups: primary / secondary / destructive, visually separated ---- */ .action-group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .action-group .action-divider { width: 1px; align-self: stretch; background: var(--evora-border); margin: 0 .25rem; } .action-group .action-danger-zone { margin-left: auto; } @media (max-width: 575.98px) { .action-group .action-divider { display: none; } .action-group .action-danger-zone { margin-left: 0; } } /* ---- Lifecycle stepper (payout / refund status) ---- */ .status-steps { display: flex; list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: step; } .status-steps li { flex: 1 1 0; position: relative; text-align: center; font-size: .8rem; color: var(--evora-text-muted); padding-top: 2.1rem; min-width: 0; } .status-steps li::before { /* the node */ content: ""; position: absolute; top: .35rem; left: 50%; width: 1.3rem; height: 1.3rem; margin-left: -.65rem; border-radius: 50%; background: #fff; border: 2px solid var(--evora-border-strong); z-index: 1; } .status-steps li::after { /* the connector to the previous node */ content: ""; position: absolute; top: .95rem; right: 50%; width: 100%; height: 2px; background: var(--evora-border); } .status-steps li:first-child::after { display: none; } .status-steps .step-label { display: block; font-weight: 650; color: var(--evora-text); } .status-steps .step-meta { display: block; font-size: .72rem; color: var(--evora-text-muted); overflow-wrap: anywhere; } .status-steps li.done::before { background: var(--evora-success); border-color: var(--evora-success); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.7 4.7a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4 0l-2.5-2.5a1 1 0 1 1 1.4-1.4L7 9l4.3-4.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E"); background-size: .85rem; background-position: center; background-repeat: no-repeat; } .status-steps li.done::after, .status-steps li.current::after { background: var(--evora-success); } .status-steps li.current::before { border-color: var(--evora-primary); box-shadow: 0 0 0 4px var(--evora-primary-soft); background: var(--evora-primary); } .status-steps li.current .step-label { color: var(--evora-primary); } .status-steps li.failed::before { background: var(--evora-danger); border-color: var(--evora-danger); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M4.3 4.3a1 1 0 0 1 1.4 0L8 6.6l2.3-2.3a1 1 0 1 1 1.4 1.4L9.4 8l2.3 2.3a1 1 0 0 1-1.4 1.4L8 9.4l-2.3 2.3a1 1 0 0 1-1.4-1.4L6.6 8 4.3 5.7a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E"); background-size: .85rem; background-position: center; background-repeat: no-repeat; } .status-steps li.failed .step-label { color: var(--evora-danger-text); } .status-steps li.failed::after { background: var(--evora-danger); } @media (max-width: 575.98px) { .status-steps { flex-direction: column; gap: .35rem; } .status-steps li { text-align: left; padding: 0 0 0 2rem; min-height: 1.6rem; } .status-steps li::before { top: 0; left: 0; margin-left: 0; } .status-steps li::after { display: none; } } /* ---- Money ---- */ .money { font-variant-numeric: tabular-nums; white-space: nowrap; } .money-lg { font-size: 1.6rem; font-weight: 800; color: var(--evora-heading); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .money-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; } .money-summary .money-item { border: 1px solid var(--evora-border); border-radius: var(--evora-radius-sm); padding: .8rem 1rem; background: var(--evora-surface); } .money-summary .money-item .money-label { font-size: var(--evora-fs-label); text-transform: uppercase; letter-spacing: .05em; color: var(--evora-text-muted); font-weight: 700; } .money-summary .money-item .money-value { font-size: 1.25rem; font-weight: 750; color: var(--evora-heading); font-variant-numeric: tabular-nums; } .money-summary .money-item.is-net { border-color: #bbf7d0; background: #f0fdf4; } /* ---- Participant status stack (My Registrations) ---- */ .status-stack { display: flex; flex-direction: column; gap: .3rem; } .status-stack .status-line { display: flex; align-items: center; gap: .4rem; font-size: .8rem; white-space: nowrap; } .status-stack .status-key { color: var(--evora-text-muted); width: 5.2rem; flex: 0 0 5.2rem; } /* ---- Utilities replacing repeated inline styles ---- */ .icon-xl { font-size: 3rem; line-height: 1; } .progress-thin { height: 8px; } .mw-form { max-width: 640px; } .mw-form-lg { max-width: 800px; } .w-80px { width: 80px; } .w-120px { width: 120px; } .avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; } .avatar-30 { width: 30px; height: 30px; } .avatar-42 { width: 42px; height: 42px; } .avatar-56 { width: 56px; height: 56px; } .avatar-72 { width: 72px; height: 72px; } .legend-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -.1em; } .legend-swatch.is-event { background: var(--evora-primary); } .legend-swatch.is-deadline { background: var(--evora-danger); } .event-cover-placeholder { height: 160px; background: linear-gradient(135deg, #1e1b4b, var(--evora-primary)); border-radius: .75rem .75rem 0 0; } .frame-bordered { border: 1px solid var(--evora-border); border-radius: .5rem; overflow: hidden; } .nowrap { white-space: nowrap; } /* ---- v34.1 responsive fixes found by the 375px overflow check ---- */ /* The top bar title is an

since v34: let it shrink with an ellipsis. */ .evora-topbar > .d-flex:first-child { min-width: 0; flex: 1 1 auto; } .evora-topbar > .d-flex:last-child { flex-shrink: 0; } .evora-topbar h1 { font-size: var(--evora-fs-page); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; letter-spacing: -.015em; } /* Long unbroken names (events, references) wrap instead of widening the page. */ .card-evora h5, .card-evora h6, .card-evora .fw-semibold, .card-evora dd, .page-description { overflow-wrap: anywhere; } /* Filter button groups wrap on phones. */ @media (max-width: 575.98px) { .card-evora .btn-group { flex-wrap: wrap; } .card-evora .btn-group > .btn { flex: 0 0 auto; } } /* Headings, list items and paragraphs in pages wrap long unbroken text (event names, file paths, references). */ main h1, main h2, main h3, main h4, main h5, main h6, .card-evora li, .card-evora p { overflow-wrap: anywhere; } /* ===================================================================== v34.2 specialized modules (sports, match center, race, seminar). Built only on the v34 tokens; markup helpers live in modules/shared/partials/sports_ui.php. ===================================================================== */ /* ---- Match lifecycle badges: Scheduled -> Live (Paused) -> Completed / Cancelled ---- */ .badge-status-scheduled { background: var(--evora-info-bg); color: var(--evora-info-text); } .badge-status-live { background: var(--evora-danger-bg); color: var(--evora-danger-text); } .badge-status-paused { background: var(--evora-warning-bg); color: var(--evora-warning-text); } .badge-status-scheduled, .badge-status-live, .badge-status-paused { border-radius: 50rem; padding: .36em .75em; font-size: .74rem; } .badge-status-live::before { animation: evora-live-pulse 1.4s ease-in-out infinite; } @keyframes evora-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .badge-status-live::before { animation: none; } } /* ---- Module overview card (tournament / race / seminar summary) ---- */ .module-overview { padding: 1.25rem 1.5rem; margin-bottom: 1rem; } .module-overview-head { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; } .module-overview-icon { width: 2.6rem; height: 2.6rem; border-radius: .75rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--evora-primary-soft); color: var(--evora-primary); font-size: 1.2rem; } .module-overview-title { min-width: 0; flex: 1 1 220px; } .module-overview-title h2 { color: var(--evora-heading); overflow-wrap: anywhere; } .module-overview-meta { color: var(--evora-text-muted); font-size: var(--evora-fs-small); display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; } .module-overview-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .75rem; margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--evora-border); } .module-stat dt { font-size: var(--evora-fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--evora-text-muted); } .module-stat dd { margin: .2rem 0 0; font-size: 1.4rem; font-weight: 800; color: var(--evora-heading); font-variant-numeric: tabular-nums; line-height: 1.15; } .module-stat-hint { font-size: .75rem; color: var(--evora-text-muted); margin-top: .1rem; } .module-stat.tone-success dd { color: var(--evora-success); } .module-stat.tone-warning dd { color: #b45309; } .module-stat.tone-danger dd { color: #b91c1c; } .module-stat.tone-info dd { color: #0369a1; } .module-stat.tone-primary dd { color: var(--evora-primary); } @media (max-width: 575.98px) { .module-overview { padding: 1rem; } .module-overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- Match card ---- */ .match-card { display: block; position: relative; background: var(--evora-surface); border: 1px solid var(--evora-border); border-radius: var(--evora-radius-sm); padding: .8rem .95rem; box-shadow: var(--evora-shadow-sm); color: var(--evora-text); } .match-card.is-live { border-color: #fca5a5; box-shadow: inset 3px 0 0 var(--evora-danger), var(--evora-shadow-sm); } .match-card.is-paused { box-shadow: inset 3px 0 0 var(--evora-warning), var(--evora-shadow-sm); } .match-card.is-cancelled { opacity: .75; } .match-card.is-current { outline: 2px solid var(--evora-primary); outline-offset: 1px; } a.match-card-link { text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; } a.match-card-link:hover { box-shadow: var(--evora-shadow-md); transform: translateY(-1px); color: var(--evora-text); } a.match-card-link.is-live:hover { box-shadow: inset 3px 0 0 var(--evora-danger), var(--evora-shadow-md); } .match-card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; } .match-no { font-size: var(--evora-fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--evora-text-muted); } .match-side { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .15rem 0; } .match-team { min-width: 0; overflow-wrap: anywhere; } .match-side.is-tbd .match-team { color: var(--evora-text-muted); font-style: italic; } .match-score { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; color: var(--evora-heading); } .match-side.is-winner .match-team, .match-side.is-winner .match-score { font-weight: 800; color: var(--evora-heading); } .match-winner-icon { color: #b45309; font-size: .8em; } .match-vs { display: flex; align-items: center; gap: .5rem; font-size: .65rem; font-weight: 700; letter-spacing: .1em; color: var(--evora-text-muted); margin: .1rem 0; } .match-vs::before, .match-vs::after { content: ""; flex: 1; border-top: 1px dashed var(--evora-border-strong); } .match-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; padding-top: .5rem; border-top: 1px solid var(--evora-border); font-size: .78rem; color: var(--evora-text-muted); } .match-meta-sep { opacity: .6; } .match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .85rem; } /* ---- Bracket: rounds side by side, stacked on phones ---- */ .bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 2rem; overflow-x: auto; padding-bottom: .5rem; } .bracket-round { display: flex; flex-direction: column; min-width: 0; } .bracket-round-head { text-align: center; margin-bottom: .85rem; } .bracket-round-name { font-size: .85rem; font-weight: 700; color: var(--evora-heading); } .bracket-round-count { font-size: .75rem; color: var(--evora-text-muted); } .bracket-round-body { display: flex; flex-direction: column; justify-content: space-around; gap: .85rem; flex: 1; } .bracket-round:not(:last-child) .match-card::after { content: ""; position: absolute; top: 50%; right: -2rem; width: 2rem; border-top: 2px solid var(--evora-border-strong); } .bracket-round.is-final .match-card { border-color: #c7d2fe; } @media (max-width: 767.98px) { .bracket { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; gap: 1.25rem; overflow-x: visible; } .bracket-round-head { text-align: left; display: flex; gap: .5rem; align-items: baseline; border-bottom: 1px solid var(--evora-border); padding-bottom: .35rem; } .bracket-round:not(:last-child) .match-card::after { display: none; } } /* ---- Rank cells (standings, race results) ---- */ .rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; border-radius: 50rem; font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums; background: var(--evora-neutral-bg); color: var(--evora-neutral-text); } .rank-badge.rank-1 { background: #fef3c7; color: #92400e; } .rank-badge.rank-2 { background: #e2e8f0; color: #334155; } .rank-badge.rank-3 { background: #ffedd5; color: #9a3412; } .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; } .table td.num-strong { font-weight: 800; color: var(--evora-heading); } /* ---- Scoreboard header (Match Center / live scoreboard / game controller) ---- */ .scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 1rem; text-align: center; padding: 1.25rem 1rem; border-radius: var(--evora-radius-sm); background: var(--evora-bg); border: 1px solid var(--evora-border); } .scoreboard.is-live { background: #fff7f7; border-color: #fca5a5; } .scoreboard-team { min-width: 0; } .scoreboard-name { font-weight: 700; color: var(--evora-heading); overflow-wrap: anywhere; line-height: 1.25; } .scoreboard-score { font-size: clamp(2.25rem, 7vw, 3.5rem); font-weight: 800; line-height: 1; color: var(--evora-heading); font-variant-numeric: tabular-nums; margin-top: .35rem; } .scoreboard-team.is-winner .scoreboard-score { color: var(--evora-success); } .scoreboard-vs { align-self: center; font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: var(--evora-text-muted); } .scoreboard-sub { font-size: .8rem; color: var(--evora-text-muted); margin-top: .35rem; } .scoreboard-lg .scoreboard-score { font-size: clamp(2.75rem, 10vw, 4.5rem); } .score-input { width: 4.75rem; } .live-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--evora-danger); margin-right: .35rem; animation: evora-live-pulse 1.4s ease-in-out infinite; vertical-align: .05em; } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } /* ---- Race: podium + filters ---- */ .podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } .podium-place { border: 1px solid var(--evora-border); border-radius: var(--evora-radius-sm); padding: .9rem; text-align: center; background: var(--evora-surface); } .podium-place.place-1 { border-color: #fcd34d; background: #fffbeb; } .podium-place .podium-medal { font-size: 1.4rem; } .podium-place.place-1 .podium-medal { color: #b45309; } .podium-place.place-2 .podium-medal { color: #64748b; } .podium-place.place-3 .podium-medal { color: #c2410c; } .podium-label { font-size: var(--evora-fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--evora-text-muted); } .podium-name { font-weight: 700; color: var(--evora-heading); overflow-wrap: anywhere; margin-top: .2rem; } .podium-time { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--evora-heading); } .podium-meta { font-size: .78rem; color: var(--evora-text-muted); } @media (max-width: 575.98px) { .podium { grid-template-columns: 1fr; gap: .5rem; } .podium-place { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "medal label time" "medal name time" "medal meta time"; column-gap: .75rem; align-items: center; text-align: left; padding: .6rem .8rem; } .podium-medal { grid-area: medal; } .podium-label { grid-area: label; } .podium-name { grid-area: name; margin-top: 0; } .podium-time { grid-area: time; } .podium-meta { grid-area: meta; } } .filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .85rem; } .filter-bar .form-control, .filter-bar .form-select { width: auto; flex: 1 1 160px; max-width: 260px; } .filter-count { font-size: var(--evora-fs-small); color: var(--evora-text-muted); margin-left: auto; } .scroll-y-320 { max-height: 320px; overflow-y: auto; } .scroll-y-420 { max-height: 420px; overflow-y: auto; } .min-w-200 { min-width: 200px; } .min-w-0 { min-width: 0; } /* ---- Seminar: session + speaker cards, attendance bars ---- */ .session-card, .speaker-card { background: var(--evora-surface); border: 1px solid var(--evora-border); border-radius: var(--evora-radius-sm); padding: 1rem; height: 100%; display: flex; flex-direction: column; gap: .5rem; box-shadow: var(--evora-shadow-sm); } .session-card.is-ongoing { box-shadow: inset 3px 0 0 var(--evora-danger), var(--evora-shadow-sm); } .session-card.is-cancelled { opacity: .75; } .session-card-head { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; } .session-title { font-weight: 700; color: var(--evora-heading); overflow-wrap: anywhere; margin: 0; font-size: .975rem; } .session-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; font-size: .85rem; color: var(--evora-text); } .session-facts i { color: var(--evora-text-muted); width: 1.1rem; display: inline-block; } .session-card-foot { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--evora-border); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; } .speaker-head { display: flex; gap: .85rem; align-items: center; } .speaker-initials { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--evora-primary-soft); color: var(--evora-primary); font-weight: 800; font-size: 1.05rem; } .speaker-name { font-weight: 700; color: var(--evora-heading); overflow-wrap: anywhere; } .speaker-role { font-size: .82rem; color: var(--evora-text-muted); overflow-wrap: anywhere; } .speaker-topic { display: inline-block; background: var(--evora-primary-soft); color: #3730a3; border-radius: .5rem; padding: .2rem .55rem; font-size: .8rem; font-weight: 600; overflow-wrap: anywhere; } .speaker-bio { font-size: .85rem; color: var(--evora-text); margin: 0; } .speaker-card-foot { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--evora-border); display: flex; gap: .4rem; flex-wrap: wrap; } .attendance-row { padding: .55rem 0; border-bottom: 1px solid var(--evora-border); } .attendance-row:last-child { border-bottom: 0; } .attendance-row-head { display: flex; justify-content: space-between; gap: .75rem; font-size: .875rem; } .attendance-row-title { min-width: 0; overflow-wrap: anywhere; } .attendance-row-figure { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .attendance-row .progress { margin-top: .35rem; } .qr-reader-box { width: 100%; } .speaker-initials.avatar-30 { width: 30px; height: 30px; font-size: .7rem; } .route-thumb { width: 100%; height: 140px; object-fit: cover; } .mw-320 { max-width: 320px; } .bracket:focus-visible { outline: 2px solid var(--evora-primary); outline-offset: 4px; border-radius: var(--evora-radius-sm); } /* ===================================================================== v30.2 refund guidance (built on the v34 tokens) ===================================================================== */ .refund-destination { background: var(--evora-info-bg); color: var(--evora-info-text); border-radius: var(--evora-radius-sm); padding: .75rem .9rem; } .refund-destination p { color: var(--evora-text); } .refund-guide { list-style: none; counter-reset: rguide; padding: 0; margin: 0; display: grid; gap: .6rem; } .refund-guide li { counter-increment: rguide; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: .6rem; } .refund-guide li::before { content: counter(rguide); grid-row: span 2; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; background: var(--evora-primary-soft); color: var(--evora-primary); } .refund-guide-title { font-weight: 650; font-size: .875rem; color: var(--evora-heading); } .refund-guide-text { font-size: .8125rem; color: var(--evora-text-muted); overflow-wrap: anywhere; } .refund-note { font-size: .8125rem; color: var(--evora-text-muted); margin-top: .15rem; overflow-wrap: anywhere; } .impact-negative { color: #b91c1c; } /* ===================================================================== Staff QR scanner (camera fix) — built on the v34 tokens ===================================================================== */ .scanner-frame { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 4 / 3; background: #111827; border-radius: var(--evora-radius-sm); overflow: hidden; } .scanner-frame #qr-reader { width: 100%; height: 100%; border: 0 !important; } .scanner-frame #qr-reader video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .scanner-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: #cbd5e1; font-size: .875rem; pointer-events: none; } .scanner-placeholder i { font-size: 3rem; } .scanner-placeholder::after { content: ""; position: absolute; width: 58%; aspect-ratio: 1; border: 2px dashed rgba(203, 213, 225, .55); border-radius: .75rem; } #staffScanner.camera-on .scanner-placeholder { display: none; } .scanner-status { border-radius: var(--evora-radius-sm); padding: .75rem .9rem; border: 1px solid var(--evora-border); background: var(--evora-bg); } .scanner-status-title { font-weight: 650; color: var(--evora-heading); } .scanner-status-text { font-size: .85rem; color: var(--evora-text); margin-top: .15rem; } .scanner-status.is-success { background: var(--evora-success-bg); border-color: #86efac; } .scanner-status.is-success .scanner-status-title { color: var(--evora-success-text); } .scanner-status.is-warning { background: var(--evora-warning-bg); border-color: #fcd34d; } .scanner-status.is-warning .scanner-status-title { color: var(--evora-warning-text); } .scanner-status.is-danger { background: var(--evora-danger-bg); border-color: #fca5a5; } .scanner-status.is-danger .scanner-status-title { color: var(--evora-danger-text); } .scanner-status.is-info { background: var(--evora-info-bg); border-color: #7dd3fc; } .scanner-status.is-info .scanner-status-title { color: var(--evora-info-text); } .scan-result { margin-top: .9rem; border-radius: var(--evora-radius-sm); padding: 1rem; border: 2px solid var(--evora-border); background: var(--evora-surface); } .scan-result.is-success { border-color: var(--evora-success); background: #f0fdf4; } .scan-result.is-warning { border-color: #f59e0b; background: #fffbeb; } .scan-result.is-danger { border-color: #dc2626; background: #fef2f2; } .scan-result.is-info { border-color: #38bdf8; background: #f0f9ff; } .scan-result-title { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; } .scan-result.is-success .scan-result-title { color: var(--evora-success-text); } .scan-result.is-warning .scan-result-title { color: var(--evora-warning-text); } .scan-result.is-danger .scan-result-title { color: var(--evora-danger-text); } .scan-result.is-info .scan-result-title { color: var(--evora-info-text); } .scan-result-message { margin: .35rem 0 .6rem; font-size: .9rem; } .scan-result-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .9rem; font-size: .875rem; margin-bottom: .75rem; } .scan-result-facts dt { font-weight: 600; color: var(--evora-text-muted); } .scan-result-facts dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--evora-heading); } .recent-scans { display: grid; gap: .1rem; } .recent-scan { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--evora-border); } .recent-scan:last-child { border-bottom: 0; } .recent-scan .badge { flex-shrink: 0; margin-top: .15rem; } .recent-scan-body { min-width: 0; overflow-wrap: anywhere; } /* ===================================================================== Payout accountability (deadline, receipt, disputes, agreement) ===================================================================== */ .payout-overdue { border: 2px solid #dc2626; background: #fef2f2; border-radius: var(--evora-radius-sm); padding: .9rem 1rem; color: var(--evora-text); } .payout-overdue-title { font-weight: 800; letter-spacing: .06em; color: var(--evora-danger-text); font-size: 1.05rem; } .payout-sent { border-left: 4px solid var(--evora-primary); } .dispute-timeline { list-style: none; padding: 0 0 0 1.1rem; margin: 0; border-left: 2px solid var(--evora-border); display: grid; gap: .85rem; } .dispute-event { position: relative; padding: .6rem .8rem; border: 1px solid var(--evora-border); border-radius: var(--evora-radius-sm); background: var(--evora-surface); } .dispute-event::before { content: ""; position: absolute; left: -1.55rem; top: .9rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--evora-border-strong); border: 2px solid var(--evora-surface); } .dispute-event.is-organizer::before { background: #0284c7; } .dispute-event.is-admin::before { background: var(--evora-primary); } .dispute-event.is-correction { border-color: #86efac; background: #f0fdf4; } .dispute-event-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .dispute-event-body { font-size: .875rem; margin-top: .3rem; overflow-wrap: anywhere; } .dispute-decision { border-top: 1px solid var(--evora-border); padding-top: .9rem; } .agreement-text { max-height: 420px; overflow-y: auto; border: 1px solid var(--evora-border); border-radius: var(--evora-radius-sm); padding: 1rem; background: var(--evora-bg); font-size: .875rem; line-height: 1.55; overflow-wrap: anywhere; } .agreement-text:focus-visible { outline: 2px solid var(--evora-primary); outline-offset: 2px; } .operator-card { border: 1px dashed var(--evora-border-strong); border-radius: var(--evora-radius-sm); padding: .75rem .9rem; overflow-wrap: anywhere; } /* Long menu labels (e.g. "Organizer PayPal Accounts") wrap onto a second line instead of being cut off. */ .evora-sidebar .nav-link .nav-label { white-space: normal; line-height: 1.25; } /* ===================================================================== Night mode (v44) themeInit() (core/helpers.php) puts data-theme="dark" + data-bs-theme="dark" on (saved choice, else the device setting). Tokens are redefined here; the rules below only cover components that use a fixed light color instead of a token. ===================================================================== */ .theme-toggle { line-height: 1; color: var(--evora-text); background: transparent; border: 0; } .theme-toggle:hover { color: var(--evora-primary); } .theme-toggle i { font-size: 1.15rem; } .theme-toggle-nav { color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: .375rem; padding: .25rem .55rem; } .theme-toggle-nav:hover { color: #fff; background: rgba(255,255,255,.12); } .theme-toggle-nav i { font-size: .95rem; } .theme-toggle-float { position: fixed; top: 14px; right: 14px; z-index: 1050; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--evora-surface); color: var(--evora-text); border: 1px solid var(--evora-border); box-shadow: var(--evora-shadow-md); } @media print { .theme-toggle { display: none !important; } } :root[data-theme="dark"] { color-scheme: dark; --evora-primary: #818cf8; --evora-primary-dark: #a5b4fc; --evora-primary-light: #6366f1; --evora-primary-soft: rgba(129,140,248,.14); --evora-accent: #22d3ee; --evora-accent-text: #67e8f9; --evora-bg: #0f1117; --evora-surface: #171a23; --evora-surface-2: #1d212c; --evora-border: #2a2f3c; --evora-border-strong: #3a4050; --evora-text: #e5e7eb; --evora-heading: #f3f4f6; --evora-text-muted: #9aa3b2; --evora-success: #4ade80; --evora-success-bg: rgba(34,197,94,.15); --evora-success-text: #86efac; --evora-warning: #fbbf24; --evora-warning-bg: rgba(245,158,11,.15); --evora-warning-text: #fcd34d; --evora-danger: #f87171; --evora-danger-bg: rgba(239,68,68,.15); --evora-danger-text: #fca5a5; --evora-info: #38bdf8; --evora-info-bg: rgba(14,165,233,.15); --evora-info-text: #7dd3fc; --evora-neutral: #94a3b8; --evora-neutral-bg: rgba(148,163,184,.14); --evora-neutral-text: #cbd5e1; --bs-primary: #818cf8; --bs-primary-rgb: 129, 140, 248; --bs-primary-text-emphasis: #c7d2fe; --bs-primary-bg-subtle: rgba(129,140,248,.14); --bs-primary-border-subtle: #3730a3; --bs-link-color: #a5b4fc; --bs-link-color-rgb: 165, 180, 252; --bs-link-hover-color: #c7d2fe; --bs-link-hover-color-rgb: 199, 210, 254; --bs-success: #22c55e; --bs-success-rgb: 34, 197, 94; --bs-danger: #ef4444; --bs-danger-rgb: 239, 68, 68; --bs-body-color: #e5e7eb; --bs-body-color-rgb: 229, 231, 235; --bs-body-bg: #0f1117; --bs-body-bg-rgb: 15, 17, 23; --bs-emphasis-color: #f9fafb; --bs-secondary-color: #9aa3b2; --bs-secondary-bg: #1d212c; --bs-tertiary-bg: #1d212c; --bs-border-color: #2a2f3c; --bs-heading-color: #f3f4f6; --bs-focus-ring-color: rgba(129,140,248,.35); --evora-sidebar-bg: #12111f; --evora-sidebar-hover: #24224a; --evora-shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3); --evora-shadow-md: 0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3); --evora-shadow-lg: 0 12px 32px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.35); --evora-gradient-sidebar: linear-gradient(180deg, #16142c 0%, #12111f 45%, #0d0c18 100%); scrollbar-color: #3a4050 transparent; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a4050; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4b5265; } [data-theme="dark"] body { color: var(--evora-text); } [data-theme="dark"] ::selection { background: #3730a3; color: #fff; } /* Surfaces that used a fixed white */ [data-theme="dark"] .evora-topbar { background: rgba(23,26,35,.85); } [data-theme="dark"] .evora-topbar h5, [data-theme="dark"] .stat-card .stat-value { color: var(--evora-heading); } [data-theme="dark"] .stat-card, [data-theme="dark"] .card-evora, [data-theme="dark"] .event-type-card, [data-theme="dark"] .auth-card, [data-theme="dark"] .evaluation-prompt, [data-theme="dark"] .account-menu { background: var(--evora-surface); border-color: var(--evora-border); } [data-theme="dark"] .card { --bs-card-bg: var(--evora-surface); --bs-card-border-color: var(--evora-border); --bs-card-cap-bg: var(--evora-surface-2); } [data-theme="dark"] .modal { --bs-modal-bg: var(--evora-surface); } [data-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--evora-surface); --bs-dropdown-border-color: var(--evora-border); --bs-dropdown-link-hover-bg: var(--evora-surface-2); } [data-theme="dark"] .list-group { --bs-list-group-bg: var(--evora-surface); --bs-list-group-border-color: var(--evora-border); --bs-list-group-action-hover-bg: var(--evora-surface-2); } [data-theme="dark"] .offcanvas { --bs-offcanvas-bg: var(--evora-surface); } [data-theme="dark"] .accordion { --bs-accordion-bg: var(--evora-surface); --bs-accordion-border-color: var(--evora-border); --bs-accordion-active-bg: var(--evora-primary-soft); --bs-accordion-active-color: #c7d2fe; } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background-color: var(--evora-surface) !important; } [data-theme="dark"] .bg-body-tertiary, [data-theme="dark"] .bg-body-secondary { background-color: var(--evora-surface-2) !important; } [data-theme="dark"] .text-dark, [data-theme="dark"] .text-body, [data-theme="dark"] .text-black, [data-theme="dark"] .link-dark { color: var(--evora-text) !important; } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--evora-border) !important; } [data-theme="dark"] .text-muted { color: var(--evora-text-muted) !important; } /* Tables */ [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--evora-text); --bs-table-hover-bg: rgba(129,140,248,.07); --bs-table-hover-color: var(--evora-text); --bs-table-striped-bg: rgba(255,255,255,.025); --bs-table-striped-color: var(--evora-text); --bs-table-border-color: var(--evora-border); } [data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--evora-border); } [data-theme="dark"] .table-light { --bs-table-bg: var(--evora-surface-2); --bs-table-color: var(--evora-text); --bs-table-border-color: var(--evora-border); } [data-theme="dark"] .card-evora table thead th { background: var(--evora-surface-2); border-bottom-color: var(--evora-border); } [data-theme="dark"] .card-evora table tbody tr:hover { background: rgba(129,140,248,.07); } [data-theme="dark"] .dataTables_wrapper .dataTables_filter input, [data-theme="dark"] .dataTables_wrapper .dataTables_length select { background-color: var(--evora-surface-2); border-color: var(--evora-border-strong); color: var(--evora-text); } [data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%239aa3b2' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E"); } [data-theme="dark"] .pending-row, [data-theme="dark"] .account-tabs { border-color: var(--evora-border); } /* Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .input-group-text { background-color: var(--evora-surface-2); border-color: var(--evora-border-strong); color: var(--evora-text); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--evora-surface-2); color: var(--evora-text); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: #232835; } [data-theme="dark"] .form-check-input { background-color: var(--evora-surface-2); border-color: #4b5265; } [data-theme="dark"] .form-check-input:checked { background-color: #4f46e5; border-color: #4f46e5; } [data-theme="dark"] .form-label { color: #d1d5db; } [data-theme="dark"] .form-control::placeholder { color: #6b7385; } [data-theme="dark"] .progress { --bs-progress-bg: var(--evora-surface-2); } /* Buttons (filled buttons keep the light-mode fill so white text stays readable) */ [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-light { --bs-btn-color: #d1d5db; --bs-btn-bg: transparent; --bs-btn-border-color: var(--evora-border-strong); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #262b38; --bs-btn-hover-border-color: #4b5265; --bs-btn-active-color: #fff; --bs-btn-active-bg: #2e3443; --bs-btn-active-border-color: #4b5265; } [data-theme="dark"] .navbar .btn-light, [data-theme="dark"] .home-hero .btn-light, [data-theme="dark"] .organizer-band .btn-light { --bs-btn-color: #111827; --bs-btn-bg: #f8f9fa; --bs-btn-border-color: #f8f9fa; --bs-btn-hover-color: #111827; --bs-btn-hover-bg: #e5e7eb; --bs-btn-hover-border-color: #e5e7eb; } [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-evora-primary { --bs-btn-bg: #4f46e5; --bs-btn-border-color: #4f46e5; --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; } [data-theme="dark"] .btn-outline-primary { --bs-btn-color: #a5b4fc; --bs-btn-border-color: #4f46e5; --bs-btn-hover-bg: #4f46e5; --bs-btn-hover-border-color: #4f46e5; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #4338ca; --bs-btn-active-color: #fff; } [data-theme="dark"] .btn-success { --bs-btn-bg: #15803d; --bs-btn-border-color: #15803d; --bs-btn-color: #fff; } [data-theme="dark"] .btn-danger { --bs-btn-bg: #dc2626; --bs-btn-border-color: #dc2626; --bs-btn-color: #fff; } [data-theme="dark"] .btn-info { --bs-btn-bg: #0284c7; --bs-btn-border-color: #0284c7; } [data-theme="dark"] .btn-outline-warning { --bs-btn-color: #fbbf24; --bs-btn-border-color: #92400e; --bs-btn-hover-color: #fde68a; --bs-btn-active-color: #fde68a; --bs-btn-active-bg: rgba(245,158,11,.25); } [data-theme="dark"] .btn-outline-info { --bs-btn-color: #7dd3fc; --bs-btn-border-color: #075985; --bs-btn-hover-color: #bae6fd; --bs-btn-active-color: #bae6fd; --bs-btn-active-bg: rgba(14,165,233,.25); } [data-theme="dark"] .btn-outline-success { --bs-btn-color: #4ade80; --bs-btn-border-color: #166534; --bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d; } [data-theme="dark"] .btn-outline-danger { --bs-btn-color: #fca5a5; --bs-btn-border-color: #991b1b; --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; } [data-theme="dark"] .btn-outline-dark { --bs-btn-color: #e5e7eb; --bs-btn-border-color: #4b5265; --bs-btn-hover-bg: #e5e7eb; --bs-btn-hover-color: #111827; } /* Text, badges, alerts */ [data-theme="dark"] .text-warning { color: #fbbf24 !important; } [data-theme="dark"] .text-danger { color: #f87171 !important; } [data-theme="dark"] .text-info { color: #38bdf8 !important; } [data-theme="dark"] .text-primary { color: #a5b4fc !important; } [data-theme="dark"] .badge.bg-primary:not(.rounded-pill), [data-theme="dark"] .badge.bg-primary-subtle, [data-theme="dark"] .speaker-topic { color: #c7d2fe !important; } [data-theme="dark"] .badge.bg-light { background-color: var(--evora-surface-2) !important; } [data-theme="dark"] .badge-status-pending, [data-theme="dark"] .badge-status-pending_approval, [data-theme="dark"] .badge-status-ongoing { background: rgba(245,158,11,.18); color: #fcd34d; } [data-theme="dark"] .badge-status-approved, [data-theme="dark"] .badge-status-active, [data-theme="dark"] .badge-status-completed { background: rgba(34,197,94,.18); color: #86efac; } [data-theme="dark"] .badge-status-rejected, [data-theme="dark"] .badge-status-suspended, [data-theme="dark"] .badge-status-cancelled, [data-theme="dark"] .badge-status-failed, [data-theme="dark"] .badge-status-removed { background: rgba(239,68,68,.18); color: #fca5a5; } [data-theme="dark"] .badge-status-archived, [data-theme="dark"] .badge-status-inactive, [data-theme="dark"] .badge-status-draft, [data-theme="dark"] .badge-status-closed { background: rgba(148,163,184,.16); color: #cbd5e1; } [data-theme="dark"] .badge-status-open { background: rgba(59,130,246,.18); color: #93c5fd; } [data-theme="dark"] .badge-status-refunded { background: rgba(139,92,246,.2); color: #c4b5fd; } [data-theme="dark"] .alert-success { --bs-alert-border-color: #166534; } [data-theme="dark"] .alert-warning { --bs-alert-border-color: #92400e; } [data-theme="dark"] .alert-danger { --bs-alert-border-color: #991b1b; } [data-theme="dark"] .alert-info { --bs-alert-border-color: #075985; } [data-theme="dark"] .alert-light { --bs-alert-bg: var(--evora-surface); --bs-alert-color: var(--evora-text); } [data-theme="dark"] .alert-secondary { --bs-alert-bg: var(--evora-surface-2); --bs-alert-color: var(--evora-text); --bs-alert-border-color: var(--evora-border); } /* Menus, notifications, account */ [data-theme="dark"] .notif-unread { background: rgba(129,140,248,.1); } [data-theme="dark"] .account-menu-header { background: linear-gradient(135deg, #1e1b4b, #171a23); } [data-theme="dark"] .account-menu-item i { color: #a5b4fc; } [data-theme="dark"] .account-menu-item:hover, [data-theme="dark"] .account-menu-item:focus { background: rgba(129,140,248,.1); } [data-theme="dark"] .account-tabs .nav-link { color: #9aa3b2; } [data-theme="dark"] .account-tabs .nav-link:hover, [data-theme="dark"] .account-tabs .nav-link.active { color: #a5b4fc; border-bottom-color: #a5b4fc; } [data-theme="dark"] .account-dl dt { color: var(--evora-text-muted); } [data-theme="dark"] .quick-action:hover, [data-theme="dark"] .quick-action:focus-visible { border-color: #3730a3; } [data-theme="dark"] .quick-action.qa-primary { background: #4f46e5; border-color: #4f46e5; } [data-theme="dark"] .quick-action.qa-primary:hover, [data-theme="dark"] .quick-action.qa-primary:focus-visible { background: #4338ca; } [data-theme="dark"] .tooltip { --bs-tooltip-bg: #e5e7eb; --bs-tooltip-color: #111827; } [data-theme="dark"] .nav-tabs { --bs-nav-tabs-link-active-bg: var(--evora-surface); --bs-nav-tabs-link-active-color: var(--evora-text); --bs-nav-tabs-border-color: var(--evora-border); --bs-nav-tabs-link-active-border-color: var(--evora-border) var(--evora-border) var(--evora-surface); } [data-theme="dark"] .nav-pills { --bs-nav-pills-link-active-bg: #4f46e5; } [data-theme="dark"] .pagination { --bs-pagination-bg: var(--evora-surface); --bs-pagination-border-color: var(--evora-border); --bs-pagination-disabled-bg: var(--evora-surface); --bs-pagination-disabled-border-color: var(--evora-border); --bs-pagination-hover-bg: var(--evora-surface-2); --bs-pagination-hover-border-color: var(--evora-border); --bs-pagination-active-bg: #4f46e5; --bs-pagination-active-border-color: #4f46e5; } /* Tinted status blocks */ [data-theme="dark"] .status-steps li::before { background-color: var(--evora-surface); } [data-theme="dark"] .status-steps li.done::before { background-color: #15803d; } [data-theme="dark"] .status-steps li.current::before { background-color: #4f46e5; } [data-theme="dark"] .status-steps li.failed::before { background-color: #dc2626; } [data-theme="dark"] .money-summary .money-item.is-net { border-color: #166534; background: rgba(34,197,94,.1); } [data-theme="dark"] .module-stat.tone-warning dd, [data-theme="dark"] .match-winner-icon, [data-theme="dark"] .podium-place.place-1 .podium-medal { color: #fbbf24; } [data-theme="dark"] .module-stat.tone-danger dd, [data-theme="dark"] .impact-negative { color: #f87171; } [data-theme="dark"] .module-stat.tone-info dd { color: #38bdf8; } [data-theme="dark"] .match-card.is-live { border-color: #991b1b; } [data-theme="dark"] .bracket-round.is-final .match-card { border-color: #3730a3; } [data-theme="dark"] .rank-badge.rank-1 { background: rgba(245,158,11,.2); color: #fcd34d; } [data-theme="dark"] .rank-badge.rank-2 { background: rgba(148,163,184,.2); color: #e2e8f0; } [data-theme="dark"] .rank-badge.rank-3 { background: rgba(249,115,22,.2); color: #fdba74; } [data-theme="dark"] .scoreboard.is-live { background: rgba(239,68,68,.08); border-color: #991b1b; } [data-theme="dark"] .podium-place.place-1 { border-color: #92400e; background: rgba(245,158,11,.08); } [data-theme="dark"] .podium-place.place-3 .podium-medal { color: #fb923c; } [data-theme="dark"] .scanner-status.is-success { border-color: #166534; } [data-theme="dark"] .scanner-status.is-warning { border-color: #92400e; } [data-theme="dark"] .scanner-status.is-danger { border-color: #991b1b; } [data-theme="dark"] .scanner-status.is-info { border-color: #075985; } [data-theme="dark"] .scan-result.is-success { background: rgba(34,197,94,.1); } [data-theme="dark"] .scan-result.is-warning { background: rgba(245,158,11,.1); } [data-theme="dark"] .scan-result.is-danger { background: rgba(239,68,68,.1); } [data-theme="dark"] .scan-result.is-info { background: rgba(14,165,233,.1); } [data-theme="dark"] .payout-overdue { background: rgba(239,68,68,.1); border-color: #b91c1c; } [data-theme="dark"] .dispute-event.is-correction { border-color: #166534; background: rgba(34,197,94,.1); } /* Filled primary surfaces keep the deeper indigo so white text stays readable (>= 4.5:1). */ [data-theme="dark"] .btn-evora-primary, [data-theme="dark"] .btn-evora-primary:hover { border-color: #4f46e5; } [data-theme="dark"] .skip-link, [data-theme="dark"] .step-num { background: #4f46e5; } [data-theme="dark"] .dropdown-menu { --bs-dropdown-link-active-bg: #4f46e5; } [data-theme="dark"] .list-group { --bs-list-group-active-bg: #4f46e5; --bs-list-group-active-border-color: #4f46e5; } [data-theme="dark"] .progress { --bs-progress-bar-bg: #6366f1; } /* Floating labels: the placeholder stays hidden behind the label, and the label chip matches the field. */ [data-theme="dark"] .form-floating > .form-control::placeholder { color: transparent; } [data-theme="dark"] .form-floating > .form-control:focus ~ label::after, [data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after, [data-theme="dark"] .form-floating > .form-select ~ label::after { background-color: var(--evora-surface-2); } /* ===================================================================== Phones (v46) - A table too wide for the screen becomes a stack of cards (app.js adds .table-stack and a data-label with the column name to every cell), so nothing hides off to the right. - Filter button rows scroll sideways instead of squeezing the title. - Touch targets of at least 40px; inputs at 16px so iPhones do not zoom in while typing. ===================================================================== */ @media (max-width: 575.98px) { table.table-stack thead { display: none; } table.table-stack { --bs-table-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-hover-bg: transparent; --bs-table-accent-bg: transparent; } table.table-stack > tbody > tr > td { background-color: transparent !important; } table.table-stack, table.table-stack > tbody, table.table-stack > tbody > tr, table.table-stack > tbody > tr > td { display: block; width: 100% !important; } table.table-stack > tbody > tr { border: 1px solid var(--evora-border); border-radius: var(--evora-radius-sm); padding: .2rem .9rem; margin-bottom: .75rem; background: var(--evora-surface); box-shadow: var(--evora-shadow-sm); } table.table-stack > :not(caption) > * > * { padding: .45rem 0; border-bottom: 1px solid var(--evora-border); text-align: left !important; white-space: normal; box-shadow: none; } table.table-stack > tbody > tr > td:last-child { border-bottom: 0; } table.table-stack > tbody > tr > td:first-child { font-weight: 650; color: var(--evora-heading); } table.table-stack > tbody > tr > td[data-label]:not([data-label=""]):not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: .15rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--evora-text-muted); } table.table-stack > tbody > tr > td:empty { display: none; } .table-responsive:has(> table.table-stack) { overflow: visible; } .d-flex.justify-content-between:has(> .btn-group) { flex-wrap: wrap; gap: .6rem; } .d-flex.justify-content-between:has(> .btn-group) > :first-child { flex: 1 1 100%; } .d-flex.justify-content-between > .btn-group { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .d-flex.justify-content-between > .btn-group > .btn { white-space: nowrap; } .evora-topbar .gap-3 { gap: .2rem !important; } } @media (max-width: 767.98px) { .form-control, .form-select, .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { font-size: 16px; } } @media (pointer: coarse) { .evora-topbar .theme-toggle, .evora-topbar .notif-bell, .evora-topbar .rate-evora-btn, .evora-topbar .account-toggle-btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } .form-check-input { width: 1.25em; height: 1.25em; } .evaluation-prompt-stars a { padding: .35rem .3rem; } .evaluation-prompt .btn-sm { min-height: 36px; } .evaluation-prompt .btn-close { min-width: 40px; min-height: 40px; background-position: center; } a:has(> .bi-arrow-left:first-child) { display: inline-block; padding: .55rem 0; } } /* ===================================================================== UI polish (v48) Bottom navigation (participants, phones), sticky Register bar, event wizard, QR page, page loading bar, avatar fallback, empty states, 2-up stat cards, phone table toolbar. ===================================================================== */ /* ---- Page loading bar (pageHead() script) ---- */ .page-loading-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000; background: linear-gradient(90deg, var(--evora-accent), #6366f1); box-shadow: 0 0 8px rgba(99,102,241,.6); transition: width 8s cubic-bezier(.1,.7,.2,1); } .page-loading-bar.is-active { width: 92%; } @media (prefers-reduced-motion: reduce) { .page-loading-bar { transition: none; width: 92%; } } /* ---- Avatar fallback: a broken photo becomes the person's initial ---- */ .account-avatar-initials.avatar-30 { font-size: .85rem; } .account-avatar-initials.avatar-42 { font-size: 1.05rem; } .account-avatar-initials.avatar-56 { font-size: 1.35rem; } .account-avatar-initials.avatar-72 { font-size: 1.7rem; } /* ---- Empty states ---- */ .empty-state { padding: 2.5rem 1.25rem; } .empty-state i { width: 4rem; height: 4rem; font-size: 1.9rem; background: var(--evora-primary-soft); } .empty-state p { max-width: 34rem; margin-left: auto; margin-right: auto; line-height: 1.5; } .empty-state.empty-state-sm { padding: 1.25rem .75rem; } .empty-state.empty-state-sm i { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; margin-bottom: .6rem; } td.dataTables_empty { padding: 0 !important; } /* ---- Bottom navigation (participants on phones and small tablets) ---- */ .bottom-nav { display: none; } @media (max-width: 991.98px) { .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--evora-surface); border-top: 1px solid var(--evora-border); box-shadow: 0 -4px 16px rgba(17,24,39,.06); padding-bottom: env(safe-area-inset-bottom); } .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 58px; padding: .35rem .15rem; border: 0; background: transparent; color: var(--evora-text-muted); font-size: .68rem; font-weight: 600; text-decoration: none; position: relative; } .bottom-nav i { font-size: 1.3rem; line-height: 1; } .bottom-nav .active { color: var(--evora-primary); } .bottom-nav .active::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--evora-primary); } .bottom-nav .bn-badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 999px; background: var(--evora-danger); color: #fff; font-size: .6rem; line-height: 1.05rem; text-align: center; } body.has-bottom-nav .evora-main { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } body.has-bottom-nav .evaluation-prompt { bottom: calc(74px + env(safe-area-inset-bottom)); } } /* ---- Sticky "Register" bar on the event page (phones) ---- */ .mobile-cta { display: none; } @media (max-width: 991.98px) { .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1034; display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); background: var(--evora-surface); border-top: 1px solid var(--evora-border); box-shadow: 0 -6px 18px rgba(17,24,39,.08); transform: translateY(110%); transition: transform .2s ease; } .mobile-cta.is-shown { transform: none; } .mobile-cta .mobile-cta-price { flex: 1 1 auto; min-width: 0; line-height: 1.2; } .mobile-cta .mobile-cta-price small { display: block; color: var(--evora-text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .mobile-cta .mobile-cta-price strong { color: var(--evora-heading); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .mobile-cta .btn { flex: 0 0 auto; min-height: 44px; padding-left: 1.25rem; padding-right: 1.25rem; } body.has-bottom-nav .mobile-cta { bottom: calc(58px + env(safe-area-inset-bottom)); padding-bottom: .65rem; } body.has-mobile-cta .evora-main, body.has-mobile-cta > .container { padding-bottom: 80px; } body.has-bottom-nav.has-mobile-cta .evora-main { padding-bottom: calc(140px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } } /* ---- Two stat cards per row on phones ---- */ @media (max-width: 575.98px) { .row > [class*="col"]:has(> .stat-card) { flex: 0 0 auto; width: 50%; } .stat-card .stat-value { font-size: clamp(1.05rem, 5.2vw, 1.3rem); white-space: normal; overflow-wrap: anywhere; } .stat-card .stat-label { font-size: .7rem; } } /* ---- Table toolbar on phones: full-width search, icon-only Export ---- */ .dt-btn-label { margin-left: .25rem; } @media (max-width: 575.98px) { .dataTables_wrapper > .row:first-child { flex-wrap: nowrap; align-items: center; margin-left: 0; margin-right: 0; gap: .5rem; } .dataTables_wrapper > .row:first-child > div { width: auto; padding: 0; } .dataTables_wrapper > .row:first-child > div:first-child { flex: 1 1 auto; min-width: 0; } .dataTables_wrapper > .row:first-child > div:last-child { flex: 0 0 auto; } .dataTables_wrapper .dataTables_filter { text-align: left; } .dataTables_wrapper .dataTables_filter label { display: block; width: 100%; margin: 0; } .dataTables_wrapper .dataTables_filter input { width: 100% !important; min-width: 0; margin-left: 0 !important; display: block; } .dataTables_wrapper .dt-buttons .btn { min-height: 40px; min-width: 44px; } .dataTables_wrapper .dt-btn-label { display: none; } } /* ---- Event form wizard (data-wizard) ---- */ .wizard-steps { display: flex; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .wizard-steps li { flex: 1 1 0; min-width: 6.5rem; } .wizard-steps button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 0 0 .5rem; border: 0; border-bottom: 3px solid var(--evora-border); background: none; color: var(--evora-text-muted); font-size: .78rem; font-weight: 650; text-align: left; } .wizard-steps .ws-num { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--evora-surface-2); border: 1px solid var(--evora-border-strong); font-size: .78rem; } .wizard-steps button:disabled { cursor: not-allowed; opacity: .7; } .wizard-steps .is-done button { color: var(--evora-text); border-bottom-color: var(--evora-success); } .wizard-steps .is-done .ws-num { background: var(--evora-success); border-color: var(--evora-success); color: #fff; } .wizard-steps .is-current button { color: var(--evora-primary); border-bottom-color: var(--evora-primary); } .wizard-steps .is-current .ws-num { background: var(--evora-primary); border-color: var(--evora-primary); color: #fff; } .wizard-step[hidden] { display: none !important; } .wizard-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--evora-border); } .wizard-nav .wizard-count { color: var(--evora-text-muted); font-size: var(--evora-fs-small); } .wizard-review { display: grid; grid-template-columns: minmax(9rem, 30%) 1fr; gap: .45rem 1rem; margin: 0 0 1.25rem; font-size: .9rem; } .wizard-review dt { color: var(--evora-text-muted); font-weight: 600; } .wizard-review dd { margin: 0; color: var(--evora-heading); overflow-wrap: anywhere; } .wizard-review .wr-section { grid-column: 1 / -1; margin-top: .6rem; font-size: var(--evora-fs-label); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--evora-text-muted); border-bottom: 1px solid var(--evora-border); padding-bottom: .2rem; } @media (max-width: 575.98px) { .wizard-steps button .ws-label { display: none; } .wizard-steps li { min-width: 0; } .wizard-steps .is-current button .ws-label { display: block; } .wizard-steps .is-current { flex: 3 1 0; } .wizard-review { grid-template-columns: 1fr; gap: .1rem; } .wizard-review dd { margin-bottom: .45rem; } } /* ---- QR page ---- */ .qr-ticket { text-align: center; } .qr-ticket .qr-frame { display: inline-block; padding: .85rem; background: #fff; border-radius: 1rem; border: 1px solid var(--evora-border); cursor: zoom-in; } .qr-ticket .qr-frame img { width: min(240px, 62vw); height: auto; display: block; image-rendering: pixelated; } .qr-ticket .qr-tip { font-size: .78rem; color: var(--evora-text-muted); margin: .75rem 0 1rem; } .qr-fullscreen { position: fixed; inset: 0; z-index: 2050; background: #fff; color: #111827; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; text-align: center; } .qr-fullscreen img { width: min(88vw, 70vh); height: auto; image-rendering: pixelated; } .qr-fullscreen .qr-fs-title { font-weight: 700; font-size: 1.15rem; } .qr-fullscreen .qr-fs-sub { color: #4b5563; font-size: .9rem; } .qr-fullscreen .btn { min-height: 44px; } .qr-search { max-width: 460px; } /* v49 */ /* ---- File viewer (v51): uploaded images / PDFs open in the page with a Back button ---- */ body.file-viewer-open { overflow: hidden; } .file-viewer { position: fixed; inset: 0; z-index: 2060; display: flex; flex-direction: column; background: rgba(10,12,20,.94); } .file-viewer-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; padding-top: calc(.6rem + env(safe-area-inset-top)); background: rgba(17,24,39,.9); border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; } .file-viewer-bar .btn { min-height: 38px; display: inline-flex; align-items: center; } .file-viewer-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .92rem; } .file-viewer-body { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow: auto; } .file-viewer-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .35rem; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.5); } .file-viewer-body iframe { width: 100%; height: 100%; border: 0; border-radius: .35rem; background: #fff; } .file-viewer-missing { color: #cbd5e1; text-align: center; } .file-viewer-missing i { font-size: 2.5rem; display: block; margin-bottom: .5rem; } @media (max-width: 575.98px) { .file-viewer-body { padding: .5rem; } } /* ===================================================================== UI v52: next-event card, event card details, password helpers, staff Scan button ===================================================================== */ /* ---- "Your next event" (participant dashboard) ---- */ .next-event { display: flex; gap: 1.1rem; align-items: center; padding: 1.1rem 1.25rem; border-left: 4px solid var(--evora-primary); } .next-event-thumb { flex: 0 0 auto; width: 92px; height: 92px; border-radius: .9rem; object-fit: cover; background: var(--evora-primary-soft); display: flex; align-items: center; justify-content: center; color: var(--evora-primary); font-size: 2rem; } .next-event-body { flex: 1 1 auto; min-width: 0; } .next-event-label { font-size: var(--evora-fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--evora-primary); } .next-event-name { font-size: 1.15rem; font-weight: 750; color: var(--evora-heading); margin: .1rem 0 .25rem; overflow-wrap: anywhere; } .next-event-meta { font-size: var(--evora-fs-small); color: var(--evora-text-muted); display: flex; flex-wrap: wrap; gap: .15rem .9rem; } .countdown-chip { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; padding: .2rem .65rem; border-radius: 999px; background: var(--evora-primary-soft); color: var(--evora-primary-dark); font-weight: 700; font-size: .8rem; } .countdown-chip.is-soon { background: var(--evora-warning-bg); color: var(--evora-warning-text); } .countdown-chip.is-now { background: var(--evora-success-bg); color: var(--evora-success-text); } .next-event-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: .45rem; min-width: 11rem; } .next-event-actions .btn { white-space: nowrap; } @media (max-width: 767.98px) { .next-event { flex-wrap: wrap; } .next-event-thumb { width: 64px; height: 64px; font-size: 1.5rem; } .next-event-body { flex: 1 1 0; } .next-event-actions { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; min-width: 0; } .next-event-actions .btn { flex: 1 1 auto; min-height: 42px; } } /* ---- Event cards: price, slots left, urgency ---- */ .event-card-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; } .event-price { font-weight: 700; } .event-slots { margin: .4rem 0 .9rem; } .event-slots .event-slots-text { display: flex; justify-content: space-between; font-size: .75rem; color: var(--evora-text-muted); margin-bottom: .25rem; } .event-slots .progress { height: 6px; } .event-slots.is-tight .progress-bar { background: var(--evora-warning); } .event-slots.is-full .progress-bar { background: var(--evora-danger); } /* ---- Password fields: show/hide + strength ---- */ .pw-wrap { position: relative; } .pw-wrap > input[type="password"], .pw-wrap > input.pw-revealed { padding-right: 3rem; } .pw-toggle { position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); z-index: 5; width: 2.4rem; height: 2.4rem; border: 0; border-radius: .5rem; background: transparent; color: var(--evora-text-muted); display: inline-flex; align-items: center; justify-content: center; } .pw-toggle:hover, .pw-toggle:focus-visible { color: var(--evora-primary); background: var(--evora-primary-soft); } .pw-strength { margin-top: .4rem; font-size: .75rem; color: var(--evora-text-muted); } .pw-strength-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: .25rem; } .pw-strength-bars span { height: 4px; border-radius: 2px; background: var(--evora-border-strong); } .pw-strength[data-level="1"] .pw-strength-bars span:nth-child(-n+1) { background: var(--evora-danger); } .pw-strength[data-level="2"] .pw-strength-bars span:nth-child(-n+2) { background: var(--evora-warning); } .pw-strength[data-level="3"] .pw-strength-bars span:nth-child(-n+3) { background: #0ea5e9; } .pw-strength[data-level="4"] .pw-strength-bars span { background: var(--evora-success); } .pw-strength strong { color: var(--evora-text); } .pw-match { margin-top: .35rem; font-size: .75rem; } .pw-match.is-ok { color: var(--evora-success); } .pw-match.is-bad { color: var(--evora-danger); } /* ---- Staff: floating Scan button on phones ---- */ .scan-fab { display: none; } @media (max-width: 991.98px) { .scan-fab { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 1036; display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.25rem; border-radius: 999px; background: var(--evora-gradient-primary); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px rgba(79,70,229,.45); } .scan-fab i { font-size: 1.35rem; line-height: 1; } .scan-fab:hover, .scan-fab:focus-visible { color: #fff; filter: brightness(1.08); } body:has(.scan-fab) .evora-main { padding-bottom: 92px; } body:has(.scan-fab) .evaluation-prompt { bottom: 92px; } } /* ===================================================================== v53: global search (Ctrl+K), Getting Started checklist ===================================================================== */ .topbar-search { display: inline-flex; align-items: center; gap: .5rem; min-width: 15rem; padding: .4rem .6rem .4rem .75rem; border: 1px solid var(--evora-border-strong); border-radius: .6rem; background: var(--evora-surface-2); color: var(--evora-text-muted); font-size: .85rem; } .topbar-search:hover, .topbar-search:focus-visible { border-color: var(--evora-primary); color: var(--evora-text); } .topbar-search .ts-label { flex: 1 1 auto; text-align: left; } kbd { display: inline-block; padding: .05rem .35rem; border-radius: .3rem; border: 1px solid var(--evora-border-strong); background: var(--evora-surface); color: var(--evora-text-muted); font: 600 .7rem var(--evora-font); box-shadow: 0 1px 0 var(--evora-border-strong); } @media (max-width: 991.98px) { .topbar-search { min-width: 0; width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; background: transparent; } .topbar-search .ts-label, .topbar-search kbd { display: none; } .topbar-search i { font-size: 1.15rem; color: var(--evora-text); } } body.gsearch-open { overflow: hidden; } .gsearch { position: fixed; inset: 0; z-index: 2055; background: rgba(15,17,23,.45); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 1rem 1rem; } .gsearch[hidden] { display: none; } .gsearch-panel { width: min(640px, 100%); max-height: 75vh; display: flex; flex-direction: column; background: var(--evora-surface); border: 1px solid var(--evora-border); border-radius: 1rem; box-shadow: var(--evora-shadow-lg); overflow: hidden; } .gsearch-input { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--evora-border); } .gsearch-input i { color: var(--evora-text-muted); font-size: 1.1rem; } .gsearch-input input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; color: var(--evora-text); font-size: 1.05rem; min-width: 0; } .gsearch-input input::-webkit-search-cancel-button { display: none; } .gsearch-results { overflow-y: auto; padding: .4rem; } .gsearch-group { padding: .6rem .7rem .25rem; font-size: var(--evora-fs-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--evora-text-muted); } .gsearch-item { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: .6rem; color: var(--evora-text); text-decoration: none; } .gsearch-item i { width: 2rem; height: 2rem; flex: 0 0 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; background: var(--evora-primary-soft); color: var(--evora-primary); } .gsearch-item .gsearch-text { min-width: 0; display: flex; flex-direction: column; } .gsearch-item strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gsearch-item small { color: var(--evora-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gsearch-item.is-active { background: var(--evora-primary-soft); color: var(--evora-text); } .gsearch-empty { padding: 1.5rem; text-align: center; color: var(--evora-text-muted); font-size: .9rem; } .gsearch-foot { display: flex; gap: 1rem; padding: .5rem 1rem; border-top: 1px solid var(--evora-border); font-size: .72rem; color: var(--evora-text-muted); } @media (max-width: 575.98px) { .gsearch { padding-top: .75rem; } .gsearch-panel { max-height: 85vh; } .gsearch-foot { display: none; } } /* ---- Getting Started (organizer dashboard) ---- */ .getting-started .gs-progress { height: 8px; } .gs-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; } .gs-steps li { display: flex; align-items: center; gap: .8rem; padding: .65rem .8rem; border: 1px solid var(--evora-border); border-radius: .75rem; } .gs-steps .gs-check { flex: 0 0 1.8rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--evora-border-strong); color: transparent; } .gs-steps li.is-done .gs-check { background: var(--evora-success); border-color: var(--evora-success); color: #fff; } .gs-steps li.is-done .gs-title { color: var(--evora-text-muted); text-decoration: line-through; } .gs-steps li.is-next { border-color: var(--evora-primary); box-shadow: 0 0 0 3px var(--evora-primary-soft); } .gs-steps .gs-body { flex: 1 1 auto; min-width: 0; } .gs-steps .gs-title { font-weight: 650; color: var(--evora-heading); } .gs-steps .gs-desc { font-size: var(--evora-fs-small); color: var(--evora-text-muted); } .gs-steps .btn { flex: 0 0 auto; white-space: nowrap; } @media (max-width: 575.98px) { .gs-steps li { flex-wrap: wrap; } .gs-steps .gs-body { flex: 1 1 0; } .gs-steps .btn { margin-left: 2.6rem; width: calc(100% - 2.6rem); } .gs-steps li.is-done .gs-desc { display: none; } } /* ===================================================================== v54: error pages, "Today" panel, session timeout warning ===================================================================== */ .error-shell { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: var(--evora-bg); } .error-card { width: min(520px, 100%); text-align: center; background: var(--evora-surface); border: 1px solid var(--evora-border); border-radius: 1.25rem; padding: 2.5rem 1.75rem; box-shadow: var(--evora-shadow-md); } .error-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.15rem; color: var(--evora-heading); text-decoration: none; margin-bottom: 1.5rem; } .error-brand b { color: var(--evora-accent); font-weight: 800; } .error-mark { width: 2rem; height: 2rem; border-radius: .55rem; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #06b6d4, #22d3ee); color: #0e1547; font-weight: 800; } .error-icon { width: 4.5rem; height: 4.5rem; margin: 0 auto .75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--evora-primary-soft); color: var(--evora-primary); font-size: 2rem; } .error-code { font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; background: var(--evora-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; } .error-title { font-size: 1.35rem; font-weight: 750; color: var(--evora-heading); margin: .5rem 0; } .error-text { color: var(--evora-text-muted); margin-bottom: 1.5rem; } .error-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; } .error-actions .btn { min-height: 44px; } .error-hint { margin: 1.25rem 0 0; font-size: var(--evora-fs-small); color: var(--evora-text-muted); } /* ---- Today panel (organizer / staff dashboards) ---- */ .today-panel { padding: 1.1rem 1.25rem; border-left: 4px solid var(--evora-success); } .today-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; } .today-live { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--evora-success); margin-right: .5rem; vertical-align: middle; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: todayPulse 1.8s infinite; } @keyframes todayPulse { 70% { box-shadow: 0 0 0 .5rem rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } } @media (prefers-reduced-motion: reduce) { .today-live { animation: none; } } .today-event { padding: .85rem 0; border-top: 1px solid var(--evora-border); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1.25rem; align-items: center; } .today-event-name { font-weight: 700; color: var(--evora-heading); overflow-wrap: anywhere; } .today-stats { display: flex; gap: 1.25rem; text-align: center; } .today-stat strong { display: block; font-size: 1.45rem; line-height: 1.1; color: var(--evora-heading); font-variant-numeric: tabular-nums; } .today-stat span { font-size: .7rem; color: var(--evora-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .today-progress { grid-column: 1 / -1; height: 8px; } .today-progress .progress-bar { background: var(--evora-success); } .today-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; } @media (max-width: 575.98px) { .today-event { grid-template-columns: 1fr; } .today-stats { justify-content: space-between; gap: .5rem; } .today-actions .btn { flex: 1 1 calc(50% - .4rem); min-height: 40px; } } /* ---- Session timeout warning ---- */ .session-warning { position: fixed; inset: 0; z-index: 2070; background: rgba(15,17,23,.55); display: flex; align-items: center; justify-content: center; padding: 1rem; } .session-warning-box { width: min(420px, 100%); background: var(--evora-surface); border-radius: 1rem; padding: 1.75rem 1.5rem; text-align: center; box-shadow: var(--evora-shadow-lg); border: 1px solid var(--evora-border); } .session-warning-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto .75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--evora-warning-bg); color: var(--evora-warning-text); font-size: 1.6rem; } .session-warning .sw-left { color: var(--evora-heading); font-variant-numeric: tabular-nums; } /* v56 race maps */ .race-map { height: 460px; border-radius: 10px; border: 1px solid var(--bs-border-color); z-index: 0; } .race-map-sm { height: 360px; } .race-map-drawing, .race-map-drawing .leaflet-interactive { cursor: crosshair; } .race-runner span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.35); } .race-stat { background: var(--bs-tertiary-bg, #f8f9fa); border-radius: 10px; padding: .6rem .25rem; } .race-stat-value { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; } .race-stat-label { font-size: .75rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .04em; } [data-theme="dark"] .race-map .leaflet-tile-pane { filter: brightness(.8) contrast(1.1); } @media (max-width: 575.98px) { .race-map { height: 360px; } .race-map-sm { height: 300px; } } /* v57 event setup wizard: compact tool chips */ .wizard-tool-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid var(--bs-border-color); border-radius: 999px; font-size: .8125rem; background: var(--bs-body-bg); } /* v57 calendars: days that are over look "done" (faded, hatched); today stays highlighted */ .fc .fc-daygrid-day.fc-day-past, .fc .fc-timegrid-col.fc-day-past { background-image: repeating-linear-gradient(135deg, rgba(108,117,125,.09) 0 6px, transparent 6px 12px); background-color: rgba(108,117,125,.06); } .fc .fc-day-past .fc-daygrid-day-number { opacity: .4; text-decoration: none; } .fc .fc-event-past { opacity: .5; filter: grayscale(.6); } .fc .fc-event-past:hover, .fc .fc-event-past:focus { opacity: .85; filter: none; } .fc .fc-list-event.fc-event-past { opacity: .55; } /* v57 participants */ .stat-link { display: block; color: inherit; text-decoration: none; border-radius: 8px; padding: .25rem 0; } .stat-link:hover, .stat-link:focus-visible { background: rgba(var(--bs-primary-rgb), .08); color: inherit; } @media print { .participants-roster .dataTables_filter, .participants-roster .dataTables_length, .participants-roster .dataTables_paginate, .participants-roster .dataTables_info, .participants-roster .dt-buttons { display: none !important; } } /* v58 stat cards: a large soft icon in the corner instead of an icon box, an accent glow, and a lift on hover */ .stat-card { --stat-accent: var(--evora-primary); isolation: isolate; cursor: default; background-image: radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--stat-accent) 14%, transparent) 0, transparent 62%); } .stat-card.accent-success { --stat-accent: var(--evora-success); } .stat-card.accent-warning { --stat-accent: var(--evora-warning); } .stat-card.accent-danger { --stat-accent: var(--evora-danger); } .stat-card.accent-info { --stat-accent: var(--evora-accent); } .stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--stat-accent); opacity: .7; } .stat-card > i:first-child, .stat-card.accent-success > i:first-child, .stat-card.accent-warning > i:first-child, .stat-card.accent-danger > i:first-child, .stat-card.accent-info > i:first-child { position: absolute; right: -.35rem; bottom: -1.1rem; z-index: -1; width: auto; height: auto; margin: 0; background: none; border-radius: 0; font-size: 5.75rem !important; line-height: 1; color: var(--stat-accent) !important; opacity: .13; filter: blur(1.5px); transform: rotate(-12deg); transition: transform .35s ease, opacity .35s ease, filter .35s ease; pointer-events: none; } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--evora-shadow-md), 0 10px 24px -12px color-mix(in srgb, var(--stat-accent) 45%, transparent); } .stat-card:hover > i:first-child { transform: rotate(-4deg) scale(1.12); opacity: .22; filter: blur(.5px); } a .stat-card, a.stat-card { cursor: pointer; } [data-theme="dark"] .stat-card { background-image: radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--stat-accent) 18%, transparent) 0, transparent 62%); } [data-theme="dark"] .stat-card > i:first-child { opacity: .18; } [data-theme="dark"] .stat-card:hover > i:first-child { opacity: .28; } @media (max-width: 575.98px) { .stat-card > i:first-child, .stat-card.accent-success > i:first-child, .stat-card.accent-warning > i:first-child, .stat-card.accent-danger > i:first-child, .stat-card.accent-info > i:first-child { font-size: 4rem !important; width: auto; height: auto; margin: 0; bottom: -.8rem; } } @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card > i:first-child { transition: none; } .stat-card:hover { transform: none; } .stat-card:hover > i:first-child { transform: rotate(-12deg); } } /* ===================================================================== v59 hover & motion: small, consistent feedback on everything clickable ===================================================================== */ /* Buttons: lift a little, soft shadow, press down on click; arrows nudge forward */ .btn:not(.btn-link):not(.btn-close) { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } .btn:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(17,24,39,.22); } .btn-evora-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(79,70,229,.6); } .btn:not(.btn-link):not(.btn-close):active { transform: translateY(0) scale(.97); box-shadow: none; } .btn-group > .btn:hover, .btn-group-sm > .btn:hover, .input-group > .btn:hover, .dataTables_paginate .btn:hover { transform: none; } .btn .bi { transition: transform .2s ease; display: inline-block; } .btn:hover .bi-arrow-right, .btn:hover .bi-arrow-right-circle, .btn:hover .bi-chevron-right, .btn:hover .bi-box-arrow-up-right { transform: translateX(3px); } .btn:hover .bi-plus-circle, .btn:hover .bi-plus-lg, .btn:hover .bi-plus { transform: rotate(90deg); } .btn:hover .bi-download, .btn:hover .bi-file-earmark-excel, .btn:hover .bi-file-earmark-pdf { transform: translateY(2px); } .btn:hover .bi-printer, .btn:hover .bi-save, .btn:hover .bi-send { transform: scale(1.15); } /* Primary buttons: a light sweep crosses the button on hover */ .btn-evora-primary { position: relative; overflow: hidden; } .btn-evora-primary:not(.dropdown-toggle)::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg); } .btn-evora-primary:not(.dropdown-toggle):not(:disabled):hover::after { left: 130%; transition: left .6s ease; } /* Event cards (with a banner): lift and slow zoom of the picture */ .card-evora:has(> img:first-child), .card-evora:has(> .event-cover-placeholder:first-child) { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .card-evora:has(> img:first-child) > img:first-child, .card-evora > .event-cover-placeholder:first-child { transition: transform .5s ease; } .card-evora:has(> img:first-child):hover, .card-evora:has(> .event-cover-placeholder:first-child):hover { transform: translateY(-4px); box-shadow: var(--evora-shadow-md); } .card-evora:has(> img:first-child):hover > img:first-child, .card-evora:hover > .event-cover-placeholder:first-child { transform: scale(1.06); } /* Other cards: only a deeper shadow (they are not buttons) */ .card-evora:hover { box-shadow: var(--evora-shadow-md); } /* Table rows: an accent line on the left of the hovered row */ .table tbody tr > :first-child { transition: box-shadow .15s ease; } .table tbody tr:hover > :first-child { box-shadow: inset 3px 0 0 var(--evora-primary); } /* Sidebar: the icon slides a little toward the label */ .evora-sidebar .nav-link:hover i { transform: translateX(3px); } /* Quick actions: the icon pops */ .quick-action { transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease; } .quick-action:hover { transform: translateY(-2px); } .quick-action .qa-icon { transition: transform .25s ease; } .quick-action:hover .qa-icon { transform: scale(1.1) rotate(-6deg); } /* Lists and menus: the hovered item slides right */ .list-group-item-action, .dropdown-item { transition: background-color .15s ease, color .15s ease, padding-left .15s ease; } .list-group-item-action:hover, .dropdown-menu:not(.notif-dropdown) .dropdown-item:hover { padding-left: 1.25rem; color: var(--evora-primary); } /* Top bar: the bell rings, the avatar gets a ring */ .notif-bell:hover .bi-bell { display: inline-block; animation: evora-bell .6s ease; } @keyframes evora-bell { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } } .avatar, .account-toggle-btn img, .account-toggle-btn .rounded-circle { transition: transform .2s ease, box-shadow .2s ease; } .account-toggle-btn:hover img, .account-toggle-btn:hover .rounded-circle, a:hover > .avatar { transform: scale(1.06); box-shadow: 0 0 0 3px var(--evora-primary-soft); } .theme-toggle { transition: transform .3s ease, color .15s ease; } .theme-toggle:hover { transform: rotate(-15deg) scale(1.1); } /* Inputs: the border warms up before focus */ .form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: #a5b4fc; } [data-theme="dark"] .form-control:hover:not(:focus):not(:disabled), [data-theme="dark"] .form-select:hover:not(:focus):not(:disabled) { border-color: #6366f1; } /* Tabs and pills: the hovered tab lifts its color */ .nav-tabs .nav-link, .nav-pills .nav-link { transition: color .15s ease, background-color .15s ease; } .nav-tabs .nav-link:hover:not(.active) { color: var(--evora-primary); } @media (hover: none) { /* phones: no sticky hover states after a tap */ .btn:hover, .quick-action:hover, .card-evora:hover, .stat-card:hover { transform: none !important; } } @media (prefers-reduced-motion: reduce) { .btn, .btn .bi, .quick-action, .quick-action .qa-icon, .card-evora, .card-evora > img, .theme-toggle, .avatar { transition: none !important; } .btn:hover, .quick-action:hover, .card-evora:hover, .theme-toggle:hover, .quick-action:hover .qa-icon { transform: none !important; } .btn-evora-primary:not(.dropdown-toggle)::after { display: none; } .notif-bell:hover .bi-bell { animation: none; } } /* v60 maintenance */ .maintenance-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: var(--evora-bg, #f5f6fb); } .maintenance-card { width: 100%; max-width: 560px; text-align: center; background: var(--evora-surface, #fff); border: 1px solid var(--evora-border); border-radius: 1.25rem; padding: 2.5rem 1.75rem; box-shadow: var(--evora-shadow-md); } .maintenance-icon { width: 84px; height: 84px; margin: 0 auto 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--evora-warning); background: var(--evora-warning-bg); animation: evora-wrench 2.4s ease-in-out infinite; } @keyframes evora-wrench { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(10deg); } 45% { transform: rotate(0); } } .maintenance-points { max-width: 380px; } .maintenance-points li { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .45rem; color: var(--evora-text-muted); } .maintenance-points .bi { color: var(--evora-success); } .maintenance-status { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; } .maintenance-status.is-on { background: var(--evora-warning-bg); color: var(--evora-warning); } .maintenance-status.is-scheduled { background: var(--evora-primary-soft); color: var(--evora-primary); } .maintenance-status.is-off { background: var(--evora-success-bg); color: var(--evora-success); } @media (prefers-reduced-motion: reduce) { .maintenance-icon { animation: none; } } /* v61 links: a "back" pill instead of "← text", and calmer text links whose underline grows on hover */ .back-link { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem .35rem .4rem; border-radius: 999px; color: var(--evora-text-muted); font-weight: 600; text-decoration: none; transition: background-color .2s ease, color .2s ease; } .back-link .bi { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--evora-primary-soft); color: var(--evora-primary); transition: transform .25s ease, background-color .2s ease, color .2s ease; } .back-link:hover, .back-link:focus-visible { background: var(--evora-primary-soft); color: var(--evora-primary); } .back-link:hover .bi, .back-link:focus-visible .bi { transform: translateX(-3px); background: var(--evora-primary); color: #fff; } :is(.auth-card, .evora-content, .maintenance-card, .container) a:is(:not([class]), .small, .link-inline):not(:has(img, div)) { text-decoration: none; color: var(--evora-primary); padding-bottom: 1px; background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat, linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent)) left bottom / 100% 1px no-repeat; transition: background-size .25s ease, color .15s ease; } :is(.auth-card, .evora-content, .maintenance-card, .container) a:is(:not([class]), .small, .link-inline):not(:has(img, div)):hover, :is(.auth-card, .evora-content, .maintenance-card, .container) a:is(:not([class]), .small, .link-inline):not(:has(img, div)):focus-visible { color: var(--evora-primary-dark); background-size: 100% 1.5px, 100% 1px; } @media (prefers-reduced-motion: reduce) { .back-link .bi, :is(.auth-card, .evora-content, .maintenance-card, .container) a { transition: none; } } /* v63 sign-up: choose Participant or Organizer */ .account-type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .3rem; border-radius: 14px; background: var(--evora-primary-soft); } .account-type-option { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: 10px; color: var(--evora-text); text-decoration: none; border: 1px solid transparent; transition: background-color .15s ease, box-shadow .15s ease, color .15s ease; } .account-type-option .bi { font-size: 1.25rem; color: var(--evora-primary); } .account-type-option span { display: flex; flex-direction: column; line-height: 1.15; } .account-type-option small { color: var(--evora-text-muted); font-size: .75rem; } .account-type-option:hover { color: var(--evora-primary); background: rgba(255,255,255,.55); } .account-type-option.is-active { background: var(--evora-surface, #fff); border-color: var(--evora-border); box-shadow: var(--evora-shadow-sm); } [data-theme="dark"] .account-type-option:hover { background: rgba(255,255,255,.06); } /* v64 touch feel: press, ripple, rise-in */ .btn:not(.btn-link):not(.btn-close), .quick-action, .bottom-nav a, .list-group-item-action, .account-type-option, .event-type-card, .back-link, .evora-sidebar .nav-link { -webkit-tap-highlight-color: transparent; } .quick-action:active, .bottom-nav a:active, .list-group-item-action:active, .account-type-option:active, .event-type-card:active, .back-link:active, a .stat-card:active, a.stat-card:active { transform: scale(.97) !important; filter: brightness(.97); transition-duration: .08s; } .card-evora:has(> img:first-child):active, .card-evora:has(> .event-cover-placeholder:first-child):active { transform: scale(.985) !important; transition-duration: .08s; } .btn:not(.btn-link):not(.btn-close):not(:disabled):active { transform: scale(.96) !important; filter: brightness(.95); } .ripple-host { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; } .ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .28; transform: scale(0); animation: evora-ripple .55s ease-out forwards; pointer-events: none; } @keyframes evora-ripple { to { transform: scale(1); opacity: 0; } } .reveal-wait { opacity: 0; } .reveal-in { animation: evora-rise .5s cubic-bezier(.2, .7, .2, 1) both; } @keyframes evora-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media print { .reveal-wait { opacity: 1 !important; } } @media (prefers-reduced-motion: reduce) { .reveal-wait { opacity: 1 !important; } .reveal-in { animation: none !important; } .ripple { animation-duration: .45s !important; } /* tap feedback stays, unlike decoration */ }