/* Shared design system for the ShreshthaGurukul marketing/support/legal pages. Pages still load the Tailwind CDN + config in ; this file adds the reusable component classes and long-form (legal/docs) typography so they aren't duplicated. */ body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } h1,h2,h3,.font-display { font-family: 'Sora','Inter',sans-serif; letter-spacing: -0.02em; } .gradient-text { background: linear-gradient(100deg,var(--brand-1,#4f46e5),var(--brand-2,#0ea5e9) 60%,var(--brand-2,#06b6d4)); -webkit-background-clip: text; background-clip: text; color: transparent; } .btn-primary { background: linear-gradient(100deg,var(--brand-1,#4f46e5),var(--brand-2,#0ea5e9)); color:#fff; border-radius:.85rem; padding:.8rem 1.35rem; font-weight:600; box-shadow:0 10px 30px -10px rgba(79,70,229,.6); transition:.2s; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; } .btn-primary:hover { transform: translateY(-2px); box-shadow:0 18px 40px -12px rgba(79,70,229,.7); } .btn-primary:disabled { opacity:.6; transform:none; cursor:not-allowed; } .btn-ghost { border-radius:.85rem; padding:.8rem 1.35rem; font-weight:600; transition:.2s; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; } .glass { backdrop-filter: blur(16px) saturate(160%); background: rgba(255,255,255,.72); } .dark .glass { background: rgba(2,6,23,.72); } .mesh { background: radial-gradient(60% 55% at 15% 10%, rgba(99,102,241,.20), transparent 60%), radial-gradient(50% 50% at 90% 5%, rgba(14,165,233,.18), transparent 60%), radial-gradient(45% 60% at 60% 100%, rgba(139,92,246,.12), transparent 60%); } .grid-lines { background-image: linear-gradient(rgba(100,116,139,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(100,116,139,.08) 1px, transparent 1px); background-size: 44px 44px; } .card { border-radius: 1.25rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(30,41,59,.4); } .reveal { opacity:0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; } .reveal.in { opacity:1; transform:none; } .fld { width:100%; border-radius:.7rem; border:1px solid rgb(203 213 225); background:#fff; padding:.6rem .8rem; font-size:.9rem; outline:none; } .fld:focus { box-shadow: 0 0 0 2px rgba(99,102,241,.4); border-color: transparent; } .dark .fld { background:#0f172a; border-color:#334155; color:#e2e8f0; } ::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px} .dark ::-webkit-scrollbar-thumb{background:#334155} details[open] .faq-chev { transform: rotate(180deg); } /* Long-form content (legal + docs articles) */ .legal { color:#334155; } .dark .legal { color:#cbd5e1; } .legal h2 { font-family:'Sora','Inter',sans-serif; font-size:1.45rem; font-weight:700; margin:2.2rem 0 .7rem; color:#0f172a; } .dark .legal h2 { color:#f1f5f9; } .legal h3 { font-weight:700; font-size:1.05rem; margin:1.5rem 0 .4rem; color:#0f172a; } .dark .legal h3 { color:#e2e8f0; } .legal p { margin:.65rem 0; line-height:1.75; } .legal ul { list-style:disc; padding-left:1.35rem; margin:.65rem 0; } .legal ol { list-style:decimal; padding-left:1.35rem; margin:.65rem 0; } .legal li { margin:.35rem 0; line-height:1.7; } .legal a { color:#4f46e5; } .legal a:hover { text-decoration:underline; } .dark .legal a { color:#818cf8; } .legal strong { color:#0f172a; } .dark .legal strong { color:#f1f5f9; } /* Inline rich-text content (FAQ answers etc.) authored via the editor */ .rt-content p { margin:.4rem 0; } .rt-content ul { list-style:disc; padding-left:1.25rem; margin:.4rem 0; } .rt-content ol { list-style:decimal; padding-left:1.25rem; margin:.4rem 0; } .rt-content li { margin:.2rem 0; } .rt-content a { color:#4f46e5; text-decoration:underline; } .dark .rt-content a { color:#818cf8; } .rt-content h2 { font-weight:700; font-size:1rem; margin:.6rem 0 .3rem; }