* { box-sizing: border-box; } /* ---- Smooth touch ---- Pages cross-fade instead of flashing white (supporting browsers), jump links glide, taps respond instantly (no double-tap-zoom delay) and without the grey tap flash, and buttons visibly press in. */ @view-transition { navigation: auto; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } a, button, select, input[type="submit"], .pill { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .btn, .pill, .link, .star, .langswitch button { transition: transform 0.12s ease, background-color 0.15s ease, opacity 0.15s ease; } .btn:active, .pill:active, .langswitch button:active { transform: scale(0.96); } .link:active { opacity: 0.6; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } @view-transition { navigation: none; } *, *::before, *::after { transition: none !important; animation: none !important; } } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background: #fafafa; color: #1a1a1a; } .wrap { max-width: 600px; margin: 0 auto; padding: 20px 16px 60px; } .center { text-align: center; padding-top: 15vh; } h1 { font-size: 1.4rem; margin: 0 0 4px; } h2 { font-size: 1.05rem; margin-top: 28px; } h3 { font-size: 0.9rem; margin: 0 0 8px; color: #333; } .lead { font-size: 1.1rem; color: #444; } .done-mark { font-size: 3rem; line-height: 1; margin: 24px 0 8px; color: #1a1a1a; } .muted { color: #777; font-size: 0.88rem; } .stars { display: flex; justify-content: center; gap: 4px; margin: 28px 0; } .star { font-size: 2.6rem; background: none; border: none; color: #ddd; cursor: pointer; padding: 8px; line-height: 1; -webkit-tap-highlight-color: transparent; } .star:hover, .star:focus { color: #f5a623; } .star:active { transform: scale(0.92); } .star.on, .star.on:disabled { color: #f5a623; } .star:disabled { cursor: default; } .linkrow { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } .btn { display: inline-block; background: #1a1a1a; color: #fff; padding: 13px 20px; border-radius: 8px; text-decoration: none; border: none; font-size: 1rem; cursor: pointer; min-height: 44px; } .btn:hover { background: #333; } .btn-outline { background: none; color: #555; border: 1px solid #ccc; } .btn-outline:hover { background: #f3f3f3; color: #555; } /* Guest-page buttons take the venue's brand colour (set on as --brand). */ .btn-brand { background: var(--brand, #1a1a1a); color: var(--brand-ink, #fff); } .btn-brand:hover { background: var(--brand, #333); filter: brightness(0.92); } /* "Review us on Google": white button with Google's G, like Google's own. */ .btn-google { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 500; box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12); } .btn-google:hover { background: #f8f9fa; border-color: #c6c9ce; } .btn-google .g-logo { flex-shrink: 0; } .g-word { font-family: "Product Sans", "Google Sans", "Segoe UI", Roboto, Arial, sans-serif; font-weight: 700; letter-spacing: -0.2px; } .link { background: none; border: none; color: #555; text-decoration: underline; cursor: pointer; font-size: 0.88rem; padding: 4px 0; white-space: nowrap; } form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 12px 0 24px; } form.inline, .topbar form { display: inline; margin: 0; } label { display: flex; flex-direction: column; font-size: 0.88rem; color: #444; gap: 4px; } input { padding: 11px; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; width: 100%; } input[type="color"] { width: 64px; height: 44px; padding: 4px; } textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font: inherit; } label.checkbox { flex-direction: row; align-items: center; gap: 8px; } label.checkbox input { width: auto; } [hidden] { display: none !important; } /* Translated guest text can be long (Ukrainian, Polish) — let it wrap. */ .customer .link { white-space: normal; } .venue-logo { display: block; max-width: 160px; max-height: 96px; margin: 0 auto 14px; object-fit: contain; } .logo-preview { max-width: 120px; max-height: 72px; object-fit: contain; border: 1px solid #eee; border-radius: 6px; padding: 4px; background: #fff; } .powered { text-align: center; font-size: 0.75rem; color: #999; padding: 0 16px 24px; } .powered a { color: inherit; } .filters { margin: 8px 0 4px; } .alertbox { background: #fff8e6; border: 1px solid #e0a800; border-radius: 10px; padding: 4px 14px 10px; margin: 16px 0; } .alertbox h2 { margin-top: 12px; display: flex; align-items: center; gap: 8px; } .alertbox table { margin-top: 4px; } .alertbox td { border-bottom-color: #f1dfa8; } .ok { color: #1a7a1a; } .topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .cards-grid { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; } .stat { flex: 1; min-width: 100px; background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 14px 10px; text-align: center; } .stat .num { font-size: 1.6rem; font-weight: 700; } .stat div:last-child, .stat .num ~ div { font-size: 0.78rem; color: #666; margin-top: 2px; } .stat.warn { border-color: #e0a800; background: #fff8e6; } .chartrow { display: flex; gap: 16px; margin: 20px 0; flex-wrap: wrap; } .chartbox { flex: 1; min-width: 260px; background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 14px; } .chartbox svg { display: block; } .rangepicker { display: flex; gap: 6px; margin-top: 10px; } .pill { font-size: 0.8rem; padding: 6px 12px; border-radius: 999px; background: #eee; color: #444; text-decoration: none; } .pill-active { background: #1a1a1a; color: #fff; } .pill-warn { background: #e0a800; color: #fff; } .calendarform { flex-direction: row; align-items: center; gap: 8px; margin: 10px 0 4px; max-width: none; flex-wrap: wrap; } .calendarform input[type="date"] { width: auto; padding: 8px 10px; font-size: 0.85rem; } .btn-small { padding: 8px 14px; font-size: 0.85rem; min-height: auto; } .venuelist { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; } .venuetile { display: block; background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 14px; text-decoration: none; color: inherit; } .venuetile:hover { border-color: #ccc; } .venuetile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } table { width: 100%; border-collapse: collapse; margin-top: 12px; } th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #eee; font-size: 0.88rem; } tr.flag { background: #fff4f4; } code { font-size: 0.82rem; word-break: break-all; } .resolveform { flex-direction: row; gap: 6px; margin: 0; max-width: none; align-items: center; } .resolveform input { width: 160px; padding: 6px 8px; font-size: 0.82rem; } .cardlist { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .cardtile { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 12px; } .cardtile img { border-radius: 6px; flex-shrink: 0; } .cardtile-info { min-width: 0; flex: 1; } .renameform { flex-direction: row; gap: 6px; margin: 0 0 6px; max-width: none; align-items: center; } .renameform input { padding: 6px 8px; font-size: 0.9rem; flex: 1; } /* Guest page: the thank-you screen eases in rather than popping. */ /* Movement only, never opacity: if a browser delays or skips the animation (battery saver, background tab), the content must still be visible. An opacity fade left "All set — thanks again!" invisible in that case. */ #result > * { animation: rise 0.28s ease; } @keyframes rise { from { transform: translateY(8px); } to { transform: none; } } /* ---- Owner / admin venue pages ---- */ .wrap-wide { max-width: 1200px; margin: 0 auto; padding: 0 16px; } .dash-head { padding: 14px 0 4px; } .dash-head h1 { margin: 0; } .jump-bar { position: sticky; top: 0; z-index: 10; background: rgba(250, 250, 250, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid #eee; } .head-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .head-links form { display: inline; margin: 0; } .langswitch { display: inline-flex !important; flex-direction: row; gap: 0; border: 1px solid #ccc; border-radius: 999px; overflow: hidden; } .langswitch button { background: none; border: none; padding: 5px 10px; font-size: 0.78rem; color: #555; cursor: pointer; min-height: 30px; } .langswitch button.on { background: #1a1a1a; color: #fff; } .jump { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; padding-bottom: 6px; } .jump::-webkit-scrollbar { display: none; } .jump a { flex-shrink: 0; padding: 7px 12px; border-radius: 999px; color: #444; text-decoration: none; font-size: 0.88rem; display: inline-flex; gap: 6px; align-items: center; } .jump a:hover { background: #eee; } .jump .pill { padding: 1px 7px; font-size: 0.72rem; } body.dashboard section { scroll-margin-top: 60px; } .filters { margin: 14px 0 4px; } /* Phone: one column, alerts first. The two column wrappers dissolve (display: contents) so the sections can be ordered freely. */ .dash { display: flex; flex-direction: column; gap: 8px; padding-bottom: 40px; } .dash-main, .dash-side { display: contents; } .sec-alerts { order: 1; } .sec-stats { order: 2; } .sec-team { order: 3; } .sec-ratings { order: 4; } .sec-alerts > .ok { margin: 14px 0 0; } /* Tablet: roomier stats; charts already sit side by side from ~560px. */ @media (min-width: 700px) { .stat .num { font-size: 1.9rem; } } /* Computer: main column (stats, charts, ratings) + side column (alerts, team), using the full width instead of a phone-width strip. */ @media (min-width: 1000px) { .dash { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; } .dash-main, .dash-side { display: block; } .sec-alerts .alertbox { margin-top: 16px; } } .center-row { text-align: center; margin: 14px 0; } #ratingRows tr { animation: rise 0.25s ease; } .alert-item { padding: 10px 0; border-top: 1px solid #f1dfa8; transition: opacity 0.25s ease, transform 0.25s ease; } .alert-item.leaving { opacity: 0; transform: translateX(24px); } /* Team page */ .inline-add { flex-direction: row; gap: 8px; max-width: 420px; } .inline-add input { flex: 1; } .stafflist { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 20px; } .staffrow { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 10px 12px; margin: 0; max-width: none; } .staffrow .renameform { margin: 0 0 4px; } .staffrow-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .staffrow-meta form { display: inline; margin: 0; } .cardassign { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } select { padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.95rem; background: #fff; } .link.danger { color: #c0392b; } .staffrow-meta { flex-wrap: wrap; } .removebox > summary { list-style: none; cursor: pointer; } .removebox > summary::-webkit-details-marker { display: none; } .removebox[open] { flex-basis: 100%; } .removebox[open] > summary { text-align: right; } .removechoice { margin-top: 8px; padding: 10px 12px; background: #fff4f4; border: 1px solid #f3d0cc; border-radius: 8px; animation: rise 0.2s ease; } .removechoice p { margin: 0 0 8px; font-size: 0.9rem; } .removechoice form { flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; max-width: none; } .btn-danger { background: #c0392b; color: #fff; } .btn-danger:hover { background: #a93226; } /* Star colours, red (1★) → green (5★) — same values as STAR_COLORS in server.js. */ .s1 { --star: #dc2626; } .s2 { --star: #f97316; } .s3 { --star: #eab308; } .s4 { --star: #84cc16; } .s5 { --star: #16a34a; } .stars-txt { color: var(--star); letter-spacing: 1px; white-space: nowrap; } .stars-off { color: #e5e7eb; } /* ================= Owner pages theme ================= Scoped to body.owner so the guest page keeps the venue's own look. */ body.owner { --accent: #4f46e5; --accent-soft: #eef2ff; --accent-ink: #3730a3; --surface: #ffffff; --line: #eceef5; --text-2: #6b7280; --shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 16px rgba(17, 24, 39, 0.06); /* no-repeat + a base colour: the gradient used to tile, leaving a visible seam wherever the page content ended. */ background: #f8f9fb linear-gradient(180deg, #f5f6fc 0%, #f8f9fb 320px) no-repeat; min-height: 100vh; color: #111827; } /* Venue switcher: the venue name in the header opens a menu of the owner's other venues. */ .venue-switch { position: relative; } .venue-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 2px 8px 2px 0; } .venue-switch > summary::-webkit-details-marker { display: none; } .venue-switch .caret { color: var(--accent); font-size: 0.9rem; transition: transform 0.2s ease; } .venue-switch[open] .caret { transform: rotate(180deg); } .venue-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(17, 24, 39, 0.14); padding: 6px; display: flex; flex-direction: column; animation: rise 0.18s ease; } .venue-menu a { padding: 10px 12px; border-radius: 8px; color: #111827; text-decoration: none; font-size: 0.95rem; } .venue-menu a:hover { background: var(--accent-soft); } .venue-menu a.current { font-weight: 700; color: var(--accent-ink); } .venue-menu a.current::after { content: " ✓"; } .venue-menu a.all { color: var(--text-2); font-size: 0.85rem; border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; margin-bottom: 4px; } /* Header navigation: a soft pill of page links, current page filled in. */ .headnav { display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: #fff; border: 1px solid var(--line, #eceef5); border-radius: 999px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 14px rgba(17, 24, 39, 0.06); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .headnav::-webkit-scrollbar { display: none; } .headnav form { display: contents; } .navlink { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: none; border-radius: 999px; background: none; color: #374151; font: inherit; font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease; } .navlink:hover { background: var(--accent-soft, #eef2ff); color: var(--accent-ink, #3730a3); } .navlink:active { transform: scale(0.95); } .navlink:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25); } .navlink.active { background: var(--accent, #4f46e5); color: #fff; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3); } /* Breadcrumb above the title (admin: back to the client / all clients). */ .crumb { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px -8px; padding: 4px 10px; border-radius: 999px; color: var(--accent-ink, #3730a3); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: background-color 0.18s ease, transform 0.12s ease; } .crumb:hover { background: var(--accent-soft, #eef2ff); } .crumb:active { transform: scale(0.96); } .navlink.quiet { color: #6b7280; } .head-links { gap: 10px; } body.owner .langswitch { min-height: 44px; align-items: center; padding: 4px; gap: 2px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 14px rgba(17, 24, 39, 0.06); } body.owner .langswitch button { border-radius: 999px; min-height: 36px; padding: 0 12px; font-weight: 600; transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease; } body.owner .langswitch button:not(.on):hover { background: var(--accent-soft); color: var(--accent-ink); } /* Phone: title + language switch on the first row, the navigation pill on its own full-width row underneath. */ @media (max-width: 700px) { .topbar .head-links { display: contents; } .topbar > h1, .topbar > .venue-switch { order: 1; flex: 1; min-width: 0; } .topbar .langswitch { order: 2; } .topbar .headnav { order: 3; flex-basis: 100%; justify-content: space-between; } .navlink { padding: 0 12px; } } /* ---- Admin: drag a tile to the bin to delete it ---- */ [data-delete-url] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .trash { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: #fff; color: #9ca3af; border: 1px solid var(--line, #eceef5); box-shadow: 0 4px 16px rgba(17, 24, 39, 0.1); transition: transform 0.2s cubic-bezier(.2,.8,.2,1), background-color 0.2s ease, color 0.2s ease, width 0.2s ease, height 0.2s ease, box-shadow 0.2s ease; } .trash-hint { position: absolute; bottom: calc(100% + 8px); right: 0; white-space: nowrap; font-size: 0.78rem; font-weight: 600; color: #b91c1c; opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } body.dragging .trash { width: 84px; height: 84px; border-radius: 24px; background: #fff5f5; color: #dc2626; border-color: #fecaca; transform: translate(-4px, -4px); } body.dragging .trash-hint { opacity: 1; transform: none; } .trash.hot { background: #dc2626 !important; color: #fff !important; transform: translate(-6px, -6px) scale(1.12) !important; box-shadow: 0 10px 30px rgba(220, 38, 38, 0.4) !important; } .trash.hot svg { animation: lid 0.4s ease infinite alternate; } @keyframes lid { to { transform: rotate(-8deg) translateY(-2px); } } @media (hover: none) { .trash { display: none; } } body.dragging, body.dragging * { cursor: grabbing !important; } .drag-source { opacity: 0.35; transform: scale(0.97) !important; } .drag-ghost { position: fixed; left: 0; top: 0; z-index: 50; margin: 0; pointer-events: none; box-shadow: 0 18px 40px rgba(17, 24, 39, 0.22) !important; transition: none; } .drag-ghost.into-trash { transition: transform 0.22s ease-in, opacity 0.22s ease-in !important; transform: translate(calc(100vw - 110px), calc(100vh - 110px)) scale(0.15) rotate(-12deg) !important; opacity: 0; } .confirm-dialog { border: none; border-radius: 18px; padding: 22px 22px 18px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(17, 24, 39, 0.28); } .confirm-dialog::backdrop { background: rgba(17, 24, 39, 0.35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .confirm-dialog[open] { animation: pop 0.18s ease; } @keyframes pop { from { transform: scale(0.96); } to { transform: none; } } .confirm-dialog h2 { margin: 0 0 8px; color: #b91c1c; } .confirm-dialog form { max-width: none; margin: 0; } .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; } /* Alerts settings */ form.plainform { margin: 0; max-width: none; } .pushbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; } .pushbox .muted { flex-basis: 100%; margin: 0; } .inline-add select { width: auto; } .client-cols { display: grid; grid-template-columns: 1fr; gap: 8px 32px; } @media (min-width: 900px) { .client-cols { grid-template-columns: 2fr 1fr; } } /* "Your venues" overview tiles */ .venue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 12px 0 40px; } .venue-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .venue-card:active { transform: scale(0.98); } .venue-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .venue-card-top strong { flex: 1; font-size: 1.05rem; } .venue-card-top img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); } .venue-initial { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; } .venue-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; } .venue-card-stats .num { display: block; font-size: 1.4rem; font-weight: 700; } .venue-card-stats span:last-child { font-size: 0.72rem; color: var(--text-2); } @media (hover: hover) { .venue-card:hover, body.owner .venuetile:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(17, 24, 39, 0.05), 0 12px 28px rgba(17, 24, 39, 0.1); } } /* Login: a card centred on the screen, both ways. */ body.login { display: flex; flex-direction: column; background: #f8f9fb radial-gradient(circle at 50% 0%, #e0e7ff 0%, #f8f9fb 60%) no-repeat; } .login-screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px; } .login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px 24px; box-shadow: 0 10px 40px rgba(79, 70, 229, 0.12), 0 2px 6px rgba(17, 24, 39, 0.05); } .login-brand { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--accent); margin-bottom: 14px; } .login-card h1 { font-size: 1.4rem; margin: 0 0 16px; } .login-card form { max-width: none; margin: 0; gap: 12px; } .login-card .btn { width: 100%; margin-top: 4px; } .login-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 10px 12px; font-size: 0.9rem; margin: 0 0 12px; } body.owner .muted { color: var(--text-2); } body.owner .btn { background: var(--accent); border-radius: 10px; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25); } body.owner .btn:hover { background: #4338ca; } body.owner .btn-outline { background: var(--surface); color: var(--accent-ink); border: 1px solid #c7d2fe; box-shadow: none; } body.owner .btn-outline:hover { background: var(--accent-soft); } body.owner .btn-danger { background: #dc2626; box-shadow: none; } body.owner .link { color: var(--accent-ink); text-decoration-color: #c7d2fe; text-underline-offset: 3px; } body.owner .link.danger { color: #dc2626; text-decoration-color: #fecaca; } body.owner input, body.owner select, body.owner textarea { border-color: #dde1ec; border-radius: 10px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.owner input:focus, body.owner select:focus, body.owner textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); } body.owner input[type="color"] { padding: 4px; } /* Header + pinned jump bar */ body.owner .dash-head h1 { font-size: 1.5rem; letter-spacing: -0.01em; } body.owner .langswitch { border-color: #dde1ec; background: var(--surface); } body.owner .langswitch button.on { background: var(--accent); } body.owner .jump-bar { background: rgba(248, 249, 252, 0.85); border-bottom-color: var(--line); } body.owner .jump a { color: #4b5563; font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease; } body.owner .jump a:hover { background: var(--accent-soft); } body.owner .jump a.active { background: var(--accent); color: #fff; } body.owner .jump a.active .pill-warn { background: #fff; color: #b45309; } /* Filters */ body.owner .pill { background: var(--surface); border: 1px solid #dde1ec; color: #374151; } body.owner .pill:hover { border-color: #c7d2fe; } body.owner .pill-active, body.owner .btn-small.pill-active { background: var(--accent); border-color: var(--accent); color: #fff; } body.owner .pill-warn { background: #f59e0b; border: none; color: #fff; } /* Cards */ body.owner .stat, body.owner .chartbox, body.owner .staffrow, body.owner .venuetile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) { body.owner .stat:hover, body.owner .chartbox:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(17, 24, 39, 0.05), 0 10px 24px rgba(17, 24, 39, 0.09); } } body.owner .stat { position: relative; padding: 18px 12px 14px; text-align: center; overflow: hidden; } body.owner .stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tone, var(--accent)); } body.owner .stat-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tone-soft, var(--accent-soft)); color: var(--tone, var(--accent)); font-size: 0.9rem; margin-bottom: 4px; } body.owner .stat .num { font-size: 1.9rem; letter-spacing: -0.02em; } body.owner .tone-indigo { --tone: #4f46e5; --tone-soft: #eef2ff; } body.owner .tone-sky { --tone: #0ea5e9; --tone-soft: #e0f2fe; } body.owner .tone-amber { --tone: #f59e0b; --tone-soft: #fef3c7; } body.owner .chartbox h3 { color: #111827; } /* Alerts */ body.owner .alertbox { background: linear-gradient(180deg, #fffbeb, #fff7ed); border: 1px solid #fcd34d; border-radius: 14px; box-shadow: var(--shadow); } body.owner .alert-item { border-top-color: #fde68a; } body.owner .ok { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 12px 14px; } /* Tables become cards too */ body.owner table { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: var(--shadow); } body.owner th { background: #f8f9fc; color: #6b7280; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } body.owner th, body.owner td { border-bottom: 1px solid var(--line); padding: 10px 10px; } body.owner tr:last-child td { border-bottom: none; } body.owner tbody tr { transition: background-color 0.15s ease; } @media (hover: hover) { body.owner tbody tr:hover { background: #fafbff; } } body.owner tr.flag { background: #fff5f5; box-shadow: inset 3px 0 0 #f87171; } /* Filter chips above the ratings list */ .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; } .chip { padding: 6px 12px; border-radius: 999px; border: 1px solid #dde1ec; background: #fff; color: #374151; text-decoration: none; font-size: 0.85rem; font-weight: 500; } .chip.s1, .chip.star-1 { --star: #dc2626; } .chip.star-2 { --star: #f97316; } .chip.star-3 { --star: #eab308; } .chip.star-4 { --star: #84cc16; } .chip.star-5 { --star: #16a34a; } .chip[class*="star-"] { color: var(--star); } .chip.on { background: var(--star, #4f46e5); border-color: var(--star, #4f46e5); color: #fff; } .chip.star-3.on, .chip.star-4.on { color: #1a1a1a; } /* Charts: bars grow in; distribution bars are links */ .bar-h { transform-box: fill-box; transform-origin: left center; animation: grow-x 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .bar-v { transform-box: fill-box; transform-origin: center bottom; animation: grow-y 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } } @keyframes grow-y { from { transform: scaleY(0); } to { transform: none; } } .bar-link { cursor: pointer; } .bar-link:hover rect.bar-h { filter: brightness(1.1); } @media (max-width: 480px) { .wrap { padding: 16px 12px 50px; } .cardtile { flex-direction: column; align-items: flex-start; } .resolveform { flex-direction: column; align-items: stretch; } .resolveform input { width: 100%; } } /* ============================================================ Typography — one type system for the whole app. Inter (self-hosted, see /fonts in server.js) with Polish and Ukrainian coverage; one scale, and form controls use it too (browsers otherwise fall back to Arial in inputs and buttons). ============================================================ */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-cyrillic-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } :root { --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ink: #0f172a; /* titles */ --ink-2: #334155; /* body text, labels */ --ink-3: #64748b; /* hints, captions */ --ink-4: #94a3b8; /* placeholders, disabled */ } html { font-size: 15px; } body { font-family: var(--font); color: var(--ink-2); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; } button, input, select, textarea, .btn { font-family: inherit; } /* Scale: 30 / 22 / 17 / 15 / 14 / 13 / 12 */ h1 { font-size: 1.6rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.022em; color: var(--ink); } .center h1, .login-card h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; line-height: 1.35; font-weight: 650; letter-spacing: -0.012em; color: var(--ink); margin: 32px 0 6px; } h3 { font-size: 0.95rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); margin: 0 0 8px; } .muted { font-size: 0.875rem; color: var(--ink-3); line-height: 1.5; } h2 + .muted, h3 + .muted { margin-top: 0; } strong { font-weight: 600; color: var(--ink); } .lead { font-size: 1.07rem; color: var(--ink-2); } /* Form controls: same font, one height, calm borders */ label { font-size: 0.85rem; font-weight: 500; color: var(--ink-2); gap: 6px; } label .muted { font-weight: 400; font-size: 0.8rem; } input, select, textarea { font-size: 0.95rem; color: var(--ink); line-height: 1.4; } input:not([type="checkbox"]):not([type="color"]):not([type="file"]), select { min-height: 44px; padding: 10px 14px; } input[type="file"] { font-size: 0.875rem; color: var(--ink-3); padding: 8px; } input::placeholder, textarea::placeholder { color: var(--ink-4); opacity: 1; } .btn { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn-small { font-size: 0.85rem; } .link, .navlink, .pill, .chip, .crumb { font-family: inherit; } .link { font-size: 0.875rem; font-weight: 500; } .navlink { font-size: 0.875rem; } /* Numbers and dates line up */ .num, .stat .num, .venue-card-stats .num, td, .pill, .chip { font-variant-numeric: tabular-nums; } .stat .num, .venue-card-stats .num { font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .stat .num ~ div, .stat div:last-child, .venue-card-stats span:last-child { font-size: 0.78rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0.01em; } /* Tables */ table { font-size: 0.875rem; } th { font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; color: var(--ink-3) !important; } td { color: var(--ink-2); } /* Owner & admin pages: content lines up with the header (not a narrow centred column), at a comfortable reading width. */ body.owner .wrap { max-width: 1200px; padding: 8px 16px 64px; } body.owner .wrap > * { max-width: 760px; } body.owner .wrap > form, body.owner form:not(.inline-add):not(.renameform):not(.resolveform):not(.plainform):not(.calendarform):not(.cardassign):not(.langswitch) { max-width: 520px; } body.owner .dash-head h1 { font-size: 1.75rem; } .crumb { font-size: 0.8rem; } .venue-card-top strong { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; } .login-brand { font-size: 1.1rem; letter-spacing: -0.02em; } /* Settings panels: each section is a white card with its own heading. */ body.owner .wrap > .panel, body.owner .wrap > .panel-pair { max-width: 760px; } .panel { background: #fff; border: 1px solid var(--line, #eceef5); border-radius: 16px; box-shadow: var(--shadow, 0 1px 2px rgba(17,24,39,.04), 0 4px 16px rgba(17,24,39,.06)); padding: 20px 22px 18px; margin: 0 0 16px; } .panel-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line, #eceef5); } .panel-head h2 { margin: 0; font-size: 1.05rem; } .panel > .muted:first-of-type { margin-top: 0; } .panel form { margin: 12px 0 4px; } .panel .stafflist { margin: 12px 0; } .panel .staffrow { box-shadow: none; background: #fafbfc; } .panel h3 { margin-top: 20px; } .badge { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink, #3730a3); background: var(--accent-soft, #eef2ff); padding: 3px 8px; border-radius: 999px; } .panel-pair { display: grid; grid-template-columns: 1fr; gap: 0 16px; } @media (min-width: 900px) { .panel-pair { grid-template-columns: 1fr 1fr; } .panel-pair .panel form { max-width: none; } } .client-cols .panel { margin-top: 24px; } /* Key-value rows (read-only venue details) */ .kv { margin: 0 0 8px; } .kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line, #eceef5); font-size: 0.9rem; } .kv > div:last-child { border-bottom: none; } .kv dt { color: var(--ink-3); } .kv dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; } .ok-dot { color: #15803d; } /* Guest page keeps a friendly, slightly larger scale */ body.customer h1 { font-size: 1.55rem; } body.customer .btn { font-size: 1rem; }