7533 lines
182 KiB
CSS
7533 lines
182 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;
|
|
overflow-x: hidden;
|
|
}
|
|
.topbar {
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
border-bottom: 1px solid #27272a;
|
|
background: #18181b;
|
|
min-width: 0;
|
|
overflow: visible;
|
|
position: relative;
|
|
z-index: 40;
|
|
}
|
|
.topbar-home-button {
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.01em;
|
|
flex: 0 0 auto;
|
|
}
|
|
.topbar-home-button:hover {
|
|
color: #fbbf24;
|
|
}
|
|
.topbar-home-button[aria-pressed="true"] {
|
|
color: #fbbf24;
|
|
}
|
|
.topbar-menu-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 7px 12px;
|
|
border-radius: 999px;
|
|
border: 1px solid #3f3f46;
|
|
background: #27272a;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
flex: 0 0 auto;
|
|
}
|
|
.topbar-panel-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 7px 12px;
|
|
border-radius: 999px;
|
|
border: 1px solid #3f3f46;
|
|
background: #27272a;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
}
|
|
.topbar-panel-toggle:hover {
|
|
background: #3f3f46;
|
|
}
|
|
.topbar-panel-toggle[hidden] {
|
|
display: none;
|
|
}
|
|
.topbar-panel-toggle[hidden] + .topbar-menu-toggle {
|
|
margin-left: auto;
|
|
}
|
|
.topbar-panel-toggle:not([hidden]) + .topbar-menu-toggle {
|
|
margin-left: 0;
|
|
}
|
|
.topbar-menu-toggle:hover {
|
|
background: #3f3f46;
|
|
}
|
|
.topbar-settings-toggle {
|
|
margin-left: 0;
|
|
}
|
|
.topbar-actions {
|
|
display: none;
|
|
flex: 1 0 100%;
|
|
width: 100%;
|
|
padding: 12px;
|
|
margin: 4px 0 0;
|
|
border: 1px solid #2f2f39;
|
|
border-radius: 16px;
|
|
background: linear-gradient(180deg, rgba(24, 24, 34, 0.98), rgba(12, 12, 18, 0.98));
|
|
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
|
|
gap: 10px;
|
|
max-height: calc(100svh - 88px);
|
|
overflow-y: auto;
|
|
}
|
|
.topbar.is-menu-open .topbar-actions {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.topbar-actions > * {
|
|
width: 100%;
|
|
}
|
|
.topbar-dropdown {
|
|
display: grid;
|
|
width: 100%;
|
|
}
|
|
.topbar-dropdown-menu {
|
|
position: static;
|
|
min-width: 0;
|
|
width: 100%;
|
|
display: none;
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
padding: 6px;
|
|
margin-top: 6px;
|
|
border-radius: 12px;
|
|
border: 1px solid #31313d;
|
|
background: rgba(10, 10, 16, 0.92);
|
|
box-shadow: none;
|
|
z-index: 40;
|
|
}
|
|
.topbar-dropdown.is-open .topbar-dropdown-menu {
|
|
display: grid;
|
|
}
|
|
.topbar-sub-trigger {
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 13px;
|
|
min-height: 40px;
|
|
padding: 6px 10px;
|
|
}
|
|
.topbar-sub-trigger.is-active {
|
|
background: #3f3f46;
|
|
border-color: #52525b;
|
|
}
|
|
.settings-trigger {
|
|
width: 100%;
|
|
min-height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
text-align: left;
|
|
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;
|
|
}
|
|
@media (max-width: 900px) {
|
|
body.topbar-menu-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.topbar {
|
|
position: sticky;
|
|
top: 0;
|
|
padding: 10px 12px;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
background: rgba(24, 24, 27, 0.96);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
.topbar-home-button {
|
|
font-size: 17px;
|
|
min-height: 38px;
|
|
}
|
|
.topbar-menu-toggle {
|
|
min-height: 38px;
|
|
}
|
|
.topbar-settings-toggle {
|
|
min-height: 38px;
|
|
}
|
|
.topbar-panel-toggle {
|
|
min-height: 38px;
|
|
}
|
|
.topbar.is-menu-open {
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-end;
|
|
border-bottom-color: transparent;
|
|
}
|
|
.topbar.is-menu-open .topbar-home-button {
|
|
display: none;
|
|
}
|
|
.topbar-actions {
|
|
max-height: calc(100svh - 88px);
|
|
}
|
|
.topbar.is-menu-open .topbar-actions {
|
|
position: absolute;
|
|
top: calc(100% - 1px);
|
|
left: 0;
|
|
right: 0;
|
|
width: auto;
|
|
min-height: calc(100svh - 58px);
|
|
max-height: calc(100svh - 58px);
|
|
margin: 0;
|
|
padding: 14px 12px calc(18px + env(safe-area-inset-bottom, 0px));
|
|
border-radius: 0 0 18px 18px;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-bottom: 0;
|
|
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.44);
|
|
overflow-y: auto;
|
|
}
|
|
.settings-trigger {
|
|
padding: 10px 12px;
|
|
}
|
|
}
|
|
@media (max-width: 640px) {
|
|
.topbar {
|
|
padding: 9px 10px;
|
|
}
|
|
.topbar-home-button {
|
|
font-size: 16px;
|
|
}
|
|
.topbar-actions {
|
|
padding: 10px;
|
|
border-radius: 14px;
|
|
max-height: calc(100svh - 78px);
|
|
}
|
|
.topbar.is-menu-open .topbar-actions {
|
|
min-height: calc(100svh - 52px);
|
|
max-height: calc(100svh - 52px);
|
|
padding: 12px 10px calc(18px + env(safe-area-inset-bottom, 0px));
|
|
border-radius: 0;
|
|
}
|
|
.settings-trigger {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
body.connection-gated {
|
|
overflow: hidden;
|
|
}
|
|
.connection-gate {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 120;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 24px;
|
|
background:
|
|
radial-gradient(circle at top, rgba(245, 158, 11, 0.18), transparent 34%),
|
|
linear-gradient(180deg, rgba(9, 9, 11, 0.84), rgba(9, 9, 11, 0.96));
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.connection-gate[hidden] {
|
|
display: none;
|
|
}
|
|
.connection-gate-card {
|
|
width: min(460px, calc(100vw - 32px));
|
|
padding: 24px;
|
|
border: 1px solid rgba(245, 158, 11, 0.28);
|
|
border-radius: 18px;
|
|
background: linear-gradient(180deg, rgba(24, 24, 27, 0.96), rgba(9, 9, 11, 0.98));
|
|
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
|
|
box-sizing: border-box;
|
|
}
|
|
.connection-gate-eyebrow {
|
|
margin-bottom: 10px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: #fbbf24;
|
|
}
|
|
.connection-gate-title {
|
|
margin: 0;
|
|
font-size: 28px;
|
|
line-height: 1.1;
|
|
color: #fafaf9;
|
|
}
|
|
.connection-gate-copy {
|
|
margin: 12px 0 18px;
|
|
color: #d4d4d8;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
.connection-gate-fields {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
.connection-gate-status {
|
|
min-height: 20px;
|
|
margin-top: 14px;
|
|
font-size: 13px;
|
|
color: #d4d4d8;
|
|
}
|
|
.connection-gate-status[data-tone="error"] {
|
|
color: #fca5a5;
|
|
}
|
|
.connection-gate-status[data-tone="success"] {
|
|
color: #86efac;
|
|
}
|
|
.connection-gate-status[data-tone="pending"] {
|
|
color: #fde68a;
|
|
}
|
|
.connection-gate-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
margin-top: 16px;
|
|
}
|
|
.connection-gate-actions button {
|
|
appearance: none;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 10px;
|
|
padding: 10px 14px;
|
|
background: #27272a;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
}
|
|
.connection-gate-actions button:hover {
|
|
background: #3f3f46;
|
|
}
|
|
#connection-gate-connect {
|
|
border-color: #f59e0b;
|
|
color: #111827;
|
|
background: linear-gradient(180deg, #fbbf24, #ea580c);
|
|
}
|
|
#connection-gate-connect:hover {
|
|
background: linear-gradient(180deg, #f59e0b, #d97706);
|
|
}
|
|
#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;
|
|
}
|
|
#timeline-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
#holiday-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#tarot-house-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#tarot-frame-section {
|
|
height: calc(100vh - 61px);
|
|
height: calc(100dvh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
}
|
|
#tarot-section[hidden] {
|
|
display: none;
|
|
}
|
|
#tarot-house-section[hidden] {
|
|
display: none;
|
|
}
|
|
#tarot-frame-section[hidden] {
|
|
display: none;
|
|
}
|
|
#planet-section[hidden] {
|
|
display: none;
|
|
}
|
|
#cycles-section[hidden] {
|
|
display: none;
|
|
}
|
|
#iching-section[hidden] {
|
|
display: none;
|
|
}
|
|
#calendar-section[hidden] {
|
|
display: none;
|
|
}
|
|
#timeline-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 {
|
|
position: relative;
|
|
}
|
|
.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-frame-view {
|
|
min-height: 100%;
|
|
padding: 18px;
|
|
box-sizing: border-box;
|
|
overflow-x: clip;
|
|
}
|
|
|
|
.tarot-frame-shell {
|
|
width: min(1480px, 100%);
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
gap: 16px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tarot-frame-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tarot-frame-title {
|
|
margin: 0;
|
|
font-size: clamp(28px, 4vw, 38px);
|
|
line-height: 1.05;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.tarot-frame-copy {
|
|
margin: 8px 0 0;
|
|
max-width: 820px;
|
|
color: #cbd5e1;
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.tarot-frame-actions {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tarot-frame-layout-panel {
|
|
position: absolute;
|
|
top: calc(100% + 10px);
|
|
right: 0;
|
|
z-index: 26;
|
|
min-width: 270px;
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
border: 1px solid #312e81;
|
|
border-radius: 16px;
|
|
background:
|
|
radial-gradient(circle at top, rgba(99, 102, 241, 0.16), transparent 42%),
|
|
linear-gradient(180deg, rgba(22, 22, 34, 0.98), rgba(10, 10, 18, 0.98));
|
|
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.tarot-frame-layout-panel[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.tarot-frame-layout-option {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 10px 12px;
|
|
border: 1px solid rgba(99, 102, 241, 0.28);
|
|
border-radius: 12px;
|
|
background: rgba(15, 23, 42, 0.5);
|
|
color: #cbd5e1;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tarot-frame-layout-option:hover,
|
|
.tarot-frame-layout-option.is-active {
|
|
border-color: rgba(129, 140, 248, 0.85);
|
|
background: rgba(49, 46, 129, 0.44);
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.tarot-frame-layout-option strong {
|
|
font-size: 13px;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-frame-layout-option span {
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.tarot-frame-layout-section-title {
|
|
padding: 2px 2px 0;
|
|
color: #a5b4fc;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-frame-layout-save-btn {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid rgba(129, 140, 248, 0.5);
|
|
border-radius: 12px;
|
|
background: linear-gradient(180deg, rgba(67, 56, 202, 0.92), rgba(49, 46, 129, 0.96));
|
|
color: #eef2ff;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-frame-layout-save-btn:hover {
|
|
border-color: rgba(165, 180, 252, 0.9);
|
|
background: linear-gradient(180deg, rgba(79, 70, 229, 0.96), rgba(67, 56, 202, 0.98));
|
|
}
|
|
|
|
.tarot-frame-layout-entry {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 8px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.tarot-frame-layout-delete-btn {
|
|
align-self: stretch;
|
|
padding: 10px 12px;
|
|
border: 1px solid rgba(248, 113, 113, 0.28);
|
|
border-radius: 12px;
|
|
background: rgba(69, 10, 10, 0.36);
|
|
color: #fecaca;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tarot-frame-layout-delete-btn:hover {
|
|
border-color: rgba(252, 165, 165, 0.58);
|
|
background: rgba(127, 29, 29, 0.5);
|
|
color: #fee2e2;
|
|
}
|
|
|
|
.tarot-frame-layout-empty-note {
|
|
padding: 10px 12px;
|
|
border: 1px dashed rgba(99, 102, 241, 0.28);
|
|
border-radius: 12px;
|
|
color: #cbd5e1;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
background: rgba(15, 23, 42, 0.28);
|
|
}
|
|
|
|
.tarot-frame-action-btn {
|
|
padding: 10px 14px;
|
|
border: 1px solid #4c1d95;
|
|
border-radius: 999px;
|
|
background: linear-gradient(180deg, #312e81, #1d1b4b);
|
|
color: #eef2ff;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.tarot-frame-action-btn:hover {
|
|
border-color: #6d28d9;
|
|
background: linear-gradient(180deg, #4338ca, #312e81);
|
|
}
|
|
|
|
.tarot-frame-action-btn.is-active {
|
|
border-color: #a5b4fc;
|
|
background: linear-gradient(180deg, #4f46e5, #3730a3);
|
|
color: #f8fafc;
|
|
box-shadow: 0 0 0 1px rgba(165, 180, 252, 0.16);
|
|
}
|
|
|
|
.tarot-frame-settings-panel {
|
|
position: absolute;
|
|
top: calc(100% + 10px);
|
|
right: 0;
|
|
z-index: 25;
|
|
min-width: 220px;
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
border: 1px solid #312e81;
|
|
border-radius: 16px;
|
|
background:
|
|
radial-gradient(circle at top, rgba(99, 102, 241, 0.14), transparent 40%),
|
|
linear-gradient(180deg, rgba(22, 22, 34, 0.98), rgba(10, 10, 18, 0.98));
|
|
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.tarot-frame-field {
|
|
display: grid;
|
|
gap: 6px;
|
|
color: #e2e8f0;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-frame-field select {
|
|
width: 100%;
|
|
padding: 9px 10px;
|
|
border: 1px solid rgba(99, 102, 241, 0.34);
|
|
border-radius: 12px;
|
|
background: rgba(15, 23, 42, 0.7);
|
|
color: #f8fafc;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tarot-frame-settings-group {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding-top: 2px;
|
|
border-top: 1px solid rgba(99, 102, 241, 0.18);
|
|
}
|
|
|
|
.tarot-frame-settings-group[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.tarot-frame-settings-heading {
|
|
color: #f8fafc;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-frame-settings-subheading {
|
|
color: #cbd5e1;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-frame-settings-note {
|
|
color: #94a3b8;
|
|
font-size: 11px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.tarot-frame-settings-actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.tarot-frame-clear-btn {
|
|
border-color: rgba(248, 113, 113, 0.4);
|
|
background: linear-gradient(180deg, rgba(127, 29, 29, 0.92), rgba(69, 10, 10, 0.96));
|
|
}
|
|
|
|
.tarot-frame-clear-btn:hover {
|
|
border-color: rgba(252, 165, 165, 0.72);
|
|
background: linear-gradient(180deg, rgba(153, 27, 27, 0.96), rgba(127, 29, 29, 0.98));
|
|
}
|
|
|
|
.tarot-frame-checkbox-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.tarot-frame-check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
padding: 8px 9px;
|
|
border: 1px solid rgba(99, 102, 241, 0.24);
|
|
border-radius: 10px;
|
|
background: rgba(15, 23, 42, 0.4);
|
|
color: #dbe4f0;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.tarot-frame-check input {
|
|
margin: 0;
|
|
accent-color: #818cf8;
|
|
}
|
|
|
|
.tarot-frame-settings-panel[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.tarot-frame-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px 10px;
|
|
border: 1px solid rgba(99, 102, 241, 0.34);
|
|
border-radius: 12px;
|
|
background: rgba(15, 23, 42, 0.5);
|
|
color: #e2e8f0;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.tarot-frame-toggle input {
|
|
margin: 0;
|
|
accent-color: #818cf8;
|
|
}
|
|
|
|
.tarot-frame-toggle input:disabled,
|
|
.tarot-frame-check input:disabled,
|
|
.tarot-frame-layout-option:disabled,
|
|
.tarot-frame-export-btn:disabled,
|
|
.tarot-frame-settings-toggle:disabled {
|
|
cursor: wait;
|
|
}
|
|
|
|
.tarot-frame-export-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tarot-frame-status {
|
|
padding: 10px 14px;
|
|
border: 1px solid #27272a;
|
|
border-radius: 14px;
|
|
background: linear-gradient(180deg, rgba(20, 20, 32, 0.95), rgba(10, 10, 18, 0.95));
|
|
color: #d4d4d8;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tarot-frame-board-grid {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tarot-frame-overview {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
|
|
gap: 14px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.tarot-frame-overview-summary,
|
|
.tarot-frame-notes-card {
|
|
display: grid;
|
|
gap: 14px;
|
|
padding: 18px;
|
|
border: 1px solid #27272a;
|
|
border-radius: 22px;
|
|
background:
|
|
radial-gradient(circle at top, rgba(59, 130, 246, 0.08), transparent 34%),
|
|
linear-gradient(180deg, #161622 0%, #0f0f17 100%);
|
|
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
|
|
min-width: 0;
|
|
}
|
|
|
|
.tarot-frame-overview-head,
|
|
.tarot-frame-panel-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tarot-frame-overview-eyebrow {
|
|
color: #93c5fd;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-frame-panel {
|
|
--frame-grid-zoom-scale: 1;
|
|
--frame-base-cell-width: clamp(32px, 2.6vw, 46px);
|
|
--frame-cell-width: calc(var(--frame-base-cell-width) * var(--frame-grid-zoom-scale));
|
|
--frame-cell-height: calc(var(--frame-cell-width) * 1.5);
|
|
--frame-base-gap: clamp(2px, 0.3vw, 6px);
|
|
--frame-gap: calc(var(--frame-base-gap) * var(--frame-grid-zoom-scale));
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 12px;
|
|
padding: 14px;
|
|
border: 1px solid #27272a;
|
|
border-radius: 22px;
|
|
background:
|
|
linear-gradient(180deg, rgba(22, 22, 34, 0.92), rgba(10, 10, 18, 0.98));
|
|
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tarot-frame-panel-title {
|
|
margin: 0;
|
|
font-size: 17px;
|
|
line-height: 1.2;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.tarot-frame-panel-subtitle {
|
|
margin: 5px 0 0;
|
|
color: #94a3b8;
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.tarot-frame-panel-count {
|
|
align-self: center;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
background: rgba(15, 23, 42, 0.78);
|
|
color: #cbd5e1;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tarot-frame-grid-viewport {
|
|
width: min(100%, calc(100vw - 52px));
|
|
max-width: calc(100vw - 52px);
|
|
min-height: clamp(520px, 68dvh, 900px);
|
|
max-height: min(84dvh, 1080px);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
min-width: 0;
|
|
touch-action: pan-x pan-y;
|
|
}
|
|
|
|
.tarot-frame-focus-exit {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-self: end;
|
|
padding: 10px 14px;
|
|
border: 1px solid rgba(191, 219, 254, 0.34);
|
|
border-radius: 999px;
|
|
background: rgba(15, 23, 42, 0.86);
|
|
color: #eff6ff;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.tarot-frame-focus-exit:hover {
|
|
border-color: rgba(147, 197, 253, 0.7);
|
|
background: rgba(30, 41, 59, 0.94);
|
|
}
|
|
|
|
.tarot-frame-focus-exit[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
body.is-tarot-frame-focus-lock {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#tarot-frame-section.is-grid-focus {
|
|
position: fixed;
|
|
inset: 61px 0 0 0;
|
|
z-index: 88;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(circle at top, rgba(59, 130, 246, 0.14), transparent 30%),
|
|
rgba(2, 6, 23, 0.92);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
#tarot-frame-section.is-grid-focus .tarot-frame-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#tarot-frame-section.is-grid-focus .tarot-frame-shell {
|
|
min-height: 100%;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
align-content: stretch;
|
|
}
|
|
|
|
#tarot-frame-section.is-grid-focus .tarot-frame-header,
|
|
#tarot-frame-section.is-grid-focus .tarot-frame-overview-host,
|
|
#tarot-frame-section.is-grid-focus .tarot-frame-status {
|
|
display: none !important;
|
|
}
|
|
|
|
#tarot-frame-section.is-grid-focus .tarot-frame-focus-exit {
|
|
display: inline-flex !important;
|
|
margin: 0 0 8px auto;
|
|
position: relative;
|
|
z-index: 90;
|
|
}
|
|
|
|
#tarot-frame-section.is-grid-focus .tarot-frame-board-grid {
|
|
height: 100%;
|
|
min-height: 0;
|
|
position: relative;
|
|
z-index: 89;
|
|
}
|
|
|
|
#tarot-frame-section.is-grid-focus .tarot-frame-panel {
|
|
height: 100%;
|
|
padding: 10px;
|
|
border-color: rgba(96, 165, 250, 0.3);
|
|
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42);
|
|
}
|
|
|
|
#tarot-frame-section.is-grid-focus .tarot-frame-grid-viewport {
|
|
width: 100%;
|
|
max-width: none;
|
|
min-height: 0;
|
|
max-height: none;
|
|
height: 100%;
|
|
}
|
|
|
|
.tarot-frame-grid-viewport.is-pan-enabled {
|
|
cursor: grab;
|
|
touch-action: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
.tarot-frame-grid-viewport.is-pan-enabled .tarot-frame-card {
|
|
cursor: inherit;
|
|
}
|
|
|
|
.tarot-frame-grid-viewport.is-pan-enabled.is-panning {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.tarot-frame-grid-viewport.is-panning {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.tarot-frame-grid-viewport.is-touch-gesture-active {
|
|
touch-action: none;
|
|
}
|
|
|
|
.tarot-frame-grid-track {
|
|
width: max-content;
|
|
min-width: max-content;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.tarot-frame-legend {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.tarot-frame-legend-item {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 10px 12px;
|
|
border: 1px solid rgba(71, 85, 105, 0.56);
|
|
border-radius: 14px;
|
|
background: rgba(15, 23, 42, 0.46);
|
|
color: #cbd5e1;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tarot-frame-notes-card {
|
|
align-content: start;
|
|
}
|
|
|
|
.tarot-frame-notes-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tarot-frame-notes-title {
|
|
margin: 0;
|
|
color: #f8fafc;
|
|
font-size: 15px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.tarot-frame-notes-copy {
|
|
margin: 6px 0 0;
|
|
color: #94a3b8;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.tarot-frame-notes-badge {
|
|
align-self: flex-start;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(96, 165, 250, 0.28);
|
|
background: rgba(15, 23, 42, 0.72);
|
|
color: #bfdbfe;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tarot-frame-notes-field {
|
|
display: grid;
|
|
gap: 8px;
|
|
color: #e2e8f0;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-frame-notes-field textarea {
|
|
width: 100%;
|
|
min-height: 176px;
|
|
resize: vertical;
|
|
padding: 12px 14px;
|
|
border: 1px solid rgba(96, 165, 250, 0.22);
|
|
border-radius: 16px;
|
|
background: rgba(8, 15, 28, 0.82);
|
|
color: #e2e8f0;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tarot-frame-notes-field textarea::placeholder {
|
|
color: #64748b;
|
|
}
|
|
|
|
.tarot-frame-notes-field textarea:focus {
|
|
outline: none;
|
|
border-color: rgba(125, 211, 252, 0.66);
|
|
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
|
|
}
|
|
|
|
.tarot-frame-notes-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
color: #94a3b8;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tarot-frame-notes-clear {
|
|
padding: 9px 12px;
|
|
border: 1px solid rgba(96, 165, 250, 0.22);
|
|
border-radius: 999px;
|
|
background: rgba(15, 23, 42, 0.56);
|
|
color: #dbeafe;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.tarot-frame-notes-clear:hover {
|
|
border-color: rgba(125, 211, 252, 0.5);
|
|
background: rgba(30, 41, 59, 0.82);
|
|
}
|
|
|
|
.tarot-frame-notes-clear:disabled {
|
|
cursor: default;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.tarot-frame-legend-item strong {
|
|
color: #f8fafc;
|
|
font-size: 12px;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-frame-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--frame-grid-size), var(--frame-cell-width));
|
|
grid-template-rows: repeat(var(--frame-grid-size), var(--frame-cell-height));
|
|
gap: var(--frame-gap);
|
|
justify-content: center;
|
|
align-content: center;
|
|
width: max-content;
|
|
min-width: max-content;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.tarot-frame-overview {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
#tarot-frame-section {
|
|
height: calc(100svh - 61px);
|
|
height: calc(100dvh - 61px);
|
|
}
|
|
|
|
.tarot-frame-view {
|
|
padding: 10px;
|
|
}
|
|
|
|
.tarot-frame-shell {
|
|
gap: 10px;
|
|
}
|
|
|
|
.tarot-frame-grid-viewport {
|
|
min-height: clamp(680px, 84dvh, 1240px);
|
|
max-height: min(92dvh, 1320px);
|
|
}
|
|
|
|
.tarot-frame-legend {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.tarot-frame-notes-field textarea {
|
|
min-height: 112px;
|
|
}
|
|
|
|
.tarot-frame-focus-exit {
|
|
padding: 9px 12px;
|
|
}
|
|
|
|
#tarot-frame-section.is-grid-focus .tarot-frame-view {
|
|
padding: 8px;
|
|
}
|
|
|
|
#tarot-frame-section.is-grid-focus .tarot-frame-focus-exit {
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
|
|
.tarot-frame-slot {
|
|
position: relative;
|
|
width: var(--frame-cell-width);
|
|
height: var(--frame-cell-height);
|
|
border-radius: 8px;
|
|
transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
|
|
}
|
|
|
|
.tarot-frame-slot.is-empty-slot {
|
|
border: 1px dashed rgba(148, 163, 184, 0.4);
|
|
}
|
|
|
|
.tarot-frame-card-picker {
|
|
position: fixed;
|
|
z-index: 40;
|
|
width: min(420px, calc(100vw - 24px));
|
|
max-height: min(78vh, 720px);
|
|
display: grid;
|
|
grid-template-rows: auto auto minmax(0, 1fr);
|
|
gap: 12px;
|
|
padding: 14px;
|
|
border: 1px solid rgba(129, 140, 248, 0.3);
|
|
border-radius: 20px;
|
|
background:
|
|
radial-gradient(circle at top, rgba(99, 102, 241, 0.18), transparent 36%),
|
|
linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
|
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tarot-frame-card-picker[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.tarot-frame-card-picker-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.tarot-frame-card-picker-title {
|
|
color: #f8fafc;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.tarot-frame-card-picker-close {
|
|
padding: 8px 12px;
|
|
border: 1px solid rgba(148, 163, 184, 0.28);
|
|
border-radius: 999px;
|
|
background: rgba(15, 23, 42, 0.78);
|
|
color: #e2e8f0;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tarot-frame-card-picker-search {
|
|
display: grid;
|
|
gap: 6px;
|
|
color: #cbd5e1;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-frame-card-picker-search input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid rgba(129, 140, 248, 0.24);
|
|
border-radius: 12px;
|
|
background: rgba(15, 23, 42, 0.84);
|
|
color: #f8fafc;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.tarot-frame-card-picker-sections {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 14px;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
padding-right: 2px;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.tarot-frame-card-picker-section {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
border: 1px solid rgba(71, 85, 105, 0.48);
|
|
border-radius: 16px;
|
|
background: rgba(15, 23, 42, 0.42);
|
|
}
|
|
|
|
.tarot-frame-card-picker-section-title {
|
|
margin: 0;
|
|
color: #eef2ff;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-frame-card-picker-subtitle {
|
|
color: #a5b4fc;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tarot-frame-card-picker-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.tarot-frame-card-picker-option {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 10px 12px;
|
|
border: 1px solid rgba(99, 102, 241, 0.24);
|
|
border-radius: 12px;
|
|
background: rgba(30, 41, 59, 0.58);
|
|
color: #e2e8f0;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tarot-frame-card-picker-option:hover {
|
|
border-color: rgba(165, 180, 252, 0.9);
|
|
background: rgba(67, 56, 202, 0.28);
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.tarot-frame-card-picker-option strong {
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.tarot-frame-card-picker-option span {
|
|
color: #94a3b8;
|
|
font-size: 11px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.tarot-frame-card-picker-empty {
|
|
padding: 12px;
|
|
border: 1px dashed rgba(99, 102, 241, 0.28);
|
|
border-radius: 12px;
|
|
color: #cbd5e1;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
background: rgba(15, 23, 42, 0.24);
|
|
}
|
|
|
|
.tarot-frame-slot.is-drop-target {
|
|
box-shadow: 0 0 0 2px #f59e0b, 0 0 0 6px rgba(245, 158, 11, 0.18);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.tarot-frame-slot.is-drag-source {
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.tarot-frame-slot-empty {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: transparent;
|
|
font-size: 0;
|
|
}
|
|
|
|
.tarot-frame-slot-empty::before {
|
|
content: none;
|
|
}
|
|
|
|
.tarot-frame-card {
|
|
position: absolute;
|
|
inset: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
overflow: visible;
|
|
cursor: grab;
|
|
box-shadow: none;
|
|
transition: transform 120ms ease, filter 120ms ease;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
touch-action: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
.tarot-frame-card.is-empty {
|
|
cursor: default;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.tarot-frame-card:hover {
|
|
transform: translateY(-2px);
|
|
filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.38));
|
|
}
|
|
|
|
.tarot-frame-card.is-empty:hover {
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
.tarot-frame-card {
|
|
cursor: grab;
|
|
}
|
|
|
|
.tarot-frame-card:hover {
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
}
|
|
|
|
.tarot-frame-card-image,
|
|
.tarot-frame-card-fallback {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.tarot-frame-card-image {
|
|
object-fit: contain;
|
|
background: transparent;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.tarot-frame-card-fallback {
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
color: #f8fafc;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
background:
|
|
radial-gradient(circle at top, rgba(99, 102, 241, 0.18), transparent 50%),
|
|
linear-gradient(180deg, #1e1b4b 0%, #0f172a 100%);
|
|
}
|
|
|
|
.tarot-frame-card-text-face {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
align-content: center;
|
|
justify-items: center;
|
|
gap: 4px;
|
|
padding: 6px 5px;
|
|
box-sizing: border-box;
|
|
color: #fafafa;
|
|
text-align: center;
|
|
background:
|
|
radial-gradient(circle at top, rgba(99, 102, 241, 0.16), transparent 55%),
|
|
linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.94));
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.tarot-frame-card-text-face.is-dense {
|
|
gap: 3px;
|
|
padding: 5px 4px;
|
|
}
|
|
|
|
.tarot-frame-card-text-face.is-top-hebrew .tarot-frame-card-text-primary {
|
|
font-size: clamp(11px, 1vw, 16px);
|
|
line-height: 1;
|
|
font-family: "Noto Sans Hebrew", "Segoe UI Symbol", sans-serif;
|
|
}
|
|
|
|
.tarot-frame-card-text-primary {
|
|
display: block;
|
|
font-size: clamp(7px, 0.78vw, 10px);
|
|
line-height: 1.15;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.tarot-frame-card-text-secondary {
|
|
display: block;
|
|
color: rgba(250, 250, 250, 0.76);
|
|
font-size: clamp(6px, 0.7vw, 8px);
|
|
line-height: 1.2;
|
|
letter-spacing: 0.02em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.tarot-frame-card-badge {
|
|
position: absolute;
|
|
left: 4px;
|
|
right: 4px;
|
|
bottom: 4px;
|
|
padding: 4px 5px;
|
|
border-radius: 8px;
|
|
background: rgba(2, 6, 23, 0.84);
|
|
color: #f8fafc;
|
|
font-size: clamp(8px, 0.72vw, 10px);
|
|
font-weight: 700;
|
|
line-height: 1.15;
|
|
letter-spacing: 0.02em;
|
|
text-align: center;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
|
|
white-space: normal;
|
|
box-sizing: border-box;
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.tarot-frame-grid.is-info-hidden .tarot-frame-card-badge {
|
|
display: none;
|
|
}
|
|
|
|
.tarot-frame-drag-ghost {
|
|
position: fixed;
|
|
z-index: 120;
|
|
width: 90px;
|
|
height: 135px;
|
|
pointer-events: none;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
border: 1px solid #818cf8;
|
|
background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
|
|
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.tarot-frame-drag-ghost img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.tarot-frame-drag-ghost-label {
|
|
position: absolute;
|
|
left: 6px;
|
|
right: 6px;
|
|
bottom: 6px;
|
|
padding: 4px 5px;
|
|
border-radius: 999px;
|
|
background: rgba(2, 6, 23, 0.88);
|
|
color: #f8fafc;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body.is-tarot-frame-dragging {
|
|
cursor: grabbing;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.tarot-frame-legend {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.tarot-frame-view {
|
|
padding: 12px;
|
|
}
|
|
|
|
.tarot-frame-actions {
|
|
width: 100%;
|
|
}
|
|
|
|
.tarot-frame-settings-panel {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
.tarot-frame-layout-panel {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
.tarot-frame-panel {
|
|
padding: 14px;
|
|
}
|
|
|
|
.tarot-frame-panel {
|
|
--frame-base-gap: 2px;
|
|
--frame-base-cell-width: min(26px, calc((100vw - 78px) / 14));
|
|
}
|
|
|
|
.tarot-frame-card-badge {
|
|
font-size: 7px;
|
|
padding: 3px 4px;
|
|
}
|
|
|
|
.tarot-frame-card-text-face {
|
|
gap: 2px;
|
|
padding: 4px 3px;
|
|
}
|
|
|
|
.tarot-frame-card-text-face.is-top-hebrew .tarot-frame-card-text-primary {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.tarot-frame-card-text-primary {
|
|
font-size: 6px;
|
|
}
|
|
|
|
.tarot-frame-card-text-secondary {
|
|
font-size: 5px;
|
|
}
|
|
}
|
|
|
|
.tarot-house-card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
}
|
|
|
|
.tarot-house-card-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.tarot-house-settings-panel {
|
|
position: absolute;
|
|
top: calc(100% + 10px);
|
|
right: 0;
|
|
z-index: 3;
|
|
width: min(560px, 100%);
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 14px 16px;
|
|
border: 1px solid rgba(82, 82, 91, 0.9);
|
|
border-radius: 14px;
|
|
background: rgba(9, 9, 11, 0.96);
|
|
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
|
|
.tarot-house-settings-panel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.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;
|
|
contain: layout paint;
|
|
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;
|
|
opacity: 0;
|
|
transition: opacity 140ms ease;
|
|
}
|
|
|
|
.tarot-house-card-image.is-loaded {
|
|
opacity: 1;
|
|
}
|
|
|
|
.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-house-view.is-house-focus {
|
|
padding: 18px;
|
|
}
|
|
|
|
#tarot-house-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-house-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;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.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 {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.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,
|
|
.detail-meta-card {
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
background: #111118;
|
|
}
|
|
.planet-meta-card strong,
|
|
.detail-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-export-btn[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.cube-rotation-controls {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 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-rotation-btn[aria-pressed="true"] {
|
|
background: #312e81;
|
|
border-color: #818cf8;
|
|
color: #e0e7ff;
|
|
}
|
|
|
|
.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;
|
|
position: relative;
|
|
z-index: 2;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.detail-toggle-inline {
|
|
margin-left: auto;
|
|
align-self: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.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,
|
|
.planet-layout.layout-detail-collapsed,
|
|
.tarot-layout.layout-sidebar-collapsed,
|
|
.tarot-layout.layout-detail-collapsed {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.kab-layout.layout-sidebar-collapsed,
|
|
.kab-layout.layout-detail-collapsed {
|
|
grid-template-rows: minmax(0, 1fr);
|
|
}
|
|
|
|
.layout-sidebar-collapsed > .planet-list-panel,
|
|
.layout-sidebar-collapsed > .tarot-list-panel {
|
|
display: none;
|
|
width: 0;
|
|
max-width: 0;
|
|
min-width: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
border-right: none;
|
|
}
|
|
|
|
.layout-sidebar-collapsed > .kab-tree-panel {
|
|
display: none;
|
|
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 {
|
|
display: none;
|
|
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 {
|
|
display: none;
|
|
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-layout.is-cube-focus {
|
|
grid-template-rows: minmax(0, 1fr);
|
|
}
|
|
|
|
.kab-layout.is-cube-focus > .kab-detail-panel {
|
|
display: none;
|
|
}
|
|
|
|
.kab-layout.is-cube-focus > .kab-tree-panel {
|
|
max-height: none;
|
|
min-height: 0;
|
|
height: 100%;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.kab-layout.is-cube-focus .kab-tree-container {
|
|
align-items: center;
|
|
padding: 18px;
|
|
}
|
|
|
|
.kab-layout.is-cube-focus .kab-tree-container > .cube-svg {
|
|
width: min(100%, 760px);
|
|
max-height: calc(100vh - 190px);
|
|
}
|
|
|
|
.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-export-btn {
|
|
margin-left: auto;
|
|
padding: 5px 10px;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 6px;
|
|
background: #18181b;
|
|
color: #d4d4d8;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.kab-export-btn:hover:not(:disabled) {
|
|
background: #27272a;
|
|
border-color: #52525b;
|
|
color: #f4f4f5;
|
|
}
|
|
|
|
.kab-export-btn:disabled {
|
|
opacity: 0.65;
|
|
cursor: progress;
|
|
}
|
|
|
|
.kab-export-btn[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.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,
|
|
#alphabet-letters-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#alphabet-section {
|
|
overflow: auto;
|
|
}
|
|
|
|
#alphabet-section[hidden],
|
|
#alphabet-letters-section[hidden] { display: none; }
|
|
|
|
.alpha-lookup-shell {
|
|
min-height: 100%;
|
|
padding: 18px 16px 24px;
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
align-items: start;
|
|
}
|
|
|
|
.alpha-special-top {
|
|
width: min(1120px, 100%);
|
|
margin: 0 auto;
|
|
padding: 14px;
|
|
border: 1px solid #27272a;
|
|
border-radius: 18px;
|
|
overflow: visible;
|
|
background: linear-gradient(180deg, #171726 0%, #12121a 100%);
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.alpha-gematria-card {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.alpha-gematria-toolbar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.alpha-tool-mode-group {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.alpha-tool-mode-option {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #d4d4d8;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
padding: 6px 10px;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 999px;
|
|
background: #101018;
|
|
}
|
|
|
|
.alpha-tool-mode-option:has(input:checked) {
|
|
border-color: #6366f1;
|
|
background: #1c1b35;
|
|
color: #eef2ff;
|
|
}
|
|
|
|
.alpha-gematria-controls {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
|
|
gap: 8px;
|
|
align-items: start;
|
|
}
|
|
|
|
.alpha-gematria-field {
|
|
display: grid;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.alpha-gematria-field.is-disabled {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.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-gematria-matches {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 10px;
|
|
max-height: min(52vh, 560px);
|
|
overflow: auto;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.alpha-gematria-matches[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.alpha-gematria-match {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
border: 1px solid #2f2f39;
|
|
border-radius: 12px;
|
|
background: #0c0c12;
|
|
}
|
|
|
|
.alpha-gematria-match-word {
|
|
color: #f4f4f5;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.alpha-gematria-match-definition {
|
|
color: #d4d4d8;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.alpha-gematria-match-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.alpha-gematria-match-meta-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 999px;
|
|
background: #11111a;
|
|
color: #d4d4d8;
|
|
font-size: 11px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.alpha-gematria-match-ciphers {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.alpha-gematria-match-cipher {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 999px;
|
|
background: #18181b;
|
|
color: #c4b5fd;
|
|
font-size: 11px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.alpha-gematria-match-empty {
|
|
grid-column: 1 / -1;
|
|
padding: 14px;
|
|
border: 1px dashed #3f3f46;
|
|
border-radius: 12px;
|
|
background: #101018;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.alpha-gematria-controls.is-input-priority-mode,
|
|
.alpha-gematria-controls:has(.alpha-gematria-cipher:disabled) {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.alpha-gematria-controls.is-input-priority-mode .alpha-gematria-field-cipher,
|
|
.alpha-gematria-controls:has(.alpha-gematria-cipher:disabled) .alpha-gematria-field-cipher {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.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: minmax(0, 1fr);
|
|
grid-row: 1 / -1;
|
|
}
|
|
|
|
#tarot-browse-view[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
#tarot-house-view {
|
|
min-height: 0;
|
|
height: 100%;
|
|
overflow: auto;
|
|
padding: 14px;
|
|
box-sizing: border-box;
|
|
background: #151520;
|
|
}
|
|
|
|
#tarot-house-view .tarot-section-house-top {
|
|
max-height: none;
|
|
height: auto;
|
|
padding: 0;
|
|
border-bottom: none;
|
|
overflow: visible;
|
|
background: transparent;
|
|
}
|
|
|
|
#tarot-house-view .tarot-house-card {
|
|
gap: 14px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
#tarot-house-view {
|
|
padding: 10px;
|
|
}
|
|
|
|
#tarot-house-view .tarot-house-card {
|
|
gap: 10px;
|
|
}
|
|
|
|
.tarot-house-card-head {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.tarot-house-card-actions {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 8px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.tarot-house-settings-toggle,
|
|
.tarot-house-toggle,
|
|
.tarot-house-filter-group,
|
|
.tarot-house-action-btn {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tarot-house-settings-panel {
|
|
position: static;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.tarot-house-filter-group {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.tarot-house-layout {
|
|
--tarot-house-card-gap: 2px;
|
|
--tarot-house-row-gap: 4px;
|
|
--tarot-house-section-gap: 8px;
|
|
--tarot-house-card-width: clamp(28px, calc((100vw - 56px) / 11), 42px);
|
|
--tarot-house-card-height: calc(var(--tarot-house-card-width) * 1.5);
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.tarot-house-trumps {
|
|
overflow-x: visible;
|
|
}
|
|
|
|
.tarot-house-trump-row,
|
|
.tarot-house-bottom-grid {
|
|
width: 100%;
|
|
}
|
|
|
|
.tarot-house-bottom-grid {
|
|
justify-content: center;
|
|
}
|
|
|
|
.tarot-house-card-btn.is-selected {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
.tarot-house-card-label {
|
|
left: 2px;
|
|
right: 2px;
|
|
bottom: 2px;
|
|
padding: 2px 3px;
|
|
font-size: 6.5px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.tarot-house-card-label-secondary {
|
|
margin-top: 1px;
|
|
font-size: 6px;
|
|
}
|
|
|
|
.tarot-house-card-text-face {
|
|
gap: 3px;
|
|
padding: 5px 4px;
|
|
}
|
|
|
|
.tarot-house-card-text-face.is-dense {
|
|
gap: 2px;
|
|
padding: 4px 3px;
|
|
}
|
|
|
|
.tarot-house-card-text-face.is-top-hebrew .tarot-house-card-text-primary {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tarot-house-card-text-primary {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.tarot-house-card-text-secondary,
|
|
.tarot-house-card-fallback {
|
|
font-size: 6px;
|
|
}
|
|
}
|
|
|
|
/* ── 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--ghost {
|
|
background: transparent;
|
|
border-color: #3f3f46;
|
|
color: #d4d4d8;
|
|
}
|
|
.alpha-nav-btn--ghost:hover {
|
|
background: #18181b;
|
|
border-color: #71717a;
|
|
color: #fafafa;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
#alphabet-text-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#alphabet-text-section[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.alpha-text-controls {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.alpha-text-detail-heading {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.alpha-text-heading-main {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.alpha-text-heading-tools {
|
|
display: grid;
|
|
grid-template-columns: minmax(260px, 420px) minmax(320px, 1fr);
|
|
gap: 12px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.alpha-text-controls--heading {
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
padding: 14px;
|
|
border: 1px solid #2f2f39;
|
|
border-radius: 14px;
|
|
background:
|
|
linear-gradient(180deg, rgba(24, 24, 38, 0.98), rgba(12, 12, 18, 0.98));
|
|
box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.08);
|
|
box-sizing: border-box;
|
|
align-content: start;
|
|
}
|
|
|
|
.alpha-text-search-controls {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.alpha-text-search-controls--sidebar {
|
|
padding: 12px;
|
|
border-bottom: 1px solid #27272a;
|
|
background:
|
|
linear-gradient(180deg, rgba(30, 27, 75, 0.22), rgba(16, 16, 24, 0.96));
|
|
}
|
|
|
|
.alpha-text-reader-toggle {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
color: #e4e4e7;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.alpha-text-reader-toggle input {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0;
|
|
accent-color: #818cf8;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.alpha-text-reader-toggle-control {
|
|
min-width: 0;
|
|
}
|
|
|
|
.alpha-text-search-controls--detail {
|
|
padding: 14px;
|
|
border: 1px solid #2f2f39;
|
|
border-radius: 14px;
|
|
background:
|
|
linear-gradient(180deg, rgba(24, 24, 38, 0.98), rgba(12, 12, 18, 0.98));
|
|
box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.08);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.alpha-text-search-controls--heading {
|
|
align-content: start;
|
|
height: 100%;
|
|
}
|
|
|
|
.alpha-text-search-inline {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
gap: 8px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.alpha-text-search-submit-inline {
|
|
min-height: 42px;
|
|
padding: 0 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
white-space: nowrap;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.alpha-text-control {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.alpha-text-control[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.alpha-text-control--toggle {
|
|
align-content: start;
|
|
}
|
|
|
|
.alpha-text-control > span {
|
|
color: #a1a1aa;
|
|
font-size: 11px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.alpha-text-select {
|
|
width: 100%;
|
|
min-height: 42px;
|
|
padding: 7px 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid #3f3f46;
|
|
background: #09090b;
|
|
color: #f4f4f5;
|
|
box-sizing: border-box;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.alpha-text-compare-toggle {
|
|
min-height: 42px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.alpha-text-search-input {
|
|
width: 100%;
|
|
min-height: 42px;
|
|
padding: 9px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid #4338ca;
|
|
background: #09090b;
|
|
color: #f4f4f5;
|
|
box-sizing: border-box;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.alpha-text-search-input::placeholder {
|
|
color: #71717a;
|
|
}
|
|
|
|
.alpha-text-search-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.alpha-text-search-controls--sidebar .alpha-text-search-actions .alpha-nav-btn {
|
|
flex: 1 1 0;
|
|
min-height: 34px;
|
|
}
|
|
|
|
.alpha-text-search-controls--detail .alpha-text-search-actions .alpha-nav-btn {
|
|
min-height: 34px;
|
|
padding-inline: 12px;
|
|
}
|
|
|
|
.alpha-text-source-btn {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.alpha-text-source-meta {
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
.alpha-text-detail-body {
|
|
display: grid;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.planet-layout.alpha-text-global-search-only.layout-sidebar-collapsed {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.planet-layout.alpha-text-global-search-only.layout-sidebar-collapsed > .planet-list-panel,
|
|
.planet-layout.alpha-text-global-search-only > .planet-detail-panel > .alpha-text-detail-heading,
|
|
.planet-layout.alpha-text-global-search-only .alpha-text-heading-tools,
|
|
.planet-layout.alpha-text-global-search-only .alpha-text-controls--heading,
|
|
.planet-layout.alpha-text-global-search-only .alpha-text-search-controls--detail {
|
|
display: none !important;
|
|
}
|
|
|
|
@media (max-width: 1040px) {
|
|
.alpha-text-heading-tools {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.alpha-text-reader-compare {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.planet-detail-heading,
|
|
.tarot-detail-heading,
|
|
.alpha-text-detail-heading {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.planet-detail-heading,
|
|
.tarot-detail-heading {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.alpha-text-controls--heading {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.alpha-text-search-inline {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tarot-detail-top {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.tarot-detail-image {
|
|
width: min(180px, 60vw);
|
|
height: auto;
|
|
aspect-ratio: 2 / 3;
|
|
justify-self: center;
|
|
}
|
|
|
|
.tarot-meanings,
|
|
.tarot-meta-grid,
|
|
#kab-detail-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.alpha-text-meta-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 12px;
|
|
align-items: start;
|
|
}
|
|
|
|
.alpha-text-extra-card {
|
|
align-content: start;
|
|
}
|
|
|
|
.alpha-text-extra-group {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.alpha-text-extra-group + .alpha-text-extra-group {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.alpha-text-extra-label {
|
|
color: #a1a1aa;
|
|
font-size: 11px;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.alpha-text-extra-actions {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.alpha-text-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.alpha-text-reader {
|
|
display: grid;
|
|
gap: 0;
|
|
}
|
|
|
|
.alpha-text-reader-card {
|
|
display: grid;
|
|
gap: 0;
|
|
}
|
|
|
|
.alpha-text-reader-compare {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.alpha-text-reader-card--compare {
|
|
min-width: 0;
|
|
}
|
|
|
|
.alpha-text-reader-navigation {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
margin-top: 16px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid #27272a;
|
|
}
|
|
|
|
.alpha-text-reader-nav-btn--next {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.alpha-text-search-summary {
|
|
margin: 0 0 10px;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.alpha-text-search-results {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.alpha-text-search-result {
|
|
display: grid;
|
|
gap: 8px;
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid #2f2f39;
|
|
border-radius: 12px;
|
|
background: #0c0c12;
|
|
color: #f4f4f5;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.alpha-text-search-result:hover {
|
|
border-color: #6366f1;
|
|
background: #131325;
|
|
}
|
|
|
|
.alpha-text-search-result.is-active {
|
|
border-color: #a5b4fc;
|
|
background: #1e1b4b;
|
|
box-shadow: inset 0 0 0 1px rgba(199, 210, 254, 0.18);
|
|
}
|
|
|
|
.alpha-text-search-result-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.alpha-text-search-reference {
|
|
color: #eef2ff;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.alpha-text-search-location {
|
|
color: #a5b4fc;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.alpha-text-search-preview {
|
|
margin: 0;
|
|
color: #e4e4e7;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.alpha-text-mark {
|
|
padding: 0 2px;
|
|
border-radius: 4px;
|
|
background: rgba(251, 191, 36, 0.24);
|
|
color: #fef3c7;
|
|
}
|
|
|
|
.alpha-text-mark--lexicon {
|
|
background: rgba(129, 140, 248, 0.28);
|
|
color: #e0e7ff;
|
|
box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.2);
|
|
}
|
|
|
|
.alpha-text-verse {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 12px 0;
|
|
border-top: 1px solid #27272a;
|
|
}
|
|
|
|
.alpha-text-verse.is-highlighted {
|
|
margin: 0 -12px;
|
|
padding: 12px;
|
|
border-radius: 12px;
|
|
border-top-color: transparent;
|
|
background: rgba(67, 56, 202, 0.18);
|
|
box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.22);
|
|
}
|
|
|
|
.alpha-text-verse:first-child {
|
|
border-top: none;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.alpha-text-verse-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.alpha-text-hide-verse-heads .alpha-text-verse-head {
|
|
display: none;
|
|
}
|
|
|
|
.alpha-text-verse-reference {
|
|
color: #c4b5fd;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.alpha-text-verse-counts {
|
|
color: #a1a1aa;
|
|
font-size: 11px;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.alpha-text-verse-text {
|
|
margin: 0;
|
|
color: #e4e4e7;
|
|
font-size: 15px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.alpha-text-verse-text--original {
|
|
color: #f5f3ff;
|
|
font-family: var(--font-script-arabic), "Noto Serif", serif;
|
|
}
|
|
|
|
.alpha-text-verse-text--transliteration {
|
|
color: #cbd5f5;
|
|
font-style: italic;
|
|
}
|
|
|
|
.alpha-text-token-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.alpha-text-token {
|
|
display: grid;
|
|
gap: 3px;
|
|
min-width: 96px;
|
|
padding: 8px 10px;
|
|
border: 1px solid #2f2f39;
|
|
border-radius: 10px;
|
|
background: #0c0c12;
|
|
color: #f4f4f5;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.alpha-text-token--interactive {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.alpha-text-token--interactive:hover {
|
|
background: #141427;
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
.alpha-text-token-gloss {
|
|
color: #f4f4f5;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.alpha-text-token-original {
|
|
color: #c4b5fd;
|
|
font-size: 15px;
|
|
font-family: var(--font-script-display);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.alpha-text-token-strongs {
|
|
color: #a1a1aa;
|
|
font-size: 10px;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.alpha-text-lexicon-term {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.alpha-text-lexicon-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.alpha-text-lexicon-id {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
border: 1px solid #4f46e5;
|
|
border-radius: 999px;
|
|
background: #1e1b4b;
|
|
color: #c7d2fe;
|
|
font-size: 11px;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.alpha-text-lexicon-id--button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.alpha-text-lexicon-id--button:hover {
|
|
background: #312e81;
|
|
border-color: #818cf8;
|
|
color: #e0e7ff;
|
|
}
|
|
|
|
.alpha-text-lexicon-id--button[aria-expanded="true"] {
|
|
background: #312e81;
|
|
border-color: #a5b4fc;
|
|
color: #eef2ff;
|
|
}
|
|
|
|
.alpha-text-lexicon-hint {
|
|
margin: 0;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.alpha-text-lexicon-occurrences {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding-top: 6px;
|
|
border-top: 1px solid #27272a;
|
|
}
|
|
|
|
.alpha-text-lexicon-occurrence-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.alpha-text-lexicon-occurrence {
|
|
display: grid;
|
|
gap: 6px;
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid #2f2f39;
|
|
border-radius: 10px;
|
|
background: #0c0c12;
|
|
color: #f4f4f5;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.alpha-text-lexicon-occurrence:hover {
|
|
background: #141427;
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
.alpha-text-search-preview--compact {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 80;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.68);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.alpha-text-lexicon-popup-card {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: min(720px, calc(100vw - 32px));
|
|
max-height: calc(100vh - 48px);
|
|
overflow: auto;
|
|
padding: 18px;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 16px;
|
|
background: linear-gradient(180deg, rgba(24, 24, 27, 0.98), rgba(9, 9, 11, 0.98));
|
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup-heading {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup-heading h3 {
|
|
margin: 0;
|
|
color: #f4f4f5;
|
|
font-size: 22px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup-subtitle {
|
|
margin: 0;
|
|
color: #a1a1aa;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup-close {
|
|
padding: 8px 12px;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 8px;
|
|
background: #18181b;
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup-close:hover {
|
|
background: #27272a;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup-body {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup-body .alpha-dl {
|
|
margin: 0;
|
|
}
|
|
|
|
.alpha-text-empty {
|
|
color: #a1a1aa;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.alpha-text-meta-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.alpha-text-token {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup {
|
|
padding: 16px;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup-card {
|
|
width: min(100vw - 20px, 100%);
|
|
max-height: calc(100vh - 32px);
|
|
padding: 16px;
|
|
}
|
|
|
|
.alpha-text-lexicon-popup-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
|
|
/* ── 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; }
|
|
|
|
/* ── Audio Notes section ─────────────────────────────────────────────── */
|
|
#audio-notes-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#audio-notes-section[hidden] { display: none; }
|
|
|
|
#audio-circle-section {
|
|
height: calc(100vh - 61px);
|
|
background: #18181b;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
#audio-circle-section[hidden] { display: none; }
|
|
|
|
.audio-circle-layout {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: minmax(340px, 1.1fr) minmax(320px, 0.9fr);
|
|
min-height: 0;
|
|
background: #18181b;
|
|
}
|
|
|
|
.audio-circle-stage-panel {
|
|
display: grid;
|
|
grid-template-rows: auto auto minmax(0, 1fr);
|
|
gap: 0;
|
|
min-height: 0;
|
|
border-right: 1px solid #27272a;
|
|
overflow: auto;
|
|
}
|
|
|
|
.audio-circle-intro {
|
|
padding: 10px 12px 0;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.audio-circle-stage {
|
|
position: relative;
|
|
min-height: 620px;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
background:
|
|
radial-gradient(circle at center, rgba(99, 102, 241, 0.08), transparent 46%),
|
|
linear-gradient(180deg, rgba(15, 15, 23, 0.98), rgba(10, 10, 16, 0.98));
|
|
}
|
|
|
|
.audio-circle-shell {
|
|
position: relative;
|
|
width: min(78vw, 560px);
|
|
height: min(78vw, 560px);
|
|
min-width: 280px;
|
|
min-height: 280px;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
margin: 0 auto;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(99, 102, 241, 0.3);
|
|
background:
|
|
radial-gradient(circle at center, rgba(12, 12, 18, 0.98) 0, rgba(12, 12, 18, 0.98) 24%, rgba(39, 39, 42, 0.24) 24.4%, rgba(39, 39, 42, 0.24) 54%, rgba(15, 15, 23, 0.98) 54.4%, rgba(15, 15, 23, 0.98) 100%);
|
|
box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.08), 0 24px 50px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.audio-circle-center {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 34%;
|
|
height: 34%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(99, 102, 241, 0.24);
|
|
display: grid;
|
|
place-items: center;
|
|
text-align: center;
|
|
padding: 14px;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(180deg, rgba(24, 24, 38, 0.98), rgba(10, 10, 16, 0.98));
|
|
}
|
|
|
|
.audio-circle-center-label {
|
|
color: #f4f4f5;
|
|
font-size: clamp(24px, 4vw, 36px);
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.audio-circle-center-sub {
|
|
color: #a1a1aa;
|
|
font-size: 11px;
|
|
line-height: 1.35;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.audio-circle-key {
|
|
position: absolute;
|
|
width: 88px;
|
|
min-height: 64px;
|
|
padding: 10px 8px;
|
|
border-radius: 16px;
|
|
border: 1px solid #3f3f46;
|
|
background: linear-gradient(180deg, rgba(24, 24, 27, 0.98), rgba(12, 12, 18, 0.98));
|
|
color: #f4f4f5;
|
|
cursor: pointer;
|
|
display: grid;
|
|
gap: 4px;
|
|
justify-items: center;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
|
|
transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
|
|
}
|
|
|
|
.audio-circle-key:hover {
|
|
transform: translate(-50%, -50%) scale(1.03);
|
|
border-color: #818cf8;
|
|
background: linear-gradient(180deg, rgba(49, 46, 129, 0.26), rgba(12, 12, 18, 0.98));
|
|
}
|
|
|
|
.audio-circle-key.is-selected,
|
|
.audio-circle-key[aria-pressed="true"] {
|
|
border-color: #a5b4fc;
|
|
background: linear-gradient(180deg, rgba(67, 56, 202, 0.46), rgba(18, 18, 30, 0.98));
|
|
box-shadow: 0 0 0 1px rgba(165, 180, 252, 0.22), 0 14px 24px rgba(0, 0, 0, 0.34);
|
|
}
|
|
|
|
.audio-circle-key-major {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.audio-circle-key-minor {
|
|
color: #c7d2fe;
|
|
font-size: 11px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.audio-circle-key-meta {
|
|
color: #71717a;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.audio-circle-detail-panel {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 0 14px 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.audio-circle-detail-stack {
|
|
display: grid;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.audio-circle-chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.audio-circle-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid #3f3f46;
|
|
background: #18181b;
|
|
color: #d4d4d8;
|
|
font-size: 11px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.audio-circle-chip--active {
|
|
border-color: #4338ca;
|
|
background: rgba(67, 56, 202, 0.18);
|
|
color: #c7d2fe;
|
|
}
|
|
|
|
.audio-circle-copy {
|
|
color: #d4d4d8;
|
|
font-size: 13px;
|
|
line-height: 1.58;
|
|
}
|
|
|
|
.audio-circle-nav-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.audio-circle-nav-card {
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 10px;
|
|
border: 1px solid #2f2f39;
|
|
border-radius: 10px;
|
|
background: #0c0c12;
|
|
}
|
|
|
|
.audio-circle-nav-label {
|
|
color: #a1a1aa;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.audio-circle-nav-value {
|
|
color: #f4f4f5;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.audio-circle-nav-sub {
|
|
color: #c7d2fe;
|
|
font-size: 11px;
|
|
}
|
|
|
|
@media (max-width: 1040px) {
|
|
.audio-circle-layout {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.audio-circle-stage-panel {
|
|
border-right: 0;
|
|
border-bottom: 1px solid #27272a;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.audio-circle-stage {
|
|
min-height: 500px;
|
|
padding: 18px 12px;
|
|
}
|
|
|
|
.audio-circle-shell {
|
|
width: min(92vw, 420px);
|
|
height: min(92vw, 420px);
|
|
}
|
|
|
|
.audio-circle-key {
|
|
width: 68px;
|
|
min-height: 52px;
|
|
padding: 8px 6px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.audio-circle-key-major {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.audio-circle-key-minor,
|
|
.audio-circle-key-meta {
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
|
|
.audio-note-intro {
|
|
padding: 10px 12px 0;
|
|
color: #a1a1aa;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.audio-note-detail-stack {
|
|
display: grid;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.audio-note-chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.audio-note-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid #3f3f46;
|
|
background: #18181b;
|
|
color: #d4d4d8;
|
|
font-size: 11px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.audio-note-chip--natural {
|
|
border-color: #365314;
|
|
background: rgba(22, 101, 52, 0.16);
|
|
color: #bbf7d0;
|
|
}
|
|
|
|
.audio-note-chip--accidental {
|
|
border-color: #4338ca;
|
|
background: rgba(67, 56, 202, 0.18);
|
|
color: #c7d2fe;
|
|
}
|
|
|
|
.audio-note-copy {
|
|
color: #d4d4d8;
|
|
font-size: 13px;
|
|
line-height: 1.58;
|
|
}
|
|
|
|
.audio-note-formula {
|
|
color: #d4d4d8;
|
|
font-size: 13px;
|
|
line-height: 1.58;
|
|
}
|
|
|
|
.audio-note-playback-copy {
|
|
color: #d4d4d8;
|
|
font-size: 13px;
|
|
line-height: 1.58;
|
|
}
|
|
|
|
.audio-note-playback-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.audio-note-playback-btn {
|
|
min-height: 38px;
|
|
}
|
|
|
|
.audio-note-frequency-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.audio-note-frequency-cell {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 10px;
|
|
border: 1px solid #2f2f39;
|
|
border-radius: 10px;
|
|
background: #0c0c12;
|
|
}
|
|
|
|
.audio-note-frequency-cell--button {
|
|
width: 100%;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.audio-note-frequency-cell--button:hover {
|
|
border-color: #6366f1;
|
|
background: #121224;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.audio-note-frequency-cell--button.is-playing,
|
|
.audio-note-frequency-cell--button[aria-pressed="true"] {
|
|
border-color: #a5b4fc;
|
|
background: linear-gradient(180deg, rgba(49, 46, 129, 0.42), rgba(12, 12, 18, 0.98));
|
|
box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.26);
|
|
}
|
|
|
|
.audio-note-frequency-label {
|
|
color: #a1a1aa;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.audio-note-frequency-value {
|
|
color: #f4f4f5;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.audio-note-frequency-meta {
|
|
color: #71717a;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.audio-note-frequency-status {
|
|
color: #c7d2fe;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.audio-note-frequency-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
.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-field input[type="password"] {
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.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;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.connection-gate {
|
|
padding: 16px;
|
|
}
|
|
.connection-gate-card {
|
|
padding: 18px;
|
|
}
|
|
.connection-gate-title {
|
|
font-size: 24px;
|
|
}
|
|
.connection-gate-actions {
|
|
justify-content: stretch;
|
|
}
|
|
.connection-gate-actions button {
|
|
flex: 1 1 100%;
|
|
}
|
|
}
|
|
#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 {
|
|
--now-square-size: min(85vmin, calc(100vw - 172px), calc(100svh - 92px));
|
|
--now-sky-width: max(calc(var(--now-square-size) * 3.25), calc(100% + 420px));
|
|
--now-sky-height: max(calc(var(--now-square-size) * 2.28), calc(100% + 250px));
|
|
--now-sky-top: 50.5%;
|
|
--now-sky-left: 44%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: calc(100svh - 88px);
|
|
min-height: calc(100svh - 88px);
|
|
padding: 10px clamp(68px, 14vw, 220px);
|
|
background: #090c16;
|
|
border-bottom: 1px solid #27272a;
|
|
display: grid;
|
|
place-items: center;
|
|
isolation: isolate;
|
|
}
|
|
|
|
#now-panel[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
#now-sky-layer {
|
|
position: absolute;
|
|
width: var(--now-sky-width);
|
|
height: var(--now-sky-height);
|
|
top: var(--now-sky-top);
|
|
left: var(--now-sky-left);
|
|
transform: translate(-50%, -50%);
|
|
transform-origin: center center;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
opacity: 1;
|
|
border: none;
|
|
filter: saturate(1.04);
|
|
background-color: #000;
|
|
}
|
|
#now-panel::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(circle at 50% 57%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 22%, rgba(7, 11, 24, 0) 48%),
|
|
radial-gradient(circle at 50% 57%, rgba(6, 10, 22, 0) 0%, rgba(6, 10, 22, 0) 38%, rgba(6, 10, 22, 0.38) 72%, rgba(3, 5, 12, 0.66) 100%);
|
|
}
|
|
#now-panel::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
background: linear-gradient(180deg, rgba(3, 5, 12, 0.34) 0%, rgba(3, 5, 12, 0.08) 20%, rgba(3, 5, 12, 0.18) 100%);
|
|
pointer-events: none;
|
|
}
|
|
#now-panel.is-overlay-hidden::before,
|
|
#now-panel.is-overlay-hidden::after {
|
|
opacity: 0;
|
|
}
|
|
.now-panel-controls {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: clamp(18px, 4vw, 44px);
|
|
z-index: 5;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.now-panel-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.72);
|
|
border-radius: 999px;
|
|
background: rgba(0, 0, 0, 0.82);
|
|
color: #f8fafc;
|
|
font-size: 11px;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.now-panel-toggle input {
|
|
margin: 0;
|
|
accent-color: #ffffff;
|
|
}
|
|
.now-panel-square {
|
|
position: relative;
|
|
z-index: 3;
|
|
box-sizing: border-box;
|
|
width: var(--now-square-size);
|
|
max-width: 780px;
|
|
aspect-ratio: 1;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-template-rows: minmax(0, 1.08fr) minmax(0, 0.92fr);
|
|
gap: clamp(8px, 1.3vmin, 14px);
|
|
padding: clamp(18px, 2.6vmin, 28px) clamp(12px, 1.8vmin, 18px) clamp(14px, 2vmin, 20px);
|
|
border-radius: 28px;
|
|
background: #000000;
|
|
border: 2px solid rgba(255, 255, 255, 0.88);
|
|
box-shadow: none;
|
|
overflow: hidden;
|
|
}
|
|
#now-panel.is-overlay-hidden .now-panel-square {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
@media (max-width: 760px) {
|
|
#now-panel {
|
|
--now-square-size: min(88vw, calc(100svh - 150px), 560px);
|
|
--now-sky-width: max(198vw, calc(100% + 140px));
|
|
--now-sky-height: max(126svh, calc(100% + 120px));
|
|
--now-sky-top: 50.5%;
|
|
--now-sky-left: 46%;
|
|
padding: 12px clamp(12px, 4vw, 24px) 16px;
|
|
}
|
|
|
|
#now-sky-layer {
|
|
filter: saturate(1.02);
|
|
}
|
|
|
|
.now-panel-controls {
|
|
top: 12px;
|
|
right: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
#now-panel {
|
|
--now-square-size: min(90vw, calc(100svh - 158px), 480px);
|
|
--now-sky-width: max(214vw, calc(100% + 96px));
|
|
--now-sky-height: max(132svh, calc(100% + 96px));
|
|
--now-sky-left: 45%;
|
|
}
|
|
}
|
|
.now-section {
|
|
position: relative;
|
|
z-index: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
box-sizing: border-box;
|
|
padding: clamp(8px, 1.3vmin, 12px) clamp(8px, 1.4vmin, 12px) 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
text-align: center;
|
|
border-radius: 0;
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
border: 0;
|
|
box-shadow: none;
|
|
transition: color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
|
|
}
|
|
.now-section::before {
|
|
display: none;
|
|
}
|
|
.now-section > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.now-section-hour {
|
|
grid-area: 1 / 1;
|
|
}
|
|
.now-section-moon {
|
|
grid-area: 1 / 2;
|
|
}
|
|
.now-section-decan {
|
|
grid-area: 1 / 3;
|
|
}
|
|
#now-panel.is-day .now-section {
|
|
color: #f8fafc;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
#now-panel.is-day .now-section::before {
|
|
display: none;
|
|
}
|
|
#now-panel.is-night .now-section {
|
|
color: #f8fafc;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
#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: #f8fafc;
|
|
text-shadow: 0 1px 3px rgba(2, 6, 23, 0.75);
|
|
}
|
|
#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: 2px 0 6px 0;
|
|
width: min(64%, 144px);
|
|
height: auto;
|
|
aspect-ratio: 2 / 3;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
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: 2px;
|
|
width: min(100%, 220px);
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
column-gap: 6px;
|
|
align-items: center;
|
|
color: #cbd5e1;
|
|
font-size: 14px;
|
|
line-height: 1.18;
|
|
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: normal;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
}
|
|
.now-title {
|
|
font-size: 12px;
|
|
color: #cbd5e1;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
line-height: 1.12;
|
|
margin-bottom: 0;
|
|
}
|
|
.now-stats-section {
|
|
position: relative;
|
|
z-index: 1;
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
border-radius: 0;
|
|
padding: clamp(8px, 1.25vmin, 12px) clamp(12px, 1.8vmin, 18px) 0;
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: auto auto auto;
|
|
gap: 4px;
|
|
overflow: auto;
|
|
}
|
|
.now-stats-title {
|
|
font-size: 14px;
|
|
line-height: 1.08;
|
|
color: #e2e8f0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
font-weight: 700;
|
|
}
|
|
.now-stats-sabian {
|
|
font-size: clamp(13px, 1.75vmin, 16px);
|
|
font-weight: 500;
|
|
line-height: 1.42;
|
|
color: #f8fafc;
|
|
white-space: normal;
|
|
overflow: visible;
|
|
max-height: none;
|
|
}
|
|
.now-stats-planets {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 6px 14px;
|
|
font-size: clamp(12px, 1.6vmin, 14px);
|
|
line-height: 1.24;
|
|
color: #e2e8f0;
|
|
align-content: start;
|
|
align-items: start;
|
|
min-height: 0;
|
|
overflow: visible;
|
|
}
|
|
.now-stats-planet {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
align-content: start;
|
|
text-align: left;
|
|
}
|
|
.now-stats-planet-sign {
|
|
font-size: 0.84em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: inherit;
|
|
}
|
|
.now-stats-planet-list {
|
|
display: grid;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
.now-stats-planet-entry {
|
|
white-space: normal;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
overflow-wrap: anywhere;
|
|
line-height: 1.28;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
#now-panel.is-day .now-stats-section {
|
|
background: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
#now-panel.is-day .now-stats-title {
|
|
color: #e2e8f0;
|
|
text-shadow: 0 1px 3px rgba(2, 6, 23, 0.75);
|
|
}
|
|
#now-panel.is-day .now-stats-sabian,
|
|
#now-panel.is-day .now-stats-planets {
|
|
color: #f8fafc;
|
|
text-shadow: 0 1px 3px rgba(2, 6, 23, 0.75);
|
|
}
|
|
#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: clamp(16px, 2.4vmin, 24px);
|
|
font-weight: 600;
|
|
line-height: 1.15;
|
|
}
|
|
.now-primary-hour {
|
|
color: #a855f7;
|
|
}
|
|
.now-primary-moon {
|
|
color: #fbbf24;
|
|
}
|
|
.now-primary-decan {
|
|
color: #f97316;
|
|
}
|
|
.now-tarot {
|
|
font-size: clamp(12px, 1.7vmin, 16px);
|
|
color: #d4d4d8;
|
|
line-height: 1.12;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.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-layout.toastui-calendar-week-view {
|
|
height: 100% !important;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: 52px minmax(0, 1fr);
|
|
}
|
|
|
|
.toastui-calendar-layout.toastui-calendar-week-view > .toastui-calendar-panel.toastui-calendar-allday,
|
|
.toastui-calendar-layout.toastui-calendar-week-view > :has(> .toastui-calendar-panel-resizer) {
|
|
display: none !important;
|
|
}
|
|
|
|
.toastui-calendar-allday-panel,
|
|
.toastui-calendar-panel.toastui-calendar-allday,
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-title,
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid-wrapper,
|
|
.toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-allday-events {
|
|
display: none !important;
|
|
}
|
|
|
|
.toastui-calendar-layout.toastui-calendar-week-view > .toastui-calendar-panel.toastui-calendar-time {
|
|
grid-row: 2;
|
|
height: auto !important;
|
|
min-height: 0;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.toastui-calendar-timegrid,
|
|
.toastui-calendar-timegrid-scroll-area {
|
|
height: 100% !important;
|
|
min-height: 0 !important;
|
|
}
|
|
|
|
.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) {
|
|
#now-panel {
|
|
--now-square-size: min(calc(100vw - 110px), calc(100svh - 94px));
|
|
padding: 8px clamp(30px, 8vw, 82px);
|
|
}
|
|
.now-panel-square {
|
|
border-radius: 22px;
|
|
}
|
|
.now-card {
|
|
width: min(64%, 122px);
|
|
}
|
|
.now-stats-planets {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.planet-layout,
|
|
.tarot-layout {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: minmax(220px, 42svh) minmax(0, 1fr);
|
|
}
|
|
.planet-layout.alpha-text-global-search-only {
|
|
grid-template-rows: minmax(0, 1fr);
|
|
}
|
|
.planet-layout.layout-sidebar-collapsed,
|
|
.planet-layout.layout-detail-collapsed,
|
|
.tarot-layout.layout-sidebar-collapsed,
|
|
.tarot-layout.layout-detail-collapsed {
|
|
grid-template-rows: minmax(0, 1fr);
|
|
}
|
|
.kab-layout {
|
|
grid-template-rows: minmax(220px, 42svh) minmax(0, 1fr);
|
|
}
|
|
.planet-list-panel,
|
|
.tarot-list-panel {
|
|
border-right: none;
|
|
border-bottom: 1px solid #27272a;
|
|
max-height: min(42svh, 420px);
|
|
}
|
|
.layout-detail-collapsed > .planet-list-panel,
|
|
.layout-detail-collapsed > .tarot-list-panel,
|
|
.layout-detail-collapsed > .kab-tree-panel,
|
|
.layout-sidebar-collapsed > .planet-detail-panel,
|
|
.layout-sidebar-collapsed > .tarot-detail-panel,
|
|
.layout-sidebar-collapsed > .kab-detail-panel {
|
|
height: 100%;
|
|
max-height: none;
|
|
min-height: 0;
|
|
border-bottom: none;
|
|
}
|
|
.planet-list-item,
|
|
.tarot-list-item {
|
|
min-height: 48px;
|
|
padding: 10px 12px;
|
|
}
|
|
.planet-card-list,
|
|
.tarot-card-list {
|
|
padding-bottom: 18px;
|
|
}
|
|
.planet-detail-panel,
|
|
.tarot-detail-panel,
|
|
.kab-detail-panel {
|
|
padding: 14px 14px calc(84px + env(safe-area-inset-bottom, 0px));
|
|
gap: 14px;
|
|
}
|
|
.sidebar-toggle-inline,
|
|
.detail-toggle-inline {
|
|
min-height: 38px;
|
|
padding: 8px 10px;
|
|
}
|
|
.detail-popout-open {
|
|
position: fixed;
|
|
top: auto;
|
|
bottom: calc(14px + env(safe-area-inset-bottom, 0px));
|
|
z-index: 35;
|
|
min-height: 42px;
|
|
padding: 10px 14px;
|
|
border-radius: 999px;
|
|
font-size: 13px;
|
|
line-height: 1.2;
|
|
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.36);
|
|
background: rgba(24, 24, 27, 0.96);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.detail-popout-open {
|
|
left: 14px;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
#now-panel {
|
|
--now-square-size: min(calc(100vw - 74px), calc(100svh - 90px));
|
|
padding: 6px clamp(20px, 6vw, 44px);
|
|
}
|
|
.now-panel-square {
|
|
gap: 6px;
|
|
padding: 6px;
|
|
}
|
|
.now-section {
|
|
padding: 7px;
|
|
}
|
|
.now-card {
|
|
width: min(60%, 96px);
|
|
}
|
|
.now-primary {
|
|
font-size: clamp(12px, 3vw, 16px);
|
|
}
|
|
.now-countdown-row {
|
|
width: 100%;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 2px;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
}
|
|
.now-countdown-value,
|
|
.now-countdown-next {
|
|
text-align: center;
|
|
}
|
|
.now-stats-planets {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 5px 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
#now-panel {
|
|
--now-square-size: min(calc(100vw - 46px), calc(100svh - 86px));
|
|
}
|
|
.now-panel-square {
|
|
border-radius: 18px;
|
|
}
|
|
.now-section,
|
|
.now-stats-section {
|
|
border-radius: 16px;
|
|
padding: 7px;
|
|
}
|
|
.now-title,
|
|
.now-stats-title {
|
|
font-size: 9px;
|
|
}
|
|
.now-tarot,
|
|
.now-stats-sabian,
|
|
.now-stats-planets {
|
|
font-size: 10px;
|
|
}
|
|
.now-stats-planets {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 4px 8px;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 520px) {
|
|
#now-panel {
|
|
--now-square-size: min(76vmin, calc(100vw - 78px), calc(100svh - 108px));
|
|
height: calc(100svh - 101px);
|
|
min-height: calc(100svh - 101px);
|
|
padding: 6px clamp(28px, 9vw, 72px);
|
|
}
|
|
.now-panel-square {
|
|
grid-template-rows: minmax(0, 0.92fr) minmax(0, 1.08fr);
|
|
gap: 6px;
|
|
padding: 16px 6px 8px;
|
|
border-radius: 18px;
|
|
}
|
|
.now-section,
|
|
.now-stats-section {
|
|
border-radius: 16px;
|
|
padding: 6px;
|
|
}
|
|
.now-card {
|
|
width: min(66%, 92px);
|
|
margin-bottom: 6px;
|
|
}
|
|
.now-title {
|
|
font-size: 8px;
|
|
}
|
|
.now-primary {
|
|
font-size: 15px;
|
|
}
|
|
.now-stats-title {
|
|
font-size: 11px;
|
|
}
|
|
.now-stats-sabian {
|
|
font-size: 11px;
|
|
line-height: 1.42;
|
|
}
|
|
.now-stats-planets {
|
|
font-size: 11px;
|
|
line-height: 1.42;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.now-tarot,
|
|
.now-countdown-row {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#calendar {
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|