/* Google Fonts — DM Sans (portals) + Source Serif 4 (reports) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');
/* ==========================================================================
* theme.css — Unified brand theme system for ReportsHub
*
* Single source of truth for all client brand palettes, shared component
* overrides, and reusable UI components across the report hub.
*
* Architecture:
*
*
*
*
* Brands: hub, skelton-woody, balloon-collective, edgar-nadyne, trp-austin,
* holliday-lighting, ngo-market, capital-city, sound-sight-tarot,
* performancetest, integrity-studio, zoukmx, leora
*
* TABLE OF CONTENTS
* 1. Brand Palettes
* 2. Brand Report Element Overrides
* 3. Shared Report Overrides
* 4. Badge System
* 5. Opportunity Report Components
* 6. Dashboard Components
* 7. Form Components
* 8. Brand-Specific Portal Components
* 9. Brand-Specific Report Components
* 10. Dark Mode
* 11. Responsive
* ========================================================================== */
/* ==========================================================================
1. BRAND PALETTES
Color variables per client, activated via data-brand on .
NAMESPACE MAP — each page type loads exactly one base stylesheet:
┌──────────────────┬───────────────────────┬────────────────────────────────────────────────────────────┐
│ Page type │ Base sheet │ Core variables │
├──────────────────┼───────────────────────┼────────────────────────────────────────────────────────────┤
│ Portal / hub │ portal-base.css │ --color-bg, --color-bg-secondary, --color-text-primary, │
│ │ │ --color-text-secondary, --color-primary-dark/medium/light, │
│ │ │ --color-border, --color-card-bg │
├──────────────────┼───────────────────────┼────────────────────────────────────────────────────────────┤
│ Research report │ report-base.css │ --primary, --secondary, --accent, --light, --dark, --border │
├──────────────────┼───────────────────────┼────────────────────────────────────────────────────────────┤
│ Competitor │ competitor-base.css │ --bg, --surface, --text, --text-muted, --accent, --accent2 │
├──────────────────┼───────────────────────┼────────────────────────────────────────────────────────────┤
│ Holliday portal │ portal-layout.css │ --surface, --surface-raised, --ink, --ink-muted, │
│ (bespoke) │ (+ portal-base.css) │ --ink-faint, --glow, --glow-strong, --border-light │
└──────────────────┴───────────────────────┴────────────────────────────────────────────────────────────┘
Cross-namespace --color-* bridge aliases are defined in report-base.css and competitor-base.css.
Portal-base and portal-layout already use --color-* naming natively; no bridge needed there.
Note: --color-bg-page (not --color-bg) is used in both bridges to avoid collision with
portal-base's --color-bg. --color-surface is scoped to competitor-base only (card surface concept).
========================================================================== */
/* --- Hub (root index.html) --- */
[data-brand="hub"] {
--color-primary-dark: #1d4ed8;
--color-primary-medium: #2563eb;
--color-primary-light: #60a5fa;
--primary: #1d4ed8;
--secondary: #2563eb;
--accent: #60a5fa;
}
/* --- Skelton & Woody PLLC --- */
[data-brand="skelton-woody"] {
--color-primary-dark: #1a365d;
--color-primary-medium: #2b6cb0;
--color-primary-light: #2c5282;
--primary: #1b3a5c;
--secondary: #2a6496;
--accent: #4a90c4;
}
/* --- The Balloon Collective --- */
[data-brand="balloon-collective"] {
--color-primary-dark: #7c3aed;
--color-primary-medium: #8b5cf6;
--color-primary-light: #a78bfa;
--primary: #7b2d8e;
--secondary: #c44569;
--accent: #f78fb3;
--color-highlight-start: #f3e5f5;
--color-highlight-end: #fce4ec;
--color-info-bg: #f3e5f5;
}
/* --- Edghar & Nadyne --- */
[data-brand="edgar-nadyne"] {
--color-primary-dark: #9d174d;
--color-primary-medium: #be185d;
--color-primary-light: #db2777;
--primary: #6B2D5B;
--secondary: #A0456E;
--accent: #E8A87C;
--light: #FFF5F5;
--dark: #1a1a1a;
--border: #e8d5d5;
--tr-hover-bg: #fff5f5;
--color-highlight-start: #fff0f0;
--color-highlight-end: #fce4ec;
--color-info-bg: #fce4ec;
--badge-info-bg: #fce4ec;
--badge-info-text: #6B2D5B;
--details-hover-bg: #f5e0e0;
--color-swot-opportunity: #4a1a6b;
--color-swot-opportunity-bg: #e8d5f5;
}
/* --- Texas Realty Partners --- */
[data-brand="trp-austin"] {
--color-primary-dark: #1a365d;
--color-primary-medium: #2b6cb0;
--color-primary-light: #2c5282;
--primary: #1a365d;
--secondary: #2b6cb0;
--accent: #4299e1;
--light: #f7fafc;
--dark: #1a202c;
--border: #e2e8f0;
--tr-hover-bg: #f7fafc;
--color-highlight-start: #ebf8ff;
--color-highlight-end: #bee3f8;
--color-warning-bg-brand: #fffbeb;
--color-warning-border-brand: #f59e0b;
--color-info-bg: #eff6ff;
--blockquote-brand-bg: #f7fafc;
--badge-success-bg: #c6f6d5;
--badge-success-text: #22543d;
--badge-warning-bg: #fefcbf;
--badge-warning-text: #744210;
--badge-danger-bg: #fed7d7;
--badge-danger-text: #9b2c2c;
--badge-info-bg: #bee3f8;
--badge-info-text: #2a4365;
--color-rating: #ecc94b;
--details-hover-bg: #edf2f7;
}
/* --- Illumination Holiday Lighting --- */
[data-brand="holliday-lighting"] {
--color-primary-dark: #1a5f7a;
--color-primary-medium: #0f766e;
--color-primary-light: #57c5b6;
--primary: #1a5f7a;
--secondary: #0f766e;
--accent: #57c5b6;
/* Portal-base variable mappings (eliminates body override in portal-layout.css) */
--color-bg: #faf9f7;
--color-bg-secondary: #ffffff;
--color-text-primary: #1c2a35;
--color-text-secondary: #455460;
--color-border: #eeebe6;
--color-card-bg: #ffffff;
/* Custom portal tokens */
--surface: #faf9f7;
--surface-raised: #ffffff;
--ink: #1c2a35;
--ink-muted: #455460;
--ink-faint: #4e5f6c;
--border-light: #eeebe6;
--glow: rgba(87, 197, 182, 0.15);
--glow-strong: rgba(87, 197, 182, 0.35);
--shadow-sm: 0 1px 3px rgba(28, 42, 53, 0.04), 0 1px 2px rgba(28, 42, 53, 0.06);
--shadow-md: 0 4px 16px rgba(28, 42, 53, 0.06), 0 1px 4px rgba(28, 42, 53, 0.04);
--shadow-lg: 0 12px 40px rgba(28, 42, 53, 0.08), 0 4px 12px rgba(28, 42, 53, 0.04);
--radius: 10px;
--serif: Georgia, 'Times New Roman', serif;
--sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
/* Opportunity report extras */
--high: #28a745;
--medium: #ffc107;
--low: #6c757d;
}
/* --- Integrity Studio (NGO Market) --- */
[data-brand="ngo-market"] {
--color-primary-dark: #1e40af;
--color-primary-medium: #2563eb;
--color-primary-light: #60a5fa;
--primary: #1e40af;
--secondary: #2563eb;
--accent: #60a5fa;
}
/* --- Hines (Global Real Estate) --- */
[data-brand="hines"] {
--color-primary-dark: #1c2b4a;
--color-primary-medium: #2a4070;
--color-primary-light: #c9a227;
--primary: #1c2b4a;
--secondary: #2a4070;
--accent: #c9a227;
--light: #f8f6f0;
--dark: #111827;
--border: #d6cdb8;
--tr-hover-bg: #f8f6f0;
--color-highlight-start: #fdf8ee;
--color-highlight-end: #faefd0;
--color-info-bg: #f0f4ff;
--badge-info-bg: #e8edf8;
--badge-info-text: #1c2b4a;
--details-hover-bg: #f0ecdf;
}
/* --- Capital City Village --- */
[data-brand="capital-city"] {
--color-primary-dark: #1a365d;
--color-primary-medium: #2b6cb0;
--color-primary-light: #2c5282;
--color-accent-light: #90cdf4;
--color-accent-bg: #ebf8ff;
--color-star-filled: #2b6cb0;
--color-star-empty: #d1d5db;
--color-recommended: #059669;
--color-recommended-bg: #f0fdf4;
--color-warning: #dc2626;
--color-warning-bg: #fef2f2;
}
/* --- Sound Sight Tarot --- */
[data-brand="sound-sight-tarot"] {
--primary: #4a2c6e;
--secondary: #7b4b94;
--accent: #c9a96e;
--light: #f8f7fa;
--color-highlight-start: #f0e6f6;
--color-highlight-end: #e8daf0;
--color-info-bg: #f0e6f6;
--badge-info-bg: #e0d4f0;
--badge-info-text: #4a2c6e;
--color-rating: #c9a96e;
}
/* --- PerformanceTest (Leora perf variants) --- */
[data-brand="performancetest"] {
--color-primary-dark: #065f46;
--color-primary-medium: #047857;
--color-primary-light: #10b981;
}
/* --- Integrity Studio AI --- */
[data-brand="integrity-studio"] {
--color-primary-dark: #1e40af;
--primary: #1a1a2e;
--secondary: #2a3f5f;
--accent: #0f3460;
--highlight: #e94560;
--primary-blue: #0066cc;
--primary-teal: #00a89d;
--light-blue: #e6f2ff;
--light-teal: #e8f8f6;
}
/* --- ZoukMX --- */
[data-brand="zoukmx"] {
--color-primary-dark: #9d174d;
--color-primary-medium: #be185d;
--color-primary-light: #db2777;
--primary: #1b4332;
--secondary: #2d6a4f;
--accent: #d4a373;
}
/* --- Leora Home Health --- */
[data-brand="leora"] {
--color-primary-dark: #0d9488;
--color-primary-medium: #0f766e;
--color-primary-light: #14b8a6;
--color-accent: #0f766e;
--color-accent-light: #f0fdfa;
--color-shadow: rgba(0, 0, 0, 0.08);
--color-shadow-hover: rgba(0, 0, 0, 0.12);
}
/* --- Neural Networks & LLMs — indigo/purple education theme --- */
[data-brand="neural-networks"] {
--color-primary-dark: #312e81;
--color-primary-medium: #4f46e5;
--color-primary-light: #a5b4fc;
--primary: #312e81;
--secondary: #4f46e5;
--accent: #7c3aed;
--light: #eef2ff;
--dark: #1e1b4b;
--border: #c7d2fe;
}
/* --- Post Oak Group — navy/gold investment banking theme --- */
[data-brand="post-oak-group"] {
--color-primary-dark: #1a2744;
--color-primary-medium: #2c4a7c;
--color-primary-light: #4a7ab5;
--primary: #1a2744;
--secondary: #2c4a7c;
--accent: #c9a84c;
--light: #f7f5f0;
--dark: #0f1a2e;
--border: #d4cfc5;
--tr-hover-bg: #eee9df;
--color-highlight-start: #e8e0ce;
--color-highlight-end: #f0ebe0;
--color-text-override: #111;
--color-warning-bg-brand: #fef5e0;
--color-info-bg: #e8eff8;
--color-rating: #c9a84c;
--badge-info-bg: #2c4a7c;
--badge-info-text: #fff;
}
/* --- Kollective Group — coral/charcoal recruiting theme --- */
[data-brand="kollective-group"] {
--color-primary-dark: #2d2d2d;
--color-primary-medium: #e85d4a;
--color-primary-light: #f08c7c;
--primary: #2d2d2d;
--secondary: #e85d4a;
--accent: #f08c7c;
--light: #faf8f6;
--dark: #1a1a1a;
--border: #e0dbd5;
--tr-hover-bg: #fdf0ed;
--color-highlight-start: #fdf0ed;
--color-highlight-end: #fce4df;
--color-text-override: #1a1a1a;
--color-warning-bg-brand: #fef5e0;
--color-info-bg: #f0f4f8;
--color-rating: #e85d4a;
--badge-info-bg: #e85d4a;
--badge-info-text: #fff;
}
/* --- Strong Towns --- */
[data-brand="strong-towns"] {
--color-primary-dark: #143028;
--color-primary-medium: #1e5740;
--color-primary-light: #2d6a4f;
--primary: #143028;
--secondary: #1e5740;
--accent: #c4873e;
--light: #f5f3ef;
--dark: #111111;
--border: #c8c0b4;
--tr-hover-bg: #efeae3;
--color-highlight-start: #e0efe1;
--color-highlight-end: #ede9dc;
--color-text-override: #111;
--color-warning-bg-brand: #fef5e0;
--color-warning-border-brand: #c4873e;
--color-info-bg: #e0ece0;
--blockquote-brand-bg: #efeae3;
--blockquote-brand-text: #333;
--color-content-text: #1a1a1a;
--color-footer-text: #444;
--badge-success-bg: #c8e6c9;
--badge-success-text: #0d3b12;
--badge-warning-bg: #fff3e0;
--badge-warning-text: #bf360c;
--badge-danger-bg: #ffcdd2;
--badge-danger-text: #7f0000;
--badge-info-bg: #dcedc8;
--badge-info-text: #143028;
}
/* ==========================================================================
THEME TOKENS
Additional tokens used in component sections (shared across all base files)
========================================================================== */
:root {
/* Tell browsers this page handles both color schemes natively — prevents
Chrome/Edge auto-dark-mode from re-transforming already-dark pages. */
color-scheme: light dark;
/* Shared design tokens (consolidated from base files) */
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Roboto, sans-serif;
--font-serif: Georgia, 'Times New Roman', serif;
--font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
--font-portal: 'DM Sans', var(--font-sans);
--font-report: 'Source Serif 4', var(--font-serif);
--spacing-xs: 0.5rem;
--spacing-swot-gap: 0.75rem;
--spacing-sm: 1rem;
--spacing-list-sm: 1.25rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--radius-xs: 4px;
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--font-size-base: 1rem;
--line-height-base: 1.6;
--transition-fast: 0.2s ease;
--spacing-detail-gap: 0.25rem;
--spacing-table-cell: 0.75rem;
--border-accent-width: 4px;
--offscreen-left: -9999px;
--sr-only-size: 1px;
--sr-only-margin: -1px;
--z-index-skip-link: 1000;
/* Layout constants */
--color-white: #ffffff;
--z-index-sticky: 100;
/* Typography constants */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-title: 1.4;
--line-height-card-desc: 1.6;
/* Opacity constants */
--opacity-muted: 0.9;
--opacity-zero: 0;
--opacity-full: 1;
/* Border constants */
--border-width-1: 1px;
--border-width-2: 2px;
--border-radius-circle: 50%;
/* Component-specific spacing/sizing tokens */
--theme-hero-max-width: 800px;
--theme-leora-header-max-width: 1200px;
--theme-stat-font-size: 2rem;
--theme-stat-number-font-size: 1.8rem;
--theme-card-title-font-size: 1.05rem;
--theme-action-card-padding: 1.25rem;
--theme-holliday-card-padding: 1.75rem;
--theme-holliday-glow-offset: -40px;
--theme-holliday-glow-size: 120px;
--theme-holliday-footer-font-size: 0.78rem;
--theme-timeline-dot-size: 8px;
--theme-timeline-dot-offset: -5px;
--theme-caption-font-size: 0.875rem;
--theme-caption-sm-font-size: 0.8125rem;
--theme-testimonial-font-size: 0.9rem;
--theme-testimonial-quote-color: #444;
--theme-action-meta-color: #4a4a4a;
--theme-edgar-stat-grid-min: 150px;
--theme-leora-h1-font-size: 1.875rem;
--theme-leora-card-shadow: 0 12px 24px;
--theme-subtitle-font-size: 1.0625rem;
/* Holliday Lighting portal/report tokens */
--theme-holliday-h4-font-size: 1rem;
--theme-table-font-size: 0.92rem;
--theme-holliday-card-transition-duration: 0.25s;
--theme-holliday-before-transition-duration: 0.35s;
--theme-holliday-card-hover-translate: -3px;
--theme-holliday-card-focus-offset: 3px;
--theme-holliday-card-padding-sm: 1.35rem;
/* Subtitle override token */
--theme-subtitle-override-font-size: 1.125rem;
/* Leora portal tokens */
--theme-leora-body-font-size: 1rem;
--theme-leora-back-link-font-size: 0.875rem;
--theme-leora-back-link-translate: -2px;
--theme-leora-card-title-font-size: 1.25rem;
--theme-leora-card-desc-font-size: 0.95rem;
--theme-leora-h1-font-size-md: 1.5rem;
--theme-leora-h1-font-size-sm: 1.25rem;
--theme-leora-p-font-size-sm: 0.875rem;
--theme-leora-card-title-font-size-sm: 1.1rem;
--theme-leora-card-desc-font-size-sm: 0.9rem;
/* Markdown note component tokens */
--theme-markdown-note-font-size: 0.85rem;
--theme-markdown-note-icon-size: 1.2rem;
--theme-markdown-note-icon-font: 0.7rem;
/* Threat badge tokens */
--theme-threat-badge-padding-v: 0.15rem;
--theme-threat-badge-padding-h: 0.4rem;
/* Balloon Collective action card */
--theme-action-card-body-font-size: 0.95rem;
/* Edgar & Nadyne */
--theme-edgar-rating-letter-spacing: 2px;
/* Capital City typography */
--theme-hero-line-height: 1.7;
--theme-stat-line-height: 1.2;
/* Badge rgba background tokens (shared across all base files) */
--badge-accent-bg: rgba(79, 143, 247, 0.15);
--badge-accent2-bg: rgba(124, 92, 252, 0.15);
--badge-amber-bg: rgba(245, 158, 11, 0.15);
--badge-green-bg: rgba(52, 211, 153, 0.15);
--badge-red-bg: rgba(239, 68, 68, 0.15);
--badge-cyan-bg: rgba(34, 211, 238, 0.15);
/* Report priority/status badge colors */
--badge-low-bg: #e2e3e5;
--badge-low-text: #383d41;
--badge-longterm-bg: #e7e0f7;
--badge-longterm-text: #4a306d;
/* Balloon Collective priority border colors */
--balloon-priority-high: #dc3545;
--balloon-priority-medium: #ffc107;
--balloon-priority-low: #28a745;
/* Balloon Collective badge-primary */
--balloon-badge-primary-bg: #f3e5f5;
/* Integrity Studio header meta link */
--integrity-meta-link: #a8e6cf;
/* Capital City print colors */
--capital-city-print-h1: #1a365d;
--capital-city-print-border: #2b6cb0;
--capital-city-print-link: #2b6cb0;
--capital-city-print-card-border: #ccc;
--capital-city-print-body-bg: #ffffff;
--capital-city-print-text: #000000;
}
/* ==========================================================================
2. BRAND REPORT ELEMENT OVERRIDES
Per-brand color adjustments for report-base.css elements
========================================================================== */
/* --- Balloon Collective — purple/pink tones --- */
[data-brand="balloon-collective"] .highlight-box { background: linear-gradient(135deg, var(--color-highlight-start), var(--color-highlight-end)); }
[data-brand="balloon-collective"] .info-box { background: var(--color-info-bg); }
/* --- Edghar & Nadyne — maroon/pink tones --- */
[data-brand="edgar-nadyne"] tr:hover { background: var(--tr-hover-bg); }
[data-brand="edgar-nadyne"] .highlight-box { background: linear-gradient(135deg, var(--color-highlight-start), var(--color-highlight-end)); }
[data-brand="edgar-nadyne"] .info-box { background: var(--color-info-bg); }
[data-brand="edgar-nadyne"] .badge-info { background: var(--badge-info-bg); color: var(--badge-info-text); }
[data-brand="edgar-nadyne"] .rating { color: var(--accent); letter-spacing: var(--theme-edgar-rating-letter-spacing); }
[data-brand="edgar-nadyne"] details summary:hover { background: var(--details-hover-bg); }
/* --- Texas Realty Partners — blue/cool tones --- */
[data-brand="trp-austin"] tr:hover { background: var(--tr-hover-bg); }
[data-brand="trp-austin"] .highlight-box { background: linear-gradient(135deg, var(--color-highlight-start), var(--color-highlight-end)); }
[data-brand="trp-austin"] .warning-box { background: var(--color-warning-bg-brand); border-left-color: var(--color-warning-border-brand); }
[data-brand="trp-austin"] .info-box { background: var(--color-info-bg); }
[data-brand="trp-austin"] blockquote { background: var(--blockquote-brand-bg); }
[data-brand="trp-austin"] .badge-success { background: var(--badge-success-bg); color: var(--badge-success-text); }
[data-brand="trp-austin"] .badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
[data-brand="trp-austin"] .badge-danger { background: var(--badge-danger-bg); color: var(--badge-danger-text); }
[data-brand="trp-austin"] .badge-info { background: var(--badge-info-bg); color: var(--badge-info-text); }
[data-brand="trp-austin"] .rating { color: var(--color-rating); }
[data-brand="trp-austin"] details summary:hover { background: var(--details-hover-bg); }
[data-brand="trp-austin"] details details { border-color: var(--details-hover-bg); }
/* --- Strong Towns — earth/civic tones --- */
[data-brand="strong-towns"] tr:hover { background: var(--tr-hover-bg); }
[data-brand="strong-towns"] .highlight-box { background: linear-gradient(135deg, var(--color-highlight-start), var(--color-highlight-end)); color: var(--color-text-override); }
[data-brand="strong-towns"] .warning-box { background: var(--color-warning-bg-brand); border-left-color: var(--color-warning-border-brand); color: var(--color-text-override); }
[data-brand="strong-towns"] .info-box { background: var(--color-info-bg); color: var(--color-text-override); }
[data-brand="strong-towns"] blockquote { background: var(--blockquote-brand-bg); color: var(--blockquote-brand-text); }
[data-brand="strong-towns"] .section-content { color: var(--color-text-override); }
[data-brand="strong-towns"] .section-content p,
[data-brand="strong-towns"] .section-content li { color: var(--color-content-text); }
[data-brand="strong-towns"] .executive-summary p { color: var(--color-content-text); }
[data-brand="strong-towns"] td { color: var(--color-content-text); }
[data-brand="strong-towns"] footer { color: var(--color-footer-text); }
[data-brand="strong-towns"] .badge-success { background: var(--badge-success-bg); color: var(--badge-success-text); }
[data-brand="strong-towns"] .badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
[data-brand="strong-towns"] .badge-danger { background: var(--badge-danger-bg); color: var(--badge-danger-text); }
[data-brand="strong-towns"] .badge-info { background: var(--badge-info-bg); color: var(--badge-info-text); }
/* --- Holliday Lighting — report element overrides --- */
[data-brand="holliday-lighting"] section h4 { color: var(--primary); margin: var(--spacing-sm) 0 var(--spacing-xs) 0; font-size: var(--theme-holliday-h4-font-size); }
[data-brand="holliday-lighting"] .section-content table { font-size: var(--theme-table-font-size); }
/* --- Sound Sight Tarot — purple/gold tones --- */
[data-brand="sound-sight-tarot"] .highlight-box { background: linear-gradient(135deg, var(--color-highlight-start), var(--color-highlight-end)); }
[data-brand="sound-sight-tarot"] .info-box { background: var(--color-info-bg); }
[data-brand="sound-sight-tarot"] .badge-info { background: var(--badge-info-bg); color: var(--badge-info-text); }
[data-brand="sound-sight-tarot"] .rating { color: var(--color-rating); }
/* --- Integrity Studio — dark navy/red theme --- */
[data-brand="integrity-studio"] .executive-summary { border-left-color: var(--highlight); }
[data-brand="integrity-studio"] blockquote { border-left-color: var(--highlight); }
[data-brand="integrity-studio"] header { background: linear-gradient(135deg, var(--primary), var(--accent)); }
[data-brand="integrity-studio"] section h3 { color: var(--accent); }
[data-brand="integrity-studio"] a { color: var(--accent); }
[data-brand="integrity-studio"] header .meta a { color: var(--integrity-meta-link); }
[data-brand="integrity-studio"] .section-content details { margin: var(--spacing-xs, 0.5rem) 0; }
[data-brand="integrity-studio"] .section-content details summary { cursor: pointer; font-weight: var(--font-weight-semibold); color: var(--primary); padding: var(--spacing-xs, 0.5rem) 0; }
/* --- Subtitle size override for select brands --- */
[data-brand="ngo-market"] .subtitle,
[data-brand="performancetest"] .subtitle,
[data-brand="integrity-studio"] .subtitle,
[data-brand="zoukmx"] .subtitle {
font-size: var(--theme-subtitle-override-font-size);
}
/* --- Balloon Collective portal h1 margin tweak --- */
[data-brand="balloon-collective"] h1 { margin-bottom: var(--spacing-xs); }
/* ==========================================================================
3. SHARED REPORT OVERRIDES
Common patterns used across multiple report themes
========================================================================== */
/* Source text — defined in report-base.css (light: #4a4a4a, dark: #cccccc) */
/* ==========================================================================
4. BADGE SYSTEM
All badge variants consolidated from all themes
========================================================================== */
/* --- Competitor badges (per-directory variants) --- */
/* Skelton-Woody competitor badges */
.badge-midsize { background: var(--badge-accent2-bg); color: var(--accent2); }
.badge-large { background: var(--badge-red-bg); color: var(--red); }
.badge-insurance { background: var(--badge-green-bg); color: var(--green); }
/* TRP Austin competitor badges */
.badge-commercial { background: var(--badge-accent2-bg); color: var(--accent2); }
.badge-investment { background: var(--badge-green-bg); color: var(--green); }
.badge-luxury { background: var(--badge-amber-bg); color: var(--amber); }
.badge-major { background: var(--badge-red-bg); color: var(--red); }
.badge-westlake { background: var(--badge-cyan-bg); color: var(--cyan); }
/* Holliday Lighting competitor badges */
.badge-premium { background: var(--badge-accent2-bg); color: var(--accent2); }
.badge-enterprise { background: var(--badge-red-bg); color: var(--red); }
.badge-permanent { background: var(--badge-green-bg); color: var(--green); }
.badge-new { background: var(--badge-amber-bg); color: var(--amber); }
/* NGO Market competitor badges */
.badge-boutique { background: var(--badge-accent-bg); color: var(--accent); }
.badge-nptechfirm { background: var(--badge-accent2-bg); color: var(--accent2); }
.badge-bigfirm { background: var(--badge-red-bg); color: var(--red); }
.badge-platform { background: var(--badge-green-bg); color: var(--green); }
.badge-education { background: var(--badge-amber-bg); color: var(--amber); }
.badge-ethics { background: var(--badge-cyan-bg); color: var(--cyan); }
/* Capital City competitor badges */
.badge-village { background: var(--badge-accent-bg); color: var(--accent); }
.badge-nonprofit { background: var(--badge-green-bg); color: var(--green); }
.badge-government { background: var(--badge-accent2-bg); color: var(--accent2); }
.badge-forprofit { background: var(--badge-amber-bg); color: var(--amber); }
.badge-community { background: var(--badge-cyan-bg); color: var(--cyan); }
/* Integrity Studio competitor badges */
.badge-direct { background: var(--badge-accent-bg); color: var(--accent); }
.badge-oss { background: var(--badge-green-bg); color: var(--green); }
/* Leora competitor badges */
.badge-system { background: var(--badge-accent2-bg); color: var(--accent2); }
.badge-national { background: var(--badge-red-bg); color: var(--red); }
.badge-specialty { background: var(--badge-green-bg); color: var(--green); }
.badge-local { background: var(--badge-amber-bg); color: var(--amber); }
/* NGO Market threat badges */
.threat-badge {
display: inline-block;
padding: var(--theme-threat-badge-padding-v) var(--theme-threat-badge-padding-h);
border-radius: var(--radius-xs, 4px);
font-size: var(--font-size-badge, 0.75rem);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
}
.threat-low { background: var(--badge-green-bg); color: var(--green); }
.threat-med { background: var(--badge-amber-bg); color: var(--amber); }
.threat-high { background: var(--badge-red-bg); color: var(--red); }
/* --- Report priority/status badges ---
.badge-high, .badge-medium, .badge-quick aliased in report-base.css
Only unique badges remain here */
.badge-low { background: var(--badge-low-bg); color: var(--badge-low-text); }
.badge-longterm { background: var(--badge-longterm-bg); color: var(--badge-longterm-text); }
/* ==========================================================================
5. OPPORTUNITY REPORT COMPONENTS → css/opportunity-components.css
Extracted to reduce bundle size for non-opportunity pages.
Linked only by opportunity report HTML pages.
========================================================================== */
/* ==========================================================================
6–7. DASHBOARD & FORM COMPONENTS → css/leora-referral.css
Extracted to reduce bundle size for non-Leora pages.
Linked only by leora_research/ and PerformanceTest/ referral pages.
========================================================================== */
/* ==========================================================================
8. BRAND-SPECIFIC PORTAL COMPONENTS
Unique portal page elements per brand
========================================================================== */
/* --- Leora portal: sticky header + custom card layout --- */
[data-brand="leora"] header {
padding: var(--spacing-lg);
position: sticky;
top: 0;
z-index: var(--z-index-sticky);
}
[data-brand="leora"] .header-container {
max-width: var(--theme-leora-header-max-width);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-lg);
}
[data-brand="leora"] .header-content {
max-width: none;
margin: 0;
}
[data-brand="leora"] .header-content h1 {
font-size: var(--theme-leora-h1-font-size);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-xs);
}
[data-brand="leora"] .header-content p {
font-size: var(--theme-leora-body-font-size);
color: var(--color-text-secondary);
}
[data-brand="leora"] .back-link {
padding: var(--spacing-sm) var(--spacing-md);
background-color: var(--color-card-bg);
border: var(--border-width-1) solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text-primary);
font-size: var(--theme-leora-back-link-font-size);
font-weight: var(--font-weight-medium);
}
[data-brand="leora"] .back-link:hover {
background-color: var(--color-accent);
color: var(--color-white);
border-color: var(--color-accent);
transform: translateX(var(--theme-leora-back-link-translate));
}
[data-brand="leora"] .section-title {
font-weight: var(--font-weight-bold);
padding-bottom: var(--spacing-md);
border-bottom: var(--border-width-2) solid var(--color-border);
}
[data-brand="leora"] .section-title::before { display: none; }
[data-brand="leora"] .card-grid { margin-bottom: var(--spacing-xl); }
[data-brand="leora"] .card::before {
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
}
[data-brand="leora"] .card:hover {
box-shadow: 0 12px 24px var(--color-shadow-hover);
border-color: var(--color-accent);
}
[data-brand="leora"] .card-header {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
[data-brand="leora"] .card-category {
display: inline-flex;
align-items: center;
padding: var(--spacing-xs) var(--spacing-sm);
background-color: var(--color-accent-light);
color: var(--color-accent);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-sm);
width: fit-content;
opacity: var(--opacity-full);
}
[data-brand="leora"] .card-title { font-size: var(--theme-leora-card-title-font-size); font-weight: var(--font-weight-bold); line-height: var(--line-height-title); }
[data-brand="leora"] .card-description { flex: 1; font-size: var(--theme-leora-card-desc-font-size); line-height: var(--line-height-card-desc); }
[data-brand="leora"] .card-link { color: var(--color-accent); font-size: var(--theme-leora-card-desc-font-size); }
[data-brand="leora"] .card-link:hover { color: var(--color-text-primary); }
/* Markdown file note component */
.markdown-note {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
margin-top: var(--spacing-sm);
padding: var(--spacing-sm);
background-color: var(--color-bg-secondary);
border-left: var(--border-width-2) solid var(--color-accent);
border-radius: var(--radius-sm);
font-size: var(--theme-markdown-note-font-size);
color: var(--color-text-secondary);
}
.markdown-note::before {
content: 'i';
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--theme-markdown-note-icon-size);
height: var(--theme-markdown-note-icon-size);
background-color: var(--color-accent);
color: var(--color-white);
border-radius: var(--border-radius-circle);
font-size: var(--theme-markdown-note-icon-font);
font-weight: var(--font-weight-bold);
flex-shrink: 0;
}
/* --- Holliday Lighting portal: body, card + footer overrides (base in portal-layout.css) --- */
[data-brand="holliday-lighting"] body { -webkit-font-smoothing: antialiased; }
[data-brand="holliday-lighting"] .card {
border-radius: var(--radius);
padding: var(--theme-holliday-card-padding);
transition: transform var(--theme-holliday-card-transition-duration) ease, box-shadow var(--theme-holliday-card-transition-duration) ease, border-color var(--theme-holliday-card-transition-duration) ease;
}
[data-brand="holliday-lighting"] .card:hover {
transform: translateY(var(--theme-holliday-card-hover-translate));
border-color: var(--accent);
}
[data-brand="holliday-lighting"] .card::before {
background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
transition: transform var(--theme-holliday-before-transition-duration) ease;
}
[data-brand="holliday-lighting"] .card::after {
content: '';
position: absolute;
top: var(--theme-holliday-glow-offset); right: var(--theme-holliday-glow-offset);
width: var(--theme-holliday-glow-size); height: var(--theme-holliday-glow-size);
background: radial-gradient(circle, var(--glow-strong), transparent 70%);
opacity: var(--opacity-zero);
transition: opacity var(--transition-standard, 0.3s ease);
pointer-events: none;
}
[data-brand="holliday-lighting"] .card:hover::after { opacity: var(--opacity-full); }
[data-brand="holliday-lighting"] .card:focus-visible {
outline-color: var(--accent);
outline-offset: var(--theme-holliday-card-focus-offset);
}
[data-brand="holliday-lighting"] footer {
padding: var(--spacing-md) var(--spacing-lg);
font-size: var(--theme-holliday-footer-font-size);
color: var(--ink-faint);
background-color: transparent;
margin-top: 0;
}
/* --- Capital City portal: hero + stat-row + footer-nav --- */
[data-brand="capital-city"] .hero {
max-width: var(--theme-hero-max-width);
margin: var(--spacing-xl) auto;
padding: 0 var(--spacing-lg);
text-align: center;
}
[data-brand="capital-city"] .hero-text {
font-size: var(--theme-subtitle-font-size);
color: var(--color-text-secondary);
line-height: var(--theme-hero-line-height);
margin-bottom: var(--spacing-lg);
}
[data-brand="capital-city"] .stat-row {
display: flex;
justify-content: center;
gap: var(--spacing-xl);
flex-wrap: wrap;
}
[data-brand="capital-city"] .stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
[data-brand="capital-city"] .stat-value {
font-size: var(--theme-stat-font-size);
font-weight: var(--font-weight-bold);
color: var(--color-primary-medium);
line-height: var(--theme-stat-line-height);
}
[data-brand="capital-city"] .stat-label {
font-size: var(--theme-caption-font-size);
color: var(--color-text-secondary);
margin-top: var(--spacing-xs);
}
[data-brand="capital-city"] .header-meta {
display: inline-flex;
flex-wrap: wrap;
gap: var(--spacing-sm) var(--spacing-lg);
justify-content: center;
font-size: var(--theme-caption-font-size);
color: var(--color-text-secondary);
margin-top: var(--spacing-sm);
}
[data-brand="capital-city"] .header-meta span {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
}
[data-brand="capital-city"] .card-highlight {
font-size: var(--theme-caption-sm-font-size);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-sm);
padding-top: var(--spacing-sm);
border-top: var(--border-width-1) solid var(--color-border);
}
[data-brand="capital-city"] .footer-nav {
display: flex;
gap: var(--spacing-lg);
justify-content: center;
margin-bottom: var(--spacing-md);
}
[data-brand="capital-city"] .footer-nav a {
color: var(--color-primary-medium);
text-decoration: none;
font-weight: var(--font-weight-medium);
}
[data-brand="capital-city"] .footer-nav a:hover { text-decoration: underline; }
[data-brand="capital-city"] .footer-nav a:focus-visible {
outline: var(--focus-outline-width, 2px) solid var(--color-primary-medium);
outline-offset: var(--focus-outline-offset, 2px);
border-radius: var(--radius-sm);
}
/* ==========================================================================
9. BRAND-SPECIFIC REPORT COMPONENTS
Unique report page elements per brand
========================================================================== */
/* --- Edghar & Nadyne: testimonials + stat items --- */
[data-brand="edgar-nadyne"] .testimonial {
background: var(--color-white);
border: var(--border-width-1) solid var(--border);
border-radius: var(--radius-md);
padding: var(--theme-action-card-padding);
margin: var(--spacing-sm) 0;
}
[data-brand="edgar-nadyne"] .testimonial .quote {
font-style: italic;
color: var(--theme-testimonial-quote-color);
margin-bottom: var(--spacing-table-cell, 0.75rem);
}
[data-brand="edgar-nadyne"] .testimonial .attribution {
font-weight: var(--font-weight-semibold);
color: var(--primary);
font-size: var(--theme-testimonial-font-size);
}
[data-brand="edgar-nadyne"] .stat-grid {
grid-template-columns: repeat(auto-fit, minmax(var(--theme-edgar-stat-grid-min), 1fr));
margin: var(--spacing-sm) 0 var(--spacing-lg) 0;
}
[data-brand="edgar-nadyne"] .stat-item {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: var(--color-white);
padding: var(--theme-action-card-padding);
border-radius: var(--radius-md);
text-align: center;
}
[data-brand="edgar-nadyne"] .stat-item .stat-number { font-size: var(--theme-stat-number-font-size); font-weight: var(--font-weight-bold); }
[data-brand="edgar-nadyne"] .stat-item .stat-label { font-size: var(--font-size-xs, 0.85rem); opacity: var(--opacity-muted); margin-top: var(--spacing-xs); }
/* --- Balloon Collective: action cards + timeline --- */
[data-brand="balloon-collective"] .success-box {
background: var(--color-badge-success-bg, #d4edda);
border-left: var(--border-accent-width, 4px) solid var(--color-action-border, #28a745);
padding: var(--spacing-sm) var(--spacing-md);
margin: var(--spacing-sm) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
[data-brand="balloon-collective"] .badge-primary {
background: var(--balloon-badge-primary-bg);
color: var(--primary);
}
[data-brand="balloon-collective"] .priority-high { border-left: var(--border-accent-width, 4px) solid var(--balloon-priority-high); }
[data-brand="balloon-collective"] .priority-medium { border-left: var(--border-accent-width, 4px) solid var(--balloon-priority-medium); }
[data-brand="balloon-collective"] .priority-low { border-left: var(--border-accent-width, 4px) solid var(--balloon-priority-low); }
[data-brand="balloon-collective"] .action-card {
background: var(--color-white);
border: var(--border-width-1) solid var(--border);
border-radius: var(--radius-md);
padding: var(--theme-action-card-padding);
margin: var(--spacing-table-cell, 0.75rem) 0;
transition: box-shadow var(--transition-fast);
}
[data-brand="balloon-collective"] .action-card:hover { box-shadow: var(--shadow-lg, 0 4px 8px rgba(0,0,0,0.1)); }
[data-brand="balloon-collective"] .action-card .card-title { font-weight: var(--font-weight-semibold); color: var(--primary); margin-bottom: var(--spacing-xs); font-size: var(--theme-card-title-font-size); }
[data-brand="balloon-collective"] .action-card .card-meta { font-size: var(--font-size-xs, 0.85rem); color: var(--theme-action-meta-color); margin-bottom: var(--spacing-xs); }
[data-brand="balloon-collective"] .action-card .card-body { font-size: var(--theme-action-card-body-font-size); }
[data-brand="balloon-collective"] .action-card .card-link { display: inline-block; margin-top: var(--spacing-xs); color: var(--secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm, 0.9rem); }
[data-brand="balloon-collective"] .timeline-item {
position: relative;
padding-left: var(--spacing-md);
margin-bottom: var(--theme-action-card-padding);
border-left: var(--border-width-2) solid var(--accent);
}
[data-brand="balloon-collective"] .timeline-item::before {
content: '';
position: absolute;
left: var(--theme-timeline-dot-offset);
top: var(--spacing-xs);
width: var(--theme-timeline-dot-size);
height: var(--theme-timeline-dot-size);
border-radius: var(--border-radius-circle);
background: var(--secondary);
}
[data-brand="balloon-collective"] .timeline-item .timeline-label { font-weight: var(--font-weight-semibold); color: var(--primary); font-size: var(--font-size-sm, 0.9rem); }
/* --- TRP Austin: profile value color override --- */
[data-brand="trp-austin"] .profile-item .value { color: var(--text); }
/* --- Hines Land Development Opportunities Report --- */
[data-brand="hines"] .priority-high { background: #d4edda; color: #155724; padding: 0.15rem 0.55rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
[data-brand="hines"] .priority-medium { background: #fff3cd; color: #856404; padding: 0.15rem 0.55rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
[data-brand="hines"] .priority-low { background: #d1ecf1; color: #0c5460; padding: 0.15rem 0.55rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
[data-brand="hines"] .timeline-immediate { background: #f8d7da; color: #721c24; padding: 0.15rem 0.55rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
[data-brand="hines"] .timeline-6mo { background: #ffeeba; color: #533f03; padding: 0.15rem 0.55rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
[data-brand="hines"] .timeline-12mo { background: #cce5ff; color: #004085; padding: 0.15rem 0.55rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
[data-brand="hines"] .opportunity-card { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 6px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; background: var(--light); }
[data-brand="hines"] .opportunity-card h4 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--primary); }
[data-brand="hines"] .opportunity-card .meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
[data-brand="hines"] .opportunity-card p { margin: 0.4rem 0; font-size: 0.95rem; }
[data-brand="hines"] .opportunity-card .url { font-size: 0.85rem; color: var(--secondary); word-break: break-all; }
[data-brand="hines"] .opportunity-card .cost { font-weight: 600; }
[data-brand="hines"] .section-intro { background: #f0ebe0; border-left: 4px solid var(--accent); padding: 1rem 1.25rem; border-radius: 4px; margin-bottom: 1.5rem; font-size: 0.95rem; }
[data-brand="hines"] .comparison-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.88rem; }
[data-brand="hines"] .comparison-table th { background: var(--primary); color: #fff; padding: 0.65rem 0.75rem; text-align: left; }
[data-brand="hines"] .comparison-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
[data-brand="hines"] .comparison-table tr:hover td { background: var(--tr-hover-bg, #f8f6f0); }
[data-brand="hines"] .callout-box { background: #fff8e6; border: 1px solid var(--accent); border-radius: 6px; padding: 1rem 1.25rem; margin: 1.25rem 0; }
[data-brand="hines"] .callout-box strong { color: var(--primary); }
[data-brand="hines"] .contact-block { background: #f4f1ea; border-radius: 6px; padding: 0.75rem 1rem; font-size: 0.9rem; margin-top: 0.5rem; }
/* ==========================================================================
10. DARK MODE
All dark mode overrides organized by section
========================================================================== */
@media (prefers-color-scheme: dark) {
/* Dark mode shared color tokens */
:root {
--dark-bg-navy: #1a1a2e;
--dark-bg-deep: #0f0f23;
--dark-bg-blue: #142040;
--dark-bg-integrity: #111830;
--dark-bg-tarot: #1e1428;
--dark-bg-towns: #142418;
--dark-bg-balloon: #201430;
--dark-bg-edgar: #281420;
--dark-bg-highlight-blue-start: #1a2a35;
--dark-bg-highlight-blue-end: #1a2e2a;
--dark-bg-highlight-balloon-start: #2a1a2e;
--dark-bg-highlight-balloon-end: #2e1a2a;
--dark-bg-highlight-edgar-start: #2a1a2e;
--dark-bg-highlight-edgar-end: #1a2a2a;
--dark-bg-highlight-trp-start: #1a1a2e;
--dark-bg-highlight-trp-end: #1a2a3e;
--dark-bg-highlight-ngo-start: #1a2a3e;
--dark-bg-highlight-ngo-end: #1a2a2a;
--dark-bg-highlight-integrity-start: #1a2a3e;
--dark-bg-highlight-integrity-end: #1a3a2e;
--dark-bg-highlight-green-start: #1a2a1a;
--dark-bg-highlight-green-end: #1a2a2a;
--dark-bg-highlight-tarot-start: #2a1a3a;
--dark-bg-highlight-tarot-end: #251a35;
--dark-warning-bg: #2a2210;
--dark-info-bg-navy: #1a1a2e;
--dark-info-bg-blue: #1a2a3e;
--dark-info-bg-green: #1a2a1a;
--dark-integrity-warning-bg: #3a3520;
--dark-hover-bg: #252535;
--dark-trp-h2-color: #a0d8f8;
--dark-trp-h3-color: #7ec8f0;
--dark-trp-label-color: #d0d0d0;
--dark-trp-blockquote-color: #ececec;
--dark-edgar-quote-color: #e0e0e0;
--dark-edgar-attribution-color: #d0a0b0;
--dark-edgar-border-color: #333;
--dark-integrity-header-start: #0f0f23;
--dark-integrity-header-end: #0f3460;
--dark-integrity-link-color: #8ec0f0;
--dark-integrity-h3-color: #a0c4e0;
--dark-integrity-h2-color: #a8c8e8;
--dark-integrity-text-color: #f0f0f0;
--dark-integrity-body-text: #ececec;
--dark-integrity-footer-color: #d8d8d8;
--dark-tarot-badge-info-bg: #2a1a3a;
--dark-tarot-badge-info-color: #c0a0e0;
--dark-tarot-rating-color: #e0c98e;
--dark-towns-text: #f0f0f0;
--dark-towns-body-text: #ececec;
--dark-towns-footer-color: #d8d8d8;
--dark-towns-badge-success-bg: #1a3a2a;
--dark-towns-badge-success-color: #a5d6a7;
--dark-towns-badge-warning-bg: #3a3020;
--dark-towns-badge-warning-color: #ffcc80;
--dark-towns-badge-danger-bg: #3a1a1e;
--dark-towns-badge-danger-color: #ef9a9a;
--dark-towns-badge-info-bg: #1a2a1a;
--dark-balloon-success-bg: #1a3a2a;
--dark-balloon-success-border: #28a745;
--dark-balloon-badge-primary-bg: #2a1a2e;
--dark-balloon-action-card-bg: #1a1a2e;
--dark-edgar-stat-item-border: #333;
--dark-edgar-stat-item-bg: #1a1a2e;
--dark-edgar-stat-number-color: #f9a8d4;
--dark-print-color-black: #000000;
--dark-capital-print-body-bg: #ffffff;
--capital-print-border-color: #2b6cb0;
--capital-print-h1-color: #1a365d;
--dark-card-print-border: #ccc;
--dark-stat-item-print-border: #ddd;
--color-white: #ffffff;
--border-width-1: 1px;
--border-width-2: 2px;
--badge-low-bg: rgba(200, 200, 200, 0.15);
--badge-low-text: #c8c8c8;
--badge-longterm-bg: rgba(160, 100, 220, 0.15);
--badge-longterm-text: #c4a0e0;
}
/* --- Brand palette dark overrides --- */
[data-brand="hub"] {
--color-primary-dark: #93c5fd;
--color-primary-medium: #60a5fa;
--color-primary-light: #3b82f6;
--secondary: #60a5fa;
}
[data-brand="ngo-market"] {
--color-primary-dark: #93c5fd;
--color-primary-medium: #60a5fa;
--color-primary-light: #3b82f6;
--primary: #60a5fa;
--secondary: #93c5fd;
--accent: #bfdbfe;
}
[data-brand="skelton-woody"] {
--color-primary-dark: #93c5fd;
--color-primary-medium: #60a5fa;
--color-primary-light: #3b82f6;
--primary: #60a5fa;
--secondary: #93c5fd;
--accent: #bfdbfe;
}
[data-brand="holliday-lighting"] {
--color-bg: #0f172a;
--color-bg-secondary: #1e293b;
--color-text-primary: #f5f7fa;
--color-text-secondary: #e2e8f0;
--color-border: #334155;
--color-card-bg: #1e293b;
--surface: #0f172a;
--surface-raised: #1e293b;
--ink: #f5f7fa;
--ink-muted: #e2e8f0;
--ink-faint: #b0bec5;
--border-light: #334155;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
--secondary: #14b8a6;
}
[data-brand="balloon-collective"] {
--color-primary-dark: #c4b5fd;
--color-primary-medium: #a78bfa;
--color-primary-light: #8b5cf6;
--secondary: #f472b6;
}
[data-brand="edgar-nadyne"] {
--color-primary-dark: #f9a8d4;
--color-primary-medium: #f472b6;
--color-primary-light: #ec4899;
--secondary: #d4a0b8;
--light: #1a1a2e;
--dark: #f0f0f0;
--border: #333;
}
[data-brand="capital-city"] {
--color-primary-dark: #93c5fd;
--color-primary-medium: #60a5fa;
--color-primary-light: #3b82f6;
--color-accent-light: #1e3a5f;
--color-accent-bg: rgba(43, 108, 176, 0.15);
--color-star-filled: #60a5fa;
--color-star-empty: #475569;
--color-recommended-bg: rgba(5, 150, 105, 0.1);
--color-warning-bg: rgba(220, 38, 38, 0.1);
}
[data-brand="performancetest"] {
--color-primary-dark: #6ee7b7;
--color-primary-medium: #34d399;
--color-primary-light: #10b981;
}
[data-brand="zoukmx"] {
--color-primary-dark: #f9a8d4;
--color-primary-medium: #f472b6;
--color-primary-light: #ec4899;
--secondary: #52b788;
}
[data-brand="leora"] {
--color-primary-dark: #5eead4;
--color-primary-medium: #2dd4bf;
--color-primary-light: #14b8a6;
--color-accent: #2dd4bf;
--color-accent-light: #134e4a;
--color-shadow: rgba(0, 0, 0, 0.3);
--color-shadow-hover: rgba(0, 0, 0, 0.5);
}
[data-brand="integrity-studio"] {
--primary: #a8c8e8;
--secondary: #a0c4e0;
--accent: #8ec0f0;
--highlight: #ff8090;
}
[data-brand="strong-towns"] {
--color-primary-dark: #a5d6a7;
--color-primary-medium: #81c784;
--color-primary-light: #66bb6a;
--primary: #81c784;
--secondary: #a5d6a7;
--accent: #e6b980;
--light: #1a1a2e;
--dark: #f0f0f0;
--border: #3a3a3a;
}
/* --- Section h2 brand-tinted dark backgrounds --- */
[data-brand="skelton-woody"] section h2 { background: var(--dark-bg-blue); }
[data-brand="trp-austin"] section h2 { background: var(--dark-bg-blue); }
[data-brand="ngo-market"] section h2 { background: var(--dark-bg-blue); }
[data-brand="integrity-studio"] section h2 { background: var(--dark-bg-integrity); }
[data-brand="sound-sight-tarot"] section h2 { background: var(--dark-bg-tarot); }
[data-brand="strong-towns"] section h2 { background: var(--dark-bg-towns); }
[data-brand="post-oak-group"] section h2 { background: #1a2744; }
[data-brand="kollective-group"] section h2 { background: #2d2d2d; }
[data-brand="balloon-collective"] section h2 { background: var(--dark-bg-balloon); }
[data-brand="edgar-nadyne"] section h2 { background: var(--dark-bg-edgar); }
[data-brand="zoukmx"] section h2 { background: var(--dark-bg-towns); }
/* --- Brand report element dark overrides --- */
[data-brand="skelton-woody"] .highlight-box { background: linear-gradient(135deg, var(--dark-bg-highlight-blue-start), var(--dark-bg-highlight-blue-end)); }
[data-brand="skelton-woody"] .info-box { background: var(--dark-bg-navy); }
[data-brand="skelton-woody"] .warning-box { background: var(--dark-warning-bg); }
[data-brand="balloon-collective"] .highlight-box { background: linear-gradient(135deg, var(--dark-bg-highlight-balloon-start), var(--dark-bg-highlight-balloon-end)); }
[data-brand="balloon-collective"] .info-box { background: var(--dark-bg-highlight-balloon-start); }
/* edgar-nadyne dark overrides */
[data-brand="edgar-nadyne"] .highlight-box { background: linear-gradient(135deg, var(--dark-bg-highlight-edgar-start), var(--dark-bg-highlight-edgar-end)); }
[data-brand="edgar-nadyne"] .info-box { background: var(--dark-bg-highlight-edgar-start); }
[data-brand="edgar-nadyne"] tr:hover { background: var(--dark-hover-bg); }
[data-brand="edgar-nadyne"] tr:hover td { background: var(--dark-hover-bg); }
[data-brand="edgar-nadyne"] details summary:hover { background: var(--dark-hover-bg); }
[data-brand="edgar-nadyne"] .testimonial { background: var(--dark-bg-navy); border-color: var(--dark-edgar-border-color); }
[data-brand="edgar-nadyne"] .testimonial .quote { color: var(--dark-edgar-quote-color); }
[data-brand="edgar-nadyne"] .testimonial .attribution { color: var(--dark-edgar-attribution-color); }
[data-brand="trp-austin"] .executive-summary h2 { color: var(--dark-trp-h2-color); }
[data-brand="trp-austin"] section h3 { color: var(--dark-trp-h3-color); }
[data-brand="trp-austin"] a { color: var(--dark-trp-h3-color); }
[data-brand="trp-austin"] th { color: var(--dark-trp-h2-color); }
[data-brand="trp-austin"] tr:hover { background: var(--dark-hover-bg); }
[data-brand="trp-austin"] tr:hover td { background: var(--dark-hover-bg); }
[data-brand="trp-austin"] .highlight-box { background: linear-gradient(135deg, var(--dark-bg-highlight-trp-start), var(--dark-bg-highlight-trp-end)); }
[data-brand="trp-austin"] .warning-box { background: var(--dark-warning-bg); }
[data-brand="trp-austin"] .info-box { background: var(--dark-info-bg-blue); }
[data-brand="trp-austin"] blockquote { background: var(--dark-bg-navy); color: var(--dark-trp-blockquote-color); }
[data-brand="trp-austin"] .contact-item .label { color: var(--dark-trp-label-color); }
[data-brand="trp-austin"] .contact-item .value { color: var(--dark-trp-h2-color); }
[data-brand="trp-austin"] footer { color: var(--dark-trp-label-color); }
[data-brand="trp-austin"] details summary { color: var(--dark-trp-h2-color); }
[data-brand="trp-austin"] details summary:hover { background: var(--dark-hover-bg); }
[data-brand="trp-austin"] details summary .detail-count { color: var(--dark-trp-label-color); }
[data-brand="trp-austin"] #toc { background: var(--dark-bg-navy) !important; }
[data-brand="sound-sight-tarot"] {
--color-primary-dark: #c0a0e0;
--color-primary-medium: #a080c0;
--color-primary-light: #7b4b94;
--primary: #c0a0e0;
--secondary: #d4b8f0;
--accent: #e0c98e;
--light: #1a1a2e;
}
[data-brand="sound-sight-tarot"] .highlight-box { background: linear-gradient(135deg, var(--dark-bg-highlight-tarot-start), var(--dark-bg-highlight-tarot-end)); }
[data-brand="sound-sight-tarot"] .badge-info { background: var(--dark-bg-highlight-tarot-start); color: var(--dark-tarot-badge-info-color); }
[data-brand="sound-sight-tarot"] .info-box { background: var(--dark-bg-navy); }
[data-brand="sound-sight-tarot"] .rating { color: var(--dark-tarot-rating-color); }
[data-brand="ngo-market"] .highlight-box { background: linear-gradient(135deg, var(--dark-bg-highlight-ngo-start), var(--dark-bg-highlight-ngo-end)); }
[data-brand="ngo-market"] .info-box { background: var(--dark-bg-navy); }
[data-brand="ngo-market"] .warning-box { background: var(--dark-warning-bg); }
[data-brand="integrity-studio"] .highlight-box { background: linear-gradient(135deg, var(--dark-bg-highlight-integrity-start), var(--dark-bg-highlight-integrity-end)); }
[data-brand="integrity-studio"] .warning-box { background: var(--dark-integrity-warning-bg); }
[data-brand="integrity-studio"] header { background: linear-gradient(135deg, var(--dark-bg-deep), var(--dark-integrity-header-end)); }
[data-brand="integrity-studio"] a { color: var(--dark-integrity-link-color); }
[data-brand="integrity-studio"] section h3 { color: var(--dark-integrity-h3-color); }
[data-brand="integrity-studio"] .executive-summary h2 { color: var(--dark-integrity-h2-color); }
[data-brand="integrity-studio"] .section-content { color: var(--dark-integrity-text-color); }
[data-brand="integrity-studio"] .section-content p,
[data-brand="integrity-studio"] .section-content li,
[data-brand="integrity-studio"] .section-content td { color: var(--dark-integrity-body-text); }
[data-brand="integrity-studio"] .executive-summary p { color: var(--dark-integrity-body-text); }
[data-brand="integrity-studio"] th { color: var(--dark-integrity-h2-color); }
[data-brand="integrity-studio"] footer { color: var(--dark-integrity-footer-color); }
[data-brand="zoukmx"] .highlight-box { background: linear-gradient(135deg, var(--dark-bg-highlight-green-start), var(--dark-bg-highlight-green-end)); }
[data-brand="strong-towns"] tr:hover { background: var(--dark-hover-bg); }
[data-brand="strong-towns"] tr:hover td { background: var(--dark-hover-bg); }
[data-brand="strong-towns"] .highlight-box { background: linear-gradient(135deg, var(--dark-bg-highlight-green-start), var(--dark-bg-highlight-green-end)); color: var(--dark-towns-text); }
[data-brand="strong-towns"] .info-box { background: var(--dark-info-bg-green); color: var(--dark-towns-text); }
[data-brand="strong-towns"] .warning-box { background: var(--dark-warning-bg); color: var(--dark-towns-text); }
[data-brand="strong-towns"] blockquote { background: var(--dark-bg-navy); color: var(--dark-towns-footer-color); }
[data-brand="strong-towns"] .section-content { color: var(--dark-towns-text); }
[data-brand="strong-towns"] .section-content p,
[data-brand="strong-towns"] .section-content li { color: var(--dark-towns-body-text); }
[data-brand="strong-towns"] .executive-summary p { color: var(--dark-towns-body-text); }
[data-brand="strong-towns"] td { color: var(--dark-towns-body-text); }
[data-brand="strong-towns"] blockquote { color: var(--dark-towns-footer-color); }
[data-brand="strong-towns"] footer { color: var(--dark-towns-footer-color); }
[data-brand="strong-towns"] .badge-success { background: var(--dark-towns-badge-success-bg); color: var(--dark-towns-badge-success-color); }
[data-brand="strong-towns"] .badge-warning { background: var(--dark-towns-badge-warning-bg); color: var(--dark-towns-badge-warning-color); }
[data-brand="strong-towns"] .badge-danger { background: var(--dark-towns-badge-danger-bg); color: var(--dark-towns-badge-danger-color); }
[data-brand="strong-towns"] .badge-info { background: var(--dark-towns-badge-info-bg); color: var(--dark-towns-badge-success-color); }
/* --- Neural Networks dark overrides --- */
[data-brand="neural-networks"] {
--color-bg: #0f0e1a;
--color-bg-secondary: #1a1830;
--color-card-bg: #1a1830;
--color-text-primary: #e2e8f0;
--color-text-secondary: #94a3b8;
--color-border: #312e81;
--primary: #a5b4fc;
--secondary: #c7d2fe;
--accent: #d8b4fe;
--light: #1a1830;
--dark: #e2e8f0;
}
/* --- Post Oak Group dark overrides --- */
[data-brand="post-oak-group"] { --primary: #4a7ab5; --secondary: #6b9fd4; --accent: #d4b565; --light: #1a1a2e; --dark: #e8e0ce; --border: #334155; --tr-hover-bg: #1e293b; --color-highlight-start: #1a2744; --color-highlight-end: #2c3a52; --color-info-bg: #1a2744; --color-warning-bg-brand: #2a2518; }
[data-brand="post-oak-group"] tr:hover { background: var(--tr-hover-bg); }
[data-brand="post-oak-group"] .highlight-box { background: linear-gradient(135deg, #1a2744, #2c3a52); color: #e2e8f0; }
[data-brand="post-oak-group"] .info-box { background: #1a2744; color: #e2e8f0; }
[data-brand="post-oak-group"] .warning-box { background: #2a2518; color: #e2e8f0; }
[data-brand="post-oak-group"] .section-content { color: #e2e8f0; }
[data-brand="post-oak-group"] .section-content p,
[data-brand="post-oak-group"] .section-content li { color: #cbd5e1; }
[data-brand="post-oak-group"] .executive-summary p { color: #cbd5e1; }
[data-brand="post-oak-group"] td { color: #cbd5e1; }
[data-brand="post-oak-group"] footer { color: #94a3b8; }
/* --- Kollective Group dark overrides --- */
[data-brand="kollective-group"] { --primary: #f08c7c; --secondary: #e85d4a; --accent: #f5a899; --light: #1a1a1a; --dark: #f0ebe6; --border: #334155; --tr-hover-bg: #2a1f1c; --color-highlight-start: #2a1f1c; --color-highlight-end: #33221e; --color-info-bg: #1e2430; --color-warning-bg-brand: #2a2518; }
[data-brand="kollective-group"] tr:hover { background: var(--tr-hover-bg); }
[data-brand="kollective-group"] .highlight-box { background: linear-gradient(135deg, #2a1f1c, #33221e); color: #e2e8f0; }
[data-brand="kollective-group"] .info-box { background: #1e2430; color: #e2e8f0; }
[data-brand="kollective-group"] .warning-box { background: #2a2518; color: #e2e8f0; }
[data-brand="kollective-group"] .section-content { color: #e2e8f0; }
[data-brand="kollective-group"] .section-content p,
[data-brand="kollective-group"] .section-content li { color: #cbd5e1; }
[data-brand="kollective-group"] .executive-summary p { color: #cbd5e1; }
[data-brand="kollective-group"] td { color: #cbd5e1; }
[data-brand="kollective-group"] footer { color: #94a3b8; }
/* Opportunity component dark → css/opportunity-components.css */
/* Dashboard & Form dark → css/leora-referral.css */
/* --- Brand-specific component dark --- */
[data-brand="balloon-collective"] .success-box { background: var(--dark-balloon-success-bg); border-left-color: var(--dark-balloon-success-border); }
[data-brand="balloon-collective"] .badge-primary { background: var(--dark-balloon-badge-primary-bg); }
[data-brand="balloon-collective"] .action-card { background: var(--dark-balloon-action-card-bg); }
[data-brand="edgar-nadyne"] .stat-item {
border: var(--border-width-1) solid var(--dark-edgar-stat-item-border);
color: var(--dark);
background: var(--dark-edgar-stat-item-bg);
}
[data-brand="edgar-nadyne"] .stat-item .stat-number { color: var(--dark-edgar-stat-number-color); }
}
/* ==========================================================================
11. RESPONSIVE
========================================================================== */
/* Dashboard & Form responsive → css/leora-referral.css */
/* Opportunity responsive → css/opportunity-components.css */
/* --- Leora portal responsive --- */
@media (max-width: 768px) {
[data-brand="leora"] .header-container {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-md);
}
[data-brand="leora"] .header-content h1 { font-size: var(--theme-leora-h1-font-size-md); }
[data-brand="leora"] .card-grid { gap: var(--spacing-md); }
}
@media (max-width: 480px) {
[data-brand="leora"] .header-content h1 { font-size: var(--theme-leora-h1-font-size-sm); }
[data-brand="leora"] .header-content p { font-size: var(--theme-leora-p-font-size-sm); }
[data-brand="leora"] .card-title { font-size: var(--theme-leora-card-title-font-size-sm); }
[data-brand="leora"] .card-description { font-size: var(--theme-leora-card-desc-font-size-sm); }
}
/* --- Holliday Lighting portal responsive --- */
@media (max-width: 640px) {
[data-brand="holliday-lighting"] .card { padding: var(--theme-holliday-card-padding-sm); }
}
/* --- Capital City portal responsive --- */
@media (max-width: 768px) {
[data-brand="capital-city"] .hero { padding: 0 var(--spacing-md); margin: var(--spacing-lg) auto; }
[data-brand="capital-city"] .stat-row { gap: var(--spacing-lg); }
[data-brand="capital-city"] .footer-nav { flex-direction: column; gap: var(--spacing-sm); }
}
/* --- Capital City portal print --- */
@media print {
[data-brand="capital-city"] body { background: var(--capital-city-print-body-bg, #fff); color: var(--capital-city-print-text, #000); }
[data-brand="capital-city"] header { background: none; border-bottom: var(--border-width-2) solid var(--capital-city-print-border); }
[data-brand="capital-city"] h1 { color: var(--capital-city-print-h1); }
[data-brand="capital-city"] .back-nav { display: none; }
[data-brand="capital-city"] .card { box-shadow: none; border: var(--border-width-1) solid var(--capital-city-print-card-border); }
[data-brand="capital-city"] .card::before { display: none; }
[data-brand="capital-city"] footer { background: none; }
[data-brand="capital-city"] a { color: var(--capital-city-print-link); }
}
/* --- Holliday Lighting portal print --- */
@media print {
[data-brand="holliday-lighting"] .card {
box-shadow: none;
border: var(--border-width-1) solid var(--dark-card-print-border);
break-inside: avoid;
}
[data-brand="holliday-lighting"] .card::before,
[data-brand="holliday-lighting"] .card::after { display: none; }
}
/* --- Edghar & Nadyne stat-item print --- */
@media print {
[data-brand="edgar-nadyne"] .stat-item {
border: var(--border-width-1) solid var(--dark-stat-item-print-border);
color: var(--dark);
background: var(--color-white);
}
[data-brand="edgar-nadyne"] .stat-item .stat-number { color: var(--primary); }
}
/* Integrity Studio opportunities print → css/opportunity-components.css */
/* Leora dashboard & form print → css/leora-referral.css */