:root { --site-wallpaper-glass-blur: 18px; --site-wallpaper-overlay: rgba(7, 11, 22, 0.00); --site-wallpaper-glass: rgba(8, 13, 23, 0.72); --site-wallpaper-glass-dark: rgba(8, 13, 23, 0.72); --site-wallpaper-glass-transparency: 28%; --site-wallpaper-mobile-size: 65%; --site-wallpaper-active: 1; } /* A dark overlay uses a dark reading palette so headings remain clear outside cards. */ html.wallpaper-live-preview.wallpaper-live-dark-surface body { --bg: #0D1416; --bg2: #141E20; --w: var(--site-wallpaper-live-glass); --p-pale: #241E34; --grn-bg: #12352D; --red-bg: #402326; --yel-bg: #3B2D14; --t: #F3F0E7; --t1: #FFFFFF; --t2: #D4D1C6; --t3: #B6C0B8; --b: #2A3938; --b1: #2A3938; --b2: #223231; } /* ── The wallpaper layer ──────────────────────────────────────────────── Every wallpaper is painted on this one element. It is position:fixed with inset:0, so its box is EXACTLY the viewport: "cover" is measured against the screen and can never be measured against the height of a long scrolling page. It sits at z-index:-1, i.e. above the page canvas but underneath all content and underneath the body::after dimming overlay, so the stacking order every page already relies on is unchanged. */ #madrasaWallpaperLayer, body::before, body.has-custom-bg::before, html.has-custom-bg body.has-custom-bg::before { content: '' !important; display: block !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; z-index: -1 !important; pointer-events: none !important; background-color: #111827 !important; background-repeat: no-repeat !important; background-attachment: scroll !important; /* Let the browser use its best downscaler so a large HD photo stays sharp. */ image-rendering: auto !important; transform: translateZ(0); } /* Live Preview is local to the Admin Settings page and never writes until Save is pressed. */ html.wallpaper-live-preview #madrasaWallpaperLayer, html.wallpaper-live-preview body.wallpaper-live-preview::before { background-image: var(--site-wallpaper-live-image) !important; background-size: var(--site-wallpaper-live-size, cover) !important; background-position: var(--site-wallpaper-live-position, center center) !important; } html.wallpaper-live-preview body.wallpaper-live-preview { background-color: transparent !important; background-image: none !important; } html.wallpaper-live-preview body.wallpaper-live-preview .bg-mesh { display: none !important; } html.wallpaper-live-preview body.wallpaper-live-preview::after { content: '' !important; display: block !important; position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: var(--site-wallpaper-live-overlay) !important; background-size: auto !important; opacity: 1 !important; } html.wallpaper-live-preview body.wallpaper-live-preview .card, html.wallpaper-live-preview body.wallpaper-live-preview .glass, html.wallpaper-live-preview body.wallpaper-live-preview .glass-crystal, html.wallpaper-live-preview body.wallpaper-live-preview .login-card, html.wallpaper-live-preview body.wallpaper-live-preview .matte-panel, html.wallpaper-live-preview body.wallpaper-live-preview .tracker-card, html.wallpaper-live-preview body.wallpaper-live-preview .tracker-summary-card, html.wallpaper-live-preview body.wallpaper-live-preview .fee-row, html.wallpaper-live-preview body.wallpaper-live-preview .fees-summary-card, html.wallpaper-live-preview body.wallpaper-live-preview .dashboard-app-button, html.wallpaper-live-preview body.wallpaper-live-preview .page-hero, html.wallpaper-live-preview body.wallpaper-live-preview .welcome-hero, html.wallpaper-live-preview body.wallpaper-live-preview .nav, html.wallpaper-live-preview body.wallpaper-live-preview .footer { background-color: var(--site-wallpaper-live-glass) !important; backdrop-filter: blur(var(--site-wallpaper-live-blur)) saturate(135%) !important; -webkit-backdrop-filter: blur(var(--site-wallpaper-live-blur)) saturate(135%) !important; } html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .card, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .glass, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .glass-crystal, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .login-card, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .matte-panel, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .tracker-card, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .tracker-summary-card, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .fee-row, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .fees-summary-card, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .dashboard-app-button, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .page-hero, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .welcome-hero, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .nav, html.wallpaper-live-preview body.wallpaper-live-preview.dark-theme .footer { background-color: var(--site-wallpaper-live-glass-dark) !important; } html.has-custom-bg body.has-custom-bg, body.has-custom-bg, body { --bg: #0D1416; --bg2: #141E20; --w: var(--site-wallpaper-glass); --p-pale: #241E34; --grn-bg: #12352D; --red-bg: #402326; --yel-bg: #3B2D14; --t: #F3F0E7; --t1: #FFFFFF; --t2: #D4D1C6; --t3: #B6C0B8; --b: #2A3938; --b1: #2A3938; --b2: #223231; } /* Login-specific text keeps its contrast over a deliberately dark wallpaper. */ html.has-custom-bg body.has-custom-bg .intro h1, body.has-custom-bg .intro h1, body .intro h1 { color: #FFFFFF !important; text-shadow: 0 8px 26px rgba(0,0,0,.42); } html.has-custom-bg body.has-custom-bg .intro > p, html.has-custom-bg body.has-custom-bg .benefit b, body.has-custom-bg .intro > p, body.has-custom-bg .benefit b, body .intro > p, body .benefit b { color: rgba(255,255,255,.82) !important; } html.has-custom-bg body.has-custom-bg .benefit, body.has-custom-bg .benefit, body .benefit { background: rgba(8,13,23,.28) !important; border-color: rgba(255,255,255,.25) !important; } /* The page canvas carries the base colour; the picture itself lives on the fixed layer above it, so the body no longer paints a background at all. */ html, html.has-custom-bg { background-color: #111827 !important; } html.has-custom-bg body.has-custom-bg, body.has-custom-bg { background-color: transparent !important; background-image: none !important; } #madrasaWallpaperLayer, body::before { background-image: url("https://thehifzeutopia.com/370_WALLPAPER_FROSTED_MINIMAL.svg") !important; background-size: cover !important; background-position: 50% 50% !important; } html.has-custom-bg body.has-custom-bg::after, body.has-custom-bg::after { content: '' !important; display: block !important; position: fixed !important; inset: 0 !important; /* Pinned to the viewport: with only inset:0 this layer measured narrower than the screen and left one side lit differently. */ left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; /* -- ROUND 14: LANDING-PAGE LEFT DARK BAND -- ROOT CAUSE FIX ------- `body::after` is shared property. This wallpaper dimming overlay lives here, but decorative rules in 354_MADRASA_VISUAL_SYSTEM.css (line 281 and again at 767) ALSO target `body.madrasa-public::after` to paint a large calligraphic ayah, and they set GEOMETRY on it: left: 50% !important; right: auto !important; max-width: calc(100% - 1rem); transform: translateX(-50%) rotate(-3deg) !important; Nothing here overrode max-width or transform, so the tinted overlay box inherited them. Instead of a full-screen veil it became a half-shifted, 3-degree-ROTATED slab only `100% - 1rem` wide. Its rotated straight edge is the hard dark band down the left of the landing page -- and because it is a real layer stacked above the wallpaper it also dimmed the CTA button borders and their text. Measured proof at a 444px viewport: computed transform was matrix(0.99863, -0.052336, 0.052336, 0.99863, -214, 0); cos(-3deg) = 0.99863, sin(-3deg) = -0.052336, translateX(-50%) of the 428px box = -214px, and 444 - 1rem = 428. Every number matched exactly. The overlay must be pure viewport-pinned geometry -- no typography and no transform -- so neutralise every property a decorative rule can set. */ max-width: none !important; min-width: 0 !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important; rotate: none !important; translate: none !important; scale: none !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; white-space: normal !important; overflow: hidden !important; color: transparent !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; mask-image: none !important; -webkit-mask-image: none !important; clip-path: none !important; z-index: 0 !important; pointer-events: none !important; background: var(--site-wallpaper-overlay) !important; background-size: auto !important; background-position: 0 0 !important; background-repeat: no-repeat !important; opacity: 1 !important; animation: none !important; } html.has-custom-bg body.has-custom-bg .card, html.has-custom-bg body.has-custom-bg .glass, html.has-custom-bg body.has-custom-bg .glass-crystal, html.has-custom-bg body.has-custom-bg .login-card, html.has-custom-bg body.has-custom-bg .matte-panel, html.has-custom-bg body.has-custom-bg .tracker-card, html.has-custom-bg body.has-custom-bg .tracker-summary-card, html.has-custom-bg body.has-custom-bg .fee-row, html.has-custom-bg body.has-custom-bg .fees-summary-card, html.has-custom-bg body.has-custom-bg .dashboard-app-button, html.has-custom-bg body.has-custom-bg .page-hero, html.has-custom-bg body.has-custom-bg .welcome-hero, html.has-custom-bg body.has-custom-bg .nav, html.has-custom-bg body.has-custom-bg .footer, body.has-custom-bg .card, body.has-custom-bg .glass, body.has-custom-bg .glass-crystal, body.has-custom-bg .login-card, body.has-custom-bg .matte-panel, body.has-custom-bg .tracker-card, body.has-custom-bg .tracker-summary-card, body.has-custom-bg .fee-row, body.has-custom-bg .fees-summary-card, body.has-custom-bg .dashboard-app-button, body.has-custom-bg .page-hero, body.has-custom-bg .welcome-hero, body.has-custom-bg .nav, body.has-custom-bg .footer { background-color: var(--site-wallpaper-glass) !important; backdrop-filter: blur(var(--site-wallpaper-glass-blur)) saturate(135%) !important; -webkit-backdrop-filter: blur(var(--site-wallpaper-glass-blur)) saturate(135%) !important; } html.has-custom-bg body.has-custom-bg.dark-theme .card, html.has-custom-bg body.has-custom-bg.dark-theme .glass, html.has-custom-bg body.has-custom-bg.dark-theme .glass-crystal, html.has-custom-bg body.has-custom-bg.dark-theme .login-card, html.has-custom-bg body.has-custom-bg.dark-theme .matte-panel, html.has-custom-bg body.has-custom-bg.dark-theme .tracker-card, html.has-custom-bg body.has-custom-bg.dark-theme .tracker-summary-card, html.has-custom-bg body.has-custom-bg.dark-theme .fee-row, html.has-custom-bg body.has-custom-bg.dark-theme .fees-summary-card, html.has-custom-bg body.has-custom-bg.dark-theme .dashboard-app-button, html.has-custom-bg body.has-custom-bg.dark-theme .page-hero, html.has-custom-bg body.has-custom-bg.dark-theme .welcome-hero, html.has-custom-bg body.has-custom-bg.dark-theme .nav, html.has-custom-bg body.has-custom-bg.dark-theme .footer, body.has-custom-bg.dark-theme .card, body.has-custom-bg.dark-theme .glass, body.has-custom-bg.dark-theme .glass-crystal, body.has-custom-bg.dark-theme .login-card, body.has-custom-bg.dark-theme .matte-panel, body.has-custom-bg.dark-theme .tracker-card, body.has-custom-bg.dark-theme .tracker-summary-card, body.has-custom-bg.dark-theme .fee-row, body.has-custom-bg.dark-theme .fees-summary-card, body.has-custom-bg.dark-theme .dashboard-app-button, body.has-custom-bg.dark-theme .page-hero, body.has-custom-bg.dark-theme .welcome-hero, body.has-custom-bg.dark-theme .nav, body.has-custom-bg.dark-theme .footer { background-color: var(--site-wallpaper-glass-dark) !important; } html.has-custom-bg body.has-custom-bg .premium-table, html.has-custom-bg body.has-custom-bg .premium-table th, html.has-custom-bg body.has-custom-bg .premium-table td, body.has-custom-bg .premium-table, body.has-custom-bg .premium-table th, body.has-custom-bg .premium-table td { background-color: transparent !important; backdrop-filter: none !important; } /* CSS fallback for public static pages: the dynamic stylesheet is render-blocking, so the global wallpaper appears before JavaScript runs. */ html { background-color: #111827 !important; } body { background-color: transparent !important; background-image: none !important; } body::after { content: '' !important; display: block !important; position: fixed !important; inset: 0 !important; /* Pinned to the viewport: with only inset:0 this layer measured narrower than the screen and left one side lit differently. */ left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; /* -- ROUND 14: LANDING-PAGE LEFT DARK BAND -- ROOT CAUSE FIX ------- `body::after` is shared property. This wallpaper dimming overlay lives here, but decorative rules in 354_MADRASA_VISUAL_SYSTEM.css (line 281 and again at 767) ALSO target `body.madrasa-public::after` to paint a large calligraphic ayah, and they set GEOMETRY on it: left: 50% !important; right: auto !important; max-width: calc(100% - 1rem); transform: translateX(-50%) rotate(-3deg) !important; Nothing here overrode max-width or transform, so the tinted overlay box inherited them. Instead of a full-screen veil it became a half-shifted, 3-degree-ROTATED slab only `100% - 1rem` wide. Its rotated straight edge is the hard dark band down the left of the landing page -- and because it is a real layer stacked above the wallpaper it also dimmed the CTA button borders and their text. Measured proof at a 444px viewport: computed transform was matrix(0.99863, -0.052336, 0.052336, 0.99863, -214, 0); cos(-3deg) = 0.99863, sin(-3deg) = -0.052336, translateX(-50%) of the 428px box = -214px, and 444 - 1rem = 428. Every number matched exactly. The overlay must be pure viewport-pinned geometry -- no typography and no transform -- so neutralise every property a decorative rule can set. */ max-width: none !important; min-width: 0 !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important; rotate: none !important; translate: none !important; scale: none !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; white-space: normal !important; overflow: hidden !important; color: transparent !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; mask-image: none !important; -webkit-mask-image: none !important; clip-path: none !important; z-index: 0 !important; pointer-events: none !important; background: var(--site-wallpaper-overlay) !important; background-size: auto !important; background-position: 0 0 !important; background-repeat: no-repeat !important; opacity: 1 !important; animation: none !important; } body .card, body .glass, body .glass-crystal, body .login-card, body .matte-panel, body .tracker-card, body .tracker-summary-card, body .fee-row, body .fees-summary-card, body .dashboard-app-button, body .page-hero, body .welcome-hero, body .nav, body .footer { background-color: var(--site-wallpaper-glass) !important; backdrop-filter: blur(var(--site-wallpaper-glass-blur)) saturate(135%) !important; -webkit-backdrop-filter: blur(var(--site-wallpaper-glass-blur)) saturate(135%) !important; } body.dark-theme .card, body.dark-theme .glass, body.dark-theme .glass-crystal, body.dark-theme .login-card, body.dark-theme .matte-panel, body.dark-theme .tracker-card, body.dark-theme .tracker-summary-card, body.dark-theme .fee-row, body.dark-theme .fees-summary-card, body.dark-theme .dashboard-app-button, body.dark-theme .page-hero, body.dark-theme .welcome-hero, body.dark-theme .nav, body.dark-theme .footer { background-color: var(--site-wallpaper-glass-dark) !important; } body .premium-table, body .premium-table th, body .premium-table td { background-color: transparent !important; backdrop-filter: none !important; } html.has-custom-bg body.has-custom-bg .bg-mesh, body.has-custom-bg .bg-mesh, body .bg-mesh { display: none !important; } @media (max-width: 700px) { /* Live preview on a phone. Sizes are resolved against the fixed layer, so a percentage means "percent of the SCREEN", not of the whole document. */ html.wallpaper-live-preview #madrasaWallpaperLayer, html.wallpaper-live-preview body.wallpaper-live-preview::before { background-size: var(--site-wallpaper-live-mobile-size, cover) !important; background-position: center center !important; } /* Live preview of a dedicated mobile wallpaper. */ html.wallpaper-live-preview.wallpaper-live-has-mobile #madrasaWallpaperLayer, html.wallpaper-live-preview.wallpaper-live-has-mobile body.wallpaper-live-preview::before { background-image: var(--site-wallpaper-live-mobile-image) !important; background-size: var(--site-wallpaper-live-mobile-fit, cover) !important; background-position: var(--site-wallpaper-live-mobile-position, center center) !important; } /* ── Dedicated mobile wallpaper ────────────────────────────── A separate portrait image uploaded for phones. It is painted on the fixed viewport layer at the fit the admin chose, so what the phone shows is the whole picture framed to the screen -- exactly the file that was uploaded, at its own resolution, never magnified to document height. */ #madrasaWallpaperLayer, body::before { background-image: url("https://thehifzeutopia.com/370_WALLPAPER_FROSTED_MINIMAL.svg") !important; background-size: cover !important; background-position: center center !important; } } /* ═══════════════════════════════════════════════════════════════ ROUND 15 — JS-INDEPENDENT BACKSTOP FOR THE LANDING SEAM. Root cause of the "dark layer on the left of the index page": the decorative ayah in 354_MADRASA_VISUAL_SYSTEM.css also uses body::after. It is a rotated, translated slab (roughly matrix(0.99863,-0.052336,0.052336,0.99863,-214,0)) so it hangs off to one side and paints a dark, soft-edged panel down the left of the hero. Round 14 tried to disarm it with :not(.has-custom-bg), but that class was only ever added by JavaScript, so the slab still painted before hydration and whenever JS did not run. Round 15 emits the class server-side AND adds the reset below, which is not conditional on any class at all. This block lives in the PHP-generated stylesheet, which is never served from a stale browser cache and always loads after 354_MADRASA_VISUAL_SYSTEM.css — so it wins regardless. ═══════════════════════════════════════════════════════════════ */ body.madrasa-public::after, body.madrasa-landing::after, html.has-custom-bg body::after, body.has-custom-bg::after { content: '' !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; text-shadow: none !important; transform: none !important; rotate: none !important; translate: none !important; position: fixed !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-image: none !important; background-repeat: no-repeat !important; background-size: auto !important; mix-blend-mode: normal !important; opacity: 1 !important; pointer-events: none !important; z-index: 0 !important; }