/* ===================================================================== * ZNO / PARPARTA Design System — global theme tokens + reusable primitives. * * Single source of truth for colour, brand, dark mode and shared components. * Loaded everywhere (public site, member/merchant dashboards, admin screens), * so every surface inherits the same tokens. Switch themes by setting * `data-theme="light|dark"` on (handled by theme.js + the FOUC inline * script). Brand = PARPARTA Pink; change --zno-pink to rebrand in one place. * ===================================================================== */ :root { /* ---- Brand ---- */ --zno-pink: #e6097f; /* PARPARTA Pink */ --zno-pink-hover: #c30769; --zno-pink-soft: #fdeef6; /* ---- Neutrals ---- */ --zno-white: #ffffff; --zno-black: #0b0b0f; --zno-gray-900: #1d2327; /* dark gray */ --zno-gray-700: #3c434a; --zno-gray-500: #646970; --zno-gray-400: #9ca3af; --zno-gray-300: #e5e7eb; /* light gray (border) */ --zno-gray-100: #f1f5f9; --zno-gray-050: #f8fafc; /* ---- Semantic (LIGHT) ---- */ --zno-primary: var(--zno-pink); --zno-primary-hover: var(--zno-pink-hover); --zno-primary-soft: var(--zno-pink-soft); --zno-primary-contrast: #ffffff; --zno-bg: #f3f5f8; --zno-card: #ffffff; --zno-surface-2: #f8fafc; --zno-text: #1d2327; --zno-muted: #646970; --zno-faint: #9ca3af; --zno-border: #e5e7eb; --zno-border-input: #d1d5db; --zno-bg-soft: #f8fafc; --zno-bg-chip: #f1f5f9; --zno-hover: #f1f5f9; /* interactive hover surface (light) */ --zno-overlay: rgba(16, 24, 40, .45); --zno-success: #16a34a; --zno-danger: #b91c1c; --zno-warning: #b45309; --zno-info: #2563eb; --zno-whatsapp: #25d366; --zno-featured: #f59e0b; --zno-radius: 14px; --zno-radius-md: 12px; --zno-radius-sm: 9px; --zno-pill: 999px; --zno-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06); --zno-shadow-hover: 0 10px 28px rgba(16, 24, 40, .10); } /* ---- Semantic (DARK) ---- */ [data-theme="dark"] { --zno-primary: #ff2e9a; --zno-primary-hover: #ff5cae; --zno-primary-soft: #3a1029; --zno-primary-contrast: #14060d; --zno-bg: #0e1014; --zno-card: #171a21; --zno-surface-2: #1f232c; --zno-text: #e7e9ee; --zno-muted: #a8aeb8; --zno-faint: #7b828d; --zno-border: #2a2f3a; --zno-border-input: #39404d; --zno-bg-soft: #14171d; --zno-bg-chip: #1f232c; --zno-hover: #232a36; /* hover sits ABOVE the card surface in dark */ --zno-overlay: rgba(0, 0, 0, .6); --zno-shadow: 0 1px 2px rgba(0, 0, 0, .45); --zno-shadow-hover: 0 14px 30px rgba(0, 0, 0, .55); } /* Admin dashboard tokens chain to the brand (light only). */ .zno-dash { --d-primary: var(--zno-primary); --d-primary-hover: var(--zno-primary-hover); } /* ===================================================================== * Dark-mode surface overrides for the main front-end components. Tokens do * most of the work; these retarget the few hardcoded light surfaces. * ===================================================================== */ [data-theme="dark"] .zno-app-saas .zno-app-main, [data-theme="dark"] .zno-listings, [data-theme="dark"] .zno-listing-page, [data-theme="dark"] .zno-mp { background: var(--zno-bg); color: var(--zno-text); } [data-theme="dark"] .zno-app-sidebar, [data-theme="dark"] .zno-app-topbar { background: var(--zno-card); border-color: var(--zno-border); } [data-theme="dark"] .zno-card, [data-theme="dark"] .zno-sg-card, [data-theme="dark"] .zno-listing-card, [data-theme="dark"] .zno-lp-card, [data-theme="dark"] .zno-mp-card, [data-theme="dark"] .zno-pf-section, [data-theme="dark"] .zno-welcome-banner, [data-theme="dark"] .zno-promo, [data-theme="dark"] .zno-evc-item { background: var(--zno-card); border-color: var(--zno-border); color: var(--zno-text); } [data-theme="dark"] .zno-listing-title, [data-theme="dark"] .zno-lp-title, [data-theme="dark"] .zno-sg-value, [data-theme="dark"] .zno-evc-title { color: var(--zno-text); } [data-theme="dark"] .zno-app .widefat, [data-theme="dark"] .zno-listings table, [data-theme="dark"] .zno-points-history, [data-theme="dark"] .zno-mp-hours { background: var(--zno-card); color: var(--zno-text); } [data-theme="dark"] .zno-points-history th, [data-theme="dark"] .zno-points-history td { border-color: var(--zno-border); } [data-theme="dark"] .zno-app input, [data-theme="dark"] .zno-app textarea, [data-theme="dark"] .zno-app select, [data-theme="dark"] .zno-form input, [data-theme="dark"] .zno-form textarea, [data-theme="dark"] .zno-form select, [data-theme="dark"] .zno-listings-filters input, [data-theme="dark"] .zno-listings-filters select { background: var(--zno-surface-2); color: var(--zno-text); border-color: var(--zno-border-input); } /* ===================================================================== * FullCalendar — GLOBAL theming on the design tokens. Applies to every * calendar (member + merchant dashboards + public event page) so dark mode * leaves NO white surface. Covers toolbar, buttons, daygrid, scrollgrid, * list, event, popover, today, more-link, highlight. * ===================================================================== */ .fc { --fc-border-color: var(--zno-border); --fc-page-bg-color: var(--zno-card); --fc-neutral-bg-color: var(--zno-bg-soft); --fc-neutral-text-color: var(--zno-muted); --fc-today-bg-color: color-mix(in srgb, var(--zno-primary) 10%, transparent); --fc-event-bg-color: var(--zno-primary); --fc-event-border-color: transparent; --fc-event-text-color: #fff; --fc-list-event-hover-bg-color: var(--zno-hover); --fc-more-link-bg-color: var(--zno-bg-chip); color: var(--zno-text); } .fc .fc-toolbar-title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--zno-text); } .fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .fc .fc-col-header-cell-cushion { color: var(--zno-faint); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; padding: 8px 4px; text-decoration: none; } .fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid { border-color: var(--zno-border); } .fc .fc-scrollgrid, .fc .fc-scrollgrid table, .fc table { background: var(--zno-card); } .fc .fc-daygrid-day-number, .fc .fc-list-day-text, .fc .fc-list-day-side-text { color: var(--zno-text); text-decoration: none; } .fc .fc-daygrid-day-number { font-weight: 600; font-size: 13px; padding: 6px 8px; } .fc .fc-daygrid-day.fc-day-other { background: var(--zno-bg-soft); } .fc .fc-day-today { background: var(--fc-today-bg-color); } .fc .fc-day-today .fc-daygrid-day-number { background: var(--zno-primary); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; } /* Month-cell events = minimal Google/Notion/Apple-style rows: a very soft * category-tinted background (~12% of the hue), neutral title, secondary time on * a fixed-width column. Low visual weight so the day number stays dominant. */ .fc .fc-daygrid-day-frame { min-height: 112px; } .fc .fc-daygrid-day-top { margin-bottom: 2px; } /* keep the day number above the badges */ .fc .fc-daygrid-day-events { margin-top: 1px; padding-bottom: 3px; } .fc .fc-daygrid-event-harness { margin-top: 0; } .fc .fc-daygrid-event { display: flex; align-items: center; /* one row, vertically centred */ border: 0; border-radius: 6px; margin: 0 6px 2px; padding: 1px 8px 1px 6px; /* inset from border + light vertical pad */ min-height: 19px; font-size: 11.5px; font-weight: 500; line-height: 1.4; text-align: left; cursor: pointer; overflow: hidden; color: var(--zno-text); background: color-mix(in srgb, var(--ev, var(--zno-primary)) 13%, transparent); } .fc .fc-daygrid-event:hover { background: color-mix(in srgb, var(--ev, var(--zno-primary)) 20%, transparent); } [data-theme="dark"] .fc .fc-daygrid-event { background: color-mix(in srgb, var(--ev, var(--zno-primary)) 22%, transparent); } [data-theme="dark"] .fc .fc-daygrid-event:hover { background: color-mix(in srgb, var(--ev, var(--zno-primary)) 30%, transparent); } .fc .fc-daygrid-event .fc-event-main, .fc .fc-daygrid-event .fc-event-main-frame { display: flex; align-items: center; min-width: 0; width: 100%; color: inherit; } .fc .fc-daygrid-event-dot { display: none; } /* the soft tint conveys the colour */ .fc .fc-daygrid-event.zno-fc-cancelled { opacity: .55; text-decoration: line-through; } /* Our custom month-view event row (rendered by calendar.js eventContent). */ .fc .fc-daygrid-event .zno-ev { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; } .fc .fc-daygrid-event .zno-ev-time { flex: 0 0 auto; min-width: 38px; color: var(--zno-muted); font-weight: 500; font-variant-numeric: tabular-nums; } .fc .fc-daygrid-event .zno-ev-title { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--zno-text); } /* Fallback for any default daygrid rendering (e.g. cancelled markup). */ .fc .fc-daygrid-event .fc-event-time { flex: 0 0 auto; color: var(--zno-muted); margin-right: 6px; } .fc .fc-daygrid-event .fc-event-title { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--zno-text); } /* List / week-day views keep single-line titles too. */ .fc .fc-list-event-title, .fc .fc-timegrid-event .fc-event-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Per-category hue (deterministic; c0 = brand). Only the tint hue — text stays neutral. */ .fc .fc-daygrid-event.zno-ev-c0 { --ev: var(--zno-primary); } .fc .fc-daygrid-event.zno-ev-c1 { --ev: #7c3aed; } .fc .fc-daygrid-event.zno-ev-c2 { --ev: #2563eb; } .fc .fc-daygrid-event.zno-ev-c3 { --ev: #16a34a; } .fc .fc-daygrid-event.zno-ev-c4 { --ev: #ea580c; } .fc .fc-daygrid-event.zno-ev-c5 { --ev: #0891b2; } .fc .fc-daygrid-event.zno-ev-c6 { --ev: #ca8a04; } .fc .fc-daygrid-event.zno-ev-c7 { --ev: #e11d48; } .fc .fc-more-link { color: var(--zno-primary); font-weight: 600; } .fc .fc-highlight { background: var(--zno-primary-soft); } /* Buttons */ .fc .fc-button { background: var(--zno-card); border: 1px solid var(--zno-border); color: var(--zno-text); box-shadow: none; font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 9px; text-transform: capitalize; transition: background .15s, color .15s, border-color .15s; } .fc .fc-button:hover { background: var(--zno-hover); border-color: var(--zno-border); color: var(--zno-text); } .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: var(--zno-primary); border-color: var(--zno-primary); color: #fff; } .fc .fc-button:focus { box-shadow: none; } .fc .fc-button:disabled { opacity: .5; } .fc .fc-button-group > .fc-button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; } .fc .fc-button-group > .fc-button:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* List view */ .fc .fc-list, .fc .fc-list-table { border-color: var(--zno-border); } .fc .fc-list-table td, .fc .fc-list-empty { background: var(--zno-card); } .fc .fc-list-day-cushion { background: var(--zno-bg-soft); color: var(--zno-text); } .fc .fc-list-empty { color: var(--zno-muted); } .fc .fc-list-event:hover td { background: var(--zno-hover); } /* Popover ("+N more") */ .fc .fc-popover { background: var(--zno-card); border: 1px solid var(--zno-border); box-shadow: var(--zno-shadow-hover); } .fc .fc-popover-header { background: var(--zno-bg-soft); color: var(--zno-text); } .fc .fc-popover-close { color: var(--zno-muted); } /* Calendar empty / error state (shown by calendar.js instead of a blank box). */ .zno-cal-empty { display: flex; align-items: center; justify-content: center; min-height: 320px; padding: 24px; text-align: center; color: var(--zno-muted); font-size: 14px; font-weight: 500; } /* Legacy HTML-table calendar (kept dark-safe in case any page still uses it). */ [data-theme="dark"] .zno-cal-day { background: var(--zno-card); border-color: var(--zno-border); } [data-theme="dark"] .zno-cal-event { background: var(--zno-primary-soft); color: var(--zno-primary); } /* ===================================================================== * Reusable primitives (consumed by every module; assemble, don't rebuild) * ===================================================================== */ /* Button variants that complement the existing .zno-btn / .zno-btn-primary / .zno-btn-ghost */ .zno-btn-danger { background: var(--zno-danger); border-color: var(--zno-danger); color: #fff; } .zno-btn-danger:hover { filter: brightness(.94); color: #fff; } .zno-btn-link { background: transparent; border-color: transparent; color: var(--zno-primary); padding-left: 4px; padding-right: 4px; } .zno-btn-link:hover { text-decoration: underline; } /* Filter chips */ .zno-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--zno-pill); background: var(--zno-bg-chip); color: var(--zno-muted); font-size: 13px; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none; } .zno-chip:hover { border-color: var(--zno-border); } .zno-chip.is-active { background: var(--zno-primary); color: var(--zno-primary-contrast); } .zno-chip .zno-chip-x { font-size: 14px; line-height: 1; opacity: .8; } /* Status badge (semantic) */ .zno-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--zno-pill); font-size: 12px; font-weight: 700; } .zno-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .zno-status-success { background: #dcfce7; color: #166534; } .zno-status-warning { background: #fef3c7; color: #92400e; } .zno-status-danger { background: #fee2e2; color: #991b1b; } .zno-status-neutral { background: var(--zno-bg-chip); color: var(--zno-muted); } .zno-status-info { background: #dbeafe; color: #1e40af; } [data-theme="dark"] .zno-status-success { background: #0f3d24; color: #6ee7a8; } [data-theme="dark"] .zno-status-warning { background: #3d2f0a; color: #fcd34d; } [data-theme="dark"] .zno-status-danger { background: #3d1414; color: #fca5a5; } [data-theme="dark"] .zno-status-info { background: #16243d; color: #93c5fd; } /* Avatar */ .zno-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--zno-primary-soft); color: var(--zno-primary); font-weight: 700; flex: 0 0 auto; } .zno-avatar img { width: 100%; height: 100%; object-fit: cover; } .zno-avatar-sm { width: 28px; height: 28px; font-size: 12px; } .zno-avatar-lg { width: 64px; height: 64px; font-size: 22px; } /* Loading skeleton */ .zno-skeleton { position: relative; overflow: hidden; background: var(--zno-bg-chip); border-radius: var(--zno-radius-sm); } .zno-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: zno-shimmer 1.3s infinite; } [data-theme="dark"] .zno-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); } .zno-skeleton-line { height: 12px; margin: 8px 0; } .zno-skeleton-card { height: 180px; } @keyframes zno-shimmer { 100% { transform: translateX(100%); } } /* Tooltip (CSS-only, data-zno-tip) */ [data-zno-tip] { position: relative; } [data-zno-tip]:hover::after { content: attr(data-zno-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--zno-gray-900); color: #fff; font-size: 12px; line-height: 1.3; white-space: nowrap; padding: 5px 9px; border-radius: 6px; z-index: 50; pointer-events: none; } /* ===================================================================== * Theme switcher (floating, injected site-wide) * ===================================================================== */ @keyframes zno-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .zno-theme-switch { position: fixed; left: 16px; bottom: 16px; z-index: 99998; } .zno-theme-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--zno-card); color: var(--zno-text); border: 1px solid var(--zno-border); border-radius: var(--zno-pill); padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--zno-shadow-hover); transition: border-color .15s, background .15s; } .zno-theme-toggle:hover { border-color: var(--zno-primary); } .zno-theme-ico { display: inline-flex; align-items: center; } .zno-theme-toggle .zno-theme-label { white-space: nowrap; } /* Show only the icon for the current preference in the collapsed toggle. */ .zno-theme-toggle .zno-ti { display: none; } html[data-theme-pref="light"] .zno-theme-toggle .zno-ti-light, html[data-theme-pref="dark"] .zno-theme-toggle .zno-ti-dark, html[data-theme-pref="auto"] .zno-theme-toggle .zno-ti-auto { display: inline-flex; } /* Popover menu */ .zno-theme-menu { position: absolute; left: 0; bottom: calc(100% + 8px); min-width: 176px; background: var(--zno-card); border: 1px solid var(--zno-border); border-radius: 12px; box-shadow: var(--zno-shadow-hover); padding: 6px; display: none; } .zno-theme-switch.is-open .zno-theme-menu { display: block; animation: zno-fade .15s ease; } .zno-theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 8px; color: var(--zno-text); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; transition: background .12s; } .zno-theme-opt:hover { background: var(--zno-hover); } .zno-theme-opt.is-active { color: var(--zno-primary); } .zno-theme-opt.is-active::after { content: "\2713"; margin-left: auto; font-weight: 800; } @media print { .zno-theme-switch { display: none; } }