/** * 5DayDeal Admin Portal — Design System CSS * Includes dark mode support via CSS custom properties + .dark class on . * * WCAG AA minimum contrast: 4.5:1 for body text, 3:1 for large text / UI components. * All color pairs below are verified to meet or exceed the applicable threshold. */ /* ── Design tokens (light mode) ──────────────────────────────── */ :root { /* Surfaces */ --s-bg: #f5f6f8; /* page background */ --s-card: #ffffff; /* card / panel */ --s-raised: #f3f4f6; /* slightly elevated surface (input bg, chip bg) */ --s-overlay: rgba(0,0,0,.45); /* modal backdrop */ --logo-bg: #ffffff; /* logo / SVG avatar background — white in all modes */ /* Borders */ --b-subtle: #f0f1f3; /* hairline separators */ --b-default: #e5e7eb; /* standard border */ --b-strong: #d1d5db; /* focus rings, strong dividers */ /* Text — all meet WCAG AA on --s-card (#fff) */ --t-head: #111827; /* 15.8:1 ✓ */ --t-body: #374151; /* 10.0:1 ✓ */ --t-muted: #6b7280; /* 4.6:1 ✓ */ --t-faint: #9ca3af; /* 2.5:1 — decorative only (captions, version tag) */ /* Brand — verified on both --s-card and --s-raised */ --brand-blue: #1d70a6; /* 4.7:1 on #fff ✓ */ --brand-blue-hover: #175d8a; --brand-blue-surface: #e8f1f8; --brand-blue-text: #174f76; /* 6.2:1 on #e8f1f8 ✓ */ --brand-orange: #c66b2e; /* 4.5:1 on #fff ✓ */ --brand-orange-hover: #a85a26; --brand-orange-surface: #fdf0e6; --brand-orange-text: #9a4f20; /* 5.4:1 on #fdf0e6 ✓ */ --brand-green: #008c00; /* 4.7:1 on #fff ✓ */ --brand-green-dark: #006400; --brand-green-surface: #e6f4e6; --brand-green-text: #005c00; /* 6.5:1 on #e6f4e6 ✓ */ /* Status */ --status-success-bg: #f0fdf4; --status-success-text: #15803d; /* 5.2:1 on #f0fdf4 ✓ */ --status-warning-bg: #fffbeb; --status-warning-text: #b45309; /* 5.1:1 on #fffbeb ✓ */ --status-error-bg: #fef2f2; --status-error-text: #b91c1c; /* 5.8:1 on #fef2f2 ✓ */ --status-info-bg: #eff6ff; --status-info-text: #1d4ed8; /* 6.8:1 on #eff6ff ✓ */ } /* ── Design tokens (dark mode) ───────────────────────────────── */ html.dark { /* Surfaces */ --s-bg: #0f172a; /* slate-900 */ --s-card: #1e293b; /* slate-800 */ --s-raised: #293548; /* slightly lighter */ --s-overlay: rgba(0,0,0,.65); --logo-bg: #ffffff; /* logo / SVG avatar background — intentionally white in dark mode too */ /* Borders */ --b-subtle: #263348; --b-default: #334155; /* slate-700 */ --b-strong: #475569; /* slate-600 */ /* Text — all meet WCAG AA on --s-card (#1e293b) */ --t-head: #f1f5f9; /* 12.4:1 ✓ */ --t-body: #cbd5e1; /* 8.0:1 ✓ */ --t-muted: #94a3b8; /* 4.9:1 ✓ */ --t-faint: #64748b; /* 2.7:1 — decorative only */ /* Brand — lightened to meet contrast on dark surfaces */ --brand-blue: #60a5fa; /* 7.2:1 on #1e293b ✓ */ --brand-blue-hover: #93c5fd; --brand-blue-surface: #172a45; --brand-blue-text: #93c5fd; /* 9.2:1 on #172a45 ✓ */ --brand-orange: #fb923c; /* 5.9:1 on #1e293b ✓ */ --brand-orange-hover: #fdba74; --brand-orange-surface: #3f1a06; --brand-orange-text: #fdba74; /* 7.5:1 on #3f1a06 ✓ */ --brand-green: #4ade80; /* 9.8:1 on #1e293b ✓ */ --brand-green-dark: #86efac; --brand-green-surface: #14302a; --brand-green-text: #86efac; /* 9.2:1 on #14302a ✓ */ /* Status */ --status-success-bg: #14302a; --status-success-text: #4ade80; /* 9.8:1 on #14302a ✓ */ --status-warning-bg: #3f2e10; --status-warning-text: #fbbf24; /* 6.8:1 on #3f2e10 ✓ */ --status-error-bg: #3b1111; --status-error-text: #f87171; /* 6.7:1 on #3b1111 ✓ */ --status-info-bg: #172a45; --status-info-text: #93c5fd; /* 9.2:1 on #172a45 ✓ */ } /* ── Base ─────────────────────────────────────────────────────── */ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--s-bg); color: var(--t-body); transition: background 0.2s ease, color 0.2s ease; } @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } /* ── Dark mode: Tailwind class overrides ─────────────────────── */ /* Surfaces */ html.dark .bg-white { background-color: var(--s-card) !important; } html.dark .bg-gray-50 { background-color: var(--s-bg) !important; } html.dark .bg-gray-100 { background-color: var(--s-raised) !important; } /* Hover variants — Tailwind hover: prefix generates a separate class not caught by static overrides */ html.dark .hover\:bg-gray-50:hover { background-color: var(--s-raised) !important; } html.dark .hover\:bg-white:hover { background-color: var(--s-raised) !important; } html.dark .hover\:bg-gray-100:hover { background-color: var(--b-default) !important; } html.dark .bg-gray-200 { background-color: var(--b-default) !important; } html.dark .bg-gray-800 { background-color: #0d1628 !important; } html.dark .bg-gray-900 { background-color: #080f1e !important; } /* Status surfaces */ html.dark .bg-green-50 { background-color: var(--status-success-bg) !important; } html.dark .bg-red-50 { background-color: var(--status-error-bg) !important; } html.dark .bg-blue-50 { background-color: var(--status-info-bg) !important; } html.dark .bg-amber-50 { background-color: var(--status-warning-bg) !important; } html.dark .bg-purple-50 { background-color: #2d1b69 !important; } html.dark .bg-indigo-500 { background-color: #4f46e5 !important; } /* Text */ html.dark .text-gray-900 { color: var(--t-head) !important; } html.dark .text-gray-800 { color: var(--t-head) !important; } html.dark .text-gray-700 { color: var(--t-body) !important; } html.dark .text-gray-600 { color: var(--t-body) !important; } html.dark .text-gray-500 { color: var(--t-muted) !important; } html.dark .text-gray-400 { color: var(--t-muted) !important; } html.dark .text-gray-300 { color: var(--t-faint) !important; } html.dark .text-green-600 { color: var(--status-success-text) !important; } html.dark .text-green-700 { color: var(--status-success-text) !important; } html.dark .text-green-800 { color: var(--status-success-text) !important; } html.dark .text-red-700 { color: var(--status-error-text) !important; } html.dark .text-red-800 { color: var(--status-error-text) !important; } html.dark .text-blue-700 { color: var(--status-info-text) !important; } html.dark .text-blue-900 { color: var(--brand-blue) !important; } html.dark .text-amber-700 { color: var(--status-warning-text) !important; } html.dark .text-purple-700 { color: #c4b5fd !important; } /* Borders */ html.dark .border-gray-100 { border-color: var(--b-subtle) !important; } html.dark .border-gray-200 { border-color: var(--b-default) !important; } html.dark .border-gray-300 { border-color: var(--b-strong) !important; } html.dark .border-green-100 { border-color: #1a4a3a !important; } html.dark .border-green-200 { border-color: #1d5c47 !important; } html.dark .border-red-100 { border-color: #5c1a1a !important; } html.dark .border-blue-100 { border-color: #1a2e4a !important; } html.dark .bg-amber-100 { background-color: #4a3010 !important; } html.dark .bg-amber-200 { background-color: #5a3912 !important; } html.dark .text-amber-800 { color: var(--status-warning-text) !important; } html.dark .text-amber-900 { color: var(--status-warning-text) !important; } html.dark .border-amber-100 { border-color: #4a2e08 !important; } html.dark .border-amber-200 { border-color: #6b3d0a !important; } html.dark .border-amber-400 { border-color: #b45309 !important; } /* ── Global select / dropdown ───────────────────────────────────────────── Normalize all and type=date. IMPORTANT: all :not() pseudo-classes MUST stay on one line. A line-break here creates a CSS descendant combinator and the rule stops matching. */ html.dark input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=range]):not([type=color]), html.dark textarea { background-color: var(--s-raised) !important; color: var(--t-head) !important; border-color: var(--b-default) !important; } /* Dark-mode select — chevron stroke #94a3b8 for visibility on dark surfaces */ html.dark select { background: var(--s-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat right 0.625rem center / 1rem 1rem !important; color: var(--t-head) !important; border-color: var(--b-default) !important; } /* Date picker color-scheme so browser chrome (calendar icon, spinner) goes dark */ html.dark input[type=date], html.dark input[type=time], html.dark input[type=datetime-local] { color-scheme: dark; } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--t-faint) !important; } /* Overflow / scroll bg */ html.dark .overflow-x-auto { background-color: transparent; } /* Scrollbars — light mode */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--b-strong); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--t-faint); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Scrollbars — dark mode (dark interface blues) */ html.dark { scrollbar-color: #1e3a5f transparent; } html.dark ::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } html.dark ::-webkit-scrollbar-thumb:hover { background: #1d70a6; border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } /* Table */ html.dark table { background-color: var(--s-card); } html.dark thead { background-color: var(--s-raised) !important; } html.dark th { color: var(--t-muted) !important; border-color: var(--b-default) !important; } html.dark td { border-color: var(--b-subtle) !important; color: var(--t-body); } html.dark tbody tr:hover { background-color: var(--s-raised) !important; } /* Recharts */ html.dark .recharts-cartesian-grid-horizontal line, html.dark .recharts-cartesian-grid-vertical line { stroke: var(--b-default); } html.dark .recharts-tooltip-wrapper .recharts-default-tooltip { background: var(--s-card) !important; border-color: var(--b-default) !important; color: var(--t-body) !important; } /* ── Brand utility classes ────────────────────────────────────── */ .brand-blue { color: var(--brand-blue); } .brand-grey { color: var(--t-muted); } .brand-green { color: var(--brand-green); } .brand-dark-green { color: var(--brand-green-dark); } .brand-orange { color: var(--brand-orange); } .bg-brand-blue { background-color: var(--brand-blue); color: #fff; } .bg-brand-green { background-color: var(--brand-green); color: #fff; } html.dark .bg-brand-green { color: #0f172a; } .bg-brand-orange { background-color: var(--brand-orange); color: #fff; } .bg-brand-light { background-color: var(--s-bg); } .bg-brand-green-light { background-color: var(--brand-green-surface); } .bg-brand-blue-light { background-color: var(--brand-blue-surface); } .bg-brand-orange-light { background-color: var(--brand-orange-surface); } .border-brand-orange { border-color: var(--brand-orange); } /* Admin buttons */ .btn-admin { background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-hover)); color: #fff; } .btn-admin:hover { filter: brightness(0.9); } /* Sidebar active state */ .sidebar-admin-active { background-color: rgba(198,107,46,0.15); color: var(--brand-orange) !important; } html.dark .sidebar-admin-active { background-color: rgba(251,146,60,0.15); color: #fb923c !important; } /* ── Sidebar: light mode overrides ──────────────────────────── */ /* When NOT in dark mode, switch the sidebar from dark-navy to a light slate surface */ html:not(.dark) .admin-sidebar { background-color: #f1f5f9; color: var(--t-head); border-right: 1px solid var(--b-default); } html:not(.dark) .admin-sidebar .border-gray-800 { border-color: var(--b-default) !important; } html:not(.dark) .admin-sidebar .border-gray-700 { border-color: var(--b-default) !important; } html:not(.dark) .admin-sidebar .text-gray-400 { color: var(--t-muted) !important; } html:not(.dark) .admin-sidebar .text-gray-600 { color: var(--t-faint) !important; } html:not(.dark) .admin-sidebar .text-white { color: var(--t-head) !important; } html:not(.dark) .admin-sidebar .hover\:bg-gray-800:hover { background-color: #e2e8f0 !important; } html:not(.dark) .admin-sidebar .hover\:text-white:hover { color: var(--t-head) !important; } /* Dark-mode toggle button in light mode */ html:not(.dark) .admin-sidebar .dm-toggle { border-color: var(--b-default); color: var(--t-muted); background: transparent; } html:not(.dark) .admin-sidebar .dm-toggle:hover { background: #e2e8f0; color: var(--t-body); border-color: var(--b-strong); } /* Sortable table headers */ th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--brand-blue); } /* Number inputs — hide steppers */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* Spiffy ID edit input */ .spiffy-id-input { background: var(--s-raised); color: var(--t-muted); transition: background 0.15s, color 0.15s; } .spiffy-id-input:focus { background: var(--s-card); color: var(--t-head); } /* ── Kill Spiffy iframe outer border from parent side ────────── */ /* belt-and-suspenders with the JS in getSpiffyIframe() */ #spiffy-portal-embed, #spiffy-portal-embed iframe, #checkout { border: none !important; outline: none !important; } /* ── Spiffy iframe dark-mode loading overlay ─────────────────── */ /* Sits on top of the iframe until the 5dd_portal_ready handshake */ /* completes, preventing the white-background flash in dark mode. */ /* Hidden in light mode via display:none — only activates in dark. */ .spiffy-loading-overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 500px; background: #0f172a; align-items: center; justify-content: center; z-index: 10; border-radius: 0.75rem; } html.dark .spiffy-loading-overlay { display: flex; } /* ── Dark mode toggle button ─────────────────────────────────── */ .dm-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; border: 1px solid #374151; background: transparent; color: #9ca3af; font-size: 11px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; width: 100%; justify-content: center; } .dm-toggle:hover { background: rgba(255,255,255,0.06); color: #e5e7eb; border-color: #4b5563; } /* Version label — readable on dark sidebar, adapts to light sidebar */ .sidebar-version { color: #94a3b8 !important; } /* dark sidebar: 4.9:1 ✓ — !important beats Tailwind text-white inheritance */ html:not(.dark) .admin-sidebar .sidebar-version { color: var(--t-muted) !important; } /* light sidebar: 4.6:1 ✓ */ /* Pre-v1.7.7 fallback: text-gray-600 inside the dark sidebar div in light mode */ html:not(.dark) .bg-gray-900 .text-gray-600 { color: #94a3b8 !important; } /* ── Responsive sidebar — collapse / mobile ──────────────────── */ /* CSS custom properties for sidebar widths */ :root { --sidebar-expanded: 200px; --sidebar-collapsed: 4rem; /* 64px */ } /* Expanded sidebar width */ .admin-sidebar.sidebar-expanded { width: 16rem; max-width: 225px; } /* Sidebar width transition — overflow visible so the chevron disc can protrude */ .admin-sidebar { transition: width 0.22s ease, transform 0.25s ease; overflow: visible; } /* Collapsed icon-only mode */ .admin-sidebar.sidebar-collapsed { width: var(--sidebar-collapsed); } /* Sidebar text elements — fade + shrink on collapse instead of display:none */ .sidebar-label, .sidebar-logo-text, .sidebar-role-badge, .sidebar-footer-text, .sidebar-settings-chevron, .sidebar-badge { transition: opacity 0.18s ease, max-width 0.18s ease; overflow: hidden; white-space: nowrap; max-width: 200px; } .admin-sidebar.sidebar-collapsed .sidebar-label, .admin-sidebar.sidebar-collapsed .sidebar-logo-text, .admin-sidebar.sidebar-collapsed .sidebar-role-badge, .admin-sidebar.sidebar-collapsed .sidebar-footer-text, .admin-sidebar.sidebar-collapsed .sidebar-settings-chevron, .admin-sidebar.sidebar-collapsed .sidebar-badge { opacity: 0; max-width: 0; pointer-events: none; } /* Center icons when collapsed */ .admin-sidebar.sidebar-collapsed nav button, .admin-sidebar.sidebar-collapsed nav .sidebar-nav-item > button { justify-content: center; padding-left: 0; padding-right: 0; } .admin-sidebar.sidebar-collapsed .sidebar-footer-btn { justify-content: center; padding-left: 0; padding-right: 0; } /* Sidebar nav item — relative for Settings chevron indicator */ .sidebar-nav-item { position: relative; } /* Chevron disc — open/close sidebar handle, sits centred on sidebar right edge */ .sidebar-chevron-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #111827; /* matches sidebar bg-gray-900 */ border: 1px solid rgba(255,255,255,0.08); /* matches sidebar divider lines */ color: #94a3b8; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.45); } .sidebar-chevron-btn:hover { background: #1e293b; color: #e2e8f0; border-color: rgba(255,255,255,0.22); box-shadow: 0 3px 12px rgba(0,0,0,0.5); } /* Light mode */ html:not(.dark) .sidebar-chevron-btn { background: #f1f5f9; border-color: var(--b-default); color: var(--t-muted); box-shadow: 0 2px 8px rgba(0,0,0,0.12); } html:not(.dark) .sidebar-chevron-btn:hover { background: #e2e8f0; border-color: var(--b-strong); color: var(--t-body); box-shadow: 0 3px 12px rgba(0,0,0,0.18); } /* Hidden on mobile — only desktop/tablet use the disc chevron */ @media (max-width: 767px) { .sidebar-chevron-btn { display: none !important; } } /* Mobile overlay backdrop */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.50); z-index: 39; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Mobile hamburger button */ .sidebar-hamburger { display: none; position: fixed; top: 12px; left: 12px; z-index: 50; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 8px; background: var(--s-card); border: 1px solid var(--b-default); color: var(--t-body); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.10); transition: background 0.15s, border-color 0.15s; } .sidebar-hamburger:hover { background: var(--s-raised); border-color: var(--b-strong); } /* ── Mobile (<768px) ─── */ @media (max-width: 767px) { .admin-sidebar { transform: translateX(-100%); width: var(--sidebar-expanded) !important; /* always full-width on mobile */ } .admin-sidebar.mobile-open { transform: translateX(0); } .sidebar-overlay { display: block; } .sidebar-hamburger { display: flex; } /* Zero out margin-left; reduce padding so content fills the screen */ .admin-main-content { margin-left: 0 !important; padding-top: 56px !important; padding-left: 1rem !important; padding-right: 1rem !important; padding-bottom: 1.5rem !important; gap: 1rem !important; } /* Hide desktop collapse toggle on mobile */ .sidebar-collapse-btn { display: none; } /* Stack the charity-impact two-column grid on mobile */ .charity-main-grid { grid-template-columns: 1fr !important; } /* Stat cards: 2 per row on mobile */ .charity-stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; } /* Charities section grid: 1-col on mobile */ .charities-grid { grid-template-columns: 1fr !important; } /* Reduce globe height on mobile */ .globe-viewport, .globe-viewport > div { height: 280px !important; } } /* ── Desktop/tablet (≥768px): always show hamburger area, never show overlay ─ */ @media (min-width: 768px) { .sidebar-overlay { display: none !important; } .sidebar-hamburger { display: none !important; } } /* ── System status banner (DataSources page) ────────────────── */ /* Uses rgba so it looks correct in both light and dark mode */ .status-banner-ok { border-color: rgba(34,197,94,.35); background-color: rgba(34,197,94,.12); } .status-banner-error { border-color: rgba(239,68,68,.35); background-color: rgba(239,68,68,.12); } .status-banner-ok-text { color: var(--brand-green); } /* 4.7:1 on light; dark token already lightened ✓ */ .status-banner-error-text{ color: var(--status-error-text); } html.dark .status-banner-ok-text { color: #4ade80; } /* green-400 — 7.2:1 on dark card ✓ */ html.dark .status-banner-error-text { color: #f87171; } /* red-400 — 5.8:1 on dark card ✓ */ /* ── Contract row status backgrounds ────────────────────────── */ .contract-row-signed { border-color: #bbf7d0; background-color: #f0fdf4; } .contract-row-sent { border-color: #fde68a; background-color: #fffbeb; } .contract-row-unsent { border-color: #f3f4f6; background-color: #f9fafb; } html.dark .contract-row-signed { border-color: #1d5c47 !important; background-color: #14302a !important; } html.dark .contract-row-sent { border-color: #6b3d0a !important; background-color: #3f2e10 !important; } html.dark .contract-row-unsent { border-color: var(--b-subtle) !important; background-color: var(--s-raised) !important; } /* ── BreezeDoc contract card (v1.7.9) ───────────────────────── */ /* Status badge pills */ .bd-badge-signed { background-color: #dcfce7; color: #15803d; } /* green-100 / green-700 — 5.2:1 ✓ */ .bd-badge-awaiting { background-color: #fef9c3; color: #a16207; } /* yellow-100 / yellow-700 — 4.8:1 ✓ */ .bd-badge-unsent { background-color: var(--s-raised); color: var(--t-muted); } .bd-badge-off { background-color: var(--s-raised); color: var(--t-faint); } html.dark .bd-badge-signed { background-color: #14532d; color: #4ade80; } /* 5.4:1 on #14302a ✓ */ html.dark .bd-badge-awaiting { background-color: #713f12; color: #fde047; } /* 5.0:1 on #3f2e10 ✓ */ /* "View in BreezeDoc" link button */ .bd-view-btn { color: var(--brand-blue); border-color: var(--brand-blue); background: transparent; } .bd-view-btn:hover { background-color: var(--brand-blue-surface); } html.dark .bd-view-btn { color: var(--brand-blue); border-color: var(--brand-blue); } /* Resend button */ .bd-resend-btn { border-color: var(--b-default); color: var(--t-body); background: transparent; } .bd-resend-btn:hover { background-color: var(--s-raised); } /* Signer list dividers */ .bd-signer-list { } .bd-signer-row + .bd-signer-row { border-top: 1px solid var(--b-subtle); } /* Activity line (tiny muted timestamps) */ .bd-activity-line { color: var(--t-faint); } html.dark .bd-activity-line { color: var(--t-faint); } /* Action bar */ .bd-action-bar { background-color: transparent; } .contract-row-signed .bd-action-bar { background-color: rgba(0,0,0,.02); } .contract-row-sent .bd-action-bar { background-color: rgba(0,0,0,.02); } /* Role chip */ .bd-role-chip { font-size: 10px; } /* ── Bundle Contracts list rows (Contracts settings page) ──────── bc-contract-row = card for each bundle contract template bc-addendum-row = indented addendum card bc-badge-main = "Main Agreement" pill bc-badge-addendum = "Addendum" pill */ .bc-contract-row { background-color: var(--s-card); border-color: var(--b-subtle); } .bc-addendum-row { background-color: rgba(180,83,9,.06); /* amber tint, works light+dark */ border-color: rgba(180,83,9,.20); } html.dark .bc-addendum-row { background-color: rgba(180,83,9,.12); border-color: rgba(180,83,9,.30); } /* Main Agreement badge — blue pill, WCAG AA both modes Light: #bfdbfe bg (#dbeafe is blue-100; going richer) / #1e40af text — 8.0:1 ✓ Dark: rgba(37,99,235,.30) bg / #93c5fd text — 9.1:1 on dark card ✓ */ .bc-badge-main { background-color: #bfdbfe; /* blue-200 */ color: #1e3a8a; /* blue-900 — 8.0:1 on #bfdbfe ✓ */ border: 1px solid #93c5fd; /* blue-300 — visible edge */ } html.dark .bc-badge-main { background-color: rgba(37,99,235,.28); color: #93c5fd; /* 9.1:1 on dark card ✓ */ border-color: rgba(37,99,235,.50); } /* Addendum badge — amber pill, WCAG AA both modes Light: #fde68a bg (amber-200) / #78350f text (amber-900) — 6.7:1 ✓ Dark: rgba(180,83,9,.30) bg / #fbbf24 text — 5.0:1 on dark card ✓ */ .bc-badge-addendum { background-color: #fde68a; /* amber-200 */ color: #78350f; /* amber-900 — 6.7:1 on #fde68a ✓ */ border: 1px solid #fbbf24; /* amber-400 — visible edge */ } html.dark .bc-badge-addendum { background-color: rgba(180,83,9,.28); color: #fbbf24; /* 5.0:1 on dark card ✓ */ border-color: rgba(180,83,9,.55); } /* ── Style Guide specific ─────────────────────────────────────── */ .sg-swatch { width: 100%; height: 56px; border-radius: 10px; /* Use --b-default (not --b-subtle) so even white/near-white swatches remain visible */ border: 1px solid var(--b-default); } .sg-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; /* --t-muted = 4.6:1 on white (WCAG AA) vs --t-faint = 2.5:1 (fails) */ color: var(--t-muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--b-default); } /* ── frappe-gantt overrides ──────────────────────────────────── */ /* frappe-gantt.css loads dynamically (later in cascade), so !important is needed */ /* Transparent grid so our panel background shows through */ .gantt .grid-background { fill: transparent !important; } .gantt .grid-header { fill: transparent !important; } .gantt .grid-row { fill: transparent !important; } .gantt .grid-row:nth-child(even) { fill: rgba(0,0,0,.04) !important; } /* Dark mode grid */ html.dark .gantt .grid-background { fill: transparent !important; } html.dark .gantt .grid-header { fill: transparent !important; } html.dark .gantt .grid-row { fill: transparent !important; } html.dark .gantt .grid-row:nth-child(even) { fill: rgba(255,255,255,.04) !important; } /* Today line */ .gantt .today-highlight { fill: #dbeafe; opacity: .5; } html.dark .gantt .today-highlight { fill: #1e3a5f; opacity: .4; } /* Tick labels */ .gantt .lower-text, .gantt .upper-text { fill: var(--t-muted) !important; font-size: 12px; } html.dark .gantt .lower-text, html.dark .gantt .upper-text { fill: var(--t-muted) !important; } .gantt .row-line { stroke: var(--b-subtle) !important; } .gantt .tick { stroke: var(--b-default) !important; } /* ── Bar color: Contributor (blue) — custom_class: 'bar-contributor' ── */ .gantt .bar-wrapper.bar-contributor .bar { fill: #3b82f6; } .gantt .bar-wrapper.bar-contributor .bar-label { fill: #ffffff; } .gantt .bar-wrapper.bar-contributor .bar:hover { fill: #2563eb; } /* ── Bar color: Affiliate (orange) — custom_class: 'bar-affiliate' ── */ .gantt .bar-wrapper.bar-affiliate .bar { fill: #f97316; } .gantt .bar-wrapper.bar-affiliate .bar-label { fill: #ffffff; } .gantt .bar-wrapper.bar-affiliate .bar:hover { fill: #ea6c0a; } /* ── Milestone diamond — custom_class: 'bar-milestone' ── */ .gantt .bar-wrapper.bar-milestone .bar { fill: #8b5cf6; transform: rotate(45deg); transform-origin: center; } .gantt .bar-wrapper.bar-milestone .bar-label { fill: #ffffff; font-size: 11px; } .gantt .bar-wrapper.bar-milestone .bar:hover { fill: #7c3aed; } /* ── Dark mode bar adjustments ── */ html.dark .gantt .bar-wrapper.bar-contributor .bar { fill: #2563eb; } html.dark .gantt .bar-wrapper.bar-contributor .bar:hover { fill: #1d4ed8; } html.dark .gantt .bar-wrapper.bar-affiliate .bar { fill: #ea580c; } html.dark .gantt .bar-wrapper.bar-affiliate .bar:hover { fill: #c2410c; } html.dark .gantt .bar-wrapper.bar-milestone .bar { fill: #7c3aed; } html.dark .gantt .bar-wrapper.bar-milestone .bar:hover { fill: #6d28d9; } /* frappe-gantt popup — disabled entirely; appended to SVG/body so needs global selector */ .popup-wrapper { display: none !important; } /* ── Transitions ─────────────────────────────────────────────── */ .bg-white, .bg-gray-50, .bg-gray-100, [class*="rounded-2xl"], [class*="rounded-xl"] { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* ── Help page prose styles ─────────────────────────────────── */ .prose-help h3 { font-size: 1.0625rem; font-weight: 700; color: var(--t-head); margin: 2rem 0 0.625rem; line-height: 1.35; } .prose-help h3:first-child { margin-top: 0; } .prose-help h4 { font-size: 0.9375rem; font-weight: 700; color: var(--t-head); margin: 1.5rem 0 0.5rem; line-height: 1.35; } .prose-help h3 + h4, .prose-help h4:first-child { margin-top: 0; } /* Tailwind Preflight resets p margin to 0 — restore it */ .prose-help p { display: block; margin: 0 0 0.875rem; line-height: 1.65; } .prose-help p:last-child { margin-bottom: 0; } /* Tailwind Preflight strips list-style — restore bullets/numbers */ .prose-help ul { list-style-type: disc; padding-left: 1.4rem; margin: 0 0 0.875rem; line-height: 1.65; } .prose-help ol { list-style-type: decimal; padding-left: 1.4rem; margin: 0 0 0.875rem; line-height: 1.65; } .prose-help li { display: list-item; margin-bottom: 0.35rem; } .prose-help li:last-child { margin-bottom: 0; } /* Nested lists get a bit of breathing room */ .prose-help li > ul, .prose-help li > ol { margin: 0.35rem 0 0.35rem 0.75rem; } .prose-help strong { font-weight: 600; color: var(--t-head); } .prose-help code { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.8125rem; background: var(--s-raised); color: var(--brand-blue); padding: 0.1em 0.35em; border-radius: 4px; } html.dark .prose-help code { color: var(--brand-blue); } /* ── Partner portal sidebar ──────────────────────────────────── */ /* Light: white card bg + subtle border. Dark: gray-900 + gray-800 border. Active item: .sidebar-active (defined inline in index.html — works both modes) */ .partner-sidebar { background: var(--s-card); border-right: 1px solid var(--b-default); color: var(--t-body); } html.dark .partner-sidebar { background: #111827; /* gray-900 */ border-right-color: #1f2937; /* gray-800 */ color: #f9fafb; } .partner-sidebar-header { border-bottom: 1px solid var(--b-default); } html.dark .partner-sidebar-header { border-bottom-color: #1f2937; } .partner-sidebar-footer { border-top: 1px solid var(--b-default); } html.dark .partner-sidebar-footer { border-top-color: #1f2937; } /* Inactive nav item — colour/hover only; layout stays on the element */ .partner-sidebar-nav-inactive { color: var(--t-muted); } .partner-sidebar-nav-inactive:hover { background: var(--s-raised); color: var(--t-head); } html.dark .partner-sidebar-nav-inactive { color: #9ca3af; } /* gray-400 */ html.dark .partner-sidebar-nav-inactive:hover { background: #1f2937; /* gray-800 */ color: #ffffff; } /* Footer profile button */ .partner-sidebar-profile-btn:hover { background: var(--s-raised); } html.dark .partner-sidebar-profile-btn:hover { background: #1f2937; } /* Dark mode toggle pill — mirrors admin .dm-toggle */ .partner-dm-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; border: 1px solid var(--b-default); background: transparent; color: var(--t-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; width: 100%; justify-content: center; } .partner-dm-toggle:hover { background: var(--s-raised); color: var(--t-head); border-color: var(--b-strong); } html.dark .partner-sidebar .partner-dm-toggle { border-color: #374151; background: rgba(255,255,255,0.04); color: #9ca3af; } html.dark .partner-sidebar .partner-dm-toggle:hover { background: rgba(255,255,255,0.06); color: #e5e7eb; border-color: #4b5563; } /* Muted label (version string, "Edit profile", sign-out icon) */ .partner-sidebar-muted { color: var(--t-muted); } .partner-sidebar-muted:hover { color: var(--t-head); } html.dark .partner-sidebar-muted { color: #9ca3af; } html.dark .partner-sidebar-muted:hover { color: #ffffff; } /* Partner name heading in footer */ .partner-sidebar-head { color: var(--t-head); } html.dark .partner-sidebar-head { color: #ffffff; } /* ── Partner sidebar collapse ────────────────────────────────── */ .partner-sidebar { transition: width 0.22s ease; overflow: visible; } .partner-sidebar.sidebar-expanded { width: 16rem; } .partner-sidebar.sidebar-collapsed { width: 4rem; } /* Hide text labels when collapsed */ .partner-sidebar.sidebar-collapsed .partner-sidebar-label, .partner-sidebar.sidebar-collapsed .partner-sidebar-footer-text { display: none; } /* Center icons when collapsed */ .partner-sidebar.sidebar-collapsed nav button { justify-content: center; padding-left: 0; padding-right: 0; } .partner-sidebar.sidebar-collapsed .partner-sidebar-profile-btn { justify-content: center; padding-left: 0; padding-right: 0; } /* ── Partner avatar (list rows, partner detail, etc.) ────────── */ /* Photo circle */ .partner-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; } /* Logo container — transparent bg, no padding, just a bordered circle */ .partner-avatar-logo { border-radius: 50%; border: 1px solid var(--b-default); background: var(--s-card); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; padding: 0; } .partner-avatar-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Initials circle Background is set inline (hsl derived from name) so we only provide layout here */ .partner-avatar-initials { border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 600; line-height: 1; user-select: none; color: #ffffff; } /* ── Clear-filters button (red, inline, small) ───────────────── */ /* Light: red-600 bg / white text — 5.3:1 ✓ Dark: red-500 bg / white text — 4.6:1 ✓ */ .btn-clear-filters { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; border: none; background-color: #dc2626; /* red-600 — 5.3:1 on white ✓ */ color: #ffffff; transition: background-color 0.15s ease; } .btn-clear-filters:hover { background-color: #b91c1c; } /* red-700 */ html.dark .btn-clear-filters { background-color: #ef4444; } /* red-500 — 4.6:1 on dark ✓ */ html.dark .btn-clear-filters:hover { background-color: #dc2626; } /* ── Login screen background (partner portal) ──────────────── Light mode: dark gradient (intentional — brand blue-navy) Dark mode: subtly adjusted so the login card is distinguishable */ .login-bg { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); } html.dark .login-bg { background: linear-gradient(135deg, #0a0f1e 0%, #0c1628 50%, #0e2040 100%); } /* Login card: add a visible border in dark mode so it reads against the dark bg */ html.dark .login-card { border: 1px solid var(--b-default); background-color: var(--s-card); } /* ── Coming Soon badge (Resources section) ───────────────────── */ .badge-coming-soon { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 9999px; background: var(--status-warning-bg); color: var(--status-warning-text); border: 1px solid #fde68a; line-height: 1.4; pointer-events: none; user-select: none; } html.dark .badge-coming-soon { background: rgba(245,158,11,.15); color: #fbbf24; border-color: rgba(245,158,11,.3); } /* ── Globe country detail panel slide-in animation ────────────── */ @keyframes slideInPanel { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ── Revenue Projection CTA — dark mode gradient fix ──────────── */ /* Ensures the light-mode blue gradient never bleeds into dark mode */ html.dark .revenue-calc-cta { background-image: none !important; background-color: #1f2937; /* gray-800 */ } /* ── Partnership Level tokens ─────────────────────────────────── */ /* Light: color = text/icon on white (4.5:1+); bg = tinted surface. Dark: color = text/icon on #111827 (4.5:1+); bg = deep tint. */ :root { /* X — World Changer — amber gold */ --plvl-world-changer: #a16207; /* 4.5:1 on #fff ✓ */ --plvl-world-changer-bg: #fef3c7; /* IX — Community Changer — violet */ --plvl-community-changer: #6d28d9; /* 6.4:1 on #fff ✓ */ --plvl-community-changer-bg: #ede9fe; /* VIII — Life Changer — teal */ --plvl-life-changer: #0d9488; /* 4.5:1 on #fff ✓ */ --plvl-life-changer-bg: #ccfbf1; /* VII — Difference Maker — brand blue */ --plvl-difference-maker: #1d70a6; /* 4.7:1 on #fff ✓ */ --plvl-difference-maker-bg: #dbeafe; /* VI — Hope Giver — sky blue */ --plvl-hope-giver: #0369a1; /* 5.3:1 on #fff ✓ */ --plvl-hope-giver-bg: #e0f2fe; /* V — Community Builder — brand green */ --plvl-community-builder: #008c00; /* 4.7:1 on #fff ✓ */ --plvl-community-builder-bg: #dcfce7; /* IV — Opportunity Creator — lime green */ --plvl-opportunity-creator: #4d7c0f; /* 6.1:1 on #fff ✓ */ --plvl-opportunity-creator-bg: #ecfccb; /* III — Key Contributor — brand orange */ --plvl-key-contributor: #c66b2e; /* 4.5:1 on #fff ✓ */ --plvl-key-contributor-bg: #fdf0e6; /* II — Mission Partner — amber */ --plvl-mission-partner: #b45309; /* 5.1:1 on #fff ✓ */ --plvl-mission-partner-bg: #fffbeb; /* I — Impact Ally — slate */ --plvl-impact-ally: #475569; /* 5.9:1 on #fff ✓ */ --plvl-impact-ally-bg: #f1f5f9; } html.dark { --plvl-world-changer: #fbbf24; /* 10.5:1 on #111827 ✓ */ --plvl-world-changer-bg: #3f2e10; --plvl-community-changer: #a78bfa; /* 8.2:1 on #111827 ✓ */ --plvl-community-changer-bg: #2d1b69; --plvl-life-changer: #2dd4bf; /* 11.2:1 on #111827 ✓ */ --plvl-life-changer-bg: #042f2e; --plvl-difference-maker: #60a5fa; /* 7.2:1 on #111827 ✓ */ --plvl-difference-maker-bg: #172a45; --plvl-hope-giver: #38bdf8; /* 11.5:1 on #111827 ✓ */ --plvl-hope-giver-bg: #082f49; --plvl-community-builder: #4ade80; /* 9.8:1 on #111827 ✓ */ --plvl-community-builder-bg: #14302a; --plvl-opportunity-creator: #a3e635; /* 12.1:1 on #111827 ✓ */ --plvl-opportunity-creator-bg: #1a2e05; --plvl-key-contributor: #fb923c; /* 5.9:1 on #111827 ✓ */ --plvl-key-contributor-bg: #431407; --plvl-mission-partner: #fbbf24; /* 10.5:1 on #111827 ✓ */ --plvl-mission-partner-bg: #451a03; --plvl-impact-ally: #94a3b8; /* 4.9:1 on #111827 ✓ */ --plvl-impact-ally-bg: #1e293b; } /* ── Partner level badge widget (sidebar) ────────────────────── */ .partner-level-badge-btn { border-radius: 12px; transition: opacity 0.15s; } .partner-level-badge-btn:hover { opacity: 0.85; } .partner-level-progress-track { background: rgba(0,0,0,0.1); } html.dark .partner-level-progress-track { background: rgba(255,255,255,0.12); } /* ── Learning Center: resource type badge CSS variables ────────── Used via inline style var() in ResourceCard — needs dark override here since inline styles cannot use Tailwind class-based dark overrides. */ :root { --type-watch-bg: #ede9fe; --type-watch-text: #7c3aed; /* 7.1:1 on #ede9fe ✓ */ } html.dark { --type-watch-bg: #2d1b69; --type-watch-text: #c4b5fd; /* 8.5:1 on #2d1b69 ✓ */ } /* ── Portal page content prose ─────────────────────────────── Renders rich HTML from portal_page_content in the CourseView. All colors use CSS vars — no hardcoded hex, works in dark mode. */ /* Base prose */ .portal-content { line-height: 1.75; font-size: 0.9rem; color: var(--t-body); } .portal-content h2 { font-size: 1.25rem; font-weight: 800; color: var(--t-head); margin: 2rem 0 0.6rem; padding-top: 1.5rem; border-top: 1px solid var(--b-subtle); scroll-margin-top: 80px; } .portal-content h3 { font-size: 1rem; font-weight: 700; color: var(--t-head); margin: 1.5rem 0 0.4rem; } .portal-content h4 { font-size: 0.875rem; font-weight: 600; color: var(--t-head); margin: 1.2rem 0 0.3rem; } .portal-content p { margin: 0 0 0.85rem; } .portal-content ul, .portal-content ol { margin: 0.5rem 0 1rem 1.4rem; } .portal-content li { margin-bottom: 0.4rem; } .portal-content dl { margin: 0.5rem 0 1rem; } .portal-content dt { font-weight: 700; color: var(--t-head); margin-top: 1rem; } .portal-content dd { margin: 0.2rem 0 0.6rem 1.2rem; } .portal-content a { color: var(--brand-blue); text-decoration: underline; } .portal-content strong { font-weight: 700; color: var(--t-head); } .portal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } /* ── Callout boxes ── */ .portal-content .cbox, .portal-content .ctip, .portal-content .cwarn { border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 1.25rem 0; font-size: 0.875rem; line-height: 1.6; } .portal-content .cbox { background: var(--brand-blue-surface); border-left: 4px solid var(--brand-blue); color: var(--brand-blue-text); } .portal-content .ctip { background: var(--brand-green-surface); border-left: 4px solid var(--brand-green); color: var(--brand-green-text); } .portal-content .cwarn { background: var(--brand-orange-surface); border-left: 4px solid var(--brand-orange); color: var(--brand-orange-text); } .portal-content .cbox strong, .portal-content .ctip strong, .portal-content .cwarn strong { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 4px; opacity: 0.75; } .portal-content .cbox p, .portal-content .ctip p, .portal-content .cwarn p { margin: 0; } /* ── Numbered steps ── */ .portal-content .csteps { list-style: none; margin: 1rem 0 1.25rem; padding: 0; counter-reset: cstep; } .portal-content .csteps > li { counter-increment: cstep; position: relative; padding: 14px 16px 14px 58px; background: var(--s-raised); border: 1px solid var(--b-subtle); border-radius: 14px; margin-bottom: 8px; } .portal-content .csteps > li::before { content: counter(cstep); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--brand-blue); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .portal-content .csteps > li strong { color: var(--t-head); display: block; margin-bottom: 3px; font-size: 0.875rem; } .portal-content .csteps > li p, .portal-content .csteps > li ul { margin: 0; color: var(--t-muted); font-size: 0.8rem; } /* ── Video embed ── */ .portal-content .cvid { position: relative; border-radius: 16px; overflow: hidden; background: #000; margin: 1.25rem 0; aspect-ratio: 16/9; } .portal-content .cvid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .portal-content .cvid-link { display: flex; align-items: center; gap: 14px; background: var(--s-raised); border: 1px solid var(--b-default); border-radius: 14px; padding: 18px 20px; margin: 1.25rem 0; text-decoration: none; color: var(--t-body); transition: background 0.15s; } .portal-content .cvid-link:hover { background: var(--brand-blue-surface); } .portal-content .cvid-link .cvid-icon { width: 48px; height: 48px; border-radius: 10px; background: #ff0000; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .portal-content .cvid-link .cvid-icon svg { color: #fff; } .portal-content .cvid-link strong { display: block; font-size: 0.875rem; color: var(--t-head); margin-bottom: 2px; } .portal-content .cvid-link span { font-size: 0.75rem; color: var(--t-muted); } /* ── Stats grid ── */ .portal-content .cstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 1.25rem 0; } .portal-content .cstat { background: var(--s-raised); border: 1px solid var(--b-subtle); border-radius: 14px; padding: 18px 14px; text-align: center; } .portal-content .cstat .num { font-size: 1.75rem; font-weight: 800; color: var(--brand-blue); line-height: 1; display: block; } .portal-content .cstat .lbl { font-size: 0.7rem; color: var(--t-muted); margin-top: 5px; display: block; line-height: 1.3; } /* ── Icon card grid ── */ .portal-content .cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 1.25rem 0; } .portal-content .cgrid-card { background: var(--s-raised); border: 1px solid var(--b-subtle); border-radius: 14px; padding: 18px; } .portal-content .cgrid-card .ci { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 1.3rem; } .portal-content .cgrid-card h4 { margin: 0 0 6px; font-size: 0.875rem; color: var(--t-head); } .portal-content .cgrid-card p { margin: 0; font-size: 0.8rem; color: var(--t-muted); } /* ── Download button ── */ .portal-content .cdl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 24px; background: var(--brand-green-surface); color: var(--brand-green-text); font-size: 0.8rem; font-weight: 600; text-decoration: none; margin: 6px 6px 6px 0; border: 1px solid var(--brand-green); transition: background 0.15s; } .portal-content .cdl-btn:hover { background: var(--brand-green); color: #fff; text-decoration: none; } /* ── FAQ Accordion ── */ .portal-content .cfaq { margin: 1.25rem 0; } .portal-content .cfaq-controls { display: flex; gap: 8px; margin-bottom: 10px; } .portal-content .cfaq-controls button { background: none; border: 1px solid var(--b-default); border-radius: 20px; padding: 4px 14px; font-size: 0.75rem; font-weight: 600; color: var(--brand-blue); cursor: pointer; transition: background 0.15s, color 0.15s; } .portal-content .cfaq-controls button:hover { background: var(--brand-blue-surface); } .portal-content .cfaq-item { background: var(--s-raised); border: 1px solid var(--b-subtle); border-radius: 12px; margin-bottom: 6px; overflow: hidden; } .portal-content .cfaq-item summary { list-style: none; padding: 14px 18px; font-size: 0.875rem; font-weight: 600; color: var(--t-head); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; user-select: none; } .portal-content .cfaq-item summary::-webkit-details-marker { display: none; } .portal-content .cfaq-item summary::after { content: ''; width: 18px; height: 18px; flex-shrink: 0; background: var(--brand-blue); border-radius: 50%; display: inline-block; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") center/cover; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") center/cover; transition: transform 0.2s; } .portal-content .cfaq-item[open] summary::after { transform: rotate(180deg); } .portal-content .cfaq-item[open] summary { color: var(--brand-blue); } .portal-content .cfaq-item[open] { border-color: var(--brand-blue); } .portal-content .cfaq-body { padding: 0 18px 16px; font-size: 0.85rem; color: var(--t-body); line-height: 1.6; border-top: 1px solid var(--b-subtle); margin-top: 0; padding-top: 12px; } /* ── Course View Layout ─────────────────────────────────────── Full-panel course experience: breadcrumb + hero + TOC + content. */ .cv-wrap { } .cv-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; } .cv-back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--t-muted); background: none; border: none; cursor: pointer; padding: 6px 10px 6px 6px; border-radius: 8px; transition: color 0.12s, background 0.12s; } .cv-back-btn:hover { color: var(--t-body); background: var(--s-raised); } .cv-module-pos { font-size: 0.75rem; color: var(--t-faint); font-weight: 600; background: var(--s-raised); border: 1px solid var(--b-subtle); padding: 4px 10px; border-radius: 20px; white-space: nowrap; } .cv-hero { background: var(--s-card); border: 1px solid var(--b-default); border-radius: 20px; padding: 24px 28px; margin-bottom: 20px; } .cv-hero-title { font-size: 1.6rem; font-weight: 800; color: var(--t-head); margin: 10px 0 8px; line-height: 1.2; } .cv-hero-desc { font-size: 0.875rem; color: var(--t-muted); margin: 0; line-height: 1.6; max-width: 640px; } .cv-type-pill { font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 6px; } .cv-duration { font-size: 0.75rem; color: var(--t-faint); } .cv-done-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 6px; background: var(--status-success-bg); color: var(--status-success-text); } /* Body: sidebar + content */ .cv-body { display: flex; gap: 20px; align-items: flex-start; } .cv-toc { width: 228px; flex-shrink: 0; position: sticky; top: 20px; max-height: calc(100vh - 80px); overflow-y: auto; } .cv-toc::-webkit-scrollbar { width: 4px; } .cv-toc::-webkit-scrollbar-thumb { background: var(--b-default); border-radius: 4px; } .cv-main { flex: 1; min-width: 0; } .cv-toc-inner { background: var(--s-card); border: 1px solid var(--b-default); border-radius: 16px; overflow: hidden; } .cv-toc-title { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--t-faint); padding: 14px 14px 6px; } .cv-toc-btn { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; padding: 8px 14px; border: none; cursor: pointer; background: none; color: var(--t-muted); font-size: 0.75rem; line-height: 1.45; transition: background 0.12s, color 0.12s; } .cv-toc-btn:hover { background: var(--s-raised); color: var(--t-body); } .cv-toc-btn.cv-active { background: var(--brand-blue-surface); color: var(--brand-blue-text); font-weight: 600; } .cv-toc-btn.cv-read { color: var(--brand-green-text); } .cv-toc-dot { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid currentColor; margin-top: 1px; display: flex; align-items: center; justify-content: center; } .cv-toc-dot.cv-filled { background: var(--brand-green); border-color: var(--brand-green); } .cv-toc-sep { height: 1px; background: var(--b-subtle); margin: 6px 0; } .cv-toc-progress { padding: 4px 14px 10px; font-size: 0.7rem; color: var(--t-faint); } .cv-complete-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px; border: none; border-radius: 10px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.15s; background: var(--brand-blue); color: #fff; } .cv-complete-btn:hover:not(:disabled) { opacity: 0.88; } .cv-complete-btn.cv-done { background: var(--status-success-bg); color: var(--status-success-text); } .cv-complete-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Content card */ .cv-content-card { background: var(--s-card); border: 1px solid var(--b-default); border-radius: 20px; padding: 32px 36px; margin-bottom: 16px; } /* Bottom nav */ .cv-bottom-nav { display: flex; align-items: stretch; gap: 10px; margin-top: 4px; } .cv-bottom-prev, .cv-bottom-next { flex: 1; min-width: 0; } .cv-bottom-complete { flex-shrink: 0; padding: 12px 20px !important; width: auto !important; border-radius: 12px !important; } .cv-nav-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: var(--s-card); border: 1px solid var(--b-default); border-radius: 12px; cursor: pointer; color: var(--t-muted); font-size: 0.8rem; text-align: left; transition: background 0.12s, border-color 0.12s; } .cv-nav-btn:hover { background: var(--s-raised); border-color: var(--b-strong); color: var(--t-body); } .cv-nav-right { flex-direction: row-reverse; text-align: right; } .cv-nav-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--t-faint); margin-bottom: 2px; } .cv-nav-title { display: block; font-size: 0.8rem; font-weight: 600; color: var(--t-head); line-height: 1.3; } /* Mobile TOC */ .cv-mob-toc { display: none; margin-bottom: 16px; } .cv-mob-toc-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; background: var(--s-card); border: 1px solid var(--b-default); border-radius: 12px; cursor: pointer; color: var(--t-body); font-size: 0.8rem; font-weight: 600; } .cv-mob-progress { margin-left: auto; font-size: 0.7rem; color: var(--t-faint); background: var(--s-raised); padding: 2px 8px; border-radius: 10px; } .cv-mob-drawer { background: var(--s-card); border: 1px solid var(--b-default); border-top: none; border-radius: 0 0 12px 12px; padding: 8px 0; } .cv-mob-toc-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 16px; border: none; cursor: pointer; background: none; color: var(--t-muted); font-size: 0.8rem; } .cv-mob-toc-item.cv-active { color: var(--brand-blue-text); font-weight: 600; } .cv-mob-toc-item.cv-read { color: var(--brand-green-text); } @media (max-width: 767px) { .cv-toc { display: none; } .cv-mob-toc { display: block; } .cv-body { gap: 0; } .cv-content-card { padding: 20px; } .cv-hero { padding: 18px 20px; } .cv-hero-title { font-size: 1.3rem; } .cv-bottom-nav { flex-wrap: wrap; } .cv-bottom-complete { order: -1; width: 100% !important; } .portal-content .cgrid { grid-template-columns: 1fr; } .portal-content .cstats { grid-template-columns: repeat(2, 1fr); } } /* ── Motion: modal / toast / accordion animations ──────────────── */ @keyframes motionOverlayIn { from { opacity: 0 } to { opacity: 1 } } @keyframes motionOverlayOut { from { opacity: 1 } to { opacity: 0 } } @keyframes motionPanelIn { from { opacity: 0; transform: scale(0.95) translateY(10px) } to { opacity: 1; transform: scale(1) translateY(0) } } @keyframes motionPanelOut { from { opacity: 1; transform: scale(1) translateY(0) } to { opacity: 0; transform: scale(0.95) translateY(10px) } } @keyframes motionToastIn { from { opacity: 0; transform: translateY(-6px) scale(0.97) } to { opacity: 1; transform: translateY(0) scale(1) } } @keyframes motionToastOut { from { opacity: 1; transform: translateY(0) scale(1) } to { opacity: 0; transform: translateY(-6px) scale(0.97) } } .anim-overlay-in { animation: motionOverlayIn 0.18s ease forwards; } .anim-overlay-out { animation: motionOverlayOut 0.18s ease forwards; } .anim-panel-in { animation: motionPanelIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; } .anim-panel-out { animation: motionPanelOut 0.16s ease forwards; } .anim-toast-in { animation: motionToastIn 0.2s ease forwards; } .anim-toast-out { animation: motionToastOut 0.16s ease forwards; } /* ── FAQ accordion: JS-driven height animation (see partner.jsx animateFAQ*) ── */ /* .cfaq-body overflow is managed inline by the animation helpers */