/* ============================================================ SASS Transits — scoped stylesheet Tokens pulled verbatim from templates/index.html :root block. This file is Transits-only. Do not @import into other pages. ============================================================ */ /* Google Places Autocomplete dropdown. Mirrors templates/index.html's rule (line ~463) exactly: z-index 300 !important. Google injects .pac-container into . */ .pac-container{z-index:300!important} :root { --sass-magenta: #9B1960; --sass-magenta-dark: #7a1450; --sass-magenta-light: #c4457a; --sass-cream: #FDF8F3; --sass-cream-dark: #F5EDE4; --text-dark: #2D2A26; --text-muted: #6B6560; --border-subtle: rgba(155, 25, 96, 0.12); --card-bg: #ffffff; --pink-tint: rgba(155, 25, 96, 0.05); --font-display: 'Fraunces', Georgia, serif; --font-body: 'DM Sans', -apple-system, sans-serif; } @property --mercury-angle { syntax: ""; inherits: false; initial-value: -18deg; } /* Reset ---------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html,body{ height:100%; font-family:var(--font-body); background:var(--sass-cream); color:var(--text-dark); line-height:1.6; overflow-x:hidden; } /* Page header (no top nav — logo only, editorial) ---------- */ .t-pageheader{padding:2rem 3rem 0;max-width:1200px;margin:0 auto} .t-pageheader-logo img{height:32px;opacity:.85;transition:opacity .2s} .t-pageheader-logo:hover img{opacity:1} /* Layout wrappers ------------------------------------------ */ .t-wrap{max-width:1100px;margin:0 auto;padding:0 3rem} .t-wrap-narrow{max-width:700px;margin:0 auto;padding:0 1.5rem} /* Section padding mirrors Chat's 6rem/3rem desktop rhythm -- */ .t-section{padding:5rem 3rem} .t-section-alt{background:var(--sass-cream-dark);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)} .t-section-tint{background:var(--pink-tint)} /* Dark burgundy variant — experimental, used on the rarity-scrubber block only. If it fights the editorial feel on review, revert .t-rarity-block back to .t-section-alt. */ .t-section-dark{ /* Canonical SASS brand magenta — same hex as buttons and nav accents. */ background:var(--sass-magenta); border-top:1px solid rgba(255,255,255,0.15); border-bottom:1px solid rgba(255,255,255,0.15); } /* ========== INDEX PAGE ==================================== */ .t-index-hero{ padding:5.5rem 3rem 4rem; max-width:1100px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:3.5rem; align-items:end; } .t-index-eyebrow{ display:inline-block;font-size:.78rem;font-weight:800; letter-spacing:.18em;text-transform:uppercase; color:var(--sass-magenta);margin-bottom:1rem; } .t-index-title{ font-family:var(--font-display); font-size:clamp(3.25rem,7vw,5.6rem); font-weight:500;line-height:.98;letter-spacing:-.035em; max-width:10.5ch;margin-bottom:1.25rem; } .t-index-title em{font-style:italic;color:var(--sass-magenta)} .t-index-sub{font-size:1.15rem;color:var(--text-muted);max-width:620px;line-height:1.7} .t-index-filter-card{ padding:1.35rem; border:1px solid var(--border-subtle); border-radius:22px; background:rgba(255,255,255,.62); box-shadow:0 18px 44px rgba(65,41,37,.06); } .t-filter-title{ margin-bottom:.75rem; color:var(--text-muted); font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; } .t-filter-pills{display:flex;flex-wrap:wrap;gap:.5rem} .t-filter-pill{ padding:.45rem .75rem; border:1px solid var(--border-subtle); border-radius:999px; background:#fffaf6; color:var(--sass-magenta); font-size:.78rem; font-weight:700; } .t-filter-pill.is-active{ background:var(--sass-magenta); border-color:var(--sass-magenta); color:white; } .t-section-head{ display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:1.5rem; } .t-section-title{ font-family:var(--font-display); font-size:clamp(1.65rem,3vw,2.25rem); font-weight:500; line-height:1.12; letter-spacing:-.015em; } .t-section-sub{ max-width:520px; color:var(--text-muted); font-size:.98rem; line-height:1.65; } /* Featured section — burgundy band wraps a lifted white card */ .t-featured-section{padding:3rem 3rem 4rem} .t-featured-section-inner{max-width:1100px;margin:0 auto} .t-featured-section-dark{ background:var(--sass-magenta); padding:3.5rem 3rem; margin-bottom:1rem; } .t-featured-section-dark .t-featured-section-inner{max-width:1100px;margin:0 auto} .t-featured-section-dark .t-index-eyebrow{color:#e4a2c3} .t-featured-section-dark .t-section-title{color:var(--sass-cream)} .t-featured-section-dark .t-section-sub{color:rgba(253,248,243,.78)} .t-featured-card{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:2.25rem; background:white; border-radius:28px; padding:2.6rem; border:1px solid var(--border-subtle); box-shadow:0 4px 24px rgba(155,25,96,0.08); position:relative;overflow:hidden; text-decoration:none;color:inherit; transition:transform .3s,box-shadow .3s; } .t-featured-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(155,25,96,0.12)} .t-featured-section-dark .t-featured-card{ box-shadow:0 12px 40px rgba(0,0,0,0.25); border-color:transparent; } .t-featured-section-dark .t-featured-card:hover{ transform:translateY(-4px); box-shadow:0 18px 50px rgba(0,0,0,0.35); } .t-featured-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--sass-magenta),var(--sass-magenta-light)); } .t-featured-kicker{font-size:.78rem;font-weight:800;color:var(--sass-magenta);letter-spacing:.14em;margin-bottom:.9rem;text-transform:uppercase} .t-featured-title{ font-family:var(--font-display); font-size:clamp(2.1rem,4vw,3.15rem); font-weight:500;line-height:1.08;letter-spacing:-.018em;margin-bottom:.9rem; } .t-featured-title em{font-style:italic;color:var(--sass-magenta)} .t-featured-desc{font-size:1.05rem;color:var(--text-muted);margin-bottom:1.5rem;line-height:1.7} .t-featured-meta{display:grid;gap:.65rem;align-content:center} .t-meta-chip{ display:flex; justify-content:space-between; gap:1rem; padding:.8rem .9rem; border:1px solid var(--border-subtle); border-radius:12px; background:#fff8f2; color:var(--text-muted); font-size:.84rem; } .t-meta-chip strong{color:var(--sass-magenta);font-weight:800;text-align:right} /* Next Up grid of index cards */ .t-next-section{padding:4rem 3rem 4rem;max-width:1100px;margin:0 auto} .t-next-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; } .t-index-card{ position:relative; overflow:hidden; min-height:340px; background:rgba(255,255,255,.7); border-radius:20px; padding:1.75rem 1.75rem 1.5rem; border:1px solid var(--border-subtle); text-decoration:none;color:inherit; transition:transform .3s,box-shadow .3s,border-color .3s; display:flex;flex-direction:column;gap:.75rem; } .t-index-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(155,25,96,0.1);border-color:rgba(155,25,96,0.25)} .t-card-kicker{ font-size:.7rem;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--sass-magenta); } .t-card-title{ font-family:var(--font-display);font-size:1.35rem; font-weight:500;line-height:1.18;letter-spacing:-.01em;color:var(--text-dark); } .t-card-title em{font-style:italic;color:var(--sass-magenta)} .t-card-desc{font-size:.95rem;color:var(--text-muted);line-height:1.55} .t-card-spacer{flex:1} .t-card-footer{ display:flex;justify-content:space-between;align-items:center; padding-top:1rem;border-top:1px solid var(--border-subtle); } .t-card-rarity{font-size:.75rem;color:var(--text-muted)} .t-card-arrow{font-size:.85rem;color:var(--sass-magenta);font-weight:800} .t-pulse{ position:relative; height:54px; margin:1rem 0 .35rem; } .t-pulse::before{ content:""; position:absolute; left:0;right:0;top:25px;height:4px; border-radius:999px; background:rgba(155,25,96,.12); } .t-pulse-band{ position:absolute; top:20px; height:14px; border-radius:999px; background:rgba(196,69,122,.2); } .t-pulse-band.is-current{background:rgba(155,25,96,.24)} .t-pulse-moon{ position:absolute; top:14px; width:26px;height:26px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle at 36% 36%, #fffdf9 0 28%, transparent 30%),var(--sass-magenta); box-shadow:0 0 0 1px var(--sass-magenta); } .t-pulse-loop{ position:absolute; top:14px; width:34px;height:24px; transform:translateX(-50%); border:2px solid var(--sass-magenta); border-radius:50%; } .t-pulse-loop::after{ content:""; position:absolute; left:15px;top:-2px; width:34px;height:24px; border:2px solid rgba(155,25,96,.34); border-radius:50%; } .t-pulse-gate{ position:absolute; top:13px; width:4px;height:28px; transform:translateX(-50%); border-radius:999px; background:var(--sass-magenta); box-shadow:12px 0 0 rgba(155,25,96,.22); } .t-featured-card .t-pulse{margin-top:1.35rem} /* Long arcs — horizontal list style */ .t-longarc-section{ padding:4rem 3rem 5rem;max-width:1100px;margin:2rem auto 0; border-top:1px solid var(--border-subtle); } .t-longarc-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; } .t-longarc-item{ background:rgba(255,255,255,.7);border:1px solid var(--border-subtle);border-radius:18px; padding:1.5rem;display:grid; grid-template-columns:8.5rem minmax(0,1fr) auto;gap:1.35rem;align-items:center; text-decoration:none;color:inherit;transition:transform .2s,border-color .2s; } .t-longarc-item:hover{transform:translateY(-3px);border-color:rgba(155,25,96,0.25)} .t-longarc-years{ font-family:var(--font-display);font-size:1.35rem; color:var(--sass-magenta);font-weight:500;line-height:1.05; } .t-longarc-body-title{ font-family:var(--font-display);font-size:1.12rem; font-weight:500;margin-bottom:.25rem; } .t-longarc-body-desc{font-size:.85rem;color:var(--text-muted);line-height:1.5} .t-longarc-arrow{color:var(--sass-magenta);font-size:.9rem;font-weight:800} .t-mini-pulse{ height:20px; position:relative; margin-top:.75rem; } .t-mini-pulse::before{ content:""; position:absolute; left:0;right:0;top:9px;height:3px; border-radius:999px; background:rgba(155,25,96,.12); } .t-mini-pulse span{ position:absolute; top:5px; height:11px; border-radius:999px; background:rgba(196,69,122,.22); } .t-mini-pulse span.is-current{background:rgba(155,25,96,.34)} /* ========== DETAIL PAGE =================================== */ .t-detail-hero{padding:4rem 3rem 2.5rem} .t-detail-hero-inner{max-width:780px;margin:0 auto;text-align:left} .t-back-link{ display:inline-block; font-size:.85rem;color:var(--sass-magenta); text-decoration:none;font-weight:500; margin-bottom:1.75rem; transition:color .2s; } .t-back-link:hover{color:var(--sass-magenta-dark);text-decoration:underline} .t-detail-kicker{ font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--sass-magenta);margin-bottom:1.25rem; } .t-detail-title{ font-family:var(--font-display); font-size:clamp(2.4rem,5.2vw,3.6rem); font-weight:400;line-height:1.1;letter-spacing:-.02em; margin-bottom:1rem; } .t-detail-title em{font-style:italic;color:var(--sass-magenta)} .t-detail-date{ font-size:.9rem;color:var(--text-muted);margin-bottom:1.75rem; padding-bottom:1.25rem;border-bottom:1px solid var(--border-subtle); display:inline-block;padding-right:3rem; } .t-detail-date-link{ display:inline-flex; align-items:center; gap:.45rem; color:var(--sass-magenta); font-weight:600; text-decoration:none; transition:color .2s; } .t-detail-date-link:hover{color:var(--sass-magenta-dark)} .t-detail-date-arrow{ display:inline-flex; align-items:center; justify-content:center; width:1.25rem; height:1.25rem; border:1px solid currentColor; border-radius:999px; font-size:.82rem; line-height:1; transform:translateY(1px); } .t-detail-lede{ font-size:1.2rem;line-height:1.65;color:var(--text-dark); max-width:640px; } /* Rarity scrubber block (on dark burgundy variant — experimental) -- */ .t-rarity-block{padding:3rem 3rem} .t-rarity-inner{max-width:780px;margin:0 auto} .t-rarity-label{ font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:rgba(253,248,243,0.55);margin-bottom:1.25rem; } .t-band-intro{ margin-bottom:2rem; max-width:720px; } .t-band-eyebrow{ color:#e4a2c3; font-size:.8rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.65rem; } .t-band-headline{ font-family:var(--font-display); color:var(--sass-cream); font-size:clamp(1.4rem,3.1vw,2.25rem); font-weight:500; line-height:1.08; letter-spacing:-.02em; margin:0 0 .8rem; } .t-band-copy{ color:rgba(253,248,243,0.88); font-size:.98rem; line-height:1.65; margin:0; max-width:620px; } .t-rarity-year{ font-family:var(--font-display);font-size:2rem;font-weight:500; color:var(--sass-cream);margin-bottom:.25rem;line-height:1; } .t-rarity-year-suffix{font-size:.95rem;color:rgba(253,248,243,0.8);font-family:var(--font-body);font-weight:400;margin-left:.4rem} .t-rarity-caption{ font-size:.95rem;color:rgba(253,248,243,0.8);line-height:1.6; margin-top:.75rem;min-height:2.6rem; } /* The scrubber SVG — on the bright burgundy bg, active bands use cream to pop, not more magenta */ .t-scrubber{width:100%;height:56px;display:block;touch-action:none;user-select:none} .t-scrubber-mini{height:24px;pointer-events:none} .t-scrubber-track{fill:rgba(253,248,243,0.2)} .t-scrubber-band{fill:rgba(253,248,243,0.25)} .t-scrubber-band-current{fill:var(--sass-cream);opacity:.95} .t-scrubber-tick{stroke:rgba(253,248,243,0.5);stroke-width:1;opacity:.6} .t-scrubber-ticklabel{font-family:var(--font-body);font-size:10px;fill:rgba(253,248,243,0.7)} .t-scrubber-thumb{fill:var(--sass-cream);stroke:var(--sass-magenta-dark);stroke-width:2;cursor:grab} /* Mini scrubbers on the index live on cream cards — restore the original subdued opacities via an explicit override scoped to mini + cream contexts */ .t-card-scrubber .t-scrubber-track, .t-featured-scrubber-wrap .t-scrubber-track{fill:var(--border-subtle)} .t-card-scrubber .t-scrubber-band, .t-featured-scrubber-wrap .t-scrubber-band{fill:var(--sass-magenta);opacity:.18} .t-card-scrubber .t-scrubber-band-current, .t-featured-scrubber-wrap .t-scrubber-band-current{fill:var(--sass-magenta);opacity:.45} .t-scrubber-thumb:active{cursor:grabbing} .t-scrubber-control{width:100%;margin-top:.5rem} /* Hidden range input powers the SVG thumb */ .t-scrubber-input{ -webkit-appearance:none;appearance:none;background:transparent; position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer; } .t-scrubber-wrap{position:relative} /* DOB form ------------------------------------------------- */ .t-form-block{ padding:3rem 1.5rem 2rem; scroll-margin-top:2rem; border-top:1px solid var(--border-subtle); } .t-form-inner{ max-width:560px;margin:0 auto; background:white; border:1px solid var(--border-subtle); border-radius:20px; padding:2.5rem; position:relative;overflow:hidden; } /* The SASS hero moment: magenta top-bar gradient on detail hero card */ .t-form-inner::before{ content:'';position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--sass-magenta),var(--sass-magenta-light)); } .t-form-header{text-align:center;margin-bottom:1.75rem} .t-form-header-title{ font-family:var(--font-display);font-size:1.35rem; font-weight:500;margin-bottom:.35rem; } .t-form-header-title em{font-style:italic;color:var(--sass-magenta)} .t-form-header-sub{font-size:.9rem;color:var(--text-muted)} .t-group{margin-bottom:1.25rem} .t-label{ display:flex;align-items:center;gap:.4rem; font-size:.7rem;font-weight:600;text-transform:uppercase; letter-spacing:.08em;color:var(--text-muted);margin-bottom:.4rem; } .t-optional{font-size:.6rem;font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-muted);opacity:.7} .t-input{ width:100%;padding:.875rem 1rem; background:var(--sass-cream); border:1px solid var(--border-subtle); border-radius:8px; font-family:var(--font-body);font-size:.95rem;color:var(--text-dark); transition:all .3s; } .t-input:focus{outline:none;border-color:var(--sass-magenta);box-shadow:0 0 0 3px rgba(155,25,96,0.1)} .t-input::placeholder{color:var(--text-muted);opacity:.6} .t-place-autocomplete-shell{ width:100%; min-height:50px; } .t-place-autocomplete{ display:block; width:100%; } .t-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem} .t-date-dropdowns{display:grid;grid-template-columns:1fr .7fr .85fr;gap:.5rem} .t-select{ appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem; } .t-hint{font-size:.7rem;color:var(--text-muted);margin-top:.3rem} .t-submit{ width:100%;padding:1rem;margin-top:.5rem; background:var(--sass-magenta);color:white; font-family:var(--font-body);font-size:1rem;font-weight:600; border:none;border-radius:10px;cursor:pointer;transition:all .3s; } .t-submit:hover{background:var(--sass-magenta-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(155,25,96,0.3)} .t-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none} .t-micro{text-align:center;margin-top:.6rem;font-size:.75rem;color:var(--text-muted)} .t-error{ margin-top:1rem;padding:.875rem 1rem; background:rgba(197,48,48,0.08);border:1px solid rgba(197,48,48,0.2); border-radius:8px;font-size:.85rem;color:#c53030; } /* ---------- Lookup link + "Welcome back" modal ----------------------------- Ported verbatim from templates/index.html (see lookup-modal, modal-overlay, modal-title, modal-close, btn-primary) with a t- prefix so nothing collides. */ .t-form-footer{text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-subtle)} .t-form-footer p{font-size:.85rem;color:var(--text-muted);margin-bottom:.25rem} .t-form-footer a{color:var(--sass-magenta);text-decoration:none;font-weight:500} .t-form-footer a:hover{text-decoration:underline} .t-modal-overlay{ position:fixed;inset:0; background:rgba(0,0,0,0.5); display:flex;align-items:center;justify-content:center; z-index:200;opacity:0;pointer-events:none;transition:opacity .3s; } .t-modal-overlay.visible{opacity:1;pointer-events:auto} .t-modal{ background:white;border-radius:16px;padding:2rem; max-width:520px;width:90%;max-height:90vh;overflow-y:auto; transform:translateY(20px);transition:transform .3s; } .t-modal-overlay.visible .t-modal{transform:translateY(0)} .t-modal-header{text-align:center;margin-bottom:1.5rem} .t-modal-title{font-family:var(--font-display);font-size:1.35rem;font-weight:400;margin-bottom:.4rem} .t-modal-title em{font-style:italic;color:var(--sass-magenta)} .t-modal-subtitle{color:var(--text-muted);font-size:.85rem} .t-modal-close{ display:block;width:100%;margin-top:.65rem;padding:.65rem; background:none;border:none;color:var(--text-muted);font-size:.8rem;cursor:pointer; } .t-modal-close:hover{color:var(--text-dark)} .t-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:1rem 1.5rem;font-family:var(--font-body);font-size:.95rem;font-weight:600; border:none;border-radius:8px;cursor:pointer;transition:all .3s; } .t-btn-primary{width:100%;background:var(--sass-magenta);color:var(--sass-cream)} .t-btn-primary:hover{background:var(--sass-magenta-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(155,25,96,0.3)} .t-btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none} /* Reading block (live personalization) -------------------- */ .t-reading-block{ padding:3rem 1.5rem 4rem; display:none; border-top:1px solid var(--border-subtle); } .t-reading-block.visible{display:block} .t-reading-inner{max-width:700px;margin:0 auto} .t-reading-eyebrow{ font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--sass-magenta);margin-bottom:1rem; } .t-reading-headline{ font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.1rem); font-weight:500;line-height:1.25;margin-bottom:1.75rem; } .t-reading-headline em{font-style:italic;color:var(--sass-magenta)} .t-reading-p{font-size:1.05rem;line-height:1.75;color:var(--text-dark);margin-bottom:1.25rem} .t-reading-summary{ max-width:680px; font-size:1rem; line-height:1.7; color:var(--text-muted); margin:0 0 1.5rem; } .t-reading-dual-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; } .t-reading-sign-card{ background:white; border:1px solid var(--border-subtle); border-radius:16px; padding:1.4rem 1.5rem .4rem; } .t-reading-sign-label{ color:var(--sass-magenta); font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.55rem; } .t-reading-sign-title{ font-family:var(--font-display); font-size:1.35rem; font-weight:500; line-height:1.2; margin-bottom:1rem; } .t-reading-bridge{ padding:1rem 1.2rem; background:var(--sass-cream-dark); border-left:4px solid var(--sass-magenta); border-radius:12px; color:var(--text-dark); line-height:1.7; margin-bottom:1.25rem; } .t-insider{ margin-top:2.5rem;padding:2rem; background:var(--sass-cream-dark); border-radius:16px; border:1px solid var(--border-subtle); position:relative; } .t-insider-label{ font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--sass-magenta);margin-bottom:.75rem; } .t-insider-teaser{ font-size:1rem;line-height:1.7;color:var(--text-dark); filter:blur(4px);user-select:none;pointer-events:none; margin-bottom:1.25rem; } .t-insider-cta{ display:inline-flex;align-items:center;gap:.5rem; padding:.75rem 1.5rem;background:var(--sass-magenta);color:white; font-family:var(--font-body);font-size:.9rem;font-weight:600; border:none;border-radius:8px;text-decoration:none;cursor:pointer;transition:all .3s; } .t-insider-cta:hover{background:var(--sass-magenta-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(155,25,96,0.3)} /* Chat CTA — primary dominant button that converts to Chat trial (main business goal). */ .t-chat-cta-primary{ display:block;width:100%;box-sizing:border-box; padding:1.1rem 1.75rem; background:var(--sass-magenta);color:white; font-family:var(--font-body);font-size:1.05rem;font-weight:600; border:none;border-radius:10px; text-align:center;text-decoration:none; transition:all .3s;margin-top:.25rem; } .t-chat-cta-primary:hover{ background:var(--sass-magenta-dark);transform:translateY(-1px); box-shadow:0 4px 14px rgba(155,25,96,0.3); } /* Venus retrograde astronomy module -------------------------------------- */ .t-venus-astro{ background:var(--sass-magenta); padding:3rem 3rem 3.5rem; border-top:1px solid rgba(255,255,255,0.15); border-bottom:1px solid rgba(255,255,255,0.15); } .t-venus-inner{max-width:1040px;margin:0 auto} .t-venus-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.9fr); gap:2.2rem; align-items:start; } .t-venus-phase-panel{ padding:1.45rem; border:1px solid rgba(253,248,243,0.22); border-radius:16px; background:rgba(122,10,70,0.48); } .t-venus-phase-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .t-venus-phase-rail{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.55rem; min-width:720px; } .t-venus-phase-button{ min-height:5.7rem; padding:.7rem .75rem; border:1px solid rgba(253,248,243,0.18); border-radius:10px; background:rgba(253,248,243,0.08); color:rgba(253,248,243,0.72); font-family:var(--font-body); text-align:left; cursor:pointer; transition:background .2s,border-color .2s,color .2s; } .t-venus-phase-button strong{ display:block; color:var(--sass-cream); font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } .t-venus-phase-button span{ display:block; margin-top:.35rem; font-family:var(--font-display); font-size:1rem; line-height:1.15; } .t-venus-phase-button em{ display:inline-flex; margin-top:.55rem; padding:.2rem .45rem; border-radius:999px; background:rgba(253,248,243,0.14); color:rgba(253,248,243,0.78); font-style:normal; font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .t-venus-phase-button.is-active{ background:var(--sass-cream); color:var(--sass-magenta); border-color:var(--sass-cream); } .t-venus-phase-button.is-active strong{color:var(--sass-magenta)} .t-venus-phase-button.is-active em{ background:rgba(155,25,96,0.08); color:var(--sass-magenta); } .t-venus-sign-strip{ display:grid; grid-template-columns:2fr 2fr 2fr; min-width:720px; margin-top:.9rem; overflow:hidden; border-radius:999px; border:1px solid rgba(253,248,243,0.18); } .t-venus-sign-segment{ padding:.5rem .7rem; font-size:.66rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; text-align:center; } .t-venus-sign-segment.is-scorpio{background:#5d0f43;color:var(--sass-cream)} .t-venus-sign-segment.is-libra{background:#d38dad;color:#4b1237} .t-venus-phase-copy{margin-top:1.25rem} .t-venus-phase-copy-label{ color:var(--sass-magenta-light); font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.45rem; } .t-venus-phase-copy-title{ font-family:var(--font-display); font-size:1.45rem; font-weight:500; color:var(--sass-cream); line-height:1.15; margin-bottom:.7rem; } .t-venus-phase-copy-text{ color:rgba(253,248,243,0.86); line-height:1.7; } .t-venus-orrery{ position:relative; min-height:24rem; border-radius:18px; background:radial-gradient(circle at 50% 50%, rgba(253,248,243,0.08), rgba(122,10,70,0.08) 58%, transparent 72%); } .t-venus-zodiac-arc{ position:absolute; left:50%; transform:translateX(-50%); width:74%; display:flex; justify-content:center; } .t-venus-zodiac-arc span{ padding:.3rem .6rem; border-radius:999px; font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } .t-venus-zodiac-arc-top{top:.4rem} .t-venus-zodiac-arc-bottom{bottom:.5rem} .t-venus-zodiac-arc-scorpio span{background:#5d0f43;color:var(--sass-cream)} .t-venus-zodiac-arc-libra{top:50%;transform:translate(-50%,-50%)} .t-venus-zodiac-arc-libra span{background:#d38dad;color:#4b1237} .t-venus-orbit{ position:absolute; left:50%; top:50%; border:1px solid rgba(253,248,243,0.32); border-radius:50%; transform:translate(-50%,-50%); } .t-venus-orbit-earth{width:83%;aspect-ratio:1} .t-venus-orbit-venus{width:46%;aspect-ratio:1} .t-venus-sun{ position:absolute; left:50%; top:50%; width:5.2rem; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background: radial-gradient(circle at 34% 28%,#fff7d8 0 14%,transparent 15%), radial-gradient(circle at 42% 44%,#ffd268 0 34%,#e0a149 72%,#a05a41 100%); box-shadow:0 0 34px rgba(255,205,97,.45); } .t-venus-retro-loop{ position:absolute; left:50%; top:23%; width:68%; transform:translateX(-50%); } .t-venus-retro-loop svg{display:block;width:100%;height:auto} .t-venus-retro-loop path{ fill:none; stroke:var(--sass-cream); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:5 10; opacity:.82; animation:tMercuryDash 8s linear infinite; } .t-venus-sightline{ position:absolute; left:31%; top:67%; width:45%; height:1px; transform:rotate(-29deg); transform-origin:left center; background:linear-gradient(90deg,rgba(253,248,243,.75),transparent); } .t-venus-planet{ position:absolute; left:50%; top:50%; border-radius:50%; } .t-venus-planet::after{ content:attr(data-label); position:absolute; left:50%; top:calc(100% + .45rem); transform:translateX(-50%); color:rgba(253,248,243,0.75); font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .t-venus-planet-earth{ width:1.8rem; aspect-ratio:1; background: radial-gradient(circle at 60% 28%,#f7fffb 0 10%,transparent 11%), radial-gradient(circle at 40% 42%,#78d8e6 0 28%,#3a8fa0 60%,#27606d 100%); box-shadow:0 0 22px rgba(120,216,230,.45); transform:translate(-190%,135%); } .t-venus-planet-venus{ width:1.25rem; aspect-ratio:1; background: radial-gradient(circle at 34% 28%,#fff4d2 0 14%,transparent 15%), radial-gradient(circle at 42% 44%,#ddb17a 0 32%,#b2766f 72%,#71465b 100%); box-shadow:0 0 18px rgba(244,211,130,.38); animation:tVenusRetroLoop 11s ease-in-out infinite; } @keyframes tVenusRetroLoop{ 0%{transform:translate(118%, -72%)} 30%{transform:translate(76%, -120%)} 52%{transform:translate(18%, -86%)} 72%{transform:translate(58%, -116%)} 100%{transform:translate(118%, -72%)} } /* Eclipse module ---------------------------------------------------------- */ .t-eclipse-block{ background:var(--sass-magenta); padding:3rem 3rem 3.5rem; border-top:1px solid rgba(255,255,255,0.15); border-bottom:1px solid rgba(255,255,255,0.15); } .t-eclipse-inner{max-width:1100px;margin:0 auto} .t-eclipse-visual{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.75fr); gap:1.6rem; align-items:center; } .t-eclipse-panel{ padding:1.35rem 1.35rem 1.6rem; border:1px solid rgba(253,248,243,0.16); border-radius:18px; background:rgba(93,7,56,0.42); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); } .t-eclipse-label{ color:var(--sass-magenta-light); font-size:.72rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; } .t-eclipse-title{ margin:.65rem 0 .8rem; font-family:var(--font-display); font-size:1.6rem; font-weight:500; color:var(--sass-cream); line-height:1.12; letter-spacing:-.02em; } .t-eclipse-copy{ max-width:760px; color:rgba(253,248,243,0.86); font-size:.98rem; line-height:1.7; } .t-eclipse-timeline{ position:relative; margin-top:1.15rem; padding-top:1.65rem; } .t-eclipse-timeline::before{ content:""; position:absolute; left:0; right:0; top:3.2rem; height:4px; border-radius:999px; background:rgba(253,248,243,0.18); } .t-eclipse-timeline::after{ content:""; position:absolute; left:0; right:0; top:2.8rem; height:16px; border-radius:999px; background:linear-gradient(90deg, rgba(242,188,85,.18), rgba(151,201,229,.18)); opacity:.75; } .t-eclipse-timeline-points{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; } .t-eclipse-point strong{ display:block; color:var(--sass-cream); font-size:.94rem; } .t-eclipse-point span{ display:block; color:rgba(253,248,243,0.74); font-size:.84rem; } .t-eclipse-dot{ width:22px; height:22px; margin-bottom:1.8rem; border-radius:50%; border:3px solid var(--sass-cream); background:#f2bc55; box-shadow:0 0 0 1px rgba(253,248,243,0.35); } .t-eclipse-dot.is-cool{background:#97c9e5} .t-eclipse-dot.is-active{ width:26px; height:26px; box-shadow:0 0 18px rgba(242,188,85,.45), 0 0 0 1px rgba(253,248,243,.45); } .t-eclipse-animation-shell{position:relative} .t-eclipse-animation{ position:relative; min-height:23rem; border-radius:24px; background: radial-gradient(circle at 50% 50%, rgba(253,248,243,.08), rgba(122,10,70,.02) 58%, transparent 72%), radial-gradient(circle at 50% 50%, rgba(255,255,255,.04), transparent 70%); } .t-eclipse-halo{ position:absolute; left:50%; top:50%; width:13rem; height:13rem; transform:translate(-50%, -50%); border-radius:50%; background:radial-gradient(circle, rgba(253,248,243,.95) 0%, rgba(253,248,243,.72) 34%, rgba(253,248,243,.18) 62%, transparent 72%); filter:blur(1px); } .t-eclipse-primary, .t-eclipse-occluder{ position:absolute; left:50%; top:50%; border-radius:50%; } .t-eclipse-primary{ width:8.75rem; height:8.75rem; transform:translate(-50%, -50%); background: radial-gradient(circle at 34% 28%, #fff7d8 0 12%, transparent 13%), radial-gradient(circle at 42% 44%, #ffd268 0 34%, #e0a149 72%, #a05a41 100%); box-shadow:0 0 34px rgba(255,205,97,.45); } .t-eclipse-occluder{ width:8.625rem; height:8.625rem; transform:translate(-35%, -50%); background:radial-gradient(circle at 40% 35%, #4a4a52 0 32%, #23232a 70%, #0f1015 100%); box-shadow:inset -10px 0 20px rgba(255,255,255,.05); transition:transform .28s ease; } .t-eclipse-caption{ position:absolute; left:50%; bottom:4.8rem; width:min(20rem,92%); transform:translateX(-50%); text-align:center; color:rgba(253,248,243,0.8); font-size:.88rem; } .t-eclipse-caption strong{ display:block; margin-bottom:.35rem; color:var(--sass-cream); font-size:.72rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; } .t-eclipse-controls{ position:absolute; left:50%; bottom:1.1rem; width:min(20rem,90%); transform:translateX(-50%); } .t-eclipse-scrubber{ width:100%; -webkit-appearance:none; appearance:none; height:4px; border-radius:999px; background:rgba(253,248,243,0.22); outline:none; } .t-eclipse-scrubber::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--sass-cream); border:2px solid var(--sass-magenta); box-shadow:0 0 0 1px rgba(253,248,243,0.3); cursor:pointer; } .t-eclipse-scrubber::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--sass-cream); border:2px solid var(--sass-magenta); box-shadow:0 0 0 1px rgba(253,248,243,0.3); cursor:pointer; } .t-eclipse-phase-labels{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.5rem; margin-top:.6rem; color:rgba(253,248,243,0.68); font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; text-align:center; } .t-eclipse-phase-labels span.is-active{color:var(--sass-cream)} /* Stub block (for unreleased transits) -------------------- */ .t-stub-block{ padding:3rem 1.5rem 4rem; border-top:1px solid var(--border-subtle); } .t-stub-inner{ max-width:560px;margin:0 auto; background:white;border:1px solid var(--border-subtle);border-radius:20px; padding:2.5rem;text-align:center; } .t-stub-icon{font-size:2rem;margin-bottom:.75rem} .t-stub-title{ font-family:var(--font-display);font-size:1.4rem; font-weight:500;margin-bottom:.75rem; } .t-stub-desc{font-size:.95rem;color:var(--text-muted);line-height:1.65;margin-bottom:1.5rem} .t-stub-form{display:flex;gap:.5rem;max-width:420px;margin:0 auto} .t-stub-form .t-input{flex:1;margin:0} .t-stub-form .t-submit{width:auto;padding:.875rem 1.5rem;margin:0} .t-stub-success{ margin-top:1rem;padding:.75rem 1rem; background:rgba(47,133,90,0.08);border:1px solid rgba(47,133,90,0.2); border-radius:8px;font-size:.85rem;color:#2f855a;display:none; } .t-stub-success.visible{display:block} /* Footer CTA on detail page -------------------------------- */ .t-footer-cta{padding:4rem 1.5rem;text-align:center;border-top:1px solid var(--border-subtle)} .t-footer-cta-title{ font-family:var(--font-display);font-size:1.5rem; font-weight:500;margin-bottom:.5rem; } .t-footer-cta-sub{font-size:.95rem;color:var(--text-muted);margin-bottom:1.5rem} .t-footer-cta-btn{ display:inline-flex;align-items:center;gap:.5rem; padding:.875rem 1.75rem;background:transparent;color:var(--sass-magenta); font-family:var(--font-body);font-size:.95rem;font-weight:600; border:1px solid var(--sass-magenta);border-radius:8px; text-decoration:none;cursor:pointer;transition:all .3s; } .t-footer-cta-btn:hover{background:var(--sass-magenta);color:white} /* SASS Footer (matches index.html footer exactly) ---------- */ .t-sass-footer{background:#1a1a1a;padding:3rem} .t-sass-footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center} .t-sass-footer-logo{margin-bottom:1.5rem} .t-sass-footer-logo img{height:32px;filter:brightness(0) invert(1);opacity:.9} .t-sass-footer-links{display:flex;gap:2rem;margin-bottom:1.5rem} .t-sass-footer-links a{font-size:.9rem;color:rgba(255,255,255,0.7);text-decoration:none;transition:color .2s} .t-sass-footer-links a:hover{color:white} .t-sass-footer-bottom{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,251,230,0.15)} .t-sass-footer-legal{display:flex;gap:1.5rem} .t-sass-footer-legal a{font-family:var(--font-body);font-size:.8rem;color:rgba(255,251,230,0.5);text-decoration:none;transition:color .3s ease} .t-sass-footer-legal a:hover{color:rgba(255,251,230,0.8)} .t-sass-footer-copy{margin:0;padding:0;border:none;font-size:.8rem;color:rgba(255,251,230,0.5)} /* Responsive ---------------------------------------------- */ @media(max-width:1024px){ .t-index-hero,.t-featured-section,.t-next-section,.t-longarc-section,.t-detail-hero{padding-left:2rem;padding-right:2rem} .t-featured-card{padding:2.25rem} .t-next-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .t-rarity-block{padding:2.5rem 2rem} .t-venus-astro{padding:2.5rem 2rem 3rem} .t-venus-grid{grid-template-columns:1fr} .t-venus-orrery{min-height:18rem;max-width:28rem;margin:0 auto} .t-eclipse-block{padding:2.5rem 2rem 3rem} .t-eclipse-visual{grid-template-columns:1fr} .t-longarc-item{grid-template-columns:7rem 1fr auto;gap:1rem} } @media(max-width:768px){ .t-pageheader{padding:1.5rem 1.5rem 0} .t-index-hero,.t-featured-section,.t-next-section,.t-longarc-section,.t-detail-hero{padding-left:1.5rem;padding-right:1.5rem} .t-index-hero{grid-template-columns:1fr;gap:2rem;padding-top:4rem} .t-index-title{font-size:clamp(2.8rem,16vw,4rem)} .t-section-head{display:block} .t-section-sub{margin-top:.6rem} .t-featured-card{padding:1.75rem} .t-featured-card{grid-template-columns:1fr} .t-next-grid{grid-template-columns:1fr} .t-longarc-list{grid-template-columns:1fr} .t-longarc-item{grid-template-columns:1fr;gap:.5rem} .t-longarc-arrow{display:none} .t-reading-dual-grid{grid-template-columns:1fr} .t-venus-astro{padding:2rem 1.25rem 2.5rem} .t-venus-phase-panel{padding:1.1rem} .t-venus-phase-rail,.t-venus-sign-strip{min-width:680px} .t-venus-orrery{min-height:15rem} .t-eclipse-block{padding:2rem 1.25rem 2.5rem} .t-eclipse-timeline-points{grid-template-columns:1fr 1fr} .t-eclipse-timeline::before,.t-eclipse-timeline::after{display:none} .t-eclipse-animation{min-height:20rem} .t-form-inner{padding:1.75rem} .t-row{grid-template-columns:1fr} .t-rarity-block{padding:2rem 1.5rem} .t-section{padding:3rem 1.5rem} .t-stub-form{flex-direction:column} .t-stub-form .t-submit{width:100%} .t-sass-footer{padding:2rem 1.5rem} .t-sass-footer-bottom{flex-direction:column;gap:1rem} .t-sass-footer-legal{flex-wrap:wrap;justify-content:center} } /* ========================================================================== Lunar Cycle interactive (sibling to rarity_scrubber for lunar transits). Scoped entirely under .t-lunar-*. Uses canonical SASS brand magenta as the band background — matches the rarity scrubber, matches the sasstrology.com "Insider-only content" band, matches the lunar mockup. ========================================================================== */ /* Kicker + supermoon badge row (in hero) */ .t-detail-kicker-row{ display:flex;align-items:center;gap:.75rem;flex-wrap:wrap; margin-bottom:1.25rem; } .t-detail-kicker-row .t-detail-kicker{margin-bottom:0} .t-detail-badge{ display:inline-block; font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; padding:.3rem .7rem; background:var(--sass-magenta);color:white; border-radius:100px; line-height:1; } /* Band — full-bleed burgundy, same as rarity block */ .t-lunar-block{ background:var(--sass-magenta); padding:3rem 3rem 3.5rem; min-height:600px; border-top:1px solid rgba(255,255,255,0.15); border-bottom:1px solid rgba(255,255,255,0.15); } .t-lunar-inner{max-width:820px;margin:0 auto} /* Tabs */ .t-lunar-tabs{ display:grid;grid-template-columns:1fr 1fr;gap:.75rem; background:rgba(0,0,0,0.18); border-radius:12px; padding:.4rem; margin-bottom:2rem; } .t-lunar-tab{ background:transparent; border:1px solid transparent; border-radius:8px; padding:.75rem 1rem; font-family:var(--font-body); color:rgba(253,248,243,0.7); cursor:pointer; transition:all .2s; display:flex;flex-direction:column;gap:.25rem;align-items:center; text-align:center; } .t-lunar-tab:hover{color:var(--sass-cream);background:rgba(0,0,0,0.15)} .t-lunar-tab-active{ background:rgba(0,0,0,0.25); border-color:var(--sass-magenta-light); color:var(--sass-cream); } .t-lunar-tab-label{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase} .t-lunar-tab-range{font-size:.8rem;font-family:var(--font-display);font-style:italic;opacity:.8} /* View (one visible at a time, crossfade-ish) */ .t-lunar-view{display:none;opacity:0;transform:translateY(4px);transition:opacity .25s ease, transform .25s ease} .t-lunar-view-active{display:block;opacity:1;transform:translateY(0)} /* Intro above each timeline */ .t-lunar-intro{margin-bottom:1.25rem} .t-lunar-intro-eyebrow{ font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--sass-magenta-light);margin-bottom:.4rem; } .t-lunar-intro-text{ font-size:.95rem;line-height:1.6; color:rgba(253,248,243,0.85); } /* Timeline SVG */ .t-lunar-timeline-wrap{margin:1rem 0} .t-lunar-timeline{width:100%;height:auto;display:block} .t-lunar-connector{ stroke:rgba(253,248,243,0.35); stroke-width:1; stroke-dasharray:4 6; fill:none; } /* Node groups — cursor and focus */ .t-lunar-node{cursor:pointer;outline:none} .t-lunar-node:focus-visible .t-lunar-dot{stroke-width:3} /* Node hit target — invisible but increases clickable area */ .t-lunar-hit{fill:transparent;pointer-events:auto} /* Node dots — three styles per mockup */ .t-lunar-dot{transition:transform .2s, filter .2s;transform-origin:center} .t-lunar-node:hover .t-lunar-dot{filter:brightness(1.1)} .t-lunar-dot-seed{fill:var(--sass-magenta-light);stroke:white;stroke-width:2} .t-lunar-dot-mid{fill:rgba(0,0,0,0.2);stroke:rgba(253,248,243,0.75);stroke-width:2} .t-lunar-dot-inner{fill:rgba(253,248,243,0.55);pointer-events:none} .t-lunar-dot-peak{fill:var(--sass-cream);stroke:var(--sass-magenta-light);stroke-width:2} /* Current node gets a soft glow ring (set at render time) */ .t-lunar-node-current .t-lunar-dot{ filter:drop-shadow(0 0 8px rgba(253,248,243,0.45)); } /* Selected = clicked-by-user (replaces the initial current highlight once user interacts) */ .t-lunar-node-selected .t-lunar-dot{ filter:drop-shadow(0 0 10px rgba(253,248,243,0.6)); } /* Node text labels — sizes bumped for readability. The SVG viewBox is 1000×180 and scales to the container width, so these font-sizes ARE in the viewBox's coordinate space (not absolute px) — on a ~900px-wide band they render close to the numbers shown. */ .t-lunar-phase-label{ font-family:var(--font-body); font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; fill:rgba(253,248,243,0.7); } .t-lunar-verb{ font-family:var(--font-body); font-size:17px;font-weight:600; fill:var(--sass-magenta-light); } .t-lunar-date{ font-family:var(--font-body); font-size:17px;font-weight:600; fill:var(--sass-cream); } .t-lunar-context{ font-family:var(--font-body); font-size:14px; fill:rgba(253,248,243,0.75); } /* Reading block inside the band */ .t-lunar-reading{ margin-top:1.75rem; background:rgba(0,0,0,0.2); border:1px solid rgba(253,248,243,0.15); border-radius:12px; padding:1.5rem 1.75rem; min-height:180px; } .t-lunar-reading-eyebrow{ font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--sass-magenta-light);margin-bottom:.6rem; } .t-lunar-reading-title{ font-family:var(--font-display); font-size:15px;font-weight:500; color:var(--sass-cream); margin-bottom:.6rem; line-height:1.3; } .t-lunar-reading-text{ font-size:.95rem;line-height:1.65; color:rgba(253,248,243,0.85); margin:0; } /* Responsive */ @media(max-width:768px){ .t-lunar-block{padding:2rem 1.25rem 2.5rem;min-height:520px} .t-lunar-tabs{grid-template-columns:1fr;gap:.5rem} .t-lunar-tab-range{font-size:.75rem} .t-lunar-reading{padding:1.25rem;min-height:200px} /* On narrow phones the SVG width shrinks — the viewBox preserveAspectRatio scales coords proportionally. We keep the base font-sizes (no override) so text stays legible. If the SVG overflows we scroll, we don't shrink fonts. */ .t-lunar-timeline-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .t-lunar-timeline{min-width:520px} } /* ========================================================================== Mercury retrograde astronomy module. Scoped under .t-mercury-* and used by the mercury-rx-may detail page. ========================================================================== */ .t-mercury-astro{ background:var(--sass-magenta); color:var(--sass-cream); padding:clamp(2.5rem,5vw,4.5rem) 3rem; border-top:1px solid rgba(255,255,255,0.15); border-bottom:1px solid rgba(255,255,255,0.15); } .t-mercury-inner{max-width:940px;margin:0 auto} .t-mercury-grid{ display:grid; grid-template-columns:minmax(22rem,1.08fr) minmax(18rem,.92fr); gap:clamp(1.5rem,4vw,3.2rem); align-items:center; } .t-mercury-label{ color:rgba(253,248,243,0.56); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; } .t-mercury-copy > .t-mercury-label{ color:#e4a2c3; font-size:.8rem; font-weight:800; letter-spacing:.18em; } .t-mercury-copy h2{ font-family:var(--font-display); margin:.85rem 0 .8rem; font-size:clamp(1.4rem,3.1vw,2.25rem); font-weight:500; line-height:1.08; letter-spacing:-.02em; } .t-mercury-copy p, .t-mercury-phase-copy p{ margin:0; color:rgba(253,248,243,0.88); line-height:1.65; } .t-mercury-orrery{ position:relative; width:min(100%,25rem); aspect-ratio:1; margin:0 auto; } .t-mercury-orbit{ position:absolute; inset:var(--inset); border:1px solid rgba(253,248,243,0.28); border-radius:50%; } .t-mercury-orbit::before{ content:""; position:absolute; inset:-1px; border:1px solid transparent; border-top-color:rgba(253,248,243,0.54); border-radius:inherit; transform:rotate(-18deg); } .t-mercury-orbit-earth{--inset:7%} .t-mercury-orbit-mercury{--inset:29%} .t-mercury-sun, .t-mercury-planet{ position:absolute; left:50%; top:50%; border-radius:50%; } .t-mercury-sun{ width:4.8rem; aspect-ratio:1; transform:translate(-50%,-50%); background: radial-gradient(circle at 35% 30%,#fff9d6 0 11%,transparent 12%), radial-gradient(circle at 47% 44%,#f6da8c 0 25%,#dc9c4f 60%,#b75c55 100%); box-shadow:0 0 48px rgba(244,211,130,.75); } .t-mercury-planet{ transform: translate(-50%,-50%) rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle))); } .t-mercury-planet::after{ content:attr(data-label); position:absolute; left:50%; top:calc(100% + .5rem); transform:translateX(-50%); color:rgba(253,248,243,0.72); font-size:.61rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; } .t-mercury-planet-earth{ --angle:136deg; --radius:clamp(8rem,18vw,10.8rem); width:1.8rem; aspect-ratio:1; background: radial-gradient(circle at 60% 28%,#f7fffb 0 10%,transparent 11%), radial-gradient(circle at 40% 42%,#78d8e6 0 28%,#3a8fa0 60%,#27606d 100%); box-shadow:0 0 22px rgba(120,216,230,.45); } .t-mercury-planet-mercury{ --angle:var(--mercury-angle); --radius:clamp(4.8rem,11vw,6.8rem); width:1.2rem; aspect-ratio:1; background: radial-gradient(circle at 34% 28%,#fff4d2 0 14%,transparent 15%), radial-gradient(circle at 42% 44%,#cfa16f 0 32%,#89645c 72%,#594049 100%); box-shadow:0 0 18px rgba(244,211,130,.38); animation:tMercuryRetroLoop 9s ease-in-out infinite; } .t-mercury-retro-loop{ position:absolute; left:50%; top:16%; width:49%; transform:translateX(-50%) rotate(-7deg); } .t-mercury-retro-loop path{ fill:none; stroke:var(--sass-cream); stroke-width:3.8; stroke-linecap:round; stroke-dasharray:5 10; opacity:.82; animation:tMercuryDash 8s linear infinite; } .t-mercury-sightline{ position:absolute; left:29%; top:67%; width:49%; height:1px; transform:rotate(-33deg); transform-origin:left center; background:linear-gradient(90deg,rgba(253,248,243,.75),transparent); } .t-mercury-phase-panel{ margin-top:2.5rem; padding:1.45rem; border:1px solid rgba(253,248,243,0.22); border-radius:12px; background:rgba(122,10,70,0.48); } .t-mercury-phase-rail{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; margin:0 0 1.2rem; } .t-mercury-phase-button{ min-height:4.1rem; padding:.65rem .75rem; border:1px solid rgba(253,248,243,0.18); border-radius:8px; background:rgba(253,248,243,0.08); color:rgba(253,248,243,0.72); font-family:var(--font-body); text-align:left; cursor:pointer; transition:background .2s,border-color .2s,color .2s; } .t-mercury-phase-button strong{ display:block; color:var(--sass-cream); font-size:.73rem; letter-spacing:.12em; text-transform:uppercase; } .t-mercury-phase-button span{ display:block; margin-top:.25rem; font-family:var(--font-display); font-size:1rem; } .t-mercury-phase-button.is-active{ background:var(--sass-cream); color:var(--sass-magenta); border-color:var(--sass-cream); } .t-mercury-phase-button.is-active strong{color:var(--sass-magenta)} .t-mercury-phase-copy{min-height:6.2rem} @keyframes tMercuryRetroLoop{ 0%{--mercury-angle:-18deg} 40%{--mercury-angle:42deg} 62%{--mercury-angle:4deg} 100%{--mercury-angle:-18deg} } @keyframes tMercuryDash{ to{stroke-dashoffset:-120} } @media(max-width:820px){ .t-mercury-grid{grid-template-columns:1fr} .t-mercury-orrery{width:min(100%,21rem);order:-1} .t-mercury-phase-rail{grid-template-columns:1fr 1fr} } @media(max-width:520px){ .t-mercury-astro{padding-left:1rem;padding-right:1rem} .t-mercury-phase-rail{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .t-mercury-planet-mercury, .t-mercury-retro-loop path, .t-venus-planet-venus, .t-venus-retro-loop path{ animation-duration:.001ms !important; animation-iteration-count:1 !important; } } /* ========================================================================== Retrograde Timeline interactive (sibling to lunar_cycle for retrograde transits). Degree axis with three directional arrows and four clickable stations. Styled in SASS magenta + cream like the rarity and lunar blocks. Scoped entirely under .t-retro-*. ========================================================================== */ .t-retro-block{ background:var(--sass-magenta); padding:3rem 3rem 3.5rem; min-height:560px; border-top:1px solid rgba(255,255,255,0.15); border-bottom:1px solid rgba(255,255,255,0.15); } .t-retro-inner{max-width:940px;margin:0 auto} /* Intro above timeline */ .t-retro-intro{margin-bottom:1.5rem} .t-retro-intro-eyebrow{ font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--sass-magenta-light);margin-bottom:.4rem; } .t-retro-intro-text{ font-size:.95rem;line-height:1.6; color:rgba(253,248,243,0.85); } /* Timeline SVG */ .t-retro-timeline-wrap{margin:1.5rem 0 .5rem} .t-retro-timeline{width:100%;height:auto;display:block;overflow:visible} /* Sign label at left end of axis */ .t-retro-sign-label{ font-family:var(--font-display); font-size:18px;font-style:italic; fill:var(--sass-cream); } /* Main degree axis */ .t-retro-axis{ stroke:rgba(253,248,243,0.5); stroke-width:1.5; } .t-retro-tick{ stroke:rgba(253,248,243,0.35); stroke-width:1; } .t-retro-tick-label{ font-family:var(--font-body); font-size:10px; fill:rgba(253,248,243,0.55); } /* Arrows: forward cream, reverse cream-muted. Arrow heads share the same fills. */ .t-retro-arrow{ fill:none; stroke-width:2.5; opacity:.95; } .t-retro-arrow-fwd{stroke:var(--sass-cream)} .t-retro-arrow-rev{stroke:var(--sass-magenta-light);stroke-dasharray:6 5} .t-retro-arrow-head{fill:var(--sass-cream)} .t-retro-arrow-head-rev{fill:var(--sass-magenta-light)} /* Faint vertical connectors at each end, tying the three horizontal tracks together */ .t-retro-connector{ stroke:rgba(253,248,243,0.22); stroke-width:1; stroke-dasharray:2 4; } /* Nodes */ .t-retro-node{cursor:pointer;outline:none} .t-retro-node:focus-visible .t-retro-dot{stroke-width:3} .t-retro-hit{fill:transparent;pointer-events:auto} .t-retro-dot{ transition:transform .2s, filter .2s; transform-origin:center; } .t-retro-node:hover .t-retro-dot{filter:brightness(1.15)} .t-retro-dot-shadow{ fill:rgba(0,0,0,0.2); stroke:var(--sass-cream); stroke-width:2; } .t-retro-dot-station{ fill:var(--sass-cream); stroke:var(--sass-magenta-light); stroke-width:2.5; } /* Currently-active phase on load (server-computed from `now` vs rx_*_utc) */ .t-retro-node-active .t-retro-dot{ filter:drop-shadow(0 0 10px rgba(253,248,243,0.7)); } .t-retro-node-active .t-retro-node-label{ fill:var(--sass-cream); font-weight:700; } .t-retro-node-active .t-retro-node-date{ font-weight:700; } /* Selected (clicked-by-user) — overrides the active glow once the user interacts */ .t-retro-node-selected .t-retro-dot{ filter:drop-shadow(0 0 12px rgba(253,248,243,0.85)); } .t-retro-node-selected .t-retro-node-label{ fill:var(--sass-cream); font-weight:700; } /* Node labels — sit to the LEFT of the left-side nodes and to the RIGHT of right-side nodes, so they never overlap the axis or the arrow tracks. */ .t-retro-node-label{ font-family:var(--font-body); font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; fill:rgba(253,248,243,0.8); } .t-retro-node-date{ font-family:var(--font-body); font-size:14px;font-weight:600; fill:var(--sass-cream); } /* Degree callouts under the axis at start/end */ .t-retro-deg-end{ font-family:var(--font-body); font-size:12px;font-weight:600; fill:rgba(253,248,243,0.8); } /* Reading block inside the band */ .t-retro-reading{ margin-top:1.5rem; background:rgba(0,0,0,0.2); border:1px solid rgba(253,248,243,0.15); border-radius:12px; padding:1.5rem 1.75rem; min-height:180px; } .t-retro-reading-eyebrow{ font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--sass-magenta-light);margin-bottom:.6rem; } .t-retro-reading-title{ font-family:var(--font-display); font-size:15px;font-weight:500; color:var(--sass-cream); margin-bottom:.6rem; line-height:1.3; } .t-retro-reading-text{ font-size:.95rem;line-height:1.65; color:rgba(253,248,243,0.85); margin:0; } /* Responsive */ @media(max-width:768px){ .t-retro-block{padding:2rem 1.25rem 2.5rem;min-height:520px} .t-retro-reading{padding:1.25rem;min-height:200px} .t-retro-timeline-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .t-retro-timeline{min-width:640px} }