/* ╔════════════════════════════════════════════════════════════╗
║ home-a.css — Variant A: "The Living Sky" ║
║ ║
║ Scoped under `body.home-a`. This file ONLY adds the ║
║ homepage-specific composition (moon-centered hero, ║
║ next-lunations strip, free-tools cards, etc.). All ║
║ inherited components are styled by: ║
║ • yes-no-tarot.css (.page-hero, .fleuron, .sealed- ║
║ letter, .celestial, .btn) ║
║ • horoscopes-v2-e.css (.cc-wayfinder, .cc-signbtn, ║
║ .cc-ephemeris) ║
║ ║
║ No new CSS variables, no @font-face, no new fonts. ║
║ Uses ONLY: EB Garamond, Italianno, Cinzel Decorative, ║
║ Noto Sans Symbols 2 — all loaded by yes-no-tarot.css. ║
╚════════════════════════════════════════════════════════════╝ */
/* ═══════════ STICKY-NAV / SMART-HIDE FIX ═══════════
The body has `cf-body` so the night-sky sign-picker can read the
--cf-night / --cf-star CSS variables defined in horoscopes-v2-f.css.
But horoscopes-v2-f.css line 15 also sets `.cf-body { overflow-x: hidden }`,
which forces overflow-y to `auto`, making a scroll container —
that breaks window.scrollY tracking, so the top-nav smart-hide stops
reappearing on scroll-up. `clip` clips overflow without creating a
scroll container, so sticky + smart-hide work again. Same fix that
Phase 17 applied sitewide in birth-chart-v2.css. */
.home-a.cf-body { overflow-x: clip; }
html:has(body.home-a) { overflow-x: clip; }
/* ═══════════ MAIN WRAPPER ═══════════ */
.home-a-main {
position: relative;
z-index: 2;
padding: 0 1.5rem 5rem;
max-width: 1240px;
margin: 0 auto;
}
/* All section-level page-hero blocks past the first one are smaller —
they're an internal eyebrow + rule + H1, not a full frontispiece. */
.home-a .home-a-mini-hero {
padding: 2.5rem 1rem 1.25rem;
margin: 0 auto 1.5rem;
max-width: 920px;
}
.home-a .home-a-mini-hero h1 {
font-size: clamp(2.1rem, 4.4vw, 3.4rem);
}
.home-a .home-a-mini-hero .page-hero-script {
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
margin-bottom: 0;
}
/* Tighter overall margin between sections. */
.home-a .fleuron.home-a-divider {
margin: 3rem auto;
max-width: 360px;
color: var(--gold);
}
/* ═══════════ 1. TOP HERO — open frontispiece ═══════════ */
.home-a-hero {
padding-top: 3rem;
padding-bottom: 1.5rem;
margin-top: 0;
}
.home-a .page-hero.home-a-hero {
padding-top: 3rem; /* keeps specificity-win over the inherited rule */
}
.home-a-hero h1 br { display: block; }
/* OVERRIDE birth-chart-v2.css's .ca-page page-hero rules (lines 2601 + 2611)
which force the H1 to burgundy AND the em to gold-deep Italianno script.
Our hero should match /tarot/tarot-card-of-the-day/ where body has NO
.ca-page class — the H1 is dark ink, the em is burgundy EB Garamond italic. */
/* Reset H1 to the yes-no-tarot.css base sizing (what /tarot/tarot-card-of-the-day/
uses since its has no classes). birth-chart-v2.css's .ca-page override
shrinks h1 from max 5rem → 4.2rem, which is why our hero looked smaller
than the tarot page's. Match the bigger original. */
.home-a .page-hero.home-a-hero h1 {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(2.6rem, 6vw, 4.6rem);
line-height: 1.04;
letter-spacing: -0.022em;
color: var(--ink);
margin: 0 0 0.4rem;
}
/* Force the
inside the H1 to actually break the line (some browsers
collapse it in italic flow). */
.home-a .page-hero.home-a-hero h1 br { display: block; }
/* Hero band — pull medallions to the outer edges + widen the paragraph. */
.home-a .home-a-hero-band {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 2.5rem;
max-width: 1320px;
margin: 1.75rem auto 0;
padding: 0;
text-align: left;
}
.home-a .home-a-hero-band .page-hero-medallion-left {
margin-left: -2.5rem;
width: 112px;
height: 112px;
}
.home-a .home-a-hero-band .page-hero-medallion-right {
margin-right: -2.5rem;
width: 112px;
height: 112px;
}
.home-a .home-a-hero-band .page-hero-subtitle {
text-align: left;
font-size: 1.18rem;
line-height: 1.6;
color: var(--ink-2, #3D2D44);
margin: 0;
max-width: 820px;
}
/* Left medallion uses .medallion-cosmic (the dark planetarium circle from
the Birth Chart apothecary card). Make it fill its slot. */
.home-a .home-a-hero-medallion-wheel .medallion-cosmic {
width: 100%;
height: 100%;
}
.home-a .home-a-hero-band .page-hero-medallion svg { width: 100%; height: 100%; }
/* Right medallion: cardBack symbol gets a soft drop shadow. */
.home-a .home-a-hero-medallion-card svg {
filter: drop-shadow(0 4px 10px rgba(58, 31, 56, 0.25));
}
@media (max-width: 880px) {
/* Mobile: the two medallions become a centered PAIR on the first row,
the paragraph drops full-width below. Flex + order does this cleanly
regardless of DOM order (left, paragraph, right). The desktop negative
margins are zeroed here so the right medallion never bleeds off-screen. */
.home-a .home-a-hero-band {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.25rem 2rem;
max-width: 720px;
text-align: center;
}
.home-a .home-a-hero-band .page-hero-medallion-left,
.home-a .home-a-hero-band .page-hero-medallion-right {
margin: 0; /* kill the -2.5rem desktop bleed */
width: 92px;
height: 92px;
order: 1; /* both medallions share the top row */
flex: 0 0 auto;
}
.home-a .home-a-hero-band .page-hero-subtitle {
order: 2; /* paragraph below the medallion pair */
flex: 0 0 100%;
text-align: center;
margin: 0 auto;
}
}
.home-a .page-hero.home-a-hero h1 em {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1em; /* override .ca-page rule's 1.5em — "Horoscopes" must
match "Birthchart" size like "the Day" matches "Tarot Card of" */
color: var(--burgundy); /* "Horoscopes" is the only burgundy word */
-webkit-text-stroke: 0;
text-stroke: 0;
text-shadow: none;
vertical-align: baseline;
}
/* Same with the script — birth-chart-v2.css recolors it to gold-deep.
Restore the tarot-style burgundy. */
.home-a .page-hero.home-a-hero .page-hero-script {
color: var(--burgundy);
-webkit-text-stroke: 0.3px var(--burgundy);
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
}
/* Page background — copied VERBATIM from the body rule in yes-no-tarot.css
(which is the body rule for /tarot/yes-no-tarot-reading/, that's just
with no class so the unscoped body styling there is the rule).
Earlier opacities were almost 2x too high; pulled back to match exactly.
Also added the body::before noise overlay that yes-no-tarot has — that
grainy overlay is half the reason the tarot page has its warmth. */
body.home-a {
background-color: var(--bg);
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-attachment: fixed;
}
body.home-a::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
url("data:image/svg+xml;utf8,");
opacity: 0.85;
mix-blend-mode: multiply;
}
/* ── iOS scroll fix ───────────────────────────────────────────────────────
On mobile, `background-attachment: fixed` + a position:fixed full-screen
noise overlay with mix-blend-mode:multiply force Safari to re-blend and
re-rasterize the whole viewport on every scroll frame — that's why the
purple Live-Sky plate visibly "rebuilds/loads" as you scroll. Desktop GPUs
handle it; phones can't. Drop both on small screens (the grain is barely
visible at phone size anyway); the warm desktop treatment is untouched. */
@media (max-width: 880px) {
body.home-a { background-attachment: scroll; }
body.home-a::before { display: none; }
}
/* ═══════════ 2. MOON-CENTERED 3-COLUMN STAGE ═══════════ */
.home-a-moonstage {
margin: 1rem auto 2.5rem;
}
.home-a-moonstage-inner {
display: grid;
grid-template-columns: 1fr 1.4fr 1fr;
gap: 1.75rem;
align-items: stretch;
max-width: 1180px;
margin: 0 auto;
}
@media (max-width: 1080px) {
.home-a-moonstage-inner { gap: 1.25rem; }
}
@media (max-width: 880px) {
.home-a-moonstage-inner {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* Side cards — parchment plate matching the brand-v2 wayfinder/ephemeris. */
.home-a .home-a-skycard,
.home-a .home-a-skystate {
background: var(--vellum);
border: 0.5px solid rgba(142, 110, 58, 0.42);
border-radius: 2px;
padding: 1.1rem 1.2rem 1.15rem; /* tightened from 1.4/1.4/1.5 — shorter cards */
box-shadow:
inset 0 0 0 4px rgba(250, 241, 225, 0.6),
inset 0 0 0 5px rgba(142, 110, 58, 0.28),
0 6px 20px rgba(58, 31, 56, 0.10);
margin: 0;
position: relative;
}
.home-a-skycard-h {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
letter-spacing: 0.22em;
font-size: 1.4rem;
color: var(--gold-deep);
margin: 0 0 0.45rem;
text-align: center;
}
.home-a .sky-card-sub {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.08rem; /* bumped from 0.95 */
color: var(--burgundy);
line-height: 1.4;
text-align: center;
margin: 0 0 1.25rem;
}
/* Sky timeline list — new structure (icon tile + body grid). The body grid
keeps label and time on one baseline, with the poetic line spanning under.
Override the inherited teal rail + circle dots from /css/styles.css. */
.home-a .sky-timeline-list {
list-style: none;
margin: 0;
padding: 0;
border-left: 0;
}
.home-a .sky-timeline-list li {
position: static;
padding: 0;
}
.home-a .sky-timeline-list li::before {
content: none;
display: none;
background: transparent;
box-shadow: none;
}
.home-a .home-a-sky-event {
display: grid;
grid-template-columns: 44px 1fr;
gap: 0.7rem;
align-items: center;
padding: 0.5rem 0;
}
.home-a .home-a-sky-event + .home-a-sky-event {
border-top: 1px dashed rgba(142, 110, 58, 0.22);
margin-top: 0.95rem; /* a touch more breathing room above the rule */
padding-top: 1.05rem; /* …and below it */
}
.home-a .home-a-sky-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
/* circle removed per user feedback — the illustrations stand on their own */
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.home-a .home-a-sky-icon svg { width: 36px; height: 36px; display: block; }
.home-a .home-a-sky-body {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 0.2rem 0.65rem;
}
.home-a .home-a-sky-label {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.2rem; /* bumped from 1.08 */
color: var(--ink);
line-height: 1.2;
}
.home-a .home-a-sky-time {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
letter-spacing: 0.08em;
font-size: 1.02rem; /* bumped from 0.95 */
color: var(--burgundy);
line-height: 1.2;
}
.home-a .home-a-sky-poetic {
grid-column: 1 / -1;
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.02rem; /* bumped from 0.92 */
color: var(--ink-2);
line-height: 1.45;
margin-top: 0.2rem;
}
.home-a .sky-timeline-empty {
font-family: 'Italianno', cursive;
font-size: 1.4rem;
color: var(--burgundy);
text-align: center;
padding: 1.5rem 0;
list-style: none;
}
/* Center moon frame — the cinematic centerpiece. */
.home-a-moonframe {
background:
radial-gradient(ellipse 75% 55% at 50% 32%, rgba(184, 145, 80, 0.10), transparent 65%),
var(--vellum);
border: 0.5px solid rgba(142, 110, 58, 0.42);
border-radius: 2px;
padding: 1.5rem 1.5rem 2rem;
box-shadow:
inset 0 0 0 5px rgba(250, 241, 225, 0.65),
inset 0 0 0 6px rgba(142, 110, 58, 0.32),
0 14px 36px rgba(58, 31, 56, 0.16);
display: flex;
align-items: center;
justify-content: center;
}
.home-a-moonfig {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}
.home-a-moonsvg {
width: 240px;
max-width: 70vw;
height: auto;
display: block;
margin: 0 auto 1.25rem;
}
/* ── New moon composition (2026-05-28) ── */
.home-a-moon-block { text-align: center; width: 100%; }
.home-a-moon-headline {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(2rem, 4vw, 2.6rem);
line-height: 1.15;
color: var(--ink);
margin: 0 0 0.3rem;
}
.home-a-moon-headline em { color: var(--burgundy); font-weight: 600; font-style: italic; }
.home-a-moon-glyph {
font-family: 'Noto Sans Symbols 2', 'EB Garamond', serif;
font-style: normal;
color: var(--burgundy);
font-size: 1em;
margin-right: 0.3rem;
}
.home-a-moon-meta-line {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.05rem;
letter-spacing: 0.04em;
color: var(--gold-deep);
margin: 0 0 0.45rem; /* tightened from 1.4rem — moon hugs the illumination caption */
}
.home-a-moon-art {
margin: 0 auto 0.55rem; /* tightened from 1.5rem — poetic line hugs the moon */
max-width: 480px;
}
.home-a-moon-art svg { width: 100%; height: auto; display: block; }
.home-a-moon-poetic {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.1rem, 1.9vw, 1.3rem);
line-height: 1.55;
color: var(--ink);
max-width: 480px;
margin: 0 auto;
}
/* Slow halo breathing — the only big motion. */
.home-a-moon-aura {
transform-box: fill-box;
transform-origin: center;
animation: home-a-moonpulse 7s ease-in-out infinite;
}
@keyframes home-a-moonpulse {
0%, 100% { opacity: 0.65; transform: scale(0.97); }
50% { opacity: 1; transform: scale(1.06); }
}
.home-a-moon-tw [class*="home-a-moon-tw-"] {
transform-box: fill-box;
transform-origin: center;
animation: home-a-twinkle 3.2s ease-in-out infinite;
}
.home-a-moon-tw .home-a-moon-tw-1 { animation-delay: 0s; animation-duration: 3.0s; }
.home-a-moon-tw .home-a-moon-tw-2 { animation-delay: 0.7s; animation-duration: 4.1s; }
.home-a-moon-tw .home-a-moon-tw-3 { animation-delay: 1.3s; animation-duration: 3.5s; }
.home-a-moon-tw .home-a-moon-tw-4 { animation-delay: 0.4s; animation-duration: 2.9s; }
@keyframes home-a-twinkle {
0%, 100% { opacity: 0.35; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
.home-a-moon-aura,
.home-a-moon-tw > * { animation: none !important; }
}
/* Moon caption type — pure brand-v2 stack. */
.home-a-moon-caption { width: 100%; max-width: 360px; }
.home-a-moon-eyebrow {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
letter-spacing: 0.24em;
font-size: 0.85rem;
color: var(--gold-deep);
margin-bottom: 0.35rem;
}
.home-a-moon-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.85rem;
line-height: 1.05;
color: var(--ink);
margin-bottom: 0.35rem;
}
.home-a-moon-title em { color: var(--burgundy); font-weight: 600; }
.home-a-moon-title .glyph {
font-family: 'Noto Sans Symbols 2', 'EB Garamond', serif;
font-style: normal;
color: var(--burgundy);
font-size: 1.2em;
margin-right: 0.15em;
}
.home-a-moon-meta {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
letter-spacing: 0.14em;
font-size: 0.82rem;
color: var(--ink-mute);
margin-bottom: 0.85rem;
}
.home-a-moon-dot { margin: 0 0.4em; }
.home-a-moon-script {
font-family: 'Italianno', cursive;
font-size: 1.85rem;
color: var(--burgundy);
line-height: 1;
margin-bottom: 0.45rem;
-webkit-text-stroke: 0.4px var(--burgundy);
}
.home-a-moon-selene {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.05rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0;
}
/* Sky state list — key/value pairs.
Readability rework (2026-05-28b):
Switched keys from EB Garamond + small-caps + 0.16em letter-spacing
(stretched + thin) to Cinzel uppercase at slightly larger size — much
more architectural and legible at this scale. Values went from italic
EB Garamond to roman EB Garamond so numerals like "Day 12 of 29" read
cleanly without the italic skew making digits feel slanted. */
.home-a-statelist {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 0.85rem;
}
.home-a-statelist li {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 0.85rem;
padding-bottom: 0.7rem;
border-bottom: 1px dashed rgba(142,110,58,0.22);
line-height: 1.3;
}
.home-a-statelist li:last-child { border-bottom: none; padding-bottom: 0; }
.home-a-state-key {
font-family: 'Cinzel', serif;
font-weight: 600;
font-size: 0.92rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--burgundy);
}
.home-a-state-val {
font-family: 'EB Garamond', serif;
font-style: normal;
font-weight: 500;
font-size: 1.15rem;
color: var(--ink);
text-align: right;
}
.home-a-state-val em {
font-style: italic;
color: var(--ink-2);
}
.home-a-state-val strong {
font-weight: 700;
color: var(--burgundy);
font-size: 1.25rem;
margin-right: 0.2em;
}
.home-a-state-val .glyph {
font-family: 'Noto Sans Symbols 2', serif;
font-style: normal;
color: var(--burgundy);
margin-right: 0.4em;
font-size: 1.05em;
}
.home-a-state-rx { font-style: normal; color: var(--burgundy); margin-left: 0.3em; font-size: 0.9em; }
/* Allow values to wrap gracefully when they're long (eclipse, lunation, etc.). */
.home-a-state-val { max-width: 100%; }
/* ═══════════ 3. EPHEMERIS RIBBON — small scope adjustments ═══════════ */
.home-a .cc-ephemeris { margin: 1rem auto 0; }
.home-a .home-a-rx {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 700;
color: var(--burgundy);
margin-left: 0.3em;
}
/* ═══════════ 4. LIVING CHART WHEEL ═══════════ */
/* Living Chart Wheel section — full-bleed warm cream-rose band so the
chart wheel (which has its own parchment-cream interior) pops against
a distinctly different background instead of blending into the cream
page body. Subtle gold + burgundy atmospheric pools for depth. */
.home-a-wheel-section {
position: relative;
margin: 0 calc(50% - 50vw) 3rem;
padding: 1.45rem 0 3rem;
background-color: #F1E6CB;
background-image:
radial-gradient(ellipse 60% 40% at 50% 0%, rgba(184, 145, 80, 0.16), transparent 60%),
radial-gradient(ellipse 50% 40% at 20% 80%, rgba(142, 110, 58, 0.10), transparent 70%),
radial-gradient(ellipse 50% 40% at 80% 80%, rgba(184, 145, 80, 0.12), transparent 70%);
border-top: 0.5px solid rgba(142, 110, 58, 0.32);
border-bottom: 0.5px solid rgba(142, 110, 58, 0.32);
}
.home-a-wheel-section .home-a-mini-hero,
.home-a-wheel-section .home-a-wheel-figure { max-width: 1060px; margin: 0 auto; }
/* Wheel section H2 — override the .ca-page rules that force burgundy
body + gold Italianno em on h1/h2 inside .page-hero. We want the
same EB Garamond italic + burgundy em as the hero H1, just smaller
since this is a mid-page section heading. */
.home-a .home-a-wheel-section .home-a-wheel-h2 {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(2.15rem, 4.3vw, 3.4rem);
line-height: 1.05;
letter-spacing: -0.018em;
color: var(--ink);
margin: 0 0 0.75rem;
text-align: center;
}
.home-a .home-a-wheel-section .home-a-wheel-h2 em {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1em;
color: var(--burgundy);
-webkit-text-stroke: 0;
text-stroke: 0;
text-shadow: none;
vertical-align: baseline;
}
/* Wheel subtitle — SEO paragraph with burgundy keyword highlights. */
.home-a-wheel-section .home-a-wheel-subtitle {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.02rem, 1.4vw, 1.2rem);
line-height: 1.5;
color: var(--ink-2, #3D2D44);
max-width: 900px;
margin: 0.6rem auto 0;
text-align: center;
}
.home-a-wheel-section .home-a-wheel-subtitle .wh-hl {
color: var(--burgundy);
font-weight: 600;
font-style: normal;
}
/* ───── ASPECT LINES LEGEND (inside the planet panel, above the table) ───── */
.home-a-wheel-aspect-key {
margin: 0 0 1.3rem;
padding: 0 0 1.1rem;
border-bottom: 1px solid rgba(107, 31, 44, 0.25);
text-align: left;
}
.home-a-wheel-aspect-key .wh-key-label {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 700;
letter-spacing: 0;
font-size: 1.85rem;
color: var(--burgundy);
margin-bottom: 0.8rem;
}
.home-a-wheel-aspect-key .wh-key-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.7rem 2rem;
font-family: 'Helvetica Neue', Helvetica, system-ui, -apple-system, 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 1.22rem;
color: var(--ink-2, #3D2D44);
}
.home-a-wheel-aspect-key .wh-key-list li {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.home-a-wheel-aspect-key .wh-key-dash {
width: 22px;
height: 2px;
border-radius: 1px;
display: inline-block;
}
.wh-key-dash[data-aspect="conjunction"] { background: #D78A4D; }
.wh-key-dash[data-aspect="trine"] { background: #4D7A9C; }
.wh-key-dash[data-aspect="sextile"] { background: #5A8A7D; }
.wh-key-dash[data-aspect="square"] { background: #B85428; }
.wh-key-dash[data-aspect="opposition"] { background: #B96B7A; }
.wh-key-dash[data-aspect="quincunx"] { background: #9B7DC4; }
/* ───── PLANETS IN SIGNS TABLE (below the chart wheel) ───── */
.home-a-wheel-planets {
max-width: 920px;
margin: 1.75rem auto 0;
padding: 1.75rem 2rem 1.75rem;
/* Solid warm vellum so the table reads as its own plate on the
rose-cream section, not a translucent overlay. */
background: #FAF1E1;
border: 1px solid rgba(142, 110, 58, 0.35);
border-radius: 4px;
box-shadow:
inset 0 0 0 5px rgba(251, 243, 220, 0.55),
inset 0 0 0 6px rgba(142, 110, 58, 0.22),
0 12px 32px rgba(74, 22, 32, 0.08);
}
.home-a-wheel-planets .wh-planets-label {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 700;
letter-spacing: 0;
font-size: 1.85rem;
color: var(--burgundy);
margin-bottom: 1.1rem;
text-align: left;
border-bottom: 1px solid rgba(107, 31, 44, 0.25);
padding-bottom: 0.75rem;
}
.home-a-wheel-planets .wh-planets-tablewrap {
overflow-x: auto;
}
.wh-planets-table {
width: 100%;
border-collapse: collapse;
/* Body values render in a clean sans-serif so the data reads "normal"
and legible — the serif treatment is reserved for the headers. */
font-family: 'Helvetica Neue', Helvetica, system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 1.22rem;
}
/* Column headers KEEP the serif small-caps treatment. Color forced with
.home-a prefix (higher specificity) to a clear burgundy — a lower-
specificity rule elsewhere was rendering them as a washed light blue. */
/* Defeat the global `thead { background: rgba(151,205,202,.15) }` in
styles.css — that pale teal band was reading as an unwanted blue. */
.home-a .wh-planets-table thead { background: transparent; }
.home-a .wh-planets-table thead th {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 900;
letter-spacing: 0.16em;
font-size: 1.28rem;
color: #6B1F2C;
background: transparent;
text-align: left;
padding: 0.7rem 0.95rem;
border-bottom: 1.5px solid rgba(107, 31, 44, 0.35);
}
.wh-planets-table tbody td {
padding: 0.75rem 0.95rem;
font-size: 1.22rem;
color: var(--ink, #2D1F38);
border-bottom: 0.5px solid rgba(142, 110, 58, 0.18);
}
.wh-planets-table tbody tr:last-child td { border-bottom: none; }
.wh-planets-table tbody tr:hover td { background: rgba(212, 172, 104, 0.12); }
/* Planet glyph — colored by the row's element (data-element attribute).
Fire = red, earth = bronze, air = blue, water = teal. Matches the
chart wheel SVG's planet-by-element coloring. */
.wh-pl-glyph {
display: inline-block;
font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'Apple Symbols', serif;
font-size: 1.45rem;
margin-right: 0.55rem;
vertical-align: -0.08em;
font-weight: 700;
color: var(--ink); /* fallback */
}
.wh-planets-table tbody tr[data-element="fire"] .wh-pl-glyph { color: #B85428; }
.wh-planets-table tbody tr[data-element="earth"] .wh-pl-glyph { color: #6B5028; }
.wh-planets-table tbody tr[data-element="air"] .wh-pl-glyph { color: #4D7A9C; }
.wh-planets-table tbody tr[data-element="water"] .wh-pl-glyph { color: #3A6470; }
.wh-pl-name {
font-family: 'Helvetica Neue', Helvetica, system-ui, -apple-system, 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 1.22rem;
color: var(--ink);
}
/* Element label — same element color as the glyph, sans-serif and the
same size as every other cell value (no small-caps shrink). */
.wh-pl-element {
font-family: 'Helvetica Neue', Helvetica, system-ui, -apple-system, 'Segoe UI', sans-serif;
font-weight: 600;
letter-spacing: 0;
font-size: 1.22rem;
}
.wh-planets-table tbody tr[data-element="fire"] .wh-pl-element { color: #B85428; }
.wh-planets-table tbody tr[data-element="earth"] .wh-pl-element { color: #6B5028; }
.wh-planets-table tbody tr[data-element="air"] .wh-pl-element { color: #4D7A9C; }
.wh-planets-table tbody tr[data-element="water"] .wh-pl-element { color: #3A6470; }
.wh-pl-retro {
font-family: 'Helvetica Neue', Helvetica, system-ui, -apple-system, 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 1.22rem;
color: var(--burgundy);
}
.wh-pl-no {
color: rgba(142, 110, 58, 0.55);
font-size: 1.22rem;
}
/* Live "Updated" indicator now lives above the wheel — sits centered
below the SEO subtitle. */
.home-a .bch-live-indicator.home-a-wheel-live {
margin: 0.85rem auto 0;
justify-content: center;
color: var(--burgundy);
font-size: 1.08rem;
}
.home-a .bch-live-indicator.home-a-wheel-live .bch-live-updated { color: var(--burgundy); }
@media (max-width: 640px) {
.home-a-wheel-aspect-key .wh-key-list { gap: 0.5rem 1rem; font-size: 0.9rem; }
.wh-planets-table { font-size: 0.92rem; }
.home-a-wheel-planets { padding: 1.25rem 1rem 1.4rem; }
.home-a-wheel-aspect-key { padding: 0.85rem 1rem; }
}
.home-a-wheel-figure {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 922px; /* 10% smaller than 1140 per user feedback */
width: 100%;
}
/* The .home-a-wheel-svg max-width only applies to the FALLBACK simplified wheel.
Keep it modest so when fallback fires the page doesn't look hideous. */
.home-a-wheel-svg {
width: 100%;
max-width: 460px;
height: auto;
display: block;
filter: drop-shadow(0 14px 32px rgba(58, 31, 56, 0.18));
}
.home-a-wheel-zodiac,
.home-a-wheel-glyphs {
animation: home-a-wheel-rotate 240s linear infinite;
transform-origin: 0 0;
}
@keyframes home-a-wheel-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.home-a-wheel-center {
animation: home-a-wheel-pulse 4.5s ease-in-out infinite;
transform-origin: 0 0;
}
@keyframes home-a-wheel-pulse {
0%, 100% { opacity: 0.7; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.home-a-wheel-zodiac,
.home-a-wheel-glyphs,
.home-a-wheel-center { animation: none !important; }
}
/* Live indicator — author here in home-a.css since home-b.css is not
loaded on this page (each variant is independent). Mirrors the pattern
from home-b.css but uses only EB Garamond. */
.home-a .bch-live-indicator {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.22em;
color: var(--gold-deep);
}
.home-a .bch-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--burgundy);
display: inline-block;
position: relative;
}
.home-a .bch-live-dot::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--burgundy);
opacity: 0.55;
animation: home-a-pulse-ring 2.4s ease-out infinite;
}
@keyframes home-a-pulse-ring {
0% { transform: scale(0.6); opacity: 0.7; }
100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.home-a .bch-live-dot::after { animation: none; }
}
.home-a-wheel-cap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
}
/* Cast-your-own-chart CTA — styled to match the "See an example reading"
.btn-secondary pill from /deep-readings/birth-chart-blueprint/: solid
burgundy fill, Cinzel uppercase gold text, inverts to white on hover. */
.home-a-wheel-cta {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 0.92rem;
color: #F0D89A;
background: #6B1F2C;
border: 1.5px solid #6B1F2C;
border-radius: 99px;
padding: 1rem 1.9rem;
text-decoration: none;
box-shadow: 0 4px 10px rgba(74, 22, 32, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.home-a-wheel-cta:hover {
background: #FFFFFF;
color: #6B1F2C;
border-color: #6B1F2C;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(74, 22, 32, 0.18);
}
/* ═══════════ 5. NEXT MOONS STRIP ═══════════ */
.home-a-moons-strip {
list-style: none;
padding: 0;
margin: 0.5rem auto 0;
max-width: 1180px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.home-a-moons-strip:has(.home-a-moon-card--eclipse) {
grid-template-columns: repeat(4, 1fr) 0.75fr;
}
@media (max-width: 980px) {
.home-a-moons-strip,
.home-a-moons-strip:has(.home-a-moon-card--eclipse) {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 540px) {
.home-a-moons-strip,
.home-a-moons-strip:has(.home-a-moon-card--eclipse) {
grid-template-columns: 1fr;
}
}
.home-a-moon-card {
background: var(--vellum);
border: 0.5px solid rgba(142, 110, 58, 0.42);
border-radius: 2px;
padding: 1.25rem 1rem 1.35rem;
text-align: center;
font-family: 'EB Garamond', serif;
box-shadow:
inset 0 0 0 4px rgba(250, 241, 225, 0.6),
inset 0 0 0 5px rgba(142, 110, 58, 0.28),
0 4px 14px rgba(58, 31, 56, 0.10);
position: relative;
}
.home-a-moon-card-glyph {
font-family: 'EB Garamond', serif;
font-size: 2.4rem;
line-height: 1;
color: var(--burgundy);
margin-bottom: 0.55rem;
}
.home-a-moon-card--full .home-a-moon-card-glyph { color: var(--gold-deep); }
.home-a-moon-card--eclipse .home-a-moon-card-glyph { color: var(--burgundy-deep); }
.home-a-moon-card-label {
font-variant: small-caps;
font-weight: 800;
letter-spacing: 0.18em;
font-size: 0.82rem;
color: var(--gold-deep);
margin-bottom: 0.45rem;
}
.home-a-moon-card-date {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.45rem;
line-height: 1;
color: var(--ink);
margin-bottom: 0.35rem;
}
.home-a-moon-card-sign {
font-style: italic;
color: var(--burgundy);
font-size: 1.02rem;
}
.home-a-moon-card-sign em { font-weight: 600; }
.home-a-moon-card-deg {
font-variant: small-caps;
font-style: normal;
letter-spacing: 0.12em;
font-size: 0.78rem;
color: var(--ink-mute);
margin-left: 0.35em;
}
.home-a-moon-card-away {
font-family: 'Italianno', cursive;
font-size: 1.25rem;
color: var(--gold-deep);
margin-top: 0.4rem;
line-height: 1;
}
/* ═══════════ 5b. SIGN PICKER NIGHT-SKY HERO ═══════════
The markup + CSS variables + positioning are inherited verbatim from
horoscopes-v2-f.css (.cf-body defines --cf-night/--cf-star vars; .cf-hero
handles full-bleed via width:100vw + negative margins; .hub-body scopes
.hub-moon and .hub-constellation positioning).
ONLY override here: trim the hub-hero min-height from 760px → 520px so
this section reads as a mid-page band, not a frontispiece. Everything
else (starfield, moon position, constellation position, title, signs)
is left untouched so it matches /horoscopes/ exactly. */
.home-a.hub-body .hub-hero {
min-height: min(520px, 62vh);
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
/* Bump the sign-date line a touch ("March 21 – April 19" etc) */
.home-a.hub-body .hub-sign-dates { font-size: 0.88rem; }
/* Cream space above + below the full-bleed sign-picker so it reads as
its own zone, separated from the Live Sky plate above and the journal
band below. */
.home-a-signs-hero {
margin-top: 3rem;
margin-bottom: 3rem;
}
/* Title sits at the top of the shorter section (no Back-to-Home strip to
push it down like on /horoscopes/). Move the moon + constellation UP
so their centers align with the title baseline at the top edge instead
of sitting halfway down the section. */
.home-a.hub-body .hub-moon {
top: 4%;
}
.home-a.hub-body .hub-constellation {
top: 4%;
}
/* Mobile (≤720px) — horoscopes-v2-f.css line 2657 places moon/constellation
at top: 11% / 10% which puts them BEHIND the title (the title wraps wider
on mobile). User wants them in the gap between the tagline and the
12-sign glyph grid instead, brighter and larger. */
@media (max-width: 720px) {
/* Moon kept at its larger desktop-ish size (user wants it big).
Constellation made noticeably smaller (it overpowered the moon on
mobile). Both positioned BELOW the tagline, flanking the ✦ rule and
the top edge of the signs grid — accepting a slight overlap into the
first row of signs because the mobile gap is genuinely narrow. */
.home-a.hub-body .hub-moon {
top: 14%;
left: 22%;
width: 22%;
max-width: 130px;
opacity: 1;
}
.home-a.hub-body .hub-constellation {
top: 15%;
right: 12%;
width: 18%;
max-width: 90px;
opacity: 1;
filter: drop-shadow(0 0 12px rgba(212, 172, 104, 0.4));
}
}
/* ═══════════ 6. THE JOURNAL BAND ═══════════
Full-bleed vellum band sitting between the Live Sky purple plate
and the Living Chart Wheel. Three cards total — one large
featured (left) + two stacked secondary (right). Closes with an
italic "from the journal →" link to /journal/. */
.home-a-journal-band {
position: relative;
overflow: hidden;
margin: 0 calc(50% - 50vw) 3rem;
padding: 4.25rem 0 3.5rem;
/* Dark-top → red-middle → dark-bottom vertical gradient. The current
#4A1620 deep burgundy now sits only in the middle of the band; the
top and bottom edges fade to a near-black blackberry. Reads like a
real night sky deepening at the horizon. */
background-color: #4A1620;
background-image:
/* Faint atmospheric warm/rose pools — kept but tuned smaller so the
vertical gradient drives the look. */
radial-gradient(ellipse 50% 35% at 18% 50%, rgba(184, 145, 80, 0.10), transparent 65%),
radial-gradient(ellipse 45% 30% at 85% 50%, rgba(226, 176, 186, 0.08), transparent 65%),
/* Vertical gradient: nearly-black at the very top, current burgundy
at the center, nearly-black at the bottom. */
linear-gradient(180deg,
#0F0308 0%,
#1A0510 10%,
#2A0C13 24%,
#4A1620 50%,
#2A0C13 76%,
#1A0510 90%,
#0F0308 100%);
border-top: 0.5px solid rgba(212, 172, 104, 0.42);
border-bottom: 0.5px solid rgba(212, 172, 104, 0.42);
color: #F4DCA6;
}
/* On dark burgundy, the title + script + corners + foot link all need to
recolor to cream/gold/rose — parchment cards inside are untouched. */
/* Gilded text — vertical gradient cream→gold-bright→gold-deep so the
title catches the eye like illuminated letters on a manuscript. */
.home-a-journal-band .home-a-journal-title {
background: linear-gradient(180deg, #F4DCA6 0%, #D4AC68 55%, #8E6E3A 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.home-a-journal-band .home-a-journal-title em {
background: linear-gradient(180deg, #FFE7A6 0%, #E5C68A 50%, #B89150 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 600;
}
.home-a-journal-band .home-a-journal-corner { border-color: var(--gold-bright); opacity: 0.85; }
.home-a-journal-band .home-a-journal-more { color: #F4DCA6; }
.home-a-journal-band .home-a-journal-more em { border-bottom-color: rgba(212, 172, 104, 0.55); }
.home-a-journal-band .home-a-journal-more:hover { color: #FFF1C8; }
.home-a-journal-inner {
position: relative;
z-index: 1;
max-width: 1240px;
margin: 0 auto;
padding: 0 2.5rem;
}
/* Star field watermark — dense night-sky atmosphere behind the journal
cards. ~120 stars at varied sizes + brightnesses, a third of them
twinkling on staggered cycles, plus a streaking comet every ~22s. */
.home-a-journal-watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
opacity: 1; /* opacity per-star via inline styles + twinkle animations */
}
/* Each twinkling star reads its own duration / min / max opacity from
CSS custom properties set inline on the element. */
@keyframes ja-twinkle {
0%, 100% { opacity: var(--tw-min, 0.3); }
50% { opacity: var(--tw-max, 1); }
}
.home-a-journal-watermark .ja-star-tw {
animation: ja-twinkle var(--tw-dur, 3s) ease-in-out infinite;
}
/* COMET — flies left-to-right across the top in ~3.5s, then waits
~18s before the next pass. Slight downward drift sells the arc. */
@keyframes ja-comet-fly {
0% { transform: translate(-200px, 60px) rotate(2deg); opacity: 0; }
2% { opacity: 0; }
3% { opacity: 1; }
17% { transform: translate(1750px, 130px) rotate(6deg); opacity: 1; }
18% { opacity: 0; }
100% { opacity: 0; }
}
.home-a-journal-watermark .home-a-journal-comet {
animation: ja-comet-fly 22s linear infinite;
filter: drop-shadow(0 0 4px rgba(244, 220, 166, 0.4));
}
@media (max-width: 720px) {
/* On mobile bring the comet pass in a touch more frequently since the
band scrolls past quickly. */
.home-a-journal-watermark .home-a-journal-comet { animation-duration: 16s; }
}
/* Four small gold L-bracket corners on the band's inner frame. */
.home-a-journal-corner {
position: absolute;
width: 30px;
height: 30px;
border: 0 solid var(--gold-deep);
opacity: 0.55;
pointer-events: none;
}
.home-a-journal-corner--tl { top: -1.5rem; left: 1.25rem; border-top-width: 1px; border-left-width: 1px; }
.home-a-journal-corner--tr { top: -1.5rem; right: 1.25rem; border-top-width: 1px; border-right-width: 1px; }
.home-a-journal-corner--bl { bottom: -1.5rem; left: 1.25rem; border-bottom-width: 1px; border-left-width: 1px; }
.home-a-journal-corner--br { bottom: -1.5rem; right: 1.25rem; border-bottom-width: 1px; border-right-width: 1px; }
/* Header — eyebrow ✦ THIS WEEK · ESSAYS FROM THE PARCHMENT + h2 + script. */
.home-a-journal-head {
text-align: center;
margin-bottom: 2.5rem;
}
.home-a-journal-eyebrow {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
letter-spacing: 0.26em;
font-size: 0.92rem;
color: var(--gold-deep);
margin-bottom: 0.95rem;
display: inline-flex;
align-items: center;
gap: 0.6em;
}
.home-a-journal-eyebrow-dot { opacity: 0.6; }
.home-a-journal-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(2rem, 4.2vw, 3.1rem);
line-height: 1.05;
letter-spacing: -0.012em;
color: var(--ink);
margin: 0 0 0.4rem;
}
.home-a-journal-title em { color: var(--burgundy); font-weight: 600; }
/* Journal-band subtitle paragraph (under the H2). Cream rose so it
reads against the dark burgundy band but stays softer than the
gilded gold title. SEO keywords (.ja-hl spans) get a lighter
warm-cream tone so they pop without yelling. */
.home-a-journal-band .home-a-journal-subtitle {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.02rem, 1.4vw, 1.2rem);
line-height: 1.5;
color: #FFFAEA;
max-width: 1100px;
margin: 0.6rem auto 0;
text-align: center;
}
.home-a-journal-band .home-a-journal-subtitle .ja-hl {
color: #E2B0BA;
font-weight: 600;
}
.home-a-journal-script {
font-family: 'Italianno', cursive;
font-size: clamp(1.4rem, 2.6vw, 1.85rem);
color: var(--burgundy);
line-height: 1.1;
-webkit-text-stroke: 0.3px var(--burgundy);
}
/* 3-CARD GRID — featured big-left + 2 stacked-right. */
.home-a-journal-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 1.5rem;
align-items: stretch;
}
@media (max-width: 880px) {
.home-a-journal-grid { grid-template-columns: 1fr; }
}
/* FEATURED — parchment manuscript card on the vellum band. */
/* Featured journal card — codex-today-card border treatment (matches the
Apothecary cards): cream gradient bg + 1px gold + multi-layer drop
shadow. L-bracket corners added via .home-a-journal-corners spans. */
.home-a-feature {
position: relative;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 2rem;
align-items: center;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 172, 104, 0.16), transparent 65%),
linear-gradient(180deg, #FBF3DC 0%, #F4E7C7 100%);
border: 1px solid var(--gold, #B89150);
border-radius: 3px;
padding: 2.5rem 2.5rem;
margin: 0;
box-shadow:
0 18px 44px rgba(74, 22, 32, 0.10),
0 4px 10px rgba(74, 22, 32, 0.06),
inset 0 0 0 1px rgba(255, 255, 255, 0.55),
inset 0 0 0 7px transparent,
inset 0 0 0 8px rgba(184, 145, 80, 0.18);
text-decoration: none;
color: inherit;
transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
/* Featured card is now an with class .home-a-feature-link — make the
whole card hover like the secondaries: lift + warmer bg + brighter
gold inset + deeper shadow. */
.home-a-feature-link:hover {
transform: translateY(-3px);
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 172, 104, 0.24), transparent 65%),
linear-gradient(180deg, #FEF5DC 0%, #F8EBC8 100%);
box-shadow:
0 24px 52px rgba(74, 22, 32, 0.16),
0 6px 14px rgba(74, 22, 32, 0.08),
inset 0 0 0 1px rgba(255, 255, 255, 0.65),
inset 0 0 0 7px transparent,
inset 0 0 0 8px rgba(184, 145, 80, 0.32);
}
.home-a-feature-link:hover .home-a-feature-cta { letter-spacing: 0.26em; }
/* Background nudge on the secondary cards too — warm parchment hover. */
.home-a-secondary-link:hover { background: #FEF5DC; }
@media (max-width: 880px) {
.home-a-feature {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 2rem 1.5rem;
text-align: center;
}
}
.home-a-feature-eyebrow {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 900;
letter-spacing: 0.24em;
font-size: 1.18rem;
color: #6E5028; /* darker bronze — readable on parchment */
margin-bottom: 0.8rem;
}
.home-a-feature-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.7rem, 3vw, 2.45rem);
line-height: 1.08;
letter-spacing: -0.012em;
color: var(--ink);
margin: 0 0 0.85rem;
}
.home-a-feature-title em { color: var(--burgundy); font-weight: 600; }
.home-a-feature-dek {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.15rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 1.35rem;
max-width: 480px;
}
.home-a-feature-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 900;
letter-spacing: 0.22em;
font-size: 1.18rem;
color: var(--burgundy);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1.5px solid var(--burgundy);
transition: letter-spacing 0.2s;
}
.home-a-feature-cta:hover { letter-spacing: 0.26em; }
.home-a-feature-art {
display: flex;
align-items: center;
justify-content: center;
}
.home-a-feature-art svg {
width: 220px;
height: 220px;
max-width: 100%;
}
/* ─── Saturn + Neptune featured-card illustration animations ─── */
@keyframes home-a-sn-wheel {
to { transform: rotate(360deg); }
}
.home-a-feature-art .home-a-sn-wheel-rot {
transform-box: view-box;
transform-origin: 120px 120px;
animation: home-a-sn-wheel 80s linear infinite;
}
@keyframes home-a-sn-hex {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
.home-a-feature-art .home-a-sn-hex {
animation: home-a-sn-hex 6s ease-in-out infinite;
}
/* ─── Corner illustrations on the small journal cards ─── */
.ja-corner-svg {
position: absolute;
top: 1rem;
right: 1rem;
width: 64px;
height: 64px;
pointer-events: none;
z-index: 2;
}
/* Reserve room on the right so titles don't run under the illustration. */
.home-a-secondary-link {
padding-right: 5.5rem;
}
@media (max-width: 540px) {
.ja-corner-svg { width: 54px; height: 54px; top: 0.85rem; right: 0.85rem; }
.ja-corner-img { width: 54px; height: 54px; top: 0.85rem; right: 0.85rem; }
.home-a-secondary-link { padding-right: 4.75rem; }
}
/* AI-generated hero image on the homepage journal cards (matches the
article page). Featured = framed square; secondary = round corner thumb. */
.home-a-feature-art-img {
width: 220px;
height: 220px;
max-width: 100%;
object-fit: cover;
border-radius: 4px;
border: 1px solid #B89150;
box-shadow:
inset 0 0 0 3px rgba(251, 243, 220, 0.6),
0 12px 30px -14px rgba(45, 31, 56, 0.55);
}
.ja-corner-img {
position: absolute;
top: 1rem;
right: 1rem;
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 50%;
border: 1px solid #B89150;
box-shadow: 0 4px 12px -6px rgba(45, 31, 56, 0.45);
}
/* Subtle drift animation on the corner moon halo so it feels alive. */
@keyframes ja-corner-moon-glow {
0%, 100% { opacity: 0.9; }
50% { opacity: 0.6; }
}
.ja-corner-moon { animation: ja-corner-moon-glow 4s ease-in-out infinite; }
/* SECONDARY STACK — 2 vertical parchment cards in the right column. */
.home-a-secondary-stack {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-rows: 1fr 1fr;
gap: 1.5rem;
}
.home-a-secondary-card { margin: 0; }
/* Secondary journal cards — codex-today-card border treatment matching
the Apothecary + featured cards: cream gradient bg + 1px gold + heavy
multi-layer drop shadow. */
.home-a-secondary-link {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 1.75rem 1.7rem;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 172, 104, 0.16), transparent 65%),
linear-gradient(180deg, #FBF3DC 0%, #F4E7C7 100%);
border: 1px solid var(--gold, #B89150);
border-radius: 3px;
text-decoration: none;
box-shadow:
0 18px 44px rgba(74, 22, 32, 0.10),
0 4px 10px rgba(74, 22, 32, 0.06),
inset 0 0 0 1px rgba(255, 255, 255, 0.55),
inset 0 0 0 7px transparent,
inset 0 0 0 8px rgba(184, 145, 80, 0.18);
transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
.home-a-secondary-link:hover {
transform: translateY(-3px);
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 172, 104, 0.24), transparent 65%),
linear-gradient(180deg, #FEF5DC 0%, #F8EBC8 100%);
box-shadow:
0 24px 52px rgba(74, 22, 32, 0.16),
0 6px 14px rgba(74, 22, 32, 0.08),
inset 0 0 0 1px rgba(255, 255, 255, 0.65),
inset 0 0 0 7px transparent,
inset 0 0 0 8px rgba(184, 145, 80, 0.32);
}
.home-a-secondary-eyebrow {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 900;
letter-spacing: 0.22em;
font-size: 1.1rem;
color: #6E5028; /* darker bronze — same as featured eyebrow */
margin-bottom: 0.65rem;
}
.home-a-secondary-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.75rem;
line-height: 1.18;
color: var(--ink);
margin: 0 0 0.7rem;
}
.home-a-secondary-title em { color: var(--burgundy); }
.home-a-secondary-dek {
font-family: 'EB Garamond', serif;
font-size: 1.15rem;
line-height: 1.5;
color: var(--ink-mute);
margin: 0 0 1rem;
}
.home-a-secondary-more {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 900;
letter-spacing: 0.2em;
font-size: 1.02rem;
color: var(--burgundy);
border-bottom: 1.5px solid var(--burgundy);
padding-bottom: 3px;
align-self: flex-start;
margin-top: 0.4rem;
transition: letter-spacing 0.25s;
}
.home-a-secondary-link:hover .home-a-secondary-more { letter-spacing: 0.28em; }
/* FOOT — italic link to the full /journal/ index. */
.home-a-journal-foot {
text-align: center;
margin-top: 2.5rem;
}
.home-a-journal-more {
font-family: 'EB Garamond', serif;
font-size: 1.5rem;
color: var(--burgundy);
text-decoration: none;
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
letter-spacing: 0.01em;
transition: gap 0.2s;
}
.home-a-journal-more em {
font-style: italic;
font-weight: 500;
border-bottom: 1.5px solid rgba(212, 172, 104, 0.6);
padding-bottom: 3px;
}
.home-a-journal-more:hover { gap: 0.75rem; }
/* Mobile sizing — pull padding in. */
@media (max-width: 640px) {
.home-a-journal-band { padding: 3rem 0 2.5rem; }
.home-a-journal-inner { padding: 0 1.25rem; }
.home-a-journal-corner--tl,
.home-a-journal-corner--tr,
.home-a-journal-corner--bl,
.home-a-journal-corner--br { display: none; }
}
/* ═══════════ 6b. FROM THE APOTHECARY — FREE TOOLS BAND ═══════════
Full-bleed deep teal band, 4 tool cards on cream parchment ("jars
on a shelf"). Touches the journal burgundy above it (margin-top: 0). */
.home-a-apothecary-band {
position: relative;
margin: 0 calc(50% - 50vw) 3rem;
padding: 4.25rem 0 3.75rem;
overflow: hidden; /* contain the watermark inside the band edges */
/* Deep teal — apothecary herb green. Warm gold + soft rose washes
in the corners for atmosphere. */
background-color: #1F3A38;
background-image:
radial-gradient(ellipse 70% 55% at 50% 50%, rgba(43, 78, 76, 0.55), transparent 75%),
radial-gradient(ellipse 60% 45% at 18% 10%, rgba(212, 172, 104, 0.16), transparent 60%),
radial-gradient(ellipse 55% 45% at 85% 88%, rgba(226, 176, 186, 0.08), transparent 60%);
border-top: 0.5px solid rgba(212, 172, 104, 0.45);
border-bottom: 0.5px solid rgba(212, 172, 104, 0.45);
}
.home-a-apothecary-inner {
position: relative;
z-index: 1;
max-width: 1240px;
margin: 0 auto;
padding: 0 2.5rem;
}
/* Sacred geometry watermark — centered behind all card content. Now
sized to spread well past the cards on either side so the pattern is
visible to the left + right of the row, not just in the small gaps
between cards. On wide viewports it scales up to fill the full band. */
.home-a-apothecary-watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
opacity: 0.13;
}
@media (max-width: 720px) {
.home-a-apothecary-watermark { opacity: 0.10; }
}
.home-a-apothecary-corner {
position: absolute;
width: 30px;
height: 30px;
border: 0 solid var(--gold-bright);
opacity: 0.85;
pointer-events: none;
}
.home-a-apothecary-corner--tl { top: -1.5rem; left: 1.25rem; border-top-width: 1px; border-left-width: 1px; }
.home-a-apothecary-corner--tr { top: -1.5rem; right: 1.25rem; border-top-width: 1px; border-right-width: 1px; }
.home-a-apothecary-corner--bl { bottom: -1.5rem; left: 1.25rem; border-bottom-width: 1px; border-left-width: 1px; }
.home-a-apothecary-corner--br { bottom: -1.5rem; right: 1.25rem; border-bottom-width: 1px; border-right-width: 1px; }
.home-a-apothecary-head { text-align: center; margin-bottom: 2.5rem; }
.home-a-apothecary-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(2rem, 4.2vw, 3.1rem);
line-height: 1.05;
letter-spacing: -0.012em;
margin: 0 0 0.5rem;
background: linear-gradient(180deg, #F4DCA6 0%, #D4AC68 55%, #8E6E3A 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.home-a-apothecary-title em {
font-style: italic;
background: linear-gradient(180deg, #FFE7A6 0%, #E5C68A 50%, #B89150 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.home-a-apothecary-script {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.55;
color: #F4DCA6;
max-width: 780px;
margin: 0.6rem auto 0;
}
/* Apothecary SEO keyword highlights — gold-bright is a touch deeper
than the cream base, contrasting hue that reads cleanly on the dark
teal sage band. */
.home-a-apothecary-script .ap-hl {
color: #D4AC68;
font-weight: 600;
font-style: normal;
}
.home-a-apothecary-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
@media (max-width: 960px) {
.home-a-apothecary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.home-a-apothecary-grid { grid-template-columns: 1fr; }
}
.home-a-apoth-card { margin: 0; }
/* Apothecary card border — matches the codex-today-card pattern
(numerology2.css line 1881): cream gradient bg + 1px gold border +
multi-layer drop shadows + 4 L-bracket corners. This is the card
outline the user pointed to (Today's Energy / Monthly Cosmic Energy
/ Year's Universal Vibration cards on /numerology/). */
.home-a-apoth-link {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 2.25rem 1.6rem 1.85rem;
text-decoration: none;
text-align: center;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 172, 104, 0.16), transparent 65%),
linear-gradient(180deg, #FBF3DC 0%, #F4E7C7 100%);
border: 1px solid var(--gold, #B89150);
border-radius: 3px;
box-shadow:
0 18px 44px rgba(74, 22, 32, 0.10),
0 4px 10px rgba(74, 22, 32, 0.06),
inset 0 0 0 1px rgba(255, 255, 255, 0.55),
inset 0 0 0 7px transparent,
inset 0 0 0 8px rgba(184, 145, 80, 0.18);
transition: transform 0.25s, box-shadow 0.25s;
}
.home-a-apoth-link:hover {
transform: translateY(-4px);
box-shadow:
0 24px 52px rgba(74, 22, 32, 0.16),
0 6px 14px rgba(74, 22, 32, 0.08),
inset 0 0 0 1px rgba(255, 255, 255, 0.65),
inset 0 0 0 7px transparent,
inset 0 0 0 8px rgba(184, 145, 80, 0.28);
}
/* Four L-bracket corner ornaments inside each card —
copied verbatim from .codex-today-corners .ctc rule
(numerology2.css line 1929) so the visual signature
matches the codex cards. */
.home-a-apoth-corners { position: absolute; inset: 0; pointer-events: none; }
.home-a-apoth-corners .ac {
position: absolute;
width: 18px; height: 18px;
border: 1.4px solid var(--gold-deep, #8E6E3A);
opacity: 0.55;
}
.home-a-apoth-corners .ac.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.home-a-apoth-corners .ac.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.home-a-apoth-corners .ac.bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.home-a-apoth-corners .ac.br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
/* Unified ART zone — same height across all 4 cards so the titles
beneath align perfectly on one row (the tarot card image used to
be taller than the medallions, pushing its title down). The
content centers vertically inside the 170px box. */
.home-a-apoth-art {
display: flex;
align-items: center;
justify-content: center;
height: 170px;
margin-bottom: 1.1rem;
}
.home-a-apoth-art svg { width: 130px; height: 130px; }
.home-a-apoth-art .home-a-apoth-yesno-svg { width: 180px; height: 160px; }
/* Tarot card vitrine frame — pulled from /tarot/yes-no-tarot-reading/'s
.vitrine-card rule (yes-no-tarot.css line 958). Aubergine gradient
stage + 1px gold outer border + multi-layer gold ring shadow +
gentle cardFloat animation. The image sits inside the frame with
its own thin gold hairline. */
.home-a-apoth-tarot-art {
position: relative;
height: 170px;
display: flex;
align-items: center;
justify-content: center;
}
.home-a-tarot-vitrine {
position: relative;
padding: 0.45rem;
background:
radial-gradient(ellipse 60% 40% at 50% 25%, rgba(212, 172, 104, 0.4), transparent 60%),
radial-gradient(ellipse 100% 70% at 50% 100%, rgba(107, 31, 44, 0.4), transparent 60%),
linear-gradient(170deg, #5A2D52 0%, #3A1F38 50%, #2A1428 100%);
border: 1px solid var(--gold, #B89150);
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.40),
0 0 0 3px rgba(184, 145, 80, 0.06),
0 0 0 4px var(--gold-deep, #8E6E3A),
0 0 0 7px rgba(184, 145, 80, 0.04),
inset 0 0 28px rgba(0, 0, 0, 0.40);
animation: home-a-card-float 6s ease-in-out infinite;
}
.home-a-tarot-vitrine::before {
content: "";
position: absolute;
inset: 6px;
border: 1px solid rgba(184, 145, 80, 0.4);
pointer-events: none;
z-index: 2;
}
.home-a-apoth-tarot-art img,
.home-a-apoth-tarot-fallback {
display: block;
height: 150px;
width: auto;
border: 1px solid rgba(184, 145, 80, 0.4);
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.35),
inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.home-a-apoth-tarot-fallback { display: none; }
.home-a-apoth-tarot-fallback svg { width: 92px; height: 150px; }
@keyframes home-a-card-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-5px) rotate(-0.5deg); }
}
.home-a-apoth-link:hover .home-a-tarot-vitrine {
animation: none;
transform: translateY(-3px) rotate(-1deg);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.home-a-apoth-numeral-art {
position: relative;
height: 170px;
}
.home-a-apoth-numeral-art {
display: flex;
align-items: center;
justify-content: center;
}
.home-a-apoth-numeral-bg {
position: absolute;
inset: 0;
margin: auto;
width: 170px;
height: 170px;
pointer-events: none;
/* Slow continuous rotation — the rings + tick marks rotate as a
subtle living illustration. The number sits above (z-index:2) and
doesn't rotate. */
animation: home-a-num-spin 38s linear infinite;
transform-origin: center;
}
@keyframes home-a-num-spin {
to { transform: rotate(360deg); }
}
/* On hover, the rings speed up slightly — gives a "responsive" feel. */
.home-a-apoth-link:hover .home-a-apoth-numeral-bg {
animation-duration: 14s;
}
.home-a-apoth-numeral {
/* Absolutely positioned to the dead-center of the medallion SVG.
Flex/inline centering doesn't account for Cinzel Decorative's tall
ascenders + descenders, so the digit reads visually low. Positioning
via translate puts it pixel-true at the optical center. */
position: absolute;
inset: 0;
margin: auto;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cinzel Decorative', serif;
font-weight: 700;
font-size: 5.4rem;
line-height: 1;
color: var(--burgundy);
text-shadow: 0 2px 0 rgba(184, 145, 80, 0.4);
pointer-events: none;
}
.home-a-apoth-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.55rem;
line-height: 1.18;
color: var(--ink);
margin: 0 0 0.7rem;
/* Reserve 2.4em vertical space across all 4 titles so teases align,
AND vertically center single-line titles (e.g. "Ask a Yes / No")
inside that block. grid+place-items keeps inline text + +
flowing naturally — display:flex broke that by treating children
as flex items in a row. */
display: grid;
place-items: center;
min-height: 2.4em;
}
.home-a-apoth-title em { color: var(--burgundy); font-weight: 600; }
.home-a-apoth-tease {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.15rem;
line-height: 1.5;
color: var(--ink);
margin: 0 0 1.2rem;
}
.home-a-apoth-more {
margin-top: auto;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 900;
letter-spacing: 0.2em;
font-size: 0.98rem;
color: var(--burgundy);
border-bottom: 1.5px solid var(--burgundy);
padding-bottom: 3px;
align-self: center;
}
@media (max-width: 640px) {
.home-a-apothecary-band { padding: 3rem 0 2.5rem; }
.home-a-apothecary-inner { padding: 0 1.25rem; }
.home-a-apothecary-corner--tl,
.home-a-apothecary-corner--tr,
.home-a-apothecary-corner--bl,
.home-a-apothecary-corner--br { display: none; }
}
/* ═══════════ 6c. FROM THE SCRIPTORIUM — DEEP READINGS BAND ═══════════
Full-bleed deep aubergine band. 1 featured "spotlight" card on top
(Personal Astrologer) + 4 flanking cards in a row below. All cards
on cream parchment, tipped onto aubergine. */
.home-a-scriptorium-band {
position: relative;
margin: 0 calc(50% - 50vw) 3rem;
padding: 4.25rem 0 3.75rem;
/* Rich, elegant deep-plum gradient. Multiple soft glow pools layered
over a darker-edged vertical fade — gives the band depth like
velvet stage light rather than a flat dark color. Tones used:
#0A030C near-black plum (band edges)
#1F0E22 base plum (band body)
#2E143A warmer purple (center bloom)
#4A2658 soft violet (atmospheric highlight)
D4AC68 warm gold glow (upper-left corner pool)
C9A8DC soft violet glow (lower-right corner pool) */
background-color: #1F0E22;
background-image:
/* Central warm purple bloom — gives the cards a stage spotlight */
radial-gradient(ellipse 78% 52% at 50% 50%, rgba(74, 38, 88, 0.62), transparent 78%),
/* Soft warm violet halo, slightly larger + dimmer for atmospheric depth */
radial-gradient(ellipse 95% 70% at 50% 55%, rgba(120, 75, 138, 0.18), transparent 82%),
/* Upper-left gold pool */
radial-gradient(ellipse 38% 28% at 14% 18%, rgba(212, 172, 104, 0.16), transparent 75%),
/* Lower-right violet pool */
radial-gradient(ellipse 38% 28% at 86% 82%, rgba(201, 168, 220, 0.13), transparent 75%),
/* Vertical fade — near-black at top + bottom, deep plum middle */
linear-gradient(180deg,
#0A030C 0%,
#160820 12%,
#1F0E22 26%,
#2E143A 50%,
#1F0E22 74%,
#160820 88%,
#0A030C 100%);
border-top: 0.5px solid rgba(212, 172, 104, 0.45);
border-bottom: 0.5px solid rgba(212, 172, 104, 0.45);
}
.home-a-scriptorium-inner {
position: relative;
max-width: 1240px;
margin: 0 auto;
padding: 0 2.5rem;
}
.home-a-scriptorium-corner {
position: absolute;
width: 30px;
height: 30px;
border: 0 solid var(--gold-bright);
opacity: 0.85;
pointer-events: none;
}
.home-a-scriptorium-corner--tl { top: -1.5rem; left: 1.25rem; border-top-width: 1px; border-left-width: 1px; }
.home-a-scriptorium-corner--tr { top: -1.5rem; right: 1.25rem; border-top-width: 1px; border-right-width: 1px; }
.home-a-scriptorium-corner--bl { bottom: -1.5rem; left: 1.25rem; border-bottom-width: 1px; border-left-width: 1px; }
.home-a-scriptorium-corner--br { bottom: -1.5rem; right: 1.25rem; border-bottom-width: 1px; border-right-width: 1px; }
.home-a-scriptorium-head { text-align: center; margin-bottom: 2.5rem; }
.home-a-scriptorium-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(2rem, 4.2vw, 3.1rem);
line-height: 1.05;
letter-spacing: -0.012em;
margin: 0 0 0.5rem;
background: linear-gradient(180deg, #F4DCA6 0%, #D4AC68 55%, #8E6E3A 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.home-a-scriptorium-title em {
font-style: italic;
background: linear-gradient(180deg, #FFE7A6 0%, #E5C68A 50%, #B89150 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.home-a-scriptorium-script {
font-family: 'Italianno', cursive;
font-size: clamp(1.4rem, 2.6vw, 1.85rem);
color: #E2B0BA;
line-height: 1.1;
-webkit-text-stroke: 0.3px #E2B0BA;
}
/* Scriptorium subtitle — replaces the old Italianno script with a real
SEO paragraph. Soft rose body + lighter cream keyword highlights. */
.home-a-scriptorium-band .home-a-scriptorium-subtitle {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.55;
color: #FFFAEA;
max-width: 820px;
margin: 0.6rem auto 0;
text-align: center;
}
.home-a-scriptorium-band .home-a-scriptorium-subtitle .sc-hl {
color: #E2B0BA;
font-weight: 600;
font-style: normal;
}
/* FEATURED — full-width parchment card with art on the right */
/* Scriptorium featured card — codex-today-card border treatment.
Text column on the LEFT is wider (1.3fr) so the copy reads as the
primary content; chat illustration fills the right column (1fr) at
landscape proportions so the card doesn't stretch tall. */
.home-a-scrip-feature {
position: relative;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 2rem;
align-items: center;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 172, 104, 0.16), transparent 65%),
linear-gradient(180deg, #FBF3DC 0%, #F4E7C7 100%);
border: 1px solid var(--gold, #B89150);
border-radius: 3px;
padding: 1.75rem 2.5rem; /* shorter card per user request — less vertical air */
margin: 0 0 1.5rem;
box-shadow:
0 18px 44px rgba(74, 22, 32, 0.12),
0 4px 10px rgba(74, 22, 32, 0.08),
inset 0 0 0 1px rgba(255, 255, 255, 0.55),
inset 0 0 0 7px transparent,
inset 0 0 0 8px rgba(184, 145, 80, 0.20);
}
@media (max-width: 880px) {
.home-a-scrip-feature { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1.5rem; text-align: center; }
}
.home-a-scrip-feature-eyebrow {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 900;
letter-spacing: 0.24em;
font-size: 1.18rem;
color: #6E5028;
margin-bottom: 0.8rem;
}
.home-a-scrip-feature-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.7rem, 3vw, 2.45rem);
line-height: 1.08;
color: var(--ink);
margin: 0 0 0.95rem;
}
.home-a-scrip-feature-title em { color: var(--burgundy); font-weight: 600; }
.home-a-scrip-feature-dek {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.15rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 1.35rem;
max-width: 540px;
}
.home-a-scrip-feature-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 900;
letter-spacing: 0.22em;
font-size: 1.18rem;
color: var(--burgundy);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1.5px solid var(--burgundy);
transition: letter-spacing 0.2s;
}
.home-a-scrip-feature-cta:hover { letter-spacing: 0.26em; }
.home-a-scrip-feature-art {
display: flex;
align-items: center;
justify-content: center;
}
.home-a-scrip-feature-art svg {
width: 100%;
max-width: 360px;
height: auto;
}
.home-a-scrip-feature-art {
justify-self: end;
width: 100%;
}
@media (max-width: 880px) {
.home-a-scrip-feature-art { justify-self: center; }
.home-a-scrip-feature-art svg { max-width: 320px; }
}
/* ─── PERSONAL ASTROLOGER CHAT PREVIEW (home-a featured-card variant) ───
Scoped from /deep-readings/personal-astrologer/'s .chat-preview-v2.
Same aubergine frame + gold border + bubble pattern, but in HTML/CSS
(not SVG) so the typography flows naturally and the proportions read
as a real chat. */
.ha-pa-chat { position: relative; width: 100%; }
.ha-pa-frame {
position: relative;
background: linear-gradient(180deg, #3A1F38, #2D1F38);
border: 1px solid var(--gold, #B89150);
border-radius: 14px;
overflow: hidden;
box-shadow:
0 18px 48px rgba(58, 31, 56, 0.40),
inset 0 0 0 1px rgba(212, 172, 104, 0.18);
}
.ha-pa-frame::before {
content: "";
position: absolute; inset: 6px;
border-radius: 9px;
border: 1px solid rgba(212, 172, 104, 0.22);
pointer-events: none;
}
/* Title bar */
.ha-pa-bar {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.8rem 1rem;
border-bottom: 1px solid rgba(212, 172, 104, 0.3);
background:
linear-gradient(180deg, rgba(212, 172, 104, 0.10), transparent),
radial-gradient(ellipse at 50% 0%, rgba(212, 172, 104, 0.12), transparent 70%);
position: relative;
}
.ha-pa-bar::after {
content: "";
position: absolute; left: 1rem; right: 1rem; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 172, 104, 0.55) 50%, transparent);
}
.ha-pa-live {
width: 9px; height: 9px; border-radius: 99px;
background: radial-gradient(circle at 35% 30%, #F4DCA6, #B89150 70%);
box-shadow: 0 0 8px rgba(212, 172, 104, 0.7);
flex-shrink: 0;
animation: ha-pa-pulse 1.8s ease-in-out infinite;
}
@keyframes ha-pa-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
}
.ha-pa-titles { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ha-pa-title-row {
display: flex; align-items: center; gap: 0.4rem;
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-weight: 700;
font-size: 0.86rem;
letter-spacing: 0.08em;
color: var(--gold-bright, #D4AC68);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
white-space: nowrap;
}
.ha-pa-orn { color: var(--gold, #B89150); font-size: 0.7em; }
.ha-pa-title { color: #F4DCA6; }
.ha-pa-script {
font-family: 'Italianno', cursive;
font-size: 1.2rem;
color: #F5EBD3;
opacity: 0.85;
line-height: 1;
}
/* Stream + bubbles — tightened: less padding so the user bubble sits
higher under the title bar, smaller bubble text, lower max-height so
the whole chat reads as a landscape preview instead of a tall column. */
.ha-pa-stream {
padding: 0.6rem 0.9rem 1.1rem;
position: relative;
max-height: 220px;
overflow: hidden;
}
.ha-pa-bub {
position: relative;
padding: 0.5rem 0.75rem;
border-radius: 10px;
font-family: 'EB Garamond', serif;
font-size: 0.82rem;
line-height: 1.4;
color: var(--ink);
background: var(--vellum, #F6ECD2);
border: 1px solid rgba(212, 172, 104, 0.4);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
max-width: 92%;
margin: 0 0 0.45rem;
animation: ha-pa-bub-in 0.6s ease-out both;
}
.ha-pa-bub:last-child { animation-delay: 0.25s; }
.ha-pa-bub em { font-style: italic; color: var(--burgundy); font-weight: 600; }
.ha-pa-bub--user {
background: linear-gradient(135deg, #C99AA8, #A0556A);
color: #FBF3DC;
border-color: rgba(142, 110, 58, 0.5);
margin-left: auto;
}
.ha-pa-bub--user em { color: #FBF3DC; }
.ha-pa-who {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
letter-spacing: 0.14em;
font-size: 0.6rem;
color: var(--gold-deep, #8E6E3A);
margin-bottom: 0.2rem;
}
.ha-pa-bub--user .ha-pa-who { color: rgba(251, 243, 220, 0.85); }
@keyframes ha-pa-bub-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Bottom fade — shorter to match the tighter stream. */
.ha-pa-fade {
position: absolute; left: 0; right: 0; bottom: 0;
height: 50px;
background: linear-gradient(180deg, rgba(45, 31, 56, 0), #2D1F38);
pointer-events: none;
}
/* 4 FLANKING — 2×2 grid of bigger parchment cards on the aubergine band. */
.home-a-scrip-row {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
}
@media (max-width: 540px) {
.home-a-scrip-row { grid-template-columns: 1fr; }
}
.home-a-scrip-card { margin: 0; }
.home-a-scrip-link {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 1.75rem 1.5rem 1.6rem;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 172, 104, 0.16), transparent 65%),
linear-gradient(180deg, #FBF3DC 0%, #F4E7C7 100%);
border: 1px solid var(--gold, #B89150);
border-radius: 3px;
text-decoration: none;
box-shadow:
0 18px 44px rgba(74, 22, 32, 0.12),
0 4px 10px rgba(74, 22, 32, 0.08),
inset 0 0 0 1px rgba(255, 255, 255, 0.55),
inset 0 0 0 7px transparent,
inset 0 0 0 8px rgba(184, 145, 80, 0.20);
transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
text-align: center;
}
.home-a-scrip-link:hover {
transform: translateY(-3px);
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 172, 104, 0.24), transparent 65%),
linear-gradient(180deg, #FEF5DC 0%, #F8EBC8 100%);
box-shadow:
0 24px 52px rgba(74, 22, 32, 0.18),
0 6px 14px rgba(74, 22, 32, 0.10),
inset 0 0 0 1px rgba(255, 255, 255, 0.65),
inset 0 0 0 7px transparent,
inset 0 0 0 8px rgba(184, 145, 80, 0.34);
}
.home-a-scrip-link .home-a-scrip-more { transition: letter-spacing 0.25s; }
.home-a-scrip-link:hover .home-a-scrip-more { letter-spacing: 0.22em; }
.home-a-scrip-art {
display: flex;
align-items: center;
justify-content: center;
height: 170px;
margin-bottom: 1.1rem;
}
.home-a-scrip-art svg { width: 160px; height: 160px; }
/* MTF moonstrip is a wide 240×100 viewBox — let it spread horizontally
in the art zone instead of being letterboxed. */
.home-a-scrip-art--mtf svg { width: 100%; max-width: 360px; height: auto; }
/* NND illustration is taller (240×230) — give it more room. */
.home-a-scrip-art .nd-cycles-svg { width: 200px; height: 190px; }
/* ─── Scriptorium card animations ─────────────────────────────────
Each illustration gets subtle motion so the cards feel alive
(matches the source deep-reading pages). */
/* Birth Chart Blueprint — outer wheel rotates 60s/turn + center sigil pulses */
@keyframes home-a-bcb-wheel-rot { to { transform: rotate(360deg); } }
.home-a-scrip-art .home-a-bcb-wheel-rot {
transform-box: view-box;
transform-origin: 100px 100px;
animation: home-a-bcb-wheel-rot 60s linear infinite;
}
@keyframes home-a-bcb-center-pulse {
0%, 100% { opacity: 0.85; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
.home-a-scrip-art .home-a-bcb-center-pulse {
transform-box: view-box;
transform-origin: 100px 100px;
animation: home-a-bcb-center-pulse 4s ease-in-out infinite;
}
/* Numerology × Natal Daily — halo around Life Path 7 expands +
contracts (the "today's number is alive" beat), halo around
Personal Day 6 pulses on the same rhythm a beat behind, and the
8 starfield twinkles fade in/out on staggered cycles. */
@keyframes home-a-nnd-halo {
0%, 100% { transform: scale(1); opacity: 0.55; }
50% { transform: scale(1.18); opacity: 0.85; }
}
.home-a-scrip-art .nd-halo {
transform-box: fill-box;
transform-origin: center;
animation: home-a-nnd-halo 4.5s ease-in-out infinite;
}
.home-a-scrip-art .nd-halo-center {
transform-box: fill-box;
transform-origin: center;
animation: home-a-nnd-halo 4.5s ease-in-out 1.2s infinite;
}
@keyframes home-a-nnd-tw {
0%, 100% { opacity: 0.25; }
50% { opacity: 1; }
}
.home-a-scrip-art .nd-tw-1 { animation: home-a-nnd-tw 3.2s ease-in-out infinite; }
.home-a-scrip-art .nd-tw-2 { animation: home-a-nnd-tw 3.6s ease-in-out 0.4s infinite; }
.home-a-scrip-art .nd-tw-3 { animation: home-a-nnd-tw 2.8s ease-in-out 0.8s infinite; }
.home-a-scrip-art .nd-tw-4 { animation: home-a-nnd-tw 3.4s ease-in-out 1.2s infinite; }
.home-a-scrip-art .nd-tw-5 { animation: home-a-nnd-tw 3.0s ease-in-out 0.2s infinite; }
.home-a-scrip-art .nd-tw-6 { animation: home-a-nnd-tw 2.6s ease-in-out 1.5s infinite; }
.home-a-scrip-art .nd-tw-7 { animation: home-a-nnd-tw 3.8s ease-in-out 0.6s infinite; }
.home-a-scrip-art .nd-tw-8 { animation: home-a-nnd-tw 3.1s ease-in-out 1.0s infinite; }
/* Monthly Transit Forecast — full moon glows in/out + twinkles stagger */
@keyframes home-a-mtf-moon-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.78; }
}
.home-a-scrip-art .home-a-mtf-fullmoon {
transform-box: view-box;
transform-origin: 120px 50px;
animation: home-a-mtf-moon-pulse 3.5s ease-in-out infinite;
}
@keyframes home-a-mtf-twinkle {
0%, 100% { opacity: 0.25; }
50% { opacity: 1; }
}
.home-a-scrip-art .home-a-mtf-twinkles .t1 { animation: home-a-mtf-twinkle 2.2s ease-in-out infinite; }
.home-a-scrip-art .home-a-mtf-twinkles .t2 { animation: home-a-mtf-twinkle 2.6s ease-in-out 0.5s infinite; }
.home-a-scrip-art .home-a-mtf-twinkles .t3 { animation: home-a-mtf-twinkle 2.4s ease-in-out 1.1s infinite; }
.home-a-scrip-art .home-a-mtf-twinkles .t4 { animation: home-a-mtf-twinkle 2.8s ease-in-out 0.3s infinite; }
.home-a-scrip-card-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.55rem;
line-height: 1.18;
color: var(--ink);
margin: 0 0 0.7rem;
/* Match the .home-a-apoth-title vertical-centering: reserves a 2.4em
min-height block and centers single-line titles inside it so the
teases below align across all 4 cards. */
display: grid;
place-items: center;
min-height: 2.4em;
}
.home-a-scrip-card-title em { font-style: italic; color: var(--burgundy); }
.home-a-scrip-card-tease {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.15rem; /* match .home-a-apoth-tease */
line-height: 1.5;
color: var(--ink);
margin: 0 0 1.2rem;
}
.home-a-scrip-more {
margin-top: auto;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 900;
letter-spacing: 0.2em;
font-size: 0.98rem;
color: var(--burgundy);
border-bottom: 1.5px solid var(--burgundy);
padding-bottom: 3px;
align-self: center;
}
.home-a-scrip-foot { text-align: center; margin-top: 2rem; }
.home-a-scrip-foot-link {
font-family: 'EB Garamond', serif;
font-size: 1.5rem; /* match .home-a-journal-more on the journal band */
color: #F4DCA6;
text-decoration: none;
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
letter-spacing: 0.01em;
transition: gap 0.2s;
}
.home-a-scrip-foot-link em {
font-style: italic;
font-weight: 500;
border-bottom: 1.5px solid rgba(212, 172, 104, 0.55);
padding-bottom: 2px;
}
.home-a-scrip-foot-link:hover { gap: 0.7rem; }
@media (max-width: 640px) {
.home-a-scriptorium-band { padding: 3rem 0 2.5rem; }
.home-a-scriptorium-inner { padding: 0 1.25rem; }
.home-a-scriptorium-corner--tl,
.home-a-scriptorium-corner--tr,
.home-a-scriptorium-corner--bl,
.home-a-scriptorium-corner--br { display: none; }
}
/* ═══════════ 7. SIGN PICKER (scoped overrides only) ═══════════ */
.home-a .home-a-wayfinder { margin-top: 0; }
.home-a-signs-tease {
text-align: center;
font-family: 'Italianno', cursive;
font-size: 1.55rem;
color: var(--burgundy);
line-height: 1.1;
margin: 1rem auto 0;
max-width: 580px;
-webkit-text-stroke: 0.3px var(--burgundy);
}
/* ═══════════ 8. MEMBERSHIP CTA — aubergine "✦ Members" upsell panel
ported from /deep-readings/birth-chart-blueprint/ (.pa-upsell). ═══════════ */
.home-a-membership-section {
max-width: 1180px; /* match the Wander the Cosmos (.apothecary-section) width */
margin: 2rem auto 0;
padding: 0 1.5rem;
}
.home-a .home-a-upsell-inner {
background: linear-gradient(180deg, #3A1F38, #2D1F38);
border: 1px solid var(--gold);
border-radius: 14px;
padding: 2.5rem 3rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 2.5rem;
align-items: center;
box-shadow: 0 22px 60px rgba(58, 31, 56, 0.4), inset 0 0 0 1px rgba(212, 172, 104, 0.2);
position: relative;
overflow: hidden;
}
.home-a .home-a-upsell-inner::before {
content: "";
position: absolute;
inset: 10px;
border-radius: 9px;
border: 1px solid rgba(212, 172, 104, 0.22);
pointer-events: none;
}
.home-a .home-a-upsell-medallion {
width: 140px;
height: 140px;
flex-shrink: 0;
animation: home-a-upsell-drift 5s ease-in-out infinite;
}
@keyframes home-a-upsell-drift {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
.home-a .home-a-upsell-medallion { animation: none; }
}
.home-a .home-a-upsell-eyebrow {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.3em;
color: var(--gold-bright);
margin-bottom: 0.55rem;
}
.home-a .home-a-upsell-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.6rem, 2.8vw, 2.05rem);
color: #F5EBD3;
line-height: 1.15;
margin: 0 0 0.85rem;
text-align: left;
-webkit-text-stroke: 0;
text-shadow: none;
}
.home-a .home-a-upsell-title em {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1em;
color: var(--gold-bright);
font-weight: 600;
}
.home-a .home-a-upsell-copy > p {
font-family: 'EB Garamond', serif;
font-size: 1.22rem;
font-weight: 500;
line-height: 1.55;
color: #FFFAEA;
margin: 0 0 1rem;
}
.home-a .home-a-upsell-benefits {
list-style: none;
padding: 0;
margin: 0 0 1.4rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4rem 1.2rem;
}
.home-a .home-a-upsell-benefits li {
display: flex;
align-items: center;
gap: 0.55rem;
font-family: 'EB Garamond', serif;
font-size: 1.18rem;
color: #FFFAEA;
}
.home-a .home-a-upsell-benefits li::before {
content: "\2726";
flex-shrink: 0;
line-height: 1;
color: var(--gold-bright);
font-size: 0.95rem;
}
.home-a .home-a-upsell-btn {
display: inline-block;
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 1rem;
padding: 1.05rem 2.4rem;
background: linear-gradient(180deg, var(--gold-bright), var(--gold));
color: var(--aubergine);
border: 1px solid var(--gold-bright);
border-radius: 99px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(184, 145, 80, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
margin-bottom: 1.4rem;
transition: filter 0.2s, transform 0.2s;
}
.home-a .home-a-upsell-btn:hover {
filter: brightness(1.05);
transform: translateY(-1px);
}
.home-a .home-a-upsell-micro {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.1rem;
color: #FFFAEA;
margin: 0;
display: block;
}
@media (max-width: 760px) {
.home-a .home-a-upsell-inner {
grid-template-columns: 1fr;
text-align: center;
padding: 2.5rem 1.5rem;
}
.home-a .home-a-upsell-title { text-align: center; }
.home-a .home-a-upsell-medallion { margin: 0 auto; }
.home-a .home-a-upsell-benefits {
grid-template-columns: 1fr;
text-align: left;
max-width: 18rem;
margin-left: auto;
margin-right: auto;
}
}
/* ═══════════ 9. FREE TOOLS — 4-card grid ═══════════ */
.home-a-tools-section { margin: 0 auto 1.5rem; }
.home-a-tools-grid {
list-style: none;
margin: 0.5rem auto 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
max-width: 1180px;
}
@media (max-width: 980px) {
.home-a-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.home-a-tools-grid { grid-template-columns: 1fr; }
}
.home-a-tool-card { margin: 0; }
.home-a-tool-link {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1.6rem 1.25rem 1.5rem;
background: var(--vellum);
border: 0.5px solid rgba(142, 110, 58, 0.42);
border-radius: 2px;
text-decoration: none;
box-shadow:
inset 0 0 0 4px rgba(250, 241, 225, 0.6),
inset 0 0 0 5px rgba(142, 110, 58, 0.28),
0 6px 20px rgba(58, 31, 56, 0.10);
transition: transform 0.3s, box-shadow 0.3s;
height: 100%;
}
.home-a-tool-link:hover {
transform: translateY(-4px);
box-shadow:
inset 0 0 0 4px rgba(250, 241, 225, 0.6),
inset 0 0 0 5px rgba(142, 110, 58, 0.4),
0 16px 36px rgba(58, 31, 56, 0.18);
}
.home-a-tool-art {
width: 130px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.home-a-tool-art svg { width: 100%; height: 100%; }
.home-a-tool-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.22rem;
line-height: 1.15;
color: var(--ink);
margin: 0 0 0.55rem;
}
.home-a-tool-title em { color: var(--burgundy); }
.home-a-tool-tease {
font-family: 'EB Garamond', serif;
font-size: 0.98rem;
line-height: 1.45;
color: var(--ink-mute);
margin: 0 0 1rem;
flex: 1;
}
.home-a-tool-more {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
letter-spacing: 0.18em;
font-size: 0.85rem;
color: var(--burgundy);
}
/* --- Tarot card flip widget --- */
.home-a-tool-tarot-art {
width: 130px;
height: 200px;
perspective: 800px;
margin-bottom: 1rem;
}
.home-a-tarot-flip {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
cursor: pointer;
}
.home-a-tarot-flip.is-flipped { transform: rotateY(180deg); }
.home-a-tarot-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 4px;
overflow: hidden;
box-shadow:
0 8px 20px rgba(58, 31, 56, 0.35),
0 0 0 1.2px var(--gold);
}
.home-a-tarot-front { background: #3A1F38; }
.home-a-tarot-front img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.home-a-tarot-fallback {
display: none;
width: 100%;
height: 100%;
}
.home-a-tarot-fallback svg { width: 100%; height: 100%; display: block; }
.home-a-tarot-back {
transform: rotateY(180deg);
background:
radial-gradient(ellipse 70% 55% at 50% 35%, rgba(212, 172, 104, 0.28), transparent 60%),
linear-gradient(170deg, #3A1F38 0%, #2A1428 100%);
color: var(--type-on-dark);
padding: 0.85rem 0.8rem;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.home-a-tarot-back-eyebrow {
font-family: 'Italianno', cursive;
font-size: 1.2rem;
color: var(--gold-bright);
line-height: 1;
margin-bottom: 0.45rem;
}
.home-a-tarot-back-text {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 0.82rem;
line-height: 1.4;
color: var(--gold-pale);
margin: 0;
}
/* --- Numerology numeral --- */
.home-a-tool-numeral-art {
width: 130px;
height: 130px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.home-a-numeral {
font-family: 'Cinzel Decorative', serif;
font-weight: 900;
font-size: 5.5rem;
line-height: 1;
color: var(--burgundy);
background: linear-gradient(180deg, var(--gold-bright) 0%, var(--burgundy) 70%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 30px rgba(212, 172, 104, 0.3);
z-index: 1;
position: relative;
}
.home-a-numeral-halo {
position: absolute;
inset: 12px;
border-radius: 50%;
border: 1px solid var(--gold);
opacity: 0.5;
pointer-events: none;
}
.home-a-numeral-halo::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 0.5px dashed var(--gold-deep);
opacity: 0.6;
animation: home-a-numeral-rotate 32s linear infinite;
}
@keyframes home-a-numeral-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.home-a-numeral-halo::before { animation: none; }
}
/* ═══════════ 10. DEEP READINGS — 5-card row ═══════════ */
.home-a-dr-section { margin: 0 auto 2rem; }
.home-a-dr-row {
list-style: none;
margin: 0.5rem auto 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
max-width: 1180px;
}
@media (max-width: 1080px) {
.home-a-dr-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.home-a-dr-row { grid-template-columns: 1fr; }
}
.home-a-dr-card { margin: 0; }
.home-a-dr-link {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1.35rem 1.1rem 1.4rem;
background: var(--vellum);
border: 0.5px solid rgba(142, 110, 58, 0.4);
border-radius: 2px;
text-decoration: none;
box-shadow:
inset 0 0 0 4px rgba(250, 241, 225, 0.6),
inset 0 0 0 5px rgba(142, 110, 58, 0.26),
0 6px 18px rgba(58, 31, 56, 0.10);
transition: transform 0.3s, box-shadow 0.3s;
height: 100%;
}
.home-a-dr-link:hover {
transform: translateY(-4px);
box-shadow:
inset 0 0 0 4px rgba(250, 241, 225, 0.6),
inset 0 0 0 5px rgba(142, 110, 58, 0.4),
0 14px 32px rgba(58, 31, 56, 0.18);
}
.home-a-dr-art {
width: 100px;
height: 100px;
margin-bottom: 0.85rem;
}
.home-a-dr-art svg { width: 100%; height: 100%; }
.home-a-dr-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.08rem;
line-height: 1.15;
color: var(--ink);
margin: 0 0 0.5rem;
}
.home-a-dr-tease {
font-family: 'EB Garamond', serif;
font-size: 0.92rem;
line-height: 1.45;
color: var(--ink-mute);
margin: 0 0 0.85rem;
flex: 1;
}
.home-a-dr-more {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
letter-spacing: 0.18em;
font-size: 0.78rem;
color: var(--burgundy);
}
.home-a-dr-foot { text-align: center; margin-top: 1.5rem; }
.home-a-dr-foot-link {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
letter-spacing: 0.22em;
font-size: 0.95rem;
color: var(--burgundy);
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1px solid var(--burgundy);
transition: letter-spacing 0.2s;
}
.home-a-dr-foot-link:hover { letter-spacing: 0.26em; }
/* ═══════════ 11. COLOPHON ═══════════ */
.home-a-colophon { margin: 0 auto 2rem; text-align: center; }
.home-a-colophon-row {
list-style: none;
margin: 0.5rem 0 1rem;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 0.85rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
letter-spacing: 0.18em;
font-size: 0.9rem;
}
.home-a-colophon-row a {
color: var(--ink);
text-decoration: none;
transition: color 0.2s;
}
.home-a-colophon-row a:hover { color: var(--burgundy); }
.home-a-trustline {
font-family: 'Italianno', cursive;
font-size: 1.35rem;
color: var(--gold-deep);
margin: 0.25rem 0 0;
}
/* ═══════════ 10b. ASTROLOGY ENCYCLOPEDIA — night band, plate cards ═══════════ */
.home-a-encyclopedia-section {
position: relative;
margin: 0 calc(50% - 50vw) 3rem;
padding: 3rem 1.5rem 3.25rem;
background-color: #161232;
background-image:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(184, 145, 80, 0.16), transparent 60%),
radial-gradient(ellipse 60% 50% at 50% 100%, rgba(107, 31, 44, 0.16), transparent 65%),
linear-gradient(180deg, #100C26 0%, #221A40 50%, #100C26 100%);
border-top: 0.5px solid rgba(184, 145, 80, 0.35);
border-bottom: 0.5px solid rgba(184, 145, 80, 0.35);
}
.home-a .home-a-enc-head { max-width: 900px; margin: 0 auto 2rem; text-align: center; }
.home-a .home-a-enc-h2 {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.05;
letter-spacing: -0.018em;
color: #FBF4E4;
margin: 0 0 0.5rem;
text-align: center;
}
.home-a .home-a-enc-h2 em {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1em;
color: var(--gold-bright);
-webkit-text-stroke: 0;
text-shadow: none;
vertical-align: baseline;
}
.home-a-enc-subtitle {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(1.08rem, 1.45vw, 1.25rem);
line-height: 1.5;
color: #FFFAEA;
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.home-a-enc-subtitle .enc-hl { color: #E2B0BA; font-weight: 600; font-style: normal; }
.home-a-enc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.1rem;
max-width: 1180px;
margin: 0 auto;
}
.home-a-enc-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1.6rem 1rem 1.3rem;
background: linear-gradient(180deg, #FAF1E1, #F3E6C9);
border: 1px solid var(--gold);
border-radius: 4px;
text-decoration: none;
box-shadow: inset 0 0 0 4px rgba(251, 243, 220, 0.5), 0 10px 26px rgba(0, 0, 0, 0.3);
transition: transform 0.2s, box-shadow 0.2s;
}
.home-a-enc-card:hover {
transform: translateY(-3px);
box-shadow: inset 0 0 0 4px rgba(251, 243, 220, 0.7), 0 16px 34px rgba(0, 0, 0, 0.42);
}
.home-a-enc-plate {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-weight: 700;
font-size: 2rem;
color: var(--gold-deep);
line-height: 1;
margin-bottom: 0.5rem;
}
.home-a-enc-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.4rem;
color: var(--ink);
margin: 0 0 0.35rem;
line-height: 1.15;
}
.home-a-enc-tag {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.14rem;
color: var(--burgundy);
margin-bottom: 0.75rem;
}
.home-a-enc-count {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
letter-spacing: 0.14em;
font-size: 1.02rem;
color: #7A5524;
margin-top: auto;
}
.home-a-enc-arrow { transition: margin-left 0.2s; }
.home-a-enc-card:hover .home-a-enc-arrow { margin-left: 0.25rem; }
/* L-bracket corners */
.home-a-enc-card .enc-tl, .home-a-enc-card .enc-tr,
.home-a-enc-card .enc-bl, .home-a-enc-card .enc-br {
position: absolute;
width: 12px;
height: 12px;
border: 1.5px solid var(--gold-deep);
opacity: 0.7;
}
.home-a-enc-card .enc-tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.home-a-enc-card .enc-tr { top: 7px; right: 7px; border-left: 0; border-bottom: 0; }
.home-a-enc-card .enc-bl { bottom: 7px; left: 7px; border-right: 0; border-top: 0; }
.home-a-enc-card .enc-br { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
@media (max-width: 900px) { .home-a-enc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .home-a-enc-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } }
@media (max-width: 380px) { .home-a-enc-grid { grid-template-columns: 1fr; } }
/* ═══════════ 12. NEWSLETTER — sealed-letter, quiet ═══════════ */
.home-a-newsletter-section {
max-width: 1180px; /* match the Wander the Cosmos (.apothecary-section) width */
margin: 0 auto 2rem;
padding: 0 1.5rem;
}
.home-a .home-a-newsletter {
max-width: none; /* fill the widened section so it matches Wander the Cosmos */
margin: 0 auto;
padding: 2.5rem 2.75rem;
}
/* "The Weekly Sky." eyebrow — larger than the base .letter-eyebrow. */
.home-a .home-a-newsletter .letter-eyebrow { font-size: 2.8rem; }
/* Let the deck fill the text column instead of capping at 460px —
kills the empty gap before the illustration. */
.home-a .home-a-newsletter .letter-deck { max-width: none; }
.home-a-newsletter-form {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: center;
}
.home-a-news-label {
position: absolute;
left: -9999px;
}
.home-a-newsletter-form input[type="email"] {
flex: 1 1 220px;
min-width: 0;
padding: 0.95rem 1.15rem;
font-family: 'EB Garamond', serif;
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--ink);
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--rule-gold);
border-radius: 0;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.home-a-newsletter-form input[type="email"]::placeholder {
font-weight: 500;
letter-spacing: 0.03em;
color: rgba(45, 31, 56, 0.5);
}
.home-a-newsletter-form input[type="email"]:focus {
border-color: var(--burgundy);
background: #fff;
}
.home-a-newsletter-form button {
flex-shrink: 0;
background: linear-gradient(180deg, var(--gold-shimmer), var(--gold) 60%, var(--gold-deep));
color: var(--ink);
border: 0;
padding: 0.9rem 2.4rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 1.3rem;
letter-spacing: 0.18em;
cursor: pointer;
transition: letter-spacing 0.2s;
}
.home-a-newsletter-form button:hover { letter-spacing: 0.22em; }
.home-a-newsletter-art svg { width: 100%; height: 100%; }
/* Sealed-envelope illustration animations (ported from /login/). */
.home-a .home-a-newsletter-art .tw {
animation: ha-env-twinkle 2.6s ease-in-out infinite;
}
.home-a .home-a-newsletter-art .tw-1 { animation-delay: 0s; animation-duration: 2.4s; }
.home-a .home-a-newsletter-art .tw-2 { animation-delay: 0.7s; animation-duration: 3.2s; }
.home-a .home-a-newsletter-art .tw-3 { animation-delay: 1.4s; animation-duration: 2.8s; }
.home-a .home-a-newsletter-art .tw-4 { animation-delay: 0.3s; animation-duration: 3.6s; }
.home-a .home-a-newsletter-art .tw-5 { animation-delay: 1.9s; animation-duration: 2.2s; }
.home-a .home-a-newsletter-art .tw-6 { animation-delay: 0.5s; animation-duration: 3.0s; }
.home-a .home-a-newsletter-art .tw-7 { animation-delay: 1.1s; animation-duration: 2.6s; }
@keyframes ha-env-twinkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
.home-a .home-a-newsletter-art .ha-env-seal {
transform-box: fill-box;
transform-origin: center;
animation: ha-env-seal-pulse 2.4s ease-in-out infinite;
}
@keyframes ha-env-seal-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.home-a .home-a-newsletter-art .tw,
.home-a .home-a-newsletter-art .ha-env-seal { animation: none; }
}
/* ═══════════ DECORATIVE STAR PARALLAX (DISABLED) ═══════════
User asked for the hero to match /tarot/tarot-card-of-the-day/
exactly — no parallax stars there. Removed via display:none rather
than deleting the rules in case we want to bring them back later. */
.home-a-hero::before,
.home-a-hero::after {
display: none !important;
content: "✦";
position: absolute;
font-family: 'EB Garamond', serif;
color: var(--gold);
opacity: 0.5;
pointer-events: none;
animation: home-a-twinkle 4s ease-in-out infinite;
}
.home-a-hero::before { top: 18%; left: 10%; font-size: 1.6rem; }
.home-a-hero::after { top: 32%; right: 12%; font-size: 1.1rem; animation-delay: 1.3s; }
@media (max-width: 640px) {
.home-a-hero::before, .home-a-hero::after { display: none; }
}
/* ═══════════ MOBILE TYPE SCALING ═══════════ */
@media (max-width: 640px) {
.home-a-main { padding: 0 1rem 4rem; }
.home-a-feature { padding: 1.5rem 1.25rem; }
.home-a-moonsvg { width: 200px; }
.home-a-moon-title { font-size: 1.55rem; }
}
/* ───────────────────────────────────────────────────────────
Living Chart — full wheel SVG from /api/birth_chart.php
The chart SVG ships with its own intrinsic dimensions; we
constrain the wrapper so it scales gracefully on mobile.
─────────────────────────────────────────────────────────── */
.home-a-sky-chart-wrap {
position: relative;
width: 100%;
max-width: 922px;
margin: 0 auto;
}
/* Parchment-cream backdrop that fills ALL the way to the wheel's dark
teal outer band — including under the house-number numerals which
sit just inside the teal inner edge. Inset 6% = 88% diameter circle,
radius ~317 in 720 viewBox coords, which reaches the inside of the
teal ring at r=310 with a hair of overlap so the seam is clean. */
.home-a-sky-chart-wrap::before {
content: "";
position: absolute;
inset: 6%;
border-radius: 50%;
background: #FBF3DC;
z-index: 0;
pointer-events: none;
}
.home-a-sky-chart-wrap svg {
position: relative;
z-index: 1;
width: 100%;
height: auto;
display: block;
}
/* ╔════════════════════════════════════════════════════════════╗
║ LIVE SKY PURPLE PLATE — variant A unified 3-col hero ║
║ ║
║ Mirrors the .hub-sky-plate pattern from /horoscopes/ ║
║ (see horoscopes-v2-f.css lines 2495-2643). One big ║
║ aubergine plate, gold filigree, corner brackets — wraps ║
║ the 3-col grid (timeline · moon · state) on the homepage. ║
╚════════════════════════════════════════════════════════════╝ */
.home-a-livesky-plate {
position: relative;
padding: 3rem 2.4rem 1.4rem; /* trimmed bottom — Schumann sits closer to plate edge */
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(184, 145, 80, 0.18), transparent 60%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(185, 107, 122, 0.12), transparent 60%),
linear-gradient(180deg, #3A1F38 0%, #2A1428 100%);
color: #F0E8D2;
border-radius: 3px;
overflow: hidden;
box-shadow:
0 30px 80px rgba(45, 20, 40, 0.5),
0 0 0 1px #D4AC68;
margin: 0 auto 3rem;
max-width: 1180px;
}
.home-a-livesky-plate::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.45;
z-index: 0;
}
.home-a-livesky-plate::after {
content: "";
position: absolute;
inset: 14px;
border: 1px solid rgba(212, 172, 104, 0.42);
pointer-events: none;
z-index: 0;
}
/* Mobile fix — the ::before paints a feTurbulence SVG-noise filter across the
whole plate; iOS Safari re-rasterizes that (plus the 80px blur shadow) on
every scroll, so the box visibly "rebuilds" as you scroll. On phones we drop
the noise (invisible at this size anyway), lighten the shadow, and pin the
plate to a single composited layer so it paints once and just composites. */
@media (max-width: 880px) {
.home-a-livesky-plate::before { display: none; }
.home-a-livesky-plate {
box-shadow: 0 8px 24px rgba(45, 20, 40, 0.40), 0 0 0 1px #D4AC68;
/* Flatten to a single gradient — the layered radial gradients re-rasterize
tile-by-tile on every iOS scroll repaint ("loads in sections"). */
background: linear-gradient(180deg, #3A1F38 0%, #2A1428 100%);
}
/* A `filter` on a scrolling element re-rasterizes its region every frame on
iOS and drags the whole plate into a repaint. Drop the moon glow on mobile
(barely visible at phone size); the moon itself is unchanged. Then pin the
moon to its OWN small cached layer (translateZ) so iOS rasterizes it once
and just composites it while scrolling — no per-frame redraw of the lunar
image. (It's small enough to cache cleanly, unlike the whole tall plate.) */
.home-a-livesky-plate .home-a-moon-art {
filter: none;
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
.home-a-lsp-corner {
position: absolute;
width: 18px; height: 18px;
border: 1px solid #D4AC68;
opacity: 0.85;
pointer-events: none;
z-index: 2;
}
.home-a-lsp-corner-tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.home-a-lsp-corner-tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.home-a-lsp-corner-bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.home-a-lsp-corner-br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.home-a-lsp-head {
position: relative;
z-index: 1;
text-align: center;
margin-bottom: 2rem;
}
.home-a-lsp-eyebrow {
font-family: 'Cinzel', 'EB Garamond', serif;
font-weight: 800;
letter-spacing: 0.42em;
text-transform: uppercase;
font-size: 1rem;
color: #D4AC68;
text-indent: 0.42em;
text-shadow: 0 0 12px rgba(212, 172, 104, 0.45);
}
.home-a-lsp-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(1.8rem, 3vw, 2.4rem);
color: #F4DCA6;
margin: 0.55rem 0 0.4rem;
text-shadow: 0 0 24px rgba(244, 220, 166, 0.25);
}
.home-a-lsp-script {
font-family: 'Italianno', cursive;
font-size: clamp(1.75rem, 2.8vw, 2.4rem);
color: #E2B0BA;
-webkit-text-stroke: 0.3px #E2B0BA;
letter-spacing: 0.04em;
}
/* 3-column grid for timeline / moon / state */
.home-a-lsp-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.3fr 1fr;
gap: 0;
border-top: 1px solid rgba(212, 172, 104, 0.38);
border-bottom: 1px solid rgba(212, 172, 104, 0.38);
}
.home-a-lsp-col {
padding: 1.5rem 1.6rem;
border-right: 1px solid rgba(212, 172, 104, 0.28);
min-width: 0;
}
.home-a-lsp-col:last-child { border-right: 0; }
.home-a-lsp-coltitle {
font-family: 'Cinzel', 'EB Garamond', serif;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
font-size: 0.95rem;
color: #D4AC68;
text-align: center;
margin: 0 0 0.4rem;
}
.home-a-lsp-colsub {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.15rem;
color: #E2B0BA;
text-align: center;
margin: 0 0 1.5rem;
line-height: 1.4;
}
/* ── Today's Sky timeline (left col) on dark purple ── */
.home-a-livesky-plate .sky-timeline-list {
list-style: none;
margin: 0;
padding: 0;
}
.home-a-livesky-plate .home-a-sky-event {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 0.85rem 0;
background: transparent;
border: 0;
}
.home-a-livesky-plate .home-a-sky-event + .home-a-sky-event {
border-top: 1px dashed rgba(212, 172, 104, 0.28);
}
.home-a-livesky-plate .home-a-sky-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
/* circle removed per user feedback — illustrations stand alone on purple */
background: transparent;
border: 0;
border-radius: 0;
}
.home-a-livesky-plate .home-a-sky-icon svg {
width: 48px; /* bumped from 36 — illustrations more prominent */
height: 48px;
display: block;
}
.home-a-livesky-plate .home-a-sky-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.home-a-livesky-plate .home-a-sky-label {
font-family: 'Cinzel', 'EB Garamond', serif;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.92rem; /* bumped from 0.78 */
color: #F4DCA6;
}
.home-a-livesky-plate .home-a-sky-time {
font-family: 'EB Garamond', serif;
font-weight: 600;
font-size: 1.05rem; /* bumped from 0.95 */
color: #D4AC68;
margin-top: 0.15rem;
}
.home-a-livesky-plate .home-a-sky-poetic {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.08rem; /* bumped from 0.92 */
color: #E8D7B5;
margin-top: 0.2rem;
line-height: 1.45;
}
/* ── Bottom-of-Today's-Sky extras (Solstice / Moon Distance / Planetary Hour) ── */
.home-a-livesky-plate .home-a-sky-extras {
list-style: none;
margin: 1.5rem 0 0;
padding: 1.1rem 0 0;
border-top: 1px solid rgba(212, 172, 104, 0.32);
display: grid;
gap: 0.55rem;
}
.home-a-livesky-plate .home-a-sky-extras li {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.6rem;
align-items: baseline;
}
.home-a-livesky-plate .home-a-sky-extra-key {
font-family: 'Cinzel', 'EB Garamond', serif;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.78rem;
color: #D4AC68;
}
.home-a-livesky-plate .home-a-sky-extra-val {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 0.98rem;
color: #F4DCA6;
text-align: right;
}
.home-a-livesky-plate .sky-timeline-empty {
padding: 0.85rem 0;
color: #E8D7B5;
font-family: 'EB Garamond', serif;
font-style: italic;
}
/* ── Moon hero (center col) on dark purple ── */
.home-a-livesky-plate .home-a-moon-block {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
.home-a-livesky-plate .home-a-moon-headline {
font-family: 'EB Garamond', serif;
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
font-weight: 500;
color: #F4DCA6;
letter-spacing: 0.02em;
}
.home-a-livesky-plate .home-a-moon-headline em {
color: #E2B0BA;
font-weight: 600;
font-style: italic;
}
.home-a-livesky-plate .home-a-moon-glyph {
color: #D4AC68;
font-family: var(--cc-font-glyph, 'Noto Sans Symbols 2', serif);
font-size: 1.3em;
text-shadow: 0 0 14px rgba(212, 172, 104, 0.45);
margin-right: 0.2em;
}
.home-a-livesky-plate .home-a-moon-meta-line {
font-family: 'Cinzel', 'EB Garamond', serif;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
font-size: 0.78rem;
color: #D4AC68;
margin-bottom: 0.15rem; /* tightened — moon hugs the illumination line */
}
.home-a-livesky-plate .home-a-moon-art {
width: 100%;
max-width: 360px;
margin: 0.1rem auto 0.2rem; /* tightened above + below the moon SVG */
filter: drop-shadow(0 0 30px rgba(244, 220, 166, 0.18));
}
.home-a-livesky-plate .home-a-moon-art svg { width: 100%; height: auto; display: block; }
.home-a-livesky-plate .home-a-moon-poetic {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: clamp(1.18rem, 1.7vw, 1.35rem);
color: #E8D7B5;
line-height: 1.55;
margin: 0.15rem 0 0; /* poetic line hugs the moon */
max-width: 38ch;
}
/* ── Sky State rows (right col) on dark purple ── */
.home-a-livesky-plate .home-a-statelist {
list-style: none;
margin: 0;
padding: 0;
}
.home-a-livesky-plate .home-a-statelist li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.9rem;
padding: 0.55rem 0;
border-bottom: 1px dashed rgba(212, 172, 104, 0.25);
}
.home-a-livesky-plate .home-a-statelist li:last-child { border-bottom: 0; }
.home-a-livesky-plate .home-a-state-key {
font-family: 'Cinzel', 'EB Garamond', serif;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 0.85rem; /* bumped from 0.72 */
color: #D4AC68;
flex: 0 0 auto;
}
.home-a-livesky-plate .home-a-state-val {
font-family: 'EB Garamond', serif;
font-size: 1.12rem; /* bumped from 0.98 — "Day 12 of 29" reads better */
color: #F4DCA6;
text-align: right;
min-width: 0;
}
.home-a-livesky-plate .home-a-state-val em {
color: #E2B0BA;
font-style: italic;
}
.home-a-livesky-plate .home-a-state-val strong {
color: #F4DCA6;
font-weight: 700;
}
.home-a-livesky-plate .home-a-state-val .glyph {
color: #D4AC68;
font-family: var(--cc-font-glyph, 'Noto Sans Symbols 2', serif);
margin-right: 0.25em;
}
.home-a-livesky-plate .home-a-state-rx {
color: #E2B0BA;
font-weight: 700;
}
/* ── Responsive ── */
@media (max-width: 1080px) {
.home-a-lsp-grid {
grid-template-columns: 1fr;
gap: 0;
}
.home-a-lsp-col {
border-right: 0;
border-bottom: 1px solid rgba(212, 172, 104, 0.28);
}
.home-a-lsp-col:last-child { border-bottom: 0; }
}
@media (max-width: 720px) {
.home-a-livesky-plate { padding: 2.2rem 1.6rem 2.4rem; }
}
/* ════════════════════════════════════════════════════════════
Live Sky plate — horizontal extras strip + moons strip,
both pulled INSIDE the purple plate.
════════════════════════════════════════════════════════════ */
/* Horizontal extras strip — sits inside the purple plate, between the 3-column
grid and the moons strip. 3 items side by side, separated by gold rules. */
.home-a-livesky-plate .home-a-lsp-extras {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding: 1.4rem 1.6rem;
border-bottom: 1px solid rgba(212, 172, 104, 0.38);
}
.home-a-livesky-plate .home-a-lsp-extra {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 0 0.8rem;
border-right: 1px solid rgba(212, 172, 104, 0.22);
text-align: center;
}
.home-a-livesky-plate .home-a-lsp-extra:last-child { border-right: 0; }
.home-a-livesky-plate .home-a-lsp-extra-key {
font-family: 'Cinzel', 'EB Garamond', serif;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.78rem;
color: #D4AC68;
}
.home-a-livesky-plate .home-a-lsp-extra-val {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.05rem;
color: #F4DCA6;
}
@media (max-width: 720px) {
.home-a-livesky-plate .home-a-lsp-extras {
grid-template-columns: 1fr;
gap: 0.9rem;
}
.home-a-livesky-plate .home-a-lsp-extra {
border-right: 0;
border-bottom: 1px dashed rgba(212, 172, 104, 0.22);
padding-bottom: 0.85rem;
}
.home-a-livesky-plate .home-a-lsp-extra:last-child { border-bottom: 0; padding-bottom: 0; }
}
/* Moons strip — inside the purple plate, no cream backgrounds. */
.home-a-livesky-plate .home-a-lsp-moons {
position: relative;
z-index: 1;
padding: 1.4rem 1.6rem 1.6rem;
}
.home-a-livesky-plate .home-a-lsp-moons-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.home-a-livesky-plate .home-a-lsp-moons-grid:has(.home-a-lsp-moon-card--eclipse) {
grid-template-columns: repeat(5, 1fr);
}
.home-a-livesky-plate .home-a-lsp-moon-card {
text-align: center;
padding: 1rem 0.6rem;
border-right: 1px solid rgba(212, 172, 104, 0.22);
background: transparent;
}
.home-a-livesky-plate .home-a-lsp-moon-card:last-child { border-right: 0; }
.home-a-livesky-plate .home-a-lsp-moon-glyph {
font-family: 'Noto Sans Symbols 2', serif;
font-size: 1.8rem;
color: #D4AC68;
margin-bottom: 0.35rem;
text-shadow: 0 0 14px rgba(212, 172, 104, 0.4);
}
.home-a-livesky-plate .home-a-lsp-moon-label {
font-family: 'Cinzel', 'EB Garamond', serif;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 0.78rem;
color: #F4DCA6;
margin-bottom: 0.4rem;
}
.home-a-livesky-plate .home-a-lsp-moon-date {
font-family: 'EB Garamond', serif;
font-weight: 700;
font-size: 1.1rem;
color: #D4AC68;
margin-bottom: 0.25rem;
}
/* Sign (e.g. "Gemini 24°03'") + days (e.g. "17 days") share the same
bigger size + same rose-pink tone per user feedback — much more legible. */
.home-a-livesky-plate .home-a-lsp-moon-sign {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.04rem;
color: #F4DCA6;
line-height: 1.3;
}
.home-a-livesky-plate .home-a-lsp-moon-sign em {
color: #F4DCA6;
font-style: italic;
}
.home-a-livesky-plate .home-a-lsp-moon-deg {
font-family: 'EB Garamond', serif;
font-weight: 700;
font-style: italic;
font-size: 1.04rem;
color: #F4DCA6;
margin-left: 0.2em;
}
.home-a-livesky-plate .home-a-lsp-moon-days {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.1rem; /* match .home-a-lsp-moon-date (Jun 14) */
color: #E2B0BA;
line-height: 1.3;
margin-top: 0.15rem;
}
.home-a-livesky-plate .home-a-lsp-moon-days {
margin-top: 0.35rem;
}
@media (max-width: 920px) {
.home-a-livesky-plate .home-a-lsp-moons-grid {
grid-template-columns: repeat(2, 1fr);
}
.home-a-livesky-plate .home-a-lsp-moons-grid:has(.home-a-lsp-moon-card--eclipse) {
grid-template-columns: repeat(2, 1fr);
}
.home-a-livesky-plate .home-a-lsp-moon-card {
border-bottom: 1px dashed rgba(212, 172, 104, 0.22);
padding: 1rem;
}
.home-a-livesky-plate .home-a-lsp-moon-card:nth-child(even) { border-right: 0; }
}
@media (max-width: 480px) {
.home-a-livesky-plate .home-a-lsp-moons-grid,
.home-a-livesky-plate .home-a-lsp-moons-grid:has(.home-a-lsp-moon-card--eclipse) {
grid-template-columns: 1fr;
}
.home-a-livesky-plate .home-a-lsp-moon-card {
border-right: 0;
border-bottom: 1px dashed rgba(212, 172, 104, 0.22);
}
}
/* ── Schumann Resonance — full-width single row at the bottom of the plate.
Centered key + value with a small gap, separated from the moons grid by
a gold rule. Pulled out of the Sky State so it has its own moment. ── */
.home-a-livesky-plate .home-a-lsp-schumann {
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
justify-content: center;
gap: 1.1rem;
padding: 1.1rem 1.6rem 0.85rem; /* trimmed bottom — closer to plate edge */
border-top: 1px solid rgba(212, 172, 104, 0.38);
text-align: center;
}
.home-a-livesky-plate .home-a-lsp-schumann-key {
font-family: 'Cinzel', 'EB Garamond', serif;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.95rem;
color: #D4AC68;
}
.home-a-livesky-plate .home-a-lsp-schumann-val {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.15rem;
color: #F4DCA6;
}
@media (max-width: 540px) {
.home-a-livesky-plate .home-a-lsp-schumann {
flex-direction: column;
gap: 0.3rem;
}
}