/* ============================================================ * Merabytes — Theme Variables & Light Mode Overrides * * Architecture (same as adversary/minimia): * - CDN custom.css = dark mode baseline (loaded first) * - This file = dual-theme layer (loaded after) * * Toggle: set data-bs-theme="light" | "dark" on * Default: light (set by JS from localStorage or system pref) * ============================================================ */ /* ── 1. CSS Variables ── */ /* Logo swap: show light logo by default, dark logo in dark mode */ .logo-dark { display: none; } [data-bs-theme=dark] .logo-light { display: none; } [data-bs-theme=dark] .logo-dark { display: inline-block; } /* hero-content: override CDN 840px hardcoded — ambos temas */ .hero-content { max-width: 1000px !important; } /* Company logos: negro en light, blanco en dark */ [data-bs-theme=dark] .company-logo img { filter: brightness(0) invert(1) !important; } [data-bs-theme=dark] .company-logo.client-logo img { filter: none !important; max-height: none !important; } /* Dark mode: override CDN custom.css vars with merabytes brand */ [data-bs-theme=dark], html[data-bs-theme=dark] { --primary-color: #FFFFFF; --secondary-color: #0A0A0A; --text-color: #A7AABB; --bg-color: #060606; --accent-color: #c73b35; --accent-secondary-color: #9b2226; --divider-color: #FFFFFF0F; --dark-divider-color: #FFFFFF33; /* semantic aliases */ --ink: #FFFFFF; --muted: #A7AABB; --bg-1: #060606; --bg-2: #0F0F0F; --bg-3: #1a1a1a; --grid: #FFFFFF1A; --success: #28a745; --hero-max-width: 1000px; } /* Dark mode: btn-highlighted text uses bg-color for contrast (dark bg = white text via CDN primary-color is fine, but on hover the fill is accent-color red, so text should stay readable) */ [data-bs-theme=dark] .btn-default.btn-highlighted { color: var(--primary-color) !important; } [data-bs-theme=dark] .btn-default.btn-highlighted:hover { color: #ffffff !important; } /* Dark mode: what-we-do-body list items — más visibles (CDN usa bg casi negro + borde invisible) */ [data-bs-theme=dark] .what-we-do-body ul li { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.12) !important; } /* Dark mode: what-we-do-nav tab styles — asegurar borde inferior y colores correctos */ [data-bs-theme=dark] .what-we-do-nav ul li { border-bottom: 6px solid rgba(255,255,255,0.12); } [data-bs-theme=dark] .what-we-do-nav ul li .nav-link { color: rgba(255,255,255,0.65); } [data-bs-theme=dark] .what-we-do-nav ul li .nav-link.active, [data-bs-theme=dark] .what-we-do-nav ul li .nav-link:hover { color: var(--accent-color) !important; } /* Dark mode: what-we-do-tab-body — fondo con sutil contraste y borde separador */ [data-bs-theme=dark] .what-we-do-tab-body { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; } [data-bs-theme=dark] .what-we-do-body-info { border-right: 1px solid rgba(255,255,255,0.12) !important; } [data-bs-theme=dark] .what-we-do-body-content p { color: var(--muted); } [data-bs-theme=dark] .what-we-do-body-title h3 { color: #ffffff !important; } [data-bs-theme=dark] .what-we-do-tab-header p { color: var(--muted); } /* Light mode: override CDN vars + component styles */ [data-bs-theme=light], html[data-bs-theme=light] { --primary-color: #1a1a1a; --secondary-color: #f5f5f5; --text-color: #333333; --bg-color: #ffffff; --accent-color: #c73b35; --accent-secondary-color: #9b2226; --divider-color: rgba(0,0,0,0.07); --dark-divider-color: rgba(0,0,0,0.15); /* semantic aliases */ --ink: #1a1a1a; --muted: #666666; --bg-1: #ffffff; --bg-2: #f5f5f5; --bg-3: #e8e8e8; --grid: #d1d1d1; --success: #28a745; --hero-max-width: 1000px; } /* ── 2. Light mode component overrides ── */ /* (Scoped to [data-bs-theme=light] — no !important needed for most rules) */ [data-bs-theme=light] { /* Root variables for light mode */ /* Body and main background */ body { background-color: #ffffff !important; color: #1a1a1a !important; } /* Headers and titles */ h1, h2, h3, h4, h5, h6 { color: #1a1a1a !important; } /* Paragraphs and general text */ p { color: #333333 !important; } /* Links - keep accent color */ a { color: var(--accent) !important; } /* Sections with dark backgrounds should be white */ section { background-color: #ffffff !important; } /* Header */ .page-header { background: transparent !important; color: #1a1a1a !important; } .page-header h1 { color: #1a1a1a !important; } /* Hero section */ .hero { background: transparent !important; color: #1a1a1a !important; } .hero-content { max-width: 1000px !important; } .hero-btn { margin: 40px auto 0 !important; max-width: 800px !important; } .hero h1, .hero h2, .hero h3, .hero p { color: #1a1a1a !important; } .hero h1 span { color: var(--accent) !important; } /* About us section */ .about-us { background-color: #ffffff !important; } .about-us-box { background-color: #f5f5f5 !important; } .about-us-item { background-color: transparent !important; } .about-item-image img { filter: brightness(0) !important; } .about-item-content h2, .about-item-content h3 { color: #1a1a1a !important; } /* Services section */ .our-services { background-color: #ffffff !important; } .service-item { background-color: #f5f5f5 !important; border: 1px solid #e0e0e0 !important; } .service-item-content h3 { color: #1a1a1a !important; } .service-item-content p { color: #333333 !important; } /* Facts section */ .our-facts { background-color: #f9f9f9 !important; } .facts-item { background-color: #ffffff !important; border: 1px solid #e0e0e0 !important; } .facts-item h3 { color: #1a1a1a !important; } .facts-item p { color: #333333 !important; } .facts-item-content { background-color: transparent !important; } /* Testimonials */ .our-testimonials { background-color: #f9f9f9 !important; } .testimonials-box { background-color: #ffffff !important; } .testimonial-item { background-color: transparent !important; border: transparent !important; } .testimonial-content { background-color: transparent !important; } .testimonial-content p { color: #ffffff !important; } .author-image { background-color: transparent !important; } .author-content h3, .author-content p { color: #ffffff !important; } /* Contact section */ .page-contact-us { background-color: #ffffff !important; } .contact-form { background-color: #f5f5f5 !important; } .form-control { background-color: #ffffff !important; border: 1px solid #d1d1d1 !important; color: #1a1a1a !important; } .form-control::placeholder { color: #999999 !important; } .form-control:focus { background-color: #ffffff !important; border-color: var(--accent) !important; color: #1a1a1a !important; } /* Footer */ .main-footer { background-color: #f5f5f5 !important; color: #333333 !important; } .main-footer h3, .main-footer h4, .main-footer p, .main-footer a { color: #333333 !important; } /* Breadcrumbs */ .breadcrumb { background-color: transparent !important; } .breadcrumb-item { color: #666666 !important; } .breadcrumb-item a { color: var(--accent) !important; } /* Section titles */ .section-title h2 { color: #1a1a1a !important; } .section-title h3 { display: inline-block !important; position: relative !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.2em !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: white !important; background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%) !important; border: 1px solid var(--divider-color) !important; border-radius: 100px !important; padding: 10px 50px !important; margin-bottom: 20px !important; } .section-title h3::before { content: '' !important; position: absolute !important; display: block !important; top: 50% !important; left: 24px !important; transform: translateY(-50%) brightness(0) invert(1) !important; background: url(https://merabytes.blob.core.windows.net/web/images/icon-sparkle.svg) no-repeat !important; background-position: left center !important; background-size: cover !important; width: 16px !important; height: 16px !important; } .section-title p { color: #333333 !important; } /* Approach section */ .our-approach { background-color: #ffffff !important; } .approach-item { background-color: #ffffff !important; } .approach-item-content h3 { color: #1a1a1a !important; } .approach-item-content p { color: #333333 !important; } /* Approach counter box - white text for both h2 and p */ .approach-counter-box h2, .approach-counter-box p { color: white !important; } /* Post content */ .post-content { background-color: #ffffff !important; color: #333333 !important; } .post-entry { color: #333333 !important; } .post-entry h1, .post-entry h2, .post-entry h3, .post-entry h4, .post-entry h5, .post-entry h6 { color: #1a1a1a !important; } .post-entry p, .post-entry li { color: #333333 !important; } /* Tags */ .post-tags { color: #666666 !important; } /* Buttons */ /* btn-default: mantener estilo dark mode (degradado rojo) como base. Texto blanco siempre, excepto btn-highlighted (Solicitar acceso) que usa texto negro. */ .btn-default:not(.btn-highlighted), .btn-default:not(.btn-highlighted) a, .btn-default:not(.btn-highlighted):hover, .btn-default:not(.btn-highlighted):hover a { color: #ffffff !important; } /* btn-highlighted (Solicitar acceso): outlined en light — fondo blanco, borde rojo, texto negro */ .btn-default.btn-highlighted { background: #ffffff !important; background-image: none !important; border: 1px solid var(--accent-color) !important; color: #1a1a1a !important; padding: 16px 30px !important; } .btn-default.btn-highlighted::before { background: var(--accent-color) !important; } .btn-default.btn-highlighted:hover { color: #ffffff !important; } /* Menu */ .menu { background-color: #ffffff !important; border-bottom: 1px solid #e0e0e0 !important; } .menu a { color: #1a1a1a !important; } .menu a:hover { color: var(--accent) !important; } .nav-link { color: white !important; } .navbar-brand { margin-right: 11px !important; } .main-menu .nav-menu-wrapper .navbar-nav { background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%) !important; } /* Cards and boxes with shadow */ .card, .box { background-color: #ffffff !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } /* Any element with dark background class */ .bg-dark, .dark-bg { background-color: #ffffff !important; color: #1a1a1a !important; } /* Contact info items */ .contact-info-item { background-color: #f5f5f5 !important; border: 1px solid #e0e0e0 !important; } .contact-info-content h3 { color: #1a1a1a !important; } .contact-info-content p, .contact-info-content a { color: #333333 !important; } /* Logo filters - transform logos to black for light mode */ img[style*="filter: brightness(0) invert(1)"] { filter: brightness(0) !important; } /* Company logos should be black for light mode */ .company-logo img { filter: brightness(0) !important; } /* Client logos in Use Cases section - display in original colors */ .company-logo.client-logo img { filter: none !important; max-height: none !important; } /* Strong and emphasis */ strong, b { color: #000000 !important; } em, i { color: #1a1a1a !important; } /* Lists */ ul, ol { color: #333333 !important; } li { color: #333333 !important; } pre { padding: 10px; background-color: #f5f5f5 !important; border: 1px solid #d1d1d1 !important; color: #1a1a1a !important; } /* Page single post */ .page-single-post { background-color: #ffffff !important; } /* Rating group text */ .rating-group .paragraph-regular { color: #1a1a1a !important; } /* Any remaining dark backgrounds */ [style*="background-color: #0f0f10"], [style*="background-color: #17181a"], [style*="background-color: #1f2124"], [style*="background: #121314"] { background-color: #ffffff !important; } /* Disclaimer text at bottom of sections */ p[style*="color: #888"] { color: #666666 !important; } /* CTA Box without background */ .cta-box-box { background: transparent !important; } /* FAQ Accordion - text and arrow colors for light mode */ .faq-accordion .accordion-item { background-color: #f5f5f5 !important; color: #1a1a1a !important; } .faq-accordion .accordion-item .accordion-button { background-color: transparent !important; color: #1a1a1a !important; } .faq-accordion .accordion-item .accordion-button::after, .faq-accordion .accordion-item .accordion-button.collapsed::after { color: #000000 !important; filter: brightness(0) !important; } .faq-accordion .accordion-item .accordion-body { color: #333333 !important; } /* What We Do Body list items */ .what-we-do-body ul li { border: 1px solid var(--secondary-color) !important; background: transparent !important; } /* What We Img List items with gradient */ .what-we-img-list ul li { width: auto !important; line-height: 1.3em !important; border: 1px solid var(--secondary-color) !important; background: var(--primary-color) url(https://merabytes.blob.core.windows.net/web/images/icon-sparkle-gradient.svg) no-repeat !important; background-position: left 15px center !important; background-size: 20px auto !important; border-radius: 100px !important; padding: 10px 15px 10px 45px !important; } .what-we-box { background: none !important; background-position: top left; background-repeat: no-repeat; background-size: auto; border: 1px solid var(--secondary-color) !important; border-radius: 20px; padding: 50px 45px; text-align: center; margin-right: 15px; } .what-we-do-body ul li::before { content: '\f058'; position: absolute; font-family: 'Font Awesome 6 Free'; top: 12px; left: 15px; font-weight: 900; font-size: 18px; color: var(--success); } /************************************/ /*** 10. Our Features css ***/ /************************************/ .our-features{ padding: 10px 0; } .our-features-box{ border: 1px solid var(--divider-color); background: url('https://merabytes.blob.core.windows.net/web/images/features-box-bg-img.png') var(--primary-color) no-repeat; background-position: center center; background-size: cover; backdrop-filter: blur(180px); -webkit-backdrop-filter: blur(180px); border-radius: 20px; padding: 10px; } .features-nav{ margin-bottom: 60px; } .features-nav .nav-tabs{ padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; gap: 20px 30px; border: none; } .features-nav ul li .nav-link{ border-radius: 10px; color: inherit; } .features-nav ul li .nav-link.active, .features-nav ul li .nav-link:hover{ color: var(--accent); border-color: var(--accent); } .feature-item-content h3{ font-size: 20px; } .feature-item-content p{ margin: 20px 0 0; } .feature-item-content ul{ margin: 40px 0 0; padding: 0; list-style: none; } .feature-item-content ul li{ position: relative; line-height: 1.5em; padding-left: 30px; margin-bottom: 15px; } .feature-item-content ul li:last-child{ margin-bottom: 0; } .feature-item-content ul li:before{ content: '\f058'; position: absolute; font-family: 'Font Awesome 6 Free'; font-size: 18px; font-weight: 900; color: var(--accent-color); top: 0; left: 0; } .feature-item-content .btn-default{ margin-top: 40px; } .feature-image{ margin-left: 40px; } .feature-image figure{ display: block; border-radius: 20px; } .feature-image img{ width: 100%; object-fit: cover; border-radius: 20px; } /* Feature section button enhancements */ .feature-item-content .btn-default { position: relative !important; z-index: 1 !important; overflow: hidden !important; background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%) !important; color: white !important; transition: all 0.4s ease-in-out !important; } .feature-item-content .btn-default::after { content: '' !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 0 !important; height: 100% !important; background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%) !important; transition: all 0.4s ease-in-out !important; z-index: -1 !important; } .feature-item-content .btn-default:hover::after { left: 0 !important; right: auto !important; width: 100% !important; } .feature-item-content .btn-default:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(169, 62, 23, 0.3) !important; } /* Secondary button (outlined) */ .feature-item-content .btn-default[style*="transparent"] { background: transparent !important; border: 2px solid #c73b35 !important; color: #c73b35 !important; position: relative !important; overflow: hidden !important; } .feature-item-content .btn-default[style*="transparent"]::after { background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%) !important; } .feature-item-content .btn-default[style*="transparent"]:hover { color: white !important; border-color: transparent !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(169, 62, 23, 0.3) !important; } /* Mobile responsive styles for features navigation */ @media (max-width: 768px) { .features-nav { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-bottom: 40px; padding-bottom: 10px; /* Firefox scrollbar styling */ scrollbar-width: thin; scrollbar-color: rgba(199, 59, 53, 0.3) transparent; } .features-nav .nav-tabs { flex-wrap: nowrap; justify-content: flex-start; } .features-nav ul li { flex-shrink: 0; } .features-nav ul li .nav-link { white-space: nowrap; padding: 12px 20px; } /* Webkit scrollbar styling (Chrome, Safari, Edge) */ .features-nav::-webkit-scrollbar { height: 6px; } .features-nav::-webkit-scrollbar-track { background: transparent; } .features-nav::-webkit-scrollbar-thumb { background: rgba(199, 59, 53, 0.3); border-radius: 3px; } .features-nav::-webkit-scrollbar-thumb:hover { background: rgba(199, 59, 53, 0.5); } } /* Fix: .about-us-item .icon-box hereda --bg-color negro del tema oscuro */ .about-us-item .icon-box { background: #f0f4f8 !important; border: 1px solid #e0e0e0 !important; } .about-us-item .icon-box i { color: #c73b35 !important; } /* ═══════════════════════════════════════════════════════════════════ BLOG / SUCCESS STORY SIDEBAR — Nextmind project-single style ═══════════════════════════════════════════════════════════════════ */ /* ── Project category wrapper ─────────────────────────────────────── */ .project-category { background: #f0f2f4 !important; background-image: none !important; border: none !important; border-radius: 20px; padding: 0; overflow: hidden; margin-bottom: 30px; } /* ── Category list header ─────────────────────────────────────────── */ .project-category-list { padding: 0; } .project-category-list > h3, .project-category .project-category-list h3 { font-size: 18px; font-weight: 700; color: #111; padding: 24px 28px; margin: 0; border-bottom: 1px solid rgba(17, 17, 17, 0.1); background: transparent; } /* ── List items — white cards ─────────────────────────────────────── */ .project-category-list ul { padding: 20px; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .project-category-list ul li { background: #ffffff; border-radius: 10px; padding: 16px 18px; font-size: 15px; font-weight: 700; color: #111; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 16px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .project-category-list ul li span { font-size: 14px; font-weight: 400; color: #555; text-align: right; } /* ── Social share row ─────────────────────────────────────────────── */ .category-social-link { padding: 0 20px 20px; gap: 10px 14px; } .category-social-link h3 { font-size: 15px; font-weight: 700; color: #111; } .category-social-link ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .category-social-link ul li a { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 100%) !important; display: inline-flex !important; align-items: center; justify-content: center; color: #fff !important; transition: opacity 0.2s; text-decoration: none; } .category-social-link ul li a i, .category-social-link ul li a svg { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important; font-size: 14px; line-height: 1; display: block; } .category-social-link ul li a:hover { opacity: 0.8; } /* ── Sidebar CTA box ──────────────────────────────────────────────── */ .sidebar-cta-box { border-radius: 20px; overflow: hidden; position: relative; padding: 30px; background-color: #111 !important; color: #fff !important; } .sidebar-cta-box::before { opacity: 0.15 !important; background-image: url('https://merabytes.blob.core.windows.net/web/images/sidebar-cta-box.jpg') !important; } .sidebar-cta-logo { display: none !important; } .sidebar-cta-content, .sidebar-cta-content h3, .sidebar-cta-content p, .sidebar-cta-contact, .sidebar-cta-contact h3, .sidebar-cta-contact ul li a { color: #ffffff !important; } .sidebar-cta-content h3, .sidebar-cta-contact h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; line-height: 1.3; } .sidebar-cta-content p { font-size: 14px; color: rgba(255,255,255,0.7) !important; line-height: 1.65; margin-bottom: 20px; } .sidebar-cta-contact ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .sidebar-cta-contact ul li a { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity 0.2s; } .sidebar-cta-contact ul li a:hover { opacity: 0.75; } .sidebar-cta-contact ul li a img { width: 20px; height: 20px; filter: brightness(0) invert(1); } /* gradient accent line at top of CTA box */ .sidebar-cta-box::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%); background-size: 200%; } } /* ── 3. Global layout rules (theme-agnostic) ── */ /* ── Footer: spacing between sections on mobile ── */ @media (max-width: 991px) { .footer-links { margin-bottom: 24px !important; } .footer-contact-box { margin-bottom: 32px !important; margin-top: 0 !important; } footer .col-lg-5, footer .col-lg-4, footer .col-lg-2 { margin-bottom: 24px !important; } } /* ── Blog post tables — same style as ransomware ── */ .post-entry table, .project-entry table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .post-entry thead tr, .project-entry thead tr { background: linear-gradient(90deg, var(--accent-color, #386bb7), var(--accent-secondary-color, #e24c4a)); } .post-entry th, .project-entry th { color: #fff !important; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px; text-align: left; border: none !important; } .post-entry td, .project-entry td { padding: 11px 16px; border-bottom: 1px solid rgba(0,0,0,0.07) !important; color: #333 !important; vertical-align: top; line-height: 1.5; } .post-entry td strong, .project-entry td strong { color: #111 !important; } .post-entry tbody tr:last-child td, .project-entry tbody tr:last-child td { border-bottom: none !important; } .post-entry tbody tr:nth-child(even) td, .project-entry tbody tr:nth-child(even) td { background: rgba(0,0,0,0.025); } .post-entry tbody tr:hover td, .project-entry tbody tr:hover td { background: rgba(56,107,183,0.05); } /* Responsive table wrapper on mobile */ @media (max-width: 767px) { .post-entry table, .project-entry table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ── 4. Theme toggle button — same approach as adversary/minimia ── */ /* Single button, always visible — sits between logo and hamburger on mobile, inside .header-btn on desktop */ .theme-toggle { border: none; border-radius: 5px; background-color: transparent; cursor: pointer; padding: .5rem .5rem; position: relative; transition: color .2s ease, opacity .2s ease; display: inline-flex; align-items: center; justify-content: center; /* Color: dark on light bg, light on dark bg */ color: #1a1a1a; font-size: 22px; line-height: 1; } [data-bs-theme=dark] .theme-toggle { color: #ffffff; } .theme-toggle:hover { color: var(--accent-color, #c73b35); opacity: 1; } /* Icon visibility: show moon in light mode, sun in dark mode */ .theme-toggle .light-mode, .theme-toggle .icon-moon { display: inline-block; } .theme-toggle .dark-mode, .theme-toggle .icon-sun { display: none; } [data-bs-theme=dark] .theme-toggle .light-mode, [data-bs-theme=dark] .theme-toggle .icon-moon { display: none; } [data-bs-theme=dark] .theme-toggle .dark-mode, [data-bs-theme=dark] .theme-toggle .icon-sun { display: inline-block; } /* Desktop: button already inside flex navbar — nothing extra needed */ /* Mobile (<992px): button sits between logo and hamburger, always visible */ @media (max-width: 991px) { .theme-toggle { /* Push it right, next to the hamburger */ margin-left: auto; margin-right: 4px; font-size: 22px; padding: .35rem .4rem; } } /* Remove old mobile floating button if any residue */ .theme-toggle-mobile { display: none !important; } /* Hero scroll title: negro en light mode — solo chars sin highlight (blanco) */ [data-bs-theme=light] .hero-scroll-title .--char.--normal { color: #1a1a1a !important; text-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════════ What We Do Section — estilos globales (dark + light) ═══════════════════════════════════════════════════════════════════ */ /* Layout & estructura — igual en ambos temas */ .box-bg-shape { position: relative; } .what-we-do { padding: 100px 0px; } .what-we-do-image-box { position: relative; } .what-we-do-img figure { display: block; border-radius: 20px; overflow: hidden; } .what-we-do-img figure img { width: 100%; aspect-ratio: 0; object-fit: cover; border-radius: 20px; } .what-we-do-content { margin-left: 15px; } /* Badge flotante */ .review-rating-box { position: absolute; right: 40px; bottom: 40px; left: auto; width: auto; max-width: 200px; display: flex; flex-wrap: wrap; gap: 20px; background: rgba(30,30,46,0.85); backdrop-filter: blur(30px); border-radius: 20px; padding: 20px; z-index: 1; } .review-rating-box .review-image { margin-left: -12px; } .review-rating-box .review-image:first-child { margin-left: 0px; } .review-rating-box .review-image img { max-width: 40px; } .review-rating-box .review-image.add-more { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-color); } .review-rating-box .review-image.add-more i { color: #fff; font-size: 16px; } .review-rating-star { display: flex; align-items: baseline; margin-bottom: 10px; } .review-rating-star i { color: #ffffff; margin-right: 3px; } .review-rating-star span { font-size: 14px; font-weight: 700; line-height: 1.2em; color: #ffffff; } .review-rating-content p { color: #ffffff; font-weight: 600; margin-bottom: 0px; font-size: 12px; } /* Tab nav — underline style */ .what-we-do-nav { margin-bottom: 40px; } .what-we-do-nav ul { list-style: none; display: flex; align-items: center; justify-content: flex-start; gap: 0; padding: 0; margin: 0; border: none; } .what-we-do-nav ul li { width: 33.33%; border-bottom: 6px solid rgba(255,255,255,0.15); } .what-we-do-nav ul li .nav-link { position: relative; width: 100%; background: transparent !important; border: none !important; border-radius: 0 !important; font-size: 17px; font-weight: 600; line-height: 1.2em; color: inherit; text-transform: capitalize; padding: 0px 20px 20px; transition: 0.3s ease-in-out; } .what-we-do-nav ul li .nav-link.active, .what-we-do-nav ul li .nav-link:hover { background: transparent !important; color: #c73b35 !important; } .what-we-do-nav ul li .nav-link::before { content: ""; display: block; position: absolute; bottom: -5px; left: auto; right: 0px; background: #c73b35; width: 0px; height: 6px; transition: 0.4s ease-in-out; z-index: 2; } .what-we-do-nav ul li .nav-link.active::before, .what-we-do-nav ul li .nav-link:hover::before { width: 100%; left: 0px; right: auto; } /* Tab header */ .what-we-do-tab-header { margin-bottom: 40px; } .what-we-do-tab-header p { margin-bottom: 0px; } /* Tab body card */ .what-we-do-tab-body { position: relative; display: flex; flex-wrap: wrap; align-items: center; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,0.04); } .what-we-do-tab-body::before { content: ""; display: block; position: absolute; left: 0px; bottom: 0px; right: 0px; background: linear-gradient(to right, var(--accent-color) 0%, #a02020 50%, var(--accent-color) 100%); width: 35%; height: 100%; transition: 0.4s ease-in-out; z-index: 0; } .what-we-do-tab-body:hover::before { width: 100%; } .what-we-do-body-info { position: relative; text-align: center; width: 35%; border-right: 1px solid rgba(255,255,255,0.15); padding: 30px; z-index: 1; } .what-we-do-body-info .icon-box { width: 60px; height: 60px; background: rgba(255,255,255,0.12); display: flex; justify-content: center; align-items: center; border-radius: 50%; margin: 0px auto 20px; } .what-we-do-body-info .icon-box i { font-size: 26px; color: #c73b35; } .what-we-do-body-title h3 { font-size: 18px !important; color: #ffffff !important; line-height: 1.4em; margin: 0 !important; } .what-we-do-body-content { position: relative; width: 65%; padding: 30px; z-index: 1; } .what-we-do-body-content p { color: #9da8b5; margin-bottom: 20px; transition: 0.4s ease-in-out; } .what-we-do-body-content ul { list-style: none; margin: 0px; padding: 0px; } .what-we-do-body-content ul li { position: relative; line-height: 1.5em; margin-bottom: 12px; padding-left: 26px; color: inherit; transition: 0.4s ease-in-out; } .what-we-do-body-content ul li:last-child { margin-bottom: 0px; } .what-we-do-body-content ul li::before { content: "\f00c"; position: absolute; font-family: "Font Awesome 6 Free"; font-weight: 900; left: 0px; top: 1px; font-size: 14px; color: #c73b35; transition: 0.4s ease-in-out; } /* Hover: todo blanco */ .what-we-do-tab-body:hover .what-we-do-body-content p, .what-we-do-tab-body:hover .what-we-do-body-content ul li, .what-we-do-tab-body:hover .what-we-do-body-content ul li::before { color: #ffffff !important; } /* CTA */ .what-we-do-btn, .what-we-do-body-content .btn-default { margin-top: 24px; display: inline-block; } /* Light mode overrides */ [data-bs-theme=light] .what-we-do-nav ul li { border-bottom-color: #e0e0e0; } [data-bs-theme=light] .what-we-do-nav ul li .nav-link { color: #1a1a1a !important; } [data-bs-theme=light] .what-we-do-tab-body { background: #eef4fb; } [data-bs-theme=light] .what-we-do-body-info .icon-box { background: #ffffff; } [data-bs-theme=light] .what-we-do-tab-header p { color: #555; } [data-bs-theme=light] .what-we-do-body-content p { color: #555; } [data-bs-theme=light] .what-we-do-body-title h3 { color: #1a1a1a !important; } [data-bs-theme=light] .what-we-do-tab-body:hover .what-we-do-body-title h3 { color: #ffffff !important; } /* Responsive 991px */ @media only screen and (max-width: 991px) { .what-we-do { padding: 80px 0px; } .what-we-do-image-box { display: none; } .review-rating-box { right: 20px; bottom: 20px; } .what-we-do-content { margin: 0px; } .what-we-do-nav { margin-bottom: 30px; } .what-we-do-nav ul li .nav-link { padding: 0px 10px 15px; font-size: 15px; } .what-we-do-tab-header { margin-bottom: 25px; } .what-we-do-tab-body::before { width: 30%; } .what-we-do-body-info { width: 30%; padding: 20px; } .what-we-do-body-content { width: 70%; padding: 20px; } } /* Responsive 575px */ @media only screen and (max-width: 575px) { .what-we-do-tab-body::before { width: 100%; height: 34.5%; top: 0px; } .what-we-do-tab-body:hover::before { height: 100%; } .what-we-do-body-info, .what-we-do-body-content { width: 100%; padding: 15px; } .what-we-do-body-info { border-bottom: 1px solid rgba(255,255,255,0.15); border-right: none; } .what-we-do-nav ul li .nav-link { font-size: 14px; } } /* what-we-do: btn-default → btn-highlighted on tab hover */ .what-we-do-tab-body:hover .btn-default { border: 1px solid var(--accent-color); background: var(--bg-color); padding: 16px 30px; } .what-we-do-tab-body:hover .btn-default::before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: -15%; right: 0; width: 0; height: 106%; background: var(--accent-color); transform: skew(45deg); transition: all 0.4s ease-in-out; z-index: -1; } /* Page header button — global (dark + light) */ .page-header-btn { display: flex !important; justify-content: center !important; margin-top: 20px !important; margin-bottom: 20px !important; }