@import "@fontsource/dm-sans/400.css"; @import "@fontsource/dm-sans/500.css"; @import "@fontsource/dm-sans/600.css"; @import "@fontsource/dm-sans/700.css"; @import "@fontsource/plus-jakarta-sans/500.css"; @import "@fontsource/plus-jakarta-sans/600.css"; @import "@fontsource/plus-jakarta-sans/700.css"; @import "@fontsource/plus-jakarta-sans/800.css"; @import "@fontsource/source-serif-4/400.css"; @import "@fontsource/source-serif-4/500.css"; @import "@fontsource/source-serif-4/600.css"; @import "tailwindcss"; :root { --font-dm-sans: "DM Sans", system-ui, sans-serif; --font-plus-jakarta: "Plus Jakarta Sans", system-ui, sans-serif; --font-source-serif: "Source Serif 4", Georgia, serif; } @custom-variant dark (&:where(.dark, .dark *)); /* Light theme — defaults (overridden by inline vars on when toggling) */ html[data-theme="light"], :root:not(.dark) { color-scheme: light; --background: #faf8f5; --foreground: #1a1614; --muted: #6b6560; --accent: #4f46e5; --accent-secondary: #ea580c; --accent-tertiary: #db2777; --surface: #ffffff; --surface-elevated: #ffffff; --border: #e8e4df; --border-strong: #d6d0c8; --gradient-1: #4f46e5; --gradient-2: #ea580c; --gradient-3: #db2777; --glow-sm: 0 8px 30px rgba(79, 70, 229, 0.12); --glow-lg: 0 20px 50px rgba(234, 88, 12, 0.14); --mesh-1: rgba(79, 70, 229, 0.14); --mesh-2: rgba(234, 88, 12, 0.1); --mesh-3: rgba(219, 39, 119, 0.08); --prose: #44403c; --card-shadow: 0 1px 2px rgba(26, 22, 20, 0.04), 0 8px 24px rgba(26, 22, 20, 0.06); --callout-bg: rgba(79, 70, 229, 0.06); --callout-border: rgba(79, 70, 229, 0.18); --cover-from: #3730a3; --cover-via: #7c2d12; --cover-to: #831843; --cover-glow: rgba(79, 70, 229, 0.35); --cta-from: #4338ca; --cta-via: #c2410c; --cta-to: #9d174d; --cta-text: #faf8f5; --cta-btn-bg: #faf8f5; --cta-btn-text: #3730a3; --read-max: 42rem; --header-h: 4.25rem; } /* Dark theme */ html[data-theme="dark"], html.dark { color-scheme: dark; --background: #0f0e0d; --foreground: #f5f2ed; --muted: #a39e97; --accent: #a5b4fc; --accent-secondary: #fdba74; --accent-tertiary: #f9a8d4; --surface: #1a1816; --surface-elevated: #242120; --border: #2e2b28; --border-strong: #3d3935; --gradient-1: #818cf8; --gradient-2: #fb923c; --gradient-3: #f472b6; --glow-sm: 0 8px 32px rgba(129, 140, 248, 0.18); --glow-lg: 0 20px 56px rgba(251, 146, 60, 0.12); --mesh-1: rgba(129, 140, 248, 0.12); --mesh-2: rgba(251, 146, 60, 0.1); --mesh-3: rgba(244, 114, 182, 0.08); --prose: #c9c2ba; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.35); --callout-bg: rgba(129, 140, 248, 0.08); --callout-border: rgba(165, 180, 252, 0.22); --cover-from: #312e81; --cover-via: #7c2d12; --cover-to: #701a3a; --cover-glow: rgba(129, 140, 248, 0.4); --cta-from: #1e1b4b; --cta-via: #431407; --cta-to: #500724; --cta-text: #f5f2ed; --cta-btn-bg: #f5f2ed; --cta-btn-text: #312e81; } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-muted: var(--muted); --color-accent: var(--accent); --color-surface: var(--surface); --color-border: var(--border); --font-sans: var(--font-dm-sans); --font-serif: var(--font-source-serif); --font-display: var(--font-plus-jakarta); } html { scroll-padding-top: calc(var(--header-h) + 1rem); } body { background-color: var(--background); color: var(--foreground); font-family: var(--font-dm-sans), system-ui, sans-serif; transition: background-color 0.25s ease, color 0.25s ease; } .mesh-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background-color: var(--background); } .mesh-bg::before, .mesh-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(100px); animation: mesh-float 24s ease-in-out infinite alternate; } .mesh-bg::before { width: min(65vw, 480px); height: min(65vw, 480px); top: -10%; right: -5%; background: radial-gradient(circle, var(--mesh-1), transparent 70%); } .mesh-bg::after { width: min(55vw, 400px); height: min(55vw, 400px); bottom: 5%; left: -8%; background: radial-gradient(circle, var(--mesh-2), transparent 70%); animation-delay: -8s; } .mesh-orb { position: absolute; border-radius: 50%; filter: blur(90px); animation: mesh-float 28s ease-in-out infinite alternate-reverse; } .mesh-orb--accent { width: min(42vw, 300px); height: min(42vw, 300px); top: 45%; left: 40%; background: radial-gradient(circle, var(--mesh-3), transparent 70%); } @keyframes mesh-float { 0% { transform: translate(0, 0); } 100% { transform: translate(16px, -20px); } } .gradient-text { background: linear-gradient( 120deg, var(--gradient-1) 0%, var(--gradient-2) 52%, var(--gradient-3) 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; } .glass-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); } .dark .glass-card { background: var(--surface-elevated); } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 3rem; padding-inline: 1.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; color: #fff; background: linear-gradient( 120deg, var(--gradient-1), var(--gradient-2), var(--gradient-3) ); box-shadow: var(--glow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--glow-lg); filter: brightness(1.05); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 3rem; padding-inline: 1.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; color: var(--foreground); background: var(--surface); border: 1px solid var(--border-strong); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .btn-secondary:hover { border-color: var(--accent); box-shadow: var(--glow-sm); transform: translateY(-1px); } .cta-panel { background: linear-gradient( 135deg, var(--cta-from), var(--cta-via), var(--cta-to) ); } .cta-panel__title, .cta-panel__eyebrow { color: var(--cta-text); } .cta-panel__body { color: color-mix(in srgb, var(--cta-text) 88%, transparent); } .cta-panel__btn { background: var(--cta-btn-bg); color: var(--cta-btn-text); } .font-display { font-family: var(--font-plus-jakarta), var(--font-dm-sans), system-ui, sans-serif; } .cover-float { animation: cover-float 7s ease-in-out infinite; } .cover-card { background: linear-gradient( 145deg, var(--cover-from), var(--cover-via), var(--cover-to) ); } .cover-glow { background: var(--cover-glow); } @keyframes cover-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .reading-progress { position: fixed; top: var(--header-h); left: 0; z-index: 40; height: 2px; width: 100%; background: var(--border); pointer-events: none; } .reading-progress__bar { height: 100%; width: 0%; background: linear-gradient( 90deg, var(--gradient-1), var(--gradient-2), var(--gradient-3) ); transition: width 0.1s linear; } .prose-ebook { font-size: 1.0625rem; line-height: 1.88; } .prose-ebook h2 { font-family: var(--font-source-serif), Georgia, serif; font-size: clamp(1.4rem, 3.2vw, 1.75rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.25; margin-bottom: 0.5rem; color: var(--foreground); } .prose-ebook .chapter-lead { font-size: 0.9375rem; color: var(--muted); margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .prose-ebook p { color: var(--prose); margin-bottom: 1.25rem; } .prose-ebook p:last-child { margin-bottom: 0; } .prose-ebook strong { color: var(--foreground); font-weight: 600; } .prose-ebook ul { margin: 1rem 0 1.35rem; padding-left: 1.35rem; list-style: disc; } .prose-ebook li { color: var(--prose); margin-bottom: 0.55rem; } .prose-ebook ol { margin: 1rem 0 1.35rem; padding-left: 1.35rem; list-style: decimal; } .prose-ebook blockquote { margin: 1.5rem 0; padding: 1rem 1.15rem 1rem 1.25rem; border-left: 3px solid var(--gradient-1); border-radius: 0 0.75rem 0.75rem 0; background: var(--callout-bg); border-top: 1px solid var(--callout-border); border-right: 1px solid var(--callout-border); border-bottom: 1px solid var(--callout-border); font-size: 0.98rem; color: var(--foreground); } .prose-ebook blockquote p { margin: 0; color: inherit; } .toc-link--active { background: color-mix(in srgb, var(--gradient-1) 14%, transparent); color: var(--foreground); font-weight: 600; } .toc-link--active .toc-index { background: linear-gradient(135deg, var(--gradient-1), var(--gradient-3)); color: white; } @media (prefers-reduced-motion: reduce) { .cover-float, .marquee-track, .mesh-bg::before, .mesh-bg::after, .mesh-orb, body { animation: none; transition: none; } .btn-primary:hover, .btn-secondary:hover { transform: none; } }