/* =========================================================================== Faith365 — IN-APP EMBED MODE (legal pages only) Activated by ?app=1, ?app=dark or ?app=light. The inline script adds .app-embed (plus .app-dark / .app-light) to before first paint, so the in-app sheet never flashes the marketing chrome. This file was added when the faith365-deploy design was pulled into the repo: the previous embed rules targeted the old markup (#nav, .page-hero, footer), which this design does not have. Everything here is scoped to .app-embed, so the public pages are completely unaffected. Loaded last, after the design's own stylesheets, and kept in its own file so none of the design's CSS had to be edited. =========================================================================== */ /* --------------------------------------------------------------------------- 1. Strip the site chrome — the sheet shows the document, nothing else. --------------------------------------------------------------------------- */ .app-embed .navbar, .app-embed .legal-scrim, .app-embed .legal__head, .app-embed .legal__rule, .app-embed .stat, .app-embed .foot, .app-embed .cursor { display: none !important; } /* The custom cursor has no place in a webview — make sure the real one is back even if the cursor module has already run. */ .app-embed, .app-embed * { cursor: auto !important; } /* The navbar carried the top offset; without it the copy needs its own. */ .app-embed .legal { padding-top: var(--sp-6) !important; padding-bottom: var(--sp-10) !important; min-height: 0 !important; } /* The page-transition wrapper must not hold the document at opacity 0 if the bundle's transition module never gets to run inside the sheet. */ .app-embed .page-t { opacity: 1 !important; transform: none !important; } /* --------------------------------------------------------------------------- 2. Theming. The design is fully token-driven — the legal stylesheet has exactly one hardcoded colour, and that element is hidden above — so dark mode is done by re-pointing the tokens rather than overriding component rules. ?app=1 follows the device appearance ?app=dark forces dark ?app=light forces light (the :not(.app-light) guard is what makes this stick on a dark phone) --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { html.app-embed:not(.app-light) { --bg: #0b0b0f; --bg-2: #14141b; --bg-3: #101016; --text: #f3f4f6; --text-muted: #b9b3ac; --secondary: #14141b; --hair-soft: rgba(255, 255, 255, 0.09); --hair-card: rgba(255, 255, 255, 0.14); --hero-bg: #0b0b0f; --hero-ink: #f3f4f6; --hero-ink-mut: rgba(243, 244, 246, 0.66); --hero-card: rgba(255, 255, 255, 0.05); --hero-hair: rgba(255, 255, 255, 0.16); --hero-grad-a: #0b0b0f; --hero-grad-b: #101016; color-scheme: dark; } } html.app-embed.app-dark { --bg: #0b0b0f; --bg-2: #14141b; --bg-3: #101016; --text: #f3f4f6; --text-muted: #b9b3ac; --secondary: #14141b; --hair-soft: rgba(255, 255, 255, 0.09); --hair-card: rgba(255, 255, 255, 0.14); --hero-bg: #0b0b0f; --hero-ink: #f3f4f6; --hero-ink-mut: rgba(243, 244, 246, 0.66); --hero-card: rgba(255, 255, 255, 0.05); --hero-hair: rgba(255, 255, 255, 0.16); --hero-grad-a: #0b0b0f; --hero-grad-b: #101016; color-scheme: dark; } /* The page background is painted on from --bg, but the design also paints a fixed stand-in layer; both need to follow the token in the sheet. */ html.app-embed.app-dark body, html.app-embed.app-dark .page-bg { background: var(--bg) !important; } @media (prefers-color-scheme: dark) { html.app-embed:not(.app-light) body, html.app-embed:not(.app-light) .page-bg { background: var(--bg) !important; } } /* Links inside the copy: brand orange is legible on both grounds, but the underline needs to lift off a dark ground. */ html.app-embed.app-dark .legal__col a { color: #ff8447; } @media (prefers-color-scheme: dark) { html.app-embed:not(.app-light) .legal__col a { color: #ff8447; } } /* --------------------------------------------------------------------------- 3. The sheet is narrow and scrolls inside a native container — give the clause grid a single column below the design's own breakpoint so the numerals never squeeze the copy. --------------------------------------------------------------------------- */ @media (max-width: 640px) { .app-embed .legal__clause { grid-template-columns: 1fr !important; } .app-embed .legal__num { margin-bottom: var(--sp-2) !important; } }