/* ============================================================ horoscopes-v2-f.css — "Celestial Codex · Midnight Hero" Loads AFTER horoscopes-v2-e.css. F shares E's body design system (folios, lucky days, tarot, affirmation, sky, layer- your-chart, FAQ, apothecary). F overrides only the hero. ============================================================ */ /* Comp F palette — deep cosmic navy + cream display + soft gold accents. Uses E's --cc-* tokens for the cream body; F's hero gets its own. The cream display color (--cf-cream) is taken from comp B's palette (#ede4c8) so the VIRGO display + glyph match the reference image. */ /* Kill horizontal scroll caused by 100vw full-bleed sections — 100vw includes the scrollbar gutter, which exceeds the body's actual width and forces a horizontal scrollbar. */ .cf-body { overflow-x: hidden; } .cf-body { --cf-night: #0B1530; /* deep cosmic navy (matches comp b) */ --cf-night-2: #060C20; /* gradient end */ --cf-night-warm: #131E3F; /* slight blue lift in upper third */ --cf-cream: #EDE4C8; /* THE display color — VIRGO + glyph + sign names */ --cf-cream-warm: #D8C98E; /* warm-cream accent */ --cf-cream-faded: rgba(237, 228, 200, 0.78); --cf-cream-dim: rgba(237, 228, 200, 0.55); --cf-gold: #D4A849; /* warm gold accent (rule, active states) */ --cf-gold-soft: #B8893A; --cf-gold-glow: rgba(212, 168, 73, 0.42); --cf-star: #EDE4C8; /* star color = cream */ --cf-star-bright: #F0E8D2; /* brightest stars (slightly brighter cream) */ } /* The dark hero kills the body's parchment grain on its area only — we want the midnight to feel deep and clean. */ /* ============================================================ 1. HERO — full-bleed dark cosmic band, content stays in the standard centered column so back link / dept / rule land in the same X coordinate as yes-no-tarot. ============================================================ */ .cf-hero { /* Full-bleed: escape any parent max-width constraint */ position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; background: radial-gradient(ellipse at 50% 30%, var(--cf-night-warm) 0%, transparent 65%), radial-gradient(ellipse at 20% 90%, rgba(11, 21, 48, 0.55) 0%, transparent 60%), linear-gradient(180deg, var(--cf-night) 0%, var(--cf-night-2) 100%); overflow: hidden; text-align: center; color: var(--cf-cream); } .cf-hero::before { /* Vignette to deepen the corners */ content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(6, 10, 31, 0.65) 100%); pointer-events: none; z-index: 1; } /* Centered content column — IDENTICAL geometry to yes-no-tarot's .page-hero (max-width 920px, same padding, position: relative) so the absolute-positioned back link / dept / rule land in the exact same X/Y as the tarot + numerology pages. */ .cf-hero-column { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; text-align: center; } /* Top column — back link + dept + rule. Tight padding-bottom so the sign row sits close beneath the rule. */ .cf-hero-column-top { padding: 2rem 2rem 0.6rem; } /* Title column — giant glyph + VIRGO + dates + theme. Tight padding so the range tabs sit close to the theme line. */ .cf-hero-column-title { padding: 0 2rem 0.6rem; } /* Brand .page-hero-back — colors overridden for dark context. Position (absolute, top 1.5rem, left -130px hanging off the left) inherited from yes-no-tarot.css base — DO NOT CHANGE position. */ .cf-hero .page-hero-back { color: var(--gold-pale) !important; border-bottom-color: var(--gold-pale) !important; z-index: 5; } .cf-hero .page-hero-back:hover { color: var(--gold-shimmer) !important; border-bottom-color: var(--gold-shimmer) !important; } /* Department tag — matches the Back to Horoscopes link color (--gold-pale) for visual consistency on the dark hero. */ .cf-hero .page-hero-dept { color: var(--gold-pale) !important; position: relative; z-index: 2; } /* Rule hairlines + ✦ — same --gold-pale as dept + back link */ .cf-hero .page-hero-rule { position: relative; z-index: 2; color: var(--gold-pale) !important; } .cf-hero .page-hero-rule::before, .cf-hero .page-hero-rule::after { background: linear-gradient(90deg, transparent, var(--gold-pale) 50%, transparent) !important; } .cf-hero .page-hero-rule .page-hero-rule-mark { color: var(--gold-pale) !important; background: transparent !important; } /* ============================================================ 2. STARFIELD — five layers, dense + twinkling Each layer has its own twinkle keyframe phase so the field shimmers continuously without obvious sync. ============================================================ */ .cf-sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .cf-sky-dust, .cf-sky-dust2, .cf-sky-dust3, .cf-sky-mid, .cf-sky-mid2, .cf-sky-mid3, .cf-sky-guide, .cf-sky-extra1, .cf-sky-extra2, .cf-sky-extra3 { position: absolute; inset: 0; } /* DUST layer 1 — 25 tiny stars */ .cf-sky-dust { background-image: radial-gradient(0.6px 0.6px at 5% 8%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 12% 20%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 19% 6%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 26% 28%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 33% 14%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 41% 4%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 48% 24%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 56% 10%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 63% 32%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 71% 18%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 79% 6%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 87% 26%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 94% 12%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 3% 36%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 11% 44%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 22% 52%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 31% 60%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 39% 48%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 51% 56%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 60% 50%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 69% 62%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 78% 54%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 85% 48%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 93% 60%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 97% 38%, var(--cf-star), transparent); animation: cfTwinkleA 4.2s ease-in-out infinite; } /* DUST layer 2 — 25 more tiny stars in different positions */ .cf-sky-dust2 { background-image: radial-gradient(0.85px 0.85px at 2% 70%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 9% 80%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 17% 68%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 25% 88%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 33% 76%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 42% 92%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 50% 80%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 58% 96%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 66% 84%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 74% 72%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 82% 90%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 89% 78%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 96% 92%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 7% 30%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 15% 38%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 23% 14%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 30% 42%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 36% 80%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 44% 64%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 53% 38%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 64% 16%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 73% 38%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 81% 60%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 90% 30%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 6% 96%, var(--cf-star-bright), transparent); animation: cfTwinkleB 5.6s ease-in-out infinite; } /* MID layer 1 — 16 medium stars */ .cf-sky-mid { background-image: radial-gradient(1.1px 1.1px at 8% 12%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 18% 26%, var(--cf-star), transparent), radial-gradient(1.1px 1.1px at 30% 8%, var(--cf-star-bright), transparent), radial-gradient(0.95px 0.95px at 40% 22%, var(--cf-star), transparent), radial-gradient(1.1px 1.1px at 52% 14%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 64% 30%, var(--cf-star), transparent), radial-gradient(1.05px 1.05px at 76% 18%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 88% 8%, var(--cf-star), transparent), radial-gradient(1.1px 1.1px at 95% 22%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 4% 50%, var(--cf-star), transparent), radial-gradient(1.05px 1.05px at 26% 56%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 48% 64%, var(--cf-star), transparent), radial-gradient(1.1px 1.1px at 70% 50%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 88% 60%, var(--cf-star), transparent), radial-gradient(1.05px 1.05px at 18% 84%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 60% 88%, var(--cf-star), transparent); filter: drop-shadow(0 0 2px rgba(237, 228, 200, 0.4)); animation: cfTwinkleC 7s ease-in-out infinite; } /* MID layer 2 — 14 more medium stars */ .cf-sky-mid2 { background-image: radial-gradient(1px 1px at 12% 70%, var(--cf-star), transparent), radial-gradient(1.05px 1.05px at 24% 36%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 36% 78%, var(--cf-star), transparent), radial-gradient(1.1px 1.1px at 48% 42%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 60% 78%, var(--cf-star), transparent), radial-gradient(1.05px 1.05px at 72% 38%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 84% 76%, var(--cf-star), transparent), radial-gradient(1.1px 1.1px at 95% 88%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 6% 92%, var(--cf-star), transparent), radial-gradient(1.05px 1.05px at 32% 18%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 56% 6%, var(--cf-star), transparent), radial-gradient(1.1px 1.1px at 80% 4%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 14% 4%, var(--cf-star), transparent), radial-gradient(1.05px 1.05px at 42% 96%, var(--cf-star-bright), transparent); filter: drop-shadow(0 0 2px rgba(237, 228, 200, 0.3)); animation: cfTwinkleD 6.2s ease-in-out infinite; } /* DUST layer 3 — 25 more stars filling gaps in the sky */ .cf-sky-dust3 { background-image: radial-gradient(0.85px 0.85px at 4% 6%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 11% 14%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 19% 24%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 27% 4%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 35% 36%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 43% 12%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 51% 30%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 59% 46%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 67% 14%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 75% 32%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 83% 12%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 91% 28%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 98% 6%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 6% 56%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 19% 86%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 27% 64%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 38% 70%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 49% 94%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 57% 66%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 65% 88%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 73% 56%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 79% 94%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 87% 66%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 94% 86%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 99% 50%, var(--cf-star), transparent); animation: cfTwinkleF 4.8s ease-in-out infinite; } /* MID layer 3 — 14 more medium stars filling out the upper sky */ .cf-sky-mid3 { background-image: radial-gradient(1px 1px at 16% 8%, var(--cf-star), transparent), radial-gradient(1.05px 1.05px at 38% 28%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 62% 6%, var(--cf-star), transparent), radial-gradient(1.1px 1.1px at 80% 26%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 22% 46%, var(--cf-star), transparent), radial-gradient(1.05px 1.05px at 44% 56%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 66% 44%, var(--cf-star), transparent), radial-gradient(1.1px 1.1px at 88% 56%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 8% 64%, var(--cf-star), transparent), radial-gradient(1.05px 1.05px at 32% 76%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 56% 92%, var(--cf-star), transparent), radial-gradient(1.1px 1.1px at 78% 86%, var(--cf-star-bright), transparent), radial-gradient(1px 1px at 4% 38%, var(--cf-star), transparent), radial-gradient(1.05px 1.05px at 96% 40%, var(--cf-star-bright), transparent); filter: drop-shadow(0 0 2px rgba(237, 228, 200, 0.3)); animation: cfTwinkleG 7.6s ease-in-out infinite; } /* GUIDE — 6 brightest stars with strong glow */ .cf-sky-guide { background-image: radial-gradient(1.8px 1.8px at 22% 16%, var(--cf-star-bright), transparent 70%), radial-gradient(1.6px 1.6px at 78% 18%, var(--cf-star-bright), transparent 70%), radial-gradient(1.7px 1.7px at 14% 68%, var(--cf-star-bright), transparent 70%), radial-gradient(1.5px 1.5px at 86% 70%, var(--cf-star-bright), transparent 70%), radial-gradient(1.6px 1.6px at 50% 88%, var(--cf-star-bright), transparent 70%), radial-gradient(1.7px 1.7px at 50% 6%, var(--cf-star-bright), transparent 70%); filter: drop-shadow(0 0 5px rgba(240, 232, 210, 0.65)); animation: cfTwinkleE 8.5s ease-in-out infinite; } /* EXTRA layer 1 — 35 dense fine stars filling gaps */ .cf-sky-extra1 { background-image: radial-gradient(0.85px 0.85px at 2% 4%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 6% 18%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 9% 32%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 14% 10%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 18% 24%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 21% 56%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 24% 72%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 28% 40%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 32% 86%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 36% 16%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 39% 64%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 42% 30%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 46% 88%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 49% 50%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 52% 18%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 55% 72%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 58% 36%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 62% 8%, var(--cf-star-bright), transparent), radial-gradient(0.8px 0.8px at 65% 60%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 68% 84%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 72% 26%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 75% 48%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 78% 70%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 82% 14%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 85% 92%, var(--cf-star), transparent), radial-gradient(0.6px 0.6px at 88% 42%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 91% 22%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 94% 78%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 97% 54%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 99% 12%, var(--cf-star-bright), transparent), radial-gradient(0.85px 0.85px at 12% 80%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 26% 96%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 71% 96%, var(--cf-star), transparent), radial-gradient(0.8px 0.8px at 88% 4%, var(--cf-star), transparent), radial-gradient(0.85px 0.85px at 4% 82%, var(--cf-star-bright), transparent); animation: cfTwinkleH 5.2s ease-in-out infinite; } /* EXTRA layer 2 — 30 small bright stars between the existing fields */ .cf-sky-extra2 { background-image: radial-gradient(0.7px 0.7px at 1% 24%, var(--cf-star-bright), transparent), radial-gradient(0.65px 0.65px at 7% 46%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 10% 62%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 16% 90%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 20% 4%, var(--cf-star-bright), transparent), radial-gradient(0.65px 0.65px at 27% 22%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 31% 50%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 35% 68%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 40% 12%, var(--cf-star-bright), transparent), radial-gradient(0.65px 0.65px at 44% 80%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 47% 34%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 51% 96%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 56% 26%, var(--cf-star-bright), transparent), radial-gradient(0.65px 0.65px at 59% 56%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 63% 80%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 66% 38%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 70% 14%, var(--cf-star-bright), transparent), radial-gradient(0.65px 0.65px at 74% 60%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 77% 44%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 81% 28%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 84% 84%, var(--cf-star-bright), transparent), radial-gradient(0.65px 0.65px at 87% 6%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 92% 64%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 95% 48%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 98% 32%, var(--cf-star-bright), transparent), radial-gradient(0.65px 0.65px at 33% 4%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 17% 36%, var(--cf-star-bright), transparent), radial-gradient(0.6px 0.6px at 53% 4%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 80% 96%, var(--cf-star-bright), transparent), radial-gradient(0.65px 0.65px at 14% 56%, var(--cf-star), transparent); filter: drop-shadow(0 0 1.5px rgba(237, 228, 200, 0.35)); animation: cfTwinkleI 6.4s ease-in-out infinite; } /* EXTRA layer 3 — 25 very faint micro-stars (deep field) */ .cf-sky-extra3 { background-image: radial-gradient(0.7px 0.7px at 5% 14%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 13% 8%, var(--cf-star-bright), transparent), radial-gradient(0.7px 0.7px at 21% 38%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 29% 54%, var(--cf-star-bright), transparent), radial-gradient(0.7px 0.7px at 37% 70%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 45% 22%, var(--cf-star-bright), transparent), radial-gradient(0.7px 0.7px at 53% 44%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 61% 12%, var(--cf-star-bright), transparent), radial-gradient(0.7px 0.7px at 69% 36%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 77% 56%, var(--cf-star-bright), transparent), radial-gradient(0.7px 0.7px at 85% 18%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 93% 30%, var(--cf-star-bright), transparent), radial-gradient(0.7px 0.7px at 8% 62%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 18% 78%, var(--cf-star-bright), transparent), radial-gradient(0.7px 0.7px at 28% 86%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 38% 92%, var(--cf-star-bright), transparent), radial-gradient(0.7px 0.7px at 48% 60%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 58% 90%, var(--cf-star-bright), transparent), radial-gradient(0.7px 0.7px at 68% 70%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 76% 90%, var(--cf-star-bright), transparent), radial-gradient(0.7px 0.7px at 86% 80%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 96% 88%, var(--cf-star-bright), transparent), radial-gradient(0.7px 0.7px at 3% 90%, var(--cf-star-bright), transparent), radial-gradient(0.7px 0.7px at 50% 14%, var(--cf-star), transparent), radial-gradient(0.7px 0.7px at 65% 80%, var(--cf-star-bright), transparent); opacity: 0.7; animation: cfTwinkleJ 8.2s ease-in-out infinite; } /* Twinkle keyframes — each layer has a slightly different rhythm */ @keyframes cfTwinkleA { 0%,100% { opacity: 0.85; } 50% { opacity: 0.4; } } @keyframes cfTwinkleB { 0%,100% { opacity: 0.5; } 50% { opacity: 0.95;} } @keyframes cfTwinkleC { 0%,100% { opacity: 0.95; } 50% { opacity: 0.55;} } @keyframes cfTwinkleD { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes cfTwinkleE { 0%,100% { opacity: 1; } 50% { opacity: 0.65;} } @keyframes cfTwinkleF { 0%,100% { opacity: 0.7; } 50% { opacity: 0.35;} } @keyframes cfTwinkleG { 0%,100% { opacity: 0.45; } 50% { opacity: 0.9; } } @keyframes cfTwinkleH { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes cfTwinkleI { 0%,100% { opacity: 0.9; } 50% { opacity: 0.4; } } @keyframes cfTwinkleJ { 0%,100% { opacity: 0.4; } 50% { opacity: 0.85;} } @media (prefers-reduced-motion: reduce) { .cf-sky-dust, .cf-sky-dust2, .cf-sky-dust3, .cf-sky-mid, .cf-sky-mid2, .cf-sky-mid3, .cf-sky-guide, .cf-sky-extra1, .cf-sky-extra2, .cf-sky-extra3 { animation: none; } } /* ============================================================ 3. CONSTELLATION — per-sign linework drawn behind the hero ============================================================ */ /* CONSTELLATION — right side, rotated 90°, vertically centered with VIRGO. */ .cf-constellation { position: absolute; /* On wide viewports, stay anchored near the centered title block (max ~500px from center). On smaller viewports, percentages take over. */ right: max(17%, calc(50% - 500px)); top: 32%; /* lower — centered with VIRGO content */ bottom: 12%; width: 22%; max-width: 320px; z-index: 0; pointer-events: none; opacity: 0.82; transform: rotate(90deg); transform-origin: center; } /* ── PER-SIGN CONSTELLATION POSITION OVERRIDES ── Each sign gets a tiny nudge so the hero composition feels intentional per page. Body has class cf-sign-{slug} from horoscopes.php. Adjust right/top per sign as needed. DESKTOP-ONLY: scoped to viewports > 780px so mobile uses the unified .cf-constellation top: 50% from the mobile breakpoint. */ @media (min-width: 781px) { .cf-sign-aries .cf-constellation { /* default */ } .cf-sign-taurus .cf-constellation { top: 36%; } .cf-sign-gemini .cf-constellation { right: max(13%, calc(50% - 540px)); } .cf-sign-cancer .cf-constellation { top: 36%; } .cf-sign-leo .cf-constellation { /* default */ } .cf-sign-virgo .cf-constellation { /* default */ } .cf-sign-libra .cf-constellation { /* default */ } .cf-sign-scorpio .cf-constellation { right: max(13%, calc(50% - 540px)); top: 35%; } .cf-sign-sagittarius .cf-constellation { right: max(8%, calc(50% - 600px)); } .cf-sign-capricorn .cf-constellation { right: max(8%, calc(50% - 600px)); } .cf-sign-aquarius .cf-constellation { right: max(13%, calc(50% - 540px)); top: 36%; } .cf-sign-pisces .cf-constellation { right: max(13%, calc(50% - 540px)); top: 36%; } } /* MOON CELESTIAL — left side, sitting closer to VIRGO now. */ .cf-celestial-pair { position: absolute; /* On wide viewports, stay anchored near the centered title block (max ~400px from center). On smaller viewports, percentages take over. */ left: max(23%, calc(50% - 400px)); top: 32%; bottom: 12%; width: 14%; max-width: 200px; z-index: 0; pointer-events: none; opacity: 1; } .cf-celestial-pair svg { width: 100%; height: 100%; } /* Crescent moon — only animates filter (drop-shadow). No transform here, so it never conflicts with the parent 's static translate+rotate. Halo + orbital rings have been removed entirely. */ .cf-moon-disc { animation: cfMoonBreathe 6s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255, 246, 214, 0.45)); } @keyframes cfMoonBreathe { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 246, 214, 0.4)); } 50% { filter: drop-shadow(0 0 8px rgba(255, 246, 214, 0.65)); } } /* Star twinkles — phased blinks with a gentle scale pulse */ .cf-cs-star { animation: cfStarBlink 3.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; filter: drop-shadow(0 0 3px rgba(255, 246, 214, 0.7)); } .cf-cs-s1 { animation-delay: 0s; animation-duration: 3.2s; } .cf-cs-s2 { animation-delay: 0.4s; animation-duration: 4.1s; } .cf-cs-s3 { animation-delay: 0.9s; animation-duration: 3.6s; } .cf-cs-s4 { animation-delay: 1.3s; animation-duration: 2.8s; } .cf-cs-s5 { animation-delay: 1.8s; animation-duration: 3.9s; } .cf-cs-s6 { animation-delay: 2.3s; animation-duration: 3.4s; } .cf-cs-s7 { animation-delay: 0.6s; animation-duration: 4.3s; } @keyframes cfStarBlink { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.35); } } @media (prefers-reduced-motion: reduce) { .cf-moon-disc, .cf-cs-star { animation: none; } } /* ============================================================ 4. CONTENT — dept · rule · sign-row · glyph · name · range ============================================================ */ /* Legacy .cf-hero-content rule — superseded by .cf-hero-column above. Keep harmless declarations in case anything else references it. */ .cf-hero-content { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; padding: 2rem 1rem; } /* Dept tag — small caps gold-pale */ .cf-dept { font-family: 'EB Garamond', serif; font-variant: small-caps; font-weight: 700; letter-spacing: 0.36em; font-size: 1.05rem; color: var(--cf-foil-1); margin-bottom: 0.5rem; } /* ✦ rule on dark — hairline + gold sparkle */ .cf-rule { position: relative; height: 0.5px; background: linear-gradient(90deg, transparent, rgba(212, 172, 104, 0.6), transparent); max-width: 280px; margin: 0 auto 1.4rem; } .cf-rule-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(180deg, var(--cf-night) 0%, var(--cf-night-warm) 100%); padding: 0 0.7rem; color: var(--cf-foil-1); font-size: 0.95rem; text-shadow: 0 0 4px rgba(212, 172, 104, 0.55); } /* ============================================================ 5. 12-SIGN SELECTOR (top of hero, dark theme) ============================================================ */ .cf-signs { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.4rem; max-width: 1180px; /* wider than the 920px content column */ margin: 0 auto 1.2rem; padding: 0.7rem 1.4rem; border-top: 0.5px solid rgba(212, 168, 73, 0.22); border-bottom: 0.5px solid rgba(212, 168, 73, 0.22); position: relative; z-index: 2; } .cf-sign { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; /* WAS 0.2 — more space between glyph and name */ padding: 0.65rem 0.15rem 0.7rem; text-decoration: none; border-radius: 2px; font-family: 'EB Garamond', serif; color: var(--cf-star); transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; position: relative; } /* Element-tinted sign glyphs — DEFAULT state (not just hover). Each element gets a clearly different color in the dark sky. Active sign keeps its element tint but with cream glow. */ .cf-sign-glyph { font-family: var(--cc-font-glyph); font-size: 1.55rem; font-weight: 400; line-height: 1; color: var(--cf-cream); font-variant-emoji: text; /* Stroke is mobile-only — see @media block below. Desktop Segoe UI Symbol already renders zodiac with the right weight; iOS Apple Symbols / Noto Sans Symbols 2 are thinner and need synthetic bold. */ transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease; } .cf-sign[data-element="fire"] .cf-sign-glyph { color: #E89548; } /* warm ember */ .cf-sign[data-element="earth"] .cf-sign-glyph { color: #95B36F; } /* sage green */ .cf-sign[data-element="air"] .cf-sign-glyph { color: #A8C2DC; } /* pale blue */ .cf-sign[data-element="water"] .cf-sign-glyph { color: #8FBFC8; } /* teal */ .cf-sign-name { font-family: 'Cinzel', serif; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 600; color: var(--cf-cream); text-transform: uppercase; } .cf-sign:hover { background: rgba(237, 228, 200, 0.06); transform: translateY(-2px); } .cf-sign:hover .cf-sign-glyph { transform: scale(1.14); filter: brightness(1.2); text-shadow: 0 0 8px currentColor; } /* Active sign — soft radial gold glow that fades to transparent on ALL four edges (no clipped column / harsh underline). */ .cf-sign.is-active { background: radial-gradient(ellipse 65% 90% at 50% 50%, rgba(240, 216, 154, 0.30) 0%, rgba(212, 172, 104, 0.16) 35%, rgba(212, 172, 104, 0.05) 65%, transparent 100%); } /* Soft bottom glow — narrower than the cell so the sides are fully clear */ .cf-sign.is-active::after { content: ''; position: absolute; bottom: 4px; left: 32%; right: 32%; height: 1px; background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(240, 216, 154, 0.85) 0%, rgba(240, 216, 154, 0.35) 55%, transparent 100%); filter: blur(0.5px); } /* Active sign NAME — bright gold so you instantly see it's selected */ .cf-sign.is-active .cf-sign-name { color: var(--gold-bright); text-shadow: 0 0 6px rgba(212, 172, 104, 0.4); } .cf-sign.is-active .cf-sign-glyph { text-shadow: 0 0 14px currentColor, 0 0 4px rgba(237, 228, 200, 0.5); filter: brightness(1.15); } /* Element tints on hover */ .cf-sign[data-element="fire"]:hover .cf-sign-glyph { color: #E89548; } .cf-sign[data-element="earth"]:hover .cf-sign-glyph { color: #95B36F; } .cf-sign[data-element="air"]:hover .cf-sign-glyph { color: #9FB6D8; } .cf-sign[data-element="water"]:hover .cf-sign-glyph { color: #8FBFC8; } /* ============================================================ 6. GIANT GLYPH — cream color, NOT bold (uses symbols stack) ============================================================ */ .cf-glyphmark { display: flex; align-items: center; justify-content: center; margin: 1.2rem 0 1.2rem; /* symmetric — equal space above + below */ position: relative; } .cf-glyphmark::before { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(237, 228, 200, 0.14) 0%, transparent 70%); z-index: -1; } .cf-glyphmark-text { font-family: var(--cc-font-glyph); font-weight: 200; font-size: clamp(3rem, 5.8vw, 4.6rem); /* smaller again */ line-height: 0.9; color: var(--cf-cream); opacity: 0.92; text-shadow: 0 0 16px rgba(237, 228, 200, 0.24), 0 0 4px rgba(237, 228, 200, 0.14); letter-spacing: 0; } /* ============================================================ 7. SIGN NAME — VIRGO in Cinzel cream (matches the reference image) ============================================================ */ .cf-hero h1.cf-name, .cf-hero-column h1.cf-name, h1.cf-name { font-family: 'Cinzel', 'Trajan Pro', serif !important; font-weight: 600 !important; font-style: normal !important; font-size: clamp(2.4rem, 5.5vw, 4.4rem) !important; /* smaller again */ letter-spacing: 0.10em !important; line-height: 1 !important; margin: 0.2rem 0 0.5rem !important; color: var(--cf-cream) !important; background: none !important; -webkit-text-fill-color: var(--cf-cream) !important; text-shadow: 0 0 32px rgba(237, 228, 200, 0.35), 0 0 4px rgba(237, 228, 200, 0.4), 0 1px 0 rgba(11, 21, 48, 0.6) !important; } .cf-hero h1.cf-name em, h1.cf-name em { color: var(--cf-cream) !important; -webkit-text-fill-color: var(--cf-cream) !important; font-style: normal !important; } /* Date range — gold-pale to match Back to Horoscopes */ .cf-dates { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.32em; font-size: 0.82rem; color: var(--gold-pale); /* matches back link + dept + rule */ text-transform: uppercase; margin-bottom: 0.85rem; } /* Italianno theme line */ .cf-theme { font-family: 'Italianno', cursive; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--cf-cream); -webkit-text-stroke: 0.3px var(--cf-cream); letter-spacing: 0.04em; margin-bottom: 0.6rem; /* WAS 2.2rem — tabs sit closer now */ text-shadow: 0 0 14px rgba(237, 228, 200, 0.22); } /* ============================================================ 8. RANGE SEGMENTED CONTROL — flush against the bottom of the dark hero section, centered, full-width strip. ============================================================ */ /* Range strip — illuminated gold-leaf segmented control. The night sky ENDS at the top of this strip; the buttons themselves are a burnished metallic plaque that reads as a separate piece of the page. */ .cf-range { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin: 0; /* Burnished gold base — vertical sheen + warm metal */ background: linear-gradient(180deg, rgba(255, 240, 200, 0.22) 0%, transparent 28%, transparent 72%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(180deg, #a87a32 0%, #d4ac68 22%, #e8c895 50%, #c89a52 78%, #7e5e2e 100%); border-top: 1px solid #4a3115; border-bottom: 1px solid #4a3115; box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.35); } .cf-rangecell { display: flex; align-items: center; justify-content: center; padding: 1.2rem 1.5rem; text-decoration: none; font-family: 'Cinzel', serif; font-weight: 800; /* heavier weight for presence */ letter-spacing: 0.32em; text-transform: uppercase; font-size: 1.08rem; color: #2a1808; /* deep brown on bright gold */ background: transparent; /* No skinny line — use ornament between buttons (::after below) */ border: 0; transition: letter-spacing 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease, text-shadow 0.3s ease; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.65), 0 -1px 0 rgba(0, 0, 0, 0.18); position: relative; overflow: hidden; } /* THE SEAM — midnight navy band running full height between gold cells, with gold highlights and dark inset shadows on each side giving a recessed/inlaid feel. No centerpiece — the band itself is the divider. */ .cf-rangecell:not(:last-child)::before { content: ''; position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #0a0f24 0%, #0e1740 50%, #0a0f24 100%); box-shadow: /* Gold highlight strip on each side */ -2px 0 0 rgba(244, 220, 166, 0.55), -3px 0 1.5px rgba(244, 220, 166, 0.3), 2px 0 0 rgba(244, 220, 166, 0.55), 3px 0 1.5px rgba(244, 220, 166, 0.3), /* Dark recessed inset shadow inside the navy band */ inset 1.5px 0 2px rgba(0, 0, 0, 0.75), inset -1.5px 0 2px rgba(0, 0, 0, 0.75); z-index: 1; pointer-events: none; } .cf-rangecell:not(:last-child)::after { display: none; } .cf-rangecell:hover { color: #0a0402; letter-spacing: 0.36em; text-shadow: 0 1px 0 rgba(255, 245, 215, 0.85), 0 0 14px rgba(255, 235, 180, 0.45); } .cf-rangecell.is-active { /* ACTIVE: deep burgundy plaque set INTO the gold strip — high contrast, reads as the lit/selected one immediately */ background: linear-gradient(180deg, rgba(255, 245, 215, 0.10) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.28) 100%), linear-gradient(180deg, #6e1c2a 0%, #4a0e1d 100%); color: #f4dca6; /* gold-cream */ text-shadow: 0 0 14px rgba(244, 220, 166, 0.7), 0 1px 0 rgba(0, 0, 0, 0.55); letter-spacing: 0.36em; box-shadow: inset 0 2px 0 rgba(232, 200, 149, 0.55), /* gold rim top */ inset 0 -2px 0 rgba(232, 200, 149, 0.55), /* gold rim bottom */ inset 0 4px 8px rgba(0, 0, 0, 0.4), /* recessed feel */ 0 0 0 1px rgba(120, 90, 40, 0.4); /* edge ring */ } /* Seam shows on every cell boundary — including next to the burgundy plaque. The navy inlay band reads as a continuous design element across the strip. */ /* ============================================================ 8.5 PURPLE READING ZONE — full-bleed deep aubergine wrapper holding the daily-reading cards. Cream cards retain their parchment surfaces; the zone background turns dark behind them, like numerology Codex's "doorways" room. ============================================================ */ /* Background EXACTLY matches /numerology/'s ".codex-room-doorways": base #2D1428 + burgundy radial top + faint gold radial bottom + noise texture overlay. Color values byte-for-byte from numerology2.css ":.codex-room-doorways". */ .cf-reading-zone { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 3rem 0 3.5rem; /* moderate purple gap below the gold strip */ background: radial-gradient(ellipse 70% 45% at 50% 12%, rgba(107, 31, 44, 0.45) 0%, transparent 75%), radial-gradient(ellipse 80% 60% at 50% 95%, rgba(212, 172, 104, 0.10) 0%, transparent 75%), #2D1428; overflow: hidden; isolation: isolate; } /* Wine-room noise texture — identical to numerology2.css's .codex-room-doorways::before */ .cf-reading-zone::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; z-index: 0; } .cf-reading-zone > * { position: relative; z-index: 1; } /* Override section header colors (deco-cap parent headings + dividers) so they read against the aubergine bg. Cream cards inside keep their own colors. */ .cf-reading-zone .cc-section-head .cc-decohead { color: var(--cc-gold-pale) !important; } .cf-reading-zone .cc-section-head .cc-decohead .cc-decohead-caps { color: var(--cc-gold-shimmer) !important; } .cf-reading-zone .cc-section-head .cc-decohead em { color: var(--cc-gold-pale) !important; } .cf-reading-zone .cc-section-head .cc-decohead-script { color: var(--cc-gold-bright) !important; -webkit-text-stroke-color: var(--cc-gold-bright) !important; } .cf-reading-zone .cc-section-head-rule { background: linear-gradient(90deg, transparent, var(--cc-gold-bright) 50%, transparent) !important; } .cf-reading-zone .cc-section-head-rule::after { background: var(--cc-aubergine) !important; color: var(--cc-gold-bright) !important; } /* Floating ornament dividers between cards — bump visibility on aubergine */ .cf-reading-zone .cc-divider-orn { color: var(--cc-gold-pale) !important; opacity: 0.85 !important; } .cf-reading-zone .cc-divider-orn-line { background: linear-gradient(90deg, transparent, rgba(229, 198, 138, 0.55), transparent) !important; } /* Gold zone divider at the top of the purple zone — mirrors the numerology Codex's .codex-room-divider-dark exactly: gradient gold-bright lines + Cinzel-Decorative gold-foil ✦ mark. */ .cf-zone-divider { display: flex; align-items: center; justify-content: center; gap: 1.5rem; max-width: 1000px; /* extends past the card's 820px on both sides */ margin: 0 auto 1.6rem; padding: 0 2rem; position: relative; z-index: 1; } .cf-zone-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--cc-gold-bright), transparent); } .cf-zone-divider-mark { font-family: 'Cinzel Decorative', serif; font-size: 1.5rem; color: var(--cc-gold-shimmer); text-shadow: 0 1px 0 rgba(212, 172, 104, 0.4), 0 0 8px rgba(240, 216, 154, 0.35); } /* The lead-in folio is the first card in the purple zone — kill the big top margin from E so it sits close to the dark hero. */ .cf-reading-zone .cc-folio-intro { margin-top: 0; } .cf-reading-zone .cf-folio-combined { margin-top: 0; } /* COMBINED CARD — Week Ahead + Love + Career + Wellness in one tall folio. Each sub-section gets position:relative so its corner glyph anchors correctly within the sub-section, not the full card. */ .cf-folio-combined { padding: 1.6rem 3.4rem 3rem; } /* The ✦ on the gold rule was showing as a white square because its background var(--cc-vellum) didn't quite match the gradient-tinted parchment around it. Transparent lets the parchment show through. */ .cf-folio-combined .cc-folio-rule-star { background: transparent; } .cf-folio-combined .cf-sub { position: relative; padding: 0.4rem 0; } /* Intro sub — no extra padding-bottom; uses default .cf-sub padding so the gap from the pull-quote to the next eyebrow matches the gaps between Love → Career → Wellness exactly. */ .cf-folio-combined .cf-sub-intro { padding-bottom: 0; } /* EQUAL spacing between every adjacent sub-section. This is the gap from the end of one sub's body to the start of the next sub's eyebrow — matches what the ✦ divider used to occupy. */ .cf-folio-combined .cf-sub + .cf-sub { margin-top: 2.6rem; padding-top: 0.4rem; } /* Sub-section divider — gold hairline + Cinzel-Decorative ✦ */ .cf-sub-divider { display: flex; align-items: center; justify-content: center; gap: 1.2rem; max-width: 380px; margin: 1.4rem auto; /* tighter — was 2.2rem */ padding: 0; } /* "written for Virgo" Italianno script in the Week Ahead sub — darker maroon (was --cc-gold-deep). */ .cf-reading-zone .cf-sub-intro .cc-folio-script { color: #4A1620 !important; -webkit-text-stroke: 0.3px #4A1620; } /* Pull-quote in the Week Ahead sub — BOLDER + tight bottom margin so the next sub-section's eyebrow lands at the same offset as the Love→Career → Wellness gaps below. */ .cf-reading-zone .cf-sub-intro .cc-pullquote { font-weight: 600; margin-bottom: 0; } /* Hide the per-section corner-glyph icons (heart / briefcase / leaf) in the combined card — Michael wants the cards cleaner without them. */ .cf-reading-zone .cf-folio-combined .cc-folio-glyph { display: none; } /* ============================================================ THE WEEK'S TERRAIN — section header that opens the cream-context zone below the purple. Mirrors /numerology/personal-day-number/ calculator-header pattern (✦ rule + italic two-tone title + Italianno script + ✦ rule + body deck + flanking medallions). ============================================================ */ .cf-terrain-head { position: relative; text-align: center; max-width: 720px; margin: 4.5rem auto 3rem; padding: 0 2rem; } .cf-terrain-ornament { font-family: 'Cinzel Decorative', serif; color: var(--cc-gold); font-size: 1.1rem; margin-bottom: 1.4rem; opacity: 0.85; } .cf-terrain-title { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.05; color: var(--cc-ink); letter-spacing: -0.005em; margin: 0 0 0.4rem; } .cf-terrain-title em { color: var(--cc-burgundy); font-style: italic; } /* Period date line under the terrain title — Cinzel small-caps, gold-deep */ .cf-terrain-period { font-family: 'Cinzel', 'EB Garamond', serif; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.92rem; color: var(--cc-gold-deep); margin: 0.4rem 0 0.6rem; } .cf-terrain-script { font-family: 'Italianno', cursive; font-size: clamp(1.6rem, 3vw, 2.05rem); color: var(--cc-burgundy); -webkit-text-stroke: 0.3px var(--cc-burgundy); letter-spacing: 0.04em; margin-bottom: 1.2rem; } .cf-terrain-rule { display: flex; align-items: center; justify-content: center; gap: 0.85rem; max-width: 240px; margin: 0 auto 1.4rem; } .cf-terrain-rule-line { flex: 1; height: 0.5px; background: linear-gradient(90deg, transparent, var(--cc-gold), transparent); } .cf-terrain-rule-mark { color: var(--cc-gold); font-size: 0.95rem; } .cf-terrain-deck { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 1.18rem; line-height: 1.6; color: var(--cc-ink); max-width: 580px; margin: 0 auto; } /* Override .cf-terrain-head max-width so the band has room for medallions */ .cf-terrain-head { max-width: 980px; } /* The .page-hero-band 3-col layout (medallion-left | text | medallion-right) comes from yes-no-tarot.css. Just position-tweak the band inside terrain. */ .cf-terrain-band { margin-top: 0.8rem !important; max-width: 880px; } .cf-terrain-band .cf-terrain-deck { text-align: left; /* aligns with the brand pattern's left-text */ max-width: 540px; } /* Slow rotation on the zodiac wheel's outer ring (clockwise). No transform-box — SVG user coords with origin at viewBox center. */ .cf-tm-ring-outer { transform-origin: 32px 32px; animation: cfTerrainRing 38s linear infinite; } @keyframes cfTerrainRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* The 12-tick zodiac ring rotates the OTHER way for layered motion */ .cf-tm-zodiac-ticks { transform-origin: 32px 32px; animation: cfTerrainTicks 90s linear infinite; } @keyframes cfTerrainTicks { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* Planet dots on the zodiac wheel pulse softly + slowly drift around the ring */ .cf-tm-planet { transform-origin: 32px 32px; animation: cfTerrainPlanetPulse 3.6s ease-in-out infinite, cfTerrainPlanetOrbit 28s linear infinite; } .cf-tm-planet-1 { animation-delay: 0s, 0s; } .cf-tm-planet-2 { animation-delay: 0.9s, -7s; } .cf-tm-planet-3 { animation-delay: 1.8s, -14s; } .cf-tm-planet-4 { animation-delay: 2.7s, -21s; } @keyframes cfTerrainPlanetPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes cfTerrainPlanetOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Maroon center moon — body breathes gently with a strong gold drop-shadow. transform-origin 0 0 because the inner sits at local origin (its parent handles position). */ .cf-tm-fullmoon { transform-origin: 0 0; animation: cfTerrainFullMoon 4.6s ease-in-out infinite; } @keyframes cfTerrainFullMoon { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(212, 172, 104, 0.55)); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 8px rgba(212, 172, 104, 0.9)); } } /* Outer gold halo expands further on its own beat */ .cf-tm-fullmoon-halo { transform-origin: center; animation: cfCosmosHalo 3.6s ease-in-out infinite; } @keyframes cfCosmosHalo { 0%, 100% { opacity: 0.08; transform: scale(1); } 50% { opacity: 0.28; transform: scale(1.18); } } /* ── RIGHT MEDALLION (cosmos / moon phases) — full animation suite ── */ /* Outer dashed ring rotates slowly; inner counter-rotates */ .cf-tm-cosmos-ring-outer { transform-origin: 32px 32px; animation: cfCosmosRingOuter 28s linear infinite; } .cf-tm-cosmos-ring-inner { transform-origin: 32px 32px; animation: cfCosmosRingInner 22s linear infinite; } @keyframes cfCosmosRingOuter { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes cfCosmosRingInner { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* The two crescent phases breathe in opposite phases (wax grows while wane fades) */ .cf-tm-phase-wax { transform-origin: 0 0; animation: cfCosmosWax 5s ease-in-out infinite; } .cf-tm-phase-wane { transform-origin: 0 0; animation: cfCosmosWane 5s ease-in-out infinite; } @keyframes cfCosmosWax { 0%, 100% { opacity: 0.55; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.12); } } @keyframes cfCosmosWane { 0%, 100% { opacity: 1; transform: scale(1.12); } 50% { opacity: 0.55; transform: scale(0.85); } } /* The two stars (top + bottom) pulse + slowly rotate */ .cf-tm-cosmos-star-top { transform-origin: 0 0; animation: cfCosmosStar 3.4s ease-in-out infinite, cfCosmosStarSpin 18s linear infinite; } .cf-tm-cosmos-star-bot { transform-origin: 0 0; animation: cfCosmosStar 3.4s ease-in-out infinite 1.2s, cfCosmosStarSpin 22s linear infinite reverse; } @keyframes cfCosmosStar { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes cfCosmosStarSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Comet orbits along the inner ring radius */ .cf-tm-cosmos-comet { transform-origin: 32px 32px; animation: cfCosmosComet 12s linear infinite, cfCosmosCometPulse 2.2s ease-in-out infinite; filter: drop-shadow(0 0 2px rgba(212, 172, 104, 0.7)); } @keyframes cfCosmosComet { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes cfCosmosCometPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Brand .hero-twinkle pulse — re-assert in case of cascade override */ .cf-terrain-medallion-zodiac .hero-twinkle, .cf-terrain-medallion-cosmos .hero-twinkle { animation: cfTerrainTwinkle 3s ease-in-out infinite; } .cf-terrain-medallion-zodiac .hero-twinkle-1, .cf-terrain-medallion-cosmos .hero-twinkle-1 { animation-delay: 0s; animation-duration: 3.2s; } .cf-terrain-medallion-zodiac .hero-twinkle-2, .cf-terrain-medallion-cosmos .hero-twinkle-2 { animation-delay: 0.7s; animation-duration: 4.1s; } .cf-terrain-medallion-zodiac .hero-twinkle-3, .cf-terrain-medallion-cosmos .hero-twinkle-3 { animation-delay: 1.3s; animation-duration: 3.6s; } .cf-terrain-medallion-zodiac .hero-twinkle-4, .cf-terrain-medallion-cosmos .hero-twinkle-4 { animation-delay: 1.9s; animation-duration: 2.8s; } @keyframes cfTerrainTwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.4); } } @media (prefers-reduced-motion: reduce) { .cf-tm-ring-outer, .cf-tm-zodiac-ticks, .cf-tm-planet, .cf-tm-fullmoon, .cf-tm-cosmos-ring-outer, .cf-tm-cosmos-ring-inner, .cf-tm-phase-wax, .cf-tm-phase-wane, .cf-tm-cosmos-star-top, .cf-tm-cosmos-star-bot, .cf-tm-cosmos-comet, .cf-terrain-medallion-zodiac .hero-twinkle, .cf-terrain-medallion-cosmos .hero-twinkle { animation: none; } } @media (max-width: 600px) { .cf-terrain-head { padding: 0 1rem; margin: 3rem auto 2rem; } } .cf-sub-divider-line { flex: 1; height: 0.5px; background: linear-gradient(90deg, transparent, var(--cc-gold-deep), transparent); } .cf-sub-divider-mark { font-family: 'Cinzel Decorative', serif; color: var(--cc-gold-deep); font-size: 1.15rem; text-shadow: 0 1px 0 rgba(212, 172, 104, 0.4); } /* OPTION C — frameless intro strip + body. Lives directly on the aubergine zone (no card frame), with cream/gold typography for the dark context. */ .cf-intro-strip { text-align: center; max-width: 780px; margin: 0 auto 1.4rem; padding: 0 2rem; position: relative; z-index: 1; } .cf-intro-strip .cc-folio-eyebrow.cf-intro-eyebrow { color: var(--cc-gold-bright); } .cf-intro-strip .cc-folio-eyebrow.cf-intro-eyebrow .cc-folio-eyebrow-text { color: var(--cc-gold-bright); } .cf-intro-strip .cc-folio-eyebrow.cf-intro-eyebrow::before, .cf-intro-strip .cc-folio-eyebrow.cf-intro-eyebrow::after { color: var(--cc-gold-bright); } .cf-intro-strip .cc-folio-eyebrow-text::after { background: var(--cc-gold-bright); opacity: 0.7; } .cf-intro-rule { position: relative; height: 0.5px; background: linear-gradient(90deg, transparent, var(--cc-gold-bright), transparent); max-width: 240px; margin: 1rem auto 1rem; } .cf-intro-rule-star { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #2D1428; /* matches purple zone bg */ padding: 0 0.7rem; color: var(--cc-gold-shimmer); font-size: 0.95rem; } .cf-intro-decohead { color: var(--cc-gold-pale) !important; } .cf-intro-decohead .cc-decohead-caps { color: var(--cc-gold-shimmer) !important; } .cf-intro-decohead em { color: var(--cc-gold-pale) !important; } .cf-intro-script { color: var(--cc-gold-bright) !important; -webkit-text-stroke-color: var(--cc-gold-bright) !important; } /* Body of the intro — drop-cap paragraph + pull-quote on aubergine */ .cf-intro-body { max-width: 660px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; } .cf-intro-body .cf-intro-paragraph { font-family: 'EB Garamond', serif; font-size: 1.13rem; line-height: 1.78; color: var(--cc-gold-pale); font-weight: 500; } .cf-intro-body .cf-intro-paragraph em { color: var(--cc-gold-bright); font-style: italic; } .cf-intro-body .cf-intro-paragraph strong { color: var(--cc-gold-shimmer); font-weight: 700; } /* Drop-cap on aubergine — gold-foil instead of burgundy */ .cf-intro-dropcap { color: transparent !important; background: linear-gradient(135deg, var(--cc-gold-shimmer) 0%, var(--cc-gold-bright) 50%, var(--cc-gold-deep) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; filter: drop-shadow(0 2px 4px rgba(212, 172, 104, 0.35)); } /* Pull-quote on aubergine */ .cf-intro-pullquote { background: linear-gradient(90deg, rgba(212, 172, 104, 0.12), transparent 80%) !important; border-left-color: var(--cc-gold-bright) !important; color: var(--cc-gold-pale) !important; margin-top: 1.6rem !important; } .cf-intro-pullquote::before { color: var(--cc-gold-shimmer) !important; } /* Bolder + larger folio eyebrows for ALL cards in the purple zone. Only the WEEK AHEAD eyebrow gets burgundy — Love / Career / Wellness each keep their per-section ink color (rose / copper / sage). */ .cf-reading-zone .cc-folio-eyebrow { font-size: 1.18rem; font-weight: 800; letter-spacing: 0.32em; } .cf-reading-zone .cc-folio-eyebrow::before, .cf-reading-zone .cc-folio-eyebrow::after { font-size: 1.05rem; font-weight: 800; opacity: 1; } .cf-reading-zone .cc-folio-eyebrow-text { padding-bottom: 0.7rem; } .cf-reading-zone .cc-folio-eyebrow-text::after { height: 2.5px; } /* WEEK AHEAD eyebrow — burgundy (the only one without a per-section ink color) */ .cf-reading-zone .cf-sub-intro .cc-folio-eyebrow, .cf-reading-zone .cf-sub-intro .cc-folio-eyebrow .cc-folio-eyebrow-text { color: var(--cc-burgundy); } .cf-reading-zone .cf-sub-intro .cc-folio-eyebrow::before, .cf-reading-zone .cf-sub-intro .cc-folio-eyebrow::after { color: var(--cc-burgundy); } .cf-reading-zone .cf-sub-intro .cc-folio-eyebrow-text::after { background: var(--cc-burgundy); } /* The other three keep their per-section ink colors — re-assert with a selector specific enough to beat the generic .cf-reading-zone above. */ .cf-reading-zone .cf-sub.cc-folio-love .cc-folio-eyebrow .cc-folio-eyebrow-text { color: #8B2840; } .cf-reading-zone .cf-sub.cc-folio-career .cc-folio-eyebrow .cc-folio-eyebrow-text { color: #7A4520; } .cf-reading-zone .cf-sub.cc-folio-wellness .cc-folio-eyebrow .cc-folio-eyebrow-text { color: #5E823C; } .cf-reading-zone .cf-sub.cc-folio-love .cc-folio-eyebrow::before, .cf-reading-zone .cf-sub.cc-folio-love .cc-folio-eyebrow::after { color: #8B2840; } .cf-reading-zone .cf-sub.cc-folio-career .cc-folio-eyebrow::before, .cf-reading-zone .cf-sub.cc-folio-career .cc-folio-eyebrow::after { color: #7A4520; } .cf-reading-zone .cf-sub.cc-folio-wellness .cc-folio-eyebrow::before, .cf-reading-zone .cf-sub.cc-folio-wellness .cc-folio-eyebrow::after { color: #5E823C; } /* Sky-section attribution strip — Element / Ruler / Period shown above the ephemeris ribbon. Cream-pale on aubergine. */ /* Sky-section attribution strip — Element / Ruler / Period. Originally lived above the purple zone; now sits on cream below the "THE SKY — this week" header, so colors are tuned for cream context. */ .cf-sky-attribution { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.65rem 1.4rem; max-width: 760px; margin: 1.4rem auto 0; padding: 0.85rem 1.6rem; border-top: 0.5px solid rgba(142, 110, 58, 0.4); border-bottom: 0.5px solid rgba(142, 110, 58, 0.4); font-family: 'EB Garamond', serif; font-size: 1.15rem; color: var(--cc-ink); } .cf-sky-attr-line { display: inline-flex; align-items: baseline; gap: 0.55rem; } .cf-sky-attr-key { font-family: 'Cinzel', 'EB Garamond', serif; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; font-size: 1.1rem; color: var(--cc-ink); } .cf-sky-attr-val { font-style: italic; font-weight: 600; font-size: 1.32rem; color: var(--cc-burgundy); } .cf-sky-attr-sep { color: var(--cc-gold-deep); opacity: 0.55; font-size: 1.1rem; } /* When the attribution sits INSIDE the ephemeris plate, drop the side margins, hug the plate edges, and use the plate's outer border as the bottom rule (so we only need a single rule below it). */ .cf-sky-attribution-inside { max-width: none; margin: 0 0 1.4rem; padding: 0.75rem 1.6rem 0.85rem; border-top: 0.5px solid rgba(142, 110, 58, 0.4); border-bottom: 0.5px solid rgba(142, 110, 58, 0.4); border-radius: 0; background: linear-gradient(180deg, rgba(212, 172, 104, 0.05), transparent); } /* Sealed-letter NESTED inside the combined card (matches the /numerology/personal-day-number/ pattern). Sits at the bottom of the parent folio, inset, with a top margin separating it from the Wellness sub-section above. */ .cf-folio-combined .cf-sealed-nested { margin: 2.5rem 0 0; max-width: 100%; /* fills the parent card's content area */ padding: 2.6rem 2.4rem; box-shadow: inset 0 0 0 1px rgba(184, 145, 80, 0.42), 0 8px 22px rgba(58, 31, 56, 0.18); /* slightly different bg to read as inset */ background: radial-gradient(ellipse 80% 50% at 30% 0%, rgba(184, 145, 80, 0.18), transparent 65%), linear-gradient(180deg, var(--cc-vellum-warm) 0%, var(--cc-vellum) 100%); border: 1px solid rgba(184, 145, 80, 0.55); } /* Stack the buttons vertically */ .cf-reading-zone .cf-sealed-letter .letter-actions { flex-direction: column; align-items: flex-start; gap: 0.85rem; } .cf-reading-zone .cf-sealed-letter .btn, .cf-reading-zone .cf-sealed-letter .btn-see { width: auto; min-width: 240px; justify-content: center; text-decoration: none; /* kill the default underline */ } .cf-reading-zone .cf-sealed-letter .btn-see:hover { text-decoration: none; } /* ════════════════════════════════════════════════════════════ MOBILE: widen the "See your real birth chart" invitation card The desktop padding on .cf-folio-combined (3.4rem each side) + .cf-sealed-nested (2.4rem each side) ate ~184px of horizontal space on a 390px viewport, causing "birth" to wrap awkwardly. On mobile we tighten both so the card breathes edge-to-edge, matching the yes/no spread-frame feel. ════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .cf-folio-combined { padding: 1.4rem 1rem 2rem; } .cf-folio-combined .cf-sealed-nested { margin: 1.8rem 0 0; padding: 1.8rem 1.15rem; } /* Two-line stack: "written for Cancer" on line 1, date larger on line 2. */ .cc-folio-script .cc-folio-script-sep { display: none; } .cc-folio-script .cc-folio-script-for, .cc-folio-script .cc-folio-script-date { display: block; text-align: center; } .cc-folio-script .cc-folio-script-for { font-size: 1.18em; line-height: 1.15; } .cc-folio-script .cc-folio-script-date { margin-top: 0.25em; font-size: 1.55em; line-height: 1.15; } } /* Membership fineprint — readable */ .cf-sealed-fineprint { margin: 1.4rem 0 0; font-family: 'EB Garamond', serif; font-style: italic; font-weight: 500; font-size: 1.12rem; /* bigger again — easier to read */ line-height: 1.5; color: var(--cc-ink); opacity: 1; max-width: 540px; } .cf-sealed-fineprint a { color: var(--cc-burgundy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 0.5px; } .cf-sealed-fineprint a:hover { color: var(--cc-burgundy-2); } /* Ephemeris coda inside the zone — its cream parchment vellum sits beautifully on aubergine without changes. */ /* ============================================================ 8.7 TAROT VITRINE — uses yes-no-tarot's .vitrine-card pattern directly (already defined in /css/yes-no-tarot.css). The .cf-hermit-link wrapper just makes the whole vitrine clickable + sized for the .cc-tarotweek-plate grid column. ============================================================ */ .cf-hermit-link { display: block; text-decoration: none; width: 220px; margin: 0 auto; transition: transform 0.5s ease; } .cf-hermit-link:hover { transform: translateY(-6px); } .cf-hermit-link .vitrine-card { max-width: 100%; } /* ============================================================ 9. HIDE E'S CREAM HERO + WAYFINDER F doesn't render those elements (they're replaced in PHP), but if they slip in, we hide them defensively. ============================================================ */ .cf-body .cc-hero, .cf-body .cc-wayfinder { display: none; } /* The dark hero ends; let the body's grain + ghost layer show again for everything below. (.cc-grain / .cc-ghost-glyphs are fixed-pos so they're still applied; the dark hero just covers them with z-index. Nothing to fix here.) */ /* ============================================================ 10. RESPONSIVE ============================================================ */ @media (max-width: 780px) { .cf-hero-column { padding: 1rem 1.2rem 1.8rem; } .cf-signs { grid-template-columns: repeat(6, 1fr); padding: 0.4rem 0.2rem; gap: 0.2rem; } .cf-sign { padding: 0.4rem 0.1rem; } .cf-sign-glyph { font-size: 1.7rem; -webkit-text-stroke: 0.5px currentColor; text-stroke: 0.5px currentColor; paint-order: stroke fill; } .cf-sign-name { font-size: 0.62rem; } .cf-name { font-size: clamp(2.6rem, 9vw, 4.4rem); letter-spacing: 0.07em; } .cf-glyphmark-text { font-size: clamp(5.5rem, 18vw, 8rem); } .cf-glyphmark::before { width: 180px; height: 180px; } .cf-rangecell { padding: 0.85rem 0.8rem; font-size: 0.92rem; letter-spacing: 0.24em; } .cf-rangecell:hover { letter-spacing: 0.28em; } /* Mobile: moon + constellation drop down to flank the GLYPH instead of drifting up into the sign-picker grid above */ .cf-celestial-pair { top: 50%; left: 4%; width: 18%; } .cf-constellation { top: 50%; right: 4%; width: 26%; } } @media (max-width: 480px) { .cf-signs { grid-template-columns: repeat(4, 1fr); } .cf-rangecell { padding: 0.7rem 0.4rem; font-size: 0.78rem; letter-spacing: 0.18em; } .cf-rangecell:hover { letter-spacing: 0.22em; } .cf-dates { font-size: 0.78rem; letter-spacing: 0.24em; } } /* ════════════════════════════════════════════════════════════ LUCKY DAYS / WATCH OUT FOR — illuminated calendar leaves Replaces the older .cc-luckyfolio markup with richer date-tablets. ════════════════════════════════════════════════════════════ */ :root { --cf-lapis: #B7791F; --cf-lapis-soft: rgba(183, 121, 31, 0.22); --cf-lapis-faint: rgba(183, 121, 31, 0.12); } .cf-lucky { max-width: 1080px; margin: 3rem auto 0; padding: 0 1.4rem; } .cf-lucky-frame { position: relative; padding: 3.4rem 3.6rem 3rem; background: radial-gradient(circle at 50% -10%, rgba(212, 172, 104, 0.12), transparent 60%), radial-gradient(circle at 50% 110%, rgba(107, 31, 44, 0.05), transparent 60%), var(--cc-vellum); border: 0.5px solid rgba(142, 110, 58, 0.5); box-shadow: inset 0 0 0 6px rgba(250, 241, 225, 0.7), inset 0 0 0 7px rgba(142, 110, 58, 0.32), 0 30px 70px -40px rgba(45, 20, 40, 0.45), 0 8px 24px -16px rgba(45, 20, 40, 0.3); border-radius: 3px; } .cf-lucky-corner { position: absolute; color: var(--cc-gold-deep); font-size: 0.95rem; opacity: 0.7; pointer-events: none; } .cf-lucky-corner-tl { top: 14px; left: 16px; } .cf-lucky-corner-tr { top: 14px; right: 16px; } .cf-lucky-corner-bl { bottom: 14px; left: 16px; } .cf-lucky-corner-br { bottom: 14px; right: 16px; } .cf-lucky-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2.6rem; align-items: stretch; } .cf-lucky-col { display: flex; flex-direction: column; align-items: center; text-align: center; } /* Crest icons — sun for lucky, crescent moon for watch */ .cf-lucky-crest { width: 78px; height: 78px; margin-bottom: 1rem; opacity: 0.94; display: flex; align-items: center; justify-content: center; } .cf-lucky-crest svg { width: 100%; height: 100%; display: block; } .cf-lucky-good .cf-lucky-crest { color: var(--cf-lapis); } .cf-lucky-watch .cf-lucky-crest { color: var(--cc-burgundy); } .cf-lucky-eyebrow { font-family: 'Cinzel', 'EB Garamond', serif; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.1; margin-bottom: 0.7rem; } .cf-lucky-good .cf-lucky-eyebrow { color: var(--cf-lapis); } .cf-lucky-watch .cf-lucky-eyebrow { color: var(--cc-burgundy); } .cf-lucky-title { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.55rem); color: var(--cc-ink-soft); line-height: 1.3; margin: 0 0 1.8rem; } .cf-lucky-good .cf-lucky-title em { color: var(--cf-lapis); font-style: italic; } .cf-lucky-watch .cf-lucky-title em { color: var(--cc-burgundy); font-style: italic; } /* Leaves: stacked illuminated date entries */ .cf-lucky-leaves { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1rem; } .cf-lucky-leaf { display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 1.5rem; padding: 0.9rem 0.4rem 1rem; border-bottom: 0.5px solid rgba(142, 110, 58, 0.22); text-align: left; transition: background 0.4s ease; } .cf-lucky-leaf:last-child { border-bottom: none; } .cf-lucky-leaf:hover { background: linear-gradient(180deg, transparent, rgba(212, 172, 104, 0.08)); } .cf-lucky-watch .cf-lucky-leaf:hover { background: linear-gradient(180deg, transparent, rgba(107, 31, 44, 0.06)); } /* Date tablet — tall illuminated numeral with weekday small-caps */ .cf-leaf-tablet { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.7rem 0.5rem 0.75rem; border: 0.5px solid rgba(142, 110, 58, 0.45); background: linear-gradient(180deg, rgba(250, 241, 225, 0.95) 0%, rgba(232, 210, 181, 0.55) 100%); box-shadow: inset 0 0 0 2px rgba(250, 241, 225, 0.7), inset 0 0 0 2.5px rgba(142, 110, 58, 0.22); border-radius: 2px; min-height: 96px; gap: 0.2rem; } .cf-lucky-good .cf-leaf-tablet { border-color: var(--cf-lapis-soft); background: radial-gradient(circle at 50% 0%, var(--cf-lapis-soft), transparent 70%), linear-gradient(180deg, rgba(250, 241, 225, 0.95) 0%, rgba(232, 210, 181, 0.5) 100%); box-shadow: inset 0 0 0 2px rgba(250, 241, 225, 0.7), inset 0 0 0 2.5px var(--cf-lapis-faint); } .cf-lucky-watch .cf-leaf-tablet { border-color: rgba(107, 31, 44, 0.4); background: radial-gradient(circle at 50% 0%, rgba(107, 31, 44, 0.12), transparent 70%), linear-gradient(180deg, rgba(250, 241, 225, 0.95) 0%, rgba(232, 210, 181, 0.5) 100%); box-shadow: inset 0 0 0 2px rgba(250, 241, 225, 0.7), inset 0 0 0 2.5px rgba(107, 31, 44, 0.18); } .cf-leaf-num { font-family: 'EB Garamond', serif; font-weight: 600; font-style: italic; font-size: 2.9rem; line-height: 1; letter-spacing: 0.01em; display: block; } .cf-lucky-good .cf-leaf-num { color: var(--cf-lapis); } .cf-lucky-watch .cf-leaf-num { color: var(--cc-burgundy); } .cf-leaf-month, .cf-leaf-dow { font-family: 'Cinzel', 'EB Garamond', serif; font-weight: 700; letter-spacing: 0.28em; text-indent: 0.28em; /* compensates for letter-spacing trailing space so text reads centered */ font-size: 0.92rem; line-height: 1; text-align: center; display: block; } .cf-lucky-good .cf-leaf-month, .cf-lucky-good .cf-leaf-dow { color: var(--cf-lapis); opacity: 0.9; } .cf-lucky-watch .cf-leaf-month, .cf-lucky-watch .cf-leaf-dow { color: var(--cc-burgundy); opacity: 0.85; } .cf-leaf-note { margin: 0; font-family: 'EB Garamond', serif; font-style: italic; font-weight: 500; font-size: 1.3rem; line-height: 1.45; color: var(--cc-ink); position: relative; padding-left: 1.1rem; } .cf-leaf-note::before { content: '❦'; position: absolute; left: 0; top: 0.05em; font-style: normal; font-size: 0.82em; opacity: 0.65; } .cf-lucky-good .cf-leaf-note::before { color: var(--cf-lapis); } .cf-lucky-watch .cf-leaf-note::before { color: var(--cc-burgundy); } /* Center spine */ .cf-lucky-spine { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 28px; padding: 1.5rem 0; gap: 0.45rem; } .cf-lucky-spine-line { flex: 1; width: 0.5px; min-height: 60px; background: linear-gradient(180deg, transparent, rgba(142, 110, 58, 0.55), transparent); } .cf-lucky-spine-mark { color: var(--cc-gold-deep); font-size: 0.85rem; opacity: 0.78; } .cf-lucky-spine-mark-mid { color: var(--cc-burgundy); font-size: 1rem; opacity: 0.85; } /* Tablets: subtle inner illumination */ @media (max-width: 860px) { .cf-lucky-frame { padding: 2.6rem 1.8rem 2.4rem; } .cf-lucky-grid { grid-template-columns: 1fr; gap: 2rem; } .cf-lucky-spine { flex-direction: row; min-width: auto; padding: 0.4rem 0; gap: 0.7rem; width: 100%; } .cf-lucky-spine-line { width: auto; height: 0.5px; min-width: 60px; min-height: 0; flex: 1; background: linear-gradient(90deg, transparent, rgba(142, 110, 58, 0.55), transparent); } } @media (max-width: 480px) { .cf-lucky-frame { padding: 2rem 1.2rem; } .cf-lucky-crest { width: 60px; height: 60px; } .cf-lucky-eyebrow { font-size: 1.35rem; letter-spacing: 0.22em; } .cf-lucky-leaf { grid-template-columns: 88px 1fr; gap: 1rem; } .cf-leaf-tablet { min-height: 92px; padding: 0.55rem 0.35rem 0.6rem; } .cf-leaf-num { font-size: 2.3rem; } .cf-leaf-month, .cf-leaf-dow { font-size: 0.78rem; letter-spacing: 0.24em; } .cf-leaf-note { font-size: 1.12rem; } .cf-lucky-corner { font-size: 0.75rem; } .cf-lucky-corner-tl, .cf-lucky-corner-tr { top: 8px; } .cf-lucky-corner-bl, .cf-lucky-corner-br { bottom: 8px; } } /* ════════════════════════════════════════════════════════════ THE SKY — THIS WEEK · ephemeris card grid (cream context) Replaces the cramped .cc-eph-row strip with 3×2 illuminated planet cards: huge glyph + name + placement + scripted note. ════════════════════════════════════════════════════════════ */ .cf-eph { position: relative; width: calc(100% - 2.8rem); /* matches .cf-lucky outer 1.4rem horizontal padding */ max-width: calc(1080px - 2.8rem); margin: 2.4rem auto 0; padding: 1.6rem 3rem 1.4rem; background: repeating-linear-gradient(to bottom, rgba(184, 145, 80, 0.04) 0 1px, transparent 1px 36px), linear-gradient(180deg, var(--cc-vellum) 0%, var(--cc-vellum-warm) 100%); border: 0.5px solid rgba(142, 110, 58, 0.5); box-shadow: inset 0 0 0 5px rgba(250, 241, 225, 0.7), inset 0 0 0 6px rgba(142, 110, 58, 0.3), var(--cc-shadow-folio); border-radius: 3px; } .cf-eph-corner { position: absolute; width: 16px; height: 16px; border: 1px solid var(--cc-gold-deep); opacity: 0.7; pointer-events: none; } .cf-eph-corner-tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; } .cf-eph-corner-tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; } .cf-eph-corner-bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; } .cf-eph-corner-br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; } .cf-eph-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .cf-eph-card { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; border-right: 0.5px solid rgba(142, 110, 58, 0.28); border-bottom: 0.5px solid rgba(142, 110, 58, 0.28); transition: background 0.4s ease; } /* Strip dividers on the outer edges of the 3-col grid */ .cf-eph-card:nth-child(3n) { border-right: 0; } .cf-eph-card:nth-last-child(-n+3) { border-bottom: 0; } .cf-eph-card:hover { background: linear-gradient(180deg, transparent, rgba(212, 172, 104, 0.08)); } .cf-eph-glyph { font-family: var(--cc-font-glyph); font-size: 2.6rem; line-height: 1; text-align: center; color: var(--cc-burgundy); text-shadow: 0 0 16px rgba(212, 172, 104, 0.18); } .cf-eph-body { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; } .cf-eph-label { font-family: 'Cinzel', 'EB Garamond', serif; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; font-size: 1.15rem; color: var(--cc-ink); } .cf-eph-place { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.18rem; color: var(--cc-ink); line-height: 1.2; } .cf-eph-note { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.42rem; line-height: 1.2; letter-spacing: 0.005em; color: var(--cc-burgundy); margin-top: 0.3rem; } .cf-eph-caption { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin-top: 1.8rem; font-family: 'Italianno', cursive; color: var(--cc-gold-deep); font-size: 1.4rem; letter-spacing: 0.04em; } .cf-eph-caption-mark { color: var(--cc-gold-deep); opacity: 0.65; font-size: 0.9rem; font-family: 'EB Garamond', serif; } @media (max-width: 880px) { .cf-eph { padding: 2.2rem 1.6rem 1.8rem; } .cf-eph-grid { grid-template-columns: repeat(2, 1fr); } .cf-eph-card { padding: 1rem 1rem; grid-template-columns: 54px 1fr; gap: 0.85rem; } .cf-eph-card:nth-child(3n) { border-right: 0.5px solid rgba(142, 110, 58, 0.28); } .cf-eph-card:nth-child(2n) { border-right: 0; } .cf-eph-card:nth-last-child(-n+3) { border-bottom: 0.5px solid rgba(142, 110, 58, 0.28); } .cf-eph-card:nth-last-child(-n+2) { border-bottom: 0; } .cf-eph-glyph { font-size: 2.2rem; } .cf-eph-place { font-size: 1.05rem; } .cf-eph-note { font-size: 1.3rem; } } @media (max-width: 480px) { .cf-eph-grid { grid-template-columns: 1fr; } .cf-eph-card { border-right: 0 !important; border-bottom: 0.5px solid rgba(142, 110, 58, 0.28) !important; } .cf-eph-card:last-child { border-bottom: 0 !important; } .cf-sky-attribution { font-size: 1rem; gap: 0.4rem 0.85rem; padding: 0.7rem 1rem; } .cf-sky-attr-val { font-size: 1.05rem; } } /* ════════════════════════════════════════════════════════════ TAROT CARD OF THE WEEK — purple reveal frame Reuses brand .reveal-frame, .reveal-inner, .vitrine-card, .scene-eyebrow, .scene-answer, .scene-tail, .scene-text from /css/yes-no-tarot.css; adds width-matching outer + header. ════════════════════════════════════════════════════════════ */ .cf-tarotweek { width: calc(100% - 2.8rem); /* matches Lucky Days frame width */ max-width: calc(1080px - 2.8rem); margin: 3.4rem auto 0; } /* Width override on the brand reveal-frame so it fills the section */ .cf-tarotweek .cf-tarot-frame { padding: 2.6rem 2.8rem 2.4rem; } /* Centered header inside the purple plate */ .cf-tarot-head { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto 2rem; padding: 0 1rem; } .cf-tarot-headline { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; margin: 0 0 0.65rem; color: var(--cc-gold-pale); } .cf-tarot-headline em { color: var(--cc-gold-bright); font-style: italic; background: linear-gradient(180deg, #F4DCA6, #D4AC68 60%, #B89150); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; } .cf-tarot-deck { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 1.05rem; line-height: 1.55; color: var(--cc-gold-pale); margin: 0 auto; max-width: 560px; opacity: 0.92; } /* Tighten the brand reveal-inner spacing for this context */ .cf-tarot-inner { padding: 0.5rem 0.5rem 0; } /* Vitrine column extras — caption + attribution under the card */ .cf-tarot-vitrine { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .cf-tarot-card-link { display: inline-block; text-decoration: none; } .cf-tarot-vitrine-cap { font-family: 'Italianno', cursive; font-size: 1.7rem; color: #E2B0BA; /* rose-soft */ -webkit-text-stroke: 0.3px #E2B0BA; margin-top: 0.4rem; } .cf-tarot-vitrine-attr { font-family: 'Cinzel', 'EB Garamond', serif; font-variant: small-caps; font-weight: 700; letter-spacing: 0.32em; font-size: 0.9rem; color: var(--cc-gold-pale); text-transform: uppercase; } /* Override scene-answer so "The Hermit" doesn't render at 9rem like "Yes" */ .cf-tarot-name.scene-answer { font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: 1; letter-spacing: -0.01em; margin: 0 0 0.4rem; } .cf-tarot-name .punct { font-size: 0.75em; } .cf-tarot-tail.scene-tail { margin-bottom: 1.6rem; } .cf-tarot-body p { margin: 0 0 1.1rem; } .cf-tarot-body em { color: var(--cc-gold-pale); font-style: italic; } .cf-tarot-body strong { color: var(--cc-gold-bright); font-weight: 600; } /* CTA link beneath the body */ .cf-tarot-cta { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 0.9rem; font-family: 'Cinzel', 'EB Garamond', serif; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.85rem; color: var(--cc-gold-bright); text-decoration: none; padding-bottom: 0.45rem; border-bottom: 0.5px solid rgba(212, 172, 104, 0.4); transition: color 0.25s, border-color 0.25s, gap 0.25s; } .cf-tarot-cta:hover { color: #F4DCA6; border-color: #F4DCA6; gap: 0.85rem; } .cf-tarot-cta-arrow { transition: transform 0.25s; } .cf-tarot-cta:hover .cf-tarot-cta-arrow { transform: translateX(3px); } @media (max-width: 880px) { .cf-tarotweek .cf-tarot-frame { padding: 2rem 1.4rem 1.8rem; } .cf-tarot-head { margin-bottom: 1.4rem; } } /* ════════════════════════════════════════════════════════════ AFFIRMATION — width-match the tarot frame above and shorten the cartouche so it doesn't dominate the page. ════════════════════════════════════════════════════════════ */ .cc-affirmation { width: calc(100% - 2.8rem); max-width: calc(1080px - 2.8rem); padding: 0; margin: 3.4rem auto 0; } .cc-affirmation .cc-affirmation-cartouche { padding: 1.6rem 2.4rem 1.8rem; border-radius: 4px; /* drop the oval — it caused the tall feel */ } .cc-affirmation .cc-affirmation-eyebrow { margin: 0.4rem 0 0.5rem; color: var(--cc-burgundy); -webkit-text-stroke: 0.3px var(--cc-burgundy); font-size: clamp(2rem, 3.4vw, 2.6rem); } .cc-affirmation .cc-affirmation-body { margin: 0 0 0.55rem; font-size: clamp(1.7rem, 3.2vw, 2.3rem); } /* ════════════════════════════════════════════════════════════ Sealed-letter birth-chart teaser — replaces the celestial moon SVG with the actual chart-wheel render used in the Blueprint PDF, so the invitation shows what they'll receive. ════════════════════════════════════════════════════════════ */ .cf-sealed-chart { display: flex; align-items: center; justify-content: center; padding: 0.4rem; } .cf-sealed-chart-img, .cf-sealed-chart-svg { display: block; width: 100%; max-width: 380px; height: auto; border-radius: 50%; box-shadow: 0 30px 60px -28px rgba(45, 20, 40, 0.55); animation: cfSealedChartFloat 7s ease-in-out infinite; } @keyframes cfSealedChartFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-0.5deg); } } @media (prefers-reduced-motion: reduce) { .cf-sealed-chart-img { animation: none; } } /* FAQ section header — bump the Italianno script "things readers always ask" */ .cc-faq-head .cc-faq-script { font-size: clamp(2rem, 3.6vw, 2.6rem); } /* ════════════════════════════════════════════════════════════ FAQ — soft membership pitch attached to each answer ════════════════════════════════════════════════════════════ */ .cf-faq-cta { position: relative; margin-top: 1.1rem; padding: 0.95rem 1.1rem 1rem; background: linear-gradient(180deg, rgba(212, 172, 104, 0.08), rgba(212, 172, 104, 0.03)); border-left: 2px solid var(--cc-gold-deep); border-radius: 0 3px 3px 0; font-family: 'EB Garamond', serif; font-size: 1rem; line-height: 1.55; color: var(--cc-ink); } .cf-faq-cta strong { color: var(--cc-burgundy); font-weight: 700; font-style: italic; font-size: 1.05rem; } .cf-faq-cta em { color: var(--cc-gold-deep); font-style: italic; } .cf-faq-cta a { color: var(--cc-burgundy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(107, 31, 44, 0.4); text-underline-offset: 3px; transition: text-decoration-color 0.25s, color 0.25s; } .cf-faq-cta a:hover { color: var(--cc-burgundy-2, #4D1521); text-decoration-color: var(--cc-burgundy); } /* ════════════════════════════════════════════════════════════ HUB — illuminated celestial atlas at bare /horoscopes/ The 12 signs float in the night sky like constellations. Below the hero, a tipped-in vellum live-sky plate. ════════════════════════════════════════════════════════════ */ /* TALLER hero on the hub page — let the sky breathe. Note: NO display:flex here. The per-sign hero uses normal block layout so columns expand to their max-width. Adding flex would shrink them to content-width and break the brand-back-link math. */ .hub-body .hub-hero { min-height: min(760px, 80vh); padding-bottom: 3rem; } /* Hub Back-to-Home — match numerology/tarot positioning exactly. Hangs off the LEFT edge of the centered 920px column, same as /numerology/ and /tarot/yes-no-tarot-reading/, so the link doesn't shift when the user clicks between site-wide nav links. */ .hub-body .page-hero-back { left: -130px; top: 1.5rem; } @media (max-width: 1280px) { .hub-body .page-hero-back { left: -80px; } } @media (max-width: 1180px) { .hub-body .page-hero-back { left: -40px; } } @media (max-width: 1100px) { .hub-body .page-hero-back { left: 0; } } /* Smaller hub-specific moon — clamped on wide viewports so it doesn't drift off into space at 3000-10000px wide. */ .hub-body .hub-moon { left: max(4%, calc(50% - 540px)); top: 14%; width: 11%; max-width: 160px; opacity: 1; } /* Hub constellation — gemini pattern from the shared constellation library. Has CSS rotate(90deg) inherited from .cf-constellation, so the pre-rotated pattern in horoscopes-constellations.php displays correctly. */ .hub-body .hub-constellation { right: max(1%, calc(50% - 580px)); top: 16%; width: 16%; max-width: 220px; opacity: 0.82; filter: drop-shadow(0 0 12px rgba(212, 172, 104, 0.22)); } /* Title column on the hub — centered, generous breathing room */ .hub-body .hub-title-col { margin-top: 1rem; text-align: center; } /* "Choose Your Sign" — luminous cream, EB Garamond italic, glowing like the per-sign VIRGO heading (same font/treatment, slightly smaller because the phrase is longer). */ .hub-title { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(3rem, 7.5vw, 5.4rem); letter-spacing: 0.025em; line-height: 1; color: var(--cf-cream, #F0E8D2); text-shadow: 0 0 32px rgba(237, 228, 200, 0.22); margin: 0.4rem 0 0.8rem; } .hub-title em { font-style: italic; background: linear-gradient(180deg, #FFFAEB 0%, #F4DCA6 35%, #D4AC68 65%, #B89150 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 40px rgba(212, 172, 104, 0.45); } .hub-tagline { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.5; color: var(--cf-cream, #F0E8D2); opacity: 0.86; max-width: 620px; margin: 0 auto 1.6rem; } .hub-tagline em { color: var(--cc-gold-pale, #F4DCA6); font-style: italic; } /* Decorative rule beneath the tagline */ .hub-rule { display: flex; align-items: center; justify-content: center; gap: 0.85rem; max-width: 380px; margin: 0 auto 0; } .hub-rule-line { flex: 1; height: 0.5px; background: linear-gradient(90deg, transparent, var(--cc-gold-deep), transparent); } .hub-rule-mark { color: var(--cc-gold-deep); font-size: 1rem; } /* ── 12 SIGNS GRID — the heart of the hub ─────────────────── */ .hub-signs { position: relative; z-index: 2; margin: 1.6rem auto 0; max-width: 1240px; padding: 0 2rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8rem 0.6rem; } .hub-sign { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; padding: 1.4rem 0.4rem 1.5rem; text-decoration: none; color: var(--cf-cream, #F0E8D2); border-radius: 3px; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.4s ease; border-top: 0.5px solid rgba(212, 172, 104, 0); border-bottom: 0.5px solid rgba(212, 172, 104, 0); opacity: 0; animation: hubSignReveal 0.6s ease-out forwards; animation-delay: calc(var(--sign-i, 1) * 60ms + 200ms); } @keyframes hubSignReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .hub-sign-glyph { font-family: var(--cc-font-glyph); font-size: 2.6rem; font-weight: 400; line-height: 1; color: var(--cf-cream); font-variant-emoji: text; /* Stroke is mobile-only — see @media (max-width: 720px) block below. Desktop Segoe UI Symbol renders zodiac with the right weight already. */ filter: drop-shadow(0 0 18px transparent); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease, color 0.4s ease; margin-bottom: 0.3rem; } .hub-sign[data-element="fire"] .hub-sign-glyph { color: #E89548; } .hub-sign[data-element="earth"] .hub-sign-glyph { color: #95B36F; } .hub-sign[data-element="air"] .hub-sign-glyph { color: #A8C2DC; } .hub-sign[data-element="water"] .hub-sign-glyph { color: #8FBFC8; } .hub-sign-name { font-family: 'Cinzel', 'EB Garamond', serif; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.92rem; color: var(--cf-cream); text-indent: 0.22em; } .hub-sign-dates { font-family: 'EB Garamond', serif; font-style: italic; font-size: 0.78rem; color: var(--cc-gold-pale, #F4DCA6); opacity: 0.88; letter-spacing: 0.01em; margin-top: 0.1rem; } .hub-sign-arrow { font-family: 'EB Garamond', serif; font-size: 1.1rem; color: var(--cc-gold-pale, #F4DCA6); opacity: 0; transform: translateX(-4px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); margin-top: 0.45rem; } .hub-sign:hover { background: radial-gradient(ellipse 80% 70% at 50% 60%, rgba(240, 216, 154, 0.10) 0%, rgba(212, 172, 104, 0.04) 40%, transparent 75%); transform: translateY(-3px); border-top-color: rgba(212, 172, 104, 0.25); border-bottom-color: rgba(212, 172, 104, 0.25); } .hub-sign:hover .hub-sign-glyph { transform: scale(1.18); filter: drop-shadow(0 0 22px currentColor); } .hub-sign:hover .hub-sign-arrow { opacity: 0.85; transform: translateX(0); } /* ── LIVE-SKY PLATE — aubergine celestial card. Matches the tarot card-of-the-day picker (.spread-frame.is-input) so the hub feels visually anchored to the rest of the brand v2 illuminated set. */ .hub-sky-section { width: calc(100% - 2.8rem); max-width: calc(1080px - 2.8rem); margin: 4rem auto 3rem; } .hub-sky-plate { position: relative; padding: 3rem 2.4rem 3.2rem; /* Aubergine base + warm glows top/bottom — same recipe as .spread-frame */ 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 var(--cc-gold-bright, #D4AC68); } /* Subtle noise texture (same SVG as tarot picker) for parchment feel */ .hub-sky-plate::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.45; z-index: 0; } /* Inner gold filigree border */ .hub-sky-plate::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(212, 172, 104, 0.42); pointer-events: none; z-index: 0; } .hub-sky-corner { position: absolute; width: 18px; height: 18px; border: 1px solid #D4AC68; opacity: 0.85; pointer-events: none; z-index: 2; } .hub-sky-corner-tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; } .hub-sky-corner-tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; } .hub-sky-corner-bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; } .hub-sky-corner-br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; } .hub-sky-head { position: relative; z-index: 1; text-align: center; margin-bottom: 2rem; } .hub-sky-eyebrow { font-family: 'Cinzel', 'EB Garamond', serif; font-weight: 800; letter-spacing: 0.42em; text-transform: uppercase; font-size: 0.78rem; color: #D4AC68; text-indent: 0.42em; text-shadow: 0 0 12px rgba(212, 172, 104, 0.45); } .hub-sky-title { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(1.6rem, 2.7vw, 2.1rem); color: #F4DCA6; margin: 0.55rem 0 0.4rem; text-shadow: 0 0 24px rgba(244, 220, 166, 0.25); } .hub-sky-script { font-family: 'Italianno', cursive; font-size: clamp(1.4rem, 2.3vw, 1.85rem); color: #E2B0BA; -webkit-text-stroke: 0.3px #E2B0BA; letter-spacing: 0.04em; } .hub-sky-grid { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0.4rem 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 1px solid rgba(212, 172, 104, 0.38); border-bottom: 1px solid rgba(212, 172, 104, 0.38); } .hub-sky-card { display: flex; align-items: center; gap: 0.85rem; padding: 1.15rem 0.9rem; border-right: 1px solid rgba(212, 172, 104, 0.22); transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1); position: relative; } .hub-sky-card:last-child { border-right: 0; } .hub-sky-card:hover { background: linear-gradient(180deg, rgba(244, 220, 166, 0.08) 0%, rgba(212, 172, 104, 0.03) 100%); } .hub-sky-card:hover .hub-sky-glyph { text-shadow: 0 0 18px rgba(244, 220, 166, 0.7), 0 0 32px rgba(244, 220, 166, 0.35); } .hub-sky-glyph { font-family: var(--cc-font-glyph); font-size: 2.15rem; line-height: 1; color: #D4AC68; text-shadow: 0 0 14px rgba(212, 172, 104, 0.4); transition: text-shadow 0.4s ease; } .hub-sky-meta { display: flex; flex-direction: column; min-width: 0; } .hub-sky-label { font-family: 'Cinzel', 'EB Garamond', serif; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.78rem; color: #F4DCA6; } .hub-sky-place { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: 0.95rem; color: #FBF3DC; } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 1020px) { .hub-signs { grid-template-columns: repeat(4, 1fr); } .hub-sky-grid { grid-template-columns: repeat(3, 1fr); } .hub-sky-card:nth-child(3n) { border-right: 0; } .hub-sky-card:nth-child(n+4) { border-top: 1px solid rgba(212, 172, 104, 0.22); } } @media (max-width: 720px) { .hub-signs { grid-template-columns: repeat(3, 1fr); gap: 0.8rem 0.4rem; padding: 0 1rem; } .hub-sign { padding: 1.2rem 0.3rem 1.3rem; } .hub-sign-glyph { font-size: 2.7rem; -webkit-text-stroke: 0.6px currentColor; text-stroke: 0.6px currentColor; paint-order: stroke fill; } .hub-sign-name { font-size: 0.92rem; letter-spacing: 0.18em; } .hub-sign-dates { font-size: 0.82rem; } /* Hub mobile: moon ABOVE "Choose" (between top gold rule and title), constellation ABOVE "Sign" (same vertical area, opposite side) */ .hub-body .hub-moon { top: 11%; left: 18%; width: 16%; } .hub-body .hub-constellation { top: 10%; right: 12%; width: 24%; } } @media (max-width: 480px) { .hub-signs { grid-template-columns: repeat(2, 1fr); } .hub-sky-grid { grid-template-columns: repeat(2, 1fr); } .hub-sky-card:nth-child(2n) { border-right: 0; } .hub-sky-card:nth-child(n+3) { border-top: 1px solid rgba(212, 172, 104, 0.22); } .hub-sky-plate { padding: 2.2rem 1.6rem 2.4rem; } .hub-title { font-size: clamp(2.4rem, 11vw, 3.6rem); } } /* ════════════════════════════════════════════════════════════ MEMBER NOTICE — daily-only banner inside the combined card. Two states: anonymous (gold-ringed CTA) vs member (warm confirmation tone). Same illuminated-manuscript language as the rest of the body — vellum panel, gold rule, italic ink. ════════════════════════════════════════════════════════════ */ .cf-member-notice { display: flex; align-items: flex-start; gap: 1rem; margin: 0 1.5rem 2rem; padding: 1.05rem 1.4rem 1.1rem; background: linear-gradient(180deg, rgba(212, 172, 104, 0.10), rgba(212, 172, 104, 0.04)); border-left: 2.5px solid var(--cc-gold-deep); border-radius: 0 4px 4px 0; font-family: 'EB Garamond', serif; font-size: 1rem; line-height: 1.5; color: var(--cc-ink); } .cf-member-notice-mark { flex: 0 0 auto; font-size: 1.1rem; color: var(--cc-gold-deep); margin-top: 0.15rem; } .cf-member-notice-body { flex: 1; } .cf-member-notice strong { font-style: italic; font-weight: 600; color: var(--cc-burgundy); } .cf-member-notice-link { display: inline-block; margin-top: 0.45rem; font-family: 'Cinzel', 'EB Garamond', serif; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.78rem; color: var(--cc-burgundy); text-decoration: none; border-bottom: 0.5px solid rgba(107, 31, 44, 0.4); padding-bottom: 2px; transition: color 0.25s, border-color 0.25s; } .cf-member-notice-link:hover { color: var(--cc-burgundy-2, #4D1521); border-color: var(--cc-burgundy); } /* Member state — warmer, confirmatory rather than aspirational */ .cf-member-notice-member { background: linear-gradient(180deg, rgba(63, 107, 78, 0.08), rgba(63, 107, 78, 0.03)); border-left-color: #3F6B4E; } .cf-member-notice-member .cf-member-notice-mark { color: #3F6B4E; } .cf-member-notice-member strong { color: #2D5039; } .cf-member-notice-member .cf-member-notice-link { color: #2D5039; border-bottom-color: rgba(45, 80, 57, 0.4); } .cf-member-notice-member .cf-member-notice-link:hover { color: #1F3826; border-bottom-color: #2D5039; } /* ════════════════════════════════════════════════════════════ ASTROLOGY ENCYCLOPEDIA SECTION (added 2026-05-09) Sits below the Live Sky plate, above the Apothecary. 14 category tiles linking to /horoscopes/{cat}/. ════════════════════════════════════════════════════════════ */ .hub-encyclopedia { max-width: 1100px; margin: 5rem auto 2rem; padding: 0 2rem; text-align: center; position: relative; z-index: 2; } .hub-encyclopedia-eyebrow { font-family: 'EB Garamond', serif; font-variant: small-caps; font-weight: 800; font-size: 1rem; letter-spacing: 0.36em; color: var(--cf-gold-soft, #B8893A); margin: 0 0 0.5rem; } .hub-encyclopedia-title { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(2.2rem, 4.4vw, 3.2rem); color: #2A1825; line-height: 1.05; margin: 0 0 0.4rem; } .hub-encyclopedia-title em { color: #6B1F2C; } .hub-encyclopedia-script { font-family: 'Italianno', cursive; font-size: clamp(1.5rem, 2.6vw, 2rem); color: #6B1F2C; line-height: 1; margin: 0 0 0.5rem; } .hub-encyclopedia-rule { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0.5rem auto 2rem; max-width: 360px; color: var(--cf-gold-soft, #B8893A); } .hub-encyclopedia-rule::before, .hub-encyclopedia-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--cf-gold-soft, #B8893A) 50%, transparent); } .hub-encyclopedia-rule-mark { font-family: 'EB Garamond', serif; font-style: italic; color: var(--cf-gold-soft, #B8893A); font-size: 1.1rem; } .hub-encyclopedia-deck { font-family: 'EB Garamond', serif; font-size: 1.05rem; line-height: 1.6; color: #4A3540; max-width: 620px; margin: 0 auto 2.5rem; } .hub-encyclopedia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; } .hub-encyclopedia-grid li { margin: 0; } .hub-encyclopedia-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.6rem 1rem 1.3rem; background: radial-gradient(ellipse at top, rgba(212, 172, 104, 0.12), transparent 65%), #F8EFD3; border: 1px solid rgba(184, 145, 80, 0.5); border-radius: 2px; text-decoration: none; text-align: center; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; box-shadow: inset 0 0 0 3px #F8EFD3, inset 0 0 0 4px rgba(184, 145, 80, 0.3), 0 1px 4px -2px rgba(42, 20, 40, 0.15); } .hub-encyclopedia-card:hover { transform: translateY(-3px); border-color: #6B1F2C; box-shadow: inset 0 0 0 3px #F8EFD3, inset 0 0 0 4px #6B1F2C, 0 8px 18px -8px rgba(42, 20, 40, 0.3); } .hub-encyclopedia-glyph { font-family: 'Cinzel', 'EB Garamond', serif; font-size: 1.9rem; line-height: 1; color: #D4AC68; text-shadow: 0 0 6px rgba(212, 172, 104, 0.4); } .hub-encyclopedia-name { font-family: 'EB Garamond', serif; font-variant: small-caps; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.16em; color: #2A1825; line-height: 1.15; margin: 0.15rem 0 0; } .hub-encyclopedia-blurb { font-family: 'Italianno', cursive; font-size: 1.2rem; line-height: 1; color: #6B1F2C; margin: 0; } @media (max-width: 640px) { .hub-encyclopedia { padding: 0 1rem; margin-top: 3.5rem; } .hub-encyclopedia-grid { grid-template-columns: repeat(2, 1fr); } } /* ════════════════════════════════════════════════════════════ ENCYCLOPEDIA CONSTELLATION SECTION OVERRIDES Scoped to .hc-encyclopedia-room — tightens spacing, enlarges the eyebrow, and fixes the gold-gradient glyph being clipped. ════════════════════════════════════════════════════════════ */ .hc-encyclopedia-room { padding-top: clamp(2.5rem, 5vw, 4rem) !important; padding-bottom: clamp(3.5rem, 7vw, 5.5rem) !important; } .hc-encyclopedia-room .codex-room-eyebrow { font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: 0.42em; margin-bottom: 0.85rem; } /* The gold-gradient text glyph has shadow + filter that pushes its visual bounding box beyond the text-line metrics. With overflow:hidden on the art zone the top of the glyph (especially Aries ♈) gets clipped. */ .hc-encyclopedia-room .codex-card-art { overflow: visible; min-height: 200px; padding: 1.6rem 1rem 1.6rem; } .hc-encyclopedia-room .codex-card-glyph { font-size: clamp(5rem, 8.2vw, 6.6rem); line-height: 1; padding: 0.1em 0; } /* Aries gets a native symbol font that renders ♈ at standard glyph width. */ .hc-encyclopedia-room [data-cat="signs"] .codex-card-glyph { font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', 'Arial Unicode MS', sans-serif; font-size: clamp(3.6rem, 6vw, 5rem); } /* THE OVERLAY FIX: the card-frame paints its inner gold rule via inset box-shadow at 7px from the edge. The banner-top, banner-bottom and art-zone all sit at margin 9px — leaving a 2px gap on every side where the card-frame's slightly-different cream background shows through. That 2px strip reads visually as a vertical "overlay" cropping the glyph. Push the content blocks out to the gold rule (margin 7px) so the inset rule sits flush against the content, eliminating the gap. */ .hc-encyclopedia-room .codex-card-banner-top { margin: 7px 7px 0; } .hc-encyclopedia-room .codex-card-art { margin: 0 7px; } .hc-encyclopedia-room .codex-card-banner-bottom { margin: 0 7px 7px; } /* ════════════════════════════════════════════════════════════ "See an Example" modal — opened by the .btn-see in the .cf-sealed-letter invitation. Brand v2 cosmic-folio palette (wine, gold, parchment). Open/close logic in horoscopes.php. ════════════════════════════════════════════════════════════ */ .cf-example-modal-backdrop { position: fixed; inset: 0; z-index: 600; background: rgba(20, 8, 22, 0.88); backdrop-filter: blur(10px); display: none; align-items: flex-start; justify-content: center; padding: 5vh 1.25rem; overflow-y: auto; overscroll-behavior: contain; } .cf-example-modal-backdrop.open { display: flex; animation: cfExampleFadeIn 0.3s ease; } @keyframes cfExampleFadeIn { from { opacity: 0; } to { opacity: 1; } } .cf-example-modal { position: relative; max-width: 720px; width: 100%; background: radial-gradient(ellipse at top, rgba(212, 172, 104, 0.10), transparent 60%), linear-gradient(180deg, #FBF1DA 0%, #F4E4C5 100%); border: 1px solid #B89150; border-radius: 4px; padding: 2.6rem 2.4rem 2.2rem; box-shadow: inset 0 0 0 6px #FBF1DA, inset 0 0 0 7px rgba(184, 145, 80, 0.55), 0 30px 80px rgba(0, 0, 0, 0.55); color: #2D1F38; animation: cfExampleSlideIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes cfExampleSlideIn { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .cf-example-close { position: absolute; top: 0.85rem; right: 0.95rem; width: 36px; height: 36px; border: 1px solid rgba(184, 145, 80, 0.5); background: rgba(184, 145, 80, 0.10); color: #6B1F2C; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .2s ease, transform .12s ease; } .cf-example-close:hover { background: rgba(184, 145, 80, 0.22); } .cf-example-close:active { transform: scale(0.94); } .cf-example-eyebrow { font-family: 'EB Garamond', serif; font-variant: small-caps; font-weight: 800; font-size: 0.92rem; letter-spacing: 0.32em; color: #8E6E3A; text-align: center; margin: 0 0 0.5rem; } .cf-example-title { font-family: 'EB Garamond', serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 1.95rem); color: #6B1F2C; text-align: center; margin: 0 0 0.3rem; line-height: 1.15; } .cf-example-title em { font-style: italic; font-weight: 500; } .cf-example-sub { font-family: 'EB Garamond', serif; font-style: italic; font-size: 1rem; color: #4A1620; text-align: center; margin: 0 0 1.4rem; opacity: 0.85; } .cf-example-chart { text-align: center; margin: 0 auto 1.6rem; max-width: 260px; } .cf-example-chart img { width: 100%; height: auto; display: block; border-radius: 50%; box-shadow: 0 0 32px rgba(212, 172, 104, 0.25); } .cf-example-body { font-family: 'EB Garamond', serif; font-size: 1.08rem; line-height: 1.7; color: #2D1F38; max-width: 580px; margin: 0 auto; } .cf-example-body p { margin: 0 0 1.05rem; } .cf-example-body p:last-child { margin-bottom: 0; } .cf-example-body strong { color: #6B1F2C; font-weight: 700; } .cf-example-footer { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(184, 145, 80, 0.35); text-align: center; } .cf-example-footnote { font-family: 'EB Garamond', serif; font-style: italic; font-size: 0.95rem; color: #4A1620; margin: 0 auto 1.1rem; max-width: 480px; line-height: 1.5; opacity: 0.88; } .cf-example-cta { display: inline-block; } /* Mobile — tighten padding so the modal feels right at 390px */ @media (max-width: 720px) { .cf-example-modal-backdrop { padding: 2vh 0.6rem; align-items: flex-start; } .cf-example-modal { padding: 2rem 1.1rem 1.6rem; max-height: 96vh; } .cf-example-chart { max-width: 200px; margin-bottom: 1.2rem; } .cf-example-body { font-size: 1.02rem; line-height: 1.65; } }