/* Theme variables (light default). Replace the RGB values with your brand colors. */ :root { --primary-50: 239 246 255; --primary-100: 219 234 254; --primary-200: 191 219 254; --primary-300: 147 197 253; --primary-400: 96 165 250; --primary-500: 59 130 246; --primary-600: 37 99 235; --primary-700: 29 78 216; --primary-800: 30 64 175; --primary-900: 30 58 138; --secondary-50: 250 245 255; --secondary-100: 243 232 255; --secondary-200: 233 213 255; --secondary-300: 196 181 253; --secondary-400: 167 139 250; --secondary-500: 139 92 246; --secondary-600: 124 58 237; --secondary-700: 109 40 217; --secondary-800: 91 33 182; --secondary-900: 76 29 149; } /* Optional: Dark theme (if desired) */ /* [data-theme="dark"] { color-scheme: dark; } */ /* Base */ html, body { height: 100%; } body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; line-height: 1.55; } /* Focus ring improvements */ :focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px rgb(var(--primary-500) / 0.35); } /* Module details animation */ details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } /* Module content collapsible */ .module .module-content { max-height: 0; overflow: hidden; transition: max-height 220ms ease; } .module .module-content.open { /* JS will set a max-height or use auto */ } /* FAQ details animation (for browsers not supporting
) */ .faq-item[open] .faq-content { max-height: 500px; } .faq-item .faq-content { overflow: hidden; max-height: 0; transition: max-height 220ms ease; } /* Backdrop blur fallback */ @supports not (backdrop-filter: blur(12px)) { header { background-color: rgba(255, 255, 255, 0.96); } } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Utility shadow rings for cards */ .shadow-ring { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.06); }