; use descendant selectors, not compound-class selectors */ .gj-practice-page .practice-page { display: block !important; min-height: calc(100vh - 64px); overflow-x: clip; } .gj-practice-page .fl-reader-sidebar { position: fixed; top: 64px; left: 0; bottom: 0; z-index: 40; } .gj-practice-page .fl-reader-backdrop { position: fixed; z-index: 35; } .gj-practice-page .fl-reader-toc-toggle { position: fixed; z-index: 45; } .gj-practice-page .fl-reader-main { position: relative; z-index: 1; } .gj-practice-page .first-light-wrap:first-of-type { margin-bottom: 0; } .gj-practice-page .fl-reader-pane { flex: 0 1 auto; padding: 0 0 48px; } .gj-practice-page .practice-page--briefing .session-steps-host, .gj-practice-page .practice-page--briefing .session-steps-host[hidden] { display: none !important; } .gj-practice-page .fl-reader-pane:focus { outline: none; } /* Briefing lives in the reader pane — not a fixed overlay */ .gj-practice-page .session-briefing-host { max-width: calc(var(--fl-read-w) + 80px); margin: 0 auto; padding: 28px 40px 48px; box-sizing: border-box; } .gj-practice-page .session-briefing-host .session-briefing-inner { max-width: none; margin: 0; padding: 0; } .gj-practice-page .session-briefing-host .session-briefing-brand { display: none; } .gj-practice-page .session-briefing-host .session-briefing-title { font-family: var(--fl-sans, 'Archivo', system-ui, sans-serif); font-size: clamp(1.85rem, 4vw, 2.5rem); letter-spacing: -0.02em; } .gj-practice-page .session-briefing-host .session-briefing-kicker { color: var(--fl-teal, #2a9db5); letter-spacing: 0.14em; } .gj-practice-page .session-briefing-host .session-briefing-mission-wrap { border-color: rgba(240, 196, 91, 0.35); background: rgba(18, 34, 66, 0.55); } .gj-practice-page .session-briefing-host .session-briefing-mission-wrap h2 { color: var(--fl-gold, #f0c45b); } .gj-practice-page .session-briefing-steps-sec { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--fl-border-soft, rgba(255, 255, 255, 0.08)); } .gj-practice-page .session-briefing-steps-sec .fl-reader-drills-head .t { font-family: var(--fl-sans, 'Archivo', system-ui, sans-serif); } .gj-practice-page .session-briefing-host .session-briefing-actions { margin-top: 24px; padding-top: 8px; } .gj-practice-page .session-briefing-host .btn-primary { background: linear-gradient(180deg, #38dcd2 0%, #119aa3 100%); color: #082220; border-radius: 8px; text-transform: none; letter-spacing: 0.02em; font-weight: 700; } .gj-practice-page .session-briefing-host .btn-outline { border-radius: 8px; text-transform: none; letter-spacing: 0.02em; } /* Step player inside reader pane */ .gj-practice-page .session-steps-host { max-width: 1200px; margin: 0 auto; padding: 16px 24px 32px; box-sizing: border-box; } .gj-practice-page .session-steps-host .session-container { width: 100%; max-width: none; margin: 0; padding: 0; } .gj-practice-page .practice-page--briefing .session-steps-host { display: none !important; } .gj-practice-page .practice-page--steps .session-briefing-host { display: none !important; } .gj-practice-page .practice-topbar { display: none !important; } .gj-practice-page .focus-column, .gj-practice-page .context-column { background: linear-gradient(165deg, rgba(18, 34, 66, 0.72), rgba(10, 25, 47, 0.55)); border: 1px solid rgba(148, 163, 184, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .gj-practice-page .instruction-heading { font-family: var(--fl-sans, 'Archivo', system-ui, sans-serif); color: var(--fl-ink, #f7fbff); } .gj-practice-page .step-header { color: var(--fl-teal, #2a9db5); } @media (max-width: 900px) { .gj-practice-page .session-briefing-host { padding: 20px 18px 40px; } .gj-practice-page .session-steps-host { padding: 12px 14px 28px; } } /* Journey cover/practice pages — sidebar and reader bar must sit below the 64px nav */ .gj-cover-page .fl-reader-sidebar { position: fixed; top: 64px; left: 0; bottom: 0; z-index: 40; } .gj-cover-page .fl-reader-bar, .gj-practice-page .fl-reader-bar { position: sticky; top: 64px; } /* Journey cover (rhythm-path.html) */ .gj-cover-page .fl-reader-pane { padding-bottom: 48px; } .gj-cover-page .gj-cover-inner { max-width: calc(var(--fl-read-w) + 120px); margin: 0 auto; padding: 28px 40px 48px; box-sizing: border-box; } .gj-cover-page .rhythm-path-hero-kicker, .gj-cover-page .fl-section-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fl-teal, #2a9db5); margin: 0 0 10px; } .gj-cover-page .rhythm-path-hero h1, .gj-cover-page .rhythm-path-section h2 { font-family: var(--fl-sans, 'Archivo', system-ui, sans-serif); font-weight: 700; color: var(--fl-ink, #f7fbff); letter-spacing: -0.02em; } .gj-cover-page .rhythm-path-hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 12px; } .gj-cover-page .rhythm-path-hero-tagline, .gj-cover-page .rhythm-path-prose, .gj-cover-page .rhythm-path-how-lede { color: var(--fl-body, #b9c8de); line-height: 1.65; } .gj-cover-page .rhythm-path-how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 18px 0 28px; } .gj-cover-page .rhythm-path-how-col { padding: 16px 18px; border-radius: 12px; } .gj-cover-page .rhythm-path-section { margin: 28px 0; } .gj-cover-page .rhythm-path-section h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 0 0 14px; } .gj-cover-page .gj-cover-sessions { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--fl-border-soft, rgba(255, 255, 255, 0.08)); } .gj-cover-page .gj-cover-sessions-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; } .gj-cover-page .gj-cover-sessions-head .t { font-family: var(--fl-sans, 'Archivo', system-ui, sans-serif); font-weight: 700; font-size: 1.1rem; color: var(--fl-ink, #f7fbff); } .gj-cover-page .gj-cover-sessions-head .m { font-size: 0.82rem; color: var(--fl-muted); } .gj-cover-page .fl-ex-list .fl-ex { cursor: pointer; } .gj-cover-page .fl-ex--coming-soon { opacity: 0.45; pointer-events: none; } .gj-cover-page .rhythm-path-details { margin-top: 28px; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 12px; background: rgba(18, 34, 66, 0.45); } .gj-cover-page .rhythm-path-details-summary { padding: 14px 16px; cursor: pointer; color: var(--fl-body-warm, #c8d4e8); } .gj-cover-page .rhythm-path-details-body { padding: 0 16px 16px; } .gj-cover-page .rhythm-path-glossary { list-style: none; margin: 0; padding: 0; } .gj-cover-page .rhythm-path-glossary dt { color: var(--fl-gold, #f0c45b); font-weight: 700; margin-top: 12px; } .gj-cover-page .rhythm-path-glossary dd { margin: 4px 0 0; color: var(--fl-body, #b9c8de); line-height: 1.55; } @media (max-width: 900px) { .gj-cover-page .gj-cover-inner { padding: 20px 18px 40px; } } a.fl-reader-toc-chaprow { text-decoration: none; color: inherit; }