/* ============================================================
Wild IT — Design System Global
main.css
============================================================ */
/* ── Google Fonts ──
Se cargan con en el de cada pagina, no con @import:
un @import dentro del CSS obliga al navegador a bajar el CSS, descubrir la fuente y
recien entonces pedirla, lo que retrasa el primer render. */
/* ── CSS Custom Properties ── */
:root {
/* Colors */
--primary: #1337ec;
--primary-light: #3d5cf5;
--primary-glow: rgba(19, 55, 236, 0.35);
/* Light Mode */
--bg: #f6f6f8;
--bg-rgb: 246, 246, 248;
--surface: #ffffff;
--border: #e2e8f0;
--text: #0f172a;
--text-muted: #64748b;
/* Transitions */
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
/* Spacing */
--section-py: 6rem;
--container: 1200px;
--header-h: 72px;
/* Radius */
--radius-sm: 0.5rem;
--radius-md: 1rem;
--radius-lg: 1.5rem;
--radius-xl: 2rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14);
--shadow-primary: 0 8px 32px var(--primary-glow);
}
html.dark {
--bg: #101322;
--bg-rgb: 16, 19, 34;
--surface: #1a1f38;
--border: #313a68;
--text: #f1f5f9;
--text-muted: #94a3b8;
}
/* ── Reset & Base ── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
/* El header es sticky (--header-h): sin esto, un enlace a #ancla deja el destino
tapado por el header. Afecta a los enlaces del footer y a los de las páginas. */
scroll-padding-top: calc(var(--header-h) + 1rem);
-webkit-text-size-adjust: 100%;
}
body {
font-family: 'Google Sans Flex', system-ui, -apple-system, sans-serif;
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
transition: background-color 0.3s ease, color 0.3s ease;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/*
Las imagenes de contenido van dentro de (WebP + PNG de respaldo). Sin esta
regla, la caja en linea de alteraria el layout: el ancho/alto porcentual del
![]()
interno debe seguir resolviendose contra su contenedor de bloque original
(.team-card-header en equipo.html, el div con max-width:900px en soluciones.html).
display:contents deja pasar el ![]()
como hijo directo para el layout.
En navegadores que no conocen (ni display:contents) la caja es anonima y el
![]()
conserva su contenedor de bloque, asi que el respaldo PNG se ve igual.
*/
picture {
display: contents;
}
a {
text-decoration: none;
color: inherit;
}
/* ── Container ── */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: 1.5rem;
}
/* ── Typography Scale ── */
.text-hero {
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
}
.text-h1 {
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
}
.text-h2 {
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.015em;
}
.text-h3 {
font-size: clamp(1.2rem, 2vw, 1.75rem);
font-weight: 700;
line-height: 1.25;
}
.text-lg {
font-size: 1.125rem;
}
.text-base {
font-size: 1rem;
line-height: 1.6;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.4;
}
.text-sm {
font-size: 0.875rem;
}
.text-xs {
font-size: 0.75rem;
}
.text-muted {
color: var(--text-muted);
}
.text-primary {
color: var(--primary);
}
.gradient-text {
background: linear-gradient(135deg, #6f9fff 0%, var(--primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Sections ── */
.section {
padding: var(--section-py) 0;
}
.section-sm {
padding: 3rem 0;
}
.section-header {
text-align: center;
max-width: 700px;
margin-inline: auto;
margin-bottom: 4rem;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.9rem;
border-radius: var(--radius-full);
background: rgba(19, 55, 236, 0.10);
border: 1px solid rgba(19, 55, 236, 0.25);
color: var(--primary);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1.25rem;
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
border-radius: var(--radius-md);
font-family: inherit;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
border: none;
outline: none;
transition: var(--transition);
white-space: nowrap;
}
.btn-primary {
background: var(--primary);
color: #fff;
box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
background: var(--primary-light);
transform: translateY(-2px);
box-shadow: 0 12px 40px var(--primary-glow);
}
.btn-outline {
background: transparent;
color: var(--text);
border: 1.5px solid var(--border);
}
.btn-outline:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(19, 55, 236, 0.05);
}
.btn-ghost {
background: rgba(255, 255, 255, 0.10);
color: #fff;
border: 1.5px solid rgba(255, 255, 255, 0.20);
backdrop-filter: blur(8px);
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.18);
}
.btn-lg {
padding: 1rem 2.25rem;
font-size: 1.05rem;
border-radius: var(--radius-lg);
}
.btn-sm {
padding: 0.5rem 1.1rem;
font-size: 0.85rem;
}
.btn .icon {
font-size: 1.25em;
}
/* ── Cards ── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 2.5rem;
transition: var(--transition);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.card:hover {
box-shadow: var(--shadow-lg);
border-color: rgba(19, 55, 236, 0.40);
transform: translateY(-6px);
}
.card-icon {
width: 3.5rem;
height: 3.5rem;
border-radius: var(--radius-md);
background: rgba(19, 55, 236, 0.10);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.6rem;
margin-bottom: 1.5rem;
transition: var(--transition);
}
.card:hover .card-icon {
background: var(--primary);
color: #fff;
}
/* ── Blog Card ── */
.blog-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
transition: var(--transition);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
}
.blog-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
border-color: rgba(19, 55, 236, 0.30);
}
.blog-card-img-placeholder {
width: 100%;
height: 220px;
background: linear-gradient(135deg, #101322 0%, var(--primary) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: rgba(255, 255, 255, 0.3);
}
.blog-card-body {
padding: 1.75rem;
display: flex;
flex-direction: column;
flex: 1;
}
.blog-card-meta {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.blog-cat {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary);
background: rgba(19, 55, 236, 0.10);
padding: 0.25rem 0.6rem;
border-radius: var(--radius-full);
}
.blog-date {
font-size: 0.8rem;
color: var(--text-muted);
}
.blog-card h3 {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.35;
margin-bottom: 0.5rem;
}
.blog-card p {
color: var(--text-muted);
font-size: 0.9rem;
flex: 1;
}
.blog-read-more {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 1.25rem;
color: var(--primary);
font-size: 0.85rem;
font-weight: 700;
transition: var(--transition-fast);
}
.blog-read-more:hover {
gap: 0.6rem;
}
/* ── Form ── */
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-label {
font-size: 0.875rem;
font-weight: 700;
color: var(--text);
}
.form-input,
.form-textarea {
width: 100%;
padding: 1rem 1.25rem;
background: var(--bg);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
color: var(--text);
font-family: inherit;
font-size: 0.95rem;
font-weight: 500;
transition: var(--transition-fast);
outline: none;
}
.form-input:focus,
.form-textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(19, 55, 236, 0.12);
}
.form-textarea {
resize: vertical;
min-height: 140px;
}
/* Fix for Select Options Contrast */
select.form-input option {
background-color: var(--surface);
color: var(--text);
}
html.dark select.form-input option {
background-color: var(--surface-dark, #1a1f38);
color: var(--text);
}
/* ── Header / Nav ── */
.site-header {
position: sticky;
top: 0;
z-index: 100;
height: var(--header-h);
background: rgba(var(--bg-rgb), 0.88);
backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid var(--border);
transition: var(--transition);
}
.nav-inner {
height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.nav-logo img {
height: 3.3rem;
/* width:auto: el ancho lo define la proporcion intrinseca de la imagen (los
atributos width/height del HTML evitan el salto de layout al cargar). */
width: auto;
object-fit: contain;
}
.nav-logo .logo-light {
display: block;
}
.nav-logo .logo-dark {
display: none;
}
html.dark .nav-logo .logo-light {
display: none;
}
html.dark .nav-logo .logo-dark {
display: block;
}
.nav-links {
display: flex;
align-items: center;
gap: 0.25rem;
}
.nav-links a {
padding: 0.4rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 600;
color: var(--text-muted);
transition: var(--transition-fast);
white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--primary);
background: rgba(19, 55, 236, 0.08);
}
.nav-actions {
display: flex;
align-items: center;
gap: 0.8rem;
}
/* Compact header CTA: the header has to fit the logo, an 8-item menu, the theme
toggle and this button inside a 1200px container. */
.nav-actions .btn {
padding: 0.5rem 1.1rem;
font-size: 0.85rem;
border-radius: var(--radius-sm);
}
/* Theme Toggle */
.theme-toggle {
position: relative;
width: 3.25rem;
height: 1.9rem;
border-radius: var(--radius-full);
background: #e2e8f0;
border: 1.5px solid rgba(0, 0, 0, 0.10);
cursor: pointer;
overflow: visible;
flex-shrink: 0;
transition: background 0.3s ease, border-color 0.3s ease;
display: flex;
align-items: center;
}
html.dark .theme-toggle {
background: rgba(19, 55, 236, 0.3);
border-color: rgba(99, 130, 255, 0.40);
}
/* Track holds both icons */
.theme-toggle-track {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.35rem;
pointer-events: none;
z-index: 1;
}
/* Sun icon — visible in light mode, hidden in dark */
.icon-sun {
font-size: 0.9rem !important;
color: #f59e0b;
opacity: 1;
transform: scale(1) rotate(0deg);
transition: opacity 0.25s ease, transform 0.3s ease;
display: flex;
align-items: center;
line-height: 1;
}
html.dark .icon-sun {
opacity: 0;
transform: scale(0.5) rotate(90deg);
}
/* Moon icon — hidden in light mode, visible in dark */
.icon-moon {
font-size: 0.9rem !important;
color: #a5b4fc;
opacity: 0;
transform: scale(0.5) rotate(-90deg);
transition: opacity 0.25s ease, transform 0.3s ease;
display: flex;
align-items: center;
line-height: 1;
}
html.dark .icon-moon {
opacity: 1;
transform: scale(1) rotate(0deg);
}
/* Thumb / knob */
.theme-thumb {
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(2.5px);
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
z-index: 2;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
html.dark .theme-thumb {
transform: translateY(-50%) translateX(23.5px);
background: #334155;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Mobile nav */
.nav-burger {
display: none;
background: none;
border: none;
cursor: pointer;
color: var(--text);
padding: 0.25rem;
}
.mobile-nav {
display: none;
position: fixed;
inset: 0;
z-index: 200;
background: var(--bg);
flex-direction: column;
padding: 1.5rem;
overflow-y: auto;
}
.mobile-nav.open {
display: flex;
}
.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
}
.mobile-nav-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mobile-nav-links a {
padding: 1rem 1.25rem;
border-radius: var(--radius-md);
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
border: 1px solid var(--border);
transition: var(--transition-fast);
}
.mobile-nav-links a:hover,
.mobile-nav-links a.active {
background: rgba(19, 55, 236, 0.08);
color: var(--primary);
border-color: var(--primary);
}
.mobile-nav-actions {
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* ── Footer ── */
.site-footer {
background: var(--surface);
border-top: 1px solid var(--border);
padding: 4rem 0 2rem;
margin-top: auto;
}
/* Cuatro zonas: marca + dos columnas de enlaces + contacto. */
.footer-top {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
gap: 3rem;
align-items: start;
}
.footer-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
max-width: 22rem;
}
.footer-tagline {
font-size: 1rem;
font-weight: 700;
color: var(--text);
}
.footer-desc {
font-size: 0.85rem;
line-height: 1.7;
color: var(--text-muted);
}
.footer-col-title {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 1rem;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-col a {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-muted);
transition: var(--transition-fast);
}
.footer-col a:hover {
color: var(--primary);
}
/* Más específico que .footer-col ul para poder volver a fila sin !important. */
.footer-col ul.footer-social {
flex-direction: row;
flex-wrap: wrap;
gap: 1.25rem;
margin-top: 1rem;
}
.footer-bottom {
margin-top: 3rem;
padding-top: 1.75rem;
border-top: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
gap: 1rem 2rem;
align-items: center;
justify-content: space-between;
}
.footer-legal {
display: flex;
gap: 1.5rem;
}
.footer-legal a {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-muted);
transition: var(--transition-fast);
}
.footer-legal a:hover {
color: var(--primary);
}
/* Aviso de marca de Frappe: solo en las páginas de la vertical ERPNext. */
.footer-note {
flex-basis: 100%;
font-size: 0.72rem;
line-height: 1.7;
color: var(--text-muted);
}
.footer-copy {
font-size: 0.78rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.4rem;
}
/* The copyright glyph carries an inline font-size in every page, so it needs
!important to shrink along with the smaller legal text. */
.footer-copy .material-symbols-outlined {
font-size: 0.9rem !important;
}
.footer-logo img {
height: 1.75rem;
width: auto;
object-fit: contain;
}
.footer-logo .logo-light {
display: block;
}
.footer-logo .logo-dark {
display: none;
}
html.dark .footer-logo .logo-light {
display: none;
}
html.dark .footer-logo .logo-dark {
display: block;
}
/* Footer: de 4 zonas a 2 y después a 1. Se mantienen aquí, junto al resto del
footer, en vez de repartirlas por los bloques @media generales. */
@media (max-width: 1024px) {
.footer-top {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
}
}
@media (max-width: 640px) {
.footer-top {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
}
}
/* ── Hero ── */
.hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
min-height: calc(100vh - var(--header-h));
padding: 5rem 0;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to bottom, rgba(16, 19, 34, 0.65), rgba(16, 19, 34, 0.93));
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 1rem;
border-radius: var(--radius-full);
background: rgba(19, 55, 236, 0.2);
border: 1px solid rgba(19, 55, 236, 0.35);
color: #93c5fd;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1.5rem;
}
.pulse {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--primary);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
transform: scale(1)
}
50% {
opacity: .6;
transform: scale(1.2)
}
}
/* ── Grid layouts ── */
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
/* Services forced 4-col on lg, 2-col on md, 1-col on sm */
.grid-services {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
@media (max-width: 1200px) {
.grid-services {
grid-template-columns: repeat(2, 1fr);
}
/* Eight menu items need ~1085px and the container only offers 1152px from 1200px
up, so the horizontal nav collapses here rather than at 768px. The theme toggle
(and the header CTA, where the page has one) stay visible: there is room. */
.nav-links {
display: none;
}
.nav-burger {
display: flex;
}
}
@media (max-width: 640px) {
.grid-services {
grid-template-columns: 1fr;
}
}
/* ── Fade-in animation ── */
.fade-in {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.fade-in-delay-1 {
transition-delay: 0.1s;
}
.fade-in-delay-2 {
transition-delay: 0.2s;
}
.fade-in-delay-3 {
transition-delay: 0.3s;
}
.fade-in-delay-4 {
transition-delay: 0.4s;
}
/* No-JS fallback: never hide content if scripts are disabled */
.no-js .fade-in {
opacity: 1;
transform: none;
}
/* ── Process steps ── */
.steps {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* ── Breadcrumb ── */
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--text-muted);
flex-wrap: wrap;
}
.breadcrumb a {
color: var(--text-muted);
transition: var(--transition-fast);
}
.breadcrumb a:hover {
color: var(--primary);
}
.breadcrumb .sep {
font-size: 0.7rem;
}
.breadcrumb .current {
color: var(--text);
font-weight: 600;
}
/* ── Page hero (smaller) ── */
.page-hero {
padding: 4rem 0 3rem;
background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
border-bottom: 1px solid var(--border);
}
/* ── Utility ── */
/* Generic, single-purpose helpers. Kept intentionally as a documented set
even when no page uses one yet, so new markup never needs inline styles.
NOT restored (removed as dead code): the --primary-dark token and the
.glass / .blog-card-img / .article-hero / .article-meta component rules. */
/* Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
/* Spacing (1 = 0.5rem, 2 = 1rem, 3 = 1.5rem, 4 = 2rem) */
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
/* Text */
.text-center { text-align: center; }
.text-right { text-align: right; }
/* Misc */
.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }
.hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
/* ── Stats ── */
.stat {
text-align: center;
padding: 2rem;
}
.stat-number {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
color: var(--primary);
line-height: 1;
}
.stat-label {
font-size: 0.9rem;
color: var(--text-muted);
margin-top: 0.5rem;
font-weight: 600;
}
/* ── CTA Banner ── */
.cta-banner {
background: linear-gradient(135deg, var(--primary) 0%, #0c28c4 100%);
border-radius: var(--radius-xl);
padding: 4rem 3rem;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}
.cta-banner h2 {
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 800;
margin-bottom: 1rem;
position: relative;
}
.cta-banner p {
font-size: 1.1rem;
opacity: 0.85;
max-width: 560px;
margin-inline: auto;
position: relative;
}
.cta-banner .cta-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2.5rem;
position: relative;
}
.btn-white {
background: #fff;
color: var(--primary);
font-weight: 700;
}
.btn-white:hover {
background: #f0f4ff;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* ── Article / Blog post ── */
.article-content {
max-width: 740px;
margin-inline: auto;
}
.article-content h2 {
font-size: 1.75rem;
font-weight: 700;
margin: 2.5rem 0 1rem;
}
.article-content h3 {
font-size: 1.35rem;
font-weight: 700;
margin: 2rem 0 0.75rem;
}
.article-content p {
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 1.25rem;
}
.article-content ul,
.article-content ol {
padding-left: 1.5rem;
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 1.25rem;
}
.article-content li {
margin-bottom: 0.5rem;
}
.article-content blockquote {
border-left: 4px solid var(--primary);
padding: 1rem 1.5rem;
background: rgba(19, 55, 236, 0.05);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
margin: 1.5rem 0;
font-style: italic;
color: var(--text);
}
.article-content strong {
color: var(--text);
font-weight: 700;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.grid-3,
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
:root {
--section-py: 4rem;
}
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
/* The horizontal nav and the burger collapse at 1200px now, see above. */
.nav-actions .btn {
display: none;
}
.theme-toggle {
display: flex;
}
.cta-banner {
padding: 2.5rem 1.5rem;
}
.card {
padding: 1.75rem;
}
}
/* ── Methodology Steps ── */
.step {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.1rem 1rem;
border-radius: var(--radius-lg);
transition: var(--transition);
}
.step-num {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(19, 55, 236, 0.12);
border: 1.5px solid rgba(19, 55, 236, 0.25);
color: var(--primary);
font-weight: 800;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: var(--transition);
}
.step-num.active {
background: var(--primary);
color: #fff;
border-color: var(--primary);
box-shadow: 0 4px 16px var(--primary-glow);
}
/* Linked step — interactive */
a.step-link {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.1rem 1rem;
border-radius: var(--radius-lg);
border: 1px solid transparent;
text-decoration: none;
color: var(--text);
transition: var(--transition);
cursor: pointer;
}
a.step-link:hover {
background: rgba(19, 55, 236, 0.05);
border-color: rgba(19, 55, 236, 0.2);
}
a.step-link:hover .step-num {
background: var(--primary);
color: #fff;
border-color: var(--primary);
box-shadow: 0 4px 16px var(--primary-glow);
}
a.step-link:hover .material-symbols-outlined[aria-hidden] {
opacity: 1 !important;
transform: translateX(4px);
}
/* Focus visibility (keyboard accessibility) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="switch"]:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Form feedback */
.form-message {
padding: 0.9rem 1rem;
border-radius: var(--radius-md);
font-size: 0.9rem;
text-align: center;
line-height: 1.5;
}
.form-message.success {
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #16a34a;
}
.form-message.error {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #dc2626;
}
/* Comparison table: horizontal scroll on small screens */
.compare-table {
overflow-x: auto;
}
.compare-table > div {
min-width: 600px;
}
/* Process step connector line (hidden when the grid collapses) */
.step-connector-line {
display: block;
}
@media (max-width: 1024px) {
.step-connector-line {
display: none;
}
}
/* Process step cards: make every box fill its grid cell, so the three boxes stay
the same height even when one step has less copy than the others. */
.step-cards > div:not(.step-connector-line) {
display: flex;
flex-direction: column;
}
.step-cards > div:not(.step-connector-line) > div:last-child {
flex: 1;
}
/* ── Icon list (ERPNext module / industry pages) ── */
.icon-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.icon-list li {
display: flex;
gap: 0.6rem;
align-items: flex-start;
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-muted);
}
.icon-list li .material-symbols-outlined {
font-size: 1.1rem;
color: var(--primary);
flex-shrink: 0;
margin-top: 0.1rem;
}