/* AskMaxie Design System — Critical CSS (inline in ) */ /* Above-fold only: reset, nav, hero, typography. Max 14KB. */ :root { /* ── Cosmic Palette with Warmth ── */ --indigo: #4338ca; --violet: #7c3aed; --pink: #ec4899; --rose: #f43f5e; --peach: #fb923c; --blue: #3b82f6; --cyan: #06b6d4; --gold: #fbbf24; --orange: #f97316; /* ── Neutrals ── */ --white: #ffffff; --grey-50: #fafafa; --grey-100: #f5f5f7; --grey-200: #e5e5ea; --grey-300: #d1d1d6; --grey-400: #8e8e93; --grey-500: #636366; --grey-600: #48484a; --grey-700: #3a3a3c; --grey-800: #2c2c2e; --grey-900: #1c1c1e; /* ── Semantic ── */ --text-primary: var(--grey-900); --text-secondary: var(--grey-500); --text-inverse: var(--white); --bg-primary: var(--white); --bg-secondary: var(--grey-50); --accent: var(--violet); --accent-hover: var(--pink); /* ── Gradients ── */ --g-cosmic: linear-gradient(135deg, var(--indigo), var(--violet) 50%, var(--pink)); --g-warm: linear-gradient(135deg, var(--rose), var(--peach)); --g-love: linear-gradient(135deg, var(--pink), var(--rose)); --g-aurora: linear-gradient(135deg, var(--blue), var(--cyan)); --g-sunset: linear-gradient(135deg, var(--orange), var(--pink)); --g-gold: linear-gradient(135deg, var(--gold), var(--orange)); /* ── Typography ── */ --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; --font-serif: Georgia, 'Times New Roman', serif; --font-mono: 'SF Mono', Monaco, monospace; /* ── Spacing ── */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; /* ── Layout ── */ --max-w: 1200px; --max-w-narrow: 800px; --nav-h: 64px; /* ── Shadows ── */ --sh-sm: 0 1px 2px rgba(0,0,0,.04); --sh-md: 0 4px 12px rgba(0,0,0,.08); --sh-lg: 0 8px 24px rgba(0,0,0,.12); --sh-xl: 0 16px 48px rgba(0,0,0,.16); --sh-glow: 0 0 40px rgba(124,58,237,.25); --sh-warm: 0 8px 24px rgba(244,63,94,.2); /* ── Radius ── */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px; /* ── Motion ── */ --ease: cubic-bezier(.4,0,.2,1); --t-fast: 150ms var(--ease); --t-base: 250ms var(--ease); --t-slow: 400ms var(--ease); } /* ── Reset ── */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } ::selection { background: var(--violet); color: var(--white); } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 17px; line-height: 1.6; } body { font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-primary); min-height: 100vh; display: flex; flex-direction: column; } /* ── Header / Nav ── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--grey-200); height: var(--nav-h); } .nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s6); height: 100%; display: flex; align-items: center; justify-content: space-between; } .brand { font-size: 24px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; background: var(--g-cosmic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; gap: var(--s3); } .brand-mark { width: 28px; height: 28px; flex-shrink: 0; } .nav-links { display: flex; gap: var(--s8); font-size: 15px; font-weight: 500; list-style: none; } .nav-links a { color: var(--text-secondary); text-decoration: none; transition: color var(--t-fast); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--g-cosmic); transition: width var(--t-base); } .nav-links a:hover { color: var(--accent); } .nav-links a:hover::after { width: 100%; } /* ── Main ── */ main { flex: 1; max-width: var(--max-w); width: 100%; margin: 0 auto; padding: var(--s16) var(--s6); } /* ── Typography ── */ h1 { font-size: 56px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; margin-bottom: var(--s6); } h2 { font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; margin: var(--s16) 0 var(--s8); } h3 { font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin: var(--s10) 0 var(--s4); } p { margin-bottom: var(--s5); color: var(--text-secondary); } a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--accent-hover); } .lead { font-size: 21px; line-height: 1.6; color: var(--text-secondary); margin-bottom: var(--s8); max-width: 65ch; } /* ── Hero ── */ .hero { text-align: center; padding: var(--s16) 0; margin-bottom: var(--s16); position: relative; } .hero-content { max-width: var(--max-w-narrow); margin: 0 auto; position: relative; z-index: 2; } .hero h1 { font-size: 72px; background: var(--g-cosmic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero .lead { font-size: 24px; margin: 0 auto var(--s10); } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font-family: var(--font-sans); font-size: 17px; font-weight: 600; padding: 14px 32px; border-radius: var(--r-full); border: none; cursor: pointer; text-decoration: none; transition: all var(--t-fast); will-change: transform; } .btn-primary { background: var(--g-cosmic); color: var(--white); box-shadow: var(--sh-md); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--sh-lg), var(--sh-warm); } .btn-secondary { background: var(--white); color: var(--accent); border: 1.5px solid var(--grey-200); } .btn-secondary:hover { border-color: var(--accent); background: var(--grey-100); } /* ── Responsive ── */ @media (max-width: 768px) { h1 { font-size: 40px; } h2 { font-size: 32px; } h3 { font-size: 22px; } .hero h1 { font-size: 48px; } .hero .lead { font-size: 19px; } .nav-links { gap: var(--s4); font-size: 14px; } main { padding: var(--s10) var(--s4); } } @media (max-width: 480px) { h1 { font-size: 32px; } .hero h1 { font-size: 36px; } .hero { padding: var(--s10) 0; } .nav-links { gap: var(--s3); font-size: 13px; } .brand { font-size: 20px; } } /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } }