/* ============================================================ MENTO.IA — Design System (aligned to official Brand Book 2026) Palette: Teal #5de0e6 → Blue #004aad (90° gradient) · Navy #060754 Ice #f0f6ff · White #fdfdfd · Gris #737373 Type: Space Grotesk (titles/logo/labels/buttons) + Quicksand (body) Slogan: "Focused on your future." ============================================================ */ :root { /* — Brand core — */ --teal: #5de0e6; --blue: #004aad; --navy: #060754; --ice: #f0f6ff; --white: #fdfdfd; /* — Surfaces (default: light) — */ --cosmos: #060754; /* navy — dark sections / hero */ --cosmos-2: #0a0c63; --cosmos-3: #11147a; /* lighter navy — cards on dark */ --ink: #060754; /* primary text */ --ink-soft: #737373; /* secondary text (brand gris medio) */ --ink-faint: #a0a4b5; --paper: #fdfdfd; --paper-2: #f0f6ff; /* ice blue */ --paper-warm:#f0f6ff; --line: rgba(6,7,84,.10); --line-2: rgba(6,7,84,.055); /* — Accents (legacy aliases kept, repointed to brand family) — */ --violet: #1f63c9; /* mid-blue accent (rings, quotes, eco) */ --gold: #12a5c0; /* teal-blue accent (chip variety) */ /* — Journey spectrum: teal → mid → blue — */ --phase-1: var(--teal); --phase-2: #1f8fd0; --phase-3: var(--blue); /* — Gradients (brand 90°) — */ --grad: linear-gradient(90deg, var(--teal), var(--blue)); --grad-soft: linear-gradient(90deg, var(--teal), var(--blue)); --grad-tri: linear-gradient(90deg, var(--teal), #1f8fd0 52%, var(--blue)); --grad-bright: linear-gradient(90deg, #7fe9ee, #4d9fe8); /* legible on navy */ /* — Card tints — */ --tint-violet: color-mix(in oklab, var(--teal) 16%, white); --tint-teal: color-mix(in oklab, var(--teal) 22%, white); --tint-gold: color-mix(in oklab, var(--blue) 8%, white); --tint-blue: color-mix(in oklab, var(--blue) 9%, white); /* — Type — */ --sans: "Quicksand", system-ui, sans-serif; /* body */ --display: "Space Grotesk", system-ui, sans-serif; /* titles/logo */ --serif: "Quicksand", system-ui, sans-serif; /* warm editorial lines */ --tracking-eyebrow: .3em; /* — Rhythm — */ --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); --section-y: clamp(80px, 11vw, 168px); --radius: 16px; --radius-lg: 24px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); } /* Tweak palettes (applied to ) */ html[data-palette="ocean"]{ --teal:#4fd1d9; --blue:#0b63c4; --violet:#1f6fd0; --gold:#13a6c2; } html[data-palette="aurora"]{ --teal:#6fe0c8; --blue:#1d5fb0; --violet:#2a7a9e; --gold:#19a7a0; } html[data-palette="mono"]{ --teal:#7fa6c9; --blue:#1f3f7a; --violet:#3a5586; --gold:#5a7ba0; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body { margin: 0; font-family: var(--sans); background: var(--paper); color: var(--ink); font-size: 18px; line-height: 1.65; font-weight: 500; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } h1,h2,h3,h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ——— Scroll progress bar ——— */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 200; background: var(--grad); box-shadow: 0 0 12px color-mix(in oklab, var(--teal) 60%, transparent); transition: width .1s linear; } /* ——— Layout primitives ——— */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } .eyebrow { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: .9em; } .eyebrow::before { content:""; width:28px; height:2px; border-radius:2px; background:var(--grad); } .eyebrow.on-dark { color: rgba(253,253,253,.6); } .serif-line { font-family: var(--sans); font-style: italic; font-weight: 500; letter-spacing: -.005em; line-height: 1.4; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .teal-text { color: var(--teal); } .blue-text { color: var(--blue); } /* Display scale */ .d1 { font-size: clamp(44px, 8.5vw, 112px); } .d2 { font-size: clamp(33px, 5.2vw, 66px); } .d3 { font-size: clamp(26px, 3.3vw, 44px); } .lead { font-family: var(--sans); font-size: clamp(17px, 1.9vw, 22px); color: var(--ink-soft); line-height: 1.6; font-weight: 500; } /* ——— Logo lockup ——— */ .logo { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: 23px; display:inline-flex; align-items:baseline; line-height:1; } .logo .dot { color: var(--teal); } .logo .ia { background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .logo.on-dark .mento { color:#fff; } .logo.on-dark .ia { background:none; color: var(--teal); -webkit-text-fill-color: var(--teal); } .logo.on-dark .dot { color: var(--teal); } /* ——— Buttons ——— */ .btn { font-family: var(--display); display:inline-flex; align-items:center; gap:.55em; padding:14px 26px; border-radius:10px; font-weight:600; font-size:16px; letter-spacing:-.005em; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .3s; will-change: transform; } .btn .arr { transition: transform .25s var(--ease); } .btn:hover .arr { transform: translateX(4px); } .btn-primary { background: var(--grad); color:#fff; box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--blue) 70%, transparent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -14px color-mix(in oklab, var(--blue) 75%, transparent); } .btn-ghost { border:1.5px solid var(--blue); color: var(--blue); background: transparent; } .btn-ghost:hover { background: var(--ice); transform: translateY(-2px); } .btn-ghost.on-dark { color:#fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); } .btn-ghost.on-dark:hover { border-color: var(--teal); color: var(--teal); background: rgba(93,224,230,.06); } /* ——— Reveal animation (scroll) ——— */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"]{ transition-delay:.06s } .reveal[data-d="2"]{ transition-delay:.12s } .reveal[data-d="3"]{ transition-delay:.18s } .reveal[data-d="4"]{ transition-delay:.24s } .reveal[data-d="5"]{ transition-delay:.30s } .reveal[data-d="6"]{ transition-delay:.36s } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } } /* tabular figures for any counter */ .count, .num, .stat .num, .tstat .num, .hero-meta .m b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }