/* Intue.fi — Typography & light polish Works alongside Tailwind utility classes (doesn't require Tailwind config changes). Add Google Fonts Inter in and include this stylesheet site-wide. */ svg { display: inline-block; vertical-align: middle; } /* Lucide icons inherit color reliably */ svg.lucide { stroke: currentColor; } /* ------------------------------ 1) Design tokens --------------------------------*/ :root{ --bg: #fbfbfd; --surface: #ffffff; --text: #050202; --muted: #4b5563; /* gray-600 */ --muted-2: #6b7280; /* gray-500 */ --border: rgba(17,24,39,.10); /* Brand-ish (match your current "deeplilac" vibe) */ --accent: #7c3aed; /* violet-600 */ --accent-2: #6d28d9; /* violet-700 */ --shadow-sm: 0 6px 20px rgba(17, 24, 39, 0.06); --shadow-md: 0 10px 30px rgba(17, 24, 39, 0.10); --radius: 18px; /* Readability */ --measure: 65ch; /* optimal line length */ --lh-body: 1.65; --lh-head: 1.15; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ *{ scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* ------------------------------ 2) Global base --------------------------------*/ html{ scroll-behavior: smooth; } body{ font-family: "Inter", sans-serif, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: var(--bg); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video{ max-width: 100%; height: auto; } a{ text-underline-offset: .18em; } /* Make section anchor jumps land nicely under fixed nav */ :target{ scroll-margin-top: 110px; } /* ------------------------------ 3) Type scale (responsive) --------------------------------*/ h1, h2, h3, h4{ color: var(--text); line-height: var(--lh-head); letter-spacing: -0.02em; font-weight: 800; margin: 0 0 .5em; } h1{ font-size: clamp(2.2rem, 4.2vw, 3.4rem); letter-spacing: -0.03em; } h2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; } h3{ font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 750; } p{ margin: 0 0 1.05em; color: var(--text); } .small, small{ font-size: .92rem; color: var(--muted); } /* Better default for long text blocks */ .prose-custom{ max-width: var(--measure); } /* Subhead / lead text */ .lead{ font-size: clamp(1.05rem, 1.2vw, 1.15rem); color: var(--muted); } /* Lists inside prose */ .prose-custom ul, .prose-custom ol{ padding-left: 1.2em; margin: 0 0 1.05em; } .prose-custom li{ margin: .35em 0; color: var(--text); } /* Quotes */ blockquote{ border-left: 3px solid rgba(124,58,237,.35); padding: .4em 0 .4em 1em; margin: 1.1em 0; color: var(--muted); } /* ------------------------------ 4) Layout helpers (optional) --------------------------------*/ .section{ padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); } .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .hr-soft{ height: 1px; background: linear-gradient(to right, transparent, rgba(17,24,39,.12), transparent); } /* ------------------------------ 5) Buttons / links polish --------------------------------*/ .btn-primary{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.2rem; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; letter-spacing: .02em; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .btn-primary:hover{ background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-primary:active{ transform: translateY(0); } /* If you have secondary CTAs */ .btn-ghost{ display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.1rem; border-radius: 999px; border: 1px solid rgba(17,24,39,.14); color: var(--text); background: rgba(255,255,255,.55); backdrop-filter: blur(6px); } /* ------------------------------ 6) Forms (contact) --------------------------------*/ input, textarea, select{ width: 100%; border: 1px solid rgba(17,24,39,.14); border-radius: 14px; padding: .85rem .95rem; background: rgba(255,255,255,.9); color: var(--text); outline: none; transition: border-color .15s ease, box-shadow .15s ease; } textarea{ min-height: 140px; resize: vertical; } input:focus, textarea:focus, select:focus{ border-color: rgba(124,58,237,.55); box-shadow: 0 0 0 4px rgba(124,58,237,.14); } label{ display: block; font-weight: 700; margin: 0 0 .35rem; color: var(--text); } /* Flash messages */ .alert{ border-radius: 14px; padding: .9rem 1rem; border: 1px solid rgba(17,24,39,.12); background: #fff; } .alert-success{ border-color: rgba(16,185,129,.35); } .alert-error{ border-color: rgba(239,68,68,.35); } /* ------------------------------ 7) Navigation minor improvements (works with your existing Tailwind) --------------------------------*/ /* Slightly softer border and background */ nav{ backdrop-filter: blur(10px); } /* Make logo feel more modern if you remove font-serif */ .brand{ font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 400; letter-spacing: -0.03em; } .brand-dot{ color: var(--accent); } /* ------------------------------ 8) Mobile text comfort --------------------------------*/ @media (max-width: 640px){ body{ line-height: 1.7; } }