/* SHARED_INVESTOR - Investor Portal styles * REM-only (1px = 0.0625rem). Light/dark via .dark on . * Accent color is injected per-site via --investor-accent. */ :root { --investor-accent: #4f46e5; } /* ===== Layout: left nav + content ===== */ .inv-cols { display: flex; min-height: calc(100vh - 3.75rem); } .inv-left { width: 16.25rem; min-width: 16.25rem; flex-shrink: 0; position: sticky; top: 3.75rem; height: calc(100vh - 3.75rem); display: flex; flex-direction: column; border-right: 0.0625rem solid; overflow: hidden; } .dark .inv-left { border-color: #374151; background: #111827; } html:not(.dark) .inv-left { border-color: #e5e7eb; background: #f9fafb; } .inv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: calc(100vh - 3.75rem); position: sticky; top: 3.75rem; } /* ===== Brand + search (sidebar top) ===== */ .inv-brand { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 0.875rem 0.625rem; } .inv-brand-badge { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--investor-accent); font-size: 0.875rem; } .inv-brand-name { font-weight: 700; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inv-brand-tag { font-size: 0.6875rem; opacity: 0.6; } .inv-search-wrap { padding: 0 0.875rem 0.75rem; } .inv-search-input { width: 100%; box-sizing: border-box; border-radius: 0.5rem; border: 0.0625rem solid; padding: 0.5rem 0.75rem; font-size: 0.8125rem; min-height: 2.25rem; outline: none; } .dark .inv-search-input { background: #1f2937; border-color: #374151; color: #f3f4f6; } html:not(.dark) .inv-search-input { background: #fff; border-color: #e5e7eb; color: #111827; } .inv-search-input:focus { border-color: var(--investor-accent); } /* ===== Nav ===== */ .inv-nav { flex: 1; overflow-y: auto; padding: 0.375rem; } .inv-nav-item { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem 0.625rem; border: none; background: none; cursor: pointer; border-radius: 0.5rem; transition: background 0.15s; min-height: 2.75rem; color: inherit; font-size: 0.8125rem; font-weight: 600; text-align: left; } .inv-nav-item:hover { background: rgba(120, 120, 140, 0.12); } .inv-nav-item.active { background: color-mix(in srgb, var(--investor-accent) 14%, transparent); color: var(--investor-accent); } .inv-nav-icon { flex-shrink: 0; width: 1.25rem; text-align: center; font-size: 0.875rem; } /* ===== Disclaimer (sidebar footer) ===== */ .inv-disclaimer { flex-shrink: 0; border-top: 0.0625rem solid; padding: 0.625rem 0.875rem; font-size: 0.6875rem; line-height: 1.4; opacity: 0.72; overflow-y: auto; max-height: 9rem; } .dark .inv-disclaimer { border-color: #374151; } html:not(.dark) .inv-disclaimer { border-color: #e5e7eb; } /* ===== Content header (mobile bar) ===== */ .inv-topbar { display: none; align-items: center; gap: 0.625rem; padding: 0.5rem 1rem; border-bottom: 0.0625rem solid; min-height: 3rem; flex-shrink: 0; } .dark .inv-topbar { border-color: #374151; } html:not(.dark) .inv-topbar { border-color: #e5e7eb; } .inv-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border: none; background: none; border-radius: 0.5rem; cursor: pointer; color: inherit; } .inv-icon-btn:hover { background: rgba(120,120,140,0.12); } /* ===== Content scroll area ===== */ .inv-content { flex: 1; overflow-y: auto; padding: 1.75rem 2rem; } .inv-content-inner { max-width: 56rem; margin: 0 auto; } /* ===== Typography ===== */ .inv-section-head { margin-bottom: 1.25rem; } .inv-h1 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; } .inv-h2 { font-size: 1.0625rem; font-weight: 700; margin: 1.75rem 0 0.75rem; } .inv-sub { font-size: 0.9375rem; opacity: 0.7; margin-top: 0.375rem; } .inv-lead { font-size: 1rem; line-height: 1.6; margin: 0.75rem 0 1.25rem; } .inv-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .inv-chip { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 999rem; background: rgba(120,120,140,0.14); } /* ===== CTA buttons ===== */ .inv-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .inv-btn { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; border-radius: 0.625rem; padding: 0.625rem 1.125rem; font-size: 0.875rem; font-weight: 600; min-height: 2.75rem; border: 0.0625rem solid transparent; text-decoration: none; } .inv-btn-primary { background: var(--investor-accent); color: #fff; } .inv-btn-primary:hover { filter: brightness(1.07); } .inv-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .inv-btn-ghost { background: transparent; border-color: currentColor; color: var(--investor-accent); } .inv-btn-ghost:hover { background: color-mix(in srgb, var(--investor-accent) 10%, transparent); } /* ===== Round card / key-value ===== */ .inv-round-card, .inv-kv { margin-top: 1.25rem; border: 0.0625rem solid; border-radius: 0.75rem; overflow: hidden; } .dark .inv-round-card, .dark .inv-kv { border-color: #374151; } html:not(.dark) .inv-round-card, html:not(.dark) .inv-kv { border-color: #e5e7eb; } .inv-round-line, .inv-kv-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; font-size: 0.875rem; } .inv-round-line + .inv-round-line, .inv-kv-row + .inv-kv-row { border-top: 0.0625rem solid; } .dark .inv-round-line + .inv-round-line, .dark .inv-kv-row + .inv-kv-row { border-color: #374151; } html:not(.dark) .inv-round-line + .inv-round-line, html:not(.dark) .inv-kv-row + .inv-kv-row { border-color: #f1f5f9; } .inv-round-line span, .inv-kv-row span { opacity: 0.7; } /* ===== Metric grid ===== */ .inv-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.875rem; } .inv-metric { border: 0.0625rem solid; border-radius: 0.75rem; padding: 1rem; text-align: center; } .dark .inv-metric { border-color: #374151; background: #111827; } html:not(.dark) .inv-metric { border-color: #e5e7eb; background: #fff; } .inv-metric-value { font-size: 1.5rem; font-weight: 800; color: var(--investor-accent); } .inv-metric-label { font-size: 0.8125rem; font-weight: 600; margin-top: 0.25rem; } .inv-metric-basis { font-size: 0.6875rem; opacity: 0.55; margin-top: 0.25rem; } /* ===== Use-of-funds bars ===== */ .inv-bars { display: flex; flex-direction: column; gap: 0.875rem; } .inv-bar-head { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; } .inv-bar-track { height: 0.625rem; border-radius: 999rem; background: rgba(120,120,140,0.18); overflow: hidden; } .inv-bar-fill { height: 100%; border-radius: 999rem; background: var(--investor-accent); } /* ===== Market ===== */ .inv-market-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.875rem; } .inv-market-card { border: 0.0625rem solid; border-radius: 0.75rem; padding: 1.125rem; } .dark .inv-market-card { border-color: #374151; background: #111827; } html:not(.dark) .inv-market-card { border-color: #e5e7eb; background: #fff; } .inv-market-tier { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; opacity: 0.6; } .inv-market-value { font-size: 1.375rem; font-weight: 800; color: var(--investor-accent); margin: 0.25rem 0; } .inv-market-desc { font-size: 0.8125rem; opacity: 0.8; line-height: 1.45; } .inv-list { list-style: disc; padding-left: 1.25rem; font-size: 0.875rem; line-height: 1.7; } /* ===== Documents / data room ===== */ .inv-legend { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 0.75rem; align-items: center; border: 0.0625rem solid; border-radius: 0.75rem; padding: 0.875rem 1rem; margin-bottom: 1.25rem; font-size: 0.8125rem; } .dark .inv-legend { border-color: #374151; } html:not(.dark) .inv-legend { border-color: #e5e7eb; } .inv-legend-text { opacity: 0.78; } .inv-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.875rem; } .inv-doc-card { border: 0.0625rem solid; border-radius: 0.75rem; padding: 1rem; display: flex; flex-direction: column; } .dark .inv-doc-card { border-color: #374151; background: #111827; } html:not(.dark) .inv-doc-card { border-color: #e5e7eb; background: #fff; } .inv-doc-card.is-locked { background: repeating-linear-gradient(45deg, transparent, transparent 0.75rem, rgba(120,120,140,0.04) 0.75rem, rgba(120,120,140,0.04) 1.5rem); } .inv-doc-top { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem; } .inv-doc-title { font-size: 0.9375rem; font-weight: 700; } .inv-doc-summary { font-size: 0.8125rem; opacity: 0.78; line-height: 1.45; margin: 0.375rem 0 0.875rem; flex: 1; } .inv-doc-foot { margin-top: auto; } .inv-doc-btn { display: inline-flex; align-items: center; gap: 0.4375rem; cursor: pointer; border-radius: 0.5rem; padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 600; min-height: 2.75rem; border: 0.0625rem solid; background: transparent; color: var(--investor-accent); border-color: color-mix(in srgb, var(--investor-accent) 40%, transparent); text-decoration: none; } .inv-doc-btn:hover { background: color-mix(in srgb, var(--investor-accent) 10%, transparent); } .inv-doc-btn-locked { color: inherit; opacity: 0.85; border-color: rgba(120,120,140,0.4); } .inv-doc-flag { font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.4375rem; border-radius: 999rem; background: rgba(234,179,8,0.16); color: #a16207; } .dark .inv-doc-flag { color: #fde68a; } /* ===== Tier badges ===== */ .inv-badge { font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 999rem; } .inv-badge-public { background: rgba(34,197,94,0.16); color: #15803d; } .dark .inv-badge-public { color: #86efac; } .inv-badge-reg { background: rgba(59,130,246,0.16); color: #1d4ed8; } .dark .inv-badge-reg { color: #93c5fd; } .inv-badge-t2 { background: rgba(168,85,247,0.16); color: #7e22ce; } .dark .inv-badge-t2 { color: #d8b4fe; } .inv-badge-t3 { background: rgba(239,68,68,0.16); color: #b91c1c; } .dark .inv-badge-t3 { color: #fca5a5; } /* ===== Team ===== */ .inv-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.875rem; } .inv-team-card { display: flex; gap: 0.875rem; border: 0.0625rem solid; border-radius: 0.75rem; padding: 1rem; } .dark .inv-team-card { border-color: #374151; background: #111827; } html:not(.dark) .inv-team-card { border-color: #e5e7eb; background: #fff; } .inv-team-avatar { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: var(--investor-accent); font-size: 0.875rem; } .inv-team-name { font-weight: 700; font-size: 0.9375rem; } .inv-team-title { font-size: 0.8125rem; color: var(--investor-accent); font-weight: 600; } .inv-team-bg { font-size: 0.8125rem; opacity: 0.78; line-height: 1.45; margin-top: 0.375rem; } /* ===== Steps / FAQ / glossary ===== */ .inv-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 0.75rem; } .inv-steps li { counter-increment: step; position: relative; padding-left: 2.5rem; } .inv-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--investor-accent); color: #fff; font-size: 0.8125rem; font-weight: 700; } .inv-steps li strong { display: block; font-size: 0.9375rem; } .inv-steps li span { font-size: 0.8125rem; opacity: 0.78; } .inv-faq { display: flex; flex-direction: column; gap: 0.5rem; } .inv-faq-item { border: 0.0625rem solid; border-radius: 0.625rem; padding: 0.25rem 0.875rem; } .dark .inv-faq-item { border-color: #374151; } html:not(.dark) .inv-faq-item { border-color: #e5e7eb; } .inv-faq-item summary { cursor: pointer; font-weight: 600; font-size: 0.875rem; padding: 0.625rem 0; min-height: 2.75rem; display: flex; align-items: center; } .inv-faq-answer { font-size: 0.8125rem; opacity: 0.82; line-height: 1.55; padding: 0 0 0.75rem; } .inv-glossary dt { font-weight: 700; font-size: 0.875rem; margin-top: 0.75rem; color: var(--investor-accent); } .inv-glossary dd { font-size: 0.8125rem; opacity: 0.82; line-height: 1.5; margin: 0.125rem 0 0; } /* ===== Form ===== */ .inv-form { display: flex; flex-direction: column; gap: 0.875rem; max-width: 38rem; } .inv-field { display: flex; flex-direction: column; gap: 0.3125rem; } .inv-field-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; } .inv-field label { font-size: 0.8125rem; font-weight: 600; } .inv-field input, .inv-field select, .inv-field textarea { width: 100%; box-sizing: border-box; border-radius: 0.5rem; border: 0.0625rem solid; padding: 0.5625rem 0.75rem; font-size: 0.875rem; min-height: 2.75rem; outline: none; font-family: inherit; } .dark .inv-field input, .dark .inv-field select, .dark .inv-field textarea { background: #1f2937; border-color: #374151; color: #f3f4f6; } html:not(.dark) .inv-field input, html:not(.dark) .inv-field select, html:not(.dark) .inv-field textarea { background: #fff; border-color: #e5e7eb; color: #111827; } .inv-field input:focus, .inv-field select:focus, .inv-field textarea:focus { border-color: var(--investor-accent); } .inv-field textarea { min-height: 4.5rem; resize: vertical; } .inv-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; line-height: 1.5; } .inv-check input { margin-top: 0.1875rem; width: 1rem; height: 1rem; flex-shrink: 0; } .inv-form-disc { font-size: 0.6875rem; opacity: 0.6; line-height: 1.5; } .inv-form-msg { font-size: 0.8125rem; min-height: 1.25rem; } .inv-form-msg-info { opacity: 0.7; } .inv-form-msg-error { color: #dc2626; } .inv-form-msg-success { color: #16a34a; } /* ===== Callouts ===== */ .inv-callout { display: flex; gap: 0.625rem; align-items: flex-start; border-radius: 0.625rem; padding: 0.75rem 0.875rem; font-size: 0.8125rem; line-height: 1.5; margin: 1.25rem 0; } .inv-callout i { margin-top: 0.125rem; } .inv-callout-info { background: rgba(59,130,246,0.1); color: inherit; } .inv-callout-warn { background: rgba(234,179,8,0.12); color: inherit; } /* ===== Search results ===== */ .inv-search-list { display: flex; flex-direction: column; gap: 0.5rem; } .inv-search-hit { display: flex; flex-direction: column; gap: 0.125rem; text-align: left; cursor: pointer; border: 0.0625rem solid; border-radius: 0.625rem; padding: 0.75rem 0.875rem; background: none; color: inherit; } .dark .inv-search-hit { border-color: #374151; } html:not(.dark) .inv-search-hit { border-color: #e5e7eb; } .inv-search-hit:hover { border-color: var(--investor-accent); } .inv-search-type { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--investor-accent); } .inv-search-title { font-weight: 600; font-size: 0.875rem; } .inv-search-sub { font-size: 0.75rem; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== Empty state ===== */ .inv-empty { text-align: center; opacity: 0.6; padding: 4rem 1rem; } .inv-empty i { font-size: 1.75rem; margin-bottom: 0.75rem; } /* ===== Mobile ===== */ .inv-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40; } .inv-overlay.hidden { display: none; } @media (max-width: 63.9375rem) { .inv-topbar { display: flex; } .inv-left { position: fixed; left: 0; top: 0; z-index: 50; height: 100vh; transform: translateX(-100%); transition: transform 0.25s ease; } .inv-left.open { transform: translateX(0); } .inv-main { height: auto; position: static; } .inv-content { height: auto; } .inv-field-2col { grid-template-columns: 1fr; } .inv-content { padding: 1.25rem 1rem; } }