/* ======================================== GRUPO ANTONI - MAIN STYLES MOBILE-FIRST OPTIMIZATION ======================================== */ /* * MOBILE-FIRST AUDIT NOTES: * - CSS crítico inline en (above-the-fold) * - CSS no crítico cargado via Vite con code splitting * - Google Fonts cargados asíncronamente (no bloquean) * - Font Awesome removido - usando SVG inline para mejor performance * - Media queries en formato mobile-first (max-width) * - Estilos desktop como enhancement (min-width) */ /* Import utility styles first (mobile-first base) */ @import './utils/reset.css'; @import './utils/typography.css'; @import './utils/responsive.css'; @import './mobile-responsive.css'; /* Import component styles (Vite code splitting maneja la carga diferida) */ @import './components/header.css'; @import './components/hero.css'; @import './components/quote.css'; @import './components/quote-section.css'; @import './components/projects.css'; @import './components/about.css'; @import './components/brand.css'; @import './components/team.css'; @import './components/contact.css'; @import './components/footer.css'; /* ======================================== ROOT VARIABLES ======================================== */ :root { /* Colors */ --color-primary: #4a90e2; --color-primary-dark: #357abd; --color-secondary: #2c3e50; --color-accent: #e74c3c; /* Background Colors */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #f1f3f4; --bg-card: #ffffff; --bg-overlay: rgba(255, 255, 255, 0.9); /* Text Colors */ --text-primary: #1a1a1a; --text-secondary: #4a4a4a; --text-muted: #8a8a8a; --text-accent: var(--color-primary); /* Border Colors */ --border-primary: #e1e5e9; --border-secondary: #d1d5db; /* Spacing */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-xxl: 4rem; /* Typography */ --font-family: 'Inter', sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --font-size-6xl: 3.75rem; /* Line Heights */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* Font Weights */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Border Radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* Z-index */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } /* ======================================== BASE STYLES ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-family); background-color: var(--bg-primary); color: var(--text-primary); line-height: var(--line-height-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ======================================== LAYOUT UTILITIES ======================================== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); } .container-fluid { width: 100%; padding: 0 var(--spacing-lg); } .section { padding: var(--spacing-xxl) 0; } .section-sm { padding: var(--spacing-xl) 0; } .section-lg { padding: 6rem 0; } /* ======================================== TYPOGRAPHY UTILITIES ======================================== */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-accent { color: var(--text-accent); } /* ======================================== SPACING UTILITIES ======================================== */ .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--spacing-xs); } .mb-2 { margin-bottom: var(--spacing-sm); } .mb-3 { margin-bottom: var(--spacing-md); } .mb-4 { margin-bottom: var(--spacing-lg); } .mb-5 { margin-bottom: var(--spacing-xl); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--spacing-xs); } .mt-2 { margin-top: var(--spacing-sm); } .mt-3 { margin-top: var(--spacing-md); } .mt-4 { margin-top: var(--spacing-lg); } .mt-5 { margin-top: var(--spacing-xl); } /* ======================================== DISPLAY UTILITIES ======================================== */ .d-none { display: none; } .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-flex { display: flex; } .d-grid { display: grid; } /* ======================================== FLEXBOX UTILITIES ======================================== */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .align-start { align-items: flex-start; } .align-center { align-items: center; } .align-end { align-items: flex-end; } .align-stretch { align-items: stretch; } /* ======================================== GRID UTILITIES ======================================== */ .grid-1 { grid-template-columns: repeat(1, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .gap-1 { gap: var(--spacing-xs); } .gap-2 { gap: var(--spacing-sm); } .gap-3 { gap: var(--spacing-md); } .gap-4 { gap: var(--spacing-lg); } .gap-5 { gap: var(--spacing-xl); } /* ======================================== ANIMATION UTILITIES MOBILE-FIRST: Animaciones simplificadas en mobile ======================================== */ .fade-in { animation: fadeIn var(--transition-slow) ease-in; } .slide-up { animation: slideUp var(--transition-slow) ease-out; } .scale-in { animation: scaleIn var(--transition-normal) ease-out; } /* MOBILE-FIRST: Desactivar animaciones complejas en mobile */ @media (max-width: 767.98px) { .fade-in, .slide-up, .scale-in { animation: none; opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* MOBILE-FIRST: Estilos para lazy-loaded images con fade-in suave */ img[loading='lazy']:not(.lazy-loaded) { opacity: 0; transition: opacity 0.3s ease-in; } img[loading='lazy'].lazy-loaded { opacity: 1; } /* MOBILE-FIRST: Soporte para prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } img[loading='lazy']:not(.lazy-loaded) { opacity: 1; /* Mostrar inmediatamente si el usuario prefiere menos movimiento */ } } /* ======================================== ACCESSIBILITY ======================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .focus-visible:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ======================================== PRINT STYLES ======================================== */ @media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } .no-print { display: none !important; } }