/* Maharashtra Rank — shared design system Light theme is default; [data-theme="dark"] on overrides. */ *,*::before,*::after{box-sizing:border-box} :root{ /* ---- light theme (default) ---- */ --bg:#f6f7fb;--bg2:#ffffff;--surface:#ffffff;--glass:rgba(255,255,255,.7);--glass-strong:rgba(255,255,255,.9); --ink:#101828;--ink-soft:#3f4a5f;--muted:#6b7386;--faint:#98a0b3; --line:#e4e8f0;--line-soft:#edf0f6; --saffron:#e07a1f;--navy:#0f3d73;--green:#158a56; --accent:linear-gradient(120deg,#0f3d73,#1f6fd6); --accent-2:linear-gradient(120deg,#e07a1f,#f2a93c); --violet:#5b57e0;--cyan:#0e8fb8;--pink:#d1467e;--amber:#c17a09;--red:#c73a4a; --green-soft:#e5f6ee;--red-soft:#fdeaec;--amber-soft:#fbf1dc; --r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:30px; --shadow-sm:0 4px 16px rgba(16,24,40,.06); --shadow-md:0 14px 38px rgba(16,24,40,.08); --shadow-lg:0 26px 60px rgba(16,24,40,.12); --container:1120px; --ease:cubic-bezier(.16,1,.3,1); color-scheme:light; } html[data-theme="dark"]{ /* V25 dark theme — layered slate/navy instead of near-black, so cards separate from the page and colour accents keep some warmth instead of looking flat. */ --bg:#0a0d18;--bg2:#111527;--surface:#12162a;--glass:rgba(148,163,214,.08);--glass-strong:rgba(148,163,214,.14); --ink:#f4f6fd;--ink-soft:#c7cee4;--muted:#93a0c2;--faint:#616e94; --line:rgba(148,163,214,.16);--line-soft:rgba(148,163,214,.08); --saffron:#f2a93c;--navy:#8ab4ff;--green:#5be3a5; --accent:linear-gradient(120deg,#7c6bff,#22d3ee); --accent-2:linear-gradient(120deg,#ff5fa8,#7c6bff); --violet:#7c6bff;--cyan:#22d3ee;--pink:#ff5fa8;--amber:#ffb648;--red:#ff5c72; --green-soft:rgba(91,227,165,.14);--red-soft:rgba(255,92,114,.14);--amber-soft:rgba(255,182,72,.14); --shadow-sm:0 6px 20px rgba(0,0,0,.35); --shadow-md:0 18px 46px rgba(0,0,0,.45); --shadow-lg:0 30px 80px rgba(0,0,0,.6); color-scheme:dark; } html[data-theme="dark"] body{background:radial-gradient(120% 60% at 15% -10%,rgba(124,107,255,.10),transparent 60%),radial-gradient(90% 50% at 100% 0%,rgba(34,211,238,.08),transparent 55%),var(--bg)} html[data-theme="dark"] .card,html[data-theme="dark"] .exam-card,html[data-theme="dark"] .trust-card,html[data-theme="dark"] .insight-card, html[data-theme="dark"] .pulse,html[data-theme="dark"] .ring-card,html[data-theme="dark"] .gender-card,html[data-theme="dark"] .cat-card, html[data-theme="dark"] .horizontal-card,html[data-theme="dark"] .mark-dashboard,html[data-theme="dark"] .mark-card, html[data-theme="dark"] .site-footer,html[data-theme="dark"] .v19-modal-box,html[data-theme="dark"] .confirm-box{ background:linear-gradient(180deg,rgba(148,163,214,.05),rgba(148,163,214,0)),var(--surface); } html[data-theme="dark"] .exam-subnav a.active,html[data-theme="dark"] .exam-tabs .tab.active{box-shadow:0 10px 26px rgba(124,107,255,.32)} html{scroll-behavior:smooth} body{ margin:0;font:400 14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif; color:var(--ink);background:var(--bg);transition:background .35s ease,color .35s ease; -webkit-font-smoothing:antialiased;overflow-x:hidden; } h1,h2,h3{margin:0;letter-spacing:-.02em;font-weight:800;color:var(--ink)} p{margin:0} a{color:inherit} button,input,select{font:inherit;color:inherit} button{cursor:pointer} img{max-width:100%;display:block} ::selection{background:rgba(31,111,214,.2)} html[data-theme="dark"] ::selection{background:rgba(124,107,255,.35)} .eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--navy);text-transform:uppercase} html[data-theme="dark"] .eyebrow{color:var(--cyan)} .muted{color:var(--muted)!important;font-size:11px} .container{max-width:var(--container);margin:auto;padding:0 20px} @media(max-width:600px){.container{padding:0 14px}} /* ---------- reveal-on-scroll ---------- */ .reveal-ready [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal-ready [data-reveal].in-view{opacity:1;transform:translateY(0)} .reveal-ready [data-reveal="scale"]{transform:translateY(0) scale(.96)} .reveal-ready [data-reveal="scale"].in-view{transform:scale(1)} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} [data-reveal]{opacity:1!important;transform:none!important} } /* ---------- buttons ---------- */ .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--r-sm);padding:13px 20px;font-size:12.5px;font-weight:800;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease);white-space:nowrap} .btn-primary,.primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(15,61,115,.28)} html[data-theme="dark"] .btn-primary,html[data-theme="dark"] .primary{box-shadow:0 10px 26px rgba(124,107,255,.35)} .btn-primary:hover,.primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(15,61,115,.34)} html[data-theme="dark"] .btn-primary:hover,html[data-theme="dark"] .primary:hover{box-shadow:0 16px 34px rgba(124,107,255,.45)} .btn-primary:active,.primary:active{transform:translateY(0) scale(.98)} .btn-ghost{background:var(--glass);color:var(--ink);border:1px solid var(--line);backdrop-filter:blur(10px)} .btn-ghost:hover{background:var(--glass-strong);transform:translateY(-2px)} .primary{width:100%;height:52px;font-size:13px} .secondary-btn{background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-weight:800;color:var(--ink-soft);transition:background .2s} .secondary-btn:hover{background:var(--glass-strong)} /* ---------- generic card ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin-bottom:16px;box-shadow:var(--shadow-sm);transition:border-color .3s ease,transform .3s ease} .card h2{font-size:18px;margin-bottom:6px} .card p{color:var(--ink-soft);line-height:1.6} label{display:block;font-weight:800;font-size:12px;margin-bottom:8px;color:var(--ink-soft)} .section-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap} .err{margin-top:12px;padding:12px 14px;background:var(--red-soft);color:var(--red);border-radius:var(--r-sm);font-size:12px;font-weight:600} /* ============ HEADER (shared across all pages) ============ */ .site-header{position:sticky;top:0;z-index:40;background:var(--glass-strong);backdrop-filter:blur(18px);border-bottom:1px solid var(--line-soft);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease} .site-header.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)} .header-inner{max-width:var(--container);margin:auto;height:66px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:10px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)} .brand-mark{width:38px;height:38px;flex:0 0 38px;filter:drop-shadow(0 4px 10px rgba(15,61,115,.3))} html[data-theme="dark"] .brand-mark{filter:drop-shadow(0 4px 14px rgba(124,107,255,.4))} .brand-text{line-height:1.15} .brand-text strong{display:block;font-size:14px;letter-spacing:.01em} .brand-text strong .mr{font-family:"Noto Sans Devanagari","Shivaji01",system-ui,sans-serif} .brand-text small{display:block;font-size:8.5px;letter-spacing:.14em;color:var(--muted);margin-top:1px;text-transform:uppercase} .site-nav{display:flex;align-items:center;gap:4px;flex:0 1 auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .site-nav::-webkit-scrollbar{display:none} .nav-link{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--ink-soft);text-decoration:none;padding:9px 12px;border-radius:9px;white-space:nowrap;transition:color .2s,background .2s} .nav-link:hover,.nav-link.is-active{background:var(--glass);color:var(--navy)} html[data-theme="dark"] .nav-link:hover,html[data-theme="dark"] .nav-link.is-active{color:#fff} .nav-join{color:#fff!important;background:var(--accent-2)} .nav-join:hover{color:#fff!important;transform:translateY(-1px)} .header-tools{display:flex;align-items:center;gap:6px} .tool-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--glass);display:grid;place-items:center;font-size:14px;transition:background .2s,transform .2s} .tool-btn:hover{background:var(--glass-strong);transform:translateY(-1px)} .lang-btn{width:auto;padding:0 10px;font-size:12.5px;font-weight:800;letter-spacing:.03em;display:inline-flex;align-items:center;gap:5px} .lang-btn svg{width:15px;height:15px;flex:0 0 15px} .lang-btn span{font-family:"Noto Sans Devanagari",system-ui,sans-serif;font-size:14px;line-height:1} /* ---------- announcement ticker ---------- */ .announce-bar{max-width:var(--container);margin:12px auto 0;height:36px;display:flex;align-items:center;border-radius:11px;overflow:hidden;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow-sm);backdrop-filter:blur(10px)} .announce-tag{height:100%;display:flex;align-items:center;padding:0 12px;color:#fff;font-size:9px;font-weight:800;letter-spacing:.1em;background:var(--accent)} .announce-track{overflow:hidden;white-space:nowrap;flex:1} .announce-track span{display:inline-block;padding-left:100%;font-size:11px;font-weight:700;color:var(--ink-soft);animation:marquee 26s linear infinite} @keyframes marquee{to{transform:translateX(-100%)}} main.page{max-width:var(--container);margin:auto;padding:18px 20px 40px} @media(max-width:600px){ main.page{padding:14px 12px 32px} .card{padding:16px} .header-inner{padding:0 10px;gap:4px;height:60px} .brand-text strong{font-size:11.5px} .brand-text small{font-size:7px;letter-spacing:.08em} .brand-mark{width:30px;height:30px;flex:0 0 30px} .nav-link{padding:6px 8px;font-size:9.5px} .header-tools{gap:4px} .tool-btn{width:30px;height:30px;font-size:12px} .lang-btn{padding:0 7px;font-size:9.5px} } /* ============ FOOTER (shared) ============ */ .site-footer{margin-top:40px;border-top:1px solid var(--line);background:var(--surface)} .footer-grid{max-width:var(--container);margin:auto;padding:36px 20px 20px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px} .footer-brand{display:flex;flex-direction:column;gap:10px} .footer-brand .brand{margin-bottom:2px} .footer-brand p{color:var(--muted);font-size:11.5px;line-height:1.6;max-width:280px} .footer-col h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px} .footer-col a{display:block;color:var(--ink-soft);text-decoration:none;font-size:12.5px;padding:5px 0;transition:color .2s} .footer-col a:hover{color:var(--navy)} html[data-theme="dark"] .footer-col a:hover{color:#fff} .footer-bottom{border-top:1px solid var(--line);padding:16px 20px;max-width:var(--container);margin:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:10.5px} .footer-badges{display:flex;gap:8px;flex-wrap:wrap} .footer-badges span{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:9.5px;font-weight:700;color:var(--ink-soft)} @media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.footer-grid{grid-template-columns:1fr}} /* ---------- animated beam border (moving rectangular line around a card edge) ---------- */ .beam-border{position:relative} .beam-border::after{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2; background:conic-gradient(from 0deg,transparent 0 78%,var(--saffron) 86%,var(--navy) 94%,transparent 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:beamSpin 5s linear infinite; } html[data-theme="dark"] .beam-border::after{background:conic-gradient(from 0deg,transparent 0 78%,var(--cyan) 86%,var(--violet) 94%,transparent 100%)} @keyframes beamSpin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.beam-border::after{animation:none}} /* ---------- "coming soon" placeholder used by unfinished exam tools ---------- */ .coming-soon{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:52px 20px;color:var(--muted)} .coming-soon .cs-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:22px;box-shadow:var(--shadow-md);animation:csFloat 3.2s ease-in-out infinite} @keyframes csFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .coming-soon h3{font-size:16px;color:var(--ink)} .coming-soon p{max-width:360px;font-size:12px;line-height:1.6;color:var(--muted)} .coming-soon .cs-badge{font-size:9px;font-weight:800;letter-spacing:.12em;padding:5px 11px;border-radius:999px;background:var(--amber-soft);color:var(--amber)} /* ---------- thin animated accent line under sticky header, for a "live" feel ---------- */ .site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--navy),var(--saffron),transparent);background-size:200% 100%;animation:headerSweep 6s linear infinite;opacity:.55} html[data-theme="dark"] .site-header::after{background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent);background-size:200% 100%} @keyframes headerSweep{to{background-position:-200% 0}} @media(prefers-reduced-motion:reduce){.site-header::after{animation:none}} /* ============ legal / static content pages ============ */ .legal-hero{padding:34px 0 10px} .legal-hero .eyebrow{display:block;margin-bottom:8px} .legal-hero h1{font-size:clamp(26px,4vw,36px)} .legal-hero p{color:var(--muted);margin-top:8px;font-size:12.5px} .legal-body{max-width:760px} .legal-body h2{font-size:16px;margin:26px 0 8px} .legal-body h2:first-child{margin-top:0} .legal-body p{color:var(--ink-soft);line-height:1.75;font-size:13px;margin-bottom:10px} .legal-body ul{margin:0 0 12px;padding-left:20px;color:var(--ink-soft);font-size:13px;line-height:1.75} .legal-body li{margin-bottom:4px} .legal-note{margin-top:20px;padding:14px 16px;border-radius:var(--r-md);background:var(--amber-soft);border:1px solid var(--amber);font-size:12px;color:var(--ink-soft);line-height:1.6} .legal-updated{color:var(--faint);font-size:10.5px;margin-top:24px} .contact-cards{display:grid;grid-template-columns:1fr;max-width:420px;gap:14px;margin-top:16px} .contact-cards .card{margin:0} .contact-cards .card b{display:block;font-size:12.5px;margin-bottom:4px} .contact-cards .card a{color:var(--navy);text-decoration:none;font-weight:700;font-size:12.5px} html[data-theme="dark"] .contact-cards .card a{color:var(--cyan)}