/* ============================================================ RASHI TATVA MELAPAK — page styles + language switching. app.js sets ; show only that language. ============================================================ */ .lg { display: none; } body:not([data-lang]) .lg-en, body[data-lang="en"] .lg-en { display: revert; } body[data-lang="hi"] .lg-hi { display: revert; } body[data-lang="gu"] .lg-gu { display: revert; } .rt-main { max-width: 900px; margin: 0 auto; padding: 12px 20px 48px; } /* Card title + note (reuses .page-container / .milan-* form styles) */ .rt-panel .modal-title { text-align: center; } .rt-formnote { text-align: center; font-size: 0.9rem; color: var(--ink-soft, #6b6480); margin: 4px 0 0; } .rt-place { position: relative; } /* Rashi number chip inside the result table */ .rt-no { display: inline-block; min-width: 22px; text-align: center; background: rgba(155, 92, 255, 0.18); color: var(--indigo, #4338ca); border-radius: 6px; padding: 1px 5px; font-size: 0.82rem; font-weight: 800; margin-right: 6px; } /* Names card (boy | girl) */ .rt-names-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-bottom: 16px; } .rt-pcard { text-align: center; padding: 12px 10px; border-radius: 14px; } .rt-pcard-b { background: rgba(59, 130, 246, 0.10); border: 1px solid rgba(59, 130, 246, 0.3); } .rt-pcard-g { background: rgba(236, 72, 153, 0.10); border: 1px solid rgba(236, 72, 153, 0.3); } .rt-pcard-role { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } .rt-pcard-b .rt-pcard-role { color: #1d4ed8; } .rt-pcard-g .rt-pcard-role { color: #be185d; } .rt-pcard-name { font-family: var(--font-display, serif); font-size: 1.3rem; font-weight: 800; color: var(--ink, #2a2140); margin: 2px 0 6px; word-break: break-word; } .rt-pcard-meta { display: flex; flex-direction: column; gap: 1px; font-size: 0.8rem; color: var(--ink-soft, #6b6480); } .rt-heart { font-size: 1.6rem; } /* Result */ .rt-result { margin-top: 6px; } .rt-loading { text-align: center; color: var(--ink-soft, #6b6480); padding: 22px; } .rt-card { background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,250,240,0.7)); border: 1px solid rgba(155, 92, 255, 0.18); border-radius: 16px; padding: 22px; box-shadow: 0 8px 32px rgba(155, 92, 255, 0.08); margin-bottom: 16px; } .rt-tbl-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(138, 109, 46, 0.25); } .rt-tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; } /* Colour-coded headers */ .rt-tbl th { padding: 11px 10px; text-align: left; font-size: 0.86rem; font-weight: 800; white-space: nowrap; } .rt-th-pt { background: #f5c518; color: #4a3800; } .rt-th-b { background: #3b82f6; color: #fff; } .rt-th-g { background: #ec4899; color: #fff; } .rt-th-gh { background: #10b981; color: #fff; } .rt-th-th { background: #8b5cf6; color: #fff; } /* Body — every cell bold, each column tinted so it reads at a glance */ .rt-tbl td { padding: 10px; border-bottom: 1px solid rgba(138, 109, 46, 0.16); color: var(--ink, #2a2140); font-weight: 700; } .rt-pt { background: rgba(245, 197, 24, 0.20); color: #7a5c00; font-weight: 800; } .rt-cb { background: rgba(59, 130, 246, 0.10); } .rt-cg { background: rgba(236, 72, 153, 0.10); } .rt-cgh { background: rgba(16, 185, 129, 0.12); color: #065f46; } .rt-cth { background: rgba(139, 92, 246, 0.12); color: #5b21b6; } /* subtle 3-row banding so groups are easy to follow */ .rt-r-1 td { filter: brightness(0.985); } .rt-r-2 td { filter: brightness(0.97); } .rt-tbl tbody tr:hover td { background-image: linear-gradient(rgba(255, 235, 59, 0.22), rgba(255, 235, 59, 0.22)); } .rt-num, th.rt-num { text-align: right; font-family: 'Courier New', monospace; } .rt-total td { font-weight: 800; background: rgba(200, 164, 92, 0.25); border-top: 2px solid rgba(138, 109, 46, 0.4); font-size: 1rem; } .rt-melapak td { font-weight: 800; background: rgba(155, 92, 255, 0.20); font-size: 1.06rem; color: var(--ink, #2a2140); } /* Bars */ .rt-bars { margin-top: 16px; display: grid; gap: 10px; } .rt-bar-row { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 10px; } .rt-bar-l { font-size: 0.88rem; font-weight: 700; color: var(--ink-soft, #4a4458); } .rt-bar { height: 12px; background: rgba(0, 0, 0, 0.07); border-radius: 999px; overflow: hidden; } .rt-bar-f { display: block; height: 100%; border-radius: 999px; transition: width 0.5s ease; } .rt-bar-f.rt-good { background: linear-gradient(90deg, #16a34a, #22c55e); } .rt-bar-f.rt-mid { background: linear-gradient(90deg, #ca8a04, #eab308); } .rt-bar-f.rt-low { background: linear-gradient(90deg, #b91c1c, #ef4444); } .rt-bar-v { text-align: right; font-family: 'Courier New', monospace; font-weight: 700; font-size: 0.88rem; } @media (max-width: 680px) { .rt-two { grid-template-columns: 1fr; } .rt-title { font-size: 1.5rem; } .rt-bar-row { grid-template-columns: 84px 1fr 62px; } .rt-names-card { grid-template-columns: 1fr; gap: 8px; } .rt-heart { text-align: center; } .rt-tbl { font-size: 0.86rem; } .rt-tbl td, .rt-tbl th { padding: 8px 7px; } } @media (prefers-color-scheme: dark) { .rt-person, .rt-card, .rt-tbl { background: rgba(30, 22, 50, 0.55); } .rt-ac { background: #241b3a; } }