/* ================================================================ CINEMATIC ISOLATION | cinematic-isolation.css ---------------------------------------------------------------- Scopes a *minimal* defensive reset under #sm-cinematic-app so the cinematic homepage is shielded from MasterStudy / Elementor / Woo style leakage without overpowering the cinematic component classes in main.css / index.css / consultation.css. Specificity strategy -------------------- Every reset selector is wrapped in :where(#sm-cinematic-app) so the wrapper contributes ZERO specificity. The reset thus has only the weight of the element/pseudo-class it targets: :where(#sm-cinematic-app) button -> (0,0,0,1) :where(#sm-cinematic-app) button:hover -> (0,0,1,1) Cinematic components — .magnetic-btn, .stack-dot, .nav-cta, .bg-brand-crimson, etc. — sit at (0,0,1,0) or higher, so they ALWAYS win against the reset. UA defaults are still beaten because the reset still has class-level / element-level weight. What's intentionally NOT reset here ----------------------------------- - `background` on buttons (would wipe .stack-dot fills, .magnetic-btn backgrounds, .c-modal-arrow circles, etc.) - `padding` on buttons / lists (cinematic component classes own these) - `:hover` paint (cinematic components own these too) ================================================================ */ /* ─── Navigation responsive rules ───────────────────────────────── The navbar (#navbar) lives OUTSIDE #sm-cinematic-app — we therefore target it directly. We deliberately avoid Tailwind's `.hidden` / `.lg:flex` chain on cinematic nav lists because MasterStudy and other parent themes ship their own `.hidden { display: none !important; }` that overrides Tailwind responsive utilities. The custom `sm-nav-*` classes below are namespaced so no parent CSS collides with them. Breakpoint contract (matches CLAUDE.md §8 canonical breakpoints): < 1024px → desktop nav hidden, hamburger visible >= 1024px → desktop nav visible (flex), hamburger hidden ───────────────────────────────────────────────────────────────── */ #navbar .sm-nav-primary { display: none; list-style: none; margin: 0; padding: 0; } #navbar .sm-nav-primary > li { margin: 0; padding: 0; list-style: none; } #navbar .sm-nav-hamburger { display: inline-flex; } /* Consultation CTA — namespaced class instead of Tailwind's `hidden lg:inline-flex` (which parent-theme `.hidden { !important }` would kill). Hidden below the desktop breakpoint, shown >=1024px. */ #navbar .sm-nav-cta { display: none; } @media (min-width: 1024px) { #navbar .sm-nav-primary { display: flex; align-items: center; gap: 2rem; } #navbar .sm-nav-hamburger { display: none; } #navbar .sm-nav-cta { display: inline-flex; align-items: center; } } @media (min-width: 1280px) { #navbar .sm-nav-primary { gap: 2.5rem; } } /* WordPress menu items wrap their label in . The cinematic typography lives on that span (via wp_nav_menu's link_before / link_after). Make sure the parent doesn't add stray decoration or block layout from MasterStudy. */ #navbar .sm-nav-primary a { display: inline-block; color: inherit; text-decoration: none; line-height: 1; } /* Current-menu-item / current page indicator — keeps active link in brand crimson. */ #navbar .sm-nav-primary .current-menu-item > a > .nav-link, #navbar .sm-nav-primary .current_page_item > a > .nav-link, #navbar .sm-nav-primary .current-menu-ancestor > a > .nav-link { color: #BB2649; } #sm-cinematic-app { /* NOTE: deliberately NO `z-index` here. `position: relative` + `z-index: 0` would create a stacking context that traps the testimonial #c-modal (z-[100]) beneath the navbar (z-50, rendered OUTSIDE this wrapper). Without z-index, the modal bubbles to the root stacking context and paints above everything. */ position: relative; margin: 0; padding: 0; width: 100%; font-family: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; /* normal baseline — MasterStudy sets 600 on body. */ color: var(--text-primary, #1A0D14); background: var(--bg, #F9F6F7); font-size: 16px; line-height: 1.55; } /* Drop aggressive container max-widths from parent themes. */ #sm-cinematic-app, #sm-cinematic-app > main { max-width: none !important; } /* ─── Typography — element defaults, NEVER component overrides ─── */ :where(#sm-cinematic-app) h1, :where(#sm-cinematic-app) h2, :where(#sm-cinematic-app) h3, :where(#sm-cinematic-app) h4, :where(#sm-cinematic-app) h5, :where(#sm-cinematic-app) h6 { margin: 0; padding: 0; color: inherit; font-weight: inherit; /* inherit wrapper baseline (400). .font-display and Tailwind `font-{light,medium,bold}` etc. override per-element. */ letter-spacing: 0; text-transform: none; line-height: 1.05; } :where(#sm-cinematic-app) .font-display { font-family: 'BUNDAYCLEAN', 'Bebas Neue', system-ui, sans-serif; font-weight: 400; letter-spacing: 0; } :where(#sm-cinematic-app) p { margin: 0; padding: 0; } /* ─── Lists — strip LMS bullets / paddings, but leave .stack-deck etc. alone ─── */ :where(#sm-cinematic-app) ul, :where(#sm-cinematic-app) ol { list-style: none; margin: 0; padding: 0; } :where(#sm-cinematic-app) li { margin: 0; padding: 0; } /* ─── Blockquote — kill LMS quotes, border, padding, italics ─── */ :where(#sm-cinematic-app) blockquote { margin: 0; padding: 0; border: 0; background: transparent; font-style: normal; quotes: none; color: inherit; /* Force the cinematic body font — LMS/Elementor leak a serif/quote font onto blockquote in both EN (Space Grotesk) and AR (Arabic font). `inherit !important` re-anchors it to #sm-cinematic-app. */ font-family: inherit !important; } :where(#sm-cinematic-app) blockquote::before, :where(#sm-cinematic-app) blockquote::after { content: none; } :where(#sm-cinematic-app) blockquote cite { font-style: normal; } /* Restore the consult section's pull-quote rule that the reset above intentionally wiped (matches the static prototype). Higher specificity via .consult-quote so it always paints. */ :where(#sm-cinematic-app) .consult-quote { padding-left: 1.25rem; border-left: 2px solid #BB2649; } /* ─── Buttons — strip UA chrome ONLY (font, border, appearance). Backgrounds, paddings, hovers belong to component classes. ─── */ :where(#sm-cinematic-app) button, :where(#sm-cinematic-app) input[type="button"], :where(#sm-cinematic-app) input[type="submit"] { font-family: inherit; font-size: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } /* ─── Defeat parent-theme `button:hover { background: transparent }` ─── MasterStudy / Woo inject hover-background overrides on bare `button` (specificity 0,1,1) that beat Tailwind's `.bg-brand-*` utilities (specificity 0,1,0). We re-assert the brand backgrounds at equal specificity (class + pseudo = 0,1,1) — because isolation CSS loads AFTER the parent stylesheet, we win on source order. */ :where(#sm-cinematic-app) .bg-brand-crimson:hover, :where(#sm-cinematic-app) .bg-brand-crimson:focus, :where(#sm-cinematic-app) .bg-brand-crimson:active { background-color: #BB2649; } :where(#sm-cinematic-app) .bg-brand-plum:hover, :where(#sm-cinematic-app) .bg-brand-plum:focus, :where(#sm-cinematic-app) .bg-brand-plum:active { background-color: #471C2F; } :where(#sm-cinematic-app) .bg-brand-red:hover, :where(#sm-cinematic-app) .bg-brand-red:focus, :where(#sm-cinematic-app) .bg-brand-red:active { background-color: #DB343B; } :where(#sm-cinematic-app) .bg-brand-ivory:hover, :where(#sm-cinematic-app) .bg-brand-ivory:focus, :where(#sm-cinematic-app) .bg-brand-ivory:active { background-color: #F9F6F7; } :where(#sm-cinematic-app) .bg-white:hover, :where(#sm-cinematic-app) .bg-white:focus { background-color: #ffffff; } :where(#sm-cinematic-app) .bg-black:hover, :where(#sm-cinematic-app) .bg-black:focus { background-color: #000000; } /* ─── Links — strip LMS underline / color, let components own paint ─── */ :where(#sm-cinematic-app) a, :where(#sm-cinematic-app) a:hover, :where(#sm-cinematic-app) a:focus, :where(#sm-cinematic-app) a:active, :where(#sm-cinematic-app) a:visited { color: inherit; text-decoration: none; background: transparent; box-shadow: none; } /* :hover at :where() scope is spec (0,1,1) — Tailwind's `.hover\:text-brand-crimson:hover` (also 0,1,1) wins by SOURCE ORDER because page CSS loads after isolation. Brand hovers therefore still paint, but the parent theme's bare `a:hover { color: ... }` rule (spec 0,1,1, but loaded BEFORE us via the parent style enqueue) loses. */ /* ─── Form inputs (only used by embed slots / external embeds) ─── */ :where(#sm-cinematic-app) input, :where(#sm-cinematic-app) textarea, :where(#sm-cinematic-app) select { font-family: inherit; font-size: inherit; color: inherit; } /* ─── Images / SVG / figure ─── */ :where(#sm-cinematic-app) img, :where(#sm-cinematic-app) svg { max-width: 100%; height: auto; vertical-align: middle; border: 0; } :where(#sm-cinematic-app) figure { margin: 0; padding: 0; background: transparent; box-shadow: none; } /* ─── Elementor inside cinematic scope ─── */ :where(#sm-cinematic-app) .samaan-embed-slot .elementor-section, :where(#sm-cinematic-app) .samaan-embed-slot .elementor-section .elementor-container, :where(#sm-cinematic-app) .samaan-embed-slot .e-con, :where(#sm-cinematic-app) .samaan-embed-slot .e-con-inner { max-width: none; } :where(#sm-cinematic-app) .samaan-editor-content .elementor-section, :where(#sm-cinematic-app) .samaan-editor-content .elementor-container, :where(#sm-cinematic-app) .samaan-editor-content .e-con { max-width: 100%; } /* ═══════════════════════════════════════════════════════════════ PART 01 — ELEMENTOR FULL-WIDTH LAYOUT ENFORCEMENT ─────────────────────────────────────────────────────────────── Every cinematic widget paints its own full-bleed background and owns its internal max-width (max-w-screen-xl = 1280px) + padding. Elementor's default boxed section/container wrappers would clamp that to the theme content width and break: - full-bleed section backgrounds (dark inversion, finale bloom) - GSAP pin offset math (a narrower section mis-measures) - horizontal-scrub width calculations (about-track / c-wall) So inside #sm-cinematic-app every Elementor section, column and container is forced to 100% width with zero injected gutter. The cinematic widget's OWN inner wrapper restores the 1280px grid. Use a real boxed layout only by opting OUT with `.sm-boxed`. ═══════════════════════════════════════════════════════════════ */ :where(#sm-cinematic-app) .elementor-section:not(.sm-boxed), :where(#sm-cinematic-app) .elementor-section:not(.sm-boxed) > .elementor-container, :where(#sm-cinematic-app) .e-con:not(.sm-boxed), :where(#sm-cinematic-app) .e-con:not(.sm-boxed) > .e-con-inner { max-width: 100%; width: 100%; } /* Strip the column/gap padding Elementor injects between widgets — cinematic sections manage their own vertical rhythm. */ :where(#sm-cinematic-app) .elementor-section:not(.sm-boxed) > .elementor-container > .elementor-column > .elementor-widget-wrap, :where(#sm-cinematic-app) .e-con:not(.sm-boxed) > .e-con-inner { padding: 0; } /* A cinematic section widget should fill its host column edge-to-edge. */ :where(#sm-cinematic-app) .elementor-widget[class*="elementor-widget-sm-"] { width: 100%; } :where(#sm-cinematic-app) .elementor-widget[class*="elementor-widget-sm-"] > .elementor-widget-container { margin: 0; } /* The cinematic
each widget outputs is the full-bleed layer. */ :where(#sm-cinematic-app) .elementor-widget-container > section[class*="-section"] { width: 100%; } /* ─── WPML language switcher ─── */ :where(#sm-cinematic-app) .wpml-ls-statics-shortcode-actions ul, :where(#sm-cinematic-app) .wpml-ls-legacy-list-horizontal ul, :where(#sm-cinematic-app) .wpml-ls ul { display: flex; gap: 0.75rem; flex-wrap: wrap; list-style: none; } /* ─── RTL ─── */ #sm-cinematic-app[dir="rtl"] .consult-quote { padding-left: 0; padding-right: 1.25rem; border-left: 0; border-right: 2px solid #BB2649; } #sm-cinematic-app[dir="rtl"] .magnetic-btn svg { transform: scaleX(-1); } /* ─── WooCommerce bleed on body classes ─── */ body.woocommerce :where(#sm-cinematic-app) h2, body.woocommerce-page :where(#sm-cinematic-app) h2 { margin: 0; color: inherit; } /* ─── Elementor editor preview ─── */ body.samaan-elementor-preview :where(#sm-cinematic-app) .hero-kinetic-bg, body.samaan-elementor-preview :where(#sm-cinematic-app) .finale-deco-word, body.samaan-elementor-preview :where(#sm-cinematic-app) .finale-bloom { opacity: 0.25; } /* ─── Editor-content section (rich content below cinematic sections) ─── */ :where(#sm-cinematic-app) .samaan-editor-content { color: var(--text-primary); } :where(#sm-cinematic-app) .samaan-editor-content p, :where(#sm-cinematic-app) .samaan-editor-content ul, :where(#sm-cinematic-app) .samaan-editor-content ol { margin: 0 0 1em 0; } :where(#sm-cinematic-app) .samaan-editor-content ul { list-style: disc; padding-left: 1.25em; } :where(#sm-cinematic-app) .samaan-editor-content ol { list-style: decimal; padding-left: 1.25em; } :where(#sm-cinematic-app) .samaan-editor-content h1, :where(#sm-cinematic-app) .samaan-editor-content h2, :where(#sm-cinematic-app) .samaan-editor-content h3, :where(#sm-cinematic-app) .samaan-editor-content h4 { font-family: 'BUNDAYCLEAN', 'Bebas Neue', sans-serif; margin: 1.25em 0 0.5em 0; line-height: 1.05; } /* ═══════════════════════════════════════════════════════════════ TASK 06b — DIRECTION-LOGICAL FIXES (apply to BOTH LTR & RTL) Using CSS logical properties so one rule serves both directions with no [dir]-scoped duplication. ═══════════════════════════════════════════════════════════════ */ /* Hero CTA dropdown — the markup ships Tailwind `left-0`, which in RTL throws the 288px panel off the right edge. Re-anchor with a logical property: inline-start = left in LTR, right in RTL. text-align is logical too so the choices read from the correct edge. */ #sm-cinematic-app #hero-cta-menu { inset-inline-start: 0 !important; inset-inline-end: auto !important; text-align: start; } #sm-cinematic-app #hero-cta-menu .hero-cta-choice, #sm-cinematic-app #hero-cta-menu .hero-cta-choice > span, #sm-cinematic-app #hero-cta-menu .hero-subopt-link { text-align: start; }