/* ============================================================================ Canvas Republic — Client Balance Portal Design: colors and fonts matched to the real canvasrepublic.co.za site — warm khaki/taupe as the primary accent (their "Book Consultation" / "Send Request" button color), charcoal as the brand dark (their sticky top bar and footer), Playfair Display for headings, DM Sans for body copy, and Montserrat for nav/button UI text — the same three typefaces the live site uses. Two modes: "Highveld Dawn" for light, "Karoo Night" for dark (easier on the eyes for a screen that stays open all day); the dark palette is our own extension since the marketing site has no dark mode, built from the same warm-neutral family. Each user picks their own light/dark mode from the Settings tab (data-mode="light"|"dark" on , stored per-browser); the admin additionally picks which theme is installed app-wide from the same tab (data-theme on — only "canvas-republic" exists today, but the attribute is there so a second theme can be added later without reworking this). data-role is separate and layout-only (admin gets a wider shell and no mobile layout) — it does not affect color. IBM Plex Mono is kept for money and status figures — a functional choice for tabular numbers, not a brand font — unchanged across modes so light and dark feel like the same product. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap"); /* Highveld Dawn — light mode (default until a user picks otherwise) */ :root { --bg: #f6f4ef; --surface: #ffffff; --surface-2: #ece6db; --ink: #16191c; --ink-dim: #63625c; --border: #ddd5c7; --accent: #8c7b6b; --accent-ink: #ffffff; --forest: #2e2c2a; --forest-ink: #f7f5f0; --success: #3f5c46; --success-bg: #e3e9e0; --warning: #a8703f; --warning-bg: #f1e2d1; --danger: #a8433a; --danger-bg: #f3ddd8; --shadow: 0 1px 2px rgba(20, 18, 15, 0.06), 0 10px 28px rgba(20, 18, 15, 0.08); --radius: 14px; --radius-sm: 9px; --font-display: "Playfair Display", Georgia, serif; --font-body: "DM Sans", -apple-system, "Segoe UI", sans-serif; --font-ui: "Montserrat", -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; } /* Karoo Night — dark mode. Applied via data-mode="dark" on , set in app.js from the user's own Settings choice (or the role-based default — admin starts on dark, client starts on light — until they pick one). */ :root[data-mode="dark"] { --bg: #15181b; --surface: #1e2225; --surface-2: #262a2d; --ink: #f0ece3; --ink-dim: #a39d93; --border: #34383b; --accent: #b9a58e; --accent-ink: #201a12; --forest: #3c3833; --forest-ink: #f0ece3; --success: #7fa887; --success-bg: rgba(127, 168, 135, 0.16); --warning: #d9a06a; --warning-bg: rgba(217, 160, 106, 0.16); --danger: #d98d82; --danger-bg: rgba(217, 141, 130, 0.16); --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; } body { min-height: 100vh; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; margin: 0; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } button { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid transparent; padding: 0.65rem 1.1rem; transition: transform 0.08s ease, opacity 0.15s ease; } button:active { transform: translateY(1px); } button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover:not(:disabled) { opacity: 0.92; } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--surface-2); } .btn-danger { background: var(--danger-bg); color: var(--danger); } .btn-danger:hover:not(:disabled) { opacity: 0.85; } .btn-success { background: var(--success-bg); color: var(--success); } .btn-success:hover:not(:disabled) { opacity: 0.85; } .btn-small { padding: 0.4rem 0.75rem; font-size: 0.82rem; } input, textarea, select { font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; width: 100%; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } label { display: block; font-size: 0.82rem; color: var(--ink-dim); margin-bottom: 0.3rem; font-weight: 600; } .field { margin-bottom: 0.9rem; } /* ---------- shell ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.5rem; background: var(--forest); color: var(--forest-ink); } .brand { display: flex; align-items: center; gap: 0.65rem; } .brand-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: rgba(244, 241, 232, 0.1); flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; } .brand .wordmark { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.15; } .brand .tagline { font-size: 0.72rem; opacity: 0.75; letter-spacing: 0.04em; text-transform: uppercase; } .who { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; } .who .pill { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(244, 241, 232, 0.15); padding: 0.25rem 0.55rem; border-radius: 999px; } .who button { background: transparent; color: var(--forest-ink); border: 1px solid rgba(244, 241, 232, 0.35); } .who button:hover { background: rgba(244, 241, 232, 0.12); } .shell { max-width: 980px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; } :root[data-role="admin"] .shell { max-width: 1440px; } /* Floating "+" button (admin Events tab -> opens the dedicated Add Event page) */ .fab-add { position: fixed; right: 1.75rem; bottom: 1.75rem; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 1.9rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); cursor: pointer; z-index: 40; } .fab-add:hover { filter: brightness(1.08); } .checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; cursor: pointer; } .checkbox-label input[type="checkbox"] { width: 16px; height: 16px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; } /* ---------- indemnity signing modal (event check-in) ---------- */ .indemnity-modal-overlay { position: fixed; inset: 0; background: rgba(15, 14, 12, 0.55); display: flex; align-items: center; justify-content: center; padding: 1.25rem; z-index: 80; } .indemnity-modal { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; } .indemnity-modal-text { max-height: 220px; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem 1rem; font-size: 0.85rem; color: var(--ink-dim); } .indemnity-modal-text p { margin: 0 0 0.75rem; } .indemnity-modal-text p:last-child { margin-bottom: 0; } .indemnity-signature-wrap { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; line-height: 0; } #indemnity-signature-canvas { width: 100%; height: 200px; display: block; cursor: crosshair; } /* ---------- auth ---------- */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; } .auth-card { width: 100%; max-width: 400px; } .auth-card h1 { font-size: 1.6rem; margin-bottom: 0.25rem; } .auth-card .sub { color: var(--ink-dim); font-size: 0.88rem; margin-bottom: 1.5rem; } .tabbar { display: flex; gap: 0.4rem; margin-bottom: 1.4rem; background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.25rem; } .tabbar button { flex: 1; background: transparent; color: var(--ink-dim); padding: 0.5rem; } .tabbar button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .error-msg { background: var(--danger-bg); color: var(--danger); padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1rem; } .hint-msg { background: var(--success-bg); color: var(--success); padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1rem; } .password-reminder-banner { background: var(--warning-bg); color: var(--warning); padding: 0.65rem 1.5rem; font-size: 0.85rem; text-align: center; } .link-btn { background: none; border: none; padding: 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; } /* ---------- dashboard bits ---------- */ .stack { display: flex; flex-direction: column; gap: 1.25rem; } .section-title { font-size: 1.05rem; margin-bottom: 1rem; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } } .balance-hero { background: var(--forest); color: var(--forest-ink); } .balance-hero .event-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; } .balance-hero .event-date { font-size: 0.82rem; opacity: 0.75; margin-top: 0.15rem; } .balance-row { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1.25rem; } .balance-stat .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; } .balance-stat .value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; margin-top: 0.2rem; } .progress-track { height: 8px; border-radius: 999px; background: rgba(244, 241, 232, 0.18); margin-top: 1.1rem; overflow: hidden; } .progress-fill { height: 100%; background: var(--accent); border-radius: 999px; } .badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.22rem 0.55rem; border-radius: 999px; } .badge-pending { background: var(--warning-bg); color: var(--warning); } .badge-approved { background: var(--success-bg); color: var(--success); } .badge-rejected { background: var(--danger-bg); color: var(--danger); } .row-list { display: flex; flex-direction: column; } .row-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); } .row-item:last-child { border-bottom: none; } .row-item .main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .row-item .title { font-weight: 600; } .row-item .meta { font-size: 0.78rem; color: var(--ink-dim); } .row-item .amount { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; } .row-actions { display: flex; gap: 0.4rem; flex-shrink: 0; } .empty-note { color: var(--ink-dim); font-size: 0.88rem; padding: 0.5rem 0; } .file-drop { border: 1.5px dashed var(--border); border-radius: var(--radius-sm); padding: 1rem; text-align: center; font-size: 0.85rem; color: var(--ink-dim); cursor: pointer; } .file-drop.has-file { border-color: var(--accent); color: var(--ink); } .admin-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; } .admin-tabs button { background: var(--surface); border: 1px solid var(--border); color: var(--ink-dim); } .admin-tabs button.active { background: var(--forest); border-color: var(--forest); color: var(--forest-ink); } .count-chip { background: var(--danger); color: #fff; font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 0.05rem 0.4rem; margin-left: 0.35rem; } .proof-link { color: var(--accent); font-weight: 600; text-decoration: none; font-size: 0.85rem; } .proof-link:hover { text-decoration: underline; } .subcard { background: var(--surface-2); border-radius: var(--radius-sm); padding: 1rem; } .package-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .package-name { font-weight: 700; } .package-price { font-family: var(--font-mono); font-weight: 600; color: var(--accent); white-space: nowrap; } .booking-cancelled { opacity: 0.62; } .chat-card { display: flex; flex-direction: column; gap: 1rem; } .chat-messages { display: flex; flex-direction: column; gap: 0.6rem; max-height: 440px; overflow-y: auto; padding: 0.25rem 0.1rem; } .chat-bubble { max-width: 78%; padding: 0.55rem 0.85rem; border-radius: var(--radius-sm); background: var(--surface-2); align-self: flex-start; } .chat-bubble.chat-mine { align-self: flex-end; background: var(--accent); color: var(--accent-ink); } .chat-meta { font-size: 0.68rem; opacity: 0.75; margin-bottom: 0.2rem; } .chat-body { white-space: pre-wrap; font-size: 0.92rem; line-height: 1.4; } .chat-composer { display: flex; gap: 0.6rem; align-items: flex-end; } .chat-composer textarea { flex: 1; resize: vertical; min-height: 2.4rem; font-family: var(--font-body); } .review-note-field { margin-top: 0.6rem; } .avatar-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .avatar-preview, .avatar-preview.avatar-fallback { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; } .avatar-preview.avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-dim); font-family: var(--font-display); font-size: 2rem; font-weight: 600; } .avatar-form { display: flex; flex-direction: column; gap: 0.5rem; } .avatar-mini, .avatar-mini.avatar-fallback { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; } .avatar-mini.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-dim); font-size: 0.75rem; font-weight: 700; } .topbar .avatar-mini, .topbar .avatar-mini.avatar-fallback { border-color: rgba(244, 241, 232, 0.4); } .topbar .avatar-mini.avatar-fallback { background: rgba(244, 241, 232, 0.15); color: var(--forest-ink); } .loading-veil { text-align: center; padding: 3rem 1rem; color: var(--ink-dim); font-family: var(--font-display); font-size: 1.1rem; } /* ---------- event grid (drill-down entry point for Bookings + Reports) ---------- */ .event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; } .event-grid-card { display: flex; flex-direction: column; align-items: stretch; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0; overflow: hidden; font-weight: 400; } .event-grid-card:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); } .event-grid-card .body { padding: 0.75rem 0.9rem 0.9rem; } .event-grid-card .ev-name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin-bottom: 0.15rem; } .event-grid-card .ev-meta { font-size: 0.78rem; color: var(--ink-dim); } .event-thumb, .event-thumb.event-thumb-fallback { width: 100%; height: 120px; object-fit: cover; display: block; background: var(--surface-2); } .event-thumb.event-thumb-fallback { display: flex; align-items: center; justify-content: center; color: var(--ink-dim); font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; } .event-thumb-card, .event-thumb-card.event-thumb-fallback { width: 96px; height: 96px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; background: var(--surface-2); } .event-thumb-card.event-thumb-fallback { display: flex; align-items: center; justify-content: center; color: var(--ink-dim); font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; } /* ---------- package photo gallery ---------- */ .pkg-photo-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; } .pkg-photo-thumb { position: relative; width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; } .pkg-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pkg-photo-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; line-height: 1; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.9rem; cursor: pointer; } /* ---------- testimonials ---------- */ .star-rating { color: var(--accent); letter-spacing: 1px; } /* ---------- event / package photo galleries (client detail views) ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; } .gallery-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); } .gallery-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- collapsible package row (client Events tab) ---------- */ .package-row-toggle { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; } .package-row-toggle:hover .expand-hint { color: var(--accent); } .expand-hint { display: block; font-size: 0.78rem; color: var(--ink-dim); margin-top: 0.3rem; } /* ---------- data tables (admin Bookings tab) ---------- */ .table-scroll { overflow-x: auto; margin: -0.25rem; padding: 0.25rem; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; white-space: nowrap; } .data-table th, .data-table td { padding: 0.55rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border); } .data-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-dim); font-weight: 700; } .data-table tbody tr:hover { background: var(--surface-2); } .checkin-highlight-row { background: var(--warning-bg) !important; box-shadow: inset 3px 0 0 var(--warning); animation: checkin-highlight-pulse 1.6s ease-out 2; } @keyframes checkin-highlight-pulse { 0% { background: var(--warning-bg); } 50% { background: var(--surface); } 100% { background: var(--warning-bg); } } .data-table td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .data-table th.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; } .data-table th.sortable-th:hover { color: var(--ink); } .data-table th.sortable-th .sort-arrow { margin-left: 0.25rem; opacity: 0.7; } /* ---------- report stat tiles (admin Reports tab) ---------- */ .report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } .report-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; } .report-stat-card .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-dim); font-weight: 600; } .report-stat-card .value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; margin-top: 0.3rem; color: var(--forest); } /* ---------- site footer (mirrors canvasrepublic.co.za's footer) ---------- */ .site-footer { margin-top: 2.5rem; background: var(--forest); color: var(--forest-ink); padding: 2.25rem 1.5rem 1.5rem; } .footer-inner { max-width: 980px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; } :root[data-role="admin"] .footer-inner { max-width: 1440px; } .footer-brand { flex-shrink: 0; } .footer-logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: rgba(244, 241, 232, 0.1); } .footer-contact { flex: 1; min-width: 220px; } .footer-heading { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin: 0 0 0.4rem; } .footer-tagline { font-size: 0.85rem; opacity: 0.75; margin: 0 0 0.6rem; } .footer-line { font-size: 0.85rem; margin: 0 0 0.3rem; } .footer-line a { color: var(--forest-ink); text-decoration: none; } .footer-line a:hover { text-decoration: underline; } .footer-label { display: inline-block; min-width: 3.5rem; opacity: 0.65; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } .footer-social { display: flex; gap: 0.6rem; align-items: center; flex-shrink: 0; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(244, 241, 232, 0.12); color: var(--forest-ink); } .footer-social a:hover { background: rgba(244, 241, 232, 0.22); } .footer-bottom { max-width: 980px; margin: 1.75rem auto 0; padding-top: 1.1rem; border-top: 1px solid rgba(244, 241, 232, 0.15); text-align: center; font-size: 0.72rem; letter-spacing: 0.02em; opacity: 0.65; } :root[data-role="admin"] .footer-bottom { max-width: 1440px; } @media (max-width: 640px) { .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .footer-social { align-self: flex-start; } } /* ============================================================================ Mobile layout — CLIENT PORTAL ONLY. Scoped with :root:not([data-role="admin"]) — app.js only ever sets data-role="admin" on once an admin profile is loaded, so every rule below is a no-op on the admin view (and on the shared login/signup screen, seeing it here is a bonus, not a requirement). The admin view keeps exactly its current desktop layout at every width on purpose. ========================================================================== */ @media (max-width: 640px) { :root:not([data-role="admin"]) .shell { padding: 1.25rem 1rem 3rem; } :root:not([data-role="admin"]) .topbar { flex-wrap: wrap; row-gap: 0.5rem; padding: 0.8rem 1rem; } :root:not([data-role="admin"]) .brand .tagline { display: none; } :root:not([data-role="admin"]) .who { width: 100%; justify-content: space-between; font-size: 0.78rem; } :root:not([data-role="admin"]) .who > span:not(.pill) { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* client's own tab strip (Events / Bookings / Payments / Chat / Profile) — scrolls horizontally instead of squeezing five tabs into one row */ :root:not([data-role="admin"]) .admin-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem 1.1rem; padding: 0 1rem 0.35rem; } :root:not([data-role="admin"]) .admin-tabs button { flex-shrink: 0; } :root:not([data-role="admin"]) .balance-row { gap: 1.1rem; row-gap: 0.9rem; } :root:not([data-role="admin"]) .row-item { flex-direction: column; align-items: stretch; gap: 0.4rem; } :root:not([data-role="admin"]) .row-item .amount { align-self: flex-start; } :root:not([data-role="admin"]) .row-actions { width: 100%; } :root:not([data-role="admin"]) .row-actions button { flex: 1; } :root:not([data-role="admin"]) .package-row { flex-direction: column; align-items: flex-start; gap: 0.3rem; } :root:not([data-role="admin"]) .avatar-row { gap: 0.9rem; } :root:not([data-role="admin"]) .chat-bubble { max-width: 90%; } :root:not([data-role="admin"]) .chat-composer { flex-wrap: wrap; } :root:not([data-role="admin"]) .chat-composer button { flex: 1; } } /* ============================================================================ Public marketing site (merged from canvasrepublic.co.za) — shown only to logged-out visitors on a marketing route (see renderPublicSite in app.js). Reuses the same design tokens/fonts as the rest of the app (--accent, --font-display, .card, .badge, .footer-*, etc.) so it feels like one product, not a bolted-on second site. ========================================================================== */ .public-site { max-width: 900px; margin: 0 auto; padding: 0 1.25rem 2.5rem; } :root[data-role="admin"] .public-site { max-width: 900px; } .pub-topbar { background: var(--forest); color: var(--forest-ink); } .pub-topbar-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 1.25rem; padding: 0.85rem 1.25rem; flex-wrap: wrap; } .pub-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; flex-shrink: 0; } .pub-brand-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: rgba(244, 241, 232, 0.1); } .pub-brand-text { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; } .pub-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-left: 0.5rem; flex: 1; } .pub-nav-link { font-family: var(--font-ui); font-size: 0.88rem; font-weight: 500; color: rgba(244, 241, 232, 0.8); text-decoration: none; padding: 0.3rem 0; border-bottom: 2px solid transparent; } .pub-nav-link:hover { color: var(--forest-ink); } .pub-nav-link.active { color: var(--forest-ink); border-bottom-color: var(--accent); } .pub-nav-auth { display: flex; gap: 0.5rem; flex-shrink: 0; } .pub-nav-auth .btn-secondary { color: var(--forest-ink); border-color: rgba(244, 241, 232, 0.35); } .pub-nav-auth .btn-secondary:hover { background: rgba(244, 241, 232, 0.12); } .pub-section { margin-top: 1.75rem; } .pub-hero { text-align: center; padding: 2.5rem 0 0.5rem; } .pub-hero h1 { font-size: 1.9rem; max-width: 640px; margin: 0 auto 1.1rem; } .pub-hero-quote { max-width: 620px; margin: 0 auto 1.25rem; color: var(--ink-dim); font-style: italic; line-height: 1.6; } .pub-hero-attrib { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.82rem; color: var(--ink-dim); } .pub-cta { display: inline-block; margin-top: 1.25rem; text-decoration: none; } .pub-testimonial { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.3rem; max-width: 480px; margin: 0 auto; text-align: center; color: var(--warning); letter-spacing: 0.05em; } .pub-testimonial p { color: var(--ink); font-style: italic; margin: 0.5rem 0 0.4rem; letter-spacing: normal; } .pub-testimonial-author { font-family: var(--font-ui); font-weight: 600; font-size: 0.82rem; color: var(--ink-dim); } .lead-form .field { margin-bottom: 0.85rem; } .lead-form-compact { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; } .lead-form-compact .field { margin-bottom: 0; flex: 1; min-width: 160px; } .lead-form-compact button { flex-shrink: 0; } .footer-lead { flex: 1; min-width: 260px; } .footer-lead .field label { color: rgba(244, 241, 232, 0.75); } .footer-lead input { background: rgba(244, 241, 232, 0.08); border-color: rgba(244, 241, 232, 0.25); color: var(--forest-ink); } .footer-lead .error-msg, .footer-lead .hint-msg { flex-basis: 100%; } @media (max-width: 640px) { .pub-topbar-inner { justify-content: center; text-align: center; } .pub-nav { justify-content: center; margin-left: 0; } .pub-nav-auth { width: 100%; justify-content: center; } .pub-hero h1 { font-size: 1.5rem; } .lead-form-compact { flex-direction: column; align-items: stretch; } } .pub-hero-photo { max-width: 1100px; margin: 1.5rem auto 0; padding: 0 1.25rem; } .pub-hero-photo img { width: 100%; max-height: 480px; object-fit: cover; border-radius: var(--radius); display: block; } .pub-testimonial-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 0.6rem; }