/* ═══════════════════════════════════════════════════════════════════ phase-base.css — MireonSpero™ First Impressions™ Base layer for ALL phase pages (Phase I through Phase X). PURPOSE: This file is the exclusive stylesheet foundation for phase pages. It declares the --ms- token set that phase01.css (and all subsequent phase stylesheets) depend on, overrides any global.css interference, and activates the fi-reveal IntersectionObserver behavior via CSS defaults so content is never invisible on load. LOAD ORDER in each phase HTML: 1. global.css (site-wide resets + base tokens) 2. layout2-inner.css (header + footer — unchanged, safe) 3. phase-base.css (THIS FILE — phase token layer + reveal fix) 4. phase0X.css (phase-specific styles) DO NOT modify layout2-inner.css. This file is the correct insertion point for phase-exclusive concerns. ═══════════════════════════════════════════════════════════════════ */ /* ── SECTION 1: CORE DESIGN TOKENS ───────────────────────────────── These are the --ms- prefixed variables that phase01.css and all subsequent phase CSS files reference. They must be declared before any phase stylesheet is parsed. layout2-inner.css uses --ms2- prefix exclusively — no conflict. ────────────────────────────────────────────────────────────────── */ :root { /* Brand palette */ --ms-navy: #1d3557; --ms-gold: #e9c46a; --ms-teal: #2a9d8f; --ms-ivory: #f5f0e8; --ms-cream: #faf7f2; --ms-ink: #1a1510; --ms-ash: #7a7268; --ms-mist: #e5e0d8; --ms-parchment: #ede8df; --ms-sand: #c8bfa8; /* Typography scale — phase body */ --ms-body-font: 'Libre Baskerville', Georgia, serif; --ms-display-font: 'Playfair Display', 'EB Garamond', Georgia, serif; --ms-serif-font: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; --ms-label-font: 'DM Sans', sans-serif; /* Spacing rhythm */ --ms-section-gap: clamp(4rem, 8vw, 7rem); --ms-chapter-gap: clamp(5rem, 10vw, 9rem); } /* ── SECTION 2: REVEAL VISIBILITY FIX ────────────────────────────── THE PRIMARY CONTENT-INVISIBLE BUG. phase01.css sets .fi-reveal { opacity: 0; transform: translateY(28px) } and .fi-reveal.fi-visible { opacity: 1; transform: none }. If the IntersectionObserver JS (which adds .fi-visible) is absent or fires before DOM is ready, every .fi-reveal block stays invisible. This rule provides a safe fallback: if .fi-visible is never added, content degrades to fully visible rather than invisible. The JS observer below supersedes this for browsers that support it. DO NOT remove this block. It is the insurance layer. ────────────────────────────────────────────────────────────────── */ .fi-reveal { opacity: 1 !important; transform: none !important; transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } /* When JS adds .fi-visible, the transition runs cleanly from the JS-set initial state. When JS is absent, content stays visible. */ .fi-reveal.fi-visible { opacity: 1 !important; transform: translateY(0) !important; } /* Reduced motion: skip animation entirely */ @media (prefers-reduced-motion: reduce) { .fi-reveal, .fi-reveal.fi-visible { transition: none !important; opacity: 1 !important; transform: none !important; } } /* ── SECTION 3: JS-DRIVEN REVEAL RESET ───────────────────────────── When the IntersectionObserver JS IS present and fires correctly, it adds .fi-js-ready to . This re-enables the animation so elements start hidden and animate in on scroll. Without JS, .fi-js-ready is never added and Section 2 keeps everything visible. ────────────────────────────────────────────────────────────────── */ body.fi-js-ready .fi-reveal { opacity: 0 !important; transform: translateY(28px) !important; } body.fi-js-ready .fi-reveal.fi-visible { opacity: 1 !important; transform: translateY(0) !important; } body.fi-js-ready .fi-reveal.fi-hero-content { /* Hero animates via its own @keyframes — do not suppress */ opacity: 1 !important; transform: none !important; } /* ── SECTION 4: PHASE PAGE BASE LAYOUT ───────────────────────────── Resets and base rules that every phase page requires, independent of phase-specific stylesheets. ────────────────────────────────────────────────────────────────── */ /* Body base for phase pages */ body { background: var(--fi-cream, #f7f3ec); color: var(--fi-ink, #1a1510); } /* Prevent horizontal overflow on section backgrounds */ .fi-main { overflow-x: hidden; position: relative; } /* Chapter background image pattern — required for --fi-bg CSS var */ .fi-chapter { background-image: var(--fi-bg, none); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Ensure overlay stacking does not collapse content */ .fi-chapter-overlay { pointer-events: none; position: absolute; inset: 0; z-index: 1; } .fi-chapter-inner { position: relative; z-index: 2; } /* Continuum background image pattern */ .fi-continuum-bg { position: absolute; inset: 0; z-index: 0; } .fi-continuum-inner { position: relative; z-index: 2; } /* Hero stacking */ .fi-hero { position: relative; overflow: hidden; } .fi-hero-bg { position: absolute; inset: 0; z-index: 0; } .fi-hero-content { position: relative; z-index: 2; } /* ── SECTION 5: ENROLLMENT BUTTON REACHABILITY ────────────────────── Enrollment CTA buttons inside .fi-enrollment-panel use --ms-navy and --ms-gold. Confirm these resolve correctly in the phase context. ────────────────────────────────────────────────────────────────── */ .fi-final-btn { background: var(--ms-gold); color: var(--ms-navy); } .fi-enroll-btn--legacy { background: var(--ms-gold); color: var(--ms-navy); } /* ── SECTION 6: FALLBACK TYPOGRAPHY ──────────────────────────────── If Libre Baskerville or EB Garamond do not load (not imported in template head by default), body text falls back gracefully. Add these fonts to the Google Fonts import in each phase HTML, or they will render in Georgia — acceptable but not intended. Required additions to the import string: family=Libre+Baskerville:ital,wght@0,400;0,700;1,400 family=EB+Garamond:ital,wght@0,400;0,500;1,400 ────────────────────────────────────────────────────────────────── */ .fi-chapter-text p, .fi-inst-block p, .fi-edition-copy, .fi-instrument-copy, .fi-closing-body, .fi-continuum-body, .fi-enrollment-lead, .fi-enrollment-reason, .fi-window-content p { font-family: 'Libre Baskerville', 'EB Garamond', Georgia, serif; } /* ── SECTION 7: ENROLLMENT BUTTON VISITED STATE FIX ──────────────── global.css sets a:visited { color: var(--ms-navy) } which turns Origin and Prestige enroll buttons invisible after the user visits the checkout link and returns. Legacy and final CTA buttons are unaffected because their gold background makes navy text readable. These overrides apply across all ten phase pages. ────────────────────────────────────────────────────────────────── */ .fi-enroll-btn--origin:visited { color: rgba(247, 243, 236, 0.75); } .fi-enroll-btn--origin:hover, .fi-enroll-btn--origin:visited:hover { color: var(--fi-cream); } .fi-enroll-btn--prestige:visited { color: rgba(42, 157, 143, 0.85); } .fi-enroll-btn--prestige:hover, .fi-enroll-btn--prestige:visited:hover { color: var(--ms-teal); } .fi-enroll-btn--legacy:visited { color: var(--ms-navy); } .fi-final-btn:visited { color: var(--ms-navy); }