/* ═══════════════════════════════════════════════════════════ PRAKAMYAM — HOMEPAGE DESIGN v1 Minimal, data-first. Flat surfaces, hairline rules, no cards, no shadows, no border-radius theatre. One accent used sparingly. ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #221B1C; --ink-soft: #51494A; --muted: #635C5D; --line: #E7E1D8; --paper: #ffffff; --paper-soft: #FBF9F5; --accent: #FDA706; /* primary Prakamyam gold/saffron — active states, borders, highlights (decorative only) */ --accent-soft:#FFF4D6; --accent-deep:#8A5D06; /* same gold family, darkened for AA-readable text/icons/links on white */ --accent-ink: #221B1C; /* text color when sitting on --accent (gold needs dark text, not white) */ --gold: var(--accent); --gold-soft: var(--accent-soft); --danger: #B42318; /* the brand red, used only for rare, genuine emphasis — never for routine "avoid" tags */ --caution: #8a5a3a; /* muted brown — kept for reference, no longer used for the inauspicious tag itself */ --caution-soft: #f3e9de; --good: #4B6E4A; /* auspicious/good — muted forest green, sits comfortably with the paper/saffron palette */ --good-soft: #E7EFE1; --good-deep: #3A5636; /* AA-readable green text on light bg */ --bad: var(--accent); /* inauspicious/avoid now reuses the brand saffron */ --bad-soft: var(--accent-soft); --bad-deep: var(--accent-deep); --font-display: 'Noto Serif', 'Noto Serif Devanagari', serif; --font-body: 'Noto Sans', 'Noto Sans Devanagari', sans-serif; --header-h: 60px; --container: 1120px; /* ═══ TYPE SCALE — every font-size on the page maps to one of these. No selector gets its own one-off value. ═══ */ --fs-meta: .75rem; /* eyebrows, captions, footer legal, tiny UI chrome */ --fs-sm: .85rem; /* secondary text: nav sub-items, buttons, footer links, descriptions */ --fs-label: .92rem; /* EVERY data label, anywhere on the page — today-strip, panchang grid, tables, cards, all identical */ --fs-base: 1rem; /* EVERY data value + body paragraphs — same rule as above */ --fs-md: 1.15rem; /* emphasized text: festival names, logo, card titles */ --fs-h3: 1.35rem; --fs-h2: 1.6rem; --fs-h1: clamp(1.8rem, 4vw, 2.4rem); } html.dark { --ink: #F2ECE6; --ink-soft: #D2C8C0; --muted: #948B84; --line: #3A322B; --paper: #1C1613; --paper-soft: #241C18; --accent: #FDA706; --accent-soft: #3A2C10; --accent-deep: #FDBF4D; /* dark mode: lighten instead of darken to keep AA contrast on dark paper */ --accent-ink: #221B1C; --danger: #E5564B; --caution: #C8A47E; --caution-soft: #2C231A; --good: #6FA06B; /* lightened for AA contrast on dark paper */ --good-soft: #23331F; --good-deep: #8FC28A; --bad: var(--accent); --bad-soft: var(--accent-soft); --bad-deep: var(--accent-deep); } html { scroll-behavior: smooth; overflow-x: hidden; font-size: 18px; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; transition: background .2s ease, color .2s ease; overflow-x: hidden; } /* font-size scaling — JS toggles a class on */ html[data-fs="sm"] { font-size: 16px; } html[data-fs="md"] { font-size: 18px; } html[data-fs="lg"] { font-size: 20px; } .container { max-width: var(--container); margin: 0 auto; padding: 0 20px; } @media (max-width: 400px) { .container { padding: 0 14px; } .header-row { gap: 10px; } } a { color: inherit; } img { max-width: 100%; display: block; } .eyebrow { font-size: var(--fs-meta); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .hr { border: none; border-top: 1px solid var(--line); } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; } /* ═══════════════ HEADER ═══════════════ */ header.site-header { position: sticky; top: 0; z-index: 300; background: var(--paper); border-bottom: 1px solid var(--line); } .header-row { display: flex; align-items: center; gap: 18px; height: var(--header-h); } .logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; } .logo-mark { width: 30px; height: 30px; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; font-weight: 600; flex-shrink: 0; } .logo-img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; } .footer-logo .logo-img { width: 34px; height: 34px; } /* WordPress's own custom-logo output (the_custom_logo()) — same intended sizing as .logo-img above */ .logo .custom-logo-link { display: flex; align-items: center; } .logo .custom-logo { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; } .footer-logo .custom-logo { width: 34px; height: 34px; } .mobile-drawer-head .custom-logo { width: 32px; height: 32px; } .logo-word { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: .01em; } /* Desktop nav — WP menu, dropdown-capable */ nav.primary-nav { display: none; margin-left: 28px; } nav.primary-nav ul { list-style: none; display: flex; gap: 2px; } nav.primary-nav li { position: relative; } nav.primary-nav > ul > li > a { display: flex; align-items: center; gap: 4px; padding: 8px 18px; font-size: var(--fs-label); font-weight: 500; letter-spacing: .01em; text-decoration: none; color: var(--ink-soft); border-bottom: 2px solid transparent; } nav.primary-nav > ul > li > a:hover, nav.primary-nav > ul > li.current > a { color: var(--ink); border-bottom-color: var(--accent); } nav.primary-nav .caret { width: 8px; height: 8px; opacity: .55; } /* WordPress's own wp_nav_menu() output doesn't inject a caret icon into the link — it marks parent items with .menu-item-has-children instead, so we render the same visual caret with a plain CSS pseudo-element rather than needing a custom Walker class just for one arrow. */ nav.primary-nav .menu-item-has-children > a::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; } /* submenu */ nav.primary-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 210px; background: var(--paper); border: 1px solid var(--line); padding: 6px 0; box-shadow: 0 8px 20px rgba(0,0,0,.06); } nav.primary-nav li:hover > .sub-menu, nav.primary-nav li:focus-within > .sub-menu { display: block; } nav.primary-nav .sub-menu a { display: block; padding: 8px 16px; font-size: var(--fs-sm); text-decoration: none; color: var(--ink-soft); white-space: nowrap; } nav.primary-nav .sub-menu a:hover { background: var(--paper-soft); color: var(--ink); } nav.primary-nav .sub-menu-wide { min-width: 460px; columns: 2; column-gap: 0; padding: 10px 0; } nav.primary-nav .sub-menu-wide li { break-inside: avoid; } .header-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; } .icon-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--ink-soft); } .icon-btn:hover { border-color: var(--line); color: var(--ink); } .icon-btn svg { width: 17px; height: 17px; } /* font-size popover */ .fs-wrap { position: relative; } .fs-pop { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--paper); border: 1px solid var(--line); padding: 8px; gap: 6px; align-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.06); z-index: 20; } .fs-wrap.open .fs-pop { display: flex; } .fs-pop button { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 700; } .fs-pop button:hover { border-color: var(--ink); color: var(--ink); } .fs-pop button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* language switcher */ .lang-select { margin-left: 4px; padding: 7px 26px 7px 10px; font-size: var(--fs-sm); font-weight: 600; background: var(--paper) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"%3E%3Cpath d="M1 1l4 4 4-4" stroke="%2351494A" stroke-width="1.5" fill="none"/%3E%3C/svg%3E') no-repeat right 9px center; border: 1px solid var(--line); color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer; } .lang-select:hover { border-color: var(--ink-soft); } /* search panel */ .search-panel { display: none; border-top: 1px solid var(--line); background: var(--paper-soft); } .search-panel.open { display: block; } .search-box { display: flex; align-items: center; gap: 10px; padding: 14px 0; } .search-box svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; } .search-box input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: var(--fs-base); color: var(--ink); outline: none; } .search-box button { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 8px 16px; font-size: var(--fs-sm); font-weight: 600; } /* mobile hamburger + compact mobile header Below 900px: only logo, search, a compact language button and the hamburger stay in the header row. Font size, dark mode and the full language switch move into the drawer — a 320–430px header cannot comfortably hold "English / हिन्दी / తెలుగు" spelled out plus four icon buttons. */ .hamburger { display: flex; } .lang-compact { display: flex; font-size: var(--fs-meta); font-weight: 700; } .desktop-only { display: flex; } @media (max-width: 899px) { .desktop-only { display: none !important; } } @media (min-width: 900px) { nav.primary-nav { display: block; } .hamburger { display: none; } .lang-compact { display: none; } } /* Comfortable 44×44 touch targets on phones (header icons are 34px on desktop) */ @media (max-width: 639px) { .header-tools .icon-btn, .header-tools .lang-compact { width: 44px; height: 44px; } .header-tools { gap: 0; } } /* ═══════════════ MOBILE DRAWER ═══════════════ */ .mobile-backdrop { display: none; position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.35); } .mobile-backdrop.open { display: block; } .mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 401; width: min(320px, 88vw); background: var(--paper); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .22s ease; overflow-y: auto; padding: 4px 20px 30px; } .mobile-drawer.open { transform: translateX(0); } .mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .mobile-drawer-head .logo-word { font-size: 1rem; } .mobile-drawer-head .icon-btn { width: 44px; height: 44px; } .mobile-nav-links { display: flex; flex-direction: column; padding: 6px 0 4px; } .mobile-nav-links > a, .mobile-nav-links details > summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 2px; font-size: var(--fs-label); font-weight: 500; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); min-height: 44px; list-style: none; cursor: pointer; } .mobile-nav-links details > summary::-webkit-details-marker { display: none; } .mobile-nav-links details .caret { display: inline-block; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform .15s; } .mobile-nav-links details[open] > summary .caret { transform: rotate(225deg); } .mobile-nav-links details a { display: block; padding: 11px 2px 11px 14px; font-size: var(--fs-sm); color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); min-height: 44px; display: flex; align-items: center; } .mobile-drawer-section { padding: 16px 0; border-bottom: 1px solid var(--line); } .mobile-drawer-section-title { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; } .mobile-opt-row { display: flex; gap: 8px; } .mobile-opt-row.lang-switch { border: none; } .mobile-opt-row.lang-switch button, .mobile-opt-row button { flex: 1; min-height: 44px; border: 1px solid var(--line); background: var(--paper); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); } .mobile-opt-row.lang-switch button.active, .mobile-opt-row button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .mobile-toggle-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; border: 1px solid var(--line); background: var(--paper); padding: 0 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); } .mobile-toggle-row svg { width: 16px; height: 16px; } /* ═══════════════ TYPOGRAPHY SCALE ═══════════════ */ .block-head h1, .block-head h2 { font-family: var(--font-display); font-weight: 600; margin-top: 4px; color: var(--ink); } .block-head h1 { font-size: var(--fs-h1); line-height: 1.25; } .block-head h2 { font-size: var(--fs-h2); line-height: 1.3; } /* ═══════════════ LOCATION BAR ═══════════════ */ .loc-wrap { position: relative; } .loc-btn { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--paper); padding: 7px 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); } .loc-btn svg { width: 14px; height: 14px; color: var(--accent-deep); flex-shrink: 0; } .loc-btn .chg { font-weight: 500; color: var(--muted); text-decoration: underline; margin-left: 2px; } .loc-pop { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: min(280px, calc(100vw - 32px)); background: var(--paper); border: 1px solid var(--line); padding: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.08); } .loc-wrap.open .loc-pop { display: block; } .loc-pop input { width: 100%; border: 1px solid var(--line); padding: 8px 10px; font-family: inherit; font-size: var(--fs-sm); background: var(--paper-soft); color: var(--ink); } .loc-use { display: flex; align-items: center; gap: 7px; width: 100%; border: none; background: transparent; padding: 10px 0 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-deep); } .loc-use svg { width: 14px; height: 14px; } .loc-recent { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-top: 10px; } .loc-pop ul { list-style: none; margin-top: 4px; } .loc-pop li a { display: block; padding: 6px 2px; font-size: var(--fs-sm); text-decoration: none; color: var(--ink-soft); } .loc-pop li a:hover { color: var(--ink); } /* ═══════════════ DATE NAV ═══════════════ */ .date-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .date-pill { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--paper); padding: 7px 13px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); text-decoration: none; } .date-pill:hover { border-color: var(--ink); color: var(--ink); } .date-pill.current { background: var(--ink); color: var(--paper); border-color: var(--ink); } .date-pill svg { width: 13px; height: 13px; } .date-pill-picker { position: relative; padding-right: 8px; cursor: pointer; } .date-pill-picker:hover { border-color: var(--ink); color: var(--ink); } .date-pill-picker input[type="date"] { border: none; background: transparent; font: inherit; color: inherit; padding: 0; margin: 0; cursor: pointer; width: 108px; } .date-pill-picker input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; filter: none; } .date-pill-picker input[type="date"]:focus { outline: none; } /* ═══════════════ INFO TOGGLE (What's this?) ═══════════════ */ .info-toggle { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex-shrink: 0; padding: 0; font-size: var(--fs-meta); font-weight: 700; line-height: 1; font-family: inherit; color: var(--muted); background: var(--paper-soft); border: 1px solid var(--line); border-radius: 50%; margin-left: 6px; } .info-toggle:hover { color: var(--ink); border-color: var(--muted); } .info-toggle.open { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent); } .info-panel { display: none; grid-column: 1 / -1; font-size: var(--fs-base); color: var(--ink-soft); line-height: 1.6; background: var(--paper-soft); border-left: 3px solid var(--line); padding: 10px 12px; margin: 2px 0 8px; } .info-panel.open { display: block; } /* ═══════════════ MORE DETAILS DISCLOSURE ═══════════════ */ .more-details { margin-top: 28px; } .see-full-panchang { font-size: var(--fs-sm); color: var(--muted); margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); } .see-full-panchang a { color: var(--accent-deep); font-weight: 600; text-decoration: none; } .see-full-panchang a:hover { text-decoration: underline; } .more-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); padding: 12px 0; border-top: 1px solid var(--line); } .more-details > summary::-webkit-details-marker { display: none; } .more-details > summary .chev { width: 10px; height: 10px; transition: transform .15s; } .more-details[open] > summary .chev { transform: rotate(180deg); } .more-details-body { padding: 4px 0 6px; } .more-grid { display: grid; grid-template-columns: 1fr; gap: 0 40px; } @media (min-width: 760px) { .more-grid { grid-template-columns: repeat(2, 1fr); } } .advanced-note { font-size: var(--fs-sm); color: var(--muted); margin-top: 14px; } .advanced-note a { color: var(--accent-deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent-deep); } /* ═══════════════ SECTION DIVIDER (rangoli motif — matches Panchang page) ═══════════════ */ .divider-strip { padding: 18px 0; } .section-divider { display: flex; align-items: center; justify-content: center; gap: 12px; } .section-divider::before, .section-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; max-width: 220px; } .rangoli-mark { width: 7px; height: 7px; border: 1px solid var(--accent-deep); transform: rotate(45deg); flex-shrink: 0; } /* ═══════════════ PAGE TITLE BAND (SEO h1 — no breadcrumbs on homepage) ═══════════════ */ .page-title-band { background: var(--accent-soft); border-bottom: 1px solid var(--line); padding: 26px 0; } .page-title-inner { text-align: center; } .page-title-band h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.2; max-width: 720px; margin: 0 auto; } .page-title-band p { margin: 8px auto 0; font-size: var(--fs-label); color: var(--ink-soft); max-width: 640px; } /* ═══════════════ ABOUT (SEO) ═══════════════ */ .about-block .container { text-align: center; } .about-block .block-head { justify-content: center; } .about-block h2 { margin: 0 auto; } .about-block p { font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); max-width: 760px; margin: 0 auto; } .about-block p + p { margin-top: 12px; } /* ═══════════════ TODAY STRIP ═══════════════ */ .today-strip { background: var(--paper); border-bottom: 1px solid var(--line); } .today-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 10px 0; font-size: var(--fs-label); } .today-item { display: flex; align-items: baseline; gap: 6px; } .today-item .lbl { color: var(--muted); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; } .today-item .val { font-weight: 500; color: var(--ink-soft); } .today-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-base); } .today-festival { margin-left: auto; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); } .today-festival .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; flex-shrink: 0; } /* ═══════════════ SECTIONS (generic) ═══════════════ */ section.block { padding: 44px 0; border-bottom: 1px solid var(--line); } section.block.no-line { border-bottom: none; padding-bottom: 30px; } section.block.soft { background: var(--paper-soft); } .block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .block-head .more { font-size: var(--fs-sm); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; white-space: nowrap; } /* ═══════════════ PANCHANG TABLE ═══════════════ */ .panchang-grid { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 760px) { .panchang-grid { grid-template-columns: repeat(2, 1fr); gap: 0 40px; } } .panchang-col + .panchang-col { border-left: none; padding-left: 0; margin-top: 4px; } @media (min-width: 760px) { .panchang-col + .panchang-col { border-left: 1px solid var(--line); padding-left: 40px; margin-top: 0; } } .p-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0 9px 12px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; } .p-row:last-child { border-bottom: none; } .p-row .lbl { font-size: var(--fs-label); color: var(--ink-soft); } .p-row .val { font-size: var(--fs-base); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .p-row .sub { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); margin-top: 1px; } .p-row .sub.aka { font-style: italic; } /* Tithi/Nakshatra current+next cards — used on the Panchang page (not the lighter inline "Next: X from Y" text the homepage uses for the same data). */ .p-row-stack { padding: 12px 0 14px; border-bottom: 1px solid var(--line); } .p-row-stack .lbl { display: block; font-size: var(--fs-label); color: var(--ink-soft); margin-bottom: 8px; } .vn-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .vn-wrap { grid-template-columns: 1fr; } } .vn-now, .vn-next { padding: 10px 12px; border-radius: 8px; } .vn-now { background: var(--good-soft); } .vn-next { background: var(--paper-soft); border: 1px dashed var(--line); } .vn-tag { display: block; font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 3px; } .vn-now .vn-tag { color: var(--good-deep); } .vn-next .vn-tag { color: var(--muted); } .vn-now .val, .vn-next .val { display: block; font-weight: 600; font-size: var(--fs-base); color: var(--ink); } .vn-now .sub, .vn-next .sub { display: block; font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 2px; } .vn-now .sub.aka, .vn-next .sub.aka { font-style: italic; color: var(--muted); margin-top: 3px; } /* Advanced Panchang (Level 3) — Hora/Lagna/Gowri two-column tables, Day/Night badges, Special Yogas status grid */ .chogh-two-col { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 760px) { .chogh-two-col { grid-template-columns: 1fr 1fr; } } .chogh-two-col h4 { font-size: var(--fs-md); font-weight: 600; margin-bottom: 4px; } .chogh-range { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); } .hora-table td.name { font-weight: 600; } .sub-heading { display: inline-block; font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); background: var(--accent-soft); padding: 5px 12px; border-radius: 5px; margin: 22px 0 12px; } .adv-heading { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--ink); } .adv-intro { font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); max-width: 760px; margin-top: 6px; } .col-heading { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; } .yoga-status-grid { margin-top: 16px; border-top: 1px solid var(--line); } .yoga-status-row { display: grid; grid-template-columns: 200px auto 1fr; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); } @media (max-width: 700px) { .yoga-status-row { grid-template-columns: 1fr; gap: 4px; } } .yoga-status-row .yoga-name { font-weight: 600; color: var(--ink); } .yoga-status-row .yoga-desc { font-size: var(--fs-sm); color: var(--muted); } .yoga-status-row.active-good { background: var(--good-soft); border-radius: 6px; border-bottom-color: transparent; } .about-block p.system-note, p.system-note { font-size: var(--fs-meta); color: var(--muted); max-width: 700px; margin: 18px auto 0; padding-top: 14px; border-top: 1px solid var(--line); } .p-row .sub.next-line { color: var(--accent-deep); font-weight: 600; margin-top: 4px; } .p-row .sub.next-aka { color: var(--muted); font-style: italic; margin-top: 1px; } .rp-nav { display: flex; gap: 8px; } .pkv2-autocomplete-wrap { position: relative; } .pkv2-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.12); } .pkv2-suggestions li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: var(--fs-sm); color: var(--ink); } .pkv2-suggestions li:hover, .pkv2-suggestions li.active { background: var(--accent-soft); } .p-row.auspicious { border-left-color: var(--good); } .p-row.caution { border-left-color: var(--bad); } .p-tag { font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; margin-left: 8px; } .p-tag.gold { background: var(--good-soft); color: var(--good-deep); } .p-tag.caution { background: var(--bad-soft); color: var(--bad-deep); } .p-tag.neutral { background: var(--line); color: var(--ink-soft); } /* choghadiya mini table */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .choghadiya-block { background: var(--accent-soft); } .current-period-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 760px) { .current-period-grid { grid-template-columns: repeat(2, 1fr); } } .current-period-card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; } .current-period-card .eyebrow { display: block; margin-bottom: 10px; } .cp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cp-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--ink); } .cp-time { margin-top: 8px; font-size: var(--fs-label); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .cp-dur { font-weight: 400; color: var(--muted); } .cp-good { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-soft); } .cp-good strong { color: var(--ink); } .current-period-card .more { display: inline-block; margin-top: 14px; } .chogh-table { width: 100%; min-width: 380px; border-collapse: collapse; margin-top: 18px; font-size: var(--fs-base); } .chogh-table caption { text-align: left; font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em; color: var(--ink); margin-bottom: 12px; } .chogh-table th { text-align: left; font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); } .chogh-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .chogh-table td.name { font-variant-numeric: normal; font-weight: 600; } .chogh-table tr td:first-child, .chogh-table tr th:first-child { border-left: 3px solid transparent; } .chogh-table tr.good td:first-child { border-left-color: var(--good); } .chogh-table tr.bad td:first-child { border-left-color: var(--bad); } /* ═══════════════ UPCOMING FESTIVALS ═══════════════ */ .fest-list { display: flex; flex-direction: column; } .fest-row { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; } .fest-row:last-child { border-bottom: none; } .fest-date { flex: 0 0 56px; text-align: center; border: 1px solid var(--line); padding: 6px 4px; } .fest-date .d { font-size: 1.1rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .fest-date .m { font-size: .62rem; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; } .fest-body { flex: 1; min-width: 0; } .fest-name { font-weight: 600; font-size: var(--fs-md); } .fest-meta { font-size: var(--fs-meta); color: var(--muted); margin-top: 2px; } .fest-days { font-size: var(--fs-meta); color: var(--accent-deep); font-weight: 600; white-space: nowrap; } /* ═══════════════ SANKALPA CTA ═══════════════ */ .sankalpa-cta-block { background: var(--paper-soft); } .sankalpa-cta { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } @media (min-width: 860px) { .sankalpa-cta { grid-template-columns: 1.3fr 1fr; } } .sankalpa-cta-text h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); color: var(--ink); margin: 6px 0 10px; } .sankalpa-cta-text p { font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); max-width: 620px; } .sankalpa-cta-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: stretch; } .sankalpa-cta-form input[type="text"] { flex: 1 1 320px; min-width: 0; padding: 12px 14px; font-size: var(--fs-base); font-family: inherit; line-height: 1.4; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); box-sizing: border-box; height: auto; margin: 0; box-shadow: none; width: auto; } .sankalpa-cta-form input[type="text"]:focus { outline: none; border-color: var(--accent-deep); box-shadow: none; } button.pk-btn-primary, a.pk-btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; font-size: var(--fs-base); font-weight: 600; font-family: inherit; line-height: 1.4; background: var(--ink); color: var(--paper); border: none; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: opacity .15s; text-decoration: none; box-sizing: border-box; margin: 0; } button.pk-btn-primary:hover, a.pk-btn-primary:hover { opacity: .88; color: var(--paper); } .sankalpa-cta-preview { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 28px 24px; text-align: center; } .sankalpa-om { display: block; font-size: 2rem; color: var(--accent-deep); margin-bottom: 10px; } .sankalpa-preview-line { font-family: var(--font-display); font-size: var(--fs-label); color: var(--ink); line-height: 1.7; } .sankalpa-preview-line.muted { font-size: var(--fs-sm); color: var(--muted); font-family: var(--font-body); } /* ═══════════════ QUICK LINKS GRID ═══════════════ */ .link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 640px) { .link-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .link-grid { grid-template-columns: repeat(4, 1fr); } } .link-card { background: var(--paper); padding: 20px 18px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; min-height: 96px; justify-content: space-between; } .link-card:hover { background: var(--paper-soft); } .link-card .name { font-weight: 600; font-size: var(--fs-md); } .link-card .desc { font-size: var(--fs-meta); color: var(--muted); } .link-card .arrow { align-self: flex-end; font-size: var(--fs-sm); color: var(--muted); } /* ═══════════════ SHARE ROW ═══════════════ */ .share-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .share-btn { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 8px 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); background: var(--paper); text-decoration: none; } .share-btn:hover { border-color: var(--ink); color: var(--ink); } .share-btn svg { width: 15px; height: 15px; } .share-btn.copied { border-color: var(--good-deep, #3a7d44); color: var(--good-deep, #3a7d44); background: var(--good-soft); transition: all .15s; } /* ═══════════════ BACK TO TOP ═══════════════ */ .back-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--ink); color: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.18); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s, background .15s; } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { background: var(--accent-deep); color: var(--paper); } .back-to-top svg { width: 20px; height: 20px; } @media (max-width: 600px) { .back-to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; } } /* ═══════════════ SOCIALS ═══════════════ */ .social-row { display: flex; gap: 10px; flex-wrap: wrap; } .social-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; } .social-btn:hover { border-color: var(--ink); color: var(--ink); } .social-btn svg { width: 18px; height: 18px; } /* ═══════════════ FOOTER ═══════════════ A deliberately dark, quiet footer — per spec, the footer should read as "the end of the site", not another content section. Colors are scoped locally (--footer-*) rather than reusing --ink/--line, since the footer stays dark even when the rest of the page is in light mode. */ footer.site-footer { --footer-bg: #221B1C; --footer-text: #EDE6DF; --footer-muted:#A79C93; --footer-line: rgba(255,255,255,.12); background: var(--footer-bg) url('../images/gopuram-footer.png') no-repeat center 40px / min(760px, 85%) auto; color: var(--footer-text); position: relative; } html.dark footer.site-footer { --footer-bg: #14100D; } .footer-brand-strip { padding: 40px 0 28px; border-bottom: 1px solid var(--footer-line); } .footer-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; margin-bottom: 12px; } .footer-logo .logo-mark { border-color: var(--footer-text); color: var(--footer-text); } .footer-logo .logo-word { color: var(--footer-text); font-size: var(--fs-md); } .footer-brand-strip p { font-size: var(--fs-sm); line-height: 1.65; color: var(--footer-muted); max-width: 480px; } .footer-cols { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 30px 0 30px; } @media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; } .footer-col a { font-size: var(--fs-sm); text-decoration: none; color: var(--footer-text); opacity: .85; } .footer-col a:hover { opacity: 1; color: var(--accent); } .footer-motto { text-align: center; padding: 30px 0; border-top: 1px solid var(--footer-line); } .footer-motto p { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--footer-text); letter-spacing: .01em; } .footer-motto span { display: block; font-family: var(--font-body); font-size: var(--fs-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--footer-muted); margin-top: 8px; } .footer-bottom { border-top: 1px solid var(--footer-line); padding: 16px 0; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: var(--fs-sm); color: var(--footer-muted); } .footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; } .footer-bottom nav a { text-decoration: none; color: var(--footer-muted); } .footer-bottom nav a:hover { color: var(--footer-text); } /* ═══════════════ FESTIVALS PAGE ═══════════════ */ :root { --cat-festival: #B8791E; --cat-festival-soft: #FBF0DC; --cat-jayanti: #B8542E; --cat-jayanti-soft: #FBE7DE; --cat-ekadashi: #3F5C8A; --cat-ekadashi-soft: #E4EAF4; --cat-navratri: #9C3D5E; --cat-navratri-soft: #F6E3EA; --cat-sankranti: #2E7B9E; --cat-sankranti-soft: #E0F0F5; --cat-pradosh: #6B4C8A; --cat-pradosh-soft: #ECE4F3; --cat-vrat: #5B7A52; --cat-vrat-soft: #E9EFE4; --cat-regional: #237A70; --cat-regional-soft: #DFF1EE; } .fest-search-wrap { position: relative; } .fest-search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); } .fest-search-wrap input { width: 100%; box-sizing: border-box; padding: 13px 16px 13px 42px; font-size: var(--fs-base); font-family: inherit; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); } .fest-search-wrap input:focus { outline: none; border-color: var(--accent-deep); } .fest-search-full { margin: 18px 0 16px; max-width: none; } .fest-cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; } .fest-pill { padding: 7px 15px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; cursor: pointer; } .fest-pill:hover { border-color: var(--ink); color: var(--ink); } .fest-pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .fest-pill.cat-festival.active { background: var(--cat-festival); border-color: var(--cat-festival); } .fest-pill.cat-jayanti.active { background: var(--cat-jayanti); border-color: var(--cat-jayanti); } .fest-pill.cat-ekadashi.active { background: var(--cat-ekadashi); border-color: var(--cat-ekadashi); } .fest-pill.cat-navratri.active { background: var(--cat-navratri); border-color: var(--cat-navratri); } .fest-pill.cat-sankranti.active { background: var(--cat-sankranti); border-color: var(--cat-sankranti); } .fest-pill.cat-pradosh.active { background: var(--cat-pradosh); border-color: var(--cat-pradosh); } .fest-pill.cat-vrat.active { background: var(--cat-vrat); border-color: var(--cat-vrat); } .fest-pill.cat-regional.active { background: var(--cat-regional); border-color: var(--cat-regional); } .fest-month-group { margin-bottom: 28px; } .fest-month-group[hidden] { display: none; } .fest-month-heading { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--ink); margin-bottom: 4px; padding-bottom: 10px; border-bottom: 2px solid var(--line); } /* Rows on this page reuse the homepage's .fest-row/.fest-list styling exactly (see the homepage rules earlier in this file) — same visual language sitewide, no separate grid/card system to keep in sync. */ .fest-row { border-left: 4px solid var(--cat-festival); padding-left: 12px; } .fest-row.cat-jayanti { border-left-color: var(--cat-jayanti); } .fest-row.cat-ekadashi { border-left-color: var(--cat-ekadashi); } .fest-row.cat-navratri { border-left-color: var(--cat-navratri); } .fest-row.cat-sankranti { border-left-color: var(--cat-sankranti); } .fest-row.cat-pradosh { border-left-color: var(--cat-pradosh); } .fest-row.cat-vrat { border-left-color: var(--cat-vrat); } .fest-row.cat-regional { border-left-color: var(--cat-regional); } .fest-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fest-cat-tag { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: var(--cat-festival-soft); color: var(--cat-festival); } .fest-row.cat-jayanti .fest-cat-tag { background: var(--cat-jayanti-soft); color: var(--cat-jayanti); } .fest-row.cat-ekadashi .fest-cat-tag { background: var(--cat-ekadashi-soft); color: var(--cat-ekadashi); } .fest-row.cat-navratri .fest-cat-tag { background: var(--cat-navratri-soft); color: var(--cat-navratri); } .fest-row.cat-sankranti .fest-cat-tag { background: var(--cat-sankranti-soft); color: var(--cat-sankranti); } .fest-row.cat-pradosh .fest-cat-tag { background: var(--cat-pradosh-soft); color: var(--cat-pradosh); } .fest-row.cat-vrat .fest-cat-tag { background: var(--cat-vrat-soft); color: var(--cat-vrat); } .fest-row.cat-regional .fest-cat-tag { background: var(--cat-regional-soft); color: var(--cat-regional); } .fest-tithi { font-size: var(--fs-meta); color: var(--accent-deep); margin-top: 3px; font-style: italic; } .fest-parana { font-size: var(--fs-meta); color: var(--cat-ekadashi); margin-top: 2px; font-weight: 600; } .fest-empty { text-align: center; color: var(--muted); padding: 40px 0; } /* ═══════════════ RAHU KAAL / CHOGHADIYA PAGES ═══════════════ */ .rk-hero { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px; padding: 24px 28px; margin-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; } .rk-hero-label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; width: 100%; } .rk-hero-time { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--ink); } .rk-hero-note { width: 100%; margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); } .chogh-hero-live { background: var(--good-soft); border-color: var(--good-deep); } .city-tag-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .city-tag-group.tier2 { margin-bottom: 8px; } .city-tag-subhead { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 20px 0 4px; } .city-tag { padding: 8px 16px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; text-decoration: none; transition: border-color .15s, color .15s, background .15s; } .city-tag:hover { border-color: var(--accent-deep); color: var(--accent-deep); background: var(--accent-soft); } /* Current Choghadiya period — animated highlighted border so it's obvious at a glance which row you're in right now, without reading every one. */ .chogh-live-row { position: relative; } .chogh-live-row td { border-top: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep); } .chogh-live-row td:first-child { border-left: 2px solid var(--accent-deep); } .chogh-live-row td:last-child { border-right: 2px solid var(--accent-deep); } .chogh-live-row { animation: pkv2-live-pulse 2s ease-in-out infinite; } .chogh-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-deep); margin-left: 6px; vertical-align: middle; animation: pkv2-live-dot 1.4s ease-in-out infinite; } @keyframes pkv2-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 121, 30, .25); } 50% { box-shadow: 0 0 0 4px rgba(184, 121, 30, .12); } } @keyframes pkv2-live-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.3); } } @media (prefers-reduced-motion: reduce) { .chogh-live-row, .chogh-live-dot { animation: none; } } /* ═══════════════ RASHIPHAL PAGE ═══════════════ */ .rp-intro { font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); max-width: 780px; margin-top: 14px; } .graha-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 22px; } @media (min-width: 700px) { .graha-grid { grid-template-columns: repeat(3, 1fr); } } .graha-chip { background: var(--paper); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; } .graha-name { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .graha-rashi { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label); color: var(--ink); } .rp-disclaimer { margin-top: 26px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; } .rp-disclaimer p { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); margin: 0; } .rp-disclaimer p + p { margin-top: 10px; } .rp-disclaimer p.rp-positive { color: var(--good-deep); font-weight: 500; } .rp-footnote { font-size: var(--fs-sm); color: var(--muted); text-align: center; } .rashi-section:nth-of-type(even) { background: var(--paper-soft); } .rashi-container { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; } @media (min-width: 700px) { .rashi-container { grid-template-columns: 160px 1fr; gap: 36px; } } .rashi-media { display: flex; justify-content: center; } .rashi-icon { width: 140px; height: 140px; object-fit: contain; } .rashi-name-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .rashi-name-row h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); color: var(--ink); margin: 0; } .rashi-common { font-weight: 400; color: var(--muted); font-size: var(--fs-label); } .rashi-sanskrit { font-size: var(--fs-label); color: var(--accent-deep); } .rashi-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-soft); } .rashi-meta strong { color: var(--ink); font-weight: 600; } .rashi-letters { margin-top: 14px; padding: 10px 14px; background: var(--accent-soft); border-radius: 8px; display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .rashi-letters-label { font-size: var(--fs-sm); color: var(--ink-soft); } .rashi-letters-value { font-weight: 700; color: var(--ink); font-size: var(--fs-label); } .rashi-text { margin-top: 18px; font-size: var(--fs-base); line-height: 1.75; color: var(--ink); max-width: 760px; } /* ═══════════════ CALENDAR PAGE ═══════════════ */ .cal-month-tags { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; margin-top: 18px; scrollbar-width: thin; } .cal-month-tag { flex: 0 0 auto; padding: 8px 18px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; text-decoration: none; transition: all .15s; } .cal-month-tag:hover { border-color: var(--accent-deep); color: var(--accent-deep); } .cal-month-tag.active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .cal-heading { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); color: var(--ink); text-align: center; margin: 18px 0 20px; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-weekday-head { text-align: center; font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-bottom: 8px; } .cal-cell { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 108px; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: inherit; overflow: hidden; transition: box-shadow .15s, transform .15s; } .cal-cell:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); border-color: var(--accent-deep); } .cal-cell-empty { background: transparent; border: none; min-height: 108px; } .cal-cell-top { display: flex; align-items: center; justify-content: space-between; } .cal-daynum { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); color: var(--ink); } .cal-tithi { font-size: 10px; color: var(--ink-soft); line-height: 1.3; } .cal-nakshatra { font-size: 10px; color: var(--muted); line-height: 1.3; } .cal-moon { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); flex-shrink: 0; box-sizing: border-box; } .cal-moon-full { background: var(--paper); box-shadow: inset 0 0 0 1px var(--paper), 0 0 0 1px var(--line); } .cal-moon-new { background: var(--ink); } .cal-fest-names { display: flex; flex-direction: column; gap: 1px; margin-top: auto; } .cal-fest-name-item { font-size: 9px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 5px; border-radius: 6px; background: var(--cat-festival-soft); color: var(--cat-festival); } .cal-has-fest.cat-jayanti .cal-fest-name-item { background: var(--cat-jayanti-soft); color: var(--cat-jayanti); } .cal-has-fest.cat-ekadashi .cal-fest-name-item { background: var(--cat-ekadashi-soft); color: var(--cat-ekadashi); } .cal-has-fest.cat-navratri .cal-fest-name-item { background: var(--cat-navratri-soft); color: var(--cat-navratri); } .cal-has-fest.cat-sankranti .cal-fest-name-item { background: var(--cat-sankranti-soft); color: var(--cat-sankranti); } .cal-has-fest.cat-pradosh .cal-fest-name-item { background: var(--cat-pradosh-soft); color: var(--cat-pradosh); } .cal-has-fest.cat-vrat .cal-fest-name-item { background: var(--cat-vrat-soft); color: var(--cat-vrat); } .cal-has-fest.cat-regional .cal-fest-name-item { background: var(--cat-regional-soft); color: var(--cat-regional); } .cal-fest-more { font-size: 8px; color: var(--muted); font-weight: 600; padding-left: 5px; } .cal-today { border: 2px solid var(--accent-deep); background: var(--accent-soft); } .cal-today .cal-daynum { color: var(--accent-deep); } .cal-has-fest { border-top: 4px solid var(--cat-festival); } .cal-has-fest.cat-jayanti { border-top-color: var(--cat-jayanti); } .cal-has-fest.cat-ekadashi { border-top-color: var(--cat-ekadashi); } .cal-has-fest.cat-navratri { border-top-color: var(--cat-navratri); } .cal-has-fest.cat-sankranti { border-top-color: var(--cat-sankranti); } .cal-has-fest.cat-pradosh { border-top-color: var(--cat-pradosh); } .cal-has-fest.cat-vrat { border-top-color: var(--cat-vrat); } .cal-has-fest.cat-regional { border-top-color: var(--cat-regional); } .cal-fest-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 9px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--cat-festival-soft); color: var(--cat-festival); } .cal-has-fest.cat-jayanti .cal-fest-tag { background: var(--cat-jayanti-soft); color: var(--cat-jayanti); } .cal-has-fest.cat-ekadashi .cal-fest-tag { background: var(--cat-ekadashi-soft); color: var(--cat-ekadashi); } .cal-has-fest.cat-navratri .cal-fest-tag { background: var(--cat-navratri-soft); color: var(--cat-navratri); } .cal-has-fest.cat-sankranti .cal-fest-tag { background: var(--cat-sankranti-soft); color: var(--cat-sankranti); } .cal-has-fest.cat-pradosh .cal-fest-tag { background: var(--cat-pradosh-soft); color: var(--cat-pradosh); } .cal-has-fest.cat-vrat .cal-fest-tag { background: var(--cat-vrat-soft); color: var(--cat-vrat); } .cal-has-fest.cat-regional .cal-fest-tag { background: var(--cat-regional-soft); color: var(--cat-regional); } .cal-fest-more { opacity: .8; } .cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; justify-content: center; } .cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-soft); } .cal-legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cat-festival); } .cal-legend-dot.cat-jayanti { background: var(--cat-jayanti); } .cal-legend-dot.cat-ekadashi { background: var(--cat-ekadashi); } .cal-legend-dot.cat-navratri { background: var(--cat-navratri); } .cal-legend-dot.cat-sankranti { background: var(--cat-sankranti); } .cal-legend-dot.cat-pradosh { background: var(--cat-pradosh); } .cal-legend-dot.cat-vrat { background: var(--cat-vrat); } .cal-legend-dot.cat-regional { background: var(--cat-regional); } @media (max-width: 700px) { .cal-grid { gap: 3px; } .cal-cell { min-height: 96px; padding: 5px 4px; border-radius: 5px; } .cal-tithi, .cal-nakshatra { font-size: 8px; } .cal-fest-name-item { font-size: 7px; padding: 1px 3px; } .cal-weekday-head { font-size: 9px; } } /* Calendar page: day-by-day detail list - same visual language as the Rashiphal page's rows */ html { scroll-behavior: smooth; } .cal-day-list { margin-top: 18px; } .cal-day-row { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; transition: background-color .4s; } @media (min-width: 700px) { .cal-day-row { grid-template-columns: 110px 1fr; gap: 30px; } } .cal-day-row:nth-of-type(even) { background: var(--paper-soft); } .cal-day-row:target { background: var(--accent-soft); } .cal-day-date-block { display: flex; flex-direction: row; align-items: baseline; gap: 8px; } @media (min-width: 700px) { .cal-day-date-block { flex-direction: column; align-items: center; gap: 2px; text-align: center; } } .cal-day-date-num { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; color: var(--ink); line-height: 1; } .cal-day-date-dow { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; } .cal-day-content { min-width: 0; } .cal-day-entry-body { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 760px) { .cal-day-entry-body { grid-template-columns: repeat(3, 1fr); } } .cal-day-label { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-bottom: 4px; } .cal-day-value { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); } .cal-day-none { font-weight: 400; color: var(--muted); font-style: italic; } .cal-day-until { font-weight: 500; color: var(--muted); } .cal-day-regional { font-size: var(--fs-meta); color: var(--ink-soft); font-style: italic; margin-top: 2px; } .cal-day-next { font-size: var(--fs-sm); color: var(--accent-deep); font-weight: 600; margin-top: 6px; } .cal-day-fest-tag { display: inline-block; font-size: var(--fs-sm); font-weight: 600; padding: 4px 10px; border-radius: 8px; background: var(--cat-festival-soft); color: var(--cat-festival); margin: 0 6px 6px 0; } .cal-day-fest-tag.cat-jayanti { background: var(--cat-jayanti-soft); color: var(--cat-jayanti); } .cal-day-fest-tag.cat-ekadashi { background: var(--cat-ekadashi-soft); color: var(--cat-ekadashi); } .cal-day-fest-tag.cat-navratri { background: var(--cat-navratri-soft); color: var(--cat-navratri); } .cal-day-fest-tag.cat-sankranti { background: var(--cat-sankranti-soft); color: var(--cat-sankranti); } .cal-day-fest-tag.cat-pradosh { background: var(--cat-pradosh-soft); color: var(--cat-pradosh); } .cal-day-fest-tag.cat-vrat { background: var(--cat-vrat-soft); color: var(--cat-vrat); } .cal-day-fest-tag.cat-regional { background: var(--cat-regional-soft); color: var(--cat-regional); } .cal-day-panchang-link { display: inline-block; margin-top: 14px; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-deep); text-decoration: none; } .cal-day-panchang-link:hover { text-decoration: underline; } /* ═══════════════ TARABALAM / CHANDRABALAM PAGES ═══════════════ */ .tb-nak-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 30px; } .tb-nak-pill { padding: 8px 16px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; cursor: pointer; } .tb-nak-pill:hover { border-color: var(--accent-deep); color: var(--accent-deep); } .tb-nak-pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .tb-panel[hidden] { display: none; } .tb-hero-bad { background: #FBE7DE; border-color: var(--cat-jayanti); } .tb-ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; } @media (min-width: 600px) { .tb-ref-grid { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 900px) { .tb-ref-grid { grid-template-columns: repeat(9, 1fr); } } .tb-ref-grid-12 { grid-template-columns: repeat(3, 1fr); } @media (min-width: 600px) { .tb-ref-grid-12 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 900px) { .tb-ref-grid-12 { grid-template-columns: repeat(6, 1fr); } } .tb-ref-cell { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-radius: 8px; text-align: center; } .tb-ref-cell.tb-good { background: var(--good-soft); } .tb-ref-cell.tb-bad { background: #FBE7DE; } .tb-ref-nak { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); } .tb-ref-tara { font-size: 10px; color: var(--ink-soft); } .tb-types-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; } @media (min-width: 700px) { .tb-types-grid { grid-template-columns: repeat(3, 1fr); } } .tb-type-card { padding: 16px; border-radius: 10px; display: flex; flex-direction: column; gap: 6px; } .tb-type-card.tb-good { background: var(--good-soft); } .tb-type-card.tb-bad { background: #FBE7DE; } .tb-type-num { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--ink); } .tb-type-name { font-weight: 700; font-size: var(--fs-label); color: var(--ink); } .tb-type-note { font-size: var(--fs-sm); color: var(--ink-soft); margin: 4px 0 0; } /* Chandrashtama 14-day window strip */ .cs-window-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; } @media (min-width: 700px) { .cs-window-row { grid-template-columns: repeat(14, 1fr); } } .cs-window-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 8px; background: var(--good-soft); text-align: center; } .cs-window-cell.cs-window-bad { background: #FBE7DE; } .cs-window-cell.cs-window-today { border: 2px solid var(--accent-deep); } .cs-window-date { font-size: 10px; font-weight: 700; color: var(--ink); } .cs-window-rashi { font-size: 9px; color: var(--ink-soft); } /* Sade Sati timeline */ .ss-timeline { display: flex; flex-direction: column; margin-top: 14px; } .ss-timeline-item { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .ss-timeline-date { font-weight: 700; color: var(--ink); font-size: var(--fs-sm); } .ss-timeline-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .ss-timeline-rashi { width: 100%; font-size: var(--fs-sm); color: var(--ink-soft); } .ss-retrograde-note { font-size: var(--fs-meta); color: var(--muted); font-style: italic; } /* ═══════════════ NAKSHATRA/RASHI FINDER ═══════════════ */ .nf-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin-top: 22px; padding: 20px; background: var(--paper-soft); border-radius: 10px; } .nf-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 180px; } .nf-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); } .nf-field input { padding: 10px 12px; font-size: var(--fs-base); font-family: inherit; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); box-sizing: border-box; } .nf-field input:focus { outline: none; border-color: var(--accent-deep); } .nf-required { color: var(--cat-jayanti); } .nf-samples-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; } @media (min-width: 700px) { .nf-samples-grid { grid-template-columns: repeat(3, 1fr); } } .nf-sample-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; } .nf-sample-label { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; } .nf-sample-value { font-weight: 700; color: var(--ink); font-size: var(--fs-label); } .nf-sample-rashi { font-size: var(--fs-sm); color: var(--ink-soft); } /* ═══════════════ PER-PAGE EXTRA TEXT BLOCKS ═══════════════ */ .pk-text-block-inner { max-width: 780px; font-size: var(--fs-base); line-height: 1.7; color: var(--ink-soft); } .pk-text-block-inner p { margin: 0 0 10px; } .pk-text-block-inner p:last-child { margin-bottom: 0; } [style*="text-align:center"] .pk-text-block-inner { margin-left: auto; margin-right: auto; } [style*="text-align:right"] .pk-text-block-inner { margin-left: auto; } .pk-notice-block .pk-text-block-inner { padding: 16px 20px; background: var(--accent-soft); border-left: 4px solid var(--accent-deep); border-radius: 0 8px 8px 0; } .pk-notice-block[style*="text-align:center"] .pk-text-block-inner, .pk-notice-block[style*="text-align:right"] .pk-text-block-inner { border-left: none; border-right: 4px solid var(--accent-deep); border-radius: 8px 0 0 8px; } .pk-notice-block[style*="text-align:center"] .pk-text-block-inner { border: none; border-top: 4px solid var(--accent-deep); border-radius: 0; } /* ═══════════════ KUNDALI CHART ═══════════════ */ .kundali-chart-wrap { max-width: 420px; margin: 20px auto; } .kundali-chart-svg { width: 100%; height: auto; } .kundali-rashi-label { font-size: 11px; fill: var(--muted); font-weight: 700; } .kundali-planet-label { font-size: 13px; fill: var(--ink); font-weight: 700; } .kundali-planet-label.kundali-retro { fill: var(--cat-jayanti); }