/* ============================================================ CRITICAL.CSS — Sevilla ESL Pro Above-fold critical styles (inlined in ) ============================================================ */ /* ----- Design Tokens ----- */ :root { /* Colors */ --color-primary: #1a56db; --color-primary-dark: #1342a8; --color-primary-light: #3b82f6; --color-secondary: #059669; --color-secondary-dark: #047857; --color-secondary-light: #10b981; --color-dark: #111827; --color-light: #f9fafb; --color-white: #ffffff; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; /* Typography */ --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Border Radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; } /* ----- Reset / Normalize ----- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--color-dark); background-color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { list-style: none; } /* ----- Container ----- */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 768px) { .container { padding-inline: 2rem; } } /* ----- Typography ----- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-dark); } h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); letter-spacing: -0.02em; } h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); } h4 { font-size: clamp(1.125rem, 2.5vw, 1.375rem); } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; } .text-xl { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; } .text-lg { font-size: clamp(1rem, 1.5vw, 1.175rem); line-height: 1.6; } /* ============================================================ HEADER — matches .header, .header__container, etc. ============================================================ */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 1rem 0; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-bottom: 1px solid rgba(0, 0, 0, 0.06); transition: padding var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } .header.is-scrolled { padding: 0.5rem 0; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: var(--shadow-md); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .header__container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .header__logo { display: flex; align-items: center; gap: 0.625rem; font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; color: var(--color-white); white-space: nowrap; flex-shrink: 0; } .header.is-scrolled .header__logo { color: var(--color-primary); } .header__logo img { height: 2rem; width: auto; } /* Desktop Nav */ .header__nav { display: none; } @media (min-width: 1024px) { .header__nav { display: flex; align-items: center; gap: 2rem; } } .header__nav-link { font-size: 0.9375rem; font-weight: 500; color: var(--color-gray-600); transition: color var(--transition-fast); position: relative; padding: 0.25rem 0; } .header__nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--color-white); border-radius: 1px; transition: width var(--transition-normal); } .header__nav-link:hover, .header__nav-link.active { color: var(--color-white); } .header__nav-link:hover::after, .header__nav-link.active::after { width: 100%; } /* Scrolled state — dark text on light bg */ .header.is-scrolled .header__nav-link { color: var(--color-gray-600); } .header.is-scrolled .header__nav-link::after { background: var(--color-primary); } .header.is-scrolled .header__nav-link:hover, .header.is-scrolled .header__nav-link.active { color: var(--color-primary); } /* Header Actions */ .header__actions { display: flex; align-items: center; gap: 0.75rem; } .header__cta { display: none; } @media (min-width: 1024px) { .header__cta { display: inline-flex; } } /* Cart Button */ .header__cart { position: relative; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: none; border: none; cursor: pointer; border-radius: var(--radius-md); color: var(--color-gray-700); transition: background var(--transition-fast), color var(--transition-fast); } .header__cart:hover { background: var(--color-gray-100); } .header.is-scrolled .header__cart { color: var(--color-gray-700); } .header.is-scrolled .header__cart:hover { background: var(--color-gray-100); } .header__cart-icon { width: 24px; height: 24px; } .header__cart-badge { position: absolute; top: 2px; right: 2px; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3rem; font-size: 0.6875rem; font-weight: 700; line-height: 1.125rem; text-align: center; color: var(--color-white); background: var(--color-primary); border-radius: 9999px; } /* Hamburger */ .header__hamburger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; background: none; border: none; cursor: pointer; border-radius: var(--radius-md); transition: background var(--transition-fast); } .header__hamburger:hover { background: var(--color-gray-100); } .header.is-scrolled .header__hamburger:hover { background: var(--color-gray-100); } @media (min-width: 1024px) { .header__hamburger { display: none; } } .header__hamburger-line { display: block; width: 20px; height: 2px; background: var(--color-gray-700); border-radius: 1px; transition: transform var(--transition-normal), opacity var(--transition-normal); } .header.is-scrolled .header__hamburger-line { background: var(--color-gray-700); } .header__hamburger[aria-expanded="true"] .header__hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .header__hamburger[aria-expanded="true"] .header__hamburger-line:nth-child(2) { opacity: 0; } .header__hamburger[aria-expanded="true"] .header__hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile Menu */ .header__mobile-menu { background: var(--color-white); border-top: 1px solid var(--color-gray-100); box-shadow: var(--shadow-lg); overflow: hidden; animation: slideDown 0.3s ease forwards; } .header__mobile-menu[hidden] { display: none; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .header__mobile-nav { display: flex; flex-direction: column; padding: 1rem 1.25rem 1.5rem; } .header__mobile-link { display: block; padding: 0.75rem 0; font-size: 1.0625rem; font-weight: 500; color: var(--color-gray-700); border-bottom: 1px solid var(--color-gray-100); transition: color var(--transition-fast); } .header__mobile-link:hover { color: var(--color-primary); } @media (min-width: 1024px) { .header__mobile-menu { display: none !important; } } /* ============================================================ HERO — full viewport, split layout ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 7rem 0 4rem; overflow: hidden; background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #1a56db 100%); } .hero__background { position: absolute; inset: 0; pointer-events: none; } .hero__bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__gradient-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.3); } /* Subtle dot pattern */ .hero__background::after { 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.03'%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"); } .hero__container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero__content { max-width: 720px; } .hero__headline { color: var(--color-white); margin-bottom: 1.25rem; font-weight: 800; } .hero__subheadline { font-size: clamp(1.0625rem, 2vw, 1.3125rem); color: rgba(255, 255, 255, 0.8); font-weight: 600; margin-bottom: 2.5rem; line-height: 1.7; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; } /* Mobile adjustments */ @media (max-width: 767px) { .hero { padding: 8rem 0 3rem; } .hero__actions { justify-content: center; } } /* ============================================================ BUTTONS ============================================================ */ .btn, .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; padding: 0.75rem 1.75rem; border-radius: var(--radius-lg); border: 2px solid transparent; cursor: pointer; transition: all var(--transition-normal); white-space: nowrap; text-align: center; line-height: 1.4; } .btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 2px; } /* Primary — filled blue */ .btn-primary, .btn--primary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); box-shadow: 0 4px 14px rgba(26, 86, 219, 0.35); } .btn-primary:hover, .btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); box-shadow: 0 6px 20px rgba(26, 86, 219, 0.45); transform: translateY(-2px); } .btn-primary:active, .btn--primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(26, 86, 219, 0.3); } /* Secondary — outlined, white text on dark bg */ .btn-secondary, .btn--outline { background: transparent; color: var(--color-white); border-color: rgba(255, 255, 255, 0.4); } .btn-secondary:hover, .btn--outline:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.7); transform: translateY(-2px); } .btn-secondary:active, .btn--outline:active { transform: translateY(0); } /* Size modifiers */ .btn--sm { font-size: 0.875rem; padding: 0.5rem 1.25rem; } .btn--lg { font-size: 1rem; padding: 0.9375rem 2.25rem; } .btn--block { display: flex; width: 100%; } /* ============================================================ GRID UTILITIES ============================================================ */ .grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; } .grid-3 { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ UTILITIES ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .text-center { text-align: center; } .text-white { color: var(--color-white); }