/* ============================================================ RASHIFAL page — daily horoscope 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; } .rf-main { max-width: 820px; margin: 0 auto; padding: 12px 20px 48px; } .rf-hero { text-align: center; margin: 8px 0 18px; } .rf-title { font-family: var(--font-display, 'Cormorant Garamond', serif); font-size: 1.9rem; font-weight: 700; color: var(--ink, #2a2140); margin: 0 0 4px; } .rf-date { color: var(--ink-soft, #6b6480); font-size: 0.92rem; margin: 0; } /* Tabs */ .rf-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; } .rf-tab { border: 1px solid rgba(155, 92, 255, 0.3); background: rgba(255, 255, 255, 0.6); color: var(--ink, #2a2140); font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; } .rf-tab.active { background: var(--grad-warm, linear-gradient(135deg, #f5417f, #9b5cff)); color: #fff; border-color: transparent; } .rf-pick-label { text-align: center; font-weight: 600; color: var(--ink, #2a2140); margin: 0 0 4px; } .rf-pick-note { text-align: center; font-size: 0.84rem; color: var(--ink-soft, #6b6480); margin: 0 0 12px; } .rf-pick-note a { color: var(--vermillion, #c1272d); } /* Picker grids */ .rf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; } .rf-grid-nak { grid-template-columns: repeat(3, 1fr); } .rf-item { display: flex; align-items: center; gap: 7px; border: 1px solid rgba(138, 109, 46, 0.22); background: rgba(255, 253, 247, 0.75); border-radius: 12px; padding: 10px 10px; cursor: pointer; text-align: left; font-family: var(--font-body); color: var(--ink, #2a2140); transition: all 0.15s ease; } .rf-item:hover { border-color: rgba(155, 92, 255, 0.5); transform: translateY(-1px); } .rf-item.active { background: var(--grad-warm, linear-gradient(135deg, #f5417f, #9b5cff)); color: #fff; border-color: transparent; } .rf-item.active .rf-item-num { color: #fff; } .rf-item-sym { font-size: 1.3rem; line-height: 1; } .rf-item-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(155, 92, 255, 0.15); color: var(--indigo, #4338ca); display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; } .rf-item-name { font-size: 0.86rem; font-weight: 600; line-height: 1.2; } /* Result card */ .rf-result { margin-top: 4px; } .rf-loading { text-align: center; color: var(--ink-soft, #6b6480); padding: 20px; } .rf-card { background: rgba(255, 253, 247, 0.85); border: 1px solid rgba(138, 109, 46, 0.22); border-radius: 16px; padding: 20px 22px; margin-bottom: 14px; } .rf-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .rf-card-sym { font-size: 2.2rem; line-height: 1; } .rf-card-title { font-family: var(--font-display, serif); font-size: 1.5rem; font-weight: 700; color: var(--ink, #2a2140); margin: 0; } .rf-card-sub { font-size: 0.88rem; color: var(--ink-soft, #6b6480); margin-top: 2px; } .rf-card-text { font-size: 1.02rem; line-height: 1.7; color: var(--ink, #2a2140); margin: 0; } /* Nakshatra → rashi hint in picker */ .rf-nak-rashi { display: block; font-size: 0.72rem; color: var(--brass-deep, #8a6d2e); font-weight: 700; margin-top: 1px; } .rf-item.active .rf-nak-rashi { color: rgba(255, 255, 255, 0.85); } /* Charan (pada) wise rashi box */ .rf-pada-box { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(200, 164, 92, 0.1); border: 1px solid rgba(138, 109, 46, 0.2); } .rf-pada-h { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft, #6b6480); margin-bottom: 8px; } .rf-pada-row { display: flex; flex-wrap: wrap; gap: 8px; } .rf-pada { font-size: 0.86rem; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(138, 109, 46, 0.16); border-radius: 8px; padding: 5px 10px; color: var(--ink, #2a2140); } .rf-pada b { color: var(--vermillion, #c1272d); font-weight: 700; margin-right: 3px; } .rf-tara-line { margin-top: 10px; font-size: 0.92rem; color: var(--ink, #2a2140); } .rf-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; } .rf-good { background: rgba(22, 163, 74, 0.14); color: #15803d; } .rf-mixed { background: rgba(234, 179, 8, 0.16); color: #a16207; } .rf-tough { background: rgba(220, 38, 38, 0.12); color: #b91c1c; } @media (max-width: 680px) { .rf-grid { grid-template-columns: repeat(2, 1fr); } .rf-grid-nak { grid-template-columns: repeat(2, 1fr); } .rf-title { font-size: 1.5rem; } } @media (prefers-color-scheme: dark) { .rf-card, .rf-item { background: rgba(30, 22, 50, 0.55); } .rf-tab { background: rgba(255, 255, 255, 0.06); } }