/* ================================================================ PUBLIC APP THEME — Young Audience (8–25 years) ================================================================ Overrides shared DesignSystem tokens (scoutbadger-ui.css) to create a vibrant, playful, mobile-first aesthetic for scouts. Loaded ONLY by the Public host's index.html — does NOT affect the Manager app. Place AFTER scoutbadger-ui.css in . ================================================================ */ /* ── 1. TOKEN OVERRIDES ──────────────────────────────────────────── */ :root { /* ── Typography ────────────────────────────────────────────── Poppins is friendly, geometric & modern — perfect for a younger audience. Already loaded via Google Fonts. ──────────────────────────────────────────────────────── */ --app-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --app-font-family-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Slightly bumped for mobile readability */ --app-font-size-base: 0.9375rem; /* 15px */ --app-font-size-caption: 0.8125rem; /* 13px */ --app-font-size-meta: 0.875rem; /* 14px */ --app-font-size-body: 0.9375rem; /* 15px */ --app-font-size-title: 1.0625rem; /* 17px */ --app-font-weight-bold: 600; /* ── Primary color — Vivid scout orange ──────────────────── */ --app-color-primary: #f97316; --app-color-primary-dark: #ea580c; --app-color-primary-light: #fff7ed; --app-color-primary-text: #ffffff; /* Override shared token default (green) so all components using --sb-public-primary inherit the orange palette */ --sb-public-primary: var(--app-color-primary); /* ── Surfaces — Clean & slightly warm ────────────────────── */ --app-color-surface: #ffffff; --app-color-surface-alt: #f8fafb; --app-color-surface-muted: #f1f5f9; /* ── Text — Slate palette (readable, not harsh) ──────────── */ --app-color-text: #1e293b; /* Slate-900 */ --app-color-text-muted: #64748b; /* Slate-500 */ --app-color-text-secondary: #94a3b8; /* Slate-400 */ /* ── Borders — Light & subtle ────────────────────────────── */ --app-color-border: #e2e8f0; /* Slate-200 */ /* ── Warm amber/orange accent — complements primary ──────── */ --app-color-teal: #ea580c; --app-color-teal-light: #ffedd5; --app-color-teal-hover: #fed7aa; --app-color-teal-border: #fdba74; --app-color-teal-muted: rgba(234, 88, 12, 0.10); /* ── Amber accent — Warmer & friendlier ──────────────────── */ --app-color-amber: #f59e0b; --app-color-amber-light: #fef3c7; --app-color-amber-muted: rgba(245, 158, 11, 0.10); /* ── Corners — Rounder = more playful ────────────────────── */ --app-radius-s: 0.625rem; /* 10px */ --app-radius-m: 1rem; /* 16px */ --app-radius-l: 1.25rem; /* 20px */ --sb-radius-card: 1rem; /* Friendly card corners */ /* ── Shadows — Soft, tinted depth ────────────────────────── */ --app-shadow-s: 0 2px 8px rgba(var(--app-primary-rgb), 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); --app-shadow-m: 0 4px 16px rgba(var(--app-primary-rgb), 0.08), 0 2px 6px rgba(0, 0, 0, 0.04); --app-shadow-focus: 0 0 0 3px rgba(var(--app-primary-rgb), 0.30); /* ── Chips — Orange-tinted active states ──────────────────── */ --app-chip-bg: #f1f5f9; --app-chip-bg-hover: #e2e8f0; --app-chip-border: #cbd5e1; --app-chip-color: #475569; --app-chip-color-hover: #1e293b; --app-chip-active-bg: #ffedd5; --app-chip-active-border: #fdba74; --app-chip-active-color: #9a3412; --app-chip-active-bg-hover: #fed7aa; /* ── Stats — Vibrant data colours ────────────────────────── */ --app-stat-color-default: #1e293b; --app-stat-color-warning: var(--app-color-amber); --app-stat-color-success: #059669; /* Emerald-600 */ --app-stat-color-muted: #94a3b8; /* ── Transitions — Snappy, responsive feel ───────────────── */ --sb-transition-fast: 120ms cubic-bezier(0.2, 0, 0.2, 1); --sb-transition-base: 200ms cubic-bezier(0.2, 0, 0.2, 1); /* ── Spacing — Generous touch targets ────────────────────── */ --app-spacing-xs: 0.375rem; /* 6px */ --app-spacing-s: 0.625rem; /* 10px */ /* ── RGB channels — enables rgba(var(--app-primary-rgb), 0.xx) ─── */ --app-primary-rgb: 249, 115, 22; --app-primary-dark-rgb: 234, 88, 12; --app-surface-alt-rgb: 248, 250, 252; --app-dark-rgb: 2, 6, 23; /* ── Status colors ────────────────────────────────────────────── */ --app-color-success: #059669; --app-color-success-muted: rgba(5, 150, 105, 0.10); --app-color-error: #dc2626; --app-color-info: #0284c7; --app-color-info-muted: rgba(2, 132, 199, 0.12); /* ── Status badge tokens (align with public palette) ─────────── */ --sb-status-approved: #059669; /* Emerald-600 */ --sb-status-approved-bg: rgba(5, 150, 105, 0.10); --sb-status-rejected: #dc2626; /* Red-600 */ --sb-status-rejected-bg: rgba(220, 38, 38, 0.10); --sb-status-in-progress: #0284c7; /* Sky-600 */ --sb-status-in-progress-bg: rgba(2, 132, 199, 0.10); /* ── Overlay / glass ─────────────────────────────────────────── */ --app-color-overlay: rgba(2, 6, 23, 0.35); --app-color-overlay-soft: rgba(2, 6, 23, 0.25); /* ── Text on colored/dark backgrounds ────────────────────────── */ /* ── Stat card icon colors ───────────────────────────────────── */ --app-stat-icon-1-bg: rgba(var(--app-primary-rgb), 0.14); --app-stat-icon-1-color: var(--app-color-primary-dark); /* ── Review card triage accents ─────────────────────────────── */ --app-review-accent-approved: #059669; --app-review-accent-rejected: #dc2626; /* ── Hero / gradient ─────────────────────────────────────────── */ --app-gradient-shimmer: linear-gradient(90deg, rgba(var(--app-primary-rgb), 0.05), rgba(var(--app-primary-rgb), 0.55), rgba(var(--app-primary-dark-rgb), 0.45), rgba(var(--app-primary-dark-rgb), 0.05)); /* ── Body background ─────────────────────────────────────────── */ --app-color-body-bg: #fff7ed; /* ── RGB channels (match public status palette) ─────────────── */ --app-color-danger-rgb: 220, 38, 38; /* matches #dc2626 */ --app-color-success-rgb: 5, 150, 105; /* matches #059669 */ --app-color-amber-rgb: 245, 158, 11; /* matches #f59e0b */ --app-color-info-rgb: 2, 132, 199; /* matches #0284c7 */ /* ── Extended success (Emerald, matching --app-color-success) ── */ --app-color-success-dark: #047857; /* Emerald-700 */ --app-color-success-bg: #d1fae5; /* Emerald-100 */ --app-color-success-bg-light: #ecfdf5; /* Emerald-50 */ --app-color-success-border: #6ee7b7; /* Emerald-300 */ /* ── Extended error (matching --app-color-error: #dc2626) ────── */ --app-color-error-muted: rgba(220, 38, 38, 0.10); --app-color-danger-light: #ef4444; /* Red-500 */ /* ── Amber accent (warmer for public) ───────────────────────── */ --app-color-amber-accent: #fb923c; /* Orange-400 */ /* ── Primary muted (orange instead of green) ────────────────── */ --app-color-primary-muted: #c2410c; /* Orange-700 */ /* ── Gradient tokens (orange-based) ─────────────────────────── */ --app-gradient-hero-dark: linear-gradient(135deg, #7c2d12 0%, #9a3412 100%); --app-gradient-success: linear-gradient(90deg, #34d399, #059669); } /* ── 2. COMPONENT ENHANCEMENTS ─────────────────────────────────── Lightweight rules that add a youthful feel without rewriting the entire component library. Kept minimal so page-level scoped CSS (.razor.css) stays in charge of layout. ──────────────────────────────────────────────────────────────── */ /* ─── Card hover lift ──────────────────────────────────────────── Subtle "peelable" micro-interaction for tappable cards. */ .app-card { transition: transform var(--sb-transition-base), box-shadow var(--sb-transition-base); } .app-card:hover, .app-card:focus-within { transform: translateY(-2px); box-shadow: var(--app-shadow-m); } /* Disable hover lift on touch devices (avoids sticky hovers) */ @media (hover: none) { .app-card:hover { transform: none; box-shadow: var(--app-shadow-s); } } /* ─── Progress bars — vivid gradient fill ────────────────────── */ .sb-progress-fill, .app-progress__fill, .progress-bar__fill { background: linear-gradient(90deg, var(--app-color-primary), var(--app-color-primary-dark)); border-radius: var(--sb-radius-full); } /* ─── Buttons — pill shape, comfortable tap zone ─────────────── */ .app-button--primary, .btn--primary { border-radius: var(--sb-radius-full); font-weight: 600; letter-spacing: 0.01em; min-height: 2.75rem; /* 44px — iOS HIG minimum */ padding-inline: 1.5rem; } /* ─── Filter chips — smooth active transition ────────────────── */ .sb-filter-chip { transition: background var(--sb-transition-fast), border-color var(--sb-transition-fast), color var(--sb-transition-fast), box-shadow var(--sb-transition-fast); } .sb-filter-chip:active { transform: scale(0.96); } /* ─── Badge / award images — soft ring on hover ─────────────── */ .badge-image, .app-badge-image { transition: box-shadow var(--sb-transition-base), transform var(--sb-transition-base); } .badge-image:hover, .app-badge-image:hover { box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), 0.20); transform: scale(1.04); } /* ── 3. APPSHELL OVERRIDES ─────────────────────────────────────── Unique look and feel for the Public AppShell (desktop & mobile) ──────────────────────────────────────────────────────────────── */ /* Desktop background wash */ body { background-color: var(--app-color-primary-light); /* Very light green wash */ background-image: radial-gradient(circle at 15% 50%, rgba(var(--app-primary-rgb), 0.08), transparent 25%), radial-gradient(circle at 85% 30%, rgba(var(--app-primary-dark-rgb), 0.08), transparent 25%), radial-gradient(var(--app-chip-active-bg) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 24px 24px; background-attachment: fixed; } /* The main shell container on desktop */ .public-shell { border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 24px 48px -12px rgba(var(--app-primary-rgb), 0.15), 0 12px 24px -8px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1); border-radius: 1.75rem; background: var(--app-color-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); margin: var(--sb-space-4); height: calc(100dvh - env(safe-area-inset-top) - (var(--sb-space-4) * 2)); max-height: calc(100dvh - env(safe-area-inset-top) - (var(--sb-space-4) * 2)); } /* Main Content Area */ .public-shell__content { padding: 0 var(--sb-space-4); } /* Top Navigation Bar */ .public-shell__header { position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(var(--app-primary-rgb), 0.10)); border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 1.15rem; padding-top: var(--sb-space-4); padding-bottom: var(--sb-space-4); box-shadow: 0 8px 20px -10px rgba(var(--app-primary-rgb), 0.25), inset 0 1px 0 var(--app-color-glass-strong); /* overflow: hidden removed — was clipping topbar popup menus */ overflow: visible; } .public-shell__header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(var(--app-primary-rgb), 0.05), rgba(var(--app-primary-rgb), 0.55), rgba(var(--app-primary-dark-rgb), 0.45), rgba(var(--app-primary-dark-rgb), 0.05)); border-radius: 0 0 1.15rem 1.15rem; pointer-events: none; } /* Make the title pop with a gradient */ .public-shell__heading h1, .public-shell__heading h2, .public-shell__heading h3, .public-shell__heading .rz-label { background: linear-gradient(135deg, var(--app-color-primary), var(--app-color-primary-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing: -0.02em; } .public-shell__subtitle { color: var(--app-color-text-muted); font-weight: 500; } .public-shell__nav-toggle { border-radius: 0.85rem; background: linear-gradient(180deg, var(--app-color-primary-light), var(--app-color-primary-light)); color: var(--app-color-success); border: 1px solid rgba(var(--app-primary-rgb), 0.18); box-shadow: 0 6px 12px -8px rgba(var(--app-primary-rgb), 0.5); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, background-color 220ms ease; } .public-shell__nav-toggle:hover { background: linear-gradient(180deg, var(--app-color-primary-light), var(--app-chip-active-bg)); transform: translateY(-1px) scale(1.03); box-shadow: 0 10px 18px -10px rgba(var(--app-primary-rgb), 0.6); } /* Top Bar Actions (Notifications, Profile) */ .public-shell__actions .app-btn.icon-button, .public-shell__header .notification-menu-popup__trigger, .public-shell__header .profile-menu-popup__trigger, .public-shell__header .active-context-popup__trigger { border-radius: 0.85rem; background: linear-gradient(180deg, #ffffff, #f8fafc); border: 1px solid rgba(148, 163, 184, 0.26); box-shadow: 0 8px 14px -10px var(--app-color-overlay); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, background-color 220ms ease; } .public-shell__actions .app-btn.icon-button:hover, .public-shell__header .notification-menu-popup__trigger:hover, .public-shell__header .profile-menu-popup__trigger:hover, .public-shell__header .active-context-popup__trigger:hover { background: linear-gradient(180deg, var(--app-color-primary-light), var(--app-color-primary-light)); color: var(--app-color-success); transform: translateY(-1px) scale(1.03); box-shadow: 0 12px 20px -12px rgba(var(--app-primary-rgb), 0.52); } /* Bottom Navigation (Mobile) */ .public-bottom-nav { background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.92)); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255, 255, 255, 0.88); box-shadow: 0 20px 36px -12px var(--app-color-overlay-soft), 0 12px 24px -14px rgba(var(--app-primary-rgb), 0.32), inset 0 1px 0 var(--app-color-glass-strong); margin: 0 0.9rem calc(env(safe-area-inset-bottom, 0.5rem) + 0.45rem) 0.9rem; padding: 0.38rem; border-radius: 1.35rem; width: auto; } .public-bottom-nav .shell-bottom-nav__list { gap: 0.25rem; } /* Bottom Nav Items */ .public-bottom-nav .shell-bottom-nav__item { border-radius: 1rem; margin: 0 0.1rem; padding: 0.52rem 0.2rem; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms ease, color 220ms ease, box-shadow 220ms ease; color: var(--app-color-text-muted); } .public-bottom-nav .shell-bottom-nav__icon { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease; } .public-bottom-nav .shell-bottom-nav__label { letter-spacing: 0.01em; } .public-bottom-nav .shell-bottom-nav__item:active { transform: scale(0.95); } /* Side Navigation (Desktop) */ .public-side-nav { padding: 0.45rem; border-radius: 1.2rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(248, 250, 252, 0.9)); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px -14px var(--app-color-overlay); } .public-side-nav__menu .rz-navigation-item, .public-side-nav__menu .rz-panel-menu-item { border-radius: 0.95rem; margin: 0.22rem 0.25rem; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, background-color 220ms ease, color 220ms ease; border: 1px solid transparent; } .public-side-nav__menu .rz-navigation-item-link, .public-side-nav__menu .rz-panel-menu-item > .rz-navigation-item-link { border-radius: 0.88rem; min-height: 42px; align-items: center; padding-inline: 0.65rem; color: var(--app-color-text-strong); font-weight: 600; } .public-side-nav__menu .rz-navigation-item.rz-state-active > .rz-navigation-item-link, .public-side-nav__menu .rz-panel-menu-item.is-active > .rz-navigation-item-link { background: linear-gradient(135deg, var(--app-color-primary), var(--app-color-primary-dark)) !important; color: var(--app-color-surface) !important; font-weight: 600; box-shadow: 0 10px 18px -10px rgba(var(--app-primary-rgb), 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: translateX(3px); border: 1px solid rgba(255, 255, 255, 0.24); } .public-side-nav__menu .rz-navigation-item.rz-state-active > .rz-navigation-item-link .rzi, .public-side-nav__menu .rz-panel-menu-item.is-active > .rz-navigation-item-link .rzi { color: var(--app-color-surface) !important; } .public-side-nav__menu .rz-navigation-item:hover:not(.rz-state-active) > .rz-navigation-item-link, .public-side-nav__menu .rz-panel-menu-item:hover:not(.is-active) > .rz-navigation-item-link { background-color: var(--app-color-primary-light) !important; transform: translateX(2px); color: var(--app-color-primary-dark) !important; } .public-side-nav__menu .rz-navigation-item:hover .rzi, .public-side-nav__menu .rz-panel-menu-item:hover .rzi { transform: scale(1.07); transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); } .public-side-nav__menu .rz-navigation-item:active > .rz-navigation-item-link, .public-side-nav__menu .rz-panel-menu-item:active > .rz-navigation-item-link { transform: scale(0.98); } /* Mobile overrides */ @media (max-width: 768px) { body { background: var(--app-color-primary-light); /* Warm scout orange tint — consistent with desktop */ background-image: none; } .public-shell { border-radius: 0; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; margin: 0; border: none; height: calc(100dvh - env(safe-area-inset-top)); max-height: calc(100dvh - env(safe-area-inset-top)); } .public-shell__header { border-radius: 0 0 1.15rem 1.15rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.94)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.86); border-top: none; box-shadow: 0 10px 20px -14px var(--app-color-overlay-soft); padding-top: max(var(--sb-space-3), env(safe-area-inset-top)); padding-bottom: var(--sb-space-3); } .public-shell__heading h1, .public-shell__heading h2, .public-shell__heading h3, .public-shell__heading .rz-label { -webkit-text-fill-color: initial; color: var(--app-color-text-deep); background: none; } .public-bottom-nav { border-radius: 1.2rem; margin: 0 0.7rem calc(env(safe-area-inset-bottom, 0.5rem) + 0.3rem) 0.7rem; padding: 0.3rem; } .public-bottom-nav .shell-bottom-nav__item { min-height: 40px; padding: 0.4rem 0.2rem; } .public-bottom-nav .shell-bottom-nav__label { font-size: 0.79rem; } } /* ─── Headings — tighter tracking for Poppins ────────────────── */ h1, h2, h3, .app-heading { font-family: var(--app-font-family-heading); letter-spacing: -0.01em; } /* ─── Links & interactive text — green underline accent ──────── */ a:not([class]), .app-link { color: var(--app-color-primary); text-decoration-color: rgba(var(--app-primary-rgb), 0.3); text-underline-offset: 2px; transition: text-decoration-color var(--sb-transition-fast); } a:not([class]):hover, .app-link:hover { text-decoration-color: var(--app-color-primary); } /* ─── Selection colour ───────────────────────────────────────── */ ::selection { background: rgba(var(--app-primary-rgb), 0.18); color: inherit; } /* ─── Scrollbar (webkit) — slim & green-tinted ───────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--app-primary-rgb), 0.20); border-radius: var(--sb-radius-full); } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--app-primary-rgb), 0.35); } /* ═══════════════════════════════════════════════════════════════════ 5. REVIEW DETAIL PAGE OVERRIDES Rich media, clear status, and clean conversation view. ═══════════════════════════════════════════════════════════════════ */ /* ── Status Header Card ── */ .review-detail-page__overview-stack { align-items: flex-start; } .review-detail-page__title { font-family: var(--app-font-family-heading); font-weight: 700; font-size: 1.25rem; line-height: 1.3; color: var(--app-color-text-heading); margin: 0; } .review-detail-page__hero-img { width: 4rem; height: 4rem; /* Fallback */ aspect-ratio: 1/1; border-radius: 1.25rem; /* Squircle */ box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1); object-fit: contain; background: white; border: 3px solid white; } .review-detail-page__meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.25rem; } .review-detail-page__context { font-size: 0.85rem; font-weight: 600; color: var(--app-color-text-secondary); display: flex; align-items: center; gap: 0.35rem; } .review-detail-page__context-separator { color: var(--app-color-border-hover); } /* Note / Submission Text */ .review-detail-page__note-container { margin-top: 1rem; background: #f8fafc; border-radius: 1rem; padding: 1rem; border: 1px dashed var(--app-color-border); } .review-detail-page__note-label { display: block; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; color: var(--app-color-text-muted); margin-bottom: 0.35rem; letter-spacing: 0.05em; } .review-detail-page__note { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--app-color-text-body); white-space: pre-wrap; /* Preserve line breaks */ } /* ── Attachments List ── */ .review-detail-page__attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; } .review-attachment-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; background: white; border: 1px solid rgba(0,0,0,0.06); border-radius: 1rem; text-decoration: none !important; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.02); } .review-attachment-link:hover { transform: translateY(-2px); box-shadow: 0 8px 12px -4px rgba(0,0,0,0.08); /* Lift effect */ border-color: rgba(var(--app-primary-rgb), 0.3); } .review-attachment-link .rzi { font-size: 1.5rem; color: var(--app-color-primary); background: var(--app-color-primary-light); padding: 0.5rem; border-radius: 0.75rem; } .review-attachment-name { flex: 1; font-weight: 600; color: var(--app-color-text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .review-attachment-size { font-size: 0.75rem; color: var(--app-color-text-muted); font-weight: 500; } /* ── Tabs Navigation ── */ .review-page-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; /* Scrollbar space */ scrollbar-width: none; /* Hide scrollbar Firefox */ } .review-page-tabs::-webkit-scrollbar { display: none; } .review-tab-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 2rem; background: var(--app-color-glass-subtle); border: 1px solid transparent; color: var(--app-color-text-secondary); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); white-space: nowrap; } .review-tab-btn:hover { background: rgba(255, 255, 255, 0.9); color: var(--app-color-primary); transform: translateY(-1px); } .review-tab-btn.is-active { background: white; box-shadow: 0 4px 12px -4px rgba(var(--app-primary-rgb), 0.25), 0 2px 4px -2px rgba(0,0,0,0.05); color: var(--app-color-primary); border-color: rgba(var(--app-primary-rgb), 0.1); } .review-tab-btn .rzi { font-size: 1.1rem; } .tab-badge { background: var(--app-color-primary); color: white; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 1rem; font-weight: 700; line-height: 1.2; } .review-tab-btn:not(.is-active) .tab-badge { background: var(--app-color-border); color: var(--app-color-text-muted); } .review-attachments-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .review-attachments-header h3 { margin: 0; font-size: 1.1rem; color: var(--app-color-text-heading); } /* ── Mobile Layout ── */ @media (max-width: 640px) { .review-detail-page__hero-img { width: 3.5rem; height: 3.5rem; border-radius: 1rem; } .review-detail-page__title { font-size: 1.1rem; } .review-detail-page__meta-row { gap: 0.5rem; } .review-page-tabs { margin-left: -0.5rem; margin-right: -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; justify-content: flex-start; } } /* ── Group Headers ── */ .review-catalog-view__group-header { background: var(--app-color-glass-subtle); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--app-color-glass-subtle); border-radius: var(--app-radius-m); padding: 0.85rem 1rem; margin-top: 0.5rem; margin-bottom: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02); transition: all 0.2s ease; } .review-catalog-view__group-header:hover { background: var(--app-color-glass); transform: translateY(-1px); box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.04); } .review-catalog-view__group-title { font-family: var(--app-font-family-heading); font-weight: 700; font-size: 0.95rem; color: var(--app-color-text); letter-spacing: 0.01em; } .review-catalog-view__group-count { background: var(--app-color-primary); color: white; font-weight: 700; font-size: 0.75rem; height: 1.5rem; min-width: 1.5rem; border-radius: 0.5rem; /* Squircle */ box-shadow: 0 2px 4px rgba(var(--app-primary-rgb), 0.25); } /* ── Item Wrapper (The Button) ── */ .review-catalog-view__item-button { margin-bottom: 0.65rem; border-radius: 1.25rem; } .review-catalog-view__item-button:focus-visible { outline: 2px solid var(--app-color-primary); outline-offset: 4px; } /* ── The Review Card Itself ── */ .review-catalog-card { background: var(--app-color-surface); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 1.25rem; /* Match new corner radius */ padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.01); transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; } /* Add a subtle highlight line on the left instead of the default border */ .review-catalog-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--app-color-border); opacity: 0.5; transition: background 0.2s ease; } .review-catalog-view__item-button:hover .review-catalog-card { transform: translateY(-2px) scale(1.005); box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.06), 0 4px 8px -4px rgba(0, 0, 0, 0.03); border-color: rgba(var(--app-primary-rgb), 0.15); } .review-catalog-view__item-button:hover .review-catalog-card::after { background: var(--app-color-primary); opacity: 1; } /* ── Avatar / Image ── */ .review-catalog-card__avatar { width: 3.5rem; height: 3.5rem; border-radius: 1rem; /* Squircle avatar */ background: white; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); border: 2px solid white; } .review-catalog-card__avatar-img { border-radius: 0.8rem; } /* ── Typography & Layout ── */ .review-catalog-card__title { font-family: var(--app-font-family-heading); font-size: 1rem; font-weight: 700; margin-bottom: 0.15rem; } .review-catalog-card__scout { display: none; /* Users view their own reviews — "Scout:" is redundant */ } /* The requirement path */ .review-catalog-card__requirement { font-size: 0.8125rem; background: var(--app-color-surface-muted); padding: 0.25rem 0.5rem; border-radius: 0.5rem; margin-top: 0.25rem; display: inline-block; } .review-catalog-card__requirement-parent { font-weight: 500; } .review-catalog-card__requirement-separator { color: var(--app-color-primary); font-weight: bold; font-size: 0.9em; } /* ── Metadata (Date, Attachment) ── */ .review-catalog-card__meta { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--app-color-border); } .review-catalog-card__meta-item { background: var(--app-color-surface-muted); padding: 0.25rem 0.6rem; border-radius: 1rem; font-weight: 600; font-size: 0.75rem; color: var(--app-color-text-secondary); } .review-catalog-card__meta-item .rzi { font-size: 0.9rem; color: var(--app-color-text-muted); } .review-catalog-card__date { font-size: 0.75rem; font-weight: 500; color: var(--app-color-text-muted); } /* Chevron */ .review-catalog-card__chevron { background: var(--app-color-surface-muted); width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .review-catalog-view__item-button:hover .review-catalog-card__chevron { background: var(--app-color-primary-light); color: var(--app-color-primary); transform: translateX(2px); } /* Desktop background wash */ body { background-color: var(--app-color-primary-light); /* Very light green wash */ background-image: radial-gradient(circle at 15% 50%, rgba(var(--app-primary-rgb), 0.08), transparent 25%), radial-gradient(circle at 85% 30%, rgba(var(--app-primary-dark-rgb), 0.08), transparent 25%), radial-gradient(var(--app-chip-active-bg) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 24px 24px; background-attachment: fixed; } /* The main shell container on desktop */ .public-shell { border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 24px 48px -12px rgba(var(--app-primary-rgb), 0.15), 0 12px 24px -8px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1); border-radius: 1.75rem; background: var(--app-color-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); margin: var(--sb-space-4); height: calc(100dvh - env(safe-area-inset-top) - (var(--sb-space-4) * 2)); max-height: calc(100dvh - env(safe-area-inset-top) - (var(--sb-space-4) * 2)); } /* Top Navigation Bar */ .public-shell__header { position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(var(--app-primary-rgb), 0.10)); border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 1.15rem; padding-top: var(--sb-space-4); padding-bottom: var(--sb-space-4); box-shadow: 0 8px 20px -10px rgba(var(--app-primary-rgb), 0.25), inset 0 1px 0 var(--app-color-glass-strong); /* overflow: hidden removed — was clipping topbar popup menus */ overflow: visible; } .public-shell__header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(var(--app-primary-rgb), 0.05), rgba(var(--app-primary-rgb), 0.55), rgba(var(--app-primary-dark-rgb), 0.45), rgba(var(--app-primary-dark-rgb), 0.05)); border-radius: 0 0 1.15rem 1.15rem; pointer-events: none; } /* Make the title pop with a gradient */ .public-shell__heading h1, .public-shell__heading h2, .public-shell__heading h3, .public-shell__heading .rz-label { background: linear-gradient(135deg, var(--app-color-primary), var(--app-color-primary-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing: -0.02em; } .public-shell__subtitle { color: var(--app-color-text-muted); font-weight: 500; } .public-shell__nav-toggle { border-radius: 0.85rem; background: linear-gradient(180deg, var(--app-color-primary-light), var(--app-color-primary-light)); color: var(--app-color-success); border: 1px solid rgba(var(--app-primary-rgb), 0.18); box-shadow: 0 6px 12px -8px rgba(var(--app-primary-rgb), 0.5); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, background-color 220ms ease; } .public-shell__nav-toggle:hover { background: linear-gradient(180deg, var(--app-color-primary-light), var(--app-chip-active-bg)); transform: translateY(-1px) scale(1.03); box-shadow: 0 10px 18px -10px rgba(var(--app-primary-rgb), 0.6); } /* Top Bar Actions (Notifications, Profile) */ .public-shell__actions .app-btn.icon-button, .public-shell__header .notification-menu-popup__trigger, .public-shell__header .profile-menu-popup__trigger, .public-shell__header .active-context-popup__trigger { border-radius: 0.85rem; background: linear-gradient(180deg, #ffffff, #f8fafc); border: 1px solid rgba(148, 163, 184, 0.26); box-shadow: 0 8px 14px -10px var(--app-color-overlay); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, background-color 220ms ease; } .public-shell__actions .app-btn.icon-button:hover, .public-shell__header .notification-menu-popup__trigger:hover, .public-shell__header .profile-menu-popup__trigger:hover, .public-shell__header .active-context-popup__trigger:hover { background: linear-gradient(180deg, var(--app-color-primary-light), var(--app-color-primary-light)); color: var(--app-color-success); transform: translateY(-1px) scale(1.03); box-shadow: 0 12px 20px -12px rgba(var(--app-primary-rgb), 0.52); } /* Main Content Area */ .public-shell__content { padding: 0 var(--sb-space-4); } /* Bottom Navigation (Mobile) */ /* Side Navigation (Desktop) */ .public-side-nav { padding: 0.45rem; border-radius: 1.2rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(248, 250, 252, 0.9)); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px -14px var(--app-color-overlay); } .public-side-nav__menu .rz-navigation-item, .public-side-nav__menu .rz-panel-menu-item { border-radius: 0.95rem; margin: 0.22rem 0.25rem; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, background-color 220ms ease, color 220ms ease; border: 1px solid transparent; } .public-side-nav__menu .rz-navigation-item-link, .public-side-nav__menu .rz-panel-menu-item > .rz-navigation-item-link { border-radius: 0.88rem; min-height: 42px; align-items: center; padding-inline: 0.65rem; color: var(--app-color-text-strong); font-weight: 600; } .public-side-nav__menu .rz-navigation-item.rz-state-active > .rz-navigation-item-link, .public-side-nav__menu .rz-panel-menu-item.is-active > .rz-navigation-item-link { background: linear-gradient(135deg, var(--app-color-primary), var(--app-color-primary-dark)) !important; color: var(--app-color-surface) !important; font-weight: 600; box-shadow: 0 10px 18px -10px rgba(var(--app-primary-rgb), 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: translateX(3px); border: 1px solid rgba(255, 255, 255, 0.24); } .public-side-nav__menu .rz-navigation-item.rz-state-active > .rz-navigation-item-link .rzi, .public-side-nav__menu .rz-panel-menu-item.is-active > .rz-navigation-item-link .rzi { color: var(--app-color-surface) !important; } .public-side-nav__menu .rz-navigation-item:hover:not(.rz-state-active) > .rz-navigation-item-link, .public-side-nav__menu .rz-panel-menu-item:hover:not(.is-active) > .rz-navigation-item-link { background-color: var(--app-color-primary-light) !important; transform: translateX(2px); color: var(--app-color-primary-dark) !important; } .public-side-nav__menu .rz-navigation-item:hover .rzi, .public-side-nav__menu .rz-panel-menu-item:hover .rzi { transform: scale(1.07); transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); } .public-side-nav__menu .rz-navigation-item:active > .rz-navigation-item-link, .public-side-nav__menu .rz-panel-menu-item:active > .rz-navigation-item-link { transform: scale(0.98); } /* Mobile overrides */ @media (max-width: 768px) { body { background: #f8fafc; /* Very light slate for mobile */ background-image: none; } .public-shell { border-radius: 0; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; margin: 0; border: none; height: calc(100dvh - env(safe-area-inset-top)); max-height: calc(100dvh - env(safe-area-inset-top)); } .public-shell__header { border-radius: 0 0 1.15rem 1.15rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.94)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.86); border-top: none; box-shadow: 0 10px 20px -14px var(--app-color-overlay-soft); padding-top: max(var(--sb-space-3), env(safe-area-inset-top)); padding-bottom: var(--sb-space-3); } .public-shell__heading h1, .public-shell__heading h2, .public-shell__heading h3, .public-shell__heading .rz-label { -webkit-text-fill-color: initial; color: var(--app-color-text-deep); background: none; } .public-bottom-nav .shell-bottom-nav__item { min-height: 40px; padding: 0.4rem 0.2rem; } .public-bottom-nav .shell-bottom-nav__label { font-size: 0.79rem; } } /* ─── Headings — tighter tracking for Poppins ────────────────── */ h1, h2, h3, .app-heading { font-family: var(--app-font-family-heading); letter-spacing: -0.01em; } /* ─── Links & interactive text — green underline accent ──────── */ a:not([class]), .app-link { color: var(--app-color-primary); text-decoration-color: rgba(var(--app-primary-rgb), 0.3); text-underline-offset: 2px; transition: text-decoration-color var(--sb-transition-fast); } a:not([class]):hover, .app-link:hover { text-decoration-color: var(--app-color-primary); } /* ─── Selection colour ───────────────────────────────────────── */ ::selection { background: rgba(var(--app-primary-rgb), 0.18); color: inherit; } /* ─── Scrollbar (webkit) — slim & green-tinted ───────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--app-primary-rgb), 0.20); border-radius: var(--sb-radius-full); } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--app-primary-rgb), 0.35); } /* ─── Review Chat Tab Container ──────────────────────────────── */ .review-chat-tab-container { display: flex; flex-direction: column; /* Use flex-grow instead of fixed height to fill available space */ flex: 1; min-height: 400px; background: var(--app-color-surface); border-radius: var(--app-radius-m); box-shadow: var(--app-shadow-s); overflow: hidden; /* Ensure it doesn't cause horizontal scroll */ width: 100%; box-sizing: border-box; } .review-chat-tab-container .review-conversation { height: 100%; display: flex; flex-direction: column; } .review-chat-tab-container .review-conversation__messages { padding: 1rem; flex: 1; overflow-y: auto; } .review-chat-tab-container .review-conversation__input { padding: 1rem; background: var(--app-color-surface-alt); border-top: 1px solid var(--app-color-border); margin-top: 0; /* Ensure input stays at bottom */ position: sticky; bottom: 0; } /* ─── Review Tabs Polish ─────────────────────────────────────── */ .review-page-tabs { display: flex; gap: 0.5rem; background: var(--app-color-surface-alt); padding: 0.375rem; border-radius: 1.25rem; box-shadow: inset 0 2px 6px rgba(0,0,0,0.04); overflow-x: auto; /* Hide scrollbar for tabs */ -ms-overflow-style: none; scrollbar-width: none; width: 100%; box-sizing: border-box; position: relative; } .review-page-tabs::-webkit-scrollbar { display: none; } .review-tab-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; border: none; background: transparent; border-radius: 1rem; color: var(--app-color-text-muted); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); white-space: nowrap; position: relative; z-index: 1; } .review-tab-btn:hover { color: var(--app-color-text); background: rgba(0,0,0,0.02); } .review-tab-btn.is-active { background: var(--app-color-surface); color: var(--app-color-primary); box-shadow: 0 4px 12px rgba(var(--app-primary-rgb), 0.12), 0 1px 2px rgba(0,0,0,0.05); transform: translateY(-1px); } .review-tab-btn .rzi { font-size: 1.2rem; transition: transform 0.3s ease; } .review-tab-btn.is-active .rzi { transform: scale(1.1); } .review-tab-btn .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; background: var(--app-color-primary); color: white; font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 1rem; font-weight: 700; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; opacity: 1; box-shadow: 0 2px 4px rgba(var(--app-primary-rgb), 0.2); } .review-tab-btn:not(.is-active) .tab-badge { background: var(--app-color-info-muted); color: #075985; border: 1px solid rgba(2, 132, 199, 0.24); box-shadow: none; } /* ─── Review Detail Page Layout Fixes ────────────────────────── */ .shell-page-content:has(.review-detail-page-container), .shell-page-content:has(.review-detail-layout) { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .review-detail-page-container { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 100%; box-sizing: border-box; } .review-detail-page-stack { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; } /* ─── Review Overview Card Polish ────────────────────────────── */ .review-overview-card { background: var(--app-color-surface); border-radius: 1.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04); overflow-y: auto; border: 1px solid var(--app-color-border); display: flex; flex-direction: column; flex: 1; min-height: 0; } .review-overview-card__header { padding: 1.5rem; display: flex; gap: 1.25rem; align-items: flex-start; background: linear-gradient(145deg, var(--app-color-surface), var(--app-color-surface-alt)); border-bottom: 1px solid var(--app-color-border); } .review-overview-card__image-wrapper { flex-shrink: 0; width: 96px; height: 96px; border-radius: 1.25rem; padding: 0.25rem; background: white; box-shadow: 0 8px 16px rgba(0,0,0,0.08); border: 1px solid var(--app-color-border); } .review-overview-card__image { width: 100%; height: 100%; object-fit: contain; border-radius: 1rem; } .review-overview-card__title-wrapper { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .review-overview-card__status { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.75rem; border-radius: 1rem; display: inline-block; } .review-overview-card__title { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--app-color-text); line-height: 1.2; letter-spacing: -0.02em; } .review-overview-card__context { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--app-color-text-muted); } .review-overview-card__context-badge { background: var(--app-color-surface-alt); padding: 0.25rem 0.75rem; border-radius: 1rem; color: var(--app-color-text); border: 1px solid var(--app-color-border); } .review-overview-card__context-icon { font-size: 1.1rem; opacity: 0.5; } .review-overview-card__context-req { color: var(--app-color-text-muted); } .review-overview-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.85rem; padding: 1rem 1.5rem 0; } .review-overview-card__fact { background: linear-gradient(145deg, var(--app-color-surface), var(--app-color-surface-alt)); border: 1px solid var(--app-color-border); border-radius: 1rem; padding: 0.85rem 1rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); } .review-overview-card__fact-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--app-color-text-muted); font-weight: 700; margin-bottom: 0.35rem; } .review-overview-card__fact-label .rzi { font-size: 1rem; color: var(--app-color-primary); } .review-overview-card__fact-value { font-size: 0.97rem; font-weight: 700; color: var(--app-color-text); line-height: 1.35; word-break: break-word; } .review-overview-card__body { padding: 1.5rem; background: var(--app-color-surface); } .review-overview-card__note-box { background: linear-gradient(145deg, var(--app-color-surface-alt), var(--app-color-surface-muted)); border-radius: 1.25rem; padding: 1.25rem; border-left: 4px solid var(--app-color-primary); box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); } .review-overview-card__note-header { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-color-primary-dark); font-weight: 800; margin-bottom: 0.75rem; } .review-overview-card__note-header .rzi { font-size: 1.2rem; } .review-overview-card__note-content { margin: 0; font-size: 1rem; color: var(--app-color-text); line-height: 1.6; white-space: pre-line; } @media (max-width: 768px) { .review-overview-card__header { flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 1rem; } .review-overview-card__title-wrapper { align-items: center; } .review-overview-card__context { justify-content: center; } } /* ─── Review Attachments Polish ──────────────────────────────── */ .review-chat-tab-container { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--app-color-surface); border-radius: 1.25rem; box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04); overflow: hidden; width: 100%; box-sizing: border-box; border: 1px solid var(--app-color-border); } .review-chat-tab-container .review-conversation { height: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; } .review-chat-tab-container .review-conversation__messages { padding: 1.25rem; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--app-color-surface-alt); } .review-chat-tab-container .review-conversation__input { padding: 1rem 1.25rem; background: var(--app-color-surface); border-top: 1px solid var(--app-color-border); margin-top: 0; /* Ensure input stays at bottom */ position: sticky; bottom: 0; margin-top: auto; z-index: 2; box-shadow: 0 -4px 12px rgba(0,0,0,0.02); } .review-chat-tab-container .review-conversation__input-field { border-radius: 1.5rem; padding: 0.75rem 1.25rem; background: var(--app-color-surface-alt); border: 1px solid transparent; transition: all 0.2s ease; } .review-chat-tab-container .review-conversation__input-field:focus { background: var(--app-color-surface); border-color: var(--app-color-primary); box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), 0.15); } .review-chat-tab-container .btn-primary { border-radius: 50%; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(var(--app-primary-rgb), 0.25); } .review-chat-tab-container .btn-primary .rzi { font-size: 1.2rem; margin-left: 2px; /* Optical alignment for send icon */ } /* ─── Review Attachments Polish ──────────────────────────────── */ .review-attachments-card { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; } .review-attachments-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.75rem; } .review-attachments-header h3 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--app-color-text); } .review-upload-btn-wrapper .app-btn { border-radius: 1rem; padding: 0.5rem 1.25rem; font-weight: 600; box-shadow: 0 4px 12px rgba(var(--app-primary-rgb), 0.2); transition: all 0.2s ease; } .review-upload-btn-wrapper .app-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(var(--app-primary-rgb), 0.3); } .review-attachment-grid { display: flex; flex-direction: column; gap: 1rem; } .review-attachment-grid__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .review-attachment-card { transition: all 0.2s ease; border: 1px solid var(--app-color-border); border-radius: 1.25rem; overflow: hidden; background: var(--app-color-surface); } .review-attachment-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04); border-color: rgba(var(--app-primary-rgb), 0.2); } .review-attachment-card__row { display: flex; align-items: center; padding: 1rem; gap: 1rem; } .review-attachment-card__thumbnail { width: 48px; height: 48px; border-radius: 0.75rem; overflow: hidden; flex-shrink: 0; background: var(--app-color-surface-alt); border: 1px solid var(--app-color-border); } .review-attachment-card__thumbnail img { width: 100%; height: 100%; object-fit: contain; } .review-attachment-card__icon { width: 48px; height: 48px; border-radius: 0.75rem; background: linear-gradient(135deg, var(--app-color-surface-alt), var(--app-color-surface-muted)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--app-color-primary); border: 1px solid var(--app-color-border); } .review-attachment-card__icon .rzi { font-size: 1.5rem; } .review-attachment-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .review-attachment-card__name { font-weight: 600; font-size: 0.95rem; color: var(--app-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-attachment-card__meta { font-size: 0.8rem; color: var(--app-color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-attachment-card__actions { display: flex; gap: 0.25rem; flex-shrink: 0; } .review-attachment-card__actions .icon-button { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--app-color-text-muted); transition: all 0.2s ease; background: transparent; } .review-attachment-card__actions .icon-button:hover { background: var(--app-color-surface-alt); color: var(--app-color-primary); } .review-attachment-card__actions .icon-button .rzi { font-size: 1.2rem; } /* ─── Review Attachment Preview Modal ──────────────────────────── */ .review-attachment-preview-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 1rem; animation: fadeIn 0.2s ease-out; } .review-attachment-preview-modal { background: var(--app-color-surface); border-radius: 1.5rem; width: 100%; max-width: 800px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 48px rgba(0,0,0,0.2); overflow: hidden; animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .review-attachment-preview-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--app-color-border); background: var(--app-color-surface-alt); } .review-attachment-preview-modal__title { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--app-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-attachment-preview-modal__close { background: transparent; border: none; font-size: 1.5rem; line-height: 1; color: var(--app-color-text-muted); cursor: pointer; padding: 0.5rem; margin: -0.5rem; border-radius: 50%; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .review-attachment-preview-modal__close:hover { background: rgba(0,0,0,0.05); color: var(--app-color-text); } .review-attachment-preview-modal__content { flex: 1; overflow: auto; padding: 1.5rem; display: flex; align-items: center; justify-content: center; background: var(--app-color-surface); } .review-attachment-preview-modal__image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .review-attachment-preview-modal__unsupported { color: var(--app-color-text-muted); font-size: 1rem; text-align: center; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Mobile specific fixes for chat tab */ @media (max-width: 768px) { .review-page-tabs { border-radius: 1rem; padding: 0.375rem; } /* Hide tab icons on mobile so all 3 tabs fit without scrolling */ .review-tab-btn .rzi { display: none; } .review-tab-btn { padding: 0.65rem 0.5rem; font-size: 0.88rem; gap: 0.3rem; min-height: 44px; } .review-overview-card__facts { grid-template-columns: 1fr; gap: 0.65rem; padding: 0.9rem 1rem 0; } } /* ─── Mobile: Bottom-nav safe scroll padding ─────────────────── */ /* The fixed bottom nav covers the bottom ~70px of the viewport. Without this padding, the last content items on every page get hidden behind the nav bar when scrolled to the bottom. */ @media (max-width: 768px) { .public-shell .shell-scroll-content { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } /* Review detail uses height:100% + overflow:hidden and manages its own internal scrolling. Undo the shell padding so its 100% height fills the full scroll-content, then let its internal cards handle the bottom-nav inset via their own padding. */ .public-shell .shell-scroll-content:has(.review-detail-page-container) { padding-bottom: 0; } /* Review detail — remove shell horizontal padding so the overview card fills edge-to-edge like a native app section. */ .public-shell__content:has(.review-detail-page-container) { padding-left: 0; padding-right: 0; } /* Tab bar: restore inset padding after shell is zeroed out. */ .review-page-tabs { margin: 0 var(--sb-space-4); width: calc(100% - 2 * var(--sb-space-4)); box-sizing: border-box; } /* Review Info/Attachments cards: flat + edge-to-edge on mobile. */ .review-overview-card, .review-attachments-card { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); border-radius: 0; box-shadow: none; border-left: none; border-right: none; } } /* ─── Mobile: Dashboard hero bleeds edge-to-edge ─────────────── */ /* AppCard's root element is rendered by AppCard (child component), so it gets no DashboardPage scope attribute. Global rule needed. */ @media (max-width: 768px) { .dashboard-page__hero { margin-left: -1rem; margin-right: -1rem; border-radius: 0; border-left: none; border-right: none; box-shadow: none; } } /* ─── Notification popup item override ────────────────────────── The list is a flex-column with max-height: 360px. Without flex-shrink: 0 the items collapse because flex-shrink: 1 (default) lets them be crushed below their content height. */ .notification-menu-popup__item { flex-shrink: 0; } /* ================================================================ NOTIFICATION INBOX — Design 1: Unified Inbox ================================================================ Component styles for NotificationInboxView, NotificationInboxRow, and NotificationDateDivider. ================================================================ */ /* ─── Inbox container ─────────────────────────────────────────── */ .notification-inbox { width: 100%; max-width: 800px; } /* ─── Header ──────────────────────────────────────────────────── */ .notification-inbox__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .notification-inbox__title-group h2 { margin: 0; font-size: var(--app-font-size-title, 1.0625rem); font-weight: var(--app-font-weight-bold, 600); color: var(--app-color-text, var(--app-color-text)); } .notification-inbox__unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.5rem; border-radius: 999px; background: var(--app-color-primary, var(--app-color-primary)); color: var(--app-color-surface); font-size: 0.75rem; font-weight: 700; line-height: 1; } .notification-inbox__bulk-actions { align-items: center; flex-wrap: wrap; } .notification-inbox__action-btn { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--app-font-size-caption, 0.8125rem); color: var(--app-color-text-muted, var(--app-color-text-muted)); } .notification-inbox__action-btn:hover { color: var(--app-color-text, var(--app-color-text)); } .notification-inbox__selection-count { font-size: var(--app-font-size-caption, 0.8125rem); color: var(--app-color-text-muted, var(--app-color-text-muted)); font-weight: 500; } /* ─── Notification list ───────────────────────────────────────── */ .notification-inbox__list { display: flex; flex-direction: column; gap: 0; } /* ─── Date divider ────────────────────────────────────────────── */ .notification-date-divider { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0 0.375rem; } .notification-date-divider__label { font-size: var(--app-font-size-caption, 0.8125rem); font-weight: 600; color: var(--app-color-text-muted, var(--app-color-text-muted)); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .notification-date-divider::after { content: ""; flex: 1; height: 1px; background: var(--app-color-border, var(--app-color-border)); } /* ─── Inbox row ───────────────────────────────────────────────── */ .notification-inbox-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.875rem; padding: 0.875rem 0.75rem; border-radius: var(--app-radius-s, 0.625rem); cursor: pointer; align-items: flex-start; transition: background-color var(--sb-transition-fast, 120ms ease), box-shadow var(--sb-transition-fast, 120ms ease); border-bottom: 1px solid var(--app-color-border, var(--app-color-border)); } .notification-inbox-row:last-child { border-bottom: none; } .notification-inbox-row:hover { background: var(--app-color-surface-muted, var(--app-color-surface-muted)); } .notification-inbox-row:focus-visible { outline: 2px solid var(--app-color-primary, var(--app-color-primary)); outline-offset: -2px; } .notification-inbox-row.is-unread { background: rgba(var(--app-primary-rgb), 0.04); } .notification-inbox-row.is-unread:hover { background: rgba(var(--app-primary-rgb), 0.08); } .notification-inbox-row.is-read { opacity: 0.75; } .notification-inbox-row.is-read:hover { opacity: 1; } /* ─── Row checkbox ────────────────────────────────────────────── */ .notification-inbox-row__checkbox { display: flex; align-items: center; padding-top: 0.125rem; } .notification-inbox-row__checkbox input[type="checkbox"] { width: 1.125rem; height: 1.125rem; accent-color: var(--app-color-primary, var(--app-color-primary)); cursor: pointer; } /* ─── Row icon ────────────────────────────────────────────────── */ .notification-inbox-row__icon { width: 2.25rem; height: 2.25rem; border-radius: var(--app-radius-s, 0.625rem); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.125rem; } .notification-inbox-row__icon.scenario-success { background: var(--app-color-success-muted); color: var(--app-stat-color-success, var(--app-color-success)); } .notification-inbox-row__icon.scenario-info { background: rgba(var(--app-primary-rgb), 0.10); color: var(--app-color-primary, var(--app-color-primary)); } .notification-inbox-row__icon.scenario-warning { background: var(--app-color-amber-muted, rgba(245, 158, 11, 0.10)); color: var(--app-color-amber, var(--app-color-amber)); } .notification-inbox-row__icon.scenario-danger { background: rgba(239, 68, 68, 0.12); color: #ef4444; } .notification-inbox-row__icon.scenario-default { background: var(--app-color-surface-muted, var(--app-color-surface-muted)); color: var(--app-color-text-muted, var(--app-color-text-muted)); } /* ─── Row content ─────────────────────────────────────────────── */ .notification-inbox-row__content { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .notification-inbox-row__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .notification-inbox-row__title { font-weight: 600; font-size: var(--app-font-size-body, 0.9375rem); color: var(--app-color-text, var(--app-color-text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notification-inbox-row.is-read .notification-inbox-row__title { font-weight: 500; } .notification-inbox-row__time { font-size: var(--app-font-size-caption, 0.8125rem); color: var(--app-color-text-secondary, var(--app-color-text-secondary)); white-space: nowrap; flex-shrink: 0; } .notification-inbox-row__body { font-size: var(--app-font-size-caption, 0.8125rem); color: var(--app-color-text-muted, var(--app-color-text-muted)); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .notification-inbox-row__meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.125rem; } /* ─── Scenario pill ───────────────────────────────────────────── */ .notification-inbox-row__pill { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; } .notification-inbox-row__pill.scenario-success { background: var(--app-color-success-muted); color: var(--app-stat-color-success, var(--app-color-success)); } .notification-inbox-row__pill.scenario-info { background: rgba(var(--app-primary-rgb), 0.08); color: var(--app-color-primary-dark, var(--app-color-primary-dark)); } .notification-inbox-row__pill.scenario-warning { background: var(--app-color-amber-muted, rgba(245, 158, 11, 0.10)); color: #b45309; } .notification-inbox-row__pill.scenario-danger { background: rgba(239, 68, 68, 0.10); color: var(--app-color-error); } .notification-inbox-row__pill.scenario-default { background: var(--app-color-surface-muted, var(--app-color-surface-muted)); color: var(--app-color-text-muted, var(--app-color-text-muted)); } /* ─── "Nieuw" badge ───────────────────────────────────────────── */ .notification-inbox-row__badge { display: inline-flex; align-items: center; padding: 0.0625rem 0.375rem; border-radius: 999px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--app-color-primary, var(--app-color-primary)); color: var(--app-color-surface); } /* ─── Row actions (hover-revealed on desktop) ─────────────────── */ .notification-inbox-row__actions { display: flex; align-items: center; gap: 0.25rem; opacity: 0; transition: opacity var(--sb-transition-fast, 120ms ease); } .notification-inbox-row:hover .notification-inbox-row__actions, .notification-inbox-row:focus-within .notification-inbox-row__actions { opacity: 1; } .notification-inbox-row__action { width: 2rem; height: 2rem; padding: 0; border-radius: var(--app-radius-s, 0.625rem); color: var(--app-color-text-muted, var(--app-color-text-muted)); } .notification-inbox-row__action:hover { background: var(--app-color-surface-muted, var(--app-color-surface-muted)); color: var(--app-color-text, var(--app-color-text)); } /* ─── Pager ───────────────────────────────────────────────────── */ .notification-inbox__pager { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding-top: 0.5rem; } .notification-inbox__pager-buttons { flex-wrap: wrap; justify-content: center; } .notification-inbox__pager-btn { min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; border-radius: var(--app-radius-s, 0.625rem); font-size: var(--app-font-size-caption, 0.8125rem); font-weight: 500; color: var(--app-color-text-muted, var(--app-color-text-muted)); } .notification-inbox__pager-btn:hover { background: var(--app-color-surface-muted, var(--app-color-surface-muted)); color: var(--app-color-text, var(--app-color-text)); } .notification-inbox__pager-btn--active { background: var(--app-color-primary, var(--app-color-primary)); color: var(--app-color-surface); font-weight: 600; } .notification-inbox__pager-btn--active:hover { background: var(--app-color-primary-dark, var(--app-color-primary-dark)); color: var(--app-color-surface); } .notification-inbox__pager-summary { font-size: var(--app-font-size-caption, 0.8125rem); color: var(--app-color-text-secondary, var(--app-color-text-secondary)); } /* ─── Mobile responsive ──────────────────────────────────────── */ @media (max-width: 640px) { .notification-inbox-row { grid-template-columns: auto 1fr; gap: 0.625rem; padding: 0.75rem 0.5rem; } /* Actions always visible on mobile (no hover) */ .notification-inbox-row__actions { opacity: 1; grid-column: 1 / -1; justify-content: flex-end; padding-top: 0.25rem; } .notification-inbox-row__title { font-size: var(--app-font-size-body, 0.9375rem); } .notification-inbox__header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .notification-inbox__bulk-actions { width: 100%; justify-content: flex-end; } } /* ── Mobile topbar: icon-only back button + truncated title ── */ @media (max-width: 480px) { /* Hide back button label text — show arrow icon only (standard mobile pattern) */ .topbar-context-header__back span { display: none; } /* Allow titles container to fill remaining space */ .topbar-context-header__titles { flex: 1 1 0; min-width: 0; } /* Truncate long page titles with ellipsis */ .topbar-context-header__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ═══════════════════════════════════════════════════════════════════ YOUTHFUL UI ENHANCEMENTS — Public App (8–25 year olds) All selectors are Public-only. Zero Manager app impact. ═══════════════════════════════════════════════════════════════════ */ /* ── 1. Dashboard Hero: vivid green→teal gradient ───────────────── .dashboard-page__hero lives on AppCard's root div. AppCard renders its own root, so DashboardPage's scoped CSS won't reach it. This global rule is the ONLY reliable way to override the hero root. ──────────────────────────────────────────────────────────────── */ .dashboard-page__hero { background: linear-gradient(135deg, var(--app-color-primary) 0%, var(--app-color-primary-dark) 60%, #b45309 100%) !important; border-left: none !important; position: relative; overflow: hidden; box-shadow: 0 12px 32px rgba(var(--app-primary-rgb), 0.28), 0 4px 12px rgba(0, 0, 0, 0.06) !important; } /* Decorative radial blob — top-right corner for depth */ .dashboard-page__hero::before { content: ''; position: absolute; top: -40%; right: -8%; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ── 2. Page entrance animation ───────────────────────────────── */ @keyframes slideUpFade { from { opacity: 0; transform: translateY(var(--sb-distance-md, 14px)); } to { opacity: 1; transform: translateY(0); } } /* Apply entrance animation to every top-level page loaded into the shell. fill-mode: backwards (not 'both') applies the `from` keyframe before the animation starts (preventing a flash) but does NOT freeze the `to` state afterwards. Using 'both' or 'forwards' would freeze transform:translateY(0) on the element, which creates a new CSS containing block and breaks position:fixed descendants (e.g. .bottom-sheet-overlay). With 'backwards' the element returns to its base CSS state (transform:none) once the animation completes. */ .shell-scroll-content > * { animation: slideUpFade var(--sb-duration-slow, 0.42s) var(--sb-ease-spring, cubic-bezier(0.22, 1, 0.36, 1)) backwards; } /* ── 3. Bottom nav — active item pill highlight ───────────────── */ .public-bottom-nav .shell-bottom-nav__item.is-active { background: linear-gradient( 135deg, rgba(var(--app-primary-rgb), 0.16) 0%, rgba(var(--app-primary-dark-rgb), 0.11) 100% ); color: var(--app-color-primary, var(--app-color-primary)); font-weight: 700; box-shadow: inset 0 1px 0 var(--app-color-glass-subtle); } .public-bottom-nav .shell-bottom-nav__item.is-active .shell-bottom-nav__icon { color: var(--app-color-primary, var(--app-color-primary)); transform: scale(1.18); transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); } .public-bottom-nav .shell-bottom-nav__item.is-active .shell-bottom-nav__label { color: var(--app-color-primary, var(--app-color-primary)); font-weight: 700; } /* ── 4. Review catalog cards — colored left accent per triage ── */ .triage-section:has(.triage-section__header--pending) .review-catalog-card::after { background: var(--app-review-accent-pending); opacity: 0.9; } .triage-section:has(.triage-section__header--approved) .review-catalog-card::after { background: var(--app-review-accent-approved); opacity: 0.9; } .triage-section:has(.triage-section__header--rejected) .review-catalog-card::after { background: var(--app-review-accent-rejected); opacity: 0.9; } /* ── Dashboard stat card icons: unique color per position ───────── Using !important + global selector to guarantee override of the scoped DashboardPage ::deep rule (which compiled to same specificity). 3 cards after removing Totaal: completed=emerald, in-progress=blue, not-started=slate. ──────────────────────────────────────────────────────────────── */ .dashboard-page .stat-card:nth-child(1) .stat-card__icon { background: var(--app-stat-icon-1-bg) !important; color: var(--app-stat-icon-1-color) !important; } .dashboard-page .stat-card:nth-child(2) .stat-card__icon { background: var(--app-stat-icon-2-bg) !important; color: var(--app-stat-icon-2-color) !important; } .dashboard-page .stat-card:nth-child(3) .stat-card__icon { background: var(--app-stat-icon-3-bg) !important; color: var(--app-stat-icon-3-color) !important; } /* ── Review catalog cards: mobile-native layout ─────────────────── On mobile the cards need to feel designed for touch: - Top-align avatar + content (natural reading flow) - Allow title to wrap to 2 lines (avoids truncation) - Remove the formal dashed top-border from meta row - Date styled as a pill tag (matches attachment chips) ──────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .review-catalog-card { padding: 0.875rem 0.875rem 0.875rem 1.125rem; border-radius: 1rem; } /* Top-align so avatar anchors to the title, not the card center */ .review-catalog-card__row { align-items: flex-start; gap: 0.625rem; } /* Slightly larger, slightly nudged down to align with title baseline */ .review-catalog-card__avatar { width: 3rem; height: 3rem; border-radius: 0.85rem; margin-top: 0.1rem; flex-shrink: 0; } /* Allow title to wrap — avoids hard truncation on narrow screens */ .review-catalog-card__title { white-space: normal; overflow: visible; text-overflow: unset; font-size: 1rem; line-height: 1.3; } /* Remove the formal dashed separator — meta flows naturally */ .review-catalog-card__meta { margin-top: 0.45rem; padding-top: 0; border-top: none; flex-wrap: wrap; gap: 0.3rem; } /* Compact attachment/message chips: show icon+count only, hide the word label */ .review-catalog-card__meta-label { display: none; } /* Date: style as pill to match the attachment chip (cohesive meta row) */ .review-catalog-card__date { margin-left: 0; /* override components.css `margin-left: auto` that causes wrapping */ background: var(--app-color-surface-muted); padding: 0.22rem 0.55rem; border-radius: 1rem; font-size: 0.72rem; font-weight: 600; color: var(--app-color-text-secondary); } /* Smaller chevron on mobile */ .review-catalog-card__chevron { width: 1.75rem; height: 1.75rem; margin-top: 0.15rem; } } /* ═══════════════════════════════════════════════════════════════════ YOUTHFUL POLISH PASS — Phase 2 More energy, personality & warmth for 8–25 year olds. All selectors Public-app-only. Zero Manager impact. ═══════════════════════════════════════════════════════════════════ */ /* ── Stat cards: colored gradients per card position ───────────── Cards: 1=Behaald(orange), 2=Lopend(blue), 3=Niet gestart(slate) ──────────────────────────────────────────────────────────────── */ .dashboard-page .stat-card:nth-child(1) { background: linear-gradient(145deg, rgba(var(--app-primary-rgb), 0.07), rgba(var(--app-primary-rgb), 0.03)); border-color: rgba(var(--app-primary-rgb), 0.22); } .dashboard-page .stat-card:nth-child(2) { background: linear-gradient(145deg, rgba(2, 132, 199, 0.07), rgba(2, 132, 199, 0.03)); border-color: rgba(2, 132, 199, 0.22); } .dashboard-page .stat-card:nth-child(3) { background: linear-gradient(145deg, rgba(100, 116, 139, 0.07), rgba(100, 116, 139, 0.03)); border-color: rgba(100, 116, 139, 0.22); } /* Bolder stat values for visual impact */ .dashboard-page .stat-card__value { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -0.03em; } .dashboard-page .stat-card:nth-child(1) .stat-card__value { color: var(--app-color-primary-dark) !important; } .dashboard-page .stat-card:nth-child(2) .stat-card__value { color: #0284c7 !important; } .dashboard-page .stat-card:nth-child(3) .stat-card__value { color: #475569 !important; } /* Slightly bolder stat labels */ .dashboard-page .stat-card__label { font-weight: 600 !important; font-size: 10px !important; letter-spacing: 0.04em; text-transform: uppercase; } /* ── Badge overview card header: warm orange accent ────────────── Plain white→light-grey gradient replaced with warm orange tint. ──────────────────────────────────────────────────────────────── */ .badge-overview-card__header { background: linear-gradient( 135deg, rgba(var(--app-primary-rgb), 0.06) 0%, var(--app-color-surface) 70% ) !important; border-bottom-color: rgba(var(--app-primary-rgb), 0.12) !important; } /* Badge image wrapper: orange ring glow */ .badge-overview-card__image-wrapper { border-color: rgba(var(--app-primary-rgb), 0.25) !important; box-shadow: 0 4px 16px rgba(var(--app-primary-rgb), 0.15), 0 1px 3px rgba(0,0,0,0.04) !important; } /* ── Review overview card header: status-tinted ────────────────── Plain white→grey replaced with warm accent. ──────────────────────────────────────────────────────────────── */ .review-overview-card__header { background: linear-gradient( 135deg, rgba(var(--app-primary-rgb), 0.06) 0%, var(--app-color-surface) 65% ) !important; border-bottom-color: rgba(var(--app-primary-rgb), 0.12) !important; } /* ── Review detail status chip: bigger, more prominent ────────── The "In behandeling" / "Goedgekeurd" chip is too small. Give it more presence. ──────────────────────────────────────────────────────────────── */ .review-overview-card__status, .review-sidebar-card__status { font-size: 0.8125rem !important; font-weight: 800 !important; padding: 0.35rem 1rem !important; letter-spacing: 0.04em !important; border-radius: 2rem !important; } /* ── Requirement tree: completed rows get a warm tint ──────────── Rows containing the status-badge (= completed check) get a subtle orange wash — visually rewarding for scouts. ──────────────────────────────────────────────────────────────── */ .awards-badge-requirements__row:has(.awards-badge-requirements__status-badge) { background: rgba(var(--app-primary-rgb), 0.04); border-radius: 0.625rem; } .awards-badge-requirements__row:has(.awards-badge-requirements__status-badge) .awards-badge-requirements__title { color: var(--app-color-primary-dark); font-weight: 700; } /* ── Nudge card: warmer, more encouraging ──────────────────────── The "Nog geen activiteit" empty-state card was a plain dashed box. Give it an orange-tinted bg and bolder styling. ──────────────────────────────────────────────────────────────── */ .dashboard-page__nudge { background: linear-gradient( 135deg, rgba(var(--app-primary-rgb), 0.06) 0%, var(--app-color-surface) 80% ) !important; border-color: rgba(var(--app-primary-rgb), 0.22) !important; border-style: solid !important; } .dashboard-page__nudge-title { color: var(--app-color-primary-dark) !important; font-size: 1.05rem !important; } /* ── Bottom nav: bolder active tab icon ───────────────────────── Scale up the active icon slightly more than before for punch. ──────────────────────────────────────────────────────────────── */ .public-bottom-nav .shell-bottom-nav__item.is-active { border-radius: 0.85rem; } .public-bottom-nav .shell-bottom-nav__item.is-active .shell-bottom-nav__icon { transform: scale(1.28) !important; } /* ── Badge list item completed: green completion marker ───────── Completed badges: left border + icon tint to celebrate completion. ──────────────────────────────────────────────────────────────── */ .badge-list-item--completed { border-left: 4px solid var(--app-color-success) !important; background: linear-gradient( 135deg, rgba(5, 150, 105, 0.04) 0%, var(--app-color-surface) 60% ) !important; } /* ── Filter chips: slightly more playful active state ─────────── Make the active chip more vivid with a subtle shadow pop. ──────────────────────────────────────────────────────────────── */ .filter-chip--active, .filter-chip-bar .filter-chip--active, .app-chip--active { font-weight: 800 !important; box-shadow: 0 3px 10px rgba(var(--app-primary-rgb), 0.28) !important; transform: translateY(-1px); } /* ── Review triage count badges: slightly bigger ──────────────── The small count pill (e.g. "9") was hard to read. Make it bolder. ──────────────────────────────────────────────────────────────── */ ::deep .triage-section__count, .triage-section__count { font-size: 0.8125rem !important; height: 1.625rem !important; min-width: 1.625rem !important; font-weight: 800 !important; } /* ── Page heading boost: tighter tracking, heavier weight ─────── ContentPage and section headings should feel punchy, not corporate. ──────────────────────────────────────────────────────────────── */ .content-page__title, .page-header__title, .section-header__title { letter-spacing: -0.025em !important; font-weight: 800 !important; } /* ── Zero-count triage pills: muted when count is 0 ───────────── Orange count pill looks like an alert even when count = 0. We can't target the value from CSS, but we can reduce opacity so it clearly reads as "nothing here". ──────────────────────────────────────────────────────────────── */ .triage-section:not(.triage-section--open) .triage-section__count--approved, .triage-section:not(.triage-section--open) .triage-section__count--rejected { background: var(--app-color-surface-muted) !important; color: var(--app-color-text-muted) !important; box-shadow: none !important; } /* ── Badge description: left-aligned on mobile for readability ── */ @media (max-width: 768px) { .badge-overview-card__description { text-align: left !important; } } /* ── Hero secondary CTA: stronger outline visibility ──────────── The white ghost button border on orange background needed more contrast. ──────────────────────────────────────────────────────────────── */ .dashboard-page__hero .dashboard-page__cta--secondary { background: rgba(255, 255, 255, 0.18) !important; border: 2px solid rgba(255, 255, 255, 0.65) !important; color: rgba(255, 255, 255, 0.95) !important; font-weight: 600 !important; } .dashboard-page__hero .dashboard-page__cta--secondary:hover { background: rgba(255, 255, 255, 0.30) !important; border-color: rgba(255, 255, 255, 0.90) !important; color: white !important; } /* ── Filter chip bar: fade-out scroll hint ────────────────────── On mobile, the chips overflow off-screen with no visual hint. A right-fade mask suggests scrollability. ──────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .filter-chip-bar { -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%); mask-image: linear-gradient(to right, black 80%, transparent 100%); } } /* ═══════════════════════════════════════════════════════════════════ YOUTHFUL POLISH — Settings, Notifications & Account pages Public-app-only overrides. Zero Manager impact. ═══════════════════════════════════════════════════════════════════ */ /* ── Settings menu: orange icons + primary group titles ────────── components.css uses --app-color-text-secondary for icons (grey). Override to orange in Public so settings feel on-brand. ──────────────────────────────────────────────────────────────── */ .settings-menu-item__icon { color: var(--app-color-primary) !important; } .settings-menu-group__title { color: var(--app-color-primary) !important; letter-spacing: 0.08em; } .settings-menu-item:hover, .settings-menu-item:focus-visible { background: rgba(var(--app-primary-rgb), 0.05) !important; } .settings-menu-item__chevron { color: var(--app-color-primary) !important; opacity: 0.55; } /* ── Notification date divider: orange label ───────────────────── "DEZE WEEK" divider label was muted blue-grey; make it orange. ──────────────────────────────────────────────────────────────── */ .notification-date-divider__label { color: var(--app-color-primary) !important; } .notification-date-divider::after { background: rgba(var(--app-primary-rgb), 0.18) !important; } /* Unread notification row: left orange accent bar ─────────────── Adds a 3px orange left border so unread items pop at a glance. ──────────────────────────────────────────────────────────────── */ .notification-inbox-row.is-unread { border-left: 3px solid var(--app-color-primary) !important; padding-left: calc(0.75rem - 3px) !important; } /* Action button (mark all read): primary color on hover ───────── */ .notification-inbox__action-btn:hover { color: var(--app-color-primary) !important; } /* ── Account settings: tab-active orange + on-toggle accent ───── Active tab gets orange underline, like requirement group chips. ──────────────────────────────────────────────────────────────── */ .account-settings__tab-btn.is-active { color: var(--app-color-primary) !important; border-bottom-color: var(--app-color-primary) !important; } .account-settings__tab-btn:hover { color: var(--app-color-primary) !important; } /* On-toggle row: orange left border to celebrate the active state */ .account-setting-row:has(.setting-toggle--on) { border-left: 3px solid var(--app-color-primary) !important; padding-left: calc(1rem - 3px) !important; background: rgba(var(--app-primary-rgb), 0.025) !important; } /* Toggle glow — adds a soft primary halo to the ON track ──────── components.css already uses --app-color-primary for the track bg. We just add a subtle box-shadow to give it more tactile pop. ──────────────────────────────────────────────────────────────── */ .setting-toggle--on .setting-toggle__track { box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), 0.18) !important; } /* ── Account page title: prevent truncation on mobile ─────────── The page heading "Accountinstellingen" was cut off at 375px. Allow wrapping instead of clipping. ──────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .content-page__title { white-space: normal !important; word-break: break-word !important; font-size: clamp(1rem, 4vw, 1.25rem) !important; } } /* ═══════════════════════════════════════════════════════════════════ YOUTHFUL POLISH — Notifications inbox action buttons Grey icon-button squares on notification rows replaced with orange-tinted pill buttons that feel on-brand. ═══════════════════════════════════════════════════════════════════ */ /* Row action buttons (mark read/unread + open entity) */ .notification-inbox-row__action { color: var(--app-color-primary) !important; background: rgba(var(--app-primary-rgb), 0.08) !important; border-radius: 50% !important; border: none !important; } .notification-inbox-row__action:hover { background: rgba(var(--app-primary-rgb), 0.18) !important; transform: scale(1.08); } /* "Markeer alles als gelezen" header action button */ .notification-inbox__action-btn { color: var(--app-color-primary) !important; border: 1.5px solid rgba(var(--app-primary-rgb), 0.3) !important; border-radius: var(--app-radius-full, 999px) !important; background: rgba(var(--app-primary-rgb), 0.06) !important; } .notification-inbox__action-btn:hover { background: rgba(var(--app-primary-rgb), 0.12) !important; } /* Unread badge (count chip in header) */ .notification-inbox__unread-badge { background: var(--app-color-primary) !important; color: #fff !important; } /* ═══════════════════════════════════════════════════════════════════ YOUTHFUL POLISH — Settings page: fill the void Two menu items leave a huge white gap. Add a warm page background gradient and make the menu cards feel premium. ═══════════════════════════════════════════════════════════════════ */ /* Warm gradient body background on the settings content area */ .settings-menu { position: relative; } /* Make each settings menu card more generous and visually rich */ .settings-menu-group__card { box-shadow: 0 2px 12px rgba(var(--app-primary-rgb), 0.1) !important; border: 1px solid rgba(var(--app-primary-rgb), 0.12) !important; overflow: hidden !important; } /* Larger tap targets — more app-like, less website-like */ .settings-menu-item { padding: 1rem 1.25rem !important; min-height: 4.25rem; } .settings-menu-item__icon { font-size: 1.6rem !important; width: 2.25rem !important; display: flex; align-items: center; justify-content: center; } /* Active state: orange left border when focused */ .settings-menu-item:focus-visible { border-left: 3px solid var(--app-color-primary) !important; } /* Warm content area behind settings page */ @media (max-width: 768px) { .settings-menu { padding-bottom: 2rem; } } /* ═══════════════════════════════════════════════════════════════════ MELDINGEN PAGE — Notifications inbox redesign Hide the redundant inner

(PageHeader already handles title). Flip layout: filter chips lead, "Alles gelezen" becomes a compact icon-only pill in the chip bar area. Add hero banner via ::before. ═══════════════════════════════════════════════════════════════════ */ /* ── Hide the duplicated inner header title ────────────────────── The .notification-inbox__header contains

Meldingen

which duplicates the top bar PageHeader. We hide it in Public only. ──────────────────────────────────────────────────────────────── */ .notification-inbox__title-group { display: none !important; } /* ── Reposition the action bar ─────────────────────────────────── Without the h2, the header is just the action buttons. Move them to sit flush-right above the filter chip row. ──────────────────────────────────────────────────────────────── */ .notification-inbox__header { justify-content: flex-end !important; padding-bottom: 0 !important; margin-bottom: -0.5rem !important; } /* ── Hero banner above the filter chips ───────────────────────── We style .notification-inbox__header as the orange hero block, hiding the redundant

and making the action button white. ──────────────────────────────────────────────────────────────── */ .notification-inbox { position: relative; } .notification-inbox__header { background: linear-gradient( 135deg, var(--app-color-primary) 0%, color-mix(in srgb, var(--app-color-primary), black 25%) 100% ) !important; border-radius: var(--sb-radius-lg, 1rem) !important; padding: 1.25rem 1.5rem !important; margin-bottom: 0 !important; position: relative; overflow: hidden; } .notification-inbox__header::after { content: ''; position: absolute; top: -40%; right: -8%; width: 140px; height: 140px; background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } /* Action button inside the orange hero — make it white */ .notification-inbox__action-btn { color: rgba(255, 255, 255, 0.9) !important; border-color: rgba(255, 255, 255, 0.35) !important; background: rgba(255, 255, 255, 0.12) !important; } .notification-inbox__action-btn:hover { background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; } /* Mobile edge-to-edge hero */ @media (max-width: 768px) { .notification-inbox__header { border-radius: 0 !important; margin-left: -1rem !important; margin-right: -1rem !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } } /* ╔════════════════════════════════════════════════════════════════╗ ║ VIEW TRANSITIONS (Layer 3) ║ ║ Customizes the ViewTransitionRouter cross-fade between routes║ ╚════════════════════════════════════════════════════════════════╝ */ /* ── Directional keyframes ── */ @keyframes vt-slide-out-left { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-24px); } } @keyframes vt-slide-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes vt-slide-out-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } } @keyframes vt-slide-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } /* Default: simple fade (same-depth navigation, lateral nav) */ ::view-transition-old(root) { animation: sb-fade-only-out var(--sb-duration-fast, 150ms) var(--sb-ease-in, cubic-bezier(0.4, 0, 1, 1)); } ::view-transition-new(root) { animation: sb-fade-in var(--sb-duration-base, 250ms) var(--sb-ease-out, cubic-bezier(0, 0, 0.2, 1)); } /* Forward (root → detail): old slides out left, new slides in from right */ [data-nav-direction="forward"]::view-transition-old(root) { animation: vt-slide-out-left var(--sb-duration-fast, 150ms) var(--sb-ease-in, cubic-bezier(0.4, 0, 1, 1)); } [data-nav-direction="forward"]::view-transition-new(root) { animation: vt-slide-in-right var(--sb-duration-base, 250ms) var(--sb-ease-out, cubic-bezier(0, 0, 0.2, 1)); } /* Back (detail → root): old slides out right, new slides in from left */ [data-nav-direction="back"]::view-transition-old(root) { animation: vt-slide-out-right var(--sb-duration-fast, 150ms) var(--sb-ease-in, cubic-bezier(0.4, 0, 1, 1)); } [data-nav-direction="back"]::view-transition-new(root) { animation: vt-slide-in-left var(--sb-duration-base, 250ms) var(--sb-ease-out, cubic-bezier(0, 0, 0.2, 1)); } /* Reduced motion: instant transitions */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }