/* Fonts: Montserrat (local) + Noto Serif (Google Fonts fallback to Georgia) */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,300;0,400;1,300;1,400&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } :root { /* ── Brand tokens: Path to Purpose ── */ --teal: #00BECC; --teal-dim: #008F9A; --teal-border: rgba(0,190,204,0.28); --gold: #c99500; --gold-dim: #9e7600; --green: #8EDA45; --orange: #C05A3A; --bg: #0A0E14; /* right fill / main background */ --sidebar: #14171A; /* left sidebar color */ --surface: #14171A; /* card surfaces */ --surface2: #1C2128; /* elevated surfaces */ --outline: #252A31; /* grey outline */ --text: #F0F0F0; /* primary text */ --muted: #6C7177; /* grey text */ --muted-light: #9BA3AB; /* mid grey */ --max-w: 680px; --card-w: 480px; /* theme-switching helpers */ --teal-rgb: 0,190,204; --pulse-color: var(--teal); --pulse-rgb: var(--teal-rgb); --btn-text: #0A0E14; --teal-hover: #1ACFDC; --gold-hover: #d4a000; --color-scheme: dark; --tok-bg: rgba(0,0,0,0.4); --tok-chip-bg: rgba(18,30,34,0.82); --tok-chip-border:rgba(255,255,255,0.10); --tok-chip-text: #E8E0D0; --surface-warm: #14171A; /* warm amber panel bg — reading/card back (dark: matches surface) */ } /* ── Warm theme — earthy parchment, terracotta, amber; matches the card art ── */ [data-theme="warm"] { --teal-rgb: 176,73,46; --teal: #B0492E; --teal-dim: #7A3020; --teal-border: rgba(176,73,46,0.25); --teal-hover: #C25A38; --gold: #B5883D; --gold-dim: #8E6A30; --gold-hover: #C9A24E; --green: #586863; --orange: #B0492E; --bg: #F2EBD9; --sidebar: #E7DBC0; --surface: #E7DBC0; --surface2: #DDD0B2; --surface-warm: #F2EBD9; --outline: #C9B89A; --text: #36281B; --muted: #4C4538; --muted-light: #586863; --btn-text: #ffffff; --color-scheme: light; --tok-bg: rgba(250,244,232,0.4); --tok-chip-bg: rgba(242,235,217,0.88); --tok-chip-border:rgba(0,0,0,0.08); --tok-chip-text:#36281B; } /* ── Brand (light) theme — toggled via data-theme="brand" on ── */ [data-theme="brand"] { --teal: #00BBC9; --teal-dim: #288C93; --teal-border: rgba(0,187,201,0.25); --teal-rgb: 0,187,201; --teal-hover: #1ACEDA; --gold: #c99500; --gold-dim: #9e7600; --gold-hover: #d4a000; --green: #6dbf2a; --bg: #F8F8F8; --sidebar: #ffffff; --surface: #ffffff; --surface2: #f0f0f2; --surface-warm: #f0f0f2; --outline: #e8e8ea; --text: #2B2B2B; --muted: #7F858A; --muted-light: #555555; --btn-text: #ffffff; --color-scheme: light; --tok-bg: rgba(255,255,255,0.75); --tok-chip-bg: rgba(240,240,242,0.92); --tok-chip-border:rgba(0,0,0,0.10); --tok-chip-text: #2B2B2B; } html, body { background: var(--bg); color: var(--text); font-family: 'Montserrat', system-ui, -apple-system, sans-serif; min-height: 100vh; min-height: 100svh; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ─── RESPONSIVE SHELL ─── */ /* Mobile: single column, full width Desktop (≥700px): centered column, max-width constrained */ .app { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; background: var(--bg); } .screen { display: none; flex-direction: column; width: 100%; align-items: center; } .screen.active { display: flex; } /* inner content wrapper — constrains width on desktop */ .inner { width: 100%; max-width: var(--max-w); padding: 0 20px; } .inner-narrow { width: 100%; max-width: var(--card-w); padding: 0 24px; } /* ─── HEADER ─── */ .hdr { position: -webkit-sticky; position: sticky; top: 0; z-index: 100; width: 100%; padding: 12px 24px 11px; display: flex; align-items: center; justify-content: center; gap: 10px; border-bottom: 1px solid var(--outline); flex-shrink: 0; background: var(--bg); } .brand-logo { height: 60px; width: auto; display: block; max-width: 260px; } .hdr .brand-logo { cursor: pointer; } .hdr-new-btn { position: absolute; right: 24px; background: transparent; color: var(--muted); border: 1px solid var(--teal-border); border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 7px 14px; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .hdr-new-btn:hover { color: var(--teal); border-color: var(--teal); } /* When grouped with the share button, cancel absolute positioning */ .hdr-actions { position: absolute; right: 24px; display: flex; gap: 8px; align-items: center; } .hdr-actions .hdr-new-btn { position: static; } .hdr-share-btn { background: var(--teal); color: #fff; border: none; border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 7px 14px; cursor: pointer; transition: opacity 0.15s; } .hdr-share-btn:hover { opacity: 0.85; } @media (max-width: 699px) { .hdr-new-btn { font-size: 16px; padding: 4px 10px; letter-spacing: 0; text-transform: none; overflow: hidden; color: var(--teal); } .hdr-new-btn::before { content: '↺'; } .hdr-new-btn > * { display: none; } /* hide the text node — use font-size:0 trick on the button, reset on ::before */ .hdr-new-btn { font-size: 0; } .hdr-new-btn::before { font-size: 18px; display: block; line-height: 1; } .hdr-share-btn { font-size: 0; padding: 4px 10px; } .hdr-share-btn::before { content: '↑'; font-size: 18px; display: block; line-height: 1; } } .logo-ring { width: 27px; height: 27px; border: 2px solid var(--teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .logo-ring::before { content: ''; width: 9px; height: 9px; border: 1.5px solid var(--teal); border-radius: 50%; } .logo-txt { font-family: 'Noto', serif; font-size: 22px; font-weight: 300; letter-spacing: 0.08em; color: var(--text); } /* ─── SCREEN SCROLL MODEL ─── The shell is fixed at 100svh; .ns-content is the scroll container. Input / result / guided screens are their own scrollers; the reveal screen grows and lets .ns-content scroll. */ #s-input, #s-result { height: 100%; min-height: 0; overflow-y: auto; } #s-guided { height: 100%; min-height: 0; overflow: hidden; } #s-reveal { min-height: 100%; } /* ─── SCREEN 1: INPUT ─── */ .input-center { display: flex; flex-direction: column; align-items: center; margin: auto; padding: 40px 24px 140px; width: 100%; max-width: var(--card-w); } .glyph-ring { width: 108px; height: 108px; border: 1px solid var(--outline); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 30px; animation: slowspin 20s linear infinite; } @keyframes slowspin { to { transform: rotate(360deg); } } .glyph-ring::before { content: ''; position: absolute; width: 78px; height: 78px; border: 0.5px solid rgba(var(--teal-rgb),0.18); border-radius: 50%; } .glyph-inner { width: 48px; height: 48px; border: 1px solid var(--teal-dim); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 19px; color: var(--teal); animation: slowspin 20s linear infinite reverse; } .eyebrow { font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 0.22em; color: var(--teal-dim); text-transform: uppercase; text-align: center; margin-bottom: 9px; } .headline { font-family: 'Noto Serif', Georgia, serif; font-size: 34px; font-weight: 300; color: var(--text); text-align: center; line-height: 1.15; margin-bottom: 10px; } /* Phones: scale the headline so "Your destiny was written / the day you arrived." holds to its two intended lines (34px wrapped to three at 375px). */ @media (max-width: 699px) { .headline { font-size: clamp(24px, 7.2vw, 30px); white-space: nowrap; } } .subtext { font-size: 14px; color: var(--muted); text-align: center; line-height: 1.7; margin: 0 0 34px; max-width: 480px; } /* Landing logomark — centered above the headline */ .landing-logo { height: 72px; width: auto; max-width: 280px; display: block; margin: 0 auto 8px; } @media (max-width: 699px) { .landing-logo { height: 58px; margin-bottom: 6px; } } .field-label { font-size: 10px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; margin-bottom: 7px; display: block; } .field-input { width: 100%; background: var(--surface2); border: 1px solid var(--outline); border-radius: 6px; color: var(--text); font-size: 16px; font-family: 'Montserrat', sans-serif; padding: 13px 15px; outline: none; -webkit-appearance: none; color-scheme: var(--color-scheme); transition: border-color 0.15s; } .field-input:focus { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(var(--teal-rgb),0.15); } .field-input.err { border-color: var(--orange); } .primary-btn { width: 100%; background: var(--teal); color: var(--btn-text); border: none; border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; padding: 15px; cursor: pointer; transition: background 0.15s, transform 0.1s; margin-top: 14px; } .primary-btn:hover { background: var(--teal-hover); } .primary-btn:active { transform: scale(0.98); } /* Landing: date field + Reveal button side by side on wider screens so the desktop calendar popover (which opens downward, ~300px) never covers the button. Phones stack them — their picker is a bottom sheet, no overlap. */ .dob-row { display: flex; gap: 10px; align-items: stretch; width: 100%; } .dob-row .field-input { flex: 1 1 0; min-width: 0; } .dob-row .dob-submit { flex: 0 0 auto; width: auto; margin-top: 0; padding: 15px 22px; white-space: nowrap; } @media (max-width: 699px) { .dob-row { flex-direction: column; } .dob-row .dob-submit { width: 100%; margin-top: 4px; } } .privacy { margin-top: 14px; font-size: 11px; color: var(--muted); text-align: center; line-height: 1.65; } /* ─── SCREEN 2: CARD REVEAL ─── */ #s-reveal { justify-content: flex-start; } .reveal-center { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; flex-wrap: wrap; /* Bottom padding clears the floating footer pill so the last of the reading can always scroll out from under it. */ padding: 24px 44px 120px; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 auto; gap: 0; transition: gap 0.65s cubic-bezier(0.4,0,0.2,1); } .reveal-center.split { gap: 40px; } .reveal-card-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 316px; max-width: 100%; } /* Right panels wrapper — slides in as one unit on split; flexes 380–600px so it sits beside the card whenever there is room and wraps below it only on genuinely narrow screens. */ .reveal-right-col { display: grid; grid-template: 1fr / 1fr; /* explicit single cell — Safari needs this for overlap to work */ flex: 1 1 380px; min-width: 0; max-width: 0; overflow: hidden; transition: max-width 0.65s cubic-bezier(0.4,0,0.2,1); } .reveal-center.split .reveal-right-col { max-width: 600px; overflow: visible; } /* Both panels occupy the same grid cell — only opacity/transform distinguishes them */ .reveal-text-panel, .reveal-info-col { grid-row: 1; grid-column: 1; width: 100%; min-width: 0; } /* Panel 1: fades in on split, fades out on show-info */ .reveal-text-panel { opacity: 0; transition: opacity 0.55s ease 0.35s; } .reveal-center.split .reveal-text-panel { opacity: 1; } .reveal-center.show-info .reveal-text-panel { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } /* Panel 2: slides in from right on show-info */ .reveal-info-col { display: flex; flex-direction: column; opacity: 0; transform: translateX(56px); pointer-events: none; transition: opacity 0.35s ease 0.04s, transform 0.42s cubic-bezier(0.22,1,0.36,1) 0.04s; } .reveal-center.show-info .reveal-info-col { opacity: 1; transform: translateX(0); pointer-events: auto; } /* "Next" button on panel 1 */ .reveal-next-btn { margin-top: 20px; background: var(--teal); color: #fff; border: none; border-radius: 6px; padding: 11px 28px; font-size: 14px; font-weight: 600; font-family: 'Montserrat', sans-serif; cursor: pointer; letter-spacing: 0.04em; opacity: 0; visibility: hidden; transition: background 0.15s, opacity 0.5s, visibility 0s 0.5s; } .reveal-next-btn.vis { opacity: 1; visibility: visible; transition: background 0.15s, opacity 0.5s, visibility 0s; } .reveal-next-btn:hover { background: var(--teal-dim); } /* Back / Share action row — bottom of info col */ .reveal-action-row { display: flex; gap: 12px; margin-top: 20px; margin-bottom: 23px; } .reveal-action-btn { flex: 1; padding: 11px 0; font-size: 14px; font-weight: 600; font-family: 'Montserrat', sans-serif; letter-spacing: 0.04em; background: var(--teal); color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background 0.15s; } .reveal-action-btn:hover { background: var(--teal-dim); } /* ─── EMAIL GATE MODAL ─── Unlocks Destiny Map / Share / Download; asks once, subscribes via Mailchimp (submitEmail). See ensureEmail() in index.html. */ .email-modal { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: 20px; } .email-modal.open { display: flex; animation: lbFadeIn 0.18s ease; } .email-modal-backdrop { position: absolute; inset: 0; background: rgba(20,23,26,0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .email-modal-card { position: relative; width: min(460px, 92vw); background: var(--surface); border: 1px solid var(--outline); border-top: 3px solid var(--teal); border-radius: 14px; padding: 28px 30px 22px; box-shadow: 0 24px 70px rgba(20,23,26,0.35); display: flex; flex-direction: column; } .email-modal-close { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 8px; border: none; background: var(--surface2); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; } .email-modal-close:hover { color: var(--teal); } .email-modal-title { font-family: 'Noto Serif', Georgia, serif; font-size: 22px; color: var(--text); margin: 0 0 10px; line-height: 1.25; padding-right: 30px; } .email-modal-body { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; } .email-modal-card .privacy { margin-top: 12px; } /* Hamburger hint — shown only when the journey pane is off-canvas */ .email-modal-hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(var(--teal-rgb), 0.07); border: 0.5px solid var(--teal-border); font-size: 12px; line-height: 1.5; color: var(--text); } .email-modal-hint svg { flex-shrink: 0; margin-top: 2px; color: var(--teal); } /* ══════════════════════════════════════════════════════════════ NAV SHELL — left journey pane + top header Wraps the .screen divs as persistent chrome. ══════════════════════════════════════════════════════════════ */ .ns-shell { --ns-rail: 292px; --ns-drawer: 272px; --ns-header-h: 66px; display: flex; flex-direction: column; /* The window never scrolls — .ns-content and the slides are the only scroll containers. */ height: 100vh; height: 100svh; min-height: 0; overflow: hidden; background: var(--bg); /* .app is a centered flex column — force the shell to span edge-to-edge. */ width: 100%; align-self: stretch; } /* .app's own vertical padding / centering shouldn't apply once the shell owns the viewport. */ .app:has(.ns-shell) { padding: 0; align-items: stretch; } /* ── Header ─────────────────────────────────────────────────── */ .ns-header { height: var(--ns-header-h); flex-shrink: 0; display: flex; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--outline); position: sticky; top: 0; z-index: 100; } .ns-brand { width: var(--ns-rail); flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-right: 1px solid var(--outline); box-sizing: border-box; } /* Burger is always visible — it toggles the journey pane. */ .ns-burger { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--outline); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; flex-shrink: 0; transition: color .15s, border-color .15s; } .ns-burger:hover { color: var(--teal); border-color: var(--teal); } .ns-mark { width: 158px; height: 44px; overflow: hidden; display: block; flex-shrink: 0; } .ns-mark img { display: block; height: 100%; width: auto; max-width: none; } .ns-mark--glyph { width: 38px; height: 38px; } .ns-title { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 24px; } .ns-crumb { font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); opacity: .8; } .ns-page { font-family: 'Noto Serif', Georgia, serif; font-size: 21px; font-weight: 400; color: var(--text, var(--fg)); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Landing page (no sign yet): no journey pane, no burger, no step title — just the logo header and the birthdate form. The pane appears once a Birth Sign is revealed. */ .ns-shell[data-pane="none"] .ns-pane, .ns-shell[data-pane="none"] .ns-scrim, .ns-shell[data-pane="none"] .ns-title, .ns-shell[data-pane="none"] .ns-burger { display: none; } .ns-shell[data-pane="none"] .ns-brand { border-right: none; width: auto; } .ns-actions { display: flex; align-items: center; gap: 9px; padding: 0 22px 0 12px; } .ns-shell[data-pane="none"] .ns-gated { display: none; } /* No reset needed on the landing page — there's nothing to reset yet. */ .ns-shell[data-pane="none"] .ns-btn-reset { display: none; } .ns-btn-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--outline); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; } .ns-btn-icon:hover { color: var(--teal); border-color: var(--teal); } .ns-btn-icon.is-on { color: var(--teal); border-color: var(--teal); } .ns-btn-share { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border: none; border-radius: 8px; background: linear-gradient(90deg, var(--teal), var(--green, #6dbf2a)); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: opacity .15s; } .ns-btn-share:hover { opacity: .9; } .ns-divider { width: 1px; height: 24px; background: var(--outline); margin: 0 2px; } .ns-avatar-btn { display: flex; align-items: center; gap: 9px; border: none; background: none; padding: 0; cursor: pointer; } .ns-avatar { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--teal) 12%, var(--surface)); border: 1px solid var(--teal-border, rgba(0,187,201,.25)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--teal-dim, #288C93); } /* ── Body ───────────────────────────────────────────────────── */ .ns-body { flex: 1; min-height: 0; display: flex; } .ns-content { flex: 1; min-width: 0; overflow-y: auto; background: var(--bg); } .ns-pane { width: var(--ns-rail); flex-shrink: 0; display: flex; flex-direction: column; padding: 16px 12px; background: var(--surface); border-right: 1px solid var(--outline); overflow-y: auto; } /* Desktop: open = docked in the layout; closed = slides off-canvas and the content column takes the full width. */ @media (min-width: 900px) { .ns-pane { transition: margin-left .28s cubic-bezier(.4, 0, .2, 1); } .ns-shell[data-drawer="closed"] .ns-pane { margin-left: calc(0px - var(--ns-rail)); } } .ns-pane-head, .ns-scrim { display: none; } .ns-pane-foot { margin-top: auto; padding: 16px 22px 14px; border-top: 1px solid #f0f0f2; font-size: 10px; letter-spacing: .04em; color: #B0B5BA; } /* ── Journey steps ──────────────────────────────────────────── */ .ns-step { display: flex; align-items: flex-start; gap: 14px; padding: 8px 10px 10px; border: none; background: none; width: 100%; text-align: left; border-radius: 10px; font-family: inherit; cursor: pointer; transition: background .15s; } .ns-step:hover:not([aria-disabled="true"]) { background: var(--surface2); } .ns-step[aria-current="step"] { background: rgba(201,149,0,.07); } .ns-step[aria-disabled="true"] { cursor: not-allowed; } /* Email-gate lock: locked but actionable — clicking opens the signup modal. Styled like a live row (normal text, teal lock) so it invites the click. */ .ns-step[data-clickable="true"] { cursor: pointer; } .ns-step[data-state="locked"][data-clickable="true"] .ns-step-label { color: var(--text, var(--fg)); } .ns-step[data-state="locked"][data-clickable="true"] .ns-step-caption { color: #9AA0A6; } .ns-step[data-state="locked"][data-clickable="true"] .ns-node { color: var(--muted); border-color: #E2E2E6; } .ns-step[data-state="locked"][data-clickable="true"] .ns-step-lock { stroke: var(--muted); } .ns-step[data-clickable="true"]:hover { background: rgba(var(--teal-rgb), 0.07); } .ns-node-wrap { position: relative; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .ns-node { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; font-size: 12px; font-weight: 700; background: var(--surface); color: var(--muted); border: 2px solid #E2E2E6; transition: all .15s; } .ns-step[data-state="done"] .ns-node { background: var(--teal); color: #fff; border-color: var(--teal); } .ns-step[data-state="active"] .ns-node { background: var(--gold); color: #fff; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,149,0,.14); } .ns-step[data-state="locked"] .ns-node { color: #C9CDD1; border-color: #EDEDF0; } .ns-line { position: absolute; top: 30px; width: 2px; height: 34px; background: #EDEDF0; } .ns-step[data-state="done"] .ns-line { background: rgba(var(--teal-rgb), 0.35); } .ns-step[data-subs-open="true"] .ns-line { height: 18px; } .ns-step-body { flex: 1; min-width: 0; padding-bottom: 2px; } .ns-step-label { display: block; font-size: 16px; line-height: 1.3; color: var(--text, var(--fg)); } .ns-step[data-state="active"] .ns-step-label { color: var(--gold); font-weight: 600; } .ns-step[data-state="locked"] .ns-step-label { color: #B9BDC1; } .ns-step-caption { display: block; font-size: 11px; color: #9AA0A6; margin-top: 3px; } .ns-step-locknote { display: block; font-size: 10.5px; font-style: italic; color: #C2C6CA; margin-top: 3px; line-height: 1.3; } .ns-step-lock { flex-shrink: 0; margin-top: 4px; stroke: #C9CDD1; } /* ── Cross sub-sections ─────────────────────────────────────── */ /* Indented 44px so the sub-rows hang to the right of the step's node column (per the Maya Cross flow design handoff). */ .ns-subs { display: flex; flex-direction: column; margin: -2px 0 6px 44px; } .ns-sub { display: flex; align-items: center; padding-right: 10px; border: none; background: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; } .ns-sub[aria-disabled="true"] { cursor: not-allowed; } .ns-sub-rail { width: 30px; flex-shrink: 0; align-self: stretch; position: relative; display: flex; justify-content: center; } .ns-sub-rail::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1.5px; background: #E6E6EA; } .ns-dot { position: relative; z-index: 1; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); border: 1.5px solid #DCDCE0; } .ns-sub[data-state="visited"] .ns-dot { width: 7px; height: 7px; background: var(--teal); border-color: var(--teal); } .ns-sub[data-state="active"] .ns-dot { width: 9px; height: 9px; background: var(--gold); border-color: var(--gold); } .ns-sub[data-state="locked"] .ns-dot { width: 6px; height: 6px; border-color: #EDEDF0; } .ns-sub-label { flex: 1; min-width: 0; font-size: 13px; padding: 7px 10px 7px 4px; color: var(--muted); } .ns-sub[data-state="active"] .ns-sub-label { color: var(--gold); font-weight: 600; } .ns-sub[data-state="locked"] .ns-sub-label { color: #C9CDD1; } .ns-sub-lock { flex-shrink: 0; stroke: #D2D6DA; } /* ── Mobile ─────────────────────────────────────────────────── */ @media (max-width: 899px) { .ns-shell { --ns-header-h: 56px; } .ns-header { padding: 0 14px; gap: 12px; position: relative; } .ns-brand { width: auto; padding: 0; border-right: none; gap: 2px; } .ns-mark { width: 30px; height: 30px; } .ns-burger { width: 44px; height: 44px; border: none; border-radius: 10px; background: none; color: var(--text, var(--fg)); } .ns-burger:hover { background: var(--surface2); } /* Title flows between the logo and the action buttons (no overlap), wrapping onto two lines when long. */ .ns-title { position: static; transform: none; flex: 1; min-width: 0; max-width: none; padding: 0 8px; text-align: left; pointer-events: none; } .ns-crumb { display: none; } .ns-page { font-size: 13.5px; white-space: normal; line-height: 1.2; } /* Actions (share / download / refresh) pin to the right edge. */ .ns-actions { padding: 0; margin-left: auto; gap: 7px; } .ns-divider, .ns-avatar-btn { display: none; } .ns-btn-icon { width: 36px; height: 36px; } /* Share collapses to an icon-only button so all three fit at 375px. */ .ns-btn-share { width: 36px; height: 36px; padding: 0; justify-content: center; gap: 0; font-size: 0; border-radius: 8px; } .ns-btn-share svg { width: 16px; height: 16px; } .ns-pane { position: fixed; top: 0; bottom: 0; left: 0; width: var(--ns-drawer); z-index: 200; padding: 0; transform: translateX(-100%); box-shadow: 0 0 30px rgba(0,0,0,.18); transition: transform .28s cubic-bezier(.4, 0, .2, 1); } .ns-shell[data-drawer="open"] .ns-pane { transform: translateX(0); } .ns-pane-head { display: flex; align-items: center; justify-content: space-between; height: 56px; flex-shrink: 0; padding: 0 14px 0 18px; border-bottom: 1px solid var(--outline); } .ns-pane-head .ns-mark { width: 136px; height: 38px; } .ns-pane-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: none; background: var(--surface2); color: var(--muted); font-size: 15px; cursor: pointer; } .ns-pane-list { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px; } .ns-pane-foot { margin-top: 0; flex-shrink: 0; padding: 14px 18px 16px; } .ns-scrim { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(20,23,26,.38); opacity: 0; pointer-events: none; transition: opacity .28s; } .ns-shell[data-drawer="open"] .ns-scrim { opacity: 1; pointer-events: auto; } } @media (min-width: 900px) { .ns-pane-list { display: contents; } } /* Hide the old per-screen .hdr divs — the shell header replaces them. */ .ns-shell .screen .hdr { display: none; } /* Toast — inline message that pops in when the user tries to jump ahead through the pane before unlocking a step. Auto-hides after 4.5s. */ .ns-toast { position: fixed; top: calc(var(--ns-header-h) + 14px); left: 50%; transform: translateX(-50%) translateY(-12px); z-index: 300; display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: rgba(24,26,30,0.95); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; border-radius: 8px; box-shadow: 0 8px 26px rgba(0,0,0,0.22); max-width: min(460px, calc(100vw - 32px)); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .ns-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .ns-toast svg { flex-shrink: 0; color: var(--teal); } /* Theme toggle hidden for now — user asked to remove it from the header. */ #ns-btn-theme { display: none; } /* Download dims until the Full Analysis is unlocked; clicking explains why. */ .ns-btn-dl[aria-disabled="true"] { opacity: .45; } .ns-btn-dl[aria-disabled="true"]:hover { color: var(--muted); border-color: var(--outline); } /* ── PDF toast — bottom-center pill while the Analysis PDF builds ── */ .ns-pdf-toast { position: fixed; left: 50%; bottom: 104px; transform: translateX(-50%) translateY(8px); z-index: 300; display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; background: #1d2b2b; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.22); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .ns-pdf-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .ns-pdf-spinner { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.32); border-top-color: #fff; animation: ns-pdf-spin .7s linear infinite; } @keyframes ns-pdf-spin { to { transform: rotate(360deg); } } /* Full reading in the reveal panel — fades in with the reading text */ #reveal-info-reading { opacity: 0; transition: opacity 0.6s ease 0.1s; } #reveal-info-reading.vis { opacity: 1; } /* Compact type — this panel now carries facets + tone + career blocks. */ #reveal-info-reading.result-reading .rr-facet { margin-bottom: 6px; font-size: 12.5px; line-height: 1.65; } /* Mobile: revert to vertical stack, no split animation */ @media (max-width: 699px) { .reveal-center { flex-direction: column; align-items: center; max-width: var(--card-w); gap: 0 !important; transition: none; } /* Dissolve the card col box so its children (label, card) join the reveal-center flex flow directly */ .reveal-card-col { display: contents; } .reveal-right-col { width: 100% !important; max-width: 100% !important; overflow: visible !important; transition: none !important; } .reveal-text-panel { opacity: 1 !important; transition: none !important; } .reveal-info-col { transition: none !important; transform: none !important; } .reveal-center.show-info .reveal-text-panel { display: none; } .reveal-center.show-info .reveal-info-col { opacity: 1; } } /* Desktop: left-align text inside the panels */ @media (min-width: 700px) { .reveal-text-panel { padding-top: 48px; } .reveal-text-panel .reveal-sign-name { text-align: left; margin-top: 0; } .reveal-text-panel .reveal-pron { text-align: left; } .reveal-text-panel .reveal-essence { text-align: left; } .reveal-text-panel .reveal-reading { max-width: none; margin: 12px 0 0; text-align: left; } .reveal-info-col { padding-top: 48px; } } .reveal-label { font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 0.22em; color: var(--teal-dim); text-transform: uppercase; margin-bottom: 28px; opacity: 0; max-height: 3em; overflow: hidden; transition: opacity 0.6s, max-height 0.5s ease, margin-bottom 0.5s ease; } .reveal-label.vis { opacity: 1; } /* Once the card is revealed the label collapses out of the flow entirely, so the card and the reading move up into its space. Declared after .vis so it wins when both classes are briefly present. */ .reveal-label.gone { opacity: 0; max-height: 0; margin-bottom: 0; } .card-scene { -webkit-perspective: 1000px; perspective: 1000px; width: 0; height: 0; transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1), height 0.6s cubic-bezier(0.34,1.56,0.64,1); margin-bottom: 26px; flex-shrink: 0; position: relative; } .card-scene.grown { width: 316px; height: 566px; } .card-3d { width: 100%; height: 100%; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.45,0.05,0.55,0.95); } .card-3d.flipped { transform: rotateY(180deg); } /* Energy border SVG — sits over the card, pointer-events none. Explicit width/height + preserveAspectRatio="none" (in the markup) so Safari stretches the viewBox to the card instead of using the SVG's intrinsic 300×150 default. The glow lives on the container rather than the animated paths — Safari drops repaints on filtered SVG strokes. */ .card-energy { position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; inset: -3px; z-index: 10; width: calc(100% + 6px); height: calc(100% + 6px); pointer-events: none; border-radius: 10px; overflow: visible; opacity: 0; filter: drop-shadow(0 0 6px var(--teal)) drop-shadow(0 0 16px rgba(var(--teal-rgb),0.7)); -webkit-filter: drop-shadow(0 0 6px var(--teal)) drop-shadow(0 0 16px rgba(var(--teal-rgb),0.7)); } .card-energy.active { opacity: 1; } /* The energy path traces the card rectangle */ @keyframes energyTrace { 0% { stroke-dashoffset: 882; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes energyFade { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes cardFlash { 0% { opacity: 0; } 40% { opacity: 0.9; } 100% { opacity: 0; } } .energy-path { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; /* Keep stroke width constant even though the viewBox is stretched to the card */ vector-effect: non-scaling-stroke; } .energy-path.trace { animation: energyTrace 1.4s cubic-bezier(0.4,0,0.6,1) forwards; -webkit-animation: energyTrace 1.4s cubic-bezier(0.4,0,0.6,1) forwards; } .energy-path.fade { animation: energyFade 0.35s ease-out forwards; -webkit-animation: energyFade 0.35s ease-out forwards; } /* White flash overlay on the card */ .card-flash { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 9; background: rgba(var(--teal-rgb),0.6); border-radius: 8px; pointer-events: none; opacity: 0; } .card-flash.flash { animation: cardFlash 0.5s ease-out forwards; } .card-face { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; overflow: hidden; } .card-back { background: var(--surface2); border: 1.5px solid var(--gold-dim); align-items: center; justify-content: center; } .card-back-pattern { width: 80%; height: 80%; border: 1px solid rgba(201,168,76,0.25); border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; } .card-back-pattern::before { content: ''; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; inset: 10px; border: 0.5px solid rgba(201,168,76,0.14); border-radius: 2px; } .card-back-glyph { font-family: 'Noto Serif', Georgia, serif; font-size: 30px; color: rgba(201,168,76,0.32); } .cbc { position: absolute; width: 14px; height: 14px; border-color: var(--gold-dim); border-style: solid; border-width: 0; opacity: 0.5; } .cbc.tl { top:6px; left:6px; border-top-width:1.5px; border-left-width:1.5px; } .cbc.tr { top:6px; right:6px; border-top-width:1.5px; border-right-width:1.5px; } .cbc.bl { bottom:6px; left:6px; border-bottom-width:1.5px; border-left-width:1.5px; } .cbc.br { bottom:6px; right:6px; border-bottom-width:1.5px; border-right-width:1.5px; } .card-front { transform: rotateY(180deg); border: 1.5px solid var(--gold); } .card-front img:not(.tone-overlay) { width: 100%; height: 100%; object-fit: cover; display: block; } .reveal-sign-name { font-family: 'Noto Serif', Georgia, serif; font-size: 22px; font-weight: 300; color: var(--text); text-align: center; visibility: hidden; opacity: 0; transition: opacity 0.6s 0.2s, visibility 0s 0.2s; /* min-height reserves space so card doesn't shift when text appears */ min-height: 1.4em; margin-top: 24px; } .reveal-sign-name.vis { visibility: visible; opacity: 1; transition: opacity 0.6s, visibility 0s; } .reveal-pron { font-family: 'Montserrat', sans-serif; font-size: 11px; color: var(--muted); text-align: center; font-style: italic; letter-spacing: 0.04em; margin-top: 4px; visibility: hidden; opacity: 0; transition: opacity 0.6s 0.3s, visibility 0s 0.3s; } .reveal-pron.vis { visibility: visible; opacity: 1; transition: opacity 0.6s, visibility 0s; } .reveal-essence { font-size: 12px; color: var(--muted); text-align: center; margin-top: 5px; letter-spacing: 0.05em; visibility: hidden; opacity: 0; transition: opacity 0.6s 0.4s, visibility 0s 0.4s; min-height: 1.2em; } .reveal-essence.vis { visibility: visible; opacity: 1; transition: opacity 0.6s, visibility 0s; } .reveal-reading { max-width: 360px; margin: 16px auto 0; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 0.6s, transform 0.6s; } .reveal-reading.vis { opacity: 1; transform: none; } .reveal-blurb { font-family: Georgia, 'Noto Serif', serif; font-style: italic; font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0; } /* Sign metadata grid */ .reveal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 16px; padding-top: 14px; border-top: 0.5px solid var(--teal-border); font-family: 'Montserrat', sans-serif; opacity: 0; transition: opacity 0.6s ease 0.1s; } .reveal-meta.vis { opacity: 1; } .reveal-meta-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-dim); margin: 0 0 3px; } .reveal-meta-value { font-size: 13px; color: var(--text); line-height: 1.5; margin: 0; } .reveal-colors-wrap { display: flex; flex-wrap: wrap; } .reveal-color-dot { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; margin-bottom: 4px; white-space: nowrap; } .reveal-color-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.28); box-sizing: border-box; flex-shrink: 0; } .reveal-color-gloss { opacity: 0.5; font-size: 11px; } .reveal-share-btn { margin-top: 20px; opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0s 0.6s; } .reveal-share-btn.vis { opacity: 1; visibility: visible; transition: opacity 0.6s, visibility 0s; } .email-gate { width: 100%; } .gate-prompt { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.6; margin-bottom: 14px; } .gate-prompt strong { display: block; font-size: 16px; color: var(--text); font-weight: 700; margin-bottom: 8px; } .gate-prompt em { font-style: normal; color: var(--text); } /* ─── SCREEN 4: FULL ANALYSIS ─── */ #s-result { align-items: stretch; } .result-content { width: 100%; /* Bottom padding clears the floating footer pill (sticky, bottom 22px). */ padding: 24px 40px 120px; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 22px; } /* The Big Picture synthesis spans the full width above both panels. */ .result-synthesis { display: block; flex: 0 0 100%; margin: 0 0 18px; } /* Card panel — always visible; the row simply wraps when narrow. */ .result-left { flex: 1 1 380px; min-width: 0; width: auto; height: auto; overflow: visible; } .share-panel { height: auto; } .panel-cols { display: flex; flex-direction: column; } .panel-cols.show-cross .pv-cross { flex: 1; min-height: 0; } /* Tabs panel */ .result-right-col { flex: 1 1 420px; min-width: 0; max-width: none; width: auto; border: 1px solid var(--outline); background: var(--surface); border-radius: 14px; padding: 0 20px 18px; height: auto; box-sizing: border-box; } /* ── Full Analysis panels: ONE layout at every viewport (per the Maya Cross flow design). The retired mobile-only tab layout (body map moved into the tab + overview stepper) is gone; the panels simply wrap when narrow. ── */ .result-tab-panel.result-tab-panel-active { height: auto; overflow-y: visible; } /* Strip the inner reading box — outer container is the box */ .result-reading { max-width: none; margin: 0; padding: 2px 0 20px; border: none; background: none; border-radius: 0; } /* Cross position navigator */ #ra-cross-content { display: block; padding: 14px 20px 20px; background: rgba(0, 190, 204, 0.03); } .ra-cross-nav { display: flex; align-items: center; gap: 10px; padding: 11px 20px; border-bottom: 0.5px solid var(--teal-border); } .ra-nav-btn { background: var(--teal); color: #fff; border: none; border-radius: 6px; width: auto; height: auto; padding: 8px 14px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; } .ra-nav-btn:hover { background: var(--teal-dim); } .ra-nav-label { flex: 1; text-align: center; font-family: 'Montserrat', sans-serif; } .ra-nav-pos-name { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text); line-height: 1.2; } .ra-nav-dots { display: flex; gap: 5px; justify-content: center; margin-top: 5px; } .ra-nav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--outline); transition: background 0.2s; } .ra-nav-dot.ra-dot-active { background: var(--teal); } /* Legacy mobile-only elements — never shown */ .mob-rdg-hdr, .mob-rdg-card-col, .mob-rdg-synthesis, .mob-cross-map-slot { display: none !important; } .mob-rdg-row { display: flex; gap: 14px; align-items: flex-start; } @media (max-width: 699px) { /* Phones: tighter page gutters so the panels breathe */ .result-content { padding: 16px 14px 120px; gap: 16px; } .result-right-col { padding: 0 14px 16px; } /* Navigator: label on top, prev/next side by side beneath */ .ra-cross-nav { padding: 12px 12px 10px; flex-wrap: wrap; row-gap: 8px; } .ra-nav-label { flex: 1 1 100%; order: -1; } .ra-nav-btn { flex: 1 1 0; font-size: 10.5px; padding: 9px 8px; } #ra-cross-content { padding: 14px 12px 20px; } /* Position detail: card above text on phones (already stacked via .rcp-* rules) */ .rcp-card-col { width: min(220px, 62vw) !important; } } /* ── Result view toggle — full-width row above both panels, since it swaps the card panel AND the detail panel together ── */ .result-tab-bar { display: flex; flex: 0 0 100%; border: 1px solid var(--outline); border-radius: 12px; background: var(--surface); overflow: hidden; margin: 0 0 2px; } .result-tab { flex: 1; padding: 13px 10px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--surface); border: none; cursor: pointer; color: rgba(100,100,100,0.55); transition: color 0.15s, background 0.15s; line-height: 1.2; border-right: 0.5px solid var(--teal-border); position: relative; } .result-tab:last-child { border-right: none; } .result-tab.result-tab-active { color: var(--teal); background: rgba(var(--teal-rgb),0.10); } .result-tab:hover:not(.result-tab-active) { background: rgba(var(--teal-rgb),0.05); color: var(--text); } .result-tab-panel { display: none; } .result-tab-panel.result-tab-panel-active { display: block; } /* ══ SHAREABLE PANEL ══ */ .share-panel { margin: 0; border: 1px solid var(--outline); background: var(--surface); overflow: hidden; position: relative; opacity: 0; transition: opacity 0s; border-radius: 6px; } .share-panel.revealed { opacity: 1; transition: none; } @keyframes panelGlowPulse { 0%,100% { box-shadow: 0 0 0px rgba(var(--teal-rgb),0); border-color: rgba(var(--teal-rgb),0.32); } 50% { box-shadow: 0 0 18px rgba(var(--teal-rgb),0.35), inset 0 0 12px rgba(var(--teal-rgb),0.06); border-color: rgba(var(--teal-rgb),0.7); } } .share-panel.glowing { animation: panelGlowPulse 2s ease-in-out infinite; } /* Corner ornaments */ .panel-corner { position: absolute; width: 18px; height: 18px; border-color: var(--teal); border-style: solid; border-width: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.4s; } .share-panel.revealed .panel-corner { opacity: 1; } .panel-corner.tl { top: -1px; left: -1px; } .panel-corner.tr { top: -1px; right: -1px; } .panel-corner.bl { bottom: -1px; left: -1px;} .panel-corner.br { bottom: -1px; right: -1px;} /* Panel sections fade in sequentially */ .panel-header, .panel-cols, .panel-reading, .cross-section, .action-zone { opacity: 0; transform: translateY(8px); transition: opacity 0.55s ease, transform 0.55s ease; } .panel-header.in, .panel-cols.in, .panel-reading.in, .cross-section.in, .action-zone.in { opacity: 1; transform: translateY(0); } /* Dynepic header inside panel */ .panel-header { padding: 14px 20px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border-bottom: 1px solid var(--outline); } .panel-header .logo-txt { font-size: 18px; letter-spacing: 0.18em; } /* Two columns — side by side on desktop, stacked on mobile */ .panel-cols { display: flex; flex-direction: column; /* stacked by default (mobile) */ } /* LEFT col — the flippable card */ .panel-left { padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; } /* On mobile: card takes fixed width, info fills rest */ .panel-card { border: 1.5px solid var(--gold); border-radius: 6px; overflow: hidden; flex: 0 0 120px; background: var(--surface2); } .panel-card img:not(.tone-overlay) { width: 100%; display: block; object-fit: cover; } /* Flippable result card — front = art, back = imagery text */ .panel-left { align-items: center; } .panel-card-flip { width: 100%; max-width: 340px; /* aspect-ratio fallback for Safari < 15 */ position: relative; padding-top: calc(1376 / 768 * 100%); -webkit-perspective: 1200px; perspective: 1200px; cursor: pointer; margin: 0 auto; } @supports (aspect-ratio: 1) { .panel-card-flip { padding-top: 0; aspect-ratio: 768 / 1376; } } .pcf-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); } .panel-card-flip.flipped .pcf-inner { transform: rotateY(180deg); } .pcf-front, .pcf-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; border-radius: 8px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .pcf-front { border: 1.5px solid var(--gold); background: var(--surface2); } .pcf-front img:not(.tone-overlay) { width: 100%; height: 100%; object-fit: cover; display: block; } .pcf-back { transform: rotateY(180deg); border: 1.5px solid var(--teal); background: var(--surface-warm); padding: 14px 14px 12px; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; } .pcf-back-label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-dim); margin-bottom: 8px; font-family: 'Montserrat', sans-serif; flex-shrink: 0; } .pcf-back-body { font-size: 15.5px; line-height: 1.55; color: var(--text); font-family: 'Montserrat', sans-serif; } .pcf-back-body em { color: var(--teal); font-style: normal; } .panel-card-note { margin-top: 10px; font-size: 11px; letter-spacing: 0.04em; color: var(--teal); font-family: 'Montserrat', sans-serif; cursor: pointer; text-align: center; } /* ── Panel views (reading / cross) ─────────────────────────────── */ .panel-view { display: flex; } /* Reading view: the archetype card centered in the panel */ .pv-reading { flex-direction: column; align-items: center; padding: 14px 16px 18px; gap: 12px; /* Span the full panel so the card centers in it — .panel-cols turns into a row on desktop and would otherwise shrink this view to content width. */ width: 100%; box-sizing: border-box; } .pv-card-col { display: flex; justify-content: center; width: 100%; } .pv-card-col .result-card-wrap { width: 300px; max-width: 100%; border: 1.5px solid var(--teal); box-shadow: 0 0 28px rgba(45,212,180,0.18); } .pv-card-col .result-card-wrap img:not(.tone-overlay) { width: 100%; display: block; border: none; border-radius: 0; } .pv-imagery-col { width: 100%; margin-bottom: 10px; } .pv-imagery-lbl { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-dim); margin: 0 0 8px; } /* Mobile / tablet: cross view stacks label + body map */ .pv-cross { flex-direction: column; align-items: center; padding: 12px; background: #0a0f14; position: relative; overflow: hidden; } [data-theme="warm"] .pv-cross { background: #ebdac3; } [data-theme="brand"] .pv-cross { background: #fbfcfb; } /* Full-panel background — solid color; cross_nav.svg lives inside .body-map-wrap */ .pv-cross::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 0; } /* All viewports: the card panel shows ONE view at a time (card OR body map), swapped by the tab bar via .show-cross. display:none keeps the hidden view out of flow so the tall body map doesn't inflate the panel. */ .panel-cols { flex-direction: column; min-height: auto; } .panel-view { width: 100%; } .rr-imagery, .mob-imagery-box { display: none !important; } .pv-cross { display: none; justify-content: center; } .pv-cross .body-map-wrap { width: 100%; max-width: 100%; aspect-ratio: 1 / 1; } .panel-cols.show-cross .pv-reading { display: none; } .panel-cols.show-cross .pv-cross { display: flex; } /* Compact info beside card on mobile */ .panel-info { flex: 1; display: flex; flex-direction: column; gap: 0; border: 0.5px solid var(--teal-border); border-radius: 5px; overflow: hidden; align-self: stretch; } .panel-info-tag { background: rgba(var(--teal-rgb),0.06); padding: 6px 10px; font-size: 9px; letter-spacing: 0.06em; color: var(--teal-dim); font-family: 'Montserrat', sans-serif; border-bottom: 1px solid var(--outline); } .panel-info-body { padding: 8px 10px; font-family: 'Montserrat', sans-serif; font-size: 12px; line-height: 1.6; color: var(--text); font-weight: 300; flex: 1; } .panel-info-body em { color: var(--teal); font-style: normal; } /* RIGHT col — body map. No height cap: the full body + all five tokens must always be visible (the feet/Destiny token was being clipped). */ .panel-right { position: relative; display: flex; flex-direction: column; border-top: 0.5px solid var(--teal-border); } /* Centered header above the body map */ .panel-cross-lbl { position: absolute; top: 12px; left: 0; right: 0; font-family: 'Noto Serif', Georgia, serif; font-size: 20px; color: var(--teal); text-align: center; line-height: 1.3; z-index: 3; pointer-events: none; } /* Fills pv-cross height (from the 740px chain); SVG letterboxed via object-fit:contain. Tokens are offset in renderTokens() to align with the SVG's letterboxed position. */ .body-map-wrap { position: relative; z-index: 1; flex: 1; width: 100%; min-height: 0; overflow: hidden; } .body-bg-img { width: 100%; height: 100%; display: block; opacity: 0.35; object-fit: contain; object-position: center center; } .cross-overlay-text{ z-index: 3; position: -webkit-sticky; position: sticky; margin-top: -10px; text-align: center; font-size: x-small; font-style: italic; color: var(--teal); font-family: 'Montserrat', sans-serif; text-align: center; } .body-svg-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; } .token-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none; z-index: 2; } .tok { position: absolute; transform: translate(-50%, -50%); pointer-events: all; cursor: pointer; transition: opacity 0.15s; overflow: hidden; border-radius: 50%; } .tok:hover { opacity: 0.85; } @keyframes tok-breathe { 0%,100% { box-shadow: 0 0 0 3px var(--pulse-color), 0 0 6px 2px rgba(var(--pulse-rgb),0.25); } 50% { box-shadow: 0 0 0 3px var(--pulse-color), 0 0 18px 8px rgba(var(--pulse-rgb),0.6); } } .tok.tok-highlighted { animation: tok-breathe 2s ease-in-out infinite; } .tok.tok-dimmed::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,0.6); pointer-events: none; } .tok-ring-overlay { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; } .node-ring { fill: none; stroke: var(--gold); stroke-width: 1.8; } .node-ring-self { fill: none; stroke: var(--teal); stroke-width: 2.2; } .nlbl { font-family: 'Montserrat', sans-serif; font-size: 68px; fill: var(--muted); text-anchor: middle; } .nlbl-self { fill: var(--teal); font-size: 74px; } .vine { stroke: var(--teal); stroke-width: 5; fill: none; opacity: 0.38; } .vleaf { fill: var(--teal); opacity: 0.30; } /* ── Desktop: side by side ── */ @media (min-width: 700px) { .panel-cols { flex-direction: row; min-height: 460px; } .panel-left { flex-direction: column; flex: 1 1 50%; max-width: 50%; padding: 16px 14px 16px 16px; border-right: 0.5px solid var(--teal-border); border-top: none; justify-content: center; } .panel-card { flex: 0 0 auto; width: 100%; } .panel-right { flex: 1 1 50%; max-width: 50%; border-top: none; max-height: none; } } /* Panel reading summary — bottom of share panel */ .panel-reading { border-top: 0.5px solid var(--teal-border); padding: 16px 20px 18px; background: rgba(0,0,0,0.2); } .panel-reading-eyebrow { font-size: 9px; letter-spacing: 0.22em; color: var(--teal-dim); text-transform: uppercase; margin-bottom: 4px; text-align: center; } .panel-reading-title { font-family: 'Noto Serif', Georgia, serif; font-size: 22px; font-weight: 300; font-style: italic; color: var(--gold); text-align: center; margin-bottom: 10px; } .panel-reading-body { font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.7; color: var(--text); font-weight: 300; text-align: center; } .panel-reading-body em { color: var(--teal); font-style: normal; } /* ─── CROSS MEANING SECTION (below panel) ─── */ .cross-section { width: 100%; max-width: var(--max-w); background: var(--surface); border-top: 1px solid var(--outline); } .cross-breakdown { padding: 24px 36px 16px; } .cb-heading { font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 0.2em; color: var(--teal-dim); text-transform: uppercase; margin-bottom: 18px; } .cross-positions { display: flex; flex-direction: column; gap: 0; } .cross-pos { display: grid; grid-template-columns: 90px 1fr; gap: 0; padding: 16px 0; border-bottom: 0.5px solid rgba(var(--teal-rgb),0.12); cursor: pointer; transition: background 0.1s; } .cross-pos:last-child { border-bottom: none; } .cross-pos:hover { background: rgba(var(--teal-rgb),0.03); margin: 0 -36px; padding: 16px 36px; } .cp-left { display: flex; flex-direction: column; gap: 3px; padding-right: 16px; border-right: 0.5px solid var(--teal-border); } .cp-role { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-dim); } .cp-name { font-family: 'Montserrat', sans-serif; font-size: 15px; color: var(--gold); } .cp-english { font-family: 'Montserrat', sans-serif; font-size: 11px; color: var(--muted); font-style: italic; } .cp-right { padding-left: 18px; font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--text); line-height: 1.65; font-weight: 300; } .cp-right em { color: var(--teal); font-style: normal; } .cp-center { background: rgba(var(--teal-rgb),0.04); } /* actions */ .action-zone { width: 100%; max-width: var(--max-w); padding: 20px 36px 40px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); border-top: 1px solid var(--outline); } .share-btn { background: var(--teal); color: var(--btn-text); border: none; border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; padding: 15px; cursor: pointer; transition: background 0.15s; display: flex; align-items: center; justify-content: center; gap: 8px; } .share-btn:hover { background: var(--teal-hover); } .share-btn:disabled { opacity: 0.6; cursor: wait; } /* ── Share dropdown ── */ #share-dropdown-backdrop { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 1998; } #share-dropdown-backdrop.sd-open { display: block; } #share-dropdown { display: none; position: fixed; z-index: 1999; background: var(--surface); border: 1px solid var(--outline); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.24); min-width: 210px; padding: 6px 0; overflow: hidden; } #share-dropdown.sd-open { display: block; } #share-dropdown-close { position: absolute; top: 7px; right: 11px; background: none; border: none; cursor: pointer; font-size: 17px; color: var(--muted); line-height: 1; padding: 2px 4px; } #share-dropdown-close:hover { color: var(--text); } .sd-item { display: flex; align-items: center; gap: 13px; padding: 10px 18px; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; background: none; border: none; width: 100%; text-align: left; white-space: nowrap; } .sd-item:hover { background: var(--surface2); } .sd-item svg { width: 20px; height: 20px; flex-shrink: 0; } .sd-divider { height: 1px; background: var(--outline); margin: 4px 0; } .download-btn { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; padding: 13px; cursor: pointer; transition: background 0.15s; } .download-btn:hover { background: rgba(var(--teal-rgb), 0.08); } .download-btn:disabled { opacity: 0.6; cursor: wait; } .guided-return-btn { background: transparent; color: var(--muted); border: none; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; padding: 8px 0 0; cursor: pointer; transition: color 0.15s; text-align: center; } .guided-return-btn:hover { color: var(--teal); } .new-reading-btn { background: transparent; color: var(--muted); border: 1px solid var(--teal-border); border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 10px 20px; cursor: pointer; transition: color 0.15s, border-color 0.15s; text-align: center; margin-top: 4px; } .new-reading-btn:hover { color: var(--teal); border-color: var(--teal); } .cta-fine { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; } /* ─── RESPONSIVE ─── */ @media (max-width: 520px) { :root { --max-w: 100%; --card-w: 100%; } .panel-left { padding: 12px 10px 12px 12px; gap: 8px; } .panel-reading { padding: 12px 14px 14px; } .panel-reading-title { font-size: 18px; } .panel-reading-body { font-size: 13px; } .cross-breakdown, .action-zone { padding-left: 18px; padding-right: 18px; } .cross-pos:hover { margin: 0 -18px; padding: 16px 18px; } } @media (min-width: 700px) { .panel-cols { min-height: 500px; } .panel-reading-body { font-size: 15px; } } /* dm-* CSS moved to dashboard.html */ /* ─── DEV: THEME OVERRIDES ─── */ /* A — Codex Earth (light, parchment + terracotta) */ html[data-theme="A"] { --teal-rgb: 176,73,46; --teal: #B0492E; --teal-dim: #7A3020; --teal-border: rgba(176,73,46,0.25); --gold: #B5883D; --gold-dim: #8E6A30; --green: #586863; --orange: #B0492E; --bg: #F2EBD9; --sidebar: #E7DBC0; --surface: #E7DBC0; --surface2: #DDD0B2; --outline: #C9B89A; --text: #36281B; --muted: #4C4538; --muted-light: #586863; --btn-text: #fff; --teal-hover: #C25A38; --gold-hover: #C9A24E; --color-scheme: light; --tok-bg: rgba(250,244,232,0.4); --tok-chip-bg: rgba(242,235,217,0.88); --tok-chip-border:rgba(0,0,0,0.08); --tok-chip-text: #36281B; } /* B — Glyph Deco (light, bone + deep teal) */ html[data-theme="B"] { --teal-rgb: 43,81,84; --teal: #2B5154; --teal-dim: #1E3C3F; --teal-border: rgba(43,81,84,0.25); --gold: #C16B52; --gold-dim: #A55A44; --green: #8BB2A7; --orange: #C16B52; --bg: #F3ECDB; --sidebar: #DCE4DC; --surface: #DCE4DC; --surface2: #CCD6CC; --outline: #B0BBAE; --text: #162E35; --muted: #2B5154; --muted-light: #8BB2A7; --btn-text: #fff; --teal-hover: #3A6A6F; --gold-hover: #D4825F; --color-scheme: light; --tok-bg: rgba(243,239,228,0.4); --tok-chip-bg: rgba(220,228,220,0.88); --tok-chip-border:rgba(0,0,0,0.08); --tok-chip-text: #162E35; } /* C — Nouveau Mist (light, warm cream + dusty sage) */ html[data-theme="C"] { --teal-rgb: 133,144,121; --teal: #859079; --teal-dim: #6A7360; --teal-border: rgba(133,144,121,0.25); --gold: #BBA77D; --gold-dim: #9A8862; --green: #B26A52; --orange: #B26A52; --bg: #F9EDD4; --sidebar: #E6DFC8; --surface: #E6DFC8; --surface2: #D8D0B5; --outline: #C4BAA4; --text: #3F433F; --muted: #54584C; --muted-light: #859079; --btn-text: #fff; --teal-hover: #96A28A; --gold-hover: #CDB990; --color-scheme: light; --tok-bg: rgba(250,244,230,0.4); --tok-chip-bg: rgba(230,223,200,0.88); --tok-chip-border:rgba(0,0,0,0.08); --tok-chip-text: #3F433F; } /* D — Nightfall (dark, midnight teal + lit gold) */ html[data-theme="D"] { --teal-rgb: 139,178,167; --teal: #8BB2A7; --teal-dim: #6A9089; --teal-border: rgba(139,178,167,0.25); --gold: #C9A24E; --gold-dim: #A8832F; --green: #C16B52; --orange: #C16B52; --bg: #1E2A2E; --sidebar: #2B3D40; --surface: #2B3D40; --surface2: #243337; --outline: #4F6667; --text: #F0E2C5; --muted: #8BB2A7; --muted-light: #A0C0BB; --btn-text: #1E2A2E; --teal-hover: #9CC5BA; --gold-hover: #DEB85A; --color-scheme: dark; } /* ── Card lightbox ── */ img[data-card-img] { cursor: zoom-in; } #card-lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 9999; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; box-sizing: border-box; animation: lbFadeIn 0.15s ease; } @keyframes lbFadeIn { from { opacity:0; } to { opacity:1; } } #card-lightbox-inner { position: relative; cursor: default; max-width: 100%; } #card-lightbox-img { display: block; border-radius: 18px; max-width: 92vw; max-height: calc(100vh - 72px); width: auto; height: auto; border: 1.5px solid rgba(201,168,76,0.35); box-shadow: 0 8px 48px rgba(0,0,0,0.6); } #card-lightbox-close { position: fixed; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: #1a1208; border: none; cursor: pointer; font-size: 20px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.45); z-index: 10000; } @media (min-width: 768px) { #card-lightbox { padding: 20px; } #card-lightbox-img { max-height: 90vh; } #card-lightbox-close { position: absolute; top: -16px; right: -16px; width: 36px; height: 36px; font-size: 17px; } } /* ══ GUIDED CROSS FLOW — Destiny Map (7 steps) ══ */ #s-guided { align-items: stretch; justify-content: flex-start; background: var(--bg); } .guided-panel { width: 100%; max-width: none; min-width: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; } /* Step dots retired — the journey pane + footer carry navigation. */ .guided-header { display: none; } .guided-viewport { flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; } .guided-track { display: flex; align-items: stretch; height: 100%; position: relative; transition: transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94); } .guided-slide { flex: none; height: 100%; min-width: 0; /* width set by JS (sizeSlides) */ overflow-y: auto; box-sizing: border-box; } /* ── Floating footer — bottom-right pill, always visible ── */ .guided-nav { position: sticky; bottom: 22px; z-index: 40; align-self: flex-end; margin: 0 40px 0 auto; width: auto; min-width: 0; max-width: calc(100% - 40px); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--outline); border-radius: 999px; background: var(--surface); box-shadow: 0 12px 34px rgba(20,23,26,0.16), 0 2px 6px rgba(20,23,26,0.06); box-sizing: border-box; transition: opacity .22s ease, transform .22s ease; } /* On the guided screen the pill has its own row below the slides — static, with a bottom margin standing in for the sticky offset (sticky would lift it 22px up over the slide content). */ #s-guided .guided-nav { position: static; margin-top: auto; margin-bottom: 22px; flex-shrink: 0; } /* On scrolling screens the pill sits after the content; margin-top:auto pins it to the bottom edge when the content is short. */ .screen-nav { margin-top: auto; flex-shrink: 0; } /* Full Analysis footer: Birth Sign / Destiny Map toggle lives in the pill on phones only (the top tab bar scrolls away). Hidden on wider screens. */ .result-nav-toggle { display: none; } @media (max-width: 899px) { .result-nav { flex-wrap: wrap; justify-content: center; row-gap: 8px; padding: 10px 10px 8px; border-radius: 22px; max-width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; } .result-nav-toggle { display: flex; flex: 0 0 100%; border: 1px solid var(--outline); border-radius: 999px; background: var(--surface2); padding: 3px; gap: 3px; } .result-nav-seg { flex: 1; padding: 8px 10px; border: none; border-radius: 999px; background: transparent; color: var(--muted); font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, color 0.15s; } .result-nav-seg-active { background: var(--surface); color: var(--teal); box-shadow: 0 1px 4px rgba(20,23,26,0.12); } /* Download + Share share one row beneath the toggle */ .result-nav .guided-btn { flex: 1 1 0; min-width: 0; padding: 9px 10px; white-space: nowrap; } } .guided-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 20px; border-radius: 999px; font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; border: none; transition: background 0.15s, opacity 0.15s; } .guided-btn svg { flex-shrink: 0; } .guided-btn-back { background: transparent; color: var(--muted); border: 1px solid var(--outline); white-space: nowrap; padding: 9px 18px; } .guided-btn-back:hover { background: rgba(255,255,255,0.05); } .guided-btn-next { background: var(--gold); color: #1a1208; flex: 0 0 auto; max-width: none; margin-left: 0; white-space: nowrap; padding: 9px 22px; } .guided-btn-next:hover { background: var(--gold-hover, #deb85a); } .guided-btn-share { background: transparent; color: var(--teal); border: 1px solid var(--teal); white-space: nowrap; flex: 1; max-width: 180px; } .guided-btn-share:hover { background: rgba(45,212,180,0.08); } /* ── Slide: Archetype ── */ .gs-archetype { display: flex; flex-direction: column; padding: 24px 24px 36px; gap: 18px; align-items: center; } .gs-card-centered { display: flex; justify-content: center; } .gs-card-wrap { position: relative; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--gold); box-shadow: 0 0 32px rgba(201,168,76,0.22); } .gs-card-wrap img:not(.tone-overlay) { width: 100%; display: block; } .gs-archetype-text { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 480px; } .gs-sign-name { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold); text-align: center; } .gs-sign-sub { font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--muted); font-style: italic; text-align: center; margin-top: -10px; } .gs-blurb { font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 1.75; color: var(--text); } .gs-tone-line { font-family: 'Montserrat', sans-serif; font-size: 13px; line-height: 1.6; color: var(--teal); font-style: italic; } .gs-tldr-box { background: var(--surface2); border: 0.5px solid var(--outline); border-radius: 8px; padding: 14px 16px; } .gs-tldr-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-dim); margin-bottom: 6px; } .gs-tldr-body { font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.65; color: var(--text); } /* ── Slides 0 & 1: the cross diagram screens ── Identical structure so nothing moves between them: a sticky top block (title + graphic) the reading scrolls behind. Slide 1 is stacked on top of slide 0 and cross-fades (see sizeSlides). */ .gs-cross-cards-slide { display: block; padding: 0 40px 140px; max-width: none; transition: opacity .45s ease; will-change: opacity; } .guided-track .gs-cross-cards-slide:nth-child(2) { position: absolute; left: 0; top: 0; opacity: 0; } .gs-sticky-top { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 22px 0 10px; } .gs-ccs-row { display: flex; align-items: flex-start; justify-content: center; min-width: 0; } .gs-ccs-header { text-align: center; } .gs-ccs-heading { font-family: Georgia, 'Noto Serif', serif; font-size: 22px; color: var(--gold); margin: 0 0 4px; } .gs-ccs-sub { font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; } .gs-ccs-grid { display: grid; grid-template-areas: ". top ." "left center right" ". bottom ."; grid-template-columns: 1fr 1.15fr 1fr; row-gap: 12px; column-gap: 2px; width: 100%; max-width: 620px; margin: 0 auto; position: relative; z-index: 1; } .gs-ccs-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; } .gs-ccs-top { grid-area: top; } .gs-ccs-center { grid-area: center; } /* Hand cells are nudged inward/down so their tokens sit centered on the background art's hand circles (tuned against the 116% ring size). */ .gs-ccs-left { grid-area: left; margin-top: 28px; transform: translate(40px, 33px); } .gs-ccs-right { grid-area: right; margin-top: 28px; transform: translate(-40px, 33px); } .gs-ccs-bottom { grid-area: bottom; } .gs-ccs-tok-wrap { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto; flex-shrink: 0; } .gs-ccs-center .gs-ccs-tok-wrap { width: 112px; height: 112px; } .gs-ccs-tok-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; } .gs-ccs-pos-label { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dim); text-align: center; } .gs-ccs-sign-name { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); text-align: center; line-height: 1.3; } .gs-ccs-synthesis { font-family: 'Montserrat', sans-serif; font-size: 12px; line-height: 1.7; color: var(--text); max-width: 480px; text-align: center; margin: 4px 0 0; } .gs-ccs-grid-wrap { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 1 620px; min-width: 340px; width: 100%; max-width: none; height: auto; margin: 0; padding: 10px 0; } .gs-ccs-body-bg { /* Oversized so the ring encloses each cell's labels, not just the circles */ position: absolute; top: -8%; left: 0; width: 100%; height: 116%; object-fit: contain; opacity: 0.28; pointer-events: none; } /* ── Slide: Cross intro ── */ .gs-intro { padding: 14px 24px 16px; display: flex; flex-direction: column; gap: 12px; } .gs-intro-heading { font-family: Georgia, 'Noto Serif', serif; font-size: 26px; color: var(--gold); text-align: center; margin: 0 0 10px; } .gs-intro-para { font-family: 'Montserrat', sans-serif; font-size: 13.5px; line-height: 1.7; color: var(--text); width: 90%; max-width: none; margin: 22px auto 0; text-align: left; } .gs-cross-diagram { display: grid; grid-template-areas: ". top ." "left center right" ". bottom ."; grid-template-columns: 1fr 1.2fr 1fr; gap: 5px; width: min(380px, 96%); margin: 0 auto; } .gs-cd-cell { padding: 5px 8px; border-radius: 8px; text-align: center; white-space: nowrap; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .gs-cd-top { grid-area: top; background: rgba(0,190,204,0.1); color: var(--teal); border: 0.5px solid var(--teal-border); } .gs-cd-left { grid-area: left; background: rgba(201,168,76,0.07); color: var(--muted); border: 0.5px solid var(--outline); } .gs-cd-center { grid-area: center; background: rgba(45,212,180,0.14); color: var(--teal); border: 1px solid var(--teal); } .gs-cd-right { grid-area: right; background: rgba(201,168,76,0.07); color: var(--muted); border: 0.5px solid var(--outline); } .gs-cd-bottom { grid-area: bottom; background: rgba(0,190,204,0.1); color: var(--teal); border: 0.5px solid var(--teal-border); } .gs-cd-dir { font-size: 8px; font-weight: 400; letter-spacing: 0.08em; opacity: 0.65; text-transform: uppercase; } .gs-pos-list { display: flex; flex-direction: column; gap: 8px; } .gs-pos-item { border-left: 2px solid var(--teal-border); padding-left: 10px; } .gs-pos-label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-dim); margin-bottom: 2px; } .gs-pos-desc { font-family: 'Montserrat', sans-serif; font-size: 12px; line-height: 1.5; color: var(--text); } /* ── Intro: placeholder circles (same size as slide-1 tokens, no image) ── */ .gs-intro-tok { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto; flex-shrink: 0; background: rgba(255,255,255,0.04); } .gs-ccs-center .gs-intro-tok { width: 135px; height: 135px; } .gs-ccs-pos-desc { font-family: 'Montserrat', sans-serif; font-size: 8px; color: var(--muted); text-align: center; line-height: 1.3; } /* ── Slide 1: Meaning-map circles — modifier only; sizing comes from gs-ccs-tok-wrap ── */ .gs-meaning-tok { background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .gs-meaning-primary { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #1a2025; text-align: center; line-height: 1.2; } .gs-meaning-dir { font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: #555; text-align: center; } /* ── Slide: Cross station ── */ .gs-station { display: flex; flex-direction: column; /* Generous bottom padding so the last text scrolls clear of the pill nav. */ padding: 14px 44px 110px; gap: 12px; max-width: none; margin: 0; } .gs-station-header { display: flex; align-items: center; justify-content: space-between; width: 100%; } .gs-station-body { display: flex; flex-direction: column; gap: 14px; } @media (min-width: 700px) { .gs-station-body { flex-direction: row; align-items: flex-start; gap: 48px; } .gs-station-col-left { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; } .gs-station-col-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; max-width: 70ch; } } .gs-station-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 20px; border: 0.5px solid var(--teal-border); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-dim); } .gs-station-card-wrap { position: relative; border-radius: 10px; overflow: hidden; width: min(265px, 55vw); align-self: center; } /* Desktop: height-capped so the whole card sits above the fold — the third term is the tallest card that fits the viewport minus the chrome above and below it (cards are 768×1376 ≈ 0.56 width per unit of height). */ @media (min-width: 700px) { .gs-station-card-wrap { width: min(320px, 34vw, calc((100svh - 250px) * 0.56)); align-self: flex-start; } } .gs-station-card-wrap img:not(.tone-overlay) { width: 100%; display: block; } .gs-station-name { font-family: 'Montserrat', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: 0.06em; } .gs-station-english { font-family: 'Montserrat', sans-serif; font-size: 13px; color: var(--muted); font-style: italic; } /* Sits under the English name on each cross station — same treatment as the Full Analysis reading and the PDF's station pages. */ .gs-station-pron { font-family: 'Montserrat', sans-serif; font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted); font-style: italic; margin-top: 3px; } .gs-station-roledesc { font-size: 13px; line-height: 1.6; color: var(--muted); } .gs-station-meaning { font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.8; color: var(--text); } .gs-pos-meaning-box { background: rgba(var(--teal-rgb), 0.06); border: 0.5px solid var(--teal-border); border-radius: 8px; padding: 14px 16px; } .gs-pos-meaning-label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; /* Darker teal for contrast on the destiny map screens */ color: color-mix(in srgb, var(--teal-dim) 55%, var(--text)); margin-bottom: 6px; } .gs-pos-meaning-text { font-family: 'Montserrat', sans-serif; font-size: 13px; line-height: 1.75; color: var(--text); } /* ── Mobile-only overrides ── */ @media (max-width: 699px) { .gs-cross-cards-slide { padding: 0 20px 120px; } .gs-station { padding: 20px 20px 0; } .gs-ccs-grid { max-width: 290px; } .gs-ccs-grid-wrap { min-width: 0; } /* Mobile: the ring art scales up so its circle spacing matches the grid's natural spacing (the wrap clips the ring's sides; the figure stays centered). */ .gs-ccs-body-bg { width: 126%; left: -13%; height: 106%; top: -3%; } /* Per-cell nudges measured at 375px: every token centers on its ring circle. */ .gs-ccs-top { transform: translateY(20px); } .gs-ccs-left { transform: translate(-26px, 25px); } .gs-ccs-center { transform: translateY(8px); } .gs-ccs-right { transform: translate(26px, 25px); } .gs-ccs-bottom { transform: translateY(-10px); } /* Token sizes sized to fit their columns at 290px */ .gs-ccs-tok-wrap { width: 64px; height: 64px; } .gs-ccs-center .gs-ccs-tok-wrap { width: 82px; height: 82px; } .gs-intro-tok { width: 70px; height: 70px; } .gs-ccs-center .gs-intro-tok { width: 86px; height: 86px; } .gs-meaning-primary { font-size: 8px; } .gs-meaning-dir { font-size: 7px; } .gs-station-col-left { display: flex; flex-direction: column; gap: 12px; } /* Increase title line-height to prevent overlap when name wraps */ .gs-station-name { line-height: 1.4; } /* Slightly larger card on small screens */ .gs-station-card-wrap { width: min(300px, 78vw); } /* Full analysis tab: stack to column, center large card */ .mob-rdg-row { flex-direction: column; align-items: center; gap: 16px; } .mob-rdg-card-col { flex: none; width: 72%; max-width: 260px; } .mob-rdg-row .result-reading { width: 100%; } /* Cross tab slides: collapse two-column card+text to stacked */ .rcp-main-row { flex-direction: column !important; align-items: center !important; } .rcp-card-col { width: min(240px, 76vw) !important; flex: none !important; } .rcp-text-col { width: 100% !important; flex: none !important; } } .app-footer { margin-top: auto; padding: 20px 0 24px; display: flex; justify-content: center; gap: 20px; } .app-footer a { font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); text-decoration: none; transition: color 0.15s; } .app-footer a:hover { color: var(--teal); } /* ─── READING SECTION ─── */ .rd-lbl { display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); font-weight: 800; margin-right: 5px; } .result-tldr { padding: 18px 20px 6px; text-align: center; font-family: 'Montserrat', sans-serif; } .result-tldr-title { font-family: 'Noto Serif', Georgia, serif; font-size: 22px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--teal); margin: 0 0 8px; line-height: 1.3; } .result-tldr-body { font-size: 14px; line-height: 1.6; color: var(--muted-light); font-style: italic; margin: 0; } .rr-synthesis-full { padding: 16px 20px; border-radius: 8px; background: rgba(var(--teal-rgb),0.05); border: 0.5px solid var(--teal-border); font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.65; color: var(--text); } .rr-synthesis-title { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; } .result-reading { max-width: 680px; margin: 10px auto; padding: 14px 22px 20px; font-family: 'Montserrat', sans-serif; border: 1px solid var(--outline); background: var(--surface); border-radius: 6px; } .result-reading .rr-h { font-family: 'Noto Serif', Georgia, serif; font-size: 20px; font-weight: 400; color: var(--teal); margin: 16px 0 2px; line-height: 1.3; } .result-reading .rr-sub { font-size: 11px; color: var(--muted); margin: 0 0 12px; } .result-reading .rr-p { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0 0 14px; } .result-reading .rr-lead { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 0 0 12px; } .result-reading .rr-intro { font-size: 13px; line-height: 1.6; color: var(--muted); font-style: italic; margin: 0 0 16px; } .result-reading .rr-nawal-frame { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0 0 4px; } .result-reading .rr-pronunciation { font-size: 11px; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 16px; } .result-reading .rr-facet { font-size: 14px; line-height: 1.7; color: var(--text); margin-bottom: 11px; } /* Career insight reads in standard body text (no italic). */ .result-reading .rr-career-why { color: var(--text); } .result-reading .rr-cross-hint { font-size: 13px; line-height: 1.6; color: var(--muted); font-style: italic; margin: 0; } .result-reading .rr-synthesis { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: rgba(var(--teal-rgb),0.05); border: 0.5px solid var(--teal-border); font-size: 13px; line-height: 1.6; color: var(--text); } .result-reading .rr-block { margin-top: 16px; padding-top: 14px; padding-bottom: 14px; border-top: 0.5px solid var(--teal-border); } .result-reading .rr-block:first-child { border-top: none; } .result-reading .rr-label { font-size: 13px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; line-height: 1.2; } .result-reading .rr-label-sub { font-size: 11px; font-style: italic; color: var(--muted); margin: 0 0 10px; } .result-reading .rr-body { font-size: 14px; line-height: 1.7; color: var(--text); } .result-reading .rr-cross-title { margin-top: 24px; font-family: 'Noto Serif', Georgia, serif; font-size: 19px; color: var(--text); text-align: center; } .result-reading .rr-pos { margin-top: 14px; padding-top: 12px; border-top: 0.5px solid var(--outline); } .result-reading .rr-pos-head { font-size: 13px; font-weight: 600; color: var(--gold); margin-bottom: 5px; } .result-reading .rr-pos-body { font-size: 13px; line-height: 1.65; color: var(--muted); } .result-end { max-width: 480px; margin: 16px auto 0; text-align: center; } /* ── DEV: Theme switcher widget ── */ #dev-theme-sw { display:none;position:fixed;bottom:12px;right:12px;z-index:9999;align-items:center;gap:5px; background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); padding:5px 10px 5px 8px;border-radius:20px;border:1px solid rgba(255,255,255,0.12); font-family:system-ui,sans-serif; } #dev-theme-sw span { font-size:9px;letter-spacing:0.12em;color:rgba(255,255,255,0.4);text-transform:uppercase;margin-right:1px; } .th-btn { border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.65);font-size:11px;padding:3px 9px;border-radius:12px; cursor:pointer;transition:background 0.15s,color 0.15s;line-height:1.4; } .th-btn:hover { background:rgba(255,255,255,0.2);color:#fff; } .th-btn.active { background:rgba(255,255,255,0.85);color:#111;border-color:transparent;font-weight:600; }