4168 lines
104 KiB
CSS
4168 lines
104 KiB
CSS
:root {
|
|
--font-script-main: "Noto Sans Hebrew", "Noto Serif", "Noto Sans Phoenician", "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
|
|
--font-script-display: "Noto Sans Hebrew", "Noto Serif", "Noto Sans Phoenician", "Segoe UI Symbol", serif;
|
|
--font-script-arabic: "Amiri", "Noto Naskh Arabic", "Scheherazade New", "Arabic Typesetting", "Arial Unicode MS", serif;
|
|
--font-script-enochian: "Enochian", "Petrus Enochian", "Segoe UI Historic", "Segoe UI Symbol", serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, var(--font-script-main);
|
|
background: #0f0f14;
|
|
color: #f4f4f5;
|
|
}
|
|
.topbar {
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border-bottom: 1px solid #27272a;
|
|
background: #18181b;
|
|
}
|
|
.topbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.topbar-dropdown {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.topbar-dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
min-width: 140px;
|
|
display: none;
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
padding: 6px;
|
|
border-radius: 10px;
|
|
border: 1px solid #3f3f46;
|
|
background: #18181b;
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
|
|
z-index: 40;
|
|
}
|
|
.topbar-dropdown.is-open .topbar-dropdown-menu {
|
|
display: grid;
|
|
}
|
|
.topbar-sub-trigger {
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 13px;
|
|
padding: 6px 10px;
|
|
}
|
|
.topbar-sub-trigger.is-active {
|
|
background: #3f3f46;
|
|
border-color: #52525b;
|
|
}
|
|
.settings-trigger {
|
|
padding: 7px 12px;
|
|
border-radius: 8px;
|
|
border: 1px solid #3f3f46;
|
|
background: #27272a;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
.settings-trigger:hover {
|
|
background: #3f3f46;
|
|
}
|
|
.settings-trigger[aria-pressed="true"] {
|
|
background: #3f3f46;
|
|
}
|
|
#tarot-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
#planet-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#cycles-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#iching-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#calendar-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#holiday-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#tarot-section[hidden] {
|
|
display: none;
|
|
}
|
|
#planet-section[hidden] {
|
|
display: none;
|
|
}
|
|
#cycles-section[hidden] {
|
|
display: none;
|
|
}
|
|
#iching-section[hidden] {
|
|
display: none;
|
|
}
|
|
#calendar-section[hidden] {
|
|
display: none;
|
|
}
|
|
#holiday-section[hidden] {
|
|
display: none;
|
|
}
|
|
.calendar-year-control {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.calendar-holiday-filter {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.calendar-year-control label {
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
}
|
|
.calendar-holiday-filter label {
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
}
|
|
.calendar-year-control input {
|
|
width: 110px;
|
|
padding: 7px 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
background: #09090b;
|
|
color: #f4f4f5;
|
|
box-sizing: border-box;
|
|
font-size: 13px;
|
|
text-align: right;
|
|
}
|
|
.calendar-holiday-filter select {
|
|
min-width: 150px;
|
|
max-width: 210px;
|
|
width: 100%;
|
|
padding: 7px 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
background: #09090b;
|
|
color: #f4f4f5;
|
|
box-sizing: border-box;
|
|
font-size: 13px;
|
|
}
|
|
.cal-item-stack {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
.cal-item-row {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
background: #111118;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.cal-item-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.cal-item-name {
|
|
font-weight: 600;
|
|
color: #f4f4f5;
|
|
}
|
|
.tarot-layout {
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tarot-section-house-top {
|
|
padding: 10px 12px 8px;
|
|
border-bottom: 1px solid #27272a;
|
|
max-height: min(44vh, 420px);
|
|
overflow: auto;
|
|
background: #151520;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.tarot-list-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
border-right: 1px solid #27272a;
|
|
background: #111118;
|
|
}
|
|
.tarot-list-header {
|
|
padding: 14px 14px 10px;
|
|
border-bottom: 1px solid #27272a;
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
.tarot-list-count {
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
}
|
|
.dataset-search-wrap {
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid #27272a;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
.dataset-search-input {
|
|
width: 100%;
|
|
padding: 7px 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
background: #09090b;
|
|
color: #f4f4f5;
|
|
box-sizing: border-box;
|
|
font-size: 13px;
|
|
}
|
|
.dataset-search-input::placeholder {
|
|
color: #71717a;
|
|
}
|
|
.dataset-search-clear {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
background: #27272a;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
font-size: 14px;
|
|
padding: 0;
|
|
}
|
|
.dataset-search-clear:hover {
|
|
background: #3f3f46;
|
|
}
|
|
.dataset-search-clear:disabled {
|
|
opacity: 0.45;
|
|
cursor: default;
|
|
}
|
|
.tarot-card-list {
|
|
overflow: auto;
|
|
flex: 1;
|
|
min-height: 0;
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.tarot-list-item {
|
|
width: 100%;
|
|
text-align: left;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid #3f3f46;
|
|
background: #18181b;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
}
|
|
.tarot-list-item:hover,
|
|
.tarot-list-item.is-selected {
|
|
background: #27272a;
|
|
border-color: #52525b;
|
|
}
|
|
.tarot-list-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.tarot-list-meta {
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
}
|
|
.tarot-detail-panel {
|
|
min-width: 0;
|
|
overflow: auto;
|
|
padding: 18px;
|
|
display: grid;
|
|
grid-template-rows: auto auto auto;
|
|
gap: 16px;
|
|
background: #18181b;
|
|
}
|
|
.tarot-detail-top {
|
|
display: grid;
|
|
grid-template-columns: 150px minmax(0, 1fr);
|
|
gap: 16px;
|
|
align-items: start;
|
|
}
|
|
.tarot-detail-image {
|
|
width: 150px;
|
|
height: 225px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
background: #09090b;
|
|
}
|
|
.tarot-detail-heading h2 {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
line-height: 1.2;
|
|
}
|
|
.tarot-detail-type {
|
|
margin-top: 4px;
|
|
color: #a1a1aa;
|
|
font-size: 13px;
|
|
}
|
|
.tarot-detail-summary {
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
color: #e4e4e7;
|
|
}
|
|
.tarot-meanings {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.tarot-meaning-card {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
background: #111118;
|
|
}
|
|
.tarot-meaning-card strong {
|
|
display: block;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: #a1a1aa;
|
|
margin-bottom: 6px;
|
|
}
|
|
.tarot-meaning-card div {
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
color: #e4e4e7;
|
|
}
|
|
.tarot-meta-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.tarot-meta-card {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
background: #111118;
|
|
}
|
|
.tarot-meta-card strong {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.tarot-keywords {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.tarot-keyword-chip {
|
|
border: 1px solid #52525b;
|
|
border-radius: 999px;
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
color: #e4e4e7;
|
|
background: #27272a;
|
|
}
|
|
.tarot-relations {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
line-height: 1.35;
|
|
}
|
|
.tarot-relation-btn {
|
|
width: 100%;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 8px;
|
|
background: #18181b;
|
|
color: #e4e4e7;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
padding: 7px 8px;
|
|
font-size: 13px;
|
|
line-height: 1.35;
|
|
}
|
|
.tarot-relation-btn:hover,
|
|
.tarot-relation-btn.is-selected {
|
|
background: #27272a;
|
|
border-color: #52525b;
|
|
}
|
|
.tarot-relation-btn-static {
|
|
cursor: default;
|
|
}
|
|
.tarot-relation-btn-static:hover {
|
|
background: #18181b;
|
|
border-color: #3f3f46;
|
|
}
|
|
/* Navigatable relation list items */
|
|
.tarot-rel-item {
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: stretch;
|
|
}
|
|
.tarot-rel-item .tarot-relation-btn {
|
|
flex: 1;
|
|
width: auto;
|
|
}
|
|
.tarot-rel-nav-btn {
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 8px;
|
|
background: #18181b;
|
|
color: #7070a0;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
transition: background 0.1s, color 0.1s, border-color 0.1s;
|
|
}
|
|
.tarot-rel-nav-btn:hover {
|
|
background: #27272a;
|
|
color: #c8b8f8;
|
|
border-color: #7060b0;
|
|
}
|
|
.tarot-relation-detail {
|
|
margin-top: 10px;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 8px;
|
|
background: #18181b;
|
|
padding: 8px;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.tarot-relation-detail-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #f4f4f5;
|
|
}
|
|
.tarot-relation-detail-meta {
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
.tarot-relation-detail-data {
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
color: #d4d4d8;
|
|
white-space: pre-wrap;
|
|
margin: 0;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
/* Kabbalah path cross-reference panel in tarot detail */
|
|
.tarot-kab-path-card {
|
|
border: 1px solid #4a4a6a;
|
|
border-radius: 10px;
|
|
padding: 12px 14px;
|
|
background: #0e0e1e;
|
|
margin-top: 4px;
|
|
}
|
|
.tarot-kab-path-card[hidden] { display: none; }
|
|
.tarot-kab-path-card > strong {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.tarot-kab-path-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.tarot-kab-letter {
|
|
font-size: 36px;
|
|
line-height: 1;
|
|
color: #a8a8e0;
|
|
flex-shrink: 0;
|
|
font-family: var(--font-script-display);
|
|
}
|
|
.tarot-kab-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
.tarot-kab-name {
|
|
font-size: 14px;
|
|
color: #e4e4e7;
|
|
}
|
|
.tarot-kab-connects {
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
.tarot-misc-section {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.tarot-misc-title {
|
|
display: block;
|
|
margin: 0;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.tarot-house-card {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.tarot-house-card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tarot-house-card-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tarot-house-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 36px;
|
|
padding: 0 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid #3f3f46;
|
|
background: #18181b;
|
|
color: #f4f4f5;
|
|
font-size: 13px;
|
|
line-height: 1.2;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.tarot-house-toggle:hover {
|
|
background: #27272a;
|
|
border-color: #52525b;
|
|
}
|
|
|
|
.tarot-house-toggle input {
|
|
margin: 0;
|
|
accent-color: #6366f1;
|
|
}
|
|
|
|
.tarot-house-toggle input:disabled {
|
|
cursor: progress;
|
|
}
|
|
|
|
.tarot-house-toggle:has(input:disabled) {
|
|
opacity: 0.65;
|
|
cursor: progress;
|
|
}
|
|
|
|
.tarot-house-filter {
|
|
display: grid;
|
|
gap: 4px;
|
|
color: #d4d4d8;
|
|
font-size: 11px;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-house-filter-select {
|
|
min-width: 132px;
|
|
padding: 7px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid #3f3f46;
|
|
background: #18181b;
|
|
color: #f4f4f5;
|
|
font-size: 13px;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.tarot-house-filter-select:disabled {
|
|
opacity: 0.65;
|
|
cursor: progress;
|
|
}
|
|
|
|
.tarot-house-filter-group {
|
|
margin: 0;
|
|
padding: 6px 8px;
|
|
min-height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 8px;
|
|
background: #18181b;
|
|
}
|
|
|
|
.tarot-house-filter-group legend {
|
|
padding: 0 4px;
|
|
color: #d4d4d8;
|
|
font-size: 11px;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-house-mini-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-height: 24px;
|
|
padding: 2px 6px;
|
|
border-radius: 999px;
|
|
background: #111118;
|
|
color: #f4f4f5;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.tarot-house-mini-toggle input {
|
|
margin: 0;
|
|
accent-color: #6366f1;
|
|
}
|
|
|
|
.tarot-house-mini-toggle:has(input:disabled) {
|
|
opacity: 0.65;
|
|
cursor: progress;
|
|
}
|
|
|
|
.tarot-house-action-btn {
|
|
padding: 7px 12px;
|
|
border-radius: 8px;
|
|
border: 1px solid #3f3f46;
|
|
background: #18181b;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.tarot-house-action-btn:hover:not(:disabled) {
|
|
background: #27272a;
|
|
border-color: #52525b;
|
|
}
|
|
|
|
.tarot-house-action-btn[aria-pressed="true"] {
|
|
background: #312e81;
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
.tarot-house-action-btn:disabled {
|
|
opacity: 0.65;
|
|
cursor: progress;
|
|
}
|
|
|
|
.tarot-house-layout {
|
|
--tarot-house-card-width: 76.8px;
|
|
--tarot-house-card-height: 115.2px;
|
|
--tarot-house-card-gap: 6px;
|
|
--tarot-house-row-gap: 8px;
|
|
--tarot-house-section-gap: 12px;
|
|
--tarot-house-major-row-width: calc((var(--tarot-house-card-width) * 11) + (var(--tarot-house-card-gap) * 10));
|
|
display: grid;
|
|
gap: var(--tarot-house-section-gap);
|
|
justify-content: center;
|
|
}
|
|
|
|
.tarot-house-trumps {
|
|
display: grid;
|
|
gap: var(--tarot-house-row-gap);
|
|
overflow-x: auto;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.tarot-house-trump-row {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: var(--tarot-house-card-gap);
|
|
width: min(100%, var(--tarot-house-major-row-width));
|
|
max-width: 100%;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tarot-house-bottom-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, max-content);
|
|
width: min(100%, var(--tarot-house-major-row-width));
|
|
max-width: 100%;
|
|
column-gap: 0;
|
|
row-gap: 0;
|
|
justify-content: space-between;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tarot-house-column {
|
|
display: grid;
|
|
gap: var(--tarot-house-row-gap);
|
|
align-content: start;
|
|
}
|
|
|
|
.tarot-house-row {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: var(--tarot-house-card-gap);
|
|
}
|
|
|
|
.tarot-house-card-btn {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 6px;
|
|
padding: 0;
|
|
background: #18181b;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
line-height: 0;
|
|
position: relative;
|
|
transform-origin: center;
|
|
transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
|
|
}
|
|
|
|
.tarot-house-card-btn.is-text-only {
|
|
background:
|
|
radial-gradient(circle at top, rgba(99, 102, 241, 0.16) 0%, rgba(99, 102, 241, 0) 48%),
|
|
linear-gradient(180deg, #1b1b27 0%, #111118 100%);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.tarot-house-card-btn:hover {
|
|
border-color: #7060b0;
|
|
background: #27272a;
|
|
}
|
|
|
|
.tarot-house-card-btn.is-text-only:hover {
|
|
background:
|
|
radial-gradient(circle at top, rgba(129, 140, 248, 0.2) 0%, rgba(129, 140, 248, 0) 50%),
|
|
linear-gradient(180deg, #212132 0%, #171723 100%);
|
|
}
|
|
|
|
.tarot-house-card-btn.is-selected {
|
|
border-color: #7060b0;
|
|
background: #27272a;
|
|
transform: scale(1.18);
|
|
z-index: 2;
|
|
box-shadow: 0 0 0 2px #7060b0;
|
|
}
|
|
|
|
.tarot-house-card-image {
|
|
display: block;
|
|
width: var(--tarot-house-card-width);
|
|
height: var(--tarot-house-card-height);
|
|
object-fit: cover;
|
|
background: #09090b;
|
|
}
|
|
|
|
.tarot-house-card-text-face {
|
|
width: var(--tarot-house-card-width);
|
|
height: var(--tarot-house-card-height);
|
|
display: grid;
|
|
align-content: center;
|
|
justify-items: center;
|
|
gap: 6px;
|
|
padding: 10px 8px;
|
|
box-sizing: border-box;
|
|
color: #fafafa;
|
|
text-align: center;
|
|
}
|
|
|
|
.tarot-house-card-text-face.is-dense {
|
|
gap: 4px;
|
|
padding: 8px 7px;
|
|
}
|
|
|
|
.tarot-house-card-text-face.is-top-hebrew .tarot-house-card-text-primary {
|
|
font-size: 26px;
|
|
line-height: 1;
|
|
font-family: "Noto Sans Hebrew", "Segoe UI Symbol", sans-serif;
|
|
}
|
|
|
|
.tarot-house-card-text-primary {
|
|
display: block;
|
|
font-size: 13px;
|
|
line-height: 1.2;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.tarot-house-card-text-secondary {
|
|
display: block;
|
|
color: rgba(250, 250, 250, 0.76);
|
|
font-size: 9px;
|
|
line-height: 1.25;
|
|
letter-spacing: 0.02em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.tarot-house-card-label {
|
|
position: absolute;
|
|
left: 4px;
|
|
right: 4px;
|
|
bottom: 4px;
|
|
padding: 4px 5px;
|
|
border-radius: 5px;
|
|
background: linear-gradient(180deg, rgba(9, 9, 11, 0.2) 0%, rgba(9, 9, 11, 0.9) 100%);
|
|
color: #fafafa;
|
|
font-size: 9px;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
letter-spacing: 0.02em;
|
|
pointer-events: none;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tarot-house-card-label.is-top-hebrew {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.tarot-house-card-label.is-dense {
|
|
font-size: 8px;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.tarot-house-card-label-primary {
|
|
display: block;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tarot-house-card-label-secondary {
|
|
display: block;
|
|
margin-top: 2px;
|
|
color: rgba(250, 250, 250, 0.84);
|
|
font-size: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tarot-house-card-fallback {
|
|
width: var(--tarot-house-card-width);
|
|
height: var(--tarot-house-card-height);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #a1a1aa;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
line-height: 1.2;
|
|
padding: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#tarot-browse-view.is-house-focus {
|
|
grid-template-rows: minmax(0, 1fr);
|
|
}
|
|
|
|
#tarot-browse-view.is-house-focus .tarot-section-house-top {
|
|
max-height: none;
|
|
height: 100%;
|
|
padding: 14px;
|
|
overflow: auto;
|
|
}
|
|
|
|
#tarot-browse-view.is-house-focus .tarot-layout {
|
|
display: none;
|
|
}
|
|
|
|
#tarot-browse-view.is-house-focus .tarot-house-layout {
|
|
--tarot-house-card-gap: clamp(4px, 0.6vw, 8px);
|
|
--tarot-house-row-gap: clamp(6px, 0.9vw, 10px);
|
|
--tarot-house-section-gap: clamp(12px, 1.4vw, 16px);
|
|
--tarot-house-card-width: clamp(48px, calc((100vw - 240px) / 11), 112px);
|
|
--tarot-house-card-height: calc(var(--tarot-house-card-width) * 1.5);
|
|
min-height: 100%;
|
|
align-content: start;
|
|
}
|
|
|
|
#tarot-browse-view.is-house-focus .tarot-house-trumps {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.planet-layout {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
|
|
min-height: 0;
|
|
}
|
|
.planet-list-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow-x: hidden;
|
|
border-right: 1px solid #27272a;
|
|
background: #111118;
|
|
}
|
|
.planet-list-header {
|
|
padding: 14px 14px 10px;
|
|
border-bottom: 1px solid #27272a;
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
.planet-list-count {
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
}
|
|
.planet-card-list {
|
|
overflow: auto;
|
|
flex: 1;
|
|
min-height: 0;
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.planet-list-item {
|
|
width: 100%;
|
|
text-align: left;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid #3f3f46;
|
|
background: #18181b;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
}
|
|
.planet-list-item:hover,
|
|
.planet-list-item.is-selected {
|
|
background: #27272a;
|
|
border-color: #52525b;
|
|
}
|
|
.planet-list-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.planet-list-meta {
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
}
|
|
.planet-detail-panel {
|
|
min-width: 0;
|
|
overflow: auto;
|
|
padding: 18px;
|
|
display: grid;
|
|
grid-template-rows: auto auto;
|
|
gap: 16px;
|
|
background: #18181b;
|
|
}
|
|
.planet-detail-heading h2 {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
line-height: 1.2;
|
|
}
|
|
.planet-detail-type {
|
|
margin-top: 4px;
|
|
color: #a1a1aa;
|
|
font-size: 13px;
|
|
}
|
|
.planet-detail-summary {
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
color: #e4e4e7;
|
|
}
|
|
.planet-meta-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 12px;
|
|
align-items: start;
|
|
}
|
|
.planet-meta-card {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
background: #111118;
|
|
}
|
|
.planet-meta-card strong {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.planet-facts-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.planet-fact-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(140px, 1fr) minmax(120px, 1fr);
|
|
gap: 10px;
|
|
align-items: baseline;
|
|
padding-bottom: 4px;
|
|
border-bottom: 1px dashed #27272a;
|
|
}
|
|
.planet-fact-label {
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
}
|
|
.planet-fact-value {
|
|
color: #f4f4f5;
|
|
font-size: 13px;
|
|
text-align: right;
|
|
}
|
|
.planet-notes {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
display: grid;
|
|
gap: 6px;
|
|
color: #e4e4e7;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
}
|
|
.planet-text {
|
|
margin: 0;
|
|
color: #e4e4e7;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
}
|
|
.iching-trigram-grid {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
.iching-trigram-card {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 8px;
|
|
background: #18181b;
|
|
padding: 8px;
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
.iching-trigram-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #f4f4f5;
|
|
}
|
|
.iching-trigram-meta {
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
}
|
|
.iching-trigram-diagram {
|
|
display: grid;
|
|
gap: 6px;
|
|
align-items: start;
|
|
}
|
|
.iching-line-label {
|
|
font-size: 11px;
|
|
color: #a1a1aa;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.iching-lines {
|
|
width: min(100%, 140px);
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.iching-lines-trigram {
|
|
width: min(100%, 110px);
|
|
gap: 5px;
|
|
}
|
|
.iching-lines-hexagram {
|
|
width: min(100%, 170px);
|
|
gap: 7px;
|
|
}
|
|
.iching-line {
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: #e4e4e7;
|
|
position: relative;
|
|
}
|
|
.iching-line.is-yin {
|
|
background: transparent;
|
|
}
|
|
.iching-line.is-yin::before,
|
|
.iching-line.is-yin::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
width: calc(50% - 8px);
|
|
border-radius: 999px;
|
|
background: #e4e4e7;
|
|
}
|
|
.iching-line.is-yin::before {
|
|
left: 0;
|
|
}
|
|
.iching-line.is-yin::after {
|
|
right: 0;
|
|
}
|
|
.iching-diagram {
|
|
margin: 6px 0 0;
|
|
padding: 8px;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 8px;
|
|
background: #111118;
|
|
color: #d4d4d8;
|
|
min-height: 86px;
|
|
display: grid;
|
|
align-content: center;
|
|
justify-items: start;
|
|
}
|
|
.iching-tarot-text {
|
|
white-space: normal;
|
|
line-height: 1.4;
|
|
font-size: 12px;
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
.iching-tarot-group {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.iching-tarot-group-title {
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── Kabbalah sections ──────────────────────────────────────────────── */
|
|
#quiz-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
padding: 20px;
|
|
}
|
|
#quiz-section[hidden] { display: none; }
|
|
|
|
.quiz-layout {
|
|
max-width: 860px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.quiz-card {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 12px;
|
|
background: #111118;
|
|
padding: 16px;
|
|
color: #d4d4d8;
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.quiz-score-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.quiz-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.quiz-category-label {
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.quiz-category-select {
|
|
min-width: 220px;
|
|
padding: 7px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid #3f3f46;
|
|
background: #18181b;
|
|
color: #f4f4f5;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.quiz-difficulty-label {
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.quiz-difficulty-select {
|
|
min-width: 140px;
|
|
padding: 7px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid #3f3f46;
|
|
background: #18181b;
|
|
color: #f4f4f5;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.quiz-score-item {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 8px;
|
|
background: #18181b;
|
|
padding: 8px;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.quiz-score-label {
|
|
font-size: 11px;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
.quiz-score-value {
|
|
font-size: 18px;
|
|
color: #f4f4f5;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.quiz-question {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
line-height: 1.35;
|
|
color: #f4f4f5;
|
|
}
|
|
|
|
.quiz-options {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.quiz-option {
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
border: 1px solid #3f3f46;
|
|
background: #18181b;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.quiz-option:hover:enabled {
|
|
background: #27272a;
|
|
}
|
|
|
|
.quiz-option:disabled {
|
|
cursor: default;
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.quiz-option.is-correct {
|
|
border-color: #16a34a;
|
|
background: #052e16;
|
|
color: #dcfce7;
|
|
}
|
|
|
|
.quiz-option.is-wrong {
|
|
border-color: #dc2626;
|
|
background: #450a0a;
|
|
color: #fee2e2;
|
|
}
|
|
|
|
.quiz-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#astronomy-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#astronomy-section[hidden] { display: none; }
|
|
|
|
#natal-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#natal-section[hidden] { display: none; }
|
|
|
|
#kabbalah-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#kabbalah-section[hidden] { display: none; }
|
|
|
|
#kabbalah-tree-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#kabbalah-tree-section[hidden] { display: none; }
|
|
|
|
.kabbalah-placeholder {
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.kabbalah-placeholder-card {
|
|
width: min(680px, 100%);
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 12px;
|
|
background: #111118;
|
|
padding: 16px;
|
|
color: #d4d4d8;
|
|
text-align: left;
|
|
}
|
|
.kabbalah-placeholder-card strong {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.kab-rose-layout {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: minmax(520px, 1.2fr) minmax(320px, 1fr);
|
|
min-height: 0;
|
|
}
|
|
|
|
.kab-rose-panel {
|
|
min-width: 0;
|
|
overflow: auto;
|
|
border-right: 1px solid #27272a;
|
|
background:
|
|
radial-gradient(circle at 52% 40%, rgba(255, 255, 255, 0.06), transparent 36%),
|
|
linear-gradient(180deg, #020617 0%, #02030a 100%);
|
|
display: grid;
|
|
grid-template-rows: auto auto minmax(0, 1fr);
|
|
min-height: 0;
|
|
}
|
|
|
|
.kab-rose-intro {
|
|
padding: 8px 14px 0;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.kab-rose-cross-container {
|
|
min-height: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 8px 8px 14px;
|
|
}
|
|
|
|
.kab-rose-cross-container > .kab-rose-svg {
|
|
width: min(100%, 980px);
|
|
max-height: min(100%, 1160px);
|
|
display: block;
|
|
}
|
|
|
|
.kab-rose-petal {
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.kab-rose-petal-shape {
|
|
transition: transform 120ms ease, filter 120ms ease, stroke 120ms ease;
|
|
}
|
|
|
|
.kab-rose-petal:hover .kab-rose-petal-shape,
|
|
.kab-rose-petal:focus-visible .kab-rose-petal-shape {
|
|
transform: scale(1.07);
|
|
filter: brightness(1.14);
|
|
stroke: rgba(255, 255, 255, 0.75);
|
|
stroke-width: 2.4;
|
|
}
|
|
|
|
.kab-rose-petal.kab-path-active .kab-rose-petal-shape {
|
|
filter: brightness(1.2);
|
|
stroke: #f8fafc;
|
|
stroke-width: 2.6;
|
|
}
|
|
|
|
.kab-rose-petal-letter {
|
|
font-family: "Noto Sans Hebrew", var(--font-script-main), serif;
|
|
font-size: 34px;
|
|
font-weight: 700;
|
|
pointer-events: none;
|
|
fill: #f8fafc;
|
|
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.66);
|
|
}
|
|
|
|
.kab-rose-petal-number {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
pointer-events: none;
|
|
fill: rgba(241, 245, 249, 0.95);
|
|
}
|
|
|
|
.kab-rose-arm-glyph {
|
|
pointer-events: none;
|
|
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
|
|
}
|
|
|
|
.kab-rose-petal--mother .kab-rose-petal-letter,
|
|
.kab-rose-petal--double .kab-rose-petal-letter {
|
|
fill: #111827;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.kab-rose-petal--mother .kab-rose-petal-number,
|
|
.kab-rose-petal--double .kab-rose-petal-number {
|
|
fill: rgba(17, 24, 39, 0.92);
|
|
}
|
|
|
|
@media (max-width: 1220px) {
|
|
.kab-rose-layout {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: minmax(360px, auto) minmax(0, 1fr);
|
|
}
|
|
|
|
.kab-rose-panel {
|
|
border-right: none;
|
|
border-bottom: 1px solid #27272a;
|
|
}
|
|
|
|
.kab-rose-cross-container > .kab-rose-svg {
|
|
width: min(100%, 860px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.kab-rose-cross-container {
|
|
padding: 6px;
|
|
}
|
|
|
|
.kab-rose-cross-container > .kab-rose-svg {
|
|
width: min(100%, 700px);
|
|
}
|
|
|
|
.kab-rose-petal-letter {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
.natal-chart-summary {
|
|
margin-top: 10px;
|
|
margin-bottom: 0;
|
|
white-space: pre-wrap;
|
|
font-family: inherit;
|
|
}
|
|
|
|
#cube-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#cube-section[hidden] { display: none; }
|
|
|
|
.cube-svg {
|
|
display: block;
|
|
}
|
|
|
|
.cube-rotation-controls {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 6px;
|
|
padding: 8px 12px 6px;
|
|
border-bottom: 1px solid #27272a;
|
|
}
|
|
|
|
.cube-rotation-btn {
|
|
padding: 5px 0;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 6px;
|
|
background: #18181b;
|
|
color: #d4d4d8;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.cube-rotation-btn:hover {
|
|
background: #27272a;
|
|
border-color: #52525b;
|
|
color: #f4f4f5;
|
|
}
|
|
|
|
.cube-marker-mode-control {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.cube-marker-mode-label {
|
|
font-size: 11px;
|
|
color: #a1a1aa;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cube-marker-mode-select {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 5px 8px;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 6px;
|
|
background: #18181b;
|
|
color: #d4d4d8;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.cube-connector-toggle-control,
|
|
.cube-primal-toggle-control {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 2px;
|
|
font-size: 11px;
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
.cube-connector-toggle-control input,
|
|
.cube-primal-toggle-control input {
|
|
margin: 0;
|
|
accent-color: #a1a1aa;
|
|
}
|
|
|
|
.cube-rotation-readout {
|
|
grid-column: 1 / -1;
|
|
margin-top: 2px;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
color: #a1a1aa;
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.cube-face {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cube-face.is-active {
|
|
stroke-width: 2.5;
|
|
}
|
|
|
|
.cube-face-symbol {
|
|
fill: currentColor;
|
|
fill-opacity: 0.62;
|
|
font-size: 27px;
|
|
font-weight: 700;
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.cube-face-symbol.is-active {
|
|
fill-opacity: 1;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.cube-face-symbol.is-missing {
|
|
fill: #ef4444;
|
|
fill-opacity: 1;
|
|
}
|
|
|
|
.cube-face-label {
|
|
fill: currentColor;
|
|
fill-opacity: 0.72;
|
|
font-size: 8.5px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cube-face-label.is-active {
|
|
fill-opacity: 0.95;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cube-center-hit {
|
|
fill: transparent;
|
|
stroke: none;
|
|
}
|
|
|
|
.cube-center-symbol {
|
|
fill: currentColor;
|
|
fill-opacity: 0.98;
|
|
font-size: 26px;
|
|
font-weight: 800;
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.cube-center-symbol.is-active {
|
|
fill-opacity: 1;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.cube-center-symbol.is-missing {
|
|
fill: #ef4444;
|
|
fill-opacity: 1;
|
|
}
|
|
|
|
.cube-connector {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cube-connector-line {
|
|
stroke: currentColor;
|
|
stroke-opacity: 0.42;
|
|
stroke-width: 1.6;
|
|
stroke-dasharray: 4 3;
|
|
transition: stroke-opacity 120ms ease, stroke-width 120ms ease;
|
|
}
|
|
|
|
.cube-connector:hover .cube-connector-line,
|
|
.cube-connector.is-active .cube-connector-line {
|
|
stroke-opacity: 0.9;
|
|
stroke-width: 2.2;
|
|
stroke-dasharray: none;
|
|
}
|
|
|
|
.cube-connector-hit {
|
|
stroke: transparent;
|
|
stroke-width: 12;
|
|
}
|
|
|
|
.cube-connector-symbol {
|
|
fill: currentColor;
|
|
fill-opacity: 0.82;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
transition: fill-opacity 120ms ease, font-size 120ms ease;
|
|
}
|
|
|
|
.cube-connector:hover .cube-connector-symbol,
|
|
.cube-connector.is-active .cube-connector-symbol {
|
|
fill-opacity: 1;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.cube-direction {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cube-direction-letter {
|
|
fill: currentColor;
|
|
fill-opacity: 0.56;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
font-family: var(--font-script-display);
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
transition: fill-opacity 120ms ease, font-size 120ms ease, font-weight 120ms ease;
|
|
}
|
|
|
|
.cube-direction.is-wall-active .cube-direction-letter {
|
|
fill-opacity: 0.84;
|
|
}
|
|
|
|
.cube-direction:hover .cube-direction-letter {
|
|
fill-opacity: 1;
|
|
}
|
|
|
|
.cube-direction.is-active .cube-direction-letter {
|
|
fill-opacity: 1;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cube-direction-card {
|
|
transition: filter 120ms ease, opacity 120ms ease;
|
|
}
|
|
|
|
.cube-tarot-image {
|
|
cursor: zoom-in;
|
|
transition: filter 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.cube-tarot-image:hover {
|
|
filter: drop-shadow(0 0 4px rgba(224, 231, 255, 0.92));
|
|
transform: translateY(-0.6px);
|
|
}
|
|
|
|
.cube-direction:hover .cube-direction-card,
|
|
.cube-direction-card.is-active {
|
|
filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor);
|
|
opacity: 1;
|
|
}
|
|
|
|
.cube-direction-letter.is-missing {
|
|
fill: #ef4444;
|
|
fill-opacity: 1;
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.kab-layout {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
min-height: 0;
|
|
}
|
|
|
|
.kab-tree-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-bottom: 1px solid #27272a;
|
|
background: #0f0f17;
|
|
overflow: auto;
|
|
min-width: 0;
|
|
min-height: 240px;
|
|
max-height: min(44vh, 420px);
|
|
}
|
|
|
|
.planet-layout,
|
|
.tarot-layout,
|
|
.kab-layout {
|
|
position: relative;
|
|
}
|
|
|
|
.planet-list-panel,
|
|
.tarot-list-panel,
|
|
.kab-tree-panel {
|
|
transition: opacity 120ms ease;
|
|
}
|
|
|
|
.sidebar-toggle-inline,
|
|
.sidebar-popout-open {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 6px;
|
|
background: #18181b;
|
|
color: #d4d4d8;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.sidebar-toggle-inline:hover,
|
|
.sidebar-popout-open:hover {
|
|
background: #27272a;
|
|
border-color: #52525b;
|
|
color: #f4f4f5;
|
|
}
|
|
|
|
.detail-toggle-inline,
|
|
.detail-popout-open {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 6px;
|
|
background: #18181b;
|
|
color: #d4d4d8;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.detail-toggle-inline:hover,
|
|
.detail-popout-open:hover {
|
|
background: #27272a;
|
|
border-color: #52525b;
|
|
color: #f4f4f5;
|
|
}
|
|
|
|
.sidebar-toggle-inline {
|
|
margin-left: auto;
|
|
align-self: center;
|
|
}
|
|
|
|
.detail-toggle-inline {
|
|
margin-left: auto;
|
|
align-self: center;
|
|
}
|
|
|
|
.sidebar-popout-open {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 5;
|
|
}
|
|
|
|
.detail-popout-open {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
z-index: 5;
|
|
}
|
|
|
|
.sidebar-popout-open[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.detail-popout-open[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.planet-layout.layout-sidebar-collapsed {
|
|
grid-template-columns: 0 minmax(0, 1fr);
|
|
}
|
|
|
|
.tarot-layout.layout-sidebar-collapsed {
|
|
grid-template-columns: 0 minmax(0, 1fr);
|
|
}
|
|
|
|
.kab-layout.layout-sidebar-collapsed {
|
|
grid-template-rows: 0 minmax(0, 1fr);
|
|
}
|
|
|
|
.planet-layout.layout-detail-collapsed {
|
|
grid-template-columns: minmax(0, 1fr) 0;
|
|
}
|
|
|
|
.tarot-layout.layout-detail-collapsed {
|
|
grid-template-columns: minmax(0, 1fr) 0;
|
|
}
|
|
|
|
.kab-layout.layout-detail-collapsed {
|
|
grid-template-rows: minmax(0, 1fr) 0;
|
|
}
|
|
|
|
.layout-sidebar-collapsed > .planet-list-panel,
|
|
.layout-sidebar-collapsed > .tarot-list-panel {
|
|
width: 0;
|
|
max-width: 0;
|
|
min-width: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
border-right: none;
|
|
}
|
|
|
|
.layout-sidebar-collapsed > .kab-tree-panel {
|
|
height: 0;
|
|
max-height: 0;
|
|
min-height: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.layout-detail-collapsed > .planet-detail-panel,
|
|
.layout-detail-collapsed > .tarot-detail-panel {
|
|
width: 0;
|
|
max-width: 0;
|
|
min-width: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
border-left: none;
|
|
}
|
|
|
|
.layout-detail-collapsed > .kab-detail-panel {
|
|
height: 0;
|
|
max-height: 0;
|
|
min-height: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
border-top: none;
|
|
}
|
|
|
|
.kab-layout.layout-detail-collapsed > .kab-tree-panel {
|
|
max-height: none;
|
|
min-height: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.kab-tree-container {
|
|
flex: 1;
|
|
padding: 12px 14px 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.kab-tree-container > .kab-svg {
|
|
width: min(100%, 420px);
|
|
}
|
|
|
|
.kab-tree-container > .cube-svg {
|
|
width: min(100%, 500px);
|
|
}
|
|
|
|
.kab-path-toggle-wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px 10px;
|
|
padding: 7px 12px 6px;
|
|
border-bottom: 1px solid #27272a;
|
|
}
|
|
|
|
.kab-path-toggle-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.kab-path-toggle-control input {
|
|
margin: 0;
|
|
}
|
|
|
|
.kab-detail-panel {
|
|
min-width: 0;
|
|
overflow: auto;
|
|
padding: 18px;
|
|
background: #18181b;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
#kab-detail-body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 12px;
|
|
align-items: start;
|
|
}
|
|
|
|
.kab-wide-card {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* SVG tree interactivity */
|
|
.kab-svg { display: block; }
|
|
|
|
.kab-node {
|
|
transition: filter 0.12s;
|
|
}
|
|
.kab-node:hover {
|
|
filter: brightness(1.35);
|
|
}
|
|
.kab-node.kab-node-active {
|
|
filter: brightness(1.4);
|
|
stroke: rgba(255,255,255,0.5) !important;
|
|
stroke-width: 2 !important;
|
|
}
|
|
.kab-node-glow.kab-node-active {
|
|
opacity: 0.30 !important;
|
|
}
|
|
|
|
.kab-path-line {
|
|
transition: stroke 0.12s, stroke-width 0.12s;
|
|
}
|
|
.kab-path-line.kab-path-active {
|
|
stroke: #9080e0 !important;
|
|
stroke-width: 2.5 !important;
|
|
}
|
|
|
|
.kab-path-tarot.kab-path-active {
|
|
filter: drop-shadow(0 0 5px rgba(112, 96, 176, 0.78));
|
|
}
|
|
|
|
.kab-path-tarot {
|
|
cursor: zoom-in;
|
|
transition: filter 120ms ease;
|
|
}
|
|
|
|
.kab-path-tarot:hover {
|
|
filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.85));
|
|
}
|
|
|
|
.kab-path-lbl.kab-path-active {
|
|
fill: #c8b8f8 !important;
|
|
}
|
|
.kab-path-hit:hover + .kab-path-lbl {
|
|
fill: #8878c8;
|
|
}
|
|
|
|
/* Path/sephira chips in detail panel */
|
|
.kab-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: 4px;
|
|
}
|
|
.kab-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
padding: 3px 9px;
|
|
border-radius: 6px;
|
|
background: #27272a;
|
|
border: 1px solid #3f3f46;
|
|
color: #c4c4d4;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: background 0.1s;
|
|
line-height: 1;
|
|
font-family: var(--font-script-main);
|
|
}
|
|
.kab-chip:hover { background: #3f3f46; }
|
|
.kab-chip.is-active {
|
|
background: #3f3f46;
|
|
border-color: #6366f1;
|
|
color: #e0e7ff;
|
|
}
|
|
.kab-chip.is-missing {
|
|
border-color: #ef4444;
|
|
color: #ef4444;
|
|
}
|
|
.kab-chip-sub {
|
|
font-size: 10px;
|
|
color: #71717a;
|
|
}
|
|
|
|
.cube-missing-value {
|
|
color: #ef4444;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.kab-tarot-link {
|
|
display: inline-block;
|
|
margin-top: 5px;
|
|
padding: 5px 10px;
|
|
border-radius: 6px;
|
|
border: 1px solid #4a4a6a;
|
|
background: #1e1e30;
|
|
color: #c8b8f8;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: background 0.1s, border-color 0.1s;
|
|
width: 100%;
|
|
}
|
|
.kab-tarot-link:hover {
|
|
background: #2a2a44;
|
|
border-color: #7060b0;
|
|
color: #e0d0ff;
|
|
}
|
|
.kab-tarot-link::after {
|
|
content: " ↗";
|
|
font-size: 10px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.kab-god-meta {
|
|
margin-top: 6px;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
}
|
|
.kab-god-links {
|
|
margin-top: 7px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.kab-god-link {
|
|
padding: 4px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid #4a4a6a;
|
|
background: #1e1e30;
|
|
color: #c8b8f8;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.1s, border-color 0.1s;
|
|
}
|
|
.kab-god-link:hover {
|
|
background: #2a2a44;
|
|
border-color: #7060b0;
|
|
color: #e0d0ff;
|
|
}
|
|
|
|
/* ── Alphabet section ────────────────────────────────────────────────── */
|
|
#alphabet-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
#alphabet-section[hidden] { display: none; }
|
|
|
|
.alpha-special-top {
|
|
padding: 10px 12px 8px;
|
|
border-bottom: 1px solid #27272a;
|
|
overflow: auto;
|
|
background: #151520;
|
|
}
|
|
|
|
.alpha-gematria-card {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.alpha-gematria-controls {
|
|
display: grid;
|
|
grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
|
|
gap: 8px;
|
|
align-items: start;
|
|
}
|
|
|
|
.alpha-gematria-field {
|
|
display: grid;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.alpha-gematria-field > span {
|
|
color: #a1a1aa;
|
|
font-size: 11px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.alpha-gematria-cipher,
|
|
.alpha-gematria-input {
|
|
width: 100%;
|
|
padding: 7px 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
background: #09090b;
|
|
color: #f4f4f5;
|
|
box-sizing: border-box;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.alpha-gematria-input {
|
|
min-height: 54px;
|
|
resize: vertical;
|
|
font-family: var(--font-script-main);
|
|
}
|
|
|
|
.alpha-gematria-result {
|
|
color: #e0d0ff;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.alpha-gematria-breakdown {
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.alpha-tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
padding: 8px 10px 0;
|
|
}
|
|
.alpha-tab-btn {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
padding: 5px 4px;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 6px;
|
|
background: #18181b;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.alpha-tab-btn.alpha-tab-active {
|
|
background: #312e81;
|
|
border-color: #6366f1;
|
|
color: #e0e7ff;
|
|
}
|
|
|
|
.alpha-filter-search-wrap {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.alpha-filter-type-wrap {
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid #27272a;
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.alpha-filter-type-wrap label {
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.alpha-type-filter {
|
|
width: 100%;
|
|
padding: 7px 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
background: #09090b;
|
|
color: #f4f4f5;
|
|
box-sizing: border-box;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.alpha-list-item {
|
|
flex-direction: row !important;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.alpha-list-glyph {
|
|
font-size: 22px;
|
|
min-width: 34px;
|
|
text-align: center;
|
|
font-family: var(--font-script-display);
|
|
color: #e0d0ff;
|
|
line-height: 1;
|
|
}
|
|
.alpha-list-glyph--arabic {
|
|
font-family: var(--font-script-arabic);
|
|
font-size: 26px;
|
|
}
|
|
.alpha-list-glyph--enochian {
|
|
font-family: var(--font-script-enochian);
|
|
font-size: 24px;
|
|
}
|
|
.alpha-enochian-glyph-img {
|
|
display: inline-block;
|
|
object-fit: contain;
|
|
image-rendering: auto;
|
|
vertical-align: middle;
|
|
filter:
|
|
drop-shadow(1px 0 0 rgba(255, 255, 255, 0.98))
|
|
drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.98))
|
|
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.98))
|
|
drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.98))
|
|
drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.9))
|
|
drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.9));
|
|
}
|
|
.alpha-enochian-glyph-img--list {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin: 0 auto;
|
|
}
|
|
.alpha-enochian-glyph-img--detail {
|
|
width: 72px;
|
|
height: 72px;
|
|
filter:
|
|
drop-shadow(0 0 0.7px rgba(255, 255, 255, 0.82))
|
|
drop-shadow(0 0 1.6px rgba(255, 255, 255, 0.56));
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
.alpha-list-meta strong {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.alpha-list-sub {
|
|
font-size: 11px;
|
|
color: #71717a;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.alpha-detail-glyph {
|
|
font-size: 64px !important;
|
|
font-family: var(--font-script-display);
|
|
color: #e0d0ff;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
}
|
|
.alpha-detail-glyph--arabic {
|
|
font-family: var(--font-script-arabic);
|
|
}
|
|
.alpha-detail-glyph--enochian {
|
|
font-family: var(--font-script-enochian);
|
|
}
|
|
.alpha-dl {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 3px 12px;
|
|
font-size: 13px;
|
|
color: #d4d4d8;
|
|
margin: 0;
|
|
}
|
|
.alpha-dl dt { color: #71717a; white-space: nowrap; }
|
|
|
|
#tarot-browse-view {
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
grid-row: 1 / -1;
|
|
}
|
|
|
|
#tarot-browse-view[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ── Tarot Spread View ─────────────────────────────── */
|
|
#tarot-spread-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
padding: 1rem 1.25rem;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
grid-row: 1 / -1;
|
|
}
|
|
|
|
#tarot-spread-board {
|
|
order: 2;
|
|
}
|
|
|
|
#tarot-spread-meanings {
|
|
order: 3;
|
|
}
|
|
|
|
#tarot-spread-view[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.tarot-spread-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
flex-wrap: wrap;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 1px solid #27272a;
|
|
}
|
|
|
|
.tarot-spread-back-btn {
|
|
background: transparent;
|
|
border: 1px solid rgba(255,255,255,0.18);
|
|
color: #a5b4fc;
|
|
padding: 0.32rem 0.8rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.82rem;
|
|
transition: background 120ms, border-color 120ms;
|
|
}
|
|
.tarot-spread-back-btn:hover {
|
|
background: #1e1b4b;
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
.tarot-spread-type-controls {
|
|
display: flex;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.tarot-spread-type-btn {
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid #3f3f46;
|
|
color: #c4b5fd;
|
|
padding: 0.32rem 0.85rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.82rem;
|
|
transition: background 120ms, border-color 120ms, color 120ms;
|
|
}
|
|
.tarot-spread-type-btn:hover {
|
|
background: #27272a;
|
|
border-color: #6366f1;
|
|
color: #e0e7ff;
|
|
}
|
|
.tarot-spread-type-btn.is-active {
|
|
background: #312e81;
|
|
border-color: #6366f1;
|
|
color: #e0e7ff;
|
|
}
|
|
|
|
.tarot-spread-redraw-btn {
|
|
background: #1e1b4b;
|
|
border: 1px solid #4f46e5;
|
|
color: #c7d2fe;
|
|
padding: 0.32rem 1rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.82rem;
|
|
margin-left: auto;
|
|
transition: background 120ms, border-color 120ms;
|
|
}
|
|
|
|
#tarot-spread-reveal-all:disabled,
|
|
.tarot-spread-redraw-btn:disabled {
|
|
opacity: 0.56;
|
|
cursor: default;
|
|
filter: saturate(0.72);
|
|
}
|
|
.tarot-spread-redraw-btn:hover {
|
|
background: #312e81;
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
.tarot-spread-meanings {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 10px;
|
|
align-items: start;
|
|
}
|
|
|
|
.tarot-spread-meaning-item {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 10px;
|
|
background: #111118;
|
|
padding: 10px;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tarot-spread-meaning-head {
|
|
font-size: 12px;
|
|
line-height: 1.3;
|
|
letter-spacing: 0.03em;
|
|
color: #a5b4fc;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-spread-meaning-card {
|
|
color: #e4e4e7;
|
|
text-transform: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tarot-spread-meaning-orientation {
|
|
color: #fb7185;
|
|
font-weight: 700;
|
|
text-transform: none;
|
|
}
|
|
|
|
.tarot-spread-meaning-text {
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
color: #e4e4e7;
|
|
}
|
|
|
|
.tarot-spread-meaning-keywords {
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
/* ── Spread Board ──────────────────────────────────── */
|
|
.tarot-spread-board {
|
|
--spread-card-width: 116px;
|
|
--spread-card-height: 184px;
|
|
display: grid;
|
|
gap: 1rem;
|
|
align-items: start;
|
|
justify-items: center;
|
|
padding: 1.1rem 1rem 1.5rem;
|
|
border: 1px solid #27272a;
|
|
border-radius: 18px;
|
|
background:
|
|
radial-gradient(circle at 20% 12%, rgba(236, 72, 153, 0.14), transparent 40%),
|
|
radial-gradient(circle at 84% 86%, rgba(59, 130, 246, 0.14), transparent 44%),
|
|
linear-gradient(180deg, #0f0f1d 0%, #13131f 38%, #10101a 100%);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 30px rgba(2, 6, 23, 0.44);
|
|
}
|
|
|
|
.tarot-spread-board--three {
|
|
grid-template-columns: repeat(3, var(--spread-card-width));
|
|
justify-content: center;
|
|
column-gap: 1.25rem;
|
|
row-gap: 1rem;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.tarot-spread-board--celtic {
|
|
grid-template-areas:
|
|
". crown . out ."
|
|
"past present near-fut hope ."
|
|
". chall . env ."
|
|
". found . self .";
|
|
grid-template-columns: repeat(5, var(--spread-card-width));
|
|
justify-content: center;
|
|
column-gap: 1rem;
|
|
row-gap: 0.9rem;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.tarot-spread-board--three .spread-position {
|
|
grid-area: auto;
|
|
}
|
|
|
|
.tarot-spread-board--celtic .spread-position {
|
|
grid-area: unset;
|
|
}
|
|
|
|
.tarot-spread-board--celtic .spread-position[data-pos="crown"] { grid-area: crown; }
|
|
.tarot-spread-board--celtic .spread-position[data-pos="out"] { grid-area: out; }
|
|
.tarot-spread-board--celtic .spread-position[data-pos="past"] { grid-area: past; }
|
|
.tarot-spread-board--celtic .spread-position[data-pos="present"] { grid-area: present; }
|
|
.tarot-spread-board--celtic .spread-position[data-pos="near-fut"] { grid-area: near-fut; }
|
|
.tarot-spread-board--celtic .spread-position[data-pos="hope"] { grid-area: hope; }
|
|
.tarot-spread-board--celtic .spread-position[data-pos="chall"] { grid-area: chall; }
|
|
.tarot-spread-board--celtic .spread-position[data-pos="env"] { grid-area: env; }
|
|
.tarot-spread-board--celtic .spread-position[data-pos="found"] { grid-area: found; }
|
|
.tarot-spread-board--celtic .spread-position[data-pos="self"] { grid-area: self; }
|
|
|
|
.spread-position {
|
|
width: var(--spread-card-width);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.spread-pos-label {
|
|
font-size: 0.66rem;
|
|
color: #c4b5fd;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.09em;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
border: 1px solid rgba(167, 139, 250, 0.45);
|
|
border-radius: 999px;
|
|
padding: 0.17rem 0.55rem;
|
|
background: rgba(76, 29, 149, 0.2);
|
|
}
|
|
|
|
.spread-card-wrap {
|
|
appearance: none;
|
|
border: 1px solid rgba(168, 162, 158, 0.34);
|
|
border-radius: 13px;
|
|
overflow: hidden;
|
|
background: #09090f;
|
|
width: 100%;
|
|
height: var(--spread-card-height);
|
|
display: block;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
|
|
}
|
|
|
|
.spread-card-wrap:hover {
|
|
transform: translateY(-3px);
|
|
border-color: rgba(196, 181, 253, 0.75);
|
|
box-shadow: 0 14px 30px rgba(2, 6, 23, 0.65), 0 0 0 1px rgba(196, 181, 253, 0.26);
|
|
}
|
|
|
|
.spread-card-wrap:focus-visible {
|
|
outline: none;
|
|
border-color: #c4b5fd;
|
|
box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.36), 0 10px 24px rgba(2, 6, 23, 0.56);
|
|
}
|
|
|
|
.spread-card-wrap.is-facedown {
|
|
background:
|
|
linear-gradient(150deg, rgba(190, 24, 93, 0.45), rgba(49, 46, 129, 0.55)),
|
|
repeating-linear-gradient(
|
|
45deg,
|
|
rgba(255, 255, 255, 0.08) 0,
|
|
rgba(255, 255, 255, 0.08) 6px,
|
|
rgba(0, 0, 0, 0.08) 6px,
|
|
rgba(0, 0, 0, 0.08) 12px
|
|
);
|
|
}
|
|
|
|
.spread-card-wrap.is-revealed.is-reversed .spread-card-img {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.spread-card-img,
|
|
.spread-card-back-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.spread-card-back-fallback {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.74rem;
|
|
letter-spacing: 0.16em;
|
|
color: #e9d5ff;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
|
|
}
|
|
|
|
.spread-card-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 0.6rem;
|
|
font-size: 0.72rem;
|
|
color: #e4e4e7;
|
|
background: #18181b;
|
|
}
|
|
|
|
.spread-card-name {
|
|
font-size: 0.66rem;
|
|
color: #fda4af;
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
min-height: 1.2em;
|
|
width: 100%;
|
|
}
|
|
|
|
.spread-reveal-hint {
|
|
display: block;
|
|
font-size: 0.62rem;
|
|
color: #a1a1aa;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.spread-reversed-tag {
|
|
display: block;
|
|
font-size: 0.66rem;
|
|
color: #fb7185;
|
|
margin-top: 0.05rem;
|
|
}
|
|
|
|
.tarot-spread-meanings-empty {
|
|
border: 1px dashed #3f3f46;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
color: #a1a1aa;
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
background: rgba(9, 9, 11, 0.72);
|
|
}
|
|
|
|
.spread-empty {
|
|
color: #71717a;
|
|
padding: 2.5rem;
|
|
text-align: center;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.tarot-spread-board--celtic {
|
|
grid-template-areas:
|
|
"crown out"
|
|
"past present"
|
|
"near-fut hope"
|
|
"chall env"
|
|
"found self";
|
|
grid-template-columns: repeat(2, var(--spread-card-width));
|
|
width: max-content;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.tarot-spread-board {
|
|
--spread-card-width: 106px;
|
|
--spread-card-height: 170px;
|
|
padding: 0.8rem 0.65rem 1rem;
|
|
}
|
|
|
|
.tarot-spread-board--three {
|
|
grid-template-columns: 1fr;
|
|
width: var(--spread-card-width);
|
|
max-width: 100%;
|
|
}
|
|
|
|
.spread-position {
|
|
width: var(--spread-card-width);
|
|
}
|
|
}
|
|
.alpha-dl dd { margin: 0; }
|
|
.alpha-badge {
|
|
display: inline-block;
|
|
padding: 1px 7px;
|
|
border-radius: 9px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
.alpha-badge--mother { background: #7f1d1d; color: #fca5a5; }
|
|
.alpha-badge--double { background: #1e3a5f; color: #93c5fd; }
|
|
.alpha-badge--simple { background: #14532d; color: #86efac; }
|
|
.alpha-badge--archaic { background: #3b2f00; color: #fcd34d; }
|
|
.alpha-badge--solar { background: #4a1500; color: #fdba74; }
|
|
.alpha-badge--lunar { background: #0f1f3d; color: #93c5fd; }
|
|
/* Arabic letter forms display */
|
|
.alpha-arabic-forms {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
.alpha-arabic-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px 12px;
|
|
background: #18181b;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 8px;
|
|
font-size: 11px;
|
|
color: #71717a;
|
|
min-width: 56px;
|
|
text-align: center;
|
|
}
|
|
.alpha-arabic-glyph {
|
|
font-family: var(--font-script-arabic);
|
|
font-size: 28px;
|
|
color: #e0d0ff;
|
|
line-height: 1.2;
|
|
direction: rtl;
|
|
}
|
|
.alpha-arabic-inline {
|
|
font-family: var(--font-script-arabic);
|
|
font-size: 16px;
|
|
direction: rtl;
|
|
}
|
|
.alpha-nav-btns {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
.alpha-nav-btn {
|
|
padding: 5px 10px;
|
|
background: #1e1b4b;
|
|
border: 1px solid #4338ca;
|
|
border-radius: 6px;
|
|
color: #c7d2fe;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.alpha-nav-btn:hover {
|
|
background: #312e81;
|
|
border-color: #818cf8;
|
|
color: #e0e7ff;
|
|
}
|
|
.alpha-nav-btn.is-selected,
|
|
.alpha-nav-btn[aria-pressed="true"] {
|
|
background: #4338ca;
|
|
border-color: #a5b4fc;
|
|
color: #eef2ff;
|
|
}
|
|
.alpha-sister-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.alpha-sister-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 7px 10px;
|
|
background: #09090b;
|
|
border: 1px solid #27272a;
|
|
border-radius: 8px;
|
|
color: #d4d4d8;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
.alpha-sister-btn:hover {
|
|
background: #18181b;
|
|
border-color: #52525b;
|
|
}
|
|
.alpha-sister-glyph {
|
|
font-size: 28px;
|
|
min-width: 36px;
|
|
text-align: center;
|
|
font-family: "Segoe UI", "Noto Sans Hebrew", "Noto Serif", serif;
|
|
color: #e0d0ff;
|
|
line-height: 1;
|
|
}
|
|
.alpha-sister-glyph.alpha-list-glyph--arabic {
|
|
font-family: var(--font-script-arabic);
|
|
}
|
|
.alpha-sister-glyph.alpha-list-glyph--enochian {
|
|
font-family: var(--font-script-enochian);
|
|
}
|
|
.alpha-enochian-glyph-img--sister {
|
|
width: 28px;
|
|
height: 28px;
|
|
min-width: 36px;
|
|
flex: 0 0 36px;
|
|
margin: 0 4px;
|
|
}
|
|
.alpha-sister-name {
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
/* ── Zodiac section ──────────────────────────────────────────────────── */
|
|
#zodiac-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#zodiac-section[hidden] { display: none; }
|
|
|
|
/* ── Numbers section ────────────────────────────────────────────────── */
|
|
#numbers-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#numbers-section[hidden] { display: none; }
|
|
|
|
.numbers-detail-body {
|
|
display: grid;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.numbers-layout {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
min-height: 0;
|
|
}
|
|
|
|
.numbers-special-panel {
|
|
border-bottom: 1px solid #27272a;
|
|
background: #0f0f17;
|
|
overflow: auto;
|
|
min-width: 0;
|
|
min-height: 220px;
|
|
max-height: min(44vh, 420px);
|
|
padding: 12px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.numbers-main-layout {
|
|
min-height: 0;
|
|
}
|
|
|
|
.numbers-main-layout .planet-detail-panel {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 0 14px 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.numbers-detail-card {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 10px;
|
|
background: #111118;
|
|
padding: 12px;
|
|
color: #d4d4d8;
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.numbers-detail-card > strong {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.numbers-detail-text {
|
|
color: #d4d4d8;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.numbers-detail-text--muted {
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
.numbers-links-wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.numbers-nav-btn {
|
|
padding: 5px 10px;
|
|
background: #27272a;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 6px;
|
|
color: #c4b5fd;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 100ms;
|
|
text-align: left;
|
|
}
|
|
|
|
.numbers-nav-btn:hover {
|
|
background: #3f3f46;
|
|
border-color: #7c3aed;
|
|
}
|
|
|
|
.numbers-special-card-section {
|
|
padding: 14px;
|
|
border: 1px solid rgba(220, 182, 93, 0.2);
|
|
background: linear-gradient(180deg, rgba(27, 23, 48, 0.5), rgba(12, 10, 25, 0.75));
|
|
border-radius: 14px;
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.numbers-special-board {
|
|
margin-top: 2px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 12px;
|
|
padding: 10px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(220, 182, 93, 0.2);
|
|
background: radial-gradient(circle at top, rgba(70, 58, 107, 0.25), rgba(12, 10, 24, 0.78));
|
|
}
|
|
|
|
.numbers-special-card {
|
|
position: relative;
|
|
height: 164px;
|
|
border: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
border-radius: 12px;
|
|
perspective: 900px;
|
|
}
|
|
|
|
.numbers-special-card:hover .numbers-special-card-inner {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.numbers-special-card.is-flipped .numbers-special-card-inner {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.numbers-special-card[data-suit="hearts"] .numbers-special-card-suit,
|
|
.numbers-special-card[data-suit="diamonds"] .numbers-special-card-suit {
|
|
color: #f28f8f;
|
|
}
|
|
|
|
.numbers-special-card-inner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12px;
|
|
transform-style: preserve-3d;
|
|
transition: transform .24s ease;
|
|
}
|
|
|
|
.numbers-special-card-face {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(220, 182, 93, 0.35);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
color: #efe7d5;
|
|
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.35);
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.numbers-special-card-face--front {
|
|
background: linear-gradient(180deg, rgba(32, 27, 58, 0.95), rgba(14, 11, 31, 0.98));
|
|
}
|
|
|
|
.numbers-special-card-face--back {
|
|
background: linear-gradient(180deg, rgba(48, 24, 24, 0.95), rgba(18, 11, 11, 0.98));
|
|
border-color: rgba(255, 143, 122, 0.45);
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.numbers-special-card-tag {
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #cbb9b4;
|
|
}
|
|
|
|
.numbers-special-card-rank {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
text-align: center;
|
|
}
|
|
|
|
.numbers-special-card-suit {
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.numbers-special-card-meta {
|
|
font-size: 0.72rem;
|
|
color: #bdb5cd;
|
|
text-align: center;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
/* ── Gods section ────────────────────────────────────────────────────── */
|
|
#gods-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#gods-section[hidden] { display: none; }
|
|
|
|
/* ── Enochian section ────────────────────────────────────────────────── */
|
|
#enochian-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#enochian-section[hidden] { display: none; }
|
|
|
|
/* ── Elements section ───────────────────────────────────────────────── */
|
|
#elements-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#elements-section[hidden] { display: none; }
|
|
|
|
.enoch-list-item {
|
|
width: 100%;
|
|
text-align: left;
|
|
display: grid;
|
|
gap: 3px;
|
|
padding: 9px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid #3f3f46;
|
|
background: #18181b;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
}
|
|
.enoch-list-item:hover,
|
|
.enoch-list-item.is-selected {
|
|
background: #27272a;
|
|
border-color: #7060b0;
|
|
}
|
|
.enoch-list-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
.enoch-list-meta {
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
.enoch-grid {
|
|
display: grid;
|
|
gap: 4px;
|
|
overflow: auto;
|
|
max-width: 100%;
|
|
padding: 4px 2px 2px;
|
|
}
|
|
.enoch-grid-row {
|
|
display: flex;
|
|
gap: 4px;
|
|
width: max-content;
|
|
}
|
|
.enoch-grid-cell {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
background: #111118;
|
|
color: #f4f4f5;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
.enoch-grid-cell:hover {
|
|
border-color: #7060b0;
|
|
background: #27272a;
|
|
}
|
|
.enoch-grid-cell.is-selected {
|
|
border-color: #7c3aed;
|
|
box-shadow: 0 0 0 1px #7c3aed;
|
|
background: #2a1f3d;
|
|
}
|
|
|
|
.enoch-letter-meta {
|
|
display: grid;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
color: #d4d4d8;
|
|
}
|
|
.enoch-letter-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
.enoch-letter-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 24px;
|
|
height: 24px;
|
|
border: 1px solid #52525b;
|
|
border-radius: 999px;
|
|
background: #111118;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size: 12px;
|
|
color: #f4f4f5;
|
|
padding: 0 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.enoch-nav-btn {
|
|
padding: 5px 8px;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 7px;
|
|
background: #27272a;
|
|
color: #d4d4d8;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
.enoch-nav-btn:hover {
|
|
background: #3f3f46;
|
|
border-color: #7060b0;
|
|
color: #f4f4f5;
|
|
}
|
|
|
|
.gods-tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid #27272a;
|
|
}
|
|
.gods-tab-btn {
|
|
padding: 4px 9px;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
background: #27272a;
|
|
color: #a1a1aa;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background 120ms, color 120ms;
|
|
}
|
|
.gods-tab-btn:hover { background: #3f3f46; color: #f4f4f5; }
|
|
.gods-tab-active { background: #4c1d95; border-color: #7c3aed; color: #e9d5ff !important; }
|
|
|
|
.gods-list-item {
|
|
padding: 9px 12px;
|
|
border-bottom: 1px solid #27272a;
|
|
cursor: pointer;
|
|
transition: background 100ms;
|
|
}
|
|
.gods-list-item:hover { background: #27272a; }
|
|
.gods-list-active { background: #1e1b4b !important; border-left: 3px solid #6d28d9; }
|
|
.gods-list-main {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
}
|
|
.gods-list-label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #f4f4f5;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.gods-list-tag {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border-radius: 9px;
|
|
background: #27272a;
|
|
color: #71717a;
|
|
white-space: nowrap;
|
|
}
|
|
.gods-list-sub {
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
margin-top: 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.gods-detail-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: 12px;
|
|
padding: 14px;
|
|
}
|
|
.gods-card {
|
|
background: #1c1c24;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 10px;
|
|
padding: 12px 14px;
|
|
}
|
|
.gods-card--greek { border-color: #7c3aed; }
|
|
.gods-card--roman { border-color: #9a3412; }
|
|
.gods-card--egyptian { border-color: #92400e; }
|
|
.gods-card--elohim { border-color: #1d4ed8; }
|
|
.gods-card--angel { border-color: #065f46; }
|
|
.gods-card--wide { grid-column: 1 / -1; }
|
|
.gods-card-title {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #71717a;
|
|
margin-bottom: 8px;
|
|
}
|
|
.gods-card-body {
|
|
font-size: 15px;
|
|
color: #f4f4f5;
|
|
line-height: 1.4;
|
|
}
|
|
.gods-equivalent-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.gods-equivalent-link,
|
|
.gods-equivalent-text {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 12px;
|
|
padding: 4px 8px;
|
|
border-radius: 999px;
|
|
border: 1px solid #3f3f46;
|
|
background: #27272a;
|
|
}
|
|
.gods-equivalent-link {
|
|
color: #c4b5fd;
|
|
cursor: pointer;
|
|
transition: background 100ms;
|
|
}
|
|
.gods-equivalent-link:hover {
|
|
background: #3f3f46;
|
|
border-color: #7c3aed;
|
|
}
|
|
.gods-equivalent-text {
|
|
color: #a1a1aa;
|
|
}
|
|
.gods-card-row {
|
|
font-size: 13px;
|
|
color: #d4d4d8;
|
|
margin-bottom: 4px;
|
|
}
|
|
.gods-field-label {
|
|
font-size: 11px;
|
|
color: #71717a;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
margin-right: 6px;
|
|
}
|
|
.gods-hebrew {
|
|
font-family: 'Segoe UI', 'Noto Sans Hebrew', serif;
|
|
font-size: 22px;
|
|
color: #e0d0ff;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
.gods-transliteration {
|
|
font-size: 15px;
|
|
color: #f4f4f5;
|
|
font-weight: 600;
|
|
vertical-align: middle;
|
|
}
|
|
.gods-nav-row {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.gods-nav-btn {
|
|
padding: 5px 10px;
|
|
background: #27272a;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 6px;
|
|
color: #c4b5fd;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 100ms;
|
|
}
|
|
.gods-nav-btn:hover { background: #3f3f46; border-color: #7c3aed; }
|
|
|
|
.gods-domain-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
margin-top: 8px;
|
|
}
|
|
.gods-domain-tag {
|
|
font-size: 11px;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
background: #27272a;
|
|
border: 1px solid #3f3f46;
|
|
color: #a1a1aa;
|
|
}
|
|
.gods-card--kab {
|
|
border-color: #064e3b;
|
|
background: #022c22;
|
|
}
|
|
|
|
.zod-list-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.zod-list-symbol {
|
|
font-size: 22px;
|
|
min-width: 28px;
|
|
text-align: center;
|
|
line-height: 1;
|
|
}
|
|
.zod-list-elem {
|
|
margin-left: auto;
|
|
font-size: 14px;
|
|
}
|
|
.zod-badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 9px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.zod-badge--fire { background: #7f1d1d; color: #fca5a5; }
|
|
.zod-badge--earth { background: #14532d; color: #86efac; }
|
|
.zod-badge--air { background: #1e3a5f; color: #93c5fd; }
|
|
.zod-badge--water { background: #1a1a5e; color: #a5b4fc; }
|
|
.zod-badge--quad { background: #27272a; color: #d4d4d8; }
|
|
.zod-hebrew-glyph {
|
|
font-size: 48px;
|
|
font-family: "Segoe UI", "Noto Sans Hebrew", "Noto Serif", serif;
|
|
color: #e0d0ff;
|
|
line-height: 1;
|
|
}
|
|
.zod-detail-name {
|
|
font-size: 52px;
|
|
font-family: "Segoe UI", "Noto Serif", serif;
|
|
}
|
|
.zod-decan-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 5px 0;
|
|
border-bottom: 1px solid #27272a;
|
|
font-size: 13px;
|
|
}
|
|
.zod-decan-row:last-child { border-bottom: none; }
|
|
.zod-decan-ord { font-weight: 600; min-width: 30px; color: #a1a1aa; }
|
|
.zod-decan-planet { min-width: 80px; color: #d4d4d8; }
|
|
.zod-decan-card-btn {
|
|
margin-left: auto;
|
|
padding: 3px 8px;
|
|
background: #1e1b4b;
|
|
border: 1px solid #4338ca;
|
|
border-radius: 6px;
|
|
color: #c7d2fe;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.zod-decan-card-btn:hover { background: #312e81; border-color: #818cf8; color: #e0e7ff; }
|
|
.zod-tetra {
|
|
font-family: "Segoe UI", "Noto Sans Hebrew", serif;
|
|
font-size: 15px;
|
|
letter-spacing: 2px;
|
|
color: #e0d0ff;
|
|
}
|
|
|
|
.settings-popup {
|
|
position: fixed;
|
|
top: 62px;
|
|
right: 16px;
|
|
z-index: 30;
|
|
}
|
|
.settings-popup[hidden] {
|
|
display: none;
|
|
}
|
|
.settings-popup-card {
|
|
width: min(420px, calc(100vw - 32px));
|
|
background: #18181b;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
|
|
box-sizing: border-box;
|
|
}
|
|
.settings-popup-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.settings-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
color: #d4d4d8;
|
|
}
|
|
.settings-field-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.settings-field input,
|
|
.settings-field select {
|
|
width: 100%;
|
|
padding: 7px 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
background: #09090b;
|
|
color: #f4f4f5;
|
|
box-sizing: border-box;
|
|
}
|
|
.settings-actions {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
}
|
|
.settings-actions button,
|
|
.settings-popup-header button {
|
|
padding: 7px 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
background: #27272a;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
}
|
|
.settings-actions button:hover,
|
|
.settings-popup-header button:hover {
|
|
background: #3f3f46;
|
|
}
|
|
#month-strip {
|
|
height: 28px;
|
|
background: #18181b;
|
|
border-bottom: 1px solid #27272a;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
#month-strip .month-strip-track {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
}
|
|
#month-strip .month-strip-segment {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #e5e7eb;
|
|
letter-spacing: 0.01em;
|
|
border-left: 1px solid rgba(255, 255, 255, 0.08);
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-transform: uppercase;
|
|
}
|
|
#month-strip .month-strip-segment:first-child {
|
|
border-left: 0;
|
|
}
|
|
#now-panel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 38px 24px 76px;
|
|
min-height: clamp(740px, 90vh, 1140px);
|
|
background: #1e1e24;
|
|
border-bottom: 1px solid #27272a;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 0;
|
|
align-items: start;
|
|
align-content: start;
|
|
}
|
|
|
|
#now-panel[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
#now-sky-layer {
|
|
position: absolute;
|
|
width: calc(100% + 1360px);
|
|
height: calc(100% + 380px);
|
|
top: -200px;
|
|
left: -830px;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
opacity: 1;
|
|
border: none;
|
|
filter: none;
|
|
background-color: #000;
|
|
}
|
|
#now-panel::before {
|
|
content: "";
|
|
grid-column: 1 / -1;
|
|
grid-row: 3;
|
|
height: clamp(250px, 31vh, 430px);
|
|
pointer-events: none;
|
|
}
|
|
#now-panel::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
background: transparent;
|
|
pointer-events: none;
|
|
}
|
|
.now-section {
|
|
position: relative;
|
|
z-index: 2;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
padding: 10px 12px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
border: 0;
|
|
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
|
|
transition: color 180ms ease, box-shadow 180ms ease;
|
|
}
|
|
.now-section::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: clamp(210px, 56%, 340px);
|
|
height: 35%;
|
|
left: 50%;
|
|
bottom: 6px;
|
|
transform: translateX(-50%);
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
opacity: 0.74;
|
|
border-radius: 999px;
|
|
background:
|
|
radial-gradient(56% 58% at 24% 44%, rgba(26, 32, 47, 0.64) 0%, rgba(26, 32, 47, 0.24) 62%, transparent 100%),
|
|
radial-gradient(52% 56% at 78% 40%, rgba(2, 6, 23, 0.58) 0%, rgba(2, 6, 23, 0.22) 62%, transparent 100%),
|
|
radial-gradient(64% 70% at 50% 72%, rgba(8, 12, 28, 0.54) 0%, rgba(8, 12, 28, 0.2) 64%, transparent 100%);
|
|
filter: saturate(0.92);
|
|
}
|
|
.now-section > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
#now-panel.is-day .now-section {
|
|
color: #111827;
|
|
box-shadow: 0 7px 16px rgba(15, 23, 42, 0.14);
|
|
}
|
|
#now-panel.is-day .now-section::before {
|
|
background:
|
|
radial-gradient(56% 58% at 24% 44%, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.34) 62%, transparent 100%),
|
|
radial-gradient(52% 56% at 78% 40%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.3) 62%, transparent 100%),
|
|
radial-gradient(64% 70% at 50% 72%, rgba(241, 245, 249, 0.74) 0%, rgba(226, 232, 240, 0.28) 64%, transparent 100%);
|
|
filter: saturate(1.02);
|
|
}
|
|
#now-panel.is-night .now-section {
|
|
color: #f8fafc;
|
|
box-shadow: 0 9px 20px rgba(0, 0, 0, 0.34);
|
|
}
|
|
#now-panel.is-day .now-title,
|
|
#now-panel.is-day .now-tarot,
|
|
#now-panel.is-day .now-countdown-row,
|
|
#now-panel.is-day .now-countdown-next,
|
|
#now-panel.is-day .now-countdown-value,
|
|
#now-panel.is-day .now-primary {
|
|
color: #111827;
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
}
|
|
#now-panel.is-day .now-primary-hour {
|
|
color: #581c87;
|
|
}
|
|
#now-panel.is-day .now-primary-moon {
|
|
color: #78350f;
|
|
}
|
|
#now-panel.is-day .now-primary-decan {
|
|
color: #9a3412;
|
|
}
|
|
#now-panel.is-night .now-title,
|
|
#now-panel.is-night .now-tarot,
|
|
#now-panel.is-night .now-countdown-row,
|
|
#now-panel.is-night .now-countdown-next,
|
|
#now-panel.is-night .now-countdown-value,
|
|
#now-panel.is-night .now-primary,
|
|
#now-panel.is-night .now-primary-hour,
|
|
#now-panel.is-night .now-primary-moon,
|
|
#now-panel.is-night .now-primary-decan {
|
|
color: #f8fafc;
|
|
text-shadow: 0 1px 3px rgba(2, 6, 23, 0.75);
|
|
}
|
|
.now-card {
|
|
margin: 6px 0 10px 0;
|
|
width: 150px;
|
|
height: 225px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
display: none;
|
|
}
|
|
#now-panel.is-day .now-card {
|
|
border-color: rgba(17, 24, 39, 0.32);
|
|
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
|
|
}
|
|
#now-panel.is-night .now-card {
|
|
border-color: rgba(226, 232, 240, 0.36);
|
|
box-shadow: 0 10px 22px rgba(2, 6, 23, 0.58);
|
|
}
|
|
.now-countdown-row {
|
|
margin-top: 4px;
|
|
width: min(100%, 340px);
|
|
display: grid;
|
|
grid-template-columns: 130px 1fr;
|
|
column-gap: 10px;
|
|
align-items: center;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
.now-countdown-value {
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
font-variant-numeric: tabular-nums;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
.now-countdown-next {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.now-title {
|
|
font-size: 11px;
|
|
color: #a1a1aa;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 4px;
|
|
}
|
|
.now-stats-section {
|
|
position: relative;
|
|
z-index: 2;
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
margin-top: 10px;
|
|
border-radius: 14px;
|
|
padding: 12px 14px;
|
|
background: rgba(15, 23, 42, 0.42);
|
|
border: 1px solid rgba(148, 163, 184, 0.35);
|
|
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
.now-stats-title {
|
|
font-size: 11px;
|
|
color: #cbd5e1;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
font-weight: 700;
|
|
}
|
|
.now-stats-sabian {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
color: #f8fafc;
|
|
white-space: pre-line;
|
|
}
|
|
.now-stats-planets {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 6px 10px;
|
|
font-size: 13px;
|
|
line-height: 1.35;
|
|
color: #e2e8f0;
|
|
}
|
|
.now-stats-planet {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
#now-panel.is-day .now-stats-section {
|
|
background: rgba(255, 255, 255, 0.58);
|
|
border-color: rgba(15, 23, 42, 0.2);
|
|
box-shadow: 0 7px 16px rgba(15, 23, 42, 0.12);
|
|
}
|
|
#now-panel.is-day .now-stats-title {
|
|
color: #475569;
|
|
text-shadow: none;
|
|
}
|
|
#now-panel.is-day .now-stats-sabian,
|
|
#now-panel.is-day .now-stats-planets {
|
|
color: #0f172a;
|
|
text-shadow: none;
|
|
}
|
|
#now-panel.is-night .now-stats-title,
|
|
#now-panel.is-night .now-stats-sabian,
|
|
#now-panel.is-night .now-stats-planets {
|
|
text-shadow: 0 1px 3px rgba(2, 6, 23, 0.75);
|
|
}
|
|
.now-primary {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
.now-primary-hour {
|
|
color: #a855f7;
|
|
}
|
|
.now-primary-moon {
|
|
color: #fbbf24;
|
|
}
|
|
.now-primary-decan {
|
|
color: #f97316;
|
|
}
|
|
.now-tarot {
|
|
font-size: 13px;
|
|
color: #d4d4d8;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #ffffff !important;
|
|
width: 52px;
|
|
height: 52px;
|
|
line-height: 1;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
border: none;
|
|
padding: 0;
|
|
right: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
z-index: 5;
|
|
}
|
|
|
|
.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time .now-celestial-chip {
|
|
width: auto;
|
|
height: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0;
|
|
line-height: 1;
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time .now-celestial-icon {
|
|
font-size: 34px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time .now-celestial-value {
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time.is-sun .now-celestial-chip {
|
|
color: #facc15;
|
|
filter: drop-shadow(0 0 var(--sun-glow-size, 10px) rgba(250, 204, 21, var(--sun-glow-alpha, 0.75)));
|
|
}
|
|
|
|
.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time.is-moon .now-celestial-chip {
|
|
color: #e2e8f0;
|
|
filter: drop-shadow(0 0 8px rgba(148, 163, 184, var(--moon-glow-alpha, 0.5)));
|
|
}
|
|
|
|
.toastui-calendar-timegrid-time-column {
|
|
transition: background-image 400ms ease;
|
|
}
|
|
|
|
.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-time .toastui-calendar-timegrid-time-label,
|
|
.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-time span {
|
|
color: #ffffff !important;
|
|
text-shadow: 0 0 2px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
:root {
|
|
--week-col-1: #727781;
|
|
--week-col-2: #7f8490;
|
|
--week-col-3: #8d93a0;
|
|
--week-col-4: #9aa1ad;
|
|
--week-col-5: #aab1bd;
|
|
--week-col-6: #c0c7d2;
|
|
--week-col-7: #d7dee8;
|
|
}
|
|
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(1),
|
|
.toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(1),
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(1),
|
|
.toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(1) {
|
|
background-color: var(--week-col-1);
|
|
}
|
|
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(2),
|
|
.toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(2),
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(2),
|
|
.toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(2) {
|
|
background-color: var(--week-col-2);
|
|
}
|
|
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(3),
|
|
.toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(3),
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(3),
|
|
.toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(3) {
|
|
background-color: var(--week-col-3);
|
|
}
|
|
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(4),
|
|
.toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(4),
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(4),
|
|
.toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(4) {
|
|
background-color: var(--week-col-4);
|
|
}
|
|
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(5),
|
|
.toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(5),
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(5),
|
|
.toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(5) {
|
|
background-color: var(--week-col-5);
|
|
}
|
|
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(6),
|
|
.toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(6),
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(6),
|
|
.toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(6) {
|
|
background-color: var(--week-col-6);
|
|
}
|
|
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(7),
|
|
.toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(7),
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(7),
|
|
.toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(7) {
|
|
background-color: var(--week-col-7);
|
|
}
|
|
|
|
.toastui-calendar-panel.toastui-calendar-allday,
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid-wrapper,
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-allday-panel,
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid,
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-event-wrapper {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.toastui-calendar-week-view .toastui-calendar-panel.toastui-calendar-allday,
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-event-wrapper {
|
|
overflow-y: hidden !important;
|
|
}
|
|
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid {
|
|
background: transparent !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(1) { background-color: var(--week-col-1) !important; background-image: none !important; border-right: 0 !important; }
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(2) { background-color: var(--week-col-2) !important; background-image: none !important; border-right: 0 !important; }
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(3) { background-color: var(--week-col-3) !important; background-image: none !important; border-right: 0 !important; }
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(4) { background-color: var(--week-col-4) !important; background-image: none !important; border-right: 0 !important; }
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(5) { background-color: var(--week-col-5) !important; background-image: none !important; border-right: 0 !important; }
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(6) { background-color: var(--week-col-6) !important; background-image: none !important; border-right: 0 !important; }
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(7) { background-color: var(--week-col-7) !important; background-image: none !important; border-right: 0 !important; }
|
|
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(-n+4) .toastui-calendar-day-name__date,
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(-n+4) .toastui-calendar-day-name__name {
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
.toastui-calendar-panel.toastui-calendar-week-view-day-names {
|
|
height: 52px !important;
|
|
overflow-y: hidden !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.toastui-calendar-day-names.toastui-calendar-week {
|
|
height: 52px;
|
|
}
|
|
|
|
.toastui-calendar-day-name-item.toastui-calendar-week {
|
|
height: 52px;
|
|
line-height: 1;
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.weekday-header-template {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.weekday-header-number {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.weekday-header-name {
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.weekday-header-ruler {
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(-n+5) .weekday-header-number,
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(-n+5) .weekday-header-name,
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(-n+5) .weekday-header-ruler {
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(n+6) .weekday-header-number,
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(n+6) .weekday-header-name,
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(n+6) .weekday-header-ruler {
|
|
color: #1f2937;
|
|
}
|
|
|
|
.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-today,
|
|
.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-right {
|
|
height: 4px;
|
|
margin-top: -2px;
|
|
border-top: none !important;
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
#ef4444 0%,
|
|
#f97316 16.6%,
|
|
#facc15 33.2%,
|
|
#22c55e 49.8%,
|
|
#3b82f6 66.4%,
|
|
#a855f7 83%,
|
|
#ec4899 100%
|
|
);
|
|
background-size: 320px 100%;
|
|
-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px);
|
|
mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px);
|
|
opacity: 0.95;
|
|
box-shadow: 0 0 8px rgba(168, 85, 247, 0.35);
|
|
}
|
|
|
|
.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-left {
|
|
height: 4px;
|
|
margin-top: -2px;
|
|
border-top: none !important;
|
|
background: #ffffff;
|
|
-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px);
|
|
mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px);
|
|
opacity: 0.98;
|
|
box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-marker {
|
|
position: absolute;
|
|
width: 44px !important;
|
|
height: 44px !important;
|
|
margin: -22px 0 0 -22px !important;
|
|
border-radius: 50% !important;
|
|
background: radial-gradient(circle at 30% 30%, #fff7c2 0%, #facc15 55%, #f59e0b 100%) !important;
|
|
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35), 0 0 var(--sun-marker-glow-size, 16px) rgba(250, 204, 21, 0.7);
|
|
z-index: 6;
|
|
overflow: visible;
|
|
}
|
|
|
|
.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-marker.is-moon {
|
|
background: radial-gradient(circle at 35% 30%, #64748b 0%, #1e293b 62%, #020617 100%) !important;
|
|
box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.35), 0 0 12px rgba(148, 163, 184, var(--moon-glow-alpha, 0.45));
|
|
}
|
|
|
|
.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-marker::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -10px;
|
|
border-radius: 50%;
|
|
background: repeating-conic-gradient(
|
|
from 0deg,
|
|
rgba(251, 191, 36, 0.9) 0deg 10deg,
|
|
transparent 10deg 30deg
|
|
);
|
|
-webkit-mask-image: radial-gradient(circle, transparent 0 47%, #000 47% 62%, transparent 62% 100%);
|
|
mask-image: radial-gradient(circle, transparent 0 47%, #000 47% 62%, transparent 62% 100%);
|
|
pointer-events: none;
|
|
opacity: var(--sun-marker-ray-opacity, 0.9);
|
|
}
|
|
|
|
.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-marker.is-moon::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
.toastui-calendar-timegrid {
|
|
height: 240%;
|
|
min-height: 1200px;
|
|
}
|
|
|
|
.toastui-calendar-event-time {
|
|
cursor: default !important;
|
|
min-height: 42px;
|
|
border-radius: 0 !important;
|
|
border-width: 0 !important;
|
|
}
|
|
|
|
.toastui-calendar-event-time .toastui-calendar-event-time-content {
|
|
white-space: pre-line;
|
|
line-height: 1.2;
|
|
font-size: 11px;
|
|
padding: 0 !important;
|
|
margin: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.toastui-calendar-panel-event-wrapper .toastui-calendar-weekday-event {
|
|
cursor: default !important;
|
|
margin: 0 !important;
|
|
border-left-width: 0 !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.toastui-calendar-weekday-event-title {
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.toastui-calendar-daygrid-cell + .toastui-calendar-daygrid-cell,
|
|
.toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column + .toastui-calendar-column,
|
|
.toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week + .toastui-calendar-day-name-item.toastui-calendar-week {
|
|
border-left: 0 !important;
|
|
}
|
|
|
|
.toastui-calendar-column .toastui-calendar-events {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.toastui-calendar-resize-handler-x,
|
|
.toastui-calendar-weekday-resize-handle {
|
|
display: none !important;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.planet-layout {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
.planet-meta-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
.planet-fact-row {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 4px;
|
|
}
|
|
.planet-fact-value {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
#calendar {
|
|
height: calc(100vh - 96px);
|
|
}
|