/* ========================================================================== SEC Compliance Checker - Kingscrowd Brand Theme Color Palette: Purple (#5B2EEA) with deep accents ========================================================================== */ /* CSS Custom Properties */ :root { /* Primary Colors */ --color-primary: #5B2EEA; --color-primary-light: #7A4FFC; --color-primary-dark: #4A1FD4; --color-accent: #5B2EEA; --color-accent-hover: #4A1FD4; /* Backgrounds */ --color-bg: #f8fafc; --color-card: #ffffff; --color-card-border: #e2e8f0; /* Text */ --color-text: #1e293b; --color-text-secondary: #64748b; --color-text-muted: #94a3b8; /* Status Colors */ --color-red: #dc2626; --color-red-bg: #fef2f2; --color-red-border: #fecaca; --color-yellow: #d97706; --color-yellow-bg: #fffbeb; --color-yellow-border: #fde68a; --color-green: #16a34a; --color-green-bg: #f0fdf4; --color-green-border: #bbf7d0; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* Typography */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.5rem; --font-size-2xl: 1.875rem; /* Borders & Shadows */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 200ms ease; } /* ========================================================================== CrowdCheck Brand Override Applied when the HTML shell sets data-brand="crowdcheck" on . ========================================================================== */ [data-brand="crowdcheck"] { --color-primary: #E86C2C; --color-primary-light: #F28B4C; --color-primary-dark: #C85A20; --color-accent: #E86C2C; --color-accent-hover: #C85A20; } [data-brand="crowdcheck"] input[type="text"]:focus { box-shadow: 0 0 0 3px rgba(232, 108, 44, 0.15); } [data-brand="crowdcheck"] button:focus { box-shadow: 0 0 0 3px rgba(232, 108, 44, 0.3); } [data-brand="crowdcheck"] .tl-badge-upcoming { background: rgba(232, 108, 44, 0.08); border-color: rgba(232, 108, 44, 0.15); } [data-brand="crowdcheck"] .hdr-badge-info { background: rgba(232, 108, 44, 0.08); border-color: rgba(232, 108, 44, 0.15); } [data-brand="crowdcheck"] .cta-card { background: rgba(232, 108, 44, 0.04); border-color: rgba(232, 108, 44, 0.15); } [data-brand="crowdcheck"] .cta-btn-secondary:hover { background: rgba(232, 108, 44, 0.08); } /* Hero text uses ink, not brand orange, so the company name is not confused with the amber "At Risk" or red "Non-Compliant" status indicators next to it. Typography (size + weight) carries hierarchy; color carries semantics. */ [data-brand="crowdcheck"] .company-name { color: var(--color-text); } /* ========================================================================== Base Styles ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: 1.6; background: var(--color-bg); color: var(--color-text); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.embed { background: transparent; } /* ========================================================================== Layout ========================================================================== */ .container { max-width: 800px; margin: 0 auto; padding: var(--space-lg); } /* ========================================================================== Header ========================================================================== */ .header { background: #ffffff; color: var(--color-text); padding: var(--space-lg); margin: calc(-1 * var(--space-lg)); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--color-card-border); display: flex; align-items: center; gap: var(--space-lg); } .header-brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .header-logo { height: 40px; width: auto; } [data-brand="crowdcheck"] .header-logo { height: 48px; } .header-text { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--color-card-border); padding-left: var(--space-lg); } .header h1 { margin: 0; font-size: var(--font-size-lg); font-weight: 600; letter-spacing: -0.025em; color: var(--color-text); } .header p { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 400; } /* ========================================================================== Cards ========================================================================== */ .card { background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base); } .card:hover { box-shadow: var(--shadow-md); } /* ========================================================================== Form Elements ========================================================================== */ label { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; } /* Label row with help tooltip */ .label-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); } /* ========================================================================== Help Tooltip ========================================================================== */ .help-tooltip { position: relative; display: inline-flex; } .help-btn { width: 18px; height: 18px; padding: 0; font-size: 11px; font-weight: 600; line-height: 1; background: var(--color-card-border); color: var(--color-text-secondary); border-radius: 50%; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; } .help-btn:hover { background: var(--color-text-secondary); color: #ffffff; box-shadow: none; } .help-content { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 280px; padding: var(--space-sm) var(--space-md); background: var(--color-primary); color: #ffffff; font-size: var(--font-size-sm); font-weight: 400; text-transform: none; letter-spacing: normal; line-height: 1.5; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: opacity var(--transition-fast), visibility var(--transition-fast); z-index: 100; } .help-content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--color-primary); } .help-content strong { display: block; margin-bottom: var(--space-xs); color: #ffffff; } .help-content a { color: var(--color-green-border); text-decoration: underline; } .help-content a:hover { color: #ffffff; } .help-tooltip:hover .help-content, .help-btn:focus + .help-content { opacity: 1; visibility: visible; } .row { display: flex; gap: var(--space-sm); } input[type="text"] { flex: 1; padding: var(--space-sm) var(--space-md); font-family: var(--font-family); font-size: var(--font-size-base); border: 2px solid var(--color-card-border); border-radius: var(--radius-md); background: var(--color-card); color: var(--color-text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } input[type="text"]::placeholder { color: var(--color-text-muted); } input[type="text"]:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(91, 46, 234, 0.15); } button { padding: var(--space-sm) var(--space-lg); font-family: var(--font-family); font-size: var(--font-size-base); font-weight: 600; border: none; background: var(--color-accent); color: #ffffff; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); box-shadow: var(--shadow-sm); } button:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-md); } button:active { transform: translateY(1px); } button:focus { outline: none; box-shadow: 0 0 0 3px rgba(91, 46, 234, 0.3); } button:disabled { opacity: 0.6; cursor: not-allowed; } /* ========================================================================== Search Wrapper & Input Shell ========================================================================== */ .search-wrap { position: relative; } .input-wrap { position: relative; flex: 1; display: flex; align-items: center; } .input-wrap input[type="text"] { padding-left: 40px; padding-right: 40px; width: 100%; } .input-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-text-muted); pointer-events: none; z-index: 1; } .input-clear { all: unset; box-sizing: border-box; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: var(--color-text-muted); transition: background var(--transition-fast), color var(--transition-fast); z-index: 1; touch-action: manipulation; } .input-clear svg { width: 14px; height: 14px; } .input-clear:hover { background: var(--color-bg); color: var(--color-text-secondary); } .input-clear:active { transform: translateY(-50%); } .input-clear:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 0; } .input-spinner { position: absolute; right: 14px; top: 0; bottom: 0; margin: auto 0; width: 18px; height: 18px; border: 2px solid var(--color-card-border); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.7s linear infinite; z-index: 1; } /* ========================================================================== Typeahead Suggestions ========================================================================== */ .suggestions-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 0; list-style: none; list-style-type: none; background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); max-height: 440px; overflow-y: auto; z-index: 100; } .suggestions-list li { list-style: none; list-style-type: none; margin: 0; } .suggestion-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; min-height: 72px; cursor: pointer; border-radius: 0; transition: background 0.12s ease; } .suggestion-item + .suggestion-item { border-top: 1px solid #edf2f7; } .suggestion-item:hover, .suggestion-item.active { background: #f8fafc; } .suggestion-item.active { box-shadow: inset 3px 0 0 var(--color-accent); } .suggestion-avatar { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #ffffff; flex-shrink: 0; text-transform: uppercase; line-height: 1; letter-spacing: 0; } .suggestion-avatar-img { width: 44px; height: 44px; border-radius: 14px; object-fit: contain; background: #ffffff; border: 1px solid #edf2f7; flex-shrink: 0; } .suggestion-body { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 0; flex: 1; } .suggestion-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .suggestion-name { font-size: 1rem; font-weight: 600; color: var(--color-text); line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .suggestion-legal-name { font-size: var(--font-size-sm); font-weight: 400; color: var(--color-text-muted); line-height: 1.35; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .suggestion-legal-name mark { background: none; font-weight: 600; color: var(--color-accent); } .suggestion-cik { align-self: center; font-size: 11px; font-family: "SF Mono", "Menlo", "Consolas", "Fira Code", monospace; color: var(--color-text-muted); opacity: 0.8; background: var(--color-bg); border: 1px solid #edf2f7; padding: 4px 10px; border-radius: var(--radius-sm); flex-shrink: 0; letter-spacing: 0.02em; white-space: nowrap; transition: opacity 0.12s ease; } .suggestion-item:hover .suggestion-cik, .suggestion-item.active .suggestion-cik { background: var(--color-card); opacity: 1; } .suggestion-name mark { background: none; font-weight: 700; color: var(--color-accent); } .suggestions-list::-webkit-scrollbar { width: 6px; } .suggestions-list::-webkit-scrollbar-track { background: transparent; } .suggestions-list::-webkit-scrollbar-thumb { background: var(--color-card-border); border-radius: 3px; } .suggestions-list::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } .suggestions-list { scrollbar-width: thin; scrollbar-color: var(--color-card-border) transparent; } .suggestion-message { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px 16px; font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: default; } .suggestion-message .msg-spinner { width: 18px; height: 18px; border: 2px solid var(--color-card-border); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; } /* ========================================================================== Status Message ========================================================================== */ .status { margin-top: var(--space-md); margin-bottom: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .status.loading { color: var(--color-accent); } .status.error { color: var(--color-red); } /* Loading spinner */ .status.loading::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: var(--space-sm); border: 2px solid var(--color-accent); border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== Summary Card ========================================================================== */ .summary-card { position: relative; border-left: 5px solid var(--color-text-muted); } .summary-card.status-red { border-left-color: var(--color-red); } .summary-card.status-yellow { border-left-color: var(--color-yellow); } .summary-card.status-green { border-left-color: var(--color-green); } .summary-card.status-gray { border-left-color: var(--color-text-muted); } .summary-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); } .company-name-group { flex: 1; min-width: 0; } .company-name { margin: 0; font-size: var(--font-size-xl); font-weight: 700; color: var(--color-primary); letter-spacing: -0.025em; overflow-wrap: anywhere; } .company-aka { margin: 2px 0 0; font-size: var(--font-size-base); font-weight: 400; color: var(--color-text-secondary); overflow-wrap: anywhere; } .sec-edgar-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; color: var(--color-text-secondary); border-radius: 8px; text-decoration: none; transition: color var(--transition-fast), background var(--transition-fast); } .sec-edgar-link-label { font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; } .sec-edgar-link:hover { color: var(--color-accent); background: var(--color-bg); } .sec-edgar-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .sec-edgar-link-icon { width: 20px; height: 20px; display: block; } /* Quieter SEC link when used in the summary footer row. */ .sec-edgar-link--inline { display: inline-flex; padding: 2px 4px; margin: -2px -4px; vertical-align: baseline; font-weight: 500; flex-shrink: 0; } .sec-edgar-link--inline .sec-edgar-link-icon { width: 14px; height: 14px; } .sec-edgar-link--inline .sec-edgar-link-label { font-weight: 500; } .summary-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .share-wrap { position: relative; } .share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border: none; background: none; color: var(--color-text-secondary); border-radius: 8px; cursor: pointer; font-family: inherit; font-size: var(--font-size-sm); font-weight: 500; transition: color var(--transition-fast), background var(--transition-fast); } .share-btn:hover { color: var(--color-accent); background: var(--color-bg); } .share-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .share-btn-icon { width: 18px; height: 18px; display: block; flex-shrink: 0; } .share-btn-label { line-height: 1; } .share-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 180px; background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 100; padding: var(--space-xs) 0; } .share-dropdown.hidden { display: none; } .share-dropdown-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--color-text); cursor: pointer; transition: background var(--transition-fast); } .share-dropdown-item:hover { background: var(--color-bg); } .share-dropdown-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .share-dropdown-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-text-secondary); } /* ========================================================================== Status Hero (promoted status display) ========================================================================== */ .status-hero { margin-bottom: var(--space-md); } .status-hero-badge { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-lg); font-weight: 700; letter-spacing: -0.01em; } .status-hero-badge.red { color: var(--color-red); } .status-hero-badge.yellow { color: var(--color-yellow); } .status-hero-badge.green { color: var(--color-green); } .status-hero-badge.gray { color: var(--color-text-secondary); } .status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .status-dot.red { background: var(--color-red); } .status-dot.yellow { background: var(--color-yellow); } .status-dot.green { background: var(--color-green); } .status-dot.gray { background: var(--color-text-secondary); } .status-asterisk.info-tip { display: inline; width: auto; height: auto; border: none; border-radius: 0; font-size: inherit; font-weight: inherit; color: inherit; margin-left: 0; vertical-align: baseline; cursor: help; } .status-asterisk.info-tip::before { content: none; } .status-asterisk.info-tip::after { bottom: auto; top: calc(100% + 8px); width: 260px; font-size: 12px; font-weight: 400; letter-spacing: 0; } .status-explanation { display: block; margin-top: 2px; font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 400; line-height: 1.5; } .status-explanation-secondary { font-size: 12px; color: var(--color-text-muted); margin-top: 0; } /* ========================================================================== Summary Meta Line (CIK + FYE) ========================================================================== */ .summary-meta-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .summary-meta-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); } .meta-sep { margin: 0 var(--space-xs); } .fye-inferred-label { font-size: 11px; color: var(--color-text-muted); font-weight: 400; font-style: italic; } .fye-assumed-label { font-size: 11px; color: var(--color-status-yellow, #b8860b); font-weight: 500; font-style: italic; } /* ========================================================================== Budget Exhaustion Banner ========================================================================== */ .budget-banner { background: var(--color-yellow-bg); border: 1px solid var(--color-yellow-border); border-left: 4px solid var(--color-yellow); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-md); font-size: var(--font-size-sm); color: var(--color-text); line-height: 1.6; box-shadow: var(--shadow-sm); } .budget-banner strong { color: var(--color-yellow); } .budget-banner a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .budget-banner a:hover { color: var(--color-accent); } /* ========================================================================== Notices ========================================================================== */ .notices-card { display: flex; flex-direction: column; gap: var(--space-md); border-left: 4px solid var(--color-yellow); background: var(--color-yellow-bg); } .notices-card.neutral { border-left-color: var(--color-card-border); background: var(--color-card); } .notice-section + .notice-section { padding-top: var(--space-sm); border-top: 1px solid var(--color-yellow-border); } .notices-card.neutral .notice-section + .notice-section { border-top-color: var(--color-card-border); } .notice-title { margin: 0 0 var(--space-sm); font-size: var(--font-size-base); color: var(--color-primary); } .notices-card a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .notices-card a:hover { color: var(--color-primary-hover, var(--color-primary)); text-decoration-thickness: 2px; } /* ========================================================================== Status Badge ========================================================================== */ .status-badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; border-radius: var(--radius-sm); } .status-badge.red { background: var(--color-red-bg); color: var(--color-red); border: 1px solid var(--color-red-border); } .status-badge.yellow { background: var(--color-yellow-bg); color: var(--color-yellow); border: 1px solid var(--color-yellow-border); } .status-badge.green { background: var(--color-green-bg); color: var(--color-green); border: 1px solid var(--color-green-border); } .status-badge.gray { background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-card-border); } /* Status badge dot indicator */ .status-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* ========================================================================== Flags Section - Modern Minimal Design ========================================================================== */ .flags-container { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-md); } .flag-section { border-radius: var(--radius-lg); border: 1px solid var(--color-card-border); background: var(--color-card); overflow: visible; box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-base); } .flag-section:hover { border-color: var(--color-text-muted); } /* Subtle left accent border */ .flag-section.red { border-left: 3px solid var(--color-red); } .flag-section.yellow { border-left: 3px solid var(--color-yellow); } .flag-section.green { border-left: 3px solid var(--color-green); } .flag-section.advisory { border-left: 3px solid var(--color-text-muted); } /* Clean, minimal header */ .flag-header { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-md); margin: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; text-align: left; cursor: pointer; font-family: var(--font-family); transition: background var(--transition-fast); } .flag-header:hover { background: var(--color-bg); box-shadow: none; } .flag-header:active { transform: none; } .flag-header:focus { box-shadow: none; outline: none; } .flag-header:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } /* Status dot - small and subtle */ .flag-icon { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .flag-icon.red { background: var(--color-red); } .flag-icon.yellow { background: var(--color-yellow); } .flag-icon.green { background: var(--color-green); } .flag-icon.advisory { background: var(--color-text-muted); } /* Modern title - not shouty */ .flag-title { font-size: var(--font-size-sm); font-weight: 600; margin: 0; color: var(--color-text); } /* Item count as subtle badge(s) */ .flag-count { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 500; color: var(--color-text-muted); } /* Chevron - cleaner SVG-style using CSS */ .flag-chevron { width: 16px; height: 16px; position: relative; flex-shrink: 0; opacity: 0.4; transition: transform var(--transition-fast), opacity var(--transition-fast); } .flag-chevron::before { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-right: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); transform: translate(-50%, -70%) rotate(45deg); transition: transform var(--transition-fast); } .flag-header:hover .flag-chevron { opacity: 0.7; } .flag-section.collapsed .flag-chevron::before { transform: translate(-50%, -50%) rotate(-45deg); } /* Collapsible content */ .flag-content { padding: 0 var(--space-md) var(--space-md); overflow: hidden; transition: max-height var(--transition-base), padding var(--transition-base), opacity var(--transition-base); max-height: 2000px; opacity: 1; } .flag-section.collapsed .flag-content { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } /* Clean list styling */ .flag-list { margin: 0; padding: 0; list-style: none; } .flag-list li { position: relative; padding: var(--space-sm) 0; padding-left: var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.6; } .flag-list li::before { content: ''; position: absolute; left: 2px; top: 16px; width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-muted); } /* ========================================================================== Finding Rows - Structured compliance findings ========================================================================== */ .finding-row { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-card-border); } .finding-row:last-child { border-bottom: none; } .finding-row-filed { opacity: 0.85; } /* Match C-AR timeline: row uses sm base; round label is primary, "Filed …" matches .tl-status */ .finding-row-filed .finding-top { font-size: var(--font-size-sm); } .finding-row-filed .finding-label { font-weight: 600; color: var(--color-text); min-width: 0; } .finding-row-filed .tl-status { font-size: inherit; font-weight: 400; } .finding-row-withdrawn { opacity: 0.75; } .finding-row-withdrawn .finding-top { font-size: var(--font-size-sm); } .finding-row-withdrawn .finding-label { font-weight: 600; color: var(--color-text); min-width: 0; } .finding-row-withdrawn .tl-status { font-size: inherit; font-weight: 400; } .finding-top { display: flex; align-items: center; gap: var(--space-sm); } .finding-label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; } .finding-filenum { font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; margin-left: auto; font-variant-numeric: tabular-nums; flex-shrink: 0; } a.finding-filenum { text-decoration: none; cursor: pointer; transition: color var(--transition-fast); } a.finding-filenum:hover { color: var(--color-primary); text-decoration: underline; } a.finding-filenum:hover::after { opacity: 0.8; } .finding-metric { margin-left: auto; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; } .finding-metric-upcoming { color: var(--color-primary); } .finding-detail { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); padding-left: 28px; } .finding-reason { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.5; } /* C-AR timeline */ .car-timeline { display: flex; flex-direction: column; } .tl-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-card-border); font-size: var(--font-size-sm); } .tl-row:last-child { border-bottom: none; } .tl-icon { flex-shrink: 0; width: 20px; text-align: center; font-size: 14px; line-height: 1; } .tl-check { color: var(--color-green); } .tl-miss { color: var(--color-red); } .tl-warn { color: var(--color-yellow); font-weight: 700; } .tl-likely { color: var(--color-yellow); font-weight: 700; } .tl-fy { font-weight: 600; color: var(--color-text); white-space: nowrap; min-width: 56px; } .tl-status { color: var(--color-text-secondary); white-space: nowrap; } .tl-due { margin-left: auto; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .tl-filed-link { text-decoration: none; color: var(--color-text-secondary); } .tl-filed-link::after, a.finding-filenum::after { content: ''; display: inline-block; width: 11px; height: 11px; margin-left: 4px; vertical-align: middle; opacity: 0.5; background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M6.5 3.5H3a1 1 0 00-1 1V13a1 1 0 001 1h8.5a1 1 0 001-1V9.5'/%3E%3Cpath d='M9.5 2h4.5v4.5M14 2L7.5 8.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M6.5 3.5H3a1 1 0 00-1 1V13a1 1 0 001 1h8.5a1 1 0 001-1V9.5'/%3E%3Cpath d='M9.5 2h4.5v4.5M14 2L7.5 8.5'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .tl-filed-link:hover { color: var(--color-primary); text-decoration: underline; } .tl-filed-link:hover::after { opacity: 0.8; } .tl-upcoming { color: var(--color-primary); } .tl-withdrawn { color: var(--color-text-muted); font-weight: 700; } .tl-row-upcoming { background: var(--color-bg); border-radius: var(--radius-sm); padding-left: var(--space-xs); padding-right: var(--space-xs); } .tl-row-overdue { background: var(--color-yellow-bg); border-radius: var(--radius-sm); padding-left: var(--space-xs); padding-right: var(--space-xs); } /* ========================================================================== Inline Status Badges (Upcoming / Missing / Overdue) ========================================================================== */ .tl-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px; font-size: 11px; font-weight: 600; border-radius: 10px; white-space: nowrap; letter-spacing: 0.01em; line-height: 1.4; } .tl-badge-missing { background: var(--color-red-bg); color: var(--color-red); border: 1px solid var(--color-red-border); } .tl-badge-overdue { background: var(--color-yellow-bg); color: var(--color-yellow); border: 1px solid var(--color-yellow-border); } .tl-badge-upcoming { background: rgba(91, 46, 234, 0.08); color: var(--color-primary); border: 1px solid rgba(91, 46, 234, 0.15); } .tl-badge-likely { background: var(--color-yellow-bg); color: var(--color-yellow); border: 1px solid var(--color-yellow-border); } .tl-badge-advisory { background: var(--color-yellow-bg); color: var(--color-yellow); border: 1px solid var(--color-yellow-border); } .tl-badge-late { background: var(--color-yellow-bg); color: var(--color-yellow); border: 1px solid var(--color-yellow-border); } .tl-badge-ctr { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-card-border); } /* Milestone rows (C-TR terminated / resumed dividers) */ .tl-row-milestone { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-sm); font-size: 12px; color: var(--color-text-muted); border-bottom: 1px dashed var(--color-card-border); position: relative; background: var(--color-bg); border-radius: var(--radius-sm); } .tl-row-milestone::before, .tl-row-milestone::after { content: ""; flex: 1; height: 0; border-top: 1px dashed var(--color-card-border); } .tl-milestone-icon { display: inline-flex; align-items: center; justify-content: center; width: 10px; height: 10px; flex-shrink: 0; } .tl-milestone-icon svg { display: block; } .tl-row-terminated .tl-milestone-icon { color: var(--color-text-muted); } .tl-row-resumed .tl-milestone-icon { color: var(--color-primary); } .tl-milestone-text { font-weight: 600; white-space: nowrap; } .tl-milestone-link { color: var(--color-text-muted); text-decoration: none; white-space: nowrap; } .tl-milestone-link:hover { color: var(--color-primary); text-decoration: underline; } .tl-milestone-date { white-space: nowrap; } /* Gap annotation (between terminated and resumed milestones) */ .tl-row-gap { display: flex; align-items: center; justify-content: center; padding: var(--space-xs) var(--space-sm); border-bottom: none; } .tl-gap-text { font-size: 11px; font-style: italic; color: var(--color-text-muted); white-space: nowrap; } /* Section Header Mini-Badges */ .hdr-badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 10px; white-space: nowrap; line-height: 1.4; } .hdr-badge-red { background: var(--color-red-bg); color: var(--color-red); border: 1px solid var(--color-red-border); } .hdr-badge-yellow { background: var(--color-yellow-bg); color: var(--color-yellow); border: 1px solid var(--color-yellow-border); } .hdr-badge-info { background: rgba(91, 46, 234, 0.08); color: var(--color-primary); border: 1px solid rgba(91, 46, 234, 0.15); } .hdr-badge-muted { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-card-border); } .car-review-note { margin: var(--space-sm) 0 0; padding: var(--space-xs) var(--space-sm); font-size: 12px; color: var(--color-text-muted); line-height: 1.5; background: var(--color-bg); border-radius: var(--radius-sm); } /* Section footer link (e.g. "Search C-AR filings on EDGAR") */ .section-footer { padding-top: var(--space-sm); margin-top: var(--space-xs); border-top: 1px solid var(--color-card-border); text-align: right; } .section-footer-link { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; transition: color var(--transition-fast); } .section-footer-link:hover { color: var(--color-primary); text-decoration: underline; } .section-footer-link::after { content: ''; display: inline-block; width: 11px; height: 11px; margin-left: 4px; vertical-align: middle; opacity: 0.5; background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M6.5 3.5H3a1 1 0 00-1 1V13a1 1 0 001 1h8.5a1 1 0 001-1V9.5'/%3E%3Cpath d='M9.5 2h4.5v4.5M14 2L7.5 8.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M6.5 3.5H3a1 1 0 00-1 1V13a1 1 0 001 1h8.5a1 1 0 001-1V9.5'/%3E%3Cpath d='M9.5 2h4.5v4.5M14 2L7.5 8.5'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .section-footer-link:hover::after { opacity: 0.8; } .section-footnote { font-size: var(--font-size-sm); color: var(--color-text-muted); padding: var(--space-sm) var(--space-md); margin: 0; line-height: 1.5; } /* ========================================================================== CTA Card (upsell after C-AR section) ========================================================================== */ .cta-card { background: rgba(91, 46, 234, 0.04); border: 1px solid rgba(91, 46, 234, 0.15); border-left: 4px solid var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); margin: var(--space-md) 0; } .cta-card-label { text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--color-primary); margin: 0 0 var(--space-xs); } .cta-card-body { font-size: var(--font-size-sm); color: var(--color-text); line-height: 1.5; margin: 0 0 var(--space-md); } .cta-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: var(--font-family); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); line-height: 1.4; } .cta-btn-primary { background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); } .cta-btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .cta-btn-secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .cta-btn-secondary:hover { background: rgba(91, 46, 234, 0.08); } .cta-card-attribution { font-size: 11px; color: var(--color-text-muted); margin: var(--space-sm) 0 0; } .landing-promo-card { margin-top: var(--space-lg); margin-bottom: var(--space-lg); background: transparent; border: none; border-top: 1px solid var(--color-card-border); border-left: none; border-radius: 0; padding: var(--space-lg) 0 0; text-align: center; } .landing-promo-text { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.6; margin: 0; } .landing-promo-icon { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; margin-right: 4px; color: var(--color-primary); } .landing-promo-text strong { color: var(--color-text-secondary); font-weight: 600; } .landing-promo-text a { color: var(--color-primary); text-decoration: none; font-weight: 500; } .landing-promo-text a:hover { text-decoration: underline; } @media (max-width: 400px) { .cta-card-actions { flex-direction: column; } .cta-btn { width: 100%; min-height: 44px; } } /* Missing row highlight */ .tl-row-missing { background: var(--color-red-bg); border-radius: var(--radius-sm); padding-left: var(--space-xs); padding-right: var(--space-xs); } /* Likely-missing row highlight */ .tl-row-likely { background: var(--color-yellow-bg); border-radius: var(--radius-sm); padding-left: var(--space-xs); padding-right: var(--space-xs); } /* Row hover for interactivity */ .tl-row { transition: background var(--transition-fast); } .finding-row { transition: background var(--transition-fast); } /* Info tooltip icon */ .info-tip { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--color-text-muted); font-size: 10px; font-weight: 600; font-style: normal; color: var(--color-text-muted); cursor: help; position: relative; vertical-align: middle; margin-left: 4px; } /* Expand tap target to 44px for touch devices */ .info-tip::before { content: 'i'; position: absolute; width: 44px; height: 44px; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; } .info-tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 280px; padding: 8px 12px; background: var(--color-text); color: var(--color-card); font-size: 12px; font-weight: 400; line-height: 1.5; border-radius: var(--radius-sm); white-space: normal; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast); z-index: 10; } .info-tip:hover::after, .info-tip.active::after { opacity: 1; } .flag-list li + li { border-top: 1px solid var(--color-card-border); } /* ========================================================================== Recent Filings ========================================================================== */ .recent-filings-card { padding: var(--space-md); } .rf-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); } .rf-title { margin: 0; font-size: var(--font-size-base); font-weight: 600; color: var(--color-primary); } .rf-edgar-link { font-size: var(--font-size-sm); color: var(--color-primary); text-decoration: none; font-weight: 500; } .rf-edgar-link:hover { text-decoration: underline; } .rf-list { display: flex; flex-direction: column; } .rf-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; text-decoration: none; color: var(--color-text-secondary); border-top: 1px solid var(--color-card-border); font-size: var(--font-size-sm); transition: background var(--transition-fast); } a.rf-row:hover { background: var(--color-bg); } .rf-row:first-child { border-top: none; } .rf-form { display: inline-flex; align-items: center; padding: 1px 6px; font-size: 11px; font-weight: 600; color: var(--color-text-muted); background: var(--color-bg); border: 1px solid var(--color-card-border); border-radius: var(--radius-sm); white-space: nowrap; min-width: 42px; justify-content: center; } .rf-date { color: var(--color-text-muted); white-space: nowrap; min-width: 80px; } .rf-desc { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== Footer ========================================================================== */ .footer { max-width: 800px; margin: var(--space-xl) auto 0; padding: var(--space-md) var(--space-lg); text-align: center; border-top: 1px solid var(--color-card-border); } .footer p { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.5; } .footer a { color: var(--color-text-secondary); text-decoration: underline; transition: color var(--transition-fast); } .footer a:hover { color: var(--color-accent); } /* ========================================================================== Loading Skeleton ========================================================================== */ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-line { background: linear-gradient(90deg, var(--color-card-border) 25%, #e8ecf1 50%, var(--color-card-border) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease infinite; border-radius: var(--radius-sm); } /* Loading placeholder: mirrors summary card blocks (name, aka, status, explanation, CIK line). */ .summary-skeleton { display: flex; flex-direction: column; align-items: flex-start; min-height: 188px; } /* ========================================================================== Utilities ========================================================================== */ .hidden { display: none !important; } /* ========================================================================== FAQ Section ========================================================================== */ .faq-section { margin-top: 40px; margin-bottom: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--color-card-border); } .faq-heading { font-size: 0.6875rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-xs); } .faq-item { border-bottom: 1px solid var(--color-card-border); } .faq-item:last-child { border-bottom: none; } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 11px 0; font-weight: 500; font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: pointer; list-style: none; user-select: none; transition: color var(--transition-fast); } .faq-question::-webkit-details-marker { display: none; } .faq-question::after { content: ''; flex-shrink: 0; width: 16px; height: 16px; background: currentColor; opacity: 0.4; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--transition-fast); } .faq-item[open] > .faq-question::after { transform: rotate(180deg); } .faq-item[open] > .faq-question { color: var(--color-text); } .faq-question:hover { color: var(--color-text); } .faq-answer { padding: 0 0 var(--space-md); color: var(--color-text-secondary); line-height: 1.7; font-size: var(--font-size-sm); } .faq-answer p { margin: 0 0 var(--space-sm); } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .faq-answer a:hover { color: var(--color-primary-dark); } /* ========================================================================== Responsive Design ========================================================================== */ @media (max-width: 640px) { .container { width: 100%; max-width: 100%; padding: var(--space-md); } .header { margin: calc(-1 * var(--space-md)); margin-bottom: var(--space-md); padding: var(--space-md); gap: var(--space-md); } .header-logo { height: 32px; } [data-brand="crowdcheck"] .header-logo { height: 36px; } .header-text { padding-left: var(--space-md); } .header p { display: none; } .card { padding: var(--space-md); } .row { flex-direction: column; } button:not(.help-btn):not(.flag-header):not(.input-clear):not(.share-btn):not(.share-dropdown-item) { width: 100%; } .summary-meta-line { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } .summary-meta-facts { flex-direction: column; align-items: flex-start; gap: var(--space-xs); } .meta-sep { display: none; } .flag-header { padding: var(--space-md); flex-wrap: wrap; align-items: flex-start; } .flag-title { flex: 1; min-width: 0; } .flag-chevron { order: 1; margin-left: auto; } .flag-content { padding-left: var(--space-md); padding-right: var(--space-md); } .finding-top { flex-wrap: wrap; } .finding-metric { flex-basis: 100%; margin-left: 0; } .finding-detail { flex-direction: column; align-items: flex-start; } .finding-edgar { margin-left: 0; } .help-content { left: 50%; transform: translateX(-50%); width: min(250px, calc(100vw - 48px)); } .help-content::after { left: 50%; transform: translateX(-50%); } .footer { max-width: 100%; padding: var(--space-md); } .summary-header-row { flex-direction: column; gap: var(--space-sm); } .share-btn-label { display: none; } .share-btn { padding: 6px; } .company-name { font-size: var(--font-size-lg); } .rf-header { flex-direction: column; align-items: flex-start; gap: var(--space-xs); } .rf-row { flex-wrap: wrap; } .rf-desc { flex-basis: 100%; white-space: normal; } .tl-row { flex-wrap: wrap; } .tl-due { flex-basis: 100%; padding-left: 28px; } .info-tip::after { left: 50%; transform: translateX(-50%); width: min(280px, calc(100vw - 48px)); } .flag-count { order: 2; flex-basis: 100%; flex-wrap: wrap; margin-left: 0; padding-left: calc(10px + var(--space-sm)); justify-content: flex-start; } .suggestion-item { align-items: flex-start; padding: 14px; min-height: 0; gap: 12px; } .suggestion-avatar, .suggestion-avatar-img { width: 36px; height: 36px; font-size: 13px; } .suggestion-body { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; width: 100%; } .suggestion-text { gap: 4px; padding-top: 0; } .suggestion-name, .suggestion-legal-name { white-space: normal; } .suggestion-cik { display: none; } input[type="text"], button:not(.help-btn):not(.input-clear):not(.share-btn):not(.share-dropdown-item):not(.flag-header) { min-height: 44px; } } /* ========================================================================== Focus Visible (Accessibility) ========================================================================== */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } button:focus-visible, input:focus-visible { outline: none; }