/* * Luminatti brand theme - layered over DaisyUI 5 (CDN). * * Brand tokens override the built-in `light` / `dark` DaisyUI themes * (this file loads after daisyui.css, so same-specificity rules win). * The corporate site intentionally uses its own identity here — a * deeper, cooler navy plus a warm accent — separate from the IoT * Manager product's theme.css. */ [data-theme="light"] { --color-base-100: oklch(98.5% 0.003 240); --color-base-200: oklch(95.5% 0.005 240); --color-base-300: oklch(90% 0.008 240); --color-base-content: oklch(20% 0.02 240); --color-primary: oklch(32% 0.08 230); --color-primary-content: oklch(98% 0.005 230); --color-secondary: oklch(60% 0.13 45); --color-secondary-content: oklch(15% 0.02 45); --radius-selector: 0.375rem; --radius-field: 0.375rem; --radius-box: 0.5rem; --depth: 0; --noise: 0; } [data-theme="dark"] { --color-base-100: oklch(18% 0.015 240); --color-base-200: oklch(14% 0.012 240); --color-base-300: oklch(23% 0.02 240); --color-base-content: oklch(92% 0.008 240); --color-primary: oklch(68% 0.11 225); --color-primary-content: oklch(14% 0.02 225); --color-secondary: oklch(70% 0.13 50); --color-secondary-content: oklch(15% 0.02 50); --radius-selector: 0.375rem; --radius-field: 0.375rem; --radius-box: 0.5rem; --depth: 0; --noise: 0; } /* Anchor sections must clear the sticky navbar when scrolled to. */ section[id] { scroll-margin-top: 4.5rem; } /* Shows the cookie banner as part of the page's normal first paint instead of waiting on main.js — see the inline script in that adds this class. #cookieBanner's own accept/reject click handlers (main.js) still hide it and persist the choice exactly as before; this only controls its initial appearance. */ html.show-cookie-banner #cookieBanner { display: block !important; } /* Below-the-fold Home sections: skip layout/paint/style work for content the user hasn't scrolled to yet. contain-intrinsic-size is a rough placeholder height (corrected automatically once the section is measured/intersects the viewport) so the page's total scroll height doesn't jump around before that happens. */ #case-studies, #testimonials, #technologies, #faq { content-visibility: auto; contain-intrinsic-size: auto 700px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* A light logo body disappears on dark surfaces; a soft light chip behind it keeps the mark legible in dark theme. */ .logo-chip { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; padding: 0.2rem 0.3rem; } [data-theme="dark"] .logo-chip { background: oklch(96% 0.005 255); } /* Active state for the current page's nav link. */ .nav-link.active { color: var(--color-primary); font-weight: 600; } /* ------------------------------------------------------------------ */ /* Corporate-site custom layer (things utilities can't express) */ /* ------------------------------------------------------------------ */ /* Hero / CTA band gradient, built from theme tokens so it adapts to both themes. */ .hero-gradient { background: linear-gradient( 135deg, var(--color-primary), color-mix(in oklch, var(--color-primary), black 30%) ); color: var(--color-primary-content); } [data-theme="dark"] .hero-gradient { background: linear-gradient( 135deg, color-mix(in oklch, var(--color-primary), var(--color-base-200) 55%), color-mix(in oklch, var(--color-primary), var(--color-base-200) 80%) ); color: var(--color-base-content); } /* Entrance animation, triggered by the IntersectionObserver in main.js. */ @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fade-in, .fade-in-delay { opacity: 0; } @media (prefers-reduced-motion: reduce) { .fade-in, .fade-in-delay { opacity: 1; } } /* WhatsApp floating action button (brand green in both themes). */ #whatsapp-float { position: fixed; bottom: 20px; right: 20px; z-index: 1000; animation: slideInRight 0.5s ease-out; } #whatsapp-float a { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: #25d366; border-radius: 50%; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; animation: whatsappPulse 2s infinite; } #whatsapp-float a:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6); } #whatsapp-float i { color: #fff; font-size: 28px; } @keyframes whatsappPulse { 0%, 100% { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); } 50% { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0.1); } } @keyframes slideInRight { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @media (max-width: 768px) { #whatsapp-float { bottom: 15px; right: 15px; } #whatsapp-float a { width: 55px; height: 55px; } #whatsapp-float i { font-size: 24px; } } /* Technology/partner logo strip: grayscale by default, color on hover. In dark theme the marks are inverted so dark logos stay legible. */ .tech-logo-img { max-height: 48px; width: auto; max-width: 100%; filter: grayscale(100%); opacity: 0.65; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } .tech-logo:hover .tech-logo-img { filter: none; opacity: 1; transform: scale(1.05); } .tech-logo-img.large-logo { max-height: 60px; } .tech-logo-img.extra-large-logo { max-height: 72px; } [data-theme="dark"] .tech-logo-img { filter: grayscale(100%) invert(1) brightness(1.4); opacity: 0.7; } [data-theme="dark"] .tech-logo:hover .tech-logo-img { filter: grayscale(100%) invert(1) brightness(1.8); opacity: 1; } /* Hide the reCAPTCHA badge (disclosure text is shown in the contact form). */ .grecaptcha-badge, iframe[src*="recaptcha"] { visibility: hidden !important; opacity: 0 !important; display: none !important; } /* ------------------------------------------------------------------ */ /* Carousels (case studies, testimonials) — Swiper theming. Ported from */ /* design_2026_2/css/theme.css; this design includes the same partials */ /* (partials/_case_studies.html, partials/_testimonials.html) but had */ /* no matching CSS at all, leaving the nav buttons/pagination unstyled */ /* and overlapping (Swiper's default .swiper-pagination is absolutely */ /* positioned; the "static" class in the markup cancels that out). */ /* ------------------------------------------------------------------ */ .carousel-nav-btn { width: 2.5rem; height: 2.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-base-300); background: var(--color-base-100); color: var(--color-base-content); transition: border-color 120ms ease, color 120ms ease; } .carousel-nav-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .carousel-nav-btn.swiper-button-disabled { opacity: 0.35; pointer-events: none; } .swiper-pagination.static { position: static; width: auto; margin: 0; } [data-carousel-pagination] .swiper-pagination-bullet { background: var(--color-base-300); opacity: 1; width: 0.5rem; height: 0.5rem; } [data-carousel-pagination] .swiper-pagination-bullet-active { background: var(--color-primary); width: 1.4rem; border-radius: 999px; } /* ------------------------------------------------------------------ */ /* reCAPTCHA v2 fallback modal (see js/modules/recaptcha-v2-modal.js) */ /* ------------------------------------------------------------------ */ .recaptcha-v2-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; } .recaptcha-v2-overlay.is-open { display: flex; } body.recaptcha-v2-lock-scroll { overflow: hidden; } .recaptcha-v2-backdrop { position: absolute; inset: 0; background: oklch(15% 0.01 240 / 0.65); backdrop-filter: blur(2px); } .recaptcha-v2-box { position: relative; background: var(--color-base-100); color: var(--color-base-content); border-radius: var(--radius-box, 0.5rem); box-shadow: 0 20px 60px oklch(0% 0 0 / 0.35); padding: 2.5rem 1.5rem 1.5rem; max-width: 90vw; } .recaptcha-v2-close { position: absolute; top: 0.5rem; right: 0.75rem; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--color-base-content); opacity: 0.6; cursor: pointer; padding: 0.25rem; } .recaptcha-v2-close:hover { opacity: 1; } .recaptcha-v2-widget { min-width: 304px; min-height: 78px; } /* ------------------------------------------------------------------ */ /* WhatsApp QR code lightbox (contacto.html) */ /* ------------------------------------------------------------------ */ .qr-blur-thumb { cursor: pointer; filter: blur(6px); transition: filter 0.2s ease; border-radius: 0.5rem; } .qr-blur-thumb:hover, .qr-blur-thumb:focus-visible { filter: blur(3px); } .qr-lightbox-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; } .qr-lightbox-overlay.is-open { display: flex; } .qr-lightbox-backdrop { position: absolute; inset: 0; background: oklch(15% 0.01 240 / 0.75); backdrop-filter: blur(2px); } .qr-lightbox-box { position: relative; background: var(--color-base-100); border-radius: var(--radius-box, 0.5rem); box-shadow: 0 20px 60px oklch(0% 0 0 / 0.35); padding: 2.5rem 1.5rem 1.5rem; max-width: 90vw; } .qr-lightbox-box img { display: block; max-width: min(80vw, 360px); height: auto; border-radius: 0.5rem; } .qr-lightbox-close { position: absolute; top: 0.5rem; right: 0.75rem; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--color-base-content); opacity: 0.6; cursor: pointer; padding: 0.25rem; } .qr-lightbox-close:hover { opacity: 1; }