html {
font-size: 14px;
position: relative;
min-height: 100%;
overflow-y: scroll;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
/* ══════════════════════════════════════════════════════════════════════════
LEGACY PAGE STYLES — pre-Tallapatra.
The token block that used to live here has been replaced by:
wwwroot/css/tallapatra/tokens.css (semantic source of truth)
wwwroot/css/tallapatra/compat.css (temporary legacy-name shim)
and the @font-face / body / reset rules now live in tallapatra/base.css.
Everything below is un-migrated page CSS. As each route is migrated to the
canonical components, its rules here are deleted. This file shrinks to
nothing by the end of Phase 5.
══════════════════════════════════════════════════════════════════════════ */
/* Global focus + reduced-motion rules previously here are now owned by
tallapatra/base.css (two-tone focus ring — see tokens.css §6). */
/* Desktop reading measure for running Telugu prose (§4) */
/* ──────────────────────────────────────────────────────────────────────────
On-surface text palette
The page background is dark (cosmic gradient); content normally lives in
light cards. Under Tallapatra the PAGE background is also light (leaf), so
these no longer need "light on dark" treatment — they use the standard ink
text tokens, which are contrast-verified on leaf, card and sunken alike.
────────────────────────────────────────────────────────────────────────── */
/* Was ink at 82% alpha, which blended toward the leaf background and lost
contrast. Secondary ink is a real token and verified on every surface. */
.surface-text {
color: var(--tp-text-secondary);
}
/* Warm accent for headings on the light cards (replaces off-palette Bootstrap
blue .text-primary). Already referenced by the Terms page; defined here so it
resolves consistently everywhere. */
.text-primary-warm {
color: var(--text-brand);
}
/* ──────────────────────────────────────────────────────────────────────────
Spashta type scale (§4) — used by the flagship Kundli/KundliResult pages.
Existing .fs-* utilities below stay as-is for pages not yet migrated.
────────────────────────────────────────────────────────────────────────── */
.txt-h3 { font-size: 1rem; font-weight: 700; line-height: 1.5; }
.txt-body { font-size: 0.875rem; font-weight: 400; line-height: 1.7; }
.txt-body-strong { font-size: 0.875rem; font-weight: 600; line-height: 1.7; }
.txt-caption { font-size: 0.6875rem; font-weight: 400; line-height: 1.5; }
.txt-data { font-size: 0.8125rem; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; }
/* ──────────────────────────────────────────────────────────────────────────
Typography utilities — replace one-off inline font-size/line-height
────────────────────────────────────────────────────────────────────────── */
.fs-2xs { font-size: var(--fs-xs); }
.fs-xs { font-size: 0.72rem; }
.fs-sm { font-size: var(--fs-sm); }
.fs-80 { font-size: 0.8rem; }
.fs-85 { font-size: 0.85rem; }
.fs-88 { font-size: 0.88rem; }
.fs-90 { font-size: var(--fs-base); }
.fs-92 { font-size: 0.92rem; }
.fs-95 { font-size: 0.95rem; }
.fs-md { font-size: var(--fs-md); }
.fs-110 { font-size: 1.1rem; }
.fs-135 { font-size: var(--fs-lg); }
.fs-150 { font-size: 1.5rem; }
.fs-xl { font-size: var(--fs-xl); }
.fs-icon { font-size: var(--fs-icon); }
.fs-icon-lg { font-size: 3rem; }
.lh-tight { line-height: var(--lh-tight); }
.lh-snug { line-height: var(--lh-snug); }
.lh-normal { line-height: var(--lh-normal); }
.lh-relaxed { line-height: var(--lh-relaxed); }
.lh-loose { line-height: var(--lh-loose); }
.lh-1-75 { line-height: 1.75; }
.lh-1-8 { line-height: 1.8; }
.text-nowrap-block { white-space: nowrap; }
/* Fixed/percentage table column width helpers (icon-only or narrow columns) */
.col-width-40 { width: 40px; }
.col-width-15pct { width: 15%; }
/* Table header min-width helpers (Panchang timing/element tables) */
.min-w-120 { min-width: 120px; }
.min-w-140 { min-width: 140px; }
.min-w-150 { min-width: 150px; }
.min-w-160 { min-width: 160px; }
.min-w-200 { min-width: 200px; }
.min-w-240 { min-width: 240px; }
/* Relative (em) font-size for text nested inside a heading, scaled to the heading's own size */
.fs-em-90 { font-size: 0.9em; }
.divider-soft { border-color: rgba(var(--shadow-color-rgb), 0.08) !important; }
.label-uppercase-sm { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.text-heading-brand { color: var(--text-brand-deep); }
.mt-2px { margin-top: 2px; }
/* Homepage hero CTA + portrait image */
.btn-prasna-cta {
border-radius: 2rem;
font-weight: bold;
box-shadow: 0 4px 15px rgba(var(--accent-gold-rgb), 0.4);
}
.hero-portrait-img {
max-height: 180px;
object-fit: cover;
border: 4px solid rgba(var(--surface-white-rgb), 0.5);
}
.text-trn-heading { color: var(--trn-name); }
/* Narrow prose measure for SEO landing-page intro paragraphs */
.max-w-760 { max-width: 760px; }
.max-w-720 { max-width: 720px; }
.max-w-400 { max-width: 400px; }
/* Bootstrap-aligned card border accents (Muhurtam / Parihara recommendation cards) */
/* "Recommended"/highlighted card border — indigo, not green (principle #5:
a recommended muhurtam day or remedy is informational, not a "success" state). */
.card-border-success { border: 1px solid var(--indigo); border-radius: var(--radius-md); }
.card-border-neutral { border: 1px solid var(--line); border-radius: var(--radius-md); }
/* Privacy policy callout panel */
/* ──────────────────────────────────────────────────────────────────────────
Shared south-chart center title/meta — identical inline styles previously
repeated across Kundli/Matchmaking/Transits server markup AND their JS
chart-rendering template strings. Single definition here.
────────────────────────────────────────────────────────────────────────── */
.chart-center-title {
font-size: 0.85rem;
font-weight: bold;
color: var(--chart-symbol-color);
text-shadow: 0 1px 0 rgba(var(--surface-white-rgb), 0.6);
}
.chart-meta-row {
font-size: 0.75rem;
color: var(--text-primary);
line-height: var(--lh-tight);
width: 100%;
text-align: center;
}
.chart-meta-row--divider {
border-top: 1px dashed var(--chart-border);
padding-top: 3px;
margin-top: 1px;
}
.chart-meta-label {
color: var(--text-brand-deep);
font-weight: bold;
}
/* Paksha classification badge (Vishnu/Krishna lagna) */
.badge-paksha {
font-size: 0.72rem;
font-weight: bold;
margin-bottom: 2px;
}
.badge-paksha-vishnu {
background-color: var(--badge-vishnu-bg);
color: var(--badge-vishnu-text);
border: 1px solid var(--badge-vishnu-border);
}
.badge-paksha-shiva {
background-color: var(--badge-shiva-bg);
color: var(--badge-shiva-text);
border: 1px solid var(--badge-shiva-border);
}
/* Kuja Dosha status badge (three finite states, was an inline color ternary) */
.dosha-badge {
font-size: 0.85rem;
box-shadow: var(--shadow-sm);
}
.dosha-badge--warning {
background: linear-gradient(135deg, var(--dosha-warning-grad-1), var(--dosha-warning-grad-2));
color: var(--dosha-badge-dark-text);
}
.dosha-badge--danger {
background: linear-gradient(135deg, var(--dosha-danger-grad-1), var(--dosha-danger-grad-2));
color: var(--surface-white);
}
.dosha-badge--success {
background: linear-gradient(135deg, var(--dosha-success-grad-1), var(--dosha-success-grad-2));
color: var(--surface-white);
}
/* Benefic/Malefic nature badge for planet rows — plain pill, no red/green (§6.5.1) */
.nature-badge {
display: inline-block;
padding: 2px 8px;
border-radius: var(--tp-radius-sm);
background: var(--tp-surface-card);
border: var(--tp-border-subtle);
color: var(--tp-text-primary);
font-size: var(--tp-type-caption-size);
font-weight: var(--tp-weight-semibold);
white-space: nowrap;
line-height: var(--tp-type-caption-lh);
}
/* Dasha period status badge (Running/Completed/Upcoming) — plain pill, no
gradient, no red/green/blue traffic-light coloring (§5.1/§6.5.1). Running
is the one "current in time" state, so it gets the indigo-soft wash used
elsewhere for that meaning (§6.6.1); Completed/Upcoming are neutral. */
.dasha-status-badge {
font-size: 0.72rem;
}
.dasha-status--running {
background: var(--tp-surface-sunken);
color: var(--tp-text-primary);
border-color: var(--tp-border-color-subtle);
}
.dasha-status--completed,
.dasha-status--upcoming {
background: var(--tp-surface-card);
color: var(--tp-text-secondary);
border-color: var(--tp-border-color-subtle);
}
/* Dasha drill-down table header (Kundli/Matchmaking results) */
.dasha-table-header {
background: var(--dasha-table-header-bg);
border-bottom: 1px solid rgba(var(--dasha-table-header-border-rgb), 0.18);
}
.dasha-level-title {
color: var(--dasha-level-title);
}
/* Yoga category badge — plain pill, no gradient (§5.1 hard rule). */
.badge-yoga-category {
background: var(--tp-surface-sunken);
color: var(--tp-text-primary);
border-color: var(--tp-border-color-subtle);
}
/* ── Prediction list — result points + remedy blocks ────────────────────
Used inside accordion bodies on KundliResult and MatchmakingResult.
────────────────────────────────────────────────────────────────────── */
/* Icon bullet: fixed 20px column so the 16px SVG always sits centred and
aligned to the first text baseline regardless of the surrounding font-size. */
.chip-favorite-icon {
display: inline-flex;
align-items: flex-start;
justify-content: center;
width: 20px;
flex-shrink: 0;
padding-top: 2px; /* nudge icon to cap-height baseline of 14px text */
color: var(--accent-gold);
}
/* Prediction item row */
.prediction-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.25rem 0;
}
/* Remedy block — visually separated from the prediction point above it */
.remedy-block {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.35rem;
margin-bottom: 0.5rem;
padding: 0.5rem 0.75rem;
background: rgba(var(--accent-gold-rgb), 0.07);
border-left: 3px solid var(--accent-gold);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.remedy-block__icon {
display: inline-flex;
align-items: flex-start;
justify-content: center;
width: 20px;
flex-shrink: 0;
padding-top: 2px;
color: var(--accent-gold);
}
.remedy-block__content {
flex: 1;
min-width: 0;
}
.remedy-block__label {
display: block;
font-size: 0.85rem;
font-weight: 700;
color: var(--text-brand);
margin-bottom: 0.2rem;
}
.remedy-block__text {
font-size: 0.85rem;
line-height: 1.55;
color: var(--text-secondary);
margin: 0;
}
/* Large emoji icon used in empty/loading states */
.alert-icon-cosmic {
font-size: 2.2rem;
filter: drop-shadow(0 2px 4px rgba(var(--shadow-color-rgb), 0.1));
}
.site-shell {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
min-width: 0;
}
.site-shell > main {
flex: 1 0 auto;
}
.site-header {
padding-block-start: var(--tp-safe-top);
background: var(--card);
}
.cosmic-nav {
background: var(--card);
border-bottom: 1px solid var(--line);
}
.brand-mark {
font-family: var(--tp-font-display);
font-weight: 700;
letter-spacing: 0.06em;
min-height: var(--tp-target-min);
/* pasupu is an accent/thread/focus colour, never a text colour on a light
surface (2.58:1). The wordmark uses primary ink. */
color: var(--tp-text-primary) !important;
}
.navbar-logo {
height: 45px;
width: auto;
object-fit: contain;
filter: brightness(1.05);
}
.navbar-brand-icon {
height: 28px;
width: 28px;
object-fit: contain;
border-radius: 50%;
flex-shrink: 0;
}
@media (max-width: 576px) {
.navbar-logo {
height: 35px;
}
.navbar-brand-icon {
height: 22px;
width: 22px;
}
.brand-mark span {
font-size: 0.95rem;
}
}
.navbar .nav-link {
color: var(--text-on-dark) !important;
/* 44x44 minimum interactive target (§16) — was 37px high. */
display: flex;
align-items: center;
min-height: var(--tp-target-min);
/* Telugu nav labels are long; without this they break mid-phrase and the
links grow to 3 lines / 60px, leaving the bar ragged. Whole items wrap
to the next row instead. */
white-space: nowrap;
}
.navbar .navbar-nav {
flex-wrap: wrap;
row-gap: var(--tp-space-1);
}
.navbar .nav-link:hover {
color: var(--nav-link-hover-text) !important;
}
.navbar .dropdown-toggle::after {
opacity: 0.75;
vertical-align: 0.18em;
}
.cosmic-dropdown {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 0.4rem;
min-width: 14rem;
}
.cosmic-dropdown .dropdown-item {
color: var(--text-on-dark);
opacity: 0.92;
border-radius: 0.4rem;
padding: 0.5rem 0.85rem;
transition: background-color 0.2s ease, color 0.2s ease;
}
.cosmic-dropdown .dropdown-item:hover,
.cosmic-dropdown .dropdown-item:focus {
background: rgba(var(--accent-soft-rgb), 0.16);
color: var(--nav-link-hover-text);
opacity: 1;
}
.cosmic-dropdown .dropdown-item:active {
background: rgba(var(--accent-soft-rgb), 0.28);
color: var(--accent-gold-text);
}
@media (max-width: 575.98px) {
.cosmic-dropdown {
background: transparent;
border: none;
box-shadow: none;
padding-left: 0.75rem;
}
}
.hero-card {
border-radius: var(--tp-radius-lg);
padding: var(--tp-space-4);
background: var(--tp-surface-card);
border: var(--tp-border-subtle);
min-width: 0;
}
@media (min-width: 768px) {
.hero-card {
padding: var(--tp-space-5);
}
}
.hero-logo {
max-width: 160px;
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.hero-welcome-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
}
.hero-feature-badge {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.5rem;
background: rgba(var(--surface-white-rgb), 0.6);
border-radius: 0.5rem;
border-left: 3px solid var(--accent-gold);
transition: all 0.3s ease;
}
.hero-feature-badge:hover {
background: rgba(var(--surface-white-rgb), 0.85);
transform: translateX(4px);
}
.hero-feature-badge .badge-icon {
font-size: 1.15rem;
line-height: 1;
flex-shrink: 0;
}
.hero-feature-badge .fw-bold {
font-size: 0.8rem;
}
.hero-feature-badge small {
font-size: 0.65rem;
}
@media (min-width: 992px) {
.hero-logo {
max-width: 160px;
}
}
@media (max-width: 991px) {
.hero-logo {
max-width: 130px;
margin-bottom: 0.5rem;
}
}
@media (max-width: 767px) {
.hero-logo {
max-width: 110px;
}
.hero-welcome-title {
font-size: 1.1rem;
}
.hero-feature-badge {
padding: 0.25rem 0.4rem;
gap: 0.3rem;
}
.hero-feature-badge .badge-icon {
font-size: 1rem;
}
.hero-feature-badge .fw-bold {
font-size: 0.75rem;
}
.hero-feature-badge small {
font-size: 0.6rem;
}
}
.feature-card {
border-radius: var(--tp-radius-lg);
padding: var(--tp-space-4);
background: var(--tp-surface-card);
border: var(--tp-border-subtle);
min-width: 0;
}
@media (min-width: 768px) {
.feature-card {
padding: var(--tp-space-5);
}
}
/* Primary button (§6.1) — indigo fill, the ONLY button style this side of
sindoor's explanation-affordance reservation (§6.1/.btn-explain below). */
.btn-warm {
color: #fff;
background-color: var(--indigo);
border: 1px solid var(--indigo);
border-radius: var(--radius-md);
padding: 0.7rem 1.1rem;
font-weight: 600;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-warm:hover {
color: #fff;
background-color: var(--indigo-deep);
border-color: var(--indigo-deep);
}
.btn-warm:active {
background-color: var(--indigo-deep);
border-color: var(--indigo-deep);
}
/* Secondary button (§6.1) — card fill, line border */
.btn-outline-warm {
color: var(--indigo);
background-color: var(--card);
border: 1.5px solid var(--indigo);
border-radius: var(--radius-md);
font-weight: 600;
transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-outline-warm:hover,
.btn-outline-warm:focus {
background-color: var(--indigo);
color: #fff;
border-color: var(--indigo);
}
/* Explanation affordance ("ఎందుకు?") — the ONLY control style allowed in
sindoor, per the Sindoor Rule (§2 principle #1, §6.1). */
/* .btn-explain moved to the canonical .tp-disclosure__trigger component in
tallapatra/components.css. The removed rule also carried a hardcoded
translucent sindoor hover colour left over from Spashta. */
.nav-tabs {
border-bottom: 2px solid rgba(var(--cream-3-rgb), 0.4);
gap: 0.25rem;
}
.nav-tabs .nav-link {
color: var(--text-taupe);
font-weight: 500;
border: none;
border-bottom: 2px solid transparent;
padding: 0.75rem 1.25rem;
transition: all 0.3s ease;
border-radius: 0.5rem 0.5rem 0 0;
}
.nav-tabs .nav-link:hover {
color: var(--text-secondary);
background-color: rgba(var(--cream-3-rgb), 0.08);
border-color: transparent;
}
.nav-tabs .nav-link.active {
color: var(--text-primary);
font-weight: 700;
background-color: rgba(var(--card-bg-rgb), 0.6);
border-color: transparent transparent var(--tab-active-border) transparent;
}
.south-chart-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 5px; /* grid sits on paper, no outer frame box (§6.5) */
aspect-ratio: 1 / 1;
width: 100%;
max-width: 450px;
margin-inline: auto;
align-items: stretch;
justify-items: stretch;
background-color: transparent;
}
.south-cell {
border: 1.5px solid var(--line);
border-radius: 9px;
padding: 0.2rem;
display: flex;
flex-direction: column;
gap: 0;
font-size: 0.9rem;
background: var(--card);
min-height: 0;
min-width: 0;
overflow: hidden;
justify-content: flex-start;
}
.south-cell--lagna {
border: 2px solid var(--indigo);
}
.south-cell-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.1rem;
min-width: 0;
margin-bottom: 2px;
flex-shrink: 0;
}
.sign-name-badge {
font-size: 0.52rem;
font-weight: 700;
color: var(--text-brand-deep);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
line-height: 1.1;
}
.house-badge {
font-size: 0.48rem;
font-weight: 600;
color: var(--list-item-accent);
background: rgba(var(--accent-gold-rgb), 0.18);
border-radius: 3px;
padding: 0 0.18rem;
white-space: nowrap;
flex-shrink: 0;
line-height: 1.3;
}
/*.h12 { grid-column: 1; grid-row: 1; }
.h1 { grid-column: 2; grid-row: 1; }
.h2 { grid-column: 3; grid-row: 1; }
.h3 { grid-column: 4; grid-row: 1; }
.h11 { grid-column: 1; grid-row: 2; }
.h4 { grid-column: 4; grid-row: 2; }
.h10 { grid-column: 1; grid-row: 3; }
.h5 { grid-column: 4; grid-row: 3; }
.h9 { grid-column: 1; grid-row: 4; }
.h8 { grid-column: 2; grid-row: 4; }
.h7 { grid-column: 3; grid-row: 4; }
.h6 { grid-column: 4; grid-row: 4; }*/
.highlight-primary {
background: var(--indigo-soft) !important;
border-width: 2px !important;
border-color: var(--indigo) !important;
}
.highlight-secondary {
background: rgba(var(--accent-gold-rgb), 0.06) !important;
border-color: var(--indigo) !important;
}
.south-center {
grid-column: 2 / span 2;
grid-row: 2 / span 2;
border: 1.5px solid var(--line);
border-radius: 9px;
padding: 0.35rem 0.5rem;
background: var(--card);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3px;
text-align: center;
min-height: 0;
min-width: 0;
overflow: hidden;
}
.center-title {
font-weight: 700;
color: var(--text-brand);
margin-bottom: 0.05rem;
text-align: center;
font-size: 0.85rem;
width: 100%;
}
.center-signification {
width: 100%;
font-size: 0.72rem;
text-align: center;
margin-bottom: 2px;
}
.center-label {
color: var(--text-brand-deep);
font-weight: 600;
min-width: 0;
font-size: 0.75rem;
}
.center-value {
color: var(--text-primary);
font-weight: 500;
min-width: 0;
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.house-tag {
font-weight: 700;
color: var(--text-brand);
font-size: 0.62rem;
line-height: 1.1;
}
.house-planet-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.08rem 0.10rem;
min-height: 0;
overflow: visible;
align-content: center;
justify-content: center;
}
/* 1 planet - single column, centered both horizontally and vertically */
.south-cell[data-planet-count="1"] .house-planet-list {
grid-template-columns: 1fr;
justify-items: center;
align-items: center;
place-items: center;
min-height: 100%;
}
/* 2 planets - single column, full width */
.south-cell[data-planet-count="2"] .house-planet-list {
grid-template-columns: 1fr;
}
/* 3 planets - 2 columns with last item spanning */
.south-cell[data-planet-count="3"] .house-planet-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.south-cell[data-planet-count="3"] .house-planet-item:last-child {
grid-column: 1 / -1;
}
/* 4 planets - 2 columns, 2 rows */
.south-cell[data-planet-count="4"] .house-planet-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 5+ planets - 2 columns with auto wrapping */
.south-cell[data-planet-count="5"] .house-planet-list,
.south-cell[data-planet-count="6"] .house-planet-list,
.south-cell[data-planet-count="7"] .house-planet-list,
.south-cell[data-planet-count="8"] .house-planet-list,
.south-cell[data-planet-count="9"] .house-planet-list,
.south-cell[data-planet-count="10"] .house-planet-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.house-planet-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.08rem;
font-size: 0.60rem;
line-height: 1.0;
min-width: 0;
flex-wrap: nowrap;
}
/* 1 planet - display as flex row, centered */
.south-cell[data-planet-count="1"] .house-planet-item {
display: flex;
flex-direction: row;
gap: 0.15rem;
font-size: 0.75rem;
line-height: 1.3;
justify-content: center;
align-items: center;
}
/* 2 planets - keep flex row, good spacing */
.south-cell[data-planet-count="2"] .house-planet-item {
display: flex;
flex-direction: row;
gap: 0.12rem;
font-size: 0.70rem;
line-height: 1.25;
}
/* 3 planets - compact flex row, allow item wrapping for text length */
.south-cell[data-planet-count="3"] .house-planet-item {
display: flex;
flex-direction: row;
gap: 0.10rem;
font-size: 0.60rem;
line-height: 1.2;
flex-basis: 100%;
overflow: hidden;
}
/* 4 planets - normal spacing */
.south-cell[data-planet-count="4"] .house-planet-item {
display: flex;
flex-direction: row;
gap: 0.08rem;
font-size: 0.60rem;
line-height: 1.15;
}
/* 5+ planets - tight spacing */
.south-cell[data-planet-count="5"] .house-planet-item,
.south-cell[data-planet-count="6"] .house-planet-item,
.south-cell[data-planet-count="7"] .house-planet-item,
.south-cell[data-planet-count="8"] .house-planet-item,
.south-cell[data-planet-count="9"] .house-planet-item,
.south-cell[data-planet-count="10"] .house-planet-item {
display: flex;
flex-direction: row;
gap: 0.06rem;
font-size: 0.54rem;
line-height: 1.1;
}
.planet-code {
font-weight: 800;
border-radius: 0.2rem;
font-size: 0.72rem;
line-height: 1.25;
text-align: center;
min-width: auto;
padding-inline: 0.06rem;
flex-shrink: 0;
white-space: nowrap;
}
.planet-code-lagna {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.2rem;
height: 1.2rem;
border-radius: 999px;
border: 1px solid rgba(var(--lagna-border-rgb), 0.45);
background: rgba(var(--cream-3-rgb), 0.8);
}
/* ఉ/నీ/వ chart status marks (§6.5) — sindoor superscripts that link to the
graha table row, the chart's stand-in explanation entry point. */
.chart-status-mark {
color: var(--sindoor);
font-size: 0.55rem;
font-weight: 700;
line-height: 1;
vertical-align: super;
text-decoration: none;
padding: 1px;
}
.chart-status-mark:hover,
.chart-status-mark:focus-visible {
text-decoration: underline;
}
.graha-row-flash {
background-color: var(--indigo-soft) !important;
transition: background-color 0.3s ease;
}
/* Planet Colors */
.planet-color-su {
color: var(--planet-su);
}
/* Manikyam Red */
.planet-color-mo {
/* was `deepskyblue` (1.80:1 on card) — a CSS named colour, which the
token audit's hex-only pass had missed. */
color: var(--planet-mo);
}
/* Pure white */
.planet-color-ma {
color: var(--planet-ma);
}
/* Coral Red */
.planet-color-me {
color: var(--status-success);
}
/* Green */
.planet-color-ju {
/* was `darkgoldenrod` (2.75:1 on card) */
color: var(--planet-ju);
}
/* Golden Yellow */
.planet-color-ve {
color: var(--planet-ve);
}
/* Off white */
.planet-color-sa {
color: var(--planet-sa);
}
/* Black */
.planet-color-ra {
color: var(--planet-ra);
}
/* Ash Grey */
.planet-color-ke {
background: linear-gradient(45deg, var(--text-taupe), var(--planet-ke-2), var(--planet-ke-3));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
/* Mixed */
.planet-color-asc {
color: var(--planet-asc);
}
/* Lagna - Terracotta */
.planet-meta {
color: var(--planet-meta-text);
letter-spacing: 0.01em;
text-align: left;
white-space: nowrap;
/* Degree text is short (e.g. "28°"); never shrink/clip it. The Lagna code badge
is wider than the 2-letter planet codes, which previously squeezed the meta
and clipped "28°" to "2…". */
flex-shrink: 0;
}
/* ── Prasna / search box ── */
.search-box-wrapper {
margin-top: 0.75rem;
width: 100%;
}
.search-box-wrapper .input-group {
align-items: stretch;
gap: 0;
}
.search-input {
resize: none;
min-height: 80px;
border-radius: 0.5rem 0 0 0.5rem !important;
font-size: 0.95rem;
line-height: 1.5;
padding: 0.6rem 0.85rem;
border: 1.5px solid var(--chart-border);
background: rgba(var(--surface-white-rgb), 0.92);
color: var(--text-primary);
transition: border-color 0.2s;
overflow-y: auto;
}
.search-input:focus {
border-color: var(--accent-gold);
box-shadow: 0 0 0 0.18rem rgba(var(--accent-gold-rgb), 0.28);
outline: none;
}
.search-input::placeholder {
color: var(--search-placeholder);
opacity: 0.85;
font-style: italic;
}
.search-btn {
border-radius: 0 0.5rem 0.5rem 0 !important;
padding: 0.6rem 1.1rem;
font-weight: 600;
font-size: 0.93rem;
white-space: nowrap;
align-self: stretch;
}
@media (max-width: 576px) {
.search-input {
min-height: 70px;
font-size: 0.88rem;
}
.search-btn {
font-size: 0.85rem;
padding: 0.5rem 0.75rem;
}
}
.dasha-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
}
.dasha-links {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.footer {
width: 100%;
padding: 1rem 0;
margin-top: auto;
background-color: var(--card);
border-top: 1px solid var(--line);
}
.footer a {
color: var(--indigo);
transition: color 0.2s ease;
}
.footer a:hover {
color: var(--indigo-deep) !important;
text-decoration: underline !important;
}
.table {
--bs-table-bg: transparent;
}
/* Bootstrap's :focus glow is superseded by the global :focus-visible sindoor
ring (§5.5/§9) — no separate box-shadow needed here. */
.form-control:focus,
.form-select:focus {
border-color: var(--indigo);
box-shadow: none;
}
.compatibility-results {
margin-top: 2rem;
}
/* No looping/ambient animation (§8 hard rule) — the "VS" divider used to pulse forever. */
.compatibility-score-display {
text-align: center;
padding: var(--tp-space-4);
background: var(--tp-surface-sunken);
border: 1px solid var(--tp-border-color);
border-radius: var(--tp-radius-md);
margin-bottom: var(--tp-space-3);
}
.score-value {
font-size: 3.25rem;
font-weight: 700;
color: var(--tp-palette-pasupu);
line-height: 1;
}
.score-bar {
height: 1.2rem;
background-color: var(--tp-surface-card);
border: 1px solid var(--tp-border-color);
border-radius: var(--tp-radius-pill);
overflow: hidden;
margin: var(--tp-space-3) 0;
}
.score-fill {
height: 100%;
background: var(--tp-palette-pasupu);
transition: width var(--tp-transition-base);
}
.score-text {
font-size: var(--tp-font-size-sm);
color: var(--tp-text-secondary);
font-weight: 600;
}
.verdict-text {
font-size: var(--tp-font-size-md);
color: var(--tp-palette-pasupu);
font-weight: 600;
}
.partner-detail {
padding: var(--tp-space-3);
background: var(--tp-surface-sunken);
border-radius: var(--tp-radius-sm);
border-left: 4px solid var(--tp-palette-pasupu);
}
.partner-detail h4 {
margin-bottom: var(--tp-space-2);
font-weight: 700;
}
.table-success-light {
background-color: rgba(var(--bs-success-rgb), 0.08) !important;
}
.table-warning-light {
background-color: rgba(var(--bs-warning-rgb), 0.08) !important;
}
.dosha-item {
transition: all 0.3s ease;
}
.dosha-item:hover {
box-shadow: 0 2px 8px rgba(var(--bs-danger-rgb), 0.2);
}
.manglik-card {
background: linear-gradient(135deg, rgba(var(--accent-gold-rgb), 0.05), rgba(var(--accent-gold-rgb), 0.02));
border-radius: 0.35rem;
}
.large-badge {
font-size: 1rem;
padding: 0.5rem 1rem;
}
.place-suggestions {
display: none;
position: absolute;
left: 0;
right: 0;
top: calc(100% + 0.5rem);
z-index: 9999 !important;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
background-color: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
margin: 0;
padding: 0;
list-style: none;
min-width: 100%;
}
.place-suggestions.show {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.place-suggestions-a {
z-index: 9999 !important;
}
.place-suggestions-b {
z-index: 9999 !important;
}
.place-suggestions .tp-menu__item {
padding: 0.65rem 1rem;
border: none;
border-bottom: 1px solid var(--tp-border-color-subtle);
background-color: var(--tp-surface-card);
color: var(--tp-text-primary);
cursor: pointer;
transition: background-color 0.2s ease;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
width: 100%;
text-align: left;
font-size: var(--tp-type-body-size);
margin: 0;
border-radius: 0;
}
.place-suggestions .tp-menu__item-label {
font-weight: 500;
color: var(--tp-text-primary);
line-height: 1.35;
}
.place-suggestions .tp-menu__item-meta {
font-size: 0.8rem;
color: var(--tp-text-secondary);
opacity: 0.8;
}
.place-suggestions .tp-menu__item:last-child {
border-bottom: none;
}
.place-suggestions .tp-menu__item:hover,
.place-suggestions .tp-menu__item--active {
background-color: var(--tp-surface-sunken) !important;
color: var(--tp-text-primary) !important;
}
.place-suggestions .tp-menu__item:active {
background-color: var(--tp-surface-sunken) !important;
filter: brightness(0.95);
}
.place-input {
position: relative;
z-index: 1;
}
.place-suggest-wrap {
position: relative;
z-index: 1;
}
/* ── Dashboard ───────────────────────────────────────────── */
/* Hero */
.dash-hero {
border-radius: 1rem;
padding: 2.2rem 2rem;
background: linear-gradient(135deg, rgba(var(--cream-3-rgb), 0.97), rgba(var(--cream-3-rgb), 0.92));
box-shadow: 0 20px 40px rgba(var(--shadow-color-rgb), 0.22);
}
.dash-hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
/* .btn-outline-warm is defined once, near .btn-warm (§6.1) */
/* Today's panchang card */
.dash-today-card {
overflow: hidden;
}
.dash-today-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.dash-location-badge {
font-size: 0.8rem;
color: var(--text-brand-deep);
background: rgba(var(--accent-gold-rgb), 0.15);
border-radius: 1rem;
padding: 0.2rem 0.7rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
max-width: 100%;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Panchang grid */
.dash-panchang-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.6rem;
}
.panchang-item {
background: rgba(var(--card-bg-rgb), 0.7);
border-radius: 0.5rem;
padding: 0.55rem 0.75rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
border: 1px solid rgba(var(--accent-gold-rgb), 0.25);
}
.panchang-full {
grid-column: 1 / -1;
}
.panchang-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-brand);
}
.panchang-value {
font-size: 0.88rem;
font-weight: 600;
color: var(--text-primary);
}
.panchang-sub {
font-size: 0.70rem;
color: var(--text-secondary);
margin-top: 0.05rem;
}
/* Skeleton loaders */
.panchang-skeleton {
background: linear-gradient(90deg, rgba(var(--accent-gold-rgb), 0.12) 25%, rgba(var(--accent-gold-rgb), 0.22) 50%, rgba(var(--accent-gold-rgb), 0.12) 75%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
border-radius: 0.5rem;
height: 62px;
}
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Service cards */
.dash-service-card {
text-align: center;
}
.dash-service-icon {
font-size: 2.2rem;
margin-bottom: 0.5rem;
line-height: 1;
}
/* What you get */
.dash-feature-item {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.9rem;
color: var(--text-primary);
}
.dash-feature-icon {
font-size: 1.2rem;
flex-shrink: 0;
line-height: 1.3;
}
/* ══════════════════════════════════════════════
Telugu Calendar Page
══════════════════════════════════════════════ */
.cal-year-badge {
display: inline-flex;
align-items: center;
min-height: var(--tp-space-5);
padding-inline: var(--tp-space-3);
border-radius: var(--tp-radius-pill);
background: var(--tp-palette-pasupu);
color: var(--tp-text-primary);
font-size: var(--tp-type-caption-size);
line-height: var(--tp-type-caption-lh);
font-weight: var(--tp-weight-bold);
white-space: normal;
}
.cal-controls {
display: grid;
grid-template-columns:
var(--tp-control-height)
minmax(8.5rem, auto)
minmax(6.5rem, auto)
var(--tp-control-height)
minmax(0, auto);
align-items: center;
justify-content: end;
gap: var(--tp-space-control-gap);
min-width: 0;
}
.cal-select {
min-width: 0;
}
/* Day-of-week header row */
.cal-dow-row {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
}
.cal-dow {
text-align: center;
font-size: var(--tp-type-caption-size);
line-height: var(--tp-type-caption-lh);
font-weight: var(--tp-weight-bold);
color: var(--text-muted);
padding: var(--tp-space-2);
}
/* Calendar grid */
.cal-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 1px;
background: var(--border-color);
}
.cal-loading {
grid-column: 1 / -1;
display: flex;
justify-content: center;
padding: 2.5rem;
}
/* Individual cell */
.cal-cell {
background: var(--bg-card);
min-height: 80px;
padding: var(--tp-space-2);
cursor: pointer;
display: flex;
flex-direction: column;
gap: var(--tp-space-1);
transition: background 0.12s;
outline: none;
min-width: 0;
}
.cal-cell:hover,
.cal-cell:focus {
background: var(--cal-hover-bg);
}
.cal-cell--empty {
background: var(--bg-secondary);
cursor: default;
pointer-events: none;
}
.cal-cell--today {
background: var(--cal-today-bg) !important;
outline: 2px solid var(--indigo);
outline-offset: -2px;
}
.cal-cell--festival {
box-shadow: inset 0 var(--tp-space-1) 0 var(--tp-palette-pasupu);
}
.cal-cell-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tp-space-2);
min-width: 0;
}
.cal-day-num {
font-weight: var(--tp-weight-bold);
font-size: var(--tp-type-body-size);
color: var(--text-primary);
line-height: var(--tp-type-body-lh);
}
.cal-cell--today .cal-day-num {
color: var(--cal-today-text);
}
/* Paksha dot */
.cal-paksha-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.cal-paksha-dot--shukla {
background: var(--accent-gold-light);
}
.cal-paksha-dot--krishna {
background: var(--paksha-krishna);
}
/* Tithi label */
.cal-tithi {
font-size: var(--tp-type-caption-size);
color: var(--text-secondary);
line-height: var(--tp-type-caption-lh);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Festival badge */
.cal-festival {
display: inline-block;
font-size: var(--tp-type-caption-size);
font-weight: var(--tp-weight-semibold);
background: var(--cal-festival-bg);
color: var(--text-secondary);
border: 1px solid var(--accent-gold-light);
border-radius: var(--tp-radius-xs);
padding: var(--tp-space-1);
line-height: var(--tp-type-caption-lh);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Day-detail modal */
.cal-modal-content {
border-radius: 12px;
overflow: hidden;
}
.cal-modal-header {
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
}
/* Fix modal scrollbar issue - ensure modal content scrolls, not body */
/* html has overflow-y:scroll so the scrollbar is always visible - prevent Bootstrap shifting the page */
body.modal-open {
overflow: visible !important;
padding-right: 0 !important;
}
.modal-dialog {
max-height: calc(100vh - 3rem);
display: flex;
flex-direction: column;
}
.modal-content {
max-height: calc(100vh - 3rem);
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-body {
overflow-y: auto;
overflow-x: hidden;
flex: 1 1 auto;
}
.modal.show {
overflow-y: hidden;
}
.cal-detail-header {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.cal-detail-date {
font-weight: 700;
font-size: 1rem;
}
.cal-detail-festivals {
margin-top: 0.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.cal-detail-table th {
width: 42%;
color: var(--text-muted);
font-weight: 600;
font-size: 0.8rem;
}
.cal-detail-table td {
font-size: 0.88rem;
}
@media (max-width: 767.98px) {
.cal-controls {
grid-template-columns:
var(--tp-control-height)
minmax(0, 1fr)
minmax(0, 1fr)
var(--tp-control-height);
justify-content: stretch;
}
.cal-controls .tp-location-chip {
grid-column: 1 / -1;
justify-self: start;
}
}
/* Responsive: compact on small screens */
@media (max-width: 480px) {
.cal-cell {
min-height: 56px;
padding: var(--tp-space-1);
}
.cal-day-num {
font-size: var(--tp-type-label-size);
line-height: var(--tp-type-label-lh);
}
.cal-tithi {
display: none;
}
.cal-festival {
display: none;
}
}
/* ══════════════════════════════════════════════
Daily Panchang Page
══════════════════════════════════════════════ */
.pnc-controls {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: var(--tp-space-3);
flex: 1 1 auto;
min-width: 0;
}
.pnc-filter {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: end;
gap: var(--tp-space-mobile-gap);
min-width: 0;
}
.pnc-filter > * {
min-width: 0;
}
.pnc-date-input {
width: 100%;
}
.pnc-place-wrap {
position: relative;
min-width: 0;
}
/* ── Input with icon inside right edge ── */
.tp-input-icon-group {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.tp-input-icon-group .tp-field__input,
.tp-input-icon-group input.tp-field__input {
width: 100%;
padding-right: 2.5rem !important;
}
.tp-input-icon-group .tp-input-icon--end {
position: absolute;
right: 0.75rem;
pointer-events: none;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tp-text-secondary, #786c5e);
z-index: 2;
}
.pnc-submit {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.75rem;
padding: 0 1.5rem;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
border-radius: var(--tp-radius-md, 0.5rem);
}
@media (min-width: 576px) {
.pnc-filter {
grid-template-columns: minmax(10.5rem, 12.5rem) minmax(14rem, 1fr);
gap: var(--tp-space-row) var(--tp-space-control-gap);
}
.pnc-submit {
grid-column: 1;
justify-self: start;
}
}
@media (min-width: 992px) {
.pnc-filter {
grid-template-columns:
minmax(9.5rem, 11.5rem)
minmax(12rem, 1fr)
auto;
column-gap: var(--tp-space-control-gap);
row-gap: 0;
align-items: end;
}
.pnc-submit {
grid-column: auto;
justify-self: start;
align-self: end;
}
}
@media (max-width: 575.98px) {
.pnc-submit,
.pnc-status {
width: 100%;
}
}
/* Festival banner */
.pnc-festival-banner {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 10px;
padding: 0.55rem 1rem;
font-weight: 600;
color: var(--text-brand-deep);
font-size: 0.92rem;
}
/* Skeleton */
.pnc-skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.85rem;
margin-bottom: 1rem;
}
.pnc-skeleton-card {
height: 120px;
border-radius: 12px;
background: linear-gradient(90deg, var(--skeleton-cream-1) 25%, var(--skeleton-cream-2) 50%, var(--skeleton-cream-1) 75%);
background-size: 200% 100%;
animation: pnc-shimmer 1.4s infinite;
}
@keyframes pnc-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Five element cards */
.pnc-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
gap: 0.85rem;
margin-bottom: 0;
}
.pnc-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 1rem 1rem 0.85rem;
display: flex;
flex-direction: column;
gap: 4px;
transition: border-color 0.15s;
}
.pnc-card:hover {
border-color: var(--indigo);
}
.pnc-card-icon {
font-size: 1.6rem;
line-height: 1;
}
.pnc-card-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: .06em;
color: var(--accent-gold-text);
text-transform: uppercase;
}
.pnc-card-main {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.pnc-card-sub {
font-size: 0.72rem;
color: var(--text-muted);
}
.pnc-card-extra {
margin-top: 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
/* Progress bar */
.pnc-progress {
flex: 1 1 60px;
height: 5px;
background: var(--progress-track);
border-radius: 3px;
overflow: hidden;
}
.pnc-progress-fill {
height: 100%;
background: var(--accent-gold);
border-radius: 3px;
transition: width 0.5s;
}
.pnc-pct {
font-size: 0.68rem;
color: var(--text-muted);
white-space: nowrap;
}
/* Auspicious/inauspicious badges — plain pill, no red/green (principle #5:
an inauspicious window is a fact to plan around, not an alarm). */
.pnc-badge {
font-size: 0.7rem;
padding: 1px 6px;
border-radius: 12px;
font-weight: 600;
background: var(--card);
color: var(--indigo-deep);
border: 1px solid var(--line);
}
.pnc-badge--ok {
background: var(--tp-status-success-bg);
color: var(--tp-status-success);
border-color: var(--tp-status-success);
}
.pnc-badge--warn {
background: var(--tp-status-warning-bg);
color: var(--tp-status-warning);
border-color: var(--tp-status-warning);
}
/* Paksha dot */
.pnc-paksha-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
vertical-align: middle;
}
.pnc-paksha-dot--shukla {
background: var(--accent-gold-light);
}
.pnc-paksha-dot--krishna {
background: var(--paksha-krishna);
}
/* Section titles */
.pnc-section-title {
font-weight: 700;
color: var(--accent-gold-text);
margin-bottom: 0.85rem;
}
/* Sun / Moon tracker */
.pnc-sunmoon-card {
padding: 1rem 1.1rem;
}
.pnc-sunmoon-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.pnc-tracker-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.pnc-arc-wrap {
width: 100%;
max-width: 200px;
}
.pnc-arc-svg {
width: 100%;
display: block;
}
.pnc-arc-svg--sun path { stroke: var(--pnc-sun-arc); }
.pnc-arc-svg--sun circle { fill: var(--pnc-sun-dot); }
.pnc-arc-svg--sun text { fill: var(--pnc-sun-icon); }
.pnc-arc-svg--moon path { stroke: var(--pnc-moon-arc); }
.pnc-arc-svg--moon circle { fill: var(--pnc-moon-dot); }
.pnc-arc-svg--moon text { fill: var(--pnc-moon-icon); }
.pnc-tracker-row {
display: flex;
justify-content: space-around;
width: 100%;
gap: 0.5rem;
flex-wrap: wrap;
}
.pnc-tracker-row--compact {
font-size: 0.75rem;
justify-content: center;
gap: 1rem;
}
/* Dashed separator between "current" and "next" rows in Panchang element tables */
.pnc-row-divider {
border-top: 1px dashed rgba(var(--accent-gold-rgb), 0.35) !important;
}
.pnc-tracker-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.72rem;
color: var(--text-muted);
gap: 2px;
}
.pnc-tracker-item strong {
font-size: 0.92rem;
color: var(--text-primary);
font-weight: 700;
}
/* Astronomical details grid */
.pnc-astro-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.5rem 1rem;
}
.pnc-astro-item {
display: flex;
flex-direction: column;
gap: 1px;
}
.pnc-astro-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: .05em;
color: var(--text-muted);
text-transform: uppercase;
}
.pnc-astro-value {
font-size: 0.9rem;
color: var(--text-primary);
font-weight: 600;
}
/* ── Panchang elements table ── */
.pnc-table-card {
padding: 0 !important;
overflow: hidden;
}
.pnc-table-card .pnc-section-title {
padding: 1.1rem 1.3rem 0.5rem 1.3rem;
margin-bottom: 0;
}
.pnc-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 0 !important;
border: none;
}
.pnc-table th {
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
border-bottom: 1.5px solid var(--border-color) !important;
border-top: none !important;
background-color: var(--bg-hover);
padding: 0.85rem 1.3rem;
}
.pnc-table td {
padding: 1rem 1.3rem;
vertical-align: middle;
border-bottom: 1px solid var(--border-color) !important;
border-top: none !important;
font-size: 0.9rem;
color: var(--text-primary);
}
.pnc-table tbody tr:last-child td {
border-bottom: none !important;
}
.pnc-table tbody tr:hover {
background-color: var(--bg-hover);
}
.pnc-table-el {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
}
.pnc-table-icon {
font-size: 1.3rem;
line-height: 1;
}
.pnc-table-val {
font-weight: 800;
color: var(--chart-symbol-color);
font-size: 0.95rem;
}
.pnc-table-range {
font-size: 0.8rem;
font-weight: 700;
color: var(--indigo);
display: inline-flex;
align-items: center;
gap: 4px;
}
/* Responsive */
@media (max-width: 520px) {
.pnc-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
.pnc-sunmoon-grid {
grid-template-columns: 1fr;
}
.pnc-timing-grid {
grid-template-columns: 1fr !important;
}
}
/* ── Verdict Card ── */
.pnc-verdict-card {
border-radius: 14px;
padding: 1.1rem 1.3rem;
display: flex;
align-items: center;
gap: 1rem;
border: 1px solid;
transition: box-shadow 0.2s;
}
.pnc-verdict-card:hover {
box-shadow: 0 4px 16px rgba(var(--shadow-color-rgb), 0.08);
}
.pnc-verdict-icon {
font-size: 2.2rem;
line-height: 1;
flex-shrink: 0;
}
.pnc-verdict-body {
flex: 1;
min-width: 0;
}
.pnc-verdict-title {
font-weight: 800;
font-size: 1.05rem;
}
.pnc-verdict-desc {
font-size: 0.82rem;
margin-top: 2px;
opacity: 0.85;
}
.pnc-verdict--good {
background: linear-gradient(135deg, var(--status-success-bg), var(--verdict-good-bg2));
border-color: var(--verdict-good-border);
color: var(--verdict-good-text);
}
.pnc-verdict--caution {
background: linear-gradient(135deg, var(--verdict-caution-bg1), var(--verdict-caution-bg2));
border-color: var(--verdict-caution-border);
color: var(--verdict-caution-text);
}
.pnc-verdict--avoid {
background: linear-gradient(135deg, var(--verdict-avoid-bg1), var(--verdict-avoid-bg2));
border-color: var(--verdict-avoid-border);
color: var(--verdict-avoid-text);
}
/* ── Timing Cards Grid ── */
.pnc-timing-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.85rem;
margin-bottom: 0;
}
.pnc-timing-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 0.9rem 1rem;
display: flex;
flex-direction: column;
gap: 4px;
transition: box-shadow 0.15s, border-color 0.2s;
position: relative;
overflow: hidden;
}
.pnc-timing-card:hover {
box-shadow: 0 4px 14px rgba(var(--shadow-color-rgb), 0.08);
}
.pnc-timing-card-header {
display: flex;
align-items: center;
gap: 0.5rem;
}
.pnc-timing-icon {
font-size: 1.35rem;
line-height: 1;
}
.pnc-timing-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.pnc-timing-label--bad {
color: var(--status-danger);
}
.pnc-timing-label--good {
color: var(--indigo);
}
.pnc-timing-time {
font-size: 1.1rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1.2;
margin-top: 2px;
}
.pnc-timing-desc {
font-size: 0.7rem;
color: var(--text-muted);
line-height: 1.3;
}
/* Status badge */
.pnc-timing-status {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
margin-top: 4px;
width: fit-content;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* No red/green/amber, no looping pulse/blink (§5.5/§8 hard rules) —
"active now" is a current-in-time state (--indigo-soft, like the dasha
"ఇప్పుడు" tag), not a severity signal. */
.pnc-timing-status--active {
background: var(--indigo-soft);
color: var(--indigo-deep);
}
.pnc-timing-status--upcoming,
.pnc-timing-status--done {
background: var(--card);
color: var(--slate);
border: 1px solid var(--line);
}
.pnc-timing-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* Active card glow */
.pnc-timing-card--active {
border-color: var(--verdict-avoid-border);
box-shadow: 0 0 0 2px rgba(var(--glow-danger-rgb), 0.2);
}
.pnc-timing-card--active-good {
border-color: var(--verdict-good-border);
box-shadow: 0 0 0 2px rgba(var(--glow-success-rgb), 0.2);
}
/* ── Section dividers for timings ── */
.pnc-timing-section-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 1.2rem;
margin-bottom: 0.75rem;
}
.pnc-timing-section-title--bad {
color: var(--status-danger);
}
.pnc-timing-section-title--good {
color: var(--status-success-bright);
}
.pnc-timing-section-title::after {
content: '';
flex: 1;
height: 1px;
background: currentColor;
opacity: 0.25;
}
/* ── Rashi cards (Sun/Moon Rashi pair) ── */
.pnc-rashi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
}
@media (max-width: 520px) {
.pnc-rashi-grid {
grid-template-columns: 1fr;
}
}
/* ══════════════════════════════════════════════
Kundli Result — Retired feature-specific rules (migrated to tp-card and tp-heading-section)
Note: .detail-info-card and .planet-details-wrapper remain preserved for Panchang & Transits routes.
══════════════════════════════════════════════ */
.kundli-result-page,
.kundli-result-page > .tp-card {
min-width: 0;
}
/* Internal report arrangements use the Tallapatra grid contract without
reintroducing Bootstrap row/column wrappers as structural surfaces. */
.kundli-panchang-limbs,
.kundli-varga-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--tp-grid-row-gap) var(--tp-grid-column-gap);
min-width: 0;
}
.kundli-varga-grid {
grid-template-columns: minmax(0, 1fr);
}
.kundli-panchang-limbs > *,
.kundli-varga-grid > * {
min-width: 0;
}
@media (min-width: 768px) {
.kundli-panchang-limbs {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kundli-varga-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.kundli-varga-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ══════════════════════════════════════════════
Enhanced Detail Cards (Panchang & Planets)
══════════════════════════════════════════════ */
.detail-info-card {
height: 100%;
}
.detail-info-header {
padding: 0.75rem 1rem;
background: var(--card-bg);
border-bottom: 1px solid rgba(var(--accent-gold-rgb), 0.2);
display: flex;
align-items: center;
gap: 0.6rem;
}
.detail-info-title {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--detail-header-text);
}
.detail-info-body {
padding: 1rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-primary);
}
.detail-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.4rem;
padding: 0.5rem 0;
font-size: 0.82rem;
border-bottom: 1px solid var(--list-hover-border);
}
.detail-row:last-child {
border-bottom: none;
}
.detail-label {
font-size: 0.8rem;
color: var(--text-taupe);
font-weight: 500;
flex-shrink: 0;
}
.detail-value {
font-size: 0.85rem;
color: var(--text-primary);
font-weight: 700;
text-align: left;
}
.detail-row .detail-value {
text-align: right;
}
/* Styled Table for Planet & Dasha Details */
.planet-details-wrapper {
background: var(--card);
border-radius: var(--radius-md);
border: 1px solid var(--line);
overflow: hidden;
margin-top: 1rem;
}
.planet-table-header {
background: var(--card);
color: var(--indigo-deep);
padding: 1.2rem 1.5rem;
font-weight: 800;
font-size: 1.1rem;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: 0.5rem;
}
.planet-details-table {
margin-bottom: 0;
}
.planet-details-table thead th {
background-color: var(--paper);
color: var(--slate);
font-weight: 800;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 1rem 1.2rem;
border-bottom: 1px solid var(--line);
}
.planet-details-table tbody tr:nth-child(even) {
background-color: var(--paper);
}
.planet-details-table tbody td {
padding: 1rem 1.2rem;
font-size: 0.95rem;
color: var(--text-primary);
border-bottom: 1px solid var(--line);
vertical-align: middle;
transition: background-color 0.2s ease;
}
.planet-details-table tbody tr:hover td {
background-color: var(--indigo-soft);
}
/* Sticky గ్రహం column + sticky header (§6.5.1) — used only by KundliResult's
graha table via the --sticky modifier; Transits' identical-class table is
unaffected since it doesn't carry the modifier. */
.planet-details-table--sticky thead th {
position: sticky;
top: 0;
z-index: 2;
}
.planet-details-table--sticky .graha-col-sticky {
position: sticky;
left: 0;
z-index: 1;
background: var(--card);
border-right: 1px solid var(--line);
}
.planet-details-table--sticky thead th.graha-col-sticky {
z-index: 3;
background: var(--paper);
}
.retro-badge {
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
}
.retro-yes {
background-color: var(--status-danger-bg);
color: var(--status-danger);
}
.retro-no {
background-color: var(--status-success-bg);
color: var(--status-success);
}
/* Graha Balam states: Ucha (exalted), Neecha (debilitated), Vakra (retrograde) —
plain pills, not red/green/amber. A neecha graha is not an "error" (principle #5,
§6.5.1); shared by KundliResult and Transits (both use .balam-badge). */
.balam-badge {
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: var(--radius-sm);
background: var(--card);
border: 1px solid var(--line);
color: var(--indigo-deep);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
}
.balam-ucha,
.balam-neecha,
.balam-vakra {
background: var(--card);
color: var(--indigo-deep);
}
.planet-icon-cell {
display: flex;
align-items: center;
gap: 0.5rem;
}
.planet-symbol {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--planet-symbol-bg);
color: var(--text-taupe);
font-size: 0.8rem;
font-weight: bold;
}
/* Dasha Table Enhancements */
.dasha-clickable-row {
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.dasha-clickable-row:hover {
background-color: rgba(var(--accent-gold-rgb), 0.15) !important;
}
.dasha-clickable-row:active {
transform: scale(0.995);
}
.dasha-arrow {
display: inline-block;
color: var(--accent-gold-text);
font-size: 0.7rem;
font-weight: bold;
opacity: 0.6;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.dasha-clickable-row:hover .dasha-arrow {
opacity: 1;
transform: translateX(3px);
}
/* ══════════════════════════════════════════════
Kundli dedicated PDF export page
══════════════════════════════════════════════ */
.kundli-pdf-body {
background: var(--pdf-body-bg);
color: var(--text-primary);
}
.pdf-export-toolbar {
position: sticky;
top: 0;
z-index: 1000;
display: flex;
justify-content: flex-end;
gap: 0.6rem;
padding: 0.8rem 1rem;
background: rgba(var(--bg-deep-rgb), 0.92);
border-bottom: 1px solid rgba(var(--accent-soft-rgb), 0.3);
}
.kundli-export-document {
width: min(210mm, calc(100vw - 2rem));
margin: 1.5rem auto;
box-shadow: 0 22px 60px rgba(var(--shadow-color-rgb), 0.28);
}
.kundli-export-page {
position: relative;
width: 210mm;
min-height: 297mm;
padding: 16mm;
background: linear-gradient(180deg, rgba(var(--cream-1-rgb), 0.98), rgba(var(--cream-1-rgb), 0.98)), radial-gradient(circle at top left, rgba(var(--accent-gold-rgb), 0.18), transparent 35%);
color: var(--text-primary);
break-after: page;
page-break-after: always;
overflow: hidden;
}
.kundli-export-page:last-child {
break-after: auto;
page-break-after: auto;
}
.kundli-export-page::before {
content: "";
position: absolute;
inset: 7mm;
border: 1px solid rgba(var(--accent-pdf-gold-rgb), 0.24);
pointer-events: none;
}
.kundli-export-cover {
display: flex;
flex-direction: column;
background: linear-gradient(145deg, rgba(var(--cream-1-rgb), 0.97), rgba(var(--cream-3-rgb), 0.96)), radial-gradient(circle at 22% 18%, rgba(var(--accent-gold-rgb), 0.24), transparent 38%);
}
.kundli-export-brand {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.kundli-export-cover-content {
position: relative;
z-index: 1;
margin: auto 0;
}
.kundli-export-cover h1 {
max-width: 760px;
margin: 0.45rem 0 1rem;
color: var(--text-primary);
font-size: 3rem;
line-height: 1.08;
font-weight: 900;
}
.kundli-export-chart-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
}
.kundli-export-chart-item {
padding: 0.75rem;
border: 1px solid rgba(var(--accent-pdf-gold-rgb), 0.28);
border-radius: 8px;
background: rgba(var(--cream-1-rgb), 0.74);
break-inside: avoid;
page-break-inside: avoid;
}
.kundli-export-chart-item .south-chart-grid {
max-width: 76mm;
}
.kundli-export-chart-primary {
grid-column: 1 / -1;
}
.kundli-export-chart-primary .south-chart-grid {
max-width: 118mm;
}
.kundli-dasha-export-table .dasha-level-1 td:first-child {
padding-left: 1.6rem;
}
.kundli-dasha-export-table .dasha-level-2 td:first-child {
padding-left: 2.6rem;
}
.kundli-dasha-export-table .dasha-level-1 td {
background: rgba(var(--cream-2-rgb), 0.7);
}
.kundli-dasha-export-table .dasha-level-2 td {
color: var(--dasha-level2-text);
font-size: 0.82rem;
background: rgba(var(--cream-1-rgb), 0.92);
}
/* ══════════════════════════════════════════════
Elegant printable PDF reports
══════════════════════════════════════════════ */
.pdf-report {
display: none;
}
.js-print-report span {
margin-right: 0.25rem;
}
.pdf-page {
position: relative;
background: var(--pdf-page-bg);
color: var(--text-primary);
padding: 18mm;
min-height: 277mm;
break-after: page;
overflow: hidden;
}
.pdf-page:last-child {
break-after: auto;
}
.pdf-page::before {
content: "";
position: absolute;
inset: 8mm;
border: 1px solid rgba(var(--accent-pdf-gold-rgb), 0.25);
pointer-events: none;
}
.pdf-cover {
background: linear-gradient(145deg, rgba(var(--cream-1-rgb), 0.97), rgba(var(--cream-3-rgb), 0.96)), radial-gradient(circle at 18% 20%, rgba(var(--accent-gold-rgb), 0.2), transparent 35%);
display: flex;
flex-direction: column;
}
.pdf-brand-row {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.pdf-brand-mark {
color: var(--text-brand);
font-size: 1.15rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pdf-brand-subtitle {
color: var(--pdf-subtitle);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.pdf-seal {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border: 2px solid rgba(var(--pdf-seal-border-rgb), 0.45);
border-radius: 50%;
color: var(--text-brand);
font-size: 1.8rem;
font-weight: 800;
background: rgba(var(--cream-2-rgb), 0.85);
}
.pdf-cover-body {
position: relative;
z-index: 1;
margin: auto 0;
}
.pdf-kicker {
color: var(--pdf-accent-bright);
font-size: 0.8rem;
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.pdf-cover h1 {
max-width: 780px;
margin: 0.5rem 0 1rem;
color: var(--text-primary);
font-size: 3rem;
line-height: 1.08;
font-weight: 900;
}
.pdf-lead {
max-width: 720px;
color: var(--pdf-ink-soft);
font-size: 1.05rem;
line-height: 1.55;
}
.pdf-cover-grid,
.pdf-score-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
margin-top: 2rem;
}
.pdf-cover-grid > div,
.pdf-score-meta > div {
display: grid;
grid-template-columns: 36px 1fr;
gap: 0.15rem 0.7rem;
padding: 0.9rem;
border: 1px solid rgba(var(--accent-pdf-gold-rgb), 0.26);
border-radius: 8px;
background: rgba(var(--surface-white-rgb), 0.62);
}
.pdf-cover-grid span,
.pdf-score-meta span {
grid-row: span 2;
color: var(--pdf-kicker);
font-size: 1.45rem;
line-height: 1;
}
.pdf-cover-grid strong,
.pdf-score-meta strong {
color: var(--pdf-label-deep);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pdf-cover-grid em,
.pdf-score-meta em {
color: var(--text-primary);
font-size: 0.9rem;
font-style: normal;
font-weight: 700;
}
.pdf-section-heading {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 1rem;
color: var(--pdf-heading);
}
.pdf-section-heading span {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--pdf-seal-bg);
color: var(--text-brand);
font-weight: 900;
}
.pdf-section-heading h2 {
margin: 0;
font-size: 1.35rem;
font-weight: 900;
}
.pdf-stat-grid,
.pdf-two-column,
.pdf-dosha-grid {
position: relative;
z-index: 1;
display: grid;
gap: 0.85rem;
}
.pdf-stat-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pdf-two-column,
.pdf-dosha-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pdf-stat-card,
.pdf-panel {
border: 1px solid rgba(var(--accent-pdf-gold-rgb), 0.25);
border-radius: 8px;
background: var(--surface-cream);
box-shadow: 0 8px 22px rgba(var(--shadow-brown-deep-rgb), 0.08);
}
.pdf-stat-card {
padding: 0.85rem;
text-align: center;
}
.pdf-stat-card span {
display: block;
color: var(--pdf-accent-text);
font-size: 1.35rem;
font-weight: 900;
line-height: 1;
}
.pdf-stat-card strong {
display: block;
margin-top: 0.35rem;
color: var(--text-primary);
font-size: 1rem;
}
.pdf-stat-card small {
color: var(--pdf-stat-small);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pdf-panel {
position: relative;
z-index: 1;
padding: 1rem;
break-inside: avoid;
}
.pdf-panel h3 {
margin: 0 0 0.75rem;
color: var(--text-brand-deep);
font-size: 1rem;
font-weight: 900;
}
.pdf-detail-list {
display: grid;
grid-template-columns: minmax(115px, 0.8fr) minmax(0, 1.2fr);
gap: 0.4rem 0.75rem;
margin: 0;
}
.pdf-detail-list dt {
color: var(--pdf-label);
font-size: 0.78rem;
font-weight: 800;
}
.pdf-detail-list dd {
margin: 0;
color: var(--text-primary);
font-size: 0.85rem;
font-weight: 700;
text-align: right;
}
.pdf-chart-wrap {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
}
.pdf-south-chart {
width: 116mm;
max-width: 116mm;
}
.pdf-table {
position: relative;
z-index: 1;
width: 100%;
border-collapse: collapse;
background: var(--surface-cream);
border: 1px solid rgba(var(--accent-pdf-gold-rgb), 0.32);
break-inside: avoid;
}
.pdf-table th {
padding: 0.55rem 0.65rem;
color: var(--pdf-heading);
background: var(--pdf-chip-bg);
border-bottom: 1px solid rgba(var(--accent-pdf-gold-rgb), 0.35);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.pdf-table td {
padding: 0.52rem 0.65rem;
border-bottom: 1px solid rgba(var(--accent-pdf-gold-rgb), 0.16);
color: var(--text-primary);
font-size: 0.78rem;
vertical-align: top;
}
/* ═══════════════════════════════════════════════════════════════
PLANETARY TRANSITS PAGE (Transits.cshtml)
═══════════════════════════════════════════════════════════════ */
.trn-page {
max-width: 1200px;
margin: 0 auto;
}
/* ── Current-positions Rasi chart ── */
.trn-chart-card {
padding: 1rem 1.1rem 1.2rem;
text-align: center;
}
.trn-chart-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--trn-title);
margin: 0 0 0.15rem;
}
.trn-chart-sub {
font-size: 0.78rem;
color: var(--trn-sub);
margin: 0 0 0.75rem;
}
.trn-chart-grid {
max-width: 360px;
}
.trn-chart-now {
font-size: 0.72rem;
font-weight: 700;
color: var(--text-brand);
line-height: 1.35;
margin-top: 2px;
}
.trn-chart-retro {
font-size: 0.6rem;
color: var(--sindoor);
vertical-align: super;
margin-left: 1px;
}
/* ── Skeleton loader ── */
.trn-skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 1rem;
}
.trn-skeleton-card {
height: 180px;
border-radius: 1rem;
background: linear-gradient(90deg, rgba(var(--accent-gold-rgb), 0.18) 25%, rgba(var(--accent-gold-rgb), 0.30) 50%, rgba(var(--accent-gold-rgb), 0.18) 75%);
background-size: 400% 100%;
animation: shimmer 1.6s infinite;
}
/* ── Planet grid ── */
.trn-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 1rem;
}
.trn-planet-card {
border-radius: var(--radius-md);
padding: 1.1rem 1.2rem 1rem;
background: var(--card);
border: 1px solid var(--line);
}
.trn-planet-header {
display: flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.6rem;
}
.trn-planet-symbol {
font-size: 1.9rem;
line-height: 1;
color: var(--accent-gold-text);
}
.trn-planet-name-wrap {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.trn-planet-name {
font-weight: 700;
font-size: 1rem;
color: var(--trn-name);
}
.trn-retro-badge {
display: inline-block;
font-size: 0.65rem;
background: var(--trn-retro-bg);
color: var(--trn-title);
border-radius: 0.35rem;
padding: 0.05rem 0.4rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.trn-rashi-row {
display: flex;
align-items: baseline;
gap: 0.4rem;
margin-bottom: 0.35rem;
}
.trn-rashi-symbol {
font-size: 1.15rem;
color: var(--trn-rashi-symbol);
}
.trn-rashi-name {
font-weight: 600;
font-size: 0.95rem;
color: var(--trn-rashi-name);
}
.trn-degree {
font-size: 0.75rem;
color: var(--text-muted);
margin-left: auto;
}
.trn-nakshatra {
font-size: 0.78rem;
color: var(--trn-nakshatra);
margin-bottom: 0.75rem;
}
.trn-dates-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.trn-date-box {
border-radius: 0.5rem;
padding: 0.35rem 0.5rem;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.trn-entry {
background: rgba(var(--transit-entry-bg-rgb), 0.12);
border: 1px solid rgba(var(--transit-entry-border-rgb), 0.25);
}
.trn-exit {
background: rgba(var(--transit-exit-bg-rgb), 0.10);
border: 1px solid rgba(var(--transit-exit-border-rgb), 0.22);
}
.trn-date-label {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--trn-nakshatra-2);
}
.trn-date-val {
font-size: 0.82rem;
font-weight: 600;
color: var(--trn-name);
}
.fs-07 {
font-size: 0.7rem;
}
.pdf-table tr:nth-child(even) td {
background: rgba(var(--cream-2-rgb), 0.42);
}
.pdf-planet-symbol {
display: inline-grid;
place-items: center;
width: 23px;
height: 23px;
margin-right: 0.35rem;
border-radius: 50%;
background: var(--pdf-chip-bg);
color: var(--text-brand-deep);
font-weight: 900;
}
.pdf-title-join {
display: block;
color: var(--pdf-join-text);
font-size: 1.1rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.pdf-score-orbit {
display: grid;
grid-template-columns: 210px 1fr;
gap: 1.4rem;
align-items: center;
margin-top: 2rem;
}
.pdf-score-ring {
width: 190px;
height: 190px;
display: grid;
place-items: center;
align-content: center;
border: 10px solid var(--accent-gold);
border-radius: 50%;
background: var(--pdf-surface-alt);
box-shadow: inset 0 0 0 8px rgba(var(--accent-gold-rgb), 0.16);
}
.pdf-score-ring strong {
color: var(--pdf-join-strong);
font-size: 2.55rem;
line-height: 1;
}
.pdf-score-ring span {
color: var(--pdf-join-span);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pdf-verdict-panel {
border-left: 6px solid var(--accent-gold);
}
.pdf-verdict-panel p {
margin-bottom: 0.75rem;
}
.pdf-recommendation,
.pdf-remedy {
padding: 0.7rem;
border-radius: 6px;
background: rgba(var(--accent-gold-rgb), 0.14);
}
.pdf-bride-panel {
border-left: 5px solid var(--pdf-bride);
}
.pdf-groom-panel {
border-left: 5px solid var(--pdf-groom);
}
.pdf-status {
display: inline-block;
padding: 0.18rem 0.45rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 900;
}
.pdf-status-good {
background: var(--status-success-bg);
color: var(--pdf-status-good-text);
}
.pdf-status-warn {
background: var(--status-warning-soft-bg);
color: var(--pdf-status-warn-text);
}
.pdf-dosha-card p {
min-height: 42px;
}
/* ── Panchang PDF styles ─────────────────────────────────────────────────── */
.pdf-pnc-festival-text {
background: rgba(var(--accent-gold-rgb), 0.14);
border-left: 5px solid var(--accent-gold);
padding: 0.6rem 1rem;
border-radius: 6px;
font-size: 1rem;
margin-top: 1rem;
}
.pdf-pnc-five-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.9rem;
margin-top: 1.5rem;
}
.pdf-pnc-elem {
background: var(--pdf-surface-alt);
border: 1px solid rgba(var(--accent-pdf-gold-rgb), 0.28);
border-radius: 10px;
padding: 0.75rem 1rem;
}
.pdf-pnc-elem-icon {
font-size: 1.4rem;
margin-bottom: 0.25rem;
}
.pdf-pnc-elem-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--pdf-status-warn-small);
margin-bottom: 0.2rem;
}
.pdf-pnc-elem-main {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
}
.pdf-pnc-elem-sub {
font-size: 0.7rem;
color: var(--text-secondary);
margin-top: 0.2rem;
}
.pdf-pnc-detail-table {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 1.5rem;
}
.pdf-pnc-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.3rem 0;
border-bottom: 1px solid rgba(var(--accent-pdf-gold-rgb), 0.14);
font-size: 0.85rem;
}
.pdf-pnc-key {
color: var(--text-secondary);
font-weight: 600;
}
.pdf-pnc-val {
color: var(--text-primary);
font-weight: 500;
text-align: right;
}
@page {
size: A4;
margin: 0;
}
@media print {
html,
body {
background: var(--surface-white) !important;
color: var(--text-primary) !important;
font-size: 10.5pt;
overflow: visible;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.site-shell > .tp-utility-strip,
.site-shell > header,
.site-shell > .tp-footer,
.site-shell > .tp-global-feedback-layer,
.footer,
.pdf-export-toolbar,
.js-print-report {
display: none !important;
}
.site-shell,
.site-shell > .container,
main {
display: block !important;
width: auto !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body:not(.kundli-pdf-body) main > :not(.pdf-report) {
display: none !important;
}
.pdf-report {
display: block !important;
}
.pdf-page {
width: 210mm;
min-height: 297mm;
margin: 0;
box-shadow: none;
page-break-after: always;
}
.pdf-page:last-child {
page-break-after: auto;
}
.pdf-table,
.pdf-panel,
.pdf-stat-card,
.pdf-south-chart {
break-inside: avoid;
page-break-inside: avoid;
}
a[href]::after {
content: "";
}
.kundli-pdf-body {
background: var(--surface-white) !important;
}
.kundli-export-document {
width: auto;
margin: 0;
box-shadow: none;
}
.kundli-export-page {
width: 210mm;
min-height: 297mm;
margin: 0;
box-shadow: none;
}
.kundli-export-page,
.detail-info-card,
.birth-info-card,
.planet-details-wrapper,
.kundli-export-chart-item {
break-inside: avoid;
page-break-inside: avoid;
}
}
/* ── Icon share / download buttons (Phase 4.2B refined 40x40px) ───── */
.btn-icon-share, .btn-icon-dl {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--tp-btn-icon-size, 40px);
height: var(--tp-btn-icon-size, 40px);
padding: 0;
border-radius: var(--tp-radius-sm, 8px);
border: none;
cursor: pointer;
transition: opacity .15s, transform .1s, background-color .15s;
}
.btn-icon-share:hover, .btn-icon-dl:hover {
opacity: .95;
transform: scale(1.05);
}
.btn-icon-share:disabled, .btn-icon-dl:disabled {
opacity: .5;
cursor: not-allowed;
transform: none;
}
/* Generic share: opens the OS share sheet (WhatsApp, Telegram, email, copy-link…),
so it uses the site's primary action colour rather than any single app's brand. */
.btn-icon-share {
background-color: var(--tp-action-primary-bg) !important;
color: var(--tp-action-primary-text) !important;
}
.btn-icon-share:hover {
background-color: var(--tp-action-primary-hover) !important;
color: var(--tp-action-primary-text) !important;
}
.btn-icon-dl {
background-color: #2d3748 !important;
color: #ffffff !important;
}
.btn-icon-dl:hover {
background-color: #1a202c !important;
color: #ffffff !important;
}
/* ── Design System Accordion Components (Global styling for Kundli & Matchmaking) ── */
.tp-accordion, .spashta-accordion {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
.tp-accordion-item, .spashta-accordion-item {
border: 1px solid rgba(var(--accent-gold-rgb, 197, 160, 89), 0.35);
border-radius: var(--tp-radius-md, 10px);
background-color: var(--surface-cream, #fffdf8);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tp-accordion-item:hover, .spashta-accordion-item:hover {
border-color: rgba(var(--accent-gold-rgb, 197, 160, 89), 0.65);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.tp-accordion-button, .spashta-accordion-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.875rem 1.125rem;
font-size: var(--tp-fs-base, 1rem);
font-weight: 600;
color: var(--text-primary, #2d261e);
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
text-align: left;
transition: background-color 0.15s ease, color 0.15s ease;
}
.tp-accordion-button:hover, .spashta-accordion-button:hover {
background-color: rgba(var(--accent-gold-rgb, 197, 160, 89), 0.08);
color: var(--text-brand, #7c1d1d);
}
.tp-accordion-button[aria-expanded="true"], .spashta-accordion-button[aria-expanded="true"] {
background-color: rgba(var(--accent-gold-rgb, 197, 160, 89), 0.14);
color: var(--text-brand, #7c1d1d);
border-bottom: 1px solid rgba(var(--accent-gold-rgb, 197, 160, 89), 0.25);
}
.tp-accordion-button .tp-chevron, .spashta-accordion-button .spashta-chevron, .tp-accordion-button .spashta-chevron, .spashta-accordion-button .tp-chevron {
font-size: 1.1rem;
transition: transform 0.2s ease;
margin-left: 0.5rem;
display: inline-block;
}
.tp-accordion-button[aria-expanded="true"] .tp-chevron, .spashta-accordion-button[aria-expanded="true"] .spashta-chevron, .tp-accordion-button[aria-expanded="true"] .spashta-chevron, .spashta-accordion-button[aria-expanded="true"] .tp-chevron {
transform: rotate(180deg);
}
.tp-accordion-body, .spashta-accordion-body {
padding: 1.25rem;
background-color: var(--card-bg, #ffffff);
color: var(--text-primary, #2d261e);
font-size: var(--tp-fs-sm, 0.925rem);
line-height: 1.6;
}
/* ── Tallapatra Explainability Component (.tp-disclosure / .tp-phala / .tp-sutra) ── */
.tp-disclosure {
margin-top: 0.35rem;
margin-bottom: 0.35rem;
}
.tp-phala {
font-size: var(--tp-fs-sm, 0.9375rem);
color: var(--text-primary, #2d261e);
line-height: 1.6;
margin-bottom: 0.5rem;
}
.tp-phala__label {
font-weight: 700;
color: var(--text-brand, #7c1d1d);
margin-right: 0.35rem;
}
.tp-disclosure__trigger {
background: transparent;
border: none;
padding: 0;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-brand, #7c1d1d);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: color 0.15s ease, opacity 0.15s ease;
}
.tp-disclosure__trigger:hover {
color: var(--accent-gold, #c5a059);
text-decoration: underline;
}
.tp-disclosure__trigger .tp-disclosure__icon {
font-size: 0.75rem;
color: var(--accent-gold, #c5a059);
}
.tp-disclosure__panel {
background-color: rgba(var(--accent-gold-rgb, 197, 160, 89), 0.08);
border-left: 3px solid var(--accent-gold, #c5a059);
border-radius: 0 var(--tp-radius-sm, 6px) var(--tp-radius-sm, 6px) 0;
padding: 0.75rem 1rem;
margin-top: 0.5rem;
}
.tp-sutra {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.tp-sutra::before {
display: none !important;
content: none !important;
}
.tp-sutra__step {
font-size: 0.875rem;
line-height: 1.55;
color: var(--text-secondary, #5c5246);
margin-bottom: 0.35rem;
}
.tp-sutra__step::before {
display: none !important;
content: none !important;
}
.tp-sutra__step:last-child {
margin-bottom: 0;
}
.tp-sutra__label {
font-weight: 600;
color: var(--text-primary, #2d261e);
margin-right: 0.35rem;
}
/* ── Fit Divisional Charts (2 per row) and D1 / D9 Row Alignment ── */
.tp-chart-featured {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.tp-chart-featured__item {
flex: 1 1 420px;
max-width: 520px;
min-width: 0;
width: 100%;
}
.tp-chart-wrap {
overflow-x: auto;
max-width: 100%;
}
@media (min-width: 768px) {
.tp-chart-wrap {
overflow-x: visible;
}
}
/* ── Panchang Table Divider Lines ── */
.pnc-table tbody tr td {
border-bottom: 1px solid rgba(var(--accent-gold-rgb), 0.28) !important;
vertical-align: middle;
padding-top: 0.85rem !important;
padding-bottom: 0.85rem !important;
}
.pnc-table thead th {
border-bottom: 2px solid rgba(var(--accent-gold-rgb), 0.45) !important;
padding-top: 0.85rem !important;
padding-bottom: 0.85rem !important;
}
/* ── Tallapatra page grid: token-driven responsive gutters and a 1200 px
content ceiling across the navigation and every route. ── */
.site-content-container {
width: 100%;
max-width: var(--tp-layout-max) !important;
margin-inline: auto;
padding-inline-start: max(var(--tp-layout-gutter), var(--tp-safe-left));
padding-inline-end: max(var(--tp-layout-gutter), var(--tp-safe-right));
}
/* ── Language Switcher Responsive Borders & Alignment ── */
@media (min-width: 576px) {
.lang-switcher {
border-left: 1px solid rgba(var(--surface-white-rgb), 0.25);
padding-left: 1rem;
margin-left: auto;
}
}
@media (max-width: 575.98px) {
.lang-switcher {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid rgba(var(--surface-white-rgb), 0.15);
width: 100%;
justify-content: center;
}
}
/* ══════════════════════════════════════════════
Kundli Result — Swabhav Accordion
══════════════════════════════════════════════ */
.swabhav-accordion-item {
border: 1px solid rgba(var(--accent-gold-rgb), 0.25) !important;
background: var(--surface-white);
transition: all 0.25s ease-in-out;
}
.swabhav-accordion-item:hover {
box-shadow: 0 4px 12px rgba(var(--shadow-gold-rgb), 0.08) !important;
border-color: rgba(var(--accent-gold-rgb), 0.45) !important;
}
.swabhav-accordion-button {
background-color: var(--accordion-bg) !important;
color: var(--accordion-text) !important;
padding: 0.95rem 1.25rem !important;
border: none !important;
}
.swabhav-accordion-button:not(.collapsed) {
background-color: var(--accordion-active-bg) !important;
box-shadow: none !important;
}
.swabhav-accordion-button:focus {
box-shadow: none !important;
}
.swabhav-accordion-button::after {
margin-left: 0.5rem;
}
/* Proof-Tree / ReasonBlock (§6.7/§6.7.1) */
/* The proof tree is now the canonical Tallapatra sutra thread — .tp-sutra /
.tp-sutra__step / .tp-phala in tallapatra/components.css, rendered by
Pages/Shared/_ExplainToggle.cshtml as a semantic . */.dasha-badge {
font-weight: 700;
letter-spacing: 0.3px;
box-shadow: 0 2px 4px rgba(var(--shadow-color-rgb), 0.05);
}
/* ══════════════════════════════════════════════
Prasna Lagnam Search Box Styles
══════════════════════════════════════════════ */
.search-box-wrapper {
max-width: 650px;
margin-top: 1rem;
}
.search-box-wrapper .input-group {
box-shadow: 0 4px 15px rgba(var(--shadow-color-rgb), 0.15);
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid rgba(var(--accent-gold-rgb), 0.35);
}
.search-box-wrapper .search-input {
border: none !important;
background-color: rgba(var(--surface-white-rgb), 0.95);
color: var(--text-primary);
font-size: 1rem;
padding: 0.75rem 1.25rem;
}
.search-box-wrapper .search-input:focus {
border: none !important;
box-shadow: none !important;
background-color: var(--surface-white);
}
.search-box-wrapper .search-btn {
font-weight: 700;
letter-spacing: 0.03em;
font-size: 1rem;
transition: all 0.3s ease;
border: none !important;
}
.search-box-wrapper .search-btn:hover {
background-color: var(--btn-warm-hover-bg);
transform: translateY(-1px);
}
/* ── Prasna Intent Classifier Highlighting & Styles ── */
.south-cell.highlight-primary,
.tp-chart__cell.highlight-primary {
background: linear-gradient(135deg, var(--tp-surface-card), rgba(var(--tp-accent-gold-rgb, 212, 160, 23), 0.18)) !important;
border: 2px solid var(--tp-accent-gold) !important;
box-shadow: var(--tp-shadow-md);
z-index: 2;
}
.south-cell.highlight-primary .house-badge,
.tp-chart__cell.highlight-primary .tp-chart__house {
background: var(--tp-accent-gold) !important;
color: #ffffff !important;
border-color: var(--tp-accent-gold) !important;
}
.south-cell.highlight-secondary,
.tp-chart__cell.highlight-secondary {
background: linear-gradient(135deg, var(--tp-surface-card), var(--tp-surface-cream)) !important;
border: 1.5px solid var(--tp-border-color) !important;
box-shadow: var(--tp-shadow-sm);
}
.south-cell.highlight-secondary .house-badge,
.tp-chart__cell.highlight-secondary .tp-chart__house {
background: var(--tp-border-color) !important;
color: var(--tp-text-primary) !important;
border-color: var(--tp-border-color) !important;
}
.tp-chart-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--tp-space-4);
font-size: var(--tp-font-size-sm);
color: var(--tp-text-secondary);
}
.tp-chart-legend__item {
display: inline-flex;
align-items: center;
gap: var(--tp-space-2);
}
.alert-warm-cosmic {
background: linear-gradient(135deg, var(--alert-cosmic-bg1), var(--alert-cosmic-bg2));
border: 1px solid var(--alert-cosmic-border);
color: var(--alert-cosmic-text);
box-shadow: 0 2px 8px rgba(var(--cream-3-rgb), 0.15);
}
.alert-warm-cosmic .alert-heading {
color: var(--text-brand);
}
.relevant-prediction-glow {
border: 1.5px solid var(--highlight-amber) !important;
box-shadow: 0 0 10px rgba(var(--highlight-amber-rgb), 0.15) !important;
}
.badge-query-match {
background: linear-gradient(135deg, var(--highlight-amber), var(--highlight-amber-deep));
color: var(--surface-white);
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
.prasna-answer-card {
border-left: 4px solid var(--indigo) !important;
background: var(--card);
}
/* ── Dedicated Prasna Lagnam Page (Split Panel) ──────────────── */
.prasna-page {
margin: 0 auto;
max-width: var(--tp-layout-max);
}
.prasna-hero {
display: flex;
flex-wrap: wrap;
background: var(--tp-surface-card);
border-radius: var(--tp-radius-lg);
overflow: hidden;
border: 1px solid var(--tp-border-color);
margin-bottom: 0; /* gap is handled by page-template flex gap (--tp-space-4) */
}
.prasna-hero-image {
flex: 1 1 40%;
min-width: 0;
position: relative;
background: var(--prasna-hero-bg, var(--tp-surface-card));
overflow: hidden;
}
.prasna-devi-img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
mix-blend-mode: luminosity;
transition: transform var(--tp-transition-base);
}
.prasna-hero-image:hover .prasna-devi-img {
transform: scale(1.05);
}
.prasna-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, transparent, var(--prasna-hero-bg, var(--tp-surface-card)) 90%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--tp-space-4);
}
.prasna-hero-title {
font-size: var(--tp-font-size-3xl, 2rem);
font-weight: var(--tp-font-weight-bold);
color: var(--tp-text-primary);
margin-bottom: var(--tp-space-2);
}
.prasna-hero-subtitle {
font-size: var(--tp-font-size-md);
color: var(--tp-text-secondary);
margin: 0;
line-height: 1.5;
}
.prasna-hero-form {
flex: 1 1 60%;
min-width: 0;
padding: var(--tp-space-4);
display: flex;
flex-direction: column;
justify-content: center;
}
.prasna-form-inner {
max-width: 600px;
margin: 0 auto;
width: 100%;
}
.prasna-form-header {
display: flex;
align-items: center;
gap: var(--tp-space-4);
margin-bottom: var(--tp-space-5);
}
.prasna-form-icon {
font-size: 2.5rem;
}
.prasna-form-title {
font-size: var(--tp-font-size-2xl);
font-weight: var(--tp-font-weight-bold);
color: var(--tp-text-primary);
margin: 0 0 var(--tp-space-1) 0;
}
.prasna-form-desc {
color: var(--tp-text-secondary);
margin: 0;
font-size: var(--tp-font-size-base);
}
.prasna-badges {
display: flex;
flex-wrap: wrap;
gap: var(--tp-space-3);
margin-bottom: var(--tp-space-6);
}
.prasna-badge {
background: rgba(var(--tp-accent-gold-rgb, 212, 160, 23), 0.12);
color: var(--tp-text-primary);
padding: var(--tp-space-2) var(--tp-space-4);
border-radius: var(--tp-radius-full);
font-size: var(--tp-font-size-sm);
font-weight: var(--tp-font-weight-medium);
border: 1px solid rgba(var(--tp-accent-gold-rgb, 212, 160, 23), 0.3);
}
.prasna-input-wrap {
position: relative;
margin-bottom: var(--tp-space-5);
background: var(--tp-surface-card);
border: var(--tp-border-control);
border-radius: var(--tp-radius-md);
transition: border-color var(--tp-transition-fast), box-shadow var(--tp-transition-fast);
}
.prasna-input-wrap:focus-within {
border-color: var(--tp-border-color-focus);
box-shadow: 0 0 0 1px var(--tp-border-color-focus);
}
.prasna-textarea {
width: 100%;
border: none;
background: transparent;
padding: var(--tp-space-4);
font-size: var(--tp-font-size-base);
color: var(--tp-text-primary);
resize: none;
outline: none;
line-height: 1.6;
}
.prasna-textarea::placeholder {
color: var(--tp-text-secondary);
font-style: italic;
}
.prasna-input-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--tp-space-3) var(--tp-space-4);
border-top: var(--tp-border-control);
background: var(--tp-surface-sunken);
border-radius: 0 0 var(--tp-radius-md) var(--tp-radius-md);
}
.prasna-char-counter {
font-size: var(--tp-font-size-sm);
color: var(--tp-text-secondary);
font-weight: var(--tp-font-weight-medium);
}
.btn-prasna-submit {
font-size: var(--tp-font-size-base);
}
.prasna-examples {
margin-top: var(--tp-space-5);
}
.prasna-examples-label {
font-size: var(--tp-font-size-sm);
font-weight: var(--tp-font-weight-bold);
text-transform: uppercase;
color: var(--tp-text-secondary);
margin-bottom: var(--tp-space-3);
letter-spacing: 0.05em;
}
.prasna-example-chips {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--tp-space-3);
}
.prasna-examples-label-en {
text-transform: none;
font-weight: var(--tp-font-weight-medium);
color: var(--tp-text-secondary);
letter-spacing: 0;
}
.prasna-examples-label-en::before {
content: "· ";
}
.prasna-chip {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--tp-space-1);
background: var(--tp-surface-card);
border: var(--tp-border-control);
color: var(--tp-text-primary);
padding: var(--tp-space-3) var(--tp-space-4);
border-radius: var(--tp-radius-md);
font-size: var(--tp-font-size-sm);
cursor: pointer;
text-align: left;
transition: background-color var(--tp-transition-fast), border-color var(--tp-transition-fast), transform var(--tp-transition-fast);
width: 100%;
}
.prasna-chip:hover {
background: var(--tp-surface-sunken);
border-color: var(--tp-border-color-focus);
color: var(--tp-text-primary);
transform: translateY(-1px);
}
.prasna-chip-te {
font-weight: var(--tp-font-weight-medium);
}
.prasna-chip-en {
font-size: var(--tp-font-size-xs);
color: var(--tp-text-secondary);
}
.prasna-chip:hover .prasna-chip-en {
color: var(--tp-text-primary);
}
@media (max-width: 768px) {
.prasna-hero-image,
.prasna-hero-form {
flex-basis: 100%;
}
.prasna-hero-overlay {
background: linear-gradient(to top, var(--prasna-hero-bg, var(--tp-surface-card)) 10%, transparent 100%);
padding: var(--tp-space-5);
}
.prasna-hero-form {
padding: var(--tp-space-6) var(--tp-space-5);
}
}
/* ── How it works section ── */
.prasna-info-section {
margin-top: var(--tp-space-6);
text-align: center;
}
.prasna-info-title {
font-size: var(--tp-font-size-2xl);
font-weight: var(--tp-font-weight-bold);
color: var(--tp-text-primary);
margin-bottom: var(--tp-space-4);
}
.prasna-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--tp-space-4);
}
.prasna-info-card {
height: 100%;
}
.prasna-info-icon {
font-size: 2.5rem;
margin-bottom: var(--tp-space-3);
}
.prasna-info-card-title {
font-size: var(--tp-font-size-lg);
font-weight: var(--tp-font-weight-bold);
color: var(--tp-text-primary);
margin-bottom: var(--tp-space-2);
}
.prasna-info-card-desc {
font-size: var(--tp-font-size-base);
color: var(--tp-text-secondary);
margin: 0;
line-height: 1.6;
}
/* ── Dedicated Prasna Result Page ── */
.prasna-result-page {
max-width: var(--tp-layout-max);
margin: 0 auto;
}
.prasna-mini-card {
border-left: 4px solid var(--tp-accent-gold) !important;
}
/* ══════════════════════════════════════════════════════════════════
Gochar Rashi Phalalu — merged into /graha-sancharam (Transits)
══════════════════════════════════════════════════════════════════ */
/* ── Rashi quick-nav ── */
.gph-nav {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.5rem;
}
.gph-nav-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
position: relative;
padding: 0.55rem 0.25rem;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--card);
color: var(--gph-topic-text);
text-decoration: none;
transition: border-color 0.15s, color 0.15s;
}
.gph-nav-tile:hover {
border-color: var(--indigo);
color: var(--gph-val-text);
}
.gph-nav-tile.has-transit {
background: var(--paper);
border-color: var(--indigo);
}
.gph-nav-sym {
font-size: 1.4rem;
line-height: 1;
color: var(--chart-symbol-color);
}
.gph-nav-name {
font-size: 0.74rem;
font-weight: 600;
}
/* Planet-transit count — informational, not a severity signal (principle #5). */
.gph-nav-count {
position: absolute;
top: -6px;
right: -6px;
min-width: 1.15rem;
height: 1.15rem;
padding: 0 0.25rem;
border-radius: 1rem;
background: var(--indigo);
color: #fff;
font-size: 0.65rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Rashi section card ── */
.gph-rasi-card {
scroll-margin-top: 1rem;
}
.gph-rasi-head {
display: flex;
align-items: center;
gap: 0.75rem;
padding-bottom: 0.75rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid rgba(var(--accent-gold-rgb), 0.25);
}
.gph-rasi-sym {
font-size: 2rem;
line-height: 1;
color: var(--chart-symbol-color);
flex-shrink: 0;
}
.gph-rasi-titlewrap {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.gph-rasi-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.gph-rasi-en {
font-size: 0.78rem;
font-weight: 500;
color: var(--gph-en-text);
margin-left: 0.25rem;
}
.gph-rasi-meta {
font-size: 0.78rem;
color: var(--gph-meta-text);
}
.gph-rasi-badge {
margin-left: auto;
font-size: 0.68rem;
font-weight: 700;
padding: 0.2rem 0.6rem;
border-radius: 1rem;
background: var(--indigo-soft);
color: var(--indigo-deep);
border: 1px solid var(--line);
white-space: nowrap;
}
.gph-rasi-empty {
font-size: 0.85rem;
color: var(--gph-empty-text);
}
.gph-rasi-empty a {
color: var(--indigo);
font-weight: 600;
white-space: nowrap;
}
/* ── Per-planet block within a Rashi ── */
.gph-planet-block + .gph-planet-block {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px dashed rgba(var(--accent-gold-rgb), 0.3);
}
.gph-planet-block-head {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.5rem;
}
.gph-planet-name {
font-weight: 700;
font-size: 0.98rem;
color: var(--text-primary);
display: inline-flex;
align-items: center;
flex-wrap: wrap;
}
.gph-validity-tag {
font-size: 0.65rem;
font-weight: 700;
padding: 0.1rem 0.5rem;
border-radius: 1rem;
white-space: nowrap;
}
.gph-validity-week {
background: rgba(var(--status-info-rgb), 0.1);
color: var(--status-info);
border: 1px solid rgba(var(--status-info-rgb), 0.22);
}
.gph-validity-today {
background: rgba(var(--info-blue-rgb), 0.12);
color: var(--gph-info-blue);
border: 1px solid rgba(var(--info-blue-rgb), 0.28);
}
.gph-acc-sym {
font-size: 1.6rem;
line-height: 1;
flex-shrink: 0;
width: 1.9rem;
text-align: center;
}
/* Dignity badges — plain pill, no red/green (principle #5: a debilitated
planet is not an "error"). */
.gph-dignity-badge {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
padding: 0.05rem 0.4rem;
border-radius: 0.3rem;
background: var(--card);
color: var(--indigo-deep);
border: 1px solid var(--line);
}
.gph-dignity-exalted {
background: var(--tp-status-success-bg);
color: var(--tp-status-success);
border-color: var(--tp-status-success);
}
.gph-dignity-debilitated {
background: var(--tp-status-warning-bg);
color: var(--tp-status-warning);
border-color: var(--tp-status-warning);
}
.gph-planet-validity {
display: inline-flex;
align-items: center;
min-height: var(--tp-target-min);
}
.gph-slow-badge {
display: inline-block;
font-size: 0.6rem;
font-weight: 700;
padding: 0.05rem 0.35rem;
border-radius: 0.3rem;
background: rgba(var(--status-info-rgb), 0.1);
color: var(--status-info);
border: 1px solid rgba(var(--status-info-rgb), 0.22);
}
.gph-overview {
background: rgba(var(--cream-2-rgb), 0.6);
border-left: 4px solid var(--accent-gold);
padding: 0.65rem 0.9rem;
border-radius: 0 0.5rem 0.5rem 0;
font-size: 0.9rem;
color: var(--text-primary);
line-height: 1.7;
margin-bottom: 0.75rem;
}
/* Meta row: nakshatra, degree, exit chips */
.gph-meta-row {
padding: 0.5rem 0;
margin-bottom: 0.75rem;
border-top: 1px dashed rgba(var(--accent-gold-rgb), 0.25);
border-bottom: 1px dashed rgba(var(--accent-gold-rgb), 0.25);
}
.gph-meta-chip {
display: flex;
flex-direction: column;
gap: 0.05rem;
}
.gph-meta-label {
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gph-en-text);
}
.gph-meta-val {
font-size: 0.85rem;
font-weight: 600;
color: var(--gph-val-text);
}
/* ── Result Sections ── */
.gph-results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0.75rem;
}
.gph-result-section {
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid rgba(var(--shadow-color-rgb), 0.06);
}
.gph-result-type-header {
padding: 0.4rem 0.75rem;
font-size: 0.78rem;
font-weight: 700;
}
/* No red/green on astrology results (principle #5) — the heading word
("అనుకూల ఫలాలు" / "ప్రతికూల ఫలాలు") already carries the meaning. */
.gph-result-positive,
.gph-result-negative {
background: var(--paper);
border-bottom: 1px solid var(--line);
color: var(--indigo-deep);
}
.gph-results-list {
padding: 0.5rem 0;
}
.gph-result-item {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid rgba(var(--shadow-color-rgb), 0.04);
font-size: 0.85rem;
line-height: 1.65;
}
.gph-result-item:last-child {
border-bottom: none;
}
.gph-result-title {
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.2rem;
font-size: 0.88rem;
}
.gph-result-topic {
color: var(--gph-topic-text);
font-weight: 600;
font-size: 0.82rem;
margin-bottom: 0.15rem;
}
.gph-result-reason {
color: var(--gph-reason-text);
margin-bottom: 0.1rem;
}
.gph-result-restatement {
color: var(--gph-restatement-text);
font-style: italic;
font-size: 0.82rem;
}
/* ── Responsive ── */
@media (max-width: 576px) {
.gph-nav {
grid-template-columns: repeat(4, 1fr);
}
.gph-nav-sym {
font-size: 1.2rem;
}
.gph-nav-name {
font-size: 0.68rem;
}
.gph-rasi-head {
flex-wrap: wrap;
}
.gph-rasi-badge {
margin-left: 0;
}
.gph-acc-sym {
font-size: 1.4rem;
}
.gph-planet-name {
font-size: 0.9rem;
}
}
/* ══════════════════════════════════════════════════════════════════
Admin Cosmic Dashboard (Login + Analytics) — dark glassmorphism
sub-theme, intentionally distinct from the public parchment-card
theme used elsewhere. Built on the same root tokens.
══════════════════════════════════════════════════════════════════ */
.admin-login-row {
min-height: 70vh;
}
.admin-chart-container {
position: relative;
height: 320px;
width: 100%;
}
.admin-table-scroll {
max-height: 500px;
overflow-y: auto;
}
.admin-url-truncate {
max-width: 320px;
}
.glass-card {
background: rgba(var(--bg-deep-rgb), 0.7);
backdrop-filter: blur(11px);
-webkit-backdrop-filter: blur(11px);
border: 1px solid rgba(var(--accent-gold-rgb), 0.2) !important;
border-radius: 1.1rem;
}
.bg-cosmic-card {
background: rgba(var(--bg-deep-rgb), 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(var(--accent-soft-rgb), 0.2);
}
.bg-cosmic-modal {
background: var(--bg-deep);
border-radius: 1rem;
}
.border-gold {
border-left: 5px solid var(--accent-gold) !important;
}
.border-gold-light {
border: 1px solid rgba(var(--accent-gold-rgb), 0.22) !important;
}
.border-danger-light {
border: 1px solid rgba(var(--bs-danger-rgb), 0.3) !important;
}
.text-gold,
.text-gold-soft {
color: var(--accent-soft);
}
.text-danger-light {
color: var(--text-danger-light);
}
.text-gradient {
background: var(--accent-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cosmic-input,
.cosmic-select {
background: rgba(var(--surface-white-rgb), 0.05);
border: 1px solid rgba(var(--accent-soft-rgb), 0.25);
color: var(--surface-white);
border-radius: 0.5rem;
padding: 0.75rem 1rem;
transition: var(--transition-base);
}
.cosmic-select {
background-color: rgba(var(--bg-deep-rgb), 0.8) !important;
color: var(--accent-soft) !important;
}
.cosmic-input:focus {
background: rgba(var(--surface-white-rgb), 0.08);
border-color: var(--accent-gold);
color: var(--surface-white);
box-shadow: 0 0 0 0.2rem rgba(var(--accent-gold-rgb), 0.25);
}
.btn-gold {
background: var(--accent-gold);
color: var(--surface-white);
border: none;
transition: var(--transition-base);
}
.btn-gold:hover, .btn-gold:focus {
background: var(--btn-warm-hover-bg);
color: var(--surface-white);
transform: translateY(-2px);
}
.btn-outline-gold {
color: var(--accent-gold-text);
border: 1px solid var(--accent-gold);
background: transparent;
transition: var(--transition-base);
}
.btn-outline-gold:hover {
background: var(--btn-warm-hover-bg);
color: var(--surface-white);
border-color: var(--btn-warm-hover-border);
}
.cosmic-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(var(--accent-gold-rgb), 0.1);
border: 1px solid rgba(var(--accent-gold-rgb), 0.2);
animation: pulse-ring 2.5s infinite;
}
@keyframes pulse-ring {
0% {
box-shadow: 0 0 0 0 rgba(var(--accent-gold-rgb), 0.2);
}
70% {
box-shadow: 0 0 0 15px rgba(var(--accent-gold-rgb), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--accent-gold-rgb), 0);
}
}
.animate-fade-in {
animation: fadeIn 0.7s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Tabs */
.cosmic-tabs {
border-bottom: 1px solid rgba(var(--accent-gold-rgb), 0.25);
}
.cosmic-tabs .nav-link {
color: var(--admin-tab-muted);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
transition: var(--transition-base);
}
.cosmic-tabs .nav-link:hover {
color: var(--accent-soft);
background: rgba(var(--surface-white-rgb), 0.03);
}
.cosmic-tabs .nav-link.active {
color: var(--accent-gold-text) !important;
border-bottom: 2px solid var(--accent-gold);
background: transparent;
}
/* Table */
.cosmic-table {
color: var(--admin-table-text);
}
.cosmic-table th {
color: var(--accent-soft);
font-weight: 700;
border-bottom: 2px solid rgba(var(--accent-gold-rgb), 0.25) !important;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
}
.cosmic-table td {
border-bottom: 1px solid rgba(var(--surface-white-rgb), 0.06);
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.cosmic-table tr:hover td {
background-color: rgba(var(--surface-white-rgb), 0.02);
}
/* Badge tags */
.badge-get {
background-color: rgba(var(--bs-success-rgb), 0.15) !important;
color: var(--bs-success) !important;
border: 1px solid rgba(var(--bs-success-rgb), 0.3);
font-size: 0.7rem;
}
.badge-post {
background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
color: var(--bs-primary) !important;
border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
font-size: 0.7rem;
}
.badge-status-ok {
background-color: rgba(var(--bs-success-rgb), 0.1) !important;
color: var(--badge-ok-bright-text) !important;
font-size: 0.75rem;
}
.badge-status-warn {
background-color: rgba(var(--bs-warning-rgb), 0.1) !important;
color: var(--badge-warn-bright-text) !important;
font-size: 0.75rem;
}
.badge-status-err {
background-color: rgba(var(--bs-danger-rgb), 0.1) !important;
color: var(--badge-err-bright-text) !important;
font-size: 0.75rem;
}
.badge-operation {
background-color: rgba(var(--accent-gold-rgb), 0.1) !important;
color: var(--accent-soft) !important;
border: 1px solid rgba(var(--accent-gold-rgb), 0.25);
font-size: 0.7rem;
}
/* ══════════════════════════════════════════════
Home Page UI Polish (§Phase 4.1D)
══════════════════════════════════════════════ */
.index-page {
min-width: 0;
}
.index-hero-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: var(--tp-space-4);
}
.index-hero-content {
min-width: 0;
}
.index-hero-image {
display: none;
min-width: 0;
}
@media (min-width: 768px) {
.index-hero-layout {
grid-template-columns: minmax(0, 3fr) minmax(10rem, 1fr);
}
.index-hero-image {
display: block;
}
}
/* Hero Section Polish */
.hero-card {
padding: 1.25rem 1rem;
}
@media (min-width: 768px) {
.hero-card {
padding: 1.5rem 1.5rem;
}
}
.btn-prasna-cta {
min-height: 52px;
padding-left: 1.5rem;
padding-right: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.hero-trust-badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.125rem;
}
@media (max-width: 576px) {
.hero-trust-badges {
gap: 0.75rem;
margin-top: 0.5rem;
}
}
/* Service Cards Baseline & Button Alignment */
.dash-service-card {
display: flex;
flex-direction: column;
height: 100%;
}
.dash-service-card :where(.btn, .tp-btn) {
margin-top: auto;
min-height: 52px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
/* Panchang Mobile Compactness & Grid Padding */
@media (max-width: 400px) {
.panchang-sub {
font-size: 0.78rem !important;
line-height: 1.25 !important;
}
}
/* What You Can Review Icon Top Alignment */
.dash-feature-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.dash-feature-icon {
flex-shrink: 0;
line-height: 1.3;
}
/* SEO Content Section Polish */
.seo-content-section {
padding: var(--tp-space-4);
}
/* Footer Section Separation */
footer.footer, .site-footer {
margin-top: var(--tp-space-4);
border-top: 1px solid rgba(var(--accent-gold-rgb), 0.2);
}
/* ──────────────────────────────────────────────────────────────────────────
Language Selector & Fluid Ad Gutters Layout
────────────────────────────────────────────────────────────────────────── */
.tp-main-layout-with-ads {
display: flex;
width: 100%;
max-width: 100%;
padding-inline: var(--tp-space-3);
gap: var(--tp-space-4);
align-items: flex-start;
justify-content: center;
}
.tp-main-layout-with-ads > .tp-main__container,
.tp-main-center-column {
flex: 1 1 auto;
min-width: 0;
width: 100%;
max-width: 100%;
margin-inline: 0;
}
.ad-gutter {
display: none;
flex: 0 0 160px;
width: 160px;
padding-top: var(--tp-space-4);
position: sticky;
top: calc(var(--tp-control-height) + 1rem);
}
.ad-slot {
width: 100%;
min-height: 600px;
border: 1px dashed color-mix(in srgb, var(--tp-palette-ink) 18%, transparent);
border-radius: var(--tp-radius-sm);
background-color: color-mix(in srgb, var(--tp-palette-card) 40%, transparent);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
@media (min-width: 992px) {
.ad-gutter {
display: block;
}
}
@media (min-width: 1400px) {
.ad-gutter {
flex: 0 0 200px;
width: 200px;
}
}
@media (min-width: 1600px) {
.ad-gutter {
flex: 0 0 250px;
width: 250px;
}
}
/* ──────────────────────────────────────────────────────────────────────────
Card Toolbar, Action Buttons & Tab Alignment Polish
────────────────────────────────────────────────────────────────────────── */
.tp-card-toolbar {
display: flex;
flex-direction: column;
width: 100%;
gap: var(--tp-space-3);
margin-block-end: var(--tp-space-4);
}
.tp-card-toolbar__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--tp-space-3);
flex-wrap: wrap;
width: 100%;
}
.tp-card-toolbar > .tp-tabs {
width: 100%;
flex: 1 1 100%;
}
.tp-tab {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.375rem !important;
white-space: nowrap !important;
}
.tp-tab .tp-icon {
vertical-align: middle;
flex-shrink: 0;
margin: 0;
}
@media (max-width: 576px) {
.tp-card-toolbar__actions {
justify-content: stretch;
}
.tp-card-toolbar__actions > * {
flex: 1 1 auto;
text-align: center;
}
}