/* ============================================================================= EMERALD FLOW One continuous emerald backdrop + drifting golden cosmos behind a whole page, so every section (green OR white) blends into a single design that flows down into the footer. No section seams, no clashing greens, no flat white bands. Opt a page in: 1) include this stylesheet AND js/footer-cosmos.js 2) add class "em-flow" to 3) place this immediately after : 4) add the page's body selector to the neutraliser blocks below ============================================================================= */ /* The single fixed backdrop. Darkens toward the bottom so it meets the footer. */ .em-stage { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #1b3623 0%, #163020 50%, #122619 100%); } .em-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { .em-stage canvas { display: none; } } /* Page ground + main go transparent so the one backdrop shows through. */ body.em-flow { background: #0f1d15 !important; } body.em-flow main { background: transparent !important; } /* -------------------------------------------------------------------------- GOLDSMITHS / DESIGNERS PAGE (body.page-designers) -------------------------------------------------------------------------- */ body.page-designers.em-flow .jd-edit, body.page-designers.em-flow .jd-craft, body.page-designers.em-flow .jd-team, body.page-designers.em-flow .tm-faq, body.page-designers.em-flow .cta-ribbon { background: transparent !important; } /* white bands -> light type on the emerald */ body.page-designers.em-flow .jd-craft { border-top-color: rgba(232,193,106,0.14) !important; } body.page-designers.em-flow .jd-craft-h { color: #F6F1E6 !important; } body.page-designers.em-flow .jd-craft-h em { color: #E8C16A !important; } body.page-designers.em-flow .jd-craft-sub { color: rgba(245,248,240,0.78) !important; } body.page-designers.em-flow .jd-edit-h { color: #F6F1E6 !important; } body.page-designers.em-flow .jd-edit-h em { color: #E8C16A !important; } body.page-designers.em-flow .jd-edit-sub { color: rgba(245,248,240,0.76) !important; } body.page-designers.em-flow .jd-edit-eyebrow { color: #E8C16A !important; } /* -------------------------------------------------------------------------- OUR TEAM PAGE (body.page-team) — shares .tm-faq and other emerald bands -------------------------------------------------------------------------- */ body.page-team.em-flow .tm-credentials, body.page-team.em-flow .tm-team-v2, body.page-team.em-flow .tm-faq, body.page-team.em-flow .tm-faq-cta { background: transparent !important; } /* Team section header sits on the dark starscape — recolor for legibility. */ body.page-team.em-flow .tm-team-v2 .tm-eyebrow { color: #E8C16A !important; } body.page-team.em-flow .tm-team-v2 .tm-section-h { color: #F6F1E6 !important; } body.page-team.em-flow .tm-team-v2 .tm-section-h em { color: #E8C16A !important; } body.page-team.em-flow .tm-team-v2 .tm-section-sub { color: rgba(245, 248, 240, 0.82) !important; } body.page-team.em-flow .tm-team-v2 .tm-rule { background: linear-gradient(90deg, #E8C16A 0%, rgba(232, 193, 106, 0) 100%) !important; } /* -------------------------------------------------------------------------- JOURNAL PAGE (body.page-journal) — emerald grid + CTA bands -------------------------------------------------------------------------- */ body.page-journal.em-flow .jr-marquee, body.page-journal.em-flow .jr-filter, body.page-journal.em-flow .jr-grid-wrap, body.page-journal.em-flow .jr-cta-band { background: transparent !important; }