/* ============================================================================ ProFlight — Manual Landing Pages 2026 Design tokens: colors, gradients, typography, spacing, radii, elevation, motion Update: paleta ampliada + Neue Haas Grotesk Display restaurada como display font. Inter continúa como UI/body font. Discontinued: Light Blue #00B0CE. ============================================================================ */ /* ---- Font faces ---------------------------------------------------------- */ /* Neue Haas Grotesk Display es propietaria — usamos Inter como fallback público y dejamos declarada la familia para que ambientes con licencia la resuelvan. La carga de Inter se hace desde (preconnect + ) en vez de @import acá, para que no bloquee el render en serie con este archivo. */ :root { /* ---- Core palette (7 tokens) ------------------------------------------ */ --color-white: #FBFAFA; /* 45% — surfaces, page bg */ --color-grey: #EEEEEE; /* 15% — dividers, subtle bg */ --color-silver: #D6DCDC; /* 5% — chips, muted surfaces */ --color-blue: #003C67; /* 10% — action, links, accents (updated) */ --color-dark-blue: #061F31; /* 15% — brand primary, hero */ --color-dark-grey: #5C5B5C; /* 5% — secondary text */ --color-black: #1D1D1D; /* 5% — primary text */ /* Alias — semantic roles */ --bg-page: var(--color-white); --bg-elevated: #FFFFFF; --bg-muted: var(--color-grey); --bg-inverse: var(--color-dark-blue); --border-default: var(--color-silver); --border-strong: var(--color-dark-grey); --fg-primary: var(--color-black); --fg-secondary: var(--color-dark-grey); --fg-inverse: var(--color-white); --fg-accent: var(--color-blue); --action-primary: var(--color-blue); --action-primary-hover: var(--color-dark-blue); /* Discontinued sentinel — do not use */ /* --color-light-blue-DEPRECATED: #00B0CE; */ /* ---- Gradients (6 official) ------------------------------------------- */ /* 01 White + Grey — general background */ --gradient-01: linear-gradient(135deg, #FBFAFA 0%, #D6DCDC 100%); /* 02 Grey + Light Blue 1 — MCC Landing Pages */ --gradient-02: linear-gradient(135deg, #C0CAD0 0%, #7890A1 100%); /* 03 Grey + Light Blue 2 — MCC Landing Pages (soft) */ --gradient-03: linear-gradient(135deg, #EDEDED 0%, #9DADB9 100%); /* 04 Blue + Grey — over text overlay */ --gradient-04: linear-gradient(90deg, #003C67 0%, #EEEEEE 100%); /* 05 Blue + Dark Blue — hero background */ --gradient-05: linear-gradient(135deg, #003C67 0%, #061F31 100%); /* 06 Dark Blue + Black — deep background */ --gradient-06: linear-gradient(135deg, #061F31 0%, #000000 100%); /* ---- Typography families --------------------------------------------- */ --font-display: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; /* ---- Type scale — Desktop -------------------------------------------- */ /* size / line-height / letter-spacing */ --type-display-0-size: 70px; --type-display-0-lh: 70px; --type-display-0-track: 0em; --type-h1-size: 50px; --type-h1-lh: 50px; --type-h1-track: 0em; --type-h2-size: 35px; --type-h2-lh: 35px; --type-h2-track: 0em; --type-sub1-size: 25px; --type-sub1-lh: 27px; --type-sub1-track: 0.01em; --type-sub2-size: 18px; --type-sub2-lh: 20px; --type-sub2-track: 0.01em; --type-body-size: 15px; --type-body-lh: 20px; --type-body-track: 0.02em; --type-small-size: 12px; --type-small-lh: 15px; --type-small-track: 0.02em; --type-label-size: 10px; --type-label-lh: 15px; --type-label-track: 0.15em; /* ---- Spacing (4px scale) --------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; /* ---- Radii ----------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-full: 9999px; /* ---- Elevation (Deep Blue tinted, sober) ----------------------------- */ --shadow-xs: 0 1px 2px rgba(6, 31, 49, 0.06); --shadow-sm: 0 2px 6px rgba(6, 31, 49, 0.08); --shadow-md: 0 6px 16px rgba(6, 31, 49, 0.10); --shadow-lg: 0 16px 40px rgba(6, 31, 49, 0.14); --focus-ring: 0 0 0 3px rgba(0, 60, 103, 0.22); /* ---- Motion ---------------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); } /* ---- Base resets --------------------------------------------------------- */ html, body { background: var(--bg-page); color: var(--fg-primary); font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--type-body-track); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--fg-accent); text-decoration: none; } a:hover { color: var(--color-dark-blue); text-decoration: underline; } /* ---- Type utility classes ----------------------------------------------- */ .text-display-0 { font-family: var(--font-display); font-weight: 200; font-size: var(--type-display-0-size); line-height: var(--type-display-0-lh); letter-spacing: var(--type-display-0-track); } .text-h1 { font-family: var(--font-display); font-weight: 300; font-size: var(--type-h1-size); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-track); } .text-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-track); } .text-sub1 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-sub1-size); line-height: var(--type-sub1-lh); letter-spacing: var(--type-sub1-track); } .text-sub2 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-sub2-size); line-height: var(--type-sub2-lh); letter-spacing: var(--type-sub2-track); } .text-body { font-family: var(--font-ui); font-weight: 400; font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--type-body-track); } .text-small { font-family: var(--font-ui); font-weight: 400; font-size: var(--type-small-size); line-height: var(--type-small-lh); letter-spacing: var(--type-small-track); } .text-label { font-family: var(--font-ui); font-weight: 500; font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-track); text-transform: uppercase; } .fg-primary { color: var(--fg-primary); } .fg-secondary { color: var(--fg-secondary); } .fg-inverse { color: var(--fg-inverse); } .fg-accent { color: var(--fg-accent); }