/* ===================================================================== backer.css - Infra-Backer design system Derived from: - home_revised.html (homepage: hero, router, pillars, pricing, process, coverage, final) - dashboard_profile.html (shell: sidebar/topbar, content grid, profile page) Brand accent: #2d6b66 (teal-green) Typography: DM Sans + Fira Mono only Dark mode: [data-bs-theme="dark"] (Bootstrap 5 native) Section index: 1. TOKENS - light mode 2. TOKENS - dark mode 3. BASE 3A. FONTS (@font-face) - DM Sans and Fira Mono, self-hosted 4. TYPOGRAPHY 4B. BOOTSTRAP 5.3 VARIABLE RE-THEME (--bs-* token aliases) 5. BOOTSTRAP OVERRIDES (.btn variants, .card family) 6. LAYOUT (.app grid, .sidebar, .topbar, .app-content, .container-backer) 7. NAVIGATION (.sb-*, .tb-*, .site-nav) 8. CORE COMPONENTS (.dtable, .pill, .person, .role-badge, .service-chips, .pager, .empty, .banner, .eyebrow, .page-head) 9. MODALS & FORMS (.mf-*, .field, .chipx, .chips-field, .sector-ico, .ghost-alert, .char-meter, .domain-box, .invite-row) 10. FORM WIZARD (.pf-*) - reusable multi-step form shell 11. FIELD INFO POPOVER (.fi-pop) - form-adjacent help chrome 12. INFORMATION-CARD INTERNALS (.cap, .kv-row, .kv-card-sticky, .kv-collapse) 13. MAPBOX POPUP (.ib-map-pop-*) - paints the default Mapbox GL popup container/tip/close + the .ib-map-pop content chrome. 14. PAGE: HOMEPAGE (.hero-*, .router-*, .pillar-*, .process-tabs, .coverage-*, .final-*, .map-snap/.pin) 14B. HOMEPAGE REWORK ADDITIONS (.hero-centered, .soon-pill, .intel-*, .hiwC-*, .p3-*, .pricing-cards) - layered over section 14. 14C. PAGE: LEGAL (.legal-*) - sticky TOC + section headings for the public legal pages (privacy / terms / cookies / disclaimer). TOC hidden <=991.98px. 14D. PAGE: AUTH (.auth-*) - centred-card auth screens (sign-in/up, recovery, 2FA, status). Public-shell pages; reuse .eyebrow + .swash. Icons are Font Awesome. 15. PAGE: PROFILE (.profile-*) 16. PAGE: ENGAGEMENT MANAGER (.em-*, .focus-card, .pulse-card) 17. PAGE: PROJECT DETAIL (.pd-*, .eoi-*, .btn-pd-*) 18. PAGE: ORGANISATIONS DIRECTORY (.dx-*, .active-filters) 19. PAGE: SAVED SEARCHES (.ss-*) 20. PAGE: ADMIN (.ad-*, .stat-tabs, .u-table, .org-table, .log-row, .activity-card, .heatmap, .ref-rail, .lk-table) - all page-scoped under #admin-page where the global cascade would otherwise leak (.pager, .kv-row). 21. PAGE: DEVELOPER DASHBOARD (.dev-*, .lc-*, .fund-*, .qa-row, .activity-row, .bars, .donut, .legend-list, .map-mock, .map-pin, .dev-sector, .fc) - page-scoped under #dev-overview. 22. PAGE: NOTIFICATIONS (.nf-*) - page-scoped under #nf-page. 23. PAGE: PROFILE SETTINGS (.ps-*) - page-scoped under #ps-page. 24. PAGE: INVESTOR SHORTLIST (.sl-*) - redacted per-component shortlist; page-scoped under #inv-shortlist-page. 24A. PAGE: ADVISOR-REQUEST SHORTLIST (.av-*) - binary card-pick mirroring the investor shortlist; page-scoped under #ar-shortlist-page. 24B. PAGE: PREFERRED-BIDDER SELECT (.pb-*) - per-component preferred designation; page-scoped under #pref-select-page. 24C. PAGE: COMING SOON (.cs-*) - placeholder panel rendered by the coming_soon() macro (Infra-Analytics + Infra-Maps). 25. RESPONSIVE 26. PRINT 14C / 14D (legal, auth) sit after §26; then: 25 (legacy compatibility), §26 FLATPICKR, 28. INFRA-MAPS - INVESTMENT FLOWS (#inv-flows-page, .if-*) 28B. INFRA-MAPS - ASSET MAPS (.asset-map-page, .ea-*) - page-only parts: search, region tree, status dots, detail facts. 28C. ADMIN - DATA SOURCES (#admin-page .ds-*, .lk-*, .dup-*) 28D. MAP CHROME (SHARED) (.map-dock, .map-panel, .map-sec, .map-check, .map-swatch) - Filters + Layers dock and legend rows for every Infra-Maps page (static/js/maps/layers-panel.js). 28E. ADMIN - ASSETS (#admin-page .as-*) - the master asset list and one asset's page (sits after §28C in the file). INTEREST / PRE-REGISTRATION FORM (.ib-interest) ===================================================================== */ /* ===================================================================== 1. TOKENS - light mode ===================================================================== */ :root { /* Brand */ --backer: #2d6b66; --backer-rgb: 45, 107, 102; /* RGB of --backer, for rgba()/--bs-*-rgb slots */ --backer-ink: #1d4744; --backer-soft: #e9f1f0; --backer-softer: #f4f8f7; /* Surfaces */ --bg: #fbfaf7; --surface: #ffffff; --surface-2: #f7f6f2; /* Sidebar (stays dark in both modes - design anchor) */ --sidebar-bg: #1d2b2a; --sidebar-bg-2: #243938; --sidebar-fg: #c7d3d1; --sidebar-fg-dim:#8a9a97; --sidebar-accent:#5fbdb3; /* Ink scale */ --ink: #111714; --ink-2: #3b4743; --ink-3: #6a7570; --ink-4: #98a29e; /* Lines */ --line: #e4e7e6; --line-2: #eceeed; --line-sidebar: rgba(255,255,255,.07); /* Secondary accents (with soft pairs) */ --amber: #b07e2a; --amber-soft: #f6ecd6; --plum: #6b4a7a; --plum-soft: #ece0f0; --green: #2f7a4d; --green-soft: #e0eee6; --red: #a9442e; --red-soft: #f3e0da; --blue: #2c4a78; --blue-soft: #e3e9f2; --indigo: #3a3f7a; --indigo-soft: #e2e3ef; /* Funding capital-stack shade target - the colour the Debt-shade .cat-* swatches mix `var(--blue)` toward. White in light mode (lighter tranches); overridden to a dark surface in dark mode so the shades don't blow out. */ --cat-tint: #fff; /* Shape */ --radius: 12px; --radius-sm: 8px; /* Shadow */ --shadow-card: 0 1px 0 rgba(0,0,0,.02), 0 2px 6px -4px rgba(29,71,68,.08); --shadow-pop: 0 20px 40px -20px rgba(29,71,68,.3); /* Spacing */ --row-gap: 14px; --card-pad: 22px; /* Density (set at runtime if required; default 1) */ --density: 1; /* Fonts */ --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Fira Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ===================================================================== 2. TOKENS - dark mode Triggered by [data-bs-theme="dark"] on (Bootstrap 5 native). ===================================================================== */ [data-bs-theme="dark"] { --bg: #0f1514; --surface: #172221; --surface-2: #1e2b2a; --sidebar-bg: #172221; /* match the topbar (--surface) in dark mode */ --sidebar-bg-2: #1e2b2a; /* sb-item hover/active - next surface step (= --surface-2) */ --sidebar-fg: #c7d3d1; --sidebar-fg-dim:#6f7f7d; --sidebar-accent:#6ec5bc; --ink: #e8efed; --ink-2: #c3cecb; --ink-3: #8a9592; --ink-4: #5d6a67; --line: #253333; --line-2: #1e2a29; --line-sidebar: rgba(255,255,255,.06); --backer: #4ea49c; --backer-rgb: 78, 164, 156; --backer-ink: #8ccac3; --backer-soft: rgba(78,164,156,.12); --backer-softer: rgba(78,164,156,.06); /* Accent BASES carry per-mode values: the light hexes (#b07e2a etc.) are too dark/saturated to read as text on a near-black surface or on their own dark soft pair, so each is lightened here (same character as --backer #2d6b66 -> #4ea49c and --indigo #3a3f7a -> #7a80c4). This is what lets accent-text-on- soft-bg consumers (.pill.*, .person.*, .service-chip.*, .alert-subtle-*, ...) stay legible in dark mode WITHOUT a per-consumer --ink override. */ --amber: #d9a441; --amber-soft: rgba(176,126,42,.15); --plum: #b48ec6; --plum-soft: rgba(107,74,122,.18); --green: #5cb682; --green-soft: rgba(47,122,77,.18); --red: #dd8166; --red-soft: rgba(169,68,46,.2); --blue: #6f97ce; --blue-soft: rgba(44,74,120,.2); --indigo: #7a80c4; --indigo-soft: rgba(122,128,196,.18); /* Mix the Debt-shade .cat-* swatches toward the dark card surface (not #fff) so Subordinated / Working read as muted darker blues rather than blowing out to near-white on a dark background. */ --cat-tint: var(--surface); --shadow-card: 0 1px 0 rgba(0,0,0,.3), 0 2px 10px -4px rgba(0,0,0,.5); --shadow-pop: 0 20px 50px -20px rgba(0,0,0,.7); } /* Dark mode: content sitting ON a solid accent FILL (destructive buttons, featured pills, badge glyphs) uses near-black ink, not white - the accent bases are lightened above so white drops below AA on the lighter fill. Mirrors the established `.btn-primary` dark treatment (dark text on the lightened teal). This is the exhaustive set of solid-accent-fill consumers that carried light content; the `.is-destructive:hover` twin lives next to its base rule. Text-on-soft-bg consumers (.pill.*, .alert-subtle-*, etc.) need no override - the lightened bases read fine on the dark soft pairs. */ [data-bs-theme="dark"] .btn-danger, [data-bs-theme="dark"] .btn-primary.btn-danger, [data-bs-theme="dark"] .btn-danger:hover, [data-bs-theme="dark"] .btn-primary.btn-danger:hover { color: #0f1514; --bs-btn-active-color: #0f1514; } [data-bs-theme="dark"] .feat-star, [data-bs-theme="dark"] .pc-feat, [data-bs-theme="dark"] .profile-avatar .verified, [data-bs-theme="dark"] #admin-page .row-actions .ra-btn.primary, [data-bs-theme="dark"] .theme-control-toggle .theme-control-toggle-label:hover { color: #0f1514; } /* Capital-stack `.seg` % labels sit on the 7-category `.cat-*` fills (which read off the lightened accent bases + `--backer`); dark ink reads cleanly on every shade, so the white text-shadow is no longer needed. */ [data-bs-theme="dark"] .pd-stack-bar .seg { color: #0f1514; text-shadow: none; } /* ===================================================================== 3. BASE ===================================================================== */ /* Do not hijack the global reset. These rules are intentionally conservative and apply only within backer-scoped contexts. */ /* Neutralise element-level blanket rules that leak onto any `
` tag. Backer section classes (.hero, .pillar, .pricing, .final, etc.) have higher specificity and still apply their own padding. Without this, `@media (min-width: 992px) { section { padding: 1rem 0 } }` */ section { padding-top: 0; padding-bottom: 0; } /* ===================================================================== 3A. FONTS - DM Sans and Fira Mono, self-hosted (static/vendors/fonts/, from @fontsource 5.3.0, SIL OFL 1.1; licences beside the files), so no page asks Google Fonts. Latin and Latin Extended, the weights in use. ===================================================================== */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendors/fonts/dm-sans-5.3.0/dm-sans-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendors/fonts/dm-sans-5.3.0/dm-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendors/fonts/dm-sans-5.3.0/dm-sans-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendors/fonts/dm-sans-5.3.0/dm-sans-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendors/fonts/dm-sans-5.3.0/dm-sans-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendors/fonts/dm-sans-5.3.0/dm-sans-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendors/fonts/dm-sans-5.3.0/dm-sans-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendors/fonts/dm-sans-5.3.0/dm-sans-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../vendors/fonts/dm-sans-5.3.0/dm-sans-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../vendors/fonts/dm-sans-5.3.0/dm-sans-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendors/fonts/fira-mono-5.3.0/fira-mono-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendors/fonts/fira-mono-5.3.0/fira-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendors/fonts/fira-mono-5.3.0/fira-mono-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendors/fonts/fira-mono-5.3.0/fira-mono-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendors/fonts/fira-mono-5.3.0/fira-mono-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendors/fonts/fira-mono-5.3.0/fira-mono-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ===================================================================== 4. TYPOGRAPHY DM Sans is the platform font, declared at html+body. Display-weight headings use DM Sans 500/600 with tight tracking. ===================================================================== */ html, body { font-family: var(--font-sans); } /* Reserve the vertical-scrollbar gutter even on pages/states without overflow. Prevents centred layouts (page-head, form frame) from shifting by ~½ the scrollbar width when navigating between wizard steps of different heights. */ html { scrollbar-gutter: stable; scroll-behavior: smooth; /* in-page anchor jumps (e.g. the legal-page TOC) glide */ } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code, kbd, pre, samp, .mono, .font-mono { font-family: var(--font-mono); } /* ===================================================================== 4B. BOOTSTRAP 5.3 VARIABLE RE-THEME The Bootstrap CDN ships default-blue --bs-* tokens, so re-map the variables the live app relies on to backer tokens: base body paint, links (black → teal on hover), Bootstrap dropdowns (filter menus + profile menu), and the primary accent. Tokens that reference --bg / --ink / --line / --surface* resolve per-mode automatically; only the literal RGB pairs and the brand accent are re-stated in the dark block. ===================================================================== */ :root { --bs-primary: var(--backer); --bs-primary-rgb: var(--backer-rgb); --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--line); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--ink-2); --bs-tertiary-color: var(--ink-3); /* Links: ink by default, brand-teal on hover. Bootstrap 5.3 reboot reads the -rgb pair, so both rgb and plain vars are set. */ --bs-link-color: var(--ink); --bs-link-hover-color: var(--backer); --bs-link-color-rgb: 17, 23, 20; --bs-link-hover-color-rgb: var(--backer-rgb); } /* Bootstrap dropdowns: re-theme on .dropdown-menu (NOT :root) - Bootstrap declares these --bs-dropdown-* tokens LOCALLY on .dropdown-menu, so a :root override loses to the component's own 1rem / blue defaults. Compact 0.8rem type + subtle brand-green hover bg (ink text). Covers the browse/admin filter menus + profile menu. backer.css loads after the Bootstrap CDN, so this same-specificity rule wins. */ .dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--ink-2); --bs-dropdown-border-color: var(--line); --bs-dropdown-border-radius: var(--radius-sm); --bs-dropdown-font-size: 0.8rem; --bs-dropdown-item-padding-y: 0.4rem; --bs-dropdown-item-padding-x: 0.85rem; --bs-dropdown-link-color: var(--ink-2); --bs-dropdown-link-hover-color: var(--ink); /* text stays ink on hover - only the bg tints */ --bs-dropdown-link-hover-bg: var(--backer-soft); /* subtle brand-green hover background */ --bs-dropdown-link-active-color: var(--backer-ink); --bs-dropdown-link-active-bg: var(--backer-soft); } [data-bs-theme="dark"] { /* --bs-primary / -rgb and link-hover-rgb flip automatically via var(--backer) / var(--backer-rgb) above; only the ink-based link colour needs a dark literal. */ --bs-link-color-rgb: 232, 239, 237; } /* Base page paint - backer's body rule above sets only the font; the surface colours reverted to Bootstrap's white/#212529 when it was removed. */ body { background-color: var(--bg); color: var(--ink); } /* Links: no underline by default; colour comes from the --bs-link-* tokens above (ink, brand-teal on hover). Components that style their own anchors set their own colour/decoration and are unaffected. */ a { text-decoration: none; } /* ===================================================================== 5. BOOTSTRAP OVERRIDES - .btn family, .card These override Bootstrap 5.3.x. Dashboard's 8px-radius button is authoritative for the base; homepage pill-shape is applied via scoped overrides in Section 14 (Homepage). ===================================================================== */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s, color .12s, transform .1s, box-shadow .15s; } .btn-primary { /* Bootstrap 5.3 compiles .btn-primary's hover / active / border / focus-ring colours as LITERAL blue (not via --bs-primary), so re-point the --bs-btn-* tokens to brand-teal - otherwise the blue border shows on hover and the blue fill shows on :active (mousedown / right-click). */ --bs-btn-color: #fff; --bs-btn-bg: var(--backer); --bs-btn-border-color: var(--backer); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--backer-ink); --bs-btn-hover-border-color: var(--backer-ink); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--backer-ink); --bs-btn-active-border-color: var(--backer-ink); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--backer); --bs-btn-disabled-border-color: var(--backer); --bs-btn-focus-shadow-rgb: var(--backer-rgb); background: var(--backer); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 8px 20px -12px rgba(45,107,102,.6); } .btn-primary:hover, .btn-primary:focus { background: var(--backer-ink); color: #fff; transform: translateY(-1px); } [data-bs-theme="dark"] .btn-primary { color: #0f1514; } [data-bs-theme="dark"] .btn-primary:hover { color: #0f1514; } .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); } .btn-subtle { background: var(--backer-soft); color: var(--backer-ink); } .btn-subtle:hover { background: var(--backer); color: #fff; } [data-bs-theme="dark"] .btn-subtle:hover { color: #0f1514; } .btn-text { background: transparent; color: var(--ink); padding: 8px 0; text-decoration: none; } .btn-text:hover { color: var(--backer); } /* Disabled state - a disabled button keeps its own variant colour, just muted + non-interactive. Per-variant rules re-assert the bg/colour. */ .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; } .btn-primary:disabled, .btn-primary[disabled] { background: var(--backer); color: #fff; } .btn-ghost:disabled, .btn-ghost[disabled] { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn-subtle:disabled, .btn-subtle[disabled] { background: var(--backer-soft); color: var(--backer-ink); } [data-bs-theme="dark"] .btn-primary:disabled, [data-bs-theme="dark"] .btn-primary[disabled] { color: #0f1514; } .btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; background: var(--surface); border-color: var(--line); } .btn-icon:hover { border-color: var(--ink-3); color: var(--ink); } .btn-sm { padding: 6px 10px; font-size: 12px; } .btn-lg { padding: 12px 20px; font-size: 15px; } .btn-pill { border-radius: 999px; } /* Destructive paint - layer on top of any .btn (typically .btn-primary).btn-danger for the confirm action in a delete/cancel .mf-foot. Single source for the red button look; pages should not redefine this. */ .btn-danger, .btn-primary.btn-danger { /* Own the Bootstrap --bs-btn-* tokens so the destructive button stays red in EVERY state. Otherwise .btn-primary's teal --bs-btn-active-bg leaks through on :active (Bootstrap's `.btn:first-child:active` rule, specificity 0,3,0, beats `.btn-primary.btn-danger`'s 0,2,0 static background) - flashing the red confirm button teal on mousedown. */ --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red); --bs-btn-hover-bg: var(--red); --bs-btn-hover-border-color: var(--red); --bs-btn-active-bg: var(--red); --bs-btn-active-border-color: var(--red); --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: 169, 68, 46; background: var(--red); border-color: var(--red); color: #fff; } .btn-danger:hover, .btn-primary.btn-danger:hover { background: var(--red); border-color: var(--red); color: #fff; filter: brightness(.85); } /* Trailing icons inside buttons (.btn i.btn-i) - consistent small scale. */ .btn .btn-i { font-size: 11px; } .btn-lg .btn-i { font-size: 12px; } /* Small-caps label used above chip groups (profile page, homepage). */ .chip-group-label { margin-top: 18px; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } /* Card - dashboard mock's version is authoritative */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); display: flex; flex-direction: column; } /* Pin `.card-foot` to the bottom of the card: the card body (or any list.js wrapper around it) grows to fill the remaining space, pushing the foot to the edge. Keeps card heights consistent across a grid row. */ .card > .card-body, .card > [data-list] { flex: 1 1 auto; min-height: 0; } .card > [data-list] { display: flex; flex-direction: column; } .card > [data-list] > .card-body { flex: 1 1 auto; min-height: 0; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1px var(--card-pad); min-height: 56px; border-bottom: 1px solid var(--line-2); } .card-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); } .card-head h3 .count { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-3); background: var(--surface-2); padding: 2px 7px; border-radius: 4px; letter-spacing: 0; } .card-head .card-aux { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); } /* Override the Bootstrap default `.card-body` padding (1rem). Descendant combinator - the Team/Activity tables wrap `.card-body` inside a `[data-list]` container, so a direct-child selector misses them. */ .card .card-body { padding: var(--card-pad) !important; } /* `overflow-x: auto` is defence in depth: if any .dtable still can't fit its container, scroll horizontally instead of overflowing the card. */ .card .card-body.no-pad { padding: 0 !important; overflow-x: auto; } .card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px var(--card-pad); min-height: 52px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3); } /* ===================================================================== 6. LAYOUT `.content` was renamed to `.app-content` (205 existing template uses of `.content` forced the rename). ===================================================================== */ .app { display: grid; /* `minmax(0, 1fr)` lets the content track shrink below its min-content size. Without it, a wide child (e.g. a `.tcard` with `min-width` set on the inner table) forces the grid track wider than the viewport, producing a page-level horizontal scrollbar instead of letting the `.tcard` scroll internally. */ grid-template-columns: var(--sidebar-w, 244px) minmax(0, 1fr); grid-template-rows: 56px 1fr; grid-template-areas: "sidebar topbar" "sidebar content"; min-height: 100vh; transition: grid-template-columns .2s ease; } .app.rail, html.ib-rail-preload .app { --sidebar-w: 68px; } .sidebar { grid-area: sidebar; background: var(--sidebar-bg); border-right: 1px solid var(--line-sidebar); position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; z-index: 20; } .topbar { grid-area: topbar; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .app-content { grid-area: content; padding: calc(24px * var(--density)) 32px 24px; max-width: 1280px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; min-height: calc(100vh - 56px); } /* Sticky footer inside `.app-content` - pushed to the bottom by `margin-top: auto` in the flex column. Sits below the content when content is short, below the scrolled content when content overflows. */ .app-footer { margin-top: auto; padding-top: 32px; color: var(--ink-3); font-size: 12px; } /* Public-page container (homepage, legal pages). Renamed from .wrap. */ .container-backer { max-width: 1240px; margin: 0 auto; padding: 0 32px; } /* Narrower centred container for long-form reading (the public legal pages). Horizontal padding comes from the page's own px-lg-7 (>=lg) / the .legal-layout inline padding (/.mark highlight (yellow bg + padding) */ background: none; padding: 0; flex-shrink: 0; } .sb-brand .name { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; } .sb-brand .name span { color: var(--sidebar-accent); } /* Green hyphen in the Infra-Pipeline / -Analytics / -Maps group headings (and their rail-flyout labels). */ .sb-item .label span, .sb-sub-label span { color: var(--sidebar-accent); } .sb-scroll { flex: 1; overflow-y: auto; padding: 14px 10px 20px; } .sb-scroll::-webkit-scrollbar { width: 6px; } .sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; } .sb-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sidebar-fg-dim); padding: 14px 12px 6px; white-space: nowrap; } .sb-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--sidebar-fg); cursor: pointer; font-size: 13.5px; font-weight: 500; position: relative; transition: background .1s, color .1s; white-space: nowrap; } .sb-item:hover { background: var(--sidebar-bg-2); color: #fff; } .sb-item.active { background: var(--sidebar-bg-2); color: #fff; font-weight: 600; } .sb-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--sidebar-accent); border-radius: 0 2px 2px 0; } .sb-item .icon { width: 18px; height: 18px; flex-shrink: 0; font-size: 14px; display: grid; place-items: center; color: var(--sidebar-fg-dim); } .sb-item.active .icon, .sb-item:hover .icon { color: var(--sidebar-accent); } .sb-item .caret { margin-left: auto; font-size: 10px; color: var(--sidebar-fg-dim); transition: transform .15s; } .sb-item.open .caret { transform: rotate(90deg); } /* Submenu group - wraps each parent `.sb-item[data-sub]` with its sibling `.sb-sub` so the sub can be positioned as a flyout in rail mode. */ .sb-group { position: relative; } .sb-sub { display: none; margin-left: 18px; border-left: 1px solid var(--line-sidebar); } .sb-sub.open { display: block; } /* Flyout heading - shown only in rail-mode flyouts. */ .sb-sub-label { display: none; padding: 6px 10px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sidebar-fg-dim); border-bottom: 1px solid var(--line-sidebar); margin-bottom: 4px; } .sb-sub-inner { overflow: hidden; padding-left: 10px; padding-top: 2px; padding-bottom: 4px; } .sb-sub .sb-item { padding: 6.5px 12px; font-weight: 400; font-size: 13px; color: var(--sidebar-fg-dim); background: transparent; } .sb-sub .sb-item:hover { color: #fff; background: var(--sidebar-bg-2); } .sb-sub .sb-item.active { color: #fff; background: var(--sidebar-bg-2); font-weight: 500; } .sb-sub .sb-item.active::before { display: none; } .sb-sub .sb-item .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sidebar-fg-dim); } .sb-sub .sb-item.active .dot, .sb-sub .sb-item:hover .dot { background: var(--sidebar-accent); } .sb-foot { padding: 10px 14px; flex-shrink: 0; } .sb-foot button { width: 100%; display: flex; align-items: center; gap: 10px; background: transparent; border: none; color: var(--sidebar-fg-dim); padding: 8px 0; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; } .sb-foot button:hover { color: #fff; } .sb-foot .icon { width: 18px; height: 18px; display: grid; place-items: center; font-size: 13px; } /* Rail-toggle icon swap - show left-chevron when expanded, right-chevron when collapsed. Driven by `.app.rail` (JS) or `html.ib-rail-preload` (FOUC guard) so there is no visible state-mismatch on page load. */ #railToggle .rail-ico-collapsed { display: none; } .app.rail #railToggle .rail-ico-expanded, html.ib-rail-preload .app #railToggle .rail-ico-expanded { display: none; } .app.rail #railToggle .rail-ico-collapsed, html.ib-rail-preload .app #railToggle .rail-ico-collapsed { display: inline-block; } /* Rail mode (collapsed sidebar) - icons only; submenus become flyouts. `html.ib-rail-preload` is set by an inline script before first paint (FOUC guard) so a persisted rail state applies without flicker. JS keeps the `.app.rail` class in sync. */ .app.rail .sb-brand .name, html.ib-rail-preload .app .sb-brand .name, .app.rail .sb-label, html.ib-rail-preload .app .sb-label, .app.rail .sb-item .label, html.ib-rail-preload .app .sb-item .label, .app.rail .sb-item .caret, html.ib-rail-preload .app .sb-item .caret, .app.rail .sb-foot button span.lbl, html.ib-rail-preload .app .sb-foot button span.lbl { display: none; } .app.rail .sb-brand, html.ib-rail-preload .app .sb-brand { justify-content: center; padding: 14px 0; } .app.rail .sb-item, html.ib-rail-preload .app .sb-item { justify-content: center; padding: 10px 0; } .app.rail .sb-item::before, html.ib-rail-preload .app .sb-item::before { left: 2px; } .app.rail .sb-foot button, html.ib-rail-preload .app .sb-foot button { justify-content: center; } /* `.sb-sub` is rendered as a fixed-position flyout in rail mode. Positioning is `fixed` (not absolute) because `.sidebar` has `overflow: hidden` which would clip an absolute-positioned child. JS sets `top` to align with the parent item; the `.flyout` class triggers visibility. The server-rendered `.open` class (for current-path indication) is intentionally IGNORED here so the flyout doesn't auto-show on page load before JS runs. */ .app.rail .sb-sub, html.ib-rail-preload .app .sb-sub { display: block; margin-left: 0; border-left: none; position: fixed; left: calc(var(--sidebar-w, 68px) + 6px); top: 0; width: 220px; background: var(--sidebar-bg); border: 1px solid var(--line-sidebar); border-radius: 10px; padding: 6px 4px; box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transform: translateX(-4px); transition: opacity .12s, transform .12s, visibility .12s; z-index: 1050; pointer-events: none; } .app.rail .sb-sub.flyout, html.ib-rail-preload .app .sb-sub.flyout { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; } .app.rail .sb-sub-label, html.ib-rail-preload .app .sb-sub-label { display: block; } .app.rail .sb-sub-inner, html.ib-rail-preload .app .sb-sub-inner { padding: 4px; } .app.rail .sb-sub .sb-item, html.ib-rail-preload .app .sb-sub .sb-item { padding: 7px 10px; justify-content: flex-start; } .app.rail .sb-sub .sb-item .label, html.ib-rail-preload .app .sb-sub .sb-item .label { display: inline; } .app.rail .sb-sub .sb-item::before, html.ib-rail-preload .app .sb-sub .sb-item::before { display: none; } .sb-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 15; display: none; } .sb-backdrop.show { display: block; } /* ---- Topbar ---- */ .tb { display: flex; align-items: center; gap: 16px; padding: 0 24px; height: 100%; } .tb-hamburger { background: none; border: none; width: 36px; height: 36px; border-radius: 8px; display: none; place-items: center; cursor: pointer; color: var(--ink-2); } .tb-hamburger:hover { background: var(--surface-2); } .tb-search { position: relative; flex: 1; max-width: 520px; } .tb-search input { width: 100%; background: var(--surface-2); border: 1px solid transparent; border-radius: 8px; padding: 9px 14px 9px 38px; font-size: 13px; color: var(--ink); font-family: inherit; outline: none; transition: border .15s, background .15s; } .tb-search input::placeholder { color: var(--ink-4); } .tb-search input:focus { background: var(--surface); border-color: var(--backer); } .tb-search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-4); font-size: 13px; } .tb-search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; font-family: var(--font-mono); background: var(--surface); border: 1px solid var(--line); padding: 2px 6px; border-radius: 4px; color: var(--ink-3); } /* Global search dropdown - hangs under .tb-search, populated by static/js/pages/global_search.js from GET /api/search. */ .tb-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); max-height: 480px; overflow-y: auto; z-index: 60; padding: 6px 0; } .tb-search-results[hidden] { display: none; } .tb-search-results .gs-group { padding: 4px 0; } .tb-search-results .gs-group + .gs-group { border-top: 1px solid var(--line-2); } .tb-search-results .gs-group-label { padding: 6px 14px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .tb-search-results .gs-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--ink); text-decoration: none; font-size: 13px; cursor: pointer; } .tb-search-results .gs-item:hover, .tb-search-results .gs-item.is-active { background: var(--surface-2); } .tb-search-results .gs-item .gs-ico { flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--backer-soft); color: var(--backer-ink); font-size: 11px; } .tb-search-results .gs-item .gs-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .tb-search-results .gs-item .gs-title { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-search-results .gs-item .gs-sub { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-search-results .gs-item.gs-all { justify-content: center; border-top: 1px solid var(--line-2); margin-top: 4px; } .tb-search-results .gs-item.gs-all .gs-title { color: var(--backer); font-weight: 600; } .tb-search-results .gs-item mark { background: var(--backer-soft); color: var(--backer-ink); padding: 0; border-radius: 2px; } .tb-search-results .gs-empty, .tb-search-results .gs-loading { padding: 18px 14px; font-size: 12px; color: var(--ink-3); text-align: center; } .tb-right { display: flex; align-items: center; gap: 6px; margin-left: auto; } .tb-icon-btn { position: relative; background: none; border: none; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); } .tb-icon-btn:hover { background: var(--surface-2); color: var(--ink); } /* Notification-bell alignment - the notification dropdown renders as `
  • > ` with inline styles that pin the badge at top:4px/right:4px. Force the wrapping link to the same 36×36 shape as `.tb-icon-btn` so the inline badge coords resolve to top-right of the icon (not top-right of an oversized padded box). */ .tb-right > .nav-item.dropdown { list-style: none; } .tb-right > .nav-item.dropdown > .nav-link { position: relative; display: grid !important; place-items: center; width: 36px; height: 36px; min-width: 36px !important; padding: 0 !important; border-radius: 8px; color: var(--ink-2); line-height: 1; } .tb-right > .nav-item.dropdown > .nav-link:hover { background: var(--surface-2); color: var(--ink); } /* Notification unread indicator - simple red dot, no count. */ .tb-right > .nav-item.dropdown > .nav-link .notif-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface); pointer-events: none; } .tb-icon-btn .dot { position: absolute; top: 8px; right: 10px; width: 7px; height: 7px; background: var(--red); border-radius: 50%; border: 2px solid var(--surface); } .tb-user { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer; transition: background .15s; } .tb-user:hover { background: var(--surface-2); } .tb-user .avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--backer) 0%, #5fbdb3 100%); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .02em; } .tb-user .who { display: grid; line-height: 1.2; padding-right: 4px; } .tb-user .who b { font-size: 12.5px; font-weight: 600; color: var(--ink); } .tb-user .who span { font-size: 11px; color: var(--ink-3) !important; margin-top: 1px; } .tb-user .fa-chevron-down { font-size: 9px; color: var(--ink-3); } /* Topbar profile dropdown - the plain Bootstrap .dropdown-menu needs the backer card chrome + a gap below the sticky topbar. Without the gap the card's top corners tucked under the topbar border and read as a detached "modal" card. Opt-in via the positive `.tb-user-menu` class (the bell dropdown `.nf-dd` has its own rule; any future topbar dropdown is unstyled unless it asks for this chrome). Item font comes from --bs-dropdown-font-size (0.8rem); the org-name
    is sized down here. */ .topbar .dropdown-menu.tb-user-menu { margin-top: 8px; background: var(--surface); border-radius: var(--radius); color: var(--ink-2); } .topbar .dropdown-menu.tb-user-menu h6 { font-size: 13.5px; line-height: 1.3; } .topbar .dropdown-menu.tb-user-menu .small, .topbar .dropdown-menu.tb-user-menu p { font-size: 12px; } /* ---- Public site-nav (renamed from .nav to avoid Bootstrap collision) ---- */ .site-nav { position: sticky; top: 0; z-index: 50; background: rgba(251,250,247,.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2); } [data-bs-theme="dark"] .site-nav { background: rgba(15,21,20,.86); } .site-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .site-nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--ink-2); } .site-nav-links a { text-decoration: none; } .site-nav-links a:hover { color: var(--backer); } .site-nav-cta { display: flex; gap: 10px; align-items: center; } .site-nav-cta .btn { border-radius: 999px; } /* Brand lockup - shared by the public top-nav and the footer (the footer so the description paragraph and copyright line (also .text-body-tertiary, but not links) don't react. .text-body-tertiary sets colour with !important (§25 legacy shim), so the hover must use !important to win. */ footer a.text-body-tertiary:hover { color: var(--backer) !important; } /* ===================================================================== 8. CORE COMPONENTS ===================================================================== */ /* ---- Eyebrow (eyebrow label pill) ---- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--backer-ink); background: var(--backer-soft); padding: 6px 12px; border-radius: 999px; } /* ---- Page head (breadcrumb + title + actions) ---- */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: calc(24px * var(--density)); flex-wrap: wrap; } .page-crumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; } .page-crumb a { text-decoration: none; color: inherit; } .page-crumb a:hover { color: var(--backer); } .page-crumb .sep { color: var(--ink-4); font-size: 9px; } /* Chevron delivered as a glyph so each crumb's markup is a bare . ::before inherits the 9px size + --ink-4 colour above (matches the former inline ). */ .page-crumb .sep::before { content: "\f054"; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; } .page-title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px; } .page-title .suffix { color: var(--ink-3); font-weight: 400; } .page-sub { font-size: 13.5px; color: var(--ink-3); max-width: 620px; } .page-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } /* ---- Typography-first data table ---- */ .dtable { width: 100%; border-collapse: collapse; font-size: 13px; } .dtable thead th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 12px var(--card-pad); border-bottom: 1px solid var(--line-2); background: var(--surface-2); white-space: nowrap; cursor: pointer; user-select: none; } .dtable thead th .fa-sort, .dtable thead th .fa-sort-up, .dtable thead th .fa-sort-down { margin-left: 4px; font-size: 9px; opacity: .6; } .dtable thead th.num { text-align: right; } .dtable tbody td { padding: 13px var(--card-pad); border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: middle; } .dtable tbody tr:last-child td { border-bottom: none; } .dtable tbody tr { transition: background .1s; } .dtable tbody tr:hover { background: var(--backer-softer); } .dtable td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); font-weight: 500; } .dtable td.primary { color: var(--ink); font-weight: 500; } .dtable td.primary a { color: var(--ink); transition: color .1s; } .dtable td.primary a:hover { color: var(--backer); } .dtable td .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; } /* ---- .dtable-stack: a table that becomes a stack of cards below 1000px ---- Each row is a card: its lead cell and chevron on the first line, its body cell below, its status last. Cells name their part: .cell-lead, .cell-chev, .cell-body, .cell-status; a .cell-date column is folded into the body cell, which carries it as data-date. An expanded message row (.js-expansion-row) flows under its card. Used by the "all interests / expressions" modals on the summary pages; a viewport query, as each is in a full-width modal. */ @media (max-width: 999px) { .dtable-stack, .dtable-stack thead, .dtable-stack tbody, .dtable-stack tr, .dtable-stack td, .dtable-stack th { display: block; width: 100%; } .dtable-stack thead { display: none; } .dtable-stack tr[hidden] { display: none; } .dtable-stack tbody { padding: 12px; background: var(--surface-2); } .dtable-stack tbody tr:not(.js-expansion-row) { background: var(--surface) !important; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: "lead chev" "body body" "status status"; gap: 10px 12px; } .dtable-stack tbody td { padding: 0 !important; border: none !important; } .dtable-stack tbody td.cell-lead { grid-area: lead; min-width: 0; } .dtable-stack tbody td.cell-chev { grid-area: chev; text-align: right; } .dtable-stack tbody td.cell-body { grid-area: body; min-width: 0; } .dtable-stack tbody td.cell-status { grid-area: status; } .dtable-stack tbody td.cell-date { display: none; } .dtable-stack tbody td.cell-body[data-date]:not([data-date=""])::after { content: " | " attr(data-date); color: var(--ink-3); font-size: 12px; margin-left: 4px; } .dtable-stack tbody tr.js-expansion-row { background: transparent !important; border: none; border-radius: 0; padding: 0; margin-top: -10px; margin-bottom: 10px; box-shadow: none; display: block; } .dtable-stack tbody tr.js-expansion-row[hidden] { display: none !important; } .dtable-stack tbody tr.js-expansion-row td { padding: 0 14px 14px !important; } .dtable-stack tbody tr.js-expansion-row td:empty { display: none; } } /* ---- Person cell ---- */ .person { display: flex; align-items: center; gap: 10px; } .person .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--backer-soft); color: var(--backer-ink); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0; letter-spacing: .02em; } .person.teal .avatar { background: var(--backer-soft); color: var(--backer-ink); } .person.amber .avatar { background: var(--amber-soft); color: var(--amber); } .person.plum .avatar { background: var(--plum-soft); color: var(--plum); } .person.blue .avatar { background: var(--blue-soft); color: var(--blue); } .person.green .avatar { background: var(--green-soft); color: var(--green); } /* Layout modifiers (set via cp_person's `variant=` flag): .fill - grow to fill a flex row alongside a sibling action cluster; .top - top-align the avatar when the .who body wraps to multiple lines (the base rule centres it). */ .person.fill { flex: 1 1 auto; min-width: 0; } .person.top { align-items: flex-start; } .person .who { display: grid; line-height: 1.3; min-width: 0; } .person .who b { font-size: 13px; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; } /* Email / secondary line - grey, wraps inside the cell instead of forcing the column wider. `overflow-wrap: anywhere` lets long addresses break mid-word (e.g. after the @) rather than overflow horizontally. */ .person .who span { font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; word-break: break-word; white-space: normal; } .person .who span a { color: inherit !important; text-decoration: none !important; pointer-events: none; font-weight: inherit; } /* ---- Pill / badge ---- */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.5; white-space: nowrap; } .pill.teal { background: var(--backer-soft); color: var(--backer-ink); } .pill.amber { background: var(--amber-soft); color: var(--amber); } .pill.green { background: var(--green-soft); color: var(--green); } .pill.red { background: var(--red-soft); color: var(--red); } .pill.plum { background: var(--plum-soft); color: var(--plum); } .pill.blue { background: var(--blue-soft); color: var(--blue); } .pill.indigo{ background: var(--indigo-soft); color: var(--indigo); } .pill.ghost { background: var(--surface-2); color: var(--ink-3); } /* Funding-category colour palette - the 7 capital-stack categories. Each .cat-* class sets --c; every funding swatch / bar fill reads `background: var(--c)`. GLOBAL single source of truth for funding-category colour platform-wide: dashboard funding cards (.fr-*), the project / advisor-request capital stack (.pd-stack-*), the Express-Interest modal, the EM drawer funding swatches, the shortlist / preferred-select pages, the admin Lookups financing-types group headers + Reference -> Financing colours, AND the financing pills (Browse / My Projects / EM drawer) via `FINANCING_CATEGORY_PALETTE` (pipeline.py), whose `pill` token maps each category to the matching flat .pill colour name and whose `cat` token maps it to the .cat-* swatch here. Palette: Equity = green, Senior debt = blue, Subordinated debt = blue (lighter shade), Hybrid = grey, Working capital = blue (lightest shade), Government / Concessional = indigo, Structured / Other = amber. (The three Debt shades collapse to a single flat .pill.blue on pills, which can't express shades; the capital-stack bars carry the distinct shades.) The Subordinated / Working blue shades mix toward `--cat-tint` (white in light mode, the dark card surface in dark mode) so they don't blow out on dark. */ .cat-equity { --c: var(--green); } .cat-senior { --c: var(--blue); } .cat-subordinated { --c: color-mix(in srgb, var(--blue) 74%, var(--cat-tint)); } .cat-hybrid { --c: var(--ink-4); } .cat-working { --c: color-mix(in srgb, var(--blue) 54%, var(--cat-tint)); } .cat-concessional { --c: var(--indigo); } .cat-other { --c: var(--amber); } /* ---- Service chip (advisor service-type badge family) ---- 3-tier silhouette rule: sector = filled tile (.sector-ico), service = outlined chip with icon (.service-chip), stage = flat pill (.pill). See references/mocks/service_badge_palette.html. */ .service-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .01em; border: 1px solid var(--line); white-space: nowrap; } .service-chip .ico { width: 14px; display: inline-grid; place-items: center; font-size: 11px; flex-shrink: 0; } .service-chip.lg { padding: 6px 14px 6px 12px; font-size: 12.5px; gap: 8px; } .service-chip.sm { padding: 2px 9px 2px 7px; font-size: 11px; gap: 5px; } .service-chip.sm .ico { width: 12px; font-size: 10px; } .service-chip.technical { border-color: var(--backer); } .service-chip.technical .ico { color: var(--backer); } .service-chip.legal { border-color: var(--indigo); } .service-chip.legal .ico { color: var(--indigo); } .service-chip.financial { border-color: var(--amber); } .service-chip.financial .ico { color: var(--amber); } .service-chip.environmental { border-color: var(--green); } .service-chip.environmental .ico { color: var(--green); } .service-chip.regulatory { border-color: var(--plum); } .service-chip.regulatory .ico { color: var(--plum); } .service-chip.commercial { border-color: var(--blue); } .service-chip.commercial .ico { color: var(--blue); } .service-chip.solid.technical { background: var(--backer-soft); color: var(--backer-ink); } .service-chip.solid.legal { background: var(--indigo-soft); color: var(--indigo); } .service-chip.solid.financial { background: var(--amber-soft); color: var(--amber); } .service-chip.solid.environmental { background: var(--green-soft); color: var(--green); } .service-chip.solid.regulatory { background: var(--plum-soft); color: var(--plum); } .service-chip.solid.commercial { background: var(--blue-soft); color: var(--blue); } /* ---- Role badge (monospaced uppercase pill) ---- */ .role-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; font-size: 11px; font-weight: 500; color: var(--ink-3); background: var(--surface-2); border-radius: 4px; font-family: var(--font-mono); letter-spacing: .02em; } /* ---- Service chips ---- */ .service-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .service-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; font-weight: 500; border: 1px solid var(--line-2); } .service-chips .chip .ico { color: var(--backer); font-size: 10px; } /* ---- Pager ---- */ /* Pagination - `.pager` wraps list.js-driven prev/next buttons and a numbered `
      ` that list.js fills with the template `
      • `. The active
    • gets `.active`; disabled prev/next gets both `disabled` attr and class. */ .pager { display: flex; align-items: center; gap: 4px; } /* Every clickable cell - prev/next button and the per-number - shares one 26×26 visual token. */ .pager > button, .pager > .page-link, .pager .pagination .page { display: grid; place-items: center; width: 26px; height: 26px; min-width: 26px; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-2); font-size: 10px; font-family: var(--font-mono); font-weight: 600; line-height: 1; cursor: pointer; } .pager > button:hover, .pager > .page-link:hover, .pager .pagination .page:hover { background: var(--surface-2); color: var(--ink); } .pager > button:disabled, .pager > .page-link.disabled, .pager > button.disabled { opacity: .4; cursor: not-allowed; } /* Numbered-pages list - inline row, no list bullets, `
    • ` is just a wrapper. */ .pager .pagination { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; margin: 0; } .pager .pagination li { list-style: none; display: block; margin: 0; padding: 0; } .pager .pagination li.active > .page, .pager .pagination li.active > .page:hover { background: var(--backer-soft); color: var(--backer); border-color: transparent; } /* ---- Empty state ---- */ .empty { text-align: center; padding: 48px 24px; color: var(--ink-3); font-size: 13px; } .empty .glyph { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--ink-4); font-size: 16px; margin-bottom: 10px; } .empty h4 { font-family: var(--font-sans); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 4px; } .empty p { margin: 0 0 14px; max-width: 320px; margin-left: auto; margin-right: auto; } /* ---- Inline contextual banner ---- */ .ib-banner, .banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 10px; font-size: 13px; background: var(--amber-soft); color: var(--amber); margin-bottom: 16px; border: 1px solid transparent; } .ib-banner.success, .banner.success { background: var(--green-soft); color: var(--green); } .ib-banner .ico, .banner .ico { font-size: 14px; } .ib-banner a, .banner a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .ib-banner a:hover, .banner a:hover { text-decoration: none; } .ib-banner .x, .banner .x { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; opacity: .6; } /* Flash-message close button - Bootstrap's `.alert-dismissible .btn-close` defaults to `position: absolute` + `padding: 1.25rem 1rem`, which blows up the hit-target and breaks flex alignment inside our `d-flex` flash alert. Force it back in-flow and size it to match the icon/text line height. */ .alert .btn-close { position: static; box-sizing: border-box; width: 22px; height: 22px; padding: 6px; margin: 0 0 0 auto; background-size: 12px 12px; opacity: .55; flex-shrink: 0; } .alert .btn-close:hover, .alert .btn-close:focus { opacity: .9; } /* ---- Role tabs (dashboard profile page variant) ---- */ .role-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 24px 0 22px; overflow-x: auto; } .role-tabs button { background: none; border: none; cursor: pointer; padding: 12px 2px; margin-right: 28px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: inherit; transition: color .12s, border-color .12s; } .role-tabs button .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); } .role-tabs button.active { color: var(--ink); border-bottom-color: var(--backer); font-weight: 600; } .role-tabs button.active .dot { background: var(--backer); } .role-tabs button:hover:not(.active) { color: var(--ink-2); } /* ---- Browse Projects: list + card shared chrome ---------------------- Reusable pieces for list/card pages (Browse Projects, later adopted by project_list and advisor_requests). The column-hide rules below drive the Columns dropdown on Browse Projects; add new `col-hide-*` / `data-col` pairs in sync whenever a new toggleable column is added. */ .page-title .count { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-3); background: var(--surface-2); padding: 3px 8px; border-radius: 6px; vertical-align: middle; margin-left: 10px; letter-spacing: 0; } /* Toolbar row */ .bp-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .bp-toolbar .spacer { flex: 1; } /* Right-aligned actions cluster. `margin-left: auto` pushes it to the right of its row whether it shares row 1 with the search/filters or wraps to row 2 - this stops the view-toggle and columns picker from wrapping independently and landing on different rows around the 1300px wrap threshold. */ .bp-toolbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .bp-search { position: relative; min-width: 260px; flex: 0 1 320px; } .bp-search input { width: 100%; padding: 9px 36px 9px 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-family: inherit; font-size: 13px; color: var(--ink); outline: none; transition: border-color .12s, box-shadow .12s; } .bp-search input::placeholder { color: var(--ink-4); } .bp-search input:focus { border-color: var(--backer); box-shadow: 0 0 0 3px var(--backer-soft); } .bp-search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink-4); pointer-events: none; } /* A part of a list page that a live search swaps (IB.wireLiveSearch), dimmed while a search is out: the rows on screen are the last query's. */ [data-live][aria-busy="true"] { opacity: .55; transition: opacity .15s .1s; } .bp-search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-3); background: var(--bg); } .fbar { display: flex; gap: 6px; flex-wrap: wrap; } .fbtn, .sort-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 500; color: var(--ink-2); outline: none; transition: border-color .12s, background .12s, color .12s, box-shadow .12s; } .fbtn:hover, .sort-btn:hover { border-color: var(--ink-3); color: var(--ink); } .fbtn:focus-visible, .sort-btn:focus-visible, .fbtn[aria-expanded="true"], .sort-btn[aria-expanded="true"] { border-color: var(--backer); box-shadow: 0 0 0 3px var(--backer-soft); color: var(--ink); } .fbtn .ca, .sort-btn .ca { font-size: 9px; color: var(--ink-4); } .fbtn .filter-label, .sort-btn .filter-label { color: inherit; } .fbtn.has-value { border-color: var(--backer); background: var(--backer-soft); color: var(--backer-ink); } .fbtn.has-value .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--backer); } .fbtn.has-value .ca { color: var(--backer-ink); } .fbtn .dot { display: none; } /* A date filter in a filter bar (Admin -> Transactions): a .fbtn (the visible flatpickr field carries the input's classes, IB.initFlatpickr) sized for a date. */ input.fbtn { width: 128px; font-family: inherit; } input.fbtn::placeholder { color: var(--ink-3); } /* Column chooser dropdown - reuses Bootstrap's .dropdown-menu scaffold */ .col-chooser { min-width: 220px; padding: 6px; } .col-chooser .cc-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; user-select: none; } .col-chooser .cc-item:hover { background: var(--surface-2); color: var(--ink); } .col-chooser .cc-item input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--backer); margin: 0; } .col-chooser .cc-reset { display: block; margin-top: 4px; padding: 6px 8px; border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--ink-3); text-align: right; background: transparent; border-left: none; border-right: none; border-bottom: none; width: 100%; cursor: pointer; } .col-chooser .cc-reset:hover { color: var(--backer); } /* Segmented view toggle (list / card) + auto-collapse indicator */ .view-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; position: relative; } .view-toggle button { border: none; background: transparent; padding: 6px 11px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; position: relative; } .view-toggle button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); } /* Inactive button: no green hover bleed from legacy .btn-outline-backer styling */ .view-toggle button:not(.on):hover { color: var(--ink-2); background: transparent; border-color: transparent; } .view-toggle button:not(.on):focus, .view-toggle button:not(.on):active { background: transparent; border-color: transparent; box-shadow: none; } .view-toggle button.auto::after { content: 'auto'; position: absolute; top: -8px; right: -8px; background: var(--amber-soft); color: var(--amber); font-size: 8.5px; font-weight: 700; padding: 1px 4px; border-radius: 3px; letter-spacing: .04em; } /* Browse-table card (distinct from .card - borderless header, sticky th) */ .tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow-x: auto; overflow-y: hidden; } .tcard .tbl { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto; } /* Per-column minimum widths so horizontal scroll kicks in once the column chooser adds enough columns to overflow the container. First (project) and last (actions) columns are pinned by usage; the rest carry a baseline 110-140px. */ .tcard .tbl th[data-col], .tcard .tbl td[data-col] { min-width: 80px; white-space: nowrap; } .tcard .tbl th[data-col="project"], .tcard .tbl td[data-col="project"] { min-width: 250px; } .tcard .tbl td[data-col="project"] .pname, .tcard .tbl td[data-col="project"] .psub { max-width: 320px; } .tcard .tbl th[data-col="actions"], .tcard .tbl td[data-col="actions"] { min-width: 96px; text-align: right; } .tcard .tbl th[data-col="funding"], .tcard .tbl td[data-col="funding"] { min-width: 140px; white-space: normal; } .tcard .tbl th[data-col="classification"], .tcard .tbl td[data-col="classification"], .tcard .tbl th[data-col="dealProcess"], .tcard .tbl td[data-col="dealProcess"] { min-width: 140px; } .tcard .tbl th[data-col="value"], .tcard .tbl td[data-col="value"], .tcard .tbl th[data-col="valueUsd"], .tcard .tbl td[data-col="valueUsd"], .tcard .tbl th[data-col="targetReturn"], .tcard .tbl td[data-col="targetReturn"] { min-width: 120px; } .tcard .tbl th[data-col="request"], .tcard .tbl td[data-col="request"] { min-width: 300px; } .tcard .tbl th[data-col="views"], .tcard .tbl td[data-col="views"], .tcard .tbl th[data-col="interest"], .tcard .tbl td[data-col="interest"] { min-width: 80px; } .tcard thead th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 12px 14px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); white-space: nowrap; } .tcard thead th:first-child { padding-left: 22px; } .tcard thead th:last-child { padding-right: 22px; } /* Sort headers driven by list.js. List.js adds `.asc` / `.desc` to the active header on click; we paint the indicator via ::after so the markup stays clean (no `` etc.). */ .tcard thead th.sort { cursor: pointer; user-select: none; } .tcard thead th.sort:hover { color: var(--ink); } .tcard thead th.sort::after { content: '\2195'; margin-left: 4px; font-size: 9px; opacity: .35; transition: opacity .12s, color .12s; } .tcard thead th.sort:hover::after { opacity: .8; } .tcard thead th.sort.asc, .tcard thead th.sort.desc { color: var(--backer); } .tcard thead th.sort.asc::after { content: '\2191'; opacity: 1; color: var(--backer); } .tcard thead th.sort.desc::after { content: '\2193'; opacity: 1; color: var(--backer); } .tcard thead th.num { text-align: right; } .tcard tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: middle; } .tcard tbody td:first-child { padding-left: 22px; } .tcard tbody td:last-child { padding-right: 22px; } .tcard tbody tr:last-child td { border-bottom: none; } .tcard tbody tr { transition: background .1s; } .tcard tbody tr:hover { background: var(--backer-softer); } .tcard tbody tr.featured { background: linear-gradient(90deg, rgba(176, 126, 42, .05) 0%, transparent 60%); } .tcard tbody tr.featured:hover { background: linear-gradient(90deg, rgba(176, 126, 42, .08) 0%, var(--backer-softer) 60%); } .tcard td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); font-weight: 500; white-space: nowrap; } .tcard td.num .ccy { color: var(--ink-3); font-weight: 400; margin-right: 2px; } /* Project cell (icon + title + sub-line) */ .pcell { display: flex; align-items: center; gap: 12px; min-width: 0; } .pcell .sector-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; font-size: 14px; position: relative; } .pcell .ptext { min-width: 0; display: grid; line-height: 1.3; } .pcell .ptext .pname { color: var(--ink); font-weight: 600; font-size: 13px; white-space: nowrap; text-decoration: none; overflow: hidden; text-overflow: ellipsis; transition: color .1s; } .pcell .ptext .pname:hover { color: var(--backer); } .pcell .ptext .psub { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pcell .ptext .psub .dot { width: 2px; height: 2px; border-radius: 50%; background: var(--ink-4); flex-shrink: 0; } /* Featured star overlay on sector-ico */ .feat-star { position: absolute; top: -2px; right: -3px; width: 15px; height: 15px; border-radius: 50%; background: var(--amber); color: #fff; display: grid; place-items: center; font-size: 7px; border: 2px solid var(--surface); } /* Country flag chip */ .flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); } .flag .fc { width: 22px; height: 14px; border-radius: 2px; border: 1px solid var(--line); display: inline-grid; place-items: center; background: var(--surface-2); font-size: 9px; color: var(--ink-3); font-family: var(--font-mono); font-weight: 700; letter-spacing: -.02em; flex-shrink: 0; } /* Stage pill with three-tier progress sliver */ .stage-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); } .stage-pill .sb { width: 30px; height: 4px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; flex-shrink: 0; } .stage-pill .sb::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; background: var(--backer); border-radius: 2px; } .stage-pill.early .sb::after { width: 20%; background: var(--amber); } .stage-pill.mid .sb::after { width: 55%; background: var(--backer); } .stage-pill.late .sb::after { width: 85%; background: var(--green); } /* Row actions (reveal on hover, except .save-btn which always renders at full opacity so the saved-state colour reads identically to the card-view heart - CSS opacity on a parent caps children, so the dim has to live on each non-save child instead of on the wrapper). */ .row-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; } .row-actions > :not(.save-btn) { opacity: .6; transition: opacity .1s; } .tcard tbody tr:hover .row-actions > :not(.save-btn) { opacity: 1; } .row-actions button, .row-actions a { width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent; color: var(--ink-3); display: inline-grid; place-items: center; font-size: 12px; cursor: pointer; text-decoration: none; transition: background .12s, color .12s; } .row-actions button:hover, .row-actions a:hover { background: var(--backer-soft); color: var(--backer-ink); } .row-actions .cancel-btn:hover { background: var(--red-soft); color: var(--red); } .row-actions .save-btn.on { color: var(--red); } .row-actions .save-btn.on:hover { background: var(--red-soft); color: var(--red); } /* Published cell */ .pub { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .pub.new { color: var(--green); font-weight: 500; } .pub.new::before { content: '\2022'; margin-right: 3px; color: var(--green); } /* Column hide rules - one per toggleable column slug. Keep in sync with the columnsConfig passed to IB.setupColumnChooser in the browse_projects template. */ .col-hide-subsector [data-col="subsector"] { display: none !important; } .col-hide-country [data-col="country"] { display: none !important; } .col-hide-stage [data-col="stage"] { display: none !important; } .col-hide-value [data-col="value"] { display: none !important; } .col-hide-funding [data-col="funding"] { display: none !important; } .col-hide-published [data-col="published"] { display: none !important; } .col-hide-valueUsd [data-col="valueUsd"] { display: none !important; } .col-hide-classification [data-col="classification"] { display: none !important; } .col-hide-revenueModel [data-col="revenueModel"] { display: none !important; } .col-hide-targetReturn [data-col="targetReturn"] { display: none !important; } .col-hide-dealProcess [data-col="dealProcess"] { display: none !important; } .col-hide-sector [data-col="sector"] { display: none !important; } .col-hide-service [data-col="service"] { display: none !important; } .col-hide-status [data-col="status"] { display: none !important; } .col-hide-views [data-col="views"] { display: none !important; } .col-hide-interest [data-col="interest"] { display: none !important; } .col-hide-deadline [data-col="deadline"] { display: none !important; } .col-hide-developer [data-col="developer"] { display: none !important; } /* Project card (grid view). Grid layout is `.ib-card-grid` on the `.ib-card-view` container with `.ib-card-item` wrappers around each `.project-card` (see the .ib-card-grid block below). `.project-card.h-100` makes sibling cards match height so the value/stage rail aligns across the row. */ .project-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .12s, box-shadow .12s, transform .12s; position: relative; } .project-card:hover { border-color: var(--backer); box-shadow: 0 8px 22px -10px rgba(29, 71, 68, .18); transform: translateY(-1px); } .project-card.featured { border-color: rgba(176, 126, 42, .35); } .project-card.featured::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius); background: linear-gradient(180deg, rgba(176, 126, 42, .06) 0%, transparent 45%); pointer-events: none; } /* Card media band (sector-tinted gradient + hatched overlay) */ .pc-media { position: relative; height: 120px; border-bottom: 1px solid var(--line-2); overflow: hidden; background: linear-gradient(135deg, var(--surface-2) 0%, var(--line) 100%); } .pc-media::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 255, 255, .35) 12px 13px); } .pc-media.economic { background: linear-gradient(135deg, #f6ecd6 0%, #eadcb8 100%); } .pc-media.energy { background: linear-gradient(135deg, #e0eee6 0%, #c5dfcf 100%); } .pc-media.digital { background: linear-gradient(135deg, #ece0f0 0%, #d6c4de 100%); } .pc-media.social { background: linear-gradient(135deg, #e3e9f2 0%, #c9d6e7 100%); } .pc-sector { position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(4px); padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--ink); } .pc-sector .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); } .pc-sector.economic .dot { background: var(--amber); } .pc-sector.energy .dot { background: var(--green); } .pc-sector.digital .dot { background: var(--plum); } .pc-sector.social .dot { background: var(--blue); } .pc-feat { position: absolute; right: 12px; top: 12px; background: var(--amber); color: #fff; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; } .pc-feat i { font-size: 8px; } .pc-status { position: absolute; bottom: 12px; left: 14px; } .pill.pill-deadline { font-size: 10.5px; } .pill.pill-deadline > i { margin-right: 4px; } .pcell .pill.pill-deadline { margin-top: 4px; } .pc-deadline { margin-top: 8px; } .pc-foot .row-actions { gap: 2px; } .pc-foot .row-actions > :not(.save-btn) { opacity: 1; } .pc-save { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .92); border: none; color: var(--ink-3); display: grid; place-items: center; font-size: 12px; cursor: pointer; transition: color .12s, background .12s; } .pc-save:hover { color: var(--red); background: #fff; } .pc-save.on { color: var(--red); } .pc-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; } .pc-title { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.25; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .pc-title:hover { color: var(--backer); text-decoration: none; } .pc-sub { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pc-sub .sep { width: 2px; height: 2px; border-radius: 50%; background: var(--ink-4); } .pc-sub i { color: var(--backer); font-size: 11px; margin-right: 4px; } .pc-tags { display: flex; flex-wrap: wrap; gap: 4px; } .pc-tags .pill.more { background: transparent; color: var(--ink-3); border: 1px dashed var(--line); padding: 1px 6px; } .pc-tags .pill.more::before { display: none; } .pc-value { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px dashed var(--line); margin-top: auto; } .pc-value .vl { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } .pc-value .v { font-family: var(--font-mono); font-size: 17px; color: var(--ink); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .pc-value .v .ccy { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-right: 3px; } .pc-stg { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .pc-stg .stg-lbl { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } .pc-stg .stg-val { font-size: 12.5px; color: var(--ink-2); font-weight: 500; } .pc-foot { padding: 10px 16px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); gap: 10px; } .pc-foot .meta { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 11.5px; flex-wrap: wrap; } .pc-foot .meta span { display: inline-flex; align-items: center; gap: 4px; } .pc-foot .meta i { color: var(--ink-4); font-size: 11px; } /* Clock is always coloured (the card's anchor metric) */ .pc-foot .meta .clock i { color: var(--backer); } /* Views / saves / interest only colour up when their count is non-zero (`.on`) */ .pc-foot .meta .views.on { color: var(--backer-ink); font-weight: 500; } .pc-foot .meta .views.on i { color: var(--backer); } .pc-foot .meta .saves.on { color: var(--backer-ink); font-weight: 500; } .pc-foot .meta .saves.on i { color: var(--backer); } .pc-foot .meta .interest.on { color: var(--backer-ink); font-weight: 500; } .pc-foot .meta .interest.on b { color: var(--backer); font-weight: 700; } .pc-foot .meta .interest.on i { color: var(--backer); } .pc-foot .view { width: 28px; height: 28px; border-radius: 7px; color: var(--backer); display: inline-grid; place-items: center; font-size: 12px; transition: background .12s, color .12s; text-decoration: none; flex-shrink: 0; } .pc-foot .view:hover { background: var(--backer-soft); color: var(--backer-ink); } /* List/card visibility toggle (container-level) */ .ib-view-list .ib-card-view, .ib-view-list .cgrid { display: none; } .ib-view-card .ib-table-view, .ib-view-card .tcard { display: none; } /* Shared fluid card-grid track - the single source of truth for every card view on the platform: project_list / advisor_requests / browse_projects (.ib-card-grid) and the organisations directory (.dx-cards, defined later in this file). 330px minimum card width, capped at 3 columns - every column is the larger of 330px and one-third of the available row, so the grid shows 3 columns on a wide row and drops 3 -> 2 -> 1 the instant a column would fall below 330px (and climbs back as the row widens). The outer `min(100%, ...)` guards against a single column overflowing on viewports narrower than 330px. The `2rem` is 2 inter-column gaps (gap is 1rem / 16px on both consumers) - keep it in sync if that gap ever changes. */ .ib-card-grid, .dx-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(330px, (100% - 2rem) / 3)), 1fr)); } /* .ib-card-grid replaces the old Bootstrap `row-cols-1/sm-2/lg-3` breakpoints. */ .ib-card-grid { display: grid; gap: 1rem; } .ib-card-grid > .ib-card-item { display: flex; } .ib-card-grid > .ib-card-item > .project-card { flex: 1; width: 100%; } /* Second row of .bp-toolbar - hosts the columns picker so it appears below the right-aligned view toggle (dropdown would otherwise overlap the toggle on narrow viewports). Hidden in card view since the picker only acts on the table view. */ .bp-toolbar-row2 { flex-basis: 100%; display: flex; justify-content: flex-end; } .ib-view-card .bp-toolbar-row2 { display: none; } /* Dark mode adjustments */ [data-bs-theme="dark"] .bp-search input { background: var(--surface); } [data-bs-theme="dark"] .bp-search kbd { background: var(--surface-2); } [data-bs-theme="dark"] .fbtn, [data-bs-theme="dark"] .sort-btn { background: var(--surface); } [data-bs-theme="dark"] .flag .fc { background: var(--ink-4); color: var(--ink); } [data-bs-theme="dark"] .pc-media { background: linear-gradient(135deg, var(--surface-2) 0%, var(--line) 100%); } [data-bs-theme="dark"] .pc-media.economic { background: linear-gradient(135deg, rgba(176,126,42,.25) 0%, rgba(176,126,42,.12) 100%); } [data-bs-theme="dark"] .pc-media.energy { background: linear-gradient(135deg, rgba(47,122,77,.30) 0%, rgba(47,122,77,.14) 100%); } [data-bs-theme="dark"] .pc-media.digital { background: linear-gradient(135deg, rgba(107,74,122,.30) 0%, rgba(107,74,122,.14) 100%); } [data-bs-theme="dark"] .pc-media.social { background: linear-gradient(135deg, rgba(44,74,120,.30) 0%, rgba(44,74,120,.14) 100%); } [data-bs-theme="dark"] .pc-sector { background: rgba(0, 0, 0, .45); color: var(--ink); backdrop-filter: blur(4px); } [data-bs-theme="dark"] .pc-save { background: rgba(0, 0, 0, .45); } [data-bs-theme="dark"] .pc-save:hover { background: rgba(0, 0, 0, .6); color: var(--red); } [data-bs-theme="dark"] .feat-star { border-color: var(--surface); } [data-bs-theme="dark"] .tcard tbody tr.featured { background: linear-gradient(90deg, rgba(176, 126, 42, .12) 0%, transparent 60%); } [data-bs-theme="dark"] .tcard tbody tr.featured:hover { background: linear-gradient(90deg, rgba(176, 126, 42, .18) 0%, var(--backer-softer) 60%); } /* ===================================================================== 9. MODALS & FORMS Canonical modal chrome, form controls, chip pickers, and the sector-icon tile used on activity tables. Applied ON TOP of Bootstrap 5 modals so focus trap / backdrop / Escape keep working. Reference: references/mocks/profile_modals.html ===================================================================== */ /* ---- Sector-icon tile (activity tables, project cells) ---- */ .project-cell { display: flex; align-items: center; gap: 12px; } .project-cell .who { line-height: 1.3; min-width: 0; } .project-cell .who b { display: block; color: var(--ink); font-weight: 500; font-size: 13px; } .project-cell .who b a { color: inherit; } .project-cell .who b a:hover { color: var(--backer); } .project-cell .who span { font-size: 11.5px; color: var(--ink-3); } .sector-ico { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; background: var(--surface-2); color: var(--ink-3); } .sector-ico.economic { background: var(--amber-soft); color: var(--amber); } .sector-ico.energy { background: var(--green-soft); color: var(--green); } .sector-ico.digital { background: var(--plum-soft); color: var(--plum); } .sector-ico.social { background: var(--blue-soft); color: var(--blue); } /* ---- Modal chrome (Bootstrap .modal-content and children get these classes) ---- */ .mf-frame { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; } .mf-frame::before { content: ''; position: absolute; inset: -30px; background: radial-gradient(closest-side, rgba(45, 107, 102, .06), transparent 70%); z-index: -1; border-radius: 30px; pointer-events: none; } .mf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line-2); } .mf-head h4 { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); } .mf-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; } .mf-close { width: 30px; height: 30px; flex-shrink: 0; padding: 0; /* drop UA button padding so the glyph centres in the 30px box */ border-radius: 8px; border: none; background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center; line-height: 1; text-align: center; cursor: pointer; transition: background .12s, color .12s; } .mf-close > * { line-height: 1; } .mf-close:hover { background: var(--line); color: var(--ink); } .mf-body { padding: 20px 24px; flex: 1; overflow: auto; } /* Body paragraphs in info-style modals - tighter than default body, soft tone, brand-coloured bold runs. */ .mf-body .mf-info-p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--ink-2); } .mf-body .mf-info-p b { color: var(--backer); font-weight: 600; } .mf-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line-2); background: var(--surface-2); } .mf-foot .mf-foot-status { font-size: 12px; color: var(--ink-3); } /* Right-cluster wrapper for footer buttons. .mf-foot itself is justify-content: space-between, so a single child sits at flex-start; margin-left: auto pushes the cluster back to the right edge whether or not a .mf-foot-status sibling is present. */ .mf-foot .mf-foot-actions { display: flex; gap: 6px; margin-left: auto; } /* ---- Modal tabs (used inside .mf-body; flush to body edges) ---- */ .mf-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-2); margin: -4px -24px 16px; } .mf-tabs button { background: transparent; border: none; padding: 12px 24px; font-size: 13px; font-weight: 500; color: var(--ink-3); border-bottom: 2px solid transparent; font-family: inherit; cursor: pointer; transition: color .12s, border-color .12s; } .mf-tabs button:hover { color: var(--ink); } .mf-tabs button.on { color: var(--ink); border-color: var(--backer); font-weight: 600; } .mf-tab-panel { display: none; } .mf-tab-panel.on { display: block; } /* ---- Form controls ---- */ .field { display: grid; gap: 6px; margin-bottom: 16px; } .field > label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; } /* Pull the required-asterisk close to the label text so it reads as "Country*", not as a detached bullet. The 6px flex gap is preserved for other siblings (like the .opt "optional" tag). */ .field > label .req { color: var(--red); font-weight: 700; margin-left: -4px; } .field > label .opt { color: var(--ink-4); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; } .field .hint { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; } /* Inline validation state for .field-wrapped controls. Used when client-side validation runs against a control that the browser cannot natively flag (e.g. a Choices.js-wrapped is hidden). */ .field.has-error > input, .field.has-error > textarea, .field.has-error > select, .field.has-error .choices__inner { border-color: var(--red); } .field.has-error > input:focus, .field.has-error > textarea:focus, .field.has-error > select:focus { box-shadow: 0 0 0 3px rgba(169, 68, 46, .12); } .field-error-msg { font-size: 11.5px; color: var(--red); margin-top: 2px; } .field input[type=text], .field input[type=email], .field input[type=url], .field input[type=number], .field input[type=password], .field input[type=search], .field textarea, .field select { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 13px; /* Explicit line-height (not `normal`) locks the control's box height so a browser autofill font swap can't recompute it and nudge the field on click. `normal` is font-dependent, which is the real cause of the jump. */ line-height: 1.4; outline: none; transition: border-color .12s, box-shadow .12s; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--backer); box-shadow: 0 0 0 3px rgba(45, 107, 102, .12); } /* Keep autofilled fields on the surface colour instead of the browser's pale-blue autofill tint; the big inset shadow masks the native fill. */ .field input:-webkit-autofill, .field textarea:-webkit-autofill, .field select:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; caret-color: var(--ink); } .field input:-webkit-autofill:focus, .field textarea:-webkit-autofill:focus, .field select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 3px rgba(45, 107, 102, .12), 0 0 0 1000px var(--surface) inset; } .field input:disabled, .field input[readonly], .field textarea:disabled, .field textarea[readonly], .field select:disabled { background: var(--surface-2); color: var(--ink-3); border-color: var(--line-2); cursor: not-allowed; } .field textarea { resize: vertical; min-height: 92px; line-height: 1.55; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .char-meter { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-3); margin-top: 4px; } .char-meter .bar { flex: 1; margin: 0 10px; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; } .char-meter .bar i { display: block; height: 100%; background: var(--backer); border-radius: 3px; transition: width .2s; width: 0; } .ghost-alert { display: flex; gap: 10px; padding: 11px 14px; background: var(--backer-softer); border: 1px solid var(--backer-soft); border-radius: 10px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 14px; } .ghost-alert .ico { color: var(--backer); flex-shrink: 0; margin-top: 2px; } .ghost-alert b { color: var(--ink); } /* ---- Chip pickers (replace Choices.js multi-selects) ---- */ .chips-field .chips-box { border: 1px solid var(--line); border-radius: 10px; padding: 9px; display: flex; flex-wrap: wrap; gap: 6px; background: var(--surface); } .chips-field .chips-group-label { width: 100%; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 2px; } .chips-field .chips-group-label:first-child { margin-top: 0; } .chipx { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 500; border: 1px solid var(--line-2); cursor: pointer; transition: background .1s, border-color .1s, color .1s; user-select: none; } .chipx:hover { background: var(--backer-soft); border-color: var(--backer-soft); color: var(--backer-ink); } /* Selected state - raised specificity (two classes on the same element) so tier variants or parent-scoped overrides can't accidentally revert the teal fill. */ .chipx.chipx.on { background: var(--backer); color: #fff; border-color: var(--backer); } .chipx.chipx.on:hover { background: var(--backer-ink); border-color: var(--backer-ink); } .chipx .ico { font-size: 10px; } .chipx.tier-region { font-weight: 600; } /* ---- Geography picker: collapsible accordion + search + selected summary ---- */ .geo-picker { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; } .geo-summary { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); } .geo-summary-empty { font-size: 12px; color: var(--ink-4); font-style: italic; align-self: center; } .geo-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-2); background: var(--surface); } .geo-search i { color: var(--ink-4); font-size: 12px; } .geo-search input[type=search] { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--ink); outline: none; padding: 2px 0; } .geo-search input[type=search]::placeholder { color: var(--ink-4); } .geo-tree { max-height: 320px; overflow-y: auto; } .geo-region { border-bottom: 1px solid var(--line-2); } .geo-region:last-child { border-bottom: none; } .geo-region-header { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: none; background: transparent; color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; transition: background .12s; } .geo-region-header:hover { background: var(--surface-2); } .geo-region-header .caret { color: var(--ink-4); font-size: 10px; transition: transform .15s; } .geo-region.open .geo-region-header .caret { transform: rotate(90deg); } .geo-region-header .name { flex: 1; } .geo-region-header .count { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--ink-3); } .geo-region-header.has-selection .count { color: var(--backer-ink); background: var(--backer-soft); padding: 2px 7px; border-radius: 4px; } .geo-region-body { display: none; padding: 0 14px 12px 32px; background: var(--surface-2); } .geo-region.open .geo-region-body { display: block; } .geo-allrow { padding: 8px 0 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 10px; } .geo-sub { margin-bottom: 10px; } .geo-sub:last-child { margin-bottom: 0; } .geo-sub-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; } .geo-sub-chips { display: flex; flex-wrap: wrap; gap: 5px; } /* ---- Invite-modal-specific ---- */ .domain-box { background: var(--surface-2); border: 1px dashed var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; } .domain-box .lbl { font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; } .domain-box .val { font-family: var(--font-mono); font-size: 14px; color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: 8px; } .domain-box .caption { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; } .domain-box .caption code { font-family: var(--font-mono); font-size: 11px; background: var(--surface); padding: 1px 6px; border-radius: 4px; } .invite-list { display: flex; flex-direction: column; gap: 6px; } .invite-row { display: flex; align-items: center; gap: 8px; } .invite-row input[type=email] { flex: 0 1 400px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 13px; outline: none; transition: border-color .12s, box-shadow .12s; } .invite-row input[type=email]:focus { border-color: var(--backer); box-shadow: 0 0 0 3px rgba(45, 107, 102, .12); } .invite-row .rm { width: 34px; height: 34px; border-radius: 8px; border: none; background: transparent; color: var(--ink-4); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; transition: background .12s, color .12s; } .invite-row .rm i { display: block; line-height: 1; } .invite-row .rm:hover { color: var(--red); background: var(--red-soft); } .invite-row:only-child .rm { display: none; } .invite-add { margin-top: 8px; justify-self: start; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px dashed var(--line); padding: 7px 12px; border-radius: 8px; font-size: 12px; color: var(--ink-3); font-weight: 500; cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .invite-add:hover { color: var(--backer); border-color: var(--backer-soft); background: var(--backer-softer); } /* The invite modal's Pending tab (in an .invite-list): one row per open team invitation. */ .invite-pending-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); } .invite-pending-row .who { flex: 1; min-width: 0; } .invite-pending-row .email { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .invite-pending-row .meta { font-size: 11.5px; color: var(--ink-3); } .invite-pending-row .acts { display: flex; gap: 4px; flex-shrink: 0; } /* ===================================================================== 10. FORM WIZARD (.pf-*) Reusable multi-step form shell. Canonical reference: project_form.html. Any future wizard (saved-search create, investor onboarding, broker- agreement draft) should adopt this shell without adding new CSS. Derived from references/mocks/project_form_mockup.html. ===================================================================== */ /* --- Wizard frame ---------------------------------------------------- */ .pf-frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); } /* No overflow clip on the frame: it cut off any dropdown near a step's foot. Its tinted bands (the stepper on top, the foot below) round their own corners instead, one pixel inside the frame's border. */ .pf-frame { --pf-inner-radius: calc(var(--radius) - 1px); } .pf-frame > .pf-stepper, .pf-stepper > .pf-step:first-child { border-top-left-radius: var(--pf-inner-radius); } .pf-frame > .pf-stepper, .pf-stepper > .pf-step:last-child { border-top-right-radius: var(--pf-inner-radius); } .pf-frame > .pf-foot { border-radius: 0 0 var(--pf-inner-radius) var(--pf-inner-radius); } /* --- Stepper rail ---------------------------------------------------- */ .pf-stepper { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; background: var(--surface-2); border-bottom: 1px solid var(--line); position: relative; margin: 0; padding: 0; list-style: none; } .pf-step { display: flex; align-items: center; gap: 12px; padding: 18px; border: none; background: transparent; text-align: left; font-family: inherit; cursor: pointer; color: var(--ink-3); position: relative; transition: background .12s, color .12s; border-right: 1px solid var(--line); min-width: 0; } .pf-step:last-child { border-right: none; } .pf-step:hover:not(.locked):not(:disabled) { background: var(--surface); color: var(--ink-2); } .pf-step.locked, .pf-step:disabled { cursor: not-allowed; opacity: .55; } .pf-step-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink-3); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0; transition: background .12s, color .12s, border-color .12s; } .pf-step-text { display: grid; line-height: 1.2; min-width: 0; } .pf-step-eyebrow { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); } .pf-step-label { font-size: 13px; font-weight: 500; color: inherit; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-step.done .pf-step-num { background: var(--backer-soft); border-color: var(--backer-soft); color: var(--backer); /* SVG check painted as a background image. ::before with FA glyph was unreliable because the inner in the markup is a grid item that competes for the centred position; SVG bg-image is independent of font-loading state. */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; } .pf-step.done .pf-step-num span { visibility: hidden; } [data-bs-theme="dark"] .pf-step.done .pf-step-num { background-image: url("data:image/svg+xml;utf8,"); } .pf-step.done { color: var(--ink-2); } .pf-step.active { background: var(--surface); color: var(--ink); } .pf-step.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--backer); } .pf-step.active .pf-step-num { background: var(--backer); border-color: var(--backer); color: #fff; } .pf-step.active .pf-step-eyebrow { color: var(--backer); } /* --- Panel layout ---------------------------------------------------- */ .pf-panel { padding: 28px 32px 8px; } .pf-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; } .pf-panel-head .ph-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--backer); margin-bottom: 8px; } .pf-panel-head h2 { font-family: var(--font-sans); font-weight: 500; font-size: 24px; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 6px; line-height: 1.15; } .pf-panel-head .ph-sub { font-size: 13.5px; color: var(--ink-3); max-width: 560px; margin: 0; line-height: 1.5; } .pf-progress-mini { flex-shrink: 0; text-align: right; display: grid; gap: 4px; align-content: start; } .pf-progress-mini .pm-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .pf-progress-mini .pm-count b { color: var(--ink); font-weight: 600; } .pf-progress-mini .pm-bar { width: 160px; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; } .pf-progress-mini .pm-bar i { display: block; height: 100%; background: var(--backer); border-radius: 2px; transition: width .2s; } /* --- Section grouping inside a panel --------------------------------- */ .pf-section { margin-bottom: 26px; } .pf-section + .pf-section { padding-top: 26px; border-top: 1px solid var(--line-2); } .pf-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .pf-section-head h3 { font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0; } .pf-section-head .pf-section-hint { font-size: 12px; color: var(--ink-4); } /* --- Form grid (12-col) ---------------------------------------------- */ .pf-grid { display: grid; gap: 18px 16px; grid-template-columns: repeat(12, 1fr); } /* Align field cells to the top of their grid row so a field with an appended validation message doesn't stretch its row-mates to the same height. Only applies to .pf-field cells - bare .pf-col-* cells (e.g. the Step 2 lookup button which uses align-items:flex-end inside) keep their default stretch. */ .pf-grid > .pf-field { align-self: start; } .pf-col-12 { grid-column: span 12; } .pf-col-9 { grid-column: span 9; } .pf-col-8 { grid-column: span 8; } .pf-col-6 { grid-column: span 6; } .pf-col-5 { grid-column: span 5; } .pf-col-4 { grid-column: span 4; } .pf-col-3 { grid-column: span 3; } /* --- Field ---------------------------------------------------------- */ .pf-field { display: grid; gap: 6px; min-width: 0; } .pf-field > label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; line-height: 1.3; margin: 0; } .pf-field > label .req { color: var(--red); font-weight: 700; /* Negate the parent label's flex gap so the asterisk sits tight to the label text. */ margin-left: -6px; } .pf-section-head h3 .req { color: var(--red); font-weight: 700; margin-left: 2px; } .pf-field > label .opt { color: var(--ink-4); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; /* Same trick - keep the "(optional)" hint glued to the label text rather than floating in dead space. */ margin-left: -2px; } /* Generic info trigger - used inside labels and in the timeline toolbar. Bootstrap modal triggers via data-bs-toggle. */ .info-i { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); font-size: 8px; line-height: 1; color: var(--ink-4); cursor: pointer; background: var(--surface); transition: color .12s, border-color .12s; text-transform: none; letter-spacing: 0; font-family: var(--font-mono); font-weight: 700; user-select: none; vertical-align: middle; } .info-i:hover { background: var(--backer); border-color: var(--backer); color: #fff; } .info-i.open { color: #fff; background: var(--backer); border-color: var(--backer); transform: scale(1.05); } .pf-field input[type=text], .pf-field input[type=email], .pf-field input[type=url], .pf-field input[type=number], .pf-field input[type=date], .pf-field input[type=search], .pf-field input[type=tel], .pf-field textarea, .pf-field select { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 13px; outline: none; transition: border-color .12s, box-shadow .12s; -webkit-appearance: none; appearance: none; } .pf-field select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px; padding-right: 30px; } .pf-field input:focus, .pf-field textarea:focus, .pf-field select:focus { border-color: var(--backer); box-shadow: 0 0 0 3px rgba(45,107,102,.12); } .pf-field input:disabled, .pf-field input[readonly], .pf-field textarea:disabled, .pf-field textarea[readonly], .pf-field select:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; } .pf-field textarea { resize: vertical; min-height: 96px; line-height: 1.55; } .pf-field .hint { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; } .pf-field .hint a { color: var(--backer); text-decoration: none; } .pf-field .hint a:hover { text-decoration: underline; } .pf-field .meter { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); } .pf-field .invalid-feedback, .pf-field .ajax-error { font-size: 11.5px; color: var(--red); margin-top: 2px; line-height: 1.4; } .pf-field input.is-invalid, .pf-field textarea.is-invalid, .pf-field select.is-invalid { border-color: var(--red); } /* flatpickr altInput puts .is-invalid on the hidden original , so paint the visible alt field (same .pf-field) red too - keeps the advisor-request form's start/completion date validation legible after the flatpickr upgrade. */ .pf-field:has(input.is-invalid) input.flatpickr-input { border-color: var(--red); } /* Input-group inputs hide their own border (`.pf-ig > input { border: none !important }`). Mirror the invalid state onto the `.pf-ig` wrapper so the red border still shows. */ .pf-field:has(input.is-invalid) > .pf-ig, .pf-field:has(select.is-invalid) > .pf-ig { border-color: var(--red); box-shadow: 0 0 0 3px rgba(169,68,46,.12); } /* Make ajax/validation feedback always render when a sibling control is invalid. */ .pf-field .invalid-feedback, .pf-field .ajax-error { display: block; } /* --- Choices.js inside .pf-field ------------------------------------- */ /* .pf-field styles its native inputs directly. When Choices.js wraps a inside .choices__inner that would otherwise inherit the same border/padding, producing a nested "field inside a field" look. Paint the wrapper to match a .pf-field input and strip the inner search input back to plain text. */ .pf-field .choices { margin-bottom: 0; min-width: 0; } .pf-field .choices__inner { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 5px 26px 1px 8px; min-height: 36px; font-size: 13px; font-weight: 400; line-height: 1.35; } .pf-field .choices.is-focused .choices__inner, .pf-field .choices.is-open .choices__inner { border-color: var(--backer); box-shadow: 0 0 0 3px rgba(45, 107, 102, .12); } .pf-field .choices__list--multiple .choices__item, .pf-field .choices__list--multiple .choices__item.is-highlighted { background-color: var(--line-2); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 3px 10px 3px 9px; font-size: 12px; font-weight: 500; margin: 2px 4px 2px 0; display: inline-flex; align-items: center; gap: 6px; } .pf-field .choices__list--multiple .choices__item::before { content: "\f00c"; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; color: var(--green); font-size: 10px; line-height: 1; } .pf-field .choices__list--multiple .choices__item .choices__button { /* Force a near-black X in light mode (the chip background is light-grey, so a pale/white remove icon is unreadable). Explicit image, not just opacity. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cg fill='%231a1a1a' fill-rule='evenodd'%3E%3Cpath d='M2.592.044l18.364 18.364-2.548 2.548L.044 2.592z'/%3E%3Cpath d='M0 18.364L18.364 0l2.548 2.548L2.548 20.912z'/%3E%3C/g%3E%3C/svg%3E"); border-left-color: rgba(0, 0, 0, .15); opacity: .75; margin: 0 -2px 0 4px; } [data-bs-theme="dark"] .pf-field .choices__list--multiple .choices__item .choices__button { /* Dark chip -> light X. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cg fill='%23e8eced' fill-rule='evenodd'%3E%3Cpath d='M2.592.044l18.364 18.364-2.548 2.548L.044 2.592z'/%3E%3Cpath d='M0 18.364L18.364 0l2.548 2.548L2.548 20.912z'/%3E%3C/g%3E%3C/svg%3E"); border-left-color: rgba(255, 255, 255, .18); opacity: .65; } .pf-field .choices__list--multiple .choices__item .choices__button:hover { opacity: 1; } /* Bump specificity to (0,0,2,1) so this override beats the generic `.pf-field input[type=search]` rule above - Choices.js renders the internal filter input as ``, which would otherwise re-acquire the bordered field chrome. */ .pf-field input.choices__input { background: transparent; border: 0; border-radius: 0; padding: 2px 0; margin: 0; min-height: 0; box-shadow: none; font-size: 13px; color: var(--ink); width: auto; } .pf-field input.choices__input:focus { box-shadow: none; border: 0; } .pf-field .choices[data-type*=select-one]::after { right: 11px; } .pf-field .choices__list--dropdown { border-color: var(--line); } /* --- Choices.js inside .field (canonical modal form control) ----------- */ /* Match a Choices-wrapped , so we paint the tick as a background image instead. */ background-image: url("data:image/svg+xml;utf8,"); } .pf-doc-row input[type=checkbox]:checked + span { color: var(--ink); font-weight: 500; } /* --- Map frame (Mapbox renders inside) ------------------------------ */ .pf-map { height: 320px; border-radius: 10px; border: 1px solid var(--line); background: var(--backer-softer); overflow: hidden; position: relative; } /* Custom Mapbox marker - applied to a div passed to mapboxgl.Marker via { element }. Mapbox positions the parent via translate; we just paint the dot + pulse. */ .pf-map-pin { width: 14px; height: 14px; border-radius: 50%; background: var(--backer); border: 3px solid var(--surface); box-shadow: 0 0 0 0 rgba(45,107,102,.55); animation: pfPing 2.6s ease-out infinite; cursor: pointer; } @keyframes pfPing { 0% { box-shadow: 0 0 0 0 rgba(45,107,102,.55); } 70% { box-shadow: 0 0 0 16px rgba(45,107,102,0); } 100% { box-shadow: 0 0 0 0 rgba(45,107,102,0); } } /* --- Geocode lookup status (Step 2) --------------------------------- */ .pf-geo-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; } .pf-geo-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex-shrink: 0; } .pf-geo-status.ok { color: var(--green); } .pf-geo-status.ok .dot { background: var(--green); } .pf-geo-status.warn { color: var(--amber); } .pf-geo-status.warn .dot { background: var(--amber); } .pf-geo-status.error { color: var(--red); } .pf-geo-status.error .dot { background: var(--red); } .pf-geo-status.busy { color: var(--ink-2); } .pf-geo-status.busy .dot { background: var(--amber); animation: pfSavingPulse 1s ease-in-out infinite; } /* --- Financing structure table --------------------------------------- */ .pf-fs-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); } .pf-fs-head, .pf-fs-row { display: grid; grid-template-columns: 2fr 2fr 2fr 80px 36px; gap: 10px; align-items: center; padding: 10px 14px; } .pf-fs-head { background: var(--surface-2); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); } .pf-fs-head .num { text-align: right; } .pf-fs-row { border-bottom: 1px solid var(--line-2); } .pf-fs-row:last-of-type { border-bottom: none; } .pf-fs-row select, .pf-fs-row input[type=text], .pf-fs-row input[type=number] { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: 12.5px; background: var(--surface); color: var(--ink); outline: none; } .pf-fs-row select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; background-size: 11px 11px; padding-right: 26px; -webkit-appearance: none; appearance: none; } .pf-fs-row select:focus, .pf-fs-row input:focus { border-color: var(--backer); box-shadow: 0 0 0 3px rgba(45,107,102,.12); } .pf-fs-row .pf-ig { background: var(--surface); } .pf-fs-row .pf-ig > input { padding: 7px 10px; font-size: 12.5px; } .pf-fs-row .pf-ig .pf-ig-addon { padding: 0 9px; min-width: 44px; font-size: 11px; } /* Higher specificity than `.pf-fs-row input[type=text]` above so the shaded read-only field treatment actually wins over the generic input baseline. */ .pf-fs-row input.pf-pct, .pf-fs-row input[type=text].pf-pct { text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); background: var(--surface-2); border: 1px dashed var(--line); border-radius: 6px; padding: 7px 8px; font-variant-numeric: tabular-nums; cursor: not-allowed; } .pf-fs-row input.pf-pct:focus { box-shadow: none; border-color: var(--line); } /* Multi-party financing: club-eligible inline checkbox sitting in a .pf-field (the control area matches the 36px height of sibling inputs/selects). */ .pf-check-inline { display: flex; align-items: center; gap: 8px; height: 36px; font-size: 13px; color: var(--ink); font-weight: 500; cursor: pointer; } .pf-check-inline input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--backer); cursor: pointer; flex: none; } /* Financing-card second row: tenor (+ conditional years/range) + syndication, with the stack-% pinned bottom-right. */ .pf-fs-row2 { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 14px; } .pf-fs-row2 > .pf-field { flex: 1 1 160px; min-width: 0; margin: 0; } .pf-fs-pct { margin-left: auto; align-self: flex-end; padding-bottom: 9px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; } .pf-fs-pct [data-fs-pct] { font-family: var(--font-mono); color: var(--ink-2); font-weight: 500; } .pf-fs-rm { width: 30px; height: 30px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--ink-4); cursor: pointer; display: inline-grid; place-items: center; font-size: 11px; } .pf-fs-rm:hover { color: var(--red); background: var(--red-soft); } .pf-fs-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--surface-2); border-top: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3); gap: 16px; flex-wrap: wrap; } .pf-fs-foot .totals { display: flex; gap: 22px; font-family: var(--font-mono); } .pf-fs-foot .totals b { color: var(--ink); font-weight: 600; } /* Stack-total value reads in body ink (not the surrounding tertiary grey) but stays unbold. */ .pf-fs-foot .totals [data-fs-total] { color: var(--ink); } .pf-fs-foot .totals .alloc.green { color: var(--green); } .pf-fs-foot .totals .alloc.amber { color: var(--amber); } .pf-add-row { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px dashed var(--line); border-radius: 8px; background: transparent; color: var(--ink-3); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .pf-add-row:hover { color: var(--backer); border-color: var(--backer-soft); background: var(--backer-softer); } /* --- Stakeholder cards ----------------------------------------------- */ .pf-sh-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 12px; color: var(--ink-3); } .pf-sh-count b { color: var(--ink); font-weight: 600; } .pf-sh-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 12px; position: relative; transition: border-color .12s, box-shadow .12s; } .pf-sh-card:hover { border-color: var(--ink-4); } /* An open dropdown overlays the cards below its own. */ .pf-sh-card:has(.choices.is-open) { z-index: 20; } .pf-sh-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .pf-sh-num { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .pf-sh-chip { width: 22px; height: 22px; border-radius: 6px; background: var(--backer-soft); color: var(--backer); display: grid; place-items: center; font-size: 10px; font-weight: 700; } .pf-sh-rm { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--ink-4); cursor: pointer; display: inline-grid; place-items: center; font-size: 11px; } .pf-sh-rm:hover { color: var(--red); background: var(--red-soft); } /* --- Timeline toolbar ------------------------------------------------ */ .pf-timeline-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .pf-toolbar-spacer { flex: 1; } .pf-toolbar-hint { font-size: 11.5px; color: var(--ink-4); } .pf-segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; } .pf-segmented button { border: none; background: transparent; padding: 5px 11px; border-radius: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); font-family: inherit; cursor: pointer; } .pf-segmented button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); } .pf-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); cursor: pointer; user-select: none; margin: 0; } /* The checkbox is hidden from sight, not from the keyboard: it still takes focus, and the track shows the ring. */ .pf-switch { position: relative; } .pf-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .pf-switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(45, 107, 102, .25); } .pf-switch .track { width: 30px; height: 17px; background: var(--line); border-radius: 999px; position: relative; transition: background .15s; flex-shrink: 0; } .pf-switch .track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: left .15s; } .pf-switch input:checked + .track { background: var(--backer); } .pf-switch input:checked + .track::after { left: 15px; } /* --- Gantt frame (DHTMLX paints inside) ------------------------------ */ .pf-gantt { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); } /* Locked milestone title (Financial Close) - visibly read-only chip-style. */ .pf-field input.fc-locked, input.fc-locked { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; border-color: var(--line-2); font-style: italic; } /* --- Milestone colour-swatch picker (add / edit modal) -------------- */ .pf-colour-row { display: inline-flex; gap: 8px; flex-wrap: wrap; } .pf-colour-swatch { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; background: var(--backer); cursor: pointer; padding: 0; transition: transform .1s, border-color .12s, box-shadow .12s; color: transparent; } .pf-colour-swatch.amber { background: var(--amber); } .pf-colour-swatch.plum { background: var(--plum); } .pf-colour-swatch.green { background: var(--green); } .pf-colour-swatch input[type=radio] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .pf-colour-swatch.on { border-color: var(--surface); box-shadow: 0 0 0 2px var(--backer), 0 1px 2px rgba(0,0,0,.1); } .pf-colour-swatch:hover { transform: translateY(-1px); } /* --- Review summary -------------------------------------------------- */ .pf-review-banner { display: flex; align-items: flex-start; gap: 12px; background: var(--backer-softer); border: 1px solid var(--backer-soft); border-radius: 10px; padding: 14px 16px; margin-bottom: 22px; } .pf-review-banner .ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: var(--backer-soft); color: var(--backer-ink); display: grid; place-items: center; font-size: 14px; } .pf-review-banner h4 { margin: 0 0 2px; font-size: 14px; color: var(--ink); font-weight: 600; } .pf-review-banner p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; } .pf-review-banner.warn { background: var(--amber-soft); border-color: var(--amber-soft); } .pf-review-banner.warn .ico { background: var(--amber-soft); color: var(--amber); } /* What still blocks publishing, each with a link to its step (api.project_preview). */ .pf-review-problems { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; } .pf-review-problems a { font-weight: 600; color: var(--ink); text-decoration: underline; margin-right: 4px; } .pf-kv-list { display: grid; gap: 10px; } .pf-kv { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: baseline; font-size: 13px; } /* Widen the label column when the row keys are content (milestone titles in the review step's dated list) rather than short field names. */ .pf-kv-list.wide-k .pf-kv { grid-template-columns: 220px 1fr; } .pf-kv .k { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); } .pf-kv .v { color: var(--ink); font-weight: 500; word-break: break-word; } .pf-kv .v.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* --- Footer / actions ------------------------------------------------ */ .pf-foot { display: flex; align-items: center; gap: 12px; padding: 16px 32px; background: var(--surface-2); border-top: 1px solid var(--line); } .pf-foot .pf-save-status { flex: 1; text-align: center; font-size: 11.5px; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-mono); min-height: 16px; } .pf-foot .pf-save-status .ok { width: 7px; height: 7px; background: var(--green); border-radius: 50%; display: inline-block; } .pf-foot .pf-save-status.saving .ok { background: var(--amber); animation: pfSavingPulse 1s ease-in-out infinite; } .pf-foot .pf-save-status.error { color: var(--red); } .pf-foot .pf-save-status.error .ok { background: var(--red); } .pf-foot .pf-save-status.notice { color: var(--amber); } .pf-foot .pf-save-status.notice .ok { background: var(--amber); } @keyframes pfSavingPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } } .pf-foot .pf-actions { display: flex; gap: 8px; flex-wrap: wrap; } .btn-pf-prev, .btn-pf-next, .btn-pf-draft, .btn-pf-submit { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s, transform .1s; line-height: 1.2; } .btn-pf-prev { background: transparent; color: var(--ink-2); border-color: var(--line); } .btn-pf-prev:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-3); } .btn-pf-prev:disabled { opacity: .4; cursor: not-allowed; } .btn-pf-draft { background: var(--surface); color: var(--ink-2); border-color: var(--line); } .btn-pf-draft:hover { border-color: var(--ink-3); color: var(--ink); } .btn-pf-next, .btn-pf-submit { background: var(--backer); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 8px 20px -12px rgba(45,107,102,.6); } .btn-pf-next:hover, .btn-pf-submit:hover { background: var(--backer-ink); transform: translateY(-1px); } .btn-pf-next:disabled, .btn-pf-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* --- Tab show/hide --------------------------------------------------- */ .pf-tab { display: none; } .pf-tab.show { display: block; } /* ===================================================================== 11. FIELD INFO POPOVER (.fi-pop) Click the (i) glyph to open an anchored popover next to the field. Replaces the previous Bootstrap modal pattern for field help. Shared header and footer across all variants. Footer is empty by design. Generic chrome - reusable on any form, not just the project wizard. ===================================================================== */ .fi-pop { position: fixed; top: 50%; left: 50%; width: 500px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 56px -16px rgba(15, 22, 20, .25), 0 6px 16px -8px rgba(15, 22, 20, .14), 0 0 0 1px rgba(0, 0, 0, .02); z-index: 1050; opacity: 0; transform: translate(-50%, -50%) scale(.985); pointer-events: none; transition: opacity .16s ease, transform .18s cubic-bezier(.2, .7, .2, 1); overflow: hidden; } .fi-pop.open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } /* Read-only field-guide gallery (admin Reference > Field guides). Renders every .fi-pop popover inline as a static card so an admin can read the live in-form help copy without triggering each one. Overrides the fixed-position, hidden-until-open chrome; the close button + empty footer are dropped. */ .fi-guide-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; } .fi-guide-gallery .fi-pop { position: static; width: 100%; max-width: 100%; max-height: none; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; transition: none; } .fi-guide-gallery .fi-pop-close, .fi-guide-gallery .fi-pop-foot { display: none; } /* Header (shared by all variants) */ .fi-pop-head { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(180deg, var(--backer-softer) 0%, var(--surface) 100%); border-bottom: 1px solid var(--line-2); } .fi-pop-head .ico { width: 36px; height: 36px; background: var(--backer); color: #fff; border-radius: 9px; display: grid; place-items: center; font-size: 13px; box-shadow: 0 4px 10px -4px rgba(45, 107, 102, .55); } .fi-pop-head .titles { min-width: 0; } .fi-pop-head .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--backer); margin-bottom: 1px; } .fi-pop-head h4 { font-family: var(--font-sans); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); margin: 0; line-height: 1.25; } /* Close button. Always on the right edge of the header. Primary dismissal control alongside Esc and click-outside. */ .fi-pop-close { width: 26px; height: 26px; background: transparent; border: 1px solid var(--line); color: var(--ink-3); border-radius: 6px; cursor: pointer; display: grid; place-items: center; font-size: 11px; transition: background .12s, color .12s, border-color .12s; } .fi-pop-close:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); } .fi-pop-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--backer-softer); } /* Body. Asymmetric padding because the footer below provides bottom framing. Scrolls internally when content exceeds the popover's max-height. */ .fi-pop-body { padding: 14px 16px 12px; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .fi-pop-head { flex: 0 0 auto; } .fi-pop-foot { flex: 0 0 auto; } .fi-pop-summary { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0 0 12px; } .fi-pop-summary b { color: var(--ink); font-weight: 600; } /* Last-child rule lets every body shape sit cleanly above the footer */ .fi-pop-body > *:last-child { margin-bottom: 0; } /* Variant A and B body block */ .fi-deflist { display: grid; gap: 8px; margin-bottom: 0; } .fi-def { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 10px; background: var(--surface-2); border-radius: 7px; border-left: 3px solid var(--backer); align-items: start; font-size: 12.5px; } .fi-def.amber { border-left-color: var(--amber); } .fi-def.plum { border-left-color: var(--plum); } .fi-def.green { border-left-color: var(--green); } .fi-def .term { font-weight: 600; color: var(--ink); font-size: 12px; } .fi-def .desc { color: var(--ink-2); line-height: 1.5; } /* Variant B chart block. Spaced from the deflist above. */ .fi-chart { margin-top: 12px; padding: 12px 12px 10px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; } .fi-chart-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .fi-chart-row { display: grid; grid-template-columns: 70px 1fr 60px; align-items: center; gap: 10px; font-size: 10.5px; color: var(--ink-3); margin-bottom: 6px; } .fi-chart-row:last-child { margin-bottom: 0; } .fi-chart-row .l { font-weight: 600; color: var(--ink-2); font-size: 11.5px; } .fi-chart-row .r { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; font-size: 11px; color: var(--ink-3); } .fi-chart-row .bar { height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; position: relative; } .fi-chart-row .bar::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: var(--w, 30%); background: linear-gradient(90deg, var(--backer) 0%, var(--amber) 100%); border-radius: 3px; } /* Variant D step list */ .fi-steps { display: grid; gap: 0; } .fi-step { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px dashed var(--line-2); font-size: 12.5px; } .fi-step:first-child { padding-top: 0; } .fi-step:last-child { padding-bottom: 0; border-bottom: 0; } .fi-step .num { width: 18px; height: 18px; background: var(--backer-softer); color: var(--backer); border-radius: 5px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 10px; } .fi-step .body { color: var(--ink-2); line-height: 1.5; } .fi-step .body b { color: var(--ink); font-weight: 600; } /* Footer. Empty by design: a visual frame, no children. */ .fi-pop-foot { height: 38px; padding: 10px 16px; background: var(--surface-2); border-top: 1px solid var(--line-2); } /* Backdrop. Dims the page like a standard modal. */ .fi-backdrop { position: fixed; inset: 0; background: rgba(15, 22, 20, .45); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .fi-backdrop.open { opacity: 1; pointer-events: auto; } @media (max-width: 760px) { .fi-pop { width: calc(100vw - 32px); max-width: 380px; } } /* ===================================================================== 12. INFORMATION-CARD INTERNALS - labels, kv rows, collapsibles Used by: project_detail, advisor_request_detail, *_shortlist, *_summary ===================================================================== */ /* Uppercase micro-label primitive. Replaces the per-template `cap()` / `kv_cell()` macros and the inline-styled label divs in detail pages. */ .cap { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; } /* Stacked label+value row with a bottom divider. Used in the sticky right-rail summary cards on investor_summary / advisor_request_summary. */ .kv-row { padding: 14px 0; border-bottom: 1px solid var(--line-2); } .kv-row:last-child { border-bottom: 0; } /* 2-up variant - Service+Instructed-by, Sector+Capacity, etc. */ .kv-row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .kv-row .v { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; } .kv-row .v.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .kv-row .v.unset { color: var(--ink-4); } .kv-row a.v { color: var(--ink); text-decoration: none; transition: color .12s; } .kv-row a.v:hover { color: var(--backer); text-decoration: none; } /* Sticky right-rail card. Disabled at the lg breakpoint so it stops floating once the layout collapses to a single column. */ .kv-card-sticky { position: sticky; top: 18px; } @media (max-width: 991.98px) { .kv-card-sticky { position: static; } } /* Collapsible
      block - chevron animation + hides the native marker. Replaces the duplicated #ar-summary-page / #inv-summary-page page-scoped chevron rules. */ .kv-collapse > summary { list-style: none; cursor: pointer; } .kv-collapse > summary::-webkit-details-marker { display: none; } .kv-collapse > summary.cap { margin-bottom: 0; display: flex; align-items: center; gap: 6px; } .kv-collapse > summary .fa-chevron-right { transition: transform .15s ease; } .kv-collapse[open] > summary .fa-chevron-right { transform: rotate(90deg); } /* ===================================================================== 13. MAPBOX POPUP (.ib-map-pop-*) --------------------------------------------------------------------- Repaints the default mapbox-gl-js popup chrome to match backer.css surface / line / ink tokens. Markup contract (set by project-clusters.js and project-map.js): a `.ib-map-pop` flex column carrying a `.title`, optional `.sub` / `.meta` lines, and a trailing `.link` View action. ===================================================================== */ .mapboxgl-popup.ib-map-pop-wrap .mapboxgl-popup-content { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 12px 14px 11px; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4; } .mapboxgl-popup.ib-map-pop-wrap.mapboxgl-popup-anchor-top .mapboxgl-popup-tip, .mapboxgl-popup.ib-map-pop-wrap.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip, .mapboxgl-popup.ib-map-pop-wrap.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { border-bottom-color: var(--surface); } .mapboxgl-popup.ib-map-pop-wrap.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip, .mapboxgl-popup.ib-map-pop-wrap.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip, .mapboxgl-popup.ib-map-pop-wrap.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { border-top-color: var(--surface); } .mapboxgl-popup.ib-map-pop-wrap.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--surface); } .mapboxgl-popup.ib-map-pop-wrap.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--surface); } .mapboxgl-popup.ib-map-pop-wrap .mapboxgl-popup-close-button { width: 22px; height: 22px; display: grid; place-items: center; top: 4px; right: 4px; padding: 0; color: var(--ink-3); background: transparent; border: none; border-radius: 6px; font-size: 16px; line-height: 1; cursor: pointer; transition: background .12s, color .12s; } .mapboxgl-popup.ib-map-pop-wrap .mapboxgl-popup-close-button:hover { background: var(--surface-2); color: var(--ink); } .ib-map-pop { display: flex; flex-direction: column; gap: 4px; padding-right: 16px; } .ib-map-pop-title { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; line-height: 1.3; } .ib-map-pop-sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; text-transform: capitalize; } .ib-map-pop-meta { font-size: 11px; color: var(--ink-3); text-transform: capitalize; letter-spacing: .01em; } .ib-map-pop-link { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--backer); text-decoration: none; transition: color .12s; } .ib-map-pop-link i { font-size: 10px; transition: transform .15s; } .ib-map-pop-link:hover { color: var(--backer-ink); } .ib-map-pop-link:hover i { transform: translateX(2px); } /* ===================================================================== 14. PAGE: HOMEPAGE Ported from home_revised.html. Classes renamed: .nav -> .site-nav (Section 7) .nav-* -> .site-nav-* (Section 7) .wrap -> .container-backer (Section 6) .role-tabs -> .process-tabs (homepage process section) Pill-shape buttons scoped to hero/router/final CTAs. ===================================================================== */ /* ---- Hero ---- */ .hero { padding: 48px 0 28px; position: relative; } .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } .hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(44px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -0.02em; margin: 18px 0 22px; color: var(--ink); text-wrap: balance; } .hero-sub { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 560px; margin-bottom: 28px; } .hero-ctas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 34px; } .hero-ctas .btn { border-radius: 999px; padding: 14px 22px; font-size: 15px; } .hero-ctas .btn-sm { padding: 10px 18px; font-size: 14px; } .hero-ctas .hint { font-size: 13px; color: var(--ink-3); margin-left: 6px; } /* ---- Hero stats / trust row ---- */ .trust-row { display: flex; gap: 40px; align-items: center; padding-top: 24px; border-top: 1px solid var(--line-2); flex-wrap: wrap; } .trust-row .stat .n { font-family: var(--font-sans); font-size: 28px; font-weight: 500; color: var(--ink); letter-spacing: -0.015em; display: flex; align-items: baseline; gap: 4px; } .trust-row .stat .l { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } /* ---- Map pins (Infra-Maps preview snapshot on the homepage) ---- */ .pin { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--backer); border: 2px solid var(--surface); box-shadow: 0 0 0 0 rgba(45,107,102,.45); animation: ping 2.6s ease-out infinite; } .pin.amber { background: var(--amber); animation-delay: .6s; } .pin.plum { background: var(--plum); animation-delay: 1.2s; } .pin.green { background: var(--green); animation-delay: .9s; } .pin.blue { background: var(--blue); animation-delay: 1.8s; } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(45,107,102,.55); } 70% { box-shadow: 0 0 0 14px rgba(45,107,102,0); } 100% { box-shadow: 0 0 0 0 rgba(45,107,102,0); } } /* ---- Audience router ---- */ .router { margin-top: 40px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 6px; display: flex; gap: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.02); max-width: 560px; } .router button { flex: 1; min-width: 0; border: none; background: transparent; cursor: pointer; padding: 10px 10px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, color .15s; font-family: inherit; } .router button .icon { /* Fixed centred box so all four FA glyphs share one footprint and line up vertically with the label regardless of each glyph's intrinsic metrics. */ display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 15px; line-height: 1; flex-shrink: 0; opacity: .7; } .router button.active { background: var(--ink); color: var(--surface); } .router button.active .icon { opacity: 1; } .router button:not(.active):hover { background: var(--backer-softer); color: var(--ink); } .router-panel { margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 28px 30px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; } .router-panel h3 { font-family: var(--font-sans); font-weight: 500; font-size: 28px; letter-spacing: -0.02em; margin: 0 0 10px; } .router-panel p { color: var(--ink-2); margin: 0 0 18px; line-height: 1.55; font-size: 15px; } .router-panel .bullets { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; } .router-panel .bullets li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); } .router-panel .bullets .tick { color: var(--backer); margin-top: 2px; font-weight: 700; } .router-panel .actions { display: flex; gap: 10px; flex-wrap: wrap; } .router-panel .btn { border-radius: 999px; } .router-visual { background: var(--backer-softer); border-radius: 14px; padding: 22px; min-height: 280px; border: 1px solid var(--line-2); position: relative; } .mini-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 10px; box-shadow: 0 1px 0 rgba(0,0,0,.01); } .mini-card h6 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); } .mini-card .row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-3); margin-top: 4px; } .mini-card .bar { height: 6px; background: var(--line-2); border-radius: 999px; margin-top: 10px; overflow: hidden; } .mini-card .bar i { display: block; height: 100%; background: var(--backer); border-radius: 999px; } .mini-card .tag-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .tag { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 600; } .tag.green { background: var(--green-soft); color: var(--green); } .tag.teal { background: var(--backer-soft); color: var(--backer-ink); } .tag.amber { background: var(--amber-soft); color: var(--amber); } .tag.plum { background: var(--plum-soft); color: var(--plum); } /* ---- Section head / eyebrow-driven section intro ---- */ .section-head { margin-bottom: 56px; max-width: 760px; } .section-head .eyebrow { margin-bottom: 16px; } .section-head h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(32px, 3.2vw, 44px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 14px; color: var(--ink); text-wrap: balance; } .section-head p { color: var(--ink-2); font-size: 17px; line-height: 1.55; margin: 0; } /* ---- Pillars ---- */ .pillar { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; padding: 48px 0; border-top: 1px solid var(--line-2); } .pillar:first-of-type { border-top: none; padding-top: 0; } .pillar.reverse .pillar-copy { order: 2; } .pillar-copy .pillar-num { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--backer); letter-spacing: 0.05em; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .pillar-copy h3 { font-family: var(--font-sans); font-weight: 500; font-size: 36px; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 14px; } /* Green hyphen in the Infra-Pipeline / -Analytics / -Maps pillar headings. */ .pillar-copy h3 span { color: var(--backer); } .pillar-copy .lede { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin: 0 0 22px; } .pillar-copy .feat { display: grid; gap: 12px; } .pillar-copy .feat .f { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px dashed var(--line); } .pillar-copy .feat .f:first-child { border-top: none; padding-top: 0; } .pillar-copy .feat .f .k { font-size: 12px; color: var(--backer); font-weight: 700; letter-spacing: 0.06em; margin-top: 3px; } .pillar-copy .feat .f .v { font-size: 14px; color: var(--ink-2); line-height: 1.55; } .pillar-visual { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; min-height: 380px; position: relative; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(29,71,68,.22); } .pv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 12px; color: var(--ink-3); } .pv-dots { display: flex; gap: 5px; } .pv-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); } .pv-dots span:first-child { background: #e5a0a0; } .pv-dots span:nth-child(2) { background: #e3cf91; } .pv-dots span:nth-child(3) { background: #9ec9a1; } /* Pillar 1 - project rows */ .project-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: var(--surface); } .project-row .thumb { width: 42px; height: 42px; border-radius: 8px; background: var(--green-soft); display: grid; place-items: center; color: var(--green); font-size: 16px; } .project-row .t { font-size: 13px; font-weight: 600; color: var(--ink); } .project-row .m { font-size: 11px; color: var(--ink-3); margin-top: 2px; display: flex; gap: 8px; } .project-row .val { text-align: right; font-family: var(--font-sans); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; color: var(--ink); } .project-row .val small { display: block; font-family: var(--font-sans); font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; } /* Pillar 2 - chart */ .chart-grid { position: relative; height: 260px; margin-top: 18px; } .chart-grid svg { width: 100%; height: 100%; } .chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-3); margin-top: 14px; } .chart-legend .k { display: flex; align-items: center; gap: 6px; } .chart-legend .sw { width: 10px; height: 10px; border-radius: 3px; } /* Pillar 3 - map snapshot */ .map-snap { height: 260px; background: var(--backer-softer); border-radius: 12px; position: relative; overflow: hidden; border: 1px solid var(--line-2); } .map-snap-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Pins are positioned by inline left/top %; translate centres the dot on the point. */ .map-snap .pin { transform: translate(-50%, -50%); z-index: 1; } /* ---- Process (homepage variant) - renamed from .role-tabs ---- */ .process-tabs { display: flex; gap: 0; margin-bottom: 28px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; } .process-tabs button { background: transparent; border: none; padding: 14px 4px; margin-right: 36px; font-size: 14px; font-weight: 600; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 10px; font-family: inherit; } .process-tabs button .r-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); opacity: .4; } .process-tabs button.active { color: var(--ink); border-bottom-color: var(--backer); } .process-tabs button.active .r-dot { background: var(--backer); opacity: 1; } .process-tabs button:hover:not(.active) { color: var(--ink-2); } .process-tabs .r-aux { margin-left: auto; font-size: 12px; color: var(--ink-3); align-self: center; padding-bottom: 10px; } .role-pane { display: none; } .role-pane.active { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; animation: fadeIn .25s ease; } .role-intro { font-size: 13px; color: var(--ink-2); margin: -4px 0 18px; line-height: 1.55; padding: 14px 16px; background: var(--backer-softer); border-left: 2px solid var(--backer); border-radius: 0 8px 8px 0; } .role-intro strong { color: var(--ink); font-weight: 600; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* ---- Coverage ---- */ .coverage-tabs { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; } .coverage-tabs button { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; font-family: inherit; } .coverage-tabs button.active { background: var(--ink); color: var(--surface); border-color: var(--ink); } .coverage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .cov-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; position: relative; transition: transform .2s, box-shadow .2s; } .cov-card:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -30px rgba(29,71,68,.3); } .cov-card .label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; display: inline-block; padding: 3px 8px; border-radius: 4px; } .cov-card h5 { font-family: var(--font-sans); font-weight: 500; font-size: 22px; margin: 0 0 10px; letter-spacing: -0.015em; } .cov-card p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; } .lbl-green { background: var(--green-soft); color: var(--green); } .lbl-teal { background: var(--backer-soft); color: var(--backer-ink); } .lbl-amber { background: var(--amber-soft); color: var(--amber); } .lbl-red { background: var(--red-soft); color: var(--red); } /* ---- Final CTA ---- */ .final { padding: 80px 0 40px; } .final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .final-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 36px 32px; transition: transform .2s, box-shadow .2s; } .final-card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgba(29,71,68,.3); } .final-card h3 { font-family: var(--font-sans); font-weight: 500; font-size: 26px; margin: 12px 0 10px; letter-spacing: -0.015em; } .final-card p { color: var(--ink-2); margin: 0 0 22px; line-height: 1.55; font-size: 15px; } .final-card .btn { border-radius: 999px; } /* ===================================================================== 14B. HOMEPAGE REWORK ADDITIONS New vocabulary for the reworked homepage (centred hero, static audience router, coming-soon pillar visuals, 3-phase How-it-works, 3-card pricing). Folded in from references/mocks/home-rework.css. Token-driven so dark mode holds. .cs-badge + @keyframes pulse/csPulse already exist above / in section 24C and are reused, not redefined. ===================================================================== */ /* ---- Hero: pre-launch fallback state ---- */ .trust-fallback { border-top: 1px solid var(--line-2); padding-top: 24px; } /* ---- Hero centred (single column, no right-hand panel) ---- */ .hero-grid.hero-centered { grid-template-columns: 1fr; justify-items: center; text-align: center; } .hero-grid.hero-centered > div { max-width: 760px; } .hero-grid.hero-centered .hero-sub { margin-left: auto; margin-right: auto; } .hero-grid.hero-centered .hero-ctas { justify-content: center; } .hero-grid.hero-centered .trust-row { justify-content: center; } .hero-grid.hero-centered .trust-fallback { text-align: center; } /* Audience router strip centred under the hero */ .router { margin-left: auto; margin-right: auto; } /* Mint highlight swash + teal italic on emphasised words in headings. Applied via class="swash" on the (hero h1 / section-head h2), so a new emphasised word just gets the class - no per-section selector list to keep in sync. */ .swash { position: relative; white-space: nowrap; font-style: italic; color: var(--backer); font-weight: 500; background-image: linear-gradient(transparent 62%, rgba(127,202,179,.5) 62%, rgba(127,202,179,.5) 94%, transparent 94%); background-repeat: no-repeat; background-size: 100% 100%; } /* Centred section intros (matches the centred hero) */ #platform .section-head, #coverage .section-head, #process .section-head, .pricing-cards .section-head { margin-left: auto; margin-right: auto; text-align: center; } /* Centred coverage pill tabs */ #covTabs { justify-content: center; } /* ---- "Coming soon" vocabulary ---- */ .soon-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--backer-ink); background: var(--backer-soft); border: 1px dashed color-mix(in srgb, var(--backer) 45%, transparent); padding: 3px 9px; border-radius: 999px; } .soon-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--backer); animation: csPulse 2.2s ease-out infinite; } /* Tiny variant for .tag rows inside mini-cards / steps */ .tag.soon { background: transparent; color: var(--backer-ink); border: 1px dashed color-mix(in srgb, var(--backer) 45%, transparent); } /* "Beta": live but not finished (Infra-Maps) - the same pill, solid border. Small tag-row badges use the existing .tag.teal. */ .soon-pill.beta { border-style: solid; } /* ---- Pillar 2 visual: intelligence-layer inputs diagram ---- */ .intel-flow { display: grid; gap: 14px; margin-top: 6px; } .intel-srcs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .intel-src { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .intel-src i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--backer-soft); color: var(--backer-ink); font-size: 11px; flex-shrink: 0; } .intel-src small { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-3); margin-top: 1px; } .intel-join { display: flex; justify-content: center; color: var(--ink-3); font-size: 12px; line-height: 1; } .intel-core { border: 1px solid color-mix(in srgb, var(--backer) 30%, transparent); border-radius: 12px; background: var(--backer-softer); padding: 18px 20px; text-align: center; position: relative; } .intel-core .t { font-weight: 600; font-size: 15px; color: var(--ink); margin-top: 10px; } .intel-core .d { font-size: 12px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; } .intel-outs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .intel-outs .chip { font-size: 11px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 11px; } /* ---- Pillar 3 visual: empty-of-data map ---- */ /* ---- Audience router: four static panes (no innerHTML swapping) ---- */ .router-panel[hidden] { display: none; } .router-panel .panel-badge { margin-bottom: 12px; } .router-panel .actions { align-items: center; } /* ---- Process tabs: role panes hidden attr fallback ---- */ .role-pane[hidden] { display: none; } /* ---- Final CTA: quiet closing line ---- */ .final-foot { text-align: center; margin-top: 28px; font-size: 13px; color: var(--ink-3); } .final-foot a { color: var(--backer); font-weight: 600; text-decoration: none; } .final-foot a:hover { text-decoration: underline; } /* ---- HOW IT WORKS: three-phase layout (replaces per-step hover panes) ---- The role tabs still switch panes; each pane is now a 3-column phase grid. No step-visual column, so the active pane is block, not grid. */ #process .role-pane.active { display: block; } #process .process-tabs { justify-content: center; } #process .role-intro { margin: 0 auto 22px; max-width: 760px; text-align: center; } .hiwC-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* Shared row tracks (subgrid below) so kicker / h3 / lede line up across the three cards - every card's first step then starts on the same line. The 4th row (steps, or .hiwC-body: steps + the "Tracked on-platform" footer) is a flexible filler so all cards match the tallest card's height. */ grid-template-rows: auto auto auto 1fr; column-gap: 20px; row-gap: 0; } .hiwC-phase { display: grid; grid-template-rows: subgrid; grid-row: span 4; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; position: relative; } /* "Coming soon" tag pinned to the top-right corner of the phase card */ .hiwC-soon { position: absolute; top: 16px; right: 16px; } .hiwC-kicker { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--backer-ink); margin-bottom: 8px; } .hiwC-phase h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; } .hiwC-lede { margin: 0 0 20px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 30ch; } /* align-content:start keeps the steps packed at the top when the card is taller than its own content (it's stretched to match the tallest card), rather than distributing the slack between steps. */ .hiwC-steps { display: grid; gap: 16px; align-content: start; } .hiwC-step { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; } .hiwC-step .n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--backer); color: var(--backer); display: grid; place-items: center; font-size: 12px; font-weight: 600; margin-top: 1px; flex-shrink: 0; background: var(--surface); } .hiwC-step .t { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; letter-spacing: -0.005em; } .hiwC-step .t .tag.soon { vertical-align: middle; margin-left: 6px; } .hiwC-step .s { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; } .hiwC-step .s em { font-style: italic; color: var(--ink-2); } /* A card with a footer: steps, then the footer pinned to the card bottom. The footer is in flow, so a long one grows the row rather than overlapping the steps; the gap is the least space between them. */ .hiwC-body { display: flex; flex-direction: column; gap: 16px; } /* Lifecycle tracking note inside the Handover phase (progress/record-keeping, not deal management - the negotiation genuinely happens off-platform). */ .hiwC-track { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12px; line-height: 1.5; color: var(--ink-2); } .hiwC-track-tag { display: block; width: fit-content; margin-bottom: 8px; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--backer-ink); background: var(--backer-soft); padding: 3px 8px; border-radius: 999px; } .hiwC-track b { color: var(--ink); font-weight: 600; } /* ---- PRICING: three model cards (Infra-Backer first), token-driven ---- */ .pricing-cards { padding: 40px 0; } .pricing-cards .section-head { margin-bottom: 36px; } .p3-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } .p3-card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 26px 24px; display: flex; flex-direction: column; } .p3-card.feature { border-color: var(--backer); background: var(--backer-softer); } .p3-name { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); margin-bottom: 4px; } .p3-card.feature .p3-name { color: var(--backer-ink); } .p3-sub { font-size: 12.5px; color: var(--ink-3); margin-bottom: 20px; } .p3-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; } .p3-list li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; align-items: start; } .p3-list li .ico { margin-top: 1px; font-size: 13px; line-height: 1.1; color: var(--ink-4); text-align: center; } .p3-list li .ico.ok { color: var(--backer); font-weight: 700; } .p3-list li .ico.no { color: var(--ink-4); } .p3-list li .ico.neu { color: var(--ink-4); font-weight: 700; } .p3-card.feature .p3-list li { color: var(--ink); } .p3-card.feature .p3-list li .ico { color: var(--backer); } .p3-list li b { font-weight: 600; color: var(--ink); } .p3-foot { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-3); line-height: 1.45; } .pricing-cards .price-foot { font-size: 12px; color: var(--ink-3); line-height: 1.5; max-width: 640px; margin: 18px auto 0; text-align: center; } /* ---- Accessibility ---- */ .router button:focus-visible, .process-tabs button:focus-visible, .coverage-tabs button:focus-visible { outline: 2px solid var(--backer); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .pulse, .pin, .soon-pill .dot, .cs-badge .dot { animation: none !important; } .role-pane.active { animation: none !important; } .cov-card, .final-card, .btn { transition: none !important; } } /* ---- Small screens ---- */ @media (max-width: 980px) { .intel-srcs { grid-template-columns: 1fr; } .router { max-width: none; } /* Single column: drop the subgrid so each card flows normally. */ .hiwC-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 20px; } .hiwC-phase { display: block; grid-row: auto; } .p3-cards { grid-template-columns: 1fr; } } /* Small screens: the four role tabs (Developer / Investor / Advisor / Researcher) can't fit on one row much below the router's 560px max-width - the single-row layout overflows before the old 480px breakpoint, so stack into a 2x2 grid at the sm breakpoint instead. minmax(0,1fr) lets each cell shrink with the viewport rather than being forced wide by its label. */ @media (max-width: 576px) { .router { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .process-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; } .process-tabs button { margin-right: 0; justify-content: center; } } /* ===================================================================== 15. PAGE: PROFILE Ported from dashboard_profile.html. Profile hero, ident, stats, grid. ===================================================================== */ .profile-hero { display: flex; align-items: flex-start; gap: 24px; padding: 4px 0 22px; flex-wrap: wrap; } .profile-avatar { width: 88px; height: 88px; border-radius: 18px; background: linear-gradient(140deg, var(--backer) 0%, #4ea49c 100%); color: #fff; display: grid; place-items: center; font-family: var(--font-sans); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; box-shadow: 0 20px 40px -20px rgba(29,71,68,.4); position: relative; flex-shrink: 0; } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .about-body-empty { color: var(--ink-3); } /* Live mandate-match preview chip - clickable callout on the org profile About card + the settings org card. Count comes from matching_service over the Browse-visible set; links to "Create a saved search from my mandate". */ .mandate-match { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 14px; border: 1px solid var(--backer-soft); border-radius: 10px; background: var(--backer-softer); color: var(--ink); font-size: 13px; text-decoration: none; transition: background .12s, border-color .12s; } .mandate-match:hover { background: var(--backer-soft); border-color: var(--backer); } .mandate-match .ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; background: var(--backer-soft); color: var(--backer-ink); font-size: 12px; } .mandate-match b { font-weight: 600; } .mandate-match .go { margin-left: auto; color: var(--backer-ink); font-size: 11px; transition: transform .12s; } .mandate-match:hover .go { transform: translateX(2px); } .profile-avatar .verified { position: absolute; bottom: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; border: 3px solid var(--bg); display: grid; place-items: center; font-size: 10px; } .profile-ident { flex: 1; min-width: 260px; } .profile-ident h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .profile-ident h1 .role-badge { font-size: 10.5px; padding: 3px 10px; } .profile-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; color: var(--ink-2); margin-top: 10px; } .profile-meta .m { display: inline-flex; align-items: center; gap: 6px; } .profile-meta .m .ico { color: var(--ink-4); font-size: 12px; width: 14px; display: grid; place-items: center; } .profile-meta a:hover { color: var(--backer); } .profile-meta .sep { color: var(--line); } .profile-stats { display: flex; gap: 36px; padding: 10px 0 0; border-top: 1px solid var(--line-2); margin-top: 14px; } .profile-stats .stat { display: grid; gap: 2px; } .profile-stats .stat .n { font-family: var(--font-sans); font-weight: 500; font-size: 22px; color: var(--ink); letter-spacing: -0.015em; line-height: 1.1; } .profile-stats .stat .l { font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; } .profile-stats .stat .l small { display: block; margin-top: 2px; text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 400; color: var(--ink-4); } .profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; } .profile-grid.single { grid-template-columns: 1fr; } /* Collapse to single column before the sidebar hides (at 900px). Between 900–1200px the expanded sidebar squeezes the right-column Team card below the .dtable min-width, causing horizontal overflow. */ @media (max-width: 1200px) { .profile-grid { grid-template-columns: 1fr; } } .about-body { font-size: 14px; color: var(--ink-2); line-height: 1.65; white-space: pre-line; } /* ===================================================================== 16. PAGE: ENGAGEMENT MANAGER (.em-*) Page-scoped styles for /pipeline/engagements: hero focus + pulse cards, list-view table, list/timeline view toggle, swimlane timeline view, and the slide-over detail drawer. ===================================================================== */ /* ---- Hero: focus tray + pulse strip ---- */ .em-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-bottom: 28px; align-items: start; } .em-hero.solo { grid-template-columns: 1fr; } .focus-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px 18px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .focus-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--amber) 0%, var(--backer) 100%); } .focus-card .fc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .focus-card .fc-head .eye { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .focus-card .fc-head .num { font-family: var(--font-mono); font-size: 11px; font-weight: 600; background: var(--amber-soft); color: var(--amber); padding: 2px 8px; border-radius: 999px; } .focus-card h2 { margin: 6px 0 14px; font-family: var(--font-sans); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); text-wrap: pretty; } .focus-card .fc-list { display: grid; gap: 10px; } .focus-card .fc-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px dashed var(--line-2); text-decoration: none; color: inherit; } .focus-card .fc-row:first-child { border-top: none; padding-top: 4px; } .focus-card .fc-row:hover .what .act { color: var(--backer); } .focus-card .fc-row .glyph { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; margin-top: 1px; } .focus-card .fc-row .glyph.amber { background: var(--amber-soft); color: var(--amber); } .focus-card .fc-row .glyph.teal { background: var(--backer-soft); color: var(--backer-ink); } .focus-card .fc-row .glyph.red { background: var(--red-soft); color: var(--red); } .focus-card .fc-row .what { display: grid; gap: 3px; min-width: 0; } .focus-card .fc-row .what .proj { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .focus-card .fc-row .what .act { font-size: 13.5px; color: var(--ink); font-weight: 500; line-height: 1.35; } .focus-card .fc-row .what .sub { font-size: 11.5px; color: var(--ink-3); font-weight: 400; line-height: 1.4; } .focus-card .fc-row .when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; padding-top: 14px; } .focus-card .fc-row .when.urgent { color: var(--red); font-weight: 600; } .focus-card .fc-empty { padding: 22px 0 4px; text-align: center; color: var(--ink-3); font-size: 13px; } /* Pulse: compact KPI panel - same visual vocabulary as FocusCard */ .pulse-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; position: relative; } .pulse-card .pc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .pulse-card .pc-head .eye { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .pulse-card .pc-head .delta { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--green); } .pulse-card .pc-headline { margin: 6px 0 16px; font-family: var(--font-sans); font-weight: 500; font-size: 30px; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pulse-card .pc-headline .ccy { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.02em; } .pulse-card .pc-headline .sub { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; } .pulse-grid { display: grid; gap: 0; } .pulse-stat { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--line-2); } .pulse-stat:first-child { border-top: none; padding-top: 4px; } .pulse-stat .l { font-size: 13px; color: var(--ink); font-weight: 500; line-height: 1.35; display: grid; } .pulse-stat .l span { font-size: 11.5px; color: var(--ink-3); font-weight: 400; margin-top: 2px; } .pulse-stat .v { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); font-weight: 500; white-space: nowrap; } .pulse-foot { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pulse-foot b { color: var(--ink-2); font-weight: 500; } .pulse-foot .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); } /* ---- Page view toggle (sits in page-actions slot) ---- */ .em-view-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; } .em-view-toggle a, .em-view-toggle button { border: none; background: transparent; font-family: inherit; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .em-view-toggle .on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); } /* ---- Section header ---- */ .em-section { margin-top: 36px; } .em-section + .em-section { margin-top: 32px; } .em-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .em-section-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 10px; } .em-section-head h3 .count { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-3); background: var(--surface-2); padding: 2px 7px; border-radius: 4px; } .em-section-head .sub { font-size: 12.5px; color: var(--ink-3); } .em-section-head .right { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* Timeline-view section heads ("Projects timeline" / "Service requests timeline"): indent so the h3 aligns with the first column heading ("Project" / "Service request") inside .em-tl-head .lbl (padding: 11px 18px). */ .em-section-head:has(+ .em-timeline) { padding-left: 18px; } /* Major section header - for top-level Projects / Service requests groups */ .em-section + .em-section-projects, .em-section + .em-section-requests { margin-top: 44px; } .em-section-head--major { align-items: flex-start; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); gap: 14px; } .em-section-head--major .em-section-title { flex: 1; min-width: 0; } .em-section-head--major h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; } .em-section-head--major .sub { display: block; margin-top: 4px; } .em-section-kind { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; margin-top: 2px; } .em-section-kind--project { background: var(--backer-soft); color: var(--backer-ink); } .em-section-kind--request { background: var(--amber-soft); color: var(--amber); } /* Sub-section header (e.g. "Closed projects") */ .em-section-sub { margin-top: 28px; } /* Indent the heading by the same amount as the table's first-column padding (.em-table thead th:first-child { padding-left: 22px }) so "Closed projects" / "Closed requests" line up with the Project column header below. */ .em-section-sub h4 { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; padding-left: 22px; display: flex; align-items: center; gap: 8px; } .em-section-sub h4 span { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--ink-4); background: var(--surface-2); padding: 1px 6px; border-radius: 4px; } /* ---- List view: redesigned engagement table ---- */ .em-table { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; overflow-y: hidden; box-shadow: var(--shadow-card); } .em-table table { width: 100%; border-collapse: collapse; font-size: 13px; } .em-table thead th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); white-space: nowrap; } .em-table thead th:first-child { padding-left: 22px; } .em-table thead th:last-child { padding-right: 22px; } .em-table thead th.num, .em-table tbody td.num { text-align: right; } .em-table thead th.sortable { cursor: pointer; user-select: none; } .em-table thead th.sortable:hover { color: var(--ink); } .em-table thead th.sortable .so { margin-left: 6px; font-size: 9px; opacity: .5; display: inline-block; transition: opacity .12s, color .12s; } .em-table thead th.sortable:hover .so { opacity: 1; } .em-table thead th.sorted { color: var(--backer); } .em-table thead th.sorted .so { opacity: 1; color: var(--backer); } /* list.js click-sort headers (``). list.js adds `.asc` / `.desc` to the active header on click; we paint a small indicator via ::after so the markup stays clean. */ .em-table thead th.sort { cursor: pointer; user-select: none; } .em-table thead th.sort:hover { color: var(--ink); } .em-table thead th.sort::after { content: '\2195'; /* up-down arrow */ margin-left: 6px; font-size: 9px; opacity: .35; transition: opacity .12s, color .12s; } .em-table thead th.sort:hover::after { opacity: .8; } .em-table thead th.sort.asc, .em-table thead th.sort.desc { color: var(--backer); } .em-table thead th.sort.asc::after { content: '\2191'; opacity: 1; color: var(--backer); } .em-table thead th.sort.desc::after { content: '\2193'; opacity: 1; color: var(--backer); } .em-table-foot { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line-2); background: var(--surface); } .em-table-foot .count { font-size: 12px; color: var(--ink-3); } .em-table-foot .pg-spacer { flex: 1; } .em-table-foot .pg-nav { display: inline-flex; align-items: center; gap: 4px; } .em-table-foot .pg-nav button { background: var(--surface); border: 1px solid var(--line); width: 26px; height: 26px; min-width: 26px; border-radius: 6px; display: grid; place-items: center; padding: 0; margin: 0; cursor: pointer; color: var(--ink-2); font-size: 10px; font-family: var(--font-mono); font-weight: 600; line-height: 1; transition: border-color .12s, color .12s, background .12s; } .em-table-foot .pg-nav button:not(:disabled):hover { background: var(--surface-2); color: var(--ink); } .em-table-foot .pg-nav button:disabled { opacity: .4; cursor: not-allowed; } .em-table-foot .pg-nav .pg-list { display: inline-flex; align-items: center; gap: 2px; } .em-table-foot .pg-nav .pg-num.on, .em-table-foot .pg-nav .pg-num.on:hover { background: var(--backer-soft); color: var(--backer); border-color: transparent; } .em-table-foot .pg-nav .pg-ellipsis { width: 16px; text-align: center; color: var(--ink-4); font-family: var(--font-mono); font-size: 12px; } .em-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: middle; } .em-table tbody td:first-child { padding-left: 22px; } .em-table tbody td:last-child { padding-right: 22px; } .em-table tbody tr:last-child td { border-bottom: none; } .em-table tbody tr { transition: background .1s; cursor: pointer; } .em-table tbody tr:hover { background: var(--backer-softer); } .em-table tbody tr.needs-action { background: linear-gradient(90deg, rgba(217,178,98,0.08) 0%, transparent 30%); } .em-table tbody tr.needs-action:hover { background: var(--backer-softer); } /* Project cell with sector glyph */ .em-pcell { display: flex; align-items: center; gap: 12px; min-width: 0; } .em-pcell .glyph { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; flex-shrink: 0; position: relative; } /* Sector tints - match the .sector-ico palette already used elsewhere. */ .em-pcell .glyph.economic { background: var(--amber-soft); color: var(--amber); } .em-pcell .glyph.energy { background: var(--green-soft); color: var(--green); } .em-pcell .glyph.digital { background: var(--plum-soft); color: var(--plum); } .em-pcell .glyph.social { background: var(--blue-soft); color: var(--blue); } .em-pcell .ptext { display: grid; line-height: 1.3; min-width: 0; } .em-pcell .ptext .pname { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; text-decoration: none; } .em-pcell .ptext .pname:hover { color: var(--backer); } .em-pcell .ptext .psub { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .em-pcell .ptext .psub .dot { width: 2px; height: 2px; border-radius: 50%; background: var(--ink-4); } /* Counterparty: avatar + who */ .em-cp { display: flex; align-items: center; gap: 10px; } .em-cp .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--blue-soft); color: var(--blue); flex-shrink: 0; } .em-cp .av.amber { background: var(--amber-soft); color: var(--amber); } .em-cp .av.plum { background: var(--plum-soft); color: var(--plum); } .em-cp .av.teal { background: var(--backer-soft); color: var(--backer-ink); } .em-cp .av.green { background: var(--green-soft); color: var(--green); } .em-cp .who { display: grid; line-height: 1.3; min-width: 0; } .em-cp .who b { font-size: 13px; font-weight: 500; color: var(--ink); } .em-cp .who span { font-size: 11.5px; color: var(--ink-3); } /* Status pill */ .em-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .em-status.draft { background: var(--surface-2); color: var(--ink-3); } .em-status.live { background: var(--backer-soft); color: var(--backer-ink); } .em-status.awaiting_shortlist { background: var(--amber-soft); color: var(--amber); } .em-status.shortlisted { background: var(--blue-soft); color: var(--blue); } .em-status.shortlisting { background: var(--blue-soft); color: var(--blue); } .em-status.preferred_bidder, .em-status.preferred { background: var(--plum-soft); color: var(--plum); } .em-status.in_due_diligence { background: var(--indigo-soft); color: var(--indigo); } .em-status.funded { background: var(--green-soft); color: var(--green); } .em-status.complete { background: var(--green-soft); color: var(--green); } .em-status.cancelled { background: var(--red-soft); color: var(--red); } .em-status.submitted { background: var(--backer-soft); color: var(--backer-ink); } .em-status.not_progressed, .em-status.withdrawn { background: var(--surface-2); color: var(--ink-4); } .em-status.revision_invited, .em-status.reopened { background: var(--amber-soft); color: var(--amber); } /* Updated cell - relative time */ .em-when { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; } /* Mono numeric cell */ .em-mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); font-weight: 500; white-space: nowrap; } .em-mono .ccy { color: var(--ink-3); font-weight: 400; margin-right: 2px; } /* Row CTA */ .em-cta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; font-family: inherit; white-space: nowrap; } .em-cta:hover { border-color: var(--ink-3); color: var(--ink); } .em-cta.primary { background: var(--backer); border-color: var(--backer); color: #fff; } .em-cta.primary:hover { background: var(--backer-ink); border-color: var(--backer-ink); color: #fff; } .em-cta.ghost { background: transparent; border-color: transparent; color: var(--ink-3); } .em-cta.ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); } /* Empty state */ .em-empty { background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; padding: 38px 24px; text-align: center; color: var(--ink-3); } .em-empty h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em; } .em-empty p { margin: 0 auto 14px; max-width: 360px; font-size: 13px; } /* Engagement-manager filter bar reuses the shared .bp-toolbar / .bp-search / .fbar / .fbtn chrome from project_list (browse_projects). Only the Clear filters button is unique to the engagement manager - styled here to match the rest of the toolbar. */ .em-clear-filters { font-size: 11.5px; color: var(--ink-3); cursor: pointer; background: none; border: none; padding: 4px 6px; font-family: inherit; } .em-clear-filters:hover { color: var(--ink); text-decoration: underline; } /* ---- Timeline (swimlane) view ---- */ .em-timeline { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; } .em-tl-head { display: grid; grid-template-columns: 320px 1fr; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .em-tl-head .lbl { padding: 11px 18px; border-right: 1px solid var(--line); } .em-tl-stages { display: grid; grid-template-columns: repeat(5, 1fr); } .em-tl-stages .st { padding: 11px 8px; text-align: center; border-right: 1px solid var(--line); position: relative; } .em-tl-stages .st:last-child { border-right: none; } .em-tl-stages .st.action { color: var(--amber); } .em-tl-group { padding: 10px 18px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; } .em-tl-group.amber { color: var(--amber); } .em-tl-group.muted { color: var(--ink-4); } .em-tl-row { display: grid; grid-template-columns: 320px 1fr; border-bottom: 1px solid var(--line); min-height: 80px; cursor: pointer; } .em-tl-row:last-child { border-bottom: none; } .em-tl-row:hover { background: var(--bg); } .em-tl-row.needs-action { background: rgba(217,178,98,0.06); } .em-tl-row.needs-action:hover { background: rgba(217,178,98,0.1); } .em-tl-proj { padding: 14px 18px; border-right: 1px solid var(--line); display: flex; gap: 12px; align-items: center; min-width: 0; } /* Sector-tinted glyph - mirrors the .em-pcell .glyph palette so the timeline's project icon matches the row icon in the list view, and gives the absolute-positioned .feat-star a positioning context. */ .em-tl-proj .glyph { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; flex-shrink: 0; position: relative; background: var(--surface-2); color: var(--ink-3); } .em-tl-proj .glyph.economic { background: var(--amber-soft); color: var(--amber); } .em-tl-proj .glyph.energy { background: var(--green-soft); color: var(--green); } .em-tl-proj .glyph.digital { background: var(--plum-soft); color: var(--plum); } .em-tl-proj .glyph.social { background: var(--blue-soft); color: var(--blue); } .em-tl-proj .ptext { min-width: 0; flex: 1; } .em-tl-proj .pname { font-size: 13px; font-weight: 600; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .em-tl-proj .psub { font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; margin-top: 2px; } .em-tl-proj .psub .dot { width: 2px; height: 2px; border-radius: 50%; background: var(--ink-4); } .em-tl-proj .pcp { font-size: 11px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .em-tl-proj .pcp b { color: var(--ink-2); font-weight: 500; } .em-tl-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; } .em-tl-track::before { content: ''; position: absolute; left: calc(100%/10); right: calc(100%/10); top: 50%; height: 2px; background: var(--line); border-radius: 2px; } .em-tl-track .em-tl-progress { position: absolute; left: calc(100%/10); top: 50%; height: 2px; background: var(--backer); border-radius: 2px; transform: translateY(-50%); z-index: 1; } .em-tl-track .col { height: 100%; border-right: 1px dashed var(--line-2); position: relative; z-index: 2; display: grid; place-items: center; } .em-tl-track .col:last-child { border-right: none; } /* Cancelled track: trim the gray base line so it stops at the column holding the Cancelled pill. The template sets --em-cancel-right per row. */ .em-tl-track.track-dead::before { background: var(--line-2); right: var(--em-cancel-right, 10%); } .em-tl-node { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); font-size: 9px; color: var(--ink-4); z-index: 3; position: relative; cursor: pointer; transition: transform .12s; } .em-tl-node.done { background: var(--backer); border-color: var(--backer); color: #fff; } .em-tl-node.current { background: #fff; border-color: var(--amber); color: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); } .em-tl-node.stalled { background: #fff; border-color: var(--amber); color: var(--amber); animation: tl-pulse 2.2s ease-out infinite; } @keyframes tl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,178,98,0.5); } 50% { box-shadow: 0 0 0 6px rgba(217,178,98,0); } } .em-tl-node.failed { background: #fff; border-color: var(--ink-4); color: var(--ink-3); } .em-tl-node.muted { opacity: .5; } .em-tl-node-when { position: absolute; top: calc(50% + 16px); font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); white-space: nowrap; } /* "N expressions" caption rendered ABOVE the icon on the Shortlisted column for project-level (developer) rows. Mirrors .em-tl-node-when. */ .em-tl-node-count { position: absolute; bottom: calc(50% + 16px); font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); white-space: nowrap; } /* Cancelled pill rendered inline in the column AFTER the last completed stage on a cancelled row - replaces the old grid-following .em-tl-notprog. */ .em-tl-cancel { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--red-soft); color: var(--red); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; z-index: 3; position: relative; } /* Engagement-level "Not progressed" terminal reuses the list-view .em-status chrome (grey pill, no icon) for visual consistency between views. The layering rule ensures it sits above the track-dead background overlay. */ .em-tl-track .em-status { z-index: 3; position: relative; } .em-tl-loadmore { display: flex; justify-content: center; padding: 14px; background: var(--surface); border-top: 1px solid var(--line); } .em-tl-loadmore button { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 7px 16px; border-radius: 7px; cursor: pointer; } .em-tl-loadmore button:hover { border-color: var(--ink-4); color: var(--ink); } /* Under 1100px the swimlane needs more horizontal room than the content column provides. Allow `.em-timeline` to scroll horizontally and pin a sensible min-width on the head + each row + the group separator so the five stage columns retain readable spacing. Extra bottom padding gives the native scrollbar breathing room under the last row. */ @media (max-width: 1099.98px) { .em-timeline { overflow-x: auto; overflow-y: hidden; padding-bottom: 14px; } .em-tl-head, .em-tl-row, .em-tl-group, .em-tl-loadmore { min-width: 940px; } .em-tl-group { box-sizing: border-box; } } /* ---- Detail drawer (slide-over right panel) ---- */ .em-drawer-backdrop { position: fixed; inset: 0; background: rgba(20, 24, 32, 0.32); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 50; animation: drawer-fade-in .18s ease-out; } .em-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(600px, 96vw); background: var(--bg); border-left: 1px solid var(--line); box-shadow: -24px 0 48px -12px rgba(20, 24, 32, 0.18); z-index: 51; display: flex; flex-direction: column; animation: drawer-slide-in .22s cubic-bezier(.2,.8,.2,1); } @keyframes drawer-fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes drawer-slide-in { from { transform: translateX(40px); opacity: 0 } to { transform: translateX(0); opacity: 1 } } .em-drawer-head { padding: 22px 28px 16px; border-bottom: 1px solid var(--line); background: var(--surface); position: relative; flex-shrink: 0; } .em-drawer-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; font-size: 14px; transition: background .12s, border-color .12s; } .em-drawer-close:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); } .em-drawer-head-top { display: flex; align-items: center; gap: 12px; padding-right: 40px; } .em-drawer-head-top .glyph { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; flex-shrink: 0; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); position: relative; } .em-drawer-head-top .ttl h2 .pd-featured { margin-left: 8px; vertical-align: middle; } /* Sector tints - mirror the .em-pcell .glyph palette so the drawer's icon matches the row icon for the same project. */ .em-drawer-head-top .glyph.economic { background: var(--amber-soft); color: var(--amber); } .em-drawer-head-top .glyph.energy { background: var(--green-soft); color: var(--green); } .em-drawer-head-top .glyph.digital { background: var(--plum-soft); color: var(--plum); } .em-drawer-head-top .glyph.social { background: var(--blue-soft); color: var(--blue); } .em-drawer-head-top .ttl { flex: 1; min-width: 0; } .em-drawer-head-top .ttl h2 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: 0; font-family: var(--font-sans); line-height: 1.3; } .em-drawer-head-top .ttl .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .em-drawer-head-top .ttl .sub .dot { width: 2px; height: 2px; border-radius: 50%; background: var(--ink-4); } /* Status pill row inside drawer header */ .em-drawer-status { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; } .em-drawer-status .ds-block { display: flex; flex-direction: column; gap: 6px; } .em-drawer-status .ds-l { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .em-drawer-status .ds-funded { margin-left: auto; padding-left: 16px; border-left: 1px solid var(--line); } /* Action area */ .em-drawer-actions { margin-top: 14px; } .em-drawer-buttons { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; } .em-act { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all .12s; position: relative; text-decoration: none; } .em-act i { font-size: 11.5px; } .em-act-primary { background: var(--backer); color: #fff; border: 1px solid var(--backer); } .em-act-primary:hover { background: var(--backer-ink); border-color: var(--backer-ink); color: #fff; } /* An action on a list row (a Reopened engagement's "Express interest"). */ .em-row-act { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--backer); text-decoration: underline; } .em-act-ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); } .em-act-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-4); } .em-act-ghost-warn { background: var(--surface); color: var(--ink-3); border: 1px solid var(--line); } .em-act-ghost-warn:hover { background: rgba(176, 38, 38, 0.05); border-color: rgba(176, 38, 38, 0.3); color: rgb(140, 30, 30); } /* Actions section (drawer body) - single stacked column of compact `.btn.btn-subtle.btn-sm` buttons in the emit order set by `_project_actions_section` / `_request_actions_section`. `align-items: flex-start` keeps each button at its natural width (no stretch) so the section reads as a list of pill-shaped chips. */ .em-detail-actions .em-actions-grid { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } /* Destructive variant - repaints `.btn-subtle` from teal-soft to red-soft. Used by the Cancel button (action dict carries `destructive: True`). Scoped under `.em-detail-actions` so it can't bleed into other surfaces. */ .em-detail-actions .em-actions-grid .btn-subtle.is-destructive { background: var(--red-soft); color: var(--red); } .em-detail-actions .em-actions-grid .btn-subtle.is-destructive:hover { background: var(--red); color: #fff; } /* Dark mode: --red is lightened (§2), so the solid-red hover fill needs dark ink, not white (mirrors the .btn-primary dark treatment). */ [data-bs-theme="dark"] .em-detail-actions .em-actions-grid .btn-subtle.is-destructive:hover { color: #0f1514; } /* Read-only banner for non-developers */ .em-drawer-readonly { margin-top: 14px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--ink-2); line-height: 1.5; } .em-drawer-readonly i { color: var(--ink-3); font-size: 12px; margin-top: 2px; flex-shrink: 0; } /* Drawer scroll body */ .em-drawer-body { flex: 1; overflow-y: auto; padding: 24px 28px; } /* Detail sections */ .em-detail-section { margin-bottom: 26px; } .em-detail-section:last-child { margin-bottom: 0; } .em-detail-section h4 { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; font-family: var(--font-sans); } /* Funding breakdown card - shared by Snapshot's "Funding requirement" and the Project-owner section's "Your funding offer". Drives the financing_breakdown() macro in pipeline/_engagements/_macros.html. */ .em-funding-card { padding: 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 10px; } .em-funding-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .em-funding-row-head { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink); font-weight: 500; } .em-funding-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; background: var(--c, var(--ink-4)); } .em-funding-sep, .em-funding-name { color: var(--ink-3); } .em-funding-name { font-weight: 400; } .em-funding-amount { font-size: 12.5px; color: var(--ink); font-weight: 500; font-family: var(--font-mono); margin-left: 18px; } .em-funding-pct { color: var(--ink-3); font-weight: 400; } /* Inline counter-proposal badge in the "Your funding offer" h4. */ .em-cp-badge { font-size: 10px; padding: 1px 8px; letter-spacing: .04em; margin-left: 8px; vertical-align: middle; } /* Offer-line rows (drawer "Funding offer" + investor summary): per-line status pill right-aligned in the row head, awarded allocation + counter note as sub-lines under the offered amount. Reuses the .em-funding-* layout. */ .em-funding-row-head .em-offer-status { margin-left: auto; font-size: 10px; padding: 1px 8px; } .em-offer-alloc { font-family: var(--font-mono); color: var(--green); font-weight: 600; } .em-offer-note { font-size: 11.5px; color: var(--ink-2); margin-left: 18px; line-height: 1.5; } /* Mark Funded modal - per-component editable final allocations (3-col grid) */ .em-funded-grid { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) 170px; gap: 12px 16px; align-items: center; } .em-funded-grid > .h { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 4px; border-bottom: 1px solid var(--line-2); } .em-funded-grid > .h.amt { text-align: right; } .em-funded-ft { display: flex; flex-direction: column; min-width: 0; } .em-funded-ft b { font-size: 12.5px; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .em-funded-ft span { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .em-funded-amt { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .em-funded-amt .ccy { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); } .em-funded-amt input { width: 120px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 13px; padding: 0 10px; text-align: right; } .em-funded-amt input:focus { outline: none; border-color: var(--backer); box-shadow: 0 0 0 3px rgba(45, 107, 102, .12); } .em-funded-total { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 13px; } .em-funded-total span { color: var(--ink-3); } .em-funded-total strong { font-family: var(--font-mono); color: var(--ink); } @media (max-width: 575.98px) { /* Collapse the grid to stacked cards: component + financing type on one row, the amount field full-width beneath. */ .em-funded-grid { grid-template-columns: 1fr auto; gap: 6px 12px; } .em-funded-grid > .h { display: none; } .em-funded-grid > .em-funded-amt { grid-column: 1 / -1; justify-content: flex-start; } .em-funded-amt input { flex: 1 1 auto; width: auto; } } /* Counterparty card */ .em-detail-cp { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border-radius: 8px; border: 1px solid var(--line); } .em-detail-cp .av-lg { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex-shrink: 0; background: var(--blue-soft); color: var(--blue); } .em-detail-cp .av-lg.amber { background: var(--amber-soft); color: var(--amber); } .em-detail-cp .av-lg.plum { background: var(--plum-soft); color: var(--plum); } .em-detail-cp .av-lg.teal { background: var(--backer-soft); color: var(--backer-ink); } .em-detail-cp .av-lg.green { background: var(--green-soft); color: var(--green); } .em-detail-cp .who-lg b { font-size: 13.5px; color: var(--ink); display: block; line-height: 1.25; } .em-detail-cp .who-lg span { font-size: 11.5px; color: var(--ink-3); } /* Engagement-list inside the developer project hub drawer */ /* Section head with right-aligned action button (e.g. Counterparties Actions). */ .em-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .em-detail-section-head h4 { margin: 0; } /* Counterparties Actions modal - bulk status table */ .em-cp-table { width: 100%; border-collapse: collapse; font-size: 13px; } .em-cp-table thead th { text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); } .em-cp-table thead th.cp-col-name { text-align: left; padding-left: 4px; } .em-cp-table tbody td { padding: 12px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; } .em-cp-table tbody td.cp-col-name { padding-left: 4px; } .em-cp-table tbody tr:last-child td { border-bottom: none; } .em-cp-table .cp-cell { display: flex; align-items: center; gap: 10px; } .em-cp-table .av-sm { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 11px; background: var(--blue-soft); color: var(--blue); } .em-cp-table .av-sm.amber { background: var(--amber-soft); color: var(--amber); } .em-cp-table .av-sm.plum { background: var(--plum-soft); color: var(--plum); } .em-cp-table .av-sm.green { background: var(--green-soft); color: var(--green); } .em-cp-table .av-sm.teal { background: var(--backer-soft); color: var(--backer-ink); } .em-cp-table .cp-name { font-weight: 600; color: var(--ink); } .em-cp-table .cp-col-radio { width: 130px; text-align: center; } .em-cp-table .cp-radio { display: inline-grid; place-items: center; width: 100%; height: 100%; cursor: pointer; padding: 6px; } .em-cp-table .cp-radio input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--backer); } .em-cp-table .cp-radio input:disabled { cursor: not-allowed; } .em-cp-table .em-cp-row-locked { opacity: .55; } /* All-not-progressed follow-up */ .em-cp-followup { margin-top: 14px; background: var(--amber-soft); border: 1px solid rgba(176,126,42,0.35); border-radius: 8px; padding: 14px; } .em-cp-followup-inner { display: flex; gap: 12px; align-items: flex-start; } .em-cp-followup-inner i { color: var(--amber); font-size: 16px; margin-top: 2px; } .em-cp-followup-inner b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 4px; } .em-cp-followup-inner p { margin: 0; font-size: 12.5px; color: var(--ink-2); } .em-cp-followup-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; } /* Counterparties: single card with stacked rows. */ .em-detail-engagements { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .em-detail-engagements .em-empty { padding: 18px 14px; } .em-detail-eng-row { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; } .em-detail-engagements > .em-detail-eng-row:first-child { border-top: none; } .em-detail-eng-row .av-lg { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 12px; background: var(--blue-soft); color: var(--blue); } .em-detail-eng-row .meta b { font-size: 13px; color: var(--ink); display: block; line-height: 1.25; font-weight: 600; } .em-detail-eng-row .em-eng-date { font-size: 11.5px; color: var(--ink-3); } .em-detail-eng-row .actions { display: flex; gap: 6px; align-items: center; } /* Modal "Show all" bar (10-row cap inside the bulk-update table). */ .em-cp-show-more { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 8px 4px 0; border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-3); } .em-cp-show-more .btn-text { font-size: 12px; } /* Milestones - read-only progress list. Self-contained: defines the full `.step` box here (the homepage `.step` chrome it once shared was removed). */ .em-detail-progress { display: grid; gap: 6px; } .em-detail-progress .step { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); cursor: default; transition: none; } .em-detail-progress .step:hover { background: var(--surface-2); } .em-detail-progress .step.done { background: var(--green-soft); border-color: rgba(45,90,68,0.15); } .em-detail-progress .step.done:hover { background: var(--green-soft); } .em-detail-progress .step.active { background: var(--amber-soft); border-color: rgba(176,126,42,0.25); } .em-detail-progress .step.active:hover { background: var(--amber-soft); } /* Stalled (parent hasn't moved for >14d) is the same "current" state as active - the counterparty has no way to unblock it, so the visual cue should still read as "where the engagement currently sits" (amber) rather than dropping back to a neutral grey. */ .em-detail-progress .step.stalled { background: var(--amber-soft); border-color: rgba(176,126,42,0.25); } .em-detail-progress .step.stalled:hover { background: var(--amber-soft); } .em-detail-progress .step.stalled .ico { background: #fff; border-color: var(--amber); color: var(--amber); } .em-detail-progress .step.muted { background: var(--surface-2); opacity: .65; } .em-detail-progress .step.muted:hover { background: var(--surface-2); } /* Cancelled / not-progressed both read as "closed without success" - paint them in the neutral ghost-pill palette rather than red so the drawer doesn't look alarming. */ .em-detail-progress .step.cancelled { background: var(--surface-2); border-color: var(--line); } .em-detail-progress .step.cancelled:hover { background: var(--surface-2); } .em-detail-progress .step.cancelled .ico { background: var(--ink-4); border-color: var(--ink-4); color: #fff; } .em-detail-progress .step.cancelled .lbl { color: var(--ink); font-weight: 600; } .em-detail-progress .step .ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-4); } .em-detail-progress .step.done .ico { background: var(--green-700, #2d5a44); border-color: var(--green-700, #2d5a44); color: #fff; } .em-detail-progress .step.active .ico { background: #fff; border-color: var(--amber); color: var(--amber); } .em-detail-progress .step .lbl { font-size: 12.5px; font-weight: 500; color: var(--ink); } .em-detail-progress .step .lbl span { font-size: 11px; font-weight: 400; color: var(--ink-3); margin-left: 6px; } .em-detail-progress .step .lbl .em-step-link { font-size: 11.5px; font-weight: 500; color: var(--backer); text-decoration: none; margin-left: 4px; } .em-detail-progress .step .lbl .em-step-link:hover { text-decoration: underline; } .em-detail-progress .step .when { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); } /* Snapshot stats */ .em-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .em-detail-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; } .em-detail-stat .l { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 4px; } .em-detail-stat .v { font-size: 16px; font-weight: 500; color: var(--ink); font-family: var(--font-mono); letter-spacing: -0.01em; } .em-detail-stat .v .ccy { font-size: 10.5px; color: var(--ink-3); margin-right: 4px; font-weight: 500; } /* Activity timeline */ .em-detail-history { display: grid; gap: 0; padding-left: 4px; /* Activity feed shows every event - cap height + scroll the section independently so long histories don't push other drawer content off-screen. Subtle scrollbar matches the sidebar's `.sb-scroll` treatment. */ max-height: min(60vh, 480px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; /* Inset the right padding so scrollbar doesn't overlap the dot timeline. */ padding-right: 6px; } .em-detail-history::-webkit-scrollbar { width: 6px; } .em-detail-history::-webkit-scrollbar-track { background: transparent; } .em-detail-history::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .em-detail-history::-webkit-scrollbar-thumb:hover { background: var(--line-2); } /* Each .ev draws its own segment of the connecting line. The first .ev's segment starts at its dot centre (16px from .ev top); the last .ev's segment ends at its dot centre. Middle .evs span the full row. This guarantees the line runs centre-to-centre regardless of row count or how tall any individual row's text wraps. */ .em-detail-history .ev { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 6px 0; position: relative; } .em-detail-history .ev::before { content: ''; position: absolute; /* Dot centre is at x=9 (margin-left 4 + radius 5). Subtract half the line width so the line is centred on the dot, not offset to its right edge. */ left: 8.25px; top: 0; bottom: 0; width: 1.5px; background: var(--line); z-index: 0; } .em-detail-history .ev:first-child::before { top: 16px; } .em-detail-history .ev:last-child::before { bottom: calc(100% - 16px); } .em-detail-history .ev:only-child::before { display: none; } .em-detail-history .ev .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); margin-top: 5px; margin-left: 4px; z-index: 1; } .em-detail-history .ev.green .dot { background: var(--backer); border-color: var(--backer); } .em-detail-history .ev.amber .dot { background: var(--amber); border-color: var(--amber); } .em-detail-history .ev.blue .dot { background: var(--blue); border-color: var(--blue); } .em-detail-history .ev.red .dot { background: var(--red); border-color: var(--red); } .em-detail-history .ev.muted .dot { background: var(--ink-4); border-color: var(--ink-4); opacity: .6; } .em-detail-history .ev.ghost .dot { background: var(--ink-4); border-color: var(--ink-4); opacity: .45; } .em-detail-history .ev .what { font-size: 12.5px; color: var(--ink); line-height: 1.4; } .em-detail-history .ev .what a { color: var(--ink); font-weight: 600; text-decoration: none; transition: color .15s ease; } .em-detail-history .ev .what a:hover, .em-detail-history .ev .what a:focus-visible { color: var(--backer); text-decoration: none; } .em-detail-history .ev .when { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 1px; } .em-detail-history .ev .when .rel { color: var(--ink-4); margin-left: 2px; } /* Drawer mount placeholder (kept empty until JS injects content) */ #em-drawer-mount:empty { display: none; } /* Engagement Manager responsive */ @media (max-width: 1100px) { .em-hero { grid-template-columns: 1fr; } } @media (max-width: 800px) { .em-tl-head, .em-tl-row { grid-template-columns: 220px 1fr; } .em-section-head { flex-wrap: wrap; } } /* ===================================================================== 17. PAGE: PROJECT DETAIL (.pd-*, .eoi-*, .btn-pd-*) Page-scoped styles for /pipeline/projects/. Prefixes: .pd-* project detail (hero, layout, card, kv-grid, dr-grid, stack-bar, sh-table, metrics, cta-d, deadline, engage-*, toc) .eoi-* express-interest modal chrome .btn-pd-* hero action buttons (primary, ghost) All tokens resolve to backer.css :root vars. ===================================================================== */ /* --- Detail hero ------------------------------------------- */ .pd-hero { display: flex; gap: 24px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid var(--line-2); margin-bottom: 24px; } .pd-hero-ident { flex: 1; min-width: 0; } .pd-hero-title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.018em; line-height: 1.12; color: var(--ink); margin: 0 0 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; text-wrap: balance; } .pd-featured { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; /* Token-based gradient so the badge stays legible in both light and dark modes - `--amber-soft` swaps to a translucent amber tint in dark mode and `--surface` swaps to the dark card surface. */ background: linear-gradient(135deg, var(--amber-soft), var(--surface)); color: var(--amber); border: 1px solid rgba(176,126,42,.25); } .pd-hero-devline { font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; } .pd-hero-devline .k { color: var(--ink-3); font-weight: 500; } /* Gap before each fact group after the first (Developer / Listed / etc.), replacing the old middot separator with clean whitespace. */ .pd-hero-devline .k:not(:first-child) { margin-left: 14px; } .pd-hero-devline a, .pd-hero-devline .v { color: var(--ink); font-weight: 600; text-decoration: none; } .pd-hero-devline a { transition: color .12s; } .pd-hero-devline a:hover { color: var(--backer); } .pd-hero-devline .dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); margin: 0 10px; vertical-align: 2px; } .pd-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; } .pd-hero-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .pd-hero-actions .row { display: flex; gap: 8px; margin: 0; --bs-gutter-x: 0; } /* Detail-only primary button variant to match hero weight */ .btn-pd-primary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--backer); color: #fff; border: 1px solid var(--backer); border-radius: 8px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .12s, transform .1s, box-shadow .12s; box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 10px 22px -14px rgba(45,107,102,.55); } .btn-pd-primary:hover { background: var(--backer-ink); transform: translateY(-1px); color: #fff; } .btn-pd-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: border-color .12s, color .12s; } .btn-pd-ghost:hover { border-color: var(--ink-3); color: var(--ink); } /* --- Two-col layout --------------------------------------- */ .pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; } .pd-main { min-width: 0; display: grid; gap: 20px; } .pd-aside { min-width: 0; } .pd-aside-inner { position: sticky; top: 20px; display: grid; gap: 16px; } /* --- Card (detail-specific, slightly different from .card) - */ .pd-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); /* Topbar (.app grid-template-rows row 1) is 56px; reserve a 24px breathing gap above the heading when an anchor link or browser hash jump scrolls the section into view. Native scroll-margin-top works for both anchor hash navigation and the smooth-scroll TOC click handler. */ scroll-margin-top: 80px; } .pd-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line-2); background: var(--surface); } .pd-card-head h3 { font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0; display: inline-flex; align-items: center; gap: 10px; } .pd-card-head h3 .ico { width: 24px; height: 24px; display: grid; place-items: center; background: var(--backer-soft); color: var(--backer); border-radius: 6px; font-size: 11px; } .pd-card-head .pd-head-aux { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); } .pd-card-head .pd-head-aux b { color: var(--ink); font-weight: 600; } .pd-card-body { padding: 20px 22px; } .pd-card-body.no-pad { padding: 0; } /* --- Key-value grid --------------------------------------- */ .pd-kv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 26px; } .pd-kv-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .pd-kv-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .pd-kv-item { display: grid; /* Pack rows to the top so labels stay aligned when a sibling cell's value wraps and stretches the row taller than this cell needs. */ align-content: start; gap: 5px; min-width: 0; } .pd-kv-item .k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; /* Top-align so wrapping labels keep their `.info-i` glyph on the first line. */ align-items: flex-start; gap: 6px; /* Reserve 2 lines so labels of varying length all occupy the same vertical slot. Without this, single-line labels collapse to ~13px while wrapping labels take ~26px, which causes values across a row to start at different y-positions even though the labels themselves all align to the row top. */ line-height: 1.25; min-height: 26px; } .pd-kv-item .k .info-i { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line); font-size: 8px; color: var(--ink-4); cursor: help; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0; text-transform: none; background: var(--surface); transition: color .12s, border-color .12s, background .12s; position: relative; } .pd-kv-item .k .info-i:hover, .pd-kv-item .k .info-i:focus-visible { color: #fff; background: var(--backer); border-color: var(--backer); outline: none; } .pd-kv-item .k .info-i[data-tip]::before, .pd-kv-item .k .info-i[data-tip]::after { position: absolute; left: 50%; bottom: calc(100% + 10px); opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .14s ease, transform .14s ease; z-index: 50; } .pd-kv-item .k .info-i[data-tip]::before { content: attr(data-tip); width: max-content; max-width: 260px; padding: 9px 12px; background: var(--ink); color: #f4f6f5; font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; border-radius: 7px; text-align: left; white-space: normal; box-shadow: 0 12px 28px -10px rgba(0,0,0,.35); } .pd-kv-item .k .info-i[data-tip]::after { content: ''; bottom: calc(100% + 4px); width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--ink); } .pd-kv-item .k .info-i[data-tip]:hover::before, .pd-kv-item .k .info-i[data-tip]:hover::after, .pd-kv-item .k .info-i[data-tip]:focus-visible::before, .pd-kv-item .k .info-i[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } .pd-kv-item .v { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; min-height: 20px; } .pd-kv-item .v.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .pd-kv-item .v.big { font-family: var(--font-sans); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; } /* "Not specified" / "Not set" placeholder values. We use .unset (not .empty) because backer.css declares a global .empty empty-state class with 48px / 24px padding intended for the empty-state illustration cards. */ .pd-kv-item .v.unset, .pd-metrics .pd-metric .v.unset { color: var(--ink-3); } .pd-kv-item .v .sub { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 400; margin-top: 2px; font-family: var(--font-mono); } /* --- Description block ------------------------------------ */ .pd-desc { font-size: 14px; line-height: 1.7; color: var(--ink-2); white-space: pre-line; } .pd-desc::first-letter { font-family: var(--font-sans); font-size: 34px; font-weight: 500; color: var(--backer); float: left; line-height: 1; padding: 4px 8px 0 0; letter-spacing: -0.015em; } /* --- Data-room checklist --------------------------------- */ .pd-dr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 28px; } .pd-dr-group .pd-dr-label { display: flex; align-items: flex-start; justify-content: space-between; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); /* Reserve space for two-line category labels so all three group headers end at the same baseline regardless of label length. */ min-height: 36px; } .pd-dr-group .pd-dr-label .count { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--ink-4); letter-spacing: 0; } .pd-dr-group .pd-dr-label .count b { color: var(--backer); font-weight: 700; } .pd-dr-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; color: var(--ink-2); } .pd-dr-row .tick { width: 15px; height: 15px; border-radius: 4px; display: inline-grid; place-items: center; flex-shrink: 0; font-size: 8px; } .pd-dr-row .tick.on { background: var(--backer); color: #fff; } .pd-dr-row .tick.off { border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-4); font-weight: 700; } .pd-dr-row.off { color: var(--ink-4); } /* --- Capital stack visual + table ------------------------- */ .pd-stack-bar { display: flex; height: 20px; border-radius: 999px; overflow: hidden; background: var(--surface-2); margin-bottom: 0; border: 1px solid var(--line-2); } .pd-stack-bar .seg { height: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #fff; /* Keeps the inline % legible on the lighter family shades (cat-hybrid / cat-working) where white text would otherwise dip in contrast. */ text-shadow: 0 1px 1px rgba(0, 0, 0, .28); position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; transition: filter .12s; /* 7-category funding colour: .cat-* class on this element sets --c. */ background: var(--c, var(--ink-4)); } .pd-stack-bar .seg:hover { filter: brightness(1.1); } .pd-stack-table { width: 100%; border-collapse: collapse; } .pd-stack-table thead th { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 10px 14px; text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--line-2); border-top: 1px solid var(--line-2); } .pd-stack-table thead th.num { text-align: right; } .pd-stack-table tbody td { padding: 14px; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--ink); vertical-align: middle; } .pd-stack-table tbody tr:last-child td { border-bottom: none; } .pd-stack-table tbody td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; } .pd-stack-table .cat-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } .pd-stack-table .cat-chip .sw { width: 10px; height: 10px; border-radius: 3px; /* 7-category funding colour: .cat-* class on this element sets --c. */ background: var(--c, var(--ink-4)); } .pd-tax-note { display: flex; gap: 10px; padding: 12px 14px; background: var(--backer-softer); border: 1px solid var(--backer-soft); border-radius: 10px; margin-top: 16px; } .pd-tax-note .ico { width: 26px; height: 26px; border-radius: 6px; background: var(--backer-soft); color: var(--backer); display: grid; place-items: center; font-size: 11px; flex-shrink: 0; } .pd-tax-note .tx { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; } .pd-tax-note .tx b { color: var(--ink); font-weight: 600; } /* --- Stakeholders --------------------------------------- */ .pd-sh-table .ent { display: flex; align-items: center; gap: 12px; min-width: 0; } .pd-sh-table .ent .avatar { width: 36px; height: 36px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-2); flex-shrink: 0; letter-spacing: 0; } /* Per-row colour variants - applied via loop.index0 % 5 in the template so each project's stakeholder list rotates deterministically. */ .pd-sh-table .ent .avatar.amber { background: var(--amber-soft); color: var(--amber); border-color: rgba(176,126,42,.2); } .pd-sh-table .ent .avatar.plum { background: var(--plum-soft); color: var(--plum); border-color: rgba(107,74,122,.2); } .pd-sh-table .ent .avatar.blue { background: var(--blue-soft); color: var(--blue); border-color: rgba(79,124,164,.2); } .pd-sh-table .ent .avatar.green { background: var(--green-soft); color: var(--green); border-color: rgba(87,140,99,.2); } .pd-sh-table .ent .avatar.teal { background: var(--backer-soft); color: var(--backer); border-color: var(--backer-soft); } .pd-sh-table .ent .meta { min-width: 0; } .pd-sh-table .ent .meta b { display: block; font-weight: 600; color: var(--ink); font-size: 13px; } .pd-sh-table .ent .meta span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; } /* --- Aside: metrics card -------------------------------- */ .pd-metrics { display: grid; gap: 0; } .pd-metrics .pd-metric { padding: 14px 22px; border-bottom: 1px solid var(--line-2); display: grid; gap: 3px; } .pd-metrics .pd-metric:last-child { border-bottom: none; } .pd-metrics .pd-metric .l { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .pd-metrics .pd-metric .v { font-family: var(--font-sans); font-weight: 500; font-size: 22px; color: var(--ink); letter-spacing: -0.015em; line-height: 1.1; } .pd-metrics .pd-metric .v.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 500; } .pd-metrics .pd-metric .sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); } .pd-metric-hero { padding: 18px 22px 20px; background: linear-gradient(180deg, var(--backer-softer) 0%, var(--surface) 100%); border-bottom: 1px solid var(--line-2); } .pd-metric-hero .l { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--backer); margin-bottom: 4px; } .pd-metric-hero .v { font-family: var(--font-sans); font-weight: 400; font-size: 30px; color: var(--ink); letter-spacing: -0.02em; line-height: 1.05; } .pd-metric-hero .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; font-family: var(--font-mono); } /* Variant D: Teal tint institutional */ .pd-cta-d { background: var(--backer-softer); border: 1px solid var(--backer-soft); border-radius: var(--radius); padding: 20px 22px; } .pd-cta-d-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .pd-cta-d-ico { width: 38px; height: 38px; background: var(--backer); color: #fff; border-radius: 10px; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; } .pd-cta-d-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--backer); } .pd-cta-d-title { font-family: var(--font-sans); font-weight: 500; font-size: 18px; color: var(--ink); letter-spacing: -0.01em; margin-top: 1px; } .pd-cta-d-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; } .pd-cta-d-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; } .pd-cta-d-list li i { color: var(--backer); font-size: 10px; margin-top: 4px; flex-shrink: 0; } .pd-cta-d-btn { display: block; width: 100%; text-align: center; padding: 11px 16px; background: var(--backer); color: #fff; border: 0; border-radius: 8px; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .12s, transform .1s; } .pd-cta-d-btn:hover { background: var(--backer-ink); color: #fff; text-decoration: none; transform: translateY(-1px); } /* Stacked CTA buttons get auto-spacing so callers don't need inline margins. Scoped to .pd-cta-d so this only applies inside the CTA card; forms wrapping a button count too. */ .pd-cta-d .pd-cta-d-btn + .pd-cta-d-btn, .pd-cta-d .pd-cta-d-btn + form, .pd-cta-d form + .pd-cta-d-btn, .pd-cta-d form + form { margin-top: 8px; } /* Side-by-side action row variant (Edit + Withdraw interest). Buttons share the row evenly with tighter padding / type so they fit in the narrow CTA card width. Cancels the stacked-margin rule above. */ .pd-cta-d-actions { display: flex; gap: 8px; } .pd-cta-d-actions .pd-cta-d-btn { flex: 1 1 0; width: auto; padding: 10px; font-size: 12.5px; } .pd-cta-d .pd-cta-d-actions .pd-cta-d-btn + .pd-cta-d-btn { margin-top: 0; } .pd-cta-d-foot { margin-top: 12px; font-size: 11.5px; color: var(--ink-3); text-align: center; } .pd-cta-d-foot b { color: var(--ink); font-weight: 600; } /* --- Deadline emphasis in metrics ------------------------ */ .pd-metric-deadline { background: linear-gradient(135deg, var(--amber-soft) 0%, transparent 70%); } .pd-deadline-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid rgba(176,126,42,.22); border-radius: 8px; } .pd-deadline-countdown { display: flex; align-items: center; gap: 6px; padding-right: 12px; border-right: 1px dashed rgba(176,126,42,.3); } .pd-deadline-countdown .num { font-family: var(--font-sans); font-size: 32px; font-weight: 500; color: var(--amber); letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; } .pd-deadline-countdown .lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); line-height: 1.15; } .pd-deadline-date b { display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .pd-deadline-date span { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 1px; } .pd-engage-card .pd-engage-stage { padding: 16px 22px; border-bottom: 1px solid var(--line-2); } .pd-engage-card .pd-engage-stage .l { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; } .pd-engage-tracker { padding: 16px 22px; display: grid; gap: 4px; } .pd-engage-step { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 6px 0; position: relative; } .pd-engage-step:not(:last-child)::before { content: ''; position: absolute; left: 9px; top: 22px; bottom: -6px; width: 2px; background: var(--line); } .pd-engage-step.done:not(:last-child)::before { background: var(--backer); } .pd-engage-step .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); display: grid; place-items: center; font-size: 8px; color: var(--ink-4); font-weight: 700; position: relative; z-index: 1; } .pd-engage-step.done .dot { background: var(--backer); border-color: var(--backer); color: #fff; } .pd-engage-step.current .dot { background: var(--surface); border-color: var(--backer); color: var(--backer); box-shadow: 0 0 0 3px rgba(45,107,102,.15); } /* Cancelled / not-progressed terminal marker: paints in the red palette so the dot reads in lock-step with the `.pill.red` cancelled status badge. */ .pd-engage-step.cancelled .dot { background: var(--red-soft); border-color: var(--red-soft); color: var(--red); } .pd-engage-step .stepbody { padding-top: 1px; } .pd-engage-step .stepbody b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px; } .pd-engage-step.pending .stepbody b { color: var(--ink-3); font-weight: 500; } .pd-engage-step .stepbody span { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); } /* --- Section anchor nav ---------------------------------- */ .pd-toc { display: flex; flex-direction: column; gap: 2px; padding: 8px; } .pd-toc a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); text-decoration: none; transition: background .12s, color .12s; } .pd-toc a:hover { background: var(--surface-2); color: var(--ink); } .pd-toc a.active { background: var(--backer-softer); color: var(--backer-ink); font-weight: 600; } .pd-toc a .num { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0; min-width: 18px; } .pd-toc a.active .num { color: var(--backer); } /* ============================================================ EOI MODAL - Express interest dialog Layered on Bootstrap's .modal.fade > .modal-dialog > .modal-content. Bootstrap owns positioning, sizing, focus trap, backdrop, and the open/close transition. Do not re-introduce position/inset/transform rules on .eoi-modal. ============================================================ */ .eoi-modal { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 50px 100px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.04); overflow: hidden; } /* ── Modal header ── */ .eoi-head { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); background: linear-gradient(180deg, var(--backer-softer) 0%, var(--surface) 100%); } .eoi-head .ico { width: 44px; height: 44px; background: var(--backer); color: #fff; border-radius: 11px; display: grid; place-items: center; font-size: 16px; box-shadow: 0 6px 14px -6px rgba(45,107,102,.6); } .eoi-head .titlebox h2 { font-family: var(--font-sans); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 2px; line-height: 1.2; } .eoi-head .titlebox span { display: inline-block; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); } .eoi-close { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid var(--line); color: var(--ink-3); font-size: 14px; cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s, border-color .12s; } .eoi-close:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); } /* ── Context strip ── */ .eoi-context { display: flex; align-items: center; gap: 18px; padding: 14px 22px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); font-size: 12px; } .eoi-context .item { display: grid; gap: 1px; } .eoi-context .item .l { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); } .eoi-context .item .v { font-weight: 600; color: var(--ink); font-size: 12.5px; } .eoi-context .sep { width: 1px; height: 24px; background: var(--line); } .eoi-context .right { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } /* ── Modal body ── */ .eoi-body { padding: 22px; overflow-y: auto; display: grid; gap: 22px; } .eoi-section { display: grid; gap: 10px; } .eoi-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .eoi-section-head h3 { margin: 0; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; } .eoi-section-head h3 .num { width: 20px; height: 20px; background: var(--backer-soft); color: var(--backer); border-radius: 50%; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; } .eoi-section-head .helper { font-size: 11.5px; color: var(--ink-3); } /* ── Counter-proposal toggle row ── */ .eoi-cp-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px dashed var(--line); border-radius: 10px; cursor: pointer; font-size: 12.5px; color: var(--ink-2); transition: border-color .12s, background .12s; } .eoi-cp-toggle:hover { border-color: var(--ink-4); } .eoi-cp-toggle.is-disabled { opacity: .45; pointer-events: none; } .eoi-cp-toggle input { margin: 0; accent-color: var(--backer); } .eoi-cp-toggle b { color: var(--ink); font-weight: 600; } /* Choices.js global theme. The vendor choices.min.css now loads BEFORE backer.css (each consuming page puts its in {% block head_vendor_css %}, ahead of the backer.css in the base layout), so equal-specificity rules win on cascade order with NO !important - the same approach already used for the Bootstrap CDN + flatpickr theme. A handful of !important are RETAINED where a higher-specificity vendor state/variant selector would otherwise win (each noted inline); dropping those would regress dark mode / the open-dropdown frame. */ .choices { font-size: 13px; font-family: var(--font-sans); } .choices__inner { font-size: 13px; } .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { font-size: 13px; } /* Open-list hover: subtle brand-green background, ink text (NOT green). The selector matches the vendor's own (0,3,0) highlight exactly, so load order decides. */ .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: var(--backer-soft); color: var(--ink); } /* Dark-mode-aware text colour: the vendor paints these dark-on-white; re-point to ink (which switches per [data-bs-theme]). No vendor colour competitor, so order wins. */ .choices__inner, .choices__list--dropdown, .choices__list[aria-expanded], .choices__list--single .choices__item, .choices__list--dropdown .choices__item--selectable, .choices__input, .choices__input--cloned { color: var(--ink); } /* Dark-mode-aware surfaces + the Bootstrap-dropdown frame (1px var(--line), 8px corners, no shadow - matches the .fbtn dropdowns). The control box keeps !important on background + border-radius: the vendor's higher-specificity `.choices.is-disabled .choices__inner` (0,2,0) repaints the bg grey, and its `.is-open` / `.is-flipped.is-open` rules (0,2,0+) square the corners off - we hold the on-surface 8px look in every state. border (colour/width) and the focus border-colour have only equal-or-lower vendor competitors, so they win on order. */ .choices__inner { background-color: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--radius-sm) !important; /* 8px - same as --bs-dropdown-border-radius */ } /* Input box keeps !important: `.choices[data-type*=select-one] .choices__input` (0,3,0) paints it #fff - a white field on the dark theme without this. */ .choices__input, .choices__input--cloned { background-color: var(--surface) !important; } .choices__list--dropdown, .choices__list[aria-expanded] { background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm) !important; /* vendor .is-flipped (0,2,0) squares the corners */ word-break: normal; /* vendor sets break-all - mid-word-breaks long option names */ } /* Open-dropdown options: neutralise the vendor's 100px right-padding reserve on selectable items. That reserve is for the "Press to select" hint we disable everywhere via itemSelectText:'' (both IB.initChoices and the one bespoke new Choices in saved_searches.html), so it is dead space on every Choices page. Equal-specificity to the vendor rule; backer.css loads after, so order wins. Keeps the vendor's 10px vertical/left padding. */ .choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable { padding-right: 12px; } .choices.is-focused .choices__inner, .choices.is-open .choices__inner { border-color: var(--backer); } /* Medium (500) weight on Choices controls/options (no vendor competitor). */ .pf-field .choices .choices__inner, .pf-field .choices .choices__item, #expressInterestModal .choices .choices__inner, #expressInterestModal .choices .choices__item { font-weight: 500; } /* Choices.js inside the Express Interest modal - match the wizard field chrome. */ #expressInterestModal .choices { margin-bottom: 0; min-width: 0; } #expressInterestModal .choices__inner { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-height: 38px; padding: 4px 30px 4px 11px; font-size: 13px; font-weight: 400; line-height: 1.35; } #expressInterestModal .choices.is-focused .choices__inner, #expressInterestModal .choices.is-open .choices__inner { border-color: var(--backer); box-shadow: 0 0 0 3px rgba(45,107,102,.12); } #expressInterestModal .choices__list--single { padding: 4px 0; } #expressInterestModal .choices__list--single .choices__item { color: var(--ink); } #expressInterestModal .choices input.choices__input { background: transparent; border: 0; box-shadow: none; padding: 2px 0; font-size: 13px; color: var(--ink); } #expressInterestModal .choices[data-type*=select-one]::after { right: 12px; } /* Theme the open dropdown with surface/ink tokens so options (incl. disabled, e.g. Partial on a non-club component) stay legible in dark mode. */ #expressInterestModal .choices__list--dropdown { background: var(--surface); border-color: var(--line); } #expressInterestModal .choices__list--dropdown .choices__item { color: var(--ink); } #expressInterestModal .choices__list--dropdown .choices__item--disabled { color: var(--ink-4); opacity: 1; } /* Multi-party financing: per-requirement offer cards (Express Interest modal) */ .eoi-offers { display: grid; gap: 8px; } .eoi-offer { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: visible; position: relative; } /* Open dropdowns must overlay the sibling cards / rows below them. */ #expressInterestModal .choices__list--dropdown { z-index: 40; } #expressInterestModal .eoi-offer:has(.choices.is-open), #expressInterestModal .eoi-propose-row:has(.choices.is-open) { position: relative; z-index: 20; } .eoi-offer.is-on { border-color: var(--backer-soft); box-shadow: 0 0 0 3px var(--backer-softer); } .eoi-offer-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; margin: 0; } .eoi-offer-head input { display: none; } .eoi-offer-head .check { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--surface); position: relative; transition: background .12s, border-color .12s; } .eoi-offer-head input:checked + .check { background: var(--backer); border-color: var(--backer); } .eoi-offer-head input:checked + .check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .eoi-offer-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .eoi-offer-sum .cat-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); } .eoi-offer-sum .cat-chip .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--ink-4)); } .eoi-offer-meta { font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); } .eoi-club { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; font-family: var(--font-sans); background: var(--green-soft); color: var(--green); } .eoi-offer-fields { padding: 0 14px 14px; border-top: 1px solid var(--line-2); } .eoi-offer-grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 10px; padding-top: 12px; } .eoi-ff { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .eoi-ff > label, .eoi-offer-note-wrap > label, .eoi-offer-pricing-wrap > label { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); } .eoi-ff > label .opt, .eoi-offer-note-wrap > label .opt, .eoi-offer-pricing-wrap > label .opt { text-transform: none; letter-spacing: 0; color: var(--ink-4); font-weight: 400; } .eoi-offer-fields select, .eoi-offer-fields input[type=text], .eoi-offer-fields textarea { width: 100%; padding: 9px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; color: var(--ink); outline: none; transition: border-color .12s, box-shadow .12s; } .eoi-offer-fields select { -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px; } .eoi-offer-fields select:focus, .eoi-offer-fields input:focus, .eoi-offer-fields textarea:focus { border-color: var(--backer); box-shadow: 0 0 0 3px var(--backer-softer); } .eoi-offer-note-wrap, .eoi-offer-pricing-wrap { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; } .eoi-offer-fields input:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; } /* Live character counter under note fields (mirrors the message-field counter). */ .eoi-cc { font-size: 11px; color: var(--ink-4); font-family: var(--font-mono); align-self: flex-end; } /* Locked component card when the investor has switched to the propose-your-own path. */ .eoi-offer.is-locked { opacity: .45; } .eoi-offer.is-locked .eoi-offer-head { cursor: not-allowed; } /* Restructuring-counter rows: top line (category / instrument / amount / remove) + rationale on its own row */ .eoi-propose-row { margin-bottom: 12px; } .eoi-propose-row + .eoi-propose-row { border-top: 1px solid var(--line-2); padding-top: 12px; } .eoi-propose-top { display: grid; grid-template-columns: 1.3fr 1.5fr 1fr 28px; gap: 8px; align-items: center; } .eoi-propose-note { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .eoi-propose-note .cp-note { flex: 1; } .eoi-propose-row select, .eoi-propose-row input { width: 100%; padding: 9px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; color: var(--ink); outline: none; transition: border-color .12s, box-shadow .12s; } .eoi-propose-row select { -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px; } .eoi-propose-row select:focus, .eoi-propose-row input:focus { border-color: var(--backer); box-shadow: 0 0 0 3px var(--backer-softer); } .eoi-propose-row .rm { width: 28px; height: 28px; border: none; background: transparent; color: var(--ink-4); cursor: pointer; border-radius: 6px; } .eoi-propose-row .rm:hover { color: var(--red); background: var(--red-soft); } .eoi-cp-rows { margin-top: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; } /* Visibility controlled by Bootstrap's .d-none on #counterProposalSection; the JS toggles d-none, not a custom .visible class. */ .eoi-cp-row { display: grid; grid-template-columns: 1.4fr 1.4fr 1.2fr .8fr 28px; gap: 8px; margin-bottom: 8px; align-items: center; } .eoi-cp-row select, .eoi-cp-row input { width: 100%; height: 36px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; font-family: inherit; font-size: 12.5px; color: var(--ink); outline: none; transition: border-color .12s, box-shadow .12s; } .eoi-cp-row select:focus, .eoi-cp-row input:focus { border-color: var(--backer); box-shadow: 0 0 0 3px var(--backer-softer); } .eoi-cp-row .pct-out { font-family: var(--font-mono); background: var(--surface-2); color: var(--ink-3); text-align: center; } /* Pin Choices.js wrapper to 36px and clear its 24px bottom margin so wrapped selects line up with plain inputs in the row grid. */ .eoi-cp-row .choices { margin-bottom: 0; min-width: 0; } .eoi-cp-row .choices__inner { min-height: 36px !important; height: 36px; padding: 0 26px 0 10px !important; background: var(--surface) !important; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px; font-weight: 400 !important; line-height: 1 !important; display: flex; align-items: center; } .eoi-cp-row .choices[data-type*=select-one] .choices__inner { padding-bottom: 0 !important; } .eoi-cp-row .choices__list--single { padding: 0; width: 100%; display: flex; align-items: center; } .eoi-cp-row .choices__list--single .choices__item { font-size: 12.5px; line-height: 1; } .eoi-cp-row .choices[data-type*=select-one]::after { right: 10px; margin-top: -2px; } .eoi-cp-row .rm { width: 28px; height: 28px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--ink-4); cursor: pointer; font-size: 11px; transition: color .12s, background .12s, border-color .12s; } .eoi-cp-row .rm:hover { color: var(--red); background: var(--red-soft); border-color: rgba(169,68,46,.2); } .eoi-cp-add { margin-top: 4px; background: none; border: none; color: var(--backer); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 6px 0; display: inline-flex; align-items: center; gap: 6px; } .eoi-cp-add:hover { color: var(--backer-ink); } /* ── Message field ── */ .eoi-msg-wrap { position: relative; } .eoi-msg { width: 100%; min-height: 88px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 13px; color: var(--ink); resize: vertical; outline: none; transition: border-color .12s, box-shadow .12s; line-height: 1.5; } .eoi-msg:focus { border-color: var(--backer); box-shadow: 0 0 0 3px var(--backer-softer); } .eoi-msg-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 11px; color: var(--ink-3); } .eoi-msg-foot .count { font-family: var(--font-mono); } /* ── Modal footer ── */ .eoi-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--line-2); background: var(--surface-2); } .eoi-foot .legal { font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; } .eoi-foot .legal i { color: var(--backer); } .eoi-foot .right { display: flex; gap: 8px; } .eoi-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s, transform .1s; } .eoi-btn-ghost { background: transparent; color: var(--ink-3); border-color: var(--line); } .eoi-btn-ghost:hover { color: var(--ink); border-color: var(--ink-3); } .eoi-btn-primary { background: var(--backer); color: #fff; border-color: var(--backer); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 18px -10px rgba(45,107,102,.55); } .eoi-btn-primary:hover { background: var(--backer-ink); border-color: var(--backer-ink); transform: translateY(-1px); } /* --- EOI empty state (no listed components) -------------- */ .eoi-empty { padding: 14px 16px; background: var(--surface-2); border: 1px dashed var(--line); border-radius: 10px; font-size: 12.5px; color: var(--ink-3); } /* --- EOI inline validation alert ------------------------- */ /* Hidden via Bootstrap's .d-none on #eoiValidationError; the JS toggles d-none. The display: flex below is the visible state - Bootstrap's `.d-none { display: none !important }` overrides it when hidden. */ .eoi-error { display: flex; gap: 8px; padding: 10px 14px; background: var(--amber-soft); border: 1px solid rgba(176,126,42,.25); border-radius: 8px; color: var(--amber); font-size: 12.5px; align-items: center; } .eoi-error i { font-size: 14px; } /* Project Detail responsive */ @media (max-width: 720px) { .eoi-context { flex-wrap: wrap; gap: 10px 16px; } .eoi-context .right { margin-left: 0; } .eoi-cp-row { grid-template-columns: 1fr 1fr; gap: 6px; } .eoi-cp-row .rm { grid-column: 2; justify-self: end; } } @media (max-width: 1100px) { .pd-layout { grid-template-columns: 1fr; } .pd-aside-inner { position: static; } .pd-kv-grid { grid-template-columns: repeat(2, 1fr); } /* Aside (CTA + metrics + TOC + engagement tracker) stacks ABOVE main when the layout collapses to a single column. */ .pd-main { order: 1; } .pd-aside { order: 0; } } @media (max-width: 700px) { .pd-hero { flex-direction: column; } /* Keep action buttons at their intrinsic size - do NOT stretch them across the full hero width when it collapses. */ .pd-hero-actions { align-self: stretch; align-items: flex-end; } .pd-hero-actions .row { justify-content: flex-end; flex-wrap: wrap; } } @media (max-width: 680px) { .pd-dr-grid { grid-template-columns: 1fr; } .pd-kv-grid { grid-template-columns: 1fr; } } /* --- EOI deadline closed state ----------------------------------------- */ .pd-metric-deadline.closed { background: var(--surface-2); } .pd-metric-deadline.closed .l { color: var(--ink-4); } .pd-cta-d.closed { background: var(--surface-2); border-color: var(--line); } .pd-cta-d.closed .pd-cta-d-ico { background: var(--ink-4); } .pd-cta-d.closed .pd-cta-d-eyebrow { color: var(--ink-3); } .pd-cta-d.closed .pd-cta-d-msg { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; } .pd-cta-d.closed .pd-cta-d-btn[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; } .pd-cta-d.closed .pd-cta-d-btn.secondary { background: transparent; color: var(--ink-2); border: 1px solid var(--line); margin-top: 8px; } .pd-cta-d.closed .pd-cta-d-btn.secondary:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-3); } /* Hero "Closed for new EOIs" pill - sits inside .pd-hero-actions .row */ .pd-hero-closed-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); } /* Closed state of the deadline metric tile renders a single value line */ .pd-metric-deadline.closed .v { font-size: 15px; font-weight: 600; color: var(--ink-3); } /* ===================================================================== 18. PAGE: ORGANISATIONS DIRECTORY (.dx-*, .active-filters) --------------------------------------------------------------------- Page-scoped chrome for /organisations. Reuses .em-table, .em-pcell, .em-status, .em-cta, .em-when, .em-mono, .em-view-toggle, .empty, .bp-toolbar, .bp-search, .fbtn, .service-chips .chip, .flag .fc, and .row-actions / .save-btn from earlier sections. Only the genuinely new components live here: - .dx-tabs / .dx-tab (audience pill tabs with count badges) - .dx-cards / .dx-card (org-grid with role-specific .inv-meta rows) - .vfd inline verified tick after the org name (list + card) - .active-filters strip (promoted as a general component) ===================================================================== */ /* ---- Audience tab strip ---- */ .dx-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; } .dx-tab { background: none; border: 1px solid transparent; cursor: pointer; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; font-family: inherit; text-decoration: none; transition: background .12s, color .12s, border-color .12s; } .dx-tab:hover { color: var(--ink-2); background: var(--surface-2); } .dx-tab.on { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-card); } .dx-tab .num { font-family: var(--font-mono); font-size: 11px; font-weight: 500; background: var(--surface-2); color: var(--ink-3); padding: 1px 7px; border-radius: 4px; letter-spacing: 0; } .dx-tab.on .num { background: var(--backer-soft); color: var(--backer-ink); } .dx-tabs .spacer { flex: 1; } /* ---- Org-cell extensions on .em-pcell ---- */ /* Monogram glyph variant - used when an org has no FA icon. Five tone cycles. */ .em-pcell .glyph.monogram { font-size: 12px; font-weight: 700; letter-spacing: .02em; border: 1px solid rgba(0,0,0,.04); } .em-pcell .glyph.monogram.blue { background: var(--blue-soft); color: var(--blue); } .em-pcell .glyph.monogram.amber { background: var(--amber-soft); color: var(--amber); } .em-pcell .glyph.monogram.plum { background: var(--plum-soft); color: var(--plum); } .em-pcell .glyph.monogram.green { background: var(--green-soft); color: var(--green); } .em-pcell .glyph.monogram.teal { background: var(--backer-soft); color: var(--backer-ink); } /* Verified-organisation mark - inline green tick after the org name in both the list row (.pname) and the card (.dx-card-name). Sourced from the admin is_verified toggle; mirrors the admin org-table idiom (.org-table .nm .verified). Its own colour wins over the inherited link colour on hover. */ .em-pcell .pname .vfd, .dx-card .dx-card-name .vfd { color: var(--green); font-size: 12px; margin-left: 5px; vertical-align: baseline; } /* Type pill colour map (extends .em-status). */ .em-status.investor { background: var(--blue-soft); color: var(--blue); } .em-status.advisor { background: var(--plum-soft); color: var(--plum); } .em-status.developer { background: var(--backer-soft); color: var(--backer-ink); } .em-status.bank, .em-status.dfi, .em-status.government, .em-status.researcher, .em-status.other { background: var(--surface-2); color: var(--ink-3); } /* ---- Active-filters strip (promoted as a general component) ---- */ .active-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; font-size: 12px; color: var(--ink-3); } .active-filters .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .active-filters .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--backer-soft); color: var(--backer-ink); font-size: 12px; font-weight: 600; } .active-filters .chip .rm, .active-filters .chip button { width: 18px; height: 18px; border-radius: 50%; border: none; background: none; color: var(--backer-ink); display: grid; place-items: center; cursor: pointer; font-size: 9px; opacity: .65; text-decoration: none; } .active-filters .chip .rm:hover, .active-filters .chip button:hover { opacity: 1; background: rgba(0,0,0,.05); color: var(--backer-ink); } .active-filters .clear { margin-left: auto; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--ink-3); } .active-filters .clear:hover { color: var(--ink); text-decoration: underline; } /* Small uppercase eyebrow used inline inside .em-pcell .psub on the directory list view (precedes a headline value, separated by a .dot). Matches .cap visually but omits the bottom margin so it stays inline in a flex row. */ .dx-headline-cap { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } /* ---- Card grid ---- */ /* `grid-template-columns` (the fluid 330px-min, capped-at-3 track) is shared with `.ib-card-grid` - see the card-view block earlier in this file. Only the directory-specific deltas live here. `width: 100%` keeps the grid filling the `.ib-card-view` wrapper rather than shrinking to content width. */ .dx-cards { display: grid; gap: 16px; margin-bottom: 22px; width: 100%; } /* Stretch the card down to match the tallest sibling in its grid row. The grid already stretches `.ib-card-item` (the wrapper used by list.js), but `.dx-card` inside it would otherwise size to its own content and short-fall on advisor cards (2 .inv-meta rows) when sat next to investor / developer cards (3 rows) on the All tab. */ .dx-cards > .ib-card-item { display: flex; } .dx-cards > .ib-card-item > .dx-card { flex: 1; width: 100%; } /* ---- Org card ---- */ .dx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: border-color .12s, box-shadow .12s; } .dx-card:hover { border-color: var(--backer); box-shadow: 0 4px 12px rgba(0,0,0,.06); } .dx-card .dx-card-body { padding: 18px 20px 14px; flex: 1; } /* Title link - sits inside

      , inherits typography but suppresses underline. */ .dx-card .dx-card-name { color: var(--ink); text-decoration: none; } .dx-card .dx-card-name:hover { color: var(--backer); } /* Save heart - matches .pc-save (browse_projects card chrome). */ .dx-card .dx-card-save { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .92); border: none; color: var(--ink-3); display: grid; place-items: center; font-size: 12px; cursor: pointer; z-index: 2; transition: color .12s, background .12s; } .dx-card .dx-card-save:hover { color: var(--red); background: #fff; } .dx-card .dx-card-save.on { color: var(--red); } [data-bs-theme="dark"] .dx-card .dx-card-save { background: rgba(0, 0, 0, .35); } [data-bs-theme="dark"] .dx-card .dx-card-save:hover { background: rgba(0, 0, 0, .55); } .dx-card .card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding-right: 40px; /* leave room for the heart */ } .dx-card .logo { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; font-weight: 700; letter-spacing: .02em; flex-shrink: 0; border: 1px solid rgba(0,0,0,.04); } .dx-card .logo.blue { background: var(--blue-soft); color: var(--blue); } .dx-card .logo.amber { background: var(--amber-soft); color: var(--amber); } .dx-card .logo.plum { background: var(--plum-soft); color: var(--plum); } .dx-card .logo.green { background: var(--green-soft); color: var(--green); } .dx-card .logo.teal { background: var(--backer-soft); color: var(--backer-ink); } .dx-card .ttl { flex: 1; min-width: 0; } .dx-card h3 { font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.3; word-break: break-word; } .dx-card .meta { font-size: 11.5px; color: var(--ink-3); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 3px; } .dx-card .meta .dot { width: 2px; height: 2px; border-radius: 50%; background: var(--ink-4); } .dx-card .blurb { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 0 0 14px; /* Fixed 2-line slot. We deliberately avoid `-webkit-box` + line-clamp here because that display mode collapses to its content height and ignores `height` / `min-height`, so 1-line descriptions render shorter than the reserved slot. `truncate(200)` upstream keeps content short; the rare 3rd line is clipped by `overflow: hidden`. Cards with no description render an `Not specified` placeholder. */ height: 38px; overflow: hidden; } /* Role-specific labelled rows. Advisor cards only have 2 rows (Services, Jurisdictions) vs 3 on investor / developer cards (Ticket/Mandate/Geography and Sectors/Sub-sectors/Geography). The min-height reserves space for a phantom 3rd row so advisor cards on the advisor-only tab don't render visibly shorter than the same cards in mixed rows on the All tab. (3 rows × 22px + 2 × 10px gap + 14px padding ≈ 100px.) */ .dx-card .inv-meta { display: grid; gap: 10px; padding: 10px 0 4px; border-top: 1px solid var(--line-2); margin-bottom: 4px; min-height: 100px; align-content: start; } .dx-card .inv-meta .row { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline; min-height: 22px; } .dx-card .inv-meta .l { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .dx-card .inv-meta .v { font-size: 12.5px; color: var(--ink); font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; } .dx-card .inv-meta .v.mono { font-family: var(--font-mono); font-size: 13px; } /* "Not specified" placeholder - same font, weight, size and tone regardless of whether the parent `.v` is sans (Mandate, Geography, Services, ...) or `.v.mono` (Ticket). Without the explicit font-family override the mono parent inherits Fira Mono and reads visibly different from the rest. */ .dx-card .inv-meta .v .unset, .dx-card .inv-meta .v.mono .unset, .dx-card .blurb .unset { color: var(--ink-4); font-family: var(--font-sans); font-style: italic; font-weight: 400; font-size: 12px; } .dx-card .inv-meta .v .more { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); padding: 2px 6px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; } /* Card foot - mirrors .pc-foot from browse_projects (full-width banded footer with .meta strip on the left and the view-profile eye link on the right). All children share a single 28px vertical centreline. */ .dx-card .card-foot { padding: 8px 16px; border-top: 1px solid var(--line-2); background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; } .dx-card .card-foot > * { align-self: center; } .dx-card .card-foot .meta { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 11.5px; line-height: 1; flex-wrap: nowrap; } .dx-card .card-foot .meta span { display: inline-flex; align-items: center; gap: 5px; line-height: 1; } .dx-card .card-foot .meta i { color: var(--ink-4); font-size: 11px; line-height: 1; } .dx-card .card-foot .meta b { line-height: 1; } .dx-card .card-foot .meta .clock i { color: var(--backer); } .dx-card .card-foot .meta .engagements.on { color: var(--backer-ink); font-weight: 500; } .dx-card .card-foot .meta .engagements.on b { color: var(--backer); font-weight: 700; } .dx-card .card-foot .meta .engagements.on i { color: var(--backer); } .dx-card .card-foot .view { width: 28px; height: 28px; border-radius: 7px; color: var(--backer); display: inline-grid; place-items: center; font-size: 12px; text-decoration: none; flex-shrink: 0; transition: background .12s, color .12s; } .dx-card .card-foot .view:hover { background: var(--backer-soft); color: var(--backer-ink); } /* Directory list rows are NOT wholly clickable - only the .pname link and the .row-actions buttons are interactive. Override the .em-table inherited cursor + hover-tint so rows don't look like buttons. */ #organisationsDirectoryTable tbody tr { cursor: default; } #organisationsDirectoryTable tbody tr:hover { background: transparent; } /* Mini chip used inside .dx-card .inv-meta value rows. Tighter than .service-chips because the value column shares 84px with the row label. */ .dx-mini-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 11px; font-weight: 500; border: 1px solid var(--line-2); } /* Geography .flag tweaks for the directory table cell. */ .flag .lbl { color: var(--ink-2); font-size: 12px; } .flag.dx-flag-multi .lbl { color: var(--ink-3); font-size: 11.5px; } /* ---- In-cell chip cluster (sector coverage column) ---- */ .dx-cell-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; max-width: 220px; } .dx-cell-chips .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 11px; font-weight: 500; border: 1px solid var(--line-2); } .dx-cell-chips .chip .ico { color: var(--backer); font-size: 7px; } .dx-cell-chips .more { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); padding: 2px 6px; border-radius: 999px; border: 1px dashed var(--line); } /* Em-dash for non-applicable cells */ .dx-cell-na { color: var(--ink-4); } /* Responsive: at narrower widths, hide the Joined column for breathing room */ @media (max-width: 1100px) { .em-table .col-joined { display: none; } } /* ===================================================================== 19. PAGE: SAVED SEARCHES (.ss-*) ===================================================================== */ /* Summary strip - aggregate stats card pinned above the form/cards list. Mirrors the outcome-strip pattern from *_summary pages. Goes on a .card-body so it inherits .card's chrome but overrides the default column flex-direction inherited from .card. */ .ss-summary { margin-bottom: 18px; } .ss-summary-body { display: flex !important; flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px var(--card-pad) !important; } .ss-summary-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 280px; } .ss-summary-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--backer-soft); color: var(--backer); display: grid; place-items: center; flex-shrink: 0; font-size: 15px; } .ss-summary-head { display: flex; flex-direction: column; min-width: 0; } .ss-summary-title { font-size: 13.5px; font-weight: 600; color: var(--ink); } .ss-summary-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; } .ss-summary-pills { display: flex; gap: 8px; flex-wrap: wrap; } .ss-summary-pills .pill strong { font-weight: 600; } /* Page-head form-toggle close button - lives in .pf-panel-head, pushed right. */ .ss-form-head-close { margin-left: auto; } /* Section heading row between the form and the cards list. */ .ss-section-head { margin: 28px 0 14px; display: flex; flex-direction: column; gap: 4px; } .ss-section-head h2 { font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.015em; margin: 0; } .ss-section-head .ss-section-sub { font-size: 13px; color: var(--ink-3); margin: 0; } /* Saved-search card row - full-width, 2-column internal grid (body + rail). */ .ss-card { display: grid; grid-template-columns: 1fr 200px; gap: 0; margin-bottom: 14px; overflow: hidden; } .ss-card-body { padding: 18px 22px; min-width: 0; } .ss-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ss-card-title { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .ss-card-chips .pill.ghost i { font-size: 9px; color: var(--ink-4); } .ss-card-chips .pill.mono { font-family: var(--font-mono); } .ss-card-meta { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 10px; flex-wrap: wrap; } .ss-card-meta .sep { color: var(--ink-4); } .ss-card-meta .new-dot i { font-size: 6px; color: var(--green); margin-right: 4px; vertical-align: middle; } /* Right rail - match-count stat, View link, icon actions. */ .ss-card-rail { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 14px 22px; border-left: 1px solid var(--line-2); background: var(--surface-2); min-width: 180px; } .ss-card-rail-stat { text-align: center; } .ss-card-rail-stat .n { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; line-height: 1; } .ss-card-rail-stat .l { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; } .ss-card-rail-view { font-size: 12px; padding: 4px 8px; } .ss-card-rail-view i { margin-left: 4px; margin-right: 0; font-size: 9px; } .ss-card-rail-actions { display: flex; gap: 4px; } .ss-card-rail-actions form { display: inline; } .ss-card-rail-actions .btn-icon.is-muted { color: var(--backer); } .ss-card-rail-actions .btn-icon.ss-danger:hover { background: var(--red-soft); color: var(--red); } /* Muted + zero-match modifier states. */ .ss-card.muted { opacity: .82; } .ss-card.muted .ss-card-rail-stat .n { color: var(--ink-4); } .ss-card.zero .ss-card-rail-stat .n { color: var(--ink-4); } .ss-card.zero .ss-card-rail-view { color: var(--ink-4); pointer-events: none; } /* Amber-soft "broaden criteria" hint, only rendered when match count is 0. */ .ss-card-hint { display: flex; align-items: center; gap: 8px; background: var(--amber-soft); color: var(--ink-2); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; } .ss-card-hint i { color: var(--amber); font-size: 11px; flex-shrink: 0; } .ss-card-hint .btn-text { font-size: 12.5px; padding: 0; line-height: inherit; vertical-align: baseline; } /* Responsive: under 900px the rail collapses underneath the body as a horizontal strip with a top border instead of a left border. */ @media (max-width: 900px) { .ss-card { grid-template-columns: 1fr; } .ss-card-rail { border-left: 0; border-top: 1px solid var(--line-2); flex-direction: row; justify-content: flex-start; min-width: 0; padding: 12px 18px; gap: 14px; } .ss-card-rail-stat { display: flex; align-items: baseline; gap: 6px; text-align: left; } .ss-card-rail-stat .n { font-size: 20px; } .ss-card-rail-stat .l { margin-top: 0; } .ss-card-rail-view { margin-left: auto; } } @media (max-width: 560px) { .ss-card-rail { flex-direction: column; align-items: stretch; } .ss-card-rail-view { width: 100%; margin-left: 0; text-align: center; } .ss-card-rail-actions { justify-content: center; } .ss-summary-body { flex-direction: column; align-items: flex-start; gap: 12px; } .ss-summary-pills { width: 100%; } } /* ===================================================================== 20. PAGE: ADMIN Ported from references/mocks/{overview,users,organisations,activity, lookups}.html. Most rules are page-scoped under #admin-page so they can't leak into other pages that use the same selectors (.pager, .kv-row, .row-actions etc. all exist globally with different chrome). ===================================================================== */ #admin-page { --row-gap: 14px; } /* ── 20A. Shared admin chrome ──────────────────────────────────────────── */ /* Status tab cards used by Users + Organisations pages */ #admin-page .stat-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; } #admin-page .stat-tabs.tabs-4 { grid-template-columns: repeat(4, 1fr); } #admin-page .stat-tabs.tabs-6 { grid-template-columns: repeat(6, 1fr); } #admin-page .stat-tab { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: all .12s; text-decoration: none; color: inherit; display: block; position: relative; } #admin-page .stat-tab:hover { background: var(--backer-softer); } #admin-page .stat-tab.on, #admin-page .stat-tab.on:hover { border-color: var(--backer); background: var(--surface); } #admin-page .stat-tab .lbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; } #admin-page .stat-tab .lbl .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); display: inline-block; } #admin-page .stat-tab.amber .lbl .dot { background: var(--amber); } #admin-page .stat-tab.green .lbl .dot { background: var(--green); } #admin-page .stat-tab.red .lbl .dot { background: var(--red); } #admin-page .stat-tab.blue .lbl .dot { background: var(--blue); } #admin-page .stat-tab .v { font-family: var(--font-sans); font-weight: 600; font-size: 24px; line-height: 1; margin-top: 8px; color: var(--ink); letter-spacing: -0.01em; } #admin-page .stat-tab .sub { font-size: 11px; color: var(--ink-3); margin-top: 4px; font-family: var(--font-mono); } /* Users page: org cell typography mirrors .user-cell - bold name + grey country sub-line. */ #admin-page .u-table td.org-cell .org-link { text-decoration: none; } #admin-page .u-table td.org-cell .org-link b { font-size: 13px; color: var(--ink); font-weight: 500; } #admin-page .u-table td.org-cell .org-link:hover b { color: var(--backer); } #admin-page .u-table td.org-cell .org-sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.3; margin-top: 2px; } /* Clear-filters link sits inside .fbar - vertically aligned with .fbtn (36px). */ #admin-page .bp-clear-filters { display: inline-flex; align-items: center; height: 36px; padding: 0 8px; font-size: 12.5px; color: var(--ink-3); text-decoration: none; background: transparent; border: 0; } #admin-page .bp-clear-filters:hover { color: var(--ink); } /* Manage-user modal: section labels + account-actions grid. */ #editUserModal .admin-section-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; } #editUserModal .admin-section-actions { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); } #editUserModal .admin-actions-grid { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } #editUserModal .admin-act-btn { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; font-weight: 500; text-align: left; } #editUserModal .admin-act-btn i { width: 14px; text-align: center; } #editUserModal .admin-act-btn[hidden] { display: none; } /* Bulk action bar (selected-row toolbar). Light card-style surface to match the admin toolbar above it. Brand-tinted left border serves as the "active selection" cue. */ #admin-page .bulk-bar { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--backer); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; box-shadow: var(--shadow-card); } #admin-page .bulk-bar .count { background: var(--backer-soft); color: var(--backer-ink); padding: 4px 10px; border-radius: 6px; font-weight: 600; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; } #admin-page .bulk-bar .label { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; white-space: nowrap; } #admin-page .bulk-bar .spacer { flex: 1; } #admin-page .bulk-bar button { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); padding: 6px 11px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s, color .12s; } #admin-page .bulk-bar button:hover { background: var(--backer-soft); border-color: var(--backer); color: var(--backer-ink); } #admin-page .bulk-bar button.danger { color: var(--red); border-color: var(--red-soft); } #admin-page .bulk-bar button.danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); } #admin-page .bulk-bar button.clear { border-color: transparent; background: transparent; color: var(--ink-3); } #admin-page .bulk-bar button.clear:hover { background: var(--surface-2); color: var(--ink); } /* Disabled (e.g. Approve / Reactivate with no eligible verified row selected). pointer-events stay on so the explanatory title tooltip still shows. */ #admin-page .bulk-bar button:disabled { opacity: .42; cursor: not-allowed; } #admin-page .bulk-bar button:disabled:hover { background: var(--surface); border-color: var(--line); color: var(--ink-2); } #admin-page .bulk-bar .divider { width: 1px; height: 22px; background: var(--line); margin: 0 2px; } /* Admin pages use the canonical global `.pager` token (tight 4px button cluster) - no page-scoped override. The old `#admin-page .pager` rule (space-between / gap:0 / padding) dated from the removed `.pag-buttons` era when `.pager` was the OUTER count+buttons bar; the admin_pager macro now supplies its own `d-flex justify-content-between` wrapper, so that override only distorted the button cluster (spread out + touching numbers) versus every other Family-1 pager. Removed 2026-06-05. `.pag-buttons` legacy cluster was removed 2026-06-04 when admin_activity migrated to the canonical `.pager` + `
        ` family (admin_pager macro). */ /* Row-action button class. Composes with the existing global .row-actions container (section 8). The mocks redeclared .row-actions identically; only the .ra-btn child class is new. */ #admin-page .row-actions .ra-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; font-size: 11px; color: var(--ink-3); cursor: pointer; } #admin-page .row-actions .ra-btn:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface-2); } #admin-page .row-actions .ra-btn.primary { background: var(--green); border-color: var(--green); color: #fff; } #admin-page .row-actions .ra-btn.primary:hover { background: var(--backer-ink); border-color: var(--backer-ink); } #admin-page .row-actions .ra-btn.danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); } /* Keep urgent row-actions visible (pending users etc.) */ #admin-page tr.pending .row-actions, #admin-page .row-actions.always { opacity: 1; } /* ── 20B. Overview page ────────────────────────────────────────────────── */ /* Alert strip */ #admin-page .ad-alerts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; } #admin-page .ad-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; } #admin-page .ad-alert::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink-4); } #admin-page .ad-alert.amber::before { background: var(--amber); } #admin-page .ad-alert.red::before { background: var(--red); } #admin-page .ad-alert.teal::before { background: var(--backer); } #admin-page .ad-alert.green::before { background: var(--green); } #admin-page .ad-alert .ico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; font-size: 13px; } #admin-page .ad-alert.amber .ico { background: var(--amber-soft); color: var(--amber); } #admin-page .ad-alert.red .ico { background: var(--red-soft); color: var(--red); } #admin-page .ad-alert.teal .ico { background: var(--backer-soft); color: var(--backer-ink); } #admin-page .ad-alert.green .ico { background: var(--green-soft); color: var(--green); } #admin-page .ad-alert .num { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1; color: var(--ink); letter-spacing: -0.01em; } #admin-page .ad-alert .num .unit { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-left: 4px; } #admin-page .ad-alert .lbl { font-size: 12px; color: var(--ink-3); margin-top: 4px; } #admin-page .ad-alert .lbl a { color: var(--backer); font-weight: 500; text-decoration: none; } #admin-page .ad-alert .lbl a:hover { text-decoration: underline; } /* KPI strip */ #admin-page .ad-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; } #admin-page .ad-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 12px; } #admin-page .ad-kpi .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } #admin-page .ad-kpi .v { font-family: var(--font-sans); font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: -0.015em; color: var(--ink); } #admin-page .ad-kpi .v .ccy { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-right: 3px; } #admin-page .ad-kpi .delta { font-size: 11px; font-weight: 600; color: var(--green); margin-left: 6px; font-family: var(--font-mono); } #admin-page .ad-kpi .delta.down { color: var(--red); } #admin-page .ad-kpi .delta.flat { color: var(--ink-4); } #admin-page .ad-kpi .spark { margin-top: 10px; height: 28px; display: block; } #admin-page .ad-kpi .sub { font-size: 11px; color: var(--ink-3); margin-top: 8px; } /* Click-through wrapper for KPI sparklines. Resets native