/* ========================================================= Ambition & Life — Design Tokens Karis Dorrigan / Founding Cohort Funnel ========================================================= */ /* Montserrat is now loaded via a tag in index.html's , not @import here, @import blocks rendering and costs measurable page-speed, which is a Google ranking factor. Keep font loading in the HTML, not the CSS. */ /* -------------------------------------------------------- Recoleta is a licensed display serif (Latinotype) and is NOT available on Google Fonts. Self-host it once you have the licensed files — see /assets/fonts/README.txt. Until then this stack falls back to a warm, high-contrast system serif so the page still reads on-brand. -------------------------------------------------------- */ @font-face { font-family: 'Recoleta'; src: url('../assets/fonts/Recoleta-Regular.woff2') format('woff2'), url('../assets/fonts/Recoleta-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Colour tokens */ --kd-warm-gray: #f7f6f4; --kd-royal-blue: #2461ff; --kd-royal-700: #1f52d6; --kd-royal-100: #e3ebff; --kd-lavender: #b9b5ff; --kd-navy: #203845; --kd-chalked-blue: #dbe4f0; --kd-tan: #e7dbc3; --kd-navy-700: #2d4a5a; --kd-navy-100: rgba(32, 56, 69, 0.12); /* Fonts */ --font-display: 'Recoleta', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Shape */ --radius-lg: 20px; --radius-md: 12px; --radius-pill: 999px; /* Shadow (navy-tinted, never pure black) */ --shadow-sm: 0 2px 10px rgba(32, 56, 69, 0.08); --shadow-md: 0 8px 24px rgba(32, 56, 69, 0.12); --shadow-lg: 0 20px 48px rgba(32, 56, 69, 0.16); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--kd-warm-gray); color: var(--kd-navy); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; } a { color: var(--kd-royal-blue); } a:hover { color: var(--kd-royal-700); } img { max-width: 100%; display: block; } button, input, select, textarea { font-family: var(--font-ui); } :focus-visible { outline: 3px solid var(--kd-royal-blue); outline-offset: 2px; } .container { max-width: 1120px; margin: 0 auto; padding: 0 32px; } .container-wide { max-width: 1180px; margin: 0 auto; padding: 0 32px; } @media (max-width: 720px) { .container, .container-wide { padding: 0 20px; } }