/* ═══════════════════════════════════════════════════════════════════════ css/dashboard-v2.css — Brand-v2 "illuminated manuscript / night observatory" rebuild of the member dashboard (dashboard.php, Task 3+). Every rule is scoped under body.dashboard-v2 so nothing leaks into the top-nav, footer, or any other page that shares /css/styles.css. Language: one velvet aubergine night band with brass (gold) instruments set into it; a row of wax-sealed wine-red ribbon pills; parchment below awaiting its letter (.ps-letter, full-width since T5f) and the Reading Rooms cards. ══════════════════════════════════════════════════════════════════════ */ /* Full-bleed bands use width:100vw; clip the horizontal overflow the scrollbar + decorative constellation introduce. This file only loads on the 5 dashboard pages, so clipping html here is safely scoped to them (vertical unaffected). */ html { overflow-x: clip; } body.dashboard-v2 { overflow-x: clip; /* Brand-v2 tokens (self-contained) */ --v2-parchment: #FBF3DC; --v2-vellum: #FAF1E1; --v2-vellum-warm: #FDF5E3; --v2-ink: #2D1F38; --v2-ink-soft: #4A3A52; --v2-burgundy: #6B1F2C; --v2-burgundy-lift: #7d2634; --v2-burgundy-deep: #4A1620; --v2-aubergine: #3A1F38; --v2-gold: #B89150; --v2-gold-bright: #D4AC68; --v2-gold-deep: #8E6E3A; --v2-gold-pale: #E5C68A; --v2-cream: #F5E7C8; --v2-cream-soft: #e8d7b0; --v2-cream-dim: #cdb88f; /* T5f — THE PINK: the yes-no-tarot script rose ("Yes," tail / vitrine script, css/yes-no-tarot.css --rose-soft), warmed accent on the dark */ --v2-rose: #D9968F; --v2-rose-deep: #B96B7A; background: radial-gradient(1100px 640px at 50% 380px, #FFFBF0 0%, rgba(255,251,240,0) 60%), var(--v2-parchment); color: var(--v2-ink); font-family: 'EB Garamond', Georgia, serif; } body.dashboard-v2 * { box-sizing: border-box; } /* ═══ 1. THE NIGHT BAND — "Your Sky Tonight" ════════════════════════════ The /horoscopes/ midnight, made personal: deep navy (cf-night recipe), cream stars, the member's sun-sign constellation + element-tinted glyph watermark, and the eight marvels laid out plainly beneath the greeting. */ body.dashboard-v2 { /* Midnight tokens — lifted from css/horoscopes-v2-f.css (.cf-body) */ --ps-night: #0B1530; --ps-night-2: #060C20; --ps-night-warm: #131E3F; --ps-hero-cream: #EDE4C8; --ps-hero-cream-soft: rgba(237, 228, 200, 0.78); --ps-hero-cream-dim: rgba(237, 228, 200, 0.55); --ps-hero-line: rgba(229, 198, 138, 0.26); /* fine gold hairline on navy */ } body.dashboard-v2 .ps-band { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 28%, var(--ps-night-warm) 0%, transparent 65%), radial-gradient(ellipse at 18% 92%, rgba(11, 21, 48, 0.55) 0%, transparent 60%), linear-gradient(180deg, var(--ps-night) 0%, var(--ps-night-2) 100%); border-bottom: 1px solid var(--v2-gold-deep); padding: 44px 0 40px; color: var(--ps-hero-cream); } /* Vignette deepening the corners — same recipe as the horoscopes hero */ body.dashboard-v2 .ps-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(6, 10, 31, 0.6) 100%); } /* T5g: the perimeter gold hairline frame is retired — the sky holds itself */ /* Starfield — the /horoscopes/ hero's ten-layer twinkling sky, ported verbatim from css/horoscopes-v2-f.css (.cf-sky* → .ps-sky*, scoped). Static star positions remain under prefers-reduced-motion. */ body.dashboard-v2 .ps-band { --ps-star: #EDE4C8; --ps-star-bright: #F0E8D2; } body.dashboard-v2 .ps-sky { position: absolute; inset: 0; pointer-events: none; /* T5h (18) ROOT CAUSE: the band's ::after corner vignette (z-index auto) paints AFTER same-level children, i.e. OVER the star layers — up to 60% navy on every star beyond the center. z-index:1 lifts the whole sky above the vignette; the vignette keeps deepening the backdrop only. */ z-index: 1; } /* T5g: one more dense faint field — the countryside deep sky, 45 micro stars between everything else so the black truly fills with light */ body.dashboard-v2 .ps-sky::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.19px 1.19px at 3% 11%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 8% 27%, var(--ps-star-bright), transparent), radial-gradient(1.27px 1.27px at 13% 47%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 16% 66%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 21% 17%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 25% 79%, var(--ps-star), transparent), radial-gradient(1.27px 1.27px at 29% 33%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 34% 58%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 37% 6%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 41% 40%, var(--ps-star), transparent), radial-gradient(1.27px 1.27px at 45% 74%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 50% 26%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 54% 62%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 57% 12%, var(--ps-star-bright), transparent), radial-gradient(1.27px 1.27px at 61% 46%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 66% 76%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 69% 22%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 74% 52%, var(--ps-star), transparent), radial-gradient(1.27px 1.27px at 77% 8%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 81% 68%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 86% 36%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 90% 82%, var(--ps-star-bright), transparent), radial-gradient(1.27px 1.27px at 95% 16%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 98% 64%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 5% 88%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 11% 8%, var(--ps-star), transparent), radial-gradient(1.27px 1.27px at 19% 92%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 27% 5%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 32% 90%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 39% 86%, var(--ps-star), transparent), radial-gradient(1.27px 1.27px at 47% 9%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 52% 84%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 59% 94%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 64% 4%, var(--ps-star), transparent), radial-gradient(1.27px 1.27px at 71% 88%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 79% 94%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 84% 6%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 89% 50%, var(--ps-star), transparent), radial-gradient(1.27px 1.27px at 93% 92%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 97% 42%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 2% 52%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 15% 34%, var(--ps-star-bright), transparent), radial-gradient(1.27px 1.27px at 43% 52%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 63% 30%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 87% 24%, var(--ps-star-bright), transparent); opacity: 1; /* T5h (18): the deep field no longer starts pre-dimmed */ animation: psTwinkleB 7.4s ease-in-out infinite; } body.dashboard-v2 .ps-sky-dust, body.dashboard-v2 .ps-sky-dust2, body.dashboard-v2 .ps-sky-dust3, body.dashboard-v2 .ps-sky-mid, body.dashboard-v2 .ps-sky-mid2, body.dashboard-v2 .ps-sky-mid3, body.dashboard-v2 .ps-sky-guide, body.dashboard-v2 .ps-sky-extra1, body.dashboard-v2 .ps-sky-extra2, body.dashboard-v2 .ps-sky-extra3, body.dashboard-v2 .ps-sky-lamps, body.dashboard-v2 .ps-sky-lamps2 { position: absolute; inset: 0; } /* DUST layer 1 — 25 tiny stars */ body.dashboard-v2 .ps-sky-dust { background-image: radial-gradient(1.02px 1.02px at 5% 8%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 12% 20%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 19% 6%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 26% 28%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 33% 14%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 41% 4%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 48% 24%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 56% 10%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 63% 32%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 71% 18%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 79% 6%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 87% 26%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 94% 12%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 3% 36%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 11% 44%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 22% 52%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 31% 60%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 39% 48%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 51% 56%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 60% 50%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 69% 62%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 78% 54%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 85% 48%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 93% 60%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 97% 38%, var(--ps-star), transparent); animation: psTwinkleA 4.2s ease-in-out infinite; } /* DUST layer 2 — 25 more tiny stars in different positions */ body.dashboard-v2 .ps-sky-dust2 { background-image: radial-gradient(1.44px 1.44px at 2% 70%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 9% 80%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 17% 68%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 25% 88%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 33% 76%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 42% 92%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 50% 80%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 58% 96%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 66% 84%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 74% 72%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 82% 90%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 89% 78%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 96% 92%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 7% 30%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 15% 38%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 23% 14%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 30% 42%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 36% 80%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 44% 64%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 53% 38%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 64% 16%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 73% 38%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 81% 60%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 90% 30%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 6% 96%, var(--ps-star-bright), transparent); animation: psTwinkleB 5.6s ease-in-out infinite; } /* MID layer 1 — 16 medium stars */ body.dashboard-v2 .ps-sky-mid { background-image: radial-gradient(1.59px 1.59px at 8% 12%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 18% 26%, var(--ps-star), transparent), radial-gradient(1.59px 1.59px at 30% 8%, var(--ps-star-bright), transparent), radial-gradient(1.61px 1.61px at 40% 22%, var(--ps-star), transparent), radial-gradient(1.59px 1.59px at 52% 14%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 64% 30%, var(--ps-star), transparent), radial-gradient(1.52px 1.52px at 76% 18%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 88% 8%, var(--ps-star), transparent), radial-gradient(1.59px 1.59px at 95% 22%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 4% 50%, var(--ps-star), transparent), radial-gradient(1.52px 1.52px at 26% 56%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 48% 64%, var(--ps-star), transparent), radial-gradient(1.59px 1.59px at 70% 50%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 88% 60%, var(--ps-star), transparent), radial-gradient(1.52px 1.52px at 18% 84%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 60% 88%, var(--ps-star), transparent); filter: drop-shadow(0 0 2px rgba(237, 228, 200, 0.4)); animation: psTwinkleC 7s ease-in-out infinite; } /* MID layer 2 — 14 more medium stars */ body.dashboard-v2 .ps-sky-mid2 { background-image: radial-gradient(1.45px 1.45px at 12% 70%, var(--ps-star), transparent), radial-gradient(1.52px 1.52px at 24% 36%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 36% 78%, var(--ps-star), transparent), radial-gradient(1.59px 1.59px at 48% 42%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 60% 78%, var(--ps-star), transparent), radial-gradient(1.52px 1.52px at 72% 38%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 84% 76%, var(--ps-star), transparent), radial-gradient(1.59px 1.59px at 95% 88%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 6% 92%, var(--ps-star), transparent), radial-gradient(1.52px 1.52px at 32% 18%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 56% 6%, var(--ps-star), transparent), radial-gradient(1.59px 1.59px at 80% 4%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 14% 4%, var(--ps-star), transparent), radial-gradient(1.52px 1.52px at 42% 96%, var(--ps-star-bright), transparent); filter: drop-shadow(0 0 2px rgba(237, 228, 200, 0.3)); animation: psTwinkleD 6.2s ease-in-out infinite; } /* DUST layer 3 — 25 more stars filling gaps in the sky */ body.dashboard-v2 .ps-sky-dust3 { background-image: radial-gradient(1.44px 1.44px at 4% 6%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 11% 14%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 19% 24%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 27% 4%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 35% 36%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 43% 12%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 51% 30%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 59% 46%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 67% 14%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 75% 32%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 83% 12%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 91% 28%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 98% 6%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 6% 56%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 19% 86%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 27% 64%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 38% 70%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 49% 94%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 57% 66%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 65% 88%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 73% 56%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 79% 94%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 87% 66%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 94% 86%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 99% 50%, var(--ps-star), transparent); animation: psTwinkleF 4.8s ease-in-out infinite; } /* MID layer 3 — 14 more medium stars filling out the upper sky */ body.dashboard-v2 .ps-sky-mid3 { background-image: radial-gradient(1.45px 1.45px at 16% 8%, var(--ps-star), transparent), radial-gradient(1.52px 1.52px at 38% 28%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 62% 6%, var(--ps-star), transparent), radial-gradient(1.59px 1.59px at 80% 26%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 22% 46%, var(--ps-star), transparent), radial-gradient(1.52px 1.52px at 44% 56%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 66% 44%, var(--ps-star), transparent), radial-gradient(1.59px 1.59px at 88% 56%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 8% 64%, var(--ps-star), transparent), radial-gradient(1.52px 1.52px at 32% 76%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 56% 92%, var(--ps-star), transparent), radial-gradient(1.59px 1.59px at 78% 86%, var(--ps-star-bright), transparent), radial-gradient(1.45px 1.45px at 4% 38%, var(--ps-star), transparent), radial-gradient(1.52px 1.52px at 96% 40%, var(--ps-star-bright), transparent); filter: drop-shadow(0 0 2px rgba(237, 228, 200, 0.3)); animation: psTwinkleG 7.6s ease-in-out infinite; } /* GUIDE — 6 brightest stars with strong glow (T5f: bigger, brighter) */ body.dashboard-v2 .ps-sky-guide { background-image: radial-gradient(3.0px 3.0px at 22% 16%, #FFFDF2, transparent 70%), radial-gradient(2.62px 2.62px at 78% 18%, var(--ps-star-bright), transparent 70%), radial-gradient(2.75px 2.75px at 14% 68%, #FFFDF2, transparent 70%), radial-gradient(2.5px 2.5px at 86% 70%, var(--ps-star-bright), transparent 70%), radial-gradient(2.62px 2.62px at 50% 88%, var(--ps-star-bright), transparent 70%), radial-gradient(2.75px 2.75px at 50% 6%, #FFFDF2, transparent 70%); filter: drop-shadow(0 0 6px rgba(240, 232, 210, 0.8)); animation: psTwinkleE 8.5s ease-in-out infinite; } /* T5f LAMPS layer 1 — 20 bigger bright stars so the band truly reads as a night sky (sizes 1.3–2px, near-white, soft glow) */ body.dashboard-v2 .ps-sky-lamps { background-image: radial-gradient(2.38px 2.38px at 4% 12%, #FFFDF2, transparent 70%), radial-gradient(2.03px 2.03px at 10% 42%, var(--ps-star-bright), transparent 70%), radial-gradient(2.12px 2.12px at 17% 74%, #FFFDF2, transparent 70%), radial-gradient(2.17px 2.17px at 24% 22%, var(--ps-star-bright), transparent 70%), radial-gradient(2.38px 2.38px at 31% 58%, #FFFDF2, transparent 70%), radial-gradient(1.89px 1.89px at 37% 10%, var(--ps-star-bright), transparent 70%), radial-gradient(2.0px 2.0px at 43% 82%, #FFFDF2, transparent 70%), radial-gradient(2.25px 2.25px at 49% 34%, var(--ps-star-bright), transparent 70%), radial-gradient(2.03px 2.03px at 55% 66%, #FFFDF2, transparent 70%), radial-gradient(2.38px 2.38px at 61% 14%, var(--ps-star-bright), transparent 70%), radial-gradient(2.17px 2.17px at 67% 48%, #FFFDF2, transparent 70%), radial-gradient(2.12px 2.12px at 72% 78%, var(--ps-star-bright), transparent 70%), radial-gradient(2.03px 2.03px at 78% 30%, #FFFDF2, transparent 70%), radial-gradient(2.38px 2.38px at 84% 60%, var(--ps-star-bright), transparent 70%), radial-gradient(2.17px 2.17px at 89% 12%, #FFFDF2, transparent 70%), radial-gradient(2.12px 2.12px at 94% 44%, var(--ps-star-bright), transparent 70%), radial-gradient(2.03px 2.03px at 98% 76%, #FFFDF2, transparent 70%), radial-gradient(2.0px 2.0px at 7% 90%, var(--ps-star-bright), transparent 70%), radial-gradient(2.25px 2.25px at 58% 94%, #FFFDF2, transparent 70%), radial-gradient(2.17px 2.17px at 27% 94%, var(--ps-star-bright), transparent 70%); filter: drop-shadow(0 0 4px rgba(240, 232, 210, 0.6)); animation: psTwinkleC 6.8s ease-in-out infinite; } /* T5f LAMPS layer 2 — 16 more, offset field, counter-phased twinkle */ body.dashboard-v2 .ps-sky-lamps2 { background-image: radial-gradient(2.0px 2.0px at 2% 60%, var(--ps-star-bright), transparent 70%), radial-gradient(2.38px 2.38px at 13% 26%, #FFFDF2, transparent 70%), radial-gradient(2.03px 2.03px at 20% 50%, var(--ps-star-bright), transparent 70%), radial-gradient(2.25px 2.25px at 28% 8%, #FFFDF2, transparent 70%), radial-gradient(2.17px 2.17px at 35% 38%, var(--ps-star-bright), transparent 70%), radial-gradient(2.12px 2.12px at 41% 62%, #FFFDF2, transparent 70%), radial-gradient(2.38px 2.38px at 47% 8%, var(--ps-star-bright), transparent 70%), radial-gradient(2.03px 2.03px at 53% 50%, #FFFDF2, transparent 70%), radial-gradient(2.25px 2.25px at 64% 34%, var(--ps-star-bright), transparent 70%), radial-gradient(2.17px 2.17px at 70% 62%, #FFFDF2, transparent 70%), radial-gradient(2.38px 2.38px at 76% 8%, var(--ps-star-bright), transparent 70%), radial-gradient(2.03px 2.03px at 82% 84%, #FFFDF2, transparent 70%), radial-gradient(2.12px 2.12px at 88% 28%, var(--ps-star-bright), transparent 70%), radial-gradient(2.17px 2.17px at 93% 90%, #FFFDF2, transparent 70%), radial-gradient(2.25px 2.25px at 97% 58%, var(--ps-star-bright), transparent 70%), radial-gradient(2.0px 2.0px at 8% 6%, #FFFDF2, transparent 70%); filter: drop-shadow(0 0 4px rgba(240, 232, 210, 0.55)); animation: psTwinkleG 5.4s ease-in-out infinite; } /* EXTRA layer 1 — 35 dense fine stars filling gaps */ body.dashboard-v2 .ps-sky-extra1 { background-image: radial-gradient(1.44px 1.44px at 2% 4%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 6% 18%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 9% 32%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 14% 10%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 18% 24%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 21% 56%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 24% 72%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 28% 40%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 32% 86%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 36% 16%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 39% 64%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 42% 30%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 46% 88%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 49% 50%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 52% 18%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 55% 72%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 58% 36%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 62% 8%, var(--ps-star-bright), transparent), radial-gradient(1.36px 1.36px at 65% 60%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 68% 84%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 72% 26%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 75% 48%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 78% 70%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 82% 14%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 85% 92%, var(--ps-star), transparent), radial-gradient(1.02px 1.02px at 88% 42%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 91% 22%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 94% 78%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 97% 54%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 99% 12%, var(--ps-star-bright), transparent), radial-gradient(1.44px 1.44px at 12% 80%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 26% 96%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 71% 96%, var(--ps-star), transparent), radial-gradient(1.36px 1.36px at 88% 4%, var(--ps-star), transparent), radial-gradient(1.44px 1.44px at 4% 82%, var(--ps-star-bright), transparent); animation: psTwinkleH 5.2s ease-in-out infinite; } /* EXTRA layer 2 — 30 small bright stars between the existing fields */ body.dashboard-v2 .ps-sky-extra2 { background-image: radial-gradient(1.19px 1.19px at 1% 24%, var(--ps-star-bright), transparent), radial-gradient(1.1px 1.1px at 7% 46%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 10% 62%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 16% 90%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 20% 4%, var(--ps-star-bright), transparent), radial-gradient(1.1px 1.1px at 27% 22%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 31% 50%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 35% 68%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 40% 12%, var(--ps-star-bright), transparent), radial-gradient(1.1px 1.1px at 44% 80%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 47% 34%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 51% 96%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 56% 26%, var(--ps-star-bright), transparent), radial-gradient(1.1px 1.1px at 59% 56%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 63% 80%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 66% 38%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 70% 14%, var(--ps-star-bright), transparent), radial-gradient(1.1px 1.1px at 74% 60%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 77% 44%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 81% 28%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 84% 84%, var(--ps-star-bright), transparent), radial-gradient(1.1px 1.1px at 87% 6%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 92% 64%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 95% 48%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 98% 32%, var(--ps-star-bright), transparent), radial-gradient(1.1px 1.1px at 33% 4%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 17% 36%, var(--ps-star-bright), transparent), radial-gradient(1.02px 1.02px at 53% 4%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 80% 96%, var(--ps-star-bright), transparent), radial-gradient(1.1px 1.1px at 14% 56%, var(--ps-star), transparent); filter: drop-shadow(0 0 1.5px rgba(237, 228, 200, 0.35)); animation: psTwinkleI 6.4s ease-in-out infinite; } /* EXTRA layer 3 — 25 very faint micro-stars (deep field) */ body.dashboard-v2 .ps-sky-extra3 { background-image: radial-gradient(1.19px 1.19px at 5% 14%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 13% 8%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 21% 38%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 29% 54%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 37% 70%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 45% 22%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 53% 44%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 61% 12%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 69% 36%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 77% 56%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 85% 18%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 93% 30%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 8% 62%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 18% 78%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 28% 86%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 38% 92%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 48% 60%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 58% 90%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 68% 70%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 76% 90%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 86% 80%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 96% 88%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 3% 90%, var(--ps-star-bright), transparent), radial-gradient(1.19px 1.19px at 50% 14%, var(--ps-star), transparent), radial-gradient(1.19px 1.19px at 65% 80%, var(--ps-star-bright), transparent); opacity: 0.95; animation: psTwinkleJ 8.2s ease-in-out infinite; } /* Twinkle keyframes — each layer has a slightly different rhythm. T5g: floors raised hard — a real country-dark sky stays LIT between blinks; stars breathe, they never vanish. */ /* T5h (18): floors raised again — the field never drops below ~3/4 light */ @keyframes psTwinkleA { 0%,100% { opacity: 1; } 50% { opacity: 0.74;} } @keyframes psTwinkleB { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } } @keyframes psTwinkleC { 0%,100% { opacity: 1; } 50% { opacity: 0.78;} } @keyframes psTwinkleD { 0%,100% { opacity: 0.82; } 50% { opacity: 1; } } @keyframes psTwinkleE { 0%,100% { opacity: 1; } 50% { opacity: 0.82;} } @keyframes psTwinkleF { 0%,100% { opacity: 1; } 50% { opacity: 0.72;} } @keyframes psTwinkleG { 0%,100% { opacity: 0.76; } 50% { opacity: 1; } } @keyframes psTwinkleH { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } } @keyframes psTwinkleI { 0%,100% { opacity: 1; } 50% { opacity: 0.74;} } @keyframes psTwinkleJ { 0%,100% { opacity: 0.72; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { body.dashboard-v2 .ps-sky-dust, body.dashboard-v2 .ps-sky-dust2, body.dashboard-v2 .ps-sky-dust3, body.dashboard-v2 .ps-sky-mid, body.dashboard-v2 .ps-sky-mid2, body.dashboard-v2 .ps-sky-mid3, body.dashboard-v2 .ps-sky-guide, body.dashboard-v2 .ps-sky-extra1, body.dashboard-v2 .ps-sky-extra2, body.dashboard-v2 .ps-sky-extra3, body.dashboard-v2 .ps-sky-lamps, body.dashboard-v2 .ps-sky-lamps2, body.dashboard-v2 .ps-sky::before { animation: none; } } /* The celestial crescent moon — LEFT side, mirror of the constellation. T5f: raised so the DISC sits vertically centered between the top-nav's bottom edge and the top of the plum boxes (the disc is at ~29% of the svg's height, so a negative top centers it in the greeting zone). */ body.dashboard-v2 .ps-celestial { position: absolute; left: max(3%, calc(50% - 600px)); top: -12px; width: clamp(120px, 14vw, 176px); height: auto; /* T5h (20): the moon sat under the vignette's darkest corner — it painted at ~65% of its own color. Above the vignette it returns to the horoscopes-hero luminosity. */ z-index: 1; pointer-events: none; } body.dashboard-v2 .ps-moon-disc { animation: psMoonBreathe 6s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255, 246, 214, 0.45)); } @keyframes psMoonBreathe { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 246, 214, 0.4)); } 50% { filter: drop-shadow(0 0 8px rgba(255, 246, 214, 0.65)); } } /* Star twinkles — phased blinks with a gentle scale pulse */ body.dashboard-v2 .ps-cs-star { animation: psStarBlink 3.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; filter: drop-shadow(0 0 3px rgba(255, 246, 214, 0.7)); } body.dashboard-v2 .ps-cs-s1 { animation-delay: 0s; animation-duration: 3.2s; } body.dashboard-v2 .ps-cs-s2 { animation-delay: 0.4s; animation-duration: 4.1s; } body.dashboard-v2 .ps-cs-s3 { animation-delay: 0.9s; animation-duration: 3.6s; } body.dashboard-v2 .ps-cs-s4 { animation-delay: 1.3s; animation-duration: 2.8s; } body.dashboard-v2 .ps-cs-s5 { animation-delay: 1.8s; animation-duration: 3.9s; } body.dashboard-v2 .ps-cs-s6 { animation-delay: 2.3s; animation-duration: 3.4s; } body.dashboard-v2 .ps-cs-s7 { animation-delay: 0.6s; animation-duration: 4.3s; } @keyframes psStarBlink { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.35); } } @media (prefers-reduced-motion: reduce) { body.dashboard-v2 .ps-moon-disc, body.dashboard-v2 .ps-cs-star { animation: none; } } /* The sun-sign constellation — beside the greeting block on the right. T5g: smaller again (~150px max) so it can never underlap the marvel boxes at 1280 or 1440; it lives wholly in the greeting zone. */ body.dashboard-v2 .ps-constellation-wrap { position: absolute; top: 40px; right: max(4%, calc(50% - 560px)); width: clamp(120px, 12vw, 150px); z-index: 1; /* T5h (19): above the corner vignette, like the sky + moon */ pointer-events: none; opacity: 1; filter: drop-shadow(0 0 5px rgba(240, 232, 210, 0.35)); } body.dashboard-v2 .ps-constellation-wrap .ps-sign-constellation { display: block; width: 100%; height: auto; transform: rotate(90deg); transform-origin: center; } body.dashboard-v2 .ps-band-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 26px; } /* Welcome banner (?welcome=1) — translucent gold-bordered card in the band */ body.dashboard-v2 .ps-welcome { margin: 0 0 26px; padding: 15px 20px; border: 1px solid rgba(212, 172, 104, 0.55); border-radius: 10px; background: rgba(212, 172, 104, 0.10); box-shadow: inset 0 0 24px rgba(212, 172, 104, 0.06); font-family: 'EB Garamond', serif; font-size: 1.15rem; line-height: 1.6; color: var(--ps-hero-cream-soft); } body.dashboard-v2 .ps-welcome strong { color: var(--ps-hero-cream); font-weight: 600; } body.dashboard-v2 .ps-welcome .ps-welcome-star { color: var(--v2-gold-bright); margin-right: 6px; } /* Eyebrow · greeting · subtitle — centered between the moon (left) and the constellation (right). T5f swap: the DATE leads large in Cinzel display, the greeting steps down beneath it. */ body.dashboard-v2 .ps-eyebrow { font-family: 'Cinzel', serif; font-weight: 700; font-size: 28px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--v2-gold-pale); text-shadow: 0 0 22px rgba(229, 198, 138, 0.35); text-align: center; margin: 2px 0 10px; } body.dashboard-v2 .ps-greeting { font-family: 'Marcellus', serif; font-weight: 400; font-size: 23px; line-height: 1.2; color: var(--ps-hero-cream); text-align: center; margin: 0 0 8px; } /* T5h (21): the Big Three line takes the DATE's gold — pale gold, 600, 19px */ body.dashboard-v2 .ps-greeting-sub { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: 19px; color: var(--v2-gold-pale); text-shadow: 0 0 14px rgba(229, 198, 138, 0.25); text-align: center; margin: 0; } /* No-chart fallback CTA (when PersonalSky returns null) — centered under the centered greeting */ body.dashboard-v2 .ps-cast-cta { display: table; margin: 26px auto 0; padding: 0.85rem 2.1rem; font-family: 'Cinzel', serif; font-weight: 700; font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--v2-burgundy-deep); background: linear-gradient(180deg, var(--v2-gold-pale), var(--v2-gold-bright) 50%, var(--v2-gold-deep)); border: 1.5px solid var(--v2-gold-deep); border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.45); text-shadow: 0 1px 0 rgba(255,255,255,0.3); transition: transform 0.2s, box-shadow 0.2s, filter 0.2s; } body.dashboard-v2 .ps-cast-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.5); filter: brightness(1.03); } /* T7a: retained here after the pill focus rule moved to dashboard-pills.css (this was formerly grouped with .ps-pill:focus-visible). */ body.dashboard-v2 .ps-cast-cta:focus-visible { outline: 2px solid var(--v2-gold-bright); outline-offset: 2px; } /* ── THE MARVELS GRID — a matched set of night instruments in their cases. The twinkling sky is the backdrop; every marvel sits in its own box: deep translucent navy panel, 1px gold border + fine inner hairline (the yes-no-tarot double frame at card scale), Cinzel label as header. */ body.dashboard-v2 .ps-marvels { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 44px; } /* T5e — row 1, the four marvels: moon (widest) · meter · day · card */ body.dashboard-v2 .ps-cell--moon { grid-column: span 4; } body.dashboard-v2 .ps-cell--meter { grid-column: span 3; } body.dashboard-v2 .ps-cell--day { grid-column: span 2; } body.dashboard-v2 .ps-cell--card { grid-column: span 3; } /* The instrument case — shared by every marvel box + the week container */ body.dashboard-v2 .ps-cell, body.dashboard-v2 .ps-week { position: relative; min-width: 0; /* PLUM cases (Michael 07-07): rich aubergine over the navy sky */ background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(212, 172, 104, 0.10), transparent 60%), linear-gradient(180deg, rgba(74, 38, 74, 0.92) 0%, rgba(42, 20, 40, 0.95) 100%); border: 1px solid #B89150; border-radius: 11px; padding: 16px 20px 18px; /* T5f: tighter — no stretch filler, less tall */ box-shadow: 0 12px 28px rgba(3, 6, 18, 0.5), inset 0 1px 0 rgba(212, 172, 104, 0.22); } /* T5g: the four row-1 cases stand the SAME height; each label caps the top and the treasure beneath it centers vertically in the remaining space */ body.dashboard-v2 .ps-marvels { align-items: stretch; } body.dashboard-v2 .ps-marvels .ps-cell { display: flex; flex-direction: column; } body.dashboard-v2 .ps-cell-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } /* fine inner hairline — the double frame at card scale */ body.dashboard-v2 .ps-cell::after, body.dashboard-v2 .ps-week::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(184, 145, 80, 0.4); border-radius: 7px; pointer-events: none; } /* The box label — each case's Cinzel header (T5g: 16px, unmissable) */ body.dashboard-v2 .ps-cell-lbl { font-family: 'Cinzel', serif; font-weight: 700; font-size: 16px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--v2-gold-bright); margin: 0 0 12px; } /* T5h (1): the four row-1 header labels read as centered plaques */ body.dashboard-v2 .ps-marvels .ps-cell-lbl { text-align: center; } /* the Personal Day case centers its treasure */ body.dashboard-v2 .ps-cell--day { text-align: center; } /* ① The Moon in your houses — headline cell */ body.dashboard-v2 .ps-moon-val { font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(22px, 2vw, 26px); line-height: 1.3; color: var(--ps-hero-cream); margin: 0 0 10px; } body.dashboard-v2 .ps-moon-glyph { color: var(--v2-gold-bright); font-size: 22px; margin-right: 2px; } body.dashboard-v2 .ps-moon-meaning { font-family: 'EB Garamond', serif; font-size: 18px; line-height: 1.55; color: var(--v2-cream); margin: 0 0 12px; max-width: 42ch; } body.dashboard-v2 .ps-moon-phase { font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--v2-gold-bright); margin: 0; } /* ② Sky Alignment — the number IS the instrument (T5f: compass retired) */ body.dashboard-v2 .ps-cell--meter { text-align: center; } body.dashboard-v2 .ps-meter-big { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 2px 0 10px; } body.dashboard-v2 .ps-meter-score { font-family: 'Cinzel', serif; font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: 0.5px; color: var(--v2-gold-bright); text-shadow: 0 0 26px rgba(212, 172, 104, 0.45); } /* "/ 10" — a considered denominator: Cinzel, 20px, quiet gold, sharing the numeral's baseline (T5g — the scale now truly runs to ten) */ body.dashboard-v2 .ps-meter-of { font-family: 'Cinzel', serif; font-weight: 700; font-size: 20px; letter-spacing: 1px; color: var(--v2-gold); } body.dashboard-v2 .ps-why { font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.45; text-align: left; margin: 5px 0 0; } body.dashboard-v2 .ps-why--gift { color: var(--v2-cream); } body.dashboard-v2 .ps-why--gift .ps-why-arrow { color: var(--v2-gold-bright); } body.dashboard-v2 .ps-why--friction { color: var(--v2-rose); } body.dashboard-v2 .ps-why-arrow { font-size: 13px; opacity: 0.95; } /* ③ Personal Day — just the numeral, large and lit (T5f: ring retired). T5h (2): the grace note anchors at the case's foot and the numeral takes flex:1 with its own centering, so the 5 sits truly midway between the label above and "let the day surprise you" below (measured, not eyeballed). */ body.dashboard-v2 .ps-cell--day .ps-cell-body { justify-content: flex-end; } body.dashboard-v2 .ps-day-num { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel Decorative', serif; font-weight: 700; font-size: 78px; /* T5n: was 52px — the numeral owns the case now */ line-height: 1; color: var(--v2-gold-bright); text-shadow: 0 0 28px rgba(212, 172, 104, 0.45); margin: 0 0 12px; /* measured: equalizes the space above/below the numeral */ } /* T5g: the "A Number 5 Day" tag is gone — the numeral speaks, and the grace note beneath it steps up large in THE PINK */ body.dashboard-v2 .ps-day-word { font-family: 'EB Garamond', serif; font-style: italic; font-size: 21px; line-height: 1.35; color: var(--v2-rose); margin: 0; } /* ④ Your Card Today — the mini yes-no reveal (T5f). The back floats like the yes-no vitrine (cardFloat), one tap turns it, and the name lands in Italianno + THE PINK, exactly the "Yes," treatment at card scale. */ body.dashboard-v2 .ps-cell--card { text-align: center; } body.dashboard-v2 .ps-tarot { display: block; width: 84px; height: 142px; margin: 2px auto 0; padding: 0; border: 0; background: none; cursor: pointer; perspective: 700px; -webkit-tap-highlight-color: transparent; } body.dashboard-v2 .ps-tarot:focus-visible { outline: 2px solid var(--v2-gold-bright); outline-offset: 5px; border-radius: 9px; } body.dashboard-v2 .ps-tarot-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1); } /* the unturned card breathes — the yes-no vitrine float, settled on turn */ @keyframes psCardFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-1.2deg); } } body.dashboard-v2 #ps-hero-tarot:not(.is-turned) .ps-tarot-inner { animation: psCardFloat 5s ease-in-out infinite; } body.dashboard-v2 #ps-hero-tarot:not(.is-turned) .ps-tarot:hover .ps-tarot-inner { animation-play-state: paused; transform: rotateY(-9deg) translateY(-4px); } body.dashboard-v2 #ps-hero-tarot.is-turned .ps-tarot-inner { animation: none; transform: rotateY(180deg); } body.dashboard-v2 .ps-tarot-face { position: absolute; inset: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 8px; } body.dashboard-v2 .ps-tarot-front svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)); } body.dashboard-v2 .ps-tarot-back { transform: rotateY(180deg); } body.dashboard-v2 .ps-tarot-back img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--v2-gold); border-radius: 7px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); } /* caption ↔ revealed meta crossfade beneath the card */ body.dashboard-v2 .ps-tarot-cap { font-family: 'Cinzel', serif; font-weight: 700; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--v2-gold-pale); margin: 12px 0 0; max-height: 32px; overflow: hidden; transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.4s ease; } body.dashboard-v2 #ps-hero-tarot.is-turned .ps-tarot-cap { opacity: 0; max-height: 0; margin: 0; } body.dashboard-v2 .ps-tarot-meta { opacity: 0; max-height: 0; margin: 0; overflow: hidden; transition: opacity 0.45s ease 0.35s, max-height 0.5s ease 0.25s, margin 0.5s ease 0.25s; } body.dashboard-v2 #ps-hero-tarot.is-turned .ps-tarot-meta { opacity: 1; max-height: 180px; margin-top: 10px; } /* THE CHARIOT — T5g: the script retired; the simple Cinzel label treatment (the old "A NUMBER 5 DAY" voice) in THE PINK */ body.dashboard-v2 .ps-tarot-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; letter-spacing: 1.8px; text-transform: uppercase; line-height: 1.4; color: var(--v2-rose); text-shadow: 0 0 14px rgba(217, 150, 143, 0.3); margin: 0 0 4px; } body.dashboard-v2 .ps-tarot-rev { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 500; font-size: 14px; letter-spacing: 0.4px; text-transform: none; color: var(--v2-gold-pale); } body.dashboard-v2 .ps-tarot-more { font-family: 'EB Garamond', serif; font-style: italic; font-size: 15.5px; color: var(--v2-gold-pale); text-decoration: none; } body.dashboard-v2 .ps-tarot-more:hover { color: var(--ps-hero-cream); text-decoration: underline; } /* restore-from-storage: land already turned, no morning theatrics */ body.dashboard-v2 #ps-hero-tarot.ps-noanim .ps-tarot-inner, body.dashboard-v2 #ps-hero-tarot.ps-noanim .ps-tarot-cap, body.dashboard-v2 #ps-hero-tarot.ps-noanim .ps-tarot-meta { transition: none !important; } /* reduced motion: quiet crossfade, no float, no 3D turn */ @media (prefers-reduced-motion: reduce) { body.dashboard-v2 #ps-hero-tarot:not(.is-turned) .ps-tarot-inner { animation: none; } body.dashboard-v2 .ps-tarot-inner { transition: none; } body.dashboard-v2 #ps-hero-tarot.is-turned .ps-tarot-inner { transform: none; } body.dashboard-v2 #ps-hero-tarot:not(.is-turned) .ps-tarot:hover .ps-tarot-inner { transform: none; } body.dashboard-v2 .ps-tarot-face { transition: opacity 0.4s ease; } body.dashboard-v2 .ps-tarot-back { transform: none; opacity: 0; } body.dashboard-v2 #ps-hero-tarot.is-turned .ps-tarot-front { opacity: 0; } body.dashboard-v2 #ps-hero-tarot.is-turned .ps-tarot-back { opacity: 1; } } /* ⑤ TONIGHT'S ALMANAC — one consolidated case spanning the band's width: returns · the watch · the local sky as three columns behind fine hairlines (T5e: one calm case instead of three competing boxes) */ body.dashboard-v2 .ps-almanac { z-index: 2; margin-top: 20px; } /* T5f: the almanac's own header steps up to a real Cinzel heading */ body.dashboard-v2 .ps-almanac > .ps-cell-lbl { font-size: 19px; letter-spacing: 3px; margin-bottom: 16px; color: var(--v2-gold-pale); text-shadow: 0 0 18px rgba(229, 198, 138, 0.25); } body.dashboard-v2 .ps-alm-cols { display: grid; grid-template-columns: 1.15fr 1fr 1fr; } body.dashboard-v2 .ps-alm-col { min-width: 0; padding: 0 26px; border-left: 1px solid rgba(229, 198, 138, 0.18); } body.dashboard-v2 .ps-alm-col:first-child { padding-left: 0; border-left: none; } body.dashboard-v2 .ps-alm-col:last-child { padding-right: 0; } body.dashboard-v2 .ps-alm-hd { font-family: 'Cinzel', serif; font-weight: 700; font-size: 16px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--v2-gold-bright); margin: 0 0 12px; } /* the member's city, seated in the Local Sky header (T5g) */ body.dashboard-v2 .ps-alm-place { font-size: 13.5px; letter-spacing: 1.8px; color: var(--v2-rose); white-space: nowrap; } /* Returns — two clocks, one column (T5f: cream body, gold keys, rose quiets) */ body.dashboard-v2 .ps-ret { font-family: 'EB Garamond', serif; font-size: 17.5px; line-height: 1.55; color: var(--v2-cream); margin: 0 0 10px; } body.dashboard-v2 .ps-ret:last-child { margin-bottom: 0; } body.dashboard-v2 .ps-ret-g { color: var(--v2-gold-bright); } body.dashboard-v2 .ps-ret-k { font-family: 'Cinzel', serif; font-weight: 700; font-size: 13.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--v2-gold-bright); } body.dashboard-v2 .ps-ret-quiet { font-style: normal; /* T5g: almanac support text stands upright */ color: var(--v2-rose); } body.dashboard-v2 .ps-ret--soon { color: var(--v2-cream); } body.dashboard-v2 .ps-ret--soon .ps-ret-g { text-shadow: 0 0 10px rgba(212, 172, 104, 0.7); } body.dashboard-v2 .ps-ret-rays { width: 13px; height: 13px; vertical-align: -1px; margin-left: 2px; } /* The Watch — descriptive rows now (T5f): glyph · planet · what it means */ body.dashboard-v2 .ps-watch-row { display: flex; align-items: baseline; gap: 10px; font-family: 'EB Garamond', serif; font-size: 16.5px; line-height: 1.5; color: var(--v2-cream); margin: 0 0 9px; } body.dashboard-v2 .ps-watch-row:last-child { margin-bottom: 0; } body.dashboard-v2 .ps-watch-g { flex: 0 0 18px; text-align: center; font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.3; color: var(--v2-gold-bright); } body.dashboard-v2 .ps-watch-txt { min-width: 0; } body.dashboard-v2 .ps-watch-txt b { font-weight: 600; color: var(--v2-gold-pale); } body.dashboard-v2 .ps-watch-row--exact { align-items: center; color: var(--v2-cream); } body.dashboard-v2 .ps-watch-row--exact .ps-watch-txt b { color: var(--v2-gold-bright); text-shadow: 0 0 12px rgba(212, 172, 104, 0.45); } body.dashboard-v2 .ps-watch-star { flex: 0 0 18px; width: 18px; height: 18px; align-self: center; } body.dashboard-v2 .ps-watch-row--calm { font-style: normal; } body.dashboard-v2 .ps-watch-row--calm .ps-watch-g { color: var(--v2-rose); } /* Local Sky — the homepage "Today's Sky" language, ported (T5g): the icons that slap, icon · event · time rows with a one-line grace note under each */ body.dashboard-v2 .ps-local { display: flex; flex-direction: column; } body.dashboard-v2 .ps-lsky-event { display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; align-items: center; padding: 8px 0; } body.dashboard-v2 .ps-lsky-event:first-child { padding-top: 0; } body.dashboard-v2 .ps-lsky-event:last-child { padding-bottom: 0; } body.dashboard-v2 .ps-lsky-event + .ps-lsky-event { border-top: 1px dashed rgba(229, 198, 138, 0.24); } body.dashboard-v2 .ps-lsky-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 8px rgba(212, 172, 104, 0.28)); } body.dashboard-v2 .ps-lsky-icon svg { width: 36px; height: 36px; display: block; } body.dashboard-v2 .ps-lsky-body { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1px 10px; min-width: 0; } body.dashboard-v2 .ps-lsky-label { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 17.5px; line-height: 1.2; color: var(--ps-hero-cream); } body.dashboard-v2 .ps-lsky-time { font-family: 'Cinzel', serif; font-weight: 700; font-size: 16.5px; letter-spacing: 0.5px; line-height: 1.2; color: var(--v2-gold-bright); white-space: nowrap; } body.dashboard-v2 .ps-lsky-poetic { grid-column: 1 / -1; font-family: 'EB Garamond', serif; font-size: 15px; line-height: 1.4; color: var(--v2-rose); margin-top: 1px; } /* ⑧ The Week in Your Sky — seven days in one shared case, today ringed gold (box background/border/hairline come from the shared instrument rule) */ body.dashboard-v2 .ps-week { z-index: 2; margin-top: 20px; } body.dashboard-v2 .ps-week-hd { margin-bottom: 14px; } body.dashboard-v2 .ps-week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; /* T5i (4): a shared TAG LANE ABOVE the boxes — the loud day's tag floats up into this lane, above its box's top border, without stealing box height */ padding-top: 22px; } body.dashboard-v2 .ps-wd { position: relative; min-width: 0; display: flex; flex-direction: column; border: 1px solid rgba(229, 198, 138, 0.16); border-radius: 8px; background: rgba(237, 228, 200, 0.035); /* T5i (4): the tag no longer lives inside the box, so the top padding drops back to a normal value — all seven boxes share this height & DOW baseline */ padding: 16px 12px 14px; min-height: 118px; } body.dashboard-v2 .ps-wd-dow { display: block; font-family: 'Cinzel', serif; font-weight: 700; font-size: 15.5px; letter-spacing: 1.8px; text-align: center; color: var(--v2-gold-bright); margin-bottom: 7px; white-space: nowrap; } /* T5g: the hit label centers both axes and steps up */ body.dashboard-v2 .ps-wd-lbl { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: 'EB Garamond', serif; font-size: 17.5px; line-height: 1.4; color: var(--v2-cream); overflow-wrap: break-word; } body.dashboard-v2 .ps-wd-hit { display: block; } /* T5m (3b): the day's SECOND aspect — the owner wants it the SAME SIZE as the first hit (was 14px + 0.72 opacity + shrunk glyphs). Now full size + full legibility; only a hair of top spacing keeps it visually secondary. */ body.dashboard-v2 .ps-wd-hit2 { display: block; margin-top: 6px; line-height: 1.4; } /* planet glyphs — 22px (T5h), colored by the transiting body's CURRENT element in the week strip; aspect glyphs — the wheel's colors */ body.dashboard-v2 .ps-hit-t { font-size: 22px; color: var(--v2-gold-bright); } body.dashboard-v2 .ps-hit-a { font-size: 19px; font-weight: 600; } /* T5i (2): a fixed min-width + centered SVG so the natal word always starts at the SAME offset regardless of which aspect glyph precedes it — kills the cramped ☌ (narrow glyph) → word gap; every aspect gets an identical lane. */ body.dashboard-v2 .ps-hit-a { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35em; vertical-align: -0.18em; } /* T5i (3): the inline-SVG aspect glyph — one apparent size + baseline for all five; stroke color is set inline per aspect (the wheel's line colors) */ body.dashboard-v2 .ps-asp-svg { display: block; width: 17px; height: 17px; } /* T5n: inline-SVG PLANET glyphs — uniform 1.6 stroke to match the aspect set; stroke rides currentColor, so the gold, the element hues, and the loud-day engraved override all keep working with zero extra rules. Sized 21px (the old text glyphs ran 22px font) and laned exactly like .ps-hit-a so planet and aspect center on the same axis. */ body.dashboard-v2 .ps-hit-t { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1em; /* fixed lane like .ps-hit-a → constant planet↔aspect rhythm */ margin-right: -4px; /* tuck the aspect a touch closer to its planet */ vertical-align: -0.18em; } body.dashboard-v2 .ps-pl-svg { display: block; width: 21px; height: 21px; } body.dashboard-v2 .ps-week .ps-hit-t .ps-pl-svg { filter: drop-shadow(0 0 6px rgba(240, 232, 210, 0.22)); } body.dashboard-v2 .ps-wd.is-loud .ps-pl-svg { filter: none !important; } body.dashboard-v2 .ps-week .ps-hit-a .ps-asp-svg { filter: drop-shadow(0 0 6px rgba(240, 232, 210, 0.22)); } body.dashboard-v2 .ps-week .ps-hit-a { text-shadow: 0 0 8px rgba(240, 232, 210, 0.22); } /* T5h (3): THE ELEMENT PALETTE, LIFTED — the homepage planets-table hues (fire #B85428 / earth #6B5028 / air #4D7A9C / water #3A6470 are calibrated for parchment) re-tuned brighter for the navy #0B1530 ground. Scoped to the week case so the parchment transit rows keep their engraved gold. */ body.dashboard-v2 .ps-week .ps-hit-t.ps-el--fire { color: #E8814E; } body.dashboard-v2 .ps-week .ps-hit-t.ps-el--earth { color: #C9A25B; } body.dashboard-v2 .ps-week .ps-hit-t.ps-el--air { color: #8FB9DC; } body.dashboard-v2 .ps-week .ps-hit-t.ps-el--water { color: #6FB9C9; } /* THE ASPECT PALETTE — the birth chart wheel's true line colors (includes/chart_renderer.php .aspect-line--*) */ body.dashboard-v2 .ps-asp--conjunction { color: #C8A35C; } body.dashboard-v2 .ps-asp--trine { color: #5C8FC9; } body.dashboard-v2 .ps-asp--sextile { color: #74C1B9; } body.dashboard-v2 .ps-asp--square { color: #C66F6F; } body.dashboard-v2 .ps-asp--opposition { color: #9C4453; } body.dashboard-v2 .ps-asp--quincunx { color: #7EB878; } /* T5h (4): aspect-glyph OPTICAL normalization — the five glyphs come off the font at wildly different masses (□ small + light, ☌ small + riding high, ⚹ small). Per-glyph size/weight/baseline corrections bring all five to one apparent size + baseline. Shared by the week strip AND the parchment transit rows (same classes). */ body.dashboard-v2 .ps-hit-a.ps-asp--square { font-size: 23px; font-weight: 900; } body.dashboard-v2 .ps-hit-a.ps-asp--conjunction { font-size: 21px; font-weight: 700; vertical-align: -0.05em; } body.dashboard-v2 .ps-hit-a.ps-asp--sextile { font-size: 21px; font-weight: 700; } body.dashboard-v2 .ps-hit-a.ps-asp--trine { font-size: 19px; font-weight: 700; } body.dashboard-v2 .ps-hit-a.ps-asp--opposition { font-size: 21px; font-weight: 700; } body.dashboard-v2 .ps-wd-quiet { font-style: italic; color: var(--ps-hero-cream-dim); } body.dashboard-v2 .ps-wd-return { display: block; font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-gold-bright); margin-top: 5px; } /* T5f hierarchy — TODAY: gold ring, slightly lifted */ body.dashboard-v2 .ps-wd.is-today { border-color: var(--v2-gold-bright); box-shadow: 0 0 0 1px var(--v2-gold-bright), 0 0 16px rgba(212, 172, 104, 0.22); background: rgba(212, 172, 104, 0.07); transform: translateY(-3px); } /* THE BIG DAY — the week's ONE loudest sky (tightest orb): gold fill + tag */ body.dashboard-v2 .ps-wd.is-loud { background: linear-gradient(180deg, #E9CD92, #D4AC68); border-color: #B89150; } /* T5i (4): the tag floats ABOVE the box, into the strip's top lane — its center rides just above the box's top border, horizontally centered on the cell */ body.dashboard-v2 .ps-wd-big { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 3; font-family: 'Cinzel', serif; font-weight: 700; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; color: var(--v2-gold-pale); background: linear-gradient(180deg, var(--v2-burgundy-lift), var(--v2-burgundy-deep)); border: 1px solid var(--v2-gold); border-radius: 999px; padding: 3px 10px 2px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); } body.dashboard-v2 .ps-wd.is-loud .ps-wd-dow { color: var(--v2-burgundy-deep); } body.dashboard-v2 .ps-wd.is-loud .ps-wd-lbl, body.dashboard-v2 .ps-wd.is-loud .ps-wd-quiet { color: var(--v2-burgundy-deep); font-style: normal; } body.dashboard-v2 .ps-wd.is-loud .ps-wd-return { color: var(--v2-burgundy-deep); } /* T5m (3a): on the gold Big Day cell ONLY, force ALL glyphs (incl. the element-tinted planet glyphs like air #8FB9DC) + words to DARK readable burgundy-deep/ink so nothing washes out on gold. !important beats the equal-specificity .ps-week .ps-hit-t.ps-el--* element tints. Other cells keep their element colors. */ body.dashboard-v2 .ps-wd.is-loud .ps-hit-t, body.dashboard-v2 .ps-wd.is-loud .ps-week .ps-hit-t.ps-el--fire, body.dashboard-v2 .ps-wd.is-loud .ps-hit-t.ps-el--fire, body.dashboard-v2 .ps-wd.is-loud .ps-hit-t.ps-el--earth, body.dashboard-v2 .ps-wd.is-loud .ps-hit-t.ps-el--air, body.dashboard-v2 .ps-wd.is-loud .ps-hit-t.ps-el--water, body.dashboard-v2 .ps-wd.is-loud .ps-hit-a { color: var(--v2-burgundy-deep) !important; text-shadow: none !important; } /* T5i (3): the SVG aspect glyph re-strokes engraved-dark on the gold fill too */ body.dashboard-v2 .ps-wd.is-loud .ps-asp-svg { stroke: var(--v2-burgundy-deep) !important; filter: none !important; } /* when the loudest day IS today, the ring wins over the lift for calm */ body.dashboard-v2 .ps-wd.is-today.is-loud { transform: translateY(-3px); } /* Progressed Moon — centered inside the plum band's bottom (T5f), with the engraved crescent-to-full arc beside it */ body.dashboard-v2 .ps-band-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(229, 198, 138, 0.18); text-align: center; font-family: 'EB Garamond', serif; font-style: italic; font-size: 17px; color: var(--v2-cream); } body.dashboard-v2 .ps-band-foot b { color: var(--v2-gold-bright); font-weight: 600; } body.dashboard-v2 .ps-pm-arc { flex: 0 0 74px; width: 74px; height: 22px; } /* ⑦ YOUR NUMBERS — the slim wide band under the week strip (T5f) */ body.dashboard-v2 .ps-numbers { position: relative; z-index: 2; margin-top: 20px; background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(212, 172, 104, 0.10), transparent 60%), linear-gradient(180deg, rgba(74, 38, 74, 0.92) 0%, rgba(42, 20, 40, 0.95) 100%); border: 1px solid #B89150; border-radius: 11px; padding: 14px 22px 16px; box-shadow: 0 12px 28px rgba(3, 6, 18, 0.5), inset 0 1px 0 rgba(212, 172, 104, 0.22); } body.dashboard-v2 .ps-numbers::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(184, 145, 80, 0.4); border-radius: 7px; pointer-events: none; } body.dashboard-v2 .ps-numbers-hd { margin-bottom: 12px; } /* T5g: three EQUAL columns behind hairlines — the Personal Year no longer hogs the row; numerals and words step up, nothing italic */ body.dashboard-v2 .ps-numbers-row { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; } body.dashboard-v2 .ps-numcell { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 20px; min-width: 0; } body.dashboard-v2 .ps-numcell + .ps-numcell { border-left: 1px solid rgba(229, 198, 138, 0.18); } body.dashboard-v2 .ps-numcell-n { font-family: 'Cinzel Decorative', serif; font-weight: 700; font-size: 42px; line-height: 1; color: var(--v2-gold-bright); text-shadow: 0 0 22px rgba(212, 172, 104, 0.42); } body.dashboard-v2 .ps-numcell-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } body.dashboard-v2 .ps-numcell-l { font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--v2-cream); } body.dashboard-v2 .ps-numcell-w { font-family: 'EB Garamond', serif; font-style: normal; font-size: 17.5px; line-height: 1.3; color: var(--v2-rose); } /* the doorway line — centered beneath, bolder, unmissable */ body.dashboard-v2 .ps-numbers-more { display: table; margin: 14px auto 0; font-family: 'EB Garamond', serif; font-style: normal; font-weight: 600; font-size: 18.5px; color: var(--v2-gold-pale); text-decoration: none; border-bottom: 1px solid rgba(229, 198, 138, 0.5); padding-bottom: 2px; white-space: nowrap; } body.dashboard-v2 .ps-numbers-more:hover { color: var(--ps-hero-cream); border-bottom-color: var(--ps-hero-cream); } /* ═══ 2. THE PILLS — wax-sealed ribbons, sitewide (T5g) ═════════════════ MOVED (T7a): the pills row is now a self-contained component in css/dashboard-pills.css (scoped under .ps-pills / .ps-pill, palette carried on the wrapper, ZERO body.dashboard-v2 dependency) so it can be dropped onto the dashboard tool pages without inheriting this stylesheet's cascade. Pages that use the pills load dashboard-pills.css AFTER this file. Design is unchanged — see dashboard-pills.css for the single source of truth. */ /* ═══ 3. PARCHMENT CONTENT SCAFFOLD (Tasks 4–5 fill these) ═════════════ */ body.dashboard-v2 .ps-main { max-width: 1180px; margin: 0 auto; padding: 26px 26px 56px; } /* T5g: the guidance panel's own full-width band — the yes-no-tarot page's peachy ground (css/yes-no-tarot.css --bg #F0DFC8 + its three soft tints) surrounds the wide dark letter left and right */ body.dashboard-v2 .ps-guidance-band { background-image: radial-gradient(ellipse 70% 50% at 14% 8%, rgba(217, 150, 143, 0.08), transparent 65%), radial-gradient(ellipse 55% 40% at 88% 22%, rgba(184, 145, 80, 0.10), transparent 55%), radial-gradient(ellipse 70% 55% at 50% 110%, rgba(107, 31, 44, 0.06), transparent 60%); background-color: #F0DFC8; border-top: 1px solid rgba(184, 145, 80, 0.25); border-bottom: 1px solid rgba(184, 145, 80, 0.28); padding: 32px 0 38px; } body.dashboard-v2 .ps-main--guidance { padding: 0 26px; } body.dashboard-v2 .ps-spread { display: block; /* T5f: the rail dissolved — the letter holds the full width */ } body.dashboard-v2 .ps-rooms { margin-top: 52px; } /* ═══ 4. TODAY'S GUIDANCE — one WIDE dark panel (T5f): the yes-no-tarot reveal-frame language for the FRAME (aubergine gradient, noise texture, inset gold rule, rose + gold glows), a vellum reading page within. ════ */ body.dashboard-v2 .ps-letter { position: relative; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(184,145,80,0.16), transparent 60%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(185,107,122,0.10), transparent 60%), linear-gradient(180deg, #3A1F38 0%, #2A1428 100%); border-radius: 3px; box-shadow: 0 24px 60px rgba(58,31,56,0.35), 0 0 0 1px var(--v2-gold); padding: 12px; overflow: hidden; } /* the yes-no parchment-noise texture over the dark frame */ body.dashboard-v2 .ps-letter::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.5; } /* fine inset gold rule around the whole frame */ body.dashboard-v2 .ps-letter::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(184, 145, 80, 0.55); pointer-events: none; } /* The cap — script title on the dark, ✦ finial, fine double rule below */ body.dashboard-v2 .ps-letter-cap { position: relative; text-align: center; padding: 18px 28px 20px; } body.dashboard-v2 .ps-letter-cap::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 7px; height: 3px; border-top: 1px solid rgba(229,198,138,0.5); border-bottom: 1px solid rgba(229,198,138,0.22); } body.dashboard-v2 .ps-letter-finial { display: block; color: var(--v2-gold-bright); font-size: 15px; line-height: 1; margin: 0 0 9px; text-shadow: 0 0 10px rgba(212,172,104,0.5); } body.dashboard-v2 .ps-letter-page { background: var(--v2-vellum); border: 1px solid rgba(184,145,80,0.5); border-radius: 2px; padding: 30px 36px 36px; } /* T5g: the dateline leads large now */ body.dashboard-v2 .tg-eyebrow { font-family: 'Cinzel', serif; font-weight: 700; font-size: 20px; letter-spacing: 3.2px; text-transform: uppercase; color: var(--v2-gold-bright); text-shadow: 0 0 16px rgba(212, 172, 104, 0.3); text-align: center; margin: 0 0 10px; } body.dashboard-v2 .tg-title { font-family: 'Italianno', cursive; font-weight: 400; font-size: clamp(34px, 4vw, 46px); line-height: 1.08; color: var(--v2-gold-pale); text-align: center; margin: 0 0 8px; } body.dashboard-v2 .tg-title:empty { display: none; } body.dashboard-v2 .tg-spotline { font-family: 'Cinzel', serif; font-weight: 600; font-size: 13.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--v2-rose); /* T5g: THE PINK */ text-align: center; margin: 0; } body.dashboard-v2 .tg-spotline:empty { display: none; } /* T5e: matched to the reading view's body scale (css/sr-view-v2.css .sr-view-body — 1.18rem EB Garamond, ~1.78, weight 500) */ body.dashboard-v2 .tg-intro { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 1.18rem; line-height: 1.78; color: var(--v2-ink); margin: 0; white-space: pre-line; /* legacy two-paragraph readings keep their break */ } body.dashboard-v2 .tg-intro:empty { display: none; } /* Illuminated drop-cap — applied from JS only when the intro is non-empty. T5g: matched EXACTLY to the reading page's gilt-framed initial (css/sr-view-v2.css .sr-reading > p:first-of-type::first-letter). */ body.dashboard-v2 .tg-intro.has-dropcap::first-letter { float: left; font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 900; font-size: 4.6em; line-height: 0.72; padding: 6px 12px 2px 6px; margin: 6px 14px 0 0; color: var(--v2-burgundy); background: linear-gradient(160deg, rgba(255,251,240,0.9), rgba(229,198,138,0.35)); border: 1px solid rgba(184,145,80,0.55); border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.6); } body.dashboard-v2 .tg-divider { width: 60%; height: 1px; margin: 28px auto; background: rgba(184,145,80,0.35); } body.dashboard-v2 .tg-rows { display: flex; flex-direction: column; gap: 20px; } body.dashboard-v2 .tg-row { display: grid; grid-template-columns: 34px 1fr; gap: 0 16px; align-items: start; } /* T5f: the bare glyphs became small engraved medallions (inline SVG) */ body.dashboard-v2 .tg-glyph { display: block; width: 32px; height: 32px; margin-top: 2px; filter: drop-shadow(0 1px 4px rgba(45, 31, 56, 0.18)); } body.dashboard-v2 .tg-glyph svg { display: block; width: 100%; height: 100%; } /* T5f: insight heads styled like the reading page's burgundy H2s (css/sr-view-v2.css .sr-reading h2 — Cinzel 700, burgundy, no shouting) */ body.dashboard-v2 .tg-head { font-family: 'Cinzel', serif; font-weight: 700; font-size: 21px; letter-spacing: 0.4px; text-transform: none; line-height: 1.22; color: var(--v2-burgundy); margin: 0 0 7px; } body.dashboard-v2 .tg-body { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 1.18rem; line-height: 1.7; color: var(--v2-ink); margin: 0; } /* T5m (4): the two transit-fact heads now read as EQUAL siblings to the other insight heads (Lean Into / Watch / Tonight's Window) — same wine/burgundy color + same larger size/weight (inherited from .tg-head). The former rose + 18px demotion is retired. Body stays EB Garamond. */ /* Loading line — a slow candle-pulse, no spinners */ body.dashboard-v2 .tg-loading { font-family: 'EB Garamond', serif; font-style: italic; font-size: 18px; color: var(--v2-gold-deep); text-align: center; margin: 34px 0; } @media (prefers-reduced-motion: no-preference) { body.dashboard-v2 .ps-letter.is-loading .tg-loading:not(.tg-loading--rest) { animation: tg-pulse 2s ease-in-out infinite; } } @keyframes tg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Letter states */ body.dashboard-v2 .ps-letter.is-loading .tg-divider, body.dashboard-v2 .ps-letter.is-loading .tg-rows { display: none; } body.dashboard-v2 .ps-letter:not(.is-loading) .tg-loading { display: none; } body.dashboard-v2 .ps-letter.is-legacy .tg-divider, body.dashboard-v2 .ps-letter.is-legacy .tg-rows, body.dashboard-v2 .ps-letter.is-legacy .tg-spotline { display: none; } /* ═══ 4b. THE DAILY MARVELS — the strip that replaced the rail. T5g: FIVE vellum plaques now (lunation · loudest day · element · the day's ruler · tomorrow's headline), each an upright column: engraved motif on top, label, wonder, grace line. ═══════════════════════════ */ /* T5i (5): the FULL-BLEED plum band — edge to edge across the browser, filled with the plum case gradient (opaque, since it's a whole band not a card). The 5-card grid inside stays centered in the page's ~1180px content column. .ps-daily sits inside .ps-main (max-width 1180) — the band breaks out with the standard 100vw / margin-left:calc(50% - 50vw) trick. */ body.dashboard-v2 .ps-daily-band { width: 100vw; margin-left: calc(50% - 50vw); margin-top: 26px; padding: 40px 26px 44px; background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(184,145,80,0.10), transparent 62%), linear-gradient(180deg, rgba(74,38,74,0.96) 0%, rgba(42,20,40,0.98) 100%); border-top: 1px solid rgba(184,145,80,0.28); border-bottom: 1px solid rgba(184,145,80,0.28); box-sizing: border-box; } body.dashboard-v2 .ps-daily { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; /* centered content column inside the edge-to-edge band */ max-width: 1180px; margin: 0 auto; } /* T5h (6): each plaque is a strict 4-row grid — icon / title / value / subnote — with FIXED row heights shared by all five, so every title's first line, every value line, and every subnote sits on the same y across the strip, 1-line or 2-line values alike. */ body.dashboard-v2 .ps-daily-card { position: relative; display: grid; /* T5L: taller motif + title lanes hold the bigger medallion (66px) and the larger Cinzel title while keeping all five cards' rows on the same y. */ grid-template-rows: 80px 52px 58px auto; justify-items: center; align-items: start; text-align: center; /* T5k (4): reverted to LIGHT cards floating ON the plum band (band kept). Warm vellum surface, fine gold hairline, soft radius + shadow — exactly how the marvels read before the band existed, now sitting on plum. */ background: var(--v2-vellum); border: 1px solid rgba(184, 145, 80, 0.55); border-radius: 12px; padding: 20px 16px 20px; box-shadow: 0 8px 20px rgba(20, 10, 26, 0.34), inset 0 1px 0 rgba(255,255,255,0.55); } /* T5L: the engraved medallions step up to 66px for more presence */ body.dashboard-v2 .ps-daily-motif { display: block; width: 66px; height: 66px; margin: 0; align-self: start; filter: drop-shadow(0 1px 5px rgba(45,31,56,0.16)); } body.dashboard-v2 .ps-daily-motif svg { display: block; width: 100%; height: 100%; } /* T5h (7): titles a touch more insistent — Cinzel tops out at 700 (800 isn't loaded), so letter-spacing +0.2 and a darker burgundy ink carry the weight */ /* T5L: title enlarged 15→17px, kept bold burgundy-deep (warm). Pairs against a COOL deep-ink value line below so title and value no longer blend. */ body.dashboard-v2 .ps-daily-lbl { font-family: 'Cinzel', serif; font-weight: 700; font-size: 17px; letter-spacing: 2px; text-transform: uppercase; color: var(--v2-burgundy-deep); margin: 0; } /* T5L: the wonder/value line moved from burgundy → deep ink (--v2-ink #2D1F38), a distinctly cooler/darker tone that separates it clearly from the warm burgundy title directly above it. */ body.dashboard-v2 .ps-daily-big { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 18.5px; line-height: 1.35; color: var(--v2-ink); margin: 0; } body.dashboard-v2 .ps-daily-big--quiet { font-weight: 500; font-style: italic; } /* T5L: grace notes enlarged 15.5→17px and recolored gold-deep → --v2-ink-soft (#4A3A52) — comfortably readable on the vellum card while staying secondary to the value line above it. */ /* T5m (5): the marvel-card subnote → WINE RED (matches the section titles) + a touch larger; kept italic. Was ink-soft 17px. */ body.dashboard-v2 .ps-daily-sub { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 700; /* bold the plum daily-card bottom lines (Michael 2026-07-12) */ font-size: 18.5px; line-height: 1.42; color: var(--v2-burgundy); margin: 0; } /* ═══ 5. THE READING ROOMS — the old dashboard's cards, brand-v2 skin ═══ Structure ported from _backup-prod-2026-04-27/dashboard.php (.dc-card): ✦ eyebrow · card title · sub sentence · a meaningful preview strip · one clear CTA. Reskinned: vellum on parchment, 1px gold border + hover lift, Cinzel titles, EB Garamond subs, wine-red pill CTAs (.mr-view-back). */ /* T5f: the section header speaks like the reading page's spot-section openers — ❦ fleuron on a hairline, Cinzel 700 burgundy beneath */ body.dashboard-v2 .ps-rooms-hd { position: relative; font-family: 'Cinzel', serif; font-weight: 700; font-size: 23px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--v2-burgundy); text-align: center; margin: 0 0 34px; padding-top: 30px; } body.dashboard-v2 .ps-rooms-hd::before { content: '❦'; position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: var(--v2-gold); font-size: 17px; line-height: 1; } body.dashboard-v2 .ps-rooms-hd::after { content: ""; position: absolute; top: 9px; left: 50%; width: 180px; max-width: 60%; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(184,145,80,0.55) 30%, rgba(184,145,80,0.55) 70%, transparent); } body.dashboard-v2 .ps-rooms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } body.dashboard-v2 .ps-room { display: flex; flex-direction: column; background: var(--v2-vellum); border: 1px solid var(--v2-gold); border-radius: 12px; padding: 26px 28px 24px; box-shadow: 0 6px 18px rgba(45,31,56,0.05); transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } body.dashboard-v2 .ps-room:hover { transform: translateY(-3px); border-color: var(--v2-gold-bright); box-shadow: 0 12px 26px rgba(45,31,56,0.10); } body.dashboard-v2 .ps-room--wide { grid-column: 1 / -1; } body.dashboard-v2 .ps-room-eyebrow { font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--v2-burgundy); margin: 0 0 10px; } body.dashboard-v2 .ps-room-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 24px; /* T5h (12): a step up, shared by all nine rooms */ letter-spacing: 0.4px; line-height: 1.25; color: var(--v2-burgundy); /* T5g: deep burgundy — the muddy ink is out */ margin: 0 0 8px; } body.dashboard-v2 .ps-room-sub { font-family: 'EB Garamond', serif; font-size: 17.5px; line-height: 1.6; color: var(--v2-ink); margin: 0 0 16px; } body.dashboard-v2 .ps-room-sub em { color: var(--v2-burgundy); font-style: italic; } /* the preview strip — an inset plate, burgundy/gold accents on vellum */ body.dashboard-v2 .ps-room-prev { margin: auto 0 18px; /* auto top: previews + CTAs foot-align across a row */ padding: 16px 18px; border: 1px solid rgba(184,145,80,0.4); border-radius: 10px; background: linear-gradient(180deg, rgba(184,145,80,0.10), rgba(184,145,80,0.04)); } body.dashboard-v2 .ps-room-prev-lbl { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--v2-burgundy-deep); margin: 0 0 9px; } body.dashboard-v2 .ps-room-prev-line { font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.55; color: var(--v2-ink); margin: 0; } /* T5h (11): quiet preview lines step up to 600 — no more whisper */ body.dashboard-v2 .ps-room-prev-line--quiet { font-style: italic; font-weight: 600; color: var(--v2-ink-soft); } body.dashboard-v2 .ps-room-sr-days { font-family: 'Cinzel', serif; font-weight: 700; font-size: 24px; color: var(--v2-burgundy); } /* natal reading — T5g: the /birthchart/ hero medallion, living on vellum: a night porthole with the sun breathing and four planets truly orbiting (all the birth-chart-v2.css motion language, ps-prefixed) */ body.dashboard-v2 .ps-room-wheel { display: flex; align-items: center; gap: 20px; } body.dashboard-v2 .ps-natal-medallion { flex: 0 0 auto; width: 120px; height: 120px; display: block; border-radius: 50%; box-shadow: 0 0 22px rgba(212, 172, 104, 0.35), 0 4px 12px rgba(45, 31, 56, 0.22); animation: psMedallionHalo 4.5s ease-in-out infinite; } @keyframes psMedallionHalo { 0%, 100% { box-shadow: 0 0 22px rgba(212, 172, 104, 0.35), 0 4px 12px rgba(45, 31, 56, 0.22); } 50% { box-shadow: 0 0 34px rgba(212, 172, 104, 0.55), 0 4px 12px rgba(45, 31, 56, 0.22); } } body.dashboard-v2 .ps-natal-medallion svg { display: block; width: 100%; height: 100%; } body.dashboard-v2 .ps-med-orbit { fill: none; stroke: rgba(212, 172, 104, 0.22); stroke-width: 0.4; } body.dashboard-v2 .ps-med-sun { transform-origin: 50px 50px; animation: psSunPulse 3s ease-in-out infinite; } @keyframes psSunPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(240, 216, 154, 0.7)); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 14px rgba(240, 216, 154, 1)); } } body.dashboard-v2 .ps-med-rays { transform-origin: 50px 50px; animation: psSunRotate 24s linear infinite, psSunRayPulse 3s ease-in-out infinite; } @keyframes psSunRotate { to { transform: rotate(360deg); } } @keyframes psSunRayPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } body.dashboard-v2 .ps-med-orbiter { transform-origin: 50px 50px; } /* counter-clockwise, Kepler-flavored speeds — same as the /birthchart/ hero */ body.dashboard-v2 .ps-med-orbiter-1 { animation: psOrbitSpin 7s linear infinite reverse; } body.dashboard-v2 .ps-med-orbiter-2 { animation: psOrbitSpin 11s linear infinite reverse; } body.dashboard-v2 .ps-med-orbiter-3 { animation: psOrbitSpin 17s linear infinite reverse; } body.dashboard-v2 .ps-med-orbiter-4 { animation: psOrbitSpin 25s linear infinite reverse; } @keyframes psOrbitSpin { to { transform: rotate(360deg); } } body.dashboard-v2 .ps-room-wheel-meta { flex: 1 1 auto; min-width: 0; } body.dashboard-v2 .ps-room-wheel-row { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 16.5px; line-height: 1.55; color: var(--v2-ink); margin: 0 0 6px; } body.dashboard-v2 .ps-room-wheel-row:last-child { margin-bottom: 0; } body.dashboard-v2 .ps-room-wheel-row span { color: var(--v2-gold-deep); } /* monthly forecast — the key-dates timeline (old .dc-preview-timeline, regilt) */ body.dashboard-v2 .ps-room-timeline { position: relative; height: 60px; margin-top: 12px; } body.dashboard-v2 .ps-tl-bar { position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: linear-gradient(90deg, rgba(184,145,80,0.15), rgba(184,145,80,0.6), rgba(184,145,80,0.15)); } body.dashboard-v2 .ps-tl-dot { position: absolute; top: 26px; width: 10px; height: 10px; border-radius: 50%; background: var(--v2-gold-deep); transform: translateX(-50%); box-shadow: 0 0 0 3px var(--v2-vellum), 0 0 8px rgba(184,145,80,0.5); } body.dashboard-v2 .ps-tl-glyph { position: absolute; top: 0; transform: translateX(-50%); font-family: 'EB Garamond', Georgia, serif; font-size: 22px; /* T5g: larger, and colored below */ font-weight: 700; /* T5h (11): bolder */ line-height: 1; color: var(--v2-burgundy); } /* T5h (11): ♀ and ♂ come off the font lighter than ☉ ☽ ⚹ — a hairline text-stroke fattens them to match their siblings */ body.dashboard-v2 .ps-tl-g--air, body.dashboard-v2 .ps-tl-g--firedeep { -webkit-text-stroke: 0.5px currentColor; } /* T5g: the forecast glyphs take color — homepage element palette for the planets, the wheel's legend green for the sextile star */ body.dashboard-v2 .ps-tl-g--fire { color: #B85428; } body.dashboard-v2 .ps-tl-g--firedeep { color: #C66F6F; } body.dashboard-v2 .ps-tl-g--air { color: #4D7A9C; } body.dashboard-v2 .ps-tl-g--water { color: #3A6470; } body.dashboard-v2 .ps-tl-g--sextile { color: #5A8A7D; } body.dashboard-v2 .ps-tl-edge { position: absolute; top: 45px; font-family: 'Cinzel', serif; font-weight: 600; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-ink-soft); } body.dashboard-v2 .ps-tl-edge--l { left: 0; } body.dashboard-v2 .ps-tl-edge--r { right: 0; } /* lunation — T5g: the /birthchart/ moon art grown up: glow, phase ring, twinkling companion stars in a little night porthole */ body.dashboard-v2 .ps-room-lunation { display: flex; align-items: center; gap: 16px; } body.dashboard-v2 .ps-room-lun-moon { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 0 18px rgba(212, 172, 104, 0.3), 0 3px 10px rgba(45, 31, 56, 0.2); } body.dashboard-v2 .ps-room-lun-moon svg { display: block; width: 100%; height: 100%; } body.dashboard-v2 .ps-lun-glow { animation: psLunGlow 5s ease-in-out infinite; transform-origin: center; } @keyframes psLunGlow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(240, 216, 154, 0.5)); } 50% { filter: drop-shadow(0 0 10px rgba(240, 216, 154, 0.95)); } } body.dashboard-v2 .ps-lun-star { transform-origin: center; transform-box: fill-box; animation: psLunTwinkle 2.5s ease-in-out infinite; } body.dashboard-v2 .ps-lun-s1 { animation-delay: 0s; animation-duration: 2.4s; } body.dashboard-v2 .ps-lun-s2 { animation-delay: 0.4s; animation-duration: 3.1s; } body.dashboard-v2 .ps-lun-s3 { animation-delay: 0.8s; animation-duration: 2.7s; } body.dashboard-v2 .ps-lun-s4 { animation-delay: 1.2s; animation-duration: 3.5s; } body.dashboard-v2 .ps-lun-s5 { animation-delay: 0.2s; animation-duration: 2.9s; } body.dashboard-v2 .ps-lun-s6 { animation-delay: 1.6s; animation-duration: 3.3s; } @keyframes psLunTwinkle { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } } body.dashboard-v2 .ps-room-lun-sep { flex: 0 0 auto; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, rgba(184,145,80,0.6), transparent); } /* T5h (12): the lunation's name-strip line — bolder AND larger, no whisper */ body.dashboard-v2 .ps-room-lun-name { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: 19px; color: var(--v2-burgundy); } /* ask-your-chart — the scroll + question bubble */ body.dashboard-v2 .ps-room-ask { display: flex; align-items: center; gap: 14px; } body.dashboard-v2 .ps-room-ask-art { flex: 0 0 auto; width: 52px; height: 52px; } body.dashboard-v2 .ps-room-ask-art svg { display: block; width: 100%; height: 100%; overflow: visible; } /* T5g: the quill writes — a gentle nib-anchored sway (static when reduced) */ body.dashboard-v2 .ps-quill { transform-origin: 30px 28px; animation: psQuillWrite 3.4s ease-in-out infinite; } @keyframes psQuillWrite { 0%, 100% { transform: rotate(0deg) translate(0, 0); } 25% { transform: rotate(-4deg) translate(-0.6px, 0.4px); } 55% { transform: rotate(2.5deg) translate(0.5px, -0.3px); } 78% { transform: rotate(-2deg) translate(-0.3px, 0.2px); } } /* the ink line shimmers wet, then rests */ body.dashboard-v2 .ps-ink-line { stroke-dasharray: 26; animation: psInkFlow 3.4s ease-in-out infinite; } @keyframes psInkFlow { 0% { stroke-dashoffset: 26; opacity: 0.35; } 55%, 100%{ stroke-dashoffset: 0; opacity: 1; } } body.dashboard-v2 .ps-room-ask-bubble { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600; /* T5h (13): the question speaks up */ font-size: 16px; line-height: 1.5; color: var(--v2-ink); padding: 10px 14px; border-radius: 14px 14px 3px 14px; background: rgba(107,31,44,0.06); border: 1px solid rgba(107,31,44,0.22); } /* numerology — T5g: the FULL ledger, six numerals from birth date alone */ body.dashboard-v2 .ps-room-numgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 0; margin: 0 -10px; /* bleed into the prev-box padding for more room per cell */ } body.dashboard-v2 .ps-room-num-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 0 4px; } body.dashboard-v2 .ps-room-num-cell + .ps-room-num-cell { border-left: 1px solid rgba(184,145,80,0.3); } body.dashboard-v2 .ps-room-num-big { font-family: 'Cinzel Decorative', serif; font-weight: 700; font-size: 31px; line-height: 1.1; color: var(--v2-burgundy); } body.dashboard-v2 .ps-room-num-lbl { font-family: 'EB Garamond', serif; font-variant: small-caps; font-weight: 700; font-size: 13.5px; letter-spacing: 0.5px; text-transform: none; text-align: center; line-height: 1.15; white-space: nowrap; color: var(--v2-burgundy); } /* chart vault — T5g: the backup's slots indicator, regilt */ body.dashboard-v2 .ps-room-vault { display: flex; align-items: center; gap: 14px; } body.dashboard-v2 .ps-vault-dots { display: flex; gap: 7px; } body.dashboard-v2 .ps-vault-dot { width: 15px; height: 15px; border-radius: 50%; background: rgba(184, 145, 80, 0.10); border: 1px solid rgba(142, 110, 58, 0.5); box-shadow: inset 0 1px 2px rgba(45, 31, 56, 0.08); } body.dashboard-v2 .ps-vault-dot.is-filled { background: linear-gradient(180deg, #E9CD92, #D4AC68); border-color: #8E6E3A; box-shadow: 0 0 8px rgba(212, 172, 104, 0.55); } body.dashboard-v2 .ps-vault-count { font-family: 'Cinzel', serif; font-weight: 700; font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--v2-burgundy); } body.dashboard-v2 .ps-vault-kept { /* Michael 2026-08-17: same voice as the Life Path meaning line — larger, upright, full ink */ font-family: 'EB Garamond', serif; font-style: normal; font-weight: 500; font-size: 18.5px; line-height: 1.55; color: var(--v2-ink); margin: 9px 0 0; } /* transit highlights — T5g: the live three-row aspect list */ body.dashboard-v2 .ps-room-transits { display: flex; flex-direction: column; gap: 6px; margin: 0 0 9px; } body.dashboard-v2 .ps-room-transits:empty { margin: 0; } body.dashboard-v2 .ps-tr-row { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 17.5px; line-height: 1.4; color: var(--v2-ink); margin: 0; } body.dashboard-v2 .ps-tr-row .ps-hit-t { font-size: 19px; color: var(--v2-gold-deep); } /* T5h (15): aspect glyphs here inherit the shared per-glyph normalization (.ps-hit-a.ps-asp--*) — no local size/weight override to fight it */ /* solar return — the sun cresting the horizon beside the countdown */ body.dashboard-v2 .ps-room-srrise { display: flex; align-items: center; gap: 16px; } body.dashboard-v2 .ps-sr-art { flex: 0 0 auto; width: 78px; height: 51px; } body.dashboard-v2 .ps-sr-art svg { display: block; width: 100%; height: 100%; } /* the CTA — the wine-red pill (mirrors sr-view-v2.css .mr-view-back) */ body.dashboard-v2 .ps-room-cta { display: block; text-align: center; text-decoration: none; font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--v2-parchment); background: linear-gradient(180deg, var(--v2-burgundy), var(--v2-burgundy-deep)); border: 1px solid var(--v2-gold-deep); border-radius: 999px; padding: 13px 24px; box-shadow: 0 2px 8px rgba(74,22,32,0.25); transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s; } body.dashboard-v2 .ps-room-cta:hover { transform: translateY(-1px); border-color: var(--v2-gold-bright); color: #fff; background: linear-gradient(180deg, var(--v2-burgundy-deep), var(--v2-burgundy)); box-shadow: 0 5px 14px rgba(74,22,32,0.35); } body.dashboard-v2 .ps-room-cta:focus-visible { outline: 2px solid var(--v2-gold-bright); outline-offset: 2px; } /* ── MY READINGS — the section's crown closer (T5g): a wide library card, bookshelf whose spines count the member's actual readings, warm vellum, and one radiant gold CTA ── */ body.dashboard-v2 .ps-room--library { flex-direction: row; align-items: center; gap: 30px; padding: 30px 34px; background: radial-gradient(ellipse 80% 90% at 12% 50%, rgba(184, 145, 80, 0.10), transparent 60%), linear-gradient(180deg, var(--v2-vellum-warm), var(--v2-vellum)); border-color: var(--v2-gold-bright); box-shadow: 0 10px 26px rgba(45, 31, 56, 0.08); } body.dashboard-v2 .ps-lib-shelf { flex: 0 0 230px; filter: drop-shadow(0 3px 8px rgba(45, 31, 56, 0.14)); } body.dashboard-v2 .ps-lib-shelf svg { display: block; width: 100%; height: auto; } body.dashboard-v2 .ps-lib-meta { flex: 1 1 auto; min-width: 0; } body.dashboard-v2 .ps-room--library .ps-room-title { font-size: 26px; margin-bottom: 10px; } /* T5h (14): NO typography overrides here — all nine room subs share the one .ps-room-sub rule exactly (font/size/weight/color); layout-only tweaks */ body.dashboard-v2 .ps-room--library .ps-room-sub { margin-bottom: 0; max-width: 56ch; } body.dashboard-v2 .ps-lib-count { color: var(--v2-burgundy); font-weight: 600; } body.dashboard-v2 .ps-room-cta--gold { flex: 0 0 auto; color: var(--v2-burgundy-deep); background: linear-gradient(180deg, var(--v2-gold-pale), var(--v2-gold-bright) 50%, var(--v2-gold-deep)); border: 1.5px solid var(--v2-gold-deep); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); box-shadow: 0 5px 16px rgba(74, 22, 32, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45); padding: 15px 30px; } body.dashboard-v2 .ps-room-cta--gold:hover { color: var(--v2-burgundy-deep); background: linear-gradient(180deg, var(--v2-gold-pale), var(--v2-gold-bright) 50%, var(--v2-gold-deep)); filter: brightness(1.05); border-color: var(--v2-gold-deep); box-shadow: 0 8px 20px rgba(74, 22, 32, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5); } /* room illustrations rest under reduced motion */ @media (prefers-reduced-motion: reduce) { body.dashboard-v2 .ps-med-sun, body.dashboard-v2 .ps-med-rays, body.dashboard-v2 .ps-med-orbiter, body.dashboard-v2 .ps-natal-medallion, body.dashboard-v2 .ps-lun-glow, body.dashboard-v2 .ps-lun-star, body.dashboard-v2 .ps-quill, body.dashboard-v2 .ps-ink-line { animation: none !important; } body.dashboard-v2 .ps-ink-line { stroke-dasharray: none; } } /* ═══ RESPONSIVE ════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { /* Marvels: two per row, the moon still leading; the sky art quiets down */ body.dashboard-v2 .ps-marvels { grid-template-columns: repeat(6, 1fr); gap: 22px 20px; } body.dashboard-v2 .ps-cell--moon, body.dashboard-v2 .ps-cell--meter, body.dashboard-v2 .ps-cell--day, body.dashboard-v2 .ps-cell--card { grid-column: span 3; } body.dashboard-v2 .ps-alm-cols { grid-template-columns: 1fr 1fr 1fr; } body.dashboard-v2 .ps-alm-col { padding: 0 18px; } body.dashboard-v2 .ps-constellation-wrap { width: 130px; opacity: 0.85; } body.dashboard-v2 .ps-celestial { width: 130px; opacity: 0.9; } /* T5g: five marvels fold to 2-up (2 + 2 + 1) */ body.dashboard-v2 .ps-daily { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 900px) { /* The week folds into two rows (4 + 3) — never a horizontal scroll, and the almanac's three columns stack behind horizontal hairlines */ body.dashboard-v2 .ps-week-strip { grid-template-columns: repeat(4, 1fr); } body.dashboard-v2 .ps-alm-cols { grid-template-columns: 1fr; gap: 18px; } body.dashboard-v2 .ps-alm-col { padding: 18px 0 0; border-left: none; border-top: 1px solid rgba(229, 198, 138, 0.18); } body.dashboard-v2 .ps-alm-col:first-child { padding-top: 0; border-top: none; } } @media (max-width: 860px) { body.dashboard-v2 .ps-rooms-grid { grid-template-columns: 1fr; } body.dashboard-v2 .ps-room--wide { grid-column: auto; } /* the library closer stacks: shelf, words, CTA */ body.dashboard-v2 .ps-room--library { flex-direction: column; align-items: center; text-align: center; gap: 20px; } body.dashboard-v2 .ps-lib-shelf { flex: 0 0 auto; width: 210px; } } @media (max-width: 700px) { body.dashboard-v2 .ps-band { padding: 30px 0 32px; } body.dashboard-v2 .ps-band-inner, body.dashboard-v2 .ps-main { padding-left: 18px; padding-right: 18px; } /* T7a: .ps-pills 18px moved to dashboard-pills.css */ /* the date/greeting swap holds its hierarchy at phone scale */ body.dashboard-v2 .ps-eyebrow { font-size: 21px; letter-spacing: 2.2px; } body.dashboard-v2 .ps-greeting { font-size: 19px; } /* Marvels stack: moon first, then day + card side by side, then the meter */ body.dashboard-v2 .ps-marvels { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; } body.dashboard-v2 .ps-cell, body.dashboard-v2 .ps-week { padding: 14px 14px 16px; } body.dashboard-v2 .ps-cell--moon { grid-column: span 2; order: 1; } body.dashboard-v2 .ps-cell--day { grid-column: span 1; order: 2; } body.dashboard-v2 .ps-cell--card { grid-column: span 1; order: 3; } body.dashboard-v2 .ps-cell--meter { grid-column: span 2; order: 4; } body.dashboard-v2 .ps-almanac { margin-top: 14px; } body.dashboard-v2 .ps-almanac > .ps-cell-lbl { font-size: 17px; } body.dashboard-v2 .ps-cell-lbl { font-size: 14px; letter-spacing: 1.6px; } body.dashboard-v2 .ps-tarot { width: 74px; height: 125px; } body.dashboard-v2 .ps-tarot-name { font-size: 13.5px; letter-spacing: 1.4px; } /* week cells: still 4-up (two rows), a touch tighter — side padding kept slim so "Ascendant"/"Midheaven" fit without mid-word breaks */ body.dashboard-v2 .ps-week-strip { gap: 5px; } /* T5i (4): on the 4-up two-row phone grid there's no clean lane BETWEEN rows, so the tag returns INSIDE its box (a negative-top tag would overlap the row above). The strip's top lane collapses; boxes reserve their own top padding. */ body.dashboard-v2 .ps-week-strip { padding-top: 0; row-gap: 9px; } body.dashboard-v2 .ps-wd { padding: 25px 6px 10px; } body.dashboard-v2 .ps-wd-big { top: 4px; font-size: 9px; letter-spacing: 1.1px; padding: 2px 7px 1px; max-width: calc(100% - 4px); } body.dashboard-v2 .ps-wd-dow { letter-spacing: 1px; } body.dashboard-v2 .ps-wd-lbl { line-height: 1.35; } /* progressed Moon line stacks its arc above the words on a phone */ body.dashboard-v2 .ps-band-foot { flex-direction: column; gap: 8px; font-size: 16px; } /* numbers band: stacked cells behind horizontal hairlines, link beneath */ body.dashboard-v2 .ps-numbers-row { grid-template-columns: 1fr; } body.dashboard-v2 .ps-numcell { justify-content: flex-start; padding: 10px 2px; text-align: left; } body.dashboard-v2 .ps-numcell + .ps-numcell { border-left: none; border-top: 1px solid rgba(229, 198, 138, 0.18); } body.dashboard-v2 .ps-numcell-n { font-size: 36px; } /* the sky art slims to flank the centered greeting on a phone */ body.dashboard-v2 .ps-constellation-wrap { width: 130px; right: -20px; top: 30px; opacity: 0.55; } body.dashboard-v2 .ps-celestial { width: 96px; left: -14px; top: -6px; opacity: 0.7; } /* Task 4: the letter keeps its manuscript feel on a phone */ body.dashboard-v2 .ps-letter { padding: 8px; } body.dashboard-v2 .ps-letter::after { inset: 4px; } body.dashboard-v2 .ps-letter-cap { padding: 14px 14px 18px; } body.dashboard-v2 .ps-letter-page { padding: 24px 18px 28px; } body.dashboard-v2 .tg-title { font-size: 36px; } body.dashboard-v2 .tg-intro { font-size: 17.5px; } body.dashboard-v2 .tg-body { font-size: 17px; } body.dashboard-v2 .tg-head { font-size: 19px; } /* daily marvels: one column — the shared row lanes relax to content height (nothing to cross-align in a single column) */ body.dashboard-v2 .ps-daily { grid-template-columns: 1fr; } /* T5i (5): the plum band's side gutter tightens on a phone */ body.dashboard-v2 .ps-daily-band { padding: 30px 18px 34px; } body.dashboard-v2 .ps-daily-card { padding: 18px 16px 16px; grid-template-rows: auto auto auto auto; row-gap: 8px; } body.dashboard-v2 .ps-daily-motif { width: 44px; height: 44px; } /* the numerology ledger breathes at phone width */ body.dashboard-v2 .ps-room-numgrid { grid-template-columns: repeat(3, 1fr); gap: 14px 4px; } body.dashboard-v2 .ps-room-num-cell:nth-child(4) { border-left: none; } /* local sky rows keep their grace on a phone */ body.dashboard-v2 .ps-lsky-time { font-size: 15.5px; } /* Reading Rooms cards, tucked for a phone */ body.dashboard-v2 .ps-room { padding: 20px 18px 20px; } body.dashboard-v2 .ps-room-title { font-size: 20px; } body.dashboard-v2 .ps-rooms-hd { font-size: 20px; } } /* ═══ TASK 6 — CATEGORY DOORWAY PAGES (Your Chart / Sky Now / Numbers / Tarot) ═══ Scoped to body.dashboard-v2 so nothing here can leak onto dashboard.php or any other v2 page. Reuses the illuminated-manuscript language: parchment body, vellum cards, gold hairlines, Cinzel labels, EB Garamond body copy. ═════════════ */ body.dashboard-v2 .psc-wrap { max-width: 900px; margin: 0 auto; padding: 26px 26px 64px; } /* ── Back pill — wine-red, mirrors css/sr-view-v2.css .mr-view-back ── */ body.dashboard-v2 .psc-back { display: inline-block; font-family: 'Cinzel', serif; font-weight: 600; font-size: 12.5px; letter-spacing: 1.3px; text-transform: uppercase; text-decoration: none; color: var(--v2-parchment); background: linear-gradient(180deg, var(--v2-burgundy), var(--v2-burgundy-deep)); padding: 11px 22px; border: 1px solid var(--v2-gold-deep); border-radius: 999px; box-shadow: 0 2px 8px rgba(74,22,32,0.25); transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s; margin-bottom: 26px; } body.dashboard-v2 .psc-back:hover { transform: translateY(-1px); border-color: var(--v2-gold-bright); color: #fff; background: linear-gradient(180deg, var(--v2-burgundy-deep), var(--v2-burgundy)); box-shadow: 0 5px 14px rgba(74,22,32,0.35); } body.dashboard-v2 .psc-back:focus-visible { outline: 2px solid var(--v2-gold-bright); outline-offset: 2px; } /* ── The hero — parchment plate with centered art, title, subtitle ── */ body.dashboard-v2 .psc-hero { text-align: center; padding: 8px 12px 40px; } body.dashboard-v2 .psc-hero-art { display: block; margin: 0 auto 18px; width: 120px; height: 120px; } body.dashboard-v2 .psc-hero-art svg { display: block; width: 120px; height: 120px; } body.dashboard-v2 .psc-title { font-family: 'Marcellus', serif; font-weight: 400; font-size: 34px; color: var(--v2-ink); margin: 0 0 10px; } body.dashboard-v2 .psc-sub { font-family: 'EB Garamond', serif; font-style: italic; font-size: 18px; color: var(--v2-ink-soft); margin: 0; } /* ── Live top block — the day's real data, ahead of the tool cards ── */ body.dashboard-v2 .psc-live { background: var(--v2-vellum); border: 1px solid var(--v2-gold); border-radius: 14px; padding: 28px 30px; margin: 0 0 34px; box-shadow: 0 6px 18px rgba(45,31,56,0.05); text-align: center; } body.dashboard-v2 .psc-live-eyebrow { font-family: 'Cinzel', serif; font-weight: 600; font-size: 11.5px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--v2-gold-deep); margin: 0 0 10px; } body.dashboard-v2 .psc-live-big { font-family: 'Cinzel', serif; font-weight: 600; font-size: 22px; color: var(--v2-gold-deep); margin: 0 0 8px; } body.dashboard-v2 .psc-live-meaning { font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.6; color: var(--v2-ink); margin: 0 0 14px; max-width: 56ch; margin-left: auto; margin-right: auto; } body.dashboard-v2 .psc-live-quiet { font-family: 'EB Garamond', serif; font-style: italic; font-size: 14.5px; color: var(--v2-ink-soft); margin: 0; padding-top: 12px; border-top: 1px solid rgba(184,145,80,0.3); } /* ── Numerology live top — the big ringed Personal Day number ── */ body.dashboard-v2 .psc-live--num { padding: 32px 30px 30px; } body.dashboard-v2 .psc-num-ring { width: 110px; height: 110px; margin: 0 auto 16px; border-radius: 50%; border: 2px solid var(--v2-gold); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(212,172,104,0.08), transparent 70%); } body.dashboard-v2 .psc-num-big { font-family: 'Cinzel Decorative', serif; font-weight: 700; font-size: 64px; line-height: 1; color: var(--v2-gold-bright); } body.dashboard-v2 .psc-num-line { font-family: 'EB Garamond', serif; font-size: 17px; color: var(--v2-ink); margin: 0 0 10px; } body.dashboard-v2 .psc-num-year { font-family: 'EB Garamond', serif; font-style: italic; font-size: 15px; color: var(--v2-ink-soft); margin: 0; } /* ── Tarot live top — revealed card, left art / right meta ── */ body.dashboard-v2 .psc-live--tarot { display: flex; align-items: center; gap: 26px; text-align: left; padding: 24px 28px; } body.dashboard-v2 .psc-tarot-img { flex: 0 0 auto; width: 140px; height: auto; border-radius: 8px; border: 2px solid var(--v2-gold-deep); box-shadow: 0 6px 18px rgba(45,31,56,0.15); } body.dashboard-v2 .psc-tarot-info { flex: 1 1 auto; min-width: 0; } body.dashboard-v2 .psc-tarot-name { font-family: 'Cinzel', serif; font-weight: 600; font-size: 20px; color: var(--v2-ink); margin: 0 0 8px; } body.dashboard-v2 .psc-tarot-rev { font-style: italic; color: var(--v2-gold-deep); } body.dashboard-v2 .psc-tarot-short { font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.6; color: var(--v2-ink); margin: 0 0 10px; } body.dashboard-v2 .psc-tarot-drawn { font-family: 'EB Garamond', serif; font-style: italic; font-size: 15px; color: var(--v2-gold-deep); margin: 0; } /* ── Tool cards — model on .ps-door, vellum with gold border, hover lift ── */ body.dashboard-v2 .psc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } body.dashboard-v2 .psc-card { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; background: var(--v2-vellum); border: 1px solid var(--v2-gold); border-radius: 12px; padding: 24px 20px 22px; box-shadow: 0 6px 18px rgba(45,31,56,0.05); transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } body.dashboard-v2 .psc-card:hover { transform: translateY(-3px); border-color: var(--v2-gold-bright); box-shadow: 0 12px 26px rgba(45,31,56,0.10); } body.dashboard-v2 .psc-card:focus-visible { outline: 2px solid var(--v2-gold-bright); outline-offset: 3px; } body.dashboard-v2 .psc-card-motif { display: block; width: 40px; height: 40px; margin-bottom: 12px; } body.dashboard-v2 .psc-card-motif svg { display: block; width: 40px; height: 40px; transition: filter 220ms ease; } body.dashboard-v2 .psc-card:hover .psc-card-motif svg { filter: drop-shadow(0 0 6px rgba(212,172,104,0.5)); } body.dashboard-v2 .psc-card-name { font-family: 'Cinzel', serif; font-weight: 600; font-size: 16px; letter-spacing: 0.6px; color: var(--v2-ink); margin: 0 0 8px; transition: color 220ms ease; } body.dashboard-v2 .psc-card:hover .psc-card-name { color: var(--v2-burgundy); } body.dashboard-v2 .psc-card-desc { font-family: 'EB Garamond', serif; font-size: 15px; line-height: 1.55; color: var(--v2-ink-soft); margin: 0; max-width: 34ch; } body.dashboard-v2 .psc-card-note { font-family: 'EB Garamond', serif; font-style: italic; font-size: 13.5px; color: var(--v2-gold-deep); margin: 10px 0 0; } /* ── Responsive ── */ @media (max-width: 700px) { body.dashboard-v2 .psc-wrap { padding: 18px 18px 48px; } body.dashboard-v2 .psc-hero { padding: 4px 0 30px; } body.dashboard-v2 .psc-hero-art { width: 92px; height: 92px; } body.dashboard-v2 .psc-hero-art svg { width: 92px; height: 92px; } body.dashboard-v2 .psc-title { font-size: 27px; } body.dashboard-v2 .psc-sub { font-size: 16px; } body.dashboard-v2 .psc-cards { grid-template-columns: 1fr; } body.dashboard-v2 .psc-live { padding: 22px 20px; } body.dashboard-v2 .psc-live--tarot { flex-direction: column; text-align: center; } body.dashboard-v2 .psc-num-big { font-size: 52px; } body.dashboard-v2 .psc-num-ring { width: 92px; height: 92px; } } /* Week-strip fete lines — birthdays + holidays (controller, post-T5g) */ body.dashboard-v2 .ps-wd-fete { display: block; margin-top: 4px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 13.5px; letter-spacing: 0.8px; color: var(--v2-rose, #D9968F); } body.dashboard-v2 .ps-wd.is-loud .ps-wd-fete { color: #7A2233; } /* ══════════════════════════════════════════════════════════════════════════ YOUR CHART category page (dv17) — APPEND ONLY. A premium display hero (Cinzel Decorative title + EB Garamond italic tagline over a gold fleuron rule) grouping the THREE Reading Rooms cards reused verbatim from dashboard.php. The .ps-room* card styles above are NOT touched — only the page hero + this page's card-grid layout live here. ══════════════════════════════════════════════════════════════════════════ */ /* Wider column so the three reused Reading Rooms cards breathe (2-up desktop). */ body.dashboard-v2 .psc-wrap--your-chart { max-width: 1080px; } /* ── The hero — display title + tagline over a centered gold fleuron rule ── */ body.dashboard-v2 .psc-hero--your-chart { padding: 14px 12px 30px; } body.dashboard-v2 .psc-hero-title { font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 700; font-size: clamp(40px, 6vw, 60px); line-height: 1.05; letter-spacing: 1px; color: var(--v2-burgundy); margin: 0 0 14px; text-shadow: 0 1px 0 rgba(229,198,138,0.35); } body.dashboard-v2 .psc-hero-tagline { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--v2-gold-deep); max-width: 560px; margin: 0 auto; } /* The Reading-Rooms-opener flourish: a gold rule split by a centered fleuron */ body.dashboard-v2 .psc-hero-rule { position: relative; height: 1px; width: 220px; max-width: 70%; margin: 24px auto 0; background: linear-gradient(90deg, transparent, rgba(184,145,80,0.6) 30%, rgba(184,145,80,0.6) 70%, transparent); } body.dashboard-v2 .psc-hero-rule span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 12px; background: var(--v2-parchment); color: var(--v2-gold); font-size: 18px; line-height: 1; } /* ── The card grid — the three reused rooms, 2-up desktop / 1-up mobile ── */ body.dashboard-v2 .psc-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; } /* The whole card is the link now (was a
on the dashboard) — kill the inherited underline on all its text; the card lift + CTA carry the affordance. */ body.dashboard-v2 .psc-rooms .ps-room, body.dashboard-v2 .psc-rooms .ps-room:hover { text-decoration: none; } /* Push each card's wine-red CTA to the bottom so all three align. */ body.dashboard-v2 .psc-rooms .ps-room-cta { margin-top: auto; } /* The third card centers under the first two on desktop — but only when it's the LAST card (3-card pages). A 4th card (e.g. /dashboard/your-chart/'s astrocartography doorway, Task 10) falls through to the plain 2x2 grid. */ body.dashboard-v2 .psc-rooms .ps-room:nth-child(3):last-child { grid-column: 1 / -1; max-width: calc(50% - 11px); margin: 0 auto; } /* Same fix, one row down — /dashboard/your-chart/ grew a 5th room (Solar Return, Task 18). The odd one out at the end of a 2-up grid orphans to the left; center it under the pair above instead. */ body.dashboard-v2 .psc-rooms .ps-room:nth-child(5):last-child { grid-column: 1 / -1; max-width: calc(50% - 11px); margin: 0 auto; } @media (max-width: 700px) { body.dashboard-v2 .psc-hero-title { font-size: clamp(34px, 12vw, 46px); } body.dashboard-v2 .psc-hero-tagline { font-size: 17px; } body.dashboard-v2 .psc-rooms { grid-template-columns: 1fr; } body.dashboard-v2 .psc-rooms .ps-room:nth-child(3):last-child, body.dashboard-v2 .psc-rooms .ps-room:nth-child(5):last-child { grid-column: auto; max-width: none; margin: 0; } } /* ══════════════════════════════════════════════════════════════════════════ NUMEROLOGY category page (dv22) — APPEND ONLY. The Life Path + Personal Day cards use the shared .ps-room shell; only their big ringed numeral treatment is new. Scoped to body.dashboard-v2 (loosened from .ps-category 2026-07-12 — the home reuses these) so nothing leaks onto dashboard.php or other pages. ══════════════════════════════════════════════════════════════════════════ */ body.dashboard-v2 .ps-room-numeral-block { display: flex; align-items: center; gap: 18px; } /* Personal Day hero (Michael 2026-08-17): the circled number LARGE and centered, filling the preview box, its meaning line beneath. */ body.dashboard-v2 .ps-room-numeral-block--hero { flex-direction: column; justify-content: center; gap: 12px; padding: 8px 0 4px; } body.dashboard-v2 .ps-room-numeral-block--hero .ps-room-numeral { width: 150px; height: 150px; } body.dashboard-v2 .ps-room-numeral-block--hero .ps-room-numeral svg { width: 150px; height: 150px; } body.dashboard-v2 .ps-room-numeral-block--hero .ps-room-numeral-n { font-size: 66px; } body.dashboard-v2 .ps-room-numeral-block--hero .ps-room-numeral-line { text-align: center; margin: 0; } /* Row-balancing (Michael 2026-08-17, round 2): paired rooms' preview boxes get an EQUAL fixed height per pair (--prev-h) and stay bottom-anchored (the base margin:auto top), so tops AND bottoms align across the row — header-length differences vanish into the whitespace above the box. Content is vertically centered together as one group. Pairs: vault+life-path (default 175px), personal-day+card (275px), yes-no+three-card (300px). */ body.dashboard-v2 .ps-room-prev--fill { display: flex; flex-direction: column; justify-content: center; min-height: var(--prev-h, 175px); } /* Yes/No + Three-Card internals (Michael 2026-08-17): labels pinned to the top, captions sharing the same baseline at the bottom, artwork centered in the space between — and the balance drawn a touch larger. */ body.dashboard-v2 .ps-room-prev--gate { justify-content: flex-start; } body.dashboard-v2 .ps-room-prev--gate .ps-room-tarot--gate { flex: 1; display: flex; min-height: 0; } body.dashboard-v2 .ps-room-prev--gate .ps-room-gate-art { flex: 1; display: flex; align-items: center; justify-content: center; height: auto; } body.dashboard-v2 .ps-room-prev--gate .ps-room-gate-line { margin: 0 auto; } body.dashboard-v2 .ps-room-prev--gate .ps-room-gate-art:not(.ps-room-gate-art--backs) svg { height: 128px; } body.dashboard-v2 .ps-room-numeral { position: relative; flex: 0 0 auto; width: 76px; height: 76px; display: block; } body.dashboard-v2 .ps-room-numeral svg { display: block; width: 76px; height: 76px; } body.dashboard-v2 .ps-room-numeral-n { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 700; font-size: 34px; line-height: 1; color: var(--v2-burgundy); } body.dashboard-v2 .ps-room-numeral-line { flex: 1 1 auto; min-width: 0; font-family: 'EB Garamond', serif; font-size: 18.5px; line-height: 1.55; color: var(--v2-ink); margin: 0; } body.dashboard-v2 .ps-room-numeral-line em { font-style: italic; font-weight: 600; color: var(--v2-burgundy); } /* ══════════════════════════════════════════════════════════════════════════ TAROT category page (dv22) — APPEND ONLY. Card 1 (LIVE) shows today's real drawn card image, gold-framed, beside its name + short meaning. Cards 2 & 3 are engraved gateway illustrations (yes/no balance-card, three fanned cards). Uses the shared .ps-room shell; only the card art below is new. Scoped to body.dashboard-v2 (loosened from .ps-category 2026-07-12 — the home reuses these). ══════════════════════════════════════════════════════════════════════════ */ body.dashboard-v2 .ps-room-tarot { display: flex; align-items: center; gap: 16px; } body.dashboard-v2 .ps-room-tarot--gate { flex-direction: column; text-align: center; gap: 12px; } /* the live card image, gold-framed (~96px) — floats + shimmers like the Yes/No vitrine reveal, so today's card feels alive on the shelf */ body.dashboard-v2 .ps-room-tarot-frame { position: relative; flex: 0 0 auto; display: block; line-height: 0; border-radius: 7px; border: 2px solid var(--v2-gold-deep); box-shadow: 0 6px 16px rgba(45,31,56,0.18), 0 0 0 4px rgba(212,172,104,0.10); overflow: hidden; animation: psTarotFloat 5.5s ease-in-out infinite; } /* a light sweeps across the card face, like a gilt foil catching candlelight */ body.dashboard-v2 .ps-room-tarot-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 34%, rgba(255,247,224,0.55) 48%, rgba(212,172,104,0.30) 53%, transparent 68%); background-size: 260% 260%; animation: psTarotShimmer 5.5s ease-in-out infinite; pointer-events: none; } body.dashboard-v2 .ps-room:hover .ps-room-tarot-frame { animation-play-state: paused; transform: translateY(-4px) rotate(-1deg); box-shadow: 0 12px 24px rgba(45,31,56,0.22), 0 0 0 4px rgba(212,172,104,0.20); transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.5s ease; } body.dashboard-v2 .ps-room-tarot-img { display: block; width: 96px; height: auto; } @keyframes psTarotFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-0.6deg); } } @keyframes psTarotShimmer { 0% { background-position: 150% 0; } 55%, 100% { background-position: -50% 0; } } @media (prefers-reduced-motion: reduce) { body.dashboard-v2 .ps-room-tarot-frame { animation: none; } body.dashboard-v2 .ps-room-tarot-frame::after { animation: none; opacity: 0; } } body.dashboard-v2 .ps-room-tarot-meta { flex: 1 1 auto; min-width: 0; } body.dashboard-v2 .ps-room-tarot-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 17px; color: var(--v2-burgundy); margin: 0 0 6px; } body.dashboard-v2 .ps-room-tarot-rev { font-style: italic; font-weight: 400; color: var(--v2-gold-deep); } body.dashboard-v2 .ps-room-tarot-short { font-family: 'EB Garamond', serif; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--v2-ink); margin: 0 0 7px; } body.dashboard-v2 .ps-room-tarot-drawn { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: 15px; color: var(--v2-burgundy); margin: 0; } /* the engraved gateway illustration + its one-line invitation */ body.dashboard-v2 .ps-room-gate-art { display: block; height: 108px; } body.dashboard-v2 .ps-room-gate-art svg { display: block; height: 108px; width: auto; margin: 0 auto; } body.dashboard-v2 .ps-room:hover .ps-room-gate-art svg { filter: drop-shadow(0 0 6px rgba(212,172,104,0.4)); transition: filter 220ms ease; } body.dashboard-v2 .ps-room-gate-line { font-family: 'EB Garamond', serif; font-size: 17.5px; font-weight: 500; line-height: 1.55; color: var(--v2-ink); margin: 0; max-width: 34ch; } /* ── Medallion motion: SR + Relocation doorway cards (Michael 2026-07-12) — ported from solar-return.css's hero medallions so the doorways move like the real pages. dv-prefixed keyframe names to avoid any collision. ── */ body.dashboard-v2 .ps-natal-medallion .srm-orbiter { transform-origin: 50px 50px; animation: dvSrmOrbit 20s linear infinite; } @keyframes dvSrmOrbit { to { transform: rotate(360deg); } } body.dashboard-v2 .ps-natal-medallion .srm-bloom { opacity: 0; animation: dvSrmBloom 20s ease-in-out infinite; } @keyframes dvSrmBloom { 0% { opacity: 0.95; } 4% { opacity: 0.95; } 12% { opacity: 0; } 92% { opacity: 0; } 100% { opacity: 0.95; } } body.dashboard-v2 .ps-natal-medallion .srm-zodiac { transform-origin: 50px 50px; animation: dvSrmTurn 90s linear infinite; } @keyframes dvSrmTurn { to { transform: rotate(360deg); } } body.dashboard-v2 .ps-natal-medallion .srm-breath { transform-origin: 50px 50px; animation: dvSrmBreath 6s ease-in-out infinite; } @keyframes dvSrmBreath { 0%, 100% { transform: scale(0.96); opacity: 0.88; } 50% { transform: scale(1.06); opacity: 1; } } @media (prefers-reduced-motion: reduce) { body.dashboard-v2 .ps-natal-medallion .srm-orbiter, body.dashboard-v2 .ps-natal-medallion .srm-bloom, body.dashboard-v2 .ps-natal-medallion .srm-zodiac, body.dashboard-v2 .ps-natal-medallion .srm-breath { animation: none !important; } body.dashboard-v2 .ps-natal-medallion .srm-bloom { opacity: 0.5; } } /* Draw-Three fan: the three card backs earn more presence (Michael 2026-07-12) — applies on the home doorway AND the tarot category page (same markup). */ body.dashboard-v2 .ps-room-gate-art--backs, body.dashboard-v2 .ps-room-gate-art--backs svg { height: 170px; } /* CN Four Pillars room card — the four cycle characters glow slowly, like candlelight catching gold leaf. Opacity only, long period, generous overlap — never a strobe. */ .dc-cn-glyph { animation: dcCnBreathe 11s ease-in-out infinite; } .dc-cn-g2 { animation-delay: 2.75s; } .dc-cn-g3 { animation-delay: 5.5s; } .dc-cn-g4 { animation-delay: 8.25s; } @keyframes dcCnBreathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } /* HD bodygraph room card — the life force travels the graph: centers glow in sequence head → throat → sacral (same candlelight rhythm as the CN pillars, opacity only), the channels shimmering gently beneath them. Michael 2026-08-17: the 11s/9s fades read as static — periods shortened + ranges widened so the motion is plainly visible, matching the other rooms' liveliness. */ .dc-cn-glyph { animation-duration: 7s; } .dc-cn-g2 { animation-delay: 1.75s; } .dc-cn-g3 { animation-delay: 3.5s; } .dc-cn-g4 { animation-delay: 5.25s; } .dc-hd-channels { animation: dcHdShimmer 6s ease-in-out infinite; } .dc-hd-c { animation: dcCnBreathe 6s ease-in-out infinite; } .dc-hd-c2 { animation-delay: 0.75s; } .dc-hd-c3 { animation-delay: 1.5s; } .dc-hd-c4 { animation-delay: 2.25s; } .dc-hd-c5 { animation-delay: 3s; } .dc-hd-c6 { animation-delay: 3s; } .dc-hd-c7 { animation-delay: 3.75s; } @keyframes dcHdShimmer { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } } /* Both medallions: the inner dashed ring turns like slow clockwork, the two little stars twinkle — visible-at-a-glance life (same spirit as the deep- readings medallions' rotating layers). */ .dc-med-ring { transform-origin: 50px 50px; animation: dcMedTurn 30s linear infinite; } @keyframes dcMedTurn { to { transform: rotate(360deg); } } .dc-med-star { animation: dcMedTwinkle 2.6s ease-in-out infinite; } .dc-med-star2 { animation-delay: 1.3s; } /* Asteroid room medallion: the tilted belt slowly orbits its rocks — the keyframes carry the -18° tilt since CSS transform replaces the attribute. */ .dc-ast-belt { transform-origin: 50px 50px; animation: dcAstBelt 36s linear infinite; } @keyframes dcAstBelt { from { transform: rotate(-18deg); } to { transform: rotate(342deg); } } /* Saturn room medallion: the ringed planet walks its long lap around the sun */ .dc-sat-orbit { transform-origin: 50px 50px; animation: dcSatOrbit 26s linear infinite; } @keyframes dcSatOrbit { to { transform: rotate(360deg); } } /* …and the happy sun dances its rays */ .dc-sat-rays { transform-origin: 50px 50px; animation: dcSatRays 2.6s ease-in-out infinite; } @keyframes dcSatRays { 0%, 100% { transform: rotate(-6deg) scale(0.94); } 50% { transform: rotate(6deg) scale(1.1); } } /* Eclipse room medallion: the diamond-flash twinkles at the corona's edge */ .dc-ecl-flash { transform-origin: 63px 36.5px; animation: dcEclFlash 2.2s ease-in-out infinite; } @keyframes dcEclFlash { 0%, 100% { opacity: 0.5; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes dcMedTwinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } } /* HD life-spark: a bead of light travels the spine crown→sacral, fading in at the head and out at the sacral — the "something more" the bodygraph needed (Michael 2026-08-17). */ .dc-hd-spark { animation: dcHdSpark 4s ease-in-out infinite; } @keyframes dcHdSpark { 0% { transform: translateY(22px); opacity: 0; } 10% { opacity: 0.95; } 80% { opacity: 0.95; } 95% { transform: translateY(84px); opacity: 0; } 100% { transform: translateY(84px); opacity: 0; } } /* Yes/No room: the apothecary balance slowly weighs — beam + pans tilt a few degrees each way around the pivot, like a held breath of deliberation. */ .dc-scale-beam { transform-origin: 60px 31px; animation: dcScaleWeigh 7s ease-in-out infinite; } @keyframes dcScaleWeigh { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } } /* Three-card room: the fan breathes — side cards easing open and closed around the fan pivot while the center card gently lifts. */ .dc-fan-l, .dc-fan-r { transform-origin: 69px 106px; } .dc-fan-l { animation: dcFanL 5.5s ease-in-out infinite; } .dc-fan-r { animation: dcFanR 5.5s ease-in-out infinite; } .dc-fan-c { animation: dcFanC 5.5s ease-in-out infinite; } @keyframes dcFanL { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } } @keyframes dcFanR { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } } @keyframes dcFanC { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .dc-cn-glyph, .dc-hd-channels, .dc-hd-c, .dc-med-ring, .dc-med-star, .dc-hd-spark, .dc-scale-beam, .dc-fan-l, .dc-fan-r, .dc-fan-c, .dc-ast-belt, .dc-sat-orbit, .dc-sat-rays, .dc-ecl-flash { animation: none !important; } .dc-hd-spark { opacity: 0; } }