/* jyotish-calculator.css */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap'); .jyotish-calc-root { /* ── Vedic Om Center design tokens ─────────────────────────────────── */ --jc-emerald:#1F6F68; --jc-teal:#2F8C82; --jc-jade:#7FB8AE; --jc-milk:#FAF8F3; --jc-white:#FFFFFF; --jc-gold:#C9A227; /* matte gold — decorative accents only (1–2%) */ --jc-text:#303030; --jc-muted:#6B6B6B; --jc-border:#E6ECE9; --jc-tint:#EAF4F1; /* soft jade wash — hovers & subtle fills */ --jc-sel:#DDEBE8; /* selected / current rows */ --jc-error:#C0392B; /* semantic aliases kept so all existing rules cascade unchanged */ --jc-bg:var(--jc-milk); --jc-card:var(--jc-milk); --jc-accent:var(--jc-emerald); --jc-accent-light:var(--jc-teal); --jc-shadow:0 8px 30px rgba(15,55,50,.12); --jc-shadow-sm:0 2px 12px rgba(15,55,50,.08); --jc-radius:20px; font-family:'Inter','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; color:var(--jc-text); /* One cosmic background for the whole platform — the same starry nebula used on the charts (assets/img/fon-joti.jpg). Relative URL resolves from this stylesheet's folder, so it is literally the same artwork, no JS. */ background: #0C453F url('img/fon-joti.jpg') center center / cover no-repeat; border-radius:24px; padding:28px; max-width:1200px; margin:0 auto; box-sizing:border-box; position:relative; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* faint starfield + sacred geometry over the cosmic ground (≈4–8% opacity) */ .jyotish-calc-root::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:24px; background-image: radial-gradient(circle, rgba(255,255,255,.9) 0.7px, transparent 0.8px), radial-gradient(circle, rgba(255,255,255,.6) 0.5px, transparent 0.6px); background-size:130px 130px, 210px 190px; background-position:0 0, 70px 95px; opacity:.11; } .jyotish-calc-root::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:24px; background: radial-gradient(circle at 50% 42%, transparent 0 34%, rgba(127,184,174,.14) 34% 34.4%, transparent 34.4%), radial-gradient(circle at 50% 42%, transparent 0 24%, rgba(127,184,174,.12) 24% 24.4%, transparent 24.4%), radial-gradient(circle at 50% 42%, transparent 0 14%, rgba(127,184,174,.10) 14% 14.4%, transparent 14.4%); opacity:.5; } .jyotish-calc-root > *{ position:relative; z-index:1; } .jyotish-calc-root * { box-sizing: border-box; } .jyotish-calc-root button { margin: 0; font-family: inherit; font-size: inherit; line-height: normal; vertical-align: middle; } .jc-brand-footer { text-align: center; margin-top: 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); } .jc-brand-footer::before { content: ''; display: block; width: 60px; height: 1px; margin: 0 auto 10px; background: var(--jc-gold); opacity: .6; } /* Every field the same roundness as the calendar/geo icon buttons (13px). */ .jc-input, .jc-select, .jc-cal-btn, .jc-geo-btn, .jc-input[type="date"], .jc-input[type="time"], .jc-input[type="datetime-local"] { border-radius: 13px !important; } .jc-form-container { max-width: 760px; margin: 0 auto; } .jc-step-row { display: flex; gap: 20px; align-items: flex-start; } .jc-step-row > .jc-step { flex: 1; min-width: 0; } .jc-place-extras { margin-top: 10px; } .jc-header { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; margin-bottom: 16px; background: var(--jc-card); border-radius: 10px; } .jc-header-icon { color: var(--jc-accent-light); font-size: 22px; } .jc-header-text { font-family: 'Trajan Pro', Georgia, serif; letter-spacing: 2px; font-weight: bold; color: var(--jc-accent); text-align: center; font-size: 18px; } .jc-step { display: flex; gap: 12px; margin-bottom: 14px; } .jc-step-num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; background: #ddebe8; color: var(--jc-accent); border: 1px solid var(--jc-accent-light); display: flex; align-items: center; justify-content: center; font-weight: bold; } .jc-step-body { flex: 1; min-width: 0; } .jc-step-title { font-weight: bold; margin-bottom: 5px; text-align: center; } .jc-input, .jc-select { width: 100%; height: 42px; padding: 8px 10px; border: 1px solid var(--jc-border); border-radius: 8px; background: #fff; color: var(--jc-text); font-size: 14px; font-family: inherit; margin-bottom: 4px; } .jc-input.jc-small { width: 48%; display: inline-block; margin-right: 2%; } .jc-input.jc-muh-date { min-width: 150px; width: auto; } .jc-input.jc-muh-time { min-width: 120px; width: auto; } /* Група «Додаткові параметри» в налаштуваннях */ .jc-ds-group { margin-top: 4px; } .jc-ds-group-title { font-size: 12px; font-weight: 700; color: var(--jc-jade); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; } .jc-ds-group-row { display: flex; flex-wrap: wrap; gap: 10px 18px; } /* Швидкі аспекти над картами */ .jc-chart-asp-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; white-space: nowrap; } .jc-chart-asp-mode { flex: 0 1 auto; width: auto; min-width: 200px; } .jc-select { width: auto; min-width: 90px; } /* The Google Places autocomplete web component (gmp-place-autocomplete) has its own internal shadow-DOM sizing that doesn't fully follow our .jc-input padding rules. NOTE: do NOT use overflow:hidden here — it clips the suggestions dropdown and breaks city search entirely. */ gmp-place-autocomplete.jc-input { height: 42px; display: block; padding: 0; border: 1px solid var(--jc-border); border-radius: 8px; } .jc-link { color: var(--jc-error); text-decoration: underline; font-size: 14px; display: inline-block; margin-bottom: 6px; } .jc-manual-toggle { color: var(--jc-emerald); text-decoration: none; } .jc-manual-toggle:hover { text-decoration: underline; } .jc-tz-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; background: var(--jc-tint); border: 1px solid var(--jc-border); border-radius: 10px; padding: 10px 14px; margin: -5px 0 25px; } .jc-note-text { font-size: 13.5px; color: var(--jc-text); } .jc-note-icon { margin-right: 2px; } .jc-note { font-size: 13px; color: var(--jc-muted); background: var(--jc-card); border-radius: 8px; padding: 10px 12px; margin: 10px 0; } .jc-place-status { font-size: 13px; color: var(--jc-accent); min-height: 18px; white-space: pre-line; } .jc-manual-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; } .jc-manual-row .jc-select { flex: 0 0 auto; } .jc-chart-type { text-align: center; } .jc-ct-list { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .jc-ct-item { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; text-align: left; cursor: pointer; background: #fff; border: 1.5px solid var(--jc-border); border-radius: 12px; } .jc-ct-item:hover { background: var(--jc-card); } .jc-ct-radio { flex: none; width: 16px; height: 16px; border-radius: 50%; margin-top: 3px; border: 2px solid var(--jc-border); box-sizing: border-box; } .jc-ct-selected .jc-ct-radio { border-color: var(--jc-emerald); background: var(--jc-emerald); } .jc-ct-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--jc-tint); display: flex; align-items: center; justify-content: center; font-size: 17px; } .jc-ct-body { flex: 1; min-width: 0; } .jc-ct-title { font-weight: 700; } .jc-ct-sub { font-weight: 400; color: var(--jc-muted); font-size: 12.5px; } .jc-ct-desc { color: var(--jc-muted); font-size: 12.5px; margin-top: 3px; line-height: 1.35; } @media (max-width: 560px) { .jc-ct-list { grid-template-columns: 1fr; } } .jc-submit { display: block; width: 100%; padding: 14px; margin-top: 8px; border: none; border-radius: 10px; background: linear-gradient(90deg, var(--jc-accent), var(--jc-accent-light)); color: #fff; font-size: 17px; font-weight: bold; cursor: pointer; letter-spacing: 1px; } .jc-submit:hover { filter: brightness(1.05); } .jc-edit-data-btn { display: inline-block; margin-bottom: 14px; padding: 8px 16px; border: 1px solid var(--jc-accent); border-radius: 8px; background: #fff; color: var(--jc-accent); font-size: 14px; font-weight: bold; cursor: pointer; } .jc-edit-data-btn:hover { background: var(--jc-card); } .jc-errors { background: #fdecea; border: 1px solid var(--jc-error); color: var(--jc-error); border-radius: 8px; padding: 12px 14px; margin-top: 16px; font-size: 14px; } .jc-results { margin-top: 26px; } .jc-summary { background: var(--jc-card); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; } .jc-summary-title { font-size: 18px; font-weight: bold; color: var(--jc-accent); margin-bottom: 6px; } .jc-muted { color: var(--jc-muted); font-size: 12px; margin-top: 6px; } .jc-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--jc-border); margin-bottom: 16px; flex-wrap: wrap; } .jc-tab { padding: 9px 14px; cursor: pointer; color: var(--jc-muted); border-bottom: 3px solid transparent; font-size: 14px; } .jc-tab.active { color: var(--jc-accent); border-bottom-color: var(--jc-accent); font-weight: bold; } .jc-tab-group { position: relative; } .jc-tab-dropdown { position: absolute; top: 100%; left: 0; z-index: 100; background: #fff; border: 1px solid var(--jc-border); border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,.1); min-width: 190px; padding: 6px 0; margin-top: 2px; } .jc-tab-dropdown-item { padding: 8px 16px; font-size: 14px; color: var(--jc-text); cursor: pointer; white-space: nowrap; } .jc-tab-dropdown-item:hover { background: var(--jc-card); color: var(--jc-accent); } .jc-chart-controls { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .jc-display-settings { display: flex; gap: 10px; margin: 6px 0 14px; flex-wrap: wrap; align-items: center; } .jc-checkbox-label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--jc-text); cursor: pointer; } .jc-chart-holder { display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center; border-radius: 14px; padding: 14px; max-width: 420px; margin: 0 auto; } svg.jc-chart { width: 100%; height: auto; max-width: 420px; display: block; } .jc-charts-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .jc-chart-col { flex: 1 1 320px; min-width: 280px; max-width: 460px; } .jc-chart-col-title { text-align: center; font-weight: bold; color: var(--jc-accent); margin-bottom: 6px; } .jc-chart-col-varga-select { display: block; margin: 0 auto 6px; font-weight: bold; color: var(--jc-accent); text-align: center; max-width: 100%; } .jc-table { width: 100%; border-collapse: collapse; font-size: 14px; } .jc-table th, .jc-table td { padding: 8px 10px; border-bottom: 1px solid var(--jc-border); text-align: left; } .jc-table th { color: var(--jc-accent); font-weight: bold; } .jc-asc-row { background: var(--jc-card); font-weight: bold; } .jc-fav { color: #2e7d32; font-weight: bold; } .jc-unfav { color: var(--jc-muted); } /* Dasha tree — lazy, arbitrary depth (Vimshottari up to 6 levels). Larger, evenly-sized text for dates and planet names for readability. */ .jc-dtree.jc-dlevel-0 { border: 1px solid var(--jc-border); border-radius: 8px; overflow: hidden; } .jc-dnode { border-bottom: 1px solid var(--jc-border); } .jc-dnode:last-child { border-bottom: none; } .jc-dnode-head { display: flex; align-items: baseline; gap: 12px; padding: 11px 14px; background: #fff; font-size: 15px; line-height: 1.35; } .jc-dnode-head.jc-expandable { cursor: pointer; } .jc-dnode-head.jc-expandable:hover { background: #eaf4f1; } .jc-dnode.jc-current > .jc-dnode-head { background: #ddebe8; } .jc-dnode.jc-current > .jc-dnode-head .jc-dnode-lord { font-weight: 700; } .jc-dnode-caret { color: var(--jc-accent); font-size: 12px; width: 12px; flex: none; transition: transform .15s ease; } .jc-dnode.is-open > .jc-dnode-head .jc-dnode-caret { transform: rotate(90deg); } .jc-dnode-caret-leaf { color: var(--jc-border); } .jc-dnode-lord { font-weight: 600; flex: 1 1 auto; min-width: 0; } .jc-dnode-dates { color: var(--jc-muted); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; } .jc-dnode-years { color: var(--jc-muted); white-space: nowrap; min-width: 82px; text-align: right; } .jc-dnode-children { display: none; } .jc-dnode-children.open { display: block; } /* progressive indent + gentle depth shading */ .jc-dnode-l1 > .jc-dnode-head { padding-left: 32px; background: #fcfdfc; } .jc-dnode-l2 > .jc-dnode-head { padding-left: 50px; background: #f6faf9; } .jc-dnode-l3 > .jc-dnode-head { padding-left: 68px; background: #eff6f4; } .jc-dnode-l4 > .jc-dnode-head { padding-left: 86px; background: #e9f2ef; } .jc-dnode-l5 > .jc-dnode-head { padding-left: 104px; background: #e3eeea; } .jc-dnode-l1.jc-current > .jc-dnode-head, .jc-dnode-l2.jc-current > .jc-dnode-head, .jc-dnode-l3.jc-current > .jc-dnode-head, .jc-dnode-l4.jc-current > .jc-dnode-head, .jc-dnode-l5.jc-current > .jc-dnode-head { background: #ddebe8; } /* Chart SVG styling */ .jc-chart .jc-outer { fill: transparent; stroke: #ffffff; stroke-width: 2; } .jc-chart .jc-line { stroke: #ffffff; stroke-width: 1.4; } .jc-chart .jc-center { fill: transparent; } .jc-chart .jc-sign { fill: #cdeee6; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } .jc-chart .jc-asc { fill: #e9dca8; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } .jc-chart .jc-asc-box { fill: none; stroke: #e9dca8; stroke-width: 2; } .jc-chart .jc-planet { fill: #ffffff; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } .jc-chart .jc-sign, .jc-chart .jc-asc, .jc-chart .jc-planet, .jc-chart .jc-house-num { paint-order: stroke; stroke: rgba(0, 0, 0, 0.65); stroke-width: 2.5px; stroke-linejoin: round; } .jc-chart .jc-house-num { fill: #d6ece6; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; } .jc-chart .jc-dignity-exalted { fill: #6fe07a; font-weight: bold; } .jc-chart .jc-dignity-debil { fill: #ff8a7a; font-weight: bold; } .jc-chart .jc-dignity-own { fill: #8ecbff; font-weight: bold; } .jc-chart .jc-dignity-moolatrikona { fill: #e2a6ff; font-weight: bold; } .jc-dignity-exalted { color: #1e8449; } .jc-dignity-debil { color: #c0392b; } .jc-dignity-own { color: #2471a3; } .jc-dignity-moolatrikona { color: #7d3c98; } @media (max-width: 480px) { .jyotish-calc-root { padding: 16px; } .jc-step { gap: 10px; } .jc-input.jc-small { width: 100%; margin-right: 0; } .jc-step-row { flex-direction: column; gap: 0; } } @media (max-width: 760px) { .jc-charts-row { flex-direction: column; align-items: center; } .jc-chart-col { width: 100%; max-width: 420px; } } /* Date input row + calendar picker */ .jc-date-row { display:flex; gap:6px; align-items:center; } .jc-input.jc-date-text { flex: 0 1 240px; min-width:0; } .jc-cal-wrap { position:relative; flex:0 0 auto; } .jc-cal-btn { height:42px; width:42px; border:1px solid var(--jc-border); border-radius:8px; background:#fff; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center; padding:0; transition:background .15s; } .jc-cal-btn:hover { background:var(--jc-card); } .jc-picker { position:absolute; right:0; top:48px; z-index:1000; background:#fff; border:1px solid var(--jc-border); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.12); width:236px; padding:8px; font-family:Georgia,serif; box-sizing:border-box; overflow:hidden; } .jc-picker * { box-sizing:border-box; } .jc-picker-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .jc-picker-month { font-weight:bold; color:var(--jc-accent); font-size:14px; } .jc-picker-link { cursor:pointer; } .jc-picker-link:hover { text-decoration:underline; } .jc-picker-nav { background:none; border:none; cursor:pointer; font-size:16px; color:var(--jc-accent); padding:2px 6px; border-radius:6px; flex-shrink:0; } .jc-picker-nav:hover { background:var(--jc-card); } .jc-picker-days-header { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; font-size:11px; color:var(--jc-muted); margin-bottom:2px; } .jc-picker-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; } .jc-picker-grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; } .jc-picker-empty { height:26px; min-width:0; } .jc-picker-day { height:26px; width:100%; min-width:0; border:none; background:none; border-radius:5px; cursor:pointer; font-size:12px; font-family:inherit; color:var(--jc-text); padding:0; } .jc-picker-day:hover { background:var(--jc-card); } .jc-picker-cell { height:34px; width:100%; min-width:0; border:none; background:none; border-radius:6px; cursor:pointer; font-size:13px; font-family:inherit; color:var(--jc-text); padding:0; } .jc-picker-cell:hover { background:var(--jc-card); } .jc-picker-muted { color:var(--jc-muted); opacity:.55; } .jc-picker-today { font-weight:bold; color:var(--jc-accent); } .jc-picker-sel { background:var(--jc-accent) !important; color:#fff !important; } .jc-picker-tabs { display:flex; gap:4px; margin-bottom:8px; } .jc-picker-tab { flex:1 1 0; border:1px solid var(--jc-border); background:var(--jc-bg,#faf8f3); border-radius:6px; padding:6px 4px; font-size:12px; font-family:inherit; color:var(--jc-text); cursor:pointer; } .jc-picker-tab:hover { background:var(--jc-card); } .jc-picker-tab-active { background:var(--jc-accent); color:#fff; border-color:var(--jc-accent); } .jc-time-stepper-row { display:flex; justify-content:center; gap:14px; padding:10px 0 4px; } .jc-time-stepper-col { display:flex; flex-direction:column; align-items:center; gap:4px; } .jc-time-stepper-btn { border:1px solid var(--jc-border); background:none; border-radius:6px; width:34px; height:24px; font-size:11px; color:var(--jc-accent); cursor:pointer; } .jc-time-stepper-btn:hover { background:var(--jc-card); } .jc-time-stepper-value { font-size:20px; font-weight:bold; color:var(--jc-text); min-width:34px; text-align:center; } .jc-time-stepper-label { font-size:11px; color:var(--jc-muted); } /* Geolocation button (reuses calendar button style) */ .jc-geo-btn { height:42px; width:42px; border:1px solid var(--jc-border); border-radius:8px; background:#fff; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center; padding:0; transition:background .15s; flex:0 0 auto; } .jc-geo-btn:hover { background:var(--jc-card); } .jc-geo-btn:disabled { opacity:.5; cursor:wait; } /* ── Prashna (horary) helper panel ───────────────────────────── */ .jc-prashna .jc-note { margin-bottom: 12px; } .jc-prashna-controls { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 16px; } .jc-prashna-controls label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--jc-text); } .jc-prashna-controls select.jc-small, .jc-prashna-controls input.jc-small { width: auto; min-width: 150px; } .jc-prashna-card { border: 1px solid var(--jc-border); border-radius: 10px; margin-bottom: 14px; overflow: hidden; background: #fff; } .jc-prashna-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; background: #faf8f3; border-bottom: 1px solid var(--jc-border); } .jc-prashna-card-title { font-weight: 700; font-size: 15px; color: var(--jc-accent); } .jc-prashna-card-body { padding: 12px 14px; } .jc-kv { display: flex; gap: 10px; padding: 4px 0; font-size: 14px; line-height: 1.4; border-bottom: 1px dotted var(--jc-border); } .jc-kv:last-child { border-bottom: none; } .jc-kv-k { flex: 0 0 46%; color: var(--jc-muted); } .jc-kv-v { flex: 1; font-weight: 500; } .jc-lean { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .jc-lean-yes { background: #d9f2df; color: #1a7f37; } .jc-lean-no { background: #fbe0e0; color: #b42318; } .jc-lean-unclear { background: #eee7d6; color: #8a6d3b; } .jc-subhead { margin: 12px 0 6px; font-weight: 600; font-size: 14px; } .jc-good { color: #1a7f37; } .jc-bad { color: #b42318; } .jc-info-btn { display: inline-block; width: 15px; height: 15px; line-height: 15px; border-radius: 50%; background: var(--jc-border); color: #666; font-size: 11px; text-align: center; cursor: pointer; font-style: normal; user-select: none; } .jc-info-btn:hover { background: var(--jc-emerald); color: #fff; } .jc-info-pop { position: absolute; z-index: 20; top: 20px; left: 0; width: 260px; max-width: 70vw; background: #fff; border: 1px solid var(--jc-border); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-weight: normal; color: var(--jc-text); box-shadow: 0 4px 14px rgba(0,0,0,.15); } .jc-table.jc-compact { width: 100%; border-collapse: collapse; font-size: 13px; } .jc-table.jc-compact th, .jc-table.jc-compact td { padding: 5px 8px; border-bottom: 1px solid var(--jc-border); text-align: left; } .jc-muhurta-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .jc-muhurta-card { border: 1.5px solid var(--jc-border); border-radius: 14px; padding: 14px 16px; background: var(--jc-white); transition: box-shadow .15s ease, transform .12s ease; } .jc-muhurta-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); transform: translateY(-2px); } .jc-muhurta-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .jc-muhurta-dot { font-size: 15px; } .jc-muhurta-pct { font-weight: 700; font-size: 16px; } .jc-muhurta-stars { margin-left: auto; color: #d4a017; letter-spacing: 1px; } .jc-muhurta-card-time { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; } .jc-muhurta-card-reasons { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--jc-muted); } .jc-muhurta-card-reasons li { margin-bottom: 2px; } @media (max-width: 560px) { .jc-muhurta-card-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .jc-kv { flex-direction: column; gap: 2px; } .jc-kv-k { flex-basis: auto; } } /* ── Rotate Chart / Bhava View ───────────────────────────────── */ .jc-rotate-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 34px; padding: 5px 12px; margin: 8px 0 4px; border: 1px solid var(--jc-border); border-radius: 8px; background: #f2f7f5; font-size: 13px; } .jc-rot-hint { font-size: 12px; } .jc-rot-active { color: var(--jc-accent); font-weight: 600; } .jc-rot-reset { margin-left: auto; padding: 4px 10px; font-size: 12.5px; cursor: pointer; border: 1px solid var(--jc-accent); border-radius: 6px; background: #fff; color: var(--jc-accent); font-family: inherit; } .jc-rot-reset:hover { background: var(--jc-accent); color: #fff; } .jc-sign-clickable { cursor: pointer; } .jc-sign-clickable:hover { fill: #ead79a; font-weight: 700; } @keyframes jc-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } .jc-panels.jc-fade-in { animation: jc-fade-in .15s ease-out; } @media (max-width: 560px) { .jc-rot-reset { margin-left: 0; } } /* ── База знань (Knowledge Base) ─────────────────────────────── */ .jc-results-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .jc-kb-open-btn { padding: 6px 14px; font-size: 13px; cursor: pointer; font-family: inherit; border: 1px solid var(--jc-border); border-radius: 6px; background: #fff; color: var(--jc-text); } .jc-kb-open-btn:hover { border-color: var(--jc-accent); color: var(--jc-accent); } .jc-kb-term { color: var(--jc-accent); cursor: pointer; border-bottom: 1px dotted var(--jc-accent); } .jc-kb-term:hover { background: #eaf4f1; } .jc-kb-overlay { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(12, 34, 31, .5); } .jc-kb-overlay.open { display: block; } .jc-kb-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(520px, 94vw); background: #ffffff; box-shadow: -6px 0 24px rgba(0,0,0,.18); display: flex; flex-direction: column; padding: 16px 18px; box-sizing: border-box; animation: jc-kb-slide .18s ease-out; } @keyframes jc-kb-slide { from { transform: translateX(24px); opacity: .5; } to { transform: none; opacity: 1; } } .jc-kb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .jc-kb-title { font-weight: 700; font-size: 16px; color: var(--jc-accent); } .jc-kb-close { border: none; background: none; font-size: 20px; cursor: pointer; color: var(--jc-muted); line-height: 1; } .jc-kb-search { width: 100%; margin-bottom: 12px; } .jc-kb-body { overflow-y: auto; flex: 1; font-size: 14px; line-height: 1.5; } .jc-kb-list { display: flex; flex-direction: column; gap: 2px; } .jc-kb-list-item { text-align: left; padding: 8px 10px; border: none; background: none; cursor: pointer; border-radius: 6px; font-family: inherit; font-size: 14px; color: var(--jc-text); } .jc-kb-list-item:hover { background: #eaf4f1; color: var(--jc-accent); } .jc-kb-entry-title { font-size: 18px; font-weight: 700; color: var(--jc-accent); margin-bottom: 2px; } .jc-kb-summary { margin: 10px 0; } .jc-kb-fields { margin: 12px 0; } .jc-kb-img { max-width: 100%; border-radius: 8px; margin: 10px 0; } .jc-kb-content { margin-top: 12px; } .jc-kb-content img { max-width: 100%; height: auto; border-radius: 8px; } .jc-kb-content table { width: 100%; border-collapse: collapse; } .jc-kb-book { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--jc-gold); background: var(--jc-tint); border-radius: 8px; } .jc-kb-content th, .jc-kb-content td { border: 1px solid var(--jc-border); padding: 5px 8px; } .jc-kb-todo { margin-top: 14px; font-size: 12px; font-style: italic; } /* --- Енциклопедичний вигляд статей (накшатри тощо): читається як книга --- */ /* Компактний блок базових характеристик — «чіпи», а не велика таблиця. */ .jc-kb-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; } .jc-kb-fact { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border: 1px solid var(--jc-border); border-radius: 10px; background: var(--jc-card); min-width: 92px; } .jc-kb-fact-k { font-size: 11px; color: var(--jc-muted); text-transform: uppercase; letter-spacing: .03em; } .jc-kb-fact-v { font-size: 14.5px; font-weight: 600; color: var(--jc-text); } /* Повноцінні розділи-статті з нормальною типографікою й відступами. */ .jc-kb-section { margin: 20px 0 0; } .jc-kb-section-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--jc-accent); padding-bottom: 5px; border-bottom: 1px solid var(--jc-border); } .jc-kb-article { font-size: 15px; line-height: 1.7; color: var(--jc-text); } .jc-kb-article p { margin: 0 0 12px; } .jc-kb-article p:last-child { margin-bottom: 0; } .jc-kb-article strong { color: var(--jc-text); font-weight: 700; } .jc-kb-note { background: var(--jc-tint); border-left: 3px solid var(--jc-accent-light); border-radius: 6px; padding: 10px 14px; margin: 4px 0 12px !important; } .jc-kb-list { margin: 0 0 12px; padding-left: 22px; } .jc-kb-list li { margin: 0 0 6px; line-height: 1.6; } .jc-kb-list li:last-child { margin-bottom: 0; } /* Пади — вертикальні блоки замість рядків таблиці. */ .jc-kb-pada { margin: 0 0 12px; } .jc-kb-pada:last-child { margin-bottom: 0; } .jc-kb-pada-h { font-weight: 600; color: var(--jc-accent); margin-bottom: 3px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .jc-kb-pada-theme { font-weight: 600; font-size: 12px; color: var(--jc-text); background: var(--jc-tint); border: 1px solid var(--jc-border); border-radius: 999px; padding: 1px 9px; } .jc-kb-pada p { margin: 0; line-height: 1.6; } @media (max-width: 640px) { .jc-kb-fact { flex: 1 1 calc(50% - 8px); min-width: 0; } .jc-kb-article { font-size: 15.5px; } } .jc-kb-back { margin-top: 16px; padding: 6px 12px; cursor: pointer; font-family: inherit; border: 1px solid var(--jc-border); border-radius: 6px; background: #fff; } /* ── Спалені планети + підказка при наведенні ────────────────── */ .jc-chart .jc-combust { fill: #ff8c1a; } .jc-chart-panel { position: relative; } .jc-chart-tip { display: none; position: absolute; z-index: 50; pointer-events: none; max-width: 260px; padding: 8px 11px; border-radius: 8px; white-space: pre-line; background: #ffffff; color: #444444; border: 1px solid var(--jc-border); font-size: 12.5px; line-height: 1.45; box-shadow: 0 4px 14px rgba(0,0,0,.18); } .jc-chart-tip.open { display: block; } .jc-chart [data-tip] { cursor: help; } /* ── Додаткові небесні об’єкти ───────────────────────────────── */ .jc-ext-toggles { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 14px; padding: 10px 12px; border: 1px solid var(--jc-border); border-radius: 8px; background: #faf8f3; } .jc-ext-toggle { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; } .jc-ext-missing { border: 1px dashed var(--jc-border); border-radius: 8px; padding: 8px 12px; background: #faf8f3; } .jc-ext-missing-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 5px 0; font-size: 13px; border-bottom: 1px dotted var(--jc-border); } .jc-ext-missing-row:last-child { border-bottom: none; } .jc-ext-missing-name { font-weight: 600; min-width: 130px; } /* ── Підвкладки таблиці небесних тіл ─────────────────────────── */ .jc-subtabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--jc-border); } .jc-subtab { padding: 7px 14px; cursor: pointer; font-size: 14px; color: var(--jc-muted); border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; margin-bottom: -1px; } .jc-subtab:hover { color: var(--jc-accent); background: #faf8f3; } .jc-subtab.active { color: var(--jc-accent); font-weight: 600; background: #fff; border-color: var(--jc-border); border-bottom-color: #fff; } .jc-subtab-body.jc-fade-in { animation: jc-fade-in .15s ease-out; } @media (max-width: 560px) { .jc-subtab { padding: 6px 10px; font-size: 13px; } } /* ── Панель діапазону висхідного знака ───────────────────────── */ .jc-lagna-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--jc-border); border-radius: 8px; background: #faf8f3; font-size: 13.5px; } .jc-lagna-btn { border: 1px solid var(--jc-border); background: #fff; border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; padding: 5px 9px; } .jc-lagna-btn:hover { border-color: var(--jc-accent); } .jc-lagna-range { flex: 1; min-width: 200px; } /* ── Світла карта Раші + кольорове кодування станів планет ───── */ /* Кольори винесено в змінні — їх легко перевизначити в темі сайту. */ .jc-chart-holder.jc-chart-light { --jc-ch-text: #444444; /* графітовий підпис планети */ --jc-ch-halo: #ffffff; /* білий фон-обведення замість чорного */ --jc-ch-line: #c9d3ce; --jc-ch-sign: #5b6b66; --jc-ch-house: #8a968f; --jc-ch-asc: #1f6f68; --jc-ch-exalted: #1f66c9; /* екзальтація — синій (п.4) */ --jc-ch-neecha: #d13b2e; /* падіння — червоний (п.4) */ --jc-ch-combust: #f08a24; /* спалення — помаранчевий контур (п.4) */ --jc-ch-own: #2e7d5b; --jc-ch-moola: #7d3c98; background-color: #ffffff; border: 1px solid var(--jc-border); } .jc-chart-light .jc-chart .jc-outer { stroke: var(--jc-ch-line); } .jc-chart-light .jc-chart .jc-line { stroke: var(--jc-ch-line); } .jc-chart-light .jc-chart .jc-planet { fill: var(--jc-ch-text); } .jc-chart-light .jc-chart .jc-sign { fill: var(--jc-ch-sign); } .jc-chart-light .jc-chart .jc-house-num { fill: var(--jc-ch-house); } .jc-chart-light .jc-chart .jc-asc { fill: var(--jc-ch-asc); } .jc-chart-light .jc-chart .jc-asc-box { stroke: var(--jc-ch-asc); } .jc-chart-light .jc-chart .jc-sign, .jc-chart-light .jc-chart .jc-asc, .jc-chart-light .jc-chart .jc-planet, .jc-chart-light .jc-chart .jc-house-num { stroke: var(--jc-ch-halo); /* білий ореол замість чорного */ stroke-width: 2.5px; } /* Стани планет — видно одразу на карті, без відкривання таблиць */ .jc-chart-light .jc-chart .jc-dignity-exalted { fill: var(--jc-ch-exalted); } .jc-chart-light .jc-chart .jc-dignity-debil { fill: var(--jc-ch-neecha); } .jc-chart-light .jc-chart .jc-dignity-own { fill: var(--jc-ch-own); } .jc-chart-light .jc-chart .jc-dignity-moolatrikona { fill: var(--jc-ch-moola); } /* Спалення — помаранчевий контур навколо підпису */ .jc-chart-light .jc-chart .jc-combust { fill: var(--jc-ch-combust); stroke: var(--jc-ch-combust); stroke-width: 0.7px; paint-order: fill; } .jc-chart .jc-sav { fill: #2e7d5b; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: .9; } .jc-chart .jc-sav-overlay { fill: #f2c94c; stroke: rgba(0,0,0,.5); stroke-width: 1.5px; paint-order: stroke; opacity: 1; } .jc-chart-light .jc-chart .jc-sav-overlay { fill: #c79400; stroke: var(--jc-ch-halo); stroke-width: 2px; } .jc-chart-light .jc-chart .jc-sav { fill: #2e7d5b; stroke: var(--jc-ch-halo); stroke-width: 2px; paint-order: stroke; } .jc-chart .jc-sav-big { opacity: 1; fill: #ffffff; stroke: rgba(0,0,0,.55); stroke-width: 2px; paint-order: stroke; } .jc-chart-light .jc-chart .jc-sav-big { fill: #ffffff; stroke: rgba(0,0,0,.6); stroke-width: 3px; } /* ── Аспекти на карті (п.12) ─────────────────────────────────── */ .jc-chart .jc-aspect-line { stroke: rgba(60,120,110,.45); stroke-width: 1; stroke-dasharray: 4 3; } .jc-chart-light .jc-chart .jc-aspect-line { stroke: rgba(50,110,100,.4); } .jc-chart .jc-aspect-line:hover { stroke: var(--jc-accent); stroke-width: 1.8; stroke-dasharray: none; } /* Аспекти: приглушені скорочення планет усередині аспектованого дому */ .jc-chart .jc-aspect-abbr { fill: #9aa0ad; font-weight: normal; cursor: help; } .jc-chart-light .jc-chart .jc-aspect-abbr { fill: #a29a8c; } .jc-chart .jc-aspect-abbr:hover { fill: var(--jc-accent); font-weight: bold; } /* Нерухомі зорі на карті */ .jc-chart .jc-star-icon { fill: #c9a227; cursor: pointer; } .jc-chart .jc-star-icon:hover { fill: var(--jc-accent); } .jc-chart .jc-star-hi { fill: var(--jc-accent) !important; font-size: 1.35em; font-weight: bold; } /* ── Інтерактивні йоги ───────────────────────────────────────── */ .jc-yoga-row { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--jc-border); cursor: pointer; } .jc-yoga-row:hover { background: #eaf4f1; } .jc-yoga-row.pinned { background: #ddebe8; box-shadow: inset 3px 0 0 var(--jc-accent); } .jc-yoga-stars { color: #c9a227; letter-spacing: 1px; white-space: nowrap; font-size: 14px; } .jc-yoga-explain { margin: 8px 0 14px; padding: 10px 14px; border: 1px solid var(--jc-border); border-radius: 8px; background: #faf8f3; min-height: 40px; } .jc-yoga-title { font-weight: 700; color: var(--jc-accent); margin-bottom: 6px; } /* ── Шкала транзитів ─────────────────────────────────────────── */ .jc-transits { --jc-tl-label-w: 54px; } .jc-transit-nav { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; font-size: 15px; } .jc-tl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .jc-tl { position: relative; min-width: 760px; } .jc-tl-row { display: flex; align-items: stretch; margin-bottom: 5px; } .jc-tl-label { width: var(--jc-tl-label-w); flex: none; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 13px; } .jc-tl-track { position: relative; flex: 1; height: 42px; background: #faf8f3; border-radius: 7px; overflow: hidden; } .jc-tl-head .jc-tl-track { height: 22px; background: none; } .jc-tl-tick { position: absolute; top: 0; height: 100%; font-size: 11px; color: var(--jc-muted); border-left: 1px solid var(--jc-border); padding-left: 4px; box-sizing: border-box; display: flex; align-items: center; } .jc-tl-block { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; padding: 3px 6px; box-sizing: border-box; overflow: hidden; cursor: pointer; color: #3d3a33; } .jc-tl-block:hover { filter: brightness(.94); box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); } .jc-tl-sign { font-weight: 700; font-size: 12px; line-height: 1.15; white-space: nowrap; } .jc-tl-dates { font-size: 10.5px; opacity: .8; white-space: nowrap; } .jc-tl-retro { position: absolute; bottom: 1px; height: 12px; border-radius: 6px; background: rgba(90, 90, 110, .78); color: #fff; font-size: 9.5px; line-height: 12px; text-align: center; overflow: hidden; white-space: nowrap; } .jc-tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #26a269; z-index: 5; } .jc-tl-today span { position: absolute; top: -2px; left: 3px; font-size: 11px; color: #26a269; font-weight: 700; background: #fff; padding: 0 3px; border-radius: 3px; } .jc-tl-drag { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #e8590c; z-index: 7; cursor: ew-resize; touch-action: none; } .jc-tl-drag::before { content: ''; position: absolute; top: -6px; left: -6px; width: 16px; height: 16px; border-radius: 50%; background: #e8590c; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .jc-tl-drag-handle { position: absolute; top: 16px; left: 6px; font-size: 11px; color: #fff; font-weight: 700; background: #e8590c; padding: 1px 5px; border-radius: 3px; white-space: nowrap; } .jc-transit-datejump { width: auto; min-width: 150px; display: inline-block; margin-left: auto; } .jc-transit-date-detail:not(:empty) { margin-top: 16px; padding: 14px 16px; border: 1.5px dashed var(--jc-jade); border-radius: var(--jc-radius); background: var(--jc-tint); } .jc-transit-date-detail .jc-chart-holder { max-width: 340px; margin: 10px auto; } .jc-transit-date-detail table.jc-table { margin-top: 10px; } .jc-gochara-skystate { padding: 12px 16px; border-radius: var(--jc-radius); background: var(--jc-tint); border: 1px solid var(--jc-border); margin-bottom: 14px; } .jc-gochara-events:not(:empty) { margin-top: 16px; } .jc-gochara-table th, .jc-gochara-table td { white-space: nowrap; } @media (max-width: 560px) { .jc-transits { --jc-tl-label-w: 42px; } } /* ── Планети на чакрах ───────────────────────────────────────── */ .jc-chakra-col { margin: 14px 0 18px; } .jc-chakra-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--jc-border); } .jc-chakra-row:last-child { border-bottom: none; } .jc-chakra-dot { width: 30px; height: 30px; flex: none; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.18); } .jc-chakra-body { flex: 1; min-width: 0; } .jc-chakra-head { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; font-size: 14px; } .jc-chakra-bar-wrap { height: 6px; background: #e6ece9; border-radius: 3px; margin: 5px 0 6px; overflow: hidden; } .jc-chakra-bar { height: 100%; border-radius: 3px; transition: width .2s ease; } .jc-chakra-points { display: flex; flex-wrap: wrap; gap: 5px; } .jc-chakra-chip { padding: 2px 8px; border-radius: 999px; background: #eef4f2; font-size: 12.5px; border: 1px solid var(--jc-border); } .jc-chakra-chip.is-graha { background: #ddebe8; font-weight: 600; } @media (max-width: 560px) { .jc-chakra-dot { width: 24px; height: 24px; font-size: 12px; } } /* ── Смужка сили (Дігбала тощо) ──────────────────────────────── */ .jc-bar-wrap { background: #e6ece9; border-radius: 4px; height: 16px; min-width: 90px; overflow: hidden; } .jc-bar { height: 100%; background: linear-gradient(90deg, #c9a227, #1f6f68); color: #fff; font-size: 11px; line-height: 16px; text-align: center; border-radius: 4px; transition: width .2s; } /* ── Панчанга ────────────────────────────────────────────────── */ .jc-pch-card { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--jc-border); border-radius: 10px; background: #fff; } .jc-pch-num { width: 42px; height: 42px; flex: none; border-radius: 10px; background: #ddebe8; color: var(--jc-accent); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; } .jc-pch-body { flex: 1; min-width: 0; } .jc-pch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 16px; } .jc-pch-kind { font-size: 12px; color: var(--jc-muted); text-transform: uppercase; letter-spacing: .04em; } .jc-pch-sub { font-size: 13px; color: var(--jc-muted); margin-top: 3px; } .jc-pch-range { font-size: 13px; margin-top: 4px; color: var(--jc-text); background: #faf8f3; display: inline-block; padding: 3px 9px; border-radius: 6px; } .jc-pch-desc { font-size: 13.5px; line-height: 1.5; margin-top: 6px; } @media (max-width: 560px) { .jc-pch-num { width: 34px; height: 34px; font-size: 16px; } } .jc-dasha-note { font-size: 11.5px; font-weight: normal; white-space: nowrap; } @media (max-width: 700px) { .jc-dasha-note { display: block; margin-left: 0; white-space: normal; } } .jc-varga-rot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding: 6px 12px; border: 1px solid var(--jc-accent-light); border-radius: 8px; background: #eaf4f1; font-size: 13px; color: var(--jc-accent); } /* ═══════════════════════════════════════════════════════════════════════ Vedic Om Center — design-system layer (visual only; no logic touched) Appended last so it refines the component styling above via the cascade. ═══════════════════════════════════════════════════════════════════════ */ /* ── Typography ──────────────────────────────────────────────────────── */ .jyotish-calc-root { font-size:15px; line-height:1.55; } .jc-summary-title, .jc-chart-col-title, .jc-kb-title, .jc-kb-entry-title, .jc-prashna-card-title, .jc-header-text, .jc-yoga-title, .jc-settings-title, .jc-step-title { font-family:'Manrope','Inter',sans-serif; letter-spacing:-.01em; } .jc-header-text { font-weight:700; letter-spacing:.14em; color:var(--jc-emerald); text-transform:uppercase; font-size:16px; } /* ── Content surfaces: everything readable sits on a light card ──────── */ .jc-form-container { background:var(--jc-white); border-radius:var(--jc-radius); padding:30px 32px; box-shadow:var(--jc-shadow); max-width:820px; } .jc-results { background:var(--jc-white); border-radius:var(--jc-radius); padding:26px 30px; box-shadow:var(--jc-shadow); margin-top:24px; } .jc-header { background:transparent; padding:4px 0 14px; margin-bottom:20px; border-bottom:1px solid var(--jc-border); position:relative; } .jc-header::after{ content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%); width:60px; height:2px; background:var(--jc-gold); border-radius:2px; opacity:.7; } .jc-header-icon { color:var(--jc-gold); } /* ── Step numbers ────────────────────────────────────────────────────── */ .jc-step-num { background:var(--jc-tint); color:var(--jc-emerald); border:1px solid var(--jc-jade); font-weight:700; } .jc-step-title { color:var(--jc-text); font-weight:600; text-align:left; } /* ── Inputs & selects: tall, rounded, focus glow ─────────────────────── */ .jc-input, .jc-select { height:48px; border-radius:13px; border:1.5px solid var(--jc-border); background:var(--jc-white); font-size:14.5px; padding:10px 14px; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; } gmp-place-autocomplete.jc-input { height:48px; border-radius:13px; border:1.5px solid var(--jc-border); } .jc-input:hover, .jc-select:hover { border-color:var(--jc-jade); } .jc-input:focus, .jc-select:focus, .jc-input:focus-within { outline:none; border-color:var(--jc-teal); box-shadow:0 0 0 4px rgba(47,140,130,.16); } .jc-select { -webkit-appearance:none; appearance:none; padding-right:38px; cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 13px center; } /* calendar / geo icon buttons → emerald outline pills */ .jc-cal-btn, .jc-geo-btn { height:48px; width:48px; border-radius:13px; border:1.5px solid var(--jc-border); color:var(--jc-emerald); transition:border-color .18s, background .18s, transform .1s; } .jc-cal-btn:hover, .jc-geo-btn:hover { background:var(--jc-tint); border-color:var(--jc-jade); } .jc-cal-btn:active, .jc-geo-btn:active { transform:scale(.96); } .jc-input.jc-date-text { flex:0 1 260px; } /* ── Buttons ─────────────────────────────────────────────────────────── */ /* Primary */ .jc-submit { border-radius:14px; padding:16px; background:linear-gradient(100deg,var(--jc-emerald),var(--jc-teal)); box-shadow:0 8px 22px rgba(31,111,104,.30); letter-spacing:.02em; font-weight:700; transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; display:flex; align-items:center; justify-content:center; gap:10px; } .jc-submit-star { width:24px; height:24px; flex:none; object-fit:contain; } .jc-submit:hover { transform:translateY(-2px) scale(1.008); box-shadow:0 12px 30px rgba(31,111,104,.38); filter:brightness(1.03); } .jc-submit:active { transform:translateY(0) scale(.997); } /* ── Секретарна кнопка (edit/save/KB/back/reset/lagna/ct-item) ────────── */ .jc-edit-data-btn, .jc-kb-open-btn, .jc-kb-back, .jc-rot-reset, .jc-lagna-btn { border-radius:12px; border:1.5px solid var(--jc-emerald); background:var(--jc-white); color:var(--jc-emerald); font-weight:600; transition:background .16s ease, color .16s ease, transform .1s ease; } .jc-edit-data-btn:hover, .jc-kb-open-btn:hover, .jc-kb-back:hover, .jc-rot-reset:hover, .jc-lagna-btn:hover { background:var(--jc-tint); color:var(--jc-emerald); } .jc-kb-open-btn { border-color:var(--jc-border); color:var(--jc-text); } .jc-kb-open-btn:hover { border-color:var(--jc-emerald); color:var(--jc-emerald); background:var(--jc-tint); } /* ── Form header row: title block + "Мої карти" button (top-right) ───── */ .jc-form-header-row { position:relative; margin-bottom:16px; } .jc-header-titleblock { max-width:calc(100% - 180px); margin:0 auto; } .jc-landing-title { text-align:center; font-family:'Manrope','Inter',sans-serif; font-weight:800; letter-spacing:.02em; font-size:26px; color:var(--jc-emerald); margin-bottom:6px; } .jc-header-subtitle { text-align:center; color:var(--jc-muted); font-size:13.5px; margin-top:-4px; } .jc-mycharts-btn { position:absolute; top:0; right:0; display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:14px; border:1.5px solid var(--jc-border); background:var(--jc-white); cursor:pointer; font-family:inherit; transition:border-color .16s ease, background .16s ease; } .jc-mycharts-btn:hover { border-color:var(--jc-emerald); background:var(--jc-tint); } .jc-mycharts-icon { font-size:20px; width:28px; height:28px; flex:none; display:flex; align-items:center; justify-content:center; } .jc-mycharts-title { font-weight:700; color:var(--jc-emerald); font-size:14px; text-align:left; } .jc-mycharts-sub { color:var(--jc-muted); font-size:11.5px; text-align:left; } /* ── Загальні інструменти (мухурта/календар транзитів без особистої карти) */ .jc-general-tools-launcher { margin:22px 0 4px; padding:18px 16px; border-radius:var(--jc-radius); background:var(--jc-tint); } .jc-gt-title { text-align:center; font-weight:700; letter-spacing:.08em; color:var(--jc-emerald); font-size:14px; } .jc-gt-subtitle { text-align:center; color:var(--jc-muted); font-size:12.5px; margin:2px 0 14px; } .jc-tool-card-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .jc-tool-card { flex:1 1 200px; max-width:240px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:16px 14px; border-radius:14px; border:1.5px solid var(--jc-border); background:var(--jc-white); cursor:pointer; font-family:inherit; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .jc-tool-card:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); } .jc-tool-card-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; } .jc-tool-green .jc-tool-card-icon { background:#d9f2df; } .jc-tool-orange .jc-tool-card-icon { background:#fdeacb; } .jc-tool-teal .jc-tool-card-icon { background:#d7f0ee; } .jc-tool-card-icon.jc-icon-img { background:none; width:48px; height:48px; } .jc-ct-icon.jc-icon-img { background:none; } .jc-tool-card-label { font-weight:700; color:var(--jc-text); font-size:14px; } .jc-tool-card-desc { color:var(--jc-muted); font-size:12px; line-height:1.35; } .jc-general-tools { max-width:820px; margin-left:auto; margin-right:auto; } @media (max-width:560px) { .jc-header-titleblock { max-width:100%; } .jc-mycharts-btn { position:static; margin:10px auto 0; justify-content:center; max-width:240px; } } /* ── Chart-type picker cards ─────────────────────────────────────────── */ .jc-ct-item { border-radius:16px; border:1.5px solid var(--jc-border); padding:16px 18px; transition:border-color .16s ease, box-shadow .16s ease, transform .12s ease, background .16s ease; } .jc-ct-item:hover { background:var(--jc-white); border-color:var(--jc-jade); box-shadow:var(--jc-shadow-sm); transform:translateY(-2px); } .jc-ct-selected, .jc-ct-item.jc-ct-selected:hover { border-color:var(--jc-emerald); background:var(--jc-tint); box-shadow:var(--jc-shadow-sm); transform:none; } /* ── Top info panel (summary → stat blocks) ──────────────────────────── */ .jc-summary { background:linear-gradient(180deg,var(--jc-milk),var(--jc-white)); border:1px solid var(--jc-border); border-radius:var(--jc-radius); padding:12px 16px; box-shadow:var(--jc-shadow-sm); margin-bottom:14px; } .jc-summary-title { font-size:19px; font-weight:700; color:var(--jc-emerald); margin-bottom:9px; } .jc-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; } .jc-stat { background:var(--jc-white); border:1px solid var(--jc-border); border-radius:12px; padding:7px 11px; transition:border-color .16s ease, box-shadow .16s ease; } .jc-stat:hover { border-color:var(--jc-jade); box-shadow:var(--jc-shadow-sm); } .jc-stat-k { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--jc-muted); margin-bottom:3px; } .jc-stat-v { font-size:15px; font-weight:600; color:var(--jc-text); line-height:1.25; } .jc-stat-v .jc-kb-term { font-weight:600; } .jc-stat-extra { font-size:12px; color:var(--jc-muted); line-height:1.35; margin-top:2px; } .jc-stat-click { cursor:pointer; } .jc-stat-click:hover { border-color:var(--jc-jade); box-shadow:var(--jc-shadow-sm); } .jc-stat-click .jc-stat-v::after { content:' ⓘ'; font-size:11px; color:var(--jc-jade); } /* Другорядні картки (Аянамша, Момент) — компактніші, менш акцентні. */ .jc-stat-sm { background:var(--jc-milk); } .jc-stat-sm .jc-stat-k { font-size:10px; margin-bottom:2px; } .jc-stat-sm .jc-stat-v { font-size:13px; font-weight:600; } .jc-stat-sm .jc-stat-extra { font-size:11px; } /* Навчальна картка упаграхи (у попапі) */ .jc-upa-info-row { margin: 0 0 11px; } .jc-upa-info-row:last-child { margin-bottom: 0; } .jc-upa-info-k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--jc-jade); margin-bottom: 2px; } .jc-upa-info-v { font-size: 14px; line-height: 1.5; color: var(--jc-text); } /* Аналіз життєвих сфер */ .jc-sph-card { border: 1px solid var(--jc-border); border-radius: 10px; margin: 0 0 10px; overflow: hidden; background: var(--jc-card); } .jc-sph-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; } .jc-sph-head:hover { background: #eaf4f1; } .jc-sph-caret { color: var(--jc-jade); width: 12px; } .jc-sph-title { font-weight: 700; color: var(--jc-emerald); flex: 1 1 auto; min-width: 0; } .jc-sph-houses { font-size: 12px; color: var(--jc-muted); white-space: nowrap; } .jc-sph-badge { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; } .jc-sph-strong { background: #dff3e6; color: #1e7d46; } .jc-sph-medium { background: #fdf3da; color: #a9791a; } .jc-sph-weak { background: #fbe4e2; color: #b23b32; } .jc-sph-body { padding: 4px 14px 14px; border-top: 1px solid var(--jc-border); } .jc-sph-row { display: grid; grid-template-columns: 190px 1fr; gap: 10px; padding: 6px 0; font-size: 13.5px; line-height: 1.5; border-bottom: 1px dashed var(--jc-border); } .jc-sph-row:last-of-type { border-bottom: none; } .jc-sph-k { color: var(--jc-jade); font-weight: 600; } .jc-sph-v { color: var(--jc-text); } .jc-sph-synth { margin-top: 10px; padding: 10px 12px; background: var(--jc-tint); border-left: 3px solid var(--jc-accent-light); border-radius: 6px; font-size: 14px; line-height: 1.55; } @media (max-width: 640px) { .jc-sph-row { grid-template-columns: 1fr; gap: 2px; } .jc-sph-houses { display: none; } } /* Прогноз */ .jc-forecast-seg { display: inline-flex; gap: 0; border: 1px solid var(--jc-border); border-radius: 10px; overflow: hidden; margin: 6px 0 12px; } .jc-forecast-segbtn { border: none; background: var(--jc-card); color: var(--jc-text); padding: 9px 18px; cursor: pointer; font-weight: 600; font-size: 14px; } .jc-forecast-segbtn.active { background: var(--jc-emerald); color: #fff; } .jc-forecast-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } .jc-forecast-ctl { font-size: 13px; color: var(--jc-muted); display: inline-flex; align-items: center; gap: 6px; } .jc-forecast-title { font-size: 18px; font-weight: 700; color: var(--jc-emerald); margin: 4px 0 12px; } .jc-forecast-section { margin: 0 0 16px; } .jc-forecast-h { font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--jc-jade); margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--jc-border); } .jc-forecast-p { font-size: 14.5px; line-height: 1.6; margin: 0; } .jc-forecast-lead { background: var(--jc-tint); border-left: 3px solid var(--jc-accent-light); border-radius: 6px; padding: 10px 12px; } .jc-forecast-list { margin: 0; padding-left: 20px; } .jc-forecast-list li { font-size: 14px; line-height: 1.55; margin: 0 0 5px; } .jc-forecast-good li::marker { color: #1e7d46; } .jc-forecast-tense li::marker { color: #b23b32; } .jc-forecast-q { display: grid; grid-template-columns: 200px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--jc-border); } .jc-forecast-q:last-child { border-bottom: none; } .jc-forecast-qh { font-weight: 600; color: var(--jc-jade); font-size: 13.5px; } .jc-forecast-qv { font-size: 13.5px; line-height: 1.5; } @media (max-width: 640px) { .jc-forecast-q { grid-template-columns: 1fr; gap: 2px; } } /* Панчанга: мітка сприятливості + час зміни у «Стан неба» */ .jc-pf { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; } .jc-pf-good { background: #dff3e6; color: #1e7d46; } .jc-pf-bad { background: #fbe4e2; color: #b23b32; } .jc-pf-time { display: inline-block; margin-left: 8px; font-size: 12.5px; color: var(--jc-muted); font-variant-numeric: tabular-nums; } /* ── Settings card ───────────────────────────────────────────────────── */ .jc-settings-card { background:var(--jc-white); border:1px solid var(--jc-border); border-radius:var(--jc-radius); padding:0; margin-bottom:16px; box-shadow:none; overflow:hidden; } .jc-settings-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 16px; margin-bottom:0; } .jc-settings-title { font-size:15px; font-weight:700; color:var(--jc-emerald); letter-spacing:.01em; } .jc-settings-card .jc-display-settings { margin:0; gap:12px; padding:4px 16px 16px; } .jc-ds-item { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--jc-text); flex:1 1 220px; min-width:0; } .jc-ds-item .jc-select { flex:1; } .jc-checkbox-label, .jc-ext-toggle { font-size:13.5px; } .jc-display-settings input[type=checkbox], .jc-ext-toggles input[type=checkbox], .jc-checkbox-label input[type=checkbox] { accent-color:var(--jc-emerald); width:16px; height:16px; } /* ── Tabs (top nav) ──────────────────────────────────────────────────── */ .jc-tabs { border-bottom:1.5px solid var(--jc-border); gap:2px; margin-bottom:20px; } .jc-tab { padding:11px 16px; border-radius:10px 10px 0 0; font-weight:500; font-size:14px; border-bottom:2.5px solid transparent; transition:color .16s ease, border-color .16s ease, background .16s ease; } .jc-tab:hover { color:var(--jc-teal); background:var(--jc-tint); } .jc-tab.active { color:var(--jc-emerald); border-bottom-color:var(--jc-emerald); font-weight:700; background:transparent; } /* Dropdown menus */ .jc-tab-dropdown { border-radius:14px; border:1px solid var(--jc-border); padding:8px; box-shadow:var(--jc-shadow); margin-top:6px; animation:jc-dd-in .16s ease-out; } @keyframes jc-dd-in { from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } .jc-tab-dropdown-item { border-radius:9px; padding:9px 14px; transition:background .14s ease, color .14s ease; } .jc-tab-dropdown-item:hover { background:var(--jc-tint); color:var(--jc-emerald); } /* Sub-tabs */ .jc-subtab { border-radius:10px 10px 0 0; font-weight:500; } .jc-subtab:hover { background:var(--jc-tint); } .jc-subtab.active { color:var(--jc-emerald); font-weight:700; } /* ── Tables ──────────────────────────────────────────────────────────── */ .jc-table { font-size:14px; } .jc-table th { color:var(--jc-emerald); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding:11px 12px; border-bottom:1.5px solid var(--jc-border); } .jc-table td { padding:11px 12px; } .jc-table tbody tr { transition:background .13s ease; } .jc-table tbody tr:hover { background:var(--jc-tint); } .jc-asc-row, .jc-table tbody tr.jc-asc-row:hover { background:var(--jc-sel); } /* ── Chart frames ────────────────────────────────────────────────────── */ .jc-chart-holder { border-radius:18px; padding:16px; box-shadow:var(--jc-shadow-sm); border:1px solid rgba(230,236,233,.6); } .jc-chart-col-title { color:var(--jc-emerald); font-weight:700; font-size:15px; margin-bottom:8px; } .jc-chart-light .jc-chart .jc-asc { fill:var(--jc-gold); } /* Lagna → matte gold on light chart */ .jc-chart-holder.jc-chart-light { --jc-ch-asc:#B9992E; border:1px solid var(--jc-border); } /* strength / dig-bala bars → emerald→teal */ .jc-bar { background:linear-gradient(90deg,var(--jc-emerald),var(--jc-teal)); } .jc-yoga-stars, .jc-chart .jc-star-icon { color:var(--jc-gold); } .jc-chart .jc-star-icon { fill:var(--jc-gold); } /* Panels & pill/note surfaces → softer radius */ .jc-note, .jc-prashna-card, .jc-pch-card, .jc-ext-toggles, .jc-rotate-bar, .jc-lagna-bar, .jc-yoga-explain, .jc-transit-date-detail, .jc-varga-rot, .jc-ext-missing { border-radius:14px; } .jc-note { background:var(--jc-tint); border:1px solid var(--jc-border); color:var(--jc-text); } /* Knowledge-base drawer */ .jc-kb-panel { border-radius:20px 0 0 20px; } .jc-kb-term { color:var(--jc-emerald); border-bottom-color:var(--jc-jade); } .jc-kb-term:hover { background:var(--jc-tint); } /* Date picker */ .jc-picker { border-radius:16px; box-shadow:var(--jc-shadow); font-family:'Inter',sans-serif; } .jc-picker-sel { background:var(--jc-emerald) !important; } .jc-picker-tab-active { background:var(--jc-emerald); border-color:var(--jc-emerald); } /* ── Reduced motion ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .jyotish-calc-root *, .jyotish-calc-root *::before, .jyotish-calc-root *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* ── Mobile polish ───────────────────────────────────────────────────── */ @media (max-width:600px) { .jyotish-calc-root { padding:16px; border-radius:18px; } .jc-form-container { padding:20px 18px; } .jc-results { padding:18px 16px; } .jc-stat-grid { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); } .jc-tab { padding:10px 12px; font-size:13px; } } /* ── Results action bar: align all buttons on one axis ───────────────── */ /* Edit / Save / Knowledge-base buttons come from two style families with different padding & font-size, so they read as misaligned. Give them one shared height and center their content so they sit on a single baseline. */ .jc-results-actions { align-items:center; margin-bottom:18px; } /* The nebula photo already carries its own stars, so the CSS starfield and sacred-geometry overlays are redundant over it — switch them off to match the clean chart look exactly. */ .jyotish-calc-root::before, .jyotish-calc-root::after { display:none; } .jc-results-actions .jc-edit-data-btn, .jc-results-actions .jc-kb-open-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 18px; margin:0; font-size:14px; font-weight:600; line-height:1; border-radius:12px; vertical-align:middle; } /* Upagraha abbreviation badge in the upagraha table (matches the chart labels) */ .jc-upa-badge { display:inline-block; min-width:30px; text-align:center; padding:2px 8px; border-radius:8px; background:var(--jc-tint); color:var(--jc-emerald); font-weight:700; font-size:12px; letter-spacing:.02em; } /* Transit timeline — personal (natal) linkage markers */ .jc-tl-house { font-size:10px; opacity:.85; font-weight:600; } .jc-tl-star { color:var(--jc-gold); } .jc-tl-natal { outline:1.5px solid var(--jc-gold); outline-offset:-1px; } /* Argala arrows on the chart: green = Argala, red = Virodha Argala */ .jc-chart .jc-aspect-argala { stroke:#2f9e44; stroke-width:2; stroke-dasharray:none; opacity:.9; } .jc-chart .jc-aspect-virodha { stroke:#e03131; stroke-width:2; stroke-dasharray:5 3; opacity:.9; } .jc-chart .jc-aspect-argala:hover, .jc-chart .jc-aspect-virodha:hover { stroke-width:3; } /* Collapsible settings card (bottom of results) */ .jc-settings-card { margin-top:16px; } .jc-settings-toggle { cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px; } .jc-settings-toggle:hover .jc-settings-title { color:var(--jc-teal); } .jc-settings-chevron { color:var(--jc-emerald); font-size:11px; width:12px; display:inline-block; } /* "Коротко про карту" auto-insights card */ .jc-insights-card { background:linear-gradient(180deg,var(--jc-milk),var(--jc-white)); border:1px solid var(--jc-border); border-radius:var(--jc-radius); padding:16px 20px; margin-bottom:22px; box-shadow:var(--jc-shadow-sm); } .jc-insights-title { font-weight:700; color:var(--jc-emerald); margin-bottom:8px; } .jc-insights-list { margin:0 0 12px 18px; } .jc-insights-list li { margin:4px 0; line-height:1.5; } .jc-insights-btn { background:linear-gradient(100deg,var(--jc-emerald),var(--jc-teal)); color:#fff; border:none; border-radius:12px; padding:9px 18px; font-weight:600; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; } .jc-insights-btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(31,111,104,.28); } /* ── Mobile adaptivity ─────────────────────────────────────────────────── */ @media (max-width:640px) { /* Даша-вузол: дозволяємо перенос, щоб дата+час не виходили за межі */ .jc-dnode-head { flex-wrap: wrap; gap: 4px 10px; } .jc-dnode-lord { flex: 1 1 100%; } .jc-dnode-dates { font-size: 12px; } /* two varga charts stack one under another */ .jc-charts-row { flex-direction:column; align-items:stretch; gap:14px; } .jc-chart-col { max-width:100%; min-width:0; flex:1 1 100%; } .jc-chart-holder { max-width:100%; } /* long tab / sub-tab bars scroll horizontally instead of breaking layout */ .jc-tabs, .jc-subtabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; } .jc-tab, .jc-subtab { white-space:nowrap; flex:0 0 auto; } .jc-tabs::-webkit-scrollbar, .jc-subtabs::-webkit-scrollbar { height:3px; } .jc-tabs::-webkit-scrollbar-thumb, .jc-subtabs::-webkit-scrollbar-thumb { background:var(--jc-jade); border-radius:3px; } /* wide tables scroll within their panel rather than overflowing the card */ .jc-panels, .jc-subtab-body, .jc-table-panel { overflow-x:auto; } .jc-table { font-size:13px; } /* settings controls stack full-width */ .jc-ext-toggles { flex-direction:column; align-items:stretch; } .jc-settings-card .jc-display-settings > div { flex-wrap:wrap; } .jc-results-actions { flex-wrap:wrap; } } /* Unified object info popup (click any object on any chart) */ .jc-obj-overlay { position:fixed; inset:0; background:rgba(6,20,18,.55); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:9999; padding:20px; } .jc-obj-overlay.open { display:flex; } .jc-obj-popup { background:var(--jc-white, #FFFFFF); border:1px solid var(--jc-border, #E6ECE9); border-radius:16px; box-shadow:0 24px 60px rgba(6,20,18,.35); max-width:360px; width:100%; padding:18px 20px; animation:jc-pop .16s ease; } .jc-obj-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; } .jc-obj-title { font-weight:700; color:var(--jc-emerald, #1F6F68); font-size:16px; } .jc-obj-close { background:var(--jc-tint, #EAF4F1); border:none; border-radius:8px; width:28px; height:28px; cursor:pointer; color:var(--jc-emerald, #1F6F68); font-size:14px; line-height:1; } .jc-obj-close:hover { background:var(--jc-jade, #7FB8AE); color:#fff; } .jc-obj-body { display:flex; flex-direction:column; gap:4px; } .jc-obj-line { line-height:1.5; } @keyframes jc-pop { from { transform:translateY(8px) scale(.98); opacity:0; } to { transform:none; opacity:1; } } /* Іконка всередині кнопки швидкого переходу (напр. «Календар транзитів») */ .jc-btn-ico { display:inline-block; width:16px; height:16px; vertical-align:-3px; } .jc-btn-ico img { width:100%; height:100%; object-fit:contain; display:block; } /* Блок «Опис дня» у Поточних транзитах */ .jc-gochara-daydesc { border:1px solid var(--jc-border); border-radius:12px; padding:12px 14px; background:var(--jc-tint); margin-bottom:22px; } .jc-day-desc-row { display:grid; grid-template-columns:180px 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--jc-border); } .jc-day-desc-row:first-of-type { border-top:none; } .jc-day-desc-label { display:block; font-size:12px; color:var(--jc-muted); } .jc-day-desc-name { display:block; font-weight:700; color:var(--jc-emerald); } .jc-day-desc-text { font-size:13px; line-height:1.5; } @media (max-width:560px){ .jc-day-desc-row { grid-template-columns:1fr; gap:2px; } } /* Клікабельні рядки в «Аналізі варг» */ .jc-clickable-row { cursor:pointer; transition:background .12s; } tr.jc-clickable-row:hover { background:var(--jc-tint); } li.jc-clickable-row:hover { color:var(--jc-emerald); text-decoration:underline; } /* Блок «Енергія дня» у Поточних транзитах */ .jc-energy-day { border:1px solid var(--jc-border); border-radius:12px; padding:12px 14px; background:linear-gradient(180deg,var(--jc-tint),transparent); margin-bottom:22px; } .jc-energy-row { display:grid; grid-template-columns:150px 1fr; gap:10px; padding:6px 0; border-top:1px dashed var(--jc-border); } .jc-energy-label { font-weight:600; color:var(--jc-muted); } .jc-energy-label.jc-en-good { color:#1a7f37; } .jc-energy-label.jc-en-bad { color:#b5651d; } .jc-energy-text { font-size:13px; line-height:1.5; } .jc-energy-tip { margin-top:8px; padding-top:8px; border-top:1px solid var(--jc-border); font-style:italic; color:var(--jc-emerald); } @media (max-width:560px){ .jc-energy-row { grid-template-columns:1fr; gap:2px; } } /* ── Прибрано зоряну окантовку навколо калькулятора + ширший на ~10% ──── */ /* Небулу-рамку та зоряну розсип навколо картки прибрано; тло прозоре — картка зливається зі сторінкою сайту. Графіки в результатах зберігають власний зоряний фон. */ .jyotish-calc-root { background: transparent; } .jyotish-calc-root::before, .jyotish-calc-root::after { display: none !important; } /* Картка калькулятора ширша на 10% (820 → 902px). */ .jc-form-container { max-width: 902px; } /* Прибрано нижній підпис «VEDIC OM CENTER». */ .jc-brand-footer { display: none !important; } /* ── Астро-календар на сьогодні (самостійний блок / Elementor) ───────── */ .jc-astrocal-widget { font-family: inherit; } .jc-astrocal-card { --jc-gold: #d4af37; margin: 0; padding: 14px 22px; border-radius: 18px; background: transparent; color: #002C2C; box-shadow: none; position: relative; overflow: hidden; border: none; box-sizing: border-box; font-family: inherit; -webkit-font-smoothing: antialiased; } .jc-astrocal-card * { box-sizing: border-box; } .jc-astrocal-title { font-size: 16px; letter-spacing: .06em; font-weight: 700; color: rgba(0,44,44,.82); margin: 0 0 10px; } .jc-astrocal-row { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 12px; padding: 5px 0; border: none; } .jc-astrocal-ico { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,44,44,.07); color: #002C2C; font-size: 15px; line-height: 1; } .jc-astrocal-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .jc-astrocal-label { color: #002C2C; font-size: 15px; font-weight: 500; line-height: 1.2; } .jc-astrocal-until { color: rgba(0,44,44,.65); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.15; } .jc-astrocal-btn { display: block; text-align: center; text-decoration: none; width: 100%; margin-top: 16px; padding: 11px; border: 1px solid rgba(212,175,55,.5); background: transparent; color: var(--jc-gold); border-radius: 12px; cursor: pointer; font-weight: 700; letter-spacing: .10em; font-size: 13px; transition: background .15s, color .15s; } .jc-astrocal-btn:hover { background: var(--jc-gold); color: #0d3b36; } /* ============================================================================ * Особистий кабінет «Мої карти» (dashboard) — [jyotish_dashboard] * ==========================================================================*/ .jc-dash { color: var(--jc-milk); font-family: inherit; } .jc-dash * { box-sizing: border-box; } .jc-dash-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; margin-bottom: 18px; border-radius: 16px; background: rgba(12, 69, 63, .55); backdrop-filter: blur(6px); border: 1px solid rgba(127, 184, 174, .22); } .jc-dash-brand { display: flex; align-items: center; gap: 10px; } .jc-dash-brand-mark { font-size: 22px; color: var(--jc-gold); } .jc-dash-brand-name { font-weight: 700; letter-spacing: .02em; } .jc-dash-userbox { display: flex; align-items: center; gap: 12px; } .jc-dash-user { display: flex; align-items: center; gap: 8px; color: var(--jc-milk); text-decoration: none; font-size: 14px; } .jc-dash-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(127,184,174,.4); } .jc-dash-avatar--ph { display: grid; place-items: center; background: rgba(255,255,255,.1); } .jc-dash-logout { color: var(--jc-jade); text-decoration: none; font-size: 13px; } .jc-dash-logout:hover { color: var(--jc-milk); } .jc-dash-pill { font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; } .jc-dash-pill--pro { background: linear-gradient(135deg, var(--jc-gold), #e6c458); color: #3a2f00; } .jc-dash-layout { display: grid; grid-template-columns: 232px 1fr; gap: 18px; align-items: start; } .jc-dash-sidebar { padding: 14px; border-radius: 16px; background: rgba(12, 69, 63, .5); border: 1px solid rgba(127, 184, 174, .18); position: sticky; top: 12px; } .jc-dash-navgrp { margin-bottom: 16px; } .jc-dash-navgrp-title { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--jc-jade); text-transform: uppercase; margin: 0 6px 8px; } .jc-dash-navitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: rgba(250, 248, 243, .82); text-decoration: none; font-size: 14px; margin-bottom: 2px; transition: background .15s, color .15s; } .jc-dash-navitem:hover { background: rgba(127, 184, 174, .14); color: var(--jc-milk); } .jc-dash-navitem.is-active { background: rgba(127, 184, 174, .22); color: #fff; font-weight: 600; } .jc-dash-navitem.is-locked { opacity: .62; } .jc-dash-navicon { width: 18px; text-align: center; opacity: .9; } .jc-dash-navpro { margin-left: auto; font-size: 9px; font-weight: 800; color: var(--jc-gold); letter-spacing: .05em; } .jc-dash-main { display: flex; flex-direction: column; gap: 16px; } .jc-dash-hero { display: grid; grid-template-columns: 1fr 340px; gap: 16px; } @media (max-width: 900px) { .jc-dash-hero { grid-template-columns: 1fr; } .jc-dash-layout { grid-template-columns: 1fr; } .jc-dash-sidebar { position: static; } } .jc-dash-hero-left { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 16px; background: rgba(250, 248, 243, .96); color: var(--jc-text); box-shadow: var(--jc-shadow-sm); } .jc-dash-hero-ring { width: 66px; height: 66px; flex: 0 0 66px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: var(--jc-emerald); border: 2px dashed rgba(31, 111, 104, .45); } .jc-dash-hero-title { font-size: 18px; font-weight: 700; color: var(--jc-emerald); } .jc-dash-hero-sub { font-size: 13px; color: var(--jc-muted); margin: 4px 0 12px; } .jc-dash-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; background: rgba(31, 111, 104, .12); color: var(--jc-emerald); transition: filter .15s, background .15s; } .jc-dash-btn:hover { filter: brightness(.97); } .jc-dash-btn--primary { background: linear-gradient(135deg, var(--jc-emerald), var(--jc-teal)); color: #fff; } .jc-dash-btn--sm { padding: 6px 12px; font-size: 13px; } .jc-dash-pro-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; border-radius: 16px; text-decoration: none; color: var(--jc-milk); background: linear-gradient(135deg, #123f3a 0%, #1f6f68 100%); border: 1px solid rgba(201, 162, 39, .35); } .jc-dash-pro-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .jc-dash-pro-sub { font-size: 12px; opacity: .82; margin-top: 4px; max-width: 210px; } .jc-dash-pro-cta { font-size: 13px; font-weight: 700; color: var(--jc-gold); white-space: nowrap; } .jc-dash-listbar { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; } .jc-dash-listtitle { font-size: 17px; font-weight: 700; } .jc-dash-listmeta { font-size: 13px; color: var(--jc-jade); } .jc-dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 1100px) { .jc-dash-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .jc-dash-grid { grid-template-columns: 1fr; } } .jc-dash-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 16px; background: rgba(250, 248, 243, .97); color: var(--jc-text); border: 1px solid var(--jc-border); box-shadow: var(--jc-shadow-sm); transition: transform .15s, box-shadow .15s; } .jc-dash-card:hover { transform: translateY(-2px); box-shadow: var(--jc-shadow); } .jc-dashcard-thumb { width: 68px; height: 68px; flex: 0 0 68px; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 30% 30%, #1f6f68, #0c453f); display: grid; place-items: center; } .jc-dashcard-thumb svg { width: 100%; height: 100%; display: block; } .jc-dashcard-thumb--ph { font-size: 30px; color: var(--jc-gold); } .jc-dashcard-body { flex: 1 1 auto; min-width: 0; } .jc-dashcard-toprow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .jc-dashcard-name { font-size: 16px; font-weight: 700; color: var(--jc-emerald); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jc-dashcard-birth { font-size: 13px; color: var(--jc-text); margin-top: 3px; } .jc-dashcard-place { font-size: 13px; color: var(--jc-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jc-dashcard-work { margin-top: 9px; font-size: 12px; color: var(--jc-muted); } .jc-dashcard-work-label { display: block; } .jc-dashcard-work-val { color: var(--jc-teal); font-weight: 600; } .jc-dashcard-foot { display: flex; justify-content: flex-end; margin-top: 10px; } .jc-dashcard-open { font-size: 14px; font-weight: 700; color: var(--jc-emerald); text-decoration: none; } .jc-dashcard-open:hover { color: var(--jc-teal); } .jc-dashcard-menuwrap { position: relative; flex: 0 0 auto; } .jc-dashcard-more { border: none; background: transparent; font-size: 18px; line-height: 1; color: var(--jc-muted); cursor: pointer; padding: 0 4px; border-radius: 6px; } .jc-dashcard-more:hover { background: var(--jc-tint); color: var(--jc-text); } .jc-dashcard-menu { position: absolute; right: 0; top: 24px; z-index: 20; min-width: 184px; background: #fff; border: 1px solid var(--jc-border); border-radius: 10px; box-shadow: var(--jc-shadow); padding: 4px; display: none; } .jc-dashcard-menu.open { display: block; } .jc-dashcard-mi { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--jc-text); cursor: pointer; font-family: inherit; } .jc-dashcard-mi:hover { background: var(--jc-tint); } .jc-dashcard-mi--danger { color: var(--jc-error); } .jc-dash-card--add { align-items: center; justify-content: center; text-align: center; gap: 4px; flex-direction: column; text-decoration: none; color: var(--jc-emerald); background: rgba(250, 248, 243, .55); border: 1.5px dashed rgba(31, 111, 104, .4); min-height: 116px; } .jc-dash-card--add:hover { background: rgba(250, 248, 243, .8); } .jc-dash-add-plus { font-size: 30px; line-height: 1; } .jc-dash-add-hint { font-size: 11.5px; color: var(--jc-muted); max-width: 200px; } .jc-dash-empty, .jc-dash-loading { grid-column: 1 / -1; text-align: center; padding: 40px 16px; color: rgba(250,248,243,.85); } .jc-dash-empty-ico { font-size: 34px; color: var(--jc-gold); margin-bottom: 8px; } .jc-dash-empty-sub { font-size: 13px; opacity: .7; margin: 6px 0 16px; } /* ── Автономна «База знань» (шорткод [jyotish_knowledge_base]) ─────────────── */ .jc-kb-page { max-width: 1200px; margin: 0 auto; padding: 20px; background: rgba(250, 248, 243, .97); color: var(--jc-text); border: 1px solid var(--jc-border); border-radius: var(--jc-radius); box-shadow: var(--jc-shadow-sm); } .jc-kb-page .jc-kb-head { display: flex; align-items: center; margin-bottom: 12px; } .jc-kb-page .jc-kb-title { font-size: 20px; font-weight: 700; color: var(--jc-emerald); } .jc-kb-page .jc-kb-search { margin-bottom: 14px; box-sizing: border-box; width: 100%; max-width: 100%; display: block; } .jc-kb-page-body .jc-kb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .jc-kb-page-body .jc-kb-list-item { text-align: left; padding: 10px 12px; border: 1px solid var(--jc-border); border-radius: 10px; background: #fff; color: var(--jc-text); cursor: pointer; font-family: inherit; font-size: 14px; transition: background .15s, border-color .15s; } .jc-kb-page-body .jc-kb-list-item:hover { background: var(--jc-tint); border-color: var(--jc-accent-light); } .jc-kb-page-body .jc-kb-entry-title { font-size: 18px; font-weight: 700; color: var(--jc-emerald); margin-bottom: 6px; } .jc-kb-page-body .jc-kb-img { max-width: 100%; border-radius: 12px; margin: 10px 0; } /* ── «Поточні транзити» — професійна панель ───────────────────────────────── */ .jc-goc-subtitle { font-size: 13px; margin: 2px 0 12px; } .jc-goc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--jc-tint); border: 1px solid var(--jc-border); margin-bottom: 8px; } .jc-goc-ctl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--jc-muted); } .jc-goc-ctl-lbl { white-space: nowrap; } .jc-goc-city { height: 40px; min-width: 120px; } .jc-goc-placelabel-name { color: var(--jc-fg, inherit); font-weight: 600; } /* City search sitting inline inside the controls row (replaces the old dropdown). */ .jc-goc-ctl-city { flex: 1 1 240px; min-width: 200px; } .jc-goc-ctl-city .jc-goc-citysearch { width: 100%; max-width: none; height: 40px; } /* Keep every control on one visual axis: identical box height + centered items. */ .jc-goc-controls { align-items: center; } .jc-goc-controls .jc-input, .jc-goc-controls .jc-kb-open-btn, .jc-goc-ctl-city gmp-place-autocomplete, .jc-goc-ctl-city .jc-goc-citysearch { height: 40px; box-sizing: border-box; vertical-align: middle; } .jc-goc-ctl-city gmp-place-autocomplete { display: block; width: 100%; } /* Optical alignment: the Places autocomplete input sits ~2px higher than the native datetime field — nudge it down so both baselines match. */ .jc-goc-ctl-city gmp-place-autocomplete, .jc-goc-ctl-city .jc-goc-citysearch { position: relative; top: 2px; } /* Action row: full-width «Показати транзити» + «Детальніше» directly below place. */ .jc-goc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; } .jc-goc-actions .jc-goc-go { flex: 1 1 auto; } .jc-goc-dt { height: 40px; flex: 1 1 200px; min-width: 180px; } .jc-goc-geo { height: 40px; padding: 0 10px; } .jc-goc-today { height: 40px; } .jc-goc-go { height: 40px; margin-top: 0; padding: 0 18px; white-space: nowrap; } .jc-goc-detail { height: 40px; margin-left: auto; } .jc-goc-placelabel { display: block; font-size: 12.5px; margin: -2px 2px 8px; } .jc-goc-extra { margin-bottom: 14px; } .jc-goc-card { padding: 16px; border-radius: 16px; background: var(--jc-white); border: 1px solid var(--jc-border); box-shadow: var(--jc-shadow-sm); } .jc-goc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; } .jc-goc-grid2--sky { grid-template-columns: minmax(280px, 0.9fr) 1.1fr; } .jc-goc-grid2--map { grid-template-columns: 1fr 1.05fr; } @media (max-width: 860px) { .jc-goc-grid2 { grid-template-columns: 1fr; } } .jc-goc-tablewrap { overflow-x: auto; } .jc-goc-planets { width: 100%; font-size: 13.5px; } .jc-goc-pname { cursor: pointer; white-space: nowrap; font-weight: 600; } .jc-goc-pname:hover { color: var(--jc-teal); } .jc-goc-psym { font-size: 15px; } .jc-goc-retro { color: var(--jc-error); font-weight: 700; } .jc-goc-sun { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; } .jc-pf-neu { background: rgba(120,120,120,.12); color: var(--jc-muted); } /* Картки сфер */ .jc-goc-spheres { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } @media (max-width: 900px) { .jc-goc-spheres { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .jc-goc-spheres { grid-template-columns: 1fr; } } .jc-goc-sphere { padding: 12px; border-radius: 12px; background: var(--jc-tint); border: 1px solid var(--jc-border); text-align: center; } .jc-goc-sphere-ico { font-size: 22px; } .jc-goc-sphere-name { font-weight: 700; color: var(--jc-emerald); margin-top: 2px; } .jc-goc-sphere-status { font-size: 12.5px; font-weight: 700; margin: 4px 0; } .jc-goc-good { color: var(--jc-success, #2e9e6b); } .jc-goc-neu { color: var(--jc-muted); } .jc-goc-bad { color: var(--jc-error); } .jc-goc-sphere-rec { font-size: 12px; color: var(--jc-muted); line-height: 1.4; } .jc-goc-sphere-det { font-size: 11.5px; color: var(--jc-text); margin-top: 6px; } .jc-goc-sphere-more { border: none; background: transparent; color: var(--jc-teal); font-size: 12px; cursor: pointer; margin-top: 6px; font-family: inherit; } /* Найближча зміна */ .jc-goc-nearest { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(201,162,39,.14), rgba(31,111,104,.10)); border: 1px solid rgba(201,162,39,.4); font-size: 14px; } .jc-goc-nearest-ico { font-size: 18px; color: var(--jc-gold); } .jc-goc-aspsel { height: 40px; margin-bottom: 10px; max-width: 260px; } .jc-goc-aspout .jc-kv { margin: 4px 0; } .jc-goc-nav { flex-wrap: wrap; } /* Компактна шапка «Календар Дня» */ .jc-goc-head { text-align: center; margin: 4px 0 14px; } .jc-goc-title { display: inline-flex; align-items: center; gap: 12px; font-family: Georgia, 'Times New Roman', serif; font-size: 26px; font-weight: 700; color: var(--jc-emerald); line-height: 1.1; } .jc-goc-title-star { color: var(--jc-gold); font-size: 18px; } .jc-goc-head .jc-goc-subtitle { margin: 6px 0 0; font-size: 13px; } .jc-goc-head::after { content: ''; display: block; width: 60px; height: 2px; margin: 8px auto 0; background: var(--jc-gold); border-radius: 2px; opacity: .7; } /* Пошук будь-якого міста в «Календарі дня» */ .jc-goc-search { margin: 8px 0 4px; } .jc-goc-citysearch { width: 100%; max-width: 420px; box-sizing: border-box; } /* ── «Прогноз» — персональний навігатор ───────────────────────────────────── */ .jc-fc-good { color: var(--jc-success, #2e9e6b); } .jc-fc-tense { color: var(--jc-error); } .jc-fc-neu { color: var(--jc-muted); } .jc-fc-theme { background: var(--jc-tint); border-radius: 12px; } .jc-fc-sphere { padding: 10px 0; border-bottom: 1px solid var(--jc-border); } .jc-fc-sphere:last-child { border-bottom: none; } .jc-fc-sphere-top { display: flex; align-items: center; gap: 8px; } .jc-fc-sphere-name { font-weight: 700; color: var(--jc-emerald); } .jc-fc-badge { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #3a2f00; background: linear-gradient(135deg, var(--jc-gold), #e6c458); padding: 2px 7px; border-radius: 999px; } .jc-fc-sphere-score { margin-left: auto; font-weight: 800; font-size: 14px; } .jc-fc-bar { height: 6px; border-radius: 4px; background: rgba(0,0,0,.08); margin: 6px 0; overflow: hidden; } .jc-fc-bar-fill { height: 100%; border-radius: 4px; background: var(--jc-teal); } .jc-fc-bar-fill.jc-fc-good { background: var(--jc-success, #2e9e6b); } .jc-fc-bar-fill.jc-fc-tense { background: var(--jc-error); } .jc-fc-bar-fill.jc-fc-neu { background: var(--jc-jade); } .jc-fc-sphere-note { font-size: 13px; color: var(--jc-text); } .jc-fc-window { padding: 10px 12px; border-radius: 12px; margin: 8px 0; border: 1px solid var(--jc-border); font-size: 13.5px; } .jc-fc-win-good { background: rgba(46,158,107,.08); border-color: rgba(46,158,107,.35); } .jc-fc-win-warn { background: rgba(201,60,60,.07); border-color: rgba(201,60,60,.3); } .jc-fc-window-range { font-weight: 800; color: var(--jc-emerald); } .jc-fc-window > div { margin-top: 2px; } .jc-fc-date { border: 1px solid var(--jc-border); border-radius: 10px; margin: 6px 0; overflow: hidden; } .jc-fc-date-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; } .jc-fc-date-head:hover { background: var(--jc-tint); } .jc-fc-date-d { font-weight: 800; color: var(--jc-emerald); min-width: 48px; } .jc-fc-date-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.06); color: var(--jc-muted); } .jc-fc-cat-favorable .jc-fc-date-cat { background: rgba(46,158,107,.15); color: var(--jc-success,#2e9e6b); } .jc-fc-cat-attention .jc-fc-date-cat { background: rgba(201,60,60,.13); color: var(--jc-error); } .jc-fc-cat-major .jc-fc-date-cat { background: linear-gradient(135deg, var(--jc-gold), #e6c458); color: #3a2f00; } .jc-fc-date-label { color: var(--jc-text); font-size: 13.5px; } .jc-fc-date-detail { padding: 0 12px 10px; font-size: 13px; color: var(--jc-muted); } .jc-fc-doavoid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 720px) { .jc-fc-doavoid { grid-template-columns: 1fr; } } .jc-fc-conclusion { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, rgba(201,162,39,.12), rgba(31,111,104,.10)); border: 1px solid rgba(201,162,39,.35); font-size: 14px; } .jc-fc-rc { margin-top: 10px; display: grid; gap: 8px; } .jc-fc-rc-item { padding: 8px 12px; border-radius: 10px; background: var(--jc-white); border: 1px solid var(--jc-border); font-size: 13.5px; } .jc-fc-calendar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 760px) { .jc-fc-calendar { grid-template-columns: repeat(2, 1fr); } } .jc-fc-cal-cell { padding: 10px; border-radius: 12px; border: 1px solid var(--jc-border); background: var(--jc-white); cursor: pointer; text-align: center; transition: transform .12s, box-shadow .12s; } .jc-fc-cal-cell:hover { transform: translateY(-2px); box-shadow: var(--jc-shadow-sm); } .jc-fc-cal-m { font-weight: 700; color: var(--jc-emerald); } .jc-fc-cal-stars { color: var(--jc-gold); letter-spacing: 1px; font-size: 13px; margin: 2px 0; } .jc-fc-cal-tag { font-size: 11.5px; color: var(--jc-muted); } .jc-fc-cmp { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--jc-border); flex-wrap: wrap; } .jc-fc-cmp:last-child { border-bottom: none; } .jc-fc-cmp-name { font-weight: 700; color: var(--jc-emerald); min-width: 140px; } .jc-fc-cmp-months { color: var(--jc-text); font-size: 13px; } /* ── Фінансовий блок у Прогнозі ───────────────────────────────────────────── */ .jc-fin-box { border: 1px solid rgba(201,162,39,.4); border-radius: 14px; background: linear-gradient(135deg, rgba(201,162,39,.06), rgba(31,111,104,.04)); } .jc-fin-h { color: var(--jc-emerald); letter-spacing: .03em; } .jc-fin-score { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 8px; } .jc-fin-score-num { font-size: 26px; font-weight: 800; color: var(--jc-gold); } .jc-fin-score-word { font-size: 14px; color: var(--jc-muted); } .jc-fin-sub { font-weight: 700; color: var(--jc-emerald); margin: 12px 0 4px; font-size: 14px; } .jc-fin-clickable { cursor: pointer; } .jc-fin-clickable:hover { color: var(--jc-teal); } .jc-fin-q { padding: 8px 0; border-bottom: 1px dashed var(--jc-border); } .jc-fin-q:last-child { border-bottom: none; } .jc-fin-q-q { font-weight: 700; color: var(--jc-emerald); font-size: 13.5px; } .jc-fin-q-a { font-size: 13.5px; color: var(--jc-text); margin-top: 2px; } /* ─── Календар Місяця ─────────────────────────────────────────────────── */ .jc-month-panel { } .jc-mc-cityrow { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 2px; max-width: 520px; } .jc-mc-cityrow .jc-mc-citysearch { height: 40px; box-sizing: border-box; } .jc-mc-cityrow gmp-place-autocomplete { display: block; width: 100%; height: 40px; } .jc-mc-placelabel { font-size: 12.5px; margin: 2px 2px 10px; } .jc-mc-header { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; flex-wrap: wrap; } .jc-mc-nav { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--jc-border); background: var(--jc-tint); font-size: 20px; line-height: 1; cursor: pointer; color: var(--jc-fg, #234); } .jc-mc-nav:hover { background: var(--jc-border); } .jc-mc-title { font-weight: 700; font-size: 18px; min-width: 190px; text-align: center; color: var(--jc-accent, #1f7a63); } .jc-mc-body { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .jc-mc-grid-holder { flex: 1 1 560px; min-width: 300px; } .jc-mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .jc-mc-wd { text-align: center; font-weight: 600; font-size: 12px; color: var(--jc-muted); padding: 4px 0; } .jc-mc-cell { min-height: 78px; border: 1px solid var(--jc-border); border-radius: 10px; background: var(--jc-card, #fff); padding: 5px 6px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit; transition: background .12s, border-color .12s; } .jc-mc-cell:hover { background: var(--jc-tint); border-color: var(--jc-accent, #1f7a63); } .jc-mc-cell.jc-mc-empty { border: none; background: transparent; cursor: default; } .jc-mc-cell.jc-mc-today { border-color: var(--jc-accent, #1f7a63); box-shadow: 0 0 0 1px var(--jc-accent, #1f7a63) inset; } .jc-mc-cell-top { display: flex; justify-content: space-between; align-items: center; } .jc-mc-daynum { font-weight: 700; font-size: 14px; } .jc-mc-marks { font-size: 11px; letter-spacing: 1px; } .jc-mc-cell-tithi { font-size: 11px; color: var(--jc-fg, #234); line-height: 1.2; } .jc-mc-cell-nak { font-size: 10.5px; color: var(--jc-muted); line-height: 1.2; } .jc-mc-overview { flex: 1 1 240px; min-width: 220px; background: var(--jc-tint); border: 1px solid var(--jc-border); border-radius: 12px; padding: 12px 14px; } .jc-mc-ov-head { font-weight: 700; margin-bottom: 8px; color: var(--jc-accent, #1f7a63); } .jc-mc-ov-section { margin-bottom: 10px; } .jc-mc-ov-title { font-weight: 600; font-size: 13px; margin-bottom: 3px; } .jc-mc-ov-list { margin: 0; padding-left: 16px; font-size: 12px; color: var(--jc-fg, #234); } .jc-mc-ov-list li { margin: 1px 0; } .jc-mc-detail { margin-top: 14px; } .jc-mc-detailbox .jc-mc-kv { display: flex; gap: 8px; padding: 2px 0; font-size: 13px; } .jc-mc-kv-k { min-width: 92px; color: var(--jc-muted); } .jc-mc-kv-v { flex: 1; } .jc-mc-tag { display: inline-block; background: var(--jc-tint); border: 1px solid var(--jc-border); border-radius: 999px; padding: 2px 10px; font-size: 12px; margin-right: 6px; } .jc-mc-planets { width: 100%; font-size: 12.5px; } @media (max-width: 640px) { .jc-mc-cell { min-height: 64px; padding: 4px; } .jc-mc-cell-nak { display: none; } .jc-mc-title { font-size: 16px; min-width: 150px; } } /* Календар Місяця — оцінка сприятливості + «порожні руки» */ .jc-mc-cell.jc-mc-good { background: rgba(46, 158, 107, 0.10); } .jc-mc-cell.jc-mc-neutral { background: rgba(214, 158, 46, 0.10); } .jc-mc-cell.jc-mc-bad { background: rgba(200, 64, 64, 0.10); } .jc-mc-cell.jc-mc-good:hover { background: rgba(46, 158, 107, 0.20); } .jc-mc-cell.jc-mc-neutral:hover { background: rgba(214, 158, 46, 0.20); } .jc-mc-cell.jc-mc-bad:hover { background: rgba(200, 64, 64, 0.20); } .jc-mc-cell.jc-mc-rikta { border-left: 3px solid #b06a1f; } .jc-mc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; font-size: 11.5px; color: var(--jc-muted); } .jc-mc-lg { padding: 2px 8px; border-radius: 999px; } .jc-mc-lg-good { background: rgba(46, 158, 107, 0.18); color: #1f7a5a; } .jc-mc-lg-neutral { background: rgba(214, 158, 46, 0.18); color: #9a6a10; } .jc-mc-lg-bad { background: rgba(200, 64, 64, 0.18); color: #a33; } .jc-mc-lg-note { flex-basis: 100%; } .jc-mc-verdict { display: inline-block; font-weight: 700; padding: 4px 12px; border-radius: 8px; font-size: 13px; } .jc-mc-verdict-good { background: rgba(46, 158, 107, 0.18); color: #1f7a5a; } .jc-mc-verdict-neutral { background: rgba(214, 158, 46, 0.18); color: #9a6a10; } .jc-mc-verdict-bad { background: rgba(200, 64, 64, 0.18); color: #a33; } /* Календар Місяця — розшифровки в огляді */ .jc-mc-ov-main { font-weight: 600; } .jc-mc-ov-sub { font-size: 11.5px; color: var(--jc-muted); line-height: 1.35; margin-left: 2px; } .jc-mc-ov-list li { margin: 4px 0; } /* ─── Дашборд: hero-форма, тулбар, футер, виділена картка ──────────────── */ .jc-dash-hero-formwrap { flex: 1; min-width: 0; } .jc-dash-hero-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 12px; } @media (max-width: 720px) { .jc-dash-hero-fields { grid-template-columns: 1fr; } } .jc-dash-fld { display: flex; flex-direction: column; gap: 4px; } .jc-dash-fld-lbl { font-size: 11.5px; color: var(--jc-muted); } .jc-dash-field { height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--jc-border); background: #fff; color: var(--jc-text); font: inherit; font-size: 13px; box-sizing: border-box; width: 100%; } .jc-dash-field:focus { outline: none; border-color: var(--jc-emerald); } .jc-dash-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .jc-dash-adv { font-size: 13px; color: var(--jc-emerald); text-decoration: none; } .jc-dash-adv:hover { text-decoration: underline; } .jc-dash-hero-left { align-items: flex-start; } /* нижні дії сайдбара */ .jc-dash-navactions { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(127,184,174,.18); display: flex; flex-direction: column; gap: 8px; } .jc-dash-navaction { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--jc-milk); background: rgba(127,184,174,.10); } .jc-dash-navaction:hover { background: rgba(127,184,174,.20); } .jc-dash-navaction-ico { font-size: 16px; } .jc-dash-navaction-lbl { display: block; font-weight: 600; font-size: 13.5px; } .jc-dash-navaction-sub { display: block; font-size: 11px; color: var(--jc-jade); } /* тулбар списку */ .jc-dash-listbar { align-items: center; } .jc-dash-listtools { display: flex; align-items: center; gap: 14px; } .jc-dash-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--jc-milk); } .jc-dash-sortsel { height: 32px; border-radius: 8px; border: 1px solid var(--jc-border); background: #fff; color: var(--jc-text); font: inherit; font-size: 12.5px; padding: 0 8px; } .jc-dash-viewtoggle { display: inline-flex; border: 1px solid rgba(127,184,174,.3); border-radius: 8px; overflow: hidden; } .jc-dash-viewbtn { width: 34px; height: 32px; border: none; background: transparent; color: rgba(250,248,243,.7); cursor: pointer; font-size: 15px; } .jc-dash-viewbtn.is-active { background: rgba(127,184,174,.22); color: #fff; } /* виділена картка «Продовжити роботу» */ .jc-dash-card--featured { border-color: rgba(201,162,39,.5); box-shadow: 0 0 0 1px rgba(201,162,39,.4), var(--jc-shadow-sm); } .jc-dashcard-featlabel { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--jc-emerald); margin-bottom: 4px; } .jc-dashcard-star { color: var(--jc-gold); font-size: 15px; } /* список замість плиток */ .jc-dash-grid.is-list { grid-template-columns: 1fr; } .jc-dash-grid.is-list .jc-dash-card--add { justify-content: center; } /* футер-смуга «довіри» */ .jc-dash-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; padding: 16px; border-radius: 16px; background: rgba(250,248,243,.06); border: 1px solid rgba(127,184,174,.16); } @media (max-width: 900px) { .jc-dash-trust { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .jc-dash-trust { grid-template-columns: 1fr; } } .jc-dash-trust-item { display: flex; gap: 10px; align-items: flex-start; } .jc-dash-trust-ico { font-size: 18px; color: var(--jc-gold); } .jc-dash-trust-t { font-weight: 700; font-size: 13px; color: var(--jc-milk); } .jc-dash-trust-s { font-size: 11.5px; color: var(--jc-jade); line-height: 1.35; margin-top: 2px; } /* ─── Дашборд: світла підкладка основної колонки (#F8F7F5) ─────────────── */ .jc-dash-main { background: #F8F7F5; padding: 20px; border-radius: 18px; border: 1px solid var(--jc-border); } /* Текст, який раніше був світлим (під тёмний фон) — робимо тёмним на світлому */ .jc-dash-main .jc-dash-listtitle { color: var(--jc-text); } .jc-dash-main .jc-dash-listmeta { color: var(--jc-muted); } .jc-dash-main .jc-dash-sort { color: var(--jc-text); } .jc-dash-main .jc-dash-viewtoggle { border-color: rgba(31,111,104,.28); } .jc-dash-main .jc-dash-viewbtn { color: rgba(20,40,36,.45); } .jc-dash-main .jc-dash-viewbtn.is-active { background: rgba(31,111,104,.14); color: var(--jc-emerald); } /* Футер-смуга «довіри» на світлому фоні */ .jc-dash-main .jc-dash-trust { background: #fff; border-color: var(--jc-border); } .jc-dash-main .jc-dash-trust-t { color: var(--jc-text); } .jc-dash-main .jc-dash-trust-s { color: var(--jc-muted); }