/* ==================================== COCRIANZA LANDING - MODO OSCURO COMPLETO Archivo: wwwroot/css/Landing/dark-mode-landing.css Activado por: - [data-theme="dark"] en - .cocrianza-dark-mode en o Cubre: Index, Funciones, Beneficios, Descargar, Contacto, Legales, Navbar, Footer ==================================== */ /* ==================================== VARIABLES MODO OSCURO ==================================== */ [data-theme="dark"] { --dm-bg-primary: #1A1A2E; --dm-bg-secondary: #16213E; --dm-bg-tertiary: #0F3460; --dm-bg-card: #1E1E3A; --dm-bg-card-hover: #252545; --dm-bg-input: #2A2A4A; --dm-bg-navbar: rgba(26, 26, 46, 0.95); --dm-text-primary: #E8E8F0; --dm-text-secondary: #B0B0C8; --dm-text-muted: #8888A8; --dm-border: rgba(255, 255, 255, 0.08); --dm-border-hover: rgba(255, 255, 255, 0.15); --dm-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); --dm-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.4); --dm-coral-soft: #FF9B85; --dm-verde-soft: #A8D5BA; --dm-overlay: rgba(0, 0, 0, 0.2); } /* ==================================== TRANSICIÓN SUAVE GLOBAL ==================================== */ [data-theme="dark"] *, [data-theme="dark"] *::before, [data-theme="dark"] *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ==================================== 1. BODY & FONDOS GENERALES ==================================== */ [data-theme="dark"] body { background: var(--dm-bg-primary) !important; color: var(--dm-text-primary) !important; } /* ==================================== 2. NAVBAR ==================================== */ [data-theme="dark"] .navbar, [data-theme="dark"] .navbar.bg-cocrianza-beige { background: var(--dm-bg-navbar) !important; border-bottom-color: var(--dm-border) !important; backdrop-filter: blur(15px); } [data-theme="dark"] .navbar.scrolled { background-color: rgba(26, 26, 46, 0.98) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .navbar .nav-link.text-cocrianza-gris, [data-theme="dark"] .navbar .nav-link.fw-semibold { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .navbar .nav-link:hover, [data-theme="dark"] .navbar .nav-link.active { color: var(--dm-coral-soft) !important; } [data-theme="dark"] .navbar .nav-link::after { background: var(--dm-coral-soft); } /* Hamburguesa en modo oscuro */ [data-theme="dark"] .navbar-toggler { border-color: rgba(255, 255, 255, 0.2) !important; } [data-theme="dark"] .navbar-toggler-icon { filter: invert(1) brightness(2); } /* Separador navbar */ [data-theme="dark"] .navbar-separator { background-color: rgba(255, 255, 255, 0.15); } /* Social links en navbar */ [data-theme="dark"] .social-nav-link { color: var(--dm-text-secondary); } [data-theme="dark"] .navbar-social-links-mobile { border-top-color: var(--dm-border); } [data-theme="dark"] .navbar-social-links-mobile .social-nav-link { background: rgba(255, 255, 255, 0.05); } /* Navbar collapse en móvil */ @media (max-width: 991px) { [data-theme="dark"] .navbar-collapse { border-top-color: var(--dm-border) !important; } [data-theme="dark"] .navbar-nav .nav-link.active { background: rgba(255, 155, 133, 0.15) !important; color: var(--dm-coral-soft) !important; } [data-theme="dark"] .navbar-nav .nav-link.active::before { background: var(--dm-coral-soft); } [data-theme="dark"] .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, 0.05) !important; } } /* ==================================== 3. HERO SECTIONS ==================================== */ [data-theme="dark"] .hero-section, [data-theme="dark"] .hero-section.bg-cocrianza-melocoton { background: linear-gradient(135deg, var(--dm-bg-primary) 0%, var(--dm-bg-secondary) 100%) !important; } [data-theme="dark"] .hero-content h1, [data-theme="dark"] .hero-content h1.text-dark, [data-theme="dark"] .hero-section h1 { color: var(--dm-text-primary) !important; } [data-theme="dark"] .hero-content .lead, [data-theme="dark"] .hero-content .lead.text-cocrianza-gris { color: var(--dm-text-secondary) !important; } /* Hero decoration circles */ [data-theme="dark"] .hero-decoration { background: radial-gradient(circle, rgba(255, 155, 133, 0.06) 0%, transparent 70%); } /* Hero mockup card */ [data-theme="dark"] .hero-mockup .card, [data-theme="dark"] .hero-mockup .bg-white { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .hero-mockup .text-dark { color: var(--dm-text-primary) !important; } [data-theme="dark"] .hero-mockup .text-muted, [data-theme="dark"] .hero-mockup small { color: var(--dm-text-muted) !important; } /* Trust indicators */ [data-theme="dark"] .trust-indicators { border-top-color: var(--dm-border); } /* Descargar hero */ [data-theme="dark"] .descargar-hero-section { background: linear-gradient(180deg, var(--dm-bg-primary) 0%, var(--dm-bg-secondary) 100%) !important; } [data-theme="dark"] .descargar-hero-section::before { background: radial-gradient(circle, rgba(255, 139, 110, 0.04) 0%, transparent 70%); } [data-theme="dark"] .descargar-hero-section::after { background: radial-gradient(circle, rgba(168, 213, 186, 0.04) 0%, transparent 70%); } /* ==================================== 4. SECCIONES CON FONDOS CLAROS ==================================== */ /* bg-white sections */ [data-theme="dark"] section.bg-white, [data-theme="dark"] .modules-section.bg-white, [data-theme="dark"] .bg-white { background-color: var(--dm-bg-secondary) !important; } /* bg-cocrianza-beige sections */ [data-theme="dark"] .bg-cocrianza-beige:not(.navbar) { background-color: var(--dm-bg-primary) !important; } /* bg-cocrianza-melocoton sections (no hero) */ [data-theme="dark"] section.bg-cocrianza-melocoton:not(.hero-section) { background-color: var(--dm-bg-secondary) !important; } /* bg-light */ [data-theme="dark"] .bg-light { background-color: var(--dm-bg-secondary) !important; } /* Secciones con py-5 (alternancias) */ [data-theme="dark"] .modules-section, [data-theme="dark"] .benefits-section { background-color: var(--dm-bg-primary) !important; } /* ==================================== 5. CARDS GENÉRICAS ==================================== */ [data-theme="dark"] .card, [data-theme="dark"] .benefit-card.bg-white, [data-theme="dark"] .module-card, [data-theme="dark"] .benefit-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } [data-theme="dark"] .card:hover, [data-theme="dark"] .benefit-card:hover, [data-theme="dark"] .module-card:hover { background: var(--dm-bg-card-hover) !important; border-color: var(--dm-border-hover) !important; box-shadow: var(--dm-shadow-hover) !important; } /* Module cards con fondos de color */ [data-theme="dark"] .module-card.bg-cocrianza-melocoton { background: linear-gradient(135deg, rgba(255, 155, 133, 0.12), rgba(255, 155, 133, 0.05)) !important; border-color: rgba(255, 155, 133, 0.2) !important; } [data-theme="dark"] .module-card.bg-cocrianza-verde { background: linear-gradient(135deg, rgba(168, 213, 186, 0.12), rgba(168, 213, 186, 0.05)) !important; border-color: rgba(168, 213, 186, 0.2) !important; } /* Shadow-sm en cards */ [data-theme="dark"] .shadow-sm { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; } /* Rounded cards */ [data-theme="dark"] .rounded-4.bg-white, [data-theme="dark"] .rounded-3.bg-white { background: var(--dm-bg-card) !important; } /* ==================================== 6. TEXTOS ==================================== */ [data-theme="dark"] .text-dark, [data-theme="dark"] h1.text-dark, [data-theme="dark"] h2.text-dark, [data-theme="dark"] h3.text-dark, [data-theme="dark"] h4.text-dark, [data-theme="dark"] h5.text-dark, [data-theme="dark"] h6.text-dark, [data-theme="dark"] .fw-bold.text-dark { color: var(--dm-text-primary) !important; } [data-theme="dark"] .text-muted, [data-theme="dark"] small.text-muted { color: var(--dm-text-muted) !important; } [data-theme="dark"] .text-cocrianza-gris { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .lead.text-cocrianza-gris, [data-theme="dark"] p.text-cocrianza-gris { color: var(--dm-text-secondary) !important; } /* Display headings */ [data-theme="dark"] .display-4, [data-theme="dark"] .display-5 { color: var(--dm-text-primary) !important; } /* Coral y verde texto mantienen sus colores (ya están adaptados en branding) */ /* ==================================== 7. BOTONES ==================================== */ /* Outline buttons */ [data-theme="dark"] .btn-outline-cocrianza-primary { border-color: var(--dm-coral-soft) !important; color: var(--dm-coral-soft) !important; } [data-theme="dark"] .btn-outline-cocrianza-primary:hover { background: var(--dm-coral-soft) !important; color: white !important; } /* Light buttons en CTA */ [data-theme="dark"] .btn-outline-light { border-color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.9); } /* ==================================== 8. CTA SECTION (bg-cocrianza-coral se mantiene igual - ya es un fondo fuerte) ==================================== */ [data-theme="dark"] .cta-section.bg-cocrianza-coral { background: linear-gradient(135deg, #CC8F84 0%, #B87A6F 100%) !important; } /* ==================================== 9. FOOTER (bg-dark ya es oscuro, ajustes menores) ==================================== */ [data-theme="dark"] footer.bg-dark { background-color: #0D0D1A !important; border-top: 1px solid var(--dm-border); } [data-theme="dark"] footer hr.border-secondary { border-color: var(--dm-border) !important; } /* ==================================== 10. FORMULARIOS (Contacto) ==================================== */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] textarea.form-control { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .form-control::placeholder { color: var(--dm-text-muted) !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] textarea.form-control:focus { border-color: var(--dm-coral-soft) !important; box-shadow: 0 0 0 3px rgba(255, 155, 133, 0.15) !important; background-color: var(--dm-bg-input) !important; } [data-theme="dark"] .form-label { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .form-text { color: var(--dm-text-muted) !important; } /* ==================================== 11. ICONOS Y CÍRCULOS DE ICONOS ==================================== */ [data-theme="dark"] .icon-circle { opacity: 0.9; } [data-theme="dark"] .bg-cocrianza-melocoton:not(.hero-section):not(section) { background-color: rgba(255, 155, 133, 0.15) !important; } [data-theme="dark"] .bg-cocrianza-turquesa-palido { background-color: rgba(194, 236, 236, 0.12) !important; } [data-theme="dark"] .bg-cocrianza-amarillo-mostaza:not(.hero-section) { background-color: rgba(244, 201, 93, 0.12) !important; } /* ==================================== 12. DESCARGAR PAGE - ESPECÍFICO ==================================== */ /* Download store buttons */ [data-theme="dark"] .btn-download-store { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } [data-theme="dark"] .btn-download-store:hover { box-shadow: var(--dm-shadow-hover) !important; border-color: var(--dm-border-hover) !important; } /* Apple button mantiene su estilo oscuro */ [data-theme="dark"] .btn-apple { background: linear-gradient(135deg, #000000 0%, #333333 100%) !important; border-color: #444 !important; } /* Paso cards */ [data-theme="dark"] .paso-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .paso-card:hover { box-shadow: var(--dm-shadow) !important; } [data-theme="dark"] .paso-titulo { color: var(--dm-text-primary) !important; } [data-theme="dark"] .paso-descripcion { color: var(--dm-text-secondary) !important; } /* Placeholder images */ [data-theme="dark"] .placeholder-img { background: linear-gradient(135deg, var(--dm-bg-card) 0%, var(--dm-bg-secondary) 100%) !important; border-color: var(--dm-border) !important; } /* Text muted en descargar */ [data-theme="dark"] .descargar-hero-section .text-muted { color: var(--dm-text-secondary) !important; } /* ==================================== 13. LEGAL PAGES ==================================== */ /* Legal hero */ [data-theme="dark"] .legal-hero { background: linear-gradient(135deg, var(--dm-bg-secondary) 0%, var(--dm-bg-tertiary) 100%) !important; } [data-theme="dark"] .legal-hero h1 { color: var(--dm-text-primary) !important; } [data-theme="dark"] .legal-hero-subtitle { color: var(--dm-text-secondary) !important; } /* Legal breadcrumb */ [data-theme="dark"] .legal-breadcrumb { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .legal-breadcrumb a, [data-theme="dark"] .legal-breadcrumb span { color: var(--dm-text-secondary) !important; } /* Legal content */ [data-theme="dark"] .legal-main-content { background: var(--dm-bg-card) !important; box-shadow: var(--dm-shadow) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .legal-main-content p, [data-theme="dark"] .legal-main-content li { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .legal-main-content h2, [data-theme="dark"] .legal-main-content h3, [data-theme="dark"] .section-title, [data-theme="dark"] .section-subtitle { color: var(--dm-text-primary) !important; } /* Legal index/sidebar */ [data-theme="dark"] .legal-index { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .legal-index a { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .legal-index a:hover { color: var(--dm-coral-soft) !important; } /* Highlight boxes */ [data-theme="dark"] .highlight-box { background: rgba(255, 155, 133, 0.08) !important; border-color: rgba(255, 155, 133, 0.2) !important; color: var(--dm-text-primary) !important; } /* Legal info cards */ [data-theme="dark"] .legal-info-card { background: var(--dm-bg-secondary) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } /* Legal cards grid */ [data-theme="dark"] .legal-cards-grid .card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } /* Legal footer actions */ [data-theme="dark"] .legal-footer-actions { border-top-color: var(--dm-border) !important; } /* Legal hero meta */ [data-theme="dark"] .legal-hero-meta span { color: var(--dm-text-muted) !important; } /* Legal sections */ [data-theme="dark"] .legal-section { border-bottom-color: var(--dm-border) !important; } /* Legal tables */ [data-theme="dark"] .legal-table-wrapper table { color: var(--dm-text-primary) !important; } [data-theme="dark"] .legal-table-wrapper th { background: var(--dm-bg-tertiary) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .legal-table-wrapper td { border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } /* ==================================== 14. BADGES Y TAGS ==================================== */ [data-theme="dark"] .badge.bg-light { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .badge.bg-white { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } /* ==================================== 15. SEPARADORES Y BORDES ==================================== */ [data-theme="dark"] hr { border-color: var(--dm-border) !important; } [data-theme="dark"] .border-bottom { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .border-top { border-top-color: var(--dm-border) !important; } /* ==================================== 16. MODALES ==================================== */ [data-theme="dark"] .modal-content { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .modal-header { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .modal-footer { border-top-color: var(--dm-border) !important; } [data-theme="dark"] .modal-header .btn-close { filter: invert(1) brightness(2); } /* Modal iOS (Descargar) */ [data-theme="dark"] .modal-header-ios { background: linear-gradient(135deg, var(--dm-bg-tertiary) 0%, var(--dm-bg-secondary) 100%) !important; } [data-theme="dark"] .modal-body-ios { background: var(--dm-bg-card) !important; } [data-theme="dark"] .modal-footer-ios { background: var(--dm-bg-card) !important; } /* ==================================== 17. SCROLLBAR PERSONALIZADO (MODO OSCURO) ==================================== */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dm-bg-primary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } /* ==================================== 18. FUNCIONES PAGE - FEATURE CARDS ==================================== */ [data-theme="dark"] .feature-card, [data-theme="dark"] .function-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .feature-card:hover, [data-theme="dark"] .function-card:hover { background: var(--dm-bg-card-hover) !important; } [data-theme="dark"] .feature-card h5, [data-theme="dark"] .function-card h5 { color: var(--dm-text-primary) !important; } [data-theme="dark"] .feature-card p, [data-theme="dark"] .function-card p { color: var(--dm-text-secondary) !important; } /* ==================================== 19. BENEFICIOS PAGE - STAT CARDS & COUNTERS ==================================== */ [data-theme="dark"] .stat-counter { color: var(--dm-text-primary) !important; } [data-theme="dark"] .stat-label { color: var(--dm-text-secondary) !important; } /* Testimonial cards */ [data-theme="dark"] .testimonial-card, [data-theme="dark"] .benefit-card.bg-white.rounded-4 { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .testimonial-card h6, [data-theme="dark"] .benefit-card h6.fw-bold.text-dark { color: var(--dm-text-primary) !important; } [data-theme="dark"] .testimonial-card small.text-muted { color: var(--dm-text-muted) !important; } /* ==================================== 20. CONTACTO PAGE - ESPECÍFICO ==================================== */ [data-theme="dark"] .contact-method-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .contact-method-card:hover { background: var(--dm-bg-card-hover) !important; } [data-theme="dark"] .contact-method-card h4 { color: var(--dm-text-primary) !important; } [data-theme="dark"] .contact-method-card p { color: var(--dm-text-secondary) !important; } /* FAQ section */ [data-theme="dark"] .accordion-item { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .accordion-button { background: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .accordion-button:not(.collapsed) { background: var(--dm-bg-card-hover) !important; color: var(--dm-coral-soft) !important; } [data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(2); } [data-theme="dark"] .accordion-body { background: var(--dm-bg-card) !important; color: var(--dm-text-secondary) !important; } /* ==================================== 21. GRADIENT TEXT FIX ==================================== */ [data-theme="dark"] .gradient-text, [data-theme="dark"] .descargar-title-gradient { background: linear-gradient(135deg, var(--dm-coral-soft) 0%, var(--dm-verde-soft) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ==================================== 22. ALERTAS Y NOTIFICACIONES ==================================== */ [data-theme="dark"] .alert-info { background: rgba(194, 236, 236, 0.1) !important; border-color: rgba(194, 236, 236, 0.2) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .alert-warning { background: rgba(244, 201, 93, 0.1) !important; border-color: rgba(244, 201, 93, 0.2) !important; color: var(--dm-text-primary) !important; } /* ==================================== 23. IMÁGENES Y MEDIA ==================================== */ [data-theme="dark"] img:not(.logo-img):not([src*="icon"]):not([src*="Logo"]) { opacity: 0.92; } /* Logo mantiene su brillo */ [data-theme="dark"] .logo-img { filter: brightness(1.1); } /* ==================================== 24. UTILITY OVERRIDES ==================================== */ /* opacity-75 text should still be readable */ [data-theme="dark"] .opacity-75 { opacity: 0.7 !important; } /* Link colors */ [data-theme="dark"] a:not(.btn):not(.nav-link):not(.social-nav-link):not(.navbar-brand) { color: var(--dm-coral-soft); } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.social-nav-link):not(.navbar-brand):hover { color: #FFB7A5; } /* Selection color */ [data-theme="dark"] ::selection { background: rgba(255, 155, 133, 0.3); color: white; } /* ==================================== 25. PRINT - MODO OSCURO NO SE IMPRIME ==================================== */ @media print { [data-theme="dark"] body, [data-theme="dark"] .navbar, [data-theme="dark"] section, [data-theme="dark"] .card { background: white !important; color: black !important; } } /* ==================================== QUIÉNES SOMOS - MODO OSCURO ==================================== */ /* Hero section */ [data-theme="dark"] .qs-hero-section { background: linear-gradient(135deg, var(--dm-bg-primary) 0%, var(--dm-bg-secondary) 60%, var(--dm-bg-tertiary) 100%) !important; } [data-theme="dark"] .qs-hero-badge { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } [data-theme="dark"] .qs-stat-pill { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } [data-theme="dark"] .qs-hero-subtitle { color: var(--dm-text-secondary) !important; } /* Origin card */ [data-theme="dark"] .qs-origin-section { background: var(--dm-bg-secondary) !important; } [data-theme="dark"] .qs-origin-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; border-left-color: var(--dm-coral-soft) !important; } [data-theme="dark"] .qs-origin-title { color: var(--dm-text-primary) !important; } [data-theme="dark"] .qs-origin-text { color: var(--dm-text-secondary) !important; } /* Section labels & titles */ [data-theme="dark"] .qs-section-label { background: rgba(255, 155, 133, 0.12) !important; color: var(--dm-coral-soft) !important; } [data-theme="dark"] .qs-section-title { color: var(--dm-text-primary) !important; } /* Founders section */ [data-theme="dark"] .qs-founders-section { background: var(--dm-bg-primary) !important; } [data-theme="dark"] .qs-founder-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } [data-theme="dark"] .qs-founder-card:hover { box-shadow: var(--dm-shadow-hover) !important; } /* Photo wrappers */ [data-theme="dark"] .qs-photo-social { background: linear-gradient(145deg, rgba(168, 213, 186, 0.08), rgba(194, 236, 236, 0.06)) !important; } [data-theme="dark"] .qs-photo-tech { background: linear-gradient(145deg, rgba(255, 155, 133, 0.08), rgba(230, 213, 247, 0.06)) !important; } [data-theme="dark"] .qs-photo-placeholder { background: var(--dm-bg-secondary) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .qs-photo-icon { color: var(--dm-border) !important; } [data-theme="dark"] .qs-photo-hint { color: var(--dm-text-muted) !important; } /* Founder content */ [data-theme="dark"] .qs-founder-name { color: var(--dm-text-primary) !important; } [data-theme="dark"] .qs-founder-title-role { color: var(--dm-text-muted) !important; } [data-theme="dark"] .qs-founder-bio { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .qs-founder-quote-mark { opacity: 0.15 !important; } /* Quote boxes */ [data-theme="dark"] .qs-founder-quote { background: rgba(168, 213, 186, 0.07) !important; border-left-color: var(--dm-verde-soft) !important; color: var(--dm-text-secondary) !important; } [data-theme="dark"] .qs-quote-tech-bg { background: rgba(255, 155, 133, 0.07) !important; border-left-color: var(--dm-coral-soft) !important; } /* Skills */ [data-theme="dark"] .qs-skill-social { background: rgba(168, 213, 186, 0.1) !important; color: var(--dm-verde-soft) !important; border-color: rgba(168, 213, 186, 0.2) !important; } [data-theme="dark"] .qs-skill-tech { background: rgba(255, 155, 133, 0.1) !important; color: var(--dm-coral-soft) !important; border-color: rgba(255, 155, 133, 0.2) !important; } [data-theme="dark"] .qs-skill-mgmt { background: rgba(244, 201, 93, 0.08) !important; color: #F4C95D !important; border-color: rgba(244, 201, 93, 0.2) !important; } /* Career highlights */ [data-theme="dark"] .qs-career-highlights { background: var(--dm-bg-secondary) !important; } [data-theme="dark"] .qs-career-title { color: var(--dm-text-muted) !important; } [data-theme="dark"] .qs-career-item strong { color: var(--dm-text-primary) !important; } [data-theme="dark"] .qs-career-item p, [data-theme="dark"] .qs-career-item span { color: var(--dm-text-muted) !important; } /* Education & project badges */ [data-theme="dark"] .qs-edu-badge { background: var(--dm-bg-secondary) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } [data-theme="dark"] .qs-project-pill { background: var(--dm-bg-secondary) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } [data-theme="dark"] .qs-project-pill:hover { border-color: var(--dm-coral-soft) !important; color: var(--dm-coral-soft) !important; } [data-theme="dark"] .qs-project-main { background: linear-gradient(135deg, #E8836B, #c96a52) !important; color: white !important; border-color: transparent !important; } /* Synergy section */ [data-theme="dark"] .qs-synergy-section { background: var(--dm-bg-secondary) !important; } [data-theme="dark"] .qs-synergy-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .qs-synergy-card p { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .qs-synergy-point strong { color: var(--dm-text-primary) !important; } [data-theme="dark"] .qs-synergy-point p { color: var(--dm-text-muted) !important; } /* Venn diagram */ [data-theme="dark"] .qs-venn-social { background: linear-gradient(135deg, rgba(168, 213, 186, 0.2), rgba(127, 162, 116, 0.15)) !important; border-color: rgba(168, 213, 186, 0.4) !important; } [data-theme="dark"] .qs-venn-tech { background: linear-gradient(135deg, rgba(255, 155, 133, 0.2), rgba(232, 131, 107, 0.15)) !important; border-color: rgba(255, 155, 133, 0.4) !important; } [data-theme="dark"] .qs-venn-label strong { color: var(--dm-text-primary) !important; } [data-theme="dark"] .qs-venn-skills span { color: var(--dm-text-muted) !important; } [data-theme="dark"] .qs-venn-center { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } /* CTA section */ [data-theme="dark"] .qs-cta-section { background: var(--dm-bg-primary) !important; }