/* Built by Shaiya Che Madunda — Beast of Africa · Copyright (c) Shaiya Che Madunda */ /* ========================================================================== Clear glass layer — ported from the Chanua glass design system. ADDITIVE ONLY. Loaded after main.css and scoped to body.lumoni-clear-glass.has-bg-video, so: - nothing in main.css is edited; - with no background media (no .has-bg-video) the site looks exactly as before; - Customize → Background Video → "Clear glass panels" OFF removes the .lumoni-clear-glass body class and the old look returns instantly. Not touched on purpose: hero (client brief bans glass over the hero), header, booking overlay, quiz, form fields (inputs stay opaque for legibility), photo cards (product / package) and the review slider. ========================================================================== */ :root { --cg-r-xl: 28px; --cg-r-lg: 22px; --cg-r-md: 16px; --cg-r-sm: 12px; --cg-grain: url("data:image/svg+xml;utf8,"); } /* ---------- 1. The panel ---------- */ body.lumoni-clear-glass.has-bg-video :is( .philosophy__intro, .service-card, .contact-card, .review-card, .package-sidebar-card, .staff-spotlight__slide, .cta-band__quote, .cta-band__points, .cta-band__action, .site-footer, .rich-content ) { position: relative; border: 1px solid rgba(255,255,255,.30) !important; border-radius: var(--cg-r-lg) !important; background: var(--cg-grain), linear-gradient(135deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.05) 34%, rgba(255,255,255,.015) 62%, rgba(255,255,255,.09) 100%), rgba(20,15,8,.20) !important; /* audit: .14 gave only 2.4:1 over pure-white footage */ background-blend-mode: soft-light, normal, normal !important; -webkit-backdrop-filter: blur(30px) saturate(175%) brightness(.84) !important; backdrop-filter: blur(30px) saturate(175%) brightness(.84) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.60), inset 1px 0 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(255,255,255,.06), inset 0 0 40px rgba(255,255,255,.04), 0 0 0 1px rgba(0,0,0,.14), 0 26px 60px -22px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.18) !important; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); /* Flip the theme's colour tokens on the pane so every descendant that uses them (titles, body copy, hairlines, gold accents) turns light. main.css is written entirely against these tokens. */ --c-text: #fff; --c-text-light: rgba(255,255,255,.88); --c-line: rgba(255,255,255,.28); --c-gold: #f0d28f; } /* Controls keep the original ink tokens: inputs/buttons carry their own opaque backgrounds and need dark text on them. */ body.lumoni-clear-glass.has-bg-video :is( .philosophy__intro, .service-card, .contact-card, .review-card, .package-sidebar-card, .staff-spotlight__slide, .rich-content ) :is(input, select, textarea, option, .btn) { --c-text: #17160F; --c-text-light: rgba(23,22,15,.58); --c-line: rgba(23,22,15,.16); --c-gold: #A9803B; text-shadow: none; } /* ---------- 2. Per-component geometry ---------- */ /* Home: philosophy intro was a zero-padding slab; now a real pane. */ body.lumoni-clear-glass.has-bg-video .philosophy__intro { padding: clamp(24px, 3vw, 42px); } /* Service cards: photo is inset inside the pane, with soft corners. */ body.lumoni-clear-glass.has-bg-video .service-card { padding: 14px 14px clamp(18px, 2vw, 24px); border-radius: var(--cg-r-lg) !important; overflow: hidden; } body.lumoni-clear-glass.has-bg-video .service-card__media { border-radius: var(--cg-r-md) !important; } body.lumoni-clear-glass.has-bg-video .service-card__title, body.lumoni-clear-glass.has-bg-video .service-card__text, body.lumoni-clear-glass.has-bg-video .service-card .text-link { padding-left: 6px; padding-right: 6px; } /* CTA band: section goes transparent so the footage shows through the three panes. */ body.lumoni-clear-glass.has-bg-video .cta-band { background: transparent; } body.lumoni-clear-glass.has-bg-video .cta-band__quote, body.lumoni-clear-glass.has-bg-video .cta-band__action { padding: clamp(22px, 3vw, 38px); } body.lumoni-clear-glass.has-bg-video .cta-band__points { padding: clamp(22px, 3vw, 38px); /* old hairline side rules are replaced by the pane edge */ border-left: 1px solid rgba(255,255,255,.30); border-right: 1px solid rgba(255,255,255,.30); } /* trust points become tiles (no blur of their own — the pane already blurs) */ body.lumoni-clear-glass.has-bg-video .trust-point { background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px -12px rgba(0,0,0,.5); padding: 16px 18px; } body.lumoni-clear-glass.has-bg-video .cta-band__action .btn--gold { /* solid primary stays solid on glass */ background: #8a6d35; color: #fff; border-color: #8a6d35; } /* Footer: full width, curved free (top) edge. */ body.lumoni-clear-glass.has-bg-video .site-footer { border-radius: var(--cg-r-xl) var(--cg-r-xl) 0 0 !important; border-bottom: 0; } /* Contact / review / sidebar / spotlight panes */ body.lumoni-clear-glass.has-bg-video .contact-card, body.lumoni-clear-glass.has-bg-video .review-card, body.lumoni-clear-glass.has-bg-video .package-sidebar-card { border-radius: var(--cg-r-lg); } body.lumoni-clear-glass.has-bg-video .staff-spotlight__slide { border-radius: var(--cg-r-lg); } body.lumoni-clear-glass.has-bg-video .contact-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.60), inset 1px 0 0 rgba(255,255,255,.24), 0 0 0 1px rgba(0,0,0,.14), 0 30px 64px -22px rgba(0,0,0,.6); } /* Interior-page copy: dense "reading" variant, capped line length. */ body.lumoni-clear-glass.has-bg-video .rich-content { padding: clamp(22px, 3vw, 42px); max-width: min(100%, 860px); background: var(--cg-grain), linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.02) 60%, rgba(255,255,255,.09)), rgba(20,15,8,.24); background-blend-mode: soft-light, normal, normal; -webkit-backdrop-filter: blur(30px) saturate(170%) brightness(.8); backdrop-filter: blur(30px) saturate(170%) brightness(.8); } body.lumoni-clear-glass.has-bg-video .rich-content > :first-child { margin-top: 0; } body.lumoni-clear-glass.has-bg-video .rich-content a { color: #f3d995; text-decoration: underline; } /* No glass on glass: a pane inside a pane goes flat. */ body.lumoni-clear-glass.has-bg-video :is(.rich-content, .site-footer, .cta-band__points, .philosophy__intro) :is(.glass, .service-card, .contact-card, .review-card) { background: none; border: 0; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---------- 3. Soft corners on remaining sharp edges ---------- */ body.lumoni-clear-glass.has-bg-video :is(.product-card, .package-card, .trust-slider, .trust-strip, .service-item__media, .product-card__media) { border-radius: var(--cg-r-lg); overflow: hidden; } /* ---------- 4. Fallbacks ---------- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.lumoni-clear-glass.has-bg-video :is( .philosophy__intro, .service-card, .contact-card, .review-card, .package-sidebar-card, .staff-spotlight__slide, .cta-band__quote, .cta-band__points, .cta-band__action, .site-footer, .rich-content ) { background: rgba(26,20,11,.9); } } /* Phones: lighter blur so many panes scroll smoothly on low-end devices. */ @media (max-width: 700px) { body.lumoni-clear-glass.has-bg-video :is( .philosophy__intro, .service-card, .contact-card, .review-card, .package-sidebar-card, .staff-spotlight__slide, .cta-band__quote, .cta-band__points, .cta-band__action, .site-footer, .rich-content ) { -webkit-backdrop-filter: blur(16px) saturate(165%) brightness(.9); backdrop-filter: blur(16px) saturate(165%) brightness(.9); background-color: rgba(20,15,8,.28); } body.lumoni-clear-glass.has-bg-video .cta-band__points { padding-left: 18px; padding-right: 18px; } } /* Reduced motion: keep the look, drop the blur, raise the tint for legibility. */ @media (prefers-reduced-motion: reduce) { body.lumoni-clear-glass.has-bg-video :is( .philosophy__intro, .service-card, .contact-card, .review-card, .package-sidebar-card, .staff-spotlight__slide, .cta-band__quote, .cta-band__points, .cta-band__action, .site-footer, .rich-content ) { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(20,15,8,.55); } } /* Legibility: the old "soft cream" body copy is too dim on clear glass. */ body.lumoni-clear-glass.has-bg-video :is(.trust-point p, .cta-band__quote cite, .site-footer, .site-footer__tagline) { color: rgba(255,255,255,.88); } body.lumoni-clear-glass.has-bg-video .site-footer__col a { color: #fff; } /* ---------- Audit fixes ---------- */ /* Empty editor content must not leave an empty glass slab. */ body.lumoni-clear-glass.has-bg-video .rich-content:empty { display: none; } /* Contact "WhatsApp" accent card was solid ink; now a gold-tinted glass pane. */ body.lumoni-clear-glass.has-bg-video .contact-card--accent { background-color: rgba(138,109,53,.34); } /* Staff-name hover used the ink token and went dark-on-dark inside a pane. */ body.lumoni-clear-glass.has-bg-video .rich-content .staff-mention { color: #f0d28f; border-bottom-color: #f0d28f; } body.lumoni-clear-glass.has-bg-video .rich-content .staff-mention:hover, body.lumoni-clear-glass.has-bg-video .rich-content .staff-mention:focus { color: #fff; } /* ---------- v1.2: lighter blur on phones (same look, far less GPU work) ---------- */ @media (max-width: 780px) { body.lumoni-clear-glass.has-bg-video :is( .philosophy__intro, .service-card, .contact-card, .review-card, .package-sidebar-card, .staff-spotlight__slide, .cta-band__quote, .cta-band__points, .cta-band__action, .site-footer, .rich-content ) { -webkit-backdrop-filter: blur(10px) brightness(.84) !important; backdrop-filter: blur(10px) brightness(.84) !important; } }