/* * Implus Accounting — estilos propios del sitio público. * * Plano, sin preprocesador ni build step (Vanilla CSS), cargado directamente * después de Bootstrap 5 y de tokens.css/fonts.css. Se construye sobre las * variables definidas en /css/tokens.css. Se va llenando por componente a * medida que se construyen (Fase 3). */ body { font-family: var(--ia-font-body); color: var(--ia-text-on-light); } h1, h2, h3, h4, h5, h6, .font-heading { font-family: var(--ia-font-heading); } /* Scroll-reveal (Fase 1c) — ver comentario en layouts/app.blade.php sobre por qué la clase "js-reveal" la agrega un script inline en y no app.js. Sin esa clase (JS desactivado, o el usuario prefiere menos movimiento) las secciones quedan visibles siempre: este bloque solo puede OCULTARLAS, nunca es la única forma de mostrarlas. Se excluye el hero (primer
de cada página) para no afectar el LCP. */ .js-reveal main > section:not(:first-child) { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .js-reveal main > section:not(:first-child).ia-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal main > section { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Atom: button (.ia-btn) */ .ia-btn { border-radius: var(--ia-radius-pill); padding: 0.75rem 1.75rem; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; } .ia-btn-primary { /* Toque metálico sutil, solo en el botón CTA (a pedido del cliente) — 3 tonos del mismo dorado en diagonal, sin simular un reflejo/brillo real. Los 3 tonos se verificaron contra el texto (--ia-accent-contrast, #0A1829): el más oscuro da ~5:1, el más claro ~7.7:1 — ambos cumplen AA de sobra, así que el degradado nunca baja la legibilidad del texto del botón. El resto del sitio (íconos, textos, otros botones) se queda en el dorado plano — ver tokens.css para la razón (evitar "efectos" que el manual de marca pide no usar en el isotipo, y mantener el contraste auditable en todo lo demás). Oscuro #A28440 / base var(--ia-accent) #BE9B4B / claro #C6A761. */ background: linear-gradient(135deg, #A28440 0%, var(--ia-accent) 45%, #C6A761 100%); border: 1px solid var(--ia-accent); color: var(--ia-accent-contrast); } .ia-btn-primary:hover, .ia-btn-primary:focus { /* Mismo degradado, desplazado un tono más claro en los 3 puntos. */ background: linear-gradient(135deg, var(--ia-accent) 0%, #C6A761 45%, #CDB274 100%); border-color: #C6A761; color: var(--ia-accent-contrast); } .ia-btn-outline-light { background-color: transparent; border: 1px solid var(--ia-text-on-dark); color: var(--ia-text-on-dark); } .ia-btn-outline-light:hover, .ia-btn-outline-light:focus { background-color: var(--ia-text-on-dark); color: var(--ia-text-on-light); } .ia-btn-outline-dark { background-color: transparent; border: 1px solid var(--ia-text-on-light); color: var(--ia-text-on-light); } .ia-btn-outline-dark:hover, .ia-btn-outline-dark:focus { background-color: var(--ia-text-on-light); color: var(--ia-text-on-dark); } /* Molecule: topbar */ .ia-topbar { background-color: var(--ia-bg-secondary); color: var(--ia-text-on-dark-muted); font-size: 0.85rem; } .ia-topbar-link { color: var(--ia-text-on-dark-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; /* WCAG 2.5.8: el texto solo mide ~20px de alto, por debajo del mínimo de 24px — este padding lo completa sin cambiar el tamaño visual del texto. */ padding-block: 4px; } .ia-topbar-link:hover { color: var(--ia-text-on-dark); } .ia-topbar-social.d-flex { gap: 0.5rem !important; } .ia-topbar-social .ia-social-icon { width: 26px; height: 26px; font-size: 0.8rem; } /* Molecule: navbar */ .ia-navbar { background-color: var(--ia-bg-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .ia-nav-link { color: var(--ia-text-on-dark-muted) !important; font-weight: 500; padding: 0.5rem 0.9rem !important; } .ia-nav-link:hover, .ia-nav-link.active { /* Teal = "enlaces y detalles activos" (manual de marca, Fase 10) */ color: var(--ia-accent-teal) !important; } .ia-dropdown-menu { background-color: var(--ia-bg-secondary); border: 1px solid rgba(255, 255, 255, 0.08); } .ia-dropdown-menu .dropdown-item { color: var(--ia-text-on-dark-muted); } .ia-dropdown-menu .dropdown-item:hover, .ia-dropdown-menu .dropdown-item:focus { background-color: rgba(78, 138, 143, 0.14); color: var(--ia-accent-teal); } .ia-phone-pill { background-color: var(--ia-bg-secondary); color: var(--ia-text-on-dark); border-radius: var(--ia-radius-pill); padding: 0.55rem 1.1rem; font-size: 0.9rem; font-weight: 500; } .ia-offcanvas { background-color: var(--ia-bg-primary); color: var(--ia-text-on-dark); max-width: 320px; } /* Organism: footer */ .ia-footer { background-color: var(--ia-bg-primary); } .ia-footer-link { color: var(--ia-text-on-dark-muted); text-decoration: none; font-size: 0.95rem; /* el correo (hola@implusaccounting.com) no cabe sin partirse en la columna angosta "Contacto" del footer en mobile (col-6) — sin esto desborda el ancho de la página y genera scroll horizontal. */ overflow-wrap: anywhere; /* auditoría WCAG mobile: el texto solo daba ~23px de alto, bajo el mínimo de 24x24px de objetivo táctil (2.5.8) */ display: inline-block; padding-block: 2px; } .ia-footer-link:hover { /* Teal = "enlaces y detalles activos" (manual de marca, Fase 10) */ color: var(--ia-accent-teal); } .ia-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); } .ia-social-icon { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); display: inline-flex; align-items: center; justify-content: center; color: var(--ia-text-on-dark); text-decoration: none; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } .ia-social-icon:hover { /* Teal = "enlaces y detalles activos" (manual de marca, Fase 10) */ background-color: var(--ia-accent-teal); border-color: var(--ia-accent-teal); color: var(--ia-text-on-dark); } /* Organism: whatsapp floating button */ .ia-whatsapp-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 56px; height: 56px; border-radius: 50%; background-color: var(--ia-accent); color: var(--ia-accent-contrast); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: var(--ia-shadow-card-dark); z-index: 1040; text-decoration: none; transition: transform 0.15s ease-in-out; } .ia-whatsapp-fab:hover { transform: scale(1.08); color: var(--ia-accent-contrast); } /* Atoms */ .ia-divider { width: 28px; height: 3px; border-radius: 2px; } .ia-link-arrow { /* auditoría WCAG mobile: sin esto medía ~21px de alto, bajo el mínimo de 24x24px de objetivo táctil (2.5.8) */ padding-block: 3px; } .ia-link-arrow i { transition: transform 0.15s ease-in-out; } .ia-link-arrow:hover i { transform: translateX(4px); } /* Teal = "enlaces y detalles activos" (manual de marca, Fase 10) — variante según si el link-arrow está sobre fondo oscuro o claro. */ .ia-link-arrow-light:hover { color: var(--ia-accent-teal) !important; } .ia-link-arrow-dark:hover { color: var(--ia-accent-teal-on-light) !important; } .ia-avatar-fallback { background-color: var(--ia-bg-light-alt); color: var(--ia-text-on-light-muted); } .ia-badge-accent { background-color: rgba(190, 155, 75, 0.12); color: var(--ia-accent-on-light); } .ia-form-control { border-color: var(--ia-border); padding: 0.7rem 1rem; border-radius: 8px; } .ia-form-control:focus { border-color: var(--ia-accent); box-shadow: 0 0 0 0.2rem rgba(190, 155, 75, 0.15); } /* Molecules */ .ia-breadcrumb-link { color: var(--ia-text-on-dark-muted); text-decoration: none; } .ia-breadcrumb-link:hover { /* Teal = "enlaces y detalles activos" (manual de marca, Fase 10) */ color: var(--ia-accent-teal); } .breadcrumb-item.active { color: var(--ia-accent-teal); } .breadcrumb-item + .breadcrumb-item::before { color: var(--ia-text-on-dark-muted); } .ia-process-step-number { width: 48px; height: 48px; border-radius: 50%; background-color: var(--ia-accent); color: var(--ia-accent-contrast); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--ia-font-heading); } /* Fase 12: variantes de process-timeline (mismos datos, distinto tratamiento visual por página — ver plan). */ /* "flow" (Contabilidad y Nómina): flecha entre cada paso, solo desde lg+ (por debajo de eso los pasos se apilan en varias filas y una flecha entre ellos ya no tendría sentido). */ @media (min-width: 992px) { .ia-process-flow > .row > [class*="col-"] { position: relative; } .ia-process-flow > .row > [class*="col-"]:not(:last-child)::after { content: "\2192"; position: absolute; top: 24px; right: -0.85rem; transform: translateY(-50%); color: var(--ia-accent); font-size: 1.25rem; font-weight: 700; } } /* "loop" (Impuestos y Planeación Tributaria): flecha curva de "vuelve a empezar" debajo de la fila de pasos — decorativa, aria-hidden. */ .ia-process-loop-arrow { display: block; width: 100%; height: 28px; margin-top: 0.5rem; } /* "vertical" (Personas Naturales): línea conectora entre los círculos. */ .ia-process-vertical-line { width: 2px; min-height: 1.5rem; background-color: var(--ia-border-dark); margin-block: 0.25rem; } /* "zigzag" (Revisoría Fiscal): línea vertical central punteada, con los pasos alternando a izquierda/derecha — evoca un rastro de auditoría. Solo desde lg+ (en mobile los pasos van en una sola columna, sin línea, igual que el resto de layouts). */ .ia-process-zigzag-line { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--ia-accent); opacity: 0.5; } @media (min-width: 992px) { .ia-process-zigzag-item { width: 50%; padding-right: 2rem; } .ia-process-zigzag-item-right { margin-left: auto; padding-right: 0; padding-left: 2rem; } } .ia-service-card { background-color: var(--ia-bg-light); border-radius: var(--ia-radius-card); box-shadow: var(--ia-shadow-card); transition: transform 0.2s ease-in-out; } .ia-service-card:hover { transform: translateY(-4px); } .ia-service-card-icon, .ia-benefit-icon { color: var(--ia-accent); } /* atoms/icon-badge — identidad gráfica propia, ver DESIGN.md §10. El cuadrado redondeado principal contiene el ícono; el cuadrado pequeño ("corner") asoma detrás en la esquina superior derecha, eco en miniatura de los 4 cuadrados de esquina del isotipo real — nunca el isotipo mismo, solo su gramática visual. */ .ia-icon-badge-corner { position: absolute; top: -6px; right: -6px; width: 38%; height: 38%; border-radius: 5px; opacity: 0.4; } .ia-icon-badge-main { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 14px; border: 1.5px solid; } /* Fase 11: numeración editorial en vez de ícono en benefit-card — el color viene inline (según variant), acá solo tamaño/peso/línea. */ .ia-benefit-number { font-size: 3.5rem; font-weight: 700; line-height: 1; font-family: var(--ia-font-heading); opacity: 0.2; } .ia-team-card-photo :where(img, span) { display: block; margin-inline: auto; } .ia-testimonial-card { background-color: var(--ia-bg-light); border-radius: var(--ia-radius-card); box-shadow: var(--ia-shadow-card); transition: transform 0.2s ease-in-out; } .ia-testimonial-card:hover { transform: translateY(-4px); } .ia-cta-inline { background-color: rgba(190, 155, 75, 0.08); border: 1px solid rgba(190, 155, 75, 0.25); border-radius: var(--ia-radius-card); } .ia-cta-inline-icon { color: var(--ia-accent-on-light); } /* Acordeón de FAQ (Bootstrap 5 nativo, sin jQuery) */ .ia-faq-item { background: transparent; border: none; border-bottom: 1px solid var(--ia-border); } .ia-faq-button { background: transparent; color: var(--ia-text-on-light); font-weight: 600; padding: 1.25rem 0; box-shadow: none !important; transition: color 0.15s ease-in-out; } .ia-faq-button:hover { color: var(--ia-accent-on-light); } /* Bootstrap usa box-shadow (no outline) para el foco del acordeón; se anuló arriba para quitar el halo azul por defecto — se repone acá un indicador de foco visible propio, requisito de WCAG 2.4.7. */ .ia-faq-button:focus-visible { box-shadow: 0 0 0 0.2rem rgba(190, 155, 75, 0.35) !important; border-radius: 4px; } .ia-faq-button:not(.collapsed) { color: var(--ia-accent-on-light); background: transparent; } .ia-faq-button::after { filter: none; } .accordion-body { padding: 0 0 1.25rem 0; color: var(--ia-text-on-light-muted); } /* Organisms: heroes */ .ia-hero { background-color: var(--ia-bg-primary); color: var(--ia-text-on-dark); min-height: 480px; display: flex; align-items: center; } .ia-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.45; } .ia-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ia-bg-primary) 15%, rgba(11, 11, 11, 0.55) 60%, rgba(11, 11, 11, 0.35) 100%); } .ia-hero-page, .ia-hero-service { min-height: 320px; } /* Fase 12: acento geométrico decorativo — esquina superior derecha del hero, encima del overlay, detrás del contenido (orden en el DOM). */ .ia-brand-pattern { position: absolute; top: 0; right: 0; pointer-events: none; } @media (max-width: 767.98px) { /* en mobile el hero es más angosto — se reduce para no competir con el contenido, que en esos anchos ya ocupa todo el ancho */ .ia-brand-pattern { width: 110px; height: 110px; } } /* Chips de navegación interna dentro de un hero (ej. anclas #equipo / #como-trabajamos en Nosotros, Fase 9) */ .ia-chip-link { transition: opacity 0.15s ease-in-out; } .ia-chip-link:hover { opacity: 0.75; } .ia-cta-banner { background-color: var(--ia-bg-primary); color: var(--ia-text-on-dark); position: relative; overflow: hidden; } /* Organisms: about / highlight cards */ .ia-about-photo { width: 100%; height: 420px; object-fit: cover; } .ia-about-highlight { /* Fase 11: --ia-bg-primary, no --ia-bg-secondary — la sección "Quiénes somos" (único lugar donde se usa esta tarjeta) ahora usa --ia-bg-secondary como fondo; si la tarjeta usara el mismo tono se perdería el contraste entre ambas. */ background-color: var(--ia-bg-primary); border-radius: var(--ia-radius-card); max-width: 340px; bottom: -1.5rem; left: -1.5rem; box-shadow: var(--ia-shadow-card-dark); } @media (max-width: 991.98px) { .ia-about-highlight { position: static !important; max-width: 100%; margin-top: 1rem; } } /* Franja de cifras de "Quiénes somos" (ver about-section.blade.php) — divisor vertical solo desde lg+, igual que el resto de conectores decorativos lg-only del sitio (zigzag, línea vertical del proceso). */ @media (min-width: 992px) { .ia-about-stats-item:not(:first-child) { border-left: 1px solid var(--ia-border-dark); } } .ia-highlight-card { background-color: var(--ia-bg-light-alt); border-radius: var(--ia-radius-card); } .ia-contact-mini-card { background-color: var(--ia-bg-light-alt); border-radius: var(--ia-radius-card); } /* Foto de apoyo en contact-info-panel (ver comentario ahí) — apaisada, distinta de .ia-about-photo (vertical), altura más baja porque va entre las tarjetas y el CTA, no como pieza principal de la columna. */ .ia-contact-photo { width: 100%; height: 200px; object-fit: cover; } .ia-mini-link { /* auditoría WCAG mobile: sin esto medían ~22px de alto, bajo el mínimo de 24x24px de objetivo táctil (2.5.8) */ display: inline-block; padding-block: 2px; } /* Organism: contact form */ .ia-contact-form .form-label { color: var(--ia-text-on-light); } .htmx-indicator { opacity: 0; display: none; } .htmx-request .htmx-indicator { opacity: 1; display: inline-block; } .htmx-request.htmx-indicator { opacity: 1; display: inline-block; } /* Módulo Recursos (Fase A) — calculadoras + tarjetas de hub/blog. */ /* molecules/calculator-result.blade.php — sin precedente en el sitio, caja de resultado sobre --ia-bg-light-alt con los tokens de card ya existentes. El número usa --ia-accent-on-light, nunca --ia-accent crudo como color de texto (falla WCAG AA sobre fondo claro, ver tokens.css). */ .ia-calculator-result { background-color: var(--ia-bg-light-alt); border-radius: var(--ia-radius-card); padding: 1.5rem; } .ia-calculator-result-value { font-family: var(--ia-font-heading); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.1; color: var(--ia-accent-on-light); } .ia-calculator-result-suffix { font-size: 1rem; font-weight: 600; margin-left: .25rem; color: var(--ia-text-on-light-muted); } /* organisms/resource-card.blade.php — la imagen de portada (artículos) sangra hasta los bordes de la tarjeta (.ia-service-card usa p-4 = 1.5rem, de ahí el margen negativo) en vez de quedar con marco blanco alrededor. */ .ia-resource-card-image { margin: -1.5rem -1.5rem 1rem -1.5rem; overflow: hidden; border-radius: var(--ia-radius-card) var(--ia-radius-card) 0 0; } .ia-resource-card-image img { display: block; width: 100%; height: 160px; object-fit: cover; } /* pages/recursos/blog/show.blade.php — tipografía básica del cuerpo del artículo (HTML generado por el editor Quill del backoffice). */ .ia-article-body { color: var(--ia-text-on-light); font-size: 1.05rem; line-height: 1.75; } .ia-article-body :is(h1, h2, h3, h4) { margin-top: 2rem; margin-bottom: .75rem; } .ia-article-body p { margin-bottom: 1.25rem; } .ia-article-body :is(ul, ol) { margin-bottom: 1.25rem; padding-left: 1.5rem; } .ia-article-body a { color: var(--ia-accent-on-light); } .ia-article-body blockquote { border-left: 3px solid var(--ia-accent); padding-left: 1rem; color: var(--ia-text-on-light-muted); font-style: italic; } /* organisms/blog-sidebar.blade.php (Fase A2) */ .ia-sidebar-link { padding-block: .35rem; color: var(--ia-text-on-light-muted); transition: color .15s ease-in-out; } .ia-sidebar-link:hover, .ia-sidebar-link.active { color: var(--ia-accent-on-light); } .ia-sidebar-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; } .ia-sidebar-thumb-fallback { background-color: var(--ia-bg-light-alt); color: var(--ia-accent-on-light); font-size: 1.25rem; } .ia-badge-accent-active { background-color: var(--ia-accent); color: var(--ia-accent-contrast); }